@charset "UTF-8";
/*!
  Ionicons, v2.0.0
  Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
  https://twitter.com/benjsperry  https://twitter.com/ionicframework
  MIT License: https://github.com/driftyco/ionicons

  Android-style icons originally built by Google’s
  Material Design Icons: https://github.com/google/material-design-icons
  used under CC BY http://creativecommons.org/licenses/by/4.0/
  Modified icons to fit ionicon’s grid from original.
*/
@font-face {
  font-family: "Ionicons";
  src: url("../fonts/ionicons.eot?v=2.0.0");
  src: url("../fonts/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"), url("../fonts/ionicons.ttf?v=2.0.0") format("truetype"), url("../fonts/ionicons.woff?v=2.0.0") format("woff"), url("../fonts/ionicons.svg?v=2.0.0#Ionicons") format("svg");
  font-weight: normal;
  font-style: normal;
}
.ion, .ionicons,
.ion-alert:before,
.ion-alert-circled:before,
.ion-android-add:before,
.ion-android-add-circle:before,
.ion-android-alarm-clock:before,
.ion-android-alert:before,
.ion-android-apps:before,
.ion-android-archive:before,
.ion-android-arrow-back:before,
.ion-android-arrow-down:before,
.ion-android-arrow-dropdown:before,
.ion-android-arrow-dropdown-circle:before,
.ion-android-arrow-dropleft:before,
.ion-android-arrow-dropleft-circle:before,
.ion-android-arrow-dropright:before,
.ion-android-arrow-dropright-circle:before,
.ion-android-arrow-dropup:before,
.ion-android-arrow-dropup-circle:before,
.ion-android-arrow-forward:before,
.ion-android-arrow-up:before,
.ion-android-attach:before,
.ion-android-bar:before,
.ion-android-bicycle:before,
.ion-android-boat:before,
.ion-android-bookmark:before,
.ion-android-bulb:before,
.ion-android-bus:before,
.ion-android-calendar:before,
.ion-android-call:before,
.ion-android-camera:before,
.ion-android-cancel:before,
.ion-android-car:before,
.ion-android-cart:before,
.ion-android-chat:before,
.ion-android-checkbox:before,
.ion-android-checkbox-blank:before,
.ion-android-checkbox-outline:before,
.ion-android-checkbox-outline-blank:before,
.ion-android-checkmark-circle:before,
.ion-android-clipboard:before,
.ion-android-close:before,
.ion-android-cloud:before,
.ion-android-cloud-circle:before,
.ion-android-cloud-done:before,
.ion-android-cloud-outline:before,
.ion-android-color-palette:before,
.ion-android-compass:before,
.ion-android-contact:before,
.ion-android-contacts:before,
.ion-android-contract:before,
.ion-android-create:before,
.ion-android-delete:before,
.ion-android-desktop:before,
.ion-android-document:before,
.ion-android-done:before,
.ion-android-done-all:before,
.ion-android-download:before,
.ion-android-drafts:before,
.ion-android-exit:before,
.ion-android-expand:before,
.ion-android-favorite:before,
.ion-android-favorite-outline:before,
.ion-android-film:before,
.ion-android-folder:before,
.ion-android-folder-open:before,
.ion-android-funnel:before,
.ion-android-globe:before,
.ion-android-hand:before,
.ion-android-hangout:before,
.ion-android-happy:before,
.ion-android-home:before,
.ion-android-image:before,
.ion-android-laptop:before,
.ion-android-list:before,
.ion-android-locate:before,
.ion-android-lock:before,
.ion-android-mail:before,
.ion-android-map:before,
.ion-android-menu:before,
.ion-android-microphone:before,
.ion-android-microphone-off:before,
.ion-android-more-horizontal:before,
.ion-android-more-vertical:before,
.ion-android-navigate:before,
.ion-android-notifications:before,
.ion-android-notifications-none:before,
.ion-android-notifications-off:before,
.ion-android-open:before,
.ion-android-options:before,
.ion-android-people:before,
.ion-android-person:before,
.ion-android-person-add:before,
.ion-android-phone-landscape:before,
.ion-android-phone-portrait:before,
.ion-android-pin:before,
.ion-android-plane:before,
.ion-android-playstore:before,
.ion-android-print:before,
.ion-android-radio-button-off:before,
.ion-android-radio-button-on:before,
.ion-android-refresh:before,
.ion-android-remove:before,
.ion-android-remove-circle:before,
.ion-android-restaurant:before,
.ion-android-sad:before,
.ion-android-search:before,
.ion-android-send:before,
.ion-android-settings:before,
.ion-android-share:before,
.ion-android-share-alt:before,
.ion-android-star:before,
.ion-android-star-half:before,
.ion-android-star-outline:before,
.ion-android-stopwatch:before,
.ion-android-subway:before,
.ion-android-sunny:before,
.ion-android-sync:before,
.ion-android-textsms:before,
.ion-android-time:before,
.ion-android-train:before,
.ion-android-unlock:before,
.ion-android-upload:before,
.ion-android-volume-down:before,
.ion-android-volume-mute:before,
.ion-android-volume-off:before,
.ion-android-volume-up:before,
.ion-android-walk:before,
.ion-android-warning:before,
.ion-android-watch:before,
.ion-android-wifi:before,
.ion-aperture:before,
.ion-archive:before,
.ion-arrow-down-a:before,
.ion-arrow-down-b:before,
.ion-arrow-down-c:before,
.ion-arrow-expand:before,
.ion-arrow-graph-down-left:before,
.ion-arrow-graph-down-right:before,
.ion-arrow-graph-up-left:before,
.ion-arrow-graph-up-right:before,
.ion-arrow-left-a:before,
.ion-arrow-left-b:before,
.ion-arrow-left-c:before,
.ion-arrow-move:before,
.ion-arrow-resize:before,
.ion-arrow-return-left:before,
.ion-arrow-return-right:before,
.ion-arrow-right-a:before,
.ion-arrow-right-b:before,
.ion-arrow-right-c:before,
.ion-arrow-shrink:before,
.ion-arrow-swap:before,
.ion-arrow-up-a:before,
.ion-arrow-up-b:before,
.ion-arrow-up-c:before,
.ion-asterisk:before,
.ion-at:before,
.ion-backspace:before,
.ion-backspace-outline:before,
.ion-bag:before,
.ion-battery-charging:before,
.ion-battery-empty:before,
.ion-battery-full:before,
.ion-battery-half:before,
.ion-battery-low:before,
.ion-beaker:before,
.ion-beer:before,
.ion-bluetooth:before,
.ion-bonfire:before,
.ion-bookmark:before,
.ion-bowtie:before,
.ion-briefcase:before,
.ion-bug:before,
.ion-calculator:before,
.ion-calendar:before,
.ion-camera:before,
.ion-card:before,
.ion-cash:before,
.ion-chatbox:before,
.ion-chatbox-working:before,
.ion-chatboxes:before,
.ion-chatbubble:before,
.ion-chatbubble-working:before,
.ion-chatbubbles:before,
.ion-checkmark:before,
.ion-checkmark-circled:before,
.ion-checkmark-round:before,
.ion-chevron-down:before,
.ion-chevron-left:before,
.ion-chevron-right:before,
.ion-chevron-up:before,
.ion-clipboard:before,
.ion-clock:before,
.ion-close:before,
.ion-close-circled:before,
.ion-close-round:before,
.ion-closed-captioning:before,
.ion-cloud:before,
.ion-code:before,
.ion-code-download:before,
.ion-code-working:before,
.ion-coffee:before,
.ion-compass:before,
.ion-compose:before,
.ion-connection-bars:before,
.ion-contrast:before,
.ion-crop:before,
.ion-cube:before,
.ion-disc:before,
.ion-document:before,
.ion-document-text:before,
.ion-drag:before,
.ion-earth:before,
.profile-link-icon.website:before,
.ion-easel:before,
.ion-edit:before,
.ion-egg:before,
.ion-eject:before,
.ion-email:before,
.ion-email-unread:before,
.ion-erlenmeyer-flask:before,
.ion-erlenmeyer-flask-bubbles:before,
.ion-eye:before,
.ion-eye-disabled:before,
.ion-female:before,
.ion-filing:before,
.ion-film-marker:before,
.ion-fireball:before,
.ion-flag:before,
.ion-flame:before,
.ion-flash:before,
.ion-flash-off:before,
.ion-folder:before,
.ion-fork:before,
.ion-fork-repo:before,
.ion-forward:before,
.ion-funnel:before,
.ion-gear-a:before,
.ion-gear-b:before,
.ion-grid:before,
.ion-hammer:before,
.ion-happy:before,
.ion-happy-outline:before,
.ion-headphone:before,
.ion-heart:before,
.ion-heart-broken:before,
.ion-help:before,
.ion-help-buoy:before,
.ion-help-circled:before,
.ion-home:before,
.ion-icecream:before,
.ion-image:before,
.ion-images:before,
.ion-information:before,
.ion-information-circled:before,
.ion-ionic:before,
.ion-ios-alarm:before,
.ion-ios-alarm-outline:before,
.ion-ios-albums:before,
.ion-ios-albums-outline:before,
.ion-ios-americanfootball:before,
.ion-ios-americanfootball-outline:before,
.ion-ios-analytics:before,
.ion-ios-analytics-outline:before,
.ion-ios-arrow-back:before,
.ion-ios-arrow-down:before,
.ion-ios-arrow-forward:before,
.ion-ios-arrow-left:before,
.ion-ios-arrow-right:before,
.ion-ios-arrow-thin-down:before,
.ion-ios-arrow-thin-left:before,
.ion-ios-arrow-thin-right:before,
.ion-ios-arrow-thin-up:before,
.ion-ios-arrow-up:before,
.ion-ios-at:before,
.ion-ios-at-outline:before,
.ion-ios-barcode:before,
.ion-ios-barcode-outline:before,
.ion-ios-baseball:before,
.ion-ios-baseball-outline:before,
.ion-ios-basketball:before,
.ion-ios-basketball-outline:before,
.ion-ios-bell:before,
.ion-ios-bell-outline:before,
.ion-ios-body:before,
.ion-ios-body-outline:before,
.ion-ios-bolt:before,
.ion-ios-bolt-outline:before,
.ion-ios-book:before,
.ion-ios-book-outline:before,
.ion-ios-bookmarks:before,
.ion-ios-bookmarks-outline:before,
.ion-ios-box:before,
.ion-ios-box-outline:before,
.ion-ios-briefcase:before,
.ion-ios-briefcase-outline:before,
.ion-ios-browsers:before,
.ion-ios-browsers-outline:before,
.ion-ios-calculator:before,
.ion-ios-calculator-outline:before,
.ion-ios-calendar:before,
.ion-ios-calendar-outline:before,
.ion-ios-camera:before,
.ion-ios-camera-outline:before,
.ion-ios-cart:before,
.ion-ios-cart-outline:before,
.ion-ios-chatboxes:before,
.ion-ios-chatboxes-outline:before,
.ion-ios-chatbubble:before,
.ion-ios-chatbubble-outline:before,
.ion-ios-checkmark:before,
.ion-ios-checkmark-empty:before,
.ion-ios-checkmark-outline:before,
.ion-ios-circle-filled:before,
.ion-ios-circle-outline:before,
.ion-ios-clock:before,
.ion-ios-clock-outline:before,
.ion-ios-close:before,
.ion-ios-close-empty:before,
.ion-ios-close-outline:before,
.ion-ios-cloud:before,
.ion-ios-cloud-download:before,
.ion-ios-cloud-download-outline:before,
.ion-ios-cloud-outline:before,
.ion-ios-cloud-upload:before,
.ion-ios-cloud-upload-outline:before,
.ion-ios-cloudy:before,
.ion-ios-cloudy-night:before,
.ion-ios-cloudy-night-outline:before,
.ion-ios-cloudy-outline:before,
.ion-ios-cog:before,
.ion-ios-cog-outline:before,
.ion-ios-color-filter:before,
.ion-ios-color-filter-outline:before,
.ion-ios-color-wand:before,
.ion-ios-color-wand-outline:before,
.ion-ios-compose:before,
.ion-ios-compose-outline:before,
.ion-ios-contact:before,
.ion-ios-contact-outline:before,
.ion-ios-copy:before,
.ion-ios-copy-outline:before,
.ion-ios-crop:before,
.ion-ios-crop-strong:before,
.ion-ios-download:before,
.ion-ios-download-outline:before,
.ion-ios-drag:before,
.ion-ios-email:before,
.ion-ios-email-outline:before,
.ion-ios-eye:before,
.ion-ios-eye-outline:before,
.ion-ios-fastforward:before,
.ion-ios-fastforward-outline:before,
.ion-ios-filing:before,
.ion-ios-filing-outline:before,
.ion-ios-film:before,
.ion-ios-film-outline:before,
.ion-ios-flag:before,
.ion-ios-flag-outline:before,
.ion-ios-flame:before,
.ion-ios-flame-outline:before,
.ion-ios-flask:before,
.ion-ios-flask-outline:before,
.ion-ios-flower:before,
.ion-ios-flower-outline:before,
.ion-ios-folder:before,
.ion-ios-folder-outline:before,
.ion-ios-football:before,
.ion-ios-football-outline:before,
.ion-ios-game-controller-a:before,
.ion-ios-game-controller-a-outline:before,
.ion-ios-game-controller-b:before,
.ion-ios-game-controller-b-outline:before,
.ion-ios-gear:before,
.ion-ios-gear-outline:before,
.ion-ios-glasses:before,
.ion-ios-glasses-outline:before,
.ion-ios-grid-view:before,
.ion-ios-grid-view-outline:before,
.ion-ios-heart:before,
.ion-ios-heart-outline:before,
.ion-ios-help:before,
.ion-ios-help-empty:before,
.ion-ios-help-outline:before,
.ion-ios-home:before,
.ion-ios-home-outline:before,
.ion-ios-infinite:before,
.ion-ios-infinite-outline:before,
.ion-ios-information:before,
.ion-ios-information-empty:before,
.ion-ios-information-outline:before,
.ion-ios-ionic-outline:before,
.ion-ios-keypad:before,
.ion-ios-keypad-outline:before,
.ion-ios-lightbulb:before,
.ion-ios-lightbulb-outline:before,
.ion-ios-list:before,
.ion-ios-list-outline:before,
.ion-ios-location:before,
.ion-ios-location-outline:before,
.ion-ios-locked:before,
.ion-ios-locked-outline:before,
.ion-ios-loop:before,
.ion-ios-loop-strong:before,
.ion-ios-medical:before,
.ion-ios-medical-outline:before,
.ion-ios-medkit:before,
.ion-ios-medkit-outline:before,
.ion-ios-mic:before,
.ion-ios-mic-off:before,
.ion-ios-mic-outline:before,
.ion-ios-minus:before,
.ion-ios-minus-empty:before,
.ion-ios-minus-outline:before,
.ion-ios-monitor:before,
.ion-ios-monitor-outline:before,
.ion-ios-moon:before,
.ion-ios-moon-outline:before,
.ion-ios-more:before,
.ion-ios-more-outline:before,
.ion-ios-musical-note:before,
.ion-ios-musical-notes:before,
.ion-ios-navigate:before,
.ion-ios-navigate-outline:before,
.ion-ios-nutrition:before,
.ion-ios-nutrition-outline:before,
.ion-ios-paper:before,
.ion-ios-paper-outline:before,
.ion-ios-paperplane:before,
.ion-ios-paperplane-outline:before,
.ion-ios-partlysunny:before,
.ion-ios-partlysunny-outline:before,
.ion-ios-pause:before,
.ion-ios-pause-outline:before,
.ion-ios-paw:before,
.ion-ios-paw-outline:before,
.ion-ios-people:before,
.ion-ios-people-outline:before,
.ion-ios-person:before,
.ion-ios-person-outline:before,
.ion-ios-personadd:before,
.ion-ios-personadd-outline:before,
.ion-ios-photos:before,
.ion-ios-photos-outline:before,
.ion-ios-pie:before,
.ion-ios-pie-outline:before,
.ion-ios-pint:before,
.ion-ios-pint-outline:before,
.ion-ios-play:before,
.ion-ios-play-outline:before,
.ion-ios-plus:before,
.ion-ios-plus-empty:before,
.ion-ios-plus-outline:before,
.ion-ios-pricetag:before,
.ion-ios-pricetag-outline:before,
.ion-ios-pricetags:before,
.ion-ios-pricetags-outline:before,
.ion-ios-printer:before,
.ion-ios-printer-outline:before,
.ion-ios-pulse:before,
.ion-ios-pulse-strong:before,
.ion-ios-rainy:before,
.ion-ios-rainy-outline:before,
.ion-ios-recording:before,
.ion-ios-recording-outline:before,
.ion-ios-redo:before,
.ion-ios-redo-outline:before,
.ion-ios-refresh:before,
.ion-ios-refresh-empty:before,
.ion-ios-refresh-outline:before,
.ion-ios-reload:before,
.ion-ios-reverse-camera:before,
.ion-ios-reverse-camera-outline:before,
.ion-ios-rewind:before,
.ion-ios-rewind-outline:before,
.ion-ios-rose:before,
.ion-ios-rose-outline:before,
.ion-ios-search:before,
.ion-ios-search-strong:before,
.ion-ios-settings:before,
.ion-ios-settings-strong:before,
.ion-ios-shuffle:before,
.ion-ios-shuffle-strong:before,
.ion-ios-skipbackward:before,
.ion-ios-skipbackward-outline:before,
.ion-ios-skipforward:before,
.ion-ios-skipforward-outline:before,
.ion-ios-snowy:before,
.ion-ios-speedometer:before,
.ion-ios-speedometer-outline:before,
.ion-ios-star:before,
.ion-ios-star-half:before,
.ion-ios-star-outline:before,
.ion-ios-stopwatch:before,
.ion-ios-stopwatch-outline:before,
.ion-ios-sunny:before,
.ion-ios-sunny-outline:before,
.ion-ios-telephone:before,
.ion-ios-telephone-outline:before,
.ion-ios-tennisball:before,
.ion-ios-tennisball-outline:before,
.ion-ios-thunderstorm:before,
.ion-ios-thunderstorm-outline:before,
.ion-ios-time:before,
.ion-ios-time-outline:before,
.ion-ios-timer:before,
.ion-ios-timer-outline:before,
.ion-ios-toggle:before,
.ion-ios-toggle-outline:before,
.ion-ios-trash:before,
.ion-ios-trash-outline:before,
.ion-ios-undo:before,
.ion-ios-undo-outline:before,
.ion-ios-unlocked:before,
.ion-ios-unlocked-outline:before,
.ion-ios-upload:before,
.ion-ios-upload-outline:before,
.ion-ios-videocam:before,
.ion-ios-videocam-outline:before,
.ion-ios-volume-high:before,
.ion-ios-volume-low:before,
.ion-ios-wineglass:before,
.ion-ios-wineglass-outline:before,
.ion-ios-world:before,
.ion-ios-world-outline:before,
.ion-ipad:before,
.ion-iphone:before,
.ion-ipod:before,
.ion-jet:before,
.ion-key:before,
.ion-knife:before,
.ion-laptop:before,
.ion-leaf:before,
.ion-levels:before,
.ion-lightbulb:before,
.ion-link:before,
.ion-load-a:before,
.ion-load-b:before,
.ion-load-c:before,
.ion-load-d:before,
.ion-location:before,
.ion-lock-combination:before,
.ion-locked:before,
.ion-log-in:before,
.ion-log-out:before,
.ion-loop:before,
.ion-magnet:before,
.ion-male:before,
.ion-man:before,
.ion-map:before,
.ion-medkit:before,
.ion-merge:before,
.ion-mic-a:before,
.ion-mic-b:before,
.ion-mic-c:before,
.ion-minus:before,
.ion-minus-circled:before,
.ion-minus-round:before,
.ion-model-s:before,
.ion-monitor:before,
.ion-more:before,
.ion-mouse:before,
.ion-music-note:before,
.ion-navicon:before,
.ion-navicon-round:before,
.ion-navigate:before,
.ion-network:before,
.ion-no-smoking:before,
.ion-nuclear:before,
.ion-outlet:before,
.ion-paintbrush:before,
.ion-paintbucket:before,
.ion-paper-airplane:before,
.ion-paperclip:before,
.ion-pause:before,
.ion-person:before,
.ion-person-add:before,
.ion-person-stalker:before,
.ion-pie-graph:before,
.ion-pin:before,
.ion-pinpoint:before,
.ion-pizza:before,
.ion-plane:before,
.ion-planet:before,
.ion-play:before,
.ion-playstation:before,
.ion-plus:before,
.ion-plus-circled:before,
.ion-plus-round:before,
.ion-podium:before,
.ion-pound:before,
.ion-power:before,
.ion-pricetag:before,
.ion-pricetags:before,
.ion-printer:before,
.ion-pull-request:before,
.ion-qr-scanner:before,
.ion-quote:before,
.ion-radio-waves:before,
.ion-record:before,
.ion-refresh:before,
.ion-reply:before,
.ion-reply-all:before,
.ion-ribbon-a:before,
.ion-ribbon-b:before,
.ion-sad:before,
.ion-sad-outline:before,
.ion-scissors:before,
.ion-search:before,
.ion-settings:before,
.ion-share:before,
.ion-shuffle:before,
.ion-skip-backward:before,
.ion-skip-forward:before,
.ion-social-android:before,
.ion-social-android-outline:before,
.ion-social-angular:before,
.ion-social-angular-outline:before,
.ion-social-apple:before,
.ion-social-apple-outline:before,
.ion-social-bitcoin:before,
.ion-social-bitcoin-outline:before,
.ion-social-buffer:before,
.ion-social-buffer-outline:before,
.ion-social-chrome:before,
.ion-social-chrome-outline:before,
.ion-social-codepen:before,
.ion-social-codepen-outline:before,
.ion-social-css3:before,
.ion-social-css3-outline:before,
.ion-social-designernews:before,
.ion-social-designernews-outline:before,
.ion-social-dribbble:before,
.ion-social-dribbble-outline:before,
.profile-link-icon.dribbble:before,
.ion-social-dropbox:before,
.ion-social-dropbox-outline:before,
.ion-social-euro:before,
.ion-social-euro-outline:before,
.ion-social-facebook:before,
.ion-social-facebook-outline:before,
.ion-social-foursquare:before,
.ion-social-foursquare-outline:before,
.ion-social-freebsd-devil:before,
.ion-social-github:before,
.profile-link-icon.git_hub:before,
.ion-social-github-outline:before,
.ion-social-google:before,
.ion-social-google-outline:before,
.ion-social-googleplus:before,
.ion-social-googleplus-outline:before,
.ion-social-hackernews:before,
.ion-social-hackernews-outline:before,
.ion-social-html5:before,
.ion-social-html5-outline:before,
.ion-social-instagram:before,
.ion-social-instagram-outline:before,
.ion-social-javascript:before,
.ion-social-javascript-outline:before,
.ion-social-linkedin:before,
.ion-social-linkedin-outline:before,
.profile-link-icon.linked_in:before,
.ion-social-markdown:before,
.ion-social-nodejs:before,
.ion-social-octocat:before,
.ion-social-pinterest:before,
.ion-social-pinterest-outline:before,
.ion-social-python:before,
.ion-social-reddit:before,
.ion-social-reddit-outline:before,
.ion-social-rss:before,
.profile-link-icon.blog:before,
.ion-social-rss-outline:before,
.ion-social-sass:before,
.ion-social-skype:before,
.ion-social-skype-outline:before,
.ion-social-snapchat:before,
.ion-social-snapchat-outline:before,
.ion-social-tumblr:before,
.ion-social-tumblr-outline:before,
.ion-social-tux:before,
.ion-social-twitch:before,
.ion-social-twitch-outline:before,
.ion-social-twitter:before,
.profile-link-icon.twitter:before,
.ion-social-twitter-outline:before,
.ion-social-usd:before,
.ion-social-usd-outline:before,
.ion-social-vimeo:before,
.ion-social-vimeo-outline:before,
.ion-social-whatsapp:before,
.ion-social-whatsapp-outline:before,
.ion-social-windows:before,
.ion-social-windows-outline:before,
.ion-social-wordpress:before,
.ion-social-wordpress-outline:before,
.ion-social-yahoo:before,
.ion-social-yahoo-outline:before,
.ion-social-yen:before,
.ion-social-yen-outline:before,
.ion-social-youtube:before,
.ion-social-youtube-outline:before,
.ion-soup-can:before,
.ion-soup-can-outline:before,
.ion-speakerphone:before,
.ion-speedometer:before,
.ion-spoon:before,
.ion-star:before,
.ion-stats-bars:before,
.ion-steam:before,
.ion-stop:before,
.ion-thermometer:before,
.ion-thumbsdown:before,
.ion-thumbsup:before,
.ion-toggle:before,
.ion-toggle-filled:before,
.ion-transgender:before,
.ion-trash-a:before,
.ion-trash-b:before,
.ion-trophy:before,
.ion-tshirt:before,
.ion-tshirt-outline:before,
.ion-umbrella:before,
.ion-university:before,
.ion-unlocked:before,
.ion-upload:before,
.ion-usb:before,
.ion-videocamera:before,
.ion-volume-high:before,
.ion-volume-low:before,
.ion-volume-medium:before,
.ion-volume-mute:before,
.ion-wand:before,
.ion-waterdrop:before,
.ion-wifi:before,
.ion-wineglass:before,
.ion-woman:before,
.ion-wrench:before,
.ion-xbox:before {
  display: inline-block;
  font-family: "Ionicons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ion-alert:before {
  content: "\f101";
}

.ion-alert-circled:before {
  content: "\f100";
}

.ion-android-add:before {
  content: "\f2c7";
}

.ion-android-add-circle:before {
  content: "\f359";
}

.ion-android-alarm-clock:before {
  content: "\f35a";
}

.ion-android-alert:before {
  content: "\f35b";
}

.ion-android-apps:before {
  content: "\f35c";
}

.ion-android-archive:before {
  content: "\f2c9";
}

.ion-android-arrow-back:before {
  content: "\f2ca";
}

.ion-android-arrow-down:before {
  content: "\f35d";
}

.ion-android-arrow-dropdown:before {
  content: "\f35f";
}

.ion-android-arrow-dropdown-circle:before {
  content: "\f35e";
}

.ion-android-arrow-dropleft:before {
  content: "\f361";
}

.ion-android-arrow-dropleft-circle:before {
  content: "\f360";
}

.ion-android-arrow-dropright:before {
  content: "\f363";
}

.ion-android-arrow-dropright-circle:before {
  content: "\f362";
}

.ion-android-arrow-dropup:before {
  content: "\f365";
}

.ion-android-arrow-dropup-circle:before {
  content: "\f364";
}

.ion-android-arrow-forward:before {
  content: "\f30f";
}

.ion-android-arrow-up:before {
  content: "\f366";
}

.ion-android-attach:before {
  content: "\f367";
}

.ion-android-bar:before {
  content: "\f368";
}

.ion-android-bicycle:before {
  content: "\f369";
}

.ion-android-boat:before {
  content: "\f36a";
}

.ion-android-bookmark:before {
  content: "\f36b";
}

.ion-android-bulb:before {
  content: "\f36c";
}

.ion-android-bus:before {
  content: "\f36d";
}

.ion-android-calendar:before {
  content: "\f2d1";
}

.ion-android-call:before {
  content: "\f2d2";
}

.ion-android-camera:before {
  content: "\f2d3";
}

.ion-android-cancel:before {
  content: "\f36e";
}

.ion-android-car:before {
  content: "\f36f";
}

.ion-android-cart:before {
  content: "\f370";
}

.ion-android-chat:before {
  content: "\f2d4";
}

.ion-android-checkbox:before {
  content: "\f374";
}

.ion-android-checkbox-blank:before {
  content: "\f371";
}

.ion-android-checkbox-outline:before {
  content: "\f373";
}

.ion-android-checkbox-outline-blank:before {
  content: "\f372";
}

.ion-android-checkmark-circle:before {
  content: "\f375";
}

.ion-android-clipboard:before {
  content: "\f376";
}

.ion-android-close:before {
  content: "\f2d7";
}

.ion-android-cloud:before {
  content: "\f37a";
}

.ion-android-cloud-circle:before {
  content: "\f377";
}

.ion-android-cloud-done:before {
  content: "\f378";
}

.ion-android-cloud-outline:before {
  content: "\f379";
}

.ion-android-color-palette:before {
  content: "\f37b";
}

.ion-android-compass:before {
  content: "\f37c";
}

.ion-android-contact:before {
  content: "\f2d8";
}

.ion-android-contacts:before {
  content: "\f2d9";
}

.ion-android-contract:before {
  content: "\f37d";
}

.ion-android-create:before {
  content: "\f37e";
}

.ion-android-delete:before {
  content: "\f37f";
}

.ion-android-desktop:before {
  content: "\f380";
}

.ion-android-document:before {
  content: "\f381";
}

.ion-android-done:before {
  content: "\f383";
}

.ion-android-done-all:before {
  content: "\f382";
}

.ion-android-download:before {
  content: "\f2dd";
}

.ion-android-drafts:before {
  content: "\f384";
}

.ion-android-exit:before {
  content: "\f385";
}

.ion-android-expand:before {
  content: "\f386";
}

.ion-android-favorite:before {
  content: "\f388";
}

.ion-android-favorite-outline:before {
  content: "\f387";
}

.ion-android-film:before {
  content: "\f389";
}

.ion-android-folder:before {
  content: "\f2e0";
}

.ion-android-folder-open:before {
  content: "\f38a";
}

.ion-android-funnel:before {
  content: "\f38b";
}

.ion-android-globe:before {
  content: "\f38c";
}

.ion-android-hand:before {
  content: "\f2e3";
}

.ion-android-hangout:before {
  content: "\f38d";
}

.ion-android-happy:before {
  content: "\f38e";
}

.ion-android-home:before {
  content: "\f38f";
}

.ion-android-image:before {
  content: "\f2e4";
}

.ion-android-laptop:before {
  content: "\f390";
}

.ion-android-list:before {
  content: "\f391";
}

.ion-android-locate:before {
  content: "\f2e9";
}

.ion-android-lock:before {
  content: "\f392";
}

.ion-android-mail:before {
  content: "\f2eb";
}

.ion-android-map:before {
  content: "\f393";
}

.ion-android-menu:before {
  content: "\f394";
}

.ion-android-microphone:before {
  content: "\f2ec";
}

.ion-android-microphone-off:before {
  content: "\f395";
}

.ion-android-more-horizontal:before {
  content: "\f396";
}

.ion-android-more-vertical:before {
  content: "\f397";
}

.ion-android-navigate:before {
  content: "\f398";
}

.ion-android-notifications:before {
  content: "\f39b";
}

.ion-android-notifications-none:before {
  content: "\f399";
}

.ion-android-notifications-off:before {
  content: "\f39a";
}

.ion-android-open:before {
  content: "\f39c";
}

.ion-android-options:before {
  content: "\f39d";
}

.ion-android-people:before {
  content: "\f39e";
}

.ion-android-person:before {
  content: "\f3a0";
}

.ion-android-person-add:before {
  content: "\f39f";
}

.ion-android-phone-landscape:before {
  content: "\f3a1";
}

.ion-android-phone-portrait:before {
  content: "\f3a2";
}

.ion-android-pin:before {
  content: "\f3a3";
}

.ion-android-plane:before {
  content: "\f3a4";
}

.ion-android-playstore:before {
  content: "\f2f0";
}

.ion-android-print:before {
  content: "\f3a5";
}

.ion-android-radio-button-off:before {
  content: "\f3a6";
}

.ion-android-radio-button-on:before {
  content: "\f3a7";
}

.ion-android-refresh:before {
  content: "\f3a8";
}

.ion-android-remove:before {
  content: "\f2f4";
}

.ion-android-remove-circle:before {
  content: "\f3a9";
}

.ion-android-restaurant:before {
  content: "\f3aa";
}

.ion-android-sad:before {
  content: "\f3ab";
}

.ion-android-search:before {
  content: "\f2f5";
}

.ion-android-send:before {
  content: "\f2f6";
}

.ion-android-settings:before {
  content: "\f2f7";
}

.ion-android-share:before {
  content: "\f2f8";
}

.ion-android-share-alt:before {
  content: "\f3ac";
}

.ion-android-star:before {
  content: "\f2fc";
}

.ion-android-star-half:before {
  content: "\f3ad";
}

.ion-android-star-outline:before {
  content: "\f3ae";
}

.ion-android-stopwatch:before {
  content: "\f2fd";
}

.ion-android-subway:before {
  content: "\f3af";
}

.ion-android-sunny:before {
  content: "\f3b0";
}

.ion-android-sync:before {
  content: "\f3b1";
}

.ion-android-textsms:before {
  content: "\f3b2";
}

.ion-android-time:before {
  content: "\f3b3";
}

.ion-android-train:before {
  content: "\f3b4";
}

.ion-android-unlock:before {
  content: "\f3b5";
}

.ion-android-upload:before {
  content: "\f3b6";
}

.ion-android-volume-down:before {
  content: "\f3b7";
}

.ion-android-volume-mute:before {
  content: "\f3b8";
}

.ion-android-volume-off:before {
  content: "\f3b9";
}

.ion-android-volume-up:before {
  content: "\f3ba";
}

.ion-android-walk:before {
  content: "\f3bb";
}

.ion-android-warning:before {
  content: "\f3bc";
}

.ion-android-watch:before {
  content: "\f3bd";
}

.ion-android-wifi:before {
  content: "\f305";
}

.ion-aperture:before {
  content: "\f313";
}

.ion-archive:before {
  content: "\f102";
}

.ion-arrow-down-a:before {
  content: "\f103";
}

.ion-arrow-down-b:before {
  content: "\f104";
}

.ion-arrow-down-c:before {
  content: "\f105";
}

.ion-arrow-expand:before {
  content: "\f25e";
}

.ion-arrow-graph-down-left:before {
  content: "\f25f";
}

.ion-arrow-graph-down-right:before {
  content: "\f260";
}

.ion-arrow-graph-up-left:before {
  content: "\f261";
}

.ion-arrow-graph-up-right:before {
  content: "\f262";
}

.ion-arrow-left-a:before {
  content: "\f106";
}

.ion-arrow-left-b:before {
  content: "\f107";
}

.ion-arrow-left-c:before {
  content: "\f108";
}

.ion-arrow-move:before {
  content: "\f263";
}

.ion-arrow-resize:before {
  content: "\f264";
}

.ion-arrow-return-left:before {
  content: "\f265";
}

.ion-arrow-return-right:before {
  content: "\f266";
}

.ion-arrow-right-a:before {
  content: "\f109";
}

.ion-arrow-right-b:before {
  content: "\f10a";
}

.ion-arrow-right-c:before {
  content: "\f10b";
}

.ion-arrow-shrink:before {
  content: "\f267";
}

.ion-arrow-swap:before {
  content: "\f268";
}

.ion-arrow-up-a:before {
  content: "\f10c";
}

.ion-arrow-up-b:before {
  content: "\f10d";
}

.ion-arrow-up-c:before {
  content: "\f10e";
}

.ion-asterisk:before {
  content: "\f314";
}

.ion-at:before {
  content: "\f10f";
}

.ion-backspace:before {
  content: "\f3bf";
}

.ion-backspace-outline:before {
  content: "\f3be";
}

.ion-bag:before {
  content: "\f110";
}

.ion-battery-charging:before {
  content: "\f111";
}

.ion-battery-empty:before {
  content: "\f112";
}

.ion-battery-full:before {
  content: "\f113";
}

.ion-battery-half:before {
  content: "\f114";
}

.ion-battery-low:before {
  content: "\f115";
}

.ion-beaker:before {
  content: "\f269";
}

.ion-beer:before {
  content: "\f26a";
}

.ion-bluetooth:before {
  content: "\f116";
}

.ion-bonfire:before {
  content: "\f315";
}

.ion-bookmark:before {
  content: "\f26b";
}

.ion-bowtie:before {
  content: "\f3c0";
}

.ion-briefcase:before {
  content: "\f26c";
}

.ion-bug:before {
  content: "\f2be";
}

.ion-calculator:before {
  content: "\f26d";
}

.ion-calendar:before {
  content: "\f117";
}

.ion-camera:before {
  content: "\f118";
}

.ion-card:before {
  content: "\f119";
}

.ion-cash:before {
  content: "\f316";
}

.ion-chatbox:before {
  content: "\f11b";
}

.ion-chatbox-working:before {
  content: "\f11a";
}

.ion-chatboxes:before {
  content: "\f11c";
}

.ion-chatbubble:before {
  content: "\f11e";
}

.ion-chatbubble-working:before {
  content: "\f11d";
}

.ion-chatbubbles:before {
  content: "\f11f";
}

.ion-checkmark:before {
  content: "\f122";
}

.ion-checkmark-circled:before {
  content: "\f120";
}

.ion-checkmark-round:before {
  content: "\f121";
}

.ion-chevron-down:before {
  content: "\f123";
}

.ion-chevron-left:before {
  content: "\f124";
}

.ion-chevron-right:before {
  content: "\f125";
}

.ion-chevron-up:before {
  content: "\f126";
}

.ion-clipboard:before {
  content: "\f127";
}

.ion-clock:before {
  content: "\f26e";
}

.ion-close:before {
  content: "\f12a";
}

.ion-close-circled:before {
  content: "\f128";
}

.ion-close-round:before {
  content: "\f129";
}

.ion-closed-captioning:before {
  content: "\f317";
}

.ion-cloud:before {
  content: "\f12b";
}

.ion-code:before {
  content: "\f271";
}

.ion-code-download:before {
  content: "\f26f";
}

.ion-code-working:before {
  content: "\f270";
}

.ion-coffee:before {
  content: "\f272";
}

.ion-compass:before {
  content: "\f273";
}

.ion-compose:before {
  content: "\f12c";
}

.ion-connection-bars:before {
  content: "\f274";
}

.ion-contrast:before {
  content: "\f275";
}

.ion-crop:before {
  content: "\f3c1";
}

.ion-cube:before {
  content: "\f318";
}

.ion-disc:before {
  content: "\f12d";
}

.ion-document:before {
  content: "\f12f";
}

.ion-document-text:before {
  content: "\f12e";
}

.ion-drag:before {
  content: "\f130";
}

.ion-earth:before, .profile-link-icon.website:before {
  content: "\f276";
}

.ion-easel:before {
  content: "\f3c2";
}

.ion-edit:before {
  content: "\f2bf";
}

.ion-egg:before {
  content: "\f277";
}

.ion-eject:before {
  content: "\f131";
}

.ion-email:before {
  content: "\f132";
}

.ion-email-unread:before {
  content: "\f3c3";
}

.ion-erlenmeyer-flask:before {
  content: "\f3c5";
}

.ion-erlenmeyer-flask-bubbles:before {
  content: "\f3c4";
}

.ion-eye:before {
  content: "\f133";
}

.ion-eye-disabled:before {
  content: "\f306";
}

.ion-female:before {
  content: "\f278";
}

.ion-filing:before {
  content: "\f134";
}

.ion-film-marker:before {
  content: "\f135";
}

.ion-fireball:before {
  content: "\f319";
}

.ion-flag:before {
  content: "\f279";
}

.ion-flame:before {
  content: "\f31a";
}

.ion-flash:before {
  content: "\f137";
}

.ion-flash-off:before {
  content: "\f136";
}

.ion-folder:before {
  content: "\f139";
}

.ion-fork:before {
  content: "\f27a";
}

.ion-fork-repo:before {
  content: "\f2c0";
}

.ion-forward:before {
  content: "\f13a";
}

.ion-funnel:before {
  content: "\f31b";
}

.ion-gear-a:before {
  content: "\f13d";
}

.ion-gear-b:before {
  content: "\f13e";
}

.ion-grid:before {
  content: "\f13f";
}

.ion-hammer:before {
  content: "\f27b";
}

.ion-happy:before {
  content: "\f31c";
}

.ion-happy-outline:before {
  content: "\f3c6";
}

.ion-headphone:before {
  content: "\f140";
}

.ion-heart:before {
  content: "\f141";
}

.ion-heart-broken:before {
  content: "\f31d";
}

.ion-help:before {
  content: "\f143";
}

.ion-help-buoy:before {
  content: "\f27c";
}

.ion-help-circled:before {
  content: "\f142";
}

.ion-home:before {
  content: "\f144";
}

.ion-icecream:before {
  content: "\f27d";
}

.ion-image:before {
  content: "\f147";
}

.ion-images:before {
  content: "\f148";
}

.ion-information:before {
  content: "\f14a";
}

.ion-information-circled:before {
  content: "\f149";
}

.ion-ionic:before {
  content: "\f14b";
}

.ion-ios-alarm:before {
  content: "\f3c8";
}

.ion-ios-alarm-outline:before {
  content: "\f3c7";
}

.ion-ios-albums:before {
  content: "\f3ca";
}

.ion-ios-albums-outline:before {
  content: "\f3c9";
}

.ion-ios-americanfootball:before {
  content: "\f3cc";
}

.ion-ios-americanfootball-outline:before {
  content: "\f3cb";
}

.ion-ios-analytics:before {
  content: "\f3ce";
}

.ion-ios-analytics-outline:before {
  content: "\f3cd";
}

.ion-ios-arrow-back:before {
  content: "\f3cf";
}

.ion-ios-arrow-down:before {
  content: "\f3d0";
}

.ion-ios-arrow-forward:before {
  content: "\f3d1";
}

.ion-ios-arrow-left:before {
  content: "\f3d2";
}

.ion-ios-arrow-right:before {
  content: "\f3d3";
}

.ion-ios-arrow-thin-down:before {
  content: "\f3d4";
}

.ion-ios-arrow-thin-left:before {
  content: "\f3d5";
}

.ion-ios-arrow-thin-right:before {
  content: "\f3d6";
}

.ion-ios-arrow-thin-up:before {
  content: "\f3d7";
}

.ion-ios-arrow-up:before {
  content: "\f3d8";
}

.ion-ios-at:before {
  content: "\f3da";
}

.ion-ios-at-outline:before {
  content: "\f3d9";
}

.ion-ios-barcode:before {
  content: "\f3dc";
}

.ion-ios-barcode-outline:before {
  content: "\f3db";
}

.ion-ios-baseball:before {
  content: "\f3de";
}

.ion-ios-baseball-outline:before {
  content: "\f3dd";
}

.ion-ios-basketball:before {
  content: "\f3e0";
}

.ion-ios-basketball-outline:before {
  content: "\f3df";
}

.ion-ios-bell:before {
  content: "\f3e2";
}

.ion-ios-bell-outline:before {
  content: "\f3e1";
}

.ion-ios-body:before {
  content: "\f3e4";
}

.ion-ios-body-outline:before {
  content: "\f3e3";
}

.ion-ios-bolt:before {
  content: "\f3e6";
}

.ion-ios-bolt-outline:before {
  content: "\f3e5";
}

.ion-ios-book:before {
  content: "\f3e8";
}

.ion-ios-book-outline:before {
  content: "\f3e7";
}

.ion-ios-bookmarks:before {
  content: "\f3ea";
}

.ion-ios-bookmarks-outline:before {
  content: "\f3e9";
}

.ion-ios-box:before {
  content: "\f3ec";
}

.ion-ios-box-outline:before {
  content: "\f3eb";
}

.ion-ios-briefcase:before {
  content: "\f3ee";
}

.ion-ios-briefcase-outline:before {
  content: "\f3ed";
}

.ion-ios-browsers:before {
  content: "\f3f0";
}

.ion-ios-browsers-outline:before {
  content: "\f3ef";
}

.ion-ios-calculator:before {
  content: "\f3f2";
}

.ion-ios-calculator-outline:before {
  content: "\f3f1";
}

.ion-ios-calendar:before {
  content: "\f3f4";
}

.ion-ios-calendar-outline:before {
  content: "\f3f3";
}

.ion-ios-camera:before {
  content: "\f3f6";
}

.ion-ios-camera-outline:before {
  content: "\f3f5";
}

.ion-ios-cart:before {
  content: "\f3f8";
}

.ion-ios-cart-outline:before {
  content: "\f3f7";
}

.ion-ios-chatboxes:before {
  content: "\f3fa";
}

.ion-ios-chatboxes-outline:before {
  content: "\f3f9";
}

.ion-ios-chatbubble:before {
  content: "\f3fc";
}

.ion-ios-chatbubble-outline:before {
  content: "\f3fb";
}

.ion-ios-checkmark:before {
  content: "\f3ff";
}

.ion-ios-checkmark-empty:before {
  content: "\f3fd";
}

.ion-ios-checkmark-outline:before {
  content: "\f3fe";
}

.ion-ios-circle-filled:before {
  content: "\f400";
}

.ion-ios-circle-outline:before {
  content: "\f401";
}

.ion-ios-clock:before {
  content: "\f403";
}

.ion-ios-clock-outline:before {
  content: "\f402";
}

.ion-ios-close:before {
  content: "\f406";
}

.ion-ios-close-empty:before {
  content: "\f404";
}

.ion-ios-close-outline:before {
  content: "\f405";
}

.ion-ios-cloud:before {
  content: "\f40c";
}

.ion-ios-cloud-download:before {
  content: "\f408";
}

.ion-ios-cloud-download-outline:before {
  content: "\f407";
}

.ion-ios-cloud-outline:before {
  content: "\f409";
}

.ion-ios-cloud-upload:before {
  content: "\f40b";
}

.ion-ios-cloud-upload-outline:before {
  content: "\f40a";
}

.ion-ios-cloudy:before {
  content: "\f410";
}

.ion-ios-cloudy-night:before {
  content: "\f40e";
}

.ion-ios-cloudy-night-outline:before {
  content: "\f40d";
}

.ion-ios-cloudy-outline:before {
  content: "\f40f";
}

.ion-ios-cog:before {
  content: "\f412";
}

.ion-ios-cog-outline:before {
  content: "\f411";
}

.ion-ios-color-filter:before {
  content: "\f414";
}

.ion-ios-color-filter-outline:before {
  content: "\f413";
}

.ion-ios-color-wand:before {
  content: "\f416";
}

.ion-ios-color-wand-outline:before {
  content: "\f415";
}

.ion-ios-compose:before {
  content: "\f418";
}

.ion-ios-compose-outline:before {
  content: "\f417";
}

.ion-ios-contact:before {
  content: "\f41a";
}

.ion-ios-contact-outline:before {
  content: "\f419";
}

.ion-ios-copy:before {
  content: "\f41c";
}

.ion-ios-copy-outline:before {
  content: "\f41b";
}

.ion-ios-crop:before {
  content: "\f41e";
}

.ion-ios-crop-strong:before {
  content: "\f41d";
}

.ion-ios-download:before {
  content: "\f420";
}

.ion-ios-download-outline:before {
  content: "\f41f";
}

.ion-ios-drag:before {
  content: "\f421";
}

.ion-ios-email:before {
  content: "\f423";
}

.ion-ios-email-outline:before {
  content: "\f422";
}

.ion-ios-eye:before {
  content: "\f425";
}

.ion-ios-eye-outline:before {
  content: "\f424";
}

.ion-ios-fastforward:before {
  content: "\f427";
}

.ion-ios-fastforward-outline:before {
  content: "\f426";
}

.ion-ios-filing:before {
  content: "\f429";
}

.ion-ios-filing-outline:before {
  content: "\f428";
}

.ion-ios-film:before {
  content: "\f42b";
}

.ion-ios-film-outline:before {
  content: "\f42a";
}

.ion-ios-flag:before {
  content: "\f42d";
}

.ion-ios-flag-outline:before {
  content: "\f42c";
}

.ion-ios-flame:before {
  content: "\f42f";
}

.ion-ios-flame-outline:before {
  content: "\f42e";
}

.ion-ios-flask:before {
  content: "\f431";
}

.ion-ios-flask-outline:before {
  content: "\f430";
}

.ion-ios-flower:before {
  content: "\f433";
}

.ion-ios-flower-outline:before {
  content: "\f432";
}

.ion-ios-folder:before {
  content: "\f435";
}

.ion-ios-folder-outline:before {
  content: "\f434";
}

.ion-ios-football:before {
  content: "\f437";
}

.ion-ios-football-outline:before {
  content: "\f436";
}

.ion-ios-game-controller-a:before {
  content: "\f439";
}

.ion-ios-game-controller-a-outline:before {
  content: "\f438";
}

.ion-ios-game-controller-b:before {
  content: "\f43b";
}

.ion-ios-game-controller-b-outline:before {
  content: "\f43a";
}

.ion-ios-gear:before {
  content: "\f43d";
}

.ion-ios-gear-outline:before {
  content: "\f43c";
}

.ion-ios-glasses:before {
  content: "\f43f";
}

.ion-ios-glasses-outline:before {
  content: "\f43e";
}

.ion-ios-grid-view:before {
  content: "\f441";
}

.ion-ios-grid-view-outline:before {
  content: "\f440";
}

.ion-ios-heart:before {
  content: "\f443";
}

.ion-ios-heart-outline:before {
  content: "\f442";
}

.ion-ios-help:before {
  content: "\f446";
}

.ion-ios-help-empty:before {
  content: "\f444";
}

.ion-ios-help-outline:before {
  content: "\f445";
}

.ion-ios-home:before {
  content: "\f448";
}

.ion-ios-home-outline:before {
  content: "\f447";
}

.ion-ios-infinite:before {
  content: "\f44a";
}

.ion-ios-infinite-outline:before {
  content: "\f449";
}

.ion-ios-information:before {
  content: "\f44d";
}

.ion-ios-information-empty:before {
  content: "\f44b";
}

.ion-ios-information-outline:before {
  content: "\f44c";
}

.ion-ios-ionic-outline:before {
  content: "\f44e";
}

.ion-ios-keypad:before {
  content: "\f450";
}

.ion-ios-keypad-outline:before {
  content: "\f44f";
}

.ion-ios-lightbulb:before {
  content: "\f452";
}

.ion-ios-lightbulb-outline:before {
  content: "\f451";
}

.ion-ios-list:before {
  content: "\f454";
}

.ion-ios-list-outline:before {
  content: "\f453";
}

.ion-ios-location:before {
  content: "\f456";
}

.ion-ios-location-outline:before {
  content: "\f455";
}

.ion-ios-locked:before {
  content: "\f458";
}

.ion-ios-locked-outline:before {
  content: "\f457";
}

.ion-ios-loop:before {
  content: "\f45a";
}

.ion-ios-loop-strong:before {
  content: "\f459";
}

.ion-ios-medical:before {
  content: "\f45c";
}

.ion-ios-medical-outline:before {
  content: "\f45b";
}

.ion-ios-medkit:before {
  content: "\f45e";
}

.ion-ios-medkit-outline:before {
  content: "\f45d";
}

.ion-ios-mic:before {
  content: "\f461";
}

.ion-ios-mic-off:before {
  content: "\f45f";
}

.ion-ios-mic-outline:before {
  content: "\f460";
}

.ion-ios-minus:before {
  content: "\f464";
}

.ion-ios-minus-empty:before {
  content: "\f462";
}

.ion-ios-minus-outline:before {
  content: "\f463";
}

.ion-ios-monitor:before {
  content: "\f466";
}

.ion-ios-monitor-outline:before {
  content: "\f465";
}

.ion-ios-moon:before {
  content: "\f468";
}

.ion-ios-moon-outline:before {
  content: "\f467";
}

.ion-ios-more:before {
  content: "\f46a";
}

.ion-ios-more-outline:before {
  content: "\f469";
}

.ion-ios-musical-note:before {
  content: "\f46b";
}

.ion-ios-musical-notes:before {
  content: "\f46c";
}

.ion-ios-navigate:before {
  content: "\f46e";
}

.ion-ios-navigate-outline:before {
  content: "\f46d";
}

.ion-ios-nutrition:before {
  content: "\f470";
}

.ion-ios-nutrition-outline:before {
  content: "\f46f";
}

.ion-ios-paper:before {
  content: "\f472";
}

.ion-ios-paper-outline:before {
  content: "\f471";
}

.ion-ios-paperplane:before {
  content: "\f474";
}

.ion-ios-paperplane-outline:before {
  content: "\f473";
}

.ion-ios-partlysunny:before {
  content: "\f476";
}

.ion-ios-partlysunny-outline:before {
  content: "\f475";
}

.ion-ios-pause:before {
  content: "\f478";
}

.ion-ios-pause-outline:before {
  content: "\f477";
}

.ion-ios-paw:before {
  content: "\f47a";
}

.ion-ios-paw-outline:before {
  content: "\f479";
}

.ion-ios-people:before {
  content: "\f47c";
}

.ion-ios-people-outline:before {
  content: "\f47b";
}

.ion-ios-person:before {
  content: "\f47e";
}

.ion-ios-person-outline:before {
  content: "\f47d";
}

.ion-ios-personadd:before {
  content: "\f480";
}

.ion-ios-personadd-outline:before {
  content: "\f47f";
}

.ion-ios-photos:before {
  content: "\f482";
}

.ion-ios-photos-outline:before {
  content: "\f481";
}

.ion-ios-pie:before {
  content: "\f484";
}

.ion-ios-pie-outline:before {
  content: "\f483";
}

.ion-ios-pint:before {
  content: "\f486";
}

.ion-ios-pint-outline:before {
  content: "\f485";
}

.ion-ios-play:before {
  content: "\f488";
}

.ion-ios-play-outline:before {
  content: "\f487";
}

.ion-ios-plus:before {
  content: "\f48b";
}

.ion-ios-plus-empty:before {
  content: "\f489";
}

.ion-ios-plus-outline:before {
  content: "\f48a";
}

.ion-ios-pricetag:before {
  content: "\f48d";
}

.ion-ios-pricetag-outline:before {
  content: "\f48c";
}

.ion-ios-pricetags:before {
  content: "\f48f";
}

.ion-ios-pricetags-outline:before {
  content: "\f48e";
}

.ion-ios-printer:before {
  content: "\f491";
}

.ion-ios-printer-outline:before {
  content: "\f490";
}

.ion-ios-pulse:before {
  content: "\f493";
}

.ion-ios-pulse-strong:before {
  content: "\f492";
}

.ion-ios-rainy:before {
  content: "\f495";
}

.ion-ios-rainy-outline:before {
  content: "\f494";
}

.ion-ios-recording:before {
  content: "\f497";
}

.ion-ios-recording-outline:before {
  content: "\f496";
}

.ion-ios-redo:before {
  content: "\f499";
}

.ion-ios-redo-outline:before {
  content: "\f498";
}

.ion-ios-refresh:before {
  content: "\f49c";
}

.ion-ios-refresh-empty:before {
  content: "\f49a";
}

.ion-ios-refresh-outline:before {
  content: "\f49b";
}

.ion-ios-reload:before {
  content: "\f49d";
}

.ion-ios-reverse-camera:before {
  content: "\f49f";
}

.ion-ios-reverse-camera-outline:before {
  content: "\f49e";
}

.ion-ios-rewind:before {
  content: "\f4a1";
}

.ion-ios-rewind-outline:before {
  content: "\f4a0";
}

.ion-ios-rose:before {
  content: "\f4a3";
}

.ion-ios-rose-outline:before {
  content: "\f4a2";
}

.ion-ios-search:before {
  content: "\f4a5";
}

.ion-ios-search-strong:before {
  content: "\f4a4";
}

.ion-ios-settings:before {
  content: "\f4a7";
}

.ion-ios-settings-strong:before {
  content: "\f4a6";
}

.ion-ios-shuffle:before {
  content: "\f4a9";
}

.ion-ios-shuffle-strong:before {
  content: "\f4a8";
}

.ion-ios-skipbackward:before {
  content: "\f4ab";
}

.ion-ios-skipbackward-outline:before {
  content: "\f4aa";
}

.ion-ios-skipforward:before {
  content: "\f4ad";
}

.ion-ios-skipforward-outline:before {
  content: "\f4ac";
}

.ion-ios-snowy:before {
  content: "\f4ae";
}

.ion-ios-speedometer:before {
  content: "\f4b0";
}

.ion-ios-speedometer-outline:before {
  content: "\f4af";
}

.ion-ios-star:before {
  content: "\f4b3";
}

.ion-ios-star-half:before {
  content: "\f4b1";
}

.ion-ios-star-outline:before {
  content: "\f4b2";
}

.ion-ios-stopwatch:before {
  content: "\f4b5";
}

.ion-ios-stopwatch-outline:before {
  content: "\f4b4";
}

.ion-ios-sunny:before {
  content: "\f4b7";
}

.ion-ios-sunny-outline:before {
  content: "\f4b6";
}

.ion-ios-telephone:before {
  content: "\f4b9";
}

.ion-ios-telephone-outline:before {
  content: "\f4b8";
}

.ion-ios-tennisball:before {
  content: "\f4bb";
}

.ion-ios-tennisball-outline:before {
  content: "\f4ba";
}

.ion-ios-thunderstorm:before {
  content: "\f4bd";
}

.ion-ios-thunderstorm-outline:before {
  content: "\f4bc";
}

.ion-ios-time:before {
  content: "\f4bf";
}

.ion-ios-time-outline:before {
  content: "\f4be";
}

.ion-ios-timer:before {
  content: "\f4c1";
}

.ion-ios-timer-outline:before {
  content: "\f4c0";
}

.ion-ios-toggle:before {
  content: "\f4c3";
}

.ion-ios-toggle-outline:before {
  content: "\f4c2";
}

.ion-ios-trash:before {
  content: "\f4c5";
}

.ion-ios-trash-outline:before {
  content: "\f4c4";
}

.ion-ios-undo:before {
  content: "\f4c7";
}

.ion-ios-undo-outline:before {
  content: "\f4c6";
}

.ion-ios-unlocked:before {
  content: "\f4c9";
}

.ion-ios-unlocked-outline:before {
  content: "\f4c8";
}

.ion-ios-upload:before {
  content: "\f4cb";
}

.ion-ios-upload-outline:before {
  content: "\f4ca";
}

.ion-ios-videocam:before {
  content: "\f4cd";
}

.ion-ios-videocam-outline:before {
  content: "\f4cc";
}

.ion-ios-volume-high:before {
  content: "\f4ce";
}

.ion-ios-volume-low:before {
  content: "\f4cf";
}

.ion-ios-wineglass:before {
  content: "\f4d1";
}

.ion-ios-wineglass-outline:before {
  content: "\f4d0";
}

.ion-ios-world:before {
  content: "\f4d3";
}

.ion-ios-world-outline:before {
  content: "\f4d2";
}

.ion-ipad:before {
  content: "\f1f9";
}

.ion-iphone:before {
  content: "\f1fa";
}

.ion-ipod:before {
  content: "\f1fb";
}

.ion-jet:before {
  content: "\f295";
}

.ion-key:before {
  content: "\f296";
}

.ion-knife:before {
  content: "\f297";
}

.ion-laptop:before {
  content: "\f1fc";
}

.ion-leaf:before {
  content: "\f1fd";
}

.ion-levels:before {
  content: "\f298";
}

.ion-lightbulb:before {
  content: "\f299";
}

.ion-link:before {
  content: "\f1fe";
}

.ion-load-a:before {
  content: "\f29a";
}

.ion-load-b:before {
  content: "\f29b";
}

.ion-load-c:before {
  content: "\f29c";
}

.ion-load-d:before {
  content: "\f29d";
}

.ion-location:before {
  content: "\f1ff";
}

.ion-lock-combination:before {
  content: "\f4d4";
}

.ion-locked:before {
  content: "\f200";
}

.ion-log-in:before {
  content: "\f29e";
}

.ion-log-out:before {
  content: "\f29f";
}

.ion-loop:before {
  content: "\f201";
}

.ion-magnet:before {
  content: "\f2a0";
}

.ion-male:before {
  content: "\f2a1";
}

.ion-man:before {
  content: "\f202";
}

.ion-map:before {
  content: "\f203";
}

.ion-medkit:before {
  content: "\f2a2";
}

.ion-merge:before {
  content: "\f33f";
}

.ion-mic-a:before {
  content: "\f204";
}

.ion-mic-b:before {
  content: "\f205";
}

.ion-mic-c:before {
  content: "\f206";
}

.ion-minus:before {
  content: "\f209";
}

.ion-minus-circled:before {
  content: "\f207";
}

.ion-minus-round:before {
  content: "\f208";
}

.ion-model-s:before {
  content: "\f2c1";
}

.ion-monitor:before {
  content: "\f20a";
}

.ion-more:before {
  content: "\f20b";
}

.ion-mouse:before {
  content: "\f340";
}

.ion-music-note:before {
  content: "\f20c";
}

.ion-navicon:before {
  content: "\f20e";
}

.ion-navicon-round:before {
  content: "\f20d";
}

.ion-navigate:before {
  content: "\f2a3";
}

.ion-network:before {
  content: "\f341";
}

.ion-no-smoking:before {
  content: "\f2c2";
}

.ion-nuclear:before {
  content: "\f2a4";
}

.ion-outlet:before {
  content: "\f342";
}

.ion-paintbrush:before {
  content: "\f4d5";
}

.ion-paintbucket:before {
  content: "\f4d6";
}

.ion-paper-airplane:before {
  content: "\f2c3";
}

.ion-paperclip:before {
  content: "\f20f";
}

.ion-pause:before {
  content: "\f210";
}

.ion-person:before {
  content: "\f213";
}

.ion-person-add:before {
  content: "\f211";
}

.ion-person-stalker:before {
  content: "\f212";
}

.ion-pie-graph:before {
  content: "\f2a5";
}

.ion-pin:before {
  content: "\f2a6";
}

.ion-pinpoint:before {
  content: "\f2a7";
}

.ion-pizza:before {
  content: "\f2a8";
}

.ion-plane:before {
  content: "\f214";
}

.ion-planet:before {
  content: "\f343";
}

.ion-play:before {
  content: "\f215";
}

.ion-playstation:before {
  content: "\f30a";
}

.ion-plus:before {
  content: "\f218";
}

.ion-plus-circled:before {
  content: "\f216";
}

.ion-plus-round:before {
  content: "\f217";
}

.ion-podium:before {
  content: "\f344";
}

.ion-pound:before {
  content: "\f219";
}

.ion-power:before {
  content: "\f2a9";
}

.ion-pricetag:before {
  content: "\f2aa";
}

.ion-pricetags:before {
  content: "\f2ab";
}

.ion-printer:before {
  content: "\f21a";
}

.ion-pull-request:before {
  content: "\f345";
}

.ion-qr-scanner:before {
  content: "\f346";
}

.ion-quote:before {
  content: "\f347";
}

.ion-radio-waves:before {
  content: "\f2ac";
}

.ion-record:before {
  content: "\f21b";
}

.ion-refresh:before {
  content: "\f21c";
}

.ion-reply:before {
  content: "\f21e";
}

.ion-reply-all:before {
  content: "\f21d";
}

.ion-ribbon-a:before {
  content: "\f348";
}

.ion-ribbon-b:before {
  content: "\f349";
}

.ion-sad:before {
  content: "\f34a";
}

.ion-sad-outline:before {
  content: "\f4d7";
}

.ion-scissors:before {
  content: "\f34b";
}

.ion-search:before {
  content: "\f21f";
}

.ion-settings:before {
  content: "\f2ad";
}

.ion-share:before {
  content: "\f220";
}

.ion-shuffle:before {
  content: "\f221";
}

.ion-skip-backward:before {
  content: "\f222";
}

.ion-skip-forward:before {
  content: "\f223";
}

.ion-social-android:before {
  content: "\f225";
}

.ion-social-android-outline:before {
  content: "\f224";
}

.ion-social-angular:before {
  content: "\f4d9";
}

.ion-social-angular-outline:before {
  content: "\f4d8";
}

.ion-social-apple:before {
  content: "\f227";
}

.ion-social-apple-outline:before {
  content: "\f226";
}

.ion-social-bitcoin:before {
  content: "\f2af";
}

.ion-social-bitcoin-outline:before {
  content: "\f2ae";
}

.ion-social-buffer:before {
  content: "\f229";
}

.ion-social-buffer-outline:before {
  content: "\f228";
}

.ion-social-chrome:before {
  content: "\f4db";
}

.ion-social-chrome-outline:before {
  content: "\f4da";
}

.ion-social-codepen:before {
  content: "\f4dd";
}

.ion-social-codepen-outline:before {
  content: "\f4dc";
}

.ion-social-css3:before {
  content: "\f4df";
}

.ion-social-css3-outline:before {
  content: "\f4de";
}

.ion-social-designernews:before {
  content: "\f22b";
}

.ion-social-designernews-outline:before {
  content: "\f22a";
}

.ion-social-dribbble:before {
  content: "\f22d";
}

.ion-social-dribbble-outline:before, .profile-link-icon.dribbble:before {
  content: "\f22c";
}

.ion-social-dropbox:before {
  content: "\f22f";
}

.ion-social-dropbox-outline:before {
  content: "\f22e";
}

.ion-social-euro:before {
  content: "\f4e1";
}

.ion-social-euro-outline:before {
  content: "\f4e0";
}

.ion-social-facebook:before {
  content: "\f231";
}

.ion-social-facebook-outline:before {
  content: "\f230";
}

.ion-social-foursquare:before {
  content: "\f34d";
}

.ion-social-foursquare-outline:before {
  content: "\f34c";
}

.ion-social-freebsd-devil:before {
  content: "\f2c4";
}

.ion-social-github:before, .profile-link-icon.git_hub:before {
  content: "\f233";
}

.ion-social-github-outline:before {
  content: "\f232";
}

.ion-social-google:before {
  content: "\f34f";
}

.ion-social-google-outline:before {
  content: "\f34e";
}

.ion-social-googleplus:before {
  content: "\f235";
}

.ion-social-googleplus-outline:before {
  content: "\f234";
}

.ion-social-hackernews:before {
  content: "\f237";
}

.ion-social-hackernews-outline:before {
  content: "\f236";
}

.ion-social-html5:before {
  content: "\f4e3";
}

.ion-social-html5-outline:before {
  content: "\f4e2";
}

.ion-social-instagram:before {
  content: "\f351";
}

.ion-social-instagram-outline:before {
  content: "\f350";
}

.ion-social-javascript:before {
  content: "\f4e5";
}

.ion-social-javascript-outline:before {
  content: "\f4e4";
}

.ion-social-linkedin:before {
  content: "\f239";
}

.ion-social-linkedin-outline:before, .profile-link-icon.linked_in:before {
  content: "\f238";
}

.ion-social-markdown:before {
  content: "\f4e6";
}

.ion-social-nodejs:before {
  content: "\f4e7";
}

.ion-social-octocat:before {
  content: "\f4e8";
}

.ion-social-pinterest:before {
  content: "\f2b1";
}

.ion-social-pinterest-outline:before {
  content: "\f2b0";
}

.ion-social-python:before {
  content: "\f4e9";
}

.ion-social-reddit:before {
  content: "\f23b";
}

.ion-social-reddit-outline:before {
  content: "\f23a";
}

.ion-social-rss:before, .profile-link-icon.blog:before {
  content: "\f23d";
}

.ion-social-rss-outline:before {
  content: "\f23c";
}

.ion-social-sass:before {
  content: "\f4ea";
}

.ion-social-skype:before {
  content: "\f23f";
}

.ion-social-skype-outline:before {
  content: "\f23e";
}

.ion-social-snapchat:before {
  content: "\f4ec";
}

.ion-social-snapchat-outline:before {
  content: "\f4eb";
}

.ion-social-tumblr:before {
  content: "\f241";
}

.ion-social-tumblr-outline:before {
  content: "\f240";
}

.ion-social-tux:before {
  content: "\f2c5";
}

.ion-social-twitch:before {
  content: "\f4ee";
}

.ion-social-twitch-outline:before {
  content: "\f4ed";
}

.ion-social-twitter:before, .profile-link-icon.twitter:before {
  content: "\f243";
}

.ion-social-twitter-outline:before {
  content: "\f242";
}

.ion-social-usd:before {
  content: "\f353";
}

.ion-social-usd-outline:before {
  content: "\f352";
}

.ion-social-vimeo:before {
  content: "\f245";
}

.ion-social-vimeo-outline:before {
  content: "\f244";
}

.ion-social-whatsapp:before {
  content: "\f4f0";
}

.ion-social-whatsapp-outline:before {
  content: "\f4ef";
}

.ion-social-windows:before {
  content: "\f247";
}

.ion-social-windows-outline:before {
  content: "\f246";
}

.ion-social-wordpress:before {
  content: "\f249";
}

.ion-social-wordpress-outline:before {
  content: "\f248";
}

.ion-social-yahoo:before {
  content: "\f24b";
}

.ion-social-yahoo-outline:before {
  content: "\f24a";
}

.ion-social-yen:before {
  content: "\f4f2";
}

.ion-social-yen-outline:before {
  content: "\f4f1";
}

.ion-social-youtube:before {
  content: "\f24d";
}

.ion-social-youtube-outline:before {
  content: "\f24c";
}

.ion-soup-can:before {
  content: "\f4f4";
}

.ion-soup-can-outline:before {
  content: "\f4f3";
}

.ion-speakerphone:before {
  content: "\f2b2";
}

.ion-speedometer:before {
  content: "\f2b3";
}

.ion-spoon:before {
  content: "\f2b4";
}

.ion-star:before {
  content: "\f24e";
}

.ion-stats-bars:before {
  content: "\f2b5";
}

.ion-steam:before {
  content: "\f30b";
}

.ion-stop:before {
  content: "\f24f";
}

.ion-thermometer:before {
  content: "\f2b6";
}

.ion-thumbsdown:before {
  content: "\f250";
}

.ion-thumbsup:before {
  content: "\f251";
}

.ion-toggle:before {
  content: "\f355";
}

.ion-toggle-filled:before {
  content: "\f354";
}

.ion-transgender:before {
  content: "\f4f5";
}

.ion-trash-a:before {
  content: "\f252";
}

.ion-trash-b:before {
  content: "\f253";
}

.ion-trophy:before {
  content: "\f356";
}

.ion-tshirt:before {
  content: "\f4f7";
}

.ion-tshirt-outline:before {
  content: "\f4f6";
}

.ion-umbrella:before {
  content: "\f2b7";
}

.ion-university:before {
  content: "\f357";
}

.ion-unlocked:before {
  content: "\f254";
}

.ion-upload:before {
  content: "\f255";
}

.ion-usb:before {
  content: "\f2b8";
}

.ion-videocamera:before {
  content: "\f256";
}

.ion-volume-high:before {
  content: "\f257";
}

.ion-volume-low:before {
  content: "\f258";
}

.ion-volume-medium:before {
  content: "\f259";
}

.ion-volume-mute:before {
  content: "\f25a";
}

.ion-wand:before {
  content: "\f358";
}

.ion-waterdrop:before {
  content: "\f25b";
}

.ion-wifi:before {
  content: "\f25c";
}

.ion-wineglass:before {
  content: "\f2b9";
}

.ion-woman:before {
  content: "\f25d";
}

.ion-wrench:before {
  content: "\f2ba";
}

.ion-xbox:before {
  content: "\f30c";
}

/**
 * PaymentFont Styles 1.1.2
 *
 * @since     2014-09-21
 * @version   2015-04-24
 *
 * @author    Poellmann Alexander Manfred (@AMPoellmann)
 * @copyright Copyright 2015 vendocrat. All Rights Reserved.
 * @link      https://vendocr.at/
 *
 * @license   Font: SIL OFL 1.1, CSS: MIT License
 */
@font-face {
  font-family: "PaymentFont";
  src: url("../fonts/paymentfont-webfont.eot");
  src: url("../fonts/paymentfont-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/paymentfont-webfont.woff") format("woff2"), url("../fonts/paymentfont-webfont.woff") format("woff"), url("../fonts/paymentfont-webfont.ttf") format("truetype"), url("../fonts/paymentfont-webfont.svg#paymentfont-webfont") format("svg");
  font-weight: normal;
  font-style: normal;
}
.pf {
  display: inline-block;
  font: normal normal normal 14px/1 PaymentFont;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pf-amazon:before {
  content: "\f000";
}

.pf-american-express:before {
  content: "\f001";
}

.pf-american-express-alt:before {
  content: "\f002";
}

.pf-atm:before {
  content: "\f003";
}

.pf-bankomat:before {
  content: "\f004";
}

.pf-bank-transfer:before {
  content: "\f005";
}

.pf-bitcoin:before {
  content: "\f006";
}

.pf-bitcoin-sign:before {
  content: "\f007";
}

.pf-braintree:before {
  content: "\f008";
}

.pf-btc:before {
  content: "\f009";
}

.pf-card:before {
  content: "\f00a";
}

.pf-carta-si:before {
  content: "\f00b";
}

.pf-cash:before {
  content: "\f00c";
}

.pf-cash-on-delivery:before {
  content: "\f00d";
}

.pf-cb:before {
  content: "\f00e";
}

.pf-cirrus:before {
  content: "\f00f";
}

.pf-cirrus-alt:before {
  content: "\f010";
}

.pf-clickandbuy:before {
  content: "\f011";
}

.pf-credit-card:before {
  content: "\f012";
}

.pf-diners:before {
  content: "\f013";
}

.pf-discover:before {
  content: "\f014";
}

.pf-ec:before {
  content: "\f015";
}

.pf-eps:before {
  content: "\f016";
}

.pf-eur:before {
  content: "\f017";
}

.pf-facture:before {
  content: "\f018";
}

.pf-fattura:before {
  content: "\f019";
}

.pf-flattr:before {
  content: "\f01a";
}

.pf-giropay:before {
  content: "\f01b";
}

.pf-gittip:before,
.pf-gratipay:before {
  content: "\f01c";
}

.pf-google-wallet:before {
  content: "\f01d";
}

.pf-google-wallet-alt:before {
  content: "\f01e";
}

.pf-gbp:before {
  content: "\f01f";
}

.pf-ideal:before {
  content: "\f020";
}

.pf-ils:before {
  content: "\f021";
}

.pf-inr:before {
  content: "\f022";
}

.pf-invoice:before {
  content: "\f023";
}

.pf-invoice-sign:before {
  content: "\f024";
}

.pf-invoice-sign-alt:before {
  content: "\f025";
}

.pf-invoice-sign-alt-o:before {
  content: "\f026";
}

.pf-invoice-sign-o:before {
  content: "\f027";
}

.pf-jcb:before {
  content: "\f028";
}

.pf-jpy:before {
  content: "\f029";
}

.pf-krw:before {
  content: "\f02a";
}

.pf-maestro:before {
  content: "\f02b";
}

.pf-maestro-alt:before {
  content: "\f02c";
}

.pf-mastercard:before {
  content: "\f02d";
}

.pf-mastercard-alt:before {
  content: "\f02e";
}

.pf-mastercard-securecode:before {
  content: "\f02f";
}

.pf-ogone:before {
  content: "\f030";
}

.pf-paybox:before {
  content: "\f031";
}

.pf-paylife:before {
  content: "\f032";
}

.pf-paypal:before {
  content: "\f033";
}

.pf-paypal-alt:before {
  content: "\f034";
}

.pf-paysafecard:before {
  content: "\f035";
}

.pf-postepay:before {
  content: "\f036";
}

.pf-quick:before {
  content: "\f037";
}

.pf-rechnung:before {
  content: "\f038";
}

.pf-ripple:before {
  content: "\f039";
}

.pf-rub:before {
  content: "\f03a";
}

.pf-skrill:before {
  content: "\f03b";
}

.pf-sofort:before {
  content: "\f03c";
}

.pf-square:before {
  content: "\f03d";
}

.pf-stripe:before {
  content: "\f03e";
}

.pf-truste:before {
  content: "\f03f";
}

.pf-try:before {
  content: "\f040";
}

.pf-unionpay:before {
  content: "\f041";
}

.pf-usd:before {
  content: "\f042";
}

.pf-verified-by-visa:before {
  content: "\f043";
}

.pf-verisign:before {
  content: "\f044";
}

.pf-visa:before {
  content: "\f045";
}

.pf-visa-electron:before {
  content: "\f046";
}

.pf-western-union:before {
  content: "\f047";
}

.pf-western-union-alt:before {
  content: "\f048";
}

.pf-wirecard:before {
  content: "\f049";
}

.pf-sepa:before {
  content: "\f04a";
}

.pf-sepa-alt:before {
  content: "\f04b";
}

.pf-apple-pay:before {
  content: "\f04c";
}

.pf-interac:before {
  content: "\f04d";
}

.pf-paymill:before {
  content: "\f04e";
}

.pf-dankort:before {
  content: "\f04f";
}

.pf-bancontact-mister-cash:before {
  content: "\f050";
}

.pf-moip:before {
  content: "\f051";
}

.pf-pagseguro:before {
  content: "\f052";
}

.pf-cash-on-pickup:before {
  content: "\f053";
}

.pf-sage:before {
  content: "\f054";
}

.pf-elo:before {
  content: "\f055";
}

.pf-elo-alt:before {
  content: "\f056";
}

.pf-payu:before {
  content: "\f057";
}

.pf-mercado-pago:before {
  content: "\f058";
}

.pf-mercado-pago-sign:before {
  content: "\f059";
}

.pf-payshop:before {
  content: "\f05a";
}

.pf-multibanco:before {
  content: "\f05b";
}

.pf-gratipay-sign:before {
  content: "\f05c";
}

.pf-six:before {
  content: "\f05d";
}

.pf-cashcloud:before {
  content: "\f05e";
}

/*
 * Finito!
 */
/**
 * FormValidation (http://formvalidation.io)
 * The best jQuery plugin to validate form fields. Support Bootstrap, Foundation, Pure, SemanticUI, UIKit and custom frameworks
 *
 * @author      http://twitter.com/nghuuphuoc
 * @copyright   (c) 2013 - 2015 Nguyen Huu Phuoc
 * @license     http://formvalidation.io/license/
 */
.fv-has-feedback {
  position: relative;
}

.fv-control-feedback {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
}

.fv-has-feedback .fv-control-feedback {
  /*right: 15px;*/
}

.fv-help-block {
  display: block;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~ For Bootstrap form ~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.fv-form-bootstrap .help-block {
  margin-bottom: 0;
}

.fv-form-bootstrap .tooltip-inner {
  text-align: left;
}

/* Bootstrap stacked form without label */
.fv-form-bootstrap .fv-icon-no-label {
  top: 0;
}

.fv-form-bootstrap .fv-bootstrap-icon-input-group {
  z-index: 100;
}

/* Bootstrap inline form */
.form-inline.fv-form-bootstrap .form-group {
  vertical-align: top;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~ For Foundation form ~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.fv-form-foundation .fv-control-feedback {
  top: 21px; /* The height of Foundation label */
  right: 15px; /* The padding-right of .columns */
  width: 37px;
  height: 37px;
  line-height: 37px;
}

.fv-form-foundation .collapse .fv-control-feedback {
  top: 0;
  right: 0;
}

/* Foundation horizontal form */
.fv-form-horizontal.fv-form-foundation .fv-control-feedback {
  top: 0;
}

/* Foundation stacked form without label */
.fv-form-foundation .fv-icon-no-label {
  top: 0;
}

.fv-form-foundation .error .fv-control-feedback {
  color: #f04124;
}

/**
 * Foundation reset the bottom marin to 0 when the row has '.error' class
 * I need to adjust it when using tooltip to show the error
 */
.fv-form-foundation .error.fv-has-tooltip input, .error.fv-has-tooltip textarea, .error.fv-has-tooltip select {
  margin-bottom: 1rem;
}

/* ~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~ For Pure form ~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~ */
.fv-form-pure .fv-control-feedback {
  top: 22px; /* Height of Pure label */
  width: 36px; /* Height of Pure input */
  height: 36px;
  line-height: 36px;
}

.pure-form-stacked.fv-form-pure .fv-control-feedback {
  top: 4px;
}

.pure-form-aligned .pure-control-group .fv-help-block {
  margin-top: 5px;
  margin-left: 180px;
}

.pure-form-aligned.fv-form-pure .fv-control-feedback,
.fv-form-pure .fv-icon-no-label { /* Pure stacked form without label */
  top: 0;
}

.fv-form-pure .fv-has-error label,
.fv-form-pure .fv-has-error .fv-help-block,
.fv-form-pure .fv-has-error .fv-control-feedback {
  color: #CA3C3C; /* Same as .button-error */
}

.fv-form-pure .fv-has-success label,
.fv-form-pure .fv-has-success .fv-control-feedback {
  /*color: #1CB841;*/ /* Same as .button-success */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~ For Semantic form ~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~ */
.fv-form-semantic .fv-control-feedback.icon {
  right: 7px;
}

.fv-form-semantic .error .icon {
  color: #d95c5c;
}

/* Semantic horizontal form */
.fv-form-horizontal.fv-form-semantic .row {
  padding-bottom: 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~ For UIKit form ~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~ */
.fv-form-uikit .fv-control-feedback {
  top: 25px; /* Height of UIKit label */
  width: 30px; /* Height of UIKit input */
  height: 30px;
  line-height: 30px;
}

.fv-form-uikit .uk-text-danger {
  display: block;
}

/* UIKit horizontal form */
.uk-form-horizontal.fv-form-uikit .fv-control-feedback {
  /*line-height: normal;*/
  top: 0;
}

.fv-form-uikit .fv-has-error label,
.fv-form-uikit .fv-has-error .uk-form-label,
.fv-form-uikit .fv-has-error .fv-control-feedback {
  color: #D85030; /* Same as .uk-form-danger */
}

.fv-form-uikit .fv-has-success label,
.fv-form-uikit .fv-has-success .uk-form-label,
.fv-form-uikit .fv-has-success .fv-control-feedback {
  /*color: #659F13;*/ /* Same as .uk-form-success */
}

/* UIKit stacked form without label */
.fv-form-uikit .fv-icon-no-label {
  top: 0;
}

/**
 * React Select
 * ============
 * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/
 * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs
 * MIT License: https://github.com/JedWatson/react-select
*/
.Select {
  position: relative;
}

.Select,
.Select div,
.Select input,
.Select span {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.Select.is-disabled > .Select-control {
  background-color: #f9f9f9;
}

.Select.is-disabled > .Select-control:hover {
  box-shadow: none;
}

.Select.is-disabled .Select-arrow-zone {
  cursor: default;
  pointer-events: none;
}

.Select-control .Select-input:focus {
  outline: none;
}

.is-searchable.is-open > .Select-control {
  cursor: text;
}

.is-open > .Select-control {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background: var(--bg-content);
  border-color: #b3b3b3 #ccc #d9d9d9;
}

.is-open > .Select-control > .Select-arrow {
  border-color: transparent transparent #999;
  border-width: 0 5px 5px;
}

.is-searchable.is-focused:not(.is-open) > .Select-control {
  cursor: text;
}

.Select-placeholder,
.Select--single > .Select-control .Select-value {
  bottom: 0;
  color: #aaa;
  left: 0;
  line-height: 34px;
  padding-left: 10px;
  padding-right: 10px;
  position: absolute;
  right: 0;
  top: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.has-value.Select--single > .Select-control .Select-value .Select-value-label,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {
  color: var(--text-default);
}

.has-value.Select--single > .Select-control .Select-value a.Select-value-label,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label {
  cursor: pointer;
  text-decoration: none;
}

.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover,
.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,
.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus {
  color: #007eff;
  outline: none;
  text-decoration: underline;
}

.Select-input > input {
  width: 100%;
  background: none transparent;
  border: 0 none;
  box-shadow: none;
  cursor: default;
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  outline: none;
  line-height: 14px;
  font-size: 16px;
  padding: 9px 0 11px;
  -webkit-appearance: none;
}

.is-focused .Select-input > input {
  cursor: text;
}

.has-value.is-pseudo-focused .Select-input {
  opacity: 0;
}

.Select-control:not(.is-searchable) > .Select-input {
  outline: none;
}

.Select-loading-zone {
  cursor: pointer;
  display: table-cell;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 16px;
}

.Select-loading {
  -webkit-animation: Select-animation-spin 400ms infinite linear;
  -o-animation: Select-animation-spin 400ms infinite linear;
  animation: Select-animation-spin 400ms infinite linear;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-right-color: var(--text-default);
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

.Select-clear-zone {
  -webkit-animation: Select-animation-fadeIn 200ms;
  -o-animation: Select-animation-fadeIn 200ms;
  animation: Select-animation-fadeIn 200ms;
  color: #999;
  cursor: pointer;
  display: table-cell;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 17px;
}

.Select-clear-zone:hover {
  color: #D0021B;
}

.Select-clear {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
}

.Select--multi .Select-clear-zone {
  width: 17px;
}

.Select-arrow-zone {
  cursor: pointer;
  display: table-cell;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 25px;
  padding-right: 5px;
}

.Select-arrow {
  border-color: #999 transparent transparent;
  border-style: solid;
  border-width: 5px 5px 2.5px;
  display: inline-block;
  height: 0;
  width: 0;
}

.is-open .Select-arrow,
.Select-arrow-zone:hover > .Select-arrow {
  border-top-color: #666;
}

.Select--multi .Select-multi-value-wrapper {
  display: inline-block;
}

.Select .Select-aria-only {
  display: inline-block;
  height: 1px;
  width: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}

@-webkit-keyframes Select-animation-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes Select-animation-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.Select-menu-outer {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: var(--bg-content);
  border: 1px solid #ccc;
  border-top-color: #e6e6e6;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  margin-top: -1px;
  max-height: 200px;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 1;
  -webkit-overflow-scrolling: touch;
}

.Select-menu {
  max-height: 198px;
  overflow-y: auto;
}

.Select-option {
  box-sizing: border-box;
  background-color: var(--bg-content);
  color: #666666;
  cursor: pointer;
  display: block;
  padding: 8px 10px;
}

.Select-option:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.Select-option.is-disabled {
  color: #cccccc;
  cursor: default;
}

.Select-noresults {
  box-sizing: border-box;
  color: #999999;
  cursor: default;
  display: block;
  padding: 8px 10px;
}

.Select--multi .Select-input {
  vertical-align: middle;
  margin-left: 10px;
  padding: 0;
}

.Select--multi.has-value .Select-input {
  margin-left: 5px;
}

.Select--multi .Select-value {
  background-color: #ebf5ff;
  /* Fallback color for IE 8 */
  background-color: rgba(0, 126, 255, 0.08);
  border-radius: 2px;
  border: 1px solid #c2e0ff;
  /* Fallback color for IE 8 */
  border: 1px solid rgba(0, 126, 255, 0.24);
  color: #007eff;
  display: inline-block;
  font-size: 0.9em;
  line-height: 1.4;
  margin-left: 5px;
  margin-top: 5px;
  vertical-align: top;
}

.Select--multi .Select-value-icon,
.Select--multi .Select-value-label {
  display: inline-block;
  vertical-align: middle;
}

.Select--multi .Select-value-label {
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
  cursor: default;
  padding: 2px 5px;
}

.Select--multi a.Select-value-label {
  color: #007eff;
  cursor: pointer;
  text-decoration: none;
}

.Select--multi a.Select-value-label:hover {
  text-decoration: underline;
}

.Select--multi .Select-value-icon {
  cursor: pointer;
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
  border-right: 1px solid #c2e0ff;
  /* Fallback color for IE 8 */
  border-right: 1px solid rgba(0, 126, 255, 0.24);
  padding: 1px 5px 3px;
}

.Select--multi .Select-value-icon:hover,
.Select--multi .Select-value-icon:focus {
  background-color: #d8eafd;
  /* Fallback color for IE 8 */
  background-color: rgba(0, 113, 230, 0.08);
  color: #0071e6;
}

.Select--multi .Select-value-icon:active {
  background-color: #c2e0ff;
  /* Fallback color for IE 8 */
  background-color: rgba(0, 126, 255, 0.24);
}

.Select--multi.is-disabled .Select-value {
  background-color: var(--bg-grey-fc);
  border: 1px solid #e3e3e3;
  color: var(--text-default);
}

.Select--multi.is-disabled .Select-value-icon {
  cursor: not-allowed;
  border-right: 1px solid #e3e3e3;
}

.Select--multi.is-disabled .Select-value-icon:hover,
.Select--multi.is-disabled .Select-value-icon:focus,
.Select--multi.is-disabled .Select-value-icon:active {
  background-color: var(--bg-grey-fc);
}

@keyframes Select-animation-spin {
  to {
    transform: rotate(1turn);
  }
}
@-webkit-keyframes Select-animation-spin {
  to {
    -webkit-transform: rotate(1turn);
  }
}
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

input[type=search] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #fff;
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

a {
  color: #337ab7;
  text-decoration: none;
}
a:hover, a:focus {
  color: #23527c;
  text-decoration: underline;
}
a:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

figure {
  margin: 0;
}

img {
  vertical-align: middle;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.img-rounded {
  border-radius: 6px;
}

.img-thumbnail {
  padding: 4px;
  line-height: 1.428571429;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.img-circle {
  border-radius: 50%;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eeeeee;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

[role=button] {
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
h1 small,
h1 .small, h2 small,
h2 .small, h3 small,
h3 .small, h4 small,
h4 .small, h5 small,
h5 .small, h6 small,
h6 .small,
.h1 small,
.h1 .small, .h2 small,
.h2 .small, .h3 small,
.h3 .small, .h4 small,
.h4 .small, .h5 small,
.h5 .small, .h6 small,
.h6 .small {
  font-weight: 400;
  line-height: 1;
  color: #777777;
}

h1, .h1,
h2, .h2,
h3, .h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}
h1 small,
h1 .small, .h1 small,
.h1 .small,
h2 small,
h2 .small, .h2 small,
.h2 .small,
h3 small,
h3 .small, .h3 small,
.h3 .small {
  font-size: 65%;
}

h4, .h4,
h5, .h5,
h6, .h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}
h4 small,
h4 .small, .h4 small,
.h4 .small,
h5 small,
h5 .small, .h5 small,
.h5 .small,
h6 small,
h6 .small, .h6 small,
.h6 .small {
  font-size: 75%;
}

h1, .h1 {
  font-size: 36px;
}

h2, .h2 {
  font-size: 30px;
}

h3, .h3 {
  font-size: 24px;
}

h4, .h4 {
  font-size: 18px;
}

h5, .h5 {
  font-size: 14px;
}

h6, .h6 {
  font-size: 12px;
}

p {
  margin: 0 0 10px;
}

.lead {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .lead {
    font-size: 21px;
  }
}

small,
.small {
  font-size: 85%;
}

mark,
.mark {
  padding: 0.2em;
  background-color: #fcf8e3;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

.text-nowrap {
  white-space: nowrap;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-uppercase, .initialism {
  text-transform: uppercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-muted, .task-item-title.text-muted {
  color: #777777;
}

.text-primary {
  color: #337ab7;
}

a.text-primary:hover,
a.text-primary:focus {
  color: #286090;
}

.text-success {
  color: #3c763d;
}

a.text-success:hover,
a.text-success:focus {
  color: #2b542c;
}

.text-info {
  color: #31708f;
}

a.text-info:hover,
a.text-info:focus {
  color: #245269;
}

.text-warning {
  color: #8a6d3b;
}

a.text-warning:hover,
a.text-warning:focus {
  color: #66512c;
}

.text-danger {
  color: #a94442;
}

a.text-danger:hover,
a.text-danger:focus {
  color: #843534;
}

.bg-primary {
  color: #fff;
}

.bg-primary {
  background-color: #337ab7;
}

a.bg-primary:hover,
a.bg-primary:focus {
  background-color: #286090;
}

.bg-success {
  background-color: #dff0d8;
}

a.bg-success:hover,
a.bg-success:focus {
  background-color: #c1e2b3;
}

.bg-info {
  background-color: #d9edf7;
}

a.bg-info:hover,
a.bg-info:focus {
  background-color: #afd9ee;
}

.bg-warning {
  background-color: #fcf8e3;
}

a.bg-warning:hover,
a.bg-warning:focus {
  background-color: #f7ecb5;
}

.bg-danger {
  background-color: #f2dede;
}

a.bg-danger:hover,
a.bg-danger:focus {
  background-color: #e4b9b9;
}

.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eeeeee;
}

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}
ul ul,
ul ol,
ol ul,
ol ol {
  margin-bottom: 0;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-inline {
  padding-left: 0;
  list-style: none;
  margin-left: -5px;
}
.list-inline > li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}

dl {
  margin-top: 0;
  margin-bottom: 20px;
}

dt,
dd {
  line-height: 1.428571429;
}

dt {
  font-weight: 700;
}

dd {
  margin-left: 0;
}

.dl-horizontal dd:before, .dl-horizontal dd:after {
  display: table;
  content: " ";
}
.dl-horizontal dd:after {
  clear: both;
}
@media (min-width: 768px) {
  .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dl-horizontal dd {
    margin-left: 180px;
  }
}

abbr[title],
abbr[data-original-title] {
  cursor: help;
}

.initialism {
  font-size: 90%;
}

blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 17.5px;
  border-left: 5px solid #eeeeee;
}
blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
  margin-bottom: 0;
}
blockquote footer,
blockquote small,
blockquote .small {
  display: block;
  font-size: 80%;
  line-height: 1.428571429;
  color: #777777;
}
blockquote footer:before,
blockquote small:before,
blockquote .small:before {
  content: "— ";
}

.blockquote-reverse,
blockquote.pull-right {
  padding-right: 15px;
  padding-left: 0;
  text-align: right;
  border-right: 5px solid #eeeeee;
  border-left: 0;
}
.blockquote-reverse footer:before,
.blockquote-reverse small:before,
.blockquote-reverse .small:before,
blockquote.pull-right footer:before,
blockquote.pull-right small:before,
blockquote.pull-right .small:before {
  content: "";
}
.blockquote-reverse footer:after,
.blockquote-reverse small:after,
.blockquote-reverse .small:after,
blockquote.pull-right footer:after,
blockquote.pull-right small:after,
blockquote.pull-right .small:after {
  content: " —";
}

address {
  margin-bottom: 20px;
  font-style: normal;
  line-height: 1.428571429;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.container:before, .container:after {
  display: table;
  content: " ";
}
.container:after {
  clear: both;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.container-fluid:before, .container-fluid:after {
  display: table;
  content: " ";
}
.container-fluid:after {
  clear: both;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}
.row:before, .row:after {
  display: table;
  content: " ";
}
.row:after {
  clear: both;
}

.row-no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row-no-gutters [class*=col-] {
  padding-right: 0;
  padding-left: 0;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}

.col-xs-1 {
  width: 8.3333333333%;
}

.col-xs-2 {
  width: 16.6666666667%;
}

.col-xs-3 {
  width: 25%;
}

.col-xs-4 {
  width: 33.3333333333%;
}

.col-xs-5 {
  width: 41.6666666667%;
}

.col-xs-6 {
  width: 50%;
}

.col-xs-7 {
  width: 58.3333333333%;
}

.col-xs-8 {
  width: 66.6666666667%;
}

.col-xs-9 {
  width: 75%;
}

.col-xs-10 {
  width: 83.3333333333%;
}

.col-xs-11 {
  width: 91.6666666667%;
}

.col-xs-12 {
  width: 100%;
}

.col-xs-pull-0 {
  right: auto;
}

.col-xs-pull-1 {
  right: 8.3333333333%;
}

.col-xs-pull-2 {
  right: 16.6666666667%;
}

.col-xs-pull-3 {
  right: 25%;
}

.col-xs-pull-4 {
  right: 33.3333333333%;
}

.col-xs-pull-5 {
  right: 41.6666666667%;
}

.col-xs-pull-6 {
  right: 50%;
}

.col-xs-pull-7 {
  right: 58.3333333333%;
}

.col-xs-pull-8 {
  right: 66.6666666667%;
}

.col-xs-pull-9 {
  right: 75%;
}

.col-xs-pull-10 {
  right: 83.3333333333%;
}

.col-xs-pull-11 {
  right: 91.6666666667%;
}

.col-xs-pull-12 {
  right: 100%;
}

.col-xs-push-0 {
  left: auto;
}

.col-xs-push-1 {
  left: 8.3333333333%;
}

.col-xs-push-2 {
  left: 16.6666666667%;
}

.col-xs-push-3 {
  left: 25%;
}

.col-xs-push-4 {
  left: 33.3333333333%;
}

.col-xs-push-5 {
  left: 41.6666666667%;
}

.col-xs-push-6 {
  left: 50%;
}

.col-xs-push-7 {
  left: 58.3333333333%;
}

.col-xs-push-8 {
  left: 66.6666666667%;
}

.col-xs-push-9 {
  left: 75%;
}

.col-xs-push-10 {
  left: 83.3333333333%;
}

.col-xs-push-11 {
  left: 91.6666666667%;
}

.col-xs-push-12 {
  left: 100%;
}

.col-xs-offset-0 {
  margin-left: 0%;
}

.col-xs-offset-1 {
  margin-left: 8.3333333333%;
}

.col-xs-offset-2 {
  margin-left: 16.6666666667%;
}

.col-xs-offset-3 {
  margin-left: 25%;
}

.col-xs-offset-4 {
  margin-left: 33.3333333333%;
}

.col-xs-offset-5 {
  margin-left: 41.6666666667%;
}

.col-xs-offset-6 {
  margin-left: 50%;
}

.col-xs-offset-7 {
  margin-left: 58.3333333333%;
}

.col-xs-offset-8 {
  margin-left: 66.6666666667%;
}

.col-xs-offset-9 {
  margin-left: 75%;
}

.col-xs-offset-10 {
  margin-left: 83.3333333333%;
}

.col-xs-offset-11 {
  margin-left: 91.6666666667%;
}

.col-xs-offset-12 {
  margin-left: 100%;
}

@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-1 {
    width: 8.3333333333%;
  }
  .col-sm-2 {
    width: 16.6666666667%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.3333333333%;
  }
  .col-sm-5 {
    width: 41.6666666667%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.3333333333%;
  }
  .col-sm-8 {
    width: 66.6666666667%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-10 {
    width: 83.3333333333%;
  }
  .col-sm-11 {
    width: 91.6666666667%;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-pull-1 {
    right: 8.3333333333%;
  }
  .col-sm-pull-2 {
    right: 16.6666666667%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-4 {
    right: 33.3333333333%;
  }
  .col-sm-pull-5 {
    right: 41.6666666667%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-7 {
    right: 58.3333333333%;
  }
  .col-sm-pull-8 {
    right: 66.6666666667%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-10 {
    right: 83.3333333333%;
  }
  .col-sm-pull-11 {
    right: 91.6666666667%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-push-1 {
    left: 8.3333333333%;
  }
  .col-sm-push-2 {
    left: 16.6666666667%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-4 {
    left: 33.3333333333%;
  }
  .col-sm-push-5 {
    left: 41.6666666667%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-7 {
    left: 58.3333333333%;
  }
  .col-sm-push-8 {
    left: 66.6666666667%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-10 {
    left: 83.3333333333%;
  }
  .col-sm-push-11 {
    left: 91.6666666667%;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-offset-0 {
    margin-left: 0%;
  }
  .col-sm-offset-1 {
    margin-left: 8.3333333333%;
  }
  .col-sm-offset-2 {
    margin-left: 16.6666666667%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-4 {
    margin-left: 33.3333333333%;
  }
  .col-sm-offset-5 {
    margin-left: 41.6666666667%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-7 {
    margin-left: 58.3333333333%;
  }
  .col-sm-offset-8 {
    margin-left: 66.6666666667%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-10 {
    margin-left: 83.3333333333%;
  }
  .col-sm-offset-11 {
    margin-left: 91.6666666667%;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }
}
@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-1 {
    width: 8.3333333333%;
  }
  .col-md-2 {
    width: 16.6666666667%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.3333333333%;
  }
  .col-md-5 {
    width: 41.6666666667%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.3333333333%;
  }
  .col-md-8 {
    width: 66.6666666667%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83.3333333333%;
  }
  .col-md-11 {
    width: 91.6666666667%;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-pull-0 {
    right: auto;
  }
  .col-md-pull-1 {
    right: 8.3333333333%;
  }
  .col-md-pull-2 {
    right: 16.6666666667%;
  }
  .col-md-pull-3 {
    right: 25%;
  }
  .col-md-pull-4 {
    right: 33.3333333333%;
  }
  .col-md-pull-5 {
    right: 41.6666666667%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-pull-7 {
    right: 58.3333333333%;
  }
  .col-md-pull-8 {
    right: 66.6666666667%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-pull-10 {
    right: 83.3333333333%;
  }
  .col-md-pull-11 {
    right: 91.6666666667%;
  }
  .col-md-pull-12 {
    right: 100%;
  }
  .col-md-push-0 {
    left: auto;
  }
  .col-md-push-1 {
    left: 8.3333333333%;
  }
  .col-md-push-2 {
    left: 16.6666666667%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-push-4 {
    left: 33.3333333333%;
  }
  .col-md-push-5 {
    left: 41.6666666667%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-push-7 {
    left: 58.3333333333%;
  }
  .col-md-push-8 {
    left: 66.6666666667%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-push-10 {
    left: 83.3333333333%;
  }
  .col-md-push-11 {
    left: 91.6666666667%;
  }
  .col-md-push-12 {
    left: 100%;
  }
  .col-md-offset-0 {
    margin-left: 0%;
  }
  .col-md-offset-1 {
    margin-left: 8.3333333333%;
  }
  .col-md-offset-2 {
    margin-left: 16.6666666667%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-4 {
    margin-left: 33.3333333333%;
  }
  .col-md-offset-5 {
    margin-left: 41.6666666667%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-7 {
    margin-left: 58.3333333333%;
  }
  .col-md-offset-8 {
    margin-left: 66.6666666667%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-10 {
    margin-left: 83.3333333333%;
  }
  .col-md-offset-11 {
    margin-left: 91.6666666667%;
  }
  .col-md-offset-12 {
    margin-left: 100%;
  }
}
@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  .col-lg-1 {
    width: 8.3333333333%;
  }
  .col-lg-2 {
    width: 16.6666666667%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.3333333333%;
  }
  .col-lg-5 {
    width: 41.6666666667%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.3333333333%;
  }
  .col-lg-8 {
    width: 66.6666666667%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-10 {
    width: 83.3333333333%;
  }
  .col-lg-11 {
    width: 91.6666666667%;
  }
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-pull-0 {
    right: auto;
  }
  .col-lg-pull-1 {
    right: 8.3333333333%;
  }
  .col-lg-pull-2 {
    right: 16.6666666667%;
  }
  .col-lg-pull-3 {
    right: 25%;
  }
  .col-lg-pull-4 {
    right: 33.3333333333%;
  }
  .col-lg-pull-5 {
    right: 41.6666666667%;
  }
  .col-lg-pull-6 {
    right: 50%;
  }
  .col-lg-pull-7 {
    right: 58.3333333333%;
  }
  .col-lg-pull-8 {
    right: 66.6666666667%;
  }
  .col-lg-pull-9 {
    right: 75%;
  }
  .col-lg-pull-10 {
    right: 83.3333333333%;
  }
  .col-lg-pull-11 {
    right: 91.6666666667%;
  }
  .col-lg-pull-12 {
    right: 100%;
  }
  .col-lg-push-0 {
    left: auto;
  }
  .col-lg-push-1 {
    left: 8.3333333333%;
  }
  .col-lg-push-2 {
    left: 16.6666666667%;
  }
  .col-lg-push-3 {
    left: 25%;
  }
  .col-lg-push-4 {
    left: 33.3333333333%;
  }
  .col-lg-push-5 {
    left: 41.6666666667%;
  }
  .col-lg-push-6 {
    left: 50%;
  }
  .col-lg-push-7 {
    left: 58.3333333333%;
  }
  .col-lg-push-8 {
    left: 66.6666666667%;
  }
  .col-lg-push-9 {
    left: 75%;
  }
  .col-lg-push-10 {
    left: 83.3333333333%;
  }
  .col-lg-push-11 {
    left: 91.6666666667%;
  }
  .col-lg-push-12 {
    left: 100%;
  }
  .col-lg-offset-0 {
    margin-left: 0%;
  }
  .col-lg-offset-1 {
    margin-left: 8.3333333333%;
  }
  .col-lg-offset-2 {
    margin-left: 16.6666666667%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-4 {
    margin-left: 33.3333333333%;
  }
  .col-lg-offset-5 {
    margin-left: 41.6666666667%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-7 {
    margin-left: 58.3333333333%;
  }
  .col-lg-offset-8 {
    margin-left: 66.6666666667%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-10 {
    margin-left: 83.3333333333%;
  }
  .col-lg-offset-11 {
    margin-left: 91.6666666667%;
  }
  .col-lg-offset-12 {
    margin-left: 100%;
  }
}
table {
  background-color: transparent;
}
table col[class*=col-] {
  position: static;
  display: table-column;
  float: none;
}
table td[class*=col-],
table th[class*=col-] {
  position: static;
  display: table-cell;
  float: none;
}

caption {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #777777;
  text-align: left;
}

th {
  text-align: left;
}

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.428571429;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > th,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.table > tbody + tbody {
  border-top: 2px solid #ddd;
}
.table .table {
  background-color: #fff;
}

.table-condensed > thead > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > tfoot > tr > td {
  padding: 5px;
}

.table-bordered {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

.table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}

.table > thead > tr > td.active,
.table > thead > tr > th.active, .table > thead > tr.active > td, .table > thead > tr.active > th,
.table > tbody > tr > td.active,
.table > tbody > tr > th.active,
.table > tbody > tr.active > td,
.table > tbody > tr.active > th,
.table > tfoot > tr > td.active,
.table > tfoot > tr > th.active,
.table > tfoot > tr.active > td,
.table > tfoot > tr.active > th {
  background-color: #f5f5f5;
}

.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover, .table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr:hover > .active, .table-hover > tbody > tr.active:hover > th {
  background-color: #e8e8e8;
}

.table > thead > tr > td.success,
.table > thead > tr > th.success, .table > thead > tr.success > td, .table > thead > tr.success > th,
.table > tbody > tr > td.success,
.table > tbody > tr > th.success,
.table > tbody > tr.success > td,
.table > tbody > tr.success > th,
.table > tfoot > tr > td.success,
.table > tfoot > tr > th.success,
.table > tfoot > tr.success > td,
.table > tfoot > tr.success > th {
  background-color: #dff0d8;
}

.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover, .table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr:hover > .success, .table-hover > tbody > tr.success:hover > th {
  background-color: #d0e9c6;
}

.table > thead > tr > td.info,
.table > thead > tr > th.info, .table > thead > tr.info > td, .table > thead > tr.info > th,
.table > tbody > tr > td.info,
.table > tbody > tr > th.info,
.table > tbody > tr.info > td,
.table > tbody > tr.info > th,
.table > tfoot > tr > td.info,
.table > tfoot > tr > th.info,
.table > tfoot > tr.info > td,
.table > tfoot > tr.info > th {
  background-color: #d9edf7;
}

.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover, .table-hover > tbody > tr.info:hover > td, .table-hover > tbody > tr:hover > .info, .table-hover > tbody > tr.info:hover > th {
  background-color: #c4e3f3;
}

.table > thead > tr > td.warning,
.table > thead > tr > th.warning, .table > thead > tr.warning > td, .table > thead > tr.warning > th,
.table > tbody > tr > td.warning,
.table > tbody > tr > th.warning,
.table > tbody > tr.warning > td,
.table > tbody > tr.warning > th,
.table > tfoot > tr > td.warning,
.table > tfoot > tr > th.warning,
.table > tfoot > tr.warning > td,
.table > tfoot > tr.warning > th {
  background-color: #fcf8e3;
}

.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover, .table-hover > tbody > tr.warning:hover > td, .table-hover > tbody > tr:hover > .warning, .table-hover > tbody > tr.warning:hover > th {
  background-color: #faf2cc;
}

.table > thead > tr > td.danger,
.table > thead > tr > th.danger, .table > thead > tr.danger > td, .table > thead > tr.danger > th,
.table > tbody > tr > td.danger,
.table > tbody > tr > th.danger,
.table > tbody > tr.danger > td,
.table > tbody > tr.danger > th,
.table > tfoot > tr > td.danger,
.table > tfoot > tr > th.danger,
.table > tfoot > tr.danger > td,
.table > tfoot > tr.danger > th {
  background-color: #f2dede;
}

.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover, .table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr:hover > .danger, .table-hover > tbody > tr.danger:hover > th {
  background-color: #ebcccc;
}

.table-responsive {
  min-height: 0.01%;
  overflow-x: auto;
}
@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
  .table-responsive > .table-bordered {
    border: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child,
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child,
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}

input[type=search] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

input[type=radio],
input[type=checkbox] {
  margin: 4px 0 0;
  margin-top: 1px \9 ;
  line-height: normal;
}
input[type=radio][disabled], input[type=radio].disabled, fieldset[disabled] input[type=radio],
input[type=checkbox][disabled],
input[type=checkbox].disabled,
fieldset[disabled] input[type=checkbox] {
  cursor: not-allowed;
}

input[type=file] {
  display: block;
}

input[type=range] {
  display: block;
  width: 100%;
}

select[multiple],
select[size] {
  height: auto;
}

input[type=file]:focus,
input[type=radio]:focus,
input[type=checkbox]:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

output {
  display: block;
  padding-top: 7px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
}

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.form-control::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #999;
}
.form-control::-webkit-input-placeholder {
  color: #999;
}
.form-control::-ms-expand {
  background-color: transparent;
  border: 0;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  background-color: #eeeeee;
  opacity: 1;
}
.form-control[disabled], fieldset[disabled] .form-control {
  cursor: not-allowed;
}

textarea.form-control {
  height: auto;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type=date].form-control,
  input[type=time].form-control,
  input[type=datetime-local].form-control,
  input[type=month].form-control {
    line-height: 34px;
  }
  input[type=date].input-sm,
  .input-group-sm > .input-group-btn > input[type=date].btn, .input-group-sm input[type=date],
  input[type=time].input-sm,
  .input-group-sm > .input-group-btn > input[type=time].btn,
  .input-group-sm input[type=time],
  input[type=datetime-local].input-sm,
  .input-group-sm > .input-group-btn > input[type=datetime-local].btn,
  .input-group-sm input[type=datetime-local],
  input[type=month].input-sm,
  .input-group-sm > .input-group-btn > input[type=month].btn,
  .input-group-sm input[type=month] {
    line-height: 30px;
  }
  input[type=date].input-lg,
  .input-group-lg > .input-group-btn > input[type=date].btn, .input-group-lg input[type=date],
  input[type=time].input-lg,
  .input-group-lg > .input-group-btn > input[type=time].btn,
  .input-group-lg input[type=time],
  input[type=datetime-local].input-lg,
  .input-group-lg > .input-group-btn > input[type=datetime-local].btn,
  .input-group-lg input[type=datetime-local],
  input[type=month].input-lg,
  .input-group-lg > .input-group-btn > input[type=month].btn,
  .input-group-lg input[type=month] {
    line-height: 46px;
  }
}
.form-group {
  margin-bottom: 15px;
}

.radio,
.checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}
.radio.disabled label, fieldset[disabled] .radio label,
.checkbox.disabled label,
fieldset[disabled] .checkbox label {
  cursor: not-allowed;
}
.radio label,
.checkbox label {
  min-height: 20px;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.radio input[type=radio],
.radio-inline input[type=radio],
.checkbox input[type=checkbox],
.checkbox-inline input[type=checkbox] {
  position: absolute;
  margin-top: 4px \9 ;
  margin-left: -20px;
}

.radio + .radio,
.checkbox + .checkbox {
  margin-top: -5px;
}

.radio-inline,
.checkbox-inline {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: 400;
  vertical-align: middle;
  cursor: pointer;
}
.radio-inline.disabled, fieldset[disabled] .radio-inline,
.checkbox-inline.disabled,
fieldset[disabled] .checkbox-inline {
  cursor: not-allowed;
}

.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 10px;
}

.form-control-static {
  min-height: 34px;
  padding-top: 7px;
  padding-bottom: 7px;
  margin-bottom: 0;
}
.form-control-static.input-lg, .input-group-lg > .form-control-static.form-control,
.input-group-lg > .form-control-static.input-group-addon,
.input-group-lg > .input-group-btn > .form-control-static.btn, .form-control-static.input-sm, .input-group-sm > .form-control-static.form-control,
.input-group-sm > .form-control-static.input-group-addon,
.input-group-sm > .input-group-btn > .form-control-static.btn {
  padding-right: 0;
  padding-left: 0;
}

.input-sm, .input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

select.input-sm, .input-group-sm > select.form-control,
.input-group-sm > select.input-group-addon,
.input-group-sm > .input-group-btn > select.btn {
  height: 30px;
  line-height: 30px;
}

textarea.input-sm, .input-group-sm > textarea.form-control,
.input-group-sm > textarea.input-group-addon,
.input-group-sm > .input-group-btn > textarea.btn,
select[multiple].input-sm,
.input-group-sm > select[multiple].form-control,
.input-group-sm > select[multiple].input-group-addon,
.input-group-sm > .input-group-btn > select[multiple].btn {
  height: auto;
}

.form-group-sm .form-control {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.form-group-sm select.form-control {
  height: 30px;
  line-height: 30px;
}
.form-group-sm textarea.form-control,
.form-group-sm select[multiple].form-control {
  height: auto;
}
.form-group-sm .form-control-static {
  height: 30px;
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.5;
}

.input-lg, .input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

select.input-lg, .input-group-lg > select.form-control,
.input-group-lg > select.input-group-addon,
.input-group-lg > .input-group-btn > select.btn {
  height: 46px;
  line-height: 46px;
}

textarea.input-lg, .input-group-lg > textarea.form-control,
.input-group-lg > textarea.input-group-addon,
.input-group-lg > .input-group-btn > textarea.btn,
select[multiple].input-lg,
.input-group-lg > select[multiple].form-control,
.input-group-lg > select[multiple].input-group-addon,
.input-group-lg > .input-group-btn > select[multiple].btn {
  height: auto;
}

.form-group-lg .form-control {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}
.form-group-lg select.form-control {
  height: 46px;
  line-height: 46px;
}
.form-group-lg textarea.form-control,
.form-group-lg select[multiple].form-control {
  height: auto;
}
.form-group-lg .form-control-static {
  height: 46px;
  min-height: 38px;
  padding: 11px 16px;
  font-size: 18px;
  line-height: 1.3333333;
}

.has-feedback {
  position: relative;
}
.has-feedback .form-control {
  padding-right: 42.5px;
}

.form-control-feedback {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  pointer-events: none;
}

.input-lg + .form-control-feedback, .input-group-lg > .form-control + .form-control-feedback,
.input-group-lg > .input-group-addon + .form-control-feedback,
.input-group-lg > .input-group-btn > .btn + .form-control-feedback,
.input-group-lg + .form-control-feedback,
.form-group-lg .form-control + .form-control-feedback {
  width: 46px;
  height: 46px;
  line-height: 46px;
}

.input-sm + .form-control-feedback, .input-group-sm > .form-control + .form-control-feedback,
.input-group-sm > .input-group-addon + .form-control-feedback,
.input-group-sm > .input-group-btn > .btn + .form-control-feedback,
.input-group-sm + .form-control-feedback,
.form-group-sm .form-control + .form-control-feedback {
  width: 30px;
  height: 30px;
  line-height: 30px;
}

.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline, .has-success.radio label, .has-success.checkbox label, .has-success.radio-inline label, .has-success.checkbox-inline label {
  color: #3c763d;
}
.has-success .form-control {
  border-color: #3c763d;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .form-control:focus {
  border-color: #2b542c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}
.has-success .input-group-addon {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #3c763d;
}
.has-success .form-control-feedback {
  color: #3c763d;
}

.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline, .has-warning.radio label, .has-warning.checkbox label, .has-warning.radio-inline label, .has-warning.checkbox-inline label {
  color: #8a6d3b;
}
.has-warning .form-control {
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-warning .form-control:focus {
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}
.has-warning .input-group-addon {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #8a6d3b;
}
.has-warning .form-control-feedback {
  color: #8a6d3b;
}

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label {
  color: #a94442;
}
.has-error .form-control {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .form-control:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}
.has-error .input-group-addon {
  color: #a94442;
  background-color: #f2dede;
  border-color: #a94442;
}
.has-error .form-control-feedback {
  color: #a94442;
}

.has-feedback label ~ .form-control-feedback {
  top: 25px;
}
.has-feedback label.sr-only ~ .form-control-feedback {
  top: 0;
}

.help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #737373;
}

@media (min-width: 768px) {
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .form-inline .form-control-static {
    display: inline-block;
  }
  .form-inline .input-group {
    display: inline-table;
    vertical-align: middle;
  }
  .form-inline .input-group .input-group-addon,
  .form-inline .input-group .input-group-btn,
  .form-inline .input-group .form-control {
    width: auto;
  }
  .form-inline .input-group > .form-control {
    width: 100%;
  }
  .form-inline .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .radio,
  .form-inline .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .radio label,
  .form-inline .checkbox label {
    padding-left: 0;
  }
  .form-inline .radio input[type=radio],
  .form-inline .checkbox input[type=checkbox] {
    position: relative;
    margin-left: 0;
  }
  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}

.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
  padding-top: 7px;
  margin-top: 0;
  margin-bottom: 0;
}
.form-horizontal .radio,
.form-horizontal .checkbox {
  min-height: 27px;
}
.form-horizontal .form-group {
  margin-right: -15px;
  margin-left: -15px;
}
.form-horizontal .form-group:before, .form-horizontal .form-group:after {
  display: table;
  content: " ";
}
.form-horizontal .form-group:after {
  clear: both;
}
@media (min-width: 768px) {
  .form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
  }
}
.form-horizontal .has-feedback .form-control-feedback {
  right: 15px;
}
@media (min-width: 768px) {
  .form-horizontal .form-group-lg .control-label {
    padding-top: 11px;
    font-size: 18px;
  }
}
@media (min-width: 768px) {
  .form-horizontal .form-group-sm .control-label {
    padding-top: 6px;
    font-size: 12px;
  }
}

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.btn:focus, .btn.focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover, .btn:focus, .btn.focus {
  color: #333;
  text-decoration: none;
}
.btn:active, .btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
  -webkit-box-shadow: none;
  box-shadow: none;
}

a.btn.disabled, fieldset[disabled] a.btn {
  pointer-events: none;
}

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.btn-default:focus, .btn-default.focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}
.btn-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-default:active, .btn-default.active, .open > .btn-default.dropdown-toggle {
  color: #333;
  background-color: #e6e6e6;
  background-image: none;
  border-color: #adadad;
}
.btn-default:active:hover, .btn-default:active:focus, .btn-default:active.focus, .btn-default.active:hover, .btn-default.active:focus, .btn-default.active.focus, .open > .btn-default.dropdown-toggle:hover, .open > .btn-default.dropdown-toggle:focus, .open > .btn-default.dropdown-toggle.focus {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled.focus, .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default.focus {
  background-color: #fff;
  border-color: #ccc;
}
.btn-default .badge {
  color: #fff;
  background-color: #333;
}

.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}
.btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color: #286090;
  border-color: #122b40;
}
.btn-primary:hover {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}
.btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #286090;
  background-image: none;
  border-color: #204d74;
}
.btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus, .open > .btn-primary.dropdown-toggle:hover, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle.focus {
  color: #fff;
  background-color: #204d74;
  border-color: #122b40;
}
.btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary.focus {
  background-color: #337ab7;
  border-color: #2e6da4;
}
.btn-primary .badge {
  color: #337ab7;
  background-color: #fff;
}

.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.btn-success:focus, .btn-success.focus {
  color: #fff;
  background-color: #449d44;
  border-color: #255625;
}
.btn-success:hover {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}
.btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: #449d44;
  background-image: none;
  border-color: #398439;
}
.btn-success:active:hover, .btn-success:active:focus, .btn-success:active.focus, .btn-success.active:hover, .btn-success.active:focus, .btn-success.active.focus, .open > .btn-success.dropdown-toggle:hover, .open > .btn-success.dropdown-toggle:focus, .open > .btn-success.dropdown-toggle.focus {
  color: #fff;
  background-color: #398439;
  border-color: #255625;
}
.btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled.focus, .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled].focus, fieldset[disabled] .btn-success:hover, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success.focus {
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.btn-success .badge {
  color: #5cb85c;
  background-color: #fff;
}

.btn-info {
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn-info:focus, .btn-info.focus {
  color: #fff;
  background-color: #31b0d5;
  border-color: #1b6d85;
}
.btn-info:hover {
  color: #fff;
  background-color: #31b0d5;
  border-color: #269abc;
}
.btn-info:active, .btn-info.active, .open > .btn-info.dropdown-toggle {
  color: #fff;
  background-color: #31b0d5;
  background-image: none;
  border-color: #269abc;
}
.btn-info:active:hover, .btn-info:active:focus, .btn-info:active.focus, .btn-info.active:hover, .btn-info.active:focus, .btn-info.active.focus, .open > .btn-info.dropdown-toggle:hover, .open > .btn-info.dropdown-toggle:focus, .open > .btn-info.dropdown-toggle.focus {
  color: #fff;
  background-color: #269abc;
  border-color: #1b6d85;
}
.btn-info.disabled:hover, .btn-info.disabled:focus, .btn-info.disabled.focus, .btn-info[disabled]:hover, .btn-info[disabled]:focus, .btn-info[disabled].focus, fieldset[disabled] .btn-info:hover, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info.focus {
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn-info .badge {
  color: #5bc0de;
  background-color: #fff;
}

.btn-warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
}
.btn-warning:focus, .btn-warning.focus {
  color: #fff;
  background-color: #ec971f;
  border-color: #985f0d;
}
.btn-warning:hover {
  color: #fff;
  background-color: #ec971f;
  border-color: #d58512;
}
.btn-warning:active, .btn-warning.active, .open > .btn-warning.dropdown-toggle {
  color: #fff;
  background-color: #ec971f;
  background-image: none;
  border-color: #d58512;
}
.btn-warning:active:hover, .btn-warning:active:focus, .btn-warning:active.focus, .btn-warning.active:hover, .btn-warning.active:focus, .btn-warning.active.focus, .open > .btn-warning.dropdown-toggle:hover, .open > .btn-warning.dropdown-toggle:focus, .open > .btn-warning.dropdown-toggle.focus {
  color: #fff;
  background-color: #d58512;
  border-color: #985f0d;
}
.btn-warning.disabled:hover, .btn-warning.disabled:focus, .btn-warning.disabled.focus, .btn-warning[disabled]:hover, .btn-warning[disabled]:focus, .btn-warning[disabled].focus, fieldset[disabled] .btn-warning:hover, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning.focus {
  background-color: #f0ad4e;
  border-color: #eea236;
}
.btn-warning .badge {
  color: #f0ad4e;
  background-color: #fff;
}

.btn-danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}
.btn-danger:focus, .btn-danger.focus {
  color: #fff;
  background-color: #c9302c;
  border-color: #761c19;
}
.btn-danger:hover {
  color: #fff;
  background-color: #c9302c;
  border-color: #ac2925;
}
.btn-danger:active, .btn-danger.active, .open > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #c9302c;
  background-image: none;
  border-color: #ac2925;
}
.btn-danger:active:hover, .btn-danger:active:focus, .btn-danger:active.focus, .btn-danger.active:hover, .btn-danger.active:focus, .btn-danger.active.focus, .open > .btn-danger.dropdown-toggle:hover, .open > .btn-danger.dropdown-toggle:focus, .open > .btn-danger.dropdown-toggle.focus {
  color: #fff;
  background-color: #ac2925;
  border-color: #761c19;
}
.btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled.focus, .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled].focus, fieldset[disabled] .btn-danger:hover, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger.focus {
  background-color: #d9534f;
  border-color: #d43f3a;
}
.btn-danger .badge {
  color: #d9534f;
  background-color: #fff;
}

.btn-link {
  font-weight: 400;
  color: #337ab7;
  border-radius: 0;
}
.btn-link, .btn-link:active, .btn-link.active, .btn-link[disabled], fieldset[disabled] .btn-link {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
  border-color: transparent;
}
.btn-link:hover, .btn-link:focus {
  color: #23527c;
  text-decoration: underline;
  background-color: transparent;
}
.btn-link[disabled]:hover, .btn-link[disabled]:focus, fieldset[disabled] .btn-link:hover, fieldset[disabled] .btn-link:focus {
  color: #777777;
  text-decoration: none;
}

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

.btn-xs {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-block + .btn-block {
  margin-top: 5px;
}

input[type=submit].btn-block,
input[type=reset].btn-block,
input[type=button].btn-block {
  width: 100%;
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid \9 ;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.dropup,
.dropdown {
  position: relative;
}

.dropdown-toggle:focus {
  outline: 0;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.428571429;
  color: #333333;
  white-space: nowrap;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #337ab7;
  outline: 0;
}

.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
  color: #777777;
}
.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

.open > .dropdown-menu {
  display: block;
}
.open > a {
  outline: 0;
}

.dropdown-menu-right {
  right: 0;
  left: auto;
}

.dropdown-menu-left {
  right: auto;
  left: 0;
}

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.428571429;
  color: #777777;
  white-space: nowrap;
}

.dropdown-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 990;
}

.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  content: "";
  border-top: 0;
  border-bottom: 4px dashed;
  border-bottom: 4px solid \9 ;
}
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 2px;
}

@media (min-width: 768px) {
  .navbar-right .dropdown-menu {
    right: 0;
    left: auto;
  }
  .navbar-right .dropdown-menu-left {
    left: 0;
    right: auto;
  }
}
.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}
.input-group[class*=col-] {
  float: none;
  padding-right: 0;
  padding-left: 0;
}
.input-group .form-control {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
}
.input-group .form-control:focus {
  z-index: 3;
}

.input-group-addon,
.input-group-btn,
.input-group .form-control {
  display: table-cell;
}
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.input-group-addon,
.input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

.input-group-addon {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #555555;
  text-align: center;
  background-color: #eeeeee;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.input-group-addon.input-sm,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .input-group-addon.btn {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 3px;
}
.input-group-addon.input-lg,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .input-group-addon.btn {
  padding: 10px 16px;
  font-size: 18px;
  border-radius: 6px;
}
.input-group-addon input[type=radio],
.input-group-addon input[type=checkbox] {
  margin-top: 0;
}

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group-addon:first-child {
  border-right: 0;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group-addon:last-child {
  border-left: 0;
}

.input-group-btn {
  position: relative;
  font-size: 0;
  white-space: nowrap;
}
.input-group-btn > .btn {
  position: relative;
}
.input-group-btn > .btn + .btn {
  margin-left: -1px;
}
.input-group-btn > .btn:hover, .input-group-btn > .btn:focus, .input-group-btn > .btn:active {
  z-index: 2;
}
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group {
  margin-right: -1px;
}
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group {
  z-index: 2;
  margin-left: -1px;
}

.modal-open {
  overflow: hidden;
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}
.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}

.modal-content {
  position: relative;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}
.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: 0.5;
}

.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.modal-header:before, .modal-header:after {
  display: table;
  content: " ";
}
.modal-header:after {
  clear: both;
}

.modal-header .close {
  margin-top: -2px;
}

.modal-title {
  margin: 0;
  line-height: 1.428571429;
}

.modal-body {
  position: relative;
  padding: 15px;
}

.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.modal-footer:before, .modal-footer:after {
  display: table;
  content: " ";
}
.modal-footer:after {
  clear: both;
}
.modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  }
  .modal-sm {
    width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}
.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.428571429;
  line-break: auto;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  font-size: 12px;
  filter: alpha(opacity=0);
  opacity: 0;
}
.tooltip.in {
  filter: alpha(opacity=90);
  opacity: 0.9;
}
.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}
.tooltip.right {
  padding: 0 5px;
  margin-left: 3px;
}
.tooltip.bottom {
  padding: 5px 0;
  margin-top: 3px;
}
.tooltip.left {
  padding: 0 5px;
  margin-left: -3px;
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
  right: 5px;
  bottom: 0;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  left: 5px;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  right: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  left: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}

.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 4px;
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.clearfix:before, .clearfix:after {
  display: table;
  content: " ";
}
.clearfix:after {
  clear: both;
}

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.pull-right {
  float: right !important;
}

.pull-left {
  float: left !important;
}

.hide {
  display: none !important;
}

.show {
  display: block !important;
}

.invisible {
  visibility: hidden;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.hidden {
  display: none !important;
}

.affix {
  position: fixed;
}

@-ms-viewport {
  width: device-width;
}
.visible-xs {
  display: none !important;
}

.visible-sm {
  display: none !important;
}

.visible-md {
  display: none !important;
}

.visible-lg {
  display: none !important;
}

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important;
}

@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
  table.visible-xs {
    display: table !important;
  }
  tr.visible-xs {
    display: table-row !important;
  }
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-block {
    display: block !important;
  }
}

@media (max-width: 767px) {
  .visible-xs-inline {
    display: inline !important;
  }
}

@media (max-width: 767px) {
  .visible-xs-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important;
  }
  table.visible-sm {
    display: table !important;
  }
  tr.visible-sm {
    display: table-row !important;
  }
  th.visible-sm,
  td.visible-sm {
    display: table-cell !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline {
    display: inline !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important;
  }
  table.visible-md {
    display: table !important;
  }
  tr.visible-md {
    display: table-row !important;
  }
  th.visible-md,
  td.visible-md {
    display: table-cell !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-block {
    display: block !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline {
    display: inline !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 1200px) {
  .visible-lg {
    display: block !important;
  }
  table.visible-lg {
    display: table !important;
  }
  tr.visible-lg {
    display: table-row !important;
  }
  th.visible-lg,
  td.visible-lg {
    display: table-cell !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-block {
    display: block !important;
  }
}

@media (min-width: 1200px) {
  .visible-lg-inline {
    display: inline !important;
  }
}

@media (min-width: 1200px) {
  .visible-lg-inline-block {
    display: inline-block !important;
  }
}

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}
.visible-print {
  display: none !important;
}

@media print {
  .visible-print {
    display: block !important;
  }
  table.visible-print {
    display: table !important;
  }
  tr.visible-print {
    display: table-row !important;
  }
  th.visible-print,
  td.visible-print {
    display: table-cell !important;
  }
}
.visible-print-block {
  display: none !important;
}
@media print {
  .visible-print-block {
    display: block !important;
  }
}

.visible-print-inline {
  display: none !important;
}
@media print {
  .visible-print-inline {
    display: inline !important;
  }
}

.visible-print-inline-block {
  display: none !important;
}
@media print {
  .visible-print-inline-block {
    display: inline-block !important;
  }
}

@media print {
  .hidden-print {
    display: none !important;
  }
}
.shepherd-element, .shepherd-element:after, .shepherd-element:before, .shepherd-element *, .shepherd-element *:after, .shepherd-element *:before {
  box-sizing: border-box;
}

.shepherd-element {
  position: absolute;
  display: none;
}

.shepherd-element.shepherd-open {
  display: block;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons {
  max-width: 100%;
  max-height: 100%;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content {
  border-radius: 5px;
  position: relative;
  font-family: inherit;
  background: var(--bg-content);
  color: #444;
  padding: 1em;
  font-size: 1.1em;
  line-height: 1.5em;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
}

.shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content:before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-width: 16px;
  border-style: solid;
  pointer-events: none;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-content {
  margin-bottom: 16px;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-content:before {
  top: 100%;
  left: 50%;
  margin-left: -16px;
  border-top-color: #fff;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-content {
  margin-top: 16px;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-content:before {
  bottom: 100%;
  left: 50%;
  margin-left: -16px;
  border-bottom-color: #fff;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-right.shepherd-element-attached-middle .shepherd-content {
  margin-right: 16px;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-right.shepherd-element-attached-middle .shepherd-content:before {
  left: 100%;
  top: 50%;
  margin-top: -16px;
  border-left-color: #fff;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-left.shepherd-element-attached-middle .shepherd-content {
  margin-left: 16px;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-left.shepherd-element-attached-middle .shepherd-content:before {
  right: 100%;
  top: 50%;
  margin-top: -16px;
  border-right-color: #fff;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom .shepherd-content {
  margin-top: 16px;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom .shepherd-content:before {
  bottom: 100%;
  left: 16px;
  border-bottom-color: #fff;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom .shepherd-content {
  margin-top: 16px;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom .shepherd-content:before {
  bottom: 100%;
  right: 16px;
  border-bottom-color: #fff;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top .shepherd-content {
  margin-bottom: 16px;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top .shepherd-content:before {
  top: 100%;
  left: 16px;
  border-top-color: #fff;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top .shepherd-content {
  margin-bottom: 16px;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top .shepherd-content:before {
  top: 100%;
  right: 16px;
  border-top-color: #fff;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content {
  margin-right: 16px;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content:before {
  top: 16px;
  left: 100%;
  border-left-color: #fff;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content {
  margin-left: 16px;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content:before {
  top: 16px;
  right: 100%;
  border-right-color: #fff;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content {
  margin-right: 16px;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content:before {
  bottom: 16px;
  left: 100%;
  border-left-color: #fff;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content {
  margin-left: 16px;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content:before {
  bottom: 16px;
  right: 100%;
  border-right-color: #fff;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before {
  border-bottom-color: #eee;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-has-title .shepherd-content header {
  background: var(--bg-grey-e);
  padding: 1em;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-has-title .shepherd-content header a.shepherd-cancel-link {
  padding: 0;
  margin-bottom: 0;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons.shepherd-has-cancel-link .shepherd-content header h3 {
  float: left;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content {
  padding: 0;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content header {
  *zoom: 1;
  border-radius: 5px 5px 0 0;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content header:after {
  content: "";
  display: table;
  clear: both;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content header h3 {
  margin: 0;
  line-height: 1;
  font-weight: normal;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content header a.shepherd-cancel-link {
  float: right;
  text-decoration: none;
  font-size: 1.25em;
  line-height: 0.8em;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.5);
  opacity: 0.25;
  position: relative;
  top: 0.1em;
  padding: 0.8em;
  margin-bottom: -0.8em;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content header a.shepherd-cancel-link:hover {
  opacity: 1;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content .shepherd-text {
  padding: 1em;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content .shepherd-text p {
  margin: 0 0 0.5em 0;
  line-height: 1.3em;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content .shepherd-text p:last-child {
  margin-bottom: 0;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content footer {
  padding: 0 1em 1em;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content footer .shepherd-buttons {
  text-align: right;
  list-style: none;
  padding: 0;
  margin: 0;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content footer .shepherd-buttons li {
  display: inline;
  padding: 0;
  margin: 0;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content footer .shepherd-buttons li .shepherd-button {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  cursor: pointer;
  margin: 0 0.5em 0 0;
  text-decoration: none;
}

.shepherd-element.shepherd-theme-arrows-plain-buttons .shepherd-content footer .shepherd-buttons li:last-child .shepherd-button {
  margin-right: 0;
}

.shepherd-element, .shepherd-element:after, .shepherd-element:before, .shepherd-element *, .shepherd-element *:after, .shepherd-element *:before {
  box-sizing: border-box;
}

.shepherd-element {
  position: absolute;
  display: none;
}

.shepherd-element.shepherd-open {
  display: block;
}

.shepherd-element.shepherd-theme-arrows {
  max-width: 100%;
  max-height: 100%;
}

.shepherd-element.shepherd-theme-arrows .shepherd-content {
  border-radius: 5px;
  position: relative;
  font-family: inherit;
  background: var(--bg-content);
  color: #444;
  padding: 1em;
  font-size: 1.1em;
  line-height: 1.5em;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
}

.shepherd-element.shepherd-theme-arrows .shepherd-content:before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-width: 16px;
  border-style: solid;
  pointer-events: none;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-content {
  margin-bottom: 16px;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-content:before {
  top: 100%;
  left: 50%;
  margin-left: -16px;
  border-top-color: #fff;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-content {
  margin-top: 16px;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-content:before {
  bottom: 100%;
  left: 50%;
  margin-left: -16px;
  border-bottom-color: #fff;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-right.shepherd-element-attached-middle .shepherd-content {
  margin-right: 16px;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-right.shepherd-element-attached-middle .shepherd-content:before {
  left: 100%;
  top: 50%;
  margin-top: -16px;
  border-left-color: #fff;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-left.shepherd-element-attached-middle .shepherd-content {
  margin-left: 16px;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-left.shepherd-element-attached-middle .shepherd-content:before {
  right: 100%;
  top: 50%;
  margin-top: -16px;
  border-right-color: #fff;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom .shepherd-content {
  margin-top: 16px;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom .shepherd-content:before {
  bottom: 100%;
  left: 16px;
  border-bottom-color: #fff;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom .shepherd-content {
  margin-top: 16px;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom .shepherd-content:before {
  bottom: 100%;
  right: 16px;
  border-bottom-color: #fff;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top .shepherd-content {
  margin-bottom: 16px;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top .shepherd-content:before {
  top: 100%;
  left: 16px;
  border-top-color: #fff;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top .shepherd-content {
  margin-bottom: 16px;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top .shepherd-content:before {
  top: 100%;
  right: 16px;
  border-top-color: #fff;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content {
  margin-right: 16px;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content:before {
  top: 16px;
  left: 100%;
  border-left-color: #fff;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content {
  margin-left: 16px;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content:before {
  top: 16px;
  right: 100%;
  border-right-color: #fff;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content {
  margin-right: 16px;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content:before {
  bottom: 16px;
  left: 100%;
  border-left-color: #fff;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content {
  margin-left: 16px;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content:before {
  bottom: 16px;
  right: 100%;
  border-right-color: #fff;
}

.shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-arrows.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before {
  border-bottom-color: #eee;
}

.shepherd-element.shepherd-theme-arrows.shepherd-has-title .shepherd-content header {
  background: var(--bg-grey-e);
  padding: 1em;
}

.shepherd-element.shepherd-theme-arrows.shepherd-has-title .shepherd-content header a.shepherd-cancel-link {
  padding: 0;
  margin-bottom: 0;
}

.shepherd-element.shepherd-theme-arrows.shepherd-has-cancel-link .shepherd-content header h3 {
  float: left;
}

.shepherd-element.shepherd-theme-arrows .shepherd-content {
  padding: 0;
}

.shepherd-element.shepherd-theme-arrows .shepherd-content * {
  font-size: inherit;
}

.shepherd-element.shepherd-theme-arrows .shepherd-content header {
  *zoom: 1;
  border-radius: 5px 5px 0 0;
}

.shepherd-element.shepherd-theme-arrows .shepherd-content header:after {
  content: "";
  display: table;
  clear: both;
}

.shepherd-element.shepherd-theme-arrows .shepherd-content header h3 {
  margin: 0;
  line-height: 1;
  font-weight: normal;
}

.shepherd-element.shepherd-theme-arrows .shepherd-content header a.shepherd-cancel-link {
  float: right;
  text-decoration: none;
  font-size: 1.25em;
  line-height: 0.8em;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.5);
  opacity: 0.25;
  position: relative;
  top: 0.1em;
  padding: 0.8em;
  margin-bottom: -0.8em;
}

.shepherd-element.shepherd-theme-arrows .shepherd-content header a.shepherd-cancel-link:hover {
  opacity: 1;
}

.shepherd-element.shepherd-theme-arrows .shepherd-content .shepherd-text {
  padding: 6px 30px 30px;
  font-size: 18px;
  font-weight: 600;
}

.shepherd-element.shepherd-theme-arrows .shepherd-content .shepherd-text p {
  margin: 0 0 0.5em 0;
  line-height: 1.3em;
}

.shepherd-element.shepherd-theme-arrows .shepherd-content .shepherd-text p:last-child {
  margin-bottom: 0;
}

.shepherd-element.shepherd-theme-arrows .shepherd-content footer {
  padding: 0 30px 30px;
}

.shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons {
  text-align: right;
  list-style: none;
  padding: 0;
  margin: 0;
}

.shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li {
  display: inline;
  padding: 0;
  margin: 0;
}

/*.shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  border-radius: 3px;
  cursor: pointer;
  border: 0;
  margin: 0 0.5em 0 0;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8em;
  line-height: 1em;
  padding: 0.75em 2em;
  background: #3288e6;
  color: #fff; }
  .shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li .shepherd-button.shepherd-button-secondary {
    background: var(--bg-grey-e);
    color: #888; }*/
.shepherd-element.shepherd-theme-arrows .shepherd-content footer .shepherd-buttons li:last-child .shepherd-button {
  margin-right: 0;
}

.shepherd-element, .shepherd-element:after, .shepherd-element:before, .shepherd-element *, .shepherd-element *:after, .shepherd-element *:before {
  box-sizing: border-box;
}

.shepherd-element {
  position: absolute;
  display: none;
}

.shepherd-element.shepherd-open {
  display: block;
}

.shepherd-element.shepherd-theme-default {
  max-width: 100%;
  max-height: 100%;
}

.shepherd-element.shepherd-theme-default .shepherd-content {
  border-radius: 5px;
  position: relative;
  font-family: inherit;
  background: #f6f6f6;
  color: #444;
  padding: 1em;
  font-size: 1.1em;
  line-height: 1.5em;
}

.shepherd-element.shepherd-theme-default .shepherd-content:before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-width: 16px;
  border-style: solid;
  pointer-events: none;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-content {
  margin-bottom: 16px;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-content:before {
  top: 100%;
  left: 50%;
  margin-left: -16px;
  border-top-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-content {
  margin-top: 16px;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-content:before {
  bottom: 100%;
  left: 50%;
  margin-left: -16px;
  border-bottom-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-right.shepherd-element-attached-middle .shepherd-content {
  margin-right: 16px;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-right.shepherd-element-attached-middle .shepherd-content:before {
  left: 100%;
  top: 50%;
  margin-top: -16px;
  border-left-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-left.shepherd-element-attached-middle .shepherd-content {
  margin-left: 16px;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-left.shepherd-element-attached-middle .shepherd-content:before {
  right: 100%;
  top: 50%;
  margin-top: -16px;
  border-right-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom .shepherd-content {
  margin-top: 16px;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom .shepherd-content:before {
  bottom: 100%;
  left: 16px;
  border-bottom-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom .shepherd-content {
  margin-top: 16px;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom .shepherd-content:before {
  bottom: 100%;
  right: 16px;
  border-bottom-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top .shepherd-content {
  margin-bottom: 16px;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top .shepherd-content:before {
  top: 100%;
  left: 16px;
  border-top-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top .shepherd-content {
  margin-bottom: 16px;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top .shepherd-content:before {
  top: 100%;
  right: 16px;
  border-top-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content {
  margin-right: 16px;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content:before {
  top: 16px;
  left: 100%;
  border-left-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content {
  margin-left: 16px;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content:before {
  top: 16px;
  right: 100%;
  border-right-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content {
  margin-right: 16px;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content:before {
  bottom: 16px;
  left: 100%;
  border-left-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content {
  margin-left: 16px;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content:before {
  bottom: 16px;
  right: 100%;
  border-right-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-default {
  z-index: 9999;
  max-width: 24em;
  font-size: 1em;
}

.shepherd-element.shepherd-theme-default.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-default.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-default.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before {
  border-bottom-color: #e6e6e6;
}

.shepherd-element.shepherd-theme-default.shepherd-has-title .shepherd-content header {
  background: #e6e6e6;
  padding: 1em;
}

.shepherd-element.shepherd-theme-default.shepherd-has-title .shepherd-content header a.shepherd-cancel-link {
  padding: 0;
  margin-bottom: 0;
}

.shepherd-element.shepherd-theme-default.shepherd-has-cancel-link .shepherd-content header h3 {
  float: left;
}

.shepherd-element.shepherd-theme-default .shepherd-content {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.17);
  padding: 0;
}

.shepherd-element.shepherd-theme-default .shepherd-content * {
  font-size: inherit;
}

.shepherd-element.shepherd-theme-default .shepherd-content header {
  *zoom: 1;
  border-radius: 5px 5px 0 0;
}

.shepherd-element.shepherd-theme-default .shepherd-content header:after {
  content: "";
  display: table;
  clear: both;
}

.shepherd-element.shepherd-theme-default .shepherd-content header h3 {
  margin: 0;
  line-height: 1;
  font-weight: normal;
}

.shepherd-element.shepherd-theme-default .shepherd-content header a.shepherd-cancel-link {
  float: right;
  text-decoration: none;
  font-size: 1.25em;
  line-height: 0.8em;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.5);
  opacity: 0.25;
  position: relative;
  top: 0.1em;
  padding: 0.8em;
  margin-bottom: -0.8em;
}

.shepherd-element.shepherd-theme-default .shepherd-content header a.shepherd-cancel-link:hover {
  opacity: 1;
}

.shepherd-element.shepherd-theme-default .shepherd-content .shepherd-text {
  padding: 1em;
}

.shepherd-element.shepherd-theme-default .shepherd-content .shepherd-text p {
  margin: 0 0 0.5em 0;
  line-height: 1.3em;
}

.shepherd-element.shepherd-theme-default .shepherd-content .shepherd-text p:last-child {
  margin-bottom: 0;
}

.shepherd-element.shepherd-theme-default .shepherd-content footer {
  padding: 0 1em 1em;
}

.shepherd-element.shepherd-theme-default .shepherd-content footer .shepherd-buttons {
  text-align: right;
  list-style: none;
  padding: 0;
  margin: 0;
}

.shepherd-element.shepherd-theme-default .shepherd-content footer .shepherd-buttons li {
  display: inline;
  padding: 0;
  margin: 0;
}

.shepherd-element.shepherd-theme-default .shepherd-content footer .shepherd-buttons li .shepherd-button {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  border-radius: 3px;
  cursor: pointer;
  border: 0;
  margin: 0 0.5em 0 0;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8em;
  line-height: 1em;
  padding: 0.75em 2em;
  background: #3288e6;
  color: #fff;
}

.shepherd-element.shepherd-theme-default .shepherd-content footer .shepherd-buttons li .shepherd-button.shepherd-button-secondary {
  background: var(--bg-grey-e);
  color: #888;
}

.shepherd-element.shepherd-theme-default .shepherd-content footer .shepherd-buttons li:last-child .shepherd-button {
  margin-right: 0;
}

.shepherd-start-tour-button.shepherd-theme-default {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  border-radius: 3px;
  cursor: pointer;
  border: 0;
  margin: 0 0.5em 0 0;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8em;
  line-height: 1em;
  padding: 0.75em 2em;
  background: #3288e6;
  color: #fff;
}

.shepherd-element, .shepherd-element:after, .shepherd-element:before, .shepherd-element *, .shepherd-element *:after, .shepherd-element *:before {
  box-sizing: border-box;
}

.shepherd-element {
  position: absolute;
  display: none;
}

.shepherd-element.shepherd-open {
  display: block;
}

.shepherd-element.shepherd-theme-square {
  max-width: 100%;
  max-height: 100%;
}

.shepherd-element.shepherd-theme-square .shepherd-content {
  border-radius: 5px;
  position: relative;
  font-family: inherit;
  background: #f6f6f6;
  color: #444;
  padding: 1em;
  font-size: 1.1em;
  line-height: 1.5em;
}

.shepherd-element.shepherd-theme-square .shepherd-content:before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-width: 16px;
  border-style: solid;
  pointer-events: none;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-content {
  margin-bottom: 16px;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-content:before {
  top: 100%;
  left: 50%;
  margin-left: -16px;
  border-top-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-content {
  margin-top: 16px;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-content:before {
  bottom: 100%;
  left: 50%;
  margin-left: -16px;
  border-bottom-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-right.shepherd-element-attached-middle .shepherd-content {
  margin-right: 16px;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-right.shepherd-element-attached-middle .shepherd-content:before {
  left: 100%;
  top: 50%;
  margin-top: -16px;
  border-left-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-left.shepherd-element-attached-middle .shepherd-content {
  margin-left: 16px;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-left.shepherd-element-attached-middle .shepherd-content:before {
  right: 100%;
  top: 50%;
  margin-top: -16px;
  border-right-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom .shepherd-content {
  margin-top: 16px;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom .shepherd-content:before {
  bottom: 100%;
  left: 16px;
  border-bottom-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom .shepherd-content {
  margin-top: 16px;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom .shepherd-content:before {
  bottom: 100%;
  right: 16px;
  border-bottom-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top .shepherd-content {
  margin-bottom: 16px;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-top .shepherd-content:before {
  top: 100%;
  left: 16px;
  border-top-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top .shepherd-content {
  margin-bottom: 16px;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-top .shepherd-content:before {
  top: 100%;
  right: 16px;
  border-top-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content {
  margin-right: 16px;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content:before {
  top: 16px;
  left: 100%;
  border-left-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content {
  margin-left: 16px;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content:before {
  top: 16px;
  right: 100%;
  border-right-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content {
  margin-right: 16px;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-bottom.shepherd-element-attached-right.shepherd-target-attached-left .shepherd-content:before {
  bottom: 16px;
  left: 100%;
  border-left-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content {
  margin-left: 16px;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-bottom.shepherd-element-attached-left.shepherd-target-attached-right .shepherd-content:before {
  bottom: 16px;
  right: 100%;
  border-right-color: #f6f6f6;
}

.shepherd-element.shepherd-theme-square {
  border-radius: 0;
  z-index: 9999;
  max-width: 24em;
  font-size: 1em;
}

.shepherd-element.shepherd-theme-square.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-square.shepherd-element-attached-top.shepherd-element-attached-right.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before, .shepherd-element.shepherd-theme-square.shepherd-element-attached-top.shepherd-element-attached-left.shepherd-target-attached-bottom.shepherd-has-title .shepherd-content:before {
  border-bottom-color: #e6e6e6;
}

.shepherd-element.shepherd-theme-square.shepherd-has-title .shepherd-content header {
  background: #e6e6e6;
  padding: 1em;
}

.shepherd-element.shepherd-theme-square.shepherd-has-title .shepherd-content header a.shepherd-cancel-link {
  padding: 0;
  margin-bottom: 0;
}

.shepherd-element.shepherd-theme-square.shepherd-has-cancel-link .shepherd-content header h3 {
  float: left;
}

.shepherd-element.shepherd-theme-square .shepherd-content {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.17);
  border-radius: 0;
  padding: 0;
}

.shepherd-element.shepherd-theme-square .shepherd-content * {
  font-size: inherit;
}

.shepherd-element.shepherd-theme-square .shepherd-content header {
  *zoom: 1;
  border-radius: 0;
}

.shepherd-element.shepherd-theme-square .shepherd-content header:after {
  content: "";
  display: table;
  clear: both;
}

.shepherd-element.shepherd-theme-square .shepherd-content header h3 {
  margin: 0;
  line-height: 1;
  font-weight: normal;
}

.shepherd-element.shepherd-theme-square .shepherd-content header a.shepherd-cancel-link {
  float: right;
  text-decoration: none;
  font-size: 1.25em;
  line-height: 0.8em;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.5);
  opacity: 0.25;
  position: relative;
  top: 0.1em;
  padding: 0.8em;
  margin-bottom: -0.8em;
}

.shepherd-element.shepherd-theme-square .shepherd-content header a.shepherd-cancel-link:hover {
  opacity: 1;
}

.shepherd-element.shepherd-theme-square .shepherd-content .shepherd-text {
  padding: 1em;
}

.shepherd-element.shepherd-theme-square .shepherd-content .shepherd-text p {
  margin: 0 0 0.5em 0;
  line-height: 1.3em;
}

.shepherd-element.shepherd-theme-square .shepherd-content .shepherd-text p:last-child {
  margin-bottom: 0;
}

.shepherd-element.shepherd-theme-square .shepherd-content footer {
  padding: 0 1em 1em;
}

.shepherd-element.shepherd-theme-square .shepherd-content footer .shepherd-buttons {
  text-align: right;
  list-style: none;
  padding: 0;
  margin: 0;
}

.shepherd-element.shepherd-theme-square .shepherd-content footer .shepherd-buttons li {
  display: inline;
  padding: 0;
  margin: 0;
}

.shepherd-element.shepherd-theme-square .shepherd-content footer .shepherd-buttons li .shepherd-button {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  border-radius: 0;
  cursor: pointer;
  border: 0;
  margin: 0 0.5em 0 0;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8em;
  line-height: 1em;
  padding: 0.75em 2em;
  background: #3288e6;
  color: #fff;
}

.shepherd-element.shepherd-theme-square .shepherd-content footer .shepherd-buttons li .shepherd-button.shepherd-button-secondary {
  background: var(--bg-grey-e);
  color: #888;
}

.shepherd-element.shepherd-theme-square .shepherd-content footer .shepherd-buttons li:last-child .shepherd-button {
  margin-right: 0;
}

.shepherd-start-tour-button.shepherd-theme-square {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  border-radius: 0;
  cursor: pointer;
  border: 0;
  margin: 0 0.5em 0 0;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8em;
  line-height: 1em;
  padding: 0.75em 2em;
  background: #3288e6;
  color: #fff;
}

:root {
  color-scheme: light;
  /* -------------------------------------------
    Base palette (unchanged across themes)
  -------------------------------------------- */
  /* Greyscale */
  --black: #121212;
  --grey-1: #191c1d;
  --grey-2: #232528;
  --grey-3: #303032;
  --grey-4: #4d4d4d;
  --grey-5: #565656;
  --grey-6: #616161;
  --grey-7: #777;
  --grey-8: #878787;
  --grey-9: #96a6a2;
  --grey-a: #AAAAAA;
  --grey-b: #BBBBBB;
  --grey-c: #ccd0d2;
  --grey-d: #d7d9d5;
  --grey-e: #ececec;
  --grey-f1: #f1f1f1;
  --grey-f5: #f5f5f5;
  --grey-f6: #f6f6f6;
  --grey-f8: #f8f8f8;
  --grey-fa: #fafafa;
  --grey-fb: #fbfbfb;
  --grey-fc: #fcfcfc;
  --grey-fd: #fdfdfd;
  --white: #ffffff;
  /* Brand colors (unchanged across themes) */
  --color-primary: #22ad01;
  --color-danger: #f45757;
  --color-info: var(--color-primary);
  --color-primary-dark-alt: #15362b;
  /* Accent colors (unchanged across themes) */
  --color-accent-blue: #5db6f8;
  --color-accent-yellow: #e5ca46;
  --color-accent-yellow-dark: #ceaf25;
  --color-accent-brown: #8c8b7d;
  --color-accent-purple: #520eb0;
  --color-accent-orange: #ee8146;
  /* Integration brand colors (unchanged across themes) */
  --paypal-blue: #009cde;
  --stripe-blue-1: #239adf;
  --stripe-blue-2: #008cdd;
  --zapier-orange: #ff4a00;
  --freshbooks-blue: #1883c6;
  --slack-blue: #4d394b;
  --google-calendar-blue: #4688f4;
  --gmail-green: #22ad01;
  --dribbble-pink: #ea4c89;
  --webflow-blue: #4353ff;
  /* Typography (unchanged across themes) */
  --font-header: "Geist", "Helvetica Neue", "Helvetica", arial, sans-serif;
  --font-body: "Geist", "Helvetica Neue", "Helvetica", arial, sans-serif;
  --font-legal: "FF Meta Serif", "Georgia", serif;
  --font-display-header: "Geist", "Helvetica Neue", "Helvetica", arial, sans-serif;
  --font-sans-serif: "Geist", "Helvetica Neue", "Helvetica", arial, sans-serif;
  --font-signature: "Angeliquemadouce Colombe", "FF Meta Serif", "Georgia", serif;
  --font-mailer-header: "Helvetica Neue", "Helvetica", arial, sans-serif;
  --font-mailer-body: "Helvetica Neue", "Helvetica", arial, sans-serif;
  /* Transition/Animation timing (unchanged across themes) */
  --transition-fast: 150ms;
  --transition-normal: 200ms;
  --transition-medium: 300ms;
  --transition-slow: 500ms;
  --transition-slower: 1s;
  /* Z-index (unchanged across themes) */
  --z-navigation: 100;
  --z-sidebar: 200;
  --z-outer-wrapper: 1;
  --z-partner-invitations: 100;
  --z-agreement-signup: 99;
  --z-agreement-secondary-nav: 10;
  --z-fixed-action-btn: 100;
  --z-scrolled-navigation: 10;
  --z-popup-menu: 200;
  --z-onboarding: 1051;
  --z-search: 10000;
  --z-proposal-style-editor: 11;
  --z-drawer: 940;
  --z-support-launcher: 939;
  /* Widths/Heights (unchanged across themes) */
  --navigation-height: 60px;
  --wrapper-width: 1100px;
  --wrapper-md-width: 1100px;
  --wrapper-xs-width: 600px;
  --wrapper-sm-width: 800px;
  --wrapper-smd-width: 900px;
  --wrapper-lg-width: 1360px;
  --wrapper-xl-width: 1480px;
  --minimum-page-height-mobile: 600px;
  --minimum-page-height-desktop: 800px;
  --sidebar-width: 275px;
  --sidebar-width-collapsed: 60px;
  --document-editor-width: 350px;
  --invoice-wrapper-width: 900px;
  --proposal-wrapper-width: 900px;
  --questionnaire-width: 800px;
  --settings-width: 900px;
  --drawer-width: 910px;
  --ghost-input-side-width: 7.5px;
  /* Border radii */
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-large: 12px;
  /* -------------------------------------------
    Light + dark values for theme variables file
  -------------------------------------------- */
  /* Brand variants */
  --color-primary-contrast-light: var(--white);
  --color-primary-contrast-dark: var(--grey-f5);
  --color-primary-dark-light: #005542;
  --color-primary-dark-dark: var(--color-primary);
  --color-danger-dark-light: #bb5656;
  --color-danger-dark-dark: #f45757;
  --color-danger-light: #fef3f3;
  /* Background components */
  --bg-content-light: var(--white);
  --bg-content-dark: #1A1A1A;
  --bg-content-alt-light: var(--grey-fc);
  --bg-content-alt-dark: var(--grey-1);
  --bg-content-document-light: var(--grey-fc);
  --bg-content-document-dark: var(--grey-1);
  --bg-content-empty-light: var(--grey-fc);
  --bg-content-empty-dark: var(--grey-1);
  --bg-panel-light: var(--white);
  --bg-panel-dark: var(--grey-1);
  --bg-input-hover-light: color-mix(in srgb, var(--black) 2%, transparent);
  --bg-input-hover-dark: color-mix(in srgb, var(--white) 5%, transparent);
  --bg-input-hover-subtle-light: color-mix(in srgb, var(--black) 2%, transparent);
  --bg-input-hover-subtle-dark: color-mix(in srgb, var(--white) 2%, transparent);
  --bg-input-hover-active-light: color-mix(in srgb, var(--black) 3%, transparent);
  --bg-input-hover-active-dark: color-mix(in srgb, var(--white) 3%, transparent);
  --bg-brand-muted-light: #fafcfa;
  --bg-brand-muted-dark: var(--color-primary-dark-alt);
  --bg-brand-dark-light: #003c2f;
  --bg-brand-dark-dark: var(--color-primary-dark-alt);
  --bg-field-light: var(--white);
  --bg-field-dark: #1A1A1A;
  --bg-field-disabled-light: var(--grey-f1);
  --bg-field-disabled-dark: var(--grey-2);
  --bg-shadow-light: var(--black);
  --bg-shadow-dark: rgba(0, 0, 0, 0.1);
  --bg-tooltip-light: var(--black);
  --bg-tooltip-dark: var(--grey-3);
  --bg-inverse-light: var(--grey-3);
  --bg-inverse-dark: var(--grey-f1);
  /* Background greyscale */
  --bg-grey-fd-light: var(--grey-fd);
  --bg-grey-fd-dark: var(--grey-1);
  --bg-grey-fc-light: var(--grey-fc);
  --bg-grey-fc-dark: var(--grey-1);
  --bg-grey-fa-light: var(--grey-fa);
  --bg-grey-fa-dark: var(--grey-2);
  --bg-grey-f8-light: var(--grey-f8);
  --bg-grey-f8-dark: var(--grey-2);
  --bg-grey-f5-light: var(--grey-f5);
  --bg-grey-f5-dark: var(--grey-2);
  --bg-grey-f1-light: var(--grey-f1);
  --bg-grey-f1-dark: var(--grey-2);
  --bg-grey-e-light: var(--grey-e);
  --bg-grey-e-dark: var(--grey-3);
  --bg-grey-c-light: var(--grey-c);
  --bg-grey-c-dark: var(--grey-c);
  --bg-grey-8-light: var(--grey-8);
  --bg-grey-8-dark: var(--grey-2);
  /* Inverted backgrounds */
  --bg-inverse-expense-light: var(--grey-3);
  --bg-inverse-expense-dark: var(--grey-e);
  --bg-panel-semi-transparent-light: rgba(255, 255, 255, 0.95);
  --bg-panel-semi-transparent-dark: color-mix(in srgb, var(--grey-1) 90%, transparent);
  /* Switch/Toggle components */
  --bg-switch-light: var(--grey-f1);
  --bg-switch-dark: var(--grey-6);
  --bg-switch-indicator-light: var(--white);
  --bg-switch-indicator-dark: var(--grey-2);
  --bg-switch-toggle-light: var(--grey-fa);
  --bg-switch-toggle-dark: #1A1A1A;
  --bg-switch-toggle-active-light: var(--white);
  --bg-switch-toggle-active-dark: var(--grey-3);
  --text-switch-light: var(--grey-9);
  --text-switch-dark: var(--grey-9);
  --text-switch-hover-light: var(--grey-8);
  --text-switch-hover-dark: var(--grey-f5);
  --text-switch-active-light: var(--black);
  --text-switch-active-dark: var(--grey-f5);
  /* Button specific */
  --bg-button-default-light: var(--white);
  --bg-button-default-dark: var(--grey-1);
  --border-button-hover-light: var(--grey-c);
  --border-button-hover-dark: var(--grey-e);
  /* Component-specific semantic colors */
  --bg-tag-text-light: color-mix(in srgb, var(--black) 70%, transparent);
  --bg-tag-text-dark: var(--white);
  --bg-tag-text-hover-light: color-mix(in srgb, var(--black) 80%, transparent);
  --bg-tag-text-hover-dark: var(--white);
  --border-chart-light: var(--grey-e);
  --border-chart-dark: var(--grey-4);
  --border-chart-row-light: var(--grey-e);
  --border-chart-row-dark: var(--grey-4);
  --stroke-calendar-light: var(--grey-e);
  --stroke-calendar-dark: #1A1A1A;
  --border-calendar-hover-light: color-mix(in srgb, var(--black) 20%, transparent);
  --border-calendar-hover-dark: color-mix(in srgb, var(--white) 20%, transparent);
  --shadow-drawer-light: 10px 0 22px color-mix(in srgb, var(--black) 5%, transparent);
  --shadow-drawer-dark: none;
  --shadow-gantt-light: color-mix(in srgb, var(--black) 10%, transparent);
  --shadow-gantt-dark: color-mix(in srgb, var(--white) 30%, transparent);
  --shadow-gantt-hover-light: color-mix(in srgb, var(--black) 15%, transparent);
  --shadow-gantt-hover-dark: color-mix(in srgb, var(--white) 30%, transparent);
  --bg-timetracker-row-light: var(--grey-fc);
  --bg-timetracker-row-dark: var(--grey-1);
  --shadow-timetracker-light: color-mix(in srgb, var(--black) 10%, transparent);
  --shadow-timetracker-dark: color-mix(in srgb, var(--white) 12%, transparent);
  --bg-invoice-badge-light: var(--grey-3);
  --bg-invoice-badge-dark: var(--grey-2);
  --text-invoice-badge-light: var(--white);
  --text-invoice-badge-dark: var(--grey-9);
  --bg-wysiwyg-placeholder-light: var(--grey-f5);
  --bg-wysiwyg-placeholder-dark: var(--grey-2);
  --bg-list-grid-row-light: var(--grey-fc);
  --bg-list-grid-row-dark: #1A1A1A;
  --border-react-select-menu-light: 1px solid var(--grey-e);
  --border-react-select-menu-dark: none;
  --bg-client-portal-item-light: color-mix(in srgb, var(--black) 2%, transparent);
  --bg-client-portal-item-dark: color-mix(in srgb, var(--white) 5%, transparent);
  --bg-timeline-striped-light: color-mix(in srgb, var(--black) 3%, transparent);
  --bg-timeline-striped-dark: color-mix(in srgb, var(--white) 5%, transparent);
  --bg-warning-notice-light: var(--color-danger-light);
  --bg-warning-notice-dark: color-mix(in srgb, var(--color-danger) 3%, transparent);
  --bg-sidebar-light: var(--white);
  --bg-sidebar-dark: var(--grey-2);
  /* Text colors */
  --text-default-light: var(--black);
  --text-default-dark: var(--grey-f5);
  --text-muted-light: var(--grey-6);
  --text-muted-dark: var(--grey-c);
  --text-muted-alt-light: var(--grey-8);
  --text-muted-alt-dark: var(--grey-c);
  --text-lighter-light: var(--grey-9);
  --text-lighter-dark: var(--grey-9);
  --text-lightest-light: var(--grey-c);
  --text-lightest-dark: var(--grey-9);
  --text-tooltip-light: var(--white);
  --text-tooltip-dark: var(--grey-e);
  --text-inverse-light: var(--white);
  --text-inverse-dark: var(--black);
  --text-semi-transparent-light: color-mix(in srgb, var(--black) 70%, transparent);
  --text-semi-transparent-dark: color-mix(in srgb, var(--white) 70%, transparent);
  --text-semi-transparent-muted-light: color-mix(in srgb, var(--black) 60%, transparent);
  --text-semi-transparent-muted-dark: color-mix(in srgb, var(--white) 60%, transparent);
  /* Border colors */
  --border-content-light: var(--grey-e);
  --border-content-dark: var(--grey-3);
  --border-content-alt-light: var(--grey-d);
  --border-content-alt-dark: var(--grey-4);
  --border-darker-light: var(--grey-c);
  --border-darker-dark: var(--grey-5);
  --border-field-light: var(--grey-c);
  --border-field-dark: var(--grey-5);
  --border-semi-transparent-light: color-mix(in srgb, var(--black) 10%, transparent);
  --border-semi-transparent-dark: color-mix(in srgb, var(--white) 15%, transparent);
  --border-semi-transparent-alt-light: color-mix(in srgb, var(--black) 5%, transparent);
  --border-semi-transparent-alt-dark: color-mix(in srgb, var(--white) 10%, transparent);
  --border-semi-transparent-strong-light: color-mix(in srgb, var(--black) 15%, transparent);
  --border-semi-transparent-strong-dark: color-mix(in srgb, var(--white) 20%, transparent);
  --border-semi-transparent-subtle-light: color-mix(in srgb, var(--black) 20%, transparent);
  --border-semi-transparent-subtle-dark: color-mix(in srgb, var(--white) 20%, transparent);
  /* List items */
  --bg-hover-subtle-light: var(--grey-fc);
  --bg-hover-subtle-dark: var(--grey-1);
  --bg-list-grouped-header-light: var(--grey-f8);
  --bg-list-grouped-header-dark: var(--grey-2);
  --bg-list-grouped-header-document-light: var(--grey-f5);
  --bg-list-grouped-header-document-dark: var(--grey-1);
  /* Chart colors */
  --chart-tick-color-light: var(--grey-6);
  --chart-tick-color-dark: var(--grey-9);
  --chart-border-color: var(--grey-e);
  --chart-hover-bg-color: var(--grey-d);
  --chart-tooltip-bg-light: var(--white);
  --chart-tooltip-bg-dark: var(--grey-2);
  /* Deprecated branding colors */
  --text-info-dark: #3a88c2;
  --bg-info-light-val: #e2f3ff;
  --bg-info-dark-val: #1a2c39;
  --bg-info-light-light: #d7ecfa;
  --bg-info-light-dark: #204057;
  --bg-info-lighter-light: #f2faff;
  --bg-info-lighter-dark: #204057;
  --bg-yellow-light: #fbf5db;
  --bg-yellow-dark: #ceaf25;
  --bg-highlight-light: #fffdcc;
  --bg-highlight-dark: #ceaf25;
}

:root {
  /* -------------------------------------------
    Current theme tokens: default to light
  -------------------------------------------- */
  /* Brand colors (unchanged across themes) */
  --primary: #22ad01;
  --danger: #f45757;
  --color-primary: #22ad01;
  --color-danger: #f45757;
  --color-primary-contrast: var(--color-primary-contrast-light);
  --color-primary-dark: var(--color-primary-dark-light);
  --color-danger-dark: var(--color-danger-dark-light);
  /* Background components */
  --bg-content: var(--bg-content-light);
  --bg-content-alt: var(--bg-content-alt-light);
  --bg-content-document: var(--bg-content-document-light);
  --bg-content-empty: var(--bg-content-empty-light);
  --bg-panel: var(--bg-panel-light);
  --bg-input-hover: var(--bg-input-hover-light);
  --bg-input-hover-subtle: var(--bg-input-hover-subtle-light);
  --bg-input-hover-active: var(--bg-input-hover-active-light);
  --bg-brand-muted: var(--bg-brand-muted-light);
  --bg-brand-dark: var(--bg-brand-dark-light);
  --bg-field: var(--bg-field-light);
  --bg-field-disabled: var(--bg-field-disabled-light);
  --bg-shadow: var(--bg-shadow-light);
  --bg-tooltip: var(--bg-tooltip-light);
  --bg-inverse: var(--bg-inverse-light);
  /* Background greyscale */
  --bg-grey-fd: var(--bg-grey-fd-light);
  --bg-grey-fc: var(--bg-grey-fc-light);
  --bg-grey-fa: var(--bg-grey-fa-light);
  --bg-grey-f8: var(--bg-grey-f8-light);
  --bg-grey-f5: var(--bg-grey-f5-light);
  --bg-grey-f1: var(--bg-grey-f1-light);
  --bg-grey-e: var(--bg-grey-e-light);
  --bg-grey-c: var(--bg-grey-c-light);
  --bg-grey-8: var(--bg-grey-8-light);
  /* Inverted backgrounds */
  --bg-inverse-expense: var(--bg-inverse-expense-light);
  --bg-panel-semi-transparent: var(--bg-panel-semi-transparent-light);
  /* Switch/Toggle components */
  --bg-switch: var(--bg-switch-light);
  --bg-switch-indicator: var(--bg-switch-indicator-light);
  --bg-switch-toggle: var(--bg-switch-toggle-light);
  --bg-switch-toggle-active: var(--bg-switch-toggle-active-light);
  --text-switch: var(--text-switch-light);
  --text-switch-hover: var(--text-switch-hover-light);
  --text-switch-active: var(--text-switch-active-light);
  /* Button specific */
  --bg-button-default: var(--bg-button-default-light);
  --border-button-hover: var(--border-button-hover-light);
  /* Component-specific semantic colors */
  --bg-tag-text: var(--bg-tag-text-light);
  --bg-tag-text-hover: var(--bg-tag-text-hover-light);
  --border-chart: var(--border-chart-light);
  --border-chart-row: var(--border-chart-row-light);
  --stroke-calendar: var(--stroke-calendar-light);
  --border-calendar-hover: var(--border-calendar-hover-light);
  --shadow-drawer: var(--shadow-drawer-light);
  --shadow-gantt: var(--shadow-gantt-light);
  --shadow-gantt-hover: var(--shadow-gantt-hover-light);
  --bg-timetracker-row: var(--bg-timetracker-row-light);
  --shadow-timetracker: var(--shadow-timetracker-light);
  --bg-invoice-badge: var(--bg-invoice-badge-light);
  --text-invoice-badge: var(--text-invoice-badge-light);
  --bg-wysiwyg-placeholder: var(--bg-wysiwyg-placeholder-light);
  --bg-list-grid-row: var(--bg-list-grid-row-light);
  --border-react-select-menu: var(--border-react-select-menu-light);
  --bg-client-portal-item: var(--bg-client-portal-item-light);
  --bg-timeline-striped: var(--bg-timeline-striped-light);
  --bg-warning-notice: var(--bg-warning-notice-light);
  --bg-sidebar: var(--bg-sidebar-light);
  /* Text colors */
  --text-default: var(--text-default-light);
  --text-muted: var(--text-muted-light);
  --text-muted-alt: var(--text-muted-alt-light);
  --text-lighter: var(--text-lighter-light);
  --text-lightest: var(--text-lightest-light);
  --text-tooltip: var(--text-tooltip-light);
  --text-inverse: var(--text-inverse-light);
  --text-semi-transparent: var(--text-semi-transparent-light);
  --text-semi-transparent-muted: var(--text-semi-transparent-muted-light);
  /* Border colors */
  --border-content: var(--border-content-light);
  --border-content-alt: var(--border-content-alt-light);
  --border-darker: var(--border-darker-light);
  --border-field: var(--border-field-light);
  --border-field-focus: var(--color-primary);
  --border-semi-transparent: var(--border-semi-transparent-light);
  --border-semi-transparent-alt: var(--border-semi-transparent-alt-light);
  --border-semi-transparent-strong: var(--border-semi-transparent-strong-light);
  --border-semi-transparent-subtle: var(--border-semi-transparent-subtle-light);
  /* List items */
  --bg-hover-subtle: var(--bg-hover-subtle-light);
  --bg-list-grouped-header: var(--bg-list-grouped-header-light);
  --bg-list-grouped-header-document: var(--bg-list-grouped-header-document-light);
  /* Chart colors */
  --chart-tick-color: var(--chart-tick-color-light);
  --chart-tooltip-bg: var(--chart-tooltip-bg-light);
  /* Box shadows */
  --box-shadow-small: 0 1px 4px color-mix(in srgb, var(--black) 5%, transparent);
  --box-shadow-medium: 0 4px 14px color-mix(in srgb, var(--black) 12%, transparent);
  --box-shadow-large: 0 10px 30px color-mix(in srgb, var(--black) 10%, transparent);
  /* Deprecated branding colors */
  --bg-info: var(--bg-info-light-val);
  --bg-info-light: var(--bg-info-light-light);
  --bg-info-lighter: var(--bg-info-lighter-light);
  --bg-yellow: var(--bg-yellow-light);
  --bg-highlight: var(--bg-highlight-light);
}

/* -------------------------------------------
  Dark mode: remap to dark base tokens
-------------------------------------------- */
[data-theme=dark] {
  color-scheme: dark;
  /* Brand variants */
  --color-primary-contrast: var(--color-primary-contrast-dark);
  --color-primary-dark: var(--color-primary-dark-dark);
  --color-danger-dark: var(--color-danger-dark-dark);
  /* Background components */
  --bg-content: var(--bg-content-dark);
  --bg-content-alt: var(--bg-content-alt-dark);
  --bg-content-document: var(--bg-content-document-dark);
  --bg-content-empty: var(--bg-content-empty-dark);
  --bg-panel: var(--bg-panel-dark);
  --bg-input-hover: var(--bg-input-hover-dark);
  --bg-input-hover-subtle: var(--bg-input-hover-subtle-dark);
  --bg-input-hover-active: var(--bg-input-hover-active-dark);
  --bg-brand-muted: var(--bg-brand-muted-dark);
  --bg-brand-dark: var(--bg-brand-dark-dark);
  --bg-field: var(--bg-field-dark);
  --bg-field-disabled: var(--bg-field-disabled-dark);
  --bg-shadow: var(--bg-shadow-dark);
  --bg-tooltip: var(--bg-tooltip-dark);
  --bg-inverse: var(--bg-inverse-dark);
  /* Background greyscale */
  --bg-grey-fd: var(--bg-grey-fd-dark);
  --bg-grey-fc: var(--bg-grey-fc-dark);
  --bg-grey-fa: var(--bg-grey-fa-dark);
  --bg-grey-f8: var(--bg-grey-f8-dark);
  --bg-grey-f5: var(--bg-grey-f5-dark);
  --bg-grey-f1: var(--bg-grey-f1-dark);
  --bg-grey-e: var(--bg-grey-e-dark);
  --bg-grey-c: var(--bg-grey-c-dark);
  --bg-grey-8: var(--bg-grey-8-dark);
  /* Inverted backgrounds */
  --bg-inverse-expense: var(--bg-inverse-expense-dark);
  --bg-panel-semi-transparent: var(--bg-panel-semi-transparent-dark);
  /* Switch/Toggle components */
  --bg-switch: var(--bg-switch-dark);
  --bg-switch-indicator: var(--bg-switch-indicator-dark);
  --bg-switch-toggle: var(--bg-switch-toggle-dark);
  --bg-switch-toggle-active: var(--bg-switch-toggle-active-dark);
  --text-switch: var(--text-switch-dark);
  --text-switch-hover: var(--text-switch-hover-dark);
  --text-switch-active: var(--text-switch-active-dark);
  /* Button specific */
  --bg-button-default: var(--bg-button-default-dark);
  --border-button-hover: var(--border-button-hover-dark);
  /* Component-specific semantic colors */
  --bg-tag-text: var(--bg-tag-text-dark);
  --bg-tag-text-hover: var(--bg-tag-text-hover-dark);
  --border-chart: var(--border-chart-dark);
  --border-chart-row: var(--border-chart-row-dark);
  --stroke-calendar: var(--stroke-calendar-dark);
  --border-calendar-hover: var(--border-calendar-hover-dark);
  --shadow-drawer: var(--shadow-drawer-dark);
  --shadow-gantt: var(--shadow-gantt-dark);
  --shadow-gantt-hover: var(--shadow-gantt-hover-dark);
  --bg-timetracker-row: var(--bg-timetracker-row-dark);
  --shadow-timetracker: var(--shadow-timetracker-dark);
  --bg-invoice-badge: var(--bg-invoice-badge-dark);
  --text-invoice-badge: var(--text-invoice-badge-dark);
  --bg-wysiwyg-placeholder: var(--bg-wysiwyg-placeholder-dark);
  --bg-list-grid-row: var(--bg-list-grid-row-dark);
  --border-react-select-menu: var(--border-react-select-menu-dark);
  --bg-client-portal-item: var(--bg-client-portal-item-dark);
  --bg-timeline-striped: var(--bg-timeline-striped-dark);
  --bg-warning-notice: var(--bg-warning-notice-dark);
  --bg-sidebar: var(--bg-sidebar-dark);
  /* Text colors */
  --text-default: var(--text-default-dark);
  --text-muted: var(--text-muted-dark);
  --text-muted-alt: var(--text-muted-alt-dark);
  --text-lighter: var(--text-lighter-dark);
  --text-lightest: var(--text-lightest-dark);
  --text-tooltip: var(--text-tooltip-dark);
  --text-inverse: var(--text-inverse-dark);
  --text-semi-transparent: var(--text-semi-transparent-dark);
  --text-semi-transparent-muted: var(--text-semi-transparent-muted-dark);
  /* Border colors */
  --border-content: var(--border-content-dark);
  --border-content-alt: var(--border-content-alt-dark);
  --border-darker: var(--border-darker-dark);
  --border-field: var(--border-field-dark);
  --border-semi-transparent: var(--border-semi-transparent-dark);
  --border-semi-transparent-alt: var(--border-semi-transparent-alt-dark);
  --border-semi-transparent-strong: var(--border-semi-transparent-strong-dark);
  --border-semi-transparent-subtle: var(--border-semi-transparent-subtle-dark);
  /* List items */
  --bg-hover-subtle: var(--bg-hover-subtle-dark);
  --bg-list-grouped-header: var(--bg-list-grouped-header-dark);
  --bg-list-grouped-header-document: var(--bg-list-grouped-header-document-dark);
  /* Chart colors */
  --chart-tick-color: var(--chart-tick-color-dark);
  --chart-tooltip-bg: var(--chart-tooltip-bg-dark);
  /* Deprecated branding colors */
  --bg-info: var(--bg-info-dark-val);
  --bg-info-light: var(--bg-info-light-dark);
  --bg-info-lighter: var(--bg-info-lighter-dark);
  --bg-yellow: var(--bg-yellow-dark);
  --bg-highlight: var(--bg-highlight-dark);
}

/* -------------------------------------------
  Nested light inside dark: remap back to light
-------------------------------------------- */
[data-theme=dark] [data-theme=light] {
  color-scheme: light;
  /* Brand variants */
  --color-primary-contrast: var(--color-primary-contrast-light);
  --color-primary-dark: var(--color-primary-dark-light);
  --color-danger-dark: var(--color-danger-dark-light);
  /* Background components */
  --bg-content: var(--bg-content-light);
  --bg-content-alt: var(--bg-content-alt-light);
  --bg-content-document: var(--bg-content-document-light);
  --bg-content-empty: var(--bg-content-empty-light);
  --bg-panel: var(--bg-panel-light);
  --bg-input-hover: var(--bg-input-hover-light);
  --bg-input-hover-subtle: var(--bg-input-hover-subtle-light);
  --bg-input-hover-active: var(--bg-input-hover-active-light);
  --bg-brand-muted: var(--bg-brand-muted-light);
  --bg-brand-dark: var(--bg-brand-dark-light);
  --bg-field: var(--bg-field-light);
  --bg-field-disabled: var(--bg-field-disabled-light);
  --bg-shadow: var(--bg-shadow-light);
  --bg-tooltip: var(--bg-tooltip-light);
  --bg-inverse: var(--bg-inverse-light);
  /* Background greyscale */
  --bg-grey-fd: var(--bg-grey-fd-light);
  --bg-grey-fc: var(--bg-grey-fc-light);
  --bg-grey-fa: var(--bg-grey-fa-light);
  --bg-grey-f8: var(--bg-grey-f8-light);
  --bg-grey-f5: var(--bg-grey-f5-light);
  --bg-grey-f1: var(--bg-grey-f1-light);
  --bg-grey-e: var(--bg-grey-e-light);
  --bg-grey-c: var(--bg-grey-c-light);
  --bg-grey-8: var(--bg-grey-8-light);
  /* Inverted backgrounds */
  --bg-inverse-expense: var(--bg-inverse-expense-light);
  --bg-panel-semi-transparent: var(--bg-panel-semi-transparent-light);
  /* Switch/Toggle components */
  --bg-switch: var(--bg-switch-light);
  --bg-switch-indicator: var(--bg-switch-indicator-light);
  --bg-switch-toggle: var(--bg-switch-toggle-light);
  --bg-switch-toggle-active: var(--bg-switch-toggle-active-light);
  --text-switch: var(--text-switch-light);
  --text-switch-hover: var(--text-switch-hover-light);
  --text-switch-active: var(--text-switch-active-light);
  /* Button specific */
  --bg-button-default: var(--bg-button-default-light);
  --border-button-hover: var(--border-button-hover-light);
  /* Component-specific semantic colors */
  --bg-tag-text: var(--bg-tag-text-light);
  --bg-tag-text-hover: var(--bg-tag-text-hover-light);
  --border-chart: var(--border-chart-light);
  --border-chart-row: var(--border-chart-row-light);
  --stroke-calendar: var(--stroke-calendar-light);
  --border-calendar-hover: var(--border-calendar-hover-light);
  --shadow-drawer: var(--shadow-drawer-light);
  --shadow-gantt: var(--shadow-gantt-light);
  --shadow-gantt-hover: var(--shadow-gantt-hover-light);
  --bg-timetracker-row: var(--bg-timetracker-row-light);
  --shadow-timetracker: var(--shadow-timetracker-light);
  --bg-invoice-badge: var(--bg-invoice-badge-light);
  --text-invoice-badge: var(--text-invoice-badge-light);
  --bg-wysiwyg-placeholder: var(--bg-wysiwyg-placeholder-light);
  --bg-list-grid-row: var(--bg-list-grid-row-light);
  --border-react-select-menu: var(--border-react-select-menu-light);
  --bg-client-portal-item: var(--bg-client-portal-item-light);
  --bg-timeline-striped: var(--bg-timeline-striped-light);
  --bg-warning-notice: var(--bg-warning-notice-light);
  --bg-sidebar: var(--bg-sidebar-light);
  /* Text colors */
  --text-default: var(--text-default-light);
  --text-muted: var(--text-muted-light);
  --text-muted-alt: var(--text-muted-alt-light);
  --text-lighter: var(--text-lighter-light);
  --text-lightest: var(--text-lightest-light);
  --text-tooltip: var(--text-tooltip-light);
  --text-inverse: var(--text-inverse-light);
  --text-semi-transparent: var(--text-semi-transparent-light);
  --text-semi-transparent-muted: var(--text-semi-transparent-muted-light);
  /* Border colors */
  --border-content: var(--border-content-light);
  --border-content-alt: var(--border-content-alt-light);
  --border-darker: var(--border-darker-light);
  --border-field: var(--border-field-light);
  --border-semi-transparent: var(--border-semi-transparent-light);
  --border-semi-transparent-alt: var(--border-semi-transparent-alt-light);
  --border-semi-transparent-strong: var(--border-semi-transparent-strong-light);
  --border-semi-transparent-subtle: var(--border-semi-transparent-subtle-light);
  /* List items */
  --bg-hover-subtle: var(--bg-hover-subtle-light);
  --bg-list-grouped-header: var(--bg-list-grouped-header-light);
  --bg-list-grouped-header-document: var(--bg-list-grouped-header-document-light);
  /* Chart colors */
  --chart-tick-color: var(--chart-tick-color-light);
  --chart-tooltip-bg: var(--chart-tooltip-bg-light);
  /* Deprecated branding colors */
  --bg-info: var(--bg-info-light-val);
  --bg-info-light: var(--bg-info-light-light);
  --bg-info-lighter: var(--bg-info-lighter-light);
  --bg-yellow: var(--bg-yellow-light);
  --bg-highlight: var(--bg-highlight-light);
}

@font-face {
  font-family: "Proxima Nova";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/ProximaNova-Light.eot"); /* IE9 Compat Modes */
  src: url("../fonts/ProximaNova-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/ProximaNova-Light.woff") format("woff"), url("../fonts/ProximaNova-Light.ttf") format("truetype"), url("../fonts/ProximaNova-Light.svg#ProximaNova-Light") format("svg"); /* Legacy iOS */
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/ProximaNova-Regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/ProximaNova-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/ProximaNova-Regular.woff") format("woff"), url("../fonts/ProximaNova-Regular.ttf") format("truetype"), url("../fonts/ProximaNova-Regular.svg#ProximaNova-Regular") format("svg"); /* Legacy iOS */
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 500;
  font-style: italic;
  src: url("../fonts/ProximaNova-RegularIt.eot"); /* IE9 Compat Modes */
  src: url("../fonts/ProximaNova-RegularIt.eot?#iefix") format("embedded-opentype"), url("../fonts/ProximaNova-RegularIt.woff") format("woff"), url("../fonts/ProximaNova-RegularIt.ttf") format("truetype"), url("../fonts/ProximaNova-RegularIt.svg#ProximaNova-RegularIt") format("svg"); /* Legacy iOS */
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 600;
  font-style: normal;
  src: url("../fonts/ProximaNova-Semibold.eot"); /* IE9 Compat Modes */
  src: url("../fonts/ProximaNova-Semibold.eot?#iefix") format("embedded-opentype"), url("../fonts/ProximaNova-Semibold.woff") format("woff"), url("../fonts/ProximaNova-Semibold.ttf") format("truetype"), url("../fonts/ProximaNova-Semibold.svg#ProximaNova-Semibold") format("svg"); /* Legacy iOS */
}
@font-face {
  font-family: "Gellix";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/Geist-Regular.woff2") format("woff2"), url("../fonts/Geist-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Gellix";
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/Geist-Medium.woff2") format("woff2"), url("../fonts/Geist-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Gellix";
  font-weight: 500;
  font-style: italic;
  src: url("../fonts/Geist-MediumItalic.woff2") format("woff2"), url("../fonts/Geist-MediumItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Gellix";
  font-weight: 600;
  font-style: normal;
  src: url("../fonts/Geist-SemiBold.woff2") format("woff2"), url("../fonts/Geist-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Gellix";
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/Geist-SemiBold.woff2") format("woff2"), url("../fonts/Geist-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Geist";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/Geist-Regular.woff2") format("woff2"), url("../fonts/Geist-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Geist";
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/Geist-Medium.woff2") format("woff2"), url("../fonts/Geist-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Geist";
  font-weight: 500;
  font-style: italic;
  src: url("../fonts/Geist-MediumItalic.woff2") format("woff2"), url("../fonts/Geist-MediumItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Geist";
  font-weight: 600;
  font-style: normal;
  src: url("../fonts/Geist-SemiBold.woff2") format("woff2"), url("../fonts/Geist-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "FF Meta Serif";
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/ff-meta-serif-book.eot"); /* IE9 Compat Modes */
  src: url("../fonts/ff-meta-serif-book.eot?#iefix") format("embedded-opentype"), url("../fonts/ff-meta-serif-book.woff") format("woff"), url("../fonts/ff-meta-serif-book.ttf") format("truetype"), url("../fonts/ff-meta-serif-book.woff2") format("woff2"); /* Legacy iOS */
}
@font-face {
  font-family: "FF Meta Serif";
  font-weight: 600;
  font-style: normal;
  src: url("../fonts/ff-meta-serif-bold.eot"); /* IE9 Compat Modes */
  src: url("../fonts/ff-meta-serif-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/ff-meta-serif-bold.woff") format("woff"), url("../fonts/ff-meta-serif-bold.ttf") format("truetype"), url("../fonts/ff-meta-serif-bold.woff2") format("woff2"); /* Legacy iOS */
}
@font-face {
  font-family: "Angeliquemadouce Colombe";
  font-weight: 600;
  font-style: normal;
  src: url("../fonts/AngeliquemadouceColombe.eot"); /* IE9 Compat Modes */
  src: url("../fonts/AngeliquemadouceColombe.eot?#iefix") format("embedded-opentype"), url("../fonts/AngeliquemadouceColombe.woff") format("woff"), url("../fonts/AngeliquemadouceColombe.ttf") format("truetype"), url("../fonts/AngeliquemadouceColombe.svg#AngeliquemadouceColombe") format("svg"); /* Legacy iOS */
}
.container,
.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

.row {
  margin-left: 0;
  margin-right: 0;
}

.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12,
[class^=col-] {
  padding-left: 0;
  padding-right: 0;
}

.col-sm-1half {
  float: left;
}
@media (min-width: 768px) {
  .col-sm-1half {
    width: 12.5%;
  }
}

.tooltip {
  max-width: 250px;
}
.tooltip.in {
  opacity: 1 !important;
}

.tooltip-inner {
  padding: 10px 13px 10px;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  font-family: var(--font-sans-serif);
  background: var(--text-default);
}

.tooltip.top .tooltip-arrow {
  border-top-color: var(--text-default);
}
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: var(--text-default);
}

@media (max-width: 768px) {
  body.modal-open {
    position: fixed;
    width: 100%;
    height: 100%;
  }
}
@media print {
  body.modal-open {
    position: relative;
    visibility: hidden;
  }
  body.modal-open #outer-wrapper {
    display: none;
  }
}

body.overlay-open {
  overflow: hidden;
}
@media (max-width: 768px) {
  body.overlay-open {
    position: fixed;
    width: 100%;
    height: 100%;
  }
}

body.drawer-animating {
  overflow-x: hidden;
}

.modal-backdrop {
  opacity: 1 !important;
  background: color-mix(in srgb, var(--black) 80%, transparent);
}
.modal-backdrop.in {
  background: color-mix(in srgb, var(--black) 80%, transparent);
  animation: global-search-fade-in var(--transition-fast) 1 forwards;
}

.modal.fade .modal-dialog {
  margin: 0 auto;
  transition: transform var(--transition-fast);
  transform: translate3d(0, 30px, 0);
  border-radius: 6px;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--bg-shadow) 8%, transparent);
}
@media (min-width: 768px) {
  .modal.fade .modal-dialog {
    margin: 60px auto;
  }
}
@media (min-width: 1500px) {
  .modal.fade .modal-dialog {
    margin: 80px auto;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .modal.fade .modal-dialog {
    box-shadow: 0 0 0 1px var(--border-content);
  }
}
:root[data-theme=dark] .modal.fade .modal-dialog {
  box-shadow: 0 0 0 1px var(--border-content);
}
.modal.fade .modal-dialog.modal-sm {
  width: 100%;
  max-width: 400px;
}
.modal.fade .modal-dialog.modal-smd {
  width: 100%;
  max-width: 460px;
}
.modal.fade .modal-dialog.modal-540 {
  width: 100%;
  max-width: 540px;
}
.modal.fade .modal-dialog.modal-640 {
  width: 100%;
  max-width: 640px;
}
.modal.fade .modal-dialog.modal-700 {
  width: 100%;
  max-width: 700px;
}

.modal.fade .modal-dialog.modal-mlg {
  width: 100%;
  max-width: 800px;
}
@media (min-width: 980px) and (max-width: 1080px) {
  .modal.fade .modal-dialog.modal-mlg .modal-header-close {
    right: 0;
    left: auto;
    top: -62px;
  }
}

.modal.fade .modal-dialog.modal-lg {
  width: 100%;
  max-width: 900px;
}
@media (min-width: 768px) and (max-width: 1080px) {
  .modal.fade .modal-dialog.modal-lg .modal-header-close {
    right: 0;
    left: auto;
    top: -62px;
  }
}

.modal.fade .modal-dialog.modal-xl {
  width: 100%;
  max-width: 1080px;
}
@media (min-width: 768px) and (max-width: 1220px) {
  .modal.fade .modal-dialog.modal-xl .modal-header-close {
    right: 0;
    left: auto;
    top: -62px;
  }
}

.modal.fade.in .modal-dialog {
  transform: translate3d(0, 0, 0);
}

.modal.modal--without-transition.fade.in .modal-dialog {
  transition: none;
  transform: translate3d(0, 0, 0);
  animation: fade-in-up var(--transition-fast) 1 forwards;
}

.modal.fade.out {
  opacity: 0.2;
}

.modal-content {
  margin: 0;
  background: var(--bg-panel);
  border: none;
  border-radius: 6px;
  box-shadow: none;
}
@media (min-width: 768px) {
  .modal-content {
    margin: 0;
  }
}

.modal-header {
  text-align: center;
  padding: 40px 20px 0;
  background-color: var(--bg-panel);
  border-bottom: none;
  border-radius: 0;
}
@media (min-width: 480px) {
  .modal-header {
    padding: 25px 25px 0;
    border-radius: 6px 6px 0 0;
  }
}
@media (min-width: 768px) {
  .modal-header {
    padding: 40px 40px 0;
  }
}
.modal-header.text-left {
  text-align: left;
}
.modal-header.modal-header--with-border {
  border-bottom: 1px solid var(--border-content);
}
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4 {
  margin-bottom: 0;
  font-weight: 500;
}

.modal-header-with-steps {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 20px;
  border-bottom: 1px solid var(--border-content);
}
.modal-header-with-steps::before, .modal-header-with-steps::after {
  display: none;
}
.modal-header-with-steps .modal-title {
  font-size: 18px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .modal-header-with-steps {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.modal-header-with-steps.modal-header-with-steps--sticky {
  position: sticky;
  top: 0;
  z-index: 3;
  font-size: 14px;
  font-weight: 500;
}

.modal-header-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  opacity: 0.7;
  transition: all var(--transition-normal) ease;
  z-index: 2;
}
.modal-header-close .ion-android-close {
  display: none;
}
@media (min-width: 768px) {
  .modal-header-close {
    left: 100%;
    margin-left: 15px;
    right: auto;
    top: -8px;
    opacity: 0.7;
  }
  .modal-header-close:hover, .modal-header-close:active {
    opacity: 0.9;
  }
}
@media (min-width: 768px) {
  .modal.in .modal-header-close {
    animation: modal-close-icon var(--transition-slow) 1;
  }
  .modal.in .modal-header-close:hover {
    opacity: 1;
  }
}

.modal-header-close-icon {
  width: 36px;
  height: 36px;
  padding: 10px;
}
.modal-header-close-icon path {
  fill: var(--text-default);
}
@media (min-width: 768px) {
  .modal-header-close-icon {
    padding: 10px 10px 9px;
    border: 1.5px solid var(--color-primary-contrast);
    border-radius: 50%;
  }
  .modal-header-close-icon path {
    fill: var(--color-primary-contrast);
  }
}

.modal-body {
  padding: 20px;
  background: var(--bg-panel);
}
.modal-body.pan {
  padding: 0;
}
.modal-body.no-footer, .modal-body:last-child {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.modal-body:first-child {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.modal-body.no-header {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.modal-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-default);
  word-break: break-word;
}
@media (min-width: 480px) {
  .modal-title {
    font-size: 22px;
  }
}

.modal-subtitle {
  margin-top: 3px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-lighter);
}

.modal-title-dropdown-wrapper {
  font-size: 14px;
}

.modal-title-back-arrow {
  position: absolute;
  top: -6px;
  left: 0;
  padding: 40px;
}
@media (min-width: 768px) {
  .modal-title-back-arrow {
    top: 8px;
  }
}

.modal-footer {
  padding: 20px;
  background-color: var(--bg-panel);
  border-top: 1px solid var(--border-content);
  border-radius: 0 0 6px 6px;
}
@media (max-width: 480px) {
  .modal-footer .btn {
    width: 100%;
  }
}
.modal-footer.no-border {
  border-top: 0px;
}
.modal-footer.flex::before, .modal-footer.flex::after {
  display: none;
}

.modal-notice {
  width: 100%;
  padding: 15px 40px;
  margin-bottom: 0;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  color: var(--color-accent-brown);
  background-color: var(--bg-yellow);
}

.modal-error {
  position: relative;
  display: none;
  width: 100%;
  padding: 15px 40px;
  margin-bottom: 0;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  color: var(--bg-content);
  background-color: var(--color-danger);
}

@media (max-width: 768px) {
  .modal-with-avatar-content {
    margin-top: 50px;
  }
}

.modal-with-avatar-header {
  background-image: linear-gradient(to bottom, var(--bg-grey-fc) 0%, #fff 100%);
}

.modal-with-avatar-title {
  padding-top: 22px;
}
@media (min-width: 768px) {
  .modal-with-avatar-title {
    padding-top: 30px;
  }
}

.modal-header-avatar {
  position: absolute;
  left: 50%;
  top: -42px;
  margin-left: -42px;
}

.dropdown-menu {
  max-width: 220px;
  padding: 5px 5px;
  margin: 5px 0 0 0;
  background: var(--bg-content);
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  user-select: none;
  box-shadow: 0 4px 11px color-mix(in srgb, var(--black) 10%, transparent);
}
.dropdown-menu:before {
  display: none;
}
.dropdown-menu:after {
  display: none;
}
.dropdown-menu.open {
  display: block;
}
.dropdown-menu.dropdown-menu--multi-select {
  background: var(--bg-content);
  border: 1px solid var(--border-field-focus);
  border-top: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .dropdown-menu {
    border-color: var(--border-content);
  }
}
:root[data-theme=dark] .dropdown-menu {
  border-color: var(--border-content);
}
.dropdown-menu > li > a, .dropdown-menu > li a, .dropdown-menu > li button.btn-dropdown-item {
  display: block;
  padding: 7px 10px;
  font-weight: 500;
  font-size: 14px;
  border-radius: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: none;
  outline: none;
}
.dropdown-menu > li > a, .dropdown-menu > li > a:focus, .dropdown-menu > li > a:visited, .dropdown-menu > li a, .dropdown-menu > li a:focus, .dropdown-menu > li a:visited, .dropdown-menu > li button.btn-dropdown-item, .dropdown-menu > li button.btn-dropdown-item:focus, .dropdown-menu > li button.btn-dropdown-item:visited {
  color: var(--text-default);
  background: none;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li a:hover, .dropdown-menu > li button.btn-dropdown-item:hover {
  color: var(--text-default);
  background: var(--bg-grey-fc);
}
.dropdown-menu > li > a.disabled, .dropdown-menu > li a.disabled, .dropdown-menu > li button.btn-dropdown-item.disabled {
  color: var(--text-lightest);
  cursor: default;
}
.dropdown-menu > li > a.disabled:hover, .dropdown-menu > li a.disabled:hover, .dropdown-menu > li button.btn-dropdown-item.disabled:hover {
  color: var(--text-lightest);
  background: none;
}
.dropdown-menu > li > a.dropdown-link-with-icon, .dropdown-menu > li a.dropdown-link-with-icon, .dropdown-menu > li button.btn-dropdown-item.dropdown-link-with-icon {
  position: relative;
  display: block;
  padding-left: 36px;
}
.dropdown-menu > li > a.dropdown-li-loading, .dropdown-menu > li a.dropdown-li-loading, .dropdown-menu > li button.btn-dropdown-item.dropdown-li-loading {
  cursor: progress;
  color: var(--text-lightest);
  opacity: 0.8;
}
.dropdown-menu > li > a.dropdown-li-action-link, .dropdown-menu > li > a.dropdown-li-action-link:focus, .dropdown-menu > li > a.dropdown-li-action-link:visited, .dropdown-menu > li a.dropdown-li-action-link, .dropdown-menu > li a.dropdown-li-action-link:focus, .dropdown-menu > li a.dropdown-li-action-link:visited, .dropdown-menu > li button.btn-dropdown-item.dropdown-li-action-link, .dropdown-menu > li button.btn-dropdown-item.dropdown-li-action-link:focus, .dropdown-menu > li button.btn-dropdown-item.dropdown-li-action-link:visited {
  color: var(--text-muted);
}
.dropdown-menu > li > a.dropdown-li-action-link:hover, .dropdown-menu > li > a.dropdown-li-action-link:active, .dropdown-menu > li a.dropdown-li-action-link:hover, .dropdown-menu > li a.dropdown-li-action-link:active, .dropdown-menu > li button.btn-dropdown-item.dropdown-li-action-link:hover, .dropdown-menu > li button.btn-dropdown-item.dropdown-li-action-link:active {
  color: var(--text-default);
}
.dropdown-menu > li.active > a {
  color: var(--text-default);
  background: var(--bg-grey-fa);
}
.dropdown-menu > li.active > a:hover {
  color: var(--text-default);
  background: var(--bg-grey-fa);
}
.dropdown-menu > li:last-child > a {
  border-bottom: none;
}
.dropdown-menu.right {
  right: 0;
  left: auto;
}
.dropdown-menu.dropdown-menu-modal {
  z-index: 10000 !important;
}
.dropdown-menu.dropdown-menu--width-200 {
  width: 200px;
}
.dropdown-menu.dropdown-menu--max-width-300 {
  max-width: 300px;
}
.dropdown-menu.dropdown-menu--width-auto, .dropdown-menu.fit-content {
  width: fit-content;
  max-width: none;
}
.dropdown-menu.dropdown-menu.dropdown-menu-fee-type {
  right: 3px;
  width: 140px;
  overflow-y: scroll;
  height: 227px;
}
.dropdown-menu hr {
  margin-top: 10px;
  margin-bottom: 10px;
  border-color: var(--border-content);
}
.dropdown-menu hr:last-child {
  display: none;
}
.dropdown-menu .divider {
  background-color: var(--border-content);
}

.dropdown-menu-chevron-icon {
  position: relative;
  top: -1px;
  width: 10px;
  height: auto;
  margin-left: 7px;
  vertical-align: middle;
  transition: all var(--transition-fast) ease;
}
.dropdown-menu-chevron-icon path {
  fill: currentColor;
}
.open .dropdown-menu-chevron-icon {
  transform: rotate(180deg);
}
.dropdown-menu-chevron-icon.dropdown-menu-chevron-icon--inline {
  top: 1px;
}

.dropdown-link-with-icon-svg {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 15px;
  height: auto;
  margin-top: -8px;
}
.dropdown-link-with-icon-svg.client {
  left: 10px;
  width: 17px;
  margin-top: -7px;
}
.dropdown-link-with-icon-svg.deal {
  left: 10.5px;
  width: 15px;
  margin-top: -6.5px;
}
.dropdown-link-with-icon-svg.project {
  left: 10px;
  width: 15px;
  margin-top: -7px;
}
.dropdown-link-with-icon-svg.contract {
  width: 14px;
  left: 10px;
  margin-top: -8px;
}
.dropdown-link-with-icon-svg.form {
  width: 14px;
  left: 11px;
  margin-top: -8px;
}
.dropdown-link-with-icon-svg.proposal {
  width: 14px;
  left: 10px;
  margin-top: -7px;
}
.dropdown-link-with-icon-svg.expense {
  width: 12px;
  left: 11.5px;
  margin-top: -8px;
}
.dropdown-link-with-icon-svg.task {
  width: 14px;
  left: 10.5px;
  margin-top: -7px;
}

.dropdown-wrap.open .btn {
  background-color: var(--bg-content);
  border: 1px solid var(--color-primary);
  box-shadow: inset 0 1px 4px color-mix(in srgb, var(--black) 10%, transparent);
}
.dropdown-wrap.open ul.dropdown-menu {
  display: block;
}

.dropdown-submenu {
  position: relative;
}
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -10px;
  border-radius: 0 6px 6px 0;
  box-shadow: 3px 3px 5px color-mix(in srgb, var(--bg-shadow) 8%, transparent);
}
.dropdown-submenu > .dropdown-menu.right {
  left: auto;
  right: 100%;
  border-radius: 6px 0 0 6px;
  box-shadow: -3px 3px 5px color-mix(in srgb, var(--bg-shadow) 8%, transparent);
}
.dropdown-submenu > .dropdown-menu:before {
  display: none;
}
.dropdown-submenu > .dropdown-menu:after {
  display: none;
}
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.dropdown-top-right {
  position: absolute;
  right: 0;
  top: 0;
}

.dropdown-top-right-link {
  position: relative;
  width: 50px;
  display: block;
  text-align: center;
  padding: 15px 0;
  cursor: pointer;
}
.dropdown-top-right-link path[fill="#0f1010"] {
  fill: var(--text-default);
}

.dropdown-menu-close-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  cursor: default;
}

.li-loading-wrap {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.li-loading-circles {
  position: absolute;
  top: 50%;
  left: 28px;
  right: 0;
  text-align: left;
  margin-top: -12px;
}

.li-loading-circle {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 4px;
  background: color-mix(in srgb, var(--text-lighter) 50%, transparent);
  border-radius: 50%;
  animation: loading var(--transition-slower) ease-in-out infinite;
}
.li-loading-circle:nth-child(1) {
  animation-delay: 0;
}
.li-loading-circle:nth-child(2) {
  animation-delay: var(--transition-fast);
}
.li-loading-circle:nth-child(3) {
  animation-delay: var(--transition-normal);
}
.li-loading-circle:nth-child(4) {
  animation-delay: var(--transition-medium);
}

.pagination {
  padding: 0;
  margin: 0;
  border-radius: 0;
}

.react-tooltip {
  background: var(--bg-tooltip);
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 9px 13px !important;
  line-height: 1.4 !important;
  border-radius: 6px !important;
  color: var(--text-tooltip);
  opacity: 1 !important;
  z-index: 10000 !important;
  transition: none !important;
}
.react-tooltip[class*=styles-module_dark].react-tooltip__place-top {
  margin-top: -5px;
}
.react-tooltip[class*=styles-module_light] {
  border-radius: 6px;
  box-shadow: 0 5px 15px color-mix(in srgb, var(--bg-shadow) 7%, transparent);
}
.react-tooltip[class*=styles-module_light].react-tooltip__place-bottom {
  margin-top: 2px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .react-tooltip {
    border: 1px solid color-mix(in srgb, var(--text-tooltip) 10%, transparent);
  }
}
:root[data-theme=dark] .react-tooltip {
  border: 1px solid color-mix(in srgb, var(--text-tooltip) 10%, transparent);
}
.react-tooltip.tooltip-sm {
  max-width: 200px;
}
.react-tooltip.tooltip-smd {
  max-width: 260px;
}
.react-tooltip.tooltip-md {
  max-width: 300px;
}
.react-tooltip.tooltip-width-auto {
  width: fit-content;
  max-width: fit-content;
}
.react-tooltip.react-tooltip__closing {
  display: none !important;
}
.react-tooltip span.multi-line {
  line-height: normal !important;
}
.react-tooltip a,
.react-tooltip a:focus,
.react-tooltip a:visited,
.react-tooltip a:hover,
.react-tooltip a:active {
  color: var(--bg-content);
  text-decoration: underline;
}

.react-tooltip-arrow {
  display: none;
}

#intercom-container .intercom-launcher-frame,
#intercom-container .intercom-launcher-badge-frame {
  display: none !important;
}
@media (min-width: 768px) {
  #intercom-container .intercom-launcher-frame,
  #intercom-container .intercom-launcher-badge-frame {
    display: block !important;
  }
}

.shepherd-element.shepherd-theme-arrows {
  max-width: 400px;
}

.ReactModal__Overlay {
  z-index: 10000 !important;
}

.content-spinner {
  position: relative;
  height: 15px;
  margin: auto;
  text-align: center;
}
.content-spinner.spinner-sm {
  margin-top: -5px;
}

.content-spinner-bounce1,
.content-spinner-bounce2,
.content-spinner-bounce3,
.content-spinner-bounce4,
.content-spinner-bounce5 {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
  border-radius: 100%;
  animation: bouncedelay 1s infinite ease-out both;
}
.content-spinner.spinner-sm .content-spinner-bounce1,
.content-spinner.spinner-sm .content-spinner-bounce2,
.content-spinner.spinner-sm .content-spinner-bounce3,
.content-spinner.spinner-sm .content-spinner-bounce4,
.content-spinner.spinner-sm .content-spinner-bounce5 {
  width: 8px;
  height: 8px;
  margin: 0 4px;
}

.content-spinner-bounce1 {
  animation-delay: 0s;
}

.content-spinner-bounce2 {
  animation-delay: 0.16s;
}

.content-spinner-bounce3 {
  animation-delay: 0.32s;
}

.content-spinner-bounce4 {
  animation-delay: 0.48s;
}

.content-spinner-bounce5 {
  animation-delay: 0.64s;
}

.content-spinner-inline {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5px;
}

.content-spinner-inline-bounce1,
.content-spinner-inline-bounce2,
.content-spinner-inline-bounce3 {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 2px;
  background-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
  border-radius: 100%;
  animation: bouncedelay 1s infinite ease-out both;
}

.content-spinner-inline-bounce1 {
  animation-delay: 0s;
}

.content-spinner-inline-bounce2 {
  animation-delay: 0.16s;
}

.content-spinner-inline-bounce3 {
  animation-delay: 0.32s;
}

.content-spinner-inline-xs {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3px;
}

.content-spinner-inline-xs-bounce1,
.content-spinner-inline-xs-bounce2,
.content-spinner-inline-xs-bounce3 {
  display: inline-block;
  width: 2px;
  height: 6px;
  margin: 0 1px;
  background-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
  border-radius: 100%;
  animation: bouncedelay 1s infinite ease-out both;
}

.content-spinner-inline-xs-bounce1 {
  animation-delay: 0s;
}

.content-spinner-inline-xs-bounce2 {
  animation-delay: 0.16s;
}

.content-spinner-inline-xs-bounce3 {
  animation-delay: 0.32s;
}

.preloader-wrapper {
  display: inline-block;
  position: relative;
  width: 48px;
  height: 48px;
}
.preloader-wrapper.spinner-xs {
  width: 29px;
  height: 29px;
}
.preloader-wrapper.spinner-sm {
  width: 36px;
  height: 36px;
}
.preloader-wrapper.spinner-lg {
  width: 100px;
  height: 100px;
}
.preloader-wrapper.quickbooks-integration-spinner {
  width: 25px;
  height: 25px;
  right: 6px;
  top: 3px;
}
.preloader-wrapper.active {
  animation: container-rotate 1568ms linear infinite;
}

.spinner-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-color: var(--color-primary);
}

.spinner-red,
.spinner-red-only {
  border-color: var(--color-danger);
}

.spinner-yellow,
.spinner-yellow-only {
  border-color: var(--color-accent-yellow);
}

.spinner-primary,
.spinner-primary-only {
  border-color: var(--color-primary);
}

.spinner-darker,
.spinner-darker-only {
  border-color: color-mix(in srgb, var(--black) 10%, transparent);
}

.active .spinner-layer.spinner-red {
  /* durations: 4 * ARCTIME */
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer.spinner-yellow {
  /* durations: 4 * ARCTIME */
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer.spinner-primary {
  /* durations: 4 * ARCTIME */
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer.spinner-darker {
  /* durations: 4 * ARCTIME */
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, darker-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer,
.active .spinner-layer.spinner-blue-only,
.active .spinner-layer.spinner-red-only,
.active .spinner-layer.spinner-yellow-only,
.active .spinner-layer.spinner-primary-only,
.active .spinner-layer.spinner-darker-only {
  opacity: 1;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.gap-patch {
  position: absolute;
  top: 0;
  left: 45%;
  width: 10%;
  height: 100%;
  overflow: hidden;
  border-color: inherit;
}

.gap-patch .circle {
  width: 1000%;
  left: -450%;
}

.circle-clipper {
  display: inline-block;
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-color: inherit;
}
.circle-clipper .circle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 200%;
  height: 100%;
  border-width: 2px;
  border-style: solid;
  border-color: inherit;
  border-bottom-color: transparent !important;
  border-radius: 50%;
  animation: none;
}
.circle-clipper.left .circle {
  left: 0;
  border-right-color: transparent !important;
  transform: rotate(129deg);
}
.circle-clipper.right .circle {
  left: -100%;
  border-left-color: transparent !important;
  transform: rotate(-129deg);
}

.active .circle-clipper.left .circle {
  /* duration: ARCTIME */
  animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .circle-clipper.right .circle {
  /* duration: ARCTIME */
  animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.confirm-checkmark {
  display: block;
  width: 100px;
  height: 100px;
  stroke-width: 1;
  stroke: var(--color-primary);
  stroke-miterlimit: 10;
  border-radius: 50%;
  animation: confirm-checkmark-scale 0.3s ease-in-out 200ms both;
}

.confirm-checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 1;
  stroke-miterlimit: 10;
  stroke: var(--color-primary);
  fill: none;
  animation: confirm-checkmark-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.confirm-checkmark-check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: confirm-checkmark-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 200ms forwards;
}

@keyframes confirm-checkmark-stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes confirm-checkmark-scale {
  0% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
  100% {
    transform: none;
    box-shadow: 0px 2px 14px color-mix(in srgb, var(--color-primary) 5%, transparent);
  }
}
.m-auto {
  margin: auto;
}

.mt-auto {
  margin-top: auto;
}

.mr-auto {
  margin-right: auto;
}

.mb-auto {
  margin-bottom: auto;
}

.ml-auto {
  margin-left: auto;
}

.pa0,
.pa0-xs {
  padding: 0 !important;
}

.pa2,
.pa2-xs {
  padding: 2px !important;
}

.pa5,
.pa5-xs {
  padding: 5px !important;
}

.pa7,
.pa7-xs {
  padding: 7px !important;
}

.pa10,
.pa10-xs {
  padding: 10px !important;
}

.pa15,
.pa15-xs {
  padding: 15px !important;
}

.pa20,
.pa20-xs {
  padding: 20px !important;
}

.pa25,
.pa25-xs {
  padding: 25px !important;
}

.pa30,
.pa30-xs {
  padding: 30px !important;
}

.pa40,
.pa40-xs {
  padding: 40px !important;
}

.pa45,
.pa45-xs {
  padding: 45px !important;
}

.pa50,
.pa50-xs {
  padding: 50px !important;
}

.pa60,
.pa60-xs {
  padding: 60px !important;
}

.pa80,
.pa80-xs {
  padding: 80px !important;
}

.pa90,
.pa90-xs {
  padding: 90px !important;
}

.pt0,
.pt0-xs {
  padding-top: 0 !important;
}

.pt2,
.pt2-xs {
  padding-top: 2px !important;
}

.pt5,
.pt5-xs {
  padding-top: 5px !important;
}

.pt7,
.pt7-xs {
  padding-top: 7px !important;
}

.pt10,
.pt10-xs {
  padding-top: 10px !important;
}

.pt15,
.pt15-xs {
  padding-top: 15px !important;
}

.pt20,
.pt20-xs {
  padding-top: 20px !important;
}

.pt25,
.pt25-xs {
  padding-top: 25px !important;
}

.pt30,
.pt30-xs {
  padding-top: 30px !important;
}

.pt40,
.pt40-xs {
  padding-top: 40px !important;
}

.pt45,
.pt45-xs {
  padding-top: 45px !important;
}

.pt50,
.pt50-xs {
  padding-top: 50px !important;
}

.pt60,
.pt60-xs {
  padding-top: 60px !important;
}

.pt80,
.pt80-xs {
  padding-top: 80px !important;
}

.pt90,
.pt90-xs {
  padding-top: 90px !important;
}

.pr0,
.pr0-xs {
  padding-right: 0 !important;
}

.pr2,
.pr2-xs {
  padding-right: 2px !important;
}

.pr5,
.pr5-xs {
  padding-right: 5px !important;
}

.pr7,
.pr7-xs {
  padding-right: 7px !important;
}

.pr10,
.pr10-xs {
  padding-right: 10px !important;
}

.pr15,
.pr15-xs {
  padding-right: 15px !important;
}

.pr20,
.pr20-xs {
  padding-right: 20px !important;
}

.pr25,
.pr25-xs {
  padding-right: 25px !important;
}

.pr30,
.pr30-xs {
  padding-right: 30px !important;
}

.pr40,
.pr40-xs {
  padding-right: 40px !important;
}

.pr45,
.pr45-xs {
  padding-right: 45px !important;
}

.pr50,
.pr50-xs {
  padding-right: 50px !important;
}

.pr60,
.pr60-xs {
  padding-right: 60px !important;
}

.pr80,
.pr80-xs {
  padding-right: 80px !important;
}

.pr90,
.pr90-xs {
  padding-right: 90px !important;
}

.pb0,
.pb0-xs {
  padding-bottom: 0 !important;
}

.pb2,
.pb2-xs {
  padding-bottom: 2px !important;
}

.pb5,
.pb5-xs {
  padding-bottom: 5px !important;
}

.pb7,
.pb7-xs {
  padding-bottom: 7px !important;
}

.pb10,
.pb10-xs {
  padding-bottom: 10px !important;
}

.pb15,
.pb15-xs {
  padding-bottom: 15px !important;
}

.pb20,
.pb20-xs {
  padding-bottom: 20px !important;
}

.pb25,
.pb25-xs {
  padding-bottom: 25px !important;
}

.pb30,
.pb30-xs {
  padding-bottom: 30px !important;
}

.pb40,
.pb40-xs {
  padding-bottom: 40px !important;
}

.pb45,
.pb45-xs {
  padding-bottom: 45px !important;
}

.pb50,
.pb50-xs {
  padding-bottom: 50px !important;
}

.pb60,
.pb60-xs {
  padding-bottom: 60px !important;
}

.pb80,
.pb80-xs {
  padding-bottom: 80px !important;
}

.pb90,
.pb90-xs {
  padding-bottom: 90px !important;
}

.pb100,
.pb100-xs {
  padding-bottom: 100px !important;
}

.pl0,
.pl0-xs {
  padding-left: 0 !important;
}

.pl2,
.pl2-xs {
  padding-left: 2px !important;
}

.pl5,
.pl5-xs {
  padding-left: 5px !important;
}

.pl7,
.pl7-xs {
  padding-left: 7px !important;
}

.pl10,
.pl10-xs {
  padding-left: 10px !important;
}

.pl15,
.pl15-xs {
  padding-left: 15px !important;
}

.pl20,
.pl20-xs {
  padding-left: 20px !important;
}

.pl25,
.pl25-xs {
  padding-left: 25px !important;
}

.pl30,
.pl30-xs {
  padding-left: 30px !important;
}

.pl40,
.pl40-xs {
  padding-left: 40px !important;
}

.pl45,
.pl45-xs {
  padding-left: 45px !important;
}

.pl50,
.pl50-xs {
  padding-left: 50px !important;
}

.pl60,
.pl60-xs {
  padding-left: 60px !important;
}

.pl80,
.pl80-xs {
  padding-left: 80px !important;
}

.pl90,
.pl90-xs {
  padding-left: 90px !important;
}

.ma0,
.ma0-xs {
  margin: 0px !important;
}

.ma2,
.ma2-xs {
  margin: 2px !important;
}

.ma5,
.ma5-xs {
  margin: 5px !important;
}

.ma7,
.ma7-xs {
  margin: 7px !important;
}

.ma10,
.ma10-xs {
  margin: 10px !important;
}

.ma15,
.ma15-xs {
  margin: 15px !important;
}

.ma20,
.ma20-xs {
  margin: 20px !important;
}

.ma25,
.ma25-xs {
  margin: 25px !important;
}

.ma30,
.ma30-xs {
  margin: 30px !important;
}

.ma40,
.ma40-xs {
  margin: 40px !important;
}

.ma45,
.ma45-xs {
  margin: 45px !important;
}

.ma50,
.ma50-xs {
  margin: 50px !important;
}

.ma60,
.ma60-xs {
  margin: 60px !important;
}

.ma80,
.ma80-xs {
  margin: 80px !important;
}

.ma90,
.ma90-xs {
  margin: 90px !important;
}

.mt0,
.mt0-xs {
  margin-top: 0px !important;
}

.mt2,
.mt2-xs {
  margin-top: 2px !important;
}

.mt5,
.mt5-xs {
  margin-top: 5px !important;
}

.mt7,
.mt7-xs {
  margin-top: 7px !important;
}

.mt10,
.mt10-xs {
  margin-top: 10px !important;
}

.mt15,
.mt15-xs {
  margin-top: 15px !important;
}

.mt20,
.mt20-xs {
  margin-top: 20px !important;
}

.mt25,
.mt25-xs {
  margin-top: 25px !important;
}

.mt30,
.mt30-xs {
  margin-top: 30px !important;
}

.mt35,
.mt35-xs {
  margin-top: 35px !important;
}

.mt40,
.mt40-xs {
  margin-top: 40px !important;
}

.mt45,
.mt45-xs {
  margin-top: 45px !important;
}

.mt50,
.mt50-xs {
  margin-top: 50px !important;
}

.mt60,
.mt60-xs {
  margin-top: 60px !important;
}

.mt80,
.mt80-xs {
  margin-top: 80px !important;
}

.mt90,
.mt90-xs {
  margin-top: 90px !important;
}

.mr0,
.mr0-xs {
  margin-right: 0px !important;
}

.mr2,
.mr2-xs {
  margin-right: 2px !important;
}

.mr5,
.mr5-xs {
  margin-right: 5px !important;
}

.mr7,
.mr7-xs {
  margin-right: 7px !important;
}

.mr10,
.mr10-xs {
  margin-right: 10px !important;
}

.mr15,
.mr15-xs {
  margin-right: 15px !important;
}

.mr20,
.mr20-xs {
  margin-right: 20px !important;
}

.mr25,
.mr25-xs {
  margin-right: 25px !important;
}

.mr30,
.mr30-xs {
  margin-right: 30px !important;
}

.mr40,
.mr40-xs {
  margin-right: 40px !important;
}

.mr45,
.mr45-xs {
  margin-right: 45px !important;
}

.mr50,
.mr50-xs {
  margin-right: 50px !important;
}

.mr60,
.mr60-xs {
  margin-right: 60px !important;
}

.mr80,
.mr80-xs {
  margin-right: 80px !important;
}

.mr90,
.mr90-xs {
  margin-right: 90px !important;
}

.mb0,
.mb0-xs {
  margin-bottom: 0px !important;
}

.mb2,
.mb2-xs {
  margin-bottom: 2px !important;
}

.mb5,
.mb5-xs {
  margin-bottom: 5px !important;
}

.mb7,
.mb7-xs {
  margin-bottom: 7px !important;
}

.mb10,
.mb10-xs {
  margin-bottom: 10px !important;
}

.mb15,
.mb15-xs {
  margin-bottom: 15px !important;
}

.mb20,
.mb20-xs {
  margin-bottom: 20px !important;
}

.mb25,
.mb25-xs {
  margin-bottom: 25px !important;
}

.mb30,
.mb30-xs {
  margin-bottom: 30px !important;
}

.mb35,
.mb35-xs {
  margin-bottom: 35px !important;
}

.mb40,
.mb40-xs {
  margin-bottom: 40px !important;
}

.mb45,
.mb45-xs {
  margin-bottom: 45px !important;
}

.mb50,
.mb50-xs {
  margin-bottom: 50px !important;
}

.mb60,
.mb60-xs {
  margin-bottom: 60px !important;
}

.mb80,
.mb80-xs {
  margin-bottom: 80px !important;
}

.mb90,
.mb90-xs {
  margin-bottom: 90px !important;
}

.ml0,
.ml0-xs {
  margin-left: 0px !important;
}

.ml2,
.ml2-xs {
  margin-left: 2px !important;
}

.ml5,
.ml5-xs {
  margin-left: 5px !important;
}

.ml7,
.ml7-xs {
  margin-left: 7px !important;
}

.ml10,
.ml10-xs {
  margin-left: 10px !important;
}

.ml15,
.ml15-xs {
  margin-left: 15px !important;
}

.ml20,
.ml20-xs {
  margin-left: 20px !important;
}

.ml25,
.ml25-xs {
  margin-left: 25px !important;
}

.ml30,
.ml30-xs {
  margin-left: 30px !important;
}

.ml40,
.ml40-xs {
  margin-left: 40px !important;
}

.ml45,
.ml45-xs {
  margin-left: 45px !important;
}

.ml50,
.ml50-xs {
  margin-left: 50px !important;
}

.ml60,
.ml60-xs {
  margin-left: 60px !important;
}

.ml80,
.ml80-xs {
  margin-left: 80px !important;
}

.ml90,
.ml90-xs {
  margin-left: 90px !important;
}

@media print, (min-width: 768px) {
  .pa0-sm {
    padding: 0 !important;
  }
  .pa2-sm {
    padding: 2px !important;
  }
  .pa5-sm {
    padding: 5px !important;
  }
  .pa7-sm {
    padding: 7px !important;
  }
  .pa10-sm {
    padding: 10px !important;
  }
  .pa15-sm {
    padding: 15px !important;
  }
  .pa20-sm {
    padding: 20px !important;
  }
  .pa25-sm {
    padding: 25px !important;
  }
  .pa30-sm {
    padding: 30px !important;
  }
  .pa40-sm {
    padding: 40px !important;
  }
  .pa45-sm {
    padding: 45px !important;
  }
  .pa50-sm {
    padding: 50px !important;
  }
  .pa60-sm {
    padding: 60px !important;
  }
  .pa80-sm {
    padding: 80px !important;
  }
  .pa90-sm {
    padding: 90px !important;
  }
  .pt0-sm {
    padding-top: 0 !important;
  }
  .pt2-sm {
    padding-top: 2px !important;
  }
  .pt5-sm {
    padding-top: 5px !important;
  }
  .pt7-sm {
    padding-top: 7px !important;
  }
  .pt10-sm {
    padding-top: 10px !important;
  }
  .pt15-sm {
    padding-top: 15px !important;
  }
  .pt20-sm {
    padding-top: 20px !important;
  }
  .pt25-sm {
    padding-top: 25px !important;
  }
  .pt30-sm {
    padding-top: 30px !important;
  }
  .pt40-sm {
    padding-top: 40px !important;
  }
  .pt45-sm {
    padding-top: 45px !important;
  }
  .pt50-sm {
    padding-top: 50px !important;
  }
  .pt60-sm {
    padding-top: 60px !important;
  }
  .pt80-sm {
    padding-top: 80px !important;
  }
  .pt90-sm {
    padding-top: 90px !important;
  }
  .pr0-sm {
    padding-right: 0 !important;
  }
  .pr2-sm {
    padding-right: 2px !important;
  }
  .pr5-sm {
    padding-right: 5px !important;
  }
  .pr7-sm {
    padding-right: 7px !important;
  }
  .pr10-sm {
    padding-right: 10px !important;
  }
  .pr15-sm {
    padding-right: 15px !important;
  }
  .pr20-sm {
    padding-right: 20px !important;
  }
  .pr25-sm {
    padding-right: 25px !important;
  }
  .pr30-sm {
    padding-right: 30px !important;
  }
  .pr40-sm {
    padding-right: 40px !important;
  }
  .pr45-sm {
    padding-right: 45px !important;
  }
  .pr50-sm {
    padding-right: 50px !important;
  }
  .pr60-sm {
    padding-right: 60px !important;
  }
  .pr80-sm {
    padding-right: 80px !important;
  }
  .pr90-sm {
    padding-right: 90px !important;
  }
  .pb0-sm {
    padding-bottom: 0 !important;
  }
  .pb2-sm {
    padding-bottom: 2px !important;
  }
  .pb5-sm {
    padding-bottom: 5px !important;
  }
  .pb7-sm {
    padding-bottom: 7px !important;
  }
  .pb10-sm {
    padding-bottom: 10px !important;
  }
  .pb15-sm {
    padding-bottom: 15px !important;
  }
  .pb20-sm {
    padding-bottom: 20px !important;
  }
  .pb25-sm {
    padding-bottom: 25px !important;
  }
  .pb30-sm {
    padding-bottom: 30px !important;
  }
  .pb40-sm {
    padding-bottom: 40px !important;
  }
  .pb45-sm {
    padding-bottom: 45px !important;
  }
  .pb50-sm {
    padding-bottom: 50px !important;
  }
  .pb60-sm {
    padding-bottom: 60px !important;
  }
  .pb80-sm {
    padding-bottom: 80px !important;
  }
  .pb90-sm {
    padding-bottom: 90px !important;
  }
  .pl0-sm {
    padding-left: 0 !important;
  }
  .pl2-sm {
    padding-left: 2px !important;
  }
  .pl5-sm {
    padding-left: 5px !important;
  }
  .pl7-sm {
    padding-left: 7px !important;
  }
  .pl10-sm {
    padding-left: 10px !important;
  }
  .pl15-sm {
    padding-left: 15px !important;
  }
  .pl20-sm {
    padding-left: 20px !important;
  }
  .pl25-sm {
    padding-left: 25px !important;
  }
  .pl30-sm {
    padding-left: 30px !important;
  }
  .pl40-sm {
    padding-left: 40px !important;
  }
  .pl45-sm {
    padding-left: 45px !important;
  }
  .pl50-sm {
    padding-left: 50px !important;
  }
  .pl60-sm {
    padding-left: 60px !important;
  }
  .pl80-sm {
    padding-left: 80px !important;
  }
  .pl90-sm {
    padding-left: 90px !important;
  }
  .ma0-sm {
    margin: 0px !important;
  }
  .ma2-sm {
    margin: 2px !important;
  }
  .ma5-sm {
    margin: 5px !important;
  }
  .ma7-sm {
    margin: 7px !important;
  }
  .ma10-sm {
    margin: 10px !important;
  }
  .ma15-sm {
    margin: 15px !important;
  }
  .ma20-sm {
    margin: 20px !important;
  }
  .ma25-sm {
    margin: 25px !important;
  }
  .ma30-sm {
    margin: 30px !important;
  }
  .ma40-sm {
    margin: 40px !important;
  }
  .ma45-sm {
    margin: 45px !important;
  }
  .ma50-sm {
    margin: 50px !important;
  }
  .ma60-sm {
    margin: 60px !important;
  }
  .ma80-sm {
    margin: 80px !important;
  }
  .ma90-sm {
    margin: 90px !important;
  }
  .mt0-sm {
    margin-top: 0px !important;
  }
  .mt2-sm {
    margin-top: 2px !important;
  }
  .mt5-sm {
    margin-top: 5px !important;
  }
  .mt7-sm {
    margin-top: 7px !important;
  }
  .mt10-sm {
    margin-top: 10px !important;
  }
  .mt15-sm {
    margin-top: 15px !important;
  }
  .mt20-sm {
    margin-top: 20px !important;
  }
  .mt25-sm {
    margin-top: 25px !important;
  }
  .mt30-sm {
    margin-top: 30px !important;
  }
  .mt40-sm {
    margin-top: 40px !important;
  }
  .mt45-sm {
    margin-top: 45px !important;
  }
  .mt50-sm {
    margin-top: 50px !important;
  }
  .mt60-sm {
    margin-top: 60px !important;
  }
  .mt80-sm {
    margin-top: 80px !important;
  }
  .mt90-sm {
    margin-top: 90px !important;
  }
  .mr0-sm {
    margin-right: 0px !important;
  }
  .mr2-sm {
    margin-right: 2px !important;
  }
  .mr5-sm {
    margin-right: 5px !important;
  }
  .mr7-sm {
    margin-right: 7px !important;
  }
  .mr10-sm {
    margin-right: 10px !important;
  }
  .mr15-sm {
    margin-right: 15px !important;
  }
  .mr20-sm {
    margin-right: 20px !important;
  }
  .mr25-sm {
    margin-right: 25px !important;
  }
  .mr30-sm {
    margin-right: 30px !important;
  }
  .mr40-sm {
    margin-right: 40px !important;
  }
  .mr45-sm {
    margin-right: 45px !important;
  }
  .mr50-sm {
    margin-right: 50px !important;
  }
  .mr60-sm {
    margin-right: 60px !important;
  }
  .mr80-sm {
    margin-right: 80px !important;
  }
  .mr90-sm {
    margin-right: 90px !important;
  }
  .mb0-sm {
    margin-bottom: 0px !important;
  }
  .mb2-sm {
    margin-bottom: 2px !important;
  }
  .mb5-sm {
    margin-bottom: 5px !important;
  }
  .mb7-sm {
    margin-bottom: 7px !important;
  }
  .mb10-sm {
    margin-bottom: 10px !important;
  }
  .mb15-sm {
    margin-bottom: 15px !important;
  }
  .mb20-sm {
    margin-bottom: 20px !important;
  }
  .mb25-sm {
    margin-bottom: 25px !important;
  }
  .mb30-sm {
    margin-bottom: 30px !important;
  }
  .mb40-sm {
    margin-bottom: 40px !important;
  }
  .mb45-sm {
    margin-bottom: 45px !important;
  }
  .mb50-sm {
    margin-bottom: 50px !important;
  }
  .mb60-sm {
    margin-bottom: 60px !important;
  }
  .mb80-sm {
    margin-bottom: 80px !important;
  }
  .mb90-sm {
    margin-bottom: 90px !important;
  }
  .ml0-sm {
    margin-left: 0px !important;
  }
  .ml2-sm {
    margin-left: 2px !important;
  }
  .ml5-sm {
    margin-left: 5px !important;
  }
  .ml7-sm {
    margin-left: 7px !important;
  }
  .ml10-sm {
    margin-left: 10px !important;
  }
  .ml15-sm {
    margin-left: 15px !important;
  }
  .ml20-sm {
    margin-left: 20px !important;
  }
  .ml25-sm {
    margin-left: 25px !important;
  }
  .ml30-sm {
    margin-left: 30px !important;
  }
  .ml40-sm {
    margin-left: 40px !important;
  }
  .ml45-sm {
    margin-left: 45px !important;
  }
  .ml50-sm {
    margin-left: 50px !important;
  }
  .ml60-sm {
    margin-left: 60px !important;
  }
  .ml80-sm {
    margin-left: 80px !important;
  }
  .ml90-sm {
    margin-left: 960px !important;
  }
}
@media print, (min-width: 992px) {
  .pa0-md {
    padding: 0 !important;
  }
  .pa2-md {
    padding: 2px !important;
  }
  .pa5-md {
    padding: 5px !important;
  }
  .pa7-md {
    padding: 7px !important;
  }
  .pa10-md {
    padding: 10px !important;
  }
  .pa15-md {
    padding: 15px !important;
  }
  .pa20-md {
    padding: 20px !important;
  }
  .pa25-md {
    padding: 25px !important;
  }
  .pa30-md {
    padding: 30px !important;
  }
  .pa40-md {
    padding: 40px !important;
  }
  .pa45-md {
    padding: 45px !important;
  }
  .pa50-md {
    padding: 50px !important;
  }
  .pa60-md {
    padding: 60px !important;
  }
  .pa80-md {
    padding: 80px !important;
  }
  .pa90-md {
    padding: 90px !important;
  }
  .pt0-md {
    padding-top: 0 !important;
  }
  .pt2-md {
    padding-top: 2px !important;
  }
  .pt5-md {
    padding-top: 5px !important;
  }
  .pt7-md {
    padding-top: 7px !important;
  }
  .pt10-md {
    padding-top: 10px !important;
  }
  .pt15-md {
    padding-top: 15px !important;
  }
  .pt20-md {
    padding-top: 20px !important;
  }
  .pt25-md {
    padding-top: 25px !important;
  }
  .pt30-md {
    padding-top: 30px !important;
  }
  .pt40-md {
    padding-top: 40px !important;
  }
  .pt45-md {
    padding-top: 45px !important;
  }
  .pt50-md {
    padding-top: 50px !important;
  }
  .pt60-md {
    padding-top: 60px !important;
  }
  .pt80-md {
    padding-top: 80px !important;
  }
  .pt90-md {
    padding-top: 90px !important;
  }
  .pr0-md {
    padding-right: 0 !important;
  }
  .pr2-md {
    padding-right: 2px !important;
  }
  .pr5-md {
    padding-right: 5px !important;
  }
  .pr7-md {
    padding-right: 7px !important;
  }
  .pr10-md {
    padding-right: 10px !important;
  }
  .pr15-md {
    padding-right: 15px !important;
  }
  .pr20-md {
    padding-right: 20px !important;
  }
  .pr25-md {
    padding-right: 25px !important;
  }
  .pr30-md {
    padding-right: 30px !important;
  }
  .pr40-md {
    padding-right: 40px !important;
  }
  .pr45-md {
    padding-right: 45px !important;
  }
  .pr50-md {
    padding-right: 50px !important;
  }
  .pr60-md {
    padding-right: 60px !important;
  }
  .pr80-md {
    padding-right: 80px !important;
  }
  .pr90-md {
    padding-right: 90px !important;
  }
  .pb0-md {
    padding-bottom: 0 !important;
  }
  .pb2-md {
    padding-bottom: 2px !important;
  }
  .pb5-md {
    padding-bottom: 5px !important;
  }
  .pb7-md {
    padding-bottom: 7px !important;
  }
  .pb10-md {
    padding-bottom: 10px !important;
  }
  .pb15-md {
    padding-bottom: 15px !important;
  }
  .pb20-md {
    padding-bottom: 20px !important;
  }
  .pb25-md {
    padding-bottom: 25px !important;
  }
  .pb30-md {
    padding-bottom: 30px !important;
  }
  .pb40-md {
    padding-bottom: 40px !important;
  }
  .pb45-md {
    padding-bottom: 45px !important;
  }
  .pb50-md {
    padding-bottom: 50px !important;
  }
  .pb60-md {
    padding-bottom: 60px !important;
  }
  .pb80-md {
    padding-bottom: 80px !important;
  }
  .pb90-md {
    padding-bottom: 90px !important;
  }
  .pl0-md {
    padding-left: 0 !important;
  }
  .pl2-md {
    padding-left: 2px !important;
  }
  .pl5-md {
    padding-left: 5px !important;
  }
  .pl7-md {
    padding-left: 7px !important;
  }
  .pl10-md {
    padding-left: 10px !important;
  }
  .pl15-md {
    padding-left: 15px !important;
  }
  .pl20-md {
    padding-left: 20px !important;
  }
  .pl25-md {
    padding-left: 25px !important;
  }
  .pl30-md {
    padding-left: 30px !important;
  }
  .pl40-md {
    padding-left: 40px !important;
  }
  .pl45-md {
    padding-left: 45px !important;
  }
  .pl50-md {
    padding-left: 50px !important;
  }
  .pl60-md {
    padding-left: 60px !important;
  }
  .pl80-md {
    padding-left: 80px !important;
  }
  .pl90-md {
    padding-left: 90px !important;
  }
  .mt0-md {
    margin-top: 0px !important;
  }
  .mt2-md {
    margin-top: 2px !important;
  }
  .mt5-md {
    margin-top: 5px !important;
  }
  .mt7-md {
    margin-top: 7px !important;
  }
  .mt10-md {
    margin-top: 10px !important;
  }
  .mt15-md {
    margin-top: 15px !important;
  }
  .mt20-md {
    margin-top: 20px !important;
  }
  .mt25-md {
    margin-top: 25px !important;
  }
  .mt30-md {
    margin-top: 30px !important;
  }
  .mt40-md {
    margin-top: 40px !important;
  }
  .mt45-md {
    margin-top: 45px !important;
  }
  .mt50-md {
    margin-top: 50px !important;
  }
  .mt60-md {
    margin-top: 60px !important;
  }
  .mt80-md {
    margin-top: 80px !important;
  }
  .mt90-md {
    margin-top: 90px !important;
  }
  .ma0-md {
    margin: 0px !important;
  }
  .ma2-md {
    margin: 2px !important;
  }
  .ma5-md {
    margin: 5px !important;
  }
  .ma7-md {
    margin: 7px !important;
  }
  .ma10-md {
    margin: 10px !important;
  }
  .ma15-md {
    margin: 15px !important;
  }
  .ma20-md {
    margin: 20px !important;
  }
  .ma25-md {
    margin: 25px !important;
  }
  .ma30-md {
    margin: 30px !important;
  }
  .ma40-md {
    margin: 40px !important;
  }
  .ma45-md {
    margin: 45px !important;
  }
  .ma50-md {
    margin: 50px !important;
  }
  .ma60-md {
    margin: 60px !important;
  }
  .ma80-md {
    margin: 80px !important;
  }
  .ma90-md {
    margin: 90px !important;
  }
  .mt0-md {
    margin-top: 0px !important;
  }
  .mt2-md {
    margin-top: 2px !important;
  }
  .mt5-md {
    margin-top: 5px !important;
  }
  .mt7-md {
    margin-top: 7px !important;
  }
  .mt10-md {
    margin-top: 10px !important;
  }
  .mt15-md {
    margin-top: 15px !important;
  }
  .mt20-md {
    margin-top: 20px !important;
  }
  .mt25-md {
    margin-top: 25px !important;
  }
  .mt30-md {
    margin-top: 30px !important;
  }
  .mt40-md {
    margin-top: 40px !important;
  }
  .mt45-md {
    margin-top: 45px !important;
  }
  .mt50-md {
    margin-top: 50px !important;
  }
  .mt60-md {
    margin-top: 60px !important;
  }
  .mt80-md {
    margin-top: 80px !important;
  }
  .mt90-md {
    margin-top: 90px !important;
  }
  .mr0-md {
    margin-right: 0px !important;
  }
  .mr2-md {
    margin-right: 2px !important;
  }
  .mr5-md {
    margin-right: 5px !important;
  }
  .mr7-md {
    margin-right: 7px !important;
  }
  .mr10-md {
    margin-right: 10px !important;
  }
  .mr15-md {
    margin-right: 15px !important;
  }
  .mr20-md {
    margin-right: 20px !important;
  }
  .mr25-md {
    margin-right: 25px !important;
  }
  .mr30-md {
    margin-right: 30px !important;
  }
  .mr40-md {
    margin-right: 40px !important;
  }
  .mr45-md {
    margin-right: 45px !important;
  }
  .mr50-md {
    margin-right: 50px !important;
  }
  .mr60-md {
    margin-right: 60px !important;
  }
  .mr80-md {
    margin-right: 80px !important;
  }
  .mr90-md {
    margin-right: 90px !important;
  }
  .mb0-md {
    margin-bottom: 0px !important;
  }
  .mb2-md {
    margin-bottom: 2px !important;
  }
  .mb5-md {
    margin-bottom: 5px !important;
  }
  .mb7-md {
    margin-bottom: 7px !important;
  }
  .mb10-md {
    margin-bottom: 10px !important;
  }
  .mb15-md {
    margin-bottom: 15px !important;
  }
  .mb20-md {
    margin-bottom: 20px !important;
  }
  .mb25-md {
    margin-bottom: 25px !important;
  }
  .mb30-md {
    margin-bottom: 30px !important;
  }
  .mb40-md {
    margin-bottom: 40px !important;
  }
  .mb45-md {
    margin-bottom: 45px !important;
  }
  .mb50-md {
    margin-bottom: 50px !important;
  }
  .mb60-md {
    margin-bottom: 60px !important;
  }
  .mb80-md {
    margin-bottom: 80px !important;
  }
  .mb90-md {
    margin-bottom: 90px !important;
  }
  .ml0-md {
    margin-left: 0px !important;
  }
  .ml2-md {
    margin-left: 2px !important;
  }
  .ml5-md {
    margin-left: 5px !important;
  }
  .ml7-md {
    margin-left: 7px !important;
  }
  .ml10-md {
    margin-left: 10px !important;
  }
  .ml15-md {
    margin-left: 15px !important;
  }
  .ml20-md {
    margin-left: 20px !important;
  }
  .ml25-md {
    margin-left: 25px !important;
  }
  .ml30-md {
    margin-left: 30px !important;
  }
  .ml40-md {
    margin-left: 40px !important;
  }
  .ml45-md {
    margin-left: 45px !important;
  }
  .ml50-md {
    margin-left: 50px !important;
  }
  .ml60-md {
    margin-left: 60px !important;
  }
  .ml80-md {
    margin-left: 80px !important;
  }
  .ml90-md {
    margin-left: 90px !important;
  }
}
@media print, (min-width: 1200px) {
  .pa0-lg {
    padding: 0 !important;
  }
  .pa2-lg {
    padding: 2px !important;
  }
  .pa5-lg {
    padding: 5px !important;
  }
  .pa7-lg {
    padding: 7px !important;
  }
  .pa10-lg {
    padding: 10px !important;
  }
  .pa15-lg {
    padding: 15px !important;
  }
  .pa20-lg {
    padding: 20px !important;
  }
  .pa25-lg {
    padding: 25px !important;
  }
  .pa30-lg {
    padding: 30px !important;
  }
  .pa40-lg {
    padding: 40px !important;
  }
  .pa45-lg {
    padding: 45px !important;
  }
  .pa50-lg {
    padding: 50px !important;
  }
  .pa60-lg {
    padding: 60px !important;
  }
  .pa80-lg {
    padding: 80px !important;
  }
  .pa90-lg {
    padding: 90px !important;
  }
  .pt0-lg {
    padding-top: 0 !important;
  }
  .pt2-lg {
    padding-top: 2px !important;
  }
  .pt5-lg {
    padding-top: 5px !important;
  }
  .pt7-lg {
    padding-top: 7px !important;
  }
  .pt10-lg {
    padding-top: 10px !important;
  }
  .pt15-lg {
    padding-top: 15px !important;
  }
  .pt20-lg {
    padding-top: 20px !important;
  }
  .pt25-lg {
    padding-top: 25px !important;
  }
  .pt30-lg {
    padding-top: 30px !important;
  }
  .pt40-lg {
    padding-top: 40px !important;
  }
  .pt45-lg {
    padding-top: 45px !important;
  }
  .pt50-lg {
    padding-top: 50px !important;
  }
  .pt60-lg {
    padding-top: 60px !important;
  }
  .pt80-lg {
    padding-top: 80px !important;
  }
  .pt90-lg {
    padding-top: 90px !important;
  }
  .pr0-lg {
    padding-right: 0 !important;
  }
  .pr2-lg {
    padding-right: 2px !important;
  }
  .pr5-lg {
    padding-right: 5px !important;
  }
  .pr7-lg {
    padding-right: 7px !important;
  }
  .pr10-lg {
    padding-right: 10px !important;
  }
  .pr15-lg {
    padding-right: 15px !important;
  }
  .pr20-lg {
    padding-right: 20px !important;
  }
  .pr25-lg {
    padding-right: 25px !important;
  }
  .pr30-lg {
    padding-right: 30px !important;
  }
  .pr40-lg {
    padding-right: 40px !important;
  }
  .pr45-lg {
    padding-right: 45px !important;
  }
  .pr50-lg {
    padding-right: 50px !important;
  }
  .pr60-lg {
    padding-right: 60px !important;
  }
  .pr80-lg {
    padding-right: 80px !important;
  }
  .pr90-lg {
    padding-right: 90px !important;
  }
  .pb0-lg {
    padding-bottom: 0 !important;
  }
  .pb2-lg {
    padding-bottom: 2px !important;
  }
  .pb5-lg {
    padding-bottom: 5px !important;
  }
  .pb7-lg {
    padding-bottom: 7px !important;
  }
  .pb10-lg {
    padding-bottom: 10px !important;
  }
  .pb15-lg {
    padding-bottom: 15px !important;
  }
  .pb20-lg {
    padding-bottom: 20px !important;
  }
  .pb25-lg {
    padding-bottom: 25px !important;
  }
  .pb30-lg {
    padding-bottom: 30px !important;
  }
  .pb40-lg {
    padding-bottom: 40px !important;
  }
  .pb45-lg {
    padding-bottom: 45px !important;
  }
  .pb50-lg {
    padding-bottom: 50px !important;
  }
  .pb60-lg {
    padding-bottom: 60px !important;
  }
  .pb80-lg {
    padding-bottom: 80px !important;
  }
  .pb90-lg {
    padding-bottom: 90px !important;
  }
  .pl0-lg {
    padding-left: 0 !important;
  }
  .pl2-lg {
    padding-left: 2px !important;
  }
  .pl5-lg {
    padding-left: 5px !important;
  }
  .pl7-lg {
    padding-left: 7px !important;
  }
  .pl10-lg {
    padding-left: 10px !important;
  }
  .pl15-lg {
    padding-left: 15px !important;
  }
  .pl20-lg {
    padding-left: 20px !important;
  }
  .pl25-lg {
    padding-left: 25px !important;
  }
  .pl30-lg {
    padding-left: 30px !important;
  }
  .pl40-lg {
    padding-left: 40px !important;
  }
  .pl45-lg {
    padding-left: 45px !important;
  }
  .pl50-lg {
    padding-left: 50px !important;
  }
  .pl60-lg {
    padding-left: 60px !important;
  }
  .pl80-lg {
    padding-left: 80px !important;
  }
  .pl90-lg {
    padding-left: 90px !important;
  }
  .ma0-lg {
    margin: 0px !important;
  }
  .ma2-lg {
    margin: 2px !important;
  }
  .ma5-lg {
    margin: 5px !important;
  }
  .ma7-lg {
    margin: 7px !important;
  }
  .ma10-lg {
    margin: 10px !important;
  }
  .ma15-lg {
    margin: 15px !important;
  }
  .ma20-lg {
    margin: 20px !important;
  }
  .ma25-lg {
    margin: 25px !important;
  }
  .ma30-lg {
    margin: 30px !important;
  }
  .ma40-lg {
    margin: 40px !important;
  }
  .ma45-lg {
    margin: 45px !important;
  }
  .ma50-lg {
    margin: 50px !important;
  }
  .ma60-lg {
    margin: 60px !important;
  }
  .ma80-lg {
    margin: 80px !important;
  }
  .ma90-lg {
    margin: 90px !important;
  }
  .mt0-lg {
    margin-top: 0px !important;
  }
  .mt2-lg {
    margin-top: 2px !important;
  }
  .mt5-lg {
    margin-top: 5px !important;
  }
  .mt7-lg {
    margin-top: 7px !important;
  }
  .mt10-lg {
    margin-top: 10px !important;
  }
  .mt15-lg {
    margin-top: 15px !important;
  }
  .mt20-lg {
    margin-top: 20px !important;
  }
  .mt25-lg {
    margin-top: 25px !important;
  }
  .mt30-lg {
    margin-top: 30px !important;
  }
  .mt40-lg {
    margin-top: 40px !important;
  }
  .mt45-lg {
    margin-top: 45px !important;
  }
  .mt50-lg {
    margin-top: 50px !important;
  }
  .mt60-lg {
    margin-top: 60px !important;
  }
  .mt80-lg {
    margin-top: 80px !important;
  }
  .mt90-lg {
    margin-top: 90px !important;
  }
  .mr0-lg {
    margin-right: 0px !important;
  }
  .mr2-lg {
    margin-right: 2px !important;
  }
  .mr5-lg {
    margin-right: 5px !important;
  }
  .mr7-lg {
    margin-right: 7px !important;
  }
  .mr10-lg {
    margin-right: 10px !important;
  }
  .mr15-lg {
    margin-right: 15px !important;
  }
  .mr20-lg {
    margin-right: 20px !important;
  }
  .mr25-lg {
    margin-right: 25px !important;
  }
  .mr30-lg {
    margin-right: 30px !important;
  }
  .mr40-lg {
    margin-right: 40px !important;
  }
  .mr45-lg {
    margin-right: 45px !important;
  }
  .mr50-lg {
    margin-right: 50px !important;
  }
  .mr60-lg {
    margin-right: 60px !important;
  }
  .mr80-lg {
    margin-right: 80px !important;
  }
  .mr90-lg {
    margin-right: 90px !important;
  }
  .mb0-lg {
    margin-bottom: 0px !important;
  }
  .mb2-lg {
    margin-bottom: 2px !important;
  }
  .mb5-lg {
    margin-bottom: 5px !important;
  }
  .mb7-lg {
    margin-bottom: 7px !important;
  }
  .mb10-lg {
    margin-bottom: 10px !important;
  }
  .mb15-lg {
    margin-bottom: 15px !important;
  }
  .mb20-lg {
    margin-bottom: 20px !important;
  }
  .mb25-lg {
    margin-bottom: 25px !important;
  }
  .mb30-lg {
    margin-bottom: 30px !important;
  }
  .mb40-lg {
    margin-bottom: 40px !important;
  }
  .mb45-lg {
    margin-bottom: 45px !important;
  }
  .mb50-lg {
    margin-bottom: 50px !important;
  }
  .mb60-lg {
    margin-bottom: 60px !important;
  }
  .mb80-lg {
    margin-bottom: 80px !important;
  }
  .mb90-lg {
    margin-bottom: 90px !important;
  }
  .ml0-lg {
    margin-left: 0px !important;
  }
  .ml2-lg {
    margin-left: 2px !important;
  }
  .ml5-lg {
    margin-left: 5px !important;
  }
  .ml7-lg {
    margin-left: 7px !important;
  }
  .ml10-lg {
    margin-left: 10px !important;
  }
  .ml15-lg {
    margin-left: 15px !important;
  }
  .ml20-lg {
    margin-left: 20px !important;
  }
  .ml25-lg {
    margin-left: 25px !important;
  }
  .ml30-lg {
    margin-left: 30px !important;
  }
  .ml40-lg {
    margin-left: 40px !important;
  }
  .ml45-lg {
    margin-left: 45px !important;
  }
  .ml50-lg {
    margin-left: 50px !important;
  }
  .ml60-lg {
    margin-left: 60px !important;
  }
  .ml80-lg {
    margin-left: 80px !important;
  }
  .ml90-lg {
    margin-left: 90px !important;
  }
}
@media print, (min-width: 1400px) {
  .pa0-xl {
    padding: 0 !important;
  }
  .pa2-xl {
    padding: 2px !important;
  }
  .pa5-xl {
    padding: 5px !important;
  }
  .pa7-xl {
    padding: 7px !important;
  }
  .pa10-xl {
    padding: 10px !important;
  }
  .pa15-xl {
    padding: 15px !important;
  }
  .pa20-xl {
    padding: 20px !important;
  }
  .pa25-xl {
    padding: 25px !important;
  }
  .pa30-xl {
    padding: 30px !important;
  }
  .pa40-xl {
    padding: 40px !important;
  }
  .pa45-xl {
    padding: 45px !important;
  }
  .pa50-xl {
    padding: 50px !important;
  }
  .pa60-xl {
    padding: 60px !important;
  }
  .pa80-xl {
    padding: 80px !important;
  }
  .pa90-xl {
    padding: 90px !important;
  }
  .pt0-xl {
    padding-top: 0 !important;
  }
  .pt2-xl {
    padding-top: 2px !important;
  }
  .pt5-xl {
    padding-top: 5px !important;
  }
  .pt7-xl {
    padding-top: 7px !important;
  }
  .pt10-xl {
    padding-top: 10px !important;
  }
  .pt15-xl {
    padding-top: 15px !important;
  }
  .pt20-xl {
    padding-top: 20px !important;
  }
  .pt25-xl {
    padding-top: 25px !important;
  }
  .pt30-xl {
    padding-top: 30px !important;
  }
  .pt40-xl {
    padding-top: 40px !important;
  }
  .pt45-xl {
    padding-top: 45px !important;
  }
  .pt50-xl {
    padding-top: 50px !important;
  }
  .pt60-xl {
    padding-top: 60px !important;
  }
  .pt80-xl {
    padding-top: 80px !important;
  }
  .pt90-xl {
    padding-top: 90px !important;
  }
  .pr0-xl {
    padding-right: 0 !important;
  }
  .pr2-xl {
    padding-right: 2px !important;
  }
  .pr5-xl {
    padding-right: 5px !important;
  }
  .pr7-xl {
    padding-right: 7px !important;
  }
  .pr10-xl {
    padding-right: 10px !important;
  }
  .pr15-xl {
    padding-right: 15px !important;
  }
  .pr20-xl {
    padding-right: 20px !important;
  }
  .pr25-xl {
    padding-right: 25px !important;
  }
  .pr30-xl {
    padding-right: 30px !important;
  }
  .pr40-xl {
    padding-right: 40px !important;
  }
  .pr45-xl {
    padding-right: 45px !important;
  }
  .pr50-xl {
    padding-right: 50px !important;
  }
  .pr60-xl {
    padding-right: 60px !important;
  }
  .pr80-xl {
    padding-right: 80px !important;
  }
  .pr90-xl {
    padding-right: 90px !important;
  }
  .pb0-xl {
    padding-bottom: 0 !important;
  }
  .pb2-xl {
    padding-bottom: 2px !important;
  }
  .pb5-xl {
    padding-bottom: 5px !important;
  }
  .pb7-xl {
    padding-bottom: 7px !important;
  }
  .pb10-xl {
    padding-bottom: 10px !important;
  }
  .pb15-xl {
    padding-bottom: 15px !important;
  }
  .pb20-xl {
    padding-bottom: 20px !important;
  }
  .pb25-xl {
    padding-bottom: 25px !important;
  }
  .pb30-xl {
    padding-bottom: 30px !important;
  }
  .pb40-xl {
    padding-bottom: 40px !important;
  }
  .pb45-xl {
    padding-bottom: 45px !important;
  }
  .pb50-xl {
    padding-bottom: 50px !important;
  }
  .pb60-xl {
    padding-bottom: 60px !important;
  }
  .pb80-xl {
    padding-bottom: 80px !important;
  }
  .pb90-xl {
    padding-bottom: 90px !important;
  }
  .pl0-xl {
    padding-left: 0 !important;
  }
  .pl2-xl {
    padding-left: 2px !important;
  }
  .pl5-xl {
    padding-left: 5px !important;
  }
  .pl7-xl {
    padding-left: 7px !important;
  }
  .pl10-xl {
    padding-left: 10px !important;
  }
  .pl15-xl {
    padding-left: 15px !important;
  }
  .pl20-xl {
    padding-left: 20px !important;
  }
  .pl25-xl {
    padding-left: 25px !important;
  }
  .pl30-xl {
    padding-left: 30px !important;
  }
  .pl40-xl {
    padding-left: 40px !important;
  }
  .pl45-xl {
    padding-left: 45px !important;
  }
  .pl50-xl {
    padding-left: 50px !important;
  }
  .pl60-xl {
    padding-left: 60px !important;
  }
  .pl80-xl {
    padding-left: 80px !important;
  }
  .pl90-xl {
    padding-left: 90px !important;
  }
  .ma0-xl {
    margin: 0px !important;
  }
  .ma2-xl {
    margin: 2px !important;
  }
  .ma5-xl {
    margin: 5px !important;
  }
  .ma7-xl {
    margin: 7px !important;
  }
  .ma10-xl {
    margin: 10px !important;
  }
  .ma15-xl {
    margin: 15px !important;
  }
  .ma20-xl {
    margin: 20px !important;
  }
  .ma25-xl {
    margin: 25px !important;
  }
  .ma30-xl {
    margin: 30px !important;
  }
  .ma40-xl {
    margin: 40px !important;
  }
  .ma45-xl {
    margin: 45px !important;
  }
  .ma50-xl {
    margin: 50px !important;
  }
  .ma60-xl {
    margin: 60px !important;
  }
  .ma80-xl {
    margin: 80px !important;
  }
  .ma90-xl {
    margin: 90px !important;
  }
  .mt0-xl {
    margin-top: 0px !important;
  }
  .mt2-xl {
    margin-top: 2px !important;
  }
  .mt5-xl {
    margin-top: 5px !important;
  }
  .mt7-xl {
    margin-top: 7px !important;
  }
  .mt10-xl {
    margin-top: 10px !important;
  }
  .mt15-xl {
    margin-top: 15px !important;
  }
  .mt20-xl {
    margin-top: 20px !important;
  }
  .mt25-xl {
    margin-top: 25px !important;
  }
  .mt30-xl {
    margin-top: 30px !important;
  }
  .mt40-xl {
    margin-top: 40px !important;
  }
  .mt45-xl {
    margin-top: 45px !important;
  }
  .mt50-xl {
    margin-top: 50px !important;
  }
  .mt60-xl {
    margin-top: 60px !important;
  }
  .mt80-xl {
    margin-top: 80px !important;
  }
  .mt90-xl {
    margin-top: 90px !important;
  }
  .mr0-xl {
    margin-right: 0px !important;
  }
  .mr2-xl {
    margin-right: 2px !important;
  }
  .mr5-xl {
    margin-right: 5px !important;
  }
  .mr7-xl {
    margin-right: 7px !important;
  }
  .mr10-xl {
    margin-right: 10px !important;
  }
  .mr15-xl {
    margin-right: 15px !important;
  }
  .mr20-xl {
    margin-right: 20px !important;
  }
  .mr25-xl {
    margin-right: 25px !important;
  }
  .mr30-xl {
    margin-right: 30px !important;
  }
  .mr40-xl {
    margin-right: 40px !important;
  }
  .mr45-xl {
    margin-right: 45px !important;
  }
  .mr50-xl {
    margin-right: 50px !important;
  }
  .mr60-xl {
    margin-right: 60px !important;
  }
  .mr80-xl {
    margin-right: 80px !important;
  }
  .mr90-xl {
    margin-right: 90px !important;
  }
  .mb0-xl {
    margin-bottom: 0px !important;
  }
  .mb2-xl {
    margin-bottom: 2px !important;
  }
  .mb5-xl {
    margin-bottom: 5px !important;
  }
  .mb7-xl {
    margin-bottom: 7px !important;
  }
  .mb10-xl {
    margin-bottom: 10px !important;
  }
  .mb15-xl {
    margin-bottom: 15px !important;
  }
  .mb20-xl {
    margin-bottom: 20px !important;
  }
  .mb25-xl {
    margin-bottom: 25px !important;
  }
  .mb30-xl {
    margin-bottom: 30px !important;
  }
  .mb40-xl {
    margin-bottom: 40px !important;
  }
  .mb45-xl {
    margin-bottom: 45px !important;
  }
  .mb50-xl {
    margin-bottom: 50px !important;
  }
  .mb60-xl {
    margin-bottom: 60px !important;
  }
  .mb80-xl {
    margin-bottom: 80px !important;
  }
  .mb90-xl {
    margin-bottom: 90px !important;
  }
  .ml0-xl {
    margin-left: 0px !important;
  }
  .ml2-xl {
    margin-left: 2px !important;
  }
  .ml5-xl {
    margin-left: 5px !important;
  }
  .ml7-xl {
    margin-left: 7px !important;
  }
  .ml10-xl {
    margin-left: 10px !important;
  }
  .ml15-xl {
    margin-left: 15px !important;
  }
  .ml20-xl {
    margin-left: 20px !important;
  }
  .ml25-xl {
    margin-left: 25px !important;
  }
  .ml30-xl {
    margin-left: 30px !important;
  }
  .ml40-xl {
    margin-left: 40px !important;
  }
  .ml45-xl {
    margin-left: 45px !important;
  }
  .ml50-xl {
    margin-left: 50px !important;
  }
  .ml60-xl {
    margin-left: 60px !important;
  }
  .ml80-xl {
    margin-left: 80px !important;
  }
  .ml90-xl {
    margin-left: 90px !important;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-in-out-halfway {
  0% {
    opacity: 0.5;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes scale-up {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes fade-in-scale-up {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fade-out-scale-up {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}
@keyframes fade-in-rotate-up {
  0% {
    opacity: 0;
    transform: rotate3d(20, 0, 0, -90deg) translate3d(0, 130px, -80px);
  }
  100% {
    opacity: 1;
    transform: rotate3d(0, 0, 0, 0) translate3d(0, 0, 0);
  }
}
@keyframes fade-in-right {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes sidebar-tooltip-fade-right {
  0% {
    opacity: 0;
    transform: translateX(-5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes top-nav-tooltip-fade-up {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(5px);
  }
  60% {
    opacity: 0;
    transform: translateX(-50%) translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0px);
  }
}
@keyframes helpblock-fade-in {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0px);
  }
}
@keyframes pop-on-input {
  0% {
    transform: scale(1);
  }
  33% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes show-agreement-signup {
  0% {
    transform: translateY(120%);
  }
  75% {
    transform: translateY(120%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes form-tip-fade-in {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes form-tip-fade-out {
  0% {
    opacity: 1;
    transform: translateX(0px);
  }
  100% {
    opacity: 0;
    transform: translateX(-20px);
  }
}
@keyframes modal-close-icon {
  0% {
    opacity: 0;
    transform: translate3d(-20px, 0, 0);
  }
  66% {
    opacity: 0;
    transform: translate3d(-20px, 0, 0);
  }
  100% {
    opacity: 0.5;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes dropdown-open {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  66% {
    opacity: 0.75;
    transform: translate3d(0, -2px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fade-out-dashboard-item {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes loading-btn {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.6);
  }
  40% {
    transform: scale(1);
  }
}
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
@keyframes container-rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes fill-unfill-rotate {
  12.5% {
    transform: rotate(135deg);
  } /* 0.5 * ARCSIZE */
  25% {
    transform: rotate(270deg);
  } /* 1   * ARCSIZE */
  37.5% {
    transform: rotate(405deg);
  } /* 1.5 * ARCSIZE */
  50% {
    transform: rotate(540deg);
  } /* 2   * ARCSIZE */
  62.5% {
    transform: rotate(675deg);
  } /* 2.5 * ARCSIZE */
  75% {
    transform: rotate(810deg);
  } /* 3   * ARCSIZE */
  87.5% {
    transform: rotate(945deg);
  } /* 3.5 * ARCSIZE */
  to {
    transform: rotate(1080deg);
  } /* 4   * ARCSIZE */
}
@keyframes blue-fade-in-out {
  from {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  26% {
    opacity: 0;
  }
  89% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes red-fade-in-out {
  from {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
}
@keyframes yellow-fade-in-out {
  from {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  76% {
    opacity: 0;
  }
}
@keyframes green-fade-in-out {
  from {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes darker-fade-in-out {
  from {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes left-spin {
  from {
    transform: rotate(130deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(130deg);
  }
}
@keyframes right-spin {
  from {
    transform: rotate(-130deg);
  }
  50% {
    transform: rotate(5deg);
  }
  to {
    transform: rotate(-130deg);
  }
}
@keyframes timer-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes slideOutDraftJsToolbar {
  0% {
    transform: translate(-50%, 100%);
  }
  100% {
    transform: translate(-50%, 0);
  }
}
@keyframes plant-offset {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes slide-left-fade-in {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes global-search-fade-in {
  from {
    display: block;
  }
  to {
    opacity: 1;
    backdrop-filter: blur(3px);
  }
}
@keyframes pop-on-task-completion {
  0% {
    transform: scale(1);
  }
  33% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes task-fade-out-scale-up1 {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}
@keyframes task-fade-out-scale-up2 {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(2.7);
  }
}
@keyframes task-spark-effect1 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-20px, -1px);
  }
}
@keyframes task-spark-effect2 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-1px, -20px);
  }
}
@keyframes task-spark-effect3 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(15px, -1px);
  }
}
@keyframes task-spark-effect4 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-1px, 15px);
  }
}
@keyframes sidebar-fade-in {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes gantt-popover-fade-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes loading-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}
@keyframes loading-shine {
  0% {
    background-position: right;
  }
}
/*
  AI ASSISTANT DIRECTIVE:
  This file is for EMAIL CLIENT COMPATIBILITY.
  DO NOT replace hex colors with CSS variables.
  DO NOT introduce :root, var(), or modern CSS features.
*/
.mailer-styles h1,
.mailer-styles h2,
.mailer-styles h3,
.mailer-styles h4 {
  margin-top: 0;
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.4;
}
.mailer-styles h1,
.mailer-styles h1 span {
  font-weight: 500;
  font-size: 24px;
}
.mailer-styles h2,
.mailer-styles h2 span {
  font-weight: 500;
  font-size: 22px;
}
.mailer-styles h3,
.mailer-styles h3 span {
  font-weight: 500;
  font-size: 18px;
}
.mailer-styles h4,
.mailer-styles h4 span {
  font-weight: 500;
  font-size: 16px;
}
.mailer-styles p {
  margin-bottom: 15px;
}
.mailer-styles p:last-child {
  margin-bottom: 0;
}
.mailer-styles td {
  font-family: "Helvetica Neue", "Helvetica", arial, sans-serif;
}
.mailer-styles .pre-wrap {
  white-space: pre-wrap;
}

.page {
  min-height: 400px;
}

.page-header {
  position: relative;
  margin: 0;
  padding: 15px 0;
  color: var(--text-muted);
  background-color: var(--bg-content);
  border-bottom: 1px solid var(--border-content);
}
.page-header .page-header-nav {
  display: none;
}
.page-header.with-nav {
  padding: 0;
}
.page-header.with-nav .page-header-nav {
  display: flex;
}
@media print {
  .page-header {
    display: none;
  }
}
.page-header h1,
.page-header h2,
.page-header h3 {
  margin-bottom: 0;
}

.page-subheader {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.page-title {
  text-align: left;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .page-title {
    font-size: 24px;
  }
}
@media (min-width: 1400px) {
  .page-title {
    font-size: 26px;
  }
}

.page-section-empty-copy {
  display: block;
  padding: 60px 40px;
  text-align: center;
  font-size: 16px;
  color: var(--text-lighter);
  border: 1px solid var(--border-content);
  border-radius: 10px;
}

.page-padding-bottom {
  padding-bottom: 120px;
}

.page-header-nav {
  display: flex;
  position: relative;
  gap: 30px;
  bottom: -1px;
}
@media (max-width: 1200px) {
  .page-header-nav {
    max-width: 100%;
    padding-right: 60px;
    max-width: calc(100% - 40px);
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

.page-header-nav-item {
  display: inline-flex;
  vertical-align: top;
  align-items: center;
  height: 46px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
}
.page-header-nav-item, .page-header-nav-item:focus, .page-header-nav-item:visited {
  color: var(--text-muted);
  text-decoration: none;
}
.page-header-nav-item:hover, .page-header-nav-item:active {
  color: var(--text-default);
  text-decoration: none;
}
.page-header-nav-item.active {
  color: var(--text-default);
  border-bottom: 2px solid var(--color-primary);
}
.page-header-nav-item:focus-visible {
  text-decoration: underline;
  outline: none;
}

.page-vertical-divider {
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  min-height: 100vh;
  border: none;
  border-right: 1px solid var(--border-content);
}
.page-vertical-divider.no-min-height {
  min-height: 0;
}

.page-section-title-container {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
}
.page-section-title-container.page-title-flex-column-xs {
  flex-direction: column;
  align-items: flex-start;
}
.page-section-title-container.page-title-flex-column-xs .page-section-title {
  margin-bottom: 15px;
}
@media (min-width: 768px) {
  .page-section-title-container.page-title-flex-column-xs {
    flex-direction: row;
    align-items: center;
  }
  .page-section-title-container.page-title-flex-column-xs .page-section-title {
    margin-bottom: 0;
  }
}

.page-section-title {
  display: inline-block;
  flex: 0 1 auto;
  min-height: 36px;
  padding-top: 4px;
  color: var(--text-default);
  font-size: 18px;
  font-weight: 500;
  cursor: default;
}

.page-section-title-actions {
  display: flex;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
}
@media (min-width: 768px) {
  .page-section-title-actions {
    justify-content: flex-end;
  }
}

.page-content-with-properties {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}
@media (min-width: 768px) {
  .page-content-with-properties {
    flex-direction: row;
    gap: 0;
    align-items: stretch;
    justify-content: stretch;
  }
}

.page-properties-sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  padding-bottom: 60px;
  border-top: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .page-properties-sidebar {
    width: 420px;
    border-left: 1px solid var(--border-content);
    border-top: none;
  }
}

.page-properties-section {
  padding: 40px 20px;
  border-top: 1px solid var(--border-content);
}
.page-properties-section:first-child {
  border-top: none;
}
@media (min-width: 768px) {
  .page-properties-section {
    padding: 40px 30px;
  }
}

.page-properties-section-hr {
  margin-top: 30px;
  margin-bottom: 30px;
}

.page-properties-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  user-select: none;
}
.page-properties-section-title--open {
  margin-bottom: 20px;
}

.page-properties-section-item-wrapper {
  cursor: pointer !important;
  margin-left: -8.5px;
  padding: 5px 13.5px 5px 8.5px;
}
.page-properties-section-item-wrapper:hover {
  background-color: var(--bg-grey-fc);
  border-radius: 5px;
}

.page-properties-section-title-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: -8.5px;
  padding: 5px 13.5px 5px 8.5px;
  border-radius: 5px;
}
.page-properties-section-title-toggle:hover {
  cursor: pointer;
  background-color: var(--bg-grey-fc);
}

.page-properties-section-title-toggle-icon {
  position: relative;
  top: 0.5px;
  width: 8px;
  height: auto;
  transition: transform var(--transition-normal) ease;
}
.page-properties-section-title-toggle-icon path {
  fill: var(--text-lighter);
}
.page-properties-section-title-toggle-icon--open {
  transform: rotate(180deg);
}

.page-properties-section-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.page-properties-section-item:last-child {
  margin-bottom: 0;
}
.page-properties-section-item.editable {
  cursor: pointer;
  margin-bottom: 3px;
  margin-left: -8.5px;
  padding: 5px 13.5px 5px 8.5px;
}
.page-properties-section-item.editable:hover {
  background-color: var(--bg-grey-fc);
  border-radius: 5px;
}

.page-properties-section-item-label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: 0;
  width: 120px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted);
  font-weight: 500;
}

.page-properties-section-item-value {
  min-width: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-default);
  word-break: break-word;
}
.page-properties-section-item-value a,
.page-properties-section-item-value a:focus,
.page-properties-section-item-value a:visited {
  color: var(--text-default);
  text-decoration: none;
}
.page-properties-section-item-value a:hover,
.page-properties-section-item-value a:active {
  color: var(--text-default);
  text-decoration: underline;
}

.page-properties-section-item-editable {
  flex: 1;
  min-width: 0;
  margin-left: calc(var(--ghost-input-side-width) * -1);
  margin-top: -5px;
  margin-bottom: -5px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-default);
  word-break: break-word;
}

.page-properties-section-item-editable .content-editable-input:empty::before {
  left: var(--ghost-input-side-width);
}

.page-properties-section-item-editable .ghost-form-control,
.page-properties-section-item-editable .ghost-form-display {
  font-size: 14px;
}

.page-properties-section-item-editable textarea {
  font-size: 14px;
  resize: none;
}

.page-properties-section-item-header {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
  font-size: 14px;
}
.page-properties-section-item-header .page-properties-section-item-header-label {
  font-weight: 500;
}

.page-properties-project-budget {
  margin: 0 -10px;
}
.page-properties-project-budget .project-budget-mini-progressbar {
  width: 100%;
}

@media print {
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-pull-11 {
    right: 91.66666667%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-8 {
    right: 66.66666667%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-5 {
    right: 41.66666667%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-2 {
    right: 16.66666667%;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-push-11 {
    left: 91.66666667%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-8 {
    left: 66.66666667%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-5 {
    left: 41.66666667%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-2 {
    left: 16.66666667%;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-0 {
    margin-left: 0%;
  }
}
* {
  box-sizing: border-box;
}

*:focus,
*:visited {
  outline: 0 !important;
}

body {
  position: relative;
  font-family: var(--font-body);
  color: var(--text-default);
  background: var(--bg-content);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.white-bg {
  background-color: var(--bg-content);
}
body.transparent-bg {
  background-color: transparent;
}
body.transparent-bg #outer-wrapper {
  background-color: transparent;
}

.turbo-progress-bar {
  background-color: var(--color-primary) !important;
  height: 2px !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 20px;
  font-family: var(--font-header);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-default);
}

h1 {
  font-size: 30px;
  font-weight: 600;
}
@media (min-width: 480px) {
  h1 {
    font-size: 34px;
  }
}

h2 {
  margin-bottom: 40px;
  font-size: 26px;
  font-weight: 600;
}
@media (min-width: 480px) {
  h2 {
    font-size: 30px;
  }
}

h3 {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
@media (min-width: 480px) {
  h3 {
    font-size: 22px;
  }
}

h4 {
  margin-bottom: 10px;
}

a {
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-fast) ease, text-decoration var(--transition-fast) ease;
}
a, a:focus, a:visited {
  color: var(--color-info);
}
a:focus {
  text-decoration: underline;
}
a:visited {
  color: var(--color-info);
  text-decoration: none;
}
a:hover, a:active {
  color: color-mix(in srgb, var(--color-info) 96%, var(--black));
  text-decoration: none;
}

a.disabled,
.disabled {
  pointer-events: none;
  opacity: 0.75;
}

p {
  margin-top: 0;
}
p:last-child {
  margin-bottom: 0;
}

b,
strong {
  font-weight: 600;
}

hr {
  margin-top: 0;
  margin-bottom: 0;
  border-color: var(--border-content);
}

[fill=black],
[fill="#000000"],
[fill="#0f0f0f"],
[fill="#0f1010"] {
  fill: var(--text-default);
}

/* |||||||||||||||||||||| Content Editable Input |||||||||||||||||||||| */
.content-editable-input {
  position: relative;
  display: block;
  align-items: center;
  min-height: 34px;
  overflow: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
  user-select: text;
}
.content-editable-input::-webkit-scrollbar:horizontal {
  display: none;
}
.content-editable-input:empty:before {
  content: attr(placeholder);
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--text-lighter) !important;
}
.drawer-side-field-item .content-editable-input:empty:before {
  padding-left: var(--ghost-input-side-width);
}
.content-editable-input.ghost-form-pull-left:empty:before {
  padding-left: var(--ghost-input-side-width);
}
.content-editable-input.content-editable-input-textarea-sm {
  min-height: 30px;
  height: auto;
  word-break: break-word;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.list-grid-item-cell .content-editable-input:focus, .drawer-side-field-item .content-editable-input:focus, .gantt-table-body-cell .content-editable-input:focus, .page-properties-section-item-editable-input .content-editable-input:focus {
  color: var(--text-default);
  background-color: var(--bg-content);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.list-grid-item-cell-custom-field:focus .drawer-side-field-link {
  color: var(--text-default);
  background-color: var(--bg-content);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

/* |||||||||||||||||||||| Helper Classes |||||||||||||||||||||| */
.text-center,
.center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left !important;
}

.text-upcase {
  text-transform: uppercase;
}

.text-downcase {
  text-transform: lowercase;
}

.text-underline {
  text-decoration: underline !important;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.static {
  position: static !important;
}

.sticky {
  position: sticky;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.flex {
  display: flex !important;
}

.inline-flex {
  display: inline-flex !important;
}

.flex-grow {
  flex-grow: 1;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1;
}

.flex-auto {
  flex: auto;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.min-width-0 {
  min-width: 0;
}

.min-width-120 {
  min-width: 120px;
}

.space-around {
  justify-content: space-around !important;
}

.space-between {
  justify-content: space-between !important;
}

.justify-start {
  justify-content: flex-start !important;
}

.justify-end {
  justify-content: flex-end !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-end {
  justify-content: flex-end !important;
}

.align-center {
  align-items: center !important;
}

.align-start {
  align-items: flex-start !important;
}

.align-baseline {
  align-items: baseline !important;
}

.flex-shrink-none {
  flex-shrink: 0 !important;
}

.flex-100 {
  flex-basis: 100% !important;
}

.flex-1 {
  flex: 1 !important;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.gap-5 {
  gap: 5px;
}

.gap-7 {
  gap: 7px;
}

.gap-10 {
  gap: 10px;
}

.gap-20 {
  gap: 20px;
}

.border-none {
  border: none !important;
}

.pointer-none {
  pointer-events: none !important;
}

.pointer-auto {
  pointer-events: auto !important;
}

.user-select-none {
  user-select: none !important;
}

.user-select-text {
  user-select: text !important;
}

.white-space-nowrap {
  white-space: nowrap !important;
}

.w100 {
  width: 100%;
}

.w50 {
  width: 50% !important;
}

.w20 {
  width: 20% !important;
}

.w-auto {
  width: auto !important;
}

.w-fit-content {
  width: fit-content !important;
}

.overflow-ellipsis {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.overflow-hidden {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.overflow-scroll {
  white-space: nowrap;
  overflow: auto;
  overflow-y: hidden;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.overflow-scroll::-webkit-scrollbar {
  display: none;
}

.overflow-x-auto {
  overflow-x: auto !important;
}

.pre-wrap {
  white-space: pre-wrap;
}

.no-wrap {
  white-space: nowrap !important;
}

.break-all {
  word-break: break-all !important;
}

.break-word {
  word-break: break-word !important;
}

.text-primary {
  color: var(--color-primary);
}

.font-inherit {
  font-family: inherit !important;
}

a.text-primary, a.text-primary:focus, a.text-primary:visited {
  color: var(--color-primary);
}
a.text-primary:hover, a.text-primary:active {
  color: color-mix(in srgb, var(--color-primary) 90%, var(--black));
}

.text-danger {
  color: var(--color-danger);
}

a.text-danger, a.text-danger:focus, a.text-danger:visited {
  color: var(--color-danger);
}
a.text-danger:hover, a.text-danger:active {
  color: color-mix(in srgb, var(--color-danger) 90%, var(--black));
}

.text-black {
  color: var(--text-default) !important;
}

.text-grey-c {
  color: var(--border-darker) !important;
}

.text-grey-b {
  color: var(--text-lighter);
}

.text-muted, .task-item-title.text-muted {
  color: var(--text-muted-alt) !important;
}

.text-muted-alt {
  color: var(--text-muted-alt) !important;
}

.text-placeholder,
.text-empty {
  color: var(--text-lighter) !important;
}

.text-success {
  color: var(--color-primary) !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-pre-line {
  white-space: pre-line !important;
}

.text-bold {
  font-weight: 600 !important;
}

.text-medium {
  font-weight: 500 !important;
}

.text-normal {
  font-weight: 400 !important;
}

.text-sm {
  font-size: 12px !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.cursor-default {
  cursor: default !important;
}

.cursor-inherit {
  cursor: inherit !important;
}

.cursor-help {
  cursor: help !important;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

.inline-icon {
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: auto;
}
.inline-icon.inline-icon--open-link {
  width: 12px;
  height: auto;
  margin-left: 7px;
  transform: translateY(-1px);
}
.inline-icon path {
  fill: currentColor;
}

/* |||||||||||||||||||||| Animate Classes |||||||||||||||||||||| */
[data-show] {
  display: none;
}

.animate-show {
  display: inline-block;
  display: initial;
}

.animate-block.animate-show {
  display: block;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

/* |||||||||||||||||||||| Global Classes |||||||||||||||||||||| */
#outer-wrapper {
  position: relative;
  z-index: var(--z-outer-wrapper);
  min-height: var(--minimum-page-height-mobile);
  background: var(--bg-content);
}
#outer-wrapper.ghost {
  background: var(--bg-content);
}
#outer-wrapper.wrapper-document-editor {
  padding-top: var(--navigation-height);
  background: var(--bg-content-alt);
}
#outer-wrapper.wrapper-document-public {
  padding-top: var(--navigation-height);
}
@media (min-width: 768px) {
  #outer-wrapper.wrapper-document-public {
    min-height: 100vh;
  }
}
#outer-wrapper.wrapper-document-signing {
  min-height: calc(100vh - var(--navigation-height));
  background: var(--bg-content);
}
.white-bg #outer-wrapper {
  padding-top: var(--navigation-height);
  background: var(--bg-content);
}
@media (min-width: 768px) {
  #outer-wrapper {
    min-height: 0;
  }
}
@media (min-width: 1200px) {
  #outer-wrapper.with-sidebar {
    padding-left: var(--sidebar-width-collapsed);
    transition: padding-left var(--transition-fast) ease;
  }
  #outer-wrapper.with-sidebar.with-secondary-menu, #outer-wrapper.with-sidebar.with-sidebar-expanded {
    padding-left: var(--sidebar-width);
  }
  #outer-wrapper.page-preload {
    transition: none;
  }
}
@media print {
  #outer-wrapper.with-sidebar {
    padding-left: 0;
  }
}

.page-content {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  min-height: 100vh;
}
.page-content.page-content-with-header {
  padding-top: var(--navigation-height);
}

.wrapper {
  max-width: var(--wrapper-width);
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.wrapper:before {
  content: "";
  display: table;
}
.wrapper:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 768px) {
  .wrapper {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.wrapper-xs {
  max-width: var(--wrapper-xs-width);
  margin: auto;
}
.wrapper-xs:before {
  content: "";
  display: table;
}
.wrapper-xs:after {
  content: "";
  display: table;
  clear: both;
}

.wrapper-sm {
  max-width: var(--wrapper-sm-width);
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.wrapper-sm:before {
  content: "";
  display: table;
}
.wrapper-sm:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 768px) {
  .wrapper-sm {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.wrapper-smd {
  max-width: var(--wrapper-smd-width);
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.wrapper-smd:before {
  content: "";
  display: table;
}
.wrapper-smd:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 768px) {
  .wrapper-smd {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (max-width: 768px) {
  .wrapper-smd.no-padding-xs {
    padding-left: 0;
    padding-right: 0;
  }
}

.wrapper-md {
  max-width: var(--wrapper-md-width);
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.wrapper-md:before {
  content: "";
  display: table;
}
.wrapper-md:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 768px) {
  .wrapper-md {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.wrapper-lg {
  max-width: var(--wrapper-lg-width);
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.wrapper-lg:before {
  content: "";
  display: table;
}
.wrapper-lg:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 768px) {
  .wrapper-lg {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 1080px) {
  .wrapper-lg {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media (max-width: 768px) {
  .wrapper-lg.no-padding-xs {
    padding-left: 0;
    padding-right: 0;
  }
}

.wrapper-xl {
  max-width: var(--wrapper-xl-width);
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 768px) {
  .wrapper-xl {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.wrapper-full-width {
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 768px) {
  .wrapper-full-width {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (max-width: 768px) {
  .wrapper-full-width.no-padding-xs {
    padding-left: 0;
    padding-right: 0;
  }
}

.wrapper-subnav-width {
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 768px) {
  .wrapper-subnav-width {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (min-width: 1200px) {
  .wrapper-subnav-width {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.app-page {
  padding: 60px 20px;
}
@media (min-width: 768px) {
  .app-page {
    padding: 80px 40px;
  }
}

.noauth-page {
  padding: 80px 0;
  background: var(--bg-content);
}
@media (min-width: 768px) {
  .noauth-page {
    min-height: var(--minimum-page-height-desktop);
  }
}

.link-inline, .modal-payment-methods-item-edit-link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.link-external {
  text-decoration: underline;
}

.link-hover-underline {
  text-decoration: none;
}
.link-hover-underline:hover {
  text-decoration: underline;
}

.highlight {
  position: relative;
  background-color: var(--bg-highlight);
  background-color: color-mix(in srgb, var(--bg-highlight) 70%, transparent);
}

.link-inline-loading {
  cursor: progress;
}

.mobile-fixed-btn {
  position: fixed;
  z-index: var(--z-fixed-action-btn);
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 20px;
  background: var(--bg-content);
  border-top: 1px solid var(--border-content);
}
@media print {
  .mobile-fixed-btn {
    display: none;
  }
}
.mobile-fixed-btn.second {
  bottom: 50px;
}
.mobile-fixed-btn.with-2-buttons .btn {
  display: inline-block;
  float: left;
  width: 48%;
}
.mobile-fixed-btn.with-2-buttons .btn:first-child {
  margin-right: 4%;
}
.mobile-fixed-btn.with-2-buttons .btn-block + .btn-block {
  margin-top: 0;
}

@media (max-width: 768px) {
  .block-xs {
    display: block !important;
    float: none !important;
  }
}

/* |||||||||||||||||||||| Alerts |||||||||||||||||||||| */
.alert {
  position: fixed;
  z-index: 10002;
  top: 5px;
  right: 5px;
  left: 5px;
  width: 98%;
  width: calc(100% - 10px);
  min-width: 100px;
  padding: 15px 40px 15px 40px;
  margin-bottom: 0;
  color: var(--text-default);
  font-weight: 400;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  background-color: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--black) 8%, transparent);
  border-top: 4px solid var(--border-darker);
  box-shadow: 0 2px 14px color-mix(in srgb, var(--bg-shadow) 5%, transparent);
  border-radius: 5px;
  opacity: 0;
  transform: translate(0, -20px);
}
.alert:hover .alert-close-icon {
  opacity: 1;
}
.alert.alert-notice {
  border: 1px solid var(--border-content);
  border-top: 4px solid var(--color-primary);
}
.alert.alert-generic {
  padding-left: 15px;
  border: 1px solid var(--border-content-alt);
  border-top: 4px solid var(--color-primary);
}
.alert.alert-success {
  border: 1px solid var(--border-content-alt);
  border-top: 4px solid var(--color-primary);
}
.alert.alert-error {
  border: 1px solid var(--color-danger);
  border-top: 4px solid var(--color-danger);
}
.alert.alert-loading {
  border: 1px solid var(--border-content);
  border-top: 4px solid var(--color-primary);
  cursor: default;
}
.alert.alert-loading .alert-close-icon {
  display: none;
}
.alert.showing {
  transition: all var(--transition-normal) ease var(--transition-normal);
  transform: translate(0, 0);
  opacity: 1;
}
.alert.hiding {
  transition: all var(--transition-fast) ease;
  transform: translate(0, -20px);
  box-shadow: none;
  opacity: 0;
}
@media (min-width: 480px) {
  .alert {
    top: auto;
    bottom: 20px;
    right: 20px;
    left: auto;
    width: 100%;
    max-width: 400px;
    transform: translate(0, 40px);
  }
  .alert.showing {
    transform: translate(0, 0);
  }
  .alert.hiding {
    transform: translate(0, 20px);
  }
}
@media (min-width: 1280px) {
  .alert {
    bottom: 92px;
    right: 26px;
  }
}

.alert-close-icon {
  position: absolute;
  right: 15px;
  top: 19px;
  width: 15px;
  height: auto;
  padding: 2px;
  color: var(--text-default);
  opacity: 0.4;
  transition: all var(--transition-fast) ease;
}
.alert-close-icon:hover {
  opacity: 0.6;
}

.alert-type-icon {
  position: absolute;
  left: 14px;
  top: 14px;
  font-size: 18px;
}
.alert-type-icon.ion-android-alert {
  color: var(--color-danger);
}
.alert-type-icon.ion-ios-checkmark {
  color: var(--color-primary);
}
.alert-type-icon.loading-spinner {
  color: var(--color-primary);
  animation: spin 2s linear infinite;
}
.alert-type-icon.loading-spinner svg {
  width: 20px;
  height: 20px;
}

.alert-loading-spinner {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 18px !important;
  height: 18px !important;
  margin-top: 1px;
  border: 3px solid currentColor;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: container-rotate var(--transition-slower) linear infinite;
}

.alert-loading-text {
  margin-left: 10px;
  display: inline-block;
  vertical-align: top;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.alert-inline {
  position: relative;
  width: 100%;
  z-index: 1000;
  padding: 20px;
  margin-bottom: 0;
  color: var(--color-accent-brown);
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  background-color: var(--bg-yellow);
  border: none;
  border-radius: 4px;
}
.alert-inline.alert-notice {
  color: var(--color-accent-brown);
  background-color: var(--bg-yellow);
}
.alert-inline.alert-notice a,
.alert-inline.alert-notice a:focus,
.alert-inline.alert-notice a:visited {
  color: var(--color-accent-brown);
  text-decoration: underline;
}
.alert-inline.alert-notice a:hover,
.alert-inline.alert-notice a:active {
  color: color-mix(in srgb, var(--color-accent-brown) 98%, var(--black));
  text-decoration: underline;
}
.alert-inline.alert-error {
  color: var(--color-primary-contrast);
  background-color: var(--color-danger);
}

.autosaving-notice {
  position: fixed;
  z-index: calc(var(--z-search) - 1);
  bottom: 37px;
  right: 80px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-lighter);
}
.autosaving-notice svg {
  margin-right: 5px;
}
.autosaving-notice svg path {
  stroke: var(--text-lighter);
}

.section-notice {
  position: relative;
  margin-bottom: 20px;
  padding: 15px 15px 15px 48px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-default);
  background-color: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
  border-radius: 6px;
  line-height: 1.428571429;
}
.section-notice.notice-sm {
  padding: 9px 15px 9px 47px;
}
.section-notice.section-notice--error {
  background-color: var(--color-danger-light);
  border: 1px solid color-mix(in srgb, var(--color-danger) 20%, transparent);
}
.section-notice.section-notice--warning {
  background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
  border: 1px solid var(--color-danger);
}
.section-notice.section-notice--success {
  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border: 1px solid var(--color-primary);
}
.section-notice.section-notice--no-icon {
  padding-left: 20px;
}
.section-notice.section-notice--no-icon.notice-sm {
  padding-left: 15px;
}
.section-notice a, .section-notice a:focus, .section-notice a:visited, .section-notice a:hover, .section-notice a:active {
  color: var(--text-default);
  text-decoration: underline;
}

.section-notice-header {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 500;
}

.section-notice-icon {
  position: absolute;
  left: 17px;
  top: 15px;
  font-size: 28px;
  line-height: 1;
  color: var(--color-primary);
}
.section-notice-icon.section-notice-icon--info {
  top: 18px;
  width: 16px;
  height: auto;
  color: var(--text-lighter);
}
.section-notice-icon.section-notice-icon--warning, .section-notice-icon.section-notice-icon--error {
  top: 18px;
  left: 18px;
  width: 15px;
  height: auto;
  color: var(--color-danger);
}
.section-notice--warning .section-notice-icon {
  color: var(--color-danger);
}
.section-notice--error .section-notice-icon {
  color: var(--color-danger);
}
.section-notice--success .section-notice-icon {
  top: 16px;
  left: 16px;
  width: 22px;
  height: auto;
  color: var(--color-primary);
}
.section-notice.notice-sm .section-notice-icon {
  top: 11px;
}
.section-notice.notice-sm .section-notice-icon.ion-ios-checkmark-outline {
  font-size: 26px;
  top: 6px;
  left: 14px;
}

.section-notice-loading-icon {
  position: absolute;
  top: 15px;
  left: 17px;
  width: 20px;
  height: 20px;
  opacity: 0.5;
  animation: container-rotate var(--transition-slower) linear infinite;
}

.section-closeable-notice, .onboarding-new-todo-form-notice {
  position: relative;
  padding: 20px 40px 20px 20px;
  font-size: 14px;
  color: var(--text-default);
  background: var(--bg-content);
  background-color: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}
.section-closeable-notice a, .onboarding-new-todo-form-notice a, .section-closeable-notice a:focus, .section-closeable-notice a:visited, .section-closeable-notice a:hover, .section-closeable-notice a:active {
  color: var(--text-default);
  text-decoration: underline;
}

.section-closeable-notice-icon {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: color-mix(in srgb, var(--black) 30%, transparent);
  transition: all var(--transition-normal) ease;
}
.section-closeable-notice-icon:hover {
  color: color-mix(in srgb, var(--black) 50%, transparent);
}

.section-counter-label {
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin-left: 10px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

/* |||||||||||||||||||||| Components |||||||||||||||||||||| */
.avatar {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  color: var(--white);
  font-family: "Georgia", serif;
  cursor: default;
}
.avatar .tooltip {
  font-family: var(--font-sans-serif);
}

.avatar-img {
  display: inline-block;
  padding-top: 13px;
  vertical-align: middle;
  text-align: center;
  color: var(--text-muted-alt);
  font-family: "Georgia", serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.42;
  background: var(--bg-grey-f5) center center no-repeat;
  background-size: cover;
  border-radius: 4px;
}
.avatar-img.avatar-15 {
  width: 15px;
  height: 15px;
}
.avatar-img.avatar-xxs {
  width: 20px;
  height: 20px;
  padding-top: 4px;
  font-size: 11px;
  border-radius: 3px;
}
.avatar-img.avatar-xs {
  width: 26px;
  height: 26px;
  padding-top: 6px;
  font-size: 13px;
  border-radius: 3px;
}
.avatar-img.avatar-30 {
  width: 30px;
  height: 30px;
  padding-top: 6px;
  font-size: 13px;
  border-radius: 4px;
}
.avatar-img.avatar-sm {
  width: 32px;
  height: 32px;
  padding-top: 7px;
  font-size: 16px;
  border-radius: 4px;
}
.avatar-img.avatar-smd {
  width: 40px;
  height: 40px;
  padding-top: 9px;
  font-size: 19px;
  border-radius: 4px;
}
.avatar-img.avatar-md {
  width: 45px;
  height: 45px;
  padding-top: 8px;
  font-size: 23px;
  border-radius: 5px;
}
.avatar-img.avatar-mlg {
  width: 60px;
  height: 60px;
  padding-top: 12px;
  font-size: 30px;
  border-radius: 6px;
}
.avatar-img.avatar-lg {
  width: 84px;
  height: 84px;
  padding-top: 20px;
  font-size: 38px;
  border-radius: 8px;
}
.avatar-img.avatar-xl {
  width: 100px;
  height: 100px;
  padding-top: 25px;
  font-size: 44px;
  border-radius: 4px;
}
.avatar-img.avatar-xxl {
  width: 130px;
  height: 130px;
  padding-top: 31px;
  font-size: 54px;
  border-radius: 5px;
}
.avatar-img.avatar-full-width {
  width: 100%;
  height: 0;
  padding-top: 0;
  padding-bottom: 100%;
  background-color: var(--bg-grey-fc);
  border-radius: 12px;
}

.user-avatar-list {
  display: inline-flex;
  flex-wrap: nowrap;
}
.user-avatar-list .user-avatar {
  margin-right: -10px;
  box-shadow: none;
  border: 2px solid var(--bg-content);
}
.user-avatar-list .user-avatar:last-child {
  margin-right: 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .drawer-wrapper .user-avatar-list .user-avatar {
    border-color: var(--bg-content-alt);
  }
}
:root[data-theme=dark] .drawer-wrapper .user-avatar-list .user-avatar {
  border-color: var(--bg-content-alt);
}

.user-avatar {
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  background: var(--bg-grey-f5) center center no-repeat;
  background-size: cover;
  border-radius: 50%;
  box-shadow: none;
  flex-shrink: 0;
}
.user-avatar.avatar-xxs {
  width: 20px;
  height: 20px;
}
.user-avatar.avatar-xs {
  width: 26px;
  height: 26px;
}
.user-avatar.avatar-15 {
  width: 15px;
  height: 15px;
}
.user-avatar.avatar-sm {
  width: 32px;
  height: 32px;
}
.user-avatar.avatar-md {
  width: 45px;
  height: 45px;
}
.user-avatar.avatar-mlg {
  width: 60px;
  height: 60px;
}
.user-avatar.avatar-lg {
  width: 84px;
  height: 84px;
}
.user-avatar.avatar-lg.with-shadow {
  box-shadow: 0 3px 12px color-mix(in srgb, var(--black) 4%, transparent), 0 0px 0px 1px color-mix(in srgb, var(--black) 3%, transparent);
}
.user-avatar.avatar-124 {
  width: 124px;
  height: 124px;
}
.user-avatar.avatar-124.with-shadow {
  box-shadow: 0 3px 12px color-mix(in srgb, var(--black) 4%, transparent), 0 0px 0px 1px color-mix(in srgb, var(--black) 3%, transparent);
}
.user-avatar.user-avatar--system-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-content);
}

.user-avatar--system-logo-icon {
  width: 12px;
  height: auto;
}

.user-avatar-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background-color: var(--bg-grey-f1);
}
.user-avatar-empty-icon.user-avatar-empty-icon--rounded {
  border-radius: 50%;
}
.user-avatar-empty-icon svg {
  width: 11px;
  height: auto;
}
.user-avatar-empty-icon svg path {
  fill: var(--text-lighter);
}

.chat-with-us-link {
  text-decoration: underline;
}

.bg-grey-f8 {
  background-color: var(--bg-grey-f8);
}

.rounded-6 {
  border-radius: 6px;
}

.hide {
  visibility: hidden;
}

.opacity-0 {
  opacity: 0;
}

.footer {
  position: relative;
  display: block;
  padding: 80px 0 40px;
}
@media print {
  .footer {
    display: none;
  }
}
.footer .wrapper {
  max-width: 900px;
  margin: auto;
}
.footer p {
  color: var(--text-lightest);
}
.footer li {
  color: var(--text-lightest);
}

.footer-legal-policies {
  max-width: 860px;
  margin: 40px auto 40px;
}
@media (min-width: 768px) {
  .footer-legal-policies {
    margin: 120px auto 40px;
  }
}

.footer-terms-separator {
  position: relative;
  top: 1px;
  margin: 0 3px;
  color: var(--text-muted-alt);
}

.footer-disclaimer {
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-lightest);
}
@media (min-width: 768px) {
  .footer-disclaimer {
    text-align: center;
  }
}
.footer-disclaimer a {
  color: var(--text-lightest);
  text-decoration: underline;
}
.footer-disclaimer a:visited, .footer-disclaimer a:focus {
  color: var(--text-lightest);
}
.footer-disclaimer a:hover {
  color: var(--text-lighter);
}

.footer-links {
  text-align: center;
}
.footer-links a {
  color: var(--text-lighter);
}
.footer-links a:visited, .footer-links a:focus {
  color: var(--text-lighter);
}
.footer-links a:hover {
  color: var(--text-lighter);
}

.footer-link {
  display: block;
  padding: 10px 0 8px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-link:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
@media (min-width: 768px) {
  .footer-link {
    display: inline-block;
    padding: 0;
    border-bottom: none;
  }
  .footer-link:first-child {
    border-top: none;
  }
}

.footer-dot {
  position: relative;
  display: none;
  top: -2px;
  margin: 0 10px;
  font-size: 6px;
  opacity: 0.4;
}
@media (min-width: 768px) {
  .footer-dot {
    display: inline;
  }
}

.footer-app-links {
  margin-top: 13px;
  text-align: left;
}
@media (min-width: 768px) {
  .footer-app-links {
    text-align: center;
  }
}

.footer-app-link {
  display: flex;
  align-items: center;
  height: 30px;
  margin-right: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 600;
}
.footer-app-link, .footer-app-link:visited, .footer-app-link:focus {
  color: var(--text-lighter);
}
.footer-app-link:hover {
  color: var(--text-lighter);
}
@media (min-width: 768px) {
  .footer-app-link {
    display: inline-block;
    margin: 0 10px;
  }
}

.footer-app-link-icon.ion-iphone {
  position: relative;
  top: 1px;
  width: 20px;
  display: inline-block;
  text-align: center;
  margin-right: 9px;
  font-size: 20px;
}
@media (min-width: 768px) {
  .footer-app-link-icon.ion-iphone {
    top: 3px;
    width: auto;
  }
}
.footer-app-link-icon.ion-laptop {
  position: relative;
  top: 1px;
  margin-right: 8px;
  font-size: 21px;
}
@media (min-width: 768px) {
  .footer-app-link-icon.ion-laptop {
    top: 3px;
    width: auto;
  }
}
.footer-app-link-icon.ion-social-chrome-outline {
  position: relative;
  display: inline-block;
  top: 1px;
  width: 21px;
  margin-right: 8px;
  font-size: 1.18em;
  text-align: center;
}
@media (min-width: 768px) {
  .footer-app-link-icon.ion-social-chrome-outline {
    top: 2px;
    width: auto;
    margin-right: 5px;
  }
}

.client-questions-footer {
  width: 100%;
  bottom: 0;
  padding: 30px;
  font-size: 14px;
  color: color-mix(in srgb, var(--black) 30%, transparent);
  font-weight: 500;
  box-shadow: inset 0 1px 0 var(--border-content);
}
.client-questions-footer a, .client-questions-footer a:visited, .client-questions-footer a:focus {
  color: var(--text-lighter);
}
.client-questions-footer a:hover, .client-questions-footer a:active {
  color: var(--text-muted);
}
.client-questions-footer i {
  padding-right: 5px;
}
@media print {
  .client-questions-footer {
    display: none;
  }
}

.company-profiles-footer {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 80px;
  padding: 24px 0 20px;
  border-top: 1px solid var(--border-content);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-lighter);
  text-align: center;
}
@media print {
  .company-profiles-footer {
    display: none;
  }
}

.company-profile-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 40px 0 40px;
  background: var(--black);
  font-size: 16px;
  text-align: center;
  color: var(--text-lighter);
  margin-top: 80px;
}
@media print {
  .company-profile-footer {
    display: none;
  }
}

.top-header-section {
  position: relative;
  padding-top: 20px;
  padding-bottom: 20px;
  page-break-before: always;
  background: var(--bg-content);
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .top-header-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
.top-header-section.company {
  padding-top: 40px;
  padding-bottom: 40px;
  margin-bottom: 40px;
}
.top-header-section.with-subnavigation {
  padding-top: 40px;
  padding-bottom: 0;
}
.top-header-section .image-uploader-top-logo-img {
  border-color: var(--bg-content);
}

.top-header-content {
  position: relative;
}

.top-header-title {
  margin-bottom: 0;
  font-size: 22px;
  font-weight: 600;
}

.top-header-subtitle-link {
  font-size: 16px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .top-header-subtitle-link {
    font-size: 18px;
  }
}

.display-label {
  display: block;
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  text-transform: capitalize;
}
.display-label .link-inline, .display-label .modal-payment-methods-item-edit-link {
  display: inline-block;
  padding-top: 2px;
  vertical-align: top;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

.display-value {
  font-size: 16px;
  font-weight: normal;
  color: var(--text-default);
  word-break: break-word;
}

.display-banner {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 25px 30px 28px;
  cursor: default;
  background: var(--bg-content);
  background-image: linear-gradient(to right, var(--bg-brand-muted) 0%, var(--bg-grey-f5) 100%);
  border: 1px solid var(--border-content-alt);
  overflow: hidden;
  border-radius: 4px;
}
@media (min-width: 1320px) {
  .display-banner {
    flex-direction: row;
    align-items: center;
  }
}
.display-banner .btn {
  max-width: 250px;
  white-space: nowrap;
}

.display-banner-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  cursor: pointer;
  opacity: 0.5;
}
.display-banner-close path {
  fill: var(--text-default);
}
.display-banner-close:hover, .display-banner-close:active {
  color: var(--text-default);
  opacity: 0.8;
}

.display-banner-text {
  position: relative;
  margin-bottom: 20px;
}
@media (min-width: 1320px) {
  .display-banner-text {
    margin-bottom: 0;
  }
}

.display-banner-title {
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-default);
}

.display-banner-subtitle {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.display-alert-banner-wrapper {
  max-width: var(--invoice-wrapper-width);
  width: 100%;
  margin: auto auto 20px auto;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 768px) {
  .display-alert-banner-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.display-alert-banner {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 25px 30px 28px;
  cursor: default;
  background: var(--bg-content);
  background-image: linear-gradient(to right, var(--bg-brand-muted) 0%, var(--bg-grey-f5) 100%);
  border: 1px solid var(--border-content-alt);
  overflow: hidden;
  border-radius: 4px;
}
@media (min-width: 1320px) {
  .display-alert-banner {
    flex-direction: row;
    align-items: center;
  }
}
.display-alert-banner.with-icon {
  padding-left: 60px;
}

.display-alert-banner-info-icon {
  position: absolute;
  left: 26px;
  top: 26px;
  height: 20px;
  width: auto;
}

.display-alert-banner-title {
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-default);
}

.display-alert-banner-subtitle {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.display-alert-banner-cta {
  margin-top: 20px;
}
@media (min-width: 768px) {
  .display-alert-banner-cta {
    margin-top: 0;
  }
}

.display-notice {
  padding: 20px;
  font-size: 16px;
  color: var(--text-info-dark);
  background: var(--bg-info-light);
  border-radius: 4px;
}

.display-warning {
  padding: 20px;
  font-size: 16px;
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-danger) 40%, transparent);
  border-radius: 4px;
}

.new-feature-label {
  position: relative;
  display: inline-block;
  top: -2px;
  margin-left: 10px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-sans-serif);
  color: var(--color-primary-contrast);
  background: var(--color-accent-yellow);
  border-radius: 30px;
}
.new-feature-label.notice-label {
  background: var(--text-info-dark);
}
.subnav-item .new-feature-label {
  position: absolute;
  top: 16px;
  left: 100%;
  margin-left: 8px;
}
.dashboard-chart-title .new-feature-label {
  top: -1px;
  margin-left: 15px;
}
.sidebar-navigation-item-features-item .new-feature-label {
  top: 1px;
}

.text-banner {
  position: relative;
  padding: 10px 30px;
  text-align: center;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-primary);
  cursor: default;
  background: var(--bg-content);
  border-bottom: 1px solid var(--border-content);
}
.text-banner.with-top-border {
  border-top: 1px solid var(--border-content);
}
.text-banner.no_cc_trial_banner {
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
}
.text-banner.no_cc_trial_banner a, .text-banner.no_cc_trial_banner a:focus, .text-banner.no_cc_trial_banner a:visited, .text-banner.no_cc_trial_banner a:hover {
  color: var(--color-primary-contrast);
}
.text-banner a,
.text-banner a:focus,
.text-banner a:visited {
  color: var(--color-primary);
  text-decoration: underline;
}
.text-banner a:hover,
.text-banner a:active {
  color: var(--text-default);
  text-decoration: underline;
}
.text-banner.danger {
  color: var(--text-default);
  background: var(--color-danger-light);
}
.text-banner.danger a,
.text-banner.danger a:focus,
.text-banner.danger a:visited {
  color: var(--color-danger-dark);
}
.text-banner.danger a:hover,
.text-banner.danger a:active {
  color: color-mix(in srgb, var(--color-danger-dark) 95%, transparent);
}
.text-banner.caution {
  color: var(--color-primary-contrast);
  background: var(--color-danger);
}
.text-banner.caution a,
.text-banner.caution a:focus,
.text-banner.caution a:visited {
  color: var(--color-primary-contrast);
}
.text-banner.caution a:hover,
.text-banner.caution a:active {
  color: color-mix(in srgb, var(--color-primary-contrast) 95%, transparent);
}
.text-banner.warning {
  color: var(--color-primary-contrast);
  background: var(--color-accent-orange);
}
.text-banner.warning a,
.text-banner.warning a:focus,
.text-banner.warning a:visited {
  color: var(--color-primary-contrast);
}
.text-banner.warning a:hover,
.text-banner.warning a:active {
  color: color-mix(in srgb, var(--color-primary-contrast) 95%, transparent);
}
.text-banner.dark-green {
  color: rgba(255, 255, 255, 0.95);
  background: color-mix(in srgb, var(--color-primary-dark) 98%, var(--black));
  border-bottom: 1px solid color-mix(in srgb, var(--black) 30%, transparent);
}
.text-banner.dark-green a,
.text-banner.dark-green a:focus,
.text-banner.dark-green a:visited {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: underline;
}
.text-banner.dark-green a:hover,
.text-banner.dark-green a:active {
  color: var(--color-primary-contrast);
  text-decoration: underline;
}

.text-banner-closeable-icon {
  position: absolute;
  top: 0;
  right: 0;
  padding: 9px 13px;
  cursor: pointer;
  font-size: 16px;
}
.text-banner-closeable-icon, .text-banner-closeable-icon:focus, .text-banner-closeable-icon:visited {
  opacity: 0.8;
}
.text-banner-closeable-icon:hover, .text-banner-closeable-icon:active {
  opacity: 1;
}

.text-banner-alt {
  position: relative;
  padding: 10px 50px 10px 20px;
  text-align: left;
  font-weight: 500;
  line-height: 1.5;
  background: var(--bg-grey-f8);
  border-bottom: 1px solid var(--border-content);
}
.text-banner-alt.with-top-border {
  border-top: 1px solid var(--border-content);
}
.text-banner-alt.caution {
  color: var(--color-primary-contrast);
  background: var(--color-danger);
}
.text-banner-alt.caution a,
.text-banner-alt.caution a:focus,
.text-banner-alt.caution a:visited {
  color: var(--color-primary-contrast);
  text-decoration: underline;
}
.text-banner-alt.caution a:hover,
.text-banner-alt.caution a:active {
  color: color-mix(in srgb, var(--color-primary-contrast) 95%, transparent);
}
@media (min-width: 768px) {
  .text-banner-alt {
    padding-left: 40px;
    padding-right: 70px;
  }
}

.sample-banner-contained {
  position: relative;
  padding: 20px 20px 20px;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  background-color: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 4px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 2%, transparent);
}

.sample-banner-contained a.sample-banner-link {
  font-size: 12px;
  font-weight: 500;
}
.sample-banner-contained a.sample-banner-link, .sample-banner-contained a.sample-banner-link:focus, .sample-banner-contained a.sample-banner-link:visited, .invoice-editor-wrapper .sample-banner-contained a.sample-banner-link:not(.btn) {
  color: var(--text-default);
}
.sample-banner-contained a.sample-banner-link:hover, .sample-banner-contained a.sample-banner-link:active {
  color: var(--text-default);
}
@media (min-width: 768px) {
  .sample-banner-contained a.sample-banner-link {
    font-size: 14px;
  }
}

.sample-banner-link-line2 {
  margin-top: 3px;
  font-weight: 500;
  color: var(--text-muted);
}

.start-trial-banner-text a {
  margin-left: 4px;
}

.document-editor {
  position: absolute;
  z-index: calc(var(--z-navigation) + 1);
  display: block;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--document-editor-width);
  background: var(--bg-content);
  box-shadow: -1px 0 0 var(--border-content);
}
.document-editor.collapsed {
  display: none;
}
@media (min-width: 768px) {
  .document-editor {
    z-index: var(--z-proposal-style-editor);
    top: var(--navigation-height);
  }
}
@media print {
  .document-editor {
    display: none;
  }
}
@media (min-width: 768px) {
  .document-editor--doc-builder {
    position: fixed;
    top: 0;
  }
}

.document-editor-body {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--document-editor-width);
  padding-bottom: 60px;
  overflow: hidden;
  overflow-y: auto;
  background: var(--bg-content);
}
@media (min-width: 768px) {
  .document-editor-body {
    top: var(--navigation-height);
  }
}
@media (min-width: 768px) {
  .document-editor-body.sticky-editor {
    position: sticky;
    top: 0;
  }
}
.document-editor.document-editor--doc-builder .document-editor-body {
  top: var(--navigation-height);
  padding-bottom: 0;
}

.document-editor-collapse {
  position: fixed;
  display: block;
  z-index: 10;
  right: var(--document-editor-width);
  top: 50%;
  height: 100px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 41px 10px 40px 10px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-right: 0;
  transform: translateY(-50%);
  border-radius: 4px 0 0 4px;
  transition: padding var(--transition-normal) ease, color var(--transition-normal) ease, background var(--transition-normal) ease;
}
.document-editor-collapse:hover {
  padding-right: 10px;
  padding-left: 12px;
  background: var(--bg-content);
}
@media print {
  .document-editor-collapse {
    display: none;
  }
}
.proposal-sidebar-wrapper + .document-editor-collapse {
  display: block;
}
@media (min-width: 1200px) {
  .proposal-sidebar-wrapper + .document-editor-collapse {
    display: none;
  }
}
.agreement-sidebar-wrapper + .document-editor-collapse {
  display: block;
}
@media (min-width: 1200px) {
  .agreement-sidebar-wrapper + .document-editor-collapse {
    display: none;
  }
}
.estimate-editor-page + .document-editor-collapse {
  display: block;
}
@media (min-width: 1200px) {
  .estimate-editor-page + .document-editor-collapse {
    display: none;
  }
}
.document-editor.collapsed + .document-editor-collapse {
  right: 0;
  color: var(--text-muted);
}
.document-editor.collapsed + .document-editor-collapse:hover {
  color: var(--text-muted);
}
@media (min-width: 1290px) {
  .invoice-editor-page ~ .document-editor-collapse, .invoice-editor-wrapper ~ .document-editor-collapse {
    display: none;
  }
}

.document-editor-collapse-icon.collapsed {
  transform: rotate(180deg);
}

.document-editor-content {
  height: 100%;
  height: calc(100% - 65px);
  width: 355px;
  padding: 40px 40px 60px;
  overflow: hidden;
  overflow-y: scroll;
}

.document-editor-overview {
  padding: 30px;
  border-bottom: 1px solid var(--border-content);
}

.document-editor-overview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.document-editor-overview-item.with-status-label {
  margin-bottom: 12px;
}
.document-editor-overview-item:last-child {
  margin-bottom: 0;
}

.document-editor-overview-item-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-default);
  cursor: default;
}

.document-editor-overview-item-value {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
  cursor: default;
}

.document-editor-display-item-icon {
  position: relative;
  top: 0;
  width: 14px;
  height: auto;
  margin-right: 5px;
}
.document-editor-display-item-icon.document-editor-overview-repeating-icon--repeating {
  width: 14px;
}
.document-editor-display-item-icon.document-editor-display-item-icon--scheduled {
  width: 15px;
  margin-right: 7px;
}
.document-editor-display-item-icon path {
  fill: var(--text-muted);
}
.document-editor-display-item-value-link:hover .document-editor-display-item-icon path {
  fill: var(--text-default);
}

.document-editor-section-toggle {
  position: relative;
  height: 50px;
  margin-top: -1px;
  padding: 14px 30px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  user-select: none;
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
  transition: color var(--transition-fast) ease;
}
.document-editor-section-toggle.showing {
  color: var(--text-muted);
}

.document-editor-section-toggle-icon {
  position: absolute;
  right: 30px;
  top: 20px;
  width: 12px;
  height: auto;
  transition: transform var(--transition-fast) ease;
}
.document-editor-section-toggle.showing .document-editor-section-toggle-icon {
  transform: rotate(180deg);
}

.document-editor-section-content {
  padding: 30px;
}

.document-editor-section-subheader {
  margin-bottom: 25px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-default);
  user-select: none;
}

.document-editor-group {
  padding: 30px;
  border-bottom: 1px solid var(--border-content);
}
.document-editor-group:last-child {
  border-bottom: none;
}

.document-editor-title {
  margin-bottom: 40px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .document-editor-title {
    font-size: 22px;
  }
}

.document-editor-subtitle {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  word-break: break-word;
}

.document-editor-client-deposit-amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding: 15px 0;
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
}

.document-editor-client-deposit-paid {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 40px;
  padding: 20px;
  color: var(--text-default);
  background: var(--bg-grey-fd);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}

.document-editor-client-deposit-paid-label {
  margin-bottom: 5px;
  font-weight: 600;
}

.document-editor-client-deposit-paid-link {
  margin-top: 10px;
  font-weight: 600;
}

.document-editor-client-deposit-paid-icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: auto;
  margin-left: 8px;
  top: 1px;
  font-size: 1.15em;
}
.document-editor-client-deposit-paid-icon path {
  fill: currentColor;
}

.document-editor-settings-item {
  position: relative;
  margin-bottom: 30px;
}
.document-editor-settings-item.document-editor-address-dropdown {
  margin-top: -6px;
}
.document-editor-settings-item .form-label {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-default);
  font-weight: 500;
  cursor: default;
}
.document-editor-settings-item .form-attachment-uploader-wrapper {
  background-color: var(--bg-content);
  height: 30px;
  border: 1px solid var(--border-content);
}
.document-editor-settings-item .form-attachment-uploader-wrapper .form-attachment-uploader-placeholder {
  padding: 0 15px 0 8px;
}
.document-editor-settings-item .form-attachment-uploader-wrapper .form-attachment-uploader-placeholder {
  color: var(--text-lighter);
  font-size: 14px;
  font-weight: 400;
}
.document-editor-settings-item .form-attachment-uploader-wrapper .form-attachment-uploader-placeholder:hover {
  color: var(--text-muted);
}
.document-editor-settings-item .form-attachment-uploader-wrapper .form-attachment-uploader-file-link {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 400;
}
.document-editor-settings-item .form-attachment-uploader-wrapper .form-attachment-uploader-file-link:hover {
  color: var(--text-default);
}
.document-editor-settings-item .form-attachment-uploader-wrapper .form-attachment-filename {
  font-size: 14px;
  font-weight: 400;
  padding: 5px 50px 5px 10px;
}
.document-editor-settings-item .form-attachment-uploader-wrapper .form-attachment-uploader-delete {
  top: 4px;
  bottom: auto;
  height: auto;
  padding: 5px 11px;
}

.document-editor-settings-image-uploader {
  position: absolute;
  right: 0;
  top: -6px;
  width: 140px;
  border: 1px solid var(--border-field);
  border-radius: 3px;
}
.document-editor-settings-image-uploader:hover {
  border-color: var(--color-primary);
}
.document-editor-settings-image-uploader .form-attachment-uploader-wrapper {
  border: none;
}
.document-editor-settings-image-uploader .form-attachment-uploader-wrapper.with-attachment {
  border: none;
}
.document-editor-settings-image-uploader .form-attachment-uploader-wrapper .form-attachment-uploader-delete {
  top: 5px;
}

.document-editor-settings-theme-link {
  position: absolute;
  display: flex;
  align-items: center;
  right: 0;
  top: -6px;
  width: 140px;
  height: 30px;
  padding: 3px 7px 3px 30px;
  font-size: 14px;
  font-weight: 500;
  text-transform: capitalize;
  text-align: left;
  border: 1px solid var(--border-field);
  border-radius: 3px;
  transition: all var(--transition-fast) ease;
}
.document-editor-settings-theme-link:hover {
  border-color: var(--color-primary);
}

.document-editor-settings-theme-icon {
  position: absolute;
  width: 15px;
  height: auto;
  top: 6px;
  top: 6.5px;
  left: 7px;
}

.document-editor-settings-theme-link-name {
  width: 100%;
  color: var(--text-default);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-editor-settings-item-tooltip {
  position: relative;
  display: inline-block;
  top: 1px;
  top: 1.5px;
  margin-left: 8px;
  width: 14px;
  height: auto;
}

.document-editor-settings-item-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: default;
}

.document-editor-settings-item-value-link {
  font-size: 14px;
  font-weight: 500;
}

.document-editor-settings-switch {
  position: absolute;
  right: 0;
  top: -2px;
}

.document-editor-settings-field.form-field {
  position: absolute;
  right: 0;
  top: -6px;
  width: 40%;
  text-align: left;
}

.document-editor-settings-dropdown.dropdown-sm {
  position: absolute;
  right: 0;
  top: -6px;
  width: 40%;
  text-align: left;
}

.document-editor-settings-unit-dropdown.dropdown-xs {
  position: absolute;
  right: 0;
  top: -6px;
  width: 20px;
  text-align: left;
}

.document-editor-settings-tooltip {
  text-align: left;
  min-width: 300px;
  max-width: 390px;
  font-weight: 400 !important;
}

.document-editor-settings-item-deposit {
  position: relative;
  margin-top: 30px;
  background: var(--bg-grey-fd);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}

.document-editor-settings-item-deposit-in {
  position: relative;
  padding: 20px;
}

.document-editor-settings-item-deposit-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.document-editor-settings-item-deposit-item:last-child {
  margin-bottom: 0;
}

.document-editor-settings-item-deposit-edit {
  display: block;
  padding: 10px;
  font-weight: 600;
  text-align: center;
  border-top: 1px solid var(--border-content);
}

.document-editor-settings-item-deposit-fees {
  position: absolute;
  display: flex;
  align-content: center;
  right: 20px;
  top: 20px;
  font-weight: 500;
  color: var(--color-primary);
}

.document-editor-settings-item-deposit-fees-icon {
  display: inline-block;
  width: 14px;
  height: auto;
  margin-left: 5px;
  margin-top: 2px;
}
.document-editor-settings-item-deposit-fees-icon path {
  fill: var(--color-primary);
}

.document-editor-settings-generated-note {
  padding: 15px 20px 20px;
  font-size: 14px;
  font-weight: 400;
  border-bottom: 1px solid var(--border-content);
}

.document-editor-settings-item-deposit-setup {
  position: relative;
  margin-top: 20px;
  padding: 20px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-default);
  word-break: break-word;
  border: 1px solid var(--border-content);
  background: var(--bg-grey-fc);
  border-radius: 4px;
}

.document-editor-settings-item-deposit-setup-title {
  font-weight: 600;
}

.document-editor-settings-item-deposit-setup-copy {
  margin-top: 5px;
  color: var(--text-muted);
}

.document-editor-settings-item-deposit-warning {
  margin-top: 10px;
  padding: 10px 10px 12px;
  text-align: center;
  font-weight: 600;
  color: var(--color-primary-contrast);
  border-radius: 6px;
  background: var(--color-danger);
}

.document-editor-display-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
}
.document-editor-display-item.with-status {
  margin-top: -5px;
  margin-bottom: 10px;
  margin-right: -10px;
}
.document-editor-display-item.document-editor-display-item--with-border {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-content);
}
.document-editor-display-item:last-child {
  margin-bottom: 0;
}
.document-editor-display-item .form-label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-default);
  font-weight: 500;
  cursor: default;
}

.document-editor-display-item-value {
  position: relative;
  top: 1px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  cursor: default;
}
.document-editor-display-item-value.document-editor-display-item-value--list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.document-editor-display-item-value-link {
  display: flex;
  align-items: center;
  min-width: 0;
}
.document-editor-display-item-value-link, .document-editor-display-item-value-link:focus, .document-editor-display-item-value-link:visited {
  color: var(--text-muted);
}
.document-editor-display-item-value-link:hover, .document-editor-display-item-value-link:active {
  color: var(--text-muted);
  text-decoration: underline;
}

.document-editor-display-item-expandable-value {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  color: var(--color-primary);
  user-select: none;
}

.document-editor-display-item-expandable-value-icon {
  position: absolute;
  left: 0;
  top: 7px;
  width: 10px;
  height: auto;
  transform: rotate(-90deg);
  transition: all var(--transition-fast) ease;
}
.document-editor-display-item-expandable-value.showing .document-editor-display-item-expandable-value-icon {
  transform: rotate(-180deg);
}
.document-editor-display-item-expandable-value-icon path {
  fill: var(--color-primary);
}

.document-editor-display-item-expandable-subitem {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--text-muted);
  cursor: default;
}
.document-editor-display-item-expandable-subitem:last-child {
  margin-bottom: 0;
}

.document-editor-display-item-expandable-subitem-title {
  padding-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-editor-display-list-empty {
  position: relative;
  padding: 20px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: var(--text-lighter);
  cursor: default;
  word-break: break-word;
  border: 1px solid var(--border-content);
  border-radius: 6px;
}

.document-editor-display-payment {
  position: relative;
  display: block;
  margin-bottom: 10px;
  padding: 20px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
  border-radius: 6px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 2%, transparent);
}
.document-editor-display-payment:hover {
  border: 1px solid color-mix(in srgb, var(--color-primary) 80%, transparent);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--black) 2%, transparent);
}
.document-editor-display-payment:last-child {
  margin-bottom: 0;
}
.document-editor-display-payment.pending-payment {
  cursor: default;
  border: 1px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 2%, transparent);
}
.document-editor-display-payment.failed-payment {
  border: 1px solid color-mix(in srgb, var(--color-danger) 50%, transparent);
}

.document-editor-display-payment-name {
  font-weight: 600;
  color: var(--color-primary);
}
.document-editor-display-payment-name.failed-payment {
  color: var(--color-danger);
}

.document-editor-display-payment-amount {
  padding-left: 10px;
  font-weight: 600;
  color: var(--color-primary);
}
.document-editor-display-payment-amount.failed-payment {
  color: var(--color-danger);
}

.document-editor-display-payment-date {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}
.document-editor-display-payment-date.with-payout-link {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.document-editor-display-payment-detail {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.document-editor-display-refund-list {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.document-editor-display-refund-list-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}

.document-editor-display-uneditable-payment-methods {
  margin-left: -5px;
}

.document-editor-display-invoice-list {
  margin-top: 30px;
}

.document-editor-display-deposit-invoice {
  position: relative;
  display: block;
  padding: 15px 20px 15px 40px;
  margin-top: 30px;
  background: var(--bg-content);
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--border-semi-transparent);
  transition: all var(--transition-fast) ease;
}
.document-editor-display-deposit-invoice:hover {
  box-shadow: 0 0 0 1px var(--border-semi-transparent-strong);
}
.document-editor-display-deposit-invoice .list-item-status {
  left: 15px;
  top: 20px;
}

.document-editor-display-deposit-invoice-title {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
}

.document-editor-display-deposit-invoice-subtitle {
  margin-top: 7px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}

.document-editor-display-deposit-notice {
  position: relative;
  display: block;
  padding: 20px 45px 20px 20px;
  margin-top: 30px;
  font-size: 14px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}
.document-editor-display-deposit-notice, .document-editor-display-deposit-notice:focus, .document-editor-display-deposit-notice:visited {
  color: var(--text-default);
  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}
.document-editor-display-deposit-notice:hover, .document-editor-display-deposit-notice:active {
  color: var(--text-default);
  border-color: color-mix(in srgb, var(--color-primary) 70%, transparent);
}

.document-editor-display-deposit-notice-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: auto;
}

.document-editor-timeline {
  position: relative;
  margin-top: 30px;
}

.document-timeline-item {
  position: relative;
}
.document-timeline-item:first-child {
  margin-top: -10px;
}

.document-timeline-item-in {
  position: relative;
  padding: 10px 20px 10px 20px;
  cursor: default;
}
.project-messaging-container .document-timeline-item-in {
  padding-left: 20px;
  padding-right: 30px;
}

.document-timeline-item-dot {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: -1px;
  width: 7px;
  height: 7px;
  background: var(--bg-content);
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--bg-content);
}
.document-timeline-item:hover .document-timeline-item-dot {
  box-shadow: 0 0 0 5px var(--bg-grey-fc);
}

.document-timeline-item-border {
  position: absolute;
  left: 2px;
  top: 20px;
  bottom: 40px;
  border-left: 1px dashed var(--border-content-alt);
}

.document-timeline-item-description {
  font-size: 14px;
  color: var(--text-default);
  word-break: break-word;
}
.document-timeline-item-description a, .document-timeline-item-description a:focus, .document-timeline-item-description a:visited, .document-timeline-item-description a:hover, .document-timeline-item-description a:active {
  color: var(--text-default);
  font-weight: 500;
}
.document-timeline-item-description a:hover, .document-timeline-item-description a:active {
  text-decoration: underline;
}

.document-timeline-item-description-note {
  margin-top: 5px;
  font-size: 12px;
}

.document-timeline-item-date {
  display: inline-block;
  font-size: 12px;
  color: var(--text-lighter);
  cursor: default;
  transition: all var(--transition-normal) ease;
}

.document-timeline-item-date-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 5px 0 0;
}

.document-timeline-item-open-mail-log {
  margin-left: 10px;
  font-weight: 500;
  font-size: 12px;
  transition: all var(--transition-normal) ease;
}

.document-timeline-item-email-item {
  position: relative;
  padding: 10px 20px 20px 20px;
  min-height: 40px;
  transition: all var(--transition-fast) ease;
}
.document-timeline-item-email-item .email-editor-wysiwyg-attachment {
  font-size: 12px;
}

.document-timeline-item-email-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.document-timeline-item-email-item-person {
  position: relative;
  word-break: break-word;
}
.document-timeline-item-email-item-person b {
  font-weight: 500;
}

.document-timeline-item-email-item-avatar {
  position: absolute;
  top: 15px;
  right: 20px;
}

.document-timeline-item-email-item-date {
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-lighter);
  transition: all var(--transition-fast) ease;
}
.document-timeline-item-email-item:hover .document-timeline-item-email-item-date {
  color: var(--text-lighter);
}

.document-timeline-item-email-item-body {
  position: relative;
  padding: 10px 12px;
  word-break: break-word;
  color: var(--text-muted);
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
  display: inline-flex;
  flex-direction: column;
}
.document-timeline-item-email-item-body h1,
.document-timeline-item-email-item-body h2,
.document-timeline-item-email-item-body h3,
.document-timeline-item-email-item-body h4 {
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.4;
}
.document-timeline-item-email-item-body h1,
.document-timeline-item-email-item-body h1 span {
  font-weight: 500;
  font-size: 24px;
}
.document-timeline-item-email-item-body h2,
.document-timeline-item-email-item-body h2 span {
  font-weight: 500;
  font-size: 22px;
}
.document-timeline-item-email-item-body h3,
.document-timeline-item-email-item-body h3 span {
  font-weight: 500;
  font-size: 18px;
}
.document-timeline-item-email-item-body h4,
.document-timeline-item-email-item-body h4 span {
  font-weight: 500;
  font-size: 16px;
}
.document-timeline-item-email-item-body p {
  margin-bottom: 15px;
}
.document-timeline-item-email-item-body p:last-child {
  margin-bottom: 0;
}
.document-timeline-item-email-item-body td {
  font-family: var(--font-sans-serif);
}

.document-editor-contract-flow-content {
  padding: 38px 40px 50px;
  height: 100%;
}
.document-editor-contract-flow-content .document-editor-settings-item {
  margin-bottom: 27px;
}
.document-editor-contract-flow-content hr {
  margin-top: 38px;
  margin-bottom: 35px;
}
.document-editor-contract-flow-content .form-attachment-uploader-wrapper {
  border: 1px dashed var(--color-primary);
  height: 50px;
}
.document-editor-contract-flow-content .form-attachment-uploader-wrapper:hover {
  border-color: var(--color-primary);
}
.document-editor-contract-flow-content .form-attachment-uploader-placeholder {
  font-size: 14px;
  padding: 15px 20px;
}
.document-editor-contract-flow-content .form-attachment-uploader-placeholder-icon {
  margin-right: 15px;
}

.document-editor-section-title {
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .document-editor-section-title {
    font-size: 20px;
  }
}

.document-status-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 4px 10px 4px 31px;
  overflow: hidden;
  border-radius: 6px;
}

.document-status-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.12;
  background: var(--grey-c);
  border-radius: 6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .document-status-bg {
    opacity: 0.45;
  }
}
:root[data-theme=dark] .document-status-bg {
  opacity: 0.45;
}
.drafted > .document-status-bg {
  background: var(--bg-grey-f5);
  opacity: 1;
}
.scheduled > .document-status-bg {
  background: var(--bg-grey-fdgrey-f5);
  opacity: 1;
}
.outstanding > .document-status-bg {
  background: var(--bg-grey-f5);
  opacity: 1;
}
.sent > .document-status-bg {
  background: var(--bg-info-light);
  opacity: 1;
}
.active > .document-status-bg {
  background: var(--color-accent-blue);
}
.overdue > .document-status-bg, .rejected > .document-status-bg, .expired > .document-status-bg, .cancelled > .document-status-bg {
  background: var(--color-danger);
}
.awaiting-deposit > .document-status-bg, .awaiting_deposit > .document-status-bg {
  background: var(--color-accent-orange);
}
.pending > .document-status-bg {
  background: var(--color-accent-orange);
}
.paid > .document-status-bg, .accepted > .document-status-bg, .complete > .document-status-bg, .completed > .document-status-bg {
  background: var(--color-primary);
}

.document-status-dot {
  position: absolute;
  left: 12px;
  top: 10px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: var(--grey-9);
}
.drafted > .document-status-dot {
  background: var(--grey-c);
}
.scheduled > .document-status-dot {
  background: var(--grey-8);
}
.outstanding > .document-status-dot {
  background: var(--grey-6);
}
.sent > .document-status-dot {
  background: var(--color-accent-blue);
}
.active > .document-status-dot {
  background: var(--color-accent-blue);
}
.overdue > .document-status-dot, .rejected > .document-status-dot, .expired > .document-status-dot, .cancelled > .document-status-dot {
  background: var(--color-danger);
}
.awaiting-deposit > .document-status-dot, .awaiting_deposit > .document-status-dot {
  background: var(--color-accent-orange);
}
.pending > .document-status-dot {
  background: var(--color-accent-orange);
}
.paid > .document-status-dot, .accepted > .document-status-dot, .complete > .document-status-dot, .completed > .document-status-dot {
  background: var(--color-primary);
}

.document-status-text {
  position: relative;
  color: var(--text-default);
  font-weight: 500;
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.document-editor-settings-payment-methods {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin-top: 12px;
  margin-left: -5px;
  margin-right: -5px;
  padding: 5px;
  user-select: none;
  background: var(--bg-grey-fd);
  border-radius: 5px;
}
.document-editor-settings-payment-methods:hover {
  background: var(--bg-grey-fd);
}
.document-editor-settings-payment-methods .payment-method-icon:first-child {
  margin-left: 0;
}
.document-editor-settings-payment-methods .payment-method-icon-img {
  height: 20px;
  width: auto;
}

.document-editor-color-picker {
  position: absolute;
  z-index: 10;
  top: 28px;
  right: 0;
}
.document-editor-color-picker.minus-right {
  right: -30px;
}
.document-editor-color-picker.left-align {
  left: 0;
  right: auto;
}
.document-editor-color-picker.bottom-position {
  top: auto;
  bottom: 28px;
}
.document-editor-color-picker .flexbox-fix input {
  width: 100% !important;
  text-align: center;
}
.document-editor-color-picker .sketch-picker {
  background: var(--bg-content-alt) !important;
  border: 1px solid var(--border-content) !important;
}

.document-editor-color-picker-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9;
}

.document-editor-color-input {
  position: absolute;
  right: 0;
  top: -6px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-field);
  border-radius: 40px;
}
.document-editor-color-input:hover {
  border-color: var(--text-lighter);
}
.form-field-view-only > .document-editor-color-input {
  right: 10px;
  top: 10px;
}
.form-field-view-only > .document-editor-color-input .document-editor-color-preview {
  cursor: default;
}
.document-editor-color-input.document-editor-color-input--left-preview {
  right: auto;
  left: 2px;
  top: 2px;
  width: 24px;
  height: 24px;
  overflow: hidden;
}

.document-editor-color-preview {
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  right: 2px;
  cursor: pointer;
  border-radius: 40px;
}
.document-editor-color-input--left-preview .document-editor-color-preview {
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 0;
}

.document-editor-file-input.form-field-uneditable.input-sm, .input-group-sm > .document-editor-file-input.form-field-uneditable.form-control,
.input-group-sm > .document-editor-file-input.form-field-uneditable.input-group-addon,
.input-group-sm > .input-group-btn > .document-editor-file-input.form-field-uneditable.btn {
  position: relative;
  display: block;
  width: 100%;
  padding-left: 32px;
  padding-right: 24px;
  text-align: left;
  cursor: pointer;
  background: var(--bg-content);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.document-editor-file-input.form-field-uneditable.input-sm, .input-group-sm > .document-editor-file-input.form-field-uneditable.form-control,
.input-group-sm > .document-editor-file-input.form-field-uneditable.input-group-addon,
.input-group-sm > .input-group-btn > .document-editor-file-input.form-field-uneditable.btn, .document-editor-file-input.form-field-uneditable.input-sm:focus, .document-editor-file-input.form-field-uneditable.input-sm:visited {
  color: var(--text-lighter);
}
.document-editor-file-input.form-field-uneditable.input-sm:hover, .input-group-sm > .document-editor-file-input.form-field-uneditable.form-control:hover,
.input-group-sm > .document-editor-file-input.form-field-uneditable.input-group-addon:hover,
.input-group-sm > .input-group-btn > .document-editor-file-input.form-field-uneditable.btn:hover, .document-editor-file-input.form-field-uneditable.input-sm:active, .input-group-sm > .document-editor-file-input.form-field-uneditable.form-control:active,
.input-group-sm > .document-editor-file-input.form-field-uneditable.input-group-addon:active,
.input-group-sm > .input-group-btn > .document-editor-file-input.form-field-uneditable.btn:active {
  background: var(--bg-content);
  border-color: color-mix(in srgb, var(--color-primary) 70%, transparent);
}

.document-editor-file-icon-svg {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 16px;
  height: auto;
}

.document-editor-file-icon {
  position: absolute;
  left: 6px;
  top: 0px;
  bottom: 5px;
  font-size: 21px;
  text-align: center;
  cursor: pointer;
}

.document-editor-file-remove-icon {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 30px;
  text-align: center;
  padding-top: 5px;
  background: var(--bg-content);
  border-left: 1px solid var(--border-content);
  border-radius: 0 6px 6px 0;
}

.document-editor-file-remove-icon-svg {
  width: 10px;
  height: auto;
}
.document-editor-file-remove-icon-svg path {
  fill: var(--text-lighter);
}
.document-editor-file-remove-icon:hover .document-editor-file-remove-icon-svg path {
  fill: var(--text-default);
}

.purchase-order-project-display {
  display: flex;
  align-items: flex-start;
  padding: 8px 0;
  border-radius: 6px;
}
.purchase-order-project-display .project-color {
  margin-top: 5px;
  margin-right: 10px;
}

.purchase-order-project-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.purchase-order-project-name {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.purchase-order-project-name:visited {
  color: var(--text-default);
}
.purchase-order-project-name:hover {
  color: var(--text-default);
  text-decoration: underline;
}

.purchase-order-project-client {
  font-size: 12px;
  font-weight: 400;
  line-height: 17.14px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.react-autocomplete-wrapper {
  position: relative;
}
.react-autocomplete-wrapper.absolute-positioning .react-autocomplete-menu {
  position: absolute;
  top: 100% !important;
  left: 0 !important;
}

.react-autocomplete-menu {
  position: fixed;
  z-index: 10;
  max-height: 140px;
  padding: 0px;
  font-size: 14px;
  font-family: var(--font-sans-serif);
  overflow: auto;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 3px;
}
.react-autocomplete-menu.override-positioning {
  top: 0;
  left: 0;
}

.react-autocomplete-item {
  padding: 8px 10px 7px;
  color: var(--text-default);
}
.react-autocomplete-item.highlighted {
  color: var(--color-primary-contrast);
  cursor: pointer;
  background: var(--color-primary);
}

/* |||||||||||||||||||||| Placeholder text |||||||||||||||||||||| */
::placeholder {
  color: var(--text-lighter) !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

/* |||||||||||||||||||||| Error Notice |||||||||||||||||||||| */
.form-error-banner {
  display: none;
  padding: 7px 15px 8px;
  color: var(--color-primary-contrast);
  font-size: 14px;
  font-weight: 600;
  background: var(--color-danger);
  text-align: center;
}
.form-error-banner.showing {
  display: block;
}
.form-error-banner.rounded {
  border-radius: 4px;
}

.form-add-new-link-container {
  display: block;
  text-align: right;
  margin-bottom: -25px;
  padding-top: 10px;
}

/* |||||||||||||||||||||| Form Inputs |||||||||||||||||||||| */
.form-group {
  position: relative;
  margin-bottom: 20px;
}

label {
  font-weight: 500;
}

.form-label,
.control-label {
  position: relative;
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
}
.form-label.form-dropdown-label,
.control-label.form-dropdown-label {
  margin-bottom: 15px;
}
.form-label.label-sm,
.control-label.label-sm {
  font-size: 12px;
}
.form-label .link-inline, .form-label .modal-payment-methods-item-edit-link,
.control-label .link-inline,
.control-label .modal-payment-methods-item-edit-link {
  font-size: inherit;
}
.form-label .link-right-inline,
.control-label .link-right-inline {
  float: right;
}

.form-sublabel {
  margin-bottom: 10px;
  margin-top: -7px;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.form-label-required-icon {
  position: relative;
  top: -4px;
  left: 5px;
  width: 7px;
  height: auto;
  font-size: 9px;
  color: var(--text-lighter);
}
.form-label-required-icon path {
  fill: var(--text-lighter);
}
.form-label-required-icon.form-label-required-icon-danger path {
  fill: var(--color-danger);
}

.form-label-info-icon {
  position: relative;
  top: -4px;
  left: 5px;
  font-size: 12px;
  color: var(--grey-c);
}

.form-label-link {
  position: relative;
  top: 0;
  padding-left: 9px;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.form-label-link-icon {
  position: relative;
  top: 0;
  width: 10px;
  height: auto;
  margin-left: 7px;
}
.form-label-link-icon path {
  fill: currentColor;
}

.form-control {
  height: 40px;
  padding: 11px 0 9px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-default);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--border-field);
  appearance: none;
  border-radius: 0;
  box-shadow: none;
}
.form-control:hover {
  border-bottom-color: var(--color-primary);
}
.form-control:focus {
  border-bottom: 1px solid var(--color-primary);
  box-shadow: 0 1px 0 var(--color-primary);
}
.has-success .form-control {
  border-color: var(--border-field);
  box-shadow: none;
}
.has-success .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: inset 0 -1px 0 var(--color-primary);
}
.has-error .form-control {
  border-color: var(--border-field);
  box-shadow: none;
}
.has-error .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: inset 0 -1px 0 var(--color-primary);
}

.input-md {
  font-size: 18px;
  font-weight: 400;
}

.input-lg, .input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
  height: 50px;
  font-size: 18px;
  padding: 14px 0 15px;
}

.input-xl {
  height: 50px;
  font-size: 24px;
  padding: 15px 0 15px;
  font-weight: 400;
}

.input-time {
  height: 80px;
  padding: 30px 0px 10px;
  text-align: center;
  font-size: 32px;
  line-height: 1;
  color: var(--text-default);
  border: 1px solid var(--border-field);
  border-radius: 4px;
}
.input-time:hover, .input-time:focus {
  border-color: var(--color-primary);
  box-shadow: none;
}
.input-time[disabled] {
  color: var(--text-muted);
  background: var(--bg-grey-fa);
  border-color: var(--border-content);
}
.input-time[disabled]:hover, .input-time[disabled]:focus {
  border-color: var(--border-content);
  box-shadow: none;
}

.form-control.input-copier {
  margin: auto;
  color: var(--text-muted);
  cursor: pointer;
  background: var(--bg-content-alt);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}
.form-control.input-copier:focus {
  border: 1px solid var(--color-primary);
  box-shadow: none;
}

.form-control.textarea-copier {
  margin: auto;
  color: var(--text-muted);
  cursor: pointer;
  background: var(--bg-field-disabled);
  border: 1px solid var(--border-content-alt);
}
.form-control.textarea-copier:focus {
  border: 1px solid var(--color-primary);
  box-shadow: none;
}

.form-control-uneditable {
  min-height: 40px;
  padding: 10px 0 10px;
  font-size: 14px;
  line-height: 1.428571429;
  color: var(--text-lighter);
  cursor: not-allowed;
  border-bottom: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}

textarea.form-control {
  padding-left: 10px;
  padding-right: 10px;
  min-height: 100px;
  background: var(--bg-field);
  border: 1px solid var(--border-field);
  resize: vertical;
  border-radius: 4px;
}
textarea.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: none;
}
textarea.form-control:hover {
  border-color: var(--color-primary);
}
.has-success textarea.form-control {
  box-shadow: none;
}
.has-success textarea.form-control:focus {
  box-shadow: none;
}
.has-error textarea.form-control {
  border-color: var(--border-field);
  box-shadow: none;
}
.has-error textarea.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: none;
}
textarea.form-control.h50 {
  min-height: 50px;
}

textarea.form-control[disabled] {
  background: var(--bg-field-disabled);
  opacity: 0.6;
}
textarea.form-control[disabled]:hover {
  border-color: var(--border-field);
}

.form-color-picker {
  margin-top: 40px;
}
.form-color-picker .twitter-picker {
  margin: 0 auto;
}
.form-color-picker .swatches-picker {
  background: var(--bg-field);
}
.modal .form-color-picker .swatches-picker > div > div {
  background: var(--bg-content-alt) !important;
}

.twitter-picker {
  background: var(--bg-field) !important;
  border: 1px solid var(--border-content) !important;
}
.twitter-picker #rc-editable-input-1 {
  color: var(--text-default) !important;
  background: var(--bg-field) !important;
}

.form-field-info {
  font-size: 12px;
  letter-spacing: 0em;
  text-align: left;
  color: var(--text-muted);
  margin-top: 5px;
}

.form-field-inner-label {
  position: absolute;
  right: 12px;
  top: 14.5px;
  line-height: 1;
  font-size: 12px;
  letter-spacing: 0em;
  text-align: right;
  color: var(--text-lighter);
}
.form-field-inner-label.input-smd {
  top: 12.5px;
  padding: 0;
}
.form-field-inner-label.input-sm, .input-group-sm > .form-field-inner-label.form-control,
.input-group-sm > .form-field-inner-label.input-group-addon,
.input-group-sm > .input-group-btn > .form-field-inner-label.btn {
  top: 9.5px;
  right: 10px;
  padding: 0;
}

.form-field-inner-label-bottom {
  bottom: 14.5px !important;
  top: auto !important;
}

.form-field {
  height: 40px;
  width: 100%;
  padding: 9px 10px;
  font-size: 14px;
  color: var(--text-default);
  background: var(--bg-field);
  border: 1px solid var(--border-field);
  appearance: none;
  border-radius: 6px;
  box-shadow: none;
  transition: all var(--transition-normal) ease;
}
.form-field:hover {
  border-color: var(--color-primary);
}
.form-field:focus {
  border-color: var(--color-primary);
}
.form-field.input-sm, .input-group-sm > .form-field.form-control,
.input-group-sm > .form-field.input-group-addon,
.input-group-sm > .input-group-btn > .form-field.btn {
  height: 30px;
  padding: 4px 7px;
  font-size: 14px;
  border-radius: 4px;
}
.form-field.input-smd {
  height: 36px;
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 5px;
}
.form-field.input-md {
  height: 46px;
  font-size: 14px;
  padding: 11px 12px 11px;
}
.form-field.input-lg, .input-group-lg > .form-field.form-control,
.input-group-lg > .form-field.input-group-addon,
.input-group-lg > .input-group-btn > .form-field.btn {
  height: 50px;
  font-size: 18px;
  padding: 13px 15px;
}
.form-field[disabled] {
  color: var(--text-muted);
  background: var(--bg-grey-fa);
  border-color: var(--border-content);
}
.form-field[disabled]:hover, .form-field[disabled]:focus {
  border-color: var(--border-content);
  box-shadow: none;
}
.form-field.with-error {
  border-color: var(--color-danger);
}
.form-field.with-icon {
  position: relative;
  padding-left: 34px;
}
.input-sm .form-field.with-icon, .input-group-sm > .form-control .form-field.with-icon,
.input-group-sm > .input-group-addon .form-field.with-icon,
.input-group-sm > .input-group-btn > .btn .form-field.with-icon {
  padding-left: 30px;
}
.form-field.with-label-margin {
  margin-top: 30px;
}

textarea.form-field {
  display: block;
  padding: 9px 10px;
  min-height: 40px;
  resize: vertical;
  border-radius: 6px;
}
textarea.form-field:focus {
  resize: vertical;
}
textarea.form-field.textarea-smd {
  max-width: 100%;
  min-height: 60px;
}
textarea.form-field.textarea-md {
  max-width: 100%;
  min-height: 100px;
}
textarea.form-field.textarea-mlg {
  max-width: 100%;
  min-height: 160px;
}
textarea.form-field.textarea-lg {
  max-width: 100%;
  min-height: 200px;
}
textarea.form-field.input-sm, .input-group-sm > textarea.form-field.form-control,
.input-group-sm > textarea.form-field.input-group-addon,
.input-group-sm > .input-group-btn > textarea.form-field.btn {
  min-height: 30px;
}

.form-field-icon {
  position: absolute;
  top: 50%;
  width: 15px;
  height: auto;
  transform: translateY(-50%);
}
.form-field-icon path {
  fill: var(--text-lighter);
}
.form-field-icon.icon-left {
  left: 10px;
  right: auto;
}
.input-sm .form-field-icon.icon-left, .input-group-sm > .form-control .form-field-icon.icon-left,
.input-group-sm > .input-group-addon .form-field-icon.icon-left,
.input-group-sm > .input-group-btn > .btn .form-field-icon.icon-left {
  left: 12px;
  width: 12px;
}
.form-field-icon.icon-right {
  left: auto;
  right: 10px;
}

.form-field-ghost {
  height: 40px;
  padding: 10px 10px 9px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
  background: none;
  border: 1px solid transparent;
  appearance: none;
  border-radius: 6px;
  box-shadow: none;
  transition: all var(--transition-fast) ease;
}
.form-field-ghost:hover {
  border-color: var(--border-content);
}
.form-field-ghost:focus {
  border-color: var(--color-primary);
}
.form-field-ghost.input-sm, .input-group-sm > .form-field-ghost.form-control,
.input-group-sm > .form-field-ghost.input-group-addon,
.input-group-sm > .input-group-btn > .form-field-ghost.btn {
  height: 30px;
  padding: 4px 7px 2px;
  font-size: 14px;
  border-radius: 4px;
}
.form-field-ghost.with-icon {
  padding-left: 30px;
}
.form-field-ghost.ghost-form-pull-left {
  margin-left: -10px;
}

.form-field-ghost-icon {
  position: absolute;
  left: 7px;
  top: 2px;
  font-size: 21px;
  cursor: pointer;
  color: var(--text-muted);
}
.form-field-ghost.input-sm .form-field-ghost-icon, .input-group-sm > .form-field-ghost.form-control .form-field-ghost-icon,
.input-group-sm > .form-field-ghost.input-group-addon .form-field-ghost-icon,
.input-group-sm > .input-group-btn > .form-field-ghost.btn .form-field-ghost-icon {
  top: 1px;
}

.form-field-view-only {
  height: 40px;
  width: 100%;
  padding: 9px 10px 9px;
  font-size: 14px;
  color: var(--text-muted);
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
  appearance: none;
  border-radius: 6px;
}
.form-field-view-only.textarea {
  height: 80px;
}
.form-field-view-only.file-upload {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 20px 20px;
  font-weight: 600;
}
.form-field-view-only.placeholder {
  color: var(--text-lighter);
  cursor: default;
}
.form-field-view-only.input-sm, .input-group-sm > .form-field-view-only.form-control,
.input-group-sm > .form-field-view-only.input-group-addon,
.input-group-sm > .input-group-btn > .form-field-view-only.btn {
  height: 30px;
  padding: 4px 7px;
  font-size: 14px;
  border-radius: 4px;
}
.form-field-view-only.input-smd {
  height: 36px;
  padding: 7px 10px;
  font-size: 14px;
  border-radius: 5px;
}
.form-field-view-only.input-height-auto {
  height: auto;
  min-height: 40px;
}
.form-field-view-only.with-icon {
  position: relative;
  padding-left: 34px;
}
.input-sm .form-field-view-only.with-icon, .input-group-sm > .form-control .form-field-view-only.with-icon,
.input-group-sm > .input-group-addon .form-field-view-only.with-icon,
.input-group-sm > .input-group-btn > .btn .form-field-view-only.with-icon {
  padding-left: 30px;
}

.form-field-view-only-icon {
  height: 18px;
  margin-right: 10px;
}
.form-field-view-only-icon g {
  fill: var(--text-lighter);
}

.form-field-view-only-svg {
  height: 18px;
  width: auto;
  margin-right: 10px;
}
.form-field-view-only-svg path {
  stroke: var(--text-lighter);
}

.form-field-prepend-wrapper {
  display: flex;
  align-content: stretch;
}

.form-field-prepend-text {
  height: 40px;
  margin-right: -5px;
  padding: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-lighter);
  cursor: default;
  background: var(--bg-field-disabled);
  border-radius: 4px 0 0 4px;
}

.form-field-input-span {
  display: inline-block;
  width: 100%;
}

.form-field-uneditable {
  height: 40px;
  width: 100%;
  padding: 9px 10px;
  font-size: 14px;
  color: var(--text-lighter);
  cursor: not-allowed;
  background: var(--bg-field-disabled);
  border: 1px solid var(--border-field);
  appearance: none;
  border-radius: 6px;
  box-shadow: none;
  transition: all var(--transition-normal) ease;
}
.form-field-uneditable.input-sm, .input-group-sm > .form-field-uneditable.form-control,
.input-group-sm > .form-field-uneditable.input-group-addon,
.input-group-sm > .input-group-btn > .form-field-uneditable.btn {
  height: 30px;
  padding: 3px 7px;
  font-size: 14px;
  border-radius: 3px;
}
.form-field-uneditable.input-smd {
  height: 36px;
  padding: 7px 10px;
  font-size: 14px;
}

.form-field-error {
  display: block;
  margin-top: -2px;
  width: 100%;
  padding: 4px 10px 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary-contrast);
  background: var(--color-danger);
  border-radius: 0 0 4px 4px;
}
.form-field-error.form-field-error-pull-left {
  margin-top: 0;
  margin-left: calc(var(--ghost-input-side-width) * -1);
}

.form-field-text-error {
  position: relative;
  top: 5px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans-serif);
  color: var(--color-danger-dark);
}

.form-field-trailing-text {
  position: absolute;
  right: 10px;
  top: 50%;
  color: var(--text-lighter);
  font-size: 14px;
  transform: translateY(-50%);
}

.form-field-toggle-password-icon {
  position: absolute;
  top: 39px;
  right: 16px;
}
@media (max-width: 344px) {
  .form-field-toggle-password-icon {
    display: none;
  }
}

.form-field-password-strength {
  float: right;
  color: var(--color-primary);
}
.form-field-password-strength.weak {
  color: var(--color-danger);
}

.form-field-clear-icon {
  position: absolute;
  width: 11px;
  height: 11px;
  top: 50%;
  margin-left: -22px;
  width: 10px;
  height: auto;
  cursor: pointer;
  transform: translateY(-50%);
}
.form-field-clear-icon path {
  fill: var(--color-danger);
}

.ghost-form-control, .ghost-form-display {
  position: relative;
  z-index: 1;
  min-height: 30px;
  padding: 5px var(--ghost-input-side-width);
  line-height: 1.41;
  font-size: 16px;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 4px;
}
.ghost-form-control:hover, .ghost-form-display:hover, .ghost-form-control:active, .ghost-form-display:active {
  background: var(--bg-input-hover);
  border: none;
}
.ghost-form-control:focus, .ghost-form-display:focus {
  z-index: 2;
  color: var(--text-default);
  background: var(--bg-field);
  border: none;
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.ghost-form-control.ghost-form-pull-left, .ghost-form-pull-left.ghost-form-display {
  width: 100%;
  margin-left: calc(var(--ghost-input-side-width) * -1);
}
.ghost-form-control.ghost-form-pull-right, .ghost-form-pull-right.ghost-form-display {
  width: 100%;
  margin-left: auto;
  margin-right: calc(var(--ghost-input-side-width) * -1);
}
.ghost-form-control.input-xs, .input-xs.ghost-form-display {
  height: auto;
  min-height: 20px;
  padding: 2px var(--ghost-input-side-width) 2px;
  font-size: 12px;
}
.ghost-form-control.input-sm, .input-sm.ghost-form-display, .input-group-sm > .ghost-form-control.form-control, .input-group-sm > .form-control.ghost-form-display,
.input-group-sm > .ghost-form-control.input-group-addon,
.input-group-sm > .input-group-addon.ghost-form-display,
.input-group-sm > .input-group-btn > .ghost-form-control.btn,
.input-group-sm > .input-group-btn > .btn.ghost-form-display {
  height: auto;
  min-height: 30px;
  padding: 5.5px var(--ghost-input-side-width) 5px;
  font-size: 14px;
}
.ghost-form-control.input-md, .input-md.ghost-form-display {
  height: auto;
  min-height: 40px;
  padding: 8px var(--ghost-input-side-width) 7px;
}
.ghost-form-control.input-mlg, .input-mlg.ghost-form-display {
  height: auto;
  min-height: 40px;
  font-size: 18px;
  padding: 8px var(--ghost-input-side-width) 7px;
  border-radius: 4px;
}
.ghost-form-control.input-lg, .input-lg.ghost-form-display, .input-group-lg > .ghost-form-control.form-control, .input-group-lg > .form-control.ghost-form-display,
.input-group-lg > .ghost-form-control.input-group-addon,
.input-group-lg > .input-group-addon.ghost-form-display,
.input-group-lg > .input-group-btn > .ghost-form-control.btn,
.input-group-lg > .input-group-btn > .btn.ghost-form-display {
  height: auto;
  min-height: 40px;
  font-size: 22px;
  padding: 4px var(--ghost-input-side-width);
  border-radius: 4px;
}
.ghost-form-control.input-xl, .input-xl.ghost-form-display {
  height: auto;
  min-height: 50px;
  font-size: 30px;
  padding: 4px 7px 4px;
  border-radius: 6px;
}
.ghost-form-control.disabled, .disabled.ghost-form-display {
  cursor: not-allowed;
  pointer-events: none;
  background: transparent;
}
.ghost-form-control.ghost-hidden, .ghost-hidden.ghost-form-display {
  position: absolute;
  display: none !important;
  pointer-events: none;
  opacity: 0;
}

textarea.ghost-form-control, textarea.ghost-form-display,
.ghost-textarea {
  display: block;
  min-height: 54px;
  width: 100%;
  resize: vertical;
  padding: 5px 7px 5px;
  word-break: break-word;
  white-space: pre-wrap;
}
textarea.ghost-form-control:focus, textarea.ghost-form-display:focus,
.ghost-textarea:focus {
  resize: vertical;
}
textarea.ghost-form-control.with-resize, textarea.with-resize.ghost-form-display, textarea.ghost-form-control.with-resize:focus,
.ghost-textarea.with-resize,
.ghost-textarea.with-resize:focus {
  min-height: 0;
  resize: none;
}
textarea.ghost-form-control.input-sm, textarea.input-sm.ghost-form-display, .input-group-sm > textarea.ghost-form-control.form-control, .input-group-sm > textarea.form-control.ghost-form-display,
.input-group-sm > textarea.ghost-form-control.input-group-addon,
.input-group-sm > textarea.input-group-addon.ghost-form-display,
.input-group-sm > .input-group-btn > textarea.ghost-form-control.btn,
.input-group-sm > .input-group-btn > textarea.btn.ghost-form-display,
.ghost-textarea.input-sm,
.input-group-sm > .ghost-textarea.form-control,
.input-group-sm > .ghost-textarea.input-group-addon,
.input-group-sm > .input-group-btn > .ghost-textarea.btn {
  height: auto;
  min-height: 30px;
  padding: 5.5px var(--ghost-input-side-width) 5px;
  font-size: 14px;
  resize: none;
}
textarea.ghost-form-control.input-md, textarea.input-md.ghost-form-display,
.ghost-textarea.input-md {
  font-size: 14px;
  padding: 6px var(--ghost-input-side-width) 7px;
  border-radius: 4px;
}
textarea.ghost-form-control.input-md, textarea.input-md.ghost-form-display, textarea.ghost-form-control.input-md:focus,
.ghost-textarea.input-md,
.ghost-textarea.input-md:focus {
  height: auto;
  min-height: 40px;
}
textarea.ghost-form-control.input-lg, textarea.input-lg.ghost-form-display, .input-group-lg > textarea.ghost-form-control.form-control, .input-group-lg > textarea.form-control.ghost-form-display,
.input-group-lg > textarea.ghost-form-control.input-group-addon,
.input-group-lg > textarea.input-group-addon.ghost-form-display,
.input-group-lg > .input-group-btn > textarea.ghost-form-control.btn,
.input-group-lg > .input-group-btn > textarea.btn.ghost-form-display,
.ghost-textarea.input-lg,
.input-group-lg > .ghost-textarea.form-control,
.input-group-lg > .ghost-textarea.input-group-addon,
.input-group-lg > .input-group-btn > .ghost-textarea.btn {
  font-size: 18px;
  padding: 6px var(--ghost-input-side-width) 7px;
  border-radius: 4px;
}
textarea.ghost-form-control.input-lg, textarea.input-lg.ghost-form-display, .input-group-lg > textarea.ghost-form-control.form-control, .input-group-lg > textarea.form-control.ghost-form-display,
.input-group-lg > textarea.ghost-form-control.input-group-addon,
.input-group-lg > textarea.input-group-addon.ghost-form-display,
.input-group-lg > .input-group-btn > textarea.ghost-form-control.btn,
.input-group-lg > .input-group-btn > textarea.btn.ghost-form-display, textarea.ghost-form-control.input-lg:focus,
.ghost-textarea.input-lg,
.input-group-lg > .ghost-textarea.form-control,
.input-group-lg > .ghost-textarea.input-group-addon,
.input-group-lg > .input-group-btn > .ghost-textarea.btn,
.ghost-textarea.input-lg:focus {
  height: auto;
  min-height: 40px;
}

.ghost-form-datepicker.ghost-form-pull-left {
  width: 100%;
  margin-left: calc(var(--ghost-input-side-width) * -1);
}
.ghost-form-datepicker.ghost-form-datepicker-portaled {
  width: auto;
  margin: 0;
}
.ghost-form-datepicker.ghost-form-datepicker-portaled .SingleDatePicker_picker__directionRight {
  right: 0 !important;
}
.ghost-form-datepicker.ghost-form-datepicker-portaled .SingleDatePicker_picker__directionLeft {
  left: 0 !important;
}
.ghost-form-datepicker.ghost-form-pull-right {
  width: 100%;
  margin-left: var(--ghost-input-side-width);
}
.ghost-form-datepicker.ghost-form-pull-left {
  width: 100%;
  margin-left: calc(var(--ghost-input-side-width) * -1);
}
.ghost-form-datepicker.input-sm, .input-group-sm > .ghost-form-datepicker.form-control,
.input-group-sm > .ghost-form-datepicker.input-group-addon,
.input-group-sm > .input-group-btn > .ghost-form-datepicker.btn {
  padding: 0;
}
.ghost-form-datepicker.input-sm .DateInput_input, .input-group-sm > .ghost-form-datepicker.form-control .DateInput_input,
.input-group-sm > .ghost-form-datepicker.input-group-addon .DateInput_input,
.input-group-sm > .input-group-btn > .ghost-form-datepicker.btn .DateInput_input {
  height: 30px;
  font-size: 14px;
}
.ghost-form-datepicker.text-left .SingleDatePicker .DateInput_input {
  padding-left: calc(var(--ghost-input-side-width) - 1px);
  text-align: left;
}
.ghost-form-datepicker.ghost-hidden {
  position: absolute;
  display: none !important;
  pointer-events: none;
  opacity: 0;
}
.list-item-in .ghost-form-datepicker {
  position: relative;
  z-index: 3;
}
.list-grid-item-cell .ghost-form-datepicker {
  margin-left: calc(var(--ghost-input-side-width) * -1);
}

.ghost-form-select.ghost-form-pull-left {
  width: 100%;
  margin-left: calc(var(--ghost-input-side-width) * -1);
}
.ghost-form-select.ghost-form-pull-right {
  width: 100%;
  margin-left: var(--ghost-input-side-width);
}
.ghost-form-select.ghost-hidden {
  position: absolute;
  display: none !important;
  pointer-events: none;
  opacity: 0;
}

.ghost-input-toggle {
  cursor: pointer;
  word-break: break-word;
}
.ghost-input-toggle.ghost-input-toggle-placeholder {
  color: var(--text-lighter);
}

.ghost-input-toggle-with-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ghost-input-toggle-with-link .ghost-input-toggle-link {
  display: none;
}
.ghost-input-toggle-with-link:hover .ghost-input-toggle-link {
  display: flex;
}

.ghost-input-wrapper {
  position: relative;
}
.ghost-input-wrapper.has-error {
  z-index: 2;
}
.ghost-input-wrapper.ghost-input-wrapper--invisible {
  opacity: 0;
}
.list-item-in .ghost-input-wrapper {
  margin-top: -4px;
  margin-bottom: -7px;
}

.ghost-form-inline-text {
  position: relative;
  margin-right: 3px;
  vertical-align: middle;
}

.ghost-form-inline-input {
  position: relative;
  max-width: 100%;
  vertical-align: middle;
  top: 0;
}
.ghost-form-inline-input.with-trailing-space {
  margin-right: 5px;
}
.ghost-form-inline-input.with-trailing-percent {
  padding-right: 12px;
}
.ghost-form-inline-input.with-trailing-percent:after {
  position: absolute;
  content: "%";
  right: -1px;
  top: -3px;
}
.ghost-form-inline-input.with-leading-currency:before {
  content: attr(data-currency);
}
.ghost-form-inline-input .ghost-input-toggle {
  display: inline-block;
  width: auto;
  padding-left: 0;
  padding-right: 0;
}
.ghost-form-inline-input .ghost-form-control, .ghost-form-inline-input .ghost-form-display {
  display: inline-block;
  width: auto;
  font-size: inherit;
}

.ghost-form-display {
  font-weight: 500;
  cursor: default;
  word-wrap: break-word;
}
.ghost-form-display:hover, .ghost-form-display:active {
  background: none;
  border: none;
}

.ghost-input-tester {
  position: absolute;
  top: -9999px;
  left: -9999px;
  word-break: break-word;
  white-space: pre-wrap;
}

.has-success .form-control-feedback {
  color: var(--color-primary);
}
.has-error .form-control-feedback {
  color: var(--color-danger);
}

.help-block {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 102%;
  margin: 0;
  padding: 5px 12px 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
  border-radius: 4px;
}
.help-block:after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  content: "";
  border-style: solid;
  border-width: 8px 10px 0 10px;
}
.help-block a {
  color: var(--color-primary-contrast);
  text-decoration: underline;
}
.has-success .help-block {
  color: var(--color-primary-contrast);
  background-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 85%, transparent);
  animation: helpblock-fade-in var(--transition-normal) 1 forwards;
}
.has-success .help-block:after {
  border-color: var(--color-primary) transparent transparent transparent;
  border-color: color-mix(in srgb, var(--color-primary) 85%, transparent) transparent transparent transparent;
}
.has-error .help-block, .help-block.field-error {
  color: var(--color-primary-contrast);
  background-color: var(--color-danger);
  background-color: color-mix(in srgb, var(--color-danger) 85%, transparent);
  animation: helpblock-fade-in var(--transition-normal) 1 forwards;
}
.has-error .help-block:after, .help-block.field-error:after {
  border-color: var(--color-danger) transparent transparent transparent;
  border-color: color-mix(in srgb, var(--color-danger) 85%, transparent) transparent transparent transparent;
}
.help-block.bottom {
  bottom: auto;
  top: calc(100% + 8px);
}
.help-block.bottom:after {
  top: -8px;
  transform: rotate(180deg);
}

.checkbox-focused, .checkbox-label:hover .checkbox-toggle {
  border: 1px solid var(--color-primary);
}

.checkbox-label {
  position: relative;
  margin: 0;
  padding-left: 35px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  user-select: none;
}
.checkbox-label.checkbox-xs {
  min-height: 16px;
  padding-left: 22px;
  font-size: 12px;
}
.checkbox-label.checkbox-16 {
  min-height: 16px;
  padding-left: 30px;
  font-size: 14px;
}
.checkbox-label.checkbox-sm {
  min-height: 20px;
  padding-left: 26px;
  font-size: 14px;
}
.checkbox-label.checkbox-sm-dropdown {
  padding-left: 26px;
  font-size: 14px;
}
.checkbox-label.checkbox-sm-contained {
  display: block;
  padding: 4px 5px 4px 30px;
  text-align: left;
  color: var(--text-default);
  font-size: 14px;
  border: 1px solid var(--border-field);
  border-radius: 4px;
}
.checkbox-label.checkbox-sm-contained:hover:not(.checkbox-label-disabled) {
  border-color: var(--color-primary);
}
.checkbox-label.checkbox-label-disabled {
  cursor: not-allowed;
  opacity: 0.6;
  color: var(--text-muted);
}
.checkbox-label.checkbox-label-disabled.checkbox-sm-contained {
  background-color: var(--bg-grey-fa);
  border-color: var(--border-content);
}
.checkbox-label.checkbox-label-disabled.checkbox-sm-contained:hover {
  border-color: var(--border-content);
}
.checkbox-label.checkbox-label-disabled:hover .checkbox-toggle {
  border: none;
}
.checkbox-label.checkbox-label-disabled:hover .checkbox-unselected {
  border-color: var(--border-content);
}
.checkbox-label:hover .checkbox-toggle {
  border: none;
}
.checkbox-label.checkbox-label-disabled {
  cursor: not-allowed;
}
.modal-checkbox-field-wrapper .checkbox-label.checkbox-sm {
  padding-left: 25px;
}
.modal .checkbox-label.checkbox-sm-contained {
  background: var(--bg-field);
}

.checkbox-input {
  position: absolute;
  left: -9999px;
}
.checkbox-input:checked:focus ~ .checkbox-unselected, .checkbox-input:not(:checked):focus ~ .checkbox-unselected {
  border-color: var(--color-primary);
}
.checkbox-label .checkbox-input:checked ~ .checkbox-unselected {
  border-color: var(--color-primary);
}

.checkbox-toggle {
  position: absolute;
  width: 22px;
  height: 22px;
  left: 0;
  top: 1px;
  line-height: 50px;
  font-size: 22px;
  overflow: hidden;
  text-align: center;
  border-radius: 7px;
}
.checkbox-16 .checkbox-toggle {
  width: 16px;
  height: 16px;
  top: 1px;
  line-height: 42px;
  font-size: 10px;
  border-radius: 6px;
}
.checkbox-sm .checkbox-toggle {
  width: 18px;
  height: 18px;
  top: 1.5px;
  line-height: 48px;
  border-radius: 6px;
}
.checkbox-sm-dropdown .checkbox-toggle {
  width: 18px;
  height: 18px;
  line-height: 48px;
  border-radius: 6px;
}
.checkbox-sm-contained .checkbox-toggle {
  width: 16px;
  height: 16px;
  left: 7px;
  top: 6px;
  line-height: 48px;
  font-size: 18px;
  border-radius: 4px;
}
.checkbox-xs .checkbox-toggle {
  width: 14px;
  height: 14px;
  line-height: 42px;
  font-size: 10px;
  border-radius: 4px;
}
.modal-checkbox-field-wrapper .checkbox-toggle {
  top: 0;
}
.modal-checkbox-field-wrapper .checkbox-sm .checkbox-toggle {
  top: 1px;
}

.checkbox-toggle.disabled {
  cursor: not-allowed;
}
.checkbox-toggle.disabled .checkbox-selected {
  color: var(--text-muted);
  background: var(--bg-field-disabled);
}
.checkbox-toggle.disabled .checkbox-selected path {
  stroke: var(--text-muted);
}
.checkbox-toggle.disabled .checkbox-unselected {
  background: var(--bg-field-disabled);
  border: 2px solid var(--border-content);
}
.checkbox-toggle.disabled .checkbox-unselected:hover {
  border-color: var(--border-content);
}

.checkbox-selected {
  position: absolute;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: var(--color-primary-contrast);
  line-height: 18px;
  background-color: var(--color-primary);
}
.checkbox-input:checked ~ .checkbox-toggle .checkbox-selected, .checkbox-toggle.checked .checkbox-selected {
  display: flex;
}
.checkbox-input:checked:hover:not(:disabled) ~ .checkbox-toggle .checkbox-selected {
  background: color-mix(in srgb, var(--color-primary) 97%, var(--black));
}

.checkbox-unselected {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: var(--grey-d);
  cursor: pointer;
  background: var(--white);
  border: 2px solid var(--grey-d);
  border-radius: 7px;
}
.checkbox-xs .checkbox-unselected {
  border-radius: 4px;
}
.checkbox-16 .checkbox-unselected {
  border-radius: 6px;
}
.checkbox-sm .checkbox-unselected {
  border-radius: 6px;
}
.checkbox-sm-dropdown .checkbox-unselected {
  border-radius: 6px;
}
.checkbox-unselected:hover, .checkbox-label:hover .checkbox-unselected {
  border-color: var(--color-primary);
}
.checkbox-unselected.checkbox-unselected--with-partial-icon {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.checkbox-unselected.checkbox-unselected--with-partial-icon:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 8px;
  height: 2.5px;
  background: var(--white);
  border-radius: 2px;
}
.checkbox-16 .checkbox-unselected.checkbox-unselected--with-partial-icon:after {
  left: 2px;
  top: 4.5px;
  width: 8px;
  height: 3px;
}

.checkbox-selected-icon,
.checkbox-unselected-icon {
  position: relative;
  top: 0.5px;
  font-size: 30px;
  line-height: 1;
}
.checkbox-sm .checkbox-selected-icon, .checkbox-sm-dropdown .checkbox-selected-icon, .checkbox-sm-contained .checkbox-selected-icon,
.checkbox-sm .checkbox-unselected-icon,
.checkbox-sm-dropdown .checkbox-unselected-icon,
.checkbox-sm-contained .checkbox-unselected-icon {
  top: 0;
}
.checkbox-xs .checkbox-selected-icon,
.checkbox-xs .checkbox-unselected-icon {
  top: 0;
}
.checkbox-16 .checkbox-selected-icon,
.checkbox-16 .checkbox-unselected-icon {
  top: 0;
  width: 10px;
  height: auto;
}

.checkbox-selected-icon {
  width: 13px;
  height: auto;
}
.checkbox-sm .checkbox-selected-icon, .checkbox-sm-dropdown .checkbox-selected-icon, .checkbox-sm-contained .checkbox-selected-icon {
  width: 10px;
  height: auto;
}
.checkbox-xs .checkbox-selected-icon {
  width: 8px;
  height: auto;
}
.checkbox-selected-icon path {
  stroke: var(--white);
}

.checkbox-toggle-copy {
  color: var(--text-muted);
  transition: all var(--transition-normal) ease;
}
.checkbox-label:hover .checkbox-toggle-copy {
  color: var(--text-muted);
}
.checkbox-input:checked ~ .checkbox-toggle-copy, .checkbox-toggle.checked .checkbox-toggle-copy {
  color: var(--text-default);
}

.radio-label {
  position: relative;
  display: block;
  margin-bottom: 10px;
  padding: 0 0 0 28px;
  font-weight: 400;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
}
.radio-label:last-child {
  margin-bottom: 0;
}
.radio-label.disabled {
  pointer-events: none;
  opacity: 0.5;
}
.radio-label.input-sm, .input-group-sm > .radio-label.form-control,
.input-group-sm > .radio-label.input-group-addon,
.input-group-sm > .input-group-btn > .radio-label.btn {
  font-size: 14px;
  height: auto;
  line-height: inherit;
}

.radio-label input[type=radio] {
  position: absolute;
  left: -9999px;
  outline: none;
  appearance: none;
}
.radio-label input[type=radio]:checked ~ .radio-label-copy {
  color: var(--text-default);
}
.radio-label input[type=radio]:checked ~ .radio-fill {
  background: var(--white);
  border-color: color-mix(in srgb, var(--color-primary) 80%, transparent);
}
.radio-label input[type=radio]:checked ~ .radio-fill .radio-fill-in {
  background: var(--color-primary);
}

.radio-label-copy {
  color: var(--text-muted);
}
.radio-label:hover .radio-label-copy {
  color: var(--text-muted);
}
.radio-label input[type=radio]:checked ~ .radio-label-copy {
  color: var(--text-default);
}

.radio-label-subcopy {
  font-weight: 400;
  color: var(--text-muted);
}

.radio-fill {
  position: absolute;
  display: block;
  top: 4px;
  left: 0;
  height: 16px;
  width: 16px;
  background: var(--grey-f5);
  border: 1px solid color-mix(in srgb, var(--black) 18%, transparent);
  border-radius: 100%;
  transition: all var(--transition-fast) ease;
}
.input-sm .radio-fill, .input-group-sm > .form-control .radio-fill,
.input-group-sm > .input-group-addon .radio-fill,
.input-group-sm > .input-group-btn > .btn .radio-fill {
  top: 2px;
}
.radio-fill.radio-fill-sm {
  top: 2px;
}
.radio-fill.radio-sm {
  width: 13px;
  height: 13px;
}
.radio-fill.radio-fill-white-background {
  background: var(--white);
  border: 2px solid var(--grey-d);
}

.radio-fill-in {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 3px;
  background: transparent;
  border-radius: 50%;
  transition: all var(--transition-fast) ease;
}
.radio-fill.radio-sm .radio-fill-in {
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 2px;
}

.form-dropdown {
  min-height: 50px;
  line-height: 46px;
  font-size: 18px;
}
.form-dropdown.without-border .dropdown-label:after {
  display: none;
}
.form-dropdown .dropdown-label {
  top: 3px;
}
.form-dropdown .dropdown-label:after {
  bottom: 0px;
}
.form-dropdown .dropdown-label-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-wide {
  width: 100%;
}
.select-wide .dropdown-label {
  width: 100%;
}
.select-wide .dropdown-item {
  width: 100%;
}

.form-select {
  min-height: 40px;
  line-height: 40px;
  font-size: 16px;
}
.form-select .dropdown-label {
  display: block;
  top: 0;
  height: 40px;
  min-height: 40px;
  padding: 0 25px 0 10px;
  border: 1px solid var(--border-field);
  border-radius: 4px;
  box-shadow: none;
  transition: all var(--transition-normal) ease;
}
.form-select .dropdown-label:hover {
  border-color: var(--color-primary);
}
.form-select .dropdown-label:after {
  display: none;
}
.form-select .dropdown-caret {
  margin-top: -18px;
}

.btn-loading {
  cursor: progress;
  color: rgba(255, 255, 255, 0.2) !important;
}

.btn-loading-wrap {
  position: absolute;
  z-index: 2;
  left: -1px;
  top: -1px;
  right: -1px;
  bottom: -1px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 6px;
}

.btn-loading-circles {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  transform: translateY(-50%);
}

.btn-loading-circle {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 4px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: loading-btn var(--transition-slower) ease-in-out infinite;
}
.btn-loading-circle:nth-child(1) {
  animation-delay: 0;
}
.btn-loading-circle:nth-child(2) {
  animation-delay: 0.05s;
}
.btn-loading-circle:nth-child(3) {
  animation-delay: var(--transition-fast);
}
.btn-loading-circle:nth-child(4) {
  animation-delay: var(--transition-fast);
}

.btn-loading-sm {
  cursor: progress;
  color: color-mix(in srgb, var(--black) 40%, transparent) !important;
  opacity: 0.8;
}

.btn-loading-sm-wrap {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
}

.btn-loading-sm-circles {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  margin-top: -9px;
}

.btn-loading-sm-circle {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 4px;
  background: color-mix(in srgb, var(--text-lighter) 70%, transparent);
  border-radius: 50%;
  animation: loading var(--transition-slower) ease-in-out infinite;
}
.btn-loading-sm-circle:nth-child(1) {
  animation-delay: 0;
}
.btn-loading-sm-circle:nth-child(2) {
  animation-delay: var(--transition-fast);
}
.btn-loading-sm-circle:nth-child(3) {
  animation-delay: var(--transition-normal);
}
.btn-loading-sm-circle:nth-child(4) {
  animation-delay: var(--transition-medium);
}

.item-remove {
  position: absolute;
  top: 21px;
  right: -32px;
  font-size: 15px;
  color: var(--border-content-alt);
  cursor: pointer;
  transition: all var(--transition-normal) ease;
}
.item-remove:hover {
  color: var(--text-lightest);
}
.item-remove.-invoice {
  z-index: 2;
  right: 10px;
  top: 12px;
}
@media (min-width: 768px) {
  .item-remove.-invoice {
    right: 20px;
    top: 14px;
  }
}
.item-remove.-expense-item {
  right: 0;
  top: 6px;
}
@media (min-width: 480px) {
  .item-remove.-expense-item {
    right: -26px;
  }
}
.item-remove.-milestone {
  top: 36px;
  right: -30px;
  bottom: 3px;
  font-size: 22px;
}
.item-remove.-sendcontract {
  position: relative;
  top: -27px;
  right: 23px;
}
.item-remove.-fee-table {
  right: 0;
  top: 12px;
}

.forms-page {
  padding-bottom: 120px;
  background: var(--bg-grey-fc);
}

.forms-page-in {
  min-height: var(--minimum-page-height-desktop);
  padding: 0 0 60px;
}
@media (min-width: 768px) {
  .forms-page-in {
    padding: 0 0 80px;
  }
}

.forms-section {
  padding: 20px;
  background: var(--bg-content);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--black) 15%, transparent);
}
@media (min-width: 480px) {
  .forms-section {
    padding: 40px;
  }
}

.forms-page-editing-notice {
  position: relative;
  margin: 20px 0;
  padding: 15px 15px 13px 58px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-info-dark);
  border: 1px solid var(--text-info-dark);
  border-radius: 5px;
}
.forms-page-editing-notice a {
  color: var(--text-info-dark);
  text-decoration: underline;
}
.forms-page-editing-notice a:focus, .forms-page-editing-notice a:visited {
  color: var(--text-info-dark);
}
.forms-page-editing-notice a:hover, .forms-page-editing-notice a:active {
  color: color-mix(in srgb, var(--text-info-dark) 95%, transparent);
}
.forms-page-editing-notice .settings-page-editing-notice-icon, .forms-page-editing-notice .settings-page-editing-lock-icon {
  color: var(--text-info-dark);
}

.form-questionaire-form {
  max-width: var(--questionnaire-width);
  margin: auto;
}
.form-questionaire-form #error_explanation {
  padding: 20px 20px 18px;
  text-align: center;
  font-size: 12px;
  border: 1px solid var(--color-danger);
}
.form-questionaire-form .form-group {
  margin-bottom: 40px;
}
.form-questionaire-form .form-control {
  padding-left: 0;
  padding-right: 0;
  font-weight: 600;
}

.forms-page-btn-notice {
  margin-top: 20px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted-alt);
}

.form-help {
  position: absolute;
  display: none;
  top: 2px;
  right: 0;
  padding: 30px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: default;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  transition: all var(--transition-normal) ease;
  border-radius: 4px;
}
@media (min-width: 768px) {
  .form-help:hover {
    color: var(--text-muted);
  }
  .form-help.showing-help {
    display: block;
    z-index: 0;
    animation: form-tip-fade-in var(--transition-normal) 1 forwards;
  }
}
@media (min-width: 992px) {
  .form-help {
    font-size: 16px;
  }
}

.error-message {
  display: block;
  padding: 12px 0;
  font-weight: 600;
  font-size: 14px;
  font-family: var(--font-sans-serif);
  text-align: center;
  background: none;
  border-radius: 0;
  line-height: auto;
  color: var(--color-danger-dark);
}
.error-message.left-align {
  text-align: left;
}

.ghost--toggle {
  z-index: 3;
  padding: 5px 7px;
  display: flex;
  border-radius: 3px;
  transition: background-color var(--transition-normal) ease;
  position: relative;
  width: 100%;
  flex-grow: 1;
}
.ghost--toggle:hover {
  background-color: var(--bg-input-hover);
}
.ghost--toggle.ghost--toggle--focused {
  z-index: 10;
  width: 100%;
  background-color: var(--bg-content);
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--color-primary);
}
.ghost--toggle.ghost--toggle--wauto {
  width: auto;
  flex-grow: 0;
  flex-shrink: 0;
}
.ghost--toggle.ghost--toggle--pull-left {
  margin-left: -7px;
}
.ghost--toggle.ghost--toggle--empty {
  color: var(--text-lighter);
}
.ghost--toggle.ghost--toggle--empty:hover {
  color: var(--text-lighter);
}

.form-optional-toggle {
  display: inline-flex;
  align-items: center;
  position: relative;
  right: 8.5px;
  padding: 5px 13.5px 5px 8.5px;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
  user-select: none;
  cursor: pointer;
  border-radius: 6px;
  border: none;
  outline: none;
  background: none;
}
.form-optional-toggle:focus {
  background-color: var(--bg-input-hover-subtle);
  color: var(--text-muted);
  text-decoration: none;
}
.form-optional-toggle:hover {
  background-color: var(--bg-input-hover-subtle);
  color: var(--text-muted);
  text-decoration: none;
}
.form-optional-toggle:active {
  background-color: var(--bg-input-hover-active);
  color: var(--text-muted);
  text-decoration: none;
}

.form-optional-toggle-icon {
  width: 10px;
  height: auto;
  transform: translateY(0.5px);
  transition: transform var(--transition-fast) ease;
}
.form-optional-toggle-icon path {
  fill: currentColor;
}
.form-optional-toggle.active .form-optional-toggle-icon {
  transform: translateY(0.5px) rotate(180deg);
}

/* |||||||||||||||||||||| Buttons |||||||||||||||||||||| */
.btn {
  position: relative;
  min-height: 40px;
  max-width: 100%;
  word-break: break-word;
  white-space: normal;
  padding: 8.5px 18px;
  font-size: 14px;
  color: var(--color-primary-contrast);
  text-decoration: none;
  background: var(--bg-grey-c);
  line-height: 1.5;
  font-weight: 500;
  font-family: var(--font-sans-serif);
  -webkit-font-smoothing: auto;
  border-radius: 6px;
  transition: background-image var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), border var(--transition-fast);
}
.btn:focus, .btn:visited {
  color: var(--color-primary-contrast);
}
.btn:focus {
  outline: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-shadow) 5%, transparent);
}
.btn:hover, .btn:active, .btn:active:hover {
  color: var(--color-primary-contrast);
  text-decoration: none;
  background: var(--border-1);
}
.btn.with-attached-icon-btn {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

button.btn {
  line-height: 1.5;
}

.btn-xs {
  min-height: 24px;
  padding: 3.5px 12px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.btn-sm {
  min-height: 30px;
  padding: 5px 15px;
  font-size: 12px;
  border-radius: 4px;
}

.btn-smd {
  min-height: 36px;
  padding: 6.5px 15px;
  font-size: 14px;
  border-radius: 5px;
}

.btn-md, .upgrade-overlay-tax-wrapper .subscription-plan-chooser-existing-cc-wrapper .btn-primary {
  min-height: 46px;
  padding: 11px 22px 10px;
  font-size: 14px;
  border-radius: 6px;
}
@media (max-width: 480px) {
  .btn-md, .upgrade-overlay-tax-wrapper .subscription-plan-chooser-existing-cc-wrapper .btn-primary {
    width: 100%;
  }
}

.btn-lg {
  min-height: 50px;
  font-size: 16px;
  padding: 12px 30px;
  border-radius: 7px;
}
@media (max-width: 480px) {
  .btn-lg {
    width: 100%;
  }
}

.btn-primary, .btn-primary:active, .btn-primary:focus, .btn-primary:visited {
  color: var(--color-primary-contrast);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  background-image: linear-gradient(to bottom, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 98%, var(--black)) 100%);
}
.btn-primary:hover {
  color: var(--color-primary-contrast);
  background-color: color-mix(in srgb, var(--color-primary) 98%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 98%, transparent);
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 98%, transparent) 0%, var(--color-primary) 100%);
}
.btn-primary:focus {
  outline: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.btn-primary:active, .btn-primary:active:hover, .btn-primary:active:focus {
  background-color: color-mix(in srgb, var(--color-primary) 98%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 98%, transparent);
  box-shadow: inset 0 2px 5px color-mix(in srgb, var(--black) 10%, transparent);
}
.btn-primary.disabled, .btn-primary[disabled] {
  opacity: 0.5;
}
.btn-primary.disabled, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled], .btn-primary[disabled]:focus, .btn-primary[disabled]:hover {
  color: var(--color-primary-contrast);
  background-color: color-mix(in srgb, var(--color-primary) 90%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 90%, transparent);
  background-image: none;
}
.btn-primary.disabled, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary.disabled:active, .btn-primary[disabled], .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, .btn-primary[disabled]:active {
  background: color-mix(in srgb, var(--color-primary) 95%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 95%, transparent);
}

.btn-secondary, .btn-secondary:active, .btn-secondary:focus, .btn-secondary:visited {
  color: var(--text-inverse);
  background-color: var(--bg-inverse);
  border-color: var(--bg-inverse);
  background-image: linear-gradient(to bottom, var(--bg-inverse) 0%, color-mix(in srgb, var(--bg-inverse) 98%, var(--black)) 100%);
}
.btn-secondary:hover {
  color: var(--text-inverse);
  background-color: color-mix(in srgb, var(--bg-inverse) 98%, transparent);
  border-color: color-mix(in srgb, var(--bg-inverse) 98%, transparent);
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--bg-inverse) 98%, transparent) 0%, var(--bg-inverse) 100%);
}
.btn-secondary:focus {
  outline: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-inverse) 15%, transparent);
}
.btn-secondary:active, .btn-secondary:active:hover, .btn-secondary:active:focus {
  background-color: color-mix(in srgb, var(--bg-inverse) 98%, transparent);
  border-color: color-mix(in srgb, var(--bg-inverse) 98%, transparent);
  box-shadow: inset 0 2px 5px color-mix(in srgb, var(--black) 10%, transparent);
}
.btn-secondary.disabled, .btn-secondary[disabled] {
  opacity: 0.5;
}
.btn-secondary.disabled, .btn-secondary.disabled:focus, .btn-secondary.disabled:hover, .btn-secondary[disabled], .btn-secondary[disabled]:focus, .btn-secondary[disabled]:hover {
  color: var(--text-inverse);
  background-color: color-mix(in srgb, var(--bg-inverse) 90%, transparent);
  border-color: color-mix(in srgb, var(--bg-inverse) 90%, transparent);
  background-image: none;
}

.btn-danger, .btn-danger:active, .btn-danger:focus, .btn-danger:visited {
  color: var(--white);
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  background-image: linear-gradient(to bottom, var(--color-danger) 0%, color-mix(in srgb, var(--color-danger) 98%, var(--black)) 100%);
}
.btn-danger:hover {
  color: var(--white);
  background-color: color-mix(in srgb, var(--color-danger) 98%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 98%, transparent);
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 98%, transparent) 0%, var(--color-danger) 100%);
}
.btn-danger:focus {
  outline: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-danger) 15%, transparent);
}
.btn-danger:active, .btn-danger:active:hover, .btn-danger:active:focus {
  background-color: color-mix(in srgb, var(--color-danger) 98%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 98%, transparent);
  box-shadow: inset 0 2px 5px color-mix(in srgb, var(--black) 10%, transparent);
}
.btn-danger.disabled, .btn-danger[disabled] {
  opacity: 0.5;
}
.btn-danger.disabled, .btn-danger.disabled:focus, .btn-danger.disabled:hover, .btn-danger[disabled], .btn-danger[disabled]:focus, .btn-danger[disabled]:hover {
  color: var(--white);
  background-color: color-mix(in srgb, var(--color-danger) 90%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 90%, transparent);
  background-image: none;
}

.btn-dark, .btn-dark:active, .btn-dark:focus, .btn-dark:visited {
  color: var(--text-inverse);
  background-color: var(--bg-inverse);
  border-color: var(--bg-inverse);
  background-image: linear-gradient(to bottom, var(--bg-inverse) 0%, color-mix(in srgb, var(--bg-inverse) 98%, var(--black)) 100%);
}
.btn-dark:hover {
  color: var(--text-inverse);
  background-color: color-mix(in srgb, var(--bg-inverse) 98%, transparent);
  border-color: color-mix(in srgb, var(--bg-inverse) 98%, transparent);
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--bg-inverse) 98%, transparent) 0%, var(--bg-inverse) 100%);
}
.btn-dark:focus {
  outline: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-inverse) 15%, transparent);
}
.btn-dark:active, .btn-dark:active:hover, .btn-dark:active:focus {
  background-color: color-mix(in srgb, var(--bg-inverse) 98%, transparent);
  border-color: color-mix(in srgb, var(--bg-inverse) 98%, transparent);
  box-shadow: inset 0 2px 5px color-mix(in srgb, var(--black) 10%, transparent);
}
.btn-dark.disabled, .btn-dark[disabled] {
  opacity: 0.5;
}
.btn-dark.disabled, .btn-dark.disabled:focus, .btn-dark.disabled:hover, .btn-dark[disabled], .btn-dark[disabled]:focus, .btn-dark[disabled]:hover {
  color: var(--text-inverse);
  background-color: color-mix(in srgb, var(--bg-inverse) 90%, transparent);
  border-color: color-mix(in srgb, var(--bg-inverse) 90%, transparent);
  background-image: none;
}

.btn-default, .btn-default:focus, .btn-default:visited {
  color: var(--text-default);
  background-color: var(--bg-button-default);
  border: 1px solid var(--border-content);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--bg-shadow) 2%, transparent);
}
.btn-default:hover {
  color: var(--text-default);
  background-color: var(--bg-button-default);
  border: 1px solid var(--border-button-hover);
  box-shadow: 0 10px 10px color-mix(in srgb, var(--bg-shadow) 2%, transparent);
}
.btn-default:active, .btn-default:active:hover {
  color: var(--text-default);
  background-color: var(--bg-button-default);
  border: 1px solid var(--border-button-hover);
  box-shadow: 0 1px 10px color-mix(in srgb, var(--bg-shadow) 2%, transparent);
}
.btn-default[disabled]:hover {
  background-color: var(--bg-button-default);
}
.dropdown-wrap > .btn-default {
  padding-right: 26px;
}

.btn-ghost, .btn-ghost:focus, .btn-ghost:visited {
  color: var(--text-muted);
  background-color: transparent;
  border-color: transparent;
}
.btn-ghost:focus-visible {
  outline: 0;
  background-color: var(--bg-grey-f8);
  border-color: var(--bg-grey-f8);
}
.btn-ghost:hover, .btn-ghost:active, .btn-ghost:active:hover {
  color: var(--text-default);
  background-color: var(--bg-grey-f8);
  border-color: var(--bg-grey-f8);
}
.btn-ghost:hover svg path, .btn-ghost:active svg path, .btn-ghost:active:hover svg path {
  fill: var(--text-default);
}
.btn-ghost svg path {
  fill: var(--text-muted);
}

.btn-outline, .btn-outline:focus, .btn-outline:visited {
  color: var(--text-lighter);
  background-color: transparent;
  border-color: var(--text-lighter);
}
.btn-outline:hover, .btn-outline:active, .btn-outline:active:hover {
  color: var(--text-muted-alt);
  background-color: transparent;
  border-color: var(--text-muted-alt);
}

.btn-outline-primary, .btn-outline-primary:focus, .btn-outline-primary:visited {
  color: var(--color-primary);
  background-color: transparent;
  border-color: var(--color-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:active:hover {
  color: color-mix(in srgb, var(--color-primary) 85%, var(--black));
  background-color: transparent;
  border-color: color-mix(in srgb, var(--color-primary) 85%, var(--black));
}

.btn-outline-secondary, .btn-outline-secondary:focus, .btn-outline-secondary:visited {
  color: var(--text-muted-alt);
  background-color: transparent;
  border-color: var(--text-muted-alt);
}
.btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary:active:hover {
  color: color-mix(in srgb, var(--text-muted-alt) 85%, var(--black));
  background-color: transparent;
  border-color: color-mix(in srgb, var(--text-muted-alt) 85%, var(--black));
}

.btn-outline-danger, .btn-outline-danger:focus, .btn-outline-danger:visited {
  color: var(--color-danger);
  background-color: transparent;
  border-color: var(--color-danger);
}
.btn-outline-danger:hover {
  color: color-mix(in srgb, var(--color-danger) 85%, var(--black));
  background-color: transparent;
  border-color: color-mix(in srgb, var(--color-danger) 85%, var(--black));
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  font-size: 19px;
}
.btn-icon svg {
  width: auto;
  height: 12px;
}

.btn-icon-with-text {
  margin-right: 0.5em;
  margin-left: -7px;
}
.btn-icon-with-text svg {
  width: auto;
  height: 10px;
}
.btn-icon-with-text .icon-crown svg {
  width: auto;
  height: 12px;
}

.btn-left-arrow-icon {
  margin-right: 0.7em;
  margin-left: -0.3em;
  font-size: 0.9em;
}

.btn-icon-absolute {
  position: absolute;
  top: 9px;
  left: 12px;
  height: 20px;
  width: auto;
}
.btn-smd .btn-icon-absolute {
  top: 8px;
  left: 11px;
  height: 17px;
}
.btn-icon-absolute.download-icon {
  top: 10px;
  height: 14px;
}
.btn-icon-absolute.groupby-icon {
  height: 15.5px;
  top: 9px;
  left: 11px;
  width: auto;
}
.btn-icon-absolute.sortby-icon {
  height: auto;
  width: 17px;
  top: 11px;
  left: 12px;
}
.btn-icon-absolute path {
  fill: currentColor;
}

.btn-dropdown-dots {
  display: flex;
  align-items: center;
}
.dropdown-wrap > .btn-dropdown-dots.btn-default {
  padding-left: 20px;
  padding-right: 20px;
}
.dropdown-wrap > .btn-dropdown-dots.btn-default.btn-sm {
  padding-left: 15px;
  padding-right: 15px;
}

.btn-attached-icon-btn {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  box-shadow: -1px 0 0 color-mix(in srgb, var(--black) 15%, transparent);
}
.btn-attached-icon-btn.btn-primary:active, .btn-attached-icon-btn.btn-primary:hover {
  box-shadow: -1px 0 0 color-mix(in srgb, var(--black) 15%, transparent);
}
.btn-attached-icon-btn.btn-primary path {
  fill: var(--color-primary-contrast);
}

.btn-attached-icon-btn-caret {
  position: relative;
  top: -1px;
  width: 12px;
  height: auto;
  transition: transform var(--transition-fast) ease;
}

.btn-attached-icon-btn.open .btn-attached-icon-btn-caret {
  transform: rotate(180deg);
}

.btn-primary-icon {
  height: 17px;
  width: auto;
}
.btn-primary-icon path {
  fill: var(--color-primary-contrast);
}
.btn-smd .btn-primary-icon {
  height: 15px;
}

.btn-with-dropdown-icon svg {
  position: relative;
  top: -1px;
  margin-left: 10px;
  width: 10px;
  height: auto;
  transition: transform var(--transition-fast) ease;
}
.btn-with-dropdown-icon.btn-primary svg path {
  fill: var(--color-primary-contrast);
}
.open > .btn-with-dropdown-icon svg {
  transform: rotate(180deg);
}

.btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-group .btn {
  display: inline-flex;
  align-items: center;
}
.btn-group .btn:hover {
  z-index: 2;
}
.btn-group .btn + .btn,
.btn-group .btn + .form-field,
.btn-group .form-field + .btn {
  margin-left: -1px;
}
.btn-group .btn:not(:first-child),
.btn-group .form-field:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group .btn:not(:last-child),
.btn-group .form-field:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group .form-field {
  border-color: var(--border-content);
}

.btn-group-btn-icon.list-icon {
  position: relative;
  width: 13px;
  height: auto;
}
.btn-group-btn-icon.gantt-icon {
  position: relative;
  width: 17px;
  height: auto;
  top: 0.5px;
}
.btn-group-btn-icon.weekly-icon {
  position: relative;
  top: 0;
  width: 17px;
  height: auto;
}
.btn-group-btn-icon.board-icon {
  position: relative;
  width: 16px;
  height: auto;
  top: 0px;
}
.btn-group-btn-icon.calendar-icon {
  position: relative;
  width: 15px;
  height: auto;
}

/* |||||||||||||||||||||| Third-Party Buttons |||||||||||||||||||||| */
.btn-paypal {
  color: var(--color-primary-contrast);
}
.btn-paypal, .btn-paypal:focus, .btn-paypal:visited {
  background: var(--paypal-blue);
  border-color: var(--paypal-blue);
  background-image: linear-gradient(to bottom, var(--paypal-blue) 0%, color-mix(in srgb, var(--paypal-blue) 95%, var(--black)) 100%);
}
.btn-paypal:hover, .btn-paypal:active, .btn-paypal:active:hover {
  background: color-mix(in srgb, var(--paypal-blue) 98%, transparent);
  border-color: color-mix(in srgb, var(--paypal-blue) 98%, transparent);
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--paypal-blue) 98%, transparent) 0%, color-mix(in srgb, var(--paypal-blue) 97%, var(--black)) 100%);
}

.btn-stripe {
  color: var(--color-primary-contrast);
}
.btn-stripe, .btn-stripe:focus, .btn-stripe:visited {
  background: var(--stripe-blue-1);
  border-color: var(--stripe-blue-1);
  background-image: linear-gradient(to bottom, var(--stripe-blue-1) 0%, var(--stripe-blue-2) 100%);
}
.btn-stripe:hover, .btn-stripe:active, .btn-stripe:active:hover {
  background: color-mix(in srgb, var(--stripe-blue-1) 98%, transparent);
  border-color: color-mix(in srgb, var(--stripe-blue-1) 98%, transparent);
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--stripe-blue-1) 98%, transparent) 0%, color-mix(in srgb, var(--stripe-blue-2) 98%, transparent) 100%);
}

@media (max-width: 767px) {
  .btn-block-mobile {
    width: 100%;
  }
}

.btn-chevron-down {
  position: absolute;
  right: 10px;
  top: 14px;
  font-size: 9px;
  color: var(--text-lightest);
  transition: all var(--transition-fast) ease;
  transform-origin: 48% 45%;
}
.dropdown-wrap.open .btn-chevron-down {
  transform: rotate(180deg);
}

.btn-add-link {
  position: relative;
  right: 8.5px;
  display: inline-flex;
  align-items: center;
  height: 30px;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
  padding: 5px 13.5px 5px 8.5px;
  border-radius: 6px;
  border: none;
  outline: none;
  background: none;
}
.btn-add-link:focus {
  background-color: var(--bg-input-hover-subtle);
  color: var(--text-muted);
  text-decoration: none;
}
.btn-add-link:hover {
  background-color: var(--bg-input-hover-subtle);
  color: var(--text-muted);
  text-decoration: none;
}
.btn-add-link:active {
  background-color: var(--bg-input-hover-active);
  color: var(--text-muted);
  text-decoration: none;
}
.btn-add-link.btn-add-link--green {
  color: var(--color-primary);
}
.btn-add-link.btn-add-link--align-right {
  right: -8.5px;
}
.btn-add-link.btn-add-link--right-auto {
  right: auto;
}

.btn-add-link-icon {
  position: relative;
  top: 0;
  width: 10px;
  height: auto;
  margin-right: 7px;
}
.btn-add-link-icon path {
  fill: var(--text-muted);
}
.btn-add-link-icon.btn-add-link-icon--green path {
  fill: var(--color-primary);
}

.btn-plus-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
  border: none;
  opacity: 0.5;
  outline: none;
  background: var(--bg-grey-f5);
  border-radius: 6px;
  transition: all var(--transition-fast) ease;
}
.btn-plus-compact:hover {
  opacity: 1;
}

.btn-plus-compact-icon {
  width: 12px;
  height: auto;
}
.btn-plus-compact-icon path {
  fill: var(--text-default);
}

.btn-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 5px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 6px;
  box-shadow: 0 1px 6px color-mix(in srgb, var(--bg-shadow) 5%, transparent);
}

.page-form-section {
  position: relative;
  padding: 40px 20px;
  margin-bottom: 40px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
}
@media (min-width: 768px) {
  .page-form-section {
    padding: 40px;
  }
}

.page-form-section-title {
  margin-bottom: 40px;
  font-size: 18px;
  font-weight: 600;
}

.page-form-checkbox-label {
  color: var(--text-default);
  font-weight: 500;
  font-size: 16px;
}

.page-form-checkbox-sublabel {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.form-switch.page-form-aside-switch {
  position: absolute;
  right: 40px;
  top: 40px;
}

.page-form-info-icon {
  position: relative;
  top: 1px;
  width: 12px;
  height: auto;
  margin-left: 7px;
}

.page-form-advanced-options-container {
  margin-bottom: 80px;
}

.page-form-show-advanced-options-link {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
}

.page-form-show-advanced-options-link-icon {
  position: relative;
  display: inline-block;
  transform-origin: 50% 41%;
  margin-left: 10px;
  font-size: 0.85em;
  transition: all var(--transition-normal) ease;
}
.page-form-show-advanced-options-link.showing .page-form-show-advanced-options-link-icon {
  transform: rotate(180deg);
}

.form-field.address-form-field-address-1 {
  position: relative;
  padding-right: 115px;
}

.form-field.address-form-field-address-2 {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100px;
  background: none;
}
.form-field.address-form-field-address-2, .form-field.address-form-field-address-2:focus, .form-field.address-form-field-address-2:hover {
  border-color: transparent !important;
}

.form-switch-field {
  display: flex;
}
.form-switch-field, .form-switch-field:focus, .form-switch-field:visited {
  color: var(--text-default);
}
.form-switch-field:hover, .form-switch-field:active {
  color: var(--text-muted);
}

.form-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  min-width: 40px;
  height: 26px;
  background: var(--bg-switch);
  border-radius: 50px;
  border: 1px solid var(--border-semi-transparent);
  overflow: hidden;
  transition: all var(--transition-fast) ease;
}
.form-switch.form-switch--20 {
  width: 30px;
  min-width: 30px;
  height: 20px;
}
.form-switch.active {
  background: var(--color-primary);
}

.form-switch-indicator {
  position: absolute;
  left: 4px;
  top: 3px;
  width: 22px;
  height: 22px;
  background: var(--bg-switch-indicator);
  border-radius: 50%;
  box-shadow: 0 0 1px 1px color-mix(in srgb, var(--black) 10%, transparent);
  transition: all var(--transition-fast) ease;
}
.form-switch--20 .form-switch-indicator {
  width: 14px;
  height: 14px;
  left: 2px;
  top: 2px;
}
.form-switch.active .form-switch-indicator {
  left: 17px;
}
.form-switch--20.active .form-switch-indicator {
  left: 12px;
}

.form-switch-label {
  padding-left: 15px;
  font-size: 14px;
}

.switch-toggle {
  position: relative;
  width: 220px;
  margin-left: auto;
  margin-right: auto;
  padding: 2px;
  background: var(--bg-switch-toggle);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 5px color-mix(in srgb, var(--black) 10%, transparent);
}
.switch-toggle.switch-primary {
  padding: 3px;
  background: var(--bg-grey-f5);
  border: none;
  box-shadow: none;
}
.switch-toggle.switch-primary.disabled {
  color: var(--text-lighter);
  pointer-events: none;
  background: var(--bg-grey-fa);
  opacity: 0.5;
}
.switch-toggle.pull-left {
  display: inline-block;
  float: left;
  margin-left: 0;
}
.switch-toggle.full-width {
  width: 100%;
}

.switch-toggle-option {
  position: relative;
  z-index: 1;
  display: inline-block;
  float: left;
  width: 50%;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  user-select: none;
}
.switch-toggle-option, .switch-toggle-option:focus, .switch-toggle-option:visited {
  color: var(--text-switch);
}
.switch-toggle-option:hover, .switch-toggle-option:active {
  color: var(--text-switch-hover);
}
.switch-toggle-option.active {
  z-index: 2;
  color: var(--text-switch-active);
  background: var(--bg-switch-toggle-active);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--black) 20%, transparent);
}
.switch-toggle.switch-primary .switch-toggle-option, .switch-toggle.switch-primary .switch-toggle-option:focus, .switch-toggle.switch-primary .switch-toggle-option:visited {
  color: var(--text-switch-hover);
  font-weight: 600;
}
.switch-toggle.switch-primary .switch-toggle-option:hover, .switch-toggle.switch-primary .switch-toggle-option:active {
  color: var(--text-default);
}
.switch-toggle.switch-primary .switch-toggle-option.active {
  color: var(--color-primary);
  background: var(--bg-content);
  box-shadow: inset 0 0 0 1px var(--border-darker);
}
.switch-toggle.switch-primary .switch-toggle-option.active.switch-red {
  color: var(--color-danger);
}
.switch-toggle.with-3-options .switch-toggle-option {
  width: 33%;
}

.switch-toggle-option-danger {
  color: var(--text-muted-alt);
}
.switch-toggle-option-danger.active {
  color: var(--color-danger) !important;
}

.dropdown-wrap {
  position: relative;
  display: inline-block;
}

.dropdown-select-el.not-mobile {
  position: absolute;
  z-index: 0;
  top: auto;
  left: auto;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}
.dropdown-select-el.is-mobile {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding-left: 10px;
  color: transparent;
  border: none;
  opacity: 0;
  box-shadow: none;
  background: transparent;
  background-image: none;
  appearance: none;
}

.dropdown-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  top: -1px;
  min-height: 46px;
  padding: 0 25px 0 0;
  cursor: pointer;
  vertical-align: middle;
  transition: all var(--transition-slow) ease;
}
.dropdown-label:after {
  position: absolute;
  content: "";
  bottom: 9px;
  left: 0;
  width: 100%;
  border-top: 1px dashed var(--border-field);
  transition: all var(--transition-normal) ease;
}
.dropdown-label:hover {
  color: var(--text-muted);
}
.dropdown-label:hover:after {
  border-top: 1px dashed var(--color-primary);
}
.dropdown-wrap.dropdown-sm .dropdown-label {
  top: 3px;
  min-height: 30px;
  padding-right: 20px;
}
.dropdown-wrap.dropdown-sm .dropdown-label:after {
  bottom: 5px;
}
.dropdown-label.uneditable {
  cursor: default;
  padding: 0;
}
.dropdown-label.uneditable:after {
  border-top: none;
}

.dropdown-label-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dropdown-caret {
  position: absolute;
  right: 10px;
  font-size: 16px;
  top: 50%;
  margin-top: -24px;
}
.dropdown-wrap.dropdown-sm .dropdown-caret {
  right: 5px;
  margin-top: -15px;
}
.dropdown-label.uneditable .dropdown-caret {
  display: none;
}

.dropdown-wrapper {
  position: relative;
}
.dropdown-wrapper .caret {
  position: relative;
  top: -1px;
  right: -2px;
  transition: transform var(--transition-normal) ease;
}
.dropdown-wrapper.open .caret {
  transform: rotate(180deg);
}

.dropdown-menu {
  font-family: var(--font-sans-serif);
}

.dropdown-item-loading {
  cursor: progress;
  opacity: 0.45;
}

.dropdown-div {
  position: absolute;
  display: none;
  z-index: 10;
  left: -13px;
  top: 0px;
  width: auto;
  min-width: 140px;
  max-width: 400px;
  overflow: scroll;
  max-height: 260px;
  background-color: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--black) 15%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--black) 8%, transparent);
  border-radius: 4px;
}
.dropdown-div.showing {
  display: block;
  animation: dropdown-open var(--transition-normal) 1 forwards;
}
.dropdown-div.hiding {
  animation: fade-out var(--transition-normal) 1 forwards;
}

.dropdown-item {
  display: block;
  padding: 10px 12px 7px;
  line-height: 1.4;
  cursor: pointer;
  color: var(--text-default);
  user-select: none;
  transition: all var(--transition-normal) ease;
}
.dropdown-item:focus, .dropdown-item:visited {
  color: var(--text-default);
}
@media (min-width: 768px) {
  .dropdown-item:hover {
    color: var(--text-default);
    background: color-mix(in srgb, var(--black) 4%, transparent);
  }
}
.dropdown-item:active {
  background: color-mix(in srgb, var(--black) 8%, transparent);
}
.dropdown-item.active {
  color: var(--color-primary-contrast);
  background: var(--color-primary);
}

.dropdown-item-subtext {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-lighter);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropdown-item.active .dropdown-item-subtext {
  color: rgba(255, 255, 255, 0.7);
}

.dropdown-under-link {
  display: block;
  padding: 15px 0 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  text-align: right;
}

.btn.btn-dropdown {
  padding-right: 40px;
}
.btn.btn-dropdown.btn-sm {
  padding-right: 26px;
}
.btn.btn-dropdown.btn-sm .btn-dropdown-icon {
  padding-top: 9px;
}
.btn.btn-dropdown .btn-dropdown-icon {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 11px 10px;
  font-size: 10px;
  transition: all var(--transition-normal) ease;
}

.open > .btn-dropdown .btn-dropdown-icon {
  transform: rotate(180deg);
}

.btn-dropdown-icon-border {
  position: absolute;
  right: 27px;
  top: 0;
  height: 100%;
  border-left: 1px solid color-mix(in srgb, var(--black) 15%, transparent);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.15);
}

.btn-dropdown-menu {
  left: auto;
  right: -8px;
  padding: 0;
}

.dropdown-menu-download-pdf:hover {
  background-color: #e7fbf6;
}
.dropdown-menu-download-pdf:hover path {
  fill: var(--color-primary);
}

.dropdown-menu-download-pdf-icon {
  position: absolute;
  right: 16px;
}
.dropdown-menu-download-pdf-icon path {
  fill: var(--border-darker);
  fill-opacity: 1;
}

.color-picker .color-picker-color {
  width: 20px;
  height: 20px;
  background: var(--bg-content);
  box-shadow: 0px 0px 1px color-mix(in srgb, var(--black) 40%, transparent);
  margin-right: 8px;
  border-radius: 50%;
}
.color-picker .color-picker-sketch-swatch {
  display: flex;
  flex-diretion: row;
}
.color-picker .color-picker-arrow {
  font-size: 0.9em;
  color: var(--text-lighter);
}
.color-picker .color-picker-sketch {
  position: absolute;
  z-index: 10;
  margin-top: 10px;
  right: 0;
}
.color-picker .color-picker-sketch .form-color-picker {
  margin-top: 0;
}
.color-picker .color-picker-sketch-cover {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

@keyframes closeWindow {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.ril__outer {
  outline: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  -ms-content-zooming: none;
  -ms-user-select: none;
  -ms-touch-select: none;
  touch-action: none;
  background: color-mix(in srgb, var(--black) 80%, transparent);
  animation: global-search-fade-in 0.1s 1 forwards;
}

.ril__outerClosing {
  opacity: 0;
}

.ril__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.ril__image,
.ril__imagePrev,
.ril__imageNext {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: none;
  -ms-content-zooming: none;
  -ms-user-select: none;
  -ms-touch-select: none;
  touch-action: none;
}

.ril__imageDiscourager {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ril__navButtons {
  border: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  height: 34px;
  padding: 40px 30px;
  margin: auto;
  cursor: pointer;
  opacity: 0.7;
}

.ril__navButtons:hover {
  opacity: 1;
}

.ril__navButtons:active {
  opacity: 0.7;
}

.ril__navButtonPrev {
  left: 0;
  background: color-mix(in srgb, var(--black) 20%, transparent) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==") no-repeat center;
}

.ril__navButtonNext {
  right: 0;
  background: color-mix(in srgb, var(--black) 20%, transparent) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+") no-repeat center;
}

.ril__downloadBlocker {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
  background-size: cover;
}

.ril__caption,
.ril__toolbar {
  background-color: color-mix(in srgb, var(--black) 50%, transparent);
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.ril__caption {
  bottom: 0;
  max-height: 150px;
  overflow: auto;
}

.ril__captionContent {
  padding: 10px 20px;
  color: #fff;
}

.ril__toolbar {
  top: 0;
  height: 50px;
}

.ril__toolbarSide {
  height: 50px;
  margin: 0;
}

.ril__toolbarLeftSide {
  padding-top: 2px;
  padding-left: 15px;
  padding-right: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ril__toolbarRightSide {
  padding-left: 0;
  padding-right: 5px;
  flex: 0 0 auto;
}

.ril__toolbarItem {
  display: inline-block;
  line-height: 45px;
  padding: 0;
  color: #fff;
  font-size: 120%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ril__toolbarItemChild {
  vertical-align: middle;
}

.ril__builtinButton {
  width: 40px;
  height: 35px;
  cursor: pointer;
  border: none;
  opacity: 0.7;
}

.ril__builtinButton:hover {
  opacity: 1;
}

.ril__builtinButton:active {
  outline: none;
}

.ril__builtinButtonDisabled {
  cursor: default;
  opacity: 0.5;
}

.ril__builtinButtonDisabled:hover {
  opacity: 0.5;
}

.ril__closeButton {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=") no-repeat center;
}

.ril__zoomInButton {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+") no-repeat center;
}

.ril__zoomOutButton {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=") no-repeat center;
}

.ril__outerAnimating {
  animation-name: closeWindow;
}

@keyframes pointFade {
  0%, 19.999%, 100% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
}
.ril__loadingCircle {
  width: 60px;
  height: 60px;
  position: relative;
}

.ril__loadingCirclePoint {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.ril__loadingCirclePoint::before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 11%;
  height: 30%;
  background-color: var(--bg-content);
  border-radius: 30%;
  animation: pointFade 800ms infinite ease-in-out both;
}

.ril__loadingCirclePoint:nth-of-type(1) {
  transform: rotate(0deg);
}

.ril__loadingCirclePoint:nth-of-type(7) {
  transform: rotate(180deg);
}

.ril__loadingCirclePoint:nth-of-type(1)::before,
.ril__loadingCirclePoint:nth-of-type(7)::before {
  animation-delay: -800ms;
}

.ril__loadingCirclePoint:nth-of-type(2) {
  transform: rotate(30deg);
}

.ril__loadingCirclePoint:nth-of-type(8) {
  transform: rotate(210deg);
}

.ril__loadingCirclePoint:nth-of-type(2)::before,
.ril__loadingCirclePoint:nth-of-type(8)::before {
  animation-delay: -666ms;
}

.ril__loadingCirclePoint:nth-of-type(3) {
  transform: rotate(60deg);
}

.ril__loadingCirclePoint:nth-of-type(9) {
  transform: rotate(240deg);
}

.ril__loadingCirclePoint:nth-of-type(3)::before,
.ril__loadingCirclePoint:nth-of-type(9)::before {
  animation-delay: -533ms;
}

.ril__loadingCirclePoint:nth-of-type(4) {
  transform: rotate(90deg);
}

.ril__loadingCirclePoint:nth-of-type(10) {
  transform: rotate(270deg);
}

.ril__loadingCirclePoint:nth-of-type(4)::before,
.ril__loadingCirclePoint:nth-of-type(10)::before {
  animation-delay: -400ms;
}

.ril__loadingCirclePoint:nth-of-type(5) {
  transform: rotate(120deg);
}

.ril__loadingCirclePoint:nth-of-type(11) {
  transform: rotate(300deg);
}

.ril__loadingCirclePoint:nth-of-type(5)::before,
.ril__loadingCirclePoint:nth-of-type(11)::before {
  animation-delay: -266ms;
}

.ril__loadingCirclePoint:nth-of-type(6) {
  transform: rotate(150deg);
}

.ril__loadingCirclePoint:nth-of-type(12) {
  transform: rotate(330deg);
}

.ril__loadingCirclePoint:nth-of-type(6)::before,
.ril__loadingCirclePoint:nth-of-type(12)::before {
  animation-delay: -133ms;
}

.ril__loadingCirclePoint:nth-of-type(7) {
  transform: rotate(180deg);
}

.ril__loadingCirclePoint:nth-of-type(13) {
  transform: rotate(360deg);
}

.ril__loadingCirclePoint:nth-of-type(7)::before,
.ril__loadingCirclePoint:nth-of-type(13)::before {
  animation-delay: 0ms;
}

.ril__loadingContainer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.ril__imagePrev .ril__loadingContainer,
.ril__imageNext .ril__loadingContainer {
  display: none;
}

.ril__errorContainer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.ril__imagePrev .ril__errorContainer,
.ril__imageNext .ril__errorContainer {
  display: none;
}

.ril__loadingContainer__icon {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.content-toggles {
  display: flex;
  padding: 20px 0 10px;
  overflow: scroll;
}
@media (min-width: 768px) {
  .content-toggles {
    overflow: visible;
  }
}

.content-toggle {
  position: relative;
  margin-right: 10px;
  padding: 14px 15px 15px 47px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  user-select: none;
  white-space: nowrap;
  background: var(--bg-content);
  transition: all var(--transition-fast) ease;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-shadow) 5%, transparent);
}
.content-toggle:last-child {
  margin-right: 0;
}
.content-toggle:hover {
  color: var(--text-default);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-shadow) 10%, transparent);
}
.content-toggle.active {
  color: var(--color-primary);
  box-shadow: 2px 5px 13px color-mix(in srgb, var(--bg-shadow) 3%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 60%, transparent);
}
.content-toggle.bonsai-cash {
  padding-left: 42px;
}
.content-toggle.no-icon {
  padding: 10px 15px;
}

.content-toggle-icon {
  position: absolute;
  left: 15px;
  top: 15px;
  height: auto;
  width: 23px;
}
.content-toggle-icon path {
  fill: var(--text-muted);
}
.content-toggle-icon.card {
  top: 18px;
  width: 25px;
}
.content-toggle-icon.share-link {
  width: 21px;
}
.content-toggle-icon.embed-code {
  top: 16px;
  width: 23px;
}
.content-toggle-icon.email {
  top: 18px;
  width: 23px;
}
.content-toggle-icon.bonsai-cash {
  top: 16px;
  width: 14px;
}
.content-toggle-icon.draw-signature {
  top: 20px;
  width: 24px;
}
.content-toggle-icon.type-signature {
  top: 15px;
  width: 23px;
}
.content-toggle:hover .content-toggle-icon g, .content-toggle:hover .content-toggle-icon path {
  fill: var(--text-default);
}
.content-toggle.active .content-toggle-icon g, .content-toggle.active .content-toggle-icon path {
  fill: var(--color-primary);
}

/**
 * The geosuggest module
 */
.geosuggest__input {
  width: 100%;
}

.geosuggest__suggests {
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 25em;
  padding: 0;
  margin-top: -1px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-top: 1px solid var(--color-primary);
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  transition: max-height var(--transition-normal), border var(--transition-normal);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 0 0 4px 4px;
}

.geosuggest__suggests--hidden {
  max-height: 0;
  overflow: hidden;
  border-width: 0;
}

/**
 * A geosuggest item
 */
.geosuggest__item {
  font-size: 14px;
  font-weight: 400;
  padding: 9px 10px 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.geosuggest__item:hover,
.geosuggest__item:focus {
  color: var(--text-default);
  background: var(--bg-grey-f8);
  transition: all var(--transition-normal) ease;
}

.geosuggest__item--active {
  color: #fff;
  background: var(--color-primary);
}

.geosuggest__item--active:hover,
.geosuggest__item--active:focus {
  background: #ccc;
}

.email-list-editor {
  min-height: 80px;
  padding: 12px;
  border: 1px solid var(--border-content);
  transition: all var(--transition-normal) ease;
  border-radius: 5px;
}
.email-list-editor.focused {
  border-color: var(--color-primary);
}

.email-list-input {
  position: relative;
  z-index: 1;
  display: inline-block;
  float: left;
  min-height: 30px;
  max-width: 100%;
  padding: 5px 5px 3px;
  line-height: 1.41;
  font-size: 14px;
  background: none;
  border: none;
  outline: none;
  vertical-align: top;
  box-shadow: none;
  border-radius: 0;
}
.email-list-input:hover, .email-list-input:active {
  background: none;
  border: none;
}
.email-list-input:focus {
  z-index: 2;
  color: var(--text-muted);
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  animation: pop-on-input var(--transition-normal) 1 forwards;
}
.email-list-input:first-child {
  margin-left: 0;
}

.email-list-item {
  position: relative;
  display: inline-block;
  float: left;
  max-width: 100%;
  margin-right: 5px;
  margin-bottom: 10px;
  padding: 6px 24px 4px 10px;
  color: var(--text-muted);
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  cursor: default;
  background: var(--bg-info);
  border-radius: 4px;
}

.email-list-item-close {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 11px 10px;
  font-size: 9px;
  cursor: pointer;
  color: color-mix(in srgb, var(--black) 25%, transparent);
  transition: all var(--transition-normal) ease;
}
.email-list-item-close:hover {
  color: color-mix(in srgb, var(--black) 50%, transparent);
}

.empty-state-section {
  background-color: var(--bg-grey-f8);
  padding: 16px 20px;
  color: var(--text-default);
  border-radius: 10px;
}
.empty-state-section.empty-state-section--left-aligned {
  display: flex;
  align-items: center;
  gap: 20px;
}
.empty-state-section a:not(.btn),
.empty-state-section a:not(.btn):focus,
.empty-state-section a:not(.btn):visited {
  color: var(--text-default);
  text-decoration: underline;
}
.empty-state-section a:not(.btn):hover,
.empty-state-section a:not(.btn):active {
  color: var(--text-default);
  text-decoration: underline;
}

.empty-state-section-icon {
  flex-shrink: 0;
  margin-left: 7px;
}
.empty-state-section-icon path {
  fill: var(--text-default);
}

.empty-state-header {
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
  word-break: break-word;
}

.empty-state-copy {
  font-size: 14px;
  font-weight: 400;
  word-break: break-word;
}

.form-datepicker.datepicker-align-left .SingleDatePickerInput .DateInput_input {
  padding-left: 10px;
  text-align: left;
}

svg.DateInput_fang {
  z-index: 5;
}
svg.DateInput_fang .DateInput_fangStroke {
  stroke: var(--stroke-calendar);
}

.DateRangePicker_picker {
  border: 1px solid var(--border-content);
}

.DayPicker.DayPicker__horizontal,
.DayPicker.DayPicker__vertical {
  background: var(--bg-content);
}

.CalendarMonthGrid.CalendarMonthGrid__horizontal {
  background: var(--bg-content);
}
.CalendarMonthGrid.CalendarMonthGrid__horizontal .CalendarMonth {
  background: var(--bg-content);
}

.DayPickerNavigation_button__default, .DayPicker .DayPickerNavigation_button__default, .SingleDatePicker .DayPickerNavigation_button__default, .DateRangePicker .DayPickerNavigation_button__default {
  background: var(--bg-content);
  border: 1px solid var(--border-content);
}
.DayPickerNavigation_button__default:hover, .DayPicker .DayPickerNavigation_button__default:hover, .SingleDatePicker .DayPickerNavigation_button__default:hover, .DateRangePicker .DayPickerNavigation_button__default:hover {
  border-color: var(--border-darker);
}

.CalendarMonthGrid {
  background: var(--bg-content);
}
.CalendarMonthGrid .CalendarMonth_caption {
  color: var(--text-default);
}
.CalendarMonthGrid .CalendarDay__default {
  color: var(--text-default);
  background: var(--bg-content);
  border: 1px solid var(--border-semi-transparent);
}
.CalendarMonthGrid .CalendarDay__default:hover {
  color: var(--text-default);
  background: var(--bg-grey-f5);
}
.CalendarMonthGrid .CalendarDay__today {
  color: var(--text-default);
  font-weight: 600;
  background: var(--bg-grey-f5);
  box-shadow: none;
  text-decoration: underline;
}
.CalendarMonthGrid .CalendarDay__today:hover {
  color: var(--text-default);
  font-weight: 600;
  background: color-mix(in srgb, var(--bg-grey-e) 99%, transparent);
  box-shadow: none;
}
.CalendarMonthGrid .CalendarDay__today.CalendarDay__selected {
  color: var(--text-inverse);
  background: var(--bg-inverse);
  border: 1px double var(--border-semi-transparent);
}
.CalendarMonthGrid .CalendarDay__default:hover {
  border: 1px solid var(--border-content);
}
.CalendarMonthGrid .CalendarDay__default.focus-visible {
  color: var(--text-default);
  font-weight: 600;
  background: var(--bg-grey-f5);
  box-shadow: inset 0 0 1px;
}
.CalendarMonthGrid .CalendarDay__outside {
  color: var(--text-lighter);
}
.CalendarMonthGrid .CalendarDay__selected_span {
  color: var(--text-lighter);
  background: var(--border-semi-transparent);
  border: 1px double var(--border-calendar-hover);
}
.CalendarMonthGrid .CalendarDay__selected_span:hover,
.CalendarMonthGrid .CalendarDay__selected_span:active {
  color: var(--text-default);
  background: color-mix(in srgb, var(--black) 10%, transparent);
  border: 1px double color-mix(in srgb, var(--text-default) 30%, transparent);
}
.CalendarMonthGrid .CalendarDay__selected {
  color: var(--text-inverse);
  background: var(--bg-inverse);
  border: 1px double var(--border-semi-transparent);
}
.CalendarMonthGrid .CalendarDay__hovered_span,
.CalendarMonthGrid .CalendarDay__hovered_span:hover {
  color: var(--text-default);
  background: var(--bg-input-hover);
  border: 1px double color-mix(in srgb, var(--text-default) 30%, transparent);
}
.CalendarMonthGrid .CalendarDay__selected:active,
.CalendarMonthGrid .CalendarDay__selected:hover {
  color: var(--color-primary-contrast);
  background: color-mix(in srgb, var(--black) 98%, transparent);
}

.week-start-monday .CalendarMonthGrid .CalendarDay__default:nth-child(6),
.week-start-monday .CalendarMonthGrid .CalendarDay__default:nth-child(7) {
  background: var(--bg-content-alt);
}
.week-start-monday .CalendarMonthGrid .CalendarDay__selected_span:nth-child(6),
.week-start-monday .CalendarMonthGrid .CalendarDay__selected_span:nth-child(7) {
  background: var(--border-semi-transparent);
}
.week-start-monday .CalendarMonthGrid .CalendarDay__selected:nth-child(6),
.week-start-monday .CalendarMonthGrid .CalendarDay__selected:nth-child(7) {
  background: var(--text-default);
}
.week-start-monday .CalendarMonthGrid .CalendarDay__hovered_span:nth-child(6),
.week-start-monday .CalendarMonthGrid .CalendarDay__hovered_span:nth-child(7),
.week-start-monday .CalendarMonthGrid .CalendarDay__default:hover:nth-child(6),
.week-start-monday .CalendarMonthGrid .CalendarDay__default:hover:nth-child(7) {
  background: var(--bg-grey-f5);
}

.week-start-sunday .CalendarMonthGrid .CalendarDay__default:nth-child(1),
.week-start-sunday .CalendarMonthGrid .CalendarDay__default:nth-child(7) {
  background: var(--bg-content-alt);
}
.week-start-sunday .CalendarMonthGrid .CalendarDay__selected_span:nth-child(1),
.week-start-sunday .CalendarMonthGrid .CalendarDay__selected_span:nth-child(7) {
  background: var(--border-semi-transparent);
}
.week-start-sunday .CalendarMonthGrid .CalendarDay__selected:nth-child(1),
.week-start-sunday .CalendarMonthGrid .CalendarDay__selected:nth-child(7) {
  background: var(--text-default);
}
.week-start-sunday .CalendarMonthGrid .CalendarDay__hovered_span:nth-child(1),
.week-start-sunday .CalendarMonthGrid .CalendarDay__hovered_span:nth-child(7),
.week-start-sunday .CalendarMonthGrid .CalendarDay__default:hover:nth-child(1),
.week-start-sunday .CalendarMonthGrid .CalendarDay__default:hover:nth-child(7) {
  background: var(--bg-grey-f5);
}

.week-start-saturday .CalendarMonthGrid .CalendarDay__default:nth-child(1),
.week-start-saturday .CalendarMonthGrid .CalendarDay__default:nth-child(2) {
  background: var(--bg-content-alt);
}
.week-start-saturday .CalendarMonthGrid .CalendarDay__selected_span:nth-child(1),
.week-start-saturday .CalendarMonthGrid .CalendarDay__selected_span:nth-child(2) {
  background: var(--border-semi-transparent);
}
.week-start-saturday .CalendarMonthGrid .CalendarDay__selected:nth-child(1),
.week-start-saturday .CalendarMonthGrid .CalendarDay__selected:nth-child(2) {
  background: var(--text-default);
}
.week-start-saturday .CalendarMonthGrid .CalendarDay__hovered_span:nth-child(1),
.week-start-saturday .CalendarMonthGrid .CalendarDay__hovered_span:nth-child(2),
.week-start-saturday .CalendarMonthGrid .CalendarDay__default:hover:nth-child(1),
.week-start-saturday .CalendarMonthGrid .CalendarDay__default:hover:nth-child(2) {
  background: var(--bg-grey-f5);
}

.SingleDatePicker,
.SingleDatePicker .SingleDatePickerInput,
.DateRangePicker,
.DateRangePicker .SingleDatePickerInput {
  width: 100% !important;
  padding-right: 0;
  text-align: center;
}
.SingleDatePicker .SingleDatePicker_picker,
.DateRangePicker .SingleDatePicker_picker {
  z-index: 4;
  font-family: var(--font-sans-serif);
  background: var(--bg-content);
}
.SingleDatePicker .DayPicker__withBorder,
.DateRangePicker .DayPicker__withBorder {
  box-shadow: 0 2px 6px color-mix(in srgb, var(--bg-shadow) 5%, transparent), 0 0 0 1px var(--border-content);
}
.SingleDatePicker .SingleDatePickerInput__withBorder,
.DateRangePicker .SingleDatePickerInput__withBorder {
  border-color: var(--border-field);
  border-radius: 6px;
  transition: border-color var(--transition-normal) ease;
}
.SingleDatePicker .SingleDatePickerInput__withBorder:hover,
.DateRangePicker .SingleDatePickerInput__withBorder:hover {
  border-color: var(--color-primary);
}
.SingleDatePicker .SingleDatePickerInput__disabled,
.DateRangePicker .SingleDatePickerInput__disabled {
  color: var(--text-muted);
  background: var(--bg-content-alt);
  border-color: var(--border-content);
  opacity: 1;
}
.SingleDatePicker .SingleDatePickerInput__disabled:hover,
.DateRangePicker .SingleDatePickerInput__disabled:hover {
  border-color: var(--border-content);
}
.SingleDatePicker .SingleDatePickerInput__disabled .DateInput_input,
.DateRangePicker .SingleDatePickerInput__disabled .DateInput_input {
  color: var(--text-muted);
}
.SingleDatePicker .CalendarMonthGrid,
.DateRangePicker .CalendarMonthGrid {
  background: var(--bg-content);
}
.SingleDatePicker .CalendarMonth,
.DateRangePicker .CalendarMonth {
  background: var(--bg-content);
}
.SingleDatePicker .DateInput,
.DateRangePicker .DateInput {
  width: 100%;
  background: none;
}
.SingleDatePicker .DateInput_input,
.DateRangePicker .DateInput_input {
  height: 38px;
  font-size: 14px;
  font-weight: 400;
  padding: 4px 10px 4px;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  color: var(--text-default);
  background: none;
  border-bottom: none !important;
  cursor: pointer;
}
.SingleDatePicker .DateInput_input:focus,
.DateRangePicker .DateInput_input:focus {
  text-decoration: none;
  outline: none;
}
.SingleDatePicker .DateInput_input:focus-visible,
.DateRangePicker .DateInput_input:focus-visible {
  text-decoration: underline;
}
.SingleDatePicker .DateInput_input.DateInput_input__disabled,
.DateRangePicker .DateInput_input.DateInput_input__disabled {
  cursor: not-allowed;
  font-style: normal;
}
.datepicker-lg .SingleDatePicker .DateInput_input,
.datepicker-lg .DateRangePicker .DateInput_input {
  height: 48px;
  padding-top: 6px;
}
.search-advanced-filters-status-filter .SingleDatePicker .DateInput_input,
.search-advanced-filters-status-filter .DateRangePicker .DateInput_input {
  max-width: 105px;
  text-wrap: nowrap;
}
.SingleDatePicker .DateRangePickerInput_arrow_svg,
.DateRangePicker .DateRangePickerInput_arrow_svg {
  position: relative;
  top: -1px;
  width: 20px;
  height: 20px;
}
.SingleDatePicker .SingleDatePickerInput,
.DateRangePicker .SingleDatePickerInput {
  background: var(--bg-content);
}
.SingleDatePicker .SingleDatePickerInput_clearDate,
.DateRangePicker .SingleDatePickerInput_clearDate {
  margin: 0;
  line-height: 0.5;
  transition: all var(--transition-normal) ease;
  opacity: 0.7;
}
.SingleDatePicker .SingleDatePickerInput_clearDate:hover,
.DateRangePicker .SingleDatePickerInput_clearDate:hover {
  opacity: 1;
}
.SingleDatePicker .SingleDatePickerInput_clearDate_indicator path,
.DateRangePicker .SingleDatePickerInput_clearDate_indicator path {
  fill: var(--color-danger);
}

.SingleDatePickerInput_clearDate {
  padding-right: 8px;
}

.SingleDatePickerInput_clearDate_indicator {
  width: 16px;
  height: auto;
}

.SingleDatePickerInput_clearDate__default:hover {
  background: none;
}

.DateRangePicker .DateInput {
  width: auto;
}
.DateRangePicker .DateRangePickerInput {
  display: flex;
  align-items: center;
  background: var(--bg-content);
  border: 1px solid var(--border-field);
  border-radius: 6px;
  transition: all var(--transition-normal) ease;
}
.DateRangePicker .DateRangePickerInput:hover {
  border-color: var(--color-primary);
}
.DateRangePicker .DateRangePickerInput__withBorder {
  border-color: var(--border-field);
  border-radius: 4px;
}
.DateRangePicker .DateRangePickerInput__withBorder:hover {
  border-color: var(--color-primary);
}

.modal-email-editor-top {
  position: relative;
  z-index: 11;
  margin: 20px 40px 20px;
}
.modal-email-editor.showing-preview .modal-email-editor-top {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border-content-alt);
}

.modal-email-editor-top-to.input-sm, .input-group-sm > .modal-email-editor-top-to.form-control,
.input-group-sm > .modal-email-editor-top-to.input-group-addon,
.input-group-sm > .input-group-btn > .modal-email-editor-top-to.btn {
  padding-left: 33px;
}

.modal-email-editor-top-to.react-select-multi-tags.multi-select-contained .Select__control {
  padding-left: 33px;
}

.modal-email-editor-top-subject.input-sm, .input-group-sm > .modal-email-editor-top-subject.form-control,
.input-group-sm > .modal-email-editor-top-subject.input-group-addon,
.input-group-sm > .input-group-btn > .modal-email-editor-top-subject.btn {
  padding-left: 65px;
}

.modal-email-editor-top-select-avatar {
  position: absolute;
  top: 0;
  left: 0;
}

.modal-email-editor-top-select-role {
  position: absolute;
  right: 5px;
  top: 12px;
  font-size: 12px;
  color: color-mix(in srgb, var(--black) 20%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

.modal-email-editor-top-label {
  position: absolute;
  z-index: 2;
  left: 10px;
  top: 50%;
  color: var(--text-lighter);
  font-size: 14px;
  transform: translateY(-50%);
}

.modal-email-editor-top-preview-label {
  position: absolute;
  left: 50%;
  top: 100%;
  padding: 3px 10px 0;
  text-transform: uppercase;
  color: var(--text-lighter);
  letter-spacing: 0.075em;
  font-size: 12px;
  background: var(--bg-content-alt);
  transform: translate(-50%, -50%);
}

.wysiwyg-editor.email-editor-wysiwyg {
  position: relative;
  font-family: var(--font-mailer-body);
}
.wysiwyg-editor.email-editor-wysiwyg p,
.wysiwyg-editor.email-editor-wysiwyg ol,
.wysiwyg-editor.email-editor-wysiwyg ul,
.wysiwyg-editor.email-editor-wysiwyg li {
  color: var(--text-default);
  font-weight: 400;
  font-family: var(--font-mailer-body);
}
.wysiwyg-editor.email-editor-wysiwyg h1,
.wysiwyg-editor.email-editor-wysiwyg h1 span {
  font-weight: 500;
  font-size: 24px;
  font-family: var(--font-mailer-header);
}
.wysiwyg-editor.email-editor-wysiwyg h2,
.wysiwyg-editor.email-editor-wysiwyg h2 span {
  font-weight: 500;
  font-size: 22px;
  font-family: var(--font-mailer-header);
}
.wysiwyg-editor.email-editor-wysiwyg h3,
.wysiwyg-editor.email-editor-wysiwyg h3 span {
  font-weight: 500;
  font-size: 18px;
  font-family: var(--font-mailer-header);
}
.wysiwyg-editor.email-editor-wysiwyg h4,
.wysiwyg-editor.email-editor-wysiwyg h4 span {
  font-weight: 500;
  font-size: 16px;
  font-family: var(--font-mailer-header);
}
.wysiwyg-editor.email-editor-wysiwyg hr {
  border-top-width: 1px;
  border-bottom-width: 0;
}
.wysiwyg-editor.email-editor-wysiwyg.editor-plain .email-editor-wysiwyg-input {
  border: 1px solid var(--border-field);
  border-radius: 4px;
}
.wysiwyg-editor.email-editor-wysiwyg.editor-plain .email-editor-wysiwyg-input.with-attachments {
  padding-bottom: 36px;
}
.wysiwyg-editor.email-editor-wysiwyg.editor-plain .email-editor-wysiwyg-attachments {
  margin: 10px;
}
.wysiwyg-editor.email-editor-wysiwyg.editor-plain .fr-view {
  min-height: 160px;
  padding: 30px;
}
@media (min-width: 768px) {
  .wysiwyg-editor.email-editor-wysiwyg.editor-plain .fr-view:hover {
    border-color: var(--color-primary);
  }
  .wysiwyg-editor.email-editor-wysiwyg.editor-plain .fr-view.focus-visible {
    border-color: var(--color-primary);
    transition: border-color var(--transition-normal) ease;
  }
}
.wysiwyg-editor.email-editor-wysiwyg.editor-html .email-editor-wysiwyg-attachments {
  margin: 40px 10px 10px;
}
.wysiwyg-editor.email-editor-wysiwyg.editor-html .email-editor-wysiwyg-attachment-delete {
  display: none;
}
.wysiwyg-editor.email-editor-wysiwyg.editor-html .fr-view {
  padding: 10px;
  border-radius: 6px;
}
@media (min-width: 768px) {
  .wysiwyg-editor.email-editor-wysiwyg.editor-html .fr-view:hover {
    background-color: var(--bg-grey-fa);
  }
  .wysiwyg-editor.email-editor-wysiwyg.editor-html .fr-view.focus-visible {
    background-color: initial;
    transition: background-color var(--transition-normal) ease;
  }
}

.email-editor-wysiwyg-attachment-delete {
  position: absolute;
  z-index: 4;
  right: 0;
  top: 8px;
  bottom: 8px;
  width: 40px;
  padding: 0 4px 0 6px;
  text-align: center;
  font-size: 20px;
  letter-spacing: 1px;
  cursor: pointer;
  background: var(--bg-content);
  border-left: 1px solid var(--border-content);
}
.email-editor-wysiwyg-attachment-delete, .email-editor-wysiwyg-attachment-delete:focus, .email-editor-wysiwyg-attachment-delete:visited {
  color: var(--color-danger) !important;
}
.email-editor-wysiwyg-attachment-delete:hover, .email-editor-wysiwyg-attachment-delete:active {
  color: color-mix(in srgb, var(--color-danger) 95%, var(--black)) !important;
}

.modal-email-editor-plain {
  padding: 0 40px 20px;
}
.modal-email-editor-plain .fr-quick-insert {
  left: -15px !important;
}

.modal-email-editor-content {
  padding: 0 40px 30px;
}
.modal-email-editor-content .fr-quick-insert {
  left: -45px !important;
}
.modal-email-editor-content .modal-email-editor-content-body .btn {
  font-family: var(--font-mailer-body);
  pointer-events: none;
}

.modal-email-editor-logo {
  height: auto;
  margin-bottom: 20px;
}
.modal-email-editor-logo #mail-top-logo-img {
  max-width: 120px;
  max-height: 100px;
}
.modal-email-editor-logo .mail-top-powered-img {
  width: 166px;
  height: 35px;
  margin-bottom: -10px;
  float: right;
}

.modal-email-editor-content-body {
  padding: 30px;
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
}

.modal-email-editor-settings-note {
  padding: 0 40px 20px;
  color: var(--text-lighter);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}
.modal-email-editor-settings-note.showing-preview {
  display: flex;
  justify-content: space-between;
}

.modal-email-editor-settings-toggle {
  position: relative;
  padding-left: 23px;
  user-select: none;
}

.modal-email-editor-settings-toggle-icon {
  position: absolute;
  top: -1px;
  left: 0;
  line-height: 0;
  font-size: 1.5em;
}

.modal-email-editor-attachment-section {
  position: absolute;
  z-index: 10;
  left: 1px;
  right: 1px;
  bottom: 0;
  font-size: 12px;
  font-weight: 600;
  border-top: 1px solid var(--border-content-alt);
}

.modal-email-editor-add-file {
  position: relative;
  padding: 11px 12px 9px;
}
.modal-email-editor-add-file .form-attachment-uploader-progress-bar {
  right: 15px;
  left: auto;
  width: 33%;
  margin-top: -3px;
}

.modal-email-editor-uploading-text {
  color: var(--text-lightest);
}
.modal-email-editor-uploading-text.failed {
  color: var(--color-danger);
}

.wysiwyg-editor .fr-box.fr-basic .fr-element {
  padding: 0;
  min-height: 0;
  color: var(--text-default);
}
.wysiwyg-editor .fr-view hr,
.wysiwyg-editor hr {
  margin-bottom: 12px;
  border-color: var(--border-content);
  border-top-width: 1px;
  border-bottom-width: 0;
  border-style: solid;
  break-after: auto;
  page-break-after: auto;
}
.wysiwyg-editor .fr-view blockquote,
.wysiwyg-editor blockquote {
  padding: 12px 20px 10px;
  margin: 20px 0;
  border-left: 5px solid var(--border-content);
}
.wysiwyg-editor .fr-view blockquote,
.wysiwyg-editor .fr-view blockquote p,
.wysiwyg-editor blockquote,
.wysiwyg-editor blockquote p {
  font-size: 14px;
  color: inherit;
}
.wysiwyg-editor .fr-view blockquote h1,
.wysiwyg-editor .fr-view blockquote h2,
.wysiwyg-editor .fr-view blockquote h3,
.wysiwyg-editor .fr-view blockquote h4,
.wysiwyg-editor blockquote h1,
.wysiwyg-editor blockquote h2,
.wysiwyg-editor blockquote h3,
.wysiwyg-editor blockquote h4 {
  margin: 0;
}
.wysiwyg-editor p,
.wysiwyg-editor ul,
.wysiwyg-editor li {
  font-size: 16px;
  font-family: inherit;
  word-break: break-word;
}
.wysiwyg-editor h1 {
  margin: 20px 0 18px;
  padding: 0;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-default);
  word-break: break-word;
}
.wysiwyg-editor h1,
.wysiwyg-editor h1 span {
  font-size: 28px;
}
.wysiwyg-editor h1:first-child {
  margin-top: 0;
}
@media (min-width: 480px) {
  .wysiwyg-editor h1,
  .wysiwyg-editor h1 span {
    font-size: 32px;
  }
}
.wysiwyg-editor h2 {
  margin: 20px 0 18px;
  padding: 0;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-default);
  word-break: break-word;
}
.wysiwyg-editor h2,
.wysiwyg-editor h2 span {
  font-size: 22px;
}
.wysiwyg-editor h2:first-child {
  margin-top: 0;
}
@media (min-width: 480px) {
  .wysiwyg-editor h2,
  .wysiwyg-editor h2 span {
    font-size: 26px;
  }
}
.wysiwyg-editor h3 {
  margin: 20px 0 18px;
  padding: 0;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-default);
  word-break: break-word;
}
.wysiwyg-editor h3,
.wysiwyg-editor h3 span {
  font-size: 18px;
}
.wysiwyg-editor h3:first-child {
  margin-top: 0;
}
@media (min-width: 480px) {
  .wysiwyg-editor h3,
  .wysiwyg-editor h3 span {
    font-size: 22px;
  }
}
.wysiwyg-editor h4 {
  margin: 20px 0 18px;
  padding: 0;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-default);
  word-break: break-word;
}
.wysiwyg-editor h4,
.wysiwyg-editor h4 span {
  font-size: 16px;
}
.wysiwyg-editor h4:first-child {
  margin-top: 0;
}
@media (min-width: 480px) {
  .wysiwyg-editor h4,
  .wysiwyg-editor h4 span {
    font-size: 18px;
  }
}
.wysiwyg-editor img {
  max-width: 100%;
  padding: 0;
}
.wysiwyg-editor strong,
.wysiwyg-editor .fr-view strong {
  font-weight: 600;
}
.wysiwyg-editor .fr-view table,
.wysiwyg-editor table {
  border: none;
  border-collapse: collapse;
  empty-cells: show;
  max-width: 100%;
}
.wysiwyg-editor .fr-view table th,
.wysiwyg-editor table th {
  color: inherit;
  background: inherit;
}
.wysiwyg-editor .fr-view table th,
.wysiwyg-editor .fr-view table td,
.wysiwyg-editor table th,
.wysiwyg-editor table td {
  padding: 8px 10px 6px;
  font-size: 16px;
  border: 1px solid var(--border-content-alt);
}
.wysiwyg-editor .fr-view table td,
.wysiwyg-editor table td {
  min-width: 5px;
}
.wysiwyg-editor .fr-view table.fr-alternate-rows tbody tr:nth-child(2n),
.wysiwyg-editor table.fr-alternate-rows tbody tr:nth-child(2n) {
  background: var(--bg-grey-f8);
}
.wysiwyg-editor .fr-view table.fr-dashed-borders td,
.wysiwyg-editor .fr-view table.fr-dashed-borders th,
.wysiwyg-editor table.fr-dashed-borders td,
.wysiwyg-editor table.fr-dashed-borders th {
  border-style: dashed;
}
.wysiwyg-editor .fr-view img.fr-bordered,
.wysiwyg-editor img.fr-bordered {
  border: solid 2px var(--border-content);
}
.wysiwyg-editor .fr-view img.fr-shadow {
  box-shadow: 0 8px 10px -3px color-mix(in srgb, var(--bg-shadow) 10%, transparent);
}
.wysiwyg-editor .fr-view img.fr-dii {
  margin-left: 15px;
  margin-right: 15px;
  max-width: calc(100% - 30px);
}
@media (max-width: 480px) {
  .wysiwyg-editor .fr-view img.fr-dii {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    margin: 20px auto !important;
  }
}
.wysiwyg-editor .fr-view img.fr-dii.fr-fic,
.wysiwyg-editor img.fr-dii.fr-fic {
  display: flex;
  margin: 5px auto 5px;
  max-width: 100%;
}
.wysiwyg-editor .fr-view img.fr-dib.fr-fic,
.wysiwyg-editor img.fr-dib.fr-fic {
  display: block;
  margin: 5px auto 5px;
  max-width: 100%;
  object-fit: contain;
  height: auto !important;
}
.wysiwyg-editor .fr-view img.fr-dii.fr-fil,
.wysiwyg-editor img.fr-dii.fr-fil {
  display: inline-block !important;
  float: left;
  margin: 5px 0 5px 0;
  max-width: calc(100% - 15px);
}
.wysiwyg-editor .fr-view img.fr-dib.fr-fil,
.wysiwyg-editor img.fr-dib.fr-fil {
  display: block;
  margin: 5px auto 5px 0;
  max-width: 100%;
  object-fit: contain;
  height: auto !important;
}
.wysiwyg-editor .fr-view img.fr-dii.fr-fir,
.wysiwyg-editor img.fr-dii.fr-fir {
  display: inline-block !important;
  float: right;
  margin: 5px 0 5px 0;
  max-width: calc(100% - 15px);
  outline: none !important;
  object-fit: contain;
  height: auto !important;
}
.wysiwyg-editor .fr-view img.fr-dib.fr-fir,
.wysiwyg-editor img.fr-dib.fr-fir {
  display: block;
  margin: 5px 0 5px auto;
  max-width: 100%;
}
.wysiwyg-editor .fr-view img.fr-left-margin,
.wysiwyg-editor .fr-view img.fr-dii.fr-left-margin,
.wysiwyg-editor img.fr-dii.fr-fir.fr-dii.fr-left-margin {
  margin-left: 40px;
}
.wysiwyg-editor .fr-view img.fr-right-margin,
.wysiwyg-editor .fr-view img.fr-dii.fr-right-margin,
.wysiwyg-editor img.fr-dii.fr-fil.fr-dii.fr-right-margin {
  margin-right: 40px;
}
.wysiwyg-editor .fr-strong {
  font-weight: 600;
}
.wysiwyg-editor .fr-image-resizer {
  border-color: var(--color-primary);
}
.wysiwyg-editor .fr-image-resizer .fr-handler {
  background: var(--color-primary);
  border-radius: 4px;
}
.wysiwyg-editor .fr-image-resizer.fr-active {
  border-color: var(--color-primary);
}
.wysiwyg-editor .fr-element table td.fr-selected-cell,
.wysiwyg-editor .fr-element table th.fr-selected-cell {
  border-color: var(--color-primary);
}
.wysiwyg-editor .fr-video.fr-rv {
  position: relative;
}
.wysiwyg-editor .fr-video.fr-rv {
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.wysiwyg-editor .fr-video.fr-dvb {
  display: block;
  clear: both;
}
.wysiwyg-editor .fr-video.fr-rv iframe {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.wysiwyg-editor .fr-view .fr-table-selection-hover {
  outline: none;
}

.fr-toolbar.fr-desktop .fr-command:hover:not(.fr-table-cell), .wysiwyg-editor .fr-toolbar.fr-desktop .fr-command:hover:not(.fr-table-cell),
.fr-toolbar.fr-desktop .fr-command:focus:not(.fr-table-cell),
.wysiwyg-editor .fr-toolbar.fr-desktop .fr-command:focus:not(.fr-table-cell),
.fr-toolbar.fr-desktop .fr-command.fr-btn-hover:not(.fr-table-cell),
.wysiwyg-editor .fr-toolbar.fr-desktop .fr-command.fr-btn-hover:not(.fr-table-cell),
.fr-toolbar.fr-desktop .fr-command.fr-expanded:not(.fr-table-cell),
.wysiwyg-editor .fr-toolbar.fr-desktop .fr-command.fr-expanded:not(.fr-table-cell) {
  background: var(--bg-grey-f5);
}

.fr-toolbar.fr-desktop .fr-command.fr-btn.fr-open:not(:hover):not(:focus):not(:active), .wysiwyg-editor .fr-toolbar.fr-desktop .fr-command.fr-btn.fr-open:not(:hover):not(:focus):not(:active) {
  background: var(--bg-wysiwyg-placeholder);
}

.fr-command.fr-btn.fr-options.fr-btn-hover, .wysiwyg-editor .fr-command.fr-btn.fr-options.fr-btn-hover,
.fr-command.fr-btn.fr-options:hover,
.wysiwyg-editor .fr-command.fr-btn.fr-options:hover,
.fr-command.fr-btn.fr-options:focus,
.wysiwyg-editor .fr-command.fr-btn.fr-options:focus {
  border-left: none !important;
}

.fr-toolbar .fr-command.fr-btn svg path, .wysiwyg-editor .fr-toolbar .fr-command.fr-btn svg path,
.fr-toolbar.fr-desktop .fr-command.fr-btn svg path,
.wysiwyg-editor .fr-toolbar.fr-desktop .fr-command.fr-btn svg path,
.fr-popup.fr-desktop .fr-command.fr-btn svg path,
.wysiwyg-editor .fr-popup.fr-desktop .fr-command.fr-btn svg path,
.fr-modal .fr-command.fr-btn svg path,
.wysiwyg-editor .fr-modal .fr-command.fr-btn svg path {
  fill: var(--text-default);
}

.fr-popup.fr-desktop .fr-separator,
.fr-modal.fr-desktop .fr-separator,
.fr-toolbar.fr-desktop .fr-separator {
  background: var(--border-content);
}

.fr-toolbar.fr-desktop.fr-inline {
  width: 462px;
  max-width: 90%;
  background: var(--bg-content);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--black) 15%, transparent);
  border-radius: 4px;
}
.fr-toolbar.fr-desktop .fr-btn-grp {
  margin: 0;
  padding: 0 5px 0 5px;
}
.fr-toolbar.fr-desktop .fr-btn-grp:first-child {
  border-left: 0;
}
.fr-toolbar.fr-desktop .fr-command.fr-btn.fr-dropdown:after {
  right: 4px;
}
.fr-toolbar.fr-desktop .fr-command.fr-btn + .fr-dropdown-menu {
  background: var(--bg-content);
}
.fr-toolbar.fr-desktop .fr-command.fr-btn.fr-dropdown.fr-active,
.fr-toolbar.fr-desktop .fr-command.fr-btn.fr-dropdown.fr-active,
.fr-toolbar.fr-desktop .fr-command.fr-btn.fr-dropdown.fr-active {
  fill: var(--text-default) !important;
  background: var(--bg-content-alt) !important;
}
.fr-toolbar.fr-desktop .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a {
  padding: 3px 10px 0;
  color: var(--text-default);
}
.fr-toolbar.fr-desktop .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active {
  background: var(--bg-content-alt);
}
.fr-toolbar.fr-desktop .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li h1 {
  font-size: 32px;
  font-weight: 600;
}
.fr-toolbar.fr-desktop .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li h2 {
  font-size: 26px;
  font-weight: 600;
}
.fr-toolbar.fr-desktop .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li h3 {
  font-size: 22px;
  font-weight: 600;
}
.fr-toolbar.fr-desktop .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li h4 {
  font-size: 18px;
  font-weight: 600;
}
.fr-toolbar.fr-desktop .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li pre {
  border: none;
  background: none;
}
.fr-toolbar.fr-desktop .fr-btn-grp {
  position: relative;
  margin: 5px 0;
  padding: 0 5px;
}
.fr-toolbar.fr-desktop .fr-btn-grp::after {
  content: "";
  display: block;
  position: absolute;
  left: 100%;
  top: 7px;
  height: 16px;
  border-right: 1px solid var(--border-content);
}
.fr-toolbar.fr-desktop .fr-btn-grp:nth-child(3)::after {
  display: none;
}
.simplified-html-editor.wysiwyg-editor .fr-toolbar.fr-desktop .fr-btn-grp:nth-child(2)::after {
  display: none;
}
.fr-toolbar.fr-desktop .fr-command.fr-btn {
  margin: 0 2px;
  padding: 0;
  height: 30px;
  color: var(--text-default);
}
.fr-toolbar.fr-desktop .fr-command.fr-btn svg.fr-svg {
  height: 18px;
  margin: 3px 3px;
  width: 20px;
}
.fr-toolbar.fr-desktop .fr-command.fr-btn.fr-dropdown {
  margin: 0 0 0 -2px;
}
.fr-toolbar.fr-desktop .fr-command.fr-btn.fr-dropdown:after {
  border-left-width: 3px;
  border-right-width: 3px;
  border-top-width: 3px;
  right: 5px;
  top: 14px;
}
.fr-toolbar.fr-desktop .fr-command.fr-btn.fr-open {
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 4px;
}
.fr-toolbar.fr-desktop .fr-newline {
  margin: 0;
  background: var(--border-content);
}
.fr-toolbar.fr-desktop .fr-more-toolbar {
  background: var(--bg-grey-f5);
}
.fr-toolbar.fr-desktop .fr-more-toolbar.fr-expanded {
  height: 40px;
  padding-top: 5px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.fr-toolbar .fr-btn-grp .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path,
.fr-toolbar .fr-more-toolbar .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path,
.fr-toolbar .fr-buttons:not(.fr-tabs) .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path,
.fr-popup .fr-btn-grp .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path,
.fr-popup .fr-more-toolbar .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path,
.fr-popup .fr-buttons:not(.fr-tabs) .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path,
.fr-modal .fr-btn-grp .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path,
.fr-modal .fr-more-toolbar .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path,
.fr-modal .fr-buttons:not(.fr-tabs) .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path {
  fill: var(--color-primary) !important;
}

.fr-popup.fr-desktop {
  z-index: 10000 !important;
  color: var(--text-default);
  background: var(--bg-content);
  box-shadow: 0 3px 15px color-mix(in srgb, var(--black) 5%, transparent), 0 1px 5px color-mix(in srgb, var(--black) 10%, transparent);
}
.fr-popup.fr-desktop .fr-buttons:not(.fr-tabs) {
  padding: 2px 5px;
}
.fr-popup.fr-desktop .fr-buttons.fr-tabs {
  background: var(--bg-grey-f8);
}
.fr-popup.fr-desktop .fr-tabs .fr-command.fr-btn {
  height: 30px;
}
.fr-popup.fr-desktop .fr-buttons .fr-btn {
  height: 30px;
  margin: 5px 2px;
  padding: 2px 4px;
  text-align: center;
  color: var(--text-default);
}
.fr-popup.fr-desktop .fr-buttons .fr-btn:hover {
  background: var(--bg-grey-f8);
}
.fr-popup.fr-desktop .fr-tabs .fr-command.fr-btn img,
.fr-popup.fr-desktop .fr-tabs .fr-command.fr-btn svg {
  margin-left: auto !important;
  margin-right: auto !important;
}
.fr-popup.fr-desktop .fr-command.fr-btn svg.fr-svg {
  height: 20px;
  margin: 0;
}
.fr-popup.fr-desktop .fr-input-line input[type=text]:focus,
.fr-popup.fr-desktop .fr-popup .fr-input-line textarea:focus {
  border-color: var(--color-primary);
}
.fr-popup.fr-desktop .fr-separator.fr-vs {
  height: 20px;
  margin: 10px 4px;
}
.fr-popup.fr-desktop .fr-separator.fr-hs {
  height: 1px;
  margin: 0 4px;
}
.fr-popup.fr-desktop .fr-command.fr-btn.fr-dropdown:after {
  display: none;
}
.fr-popup.fr-desktop .fr-action-buttons button.fr-command, .fr-popup.fr-desktop .fr-action-buttons button.fr-command:focus, .fr-popup.fr-desktop .fr-action-buttons button.fr-command:visited {
  font-weight: 600;
}
.fr-popup.fr-desktop .fr-action-buttons button.fr-command:hover, .fr-popup.fr-desktop .fr-action-buttons button.fr-command:active {
  background: var(--bg-grey-f5);
}
.fr-popup.fr-desktop .fr-action-buttons button.fr-command.fr-submit {
  color: var(--color-primary);
}
.fr-popup.fr-desktop .fr-checkbox input:checked + span {
  background: var(--color-primary);
  border: solid 2px var(--color-primary);
}
.fr-popup.fr-desktop .fr-image-progress-bar-layer > h3 {
  margin-top: 0;
}
.fr-popup.fr-desktop .fr-image-progress-bar-layer > div.fr-loader {
  background: var(--bg-grey-e);
}
.fr-popup.fr-desktop .fr-image-progress-bar-layer > div.fr-loader span {
  background: var(--color-primary);
}

.wysiwyg-attachment {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 2px;
  padding: 11px 34px 9px 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 5px;
}
.wysiwyg-attachment:last-child {
  margin-bottom: 0;
}

.fr-box.fr-inline a.fr-floating-btn {
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  background: var(--bg-content);
  box-shadow: 0 0 0 1px var(--border-content-alt);
}
.fr-box.fr-inline a.fr-floating-btn svg {
  margin: 3px auto;
  fill: var(--text-lighter);
}
.fr-box.fr-inline a.fr-floating-btn:hover {
  background: var(--bg-grey-f8);
}
.fr-box.fr-inline a.fr-floating-btn:hover svg {
  fill: var(--text-default);
}

.fr-box.fr-inline .fr-qi-helper a.fr-btn.fr-floating-btn {
  padding: 3px 5px 3px;
  background: var(--bg-content);
}
.fr-box.fr-inline .fr-qi-helper a.fr-btn.fr-floating-btn svg {
  fill: var(--text-muted);
}
.fr-box.fr-inline .fr-qi-helper a.fr-btn.fr-floating-btn:hover {
  background: var(--bg-content-alt);
}
.fr-box.fr-inline .fr-qi-helper a.fr-btn.fr-floating-btn:hover svg {
  fill: var(--text-default);
}

.saving-status {
  display: inline-block;
  float: right;
  margin: 0 0 0 auto;
  padding-top: 5px;
  text-align: right;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted-alt);
}

.fr-wrapper.show-placeholder .fr-placeholder {
  font-family: var(--font-sans-serif) !important;
  color: var(--text-lighter);
}

.comment-html-editor.wysiwyg-editor,
.simplified-html-editor.wysiwyg-editor {
  border: 1px solid var(--border-darker);
  border-radius: 8px;
}
.comment-html-editor.wysiwyg-editor.not-focused:hover,
.simplified-html-editor.wysiwyg-editor.not-focused:hover {
  cursor: pointer;
}
.comment-html-editor.wysiwyg-editor.focused,
.simplified-html-editor.wysiwyg-editor.focused {
  border: 1px solid var(--color-primary);
}
.comment-html-editor.wysiwyg-editor .fr-toolbar.fr-top,
.simplified-html-editor.wysiwyg-editor .fr-toolbar.fr-top {
  width: 100%;
  max-width: 100%;
  background: none;
  border: none;
  box-shadow: none;
}
.comment-html-editor.wysiwyg-editor .fr-toolbar .fr-more-toolbar.fr-expanded,
.simplified-html-editor.wysiwyg-editor .fr-toolbar .fr-more-toolbar.fr-expanded {
  border-radius: 0;
}
.comment-html-editor.wysiwyg-editor .fr-box.fr-basic .fr-wrapper,
.simplified-html-editor.wysiwyg-editor .fr-box.fr-basic .fr-wrapper {
  background: none;
}
.comment-html-editor.wysiwyg-editor .fr-second-toolbar,
.simplified-html-editor.wysiwyg-editor .fr-second-toolbar {
  display: none;
}
.comment-html-editor.wysiwyg-editor .fr-box.fr-basic .fr-element,
.simplified-html-editor.wysiwyg-editor .fr-box.fr-basic .fr-element {
  padding: 12px;
  color: var(--text-default);
  min-height: 80px !important;
}
.comment-html-editor.wysiwyg-editor p,
.comment-html-editor.wysiwyg-editor ul,
.comment-html-editor.wysiwyg-editor li,
.simplified-html-editor.wysiwyg-editor p,
.simplified-html-editor.wysiwyg-editor ul,
.simplified-html-editor.wysiwyg-editor li {
  font-size: 14px;
  font-family: inherit;
  word-break: break-word;
}

.wysiwyg-editor-not-opaque {
  opacity: 1;
}

.wysiwyg-editor-mention {
  font-weight: 600;
}

.tribute-container {
  z-index: calc(var(--z-drawer) + 1);
  max-height: 275px;
  margin-top: 5px;
  overflow: scroll;
  border-radius: 6px;
  background-color: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--black) 10%, transparent);
  pointer-events: none;
}
.tribute-container.tribute-container--in-drawer {
  position: fixed !important;
}
.tribute-container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.tribute-container ul li {
  pointer-events: auto;
}
.tribute-container ul li .tribute-name {
  position: relative;
  font-size: 14px;
  color: var(--text-default);
  margin-left: 10px;
  top: 1px;
}
.tribute-container ul li.highlight {
  background-color: transparent;
}
.tribute-container ul li.highlight .tribute-content {
  cursor: pointer;
  background-color: var(--bg-grey-fa);
}
.tribute-container ul li.highlight .tribute-content .tribute-name,
.tribute-container ul li.highlight .tribute-content .tribute-email {
  color: var(--text-default);
}

.tribute--item[data-item-group]::before {
  content: attr(data-item-group);
  display: block;
  font-size: 12px;
  padding: 10px 20px 10px 10px;
  color: var(--text-muted-alt);
  pointer-events: none;
}

.tribute-content {
  padding: 10px;
}

.notifications-banner-cta {
  cursor: pointer;
}

body.impersonating::before {
  position: fixed;
  z-index: 9999;
  top: 0;
  width: 100%;
  content: "";
  border-top: 5px solid var(--color-danger);
}

.impersonating-alert {
  position: fixed;
  z-index: 9999;
  bottom: 0;
  left: 10%;
  width: 80%;
  padding: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary-contrast);
  text-align: center;
  background-color: var(--color-danger);
  border-radius: 10px 10px 0 0;
}
.impersonating-alert a,
.impersonating-alert a:focus,
.impersonating-alert a:visited,
.impersonating-alert a:hover,
.impersonating-alert a:active {
  color: var(--color-primary-contrast);
}

.client-portal-preview-impersonating-alert {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary-contrast);
  text-align: center;
  background-color: #4CAF50;
  border: none;
}
.client-portal-preview-impersonating-alert a,
.client-portal-preview-impersonating-alert a:focus,
.client-portal-preview-impersonating-alert a:visited,
.client-portal-preview-impersonating-alert a:hover,
.client-portal-preview-impersonating-alert a:active {
  color: var(--color-primary-contrast);
}

body.client-portal-preview .portal-dashboard-sidebar {
  top: 44px;
}

.client-mode-sunset {
  display: none;
  font-weight: 400;
}
@media (min-width: 1200px) {
  .client-mode-sunset {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-navigation);
  }
  #outer-wrapper.with-sidebar .client-mode-sunset {
    left: var(--sidebar-width-collapsed);
  }
  #outer-wrapper.with-sidebar.with-secondary-menu .client-mode-sunset, #outer-wrapper.with-sidebar.with-sidebar-expanded .client-mode-sunset {
    left: var(--sidebar-width);
  }
}

@media (min-width: 1200px) {
  body.client-mode-sunset-visible #navigation {
    top: 44px;
  }
  body.client-mode-sunset-visible .page-content-with-header {
    padding-top: calc(var(--navigation-height) + 44px);
  }
}

.m-signature-pad {
  position: relative;
  font-size: 10px;
  width: 700px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-left: -350px;
  border: 1px solid #e8e8e8;
  background-color: var(--bg-content);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--black) 27%, transparent), 0 0 40px color-mix(in srgb, var(--black) 8%, transparent) inset;
  border-radius: 4px;
  user-select: none;
}

.m-signature-pad--body {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  bottom: 60px;
  border: 1px solid #f4f4f4;
}

.m-signature-pad--body canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 0 5px color-mix(in srgb, var(--black) 2%, transparent) inset;
}

.m-signature-pad--footer {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  height: 40px;
}

.m-signature-pad--footer .description {
  color: #c3c3c3;
  text-align: center;
  font-size: 1.2em;
  margin-top: 1.8em;
}

.m-signature-pad--footer .button {
  position: absolute;
  bottom: 0;
}

.m-signature-pad--footer .button.clear {
  left: 0;
}

.m-signature-pad--footer .button.save {
  right: 0;
}

@media screen and (max-width: 1024px) {
  .m-signature-pad {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    min-width: 250px;
    min-height: 140px;
    margin: 5%;
  }
  #github {
    display: none;
  }
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .m-signature-pad {
    margin: 10%;
  }
}
@media screen and (max-height: 320px) {
  .m-signature-pad--body {
    left: 0;
    right: 0;
    top: 0;
    bottom: 32px;
  }
  .m-signature-pad--footer {
    left: 20px;
    right: 20px;
    bottom: 4px;
    height: 28px;
  }
  .m-signature-pad--footer .description {
    font-size: 1em;
    margin-top: 1em;
  }
}
.page-filters-values {
  display: none;
}

.page-filters {
  position: relative;
  z-index: 10;
  display: inline-block;
  min-width: 160px;
}
.page-filters.open {
  z-index: 10;
}
.page-filters .Select__value-container {
  font-size: 14px;
  font-weight: 600;
}

.btn.page-filters-toggle {
  display: block;
  width: 100%;
  height: 40px;
  padding: 8px 30px 7px 10px;
  text-align: left;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  overflow: hidden;
}
.btn.page-filters-toggle, .btn.page-filters-toggle:focus, .btn.page-filters-toggle:visited {
  color: var(--text-default);
  background-color: var(--bg-content);
  border-color: var(--border-content-alt);
  background-image: linear-gradient(to bottom, #ffffff 0%, var(--bg-grey-fc) 100%);
}
.btn.page-filters-toggle:hover {
  color: var(--text-default);
  background-color: var(--bg-content);
  border-color: var(--color-primary);
  background-image: linear-gradient(to bottom, #ffffff 0%, var(--bg-grey-fc) 100%);
}
.page-filters.open .btn.page-filters-toggle {
  color: var(--text-lighter);
  box-shadow: inset 0 1px 4px color-mix(in srgb, var(--black) 10%, transparent);
  border-color: var(--color-primary);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.page-filters-toggle-caret {
  position: absolute;
  right: 10px;
  top: 13px;
  font-size: 11px;
  color: var(--text-lightest);
  transition: all var(--transition-normal) ease;
  transform-origin: 50% 45%;
}
.page-filters.open .page-filters-toggle-caret {
  transform: rotate(180deg);
}

.page-filters-options {
  position: absolute;
  z-index: 1000;
  display: none;
  left: 0;
  top: 100%;
  width: 100%;
  margin-top: -1px;
  font-size: 14px;
  text-align: left;
  background: var(--bg-content);
  border: 1px solid var(--color-primary);
  border-top: 1px solid color-mix(in srgb, var(--black) 6%, transparent);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 8px color-mix(in srgb, var(--black) 4%, transparent);
}
.page-filters.open .page-filters-options {
  display: block;
}

.page-filters-option {
  display: block;
  padding: 10px 10px 7px;
  letter-spacing: 0;
  color: var(--text-default);
  white-space: nowrap;
}
.page-filters-option:hover {
  color: var(--text-muted);
  background: var(--bg-input-hover);
}
.page-filters-option.active {
  color: var(--text-muted);
  background: var(--bg-grey-f5);
}
.page-filters-option.no-results {
  color: var(--text-lightest);
  opacity: 0.8;
}
.page-filters-option.no-results:hover {
  color: var(--text-lightest);
  background: none;
}

.list-split-search-wrapper {
  display: flex;
  flex: 1;
  gap: 10px;
  justify-content: flex-start;
}
.list-split-search-wrapper .field-popup-menu {
  left: auto;
  right: 0;
}
@media (min-width: 768px) {
  .list-split-search-wrapper .field-popup-menu {
    left: 0;
    right: auto;
  }
}

.list-split-search-input-wrapper {
  position: relative;
  flex: 1;
  display: none;
}
@media (min-width: 768px) {
  .list-split-search-input-wrapper {
    display: inline-flex;
    flex: 0;
  }
}

.list-split-search-input.form-field {
  padding-left: 36px;
  font-size: 14px;
  border: 1px solid var(--border-content);
}
.list-split-search-input.form-field:hover {
  border-color: var(--grey-c);
}
.list-split-search-input.form-field:focus, .list-split-search-input.form-field:active {
  border: 1px solid var(--color-primary);
}
@media (min-width: 768px) {
  .list-split-search-input.form-field {
    width: 250px;
  }
}

.search-split-filters-btn {
  display: flex;
  align-items: center;
  width: 40px;
  padding-top: 6px;
}
@media (min-width: 768px) {
  .search-split-filters-btn {
    padding-left: 36px;
    width: auto;
  }
  .search-split-filters-btn:hover path.fill-none {
    stroke: var(--text-default);
  }
  .search-split-filters-btn:hover path:not(.fill-none) {
    fill: var(--text-default);
  }
}
.search-split-filters-btn.search-split-filters-btn-applied {
  background-color: var(--bg-content);
  border-color: var(--color-primary);
}
.search-split-filters-btn.search-split-filters-btn-applied:hover {
  background-color: var(--bg-grey-f5);
}
.search-split-filters-btn.search-split-filters-btn-active {
  background-color: var(--bg-grey-f5);
  border-color: var(--color-primary);
}

.list-actions-date-scrubber {
  position: relative;
  justify-content: flex-start;
  justify-self: flex-start;
  align-self: center;
  margin-right: 10px;
}
.page-properties-section .list-actions-date-scrubber {
  width: 100%;
  margin-right: 0;
}

.list-actions-date-scrubber-btn.btn.btn-default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-left: 30px;
  padding-right: 30px;
  transition: border var(--transition-fast) ease, padding var(--transition-normal) ease;
}
.list-actions-date-scrubber-btn.btn.btn-default.hide-arrows {
  padding-left: 18px;
  padding-right: 18px;
}
.page-properties-section .list-actions-date-scrubber-btn.btn.btn-default {
  width: 100%;
  margin-bottom: 30px;
  border: none;
  box-shadow: none;
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
  border-radius: 0;
  font-weight: 500;
}

.list-actions-date-scrubber-btn-icon {
  position: relative;
  width: 14px;
  height: auto;
  pointer-events: none;
  transition: all var(--transition-fast) ease;
}
.list-actions-date-scrubber-btn-icon path {
  fill: var(--text-default);
}
.list-actions-date-scrubber-switcher:hover ~ .list-actions-date-scrubber-btn-icon path {
  fill: var(--text-default);
}

.list-actions-date-scrubber-value {
  position: relative;
  pointer-events: none;
}

.list-actions-date-scrubber-switcher {
  position: absolute;
  top: 2px;
  left: 30px;
  right: 30px;
  bottom: 2px;
  border-radius: 4px;
  transition: all var(--transition-fast) ease;
}
.list-actions-date-scrubber-switcher:hover {
  background: var(--bg-grey-fa);
}
.list-actions-date-scrubber-btn.hide-arrows .list-actions-date-scrubber-switcher {
  left: 2px;
  right: 2px;
}

.list-actions-date-scrubber-left {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 0;
  height: 100%;
  width: 40px;
  padding: 10px 14px 9px 10px;
  transition: all var(--transition-fast) ease;
}
.list-actions-date-scrubber-left path {
  fill: var(--text-default);
}
.list-actions-date-scrubber-left:hover path {
  fill: var(--text-default);
}
.list-actions-date-scrubber-left.date-scrubber-disabled {
  pointer-events: none;
}
.list-actions-date-scrubber-left.date-scrubber-disabled path {
  fill: var(--border-content-alt);
}
.list-actions-date-scrubber-btn.hide-arrows .list-actions-date-scrubber-left {
  display: none;
}

.list-actions-date-scrubber-right {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
  top: 0;
  height: 100%;
  width: 40px;
  padding: 10px 10px 9px 14px;
  transition: all var(--transition-fast) ease;
}
.list-actions-date-scrubber-right path {
  fill: var(--text-default);
}
.list-actions-date-scrubber-right:hover path {
  fill: var(--text-default);
}
.list-actions-date-scrubber-right.date-scrubber-disabled {
  pointer-events: none;
}
.list-actions-date-scrubber-right.date-scrubber-disabled path {
  fill: var(--border-content-alt);
}
.list-actions-date-scrubber-btn.hide-arrows .list-actions-date-scrubber-right {
  display: none;
}

.list-actions-date-scrubber-datepicker {
  position: absolute;
  z-index: var(--z-popup-menu);
  top: 100%;
  left: 0;
  margin-top: 10px;
}
.list-actions-date-scrubber-datepicker.list-actions-date-scrubber-datepicker--align-right {
  left: auto;
  right: 0;
}

.list-search-wrapper {
  position: relative;
  width: 100%;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--black) 2%, transparent);
  border-radius: 6px;
  transition: all var(--transition-fast) ease;
}
.list-search-wrapper.focused, .list-search-wrapper:focus, .list-search-wrapper:hover {
  border-color: var(--border-darker);
}
@media (min-width: 768px) {
  .list-search-wrapper.with-tags-counter {
    max-width: 145px;
  }
}
@media (min-width: 768px) {
  .list-search-wrapper {
    max-width: 120px;
    float: left;
  }
  .list-search-wrapper.active {
    border-color: var(--border-darker);
  }
  .list-search-wrapper.focused {
    max-width: 300px;
    border-color: var(--border-darker);
  }
}

.list-search-cell {
  min-width: 40px;
  vertical-align: top;
  overflow: hidden;
}

.list-search-input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}
@media (min-width: 768px) {
  .list-search-input-wrapper {
    width: 250px;
  }
}

.list-search-input-icon-label {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  text-align: center;
  margin: 0;
  cursor: pointer;
}

.list-search-input-icon {
  position: absolute;
  top: 10px;
  left: 13px;
  width: 14px;
  height: auto;
  transition: all var(--transition-fast) ease;
}
.list-search-input-icon:hover path {
  fill: var(--text-default);
}
.list-search-input-icon path {
  fill: var(--text-default);
}
.list-split-search-wrapper .list-search-input-icon {
  top: 11px;
}

.list-search-input.form-field {
  height: 38px;
  padding-left: 40px;
  padding-right: 94px;
  background: none;
  border: none;
}
@media (min-width: 768px) {
  .list-search-input.form-field {
    opacity: 0;
    transition: all var(--transition-fast) var(--transition-normal) ease;
  }
  .list-search-wrapper.focused .list-search-input.form-field {
    opacity: 1;
  }
}

.list-search-input-clear-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 0 15px;
}

.list-search-input-clear-icon {
  width: 10px;
  height: auto;
}
.list-search-input-clear-icon path {
  fill: var(--text-lighter);
}
.list-search-input-clear-button:hover .list-search-input-clear-icon path {
  fill: var(--text-default);
}

.list-search-clear {
  position: absolute;
  right: 0;
  top: 0;
  padding: 14px 12px;
  font-size: 12px;
  opacity: 0.7;
}
.list-search-clear, .list-search-clear:focus, .list-search-clear:visited {
  color: var(--text-muted);
}
.list-search-clear:hover, .list-search-clear:active {
  color: var(--text-muted);
}

.list-search-filters {
  margin-top: 20px;
  margin-bottom: -20px;
}

.list-search-filter-names {
  margin-top: 20px;
}
.list-search-filter-names:empty {
  display: none;
}

.list-search-filter-name {
  display: flex;
  float: left;
  align-items: center;
  padding: 2px 11px 4px 12px;
  margin-right: 5px;
  margin-bottom: 3px;
  font-weight: 600;
  font-size: 14px;
  cursor: default;
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
  border-radius: 8px;
}

.list-search-filter-name-label {
  margin-right: 8px;
  padding-top: 2px;
  vertical-align: middle;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 10px;
  color: var(--text-lighter);
}

.list-search-filter-icon {
  padding: 0 1px 0 8px;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.8;
}
.list-search-filter-icon:hover {
  opacity: 1;
}
.category-tag .list-search-filter-icon {
  position: absolute;
  top: 1px;
  right: 11px;
}

.search-advanced-filters-wrapper {
  position: absolute;
  right: 0;
  top: 0;
  width: 75px;
  background-color: var(--bg-content);
  border-radius: 0 6px 6px 0;
}
@media (min-width: 768px) {
  .search-advanced-filters-wrapper {
    width: 80px;
  }
}
.search-advanced-filters-wrapper.with-tags-counter {
  width: 105px;
}
@media (min-width: 768px) {
  .search-advanced-filters-wrapper.with-tags-counter {
    max-width: 115px;
  }
}

.search-advanced-filters-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 38px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
  user-select: none;
  color: var(--text-default);
  cursor: pointer;
  transition: color var(--transition-fast) ease;
}
.search-advanced-filters-btn:hover {
  color: var(--text-default);
}
.list-search-wrapper.active .search-advanced-filters-btn {
  color: var(--text-default);
}
.contacts-index .search-advanced-filters-btn {
  border: 0;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
@media (min-width: 768px) {
  .search-advanced-filters-btn {
    padding-left: 3px;
    padding-right: 15px;
    font-size: 14px;
    line-height: 14px;
  }
}
.search-advanced-filters-wrapper.with-tags-counter .search-advanced-filters-btn {
  padding-left: 30px;
}

.search-advanced-filters-btn-icon {
  position: relative;
  display: inline-block;
  top: 1px;
  width: 10px;
  height: auto;
  transition: all var(--transition-fast) ease;
}
.search-advanced-filters-btn-icon.active {
  transform: rotate(180deg);
}

.search-advanced-filters-btn-counter {
  position: relative;
  display: none;
  top: 0;
  width: 18px;
  height: 19px;
  padding-top: 0.5px;
  margin-left: 7px;
  margin-right: -5px;
  background-color: var(--border-content-alt);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .search-advanced-filters-btn-counter {
    display: inline-block;
  }
}

@media (min-width: 768px) {
  .search-split-filters-wrapper {
    position: relative;
    display: inline-block;
  }
}

.search-advanced-filters {
  position: absolute;
  z-index: 1001;
  right: auto;
  left: 20px;
  width: 100%;
  max-width: calc(100% - 40px);
  padding: 20px;
  margin-top: 5px;
  background: var(--bg-panel);
  border: 1px solid var(--border-content);
  border-radius: 10px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--black) 10%, transparent);
}
@media (min-width: 768px) {
  .search-advanced-filters {
    right: auto;
    left: 0;
    min-width: 260px;
  }
  .search-advanced-filters.with-2-columns {
    min-width: 660px;
    left: 0;
  }
}
.search-advanced-filters.task-unplanned-filter-menu {
  width: 360px;
  max-width: none;
}
.search-advanced-filters.sm-padding {
  padding: 10px;
}
.search-advanced-filters .DateRangePicker_picker {
  z-index: 10;
}
.search-advanced-filters .Select__control {
  min-height: 40px;
}

.search-advanced-filters-status-filters {
  display: grid;
  grid-gap: 25px;
}
@media (min-width: 768px) {
  .search-advanced-filters-status-filters {
    grid-template-columns: repeat(2, 1fr);
  }
}
.search-advanced-filters-status-filters .search-advanced-filters-status-filter {
  margin-bottom: 0;
}

.search-advanced-filters-status-filter {
  position: relative;
  margin-bottom: 25px;
}
.search-advanced-filters-status-filter:last-child {
  margin-bottom: 0;
}
.search-advanced-filters-status-filter .DateRangePicker .DateRangePickerInput {
  padding-left: 30px;
}

.search-advanced-filters-date-icon {
  position: absolute;
  z-index: 2;
  left: 10px;
  top: 12px;
  width: 15px;
  height: auto;
}

.search-page-filters {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  background: color-mix(in srgb, var(--black) 2%, transparent);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  padding: 20px 20px 0;
  border-radius: 4px;
  margin-top: 20px;
  animation: fade-in var(--transition-normal) 1 ease forwards;
}

.search-page-filter-item {
  min-width: 200px;
  width: 100%;
  margin-right: 10px;
  margin-bottom: 20px;
}
.search-page-filter-item:last-child {
  margin-right: 0;
}
@media (min-width: 480px) {
  .search-page-filter-item {
    width: auto;
    max-width: 260px;
  }
}
.search-page-filters .search-page-filter-item .page-filters {
  max-width: 100%;
  width: 100%;
}

.search-advanced-filters-dropdown {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px 10px;
}
.search-advanced-filters-dropdown .search-advanced-filters-status-filter {
  position: relative;
  margin: 0;
  flex-basis: calc(50% - 5px);
}

.select-multiple-record-count {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 14px;
  padding-right: 10px;
}

.filter-fields-header {
  padding: 0 20px 15px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-lighter);
  margin-bottom: 10px;
}

.filter-chips {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bg-grey-f1);
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-chip {
  width: 100%;
  display: inline-flex;
  background-color: var(--bg-grey-f5);
  border-radius: 5px;
  padding: 5.5px 11px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary-dark);
}

.filter-chip-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 6px;
}

.filter-chip-text-label {
  font-weight: 600;
}

.filter-chip-remove {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.filter-chip-remove::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -6px;
  bottom: -4px;
  left: -6px;
}
.filter-chip-remove svg {
  width: 8px;
  height: 8px;
}
.filter-chip-remove path {
  fill: var(--color-primary-dark);
}

.filter-fields-search-input {
  margin-bottom: 10px;
  width: 100%;
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
  padding: 8px 7px;
  font-size: 14px;
  font-weight: 400;
  line-height: 17.14px;
  color: var(--text-default);
  background-color: var(--bg-grey-f5);
}

.filter-fields-list-wrapper {
  min-width: 282px;
  transition: min-width var(--transition-fast) ease-in;
}
.filter-fields-list-wrapper.date {
  min-width: 310px;
}

.filter-fields-no-results {
  padding: 10px 7px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-lighter);
}

.filter-field-item {
  display: flex;
  align-items: center;
  padding: 7px 16px;
  cursor: pointer;
  transition: background-color var(--transition-fast) ease;
  justify-content: space-between;
}
.filter-field-item:hover {
  background-color: var(--bg-grey-fa);
  border-radius: 4px;
}

.filter-field-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-default);
}

.filter-field-used-indicator {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary-dark);
  opacity: 0.8;
}

.filter-fields-loading,
.filter-fields-error,
.filter-fields-empty {
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text-lighter);
}

.filter-field-config {
  padding: 0;
}

.filter-field-config-header {
  padding: 0 10px;
}

.filter-field-config-divider {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
}

.filter-field-config-title {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-default);
  cursor: pointer;
}

.filter-field-config-title-chevron {
  position: relative;
  top: 3px;
  width: 16px;
  height: auto;
  left: -5px;
}
.filter-field-config-title-chevron path {
  fill: var(--text-muted-alt);
}

.filter-field-config-operators {
  position: relative;
  z-index: 3;
  padding: 2px 0;
}

.filter-field-config-content {
  padding: 0;
}

.filter-field-config-row {
  margin-bottom: 15px;
}
.filter-field-config-row:last-child {
  margin-bottom: 0;
}

.filter-field-config-input-wrapper {
  padding: 10px 5px 0 5px;
}

.filter-field-config-input {
  width: 100%;
  height: 33px;
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
  background-color: var(--bg-grey-f5);
}
.filter-field-config-input:focus {
  border-color: var(--color-primary);
  outline: none;
}
.filter-field-config-input::placeholder {
  color: var(--text-lightest);
}

.filter-field-config-input-clear-icon {
  width: 8px;
  height: 8px;
  margin-top: 5px;
}
.filter-field-config-input-clear-icon path {
  fill: var(--text-muted-alt);
}

.filter-field-config-actions {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--bg-grey-f5);
}

.enum-options-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 17px;
  padding-left: 10px;
}

.date-range-text-inputs {
  display: flex;
  gap: 10px;
  padding: 15px 20px 0;
}

.relative-date-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 17px;
  padding-left: 10px;
}

.relative-date-options-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-default);
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .filters-compound-wrapper {
    position: relative;
    display: inline-block;
  }
}

.enum-option-label {
  font-weight: 400;
  font-size: 14px;
  color: var(--text-default);
}

.shepherd-step {
  z-index: 100;
}

.subnavigation {
  position: relative;
  display: block;
  background-color: var(--bg-content);
  box-shadow: inset 0 -1px 0 var(--border-content);
}
.drawer-wrapper .subnavigation, .modal-dialog .subnavigation {
  background: var(--bg-panel);
}
.upgrade-overlay .subnavigation {
  background: var(--bg-content-alt);
}
.subnavigation .navigation-automation-document-icon {
  display: none;
}
.subnavigation .navigation-item.automation-document-navigation-item {
  display: block;
}

.subnavigation-items {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0 30px;
  gap: 30px;
}
.subnavigation.subnavigation--with-counters .subnavigation-items {
  gap: 20px;
}
@media (max-width: 768px) {
  .subnavigation-items {
    overflow-x: scroll;
  }
  .subnavigation-items::-webkit-scrollbar {
    display: none;
  }
}

.subnavigation-item {
  padding: 16px 0;
  line-height: 100%;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  white-space: nowrap;
  user-select: none;
  text-align: center;
  border-bottom: 2px solid transparent;
}
.subnavigation-item, .subnavigation-item:focus, .subnavigation-item:visited {
  color: var(--text-muted);
  text-decoration: none;
}
.subnavigation-item:hover, .subnavigation-item:active {
  color: var(--text-default);
  text-decoration: none;
}
.subnavigation-item.active {
  color: var(--text-default);
  border-bottom-color: var(--color-primary);
}
.subnavigation-item:focus-visible {
  text-decoration: underline;
  outline: none;
}
.subnavigation-item.subnavigation-item--align-right {
  margin-left: auto;
}

.subnavigation-item-count {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 18px;
  top: -1px;
  margin: -2px 0 -6px 7px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-default);
  border: 1px solid var(--border-semi-transparent);
  border-radius: 4px;
}

.section-tabs {
  display: flex;
  background: var(--bg-grey-fc);
  box-shadow: inset 0 -1px 0 var(--border-content);
}
.section-tabs.in-modal {
  border-radius: 6px 6px 0 0;
}

.section-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 50px;
  padding: 11px 5px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}
.section-tab:focus, .section-tab:visited {
  color: var(--text-muted);
  text-decoration: none;
}
.section-tab:focus-visible {
  text-decoration: underline;
}
.section-tab:hover {
  color: var(--text-default);
}
.section-tab:first-child {
  border-left-width: 0;
  border-radius: 6px 0 0 0;
}
.section-tab:last-child {
  border-right-width: 0;
  border-radius: 0 6px 0 0;
}
.document-editor-body .section-tab {
  border-radius: 0;
}
.section-tab.active {
  color: var(--text-default);
  cursor: default;
  background: var(--bg-content);
  border-color: var(--border-content);
}
.modal .section-tab.active {
  background: var(--bg-panel);
}

.section-tab-icon {
  position: relative;
  height: 18px;
  width: auto;
}
.section-tab-icon--variables {
  height: 16px;
}
.section-tab-icon path {
  fill: var(--text-lighter);
}
.section-tab:hover .section-tab-icon path {
  fill: var(--text-muted);
}
.section-tab.active .section-tab-icon path {
  fill: var(--text-default);
}

.modal-document-sign-up-promo {
  height: 100%;
}
.modal-document-sign-up-promo .modal-dialog {
  height: 100%;
}
@media (min-width: 480px) {
  .modal-document-sign-up-promo .modal-dialog {
    height: auto;
  }
}
.modal-document-sign-up-promo .modal-content {
  height: 100%;
  border-radius: 0;
}
@media (min-width: 480px) {
  .modal-document-sign-up-promo .modal-content {
    height: auto;
    border-radius: 6px;
  }
}
@media (min-width: 480px) {
  .modal-document-sign-up-promo {
    height: auto;
  }
}

.modal-document-sign-up-promo-top {
  padding: 54px 30px 60px;
}
.modal-document-sign-up-promo-top.with-sign-up-container {
  padding: 54px 30px 152px;
}
@media (min-width: 480px) {
  .modal-document-sign-up-promo-top {
    padding: 54px 60px 60px;
  }
  .modal-document-sign-up-promo-top.with-sign-up-container {
    padding: 54px 60px 152px;
    border-bottom: 1px solid var(--border-content-alt);
  }
}

.modal-document-sign-up-promo-header {
  margin-bottom: 15px;
  font-size: 25px;
  font-weight: 600;
  color: var(--color-primary-dark);
}

.modal-document-sign-up-promo-icon-wrapper {
  margin-bottom: 23px;
}

.modal-document-sign-up-promo-icon {
  line-height: 0;
  width: 60px;
  height: auto;
  color: var(--color-primary);
}

.modal-document-sign-up-promo-copy {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-muted);
}

.modal-document-sign-up-promo-bonsai-logo {
  display: none;
}
@media (min-width: 768px) {
  .modal-document-sign-up-promo-bonsai-logo {
    display: block;
    position: absolute;
    top: 30px;
    left: 30px;
    height: 24px;
    width: 120px;
  }
}

.modal-document-sign-up-promo-bonsai-logo-icon {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 30px;
  height: 30px;
}
@media (min-width: 768px) {
  .modal-document-sign-up-promo-bonsai-logo-icon {
    display: none;
  }
}

.modal-document-sign-up-promo-container {
  font-family: var(--font-sans-serif);
  position: relative;
  margin: 0 auto;
  max-width: 350px;
  padding: 40px 20px;
  bottom: 112px;
  border-radius: 10px;
  border: 1px solid #dae2db;
  background: var(--bg-content);
}
@media (min-width: 480px) {
  .modal-document-sign-up-promo-container {
    max-width: 600px;
    padding: 60px;
  }
}

.modal-document-sign-up-promo-container-copy {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-bottom: 30px;
  line-height: 100%;
}

.modal-document-sign-up-promo-container-btn {
  font-family: var(--font-sans-serif) !important;
  border-radius: 4px;
  height: 50px;
  font-size: 16px;
  padding: 15px !important;
  line-height: 19px;
  width: 100%;
  white-space: nowrap;
  font-weight: 600;
  margin-top: 10px;
}
@media (min-width: 468px) {
  .modal-document-sign-up-promo-container-btn {
    border-left: 0;
    border-radius: 0 4px 4px 0;
    width: 33%;
    margin-top: 0;
  }
}

.modal-document-sign-up-promo-container-input {
  padding: 16px;
  border-radius: 4px 4px 0 0;
  height: 50px;
  vertical-align: middle;
  font-size: 16px;
}
.modal-document-sign-up-promo-container-input:hover {
  border-color: var(--color-primary) !important;
}
@media (min-width: 468px) {
  .modal-document-sign-up-promo-container-input {
    border-right: 0;
    border-radius: 4px 0 0 4px;
    width: 67%;
  }
}

.modal-document-sign-up-promo-booking-details {
  margin: 40px auto 0;
  max-width: 350px;
  padding: 30px 20px;
  border-radius: 10px;
  border-radius: 10px;
  background: var(--bg-grey-fa);
}
@media (min-width: 480px) {
  .modal-document-sign-up-promo-booking-details {
    max-width: 600px;
    padding: 30px 50px;
  }
}

.modal-document-sign-up-promo-booking-details-copy {
  color: var(--color-primary-dark);
  font-size: 20px;
  font-weight: 400;
}

.modal-document-sign-up-promo-booking-details-info {
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 400;
  margin-top: 15px;
  line-height: 31px;
}

.promo-banner-container {
  position: relative;
  padding: 20px;
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
}

.promo-banner-bg-1 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 240px;
  height: 200px;
  max-height: 100%;
  border-bottom-right-radius: 6px;
  background: transparent bottom right no-repeat;
  background-size: contain;
  background-image: url("payments/promo-background.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .promo-banner-bg-1 {
    background-image: url("payments/promo-background@2x.png");
  }
}

@media (min-width: 768px) {
  .promo-banner-cta {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.inline-upgrade-prompt {
  padding: 30px;
  background: var(--bg-brand-muted);
  border: 1px solid var(--border-content);
  border-radius: 8px;
}

.inline-upgrade-prompt-title {
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-default);
}

.comment-form-wrapper {
  position: relative;
}
.comment-form-wrapper:first-child {
  margin-top: 20px;
}
.comment-form-wrapper .btn {
  transition: none;
}

.comment-html-editor.wysiwyg-editor {
  border: 1px solid var(--border-field);
  border-radius: 8px;
}
.comment-html-editor.wysiwyg-editor.not-focused:hover {
  cursor: pointer;
}
.comment-html-editor.wysiwyg-editor.focused {
  border: 1px solid var(--color-primary);
}
.comment-html-editor.wysiwyg-editor .fr-toolbar.fr-top {
  width: 100%;
  max-width: 100%;
  background: none;
  border: none;
  box-shadow: none;
}
.comment-html-editor.wysiwyg-editor .fr-toolbar .fr-more-toolbar.fr-expanded {
  border-radius: 0;
}
.comment-html-editor.wysiwyg-editor .fr-box.fr-basic .fr-wrapper {
  background: none;
}
.comment-html-editor.wysiwyg-editor .fr-second-toolbar {
  display: none;
}

.comment-html-editor.wysiwyg-editor .fr-box.fr-basic .fr-element,
.comment-html-display.wysiwyg-editor .fr-box.fr-basic .fr-element {
  padding: 12px;
  color: var(--text-default);
  min-height: 80px !important;
}
.comment-html-editor.wysiwyg-editor p,
.comment-html-editor.wysiwyg-editor ul,
.comment-html-editor.wysiwyg-editor li,
.comment-html-display.wysiwyg-editor p,
.comment-html-display.wysiwyg-editor ul,
.comment-html-display.wysiwyg-editor li {
  font-size: 14px;
  font-family: inherit;
  word-break: break-word;
}
.comment-html-editor.wysiwyg-editor img.fr-dib.fr-fil,
.comment-html-display.wysiwyg-editor img.fr-dib.fr-fil {
  max-width: 300px !important;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 8px;
  transition: all var(--transition-slower) ease;
}
.comment-html-editor.wysiwyg-editor img.fr-dib.fr-fil:hover,
.comment-html-display.wysiwyg-editor img.fr-dib.fr-fil:hover {
  border-color: color-mix(in srgb, var(--black) 15%, transparent);
  filter: brightness(0.98);
}

textarea.form-field.comment-form-input {
  resize: vertical;
  height: 60px;
  font-size: 14px;
  transition: all var(--transition-normal) ease !important;
}
textarea.form-field.comment-form-input:focus, textarea.form-field.comment-form-input.active, textarea.form-field.comment-form-input.editing-existing {
  height: 100px;
}

.comment-form-avatar {
  position: absolute;
  left: 0;
  top: 0;
}

.comment-attachments {
  margin: 10px 10px;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
}
.comment-attachments .task-attachment-in {
  width: 100px;
  height: 56px;
  flex-shrink: 0;
}
.comment-attachments .task-attachment-in.task-attachment-in--link-preview {
  width: 160px;
  flex-shrink: 0;
}

.comment-attachment-item-remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: auto;
  padding: 5px 10px;
  cursor: pointer;
  background: none;
  border: 0;
  opacity: 0;
  border-radius: 0 5px 0 6px;
  transition: opacity var(--transition-fast) ease;
}
.task-attachment-in:hover .comment-attachment-item-remove {
  background: var(--bg-content);
  opacity: 0.8;
}
.comment-attachment-item-remove:hover, .task-attachment-in .comment-attachment-item-remove:hover {
  opacity: 0.95;
}
.comment-attachment-item-remove svg {
  width: 100%;
  height: auto;
}
.comment-attachment-item-remove path {
  fill: var(--color-danger);
}

.comment-attachment-filename.task-attachment-name {
  font-size: 12px;
  padding-top: 8px;
  line-height: 1.2;
}
.comment-attachment-filename.task-attachment-name.comment-attachment-filename--failed {
  color: var(--color-danger);
}

.comment-link-preview-label.task-attachment-name {
  font-size: 12px;
  padding-top: 8px;
  line-height: 1.2;
}
.comment-link-preview-label.task-attachment-name.comment-attachment-filename--failed {
  color: var(--color-danger);
}

.comment-link-preview-label-in {
  display: flex;
  align-items: center;
  gap: 7px;
}

.comment-link-preview-name {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comment-link-preview-label-favicon {
  width: 12px;
  height: 12px;
  background: transparent center center no-repeat;
  background-size: cover;
  transform: translateY(1px);
}

.comment-link-preview-displays {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.comment-link-preview-display {
  width: 100%;
  max-width: 400px;
}
.task-modal-comments .comment-link-preview-display, .deal-drawer-comments .comment-link-preview-display {
  max-width: 100%;
}

.comment-link-preview-display-embed {
  margin-top: 10px;
}

.comment-link-preview-display-error,
.comment-link-preview-display-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 400px;
  padding: 30px;
  margin-top: 10px;
  color: var(--text-lighter);
  background: var(--bg-grey-f8);
  border-radius: 6px;
}
.task-modal-comments .comment-link-preview-display-error, .deal-drawer-comments .comment-link-preview-display-error,
.task-modal-comments .comment-link-preview-display-loading,
.deal-drawer-comments .comment-link-preview-display-loading {
  max-width: 100%;
}

.comment-link-preview-display-loading {
  background: linear-gradient(60deg, color-mix(in srgb, var(--black) 0%, transparent) 33%, color-mix(in srgb, var(--black) 2%, transparent) 50%, color-mix(in srgb, var(--black) 0%, transparent) 66%) var(--bg-grey-f8);
  background-size: 300% 100%;
  animation: loading-shine 1.5s ease-in infinite;
}

.comment-link-preview-error-link {
  display: block;
  max-width: 100%;
  font-size: 14px;
  font-weight: 500;
}
.comment-link-preview-error-link, .comment-link-preview-error-link:focus, .comment-link-preview-error-link:visited {
  color: var(--text-default);
}
.comment-link-preview-error-link:hover, .comment-link-preview-error-link:active {
  color: var(--text-default);
}

.comment-link-preview-display-error {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 0;
  padding: 15px;
}

.comment-link-preview-display-error-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
}

.comment-link-preview-display-error-title {
  min-width: 0;
  color: var(--text-default);
}

.comment-link-preview-display-favicon {
  width: 14px;
  height: 14px;
  margin-right: 7px;
  background: transparent center center no-repeat;
  background-size: contain;
  transform: translateY(1px);
}

.attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.attachment-gallery--inline {
  display: flex;
  flex-direction: row;
}
.attachment-gallery--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

.attachment-gallery-item {
  width: 100px;
  height: 56px;
  position: relative;
}
.attachment-gallery-item--file {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 6px;
  background: var(--bg-content);
  transition: all var(--transition-normal) ease;
}
.attachment-gallery-item--file:hover {
  border-color: color-mix(in srgb, var(--black) 25%, transparent);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 10%, transparent);
}
.attachment-gallery-item--image .attachment-gallery-item-name {
  transition: opacity var(--transition-normal) ease;
  opacity: 0;
}
.attachment-gallery-item--image:hover .attachment-gallery-item-name {
  opacity: 1;
}
.attachment-gallery-item:hover {
  border-color: color-mix(in srgb, var(--black) 25%, transparent);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 10%, transparent);
}

.attachment-gallery-item-preview {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  background: var(--bg-content) center center no-repeat;
  background-size: cover;
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 6px;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--black) 5%, transparent);
  transition: all var(--transition-normal) ease;
  cursor: pointer;
}
.attachment-gallery-item-preview:hover {
  border-color: color-mix(in srgb, var(--black) 25%, transparent);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 10%, transparent);
}

.attachment-gallery-item-name {
  position: absolute;
  padding: 8px 12px;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  color: var(--text-default);
  word-break: break-all;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  background: color-mix(in srgb, var(--bg-content) 90%, transparent);
  border-radius: 6px;
}

.attachment-gallery-item-view {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  z-index: 1;
}

.attachment-gallery-item-download {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 6px 10px;
  font-size: 18px;
  background: color-mix(in srgb, var(--black) 75%, transparent);
  border-radius: 5px 0 6px 0;
  transition: all var(--transition-normal) ease;
  opacity: 0.75;
  z-index: 2;
  cursor: pointer;
}
.attachment-gallery-item-download, .attachment-gallery-item-download:focus, .attachment-gallery-item-download:visited, .attachment-gallery-item-download:hover, .attachment-gallery-item-download:active {
  color: var(--color-primary-contrast);
  text-decoration: none;
}
.attachment-gallery-item-download:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--black) 85%, transparent);
}
.attachment-gallery-item-download i {
  display: block;
  line-height: 1;
}

.attachment-gallery--compact {
  gap: 6px;
  margin-top: 10px;
}
.attachment-gallery--compact .attachment-gallery-item {
  width: auto;
}
.attachment-gallery--compact .attachment-gallery-item-preview {
  height: 60px;
}

.toggle-paragraphs-default {
  display: block;
}
.toggle-paragraphs-default.hiding {
  display: none;
}

.toggle-paragraphs-expanded {
  display: none;
}
.toggle-paragraphs-expanded.showing {
  display: block;
}

.toggle-paragraphs-trigger {
  padding-top: 5px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

.chart-tooltip-title {
  padding: 7px 12px;
  color: var(--text-default);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid var(--border-content);
}
.chart-tooltip--dark .chart-tooltip-title {
  padding-bottom: 0;
  border-bottom: none;
  color: var(--color-primary-contrast);
}

.chart-tooltip-info {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  flex-direction: column;
  gap: 7px;
  padding: 12px 12px;
}

.chart-tooltip-info-line {
  display: flex;
  font-size: 14px;
  font-weight: 400;
}

.chart-tooltip-label {
  flex: 1;
  margin-right: 15px;
  color: var(--text-default);
}
.chart-tooltip--dark .chart-tooltip-label {
  color: var(--color-primary-contrast);
}

.chart-tooltip-amount {
  padding-left: 5px;
  white-space: nowrap;
  color: var(--text-default);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.chart-tooltip--dark .chart-tooltip-amount {
  color: var(--color-primary-contrast);
}

.chart-tooltip-copy {
  font-size: 14px;
  font-weight: 500;
}
.chart-tooltip-copy a,
.chart-tooltip-copy a:visited,
.chart-tooltip-copy a:focus {
  color: var(--text-default);
  text-decoration: underline;
}
.chart-tooltip-copy a:hover,
.chart-tooltip-copy a:active {
  color: var(--text-default);
  text-decoration: underline;
}
.chart-tooltip--dark .chart-tooltip-copy {
  color: var(--color-primary-contrast);
}
.chart-tooltip--dark .chart-tooltip-copy a,
.chart-tooltip--dark .chart-tooltip-copy a:visited,
.chart-tooltip--dark .chart-tooltip-copy a:focus,
.chart-tooltip--dark .chart-tooltip-copy a:hover,
.chart-tooltip--dark .chart-tooltip-copy a:active {
  color: var(--color-primary-contrast);
}

.pagination-wrapper {
  margin-top: 30px;
  margin-bottom: -10px;
  text-align: center;
}
@media (min-width: 768px) {
  .pagination-wrapper {
    margin-top: 40px;
    margin-bottom: 60px;
  }
}
.pagination-wrapper:empty {
  display: none;
}

.pagination-list-table {
  margin-top: -40px;
  margin-bottom: 60px;
  text-align: center;
}
.pagination-list-table:empty {
  display: none;
}

.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0 90px;
  user-select: none;
  background-color: var(--bg-grey-fc);
  border: none;
  border-radius: 6px;
}
@media (min-width: 768px) {
  .pagination {
    margin: 20px 0;
  }
}
.pagination > li {
  display: inline;
}
.pagination > li > a, .pagination > li > span {
  position: relative;
  float: left;
  padding: 7px 12px 9px;
  margin-left: -1px;
  line-height: 1.428571429;
  color: var(--text-muted);
  font-weight: 600;
  text-decoration: none;
  background-color: var(--bg-content);
  border: none;
  background: none;
}
.pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus {
  z-index: 2;
  color: var(--text-default);
  background: none;
  border-color: var(--border-content-alt);
  background: none;
  box-shadow: none;
}
.pagination > li:first-child > a, .pagination > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a, .pagination > li:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > a:visited, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus {
  z-index: 3;
  color: var(--text-default);
  cursor: default;
  background: var(--bg-input-hover);
  box-shadow: none;
}
.pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus, .pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus {
  color: var(--text-lightest);
  cursor: not-allowed;
  background: none;
  border-color: var(--border-content-alt);
}
.pagination > .pagination-first > a, .pagination > .pagination-prev > a, .pagination > .pagination-next > a, .pagination > .pagination-last > a {
  border: 0;
}
.pagination > .pagination-first > a, .pagination > .pagination-prev > a {
  border-right: 0;
}
.pagination > .pagination-next > a, .pagination > .pagination-last > a {
  border-left: 0;
}
.pagination > .pagination-item > a, .pagination > .pagination-item > span {
  padding-right: 14px;
  padding-left: 14px;
  border: none;
  cursor: pointer;
}
.pagination > .break {
  position: relative;
  float: left;
  color: var(--text-lighter);
  border: 0;
  font-weight: 600;
  background: none;
}

.pagination-list-mobile {
  display: table;
  width: 100%;
  background: var(--bg-content);
}
.pagination-list-mobile > li {
  display: table-cell;
}
.pagination-list-mobile > li > span {
  width: 100%;
  padding: 10px 10px 9px;
}
.pagination-list-mobile > li > a {
  width: 100%;
  padding: 12px 15px 8px;
  text-align: center;
  color: var(--text-muted);
}
.pagination-list-mobile > li > span, .pagination-list-mobile > li > span:hover, .pagination-list-mobile > li > span:focus, .pagination-list-mobile > li > span:visited, .pagination-list-mobile > li > a, .pagination-list-mobile > li > a:hover, .pagination-list-mobile > li > a:focus, .pagination-list-mobile > li > a:visited {
  color: var(--text-muted);
  background: var(--bg-content);
  box-shadow: none;
}
.pagination-list-mobile > .pagination-mobile-next > a {
  border-left: 1px solid var(--border-content-alt);
}
.pagination-list-mobile > .pagination-mobile-prev > a {
  border-right: 2px solid var(--border-content-alt);
}
.pagination-list-mobile > .disabled > a {
  color: var(--text-lightest);
  opacity: 0.5;
}
.pagination-list-mobile > .page-mobile-item > .pagination-link {
  border-right: 0;
}

.file-uploader {
  position: relative;
  min-height: 50px;
  border: 1px dashed var(--border-content-alt);
  background-color: var(--bg-grey-fc);
  border-radius: 4px;
}
.file-uploader:hover {
  border-color: var(--border-field);
}

.file-uploader-input {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.file-uploader-trigger {
  position: relative;
  z-index: 1;
  padding: 17px 15px 16px;
  font-size: 16px;
  line-height: 1em;
  text-align: left;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
}

.file-uploader-trigger-optional {
  margin-bottom: 7px;
  font-weight: 600;
}

.file-uploader-selected {
  position: absolute;
  display: none;
  z-index: 3;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-grey-fa);
}
.file-uploader-selected.showing {
  display: block;
  animation: fade-in var(--transition-normal) 1 forwards;
}

.file-uploader-selected-text {
  position: absolute;
  left: 20px;
  right: 50px;
  top: 50%;
  margin-top: -8px;
  line-height: 1em;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-uploader-remove {
  position: absolute;
  z-index: 4;
  display: none;
  right: 0;
  top: 0;
  font-size: 16px;
  width: 46px;
  height: 100%;
  padding-top: 17px;
  line-height: 1em;
  cursor: pointer;
  text-align: center;
  color: var(--text-lighter);
}
.file-uploader-remove:hover {
  color: var(--text-lighter);
}
.file-uploader-remove.showing {
  display: block;
}

.image-uploader-top-logo-img.logo-small_square,
.image-uploader-top-logo-img-display.logo-small_square,
.image-uploader-top-logo-img-print.logo-small_square {
  width: 84px;
  height: 84px;
}
.image-uploader-top-logo-img.logo-big_square,
.image-uploader-top-logo-img-display.logo-big_square,
.image-uploader-top-logo-img-print.logo-big_square {
  width: 110px;
  height: 110px;
}
.image-uploader-top-logo-img.logo-small_rectangle,
.image-uploader-top-logo-img-display.logo-small_rectangle,
.image-uploader-top-logo-img-print.logo-small_rectangle {
  width: 140px;
  height: 80px;
}
.image-uploader-top-logo-img.logo-big_rectangle,
.image-uploader-top-logo-img-display.logo-big_rectangle,
.image-uploader-top-logo-img-print.logo-big_rectangle {
  width: 200px;
  height: 100px;
}
.image-uploader-top-logo-img.full-width,
.image-uploader-top-logo-img-display.full-width,
.image-uploader-top-logo-img-print.full-width {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  border: none;
  border-radius: 12px;
}

.image-uploader-top-logo {
  text-align: center;
}

.image-uploader-top-logo-img {
  position: relative;
  display: inline-block;
  width: 84px;
  height: 84px;
  margin: auto;
  vertical-align: middle;
  cursor: pointer;
  background: var(--white) center center no-repeat;
  border: 2px solid var(--white);
  background-size: cover;
  box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 0 0px 0px 1px color-mix(in srgb, var(--black) 7%, transparent);
  border-radius: 4px;
}

.image-uploader-top-logo-placeholder {
  position: absolute;
  z-index: 2;
  left: 2px;
  right: 2px;
  top: 50%;
  margin-top: -15px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #aaa;
  color: color-mix(in srgb, var(--black) 60%, transparent);
  font-family: var(--font-sans-serif);
  opacity: 1;
  transition: all var(--transition-normal) ease;
}
.image-uploader-top-logo-img.with-image .image-uploader-top-logo-placeholder {
  opacity: 0;
}
.image-uploader-top-logo-img.with-image:hover .image-uploader-top-logo-placeholder {
  opacity: 1;
}

.image-uploader-top-logo-placeholder-bg {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  opacity: 0;
  transition: all var(--transition-normal) ease;
}
.image-uploader-top-logo-img.with-image .image-uploader-top-logo-placeholder-bg {
  opacity: 0;
}
.image-uploader-top-logo-img.with-image:hover .image-uploader-top-logo-placeholder-bg {
  opacity: 1;
}

.image-uploader-top-logo-img-display {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  vertical-align: middle;
  background: center center no-repeat;
  background-size: contain;
}

.image-uploader-top-logo-img-print {
  position: relative;
  display: none;
  max-width: 80px;
  width: auto;
  max-height: 80px;
  margin: 0 auto;
  vertical-align: middle;
}
@media print {
  .image-uploader-top-logo-img-print {
    display: inline-block;
  }
}

.image-uploader-avatar {
  text-align: center;
}

.image-uploader-avatar-img {
  position: relative;
  width: 84px;
  height: 84px;
  margin: auto;
  margin-bottom: 20px;
  background: var(--white) center center no-repeat;
  border: 2px solid var(--white);
  background-size: cover;
  box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 0 0px 0px 1px color-mix(in srgb, var(--black) 7%, transparent);
  border-radius: 4px;
}
.image-uploader-avatar-img.img-74 {
  width: 74px;
  height: 74px;
}
.image-uploader-avatar-img.img-md {
  width: 100px;
  height: 100px;
}
.image-uploader-avatar-img.img-124 {
  width: 124px;
  height: 124px;
}
.image-uploader-avatar-img.with-image {
  background: var(--text-lighter) center center no-repeat;
  background-size: cover;
}

.image-uploader-avatar-placeholder {
  position: absolute;
  z-index: 2;
  left: 2px;
  right: 2px;
  top: 52%;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans-serif);
  color: var(--text-lighter);
  color: color-mix(in srgb, var(--black) 60%, transparent);
  opacity: 1;
  transition: all var(--transition-normal) ease;
  transform: translateY(-50%);
}
.image-uploader-avatar-img.with-image .image-uploader-avatar-placeholder, .with-image > .image-uploader-avatar-placeholder {
  opacity: 0;
}
.image-uploader-avatar-img.with-image:hover .image-uploader-avatar-placeholder, .with-image:hover > .image-uploader-avatar-placeholder {
  opacity: 1;
}

.image-uploader-avatar-placeholder-bg {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  opacity: 0;
  transition: all var(--transition-normal) ease;
}
.image-uploader-avatar-placeholder-bg.with-circular-image {
  border-radius: 50%;
}
.image-uploader-avatar-img.with-image .image-uploader-avatar-placeholder-bg, .with-image > .image-uploader-avatar-placeholder-bg {
  opacity: 0;
}
.image-uploader-avatar-img.with-image:hover .image-uploader-avatar-placeholder-bg, .with-image:hover > .image-uploader-avatar-placeholder-bg {
  opacity: 1;
}

.image-uploader-avatar-img-display {
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  margin: auto;
  margin-bottom: 20px;
  background: center center no-repeat;
  background-size: contain;
}
@media print {
  .image-uploader-avatar-img-display {
    display: none;
  }
}

.image-uploader-avatar-img-print {
  position: relative;
  display: none;
  max-width: 80px;
  width: auto;
  max-height: 80px;
  margin: auto;
  margin-bottom: 20px;
}
@media print {
  .image-uploader-avatar-img-print {
    display: block;
  }
}

.image-uploader-file {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.image-uploader-progress-bar {
  position: absolute;
  z-index: 5;
  display: none;
  left: 20px;
  right: 20px;
  top: 50%;
  height: 5px;
  margin-top: -2px;
  margin-bottom: 20px;
  overflow: hidden;
  background: var(--bg-grey-f1);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--black) 4%, transparent);
}
.image-uploader-progress-bar.failed {
  background-color: var(--color-danger);
}

.image-uploader-progress-bar-in {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background-color: var(--color-accent-yellow);
}

.image-uploader-delete {
  position: absolute;
  z-index: 4;
  right: -12px;
  top: -12px;
  height: 22px;
  width: 22px;
  line-height: 20px;
  text-align: center;
  color: var(--color-danger);
  cursor: pointer;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 18px;
  box-shadow: 0 2px 3px color-mix(in srgb, var(--black) 6%, transparent);
}
.image-uploader-delete.with-circular-image {
  right: -10px;
  top: -10px;
}
.image-uploader-wrapper .image-uploader-delete {
  display: block;
}
@media (min-width: 768px) {
  .image-uploader-wrapper .image-uploader-delete {
    visibility: hidden;
    opacity: 0;
    transition: all var(--transition-normal) ease;
  }
  .image-uploader-wrapper:hover .image-uploader-delete {
    visibility: visible;
    opacity: 1;
  }
}

.image-uploader-delete-icon {
  width: 8px;
  height: auto;
}
.image-uploader-delete-icon path {
  fill: var(--color-danger);
}

.table-list-container.with-horizontal-scroll {
  display: flex;
  justify-content: stretch;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 300px;
  margin-left: -20px;
  width: calc(100% + 40px);
  overflow-x: auto;
}
.table-list-container.with-horizontal-scroll .table-list-wrapper {
  flex: 1;
}
.table-list-container.with-horizontal-scroll .list-item-dd-toggle .dropdown-menu {
  right: 0;
}

.table-list-wrapper {
  position: relative;
  min-height: 400px;
}

.table-list {
  position: relative;
  transition: opacity var(--transition-normal) ease;
}
.table-list.loading {
  pointer-events: none;
  opacity: 0.5;
}

.table-list-loading {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  padding: 70px 0;
}
.table-list-loading.relative-list {
  position: relative;
}

.table-list-actions {
  padding: 0 0 23px;
}
.table-list-actions .btn {
  white-space: nowrap;
}
.table-list-actions .btn.btn-default .btn-icon-absolute {
  transition: all var(--transition-fast) ease;
}
.table-list-actions .btn.btn-default.search-split-filters-btn-active {
  color: var(--text-default);
}
.table-list-actions .btn.btn-default.search-split-filters-btn-active .btn-icon-absolute path {
  fill: var(--text-default);
}
.table-list-actions .btn.btn-dropdown-dots {
  width: 40px;
  padding: 0 10px;
  justify-content: center;
}
.table-list-actions .page-filters {
  max-width: 48%;
}
@media (min-width: 768px) {
  .table-list-actions .page-filters {
    max-width: none;
  }
}
.table-list-actions .table-list-actions-header {
  font-size: 20px;
  font-weight: 600;
}

.table-list-empty {
  padding: 60px 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-lighter);
  cursor: default;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}
.table-list-empty.showing {
  display: block;
}
.table-list-empty.no-border {
  border: none;
}
.drawer-wrapper .table-list-empty, .modal-dialog .table-list-empty {
  background: none;
}
.table-list-empty a {
  cursor: pointer;
}
@media (min-width: 480px) {
  .table-list-empty {
    padding: 80px 40px;
  }
}

.table-list-empty-in {
  display: block;
  text-align: center;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-lighter);
}

.top-actions {
  padding: 30px 0;
}

.top-action-btn {
  display: inline-block;
  float: right;
}

.top-action-tooltip-top {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  margin: 0 0 5px !important;
  top: auto !important;
  bottom: 100% !important;
  width: 195px !important;
}
.top-action-tooltip-top:before, .top-action-tooltip-top:after {
  display: none;
}

.table-list-col-headers {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  min-width: 100%;
  width: auto;
  flex-shrink: 0;
  height: 30px;
  align-items: center;
  padding-left: 27px;
  padding-right: 50px;
  line-height: 1;
}
.table-list-col-headers.with-avatars {
  padding-left: 45px;
}
.table-list-col-headers.with-avatars.with-status {
  padding-left: 72px;
}
.table-list-col-headers.without-status {
  padding-left: 0;
}
.table-list-col-headers.without-menu {
  padding-right: 0;
}
.table-list-col-headers.with-checkbox {
  padding-left: 26px;
}
.table-list-col-headers.with-list-grouped {
  padding-left: 41px;
}
.table-list-col-headers .row {
  width: 100%;
}

.table-list-col-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-lighter);
  cursor: default;
}
.table-list-col-header.first {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 10px;
}
.table-list-col-header .expense-list-batch-checkbox {
  padding-top: 0px;
  padding-bottom: 0px;
}
.table-list-col-header.table-list-col-unordered .ion-arrow-down-b {
  color: color-mix(in srgb, var(--black) 15%, transparent);
}
.table-list-col-header.table-list-col-unordered .ion-arrow-up-b {
  color: color-mix(in srgb, var(--black) 15%, transparent);
}
.table-list-col-header.table-list-col-ordered-asc .ion-arrow-down-b {
  color: color-mix(in srgb, var(--black) 15%, transparent);
}
.table-list-col-header.table-list-col-ordered-asc .ion-arrow-up-b {
  color: color-mix(in srgb, var(--black) 40%, transparent);
}
.table-list-col-header.table-list-col-ordered-desc .ion-arrow-down-b {
  color: color-mix(in srgb, var(--black) 40%, transparent);
}
.table-list-col-header.table-list-col-ordered-desc .ion-arrow-up-b {
  color: color-mix(in srgb, var(--black) 15%, transparent);
}

.table-list-col-header-title {
  position: relative;
}
.table-list-col-header-title.sortable {
  cursor: pointer;
}
.table-list-col-header-title .ion-arrow-up-b,
.table-list-col-header-title .ion-arrow-down-b {
  position: absolute;
  right: -13px;
}
.table-list-col-header-title .ion-arrow-up-b {
  top: 0;
}
.table-list-col-header-title .ion-arrow-down-b {
  top: 6px;
}

.table-list-col-header-sort-icon {
  margin-left: 2px;
  color: color-mix(in srgb, var(--black) 40%, transparent);
  font-size: 0.8em;
}

.table-list-page-count {
  padding-top: 20px;
  color: var(--text-lighter);
}

.list-item {
  position: relative;
  width: 100%;
  border-top: 1px solid var(--border-content);
  transition: all var(--transition-fast) ease;
}
.list-item:hover {
  background: var(--bg-hover-subtle);
}
.list-item.showing-component {
  z-index: 3;
}
.list-item.disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
}
.list-item.nonclickable:hover {
  box-shadow: none;
  transform: none;
}
.list-item:last-child {
  border-bottom: 1px solid var(--border-content);
}
.list-item .tooltip {
  text-transform: capitalize;
}

.list-item-link-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.list-item-in {
  display: block;
  padding: 12px 50px 12px 27px;
  font-weight: 400;
  text-align: left;
  transition: all var(--transition-fast) ease;
}
.list-item-in, .list-item-in:focus, .list-item-in:visited {
  color: var(--text-muted);
}
.list-item:hover .list-item-in {
  color: var(--text-muted);
}
.list-item-in:hover, .list-item-in:active, .list-item:hover .list-item-in:hover, .list-item:hover .list-item-in:active {
  color: var(--text-default);
}
.list-item-in.with-status {
  padding-left: 27px;
}
.list-item-in.with-avatar {
  padding-left: 45px;
}
.list-item-in.with-status.with-avatar {
  padding-left: 72px;
}
.list-item-in.without-status {
  padding-left: 0;
}
.list-item-in.with-color {
  border-left-width: 5px;
  padding-left: 20px;
}
.list-item-in.with-checkbox {
  padding-left: 26px;
}
.list-item-in.deactivated-row > * {
  opacity: 0.4;
}
.list-item-in.deactivated-row:hover, .list-item-in.deactivated-row:active, .list-item:hover .list-item-in.deactivated-row:hover, .list-item:hover .list-item-in.deactivated-row:active {
  color: var(--text-muted);
}

.list-item-status {
  position: absolute;
  left: 5px;
  top: 16px;
  width: 12px;
  height: 12px;
  overflow: hidden;
  background: var(--bg-grey-e);
  border-radius: 50%;
}
.list-item-status.new {
  background: var(--bg-grey-e);
}
.list-item-status.drafted, .list-item-status.project-active, .list-item-status.unbilled {
  background: var(--bg-grey-c);
}
.list-item-status.outstanding, .list-item-status.sent, .list-item-status.submitted, .list-item-status.signed-by-author {
  background: var(--text-muted);
}
.list-item-status.incomplete, .list-item-status.awaiting-deposit, .list-item-status.awaiting_deposit, .list-item-status.pending {
  background: var(--color-accent-orange);
}
.list-item-status.overdue, .list-item-status.rejected {
  background: var(--color-danger);
}
.list-item-status.completed, .list-item-status.accepted, .list-item-status.approved, .list-item-status.finalized, .list-item-status.active, .list-item-status.project-completed, .list-item-status.billed, .list-item-status.billed_and_paid {
  background: var(--color-primary);
}
.list-item-status.archived, .list-item-status.project-archived {
  background: var(--bg-content);
  border: 2px solid var(--border-content-alt);
}
.list-item-status.archived:after, .list-item-status.project-archived:after {
  position: absolute;
  left: 0;
  top: 50%;
  content: "";
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: var(--border-content-alt);
  transform: rotate(-45deg);
}
.list-item-status.custom-form-request-incomplete {
  background: var(--bg-grey-c);
}

.list-item-avatar {
  position: absolute;
  cursor: pointer;
  display: block;
  left: 10px;
  top: 9px;
}
.list-item-in.with-status.with-avatar .list-item-avatar {
  left: 32px;
}

.list-item-color {
  position: absolute;
  left: 0;
  top: 4px;
  width: 4px;
  bottom: 4px;
  overflow: hidden;
  background: var(--bg-grey-f5);
  border-radius: 6px;
}

.list-item-title {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  transition: all var(--transition-fast) ease;
}
.list-item.archived .list-item-title {
  color: var(--text-muted);
}
@media (min-width: 768px) {
  .list-item-title {
    margin-bottom: 0;
    font-size: 14px;
  }
}
.list-item-title .avatar {
  position: absolute;
  left: 0;
  top: 16px;
}

.list-item-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 400;
}
.list-item:hover .list-item-subtitle {
  color: var(--text-muted);
}

.list-item-lighter, .list-item-second-line {
  color: var(--text-muted-alt);
  transition: all var(--transition-fast) ease;
}
.list-item-lighter a, .list-item-second-line a,
.list-item-lighter a:focus,
.list-item-lighter a:visited {
  color: var(--text-muted-alt);
}
.list-item:hover .list-item-lighter, .list-item:hover .list-item-second-line {
  color: var(--text-default);
}
.list-item:hover .list-item-lighter a, .list-item:hover .list-item-second-line a,
.list-item:hover .list-item-lighter a:focus,
.list-item:hover .list-item-lighter a:visited {
  color: var(--text-default);
}
.list-item:hover .list-item-lighter a:hover, .list-item:hover .list-item-second-line a:hover,
.list-item:hover .list-item-lighter a:active,
.list-item:hover .list-item-second-line a:active {
  color: var(--text-default);
  text-decoration: underline;
}

.list-item-empty {
  color: var(--text-lightest);
  transition: all var(--transition-fast) ease;
}
.list-item:hover .list-item-empty {
  color: var(--text-lighter);
}

.list-item-clickable-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.list-item-second-line {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.2;
}

.list-item-column-link {
  color: inherit !important;
  z-index: 1;
}
.list-item-column-link:hover {
  text-decoration: underline;
}

.list-item-dropdown {
  margin-top: -4px;
  margin-bottom: -7px;
}

.list-item-amount.outstanding {
  color: color-mix(in srgb, var(--color-danger) 90%, transparent);
  transition: all var(--transition-fast) ease;
}
.list-item:hover .list-item-amount.outstanding:not(.zero) {
  color: var(--color-danger);
}
.list-item-amount.outstanding.zero {
  color: var(--text-lightest);
}

.list-item-amount.paid {
  color: color-mix(in srgb, var(--color-primary) 85%, transparent);
  transition: all var(--transition-fast) ease;
}
.list-item:hover .list-item-amount.paid:not(.zero) {
  color: var(--color-primary);
}
.list-item-amount.paid.zero {
  color: var(--text-lightest);
}

.list-item-amount-label-xs {
  display: inline;
  margin-left: 5px;
}
@media (min-width: 768px) {
  .list-item-amount-label-xs {
    display: none;
  }
}

.list-item-date-icon {
  position: relative;
  margin-right: 7px;
  top: 1px;
  color: var(--text-lighter);
  font-size: 13px;
}
.task-item-overdue .list-item-date-icon {
  color: color-mix(in srgb, var(--color-danger) 85%, transparent);
}
.list-item .list-item-date-icon {
  top: 0;
}

.list-item-template-icon {
  width: 15px;
  margin-right: 8px;
}

.list-item-dd-toggle {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  max-height: 50px;
  font-size: 26px;
  width: 50px;
  text-align: right;
}
.list-item-dd-toggle .dropdown-menu {
  left: auto;
  right: -14px;
  top: 40px;
}
.list-item-dd-toggle.list-item-dots {
  top: 1px;
  width: 50px;
  height: 40px;
}
.list-item-dd-toggle.list-item-small {
  width: 30px;
}
.list-item-dd-toggle.list-item-small .dropdown-menu {
  right: -14px;
}
.list-item-dd-toggle.list-grid-col-header-dropdown-toggle {
  top: -5px;
}
@media (min-width: 768px) {
  .list-item-dd-toggle.list-item-dots {
    width: 30px;
  }
  .list-item-dd-toggle.list-item-centered {
    top: 10px;
  }
  .list-item-dd-toggle.list-item-small {
    width: 30px;
  }
}

.list-item-dd-toggle-link {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  padding: 18px 0 16px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
}
.list-item-dd-toggle-link:focus, .list-item-dd-toggle-link:visited {
  color: var(--text-muted);
}
.list-item-dd-toggle.list-item-dots .list-item-dd-toggle-link {
  padding: 8px 0;
}
.list-item-dots.list-item-small .list-item-dd-toggle-link {
  padding: 7px 0 12px;
}
.list-item-dd-toggle-link.list-item-dd-toggle-link--timesheet {
  padding: 15px 0;
}
@media (min-width: 600px) {
  .list-item-dd-toggle-link:hover {
    color: var(--text-default);
  }
}
.list-item-dd-toggle-link .ion-chevron-down:before {
  transition: all var(--transition-normal) ease;
}
.list-item-dd-toggle.open .list-item-dd-toggle-link .ion-chevron-down:before, .list-item-dd-toggle > .open .list-item-dd-toggle-link .ion-chevron-down:before {
  transform: rotate(180deg);
}

.list-item-dd-toggle-dots {
  opacity: 0.75;
  transition: all var(--transition-fast) ease;
}
.list-item-dd-toggle-link:hover .list-item-dd-toggle-dots, .dropdown-menu-toggle:hover .list-item-dd-toggle-dots, .dropdown-menu-toggle.open .list-item-dd-toggle-dots, .list-item-dd-toggle.open .list-item-dd-toggle-dots, .list-item-dd-toggle > .open .list-item-dd-toggle-dots {
  opacity: 1;
}
.list-item-dd-toggle-dots path {
  fill: var(--text-default);
}

.list-item-dd-toggle-header {
  position: relative;
  top: 0px;
  padding: 10px 0;
}

.list-settings-header-dropdown-mobile {
  position: relative;
  top: 0px;
  padding: 10px 10px 10px 10px;
}
@media (min-width: 768px) {
  .list-settings-header-dropdown-mobile {
    display: none;
  }
}

.list-settings-icon {
  width: 15px;
  height: auto;
}
.list-settings-icon path {
  fill: var(--text-default);
}

.list-item-icon-first {
  position: absolute;
  right: 60px;
  top: 0;
  height: auto;
  width: 14px;
  opacity: 0.8;
  transition: all var(--transition-fast) ease;
}
@media (min-width: 768px) {
  .list-item-icon-first {
    top: 15px;
  }
  .list-item-icon-first:hover {
    opacity: 1;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .list-item-icon-first path {
    fill: var(--text-default);
  }
}
:root[data-theme=dark] .list-item-icon-first path {
  fill: var(--text-default);
}

.list-grid-item-cell .list-item-tags {
  position: relative;
  flex: 1;
  z-index: 4;
}

.list-item-close-icon {
  position: relative;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 4px;
}
.list-item-close-icon svg {
  width: 8px;
  height: auto;
}
.list-item-close-icon path {
  fill: var(--text-muted-alt);
}
.list-item-close-icon:hover {
  background: var(--bg-input-hover);
}
.list-item-close-icon:hover path {
  fill: var(--color-danger);
}

.list-item-budget {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list-grid-item-cell .list-item-budget {
  position: relative;
  flex: 1;
  z-index: 4;
}
.list-item-budget.list-item-budget--task-board {
  height: 20px;
  padding: 0 10px 0 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  background: var(--bg-grey-f5);
  border-radius: 100px;
}

.list-item-budget-amount {
  width: 60px;
  text-align: left;
  padding-left: 20px;
}
.list-item-budget.list-item-budget--task-board .list-item-budget-amount {
  position: relative;
  top: -0.5px;
  width: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

.list-item-budget-bar {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 5px 0;
  cursor: pointer;
  min-width: 70px;
}

.list-item-budget-bar-bg {
  position: relative;
  height: 5px;
  background: var(--bg-grey-e);
  border-radius: 10px;
  overflow: hidden;
}

.list-item-budget-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--color-primary);
  border-radius: 10px;
}
.list-item-budget-bar-fill.near-budget {
  background: var(--color-accent-yellow-dark);
}
.list-item-budget-bar-fill.over-budget {
  background: var(--color-danger);
}

.list-item-budget-bar-tooltip {
  background-color: var(--text-default);
  color: var(--color-primary-contrast);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  max-width: 300px;
}
.list-item-budget-bar-tooltip .tooltip-arrow {
  background-color: var(--text-default);
}

.list-item-budget-bar-tooltip.react-tooltip[class*=styles-module_dark].react-tooltip__place-top {
  margin-top: 0;
}

.list-item-budget-bar-tooltip-label {
  padding-right: 30px;
  font-weight: 500;
}

.list-item-budget-bar-tooltip-value {
  font-weight: 400;
}

.list-item-budget-bar-tooltip-icon {
  position: relative;
  top: 3px;
  width: 16px;
  height: auto;
}
.list-item-budget-bar-tooltip-icon path {
  fill: var(--color-primary-contrast);
}

.list-item-budget-empty,
.list-item-assignments-empty {
  position: relative;
  z-index: 1;
}
.list-item-budget-empty:hover,
.list-item-assignments-empty:hover {
  color: var(--text-default);
  transition: none;
}
.list-item-budget-empty:hover .list-item-budget-empty-placeholder, .list-item-budget-empty:hover .list-item-assignments-empty-placeholder,
.list-item-assignments-empty:hover .list-item-budget-empty-placeholder,
.list-item-assignments-empty:hover .list-item-assignments-empty-placeholder {
  display: none;
}

.list-item-budget-empty:hover .list-item-budget-empty-placeholder, .list-item-assignments-empty:hover .list-item-budget-empty-placeholder,
.list-item-budget-empty:hover .list-item-assignments-empty-placeholder,
.list-item-assignments-empty:hover .list-item-assignments-empty-placeholder {
  display: none;
}

.list-item-budget-empty-link,
.list-item-assignments-empty-link {
  display: none;
}
.list-item-budget-empty:hover .list-item-budget-empty-link, .list-item-assignments-empty:hover .list-item-budget-empty-link,
.list-item-budget-empty:hover .list-item-assignments-empty-link,
.list-item-assignments-empty:hover .list-item-assignments-empty-link {
  display: block;
}

.list-item-popup-menu.field-popup-menu {
  left: -30px;
  top: -5px;
  width: 230px;
  max-width: none;
  padding: 20px;
}

.table-header-scroll-position {
  position: absolute;
  top: 0;
  left: 0;
}

.list-grid-item-cell-inner {
  z-index: 3;
  padding: 5px;
  align-items: center;
  justify-content: center;
  display: flex;
  border-radius: 3px;
  transition: background-color var(--transition-normal) ease;
}
.list-grid-item-cell-inner:hover {
  background-color: var(--bg-input-hover);
}

.list-grid-item-cell-copier-wrapper {
  display: flex;
  align-items: center;
  max-width: 100%;
}

.list-grid-item-cell-copier.copy-to-clipboard-link {
  position: relative;
  z-index: 3;
  padding: 0;
  height: 20px;
  flex-shrink: 0;
  background: none;
  -webkit-appearance: none;
  border: none;
  pointer-events: visible;
  opacity: 0.7;
  transition: all var(--transition-normal) ease;
}
.list-grid-item-cell-copier.copy-to-clipboard-link:hover {
  opacity: 1;
}
.list-grid-item-cell-copier.copy-to-clipboard-link .copy-to-clipboard-link-icon {
  width: 13px;
}

.list-grid-wrapper {
  padding: 0 0 0 20px;
}
@media (min-width: 768px) {
  .list-grid-wrapper {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.list-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  height: 300px;
  overflow: auto;
  overflow-x: scroll;
  overscroll-behavior-x: contain;
}
.list-grid.list-grid-full-height {
  margin-bottom: 60px;
  overflow: visible;
  overflow-x: auto;
  border-bottom: none;
}
.list-grid.list-grid-with-scrollbar {
  overflow-x: scroll;
}

.table-list-empty.list-grid-items-empty {
  display: block;
  width: 100%;
  pointer-events: none;
  border: none;
}

.list-grid-col-bg-left {
  position: absolute;
  z-index: 10;
  top: -1px;
  bottom: -1px;
  right: 100%;
  width: 20px;
  background-color: var(--bg-content);
}
@media (min-width: 768px) {
  .list-grid-col-bg-left {
    width: 40px;
  }
}
.list-grid-col-footer .list-grid-col-bg-left {
  bottom: 0;
}
.list-grid.list-grid-document-background .list-grid-col-bg-left {
  background-color: var(--bg-grey-fc);
}

.list-grid-col-bg-right {
  position: absolute;
  z-index: 10;
  top: -1px;
  bottom: -1px;
  left: 100%;
  width: 0;
  background-color: var(--bg-content);
}
@media (min-width: 768px) {
  .list-grid-col-bg-right {
    width: 40px;
  }
}
.list-grid.list-grid-document-background .list-grid-col-bg-right {
  background-color: var(--bg-grey-fc);
}

.list-grid-col-headers {
  position: sticky;
  z-index: 99;
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  top: 0;
  min-width: 100%;
  width: fit-content;
  line-height: 1;
  will-change: transform;
}

.list-grid-col-footer {
  position: sticky;
  z-index: 10;
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  bottom: 0;
  min-width: 100%;
  width: fit-content;
  margin-top: -1px;
  line-height: 1;
}

.list-grid-col-header {
  position: relative;
  flex-shrink: 0;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-lighter);
  display: flex;
  cursor: default;
  background-color: var(--bg-content);
  border-bottom: 1px solid var(--border-semi-transparent-alt);
}
.list-grid-col-header:last-child {
  flex: 1 0 auto;
}
.list-grid-col-header:last-child .list-grid-col-resizer {
  display: none;
}
.list-grid-col-header:hover {
  color: var(--text-muted-alt);
}
.list-grid-col-header:hover .list-grid-col-resizer {
  opacity: 1;
}
.list-grid-col-footer .list-grid-col-header {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  border-top: 1px solid var(--bg-grey-f5);
  border-bottom: none;
}
.list-grid.list-grid-document-background .list-grid-col-header {
  background-color: var(--bg-hover-subtle) !important;
}
.field-popup-menu .list-grid-col-header {
  background: transparent;
}
.list-grid-col-header.list-grid-col-header-unordered .ion-arrow-down-b,
.list-grid-col-header.list-grid-col-header-unordered .ion-arrow-up-b {
  color: var(--text-lightest);
}
.list-grid-col-header.list-grid-col-header-ordered-asc .ion-arrow-down-b {
  color: var(--text-lightest);
}
.list-grid-col-header.list-grid-col-header-ordered-asc .ion-arrow-up-b {
  color: var(--text-default);
}
.list-grid-col-header.list-grid-col-header-ordered-desc .ion-arrow-down-b {
  color: var(--text-default);
}
.list-grid-col-header.list-grid-col-header-ordered-desc .ion-arrow-up-b {
  color: var(--text-lightest);
}
.list-grid-col-headers .list-grid-col-header.justify-end {
  padding-right: 20px;
}
.list-grid-col-header.border-left {
  border-left: 1px solid var(--border-semi-transparent-alt);
}
.list-grid-col-header:has(.list-grid-item-cell-bg) {
  padding: 0;
}
.list-grid-col-header:has(.list-grid-item-cell-bg) .list-grid-col-header-label {
  width: 100%;
}
.list-grid-col-header:has(.list-grid-item-cell-bg).justify-end .list-grid-col-header-label {
  text-align: right;
  padding-right: 10px;
}
@media (min-width: 1080px) {
  .list-grid-col-header.list-grid-col-header-sticky {
    position: sticky;
    z-index: 5;
    left: 0;
    padding-left: 0;
    background-color: var(--bg-content);
  }
  .list-grid.list-grid-document-background .list-grid-col-header.list-grid-col-header-sticky {
    background-color: var(--bg-hover-subtle) !important;
  }
  .list-grid-col-header.list-grid-col-header-dropdown {
    position: sticky;
    right: 0;
  }
}

.list-grid-col-header-sort-icon {
  margin-left: 5px;
  color: color-mix(in srgb, var(--black) 40%, transparent);
  font-size: 0.8em;
}

.list-grid-col-header-title {
  padding-left: 0;
}
@media (max-width: 767px) {
  .list-grid-col-header-title {
    position: relative !important;
  }
}
.list-grid-col-header-title.list-grid-col-header-with-checkbox {
  padding-left: 0;
}

.list-grid-col-header-label {
  position: relative;
  padding: 10px 0 10px;
  white-space: nowrap;
}
.list-grid-col-footer .list-grid-col-header-label {
  padding: 14px 0;
}
.list-grid-col-header-label .ion-arrow-up-b,
.list-grid-col-header-label .ion-arrow-down-b {
  position: absolute;
}
.list-grid-col-header-label .ion-arrow-up-b {
  top: 8px;
}
.list-grid-col-header-label .ion-arrow-down-b {
  top: 14px;
}
.list-grid-col-header-label .checkbox-label.checkbox-16 {
  position: absolute;
  top: 8px;
}

.list-grid-col-resizer {
  position: absolute;
  top: 8px;
  bottom: 6px;
  right: -9.5px;
  width: 20px;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  opacity: 0;
}
.list-grid-col-resizer.isResizing {
  opacity: 1;
}
.list-grid-col-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  right: 10px;
  width: 4px;
  height: 100%;
  background: var(--border-content-alt);
  border-radius: 2px;
}
.list-grid-col-resizer.isResizing::after {
  background: var(--black);
}
.list-grid-col-header.list-grid-col-header-dropdown .list-grid-col-resizer {
  display: none;
}
@media (min-width: 768px) {
  .list-grid-col-header:hover .list-grid-col-resizer {
    opacity: 1;
  }
}

.list-grid-items {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex-shrink: 0;
  flex-grow: 1;
  min-width: 100%;
  align-items: flex-start;
}
.list-grid.list-grid-full-height .list-grid-items {
  margin-bottom: 0;
  transition: all var(--transition-fast) ease;
}

.list-grid-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 100%;
  height: 44px;
  border-bottom: 1px solid var(--border-semi-transparent-alt);
}
.list-grid-item, .list-grid-item:focus, .list-grid-item:visited {
  color: var(--text-muted);
}
.list-grid-item:hover, .list-grid-item:active {
  color: var(--text-default);
}
.list-grid-item.list-grid-item-active {
  z-index: 2;
}
.list-grid-item.list-grid-item-sort-before {
  border-top: 1px solid var(--text-default);
}
.list-grid-item.list-grid-item-sort-after {
  border-bottom: 1px solid var(--text-default);
}
.list-grid-item.disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
}
.list-grid-item.deactivated-row > * {
  opacity: 0.4;
}
.list-grid-item.deactivated-row:hover, .list-grid-item.deactivated-row:active, .list-item:hover .list-grid-item.deactivated-row:hover, .list-item:hover .list-grid-item.deactivated-row:active {
  color: var(--text-lighter);
}
.list-grid-group-header + .list-grid-item {
  border-top: 1px solid transparent;
}

.list-grid-item-link-bg {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.list-grid-item-cell {
  display: inline-flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  height: 100%;
  align-items: center;
  padding: 0 10px;
  white-space: nowrap;
  background: var(--bg-content);
  transition: background var(--transition-fast) ease;
}
.list-grid-item-cell:last-child {
  flex: 1 0 auto;
}
.list-grid.list-grid-document-background .list-grid-item-cell:not(:hover) {
  background-color: var(--bg-hover-subtle) !important;
}
.list-grid-item:hover .list-grid-item-cell {
  background: var(--bg-hover-subtle) !important;
}
.list-grid.list-grid-document-background .list-grid-item-cell:hover {
  background: var(--bg-hover-subtle) !important;
}
.list-grid-group-header .list-grid-item-cell {
  height: 100%;
  background: var(--bg-list-grouped-header) !important;
}
.list-grid-group-header .list-grid-group-header-in:hover .list-grid-item-cell {
  background: color-mix(in srgb, var(--bg-grey-f5) 99%, var(--black)) !important;
}
.list-grid.list-grid-document-background .list-grid-group-header .list-grid-item-cell {
  height: 100%;
  background: var(--bg-list-grouped-header-document) !important;
}
.list-grid.list-grid-document-background .list-grid-group-header .list-grid-group-header-in:hover .list-grid-item-cell {
  background: color-mix(in srgb, var(--bg-grey-f5) 99%, var(--black)) !important;
}
.list-grid-group-header .list-grid-item-cell.list-grid-item-dropdown, .list-grid-group-header .list-grid-group-header-in:hover .list-grid-item-cell.list-grid-item-dropdown {
  background: var(--bg-content) !important;
}
.list-grid.list-grid-document-background .list-grid-group-header .list-grid-item-cell.list-grid-item-dropdown, .list-grid.list-grid-document-background .list-grid-group-header .list-grid-group-header-in:hover .list-grid-item-cell.list-grid-item-dropdown {
  background: var(--bg-hover-subtle) !important;
}
.list-grid-item-cell.list-grid-item-cell-with-avatar {
  position: relative;
  padding-left: 40px;
}
.list-grid-item-cell.list-grid-item-cell-with-avatar .avatar {
  position: absolute;
  left: 0;
  top: 16px;
}
.list-grid-item-cell.list-grid-item-dropdown {
  position: sticky;
  z-index: 4;
  flex-grow: 1;
  flex-shrink: 0;
  justify-content: flex-end;
  right: 0;
  min-width: 40px;
}
.list-grid-item-cell.list-grid-item-dropdown .list-item-dd-toggle {
  z-index: 5;
  top: 0;
  width: 40px;
  text-align: right;
}
.list-grid-item-cell.list-grid-item-dropdown .list-item-dd-toggle-link {
  height: 100%;
  padding: 8.5px 20px 0 0;
}
@media (min-width: 768px) {
  .list-grid-item-cell.list-grid-item-dropdown .list-item-dd-toggle-link {
    padding-right: 10px;
  }
}
.list-grid-item-cell.list-grid-item-over-bg {
  z-index: 3;
}
.list-grid-item-cell.justify-end {
  font-variant-numeric: tabular-nums;
}
.list-grid-item-cell.border-left {
  border-left: 1px solid var(--border-semi-transparent-alt);
}
.list-grid-item-cell a {
  color: inherit;
}
.list-grid-item-cell a:hover {
  text-decoration: underline;
}
.list-grid-item-cell .ghost-input-wrapper {
  position: relative;
  z-index: 3;
  width: 100%;
}
.list-grid-item-cell .ghost-input-wrapper.showing {
  z-index: 4;
  width: 100%;
}
.list-grid-item-cell .ghost-input-toggle,
.list-grid-item-cell .ghost-form-control,
.list-grid-item-cell .ghost-form-display {
  display: flex;
  align-items: center;
  max-height: 30px;
  min-height: 30px;
  resize: none;
  padding-top: 6px;
  padding-bottom: 4px;
  font-size: 14px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.list-grid-item-cell .ghost-input-wrapper.showing .ghost-form-control, .list-grid-item-cell .ghost-input-wrapper.showing .ghost-form-display {
  background-color: var(--bg-content);
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--color-primary);
}
.list-grid.list-grid-document-background .list-grid-item-cell .ghost-input-wrapper.showing .ghost-form-control, .list-grid.list-grid-document-background .list-grid-item-cell .ghost-input-wrapper.showing .ghost-form-display {
  background-color: var(--bg-grey-fc);
}
.list-grid-item-cell .Select__single-value {
  color: var(--text-muted);
}
.list-grid-item:hover .list-grid-item-cell .Select__single-value {
  color: var(--text-default);
}
.list-grid-item-cell .Select__control.Select__control--is-focused .Select__single-value {
  color: var(--text-default);
}
.list-grid-item-cell .custom-field-value-text-display {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-grid-item-cell .list-grid-add-item-link {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}
.list-grid-item-cell .list-grid-add-item-link, .list-grid-item-cell .list-grid-add-item-link:focus, .list-grid-item-cell .list-grid-add-item-link:visited {
  color: var(--color-primary);
}
.list-grid-item-cell .list-grid-add-item-link:hover, .list-grid-item-cell .list-grid-add-item-link:active {
  color: var(--color-primary);
  text-decoration: none;
}
.list-grid-item-cell .list-grid-add-item-link.list-grid-add-item-link--with-field-padding {
  padding-left: var(--ghost-input-side-width);
}
.list-grid-item-cell .checkbox-16 .checkbox-toggle {
  top: 2px;
}
.list-grid-item-cell.column-gap-xs {
  column-gap: 2px;
}
.list-grid-item-cell.with-mask-image {
  mask-image: linear-gradient(to right, black 60%, transparent 100%);
}

@media (min-width: 1080px) {
  .list-grid-item-pinned-left-end {
    transition: all var(--transition-fast) ease;
    border-right: 1px solid transparent;
  }
  .list-grid.list-grid-scrolling-left .list-grid-item-pinned-left-end {
    border-right-color: color-mix(in srgb, var(--black) 5%, transparent);
  }
  .list-grid.list-grid-scrolling-left .list-grid-item-add .list-grid-item-pinned-left-end {
    border-right-color: transparent;
  }
}
.list-grid-item-title {
  position: relative;
  padding-left: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
}
@media (max-width: 767px) {
  .list-grid-item-title {
    position: relative !important;
  }
}
.list-grid-item-title.list-grid-item-expandable-title {
  padding-left: 0;
}
.list-grid-item-title.list-grid-item-checkbox-title {
  padding-left: 50px;
}
.list-grid-item-nested.list-grid-item-depth-1 .list-grid-item-title.list-grid-item-checkbox-title {
  padding-left: 70px;
}
.list-grid-item-nested.list-grid-item-depth-2 .list-grid-item-title.list-grid-item-checkbox-title {
  padding-left: 90px;
}
.list-grid-item-nested.list-grid-item-depth-3 .list-grid-item-title.list-grid-item-checkbox-title {
  padding-left: 110px;
}
.list-grid-item-title.list-grid-item-checkbox-title.list-grid-item-title--nonexpandable {
  padding-left: 25px;
}
.list-grid-item-title .list-item-status {
  position: relative;
  z-index: 3;
  top: 1px;
  left: auto;
  flex-shrink: 0;
  margin-right: 10px;
}

.list-grid-item-title-form {
  position: relative;
  flex-grow: 1;
  flex-shrink: 0;
  max-width: 100%;
  transition: transform var(--transition-fast) ease;
}
.list-grid-item-title-form.list-grid-item-title-form--hide-checkbox {
  transform: translateX(-20px);
}

.list-grid-item-title-color.project-color {
  position: absolute;
  z-index: 11;
  left: 0;
  top: 18px;
  height: 8px;
  width: 8px;
  border-radius: 2px;
}

.list-grid-item-value-negative {
  color: var(--color-danger) !important;
}

.list-grid-item-value-positive {
  color: var(--color-primary) !important;
}

.list-grid-item-cell-expandable {
  display: flex;
  position: relative;
  gap: 10px;
  align-items: center;
  flex-grow: 1;
  max-width: 100%;
  cursor: pointer;
}
.list-grid-item-cell-expandable.list-grid-item-cell-expandable-empty {
  color: var(--text-lighter);
  font-weight: 500;
}
.list-grid-item-cell-expandable.list-grid-item-cell-expandable-loading {
  pointer-events: none;
  opacity: 0.8;
}

.list-grid-item-cell-expandable-icon {
  width: 12px;
  height: auto;
  flex-shrink: 0;
  transition: transform var(--transition-fast) ease;
  transform: rotate(-90deg);
}
.list-grid-item-cell-expandable-icon path {
  fill: var(--text-lighter);
}
.list-grid-item-cell-expandable.expanded .list-grid-item-cell-expandable-icon {
  transform: rotate(0);
}

.list-grid-item-cell-expandable-spinner {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.list-grid-item-cell-aggregated-text-right {
  padding-right: var(--ghost-input-side-width);
  width: 100%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.list-grid-item-cell-bg {
  position: absolute;
  display: none;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  opacity: 0.2;
  border-radius: 2px;
}
.list-grid-item-cell-bg--has-overage {
  display: block;
}

.list-grid-item-row-expandable {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  left: -1px;
  top: 7px;
  height: 29px;
  width: 30px;
  padding-top: 1px;
  border-radius: 50%;
  transition: all var(--transition-fast) ease;
  transform: rotate(-90deg);
}
@media (min-width: 768px) {
  .list-grid-item-row-expandable {
    left: -10px;
  }
}
.list-grid-item-row-expandable.list-grid-item-row-expandable--expanded {
  transform: rotate(0deg);
}
.list-grid-item-nested.list-grid-item-depth-1 .list-grid-item-row-expandable {
  left: 12px;
}
.list-grid-item-nested.list-grid-item-depth-2 .list-grid-item-row-expandable {
  left: 32px;
}
.list-grid-item-nested.list-grid-item-depth-3 .list-grid-item-row-expandable {
  display: none;
}

.list-grid-item-row-expandable-icon {
  width: 11px;
  height: auto;
  flex-shrink: 0;
  transition: all var(--transition-fast) ease;
}
.list-grid-item-row-expandable-icon path {
  fill: var(--text-lighter);
}
.list-grid-item:hover .list-grid-item-row-expandable-icon path, .gantt-table-body-cell--with-expandable:hover .list-grid-item-row-expandable-icon path {
  fill: var(--text-lighter);
}
.list-grid-item-row-expandable:hover .list-grid-item-row-expandable-icon path, .list-grid-item-row-expandable.list-grid-item-row-expandable--expanded .list-grid-item-row-expandable-icon path {
  fill: var(--text-muted);
}

.list-dropdown-settings-hr {
  margin: 0;
}
.list-dropdown-settings-hr.list-dropdown-settings-hr-negative-5 {
  width: auto;
  margin-left: -5px;
  margin-right: -5px;
}
.list-dropdown-settings-hr.list-dropdown-settings-hr-negative-20 {
  width: auto;
  margin-left: -10px;
  margin-right: -10px;
}

.list-dropdown-settings-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
  font-size: 14px;
  font-weight: 500;
}
.list-dropdown-settings-link, .list-dropdown-settings-link:focus, .list-dropdown-settings-link:visited {
  color: var(--text-muted);
}
.list-dropdown-settings-link:hover, .list-dropdown-settings-link:active {
  color: var(--text-muted);
}
.list-dropdown-settings-link:hover svg path, .list-dropdown-settings-link:active svg path {
  fill: var(--text-default);
}
.list-dropdown-settings-link svg {
  width: 15px;
  height: auto;
}
.list-dropdown-settings-link svg path {
  fill: var(--text-muted);
}

.list-grid-group-header {
  position: relative;
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.list-grid-group-header .list-grid-reorder {
  position: relative;
  left: 0;
  visibility: hidden;
  width: 30px;
  margin-left: 0;
  background: none;
  box-shadow: none;
}
@media (min-width: 768px) {
  .list-grid-group-header .list-grid-reorder {
    position: sticky;
    left: -40px;
    width: 40px;
    margin-left: -40px;
  }
}
.list-grid-group-header:hover .list-grid-group-header .list-grid-reorder {
  visibility: visible;
}
.list-grid-group-header .list-grid-reorder:disabled {
  visibility: hidden;
}
.list-grid-group-header:hover .list-grid-reorder,
.list-grid-group-header .list-grid-reorder--active {
  visibility: visible;
}
.list-grid-group-header .list-grid-reorder-icon {
  width: 8px;
  height: auto;
}
.list-grid-group-header .list-grid-reorder-icon path {
  fill: var(--text-lighter);
}
.list-grid-group-header .list-grid-group-menu-item + .expandable {
  display: none;
}
.list-grid-group-header .list-grid-group-menu-link {
  position: absolute;
  cursor: default;
  z-index: 5;
  right: 0;
  top: 0;
  width: 30px;
  height: 100%;
}
.list-grid-group-header .list-grid-item-cell.list-grid-item-dropdown .list-item-dd-toggle-link {
  padding: 6.5px 4px;
}

.list-grid-group-header-in {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 36px;
  min-width: 100%;
  transition: all var(--transition-fast) ease;
  cursor: pointer;
  border-radius: 4px;
}
.list-grid-group-header-in:hover .list-grid-reorder:not(:disabled) {
  visibility: visible;
}
.list-grid-group-header-in:hover .list-grid-reorder-icon path {
  fill: var(--text-muted);
}

.list-grid-group-header-title {
  position: sticky;
  z-index: 5;
  left: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  height: 100%;
  cursor: pointer;
  background: var(--bg-content);
}
.list-grid-group-header-tags .list-grid-group-header-title {
  gap: 5px;
  pointer-events: none;
}
.list-grid.list-grid-document-background .list-grid-group-header-title {
  background-color: var(--bg-grey-fc);
}
.list-grid-group-header-title .status-field-label-wrapper {
  display: block;
}
.list-grid-group-header-title .status-field-bg {
  display: none;
}

.list-grid-group-header-title-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  min-width: 0;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-default);
}

.list-grid-group-header-title-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-list-grouped-header);
  border-radius: 6px 0 0 6px;
  transition: all var(--transition-fast) ease;
}
.list-grid-group-header-in:hover .list-grid-group-header-title-bg {
  background: color-mix(in srgb, var(--bg-grey-f5) 99%, var(--black));
}
.list-grid.list-grid-document-background .list-grid-group-header-title-bg {
  background: var(--bg-list-grouped-header-document);
}
.list-grid.list-grid-document-background .list-grid-group-header-in:hover .list-grid-group-header-title-bg {
  background: color-mix(in srgb, var(--bg-grey-f5) 99%, var(--black));
}

.list-grid-group-header-expand-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-list-grouped-header);
  border-radius: 0 6px 6px 0;
  transition: all var(--transition-fast) ease;
}
.list-grid-group-header-in:hover .list-grid-group-header-expand-bg {
  background: color-mix(in srgb, var(--bg-grey-f5) 99%, var(--black));
}
.list-grid.list-grid-document-background .list-grid-group-header-expand-bg {
  background: var(--bg-list-grouped-header-document);
}
.list-grid.list-grid-document-background .list-grid-group-header-in:hover .list-grid-group-header-expand-bg {
  background: color-mix(in srgb, var(--bg-grey-f5) 99%, var(--black));
}

.list-grid-group-header-icon {
  position: relative;
  top: 0;
  margin-right: 10px;
  width: 17px;
  height: auto;
  flex-shrink: 0;
}
.list-grid-group-header-icon.list-grid-group-header-icon--calendar {
  top: 0;
  width: 15px;
}
.list-grid-group-header-icon.list-grid-group-header-icon--no-project path {
  stroke: var(--text-lighter);
}
.list-grid-group-header-icon.list-grid-group-header-icon--task-list {
  top: 0;
  width: 15px;
}
.list-grid-group-header-icon.list-grid-group-header-icon--task-list path {
  fill: var(--color-primary);
}

.list-grid-group-header-expand-icon {
  width: 12px;
  height: auto;
  flex-shrink: 0;
  margin-right: 3px;
  transform: rotate(0);
  transition: all var(--transition-fast) ease;
}
.list-grid-group-header-expand-icon path {
  fill: var(--text-lighter);
}
.expanded > .list-grid-group-header-expand-icon {
  transform: rotate(180deg);
}

.list-grid-group-header-clickable-bg {
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  cursor: pointer;
}

.list-grid-group-header-add-btn {
  position: relative;
  display: flex;
  padding: 3.5px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: none;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  visibility: hidden;
  margin-left: 20px;
}
.list-grid-group-header-add-btn svg {
  width: 15px;
  height: 15px;
  transition: all var(--transition-fast) ease;
}
.list-grid-group-header-add-btn svg path {
  fill: var(--text-lighter);
}
.list-grid-group-header:hover .list-grid-group-header-add-btn {
  visibility: visible;
}
@media (min-width: 768px) {
  .list-grid-group-header-add-btn:hover {
    background: var(--bg-grey-fa);
  }
  .list-grid-group-header-add-btn:hover svg path {
    fill: var(--color-primary);
  }
}

.list-grid-view-mode-btn.btn.btn-icon {
  width: 40px;
  padding: 0 8px;
}
.list-grid-view-mode-btn.btn.btn-icon path {
  fill: var(--text-default);
}
.list-grid-view-mode-btn.btn.btn-icon:hover path {
  fill: var(--text-default);
}
.list-grid-view-mode-btn.btn.btn-icon.list-grid-view-mode-btn--active {
  background-color: var(--bg-list-grid-row);
}
.list-grid-view-mode-btn.btn.btn-icon.list-grid-view-mode-btn--active path {
  fill: var(--color-primary);
}

.list-grid-reorder {
  position: absolute;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  height: 100%;
  left: -20px;
  width: 30px;
  outline: none;
  background: none;
  border: none;
  display: flex;
}
@media (min-width: 768px) {
  .list-grid-reorder {
    position: sticky;
    visibility: hidden;
    left: -40px;
    width: 40px;
    margin-left: -40px;
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--black) 5%, transparent), 0 1px 0 color-mix(in srgb, var(--black) 5%, transparent);
  }
  .list-grid-item:hover .list-grid-reorder, .unplanned-task-item:hover .list-grid-reorder {
    visibility: visible;
  }
  .list-grid-reorder.list-grid-reorder--over {
    visibility: hidden;
  }
  .list-grid-reorder.list-grid-reorder--active {
    cursor: grabbing;
    box-shadow: none;
    background: none;
  }
  .list-grid-item.list-grid-item-sort-before .list-grid-reorder {
    cursor: grabbing;
    box-shadow: none;
  }
  .list-grid-item.list-grid-item-sort-after .list-grid-reorder {
    cursor: grabbing;
    box-shadow: none;
  }
}
.list-grid-item:hover .list-grid-reorder {
  background: var(--bg-grey-fd);
}

.list-grid-reorder-icon {
  width: 8px;
  height: auto;
}
.list-grid-reorder-icon path {
  fill: var(--text-lighter);
}
.list-grid-reorder:hover .list-grid-reorder-icon path, .list-grid-reorder:active .list-grid-reorder-icon path {
  fill: var(--text-muted);
}

.list-grid-reorder-element {
  display: flex;
  align-items: center;
  height: 36px;
  width: 200px;
  padding: 0 15px;
  pointer-events: none;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-default);
  background: var(--bg-content);
  border-radius: 8px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--black) 12%, transparent);
}

.list-grid-with-pagination-spinner .list-grid {
  padding-bottom: 40px;
}

.list-grid-pagination-spinner {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 50px;
}

.grid-template-dates-select .Select__option {
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.4;
  padding: 8px 12px;
}

.list-cards {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.list-card-item {
  position: relative;
  border: 1px solid var(--border-content);
  border-radius: 6px;
}
.list-card-item:hover {
  border-color: var(--border-content-alt);
}

.list-card-item-bg-link {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.list-card-item-status.status-field-label {
  position: absolute;
  right: 56px;
  top: 22px;
}

.list-card-item-btn {
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: center;
  right: 10px;
  top: 12px;
  width: 40px;
  height: 40px;
}
.list-card-item-btn.list-card-item-btn--with-status {
  top: 15px;
}
.list-card-item--sm .list-card-item-btn {
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
}
.list-card-item-btn svg {
  opacity: 0.25;
  transition: var(--transition-fast);
}
.list-card-item:hover .list-card-item-btn svg {
  opacity: 0.75;
}
.list-card-item .list-card-item-btn:hover svg, .list-card-item .list-card-item-btn.open svg {
  opacity: 1;
}
.list-card-item-btn .dropdown-menu {
  top: -5px;
}

.list-card-item-content {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}
.list-card-item--sm .list-card-item-content {
  padding: 15px;
}

.list-card-item-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 5px;
  width: 100%;
}

.list-card-item-number {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-lighter);
}
.list-card-item-number.list-card-item-number--with-status {
  margin-top: 3px;
}

.list-card-item-title {
  font-size: 16px;
  font-weight: 500;
}

.list-card-item-section {
  width: 100%;
}

.list-card-item-meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.list-card-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 2px;
}
.list-card-item-bottom.list-card-item-bottom--with-avatar {
  margin-top: 7px;
}

.recharts-tooltip-wrapper {
  z-index: 1000;
}

.rechart-tooltip {
  text-align: left;
  background-color: var(--chart-tooltip-bg);
  border: 1px solid var(--border-chart);
  border-radius: 6px;
  box-shadow: var(--box-shadow-medium);
}

.rechart-tooltip-title {
  padding: 7px 12px;
  color: var(--text-default);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid var(--border-chart-row);
}

.rechart-tooltip-content {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 12px;
  font-size: 14px;
}

.rechart-tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.rechart-tooltip-row:first-child {
  padding-top: 0;
}
.rechart-tooltip-row--total-amount {
  padding-top: 2px;
}

.rechart-tooltip-category {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rechart-tooltip-indicator {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.rechart-tooltip-indicator--tentative {
  border: 1px dashed transparent;
}

.rechart-tooltip-label {
  font-weight: 400;
  max-width: 160px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rechart-tooltip-value {
  font-variant-numeric: tabular-nums;
}

.rechart-tooltip-content-extra {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid var(--border-content);
  padding-top: 10px;
  margin-top: 5px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .recharts-line path[stroke="#0f1010"] {
    stroke: var(--grey-6);
  }
}
:root[data-theme=dark] .recharts-line path[stroke="#0f1010"] {
  stroke: var(--grey-6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .recharts-cartesian-axis-tick text {
    fill: var(--grey-e);
  }
}
:root[data-theme=dark] .recharts-cartesian-axis-tick text {
  fill: var(--grey-e);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .recharts-cartesian-grid-horizontal line {
    stroke: var(--border-content);
  }
}
:root[data-theme=dark] .recharts-cartesian-grid-horizontal line {
  stroke: var(--border-content);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .recharts-cartesian-grid-vertical line {
    stroke: var(--border-content);
  }
}
:root[data-theme=dark] .recharts-cartesian-grid-vertical line {
  stroke: var(--border-content);
}

.header-background-image {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 100px;
  background: none center center no-repeat;
  background-size: cover;
}
.header-background-image.with-image {
  background-color: var(--bg-content);
}

.header-background-image-add,
.header-background-image-delete,
.header-background-image-edit {
  position: absolute;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  top: 10px;
  height: 30px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-sans-serif);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 3px;
  transition: all var(--transition-normal) ease;
}
.header-background-image-add, .header-background-image-add:focus, .header-background-image-add:visited,
.header-background-image-delete,
.header-background-image-delete:focus,
.header-background-image-delete:visited,
.header-background-image-edit,
.header-background-image-edit:focus,
.header-background-image-edit:visited {
  color: color-mix(in srgb, var(--black) 70%, transparent);
}
.header-background-image-add:hover, .header-background-image-add:active,
.header-background-image-delete:hover,
.header-background-image-delete:active,
.header-background-image-edit:hover,
.header-background-image-edit:active {
  color: var(--black);
  background: rgba(255, 255, 255, 0.7);
}

.header-background-image-add {
  right: 10px;
  padding: 6px 8px 6px 8px;
}
.header-background-image-add .header-background-image-action-icon {
  margin-right: 7px;
}

.header-background-image-edit {
  right: 46px;
  padding: 6px 8px 6px 8px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--black) 10%, transparent);
}
.header-background-image-edit .header-background-image-action-icon {
  margin-right: 7px;
}

.header-background-image-delete {
  right: 10px;
  padding: 6px 9px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--black) 10%, transparent);
}

.header-background-image-action-icon {
  position: relative;
  width: 16px;
  height: auto;
}
.header-background-image-action-icon.delete-icon {
  width: 10px;
}
.header-background-image-action-icon path {
  fill: currentColor;
}

.header-background-image-loading {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  height: 30px;
  padding: 6px 8px;
  font-size: 14px;
  font-family: var(--font-sans-serif);
  color: color-mix(in srgb, var(--text-default) 80%, transparent);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 3px;
}

.rating-wrap {
  padding: 5px 0;
}
.rating-wrap.active .rating-icon-whole,
.rating-wrap.active .rating-icon-half {
  animation: scale-up var(--transition-medium) 1 forwards;
}
.rating-wrap .rating-star-wrap {
  position: relative;
  float: left;
  height: 30px;
}
.rating-wrap .rating-star {
  position: relative;
  float: left;
  height: 30px;
  width: 15px;
  z-index: 1;
}
.rating-wrap .rating-input[type=radio] {
  cursor: pointer;
  width: 15px;
  height: 30px;
  padding: 0;
  margin: 0;
  opacity: 0;
}
.rating-wrap .rating-icon {
  position: absolute;
  top: -10px;
  left: 0;
  display: none;
  font-size: 38px;
  color: var(--color-accent-yellow);
}
.rating-wrap .rating-icon-empty {
  display: inline-block;
  color: var(--border-content-alt);
}
.rating-wrap .rating-remove {
  float: left;
  width: 100%;
  margin-top: 10px;
}

.rating-remove-link {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-danger);
}
.rating-remove-link:focus, .rating-remove-link:visited {
  color: var(--color-danger);
}
.rating-remove-link:hover, .rating-remove-link:active {
  color: color-mix(in srgb, var(--color-danger) 95%, transparent);
}

.copy-to-clipboard-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid;
  padding: 6px 12px 7px;
  border-radius: 4px;
}

.copy-to-clipboard-link-icon {
  position: relative;
  top: 1px;
  top: 0.5px;
  margin-left: 10px;
  width: 15px;
  height: auto;
}

.copy-to-clipboard-link-checkmark {
  position: relative;
  top: 1px;
  margin-left: 10px;
  width: 15px;
  height: auto;
}
.copy-to-clipboard-link-checkmark path {
  stroke: var(--color-primary);
}

.copy-to-clipboard-link-inline {
  padding: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  pointer-events: visible;
  opacity: 0.7;
  transition: all var(--transition-normal) ease;
}
.copy-to-clipboard-link-inline:hover {
  opacity: 1;
}

.automember-input {
  position: relative;
  z-index: 1;
}

.automember-suggestions {
  position: absolute;
  z-index: 3;
  display: none;
  left: 0;
  top: 100%;
  width: 100%;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 8px color-mix(in srgb, var(--black) 8%, transparent);
}

.automember-suggestion-item {
  position: relative;
  padding: 12px 12px 10px 52px;
  cursor: pointer;
  transition: all var(--transition-normal) ease;
}
.automember-suggestion-item:last-child {
  border-radius: 0 0 4px 4px;
}
.automember-suggestion-item:hover {
  color: var(--text-muted);
  background: var(--bg-grey-fc);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--black) 2%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--black) 2%, transparent);
}

.automember-suggestion-item-avatar {
  position: absolute;
  left: 10px;
  top: 15px;
}

.automember-suggestion-item-name {
  font-size: 16px;
  color: var(--text-muted-alt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.automember-suggestion-item-permissions {
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-lighter);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.automember-suggestion-no-matches {
  position: absolute;
  z-index: 3;
  display: none;
  left: 0;
  top: 100%;
  width: 100%;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 8px color-mix(in srgb, var(--black) 8%, transparent);
}

.autocomplete {
  display: block;
  position: relative;
}

.autocomplete-tags {
  padding: 0;
  margin: 11px 0 0;
  overflow: auto;
  cursor: text;
  border-bottom: 1px dashed var(--border-darker);
}

.autocomplete-tag {
  position: relative;
  float: left;
  display: inline-block;
  max-width: 90%;
  max-width: calc(100% - 30px);
  padding: 6px 30px 4px 20px;
  margin: 0 5px 4px 0;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: var(--white);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--grey-8);
  border-radius: 20px;
  transition: all var(--transition-fast) ease;
  transform: translateZ(0px);
}

.autocomplete-tag-input {
  width: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: transparent;
}

.autocomplete-input-wrapper {
  padding: 0;
  overflow: initial;
  background: none;
}

.autocomplete-input {
  display: block;
  width: 100%;
  margin: 5px 0;
  border: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
}
.autocomplete-input:focus {
  outline: 0;
}

.autocomplete-tag-text {
  font-size: inherit;
}

.autocomplete-tag-delete {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  padding: 7px 10px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 0 50% 50% 0;
}
.autocomplete-tag-delete:hover, .autocomplete-tag-delete:visited, .autocomplete-tag-delete:focus {
  color: rgba(255, 255, 255, 0.9);
}

.autocomplete-dropdown {
  position: absolute;
  display: none;
  min-width: 50%;
  max-height: 260px;
  padding: 0;
  margin-top: -1px;
  border: 1px solid color-mix(in srgb, var(--black) 15%, transparent);
  z-index: 10;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--black) 8%, transparent);
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 18px;
  font-weight: 600;
  list-style: none;
  overflow: scroll;
  color: var(--text-muted);
  background-color: var(--bg-content);
  white-space: nowrap;
}
.autocomplete-dropdown.showing {
  display: block;
}

.autocomplete-dropdown-empty {
  display: block;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: normal;
  color: var(--text-muted);
}

.autocomplete-dropdown li {
  position: relative;
  z-index: 1;
  padding: 10px 12px 7px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all var(--transition-normal) ease;
}
.autocomplete-dropdown li.active {
  color: var(--text-muted-alt);
  background: var(--bg-input-hover);
  box-shadow: inset 2px 0 0 var(--border-content-alt);
}
.autocomplete-dropdown li:hover {
  color: var(--text-muted);
  background: var(--bg-input-hover);
}

.autocomplete-dropdown-item-md {
  font-size: 14px;
}

.autocomplete-dropdown-item-lg {
  font-size: 18px;
}

.autocomplete-dropdown-item-subtext {
  display: block;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-lighter);
}

.onboarding-tour {
  display: none;
  position: fixed;
  z-index: var(--z-onboarding);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background: var(--bg-content);
}
.onboarding-tour.is-mobile {
  position: absolute;
}
.onboarding-tour.showing {
  display: block;
}
.onboarding-tour.hiding {
  animation: fade-out-scale-up var(--transition-slow) 1 forwards;
}

.onboarding-tour-top {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 30px 20px;
  text-align: center;
}
@media (min-width: 480px) {
  .onboarding-tour-top {
    padding: 40px 20px;
  }
}

.onboarding-tour-progress {
  position: relative;
  display: table;
  clear: both;
  height: 4px;
  width: 100%;
  max-width: 140px;
  overflow: hidden;
  background: color-mix(in srgb, var(--black) 5%, transparent);
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--black) 4%, transparent);
  border-radius: 10px;
}
@media (min-width: 480px) {
  .onboarding-tour-progress {
    margin: 0 auto;
  }
}

.onboarding-tour-progress-bar {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: color-mix(in srgb, var(--color-primary) 50%, transparent);
  transition: all var(--transition-slow) ease;
}

.onboarding-tour-progress-bar-point {
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-primary);
  border-radius: 10px;
}

.onboarding-tour-progress-step {
  position: relative;
  z-index: 2;
  display: table-cell;
  min-width: 1px;
  height: 100%;
  border-left: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}
.onboarding-tour-progress-step:first-child {
  border-left: none;
}

.onboarding-tour-skip-link {
  position: absolute;
  right: 20px;
  bottom: 21px;
  color: var(--text-lighter);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.onboarding-tour-skip-link:visited, .onboarding-tour-skip-link:focus {
  color: var(--text-lighter);
}
.onboarding-tour-skip-link:hover {
  color: var(--text-lighter);
}
@media (min-width: 480px) {
  .onboarding-tour-skip-link {
    right: 30px;
    bottom: 31px;
  }
}

.onboarding-tour-steps {
  padding-bottom: 40px;
  text-align: center;
}

.onboarding-tour-step {
  position: relative;
  z-index: 1;
  display: none;
  max-width: 534px;
  width: 100%;
  margin: auto;
}
.onboarding-tour-step.active {
  display: inline-block;
}

.onboarding-tour-step-graphic {
  width: 100%;
  height: 220px;
  margin-bottom: 40px;
  border-top: 1px solid var(--border-content-alt);
  border-bottom: 1px solid var(--border-content-alt);
  background: var(--bg-content) center center no-repeat;
  background-size: cover;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 4%, transparent);
  opacity: 0;
  transition: all var(--transition-slow) ease;
  transform: translateY(30px);
}
@media (min-width: 480px) {
  .onboarding-tour-step-graphic {
    border: 1px solid var(--border-content-alt);
    border-radius: 6px;
  }
}
.onboarding-tour-step-graphic.contracts {
  background-image: url("onboarding-welcome-contract-step-img.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .onboarding-tour-step-graphic.contracts {
    background-image: url("onboarding-welcome-contract-step-img@2x.png");
  }
}
.onboarding-tour-step-graphic.auto-invoice {
  background-position: top center;
  background-image: url("onboarding-welcome-auto-step-img.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .onboarding-tour-step-graphic.auto-invoice {
    background-image: url("onboarding-welcome-auto-step-img@2x.png");
  }
}
.onboarding-tour-step-graphic.tracking {
  background-position: top center;
  background-image: url("onboarding-welcome-tracking-step-img.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .onboarding-tour-step-graphic.tracking {
    background-image: url("onboarding-welcome-tracking-step-img@2x.png");
  }
}
.onboarding-tour-step-graphic.vendor-todos {
  background-position: top center;
  background-image: url("onboarding-welcome-vendor-todos-img.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .onboarding-tour-step-graphic.vendor-todos {
    background-image: url("onboarding-welcome-vendor-todos-img@2x.png");
  }
}
.onboarding-tour-step-graphic.vendor-project {
  background-position: top left;
  background-image: url("onboarding-welcome-vendor-project-img.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .onboarding-tour-step-graphic.vendor-project {
    background-image: url("onboarding-welcome-vendor-project-img@2x.png");
  }
}
.onboarding-tour-step-graphic.vendor-contact {
  background-position: right bottom;
  background-image: url("onboarding-welcome-vendor-contact-img.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .onboarding-tour-step-graphic.vendor-contact {
    background-image: url("onboarding-welcome-vendor-contact-img@2x.png");
  }
}
.onboarding-tour-step-graphic.employee-dashboard {
  background-position: top center;
  background-image: url("onboarding-welcome-employee-dashboard-img.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .onboarding-tour-step-graphic.employee-dashboard {
    background-image: url("onboarding-welcome-employee-dashboard-img@2x.png");
  }
}
.onboarding-tour-step-graphic.employee-vendor {
  background-position: top center;
  background-image: url("onboarding-welcome-employee-vendor-img.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .onboarding-tour-step-graphic.employee-vendor {
    background-image: url("onboarding-welcome-employee-vendor-img@2x.png");
  }
}
.onboarding-tour-step-graphic.employee-project {
  background-position: top center;
  background-image: url("onboarding-welcome-employee-project-img.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .onboarding-tour-step-graphic.employee-project {
    background-image: url("onboarding-welcome-employee-project-img@2x.png");
  }
}
.onboarding-tour-step-graphic.employee-payments {
  background-position: top left;
  background-image: url("onboarding-welcome-employee-payments-img.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .onboarding-tour-step-graphic.employee-payments {
    background-image: url("onboarding-welcome-employee-payments-img@2x.png");
  }
}
.onboarding-tour-step-graphic.showing {
  opacity: 1;
  transform: translateY(0);
}
.onboarding-tour-step-graphic.hiding {
  transition: all var(--transition-normal) var(--transition-normal) ease;
  opacity: 0;
  transform: translateY(15px);
}

.onboarding-tour-step-title {
  position: relative;
  margin-bottom: 20px;
  padding: 0 40px;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-muted);
  text-align: center;
  opacity: 0;
  transition: all var(--transition-slow) var(--transition-normal) ease;
  transform: translateY(30px);
}
@media (min-width: 480px) {
  .onboarding-tour-step-title {
    padding: 0;
    font-size: 24px;
  }
}
.onboarding-tour-step-title.showing {
  opacity: 1;
  transform: translateY(0);
}
.onboarding-tour-step-title.hiding {
  transition: all var(--transition-normal) var(--transition-fast) ease;
  opacity: 0;
  transform: translateY(15px);
}

.onboarding-tour-step-copy {
  margin-bottom: 40px;
  padding: 0 40px;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted);
  opacity: 0;
  transition: all var(--transition-slow) 0.35s ease;
  transform: translateY(30px);
}
@media (min-width: 480px) {
  .onboarding-tour-step-copy {
    padding: 0;
    font-size: 20px;
  }
}
.onboarding-tour-step-copy.showing {
  opacity: 1;
  transform: translateY(0);
}
.onboarding-tour-step-copy.hiding {
  transition: all var(--transition-normal) var(--transition-fast) ease;
  opacity: 0;
  transform: translateY(15px);
}
.onboarding-tour-step-copy p {
  margin-bottom: 20px;
}
.onboarding-tour-step-copy li {
  text-align: left;
  margin-bottom: 10px;
}

.onboarding-tour-step-btns {
  padding: 0 40px;
  opacity: 0;
  transition: all var(--transition-slow) 0.75s ease;
  transform: translateY(10px);
}
@media (min-width: 480px) {
  .onboarding-tour-step-btns {
    padding: 0;
  }
}
.onboarding-tour-step-btns.showing {
  opacity: 1;
  transform: translateY(0);
}
.onboarding-tour-step-btns.hiding {
  transition: all var(--transition-normal) ease;
  opacity: 0;
  transform: translateY(15px);
}

.onboarding-tour-step-welcome-title {
  position: relative;
  padding: 20px 0 30px;
  font-size: 24px;
  font-weight: 400;
  color: var(--text-muted);
  text-align: center;
  opacity: 0;
  transition: all var(--transition-slow) ease;
  transform: translateY(30px);
}
@media (min-width: 480px) {
  .onboarding-tour-step-welcome-title {
    padding: 20px 0 40px;
    font-size: 30px;
  }
}
.onboarding-tour-step-welcome-title.showing {
  opacity: 1;
  transform: translateY(0);
}
.onboarding-tour-step-welcome-title.hiding {
  transition: all var(--transition-normal) var(--transition-normal) ease;
  opacity: 0;
  transform: translateY(15px);
}

.onboarding-tour-step-welcome-img {
  width: 140px;
  height: 140px;
  margin: 0 auto 30px;
  border: 1px solid var(--bg-content);
  background: var(--bg-content) center center no-repeat;
  background-size: cover;
  border-radius: 50%;
  box-shadow: 0 2px 9px color-mix(in srgb, var(--black) 10%, transparent), 0 1px 1px color-mix(in srgb, var(--black) 20%, transparent);
  opacity: 0;
  transition: all var(--transition-slow) var(--transition-normal) ease;
  transform: translateY(30px);
}
.onboarding-tour-step-welcome-img.showing {
  opacity: 1;
  transform: translateY(0);
}
.onboarding-tour-step-welcome-img.hiding {
  transition: all var(--transition-normal) var(--transition-normal) ease;
  opacity: 0;
  transform: translateY(15px);
}

.onboarding-tour-step-ready-title {
  position: relative;
  padding: 30px 40px;
  font-size: 24px;
  font-weight: 400;
  color: var(--text-muted);
  text-align: center;
  opacity: 0;
  transition: all var(--transition-slow) ease;
  transform: translateY(30px);
}
@media (min-width: 480px) {
  .onboarding-tour-step-ready-title {
    padding: 30px 0 60px;
    font-size: 30px;
  }
}
.onboarding-tour-step-ready-title.showing {
  opacity: 1;
  transform: translateY(0);
}
.onboarding-tour-step-ready-title.hiding {
  transition: all var(--transition-normal) var(--transition-normal) ease;
  opacity: 0;
  transform: translateY(15px);
}

.onboarding-tour-step-ready-options {
  position: relative;
  opacity: 0;
  transition: all var(--transition-slow) 0.35s ease;
  transform: translateY(30px);
}
.onboarding-tour-step-ready-options.showing {
  opacity: 1;
  transform: translateY(0);
}
.onboarding-tour-step-ready-options.hiding {
  transition: all var(--transition-normal) var(--transition-fast) ease;
  opacity: 0;
  transform: translateY(15px);
}

.onboarding-tour-step-ready-option-title {
  position: relative;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-muted);
}
@media (min-width: 480px) {
  .onboarding-tour-step-ready-option-title {
    font-size: 20px;
  }
}

.onboarding-tour-step-ready-option-btns {
  padding: 0 40px;
  color: var(--text-lighter);
  font-weight: 400;
  font-size: 16px;
}
@media (min-width: 480px) {
  .onboarding-tour-step-ready-option-btns {
    padding: 0;
  }
}

.onboarding-tour-step-ready-option-link {
  text-decoration: underline;
  color: var(--text-muted);
}
.onboarding-tour-step-ready-option-link:focus, .onboarding-tour-step-ready-option-link:visited {
  color: var(--text-muted);
}
.onboarding-tour-step-ready-option-link:hover {
  color: var(--text-muted-alt);
  text-decoration: underline;
}

.onboarding-tour-step-ready-option-btn {
  display: inline-block;
  width: 100%;
}
@media (min-width: 480px) {
  .onboarding-tour-step-ready-option-btn {
    width: 300px;
  }
}

.onboarding-tour-step-ready-option-or {
  display: inline-block;
  padding: 10px;
  color: var(--text-lighter);
  font-weight: 400;
  letter-spacing: 1px;
}
@media (min-width: 480px) {
  .onboarding-tour-step-ready-option-or {
    padding: 0 11px 0 11px;
  }
}

.onboarding-tour-step-ready-suboptions {
  position: relative;
  margin-top: 60px;
  opacity: 0;
  transition: all var(--transition-slow) var(--transition-slow) ease;
  transform: translateY(30px);
}
.onboarding-tour-step-ready-suboptions.showing {
  opacity: 1;
  transform: translateY(0);
}
.onboarding-tour-step-ready-suboptions.hiding {
  transition: all var(--transition-normal) ease;
  opacity: 0;
  transform: translateY(15px);
}

.onboarding-tour-step-ready-samples {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-lighter);
}
.onboarding-tour-step-ready-samples a {
  text-decoration: underline;
  color: var(--text-muted);
}
.onboarding-tour-step-ready-samples a:focus, .onboarding-tour-step-ready-samples a:visited {
  color: var(--text-muted);
}
.onboarding-tour-step-ready-samples a:hover {
  color: var(--text-muted-alt);
}

.page-banner {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px 15px;
  text-align: center;
  color: var(--text-default);
  background: var(--bg-grey-fc);
  border-bottom: 1px solid var(--border-content);
}

.page-banner-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
}
.page-banner-link, .page-banner-link:focus, .page-banner-link:visited {
  color: var(--text-default);
  text-decoration: underline;
}
.page-banner-link:hover {
  color: var(--text-default);
  text-decoration: underline;
}

.page-banner-action {
  position: relative;
  display: block;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 500;
}

.page-banner-action-icon {
  position: relative;
  top: -1px;
  margin-left: 1px;
  font-size: 7px;
}

.notice-banner {
  position: relative;
  padding: 20px 20px 20px 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  word-break: break-word;
  border-radius: 4px;
  border-left: 5px solid var(--border-content);
  border-width: 1px;
  border-style: solid;
}
.notice-banner a,
.notice-banner a:focus,
.notice-banner a:visited,
.notice-banner a:hover,
.notice-banner a:active {
  text-decoration: underline;
}
.notice-banner .notice-banner-header {
  position: relative;
  top: -1px;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 500;
}
.notice-banner .text-banner-closeable-icon {
  padding: 10px 15px;
}
.notice-banner p {
  font-weight: 400;
}

.notice-banner-icon {
  position: absolute;
  left: 18px;
  top: 22px;
  width: 18px;
  height: auto;
}
.notice-banner-icon.info-icon {
  width: 20px;
}
.notice-banner-icon path.fill-none {
  stroke: var(--text-muted);
}
.notice-banner-icon path:not(.fill-none) {
  fill: currentColor;
}

.success-notice {
  background: var(--bg-grey-fc);
  border-color: var(--border-content);
  border-left: 5px solid var(--color-primary);
}
.success-notice .notice-banner-icon path.fill-none,
.success-notice .notice-banner-header path.fill-none {
  stroke: var(--color-primary);
}
.success-notice .notice-banner-icon path:not(.fill-none),
.success-notice .notice-banner-header path:not(.fill-none) {
  fill: var(--color-primary);
}
.success-notice a,
.success-notice a:focus,
.success-notice a:visited {
  color: var(--color-primary);
}
.success-notice a:hover,
.success-notice a:active {
  color: var(--color-primary);
  text-decoration: underline;
}
.success-notice a.btn,
.success-notice a.btn:hover {
  color: var(--color-primary-contrast);
}

.danger-notice {
  background: var(--color-danger-light);
  border-color: color-mix(in srgb, var(--color-danger) 15%, transparent);
  border-left: 5px solid var(--color-danger);
}
.danger-notice a,
.danger-notice a:focus,
.danger-notice a:visited {
  color: var(--color-danger);
}
.danger-notice a:hover,
.danger-notice a:active {
  color: color-mix(in srgb, var(--color-danger) 50%, transparent);
}

.information-notice {
  background: var(--bg-grey-fc);
  border-color: var(--border-content);
  border-left: 5px solid var(--text-default);
}
.information-notice .notice-banner-icon,
.information-notice .notice-banner-header {
  color: var(--text-default);
}
.information-notice p {
  color: var(--text-muted);
}
.information-notice a,
.information-notice a:focus,
.information-notice a:visited {
  color: var(--text-default);
}
.information-notice a:hover,
.information-notice a:active {
  color: var(--text-default);
  text-decoration: underline;
}

.category-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  left: 0;
  height: 28px;
  padding: 4px 10px;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  flex-shrink: 0;
  vertical-align: top;
}
.category-tag.uncategorized {
  padding: 4px 0 8px;
  font-style: italic;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-lighter);
}
.category-tag.uncategorized:hover {
  color: var(--text-lighter);
}
.category-tag.tag-lg {
  padding: 5px 18px 5px;
  font-size: 14px;
}
.category-tag.tag-lg.uncategorized {
  padding: 6px 0 5px;
}
.category-tag.tag-xs {
  height: 20px;
  padding: 1px 8px;
  font-size: 12px;
}
.category-tag.tag-list-item {
  height: 24px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}

.category-tag-label {
  position: relative;
  z-index: 2;
  min-width: 0;
  color: var(--tag-color, var(--bg-tag-text));
}
.category-tag:hover .category-tag-label {
  color: var(--tag-color, var(--bg-tag-text-hover));
}

.category-tag-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.12;
  border-radius: 6px;
  transition: opacity var(--transition-fast) ease;
}
.category-tag:hover .category-tag-bg {
  opacity: 0.18;
}
.category-tag.tag-radius-sm .category-tag-bg {
  border-radius: 4px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .category-tag-bg {
    opacity: 0.22;
  }
}
:root[data-theme=dark] .category-tag-bg {
  opacity: 0.22;
}

.category-tag-icon {
  position: relative;
  flex-shrink: 0;
  top: 1px;
  width: 13px;
  height: auto;
  margin-right: 5px;
}
.category-tag-icon path {
  fill: color-mix(in srgb, var(--black) 70%, transparent);
}
.category-tag.tag-xs .category-tag-icon {
  top: 0;
}

.category-tag-edit {
  position: absolute;
  top: -25px;
  left: 52px;
}

.category-tag-edit-inline {
  display: inline-block;
  vertical-align: top;
  padding: 5px;
  font-weight: 600;
}

.category-tag-edit-field .showing .category-tag-edit-placeholder {
  display: none;
}

.empty {
  height: 8px;
}

.category-tag-edit-placeholder-icon {
  position: absolute;
  right: 11px;
  top: 14px;
  font-size: 12px;
  color: var(--text-lighter);
  transform: translateY(-1px);
}
.category-tag-edit-field .showing .category-tag-edit-placeholder-icon {
  display: none;
}

.category-tag-empty-button {
  display: inline-block;
  height: 20px;
  padding: 2px 8px 2px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  cursor: pointer;
  background: var(--bg-grey-f5);
  border-radius: 20px;
}
.category-tag-empty-button:hover {
  color: var(--text-default);
  background: var(--bg-grey-f5);
}

.items-list-item-texts {
  flex: 1;
  min-width: 70%;
}
@media (min-width: 768px) {
  .items-list-item-texts {
    min-width: 35%;
  }
}
@media print {
  .items-list-item-texts {
    min-width: 45%;
  }
}
.items-list-item-texts.items-list-item-texts--fee-packages {
  min-width: 43%;
}
@media (min-width: 768px) {
  .items-list-item-texts.items-list-item-texts--fee-packages {
    min-width: 43%;
  }
}
.items-list-item-texts.items-list-item-texts--optional {
  padding-left: 25px;
}

.items-list-item-name {
  display: inline-block;
  width: 96%;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .items-list-item-name {
    margin-bottom: 3px;
    width: 100%;
  }
}
@media print {
  .items-list-item-name {
    margin-bottom: 3px;
  }
}
.items-list-item-name a {
  color: var(--text-default) !important;
}

textarea.form-field.items-list-item-name-input {
  resize: none;
}

.items-list-item-description {
  width: 100%;
  color: var(--text-muted);
  margin-bottom: 5px;
  margin-top: -5px;
}
@media (min-width: 768px) {
  .items-list-item-description {
    margin-bottom: 0;
  }
}
@media print {
  .items-list-item-description {
    margin-bottom: 0;
  }
}
.items-list-item-description textarea,
.items-list-item-description .ghost-form-control,
.items-list-item-description .ghost-form-display {
  color: var(--text-muted);
  font-weight: 400 !important;
  font-size: 12px !important;
}

.items-list-item-numbers {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-right: 40px;
}
@media (min-width: 768px) {
  .items-list-item-numbers {
    width: auto;
    max-width: 65%;
    padding-right: 0;
  }
}
@media print {
  .items-list-item-numbers {
    max-width: 65%;
    padding-right: 0;
  }
}
.items-list-item-numbers.items-list-item-numbers--fee-packages {
  width: auto;
  max-width: 57%;
  padding-right: 0;
}
@media (min-width: 768px) {
  .items-list-item-numbers.items-list-item-numbers--fee-packages {
    width: auto;
    max-width: 57%;
    padding-right: 0;
  }
}

.items-list-item-amount {
  display: inline-block;
  min-width: 100px;
  text-align: right;
}
@media (min-width: 768px) {
  .items-list-item-amount {
    text-align: right;
  }
}
@media print {
  .items-list-item-amount {
    text-align: right;
  }
}
.items-list-item-amount .ghost-form-control, .items-list-item-amount .ghost-form-display {
  text-align: right;
  font-weight: 500;
  padding-right: 3px;
}
@media (min-width: 768px) {
  .items-list-item-amount .ghost-form-control, .items-list-item-amount .ghost-form-display {
    text-align: right;
  }
}
.items-list-item-amount .form-label {
  padding-right: 2px;
}

.items-list-item-tax-rate {
  display: inline-block;
  width: 80px;
  text-align: right;
  padding-left: 30px;
}
@media (min-width: 768px) {
  .items-list-item-tax-rate {
    text-align: right;
  }
}
@media print {
  .items-list-item-tax-rate {
    text-align: right;
  }
}
.items-list-item-tax-rate .ghost-form-control, .items-list-item-tax-rate .ghost-form-display {
  text-align: right;
  font-weight: 500;
  padding-right: 3px;
}
@media (min-width: 768px) {
  .items-list-item-tax-rate .ghost-form-control, .items-list-item-tax-rate .ghost-form-display {
    text-align: right;
  }
}
.items-list-item-tax-rate .form-label {
  padding-right: 2px;
}

.items-list-item-rate {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: 160px;
  min-width: 160px;
  text-align: right;
  padding-left: 10px;
}
.items-list-item-rate .ghost-form-control, .items-list-item-rate .ghost-form-display {
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  padding-right: 3px;
}
.items-list-item-rate .form-label {
  padding-right: 5px;
}

.items-list-item-tax {
  width: 80px;
  min-width: 80px;
  padding-left: 30px;
  text-align: right;
}

.items-list-item-total {
  display: inline-block;
  width: 140px;
  min-width: 120px;
  text-align: right;
  padding-left: 30px;
}

.items-list-item-total-val {
  min-height: 30px;
  padding: 6px 0 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: default;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.items-list-item-col-text {
  height: 30px;
  flex-shrink: 0;
  padding: 5px 0 4px;
  font-size: 14px;
  font-weight: 400;
  cursor: default;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.items-list-item-rate textarea::placeholder,
.items-list-item-rate input::placeholder,
.items-list-item-amount textarea::placeholder,
.items-list-item-amount input::placeholder,
.items-list-item-name textarea::placeholder,
.items-list-item-name input::placeholder,
.items-list-item-description textarea::placeholder,
.items-list-item-description input::placeholder,
.items-list-item-tax-rate textarea::placeholder,
.items-list-item-tax-rate input::placeholder {
  color: var(--text-lighter) !important;
}
.items-list-item-rate .ghost-input-toggle-placeholder,
.items-list-item-amount .ghost-input-toggle-placeholder,
.items-list-item-name .ghost-input-toggle-placeholder,
.items-list-item-description .ghost-input-toggle-placeholder,
.items-list-item-tax-rate .ghost-input-toggle-placeholder {
  color: var(--text-lighter) !important;
}
.items-list-item-rate .ghost-form-control:hover, .items-list-item-rate .ghost-form-display:hover,
.items-list-item-amount .ghost-form-control:hover,
.items-list-item-amount .ghost-form-display:hover,
.items-list-item-name .ghost-form-control:hover,
.items-list-item-name .ghost-form-display:hover,
.items-list-item-description .ghost-form-control:hover,
.items-list-item-description .ghost-form-display:hover,
.items-list-item-tax-rate .ghost-form-control:hover,
.items-list-item-tax-rate .ghost-form-display:hover {
  background-color: var(--bg-grey-fa);
}
.items-list-item-rate .ghost-form-control:focus, .items-list-item-rate .ghost-form-display:focus,
.items-list-item-amount .ghost-form-control:focus,
.items-list-item-amount .ghost-form-display:focus,
.items-list-item-name .ghost-form-control:focus,
.items-list-item-name .ghost-form-display:focus,
.items-list-item-description .ghost-form-control:focus,
.items-list-item-description .ghost-form-display:focus,
.items-list-item-tax-rate .ghost-form-control:focus,
.items-list-item-tax-rate .ghost-form-display:focus {
  background-color: var(--bg-content);
}

.items-list-item-rate textarea,
.items-list-item-rate input,
.items-list-item-amount textarea,
.items-list-item-amount input,
.items-list-item-tax-rate textarea,
.items-list-item-tax-rate input,
.items-list-item-name textarea,
.items-list-item-name input {
  font-weight: 600;
  width: 100%;
}
.items-list-item-rate .ghost-input-toggle,
.items-list-item-amount .ghost-input-toggle,
.items-list-item-tax-rate .ghost-input-toggle,
.items-list-item-name .ghost-input-toggle {
  font-weight: 600;
}

.items-list-item-dropdown-toggle {
  position: absolute;
  right: -30px;
  top: 2px;
  width: 30px;
  text-align: center;
}
.items-list-item-dropdown-toggle .radio-fill {
  display: none;
}
.items-list-item-dropdown-toggle .radio-label {
  padding: 7px 10px;
  margin: 0;
  text-transform: none;
  font-size: 14px;
  color: var(--text-default);
  letter-spacing: normal;
  transition: all var(--transition-fast) ease-in;
  border-radius: 6px;
}
.items-list-item-dropdown-toggle .radio-label.radio-label:hover {
  background: var(--bg-grey-fa);
}
.items-list-item-dropdown-toggle .radio-label.radio-label-checked {
  color: var(--text-default);
  background-color: var(--bg-grey-f5);
}
.items-list-item-dropdown-toggle .radio-label .radio-label-copy {
  color: var(--text-default);
}

.items-list-item-dropdown-toggle-link {
  display: block;
  padding: 2px 0;
}

.items-list-item-dropdown-toggle-icon {
  margin-left: 0;
  width: 10px;
  height: auto;
  margin-right: 0;
  transition: transform var(--transition-fast) ease-in-out;
}
.open .items-list-item-dropdown-toggle-icon {
  transform: rotate(180deg);
}

.items-list-item-labels {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  line-height: 1;
}
.items-list-item-labels.items-list-item-labels--preview-labels {
  display: none;
  margin-bottom: 10px;
}
@media (min-width: 768px), print {
  .items-list-item-labels.items-list-item-labels--preview-labels {
    display: flex;
  }
}
.items-list-item-labels label {
  margin-bottom: 0;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-default);
}

@media (min-width: 768px) {
  .items-list-item-mobile-headers {
    display: none;
  }
}
@media print {
  .items-list-item-mobile-headers {
    display: none;
  }
}
.items-list-item-mobile-headers .form-label {
  color: var(--text-default);
  font-size: 12px;
  font-weight: 400;
}

.dropdown-contained .Select__menu,
.multi-select-contained .Select__menu,
.chart-option-select .Select__menu,
.page-filters .Select__menu,
.dropdown-inline .Select__menu {
  margin-top: -1px;
  font-family: var(--font-sans-serif);
  background: var(--bg-content);
  border: 1px solid var(--color-primary);
  border-top-color: var(--border-content);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--black) 6%, transparent);
  border-radius: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  overflow: hidden;
  z-index: 10;
}
.dropdown-contained .Select__menu .Select__menu-list,
.multi-select-contained .Select__menu .Select__menu-list,
.chart-option-select .Select__menu .Select__menu-list,
.page-filters .Select__menu .Select__menu-list,
.dropdown-inline .Select__menu .Select__menu-list {
  max-height: 305px;
}
.dropdown-contained .Select__menu .Select__single-value,
.multi-select-contained .Select__menu .Select__single-value,
.chart-option-select .Select__menu .Select__single-value,
.page-filters .Select__menu .Select__single-value,
.dropdown-inline .Select__menu .Select__single-value {
  line-height: 1;
}
.dropdown-contained .Select__menu .Select__control,
.multi-select-contained .Select__menu .Select__control,
.chart-option-select .Select__menu .Select__control,
.page-filters .Select__menu .Select__control,
.dropdown-inline .Select__menu .Select__control {
  font-family: var(--font-sans-serif);
}

div.Select__single-value {
  color: var(--text-default);
}

div.Select__menu {
  background: var(--bg-content);
}

div.Select__menu-portal {
  z-index: 10;
}

.Select__menu .Select__option {
  cursor: pointer;
  padding: 10px 10px;
  font-size: 14px;
  font-family: var(--font-sans-serif);
  color: var(--text-default);
  background: var(--bg-content);
}
.Select__menu .Select__option.Select__option--is-focused {
  color: var(--text-default);
  background: var(--bg-grey-fa);
}
.Select__menu .Select__option.Select__option--is-selected {
  color: var(--text-default);
  background-color: var(--bg-grey-f5);
  box-shadow: none;
}
.Select__menu .Select__option:active {
  color: var(--text-default) !important;
  background: var(--bg-grey-f5) !important;
}
.dropdown-sm .Select__menu .Select__option {
  padding: 7px 10px;
  font-size: 14px;
}

.Select__menu-notice--no-options {
  text-align: left !important;
  padding: 12px 12px 10px;
  color: var(--grey-9);
}
.dropdown-sm .Select__menu-notice--no-options {
  padding: 10px 10px;
  font-size: 14px;
}

.Select__option--divider {
  margin: 7px 0;
  border-top: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}
.Select__option--divider:first-child {
  display: none;
}

.page-filters .Select__control {
  min-width: 150px;
  height: 36px;
  min-height: 36px;
  color: var(--text-default);
  cursor: pointer;
  text-transform: capitalize;
  background-color: var(--bg-content);
  border: 1px solid var(--border-content);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--black) 1%, transparent);
  border-radius: 6px;
  transition: all var(--transition-normal) ease;
}
.page-filters .Select__control:hover {
  color: var(--text-default);
  background-color: var(--bg-content);
  border: 1px solid var(--border-field);
  box-shadow: 0 1px 10px color-mix(in srgb, var(--black) 2%, transparent);
}
.page-filters .Select__control:active, .page-filters .Select__control:active:hover {
  color: var(--text-default);
  background-color: var(--bg-content);
  border: 1px solid var(--border-field);
  box-shadow: 0 1px 10px color-mix(in srgb, var(--black) 2%, transparent);
}
.page-filters .Select__control.Select__control--is-focused {
  box-shadow: none;
  border-color: var(--color-primary);
}
.page-filters .Select__control.Select__control--menu-is-open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.page-filters .Select__value-container {
  top: 0;
}
.page-filters .Select__option {
  text-transform: capitalize;
}

.chart-option-select .Select__control {
  min-height: 0;
  height: 30px;
  min-width: 50px;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--bg-grey-f8);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-normal) ease;
}
.chart-option-select .Select__control, .chart-option-select .Select__control:focus, .chart-option-select .Select__control:visited {
  background: var(--bg-grey-f8);
  border: 0;
  border-radius: 5px;
}
.chart-option-select .Select__control:hover, .chart-option-select .Select__control:active {
  background: var(--bg-grey-f8);
  border: 0;
  border-radius: 5px;
}
.chart-option-select .Select__control.Select__control--is-focused {
  box-shadow: none;
  border: 0;
}
.chart-option-select .Select__value-container {
  top: 0;
  padding: 0 0 0 10px;
}
.chart-option-select .Select__single-value {
  position: relative;
  margin-right: 5px;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 500;
  text-overflow: initial;
  transform: translateY(0%);
}
.chart-option-select .Select__control:hover .Select__single-value,
.chart-option-select .Select__control:active .Select__single-value,
.chart-option-select .Select__control--is-focused .Select__single-value {
  color: var(--text-default);
}
.chart-option-select .Select__indicators .Select__dropdown-indicator {
  margin-right: 10px;
  padding-left: 0;
  padding-right: 0;
}
.chart-option-select .Select__menu {
  margin-top: 5px;
  border-radius: 4px;
  border: var(--border-react-select-menu);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--black) 12%, transparent);
}
.chart-option-select .Select__option {
  text-transform: capitalize;
  font-weight: 500;
}

.dropdown-contained.with-label-margin {
  margin-top: 30px;
}
.dropdown-contained--max-height-120 .Select__menu .Select__menu-list {
  max-height: 120px;
}
.dropdown-contained--max-height-190 .Select__menu .Select__menu-list {
  max-height: 190px;
}
.dropdown-contained .Select__control {
  min-height: 40px;
  overflow: visible;
  background: var(--bg-content);
  border: 1px solid var(--border-field);
  border-radius: 6px;
  transition: border-color var(--transition-fast) ease;
}
.dropdown-contained .Select__control:hover {
  border-color: var(--color-primary);
}
.dropdown-contained .Select__control.Select__control--menu-is-open {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: none;
}
.dropdown-contained .Select__control--is-focused {
  border-color: var(--color-primary);
  box-shadow: none;
}
.dropdown-contained .Select__control--menu-is-open {
  border-color: var(--color-primary);
}
.dropdown-contained .Select__control--is-disabled {
  cursor: not-allowed;
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
}
.dropdown-contained .Select__control--is-disabled:hover {
  border-color: var(--border-field);
}
.dropdown-contained .Select__control--is-disabled .Select__single-value--is-disabled {
  color: var(--text-muted);
}
.dropdown-contained .Select__input-container {
  color: var(--text-default);
}
.dropdown-contained.dropdown-sm .Select__control, .dropdown-sm > .dropdown-contained .Select__control {
  height: 30px;
  min-height: 30px;
  border-radius: 4px;
}
.dropdown-contained.dropdown-sm .Select__control.Select__control--menu-is-open, .dropdown-sm > .dropdown-contained .Select__control.Select__control--menu-is-open {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.dropdown-contained.dropdown-sm .Select-value-label, .dropdown-sm > .dropdown-contained .Select-value-label {
  font-size: 14px;
}
.dropdown-contained.dropdown-sm .Select__value-container, .dropdown-sm > .dropdown-contained .Select__value-container {
  padding-top: 1px;
  font-size: 14px;
}
.dropdown-contained.dropdown-sm .Select__single-value, .dropdown-sm > .dropdown-contained .Select__single-value {
  top: 45%;
}
.dropdown-contained.dropdown-sm .Select__indicators .Select__clear-indicator, .dropdown-sm > .dropdown-contained .Select__indicators .Select__clear-indicator {
  top: 1px;
  padding: 5px 0 7px !important;
}
.dropdown-contained.dropdown-sm .Select__indicators .Select__clear-indicator svg, .dropdown-sm > .dropdown-contained .Select__indicators .Select__clear-indicator svg {
  width: 16px;
  height: 16px;
}
.dropdown-contained.dropdown-sm .Select__indicators .Select__dropdown-indicator, .dropdown-sm > .dropdown-contained .Select__indicators .Select__dropdown-indicator {
  top: 0;
  padding: 5px 5px;
}
.dropdown-contained.dropdown-sm .Select__placeholder, .dropdown-sm > .dropdown-contained .Select__placeholder {
  font-size: 14px;
  top: 42%;
}
.dropdown-contained.multi-select .Select__control {
  height: auto;
  min-height: 40px;
}
.dropdown-contained.with-error .Select__control, .dropdown-contained.with-error .Select__control:hover, .dropdown-contained.with-error .Select__control--menu-is-open, .dropdown-contained.with-error .Select__control--is-focused {
  border-color: var(--color-danger-dark);
}
.dropdown-placeholder-toggle + .dropdown-contained, .dropdown-placeholder-no-background-toggle + .dropdown-contained {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
}

.Select__indicators .Select__dropdown-indicator {
  position: relative;
  margin-right: 2px;
  padding: 6px 5px;
  cursor: pointer;
  transition: all var(--transition-normal) ease !important;
}
.Select.dropdown-sm .Select__indicators .Select__dropdown-indicator {
  right: 0;
  margin-top: -11px;
}
.Select__control--menu-is-open .Select__indicators .Select__dropdown-indicator {
  transform: rotate(180deg);
}
.Select__indicators .Select__dropdown-indicator svg {
  width: 16px;
  height: auto;
}
.Select__indicators .Select__clear-indicator {
  position: relative;
  z-index: 0;
  top: 1px;
  width: 19px;
  margin-right: -4px;
  padding: 8px 0 !important;
  color: var(--color-danger) !important;
  cursor: pointer;
  transition: all var(--transition-normal) ease;
  opacity: 0.7;
}
.Select__indicators .Select__clear-indicator:hover {
  color: var(--color-danger);
  opacity: 1;
}

.dropdown-inline .Select__control {
  background: 0 0;
  border: 0;
  border-bottom: 1px dashed var(--border-content-alt);
  border-radius: 0;
}
.dropdown-inline .Select__control:hover {
  border-color: var(--color-primary);
}
.dropdown-inline .Select__control.Select__control--menu-is-open {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: none;
}
.dropdown-inline .Select__value-container {
  padding-left: 0;
  font-size: inherit;
}
.dropdown-inline .Select__indicator {
  padding: 0;
}
.dropdown-inline .Select__control--is-focused {
  border-color: var(--color-primary);
  box-shadow: none;
}
.dropdown-inline .Select__control--menu-is-open {
  border-color: var(--color-primary);
}
.dropdown-inline .Select__control--is-disabled {
  background-color: var(--bg-grey-e);
}
.dropdown-inline .Select__control--is-disabled:hover {
  border-color: var(--border-field);
}
.dropdown-inline.dropdown-sm .Select__control {
  height: 30px;
  min-height: 30px;
}

.dropdown-no-background {
  margin-left: calc(var(--ghost-input-side-width) * -1);
}
.dropdown-no-background .Select__control {
  min-height: auto;
  background: 0 0;
  border: 0;
  border-radius: 0;
}
.dropdown-no-background .Select__control.Select__control--menu-is-open {
  box-shadow: none;
}
.dropdown-no-background .Select__value-container {
  padding: 0;
}
.dropdown-no-background .Select__indicator {
  padding: 0;
}
.dropdown-no-background .Select__indicator svg {
  width: 14px;
}
.dropdown-no-background .Select__control--is-focused {
  box-shadow: none;
}
.dropdown-no-background .Select__control--is-disabled {
  color: var(--grey-9);
}
.dropdown-no-background .Select__control--is-disabled:hover {
  border-color: var(--border-field);
}
.dropdown-no-background .Select__single-value {
  position: relative;
  top: auto;
  margin-right: 5px;
  margin-left: var(--ghost-input-side-width);
  cursor: pointer;
  transform: translateY(0%);
}
.dropdown-no-background .Select__input-container {
  margin-left: var(--ghost-input-side-width);
  color: var(--text-default);
}
.dropdown-no-background .Select__placeholder {
  margin-left: var(--ghost-input-side-width);
  margin-right: var(--ghost-input-side-width);
}
.dropdown-no-background .Select__menu-notice {
  text-align: left;
}
.dropdown-no-background .Select__dropdown-indicator {
  margin: 0 4px 0 0;
}
.dropdown-no-background.dropdown-sm .Select__control {
  height: 30px;
  min-height: 30px;
  border-radius: 4px;
}
.dropdown-no-background.dropdown-sm .Select-value-label {
  font-size: 14px;
}
.dropdown-no-background.dropdown-sm .Select__value-container {
  padding-top: 0;
  padding-bottom: 0;
  font-size: 14px;
}
.dropdown-no-background.dropdown-sm .Select__single-value {
  top: 0;
}
.dropdown-no-background.dropdown-sm .Select__indicators {
  height: 30px;
}
.dropdown-no-background.dropdown-sm .Select__indicators .Select__clear-indicator {
  top: 0;
  padding: 4px 0 !important;
}
.dropdown-no-background.dropdown-sm .Select__indicators .Select__dropdown-indicator {
  top: 0;
  padding: 0;
}
.dropdown-no-background.dropdown-sm .Select__indicators .Select__dropdown-indicator svg {
  width: 14px;
}
.dropdown-no-background.dropdown-sm .Select__placeholder {
  font-size: 14px;
}
.dropdown-no-background.dropdown-xs .Select__control {
  height: 24px;
  min-height: 24px;
}
.dropdown-no-background.dropdown-xs .Select-value-label {
  font-size: 12px;
}
.dropdown-no-background.dropdown-xs .Select__value-container {
  font-size: 12px;
}
.dropdown-no-background.dropdown-xs .Select__indicators {
  height: 24px;
}
.dropdown-no-background.dropdown-xs .Select__indicators .Select__clear-indicator {
  padding: 5px 0 !important;
}
.dropdown-no-background.dropdown-xs .Select__indicators .Select__dropdown-indicator {
  padding: 0;
  margin: 1px -5px 0 0;
}
.dropdown-no-background.dropdown-xs .Select__placeholder {
  font-size: 12px;
}
.dropdown-no-background.dropdown-smd .Select__control {
  height: 36px;
  min-height: 36px;
  border-radius: 4px;
}
.dropdown-no-background.dropdown-lg .Select-value-label {
  font-size: 16px;
}
.dropdown-no-background.dropdown-lg .Select__value-container {
  font-size: 16px;
  padding: 2px 0;
}
.dropdown-no-background.dropdown-lg .Select__indicators .Select__clear-indicator {
  padding: 5px 0 !important;
}
.dropdown-no-background.dropdown-lg .Select__indicators .Select__dropdown-indicator {
  padding: 0;
  margin: 0 -5px 0 0;
}
.dropdown-no-background.dropdown-lg .Select__indicators .Select__dropdown-indicator svg {
  width: 18px;
}
.dropdown-no-background.dropdown-lg .Select__placeholder {
  font-size: 16px;
}
.dropdown-no-background.dropdown-with-focus-background .Select__control {
  border: 1px solid transparent;
}
.dropdown-no-background.dropdown-with-focus-background .Select__control:hover {
  background-color: var(--bg-input-hover);
  border-color: transparent;
}
.dropdown-no-background.dropdown-with-focus-background .Select__control.Select__control--menu-is-open, .dropdown-no-background.dropdown-with-focus-background .Select__control.Select__control--is-focused {
  background-color: var(--bg-content);
  border-color: var(--color-primary);
}
.dropdown-no-background.dropdown-with-focus-background .Select__clear-indicator {
  opacity: 0;
  pointer-events: none;
}
.dropdown-no-background.dropdown-with-focus-background:hover .Select__clear-indicator,
.dropdown-no-background.dropdown-with-focus-background .Select__control.Select__control--is-focused .Select__clear-indicator,
.dropdown-no-background.dropdown-with-focus-background .Select__control.Select__control--menu-is-open .Select__clear-indicator {
  opacity: 1;
  pointer-events: auto;
}
.dropdown-no-background.dropdown-multi-select .Select__control {
  height: auto;
}
.dropdown-no-background.dropdown-multi-select .Select__control--menu-is-open {
  z-index: 2;
}
.dropdown-no-background.dropdown-placement-top-start .Select__menu {
  top: auto;
  bottom: 100%;
}
.dropdown-no-background.dropdown-placement-top-end .Select__menu {
  top: auto;
  bottom: 100%;
}

.dropdown-placeholder-toggle {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 30px 0 10px;
  overflow: hidden;
  background: var(--bg-content);
  border: 1px solid var(--border-field);
  border-radius: 6px;
  transition: border-color var(--transition-fast) ease;
}
.dropdown-placeholder-toggle:hover {
  border-color: var(--color-primary);
}
.dropdown-placeholder-toggle.dropdown-sm {
  height: 30px;
  min-height: 30px;
  padding: 0 30px 0 var(--ghost-input-side-width);
  font-size: 14px;
  border-radius: 4px;
}

.dropdown-placeholder-no-background-toggle {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 30px 0 10px;
  margin-left: calc(var(--ghost-input-side-width) * -1);
  transition: all var(--transition-fast) ease;
}
.dropdown-placeholder-no-background-toggle.dropdown-sm {
  height: 30px;
  min-height: 30px;
  padding: 0 30px 0 var(--ghost-input-side-width);
  font-size: 14px;
  border-radius: 4px;
}
.dropdown-placeholder-no-background-toggle.dropdown-with-focus-background:hover {
  background-color: var(--bg-input-hover);
  border-color: transparent;
}

.dropdown-placeholder-toggle-icon {
  position: absolute;
  right: 7px;
  top: 0;
  height: 100%;
  padding: 0 4px;
}
.dropdown-placeholder-toggle-icon path {
  fill: var(--border-field);
}

.dropdown-multi-select .Select__multi-value {
  position: relative;
  float: left;
  padding: 0 20px 0 0;
  line-height: 2;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-default);
  background: var(--bg-grey-fa);
  border: 1px solid var(--border-content);
  border-radius: 3px;
}
@media (min-width: 768px) {
  .dropdown-multi-select .Select__multi-value {
    max-width: none;
  }
}
.dropdown-multi-select .Select__multi-value__remove {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 0px 5px;
  font-size: 17px;
  line-height: 31px;
  color: var(--grey-9);
  border: none;
}
.dropdown-multi-select .Select__multi-value__remove:hover {
  color: var(--grey-6);
  background: none;
  border: none;
}
.dropdown-multi-select .Select__multi-value__label {
  padding: 3px 7px 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-default);
}
.dropdown-multi-select .Select-clear-zone {
  position: absolute;
  right: 25px;
  top: 5px;
  height: 30px;
}

.react-select-multi-tags.multi-select-contained .Select__control {
  height: auto;
  min-height: 40px;
  padding: 0 0 0 5px;
  overflow: visible;
  background: var(--bg-content);
  border: 1px solid var(--border-field);
  border-radius: 4px;
  transition: border-color var(--transition-fast) ease;
}
.react-select-multi-tags.multi-select-contained .Select__control:hover {
  border-color: var(--color-primary);
}
.react-select-multi-tags.multi-select-contained .Select__control.Select__control--menu-is-open {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: none;
}
.react-select-multi-tags.multi-select-contained .Select__control--is-focused {
  border-color: var(--color-primary);
  box-shadow: none;
}
.react-select-multi-tags.multi-select-contained .Select__control--menu-is-open {
  border-color: var(--color-primary);
}
.react-select-multi-tags.multi-select-contained .Select__control--is-disabled {
  background-color: var(--bg-grey-e);
}
.react-select-multi-tags.multi-select-contained .Select__control--is-disabled:hover {
  border-color: var(--border-field);
}
.react-select-multi-tags.multi-select-contained .Select__placeholder {
  padding-top: 1px;
}
.react-select-multi-tags.multi-select-contained .Select__value-container {
  min-height: 38px;
  padding: 4px 0 2px;
}
.react-select-multi-tags.multi-select-contained .Select__multi-value {
  position: relative;
  float: left;
  padding: 0 20px 0 0;
  margin: 0px 3px 3px 0;
  line-height: 2;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-default);
  background: var(--bg-grey-fa);
  border: 1px solid var(--border-content);
  border-radius: 3px;
}
@media (min-width: 768px) {
  .react-select-multi-tags.multi-select-contained .Select__multi-value {
    max-width: none;
  }
}
.react-select-multi-tags.multi-select-contained .Select__multi-value__remove {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 0px 5px;
  font-size: 17px;
  line-height: 31px;
  color: var(--grey-9);
  border: none;
}
.react-select-multi-tags.multi-select-contained .Select__multi-value__remove:hover {
  color: var(--grey-6);
  background: none;
  border: none;
}
.react-select-multi-tags.multi-select-contained .Select__multi-value__label {
  padding: 3px 7px 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-default);
}
.react-select-multi-tags.multi-select-contained .Select-clear-zone {
  position: absolute;
  right: 25px;
  top: 5px;
  height: 30px;
}

.invoice-currency-select .Select__control,
.proposal-currency-select .Select__control {
  border: 0;
  height: 18px;
  min-height: 18px;
  align-content: center;
}
.invoice-currency-select .Select__control:hover,
.proposal-currency-select .Select__control:hover {
  border: 0;
  box-shadow: none;
}
.invoice-currency-select .Select__control--is-focused,
.proposal-currency-select .Select__control--is-focused {
  box-shadow: none;
  border: 0;
}
.invoice-currency-select .Select__value-container,
.proposal-currency-select .Select__value-container {
  width: 42px !important;
  padding: 0;
  text-align: right;
}
.invoice-currency-select .Select__single-value,
.proposal-currency-select .Select__single-value {
  font-size: 18px;
  margin: 0;
  overflow: visible;
  text-overflow: unset;
}
.invoice-currency-select .Select__indicator,
.proposal-currency-select .Select__indicator {
  padding: 0;
  margin-right: 0;
  left: 4px;
  top: -1px;
}
.invoice-currency-select-wrapper .invoice-currency-select .Select__indicator,
.invoice-currency-select-wrapper .proposal-currency-select .Select__indicator {
  top: 1px;
}
.invoice-currency-select .Select__menu,
.proposal-currency-select .Select__menu {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: var(--bg-content);
  box-sizing: border-box;
  margin-top: -1px;
  max-height: 200px;
  top: 100%;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-content);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--black) 12%, transparent);
}
.invoice-currency-select .Select__menu-list,
.proposal-currency-select .Select__menu-list {
  max-height: 198px;
}
.invoice-currency-select .Select__option,
.proposal-currency-select .Select__option {
  font-size: 14px;
  font-weight: 500;
}

.Select__menu-list {
  padding: 0 !important;
}

.Select__value-container {
  font-size: 14px;
}

.Select__placeholder {
  font-size: 14px;
  color: var(--grey-9) !important;
}

.dropdown-contained.has-value .Select__placeholder {
  color: var(--text-default) !important;
}

.Select__menu {
  z-index: 10;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--border-semi-transparent), 0 4px 11px color-mix(in srgb, var(--black) 10%, transparent) !important;
}
.Select__menu.dropdown--min-width-200 {
  min-width: 200px;
}
.Select__menu.dropdown--right-align {
  left: auto;
  right: 0;
}

.Select__indicator-separator {
  display: none;
}

.onboarding-new-todo-type-selection .dropdown-wrap .Select__control {
  border: 0;
  padding: 10px 15px 8px;
}
.onboarding-new-todo-type-selection .dropdown-wrap .Select__single-value {
  font-size: 20px;
  padding: 11px 0;
}

.dropdown-wrap .Select__control {
  border: 0;
  border-bottom: 1px dashed var(--border-field);
  border-radius: 0;
  padding: 0;
}
.dropdown-wrap .Select__control--is-focused {
  box-shadow: none;
}
.dropdown-wrap .Select__single-value {
  font-size: 14px;
  padding: 0;
}
.dropdown-wrap .Select__menu {
  z-index: 10;
  border-top: 0;
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.Select__menu .Select__group {
  padding: 0;
}
.Select__menu .Select__group .Select__option {
  padding-left: 15px;
}

.Select__menu .Select__group-heading {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 10px;
  font-size: 12px;
  letter-spacing: 0.075em;
  color: var(--grey-9);
}

.Select__custom__option {
  position: relative;
}
.Select__custom__option.Select__custom__option--with-color {
  padding-left: 20px;
}
.Select__custom__option .new-feature-label {
  position: absolute;
  right: 0;
  top: -1px;
  filter: grayscale(1);
  opacity: 0.6;
}
.Select__option.Select__option--is-focused .Select__custom__option .new-feature-label {
  filter: grayscale(0);
  opacity: 1;
}

.Select__custom__option__sublabel {
  margin-top: 2px;
  margin-bottom: 1px;
  font-size: 12px;
  color: var(--text-muted-alt);
}
.Select__menu .Select__option--is-selected .Select__custom__option__sublabel {
  color: var(--text-muted-alt);
}
.Select__menu .Select__option.Select__option--is-focused .Select__custom__option__sublabel, .Select__menu .Select__option.Select__option--is-selected .Select__custom__option__sublabel {
  color: var(--text-default);
}

.Select__custom__option__sublabel__icon {
  position: relative;
  top: 1px;
  height: 10px;
  width: auto;
  margin-right: 5px;
}
.Select__custom__option__sublabel__icon.task {
  top: 0;
  height: 8px;
}
.Select__custom__option__sublabel__icon.email {
  position: relative;
  top: -0.5px;
  height: 7px;
  width: auto;
}
.Select__custom__option__sublabel__icon path {
  fill: currentColor;
}

.Select__custom__option__label {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.Select__custom__option__sidelabel {
  flex-shrink: 0;
  padding-top: 1px;
  pointer-events: none;
  font-size: 12px;
  font-style: italic;
  color: var(--grey-9);
}
.Select__option.Select__option--is-focused .Select__custom__option__sidelabel {
  color: var(--grey-9);
}

.Select__custom__option__color {
  position: absolute;
  left: 0;
  top: 5px;
  flex-shrink: 0;
}

.project-select-open-link {
  position: absolute;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  right: 10px;
  top: 1px;
  height: 30px;
  cursor: pointer;
  padding: 0 10px 0 11px;
  background: var(--bg-panel);
  border: 1px solid var(--border-content);
  border-radius: 6px;
  box-shadow: 0 1px 6px color-mix(in srgb, var(--black) 5%, transparent);
}
.project-select-open-link:hover {
  border: 1px solid var(--border-content);
}
.task-modal-project:hover .project-select-open-link, .timetracking-modal-project-field:hover .project-select-open-link {
  display: flex;
}
.ghost-input-wrapper.showing ~ .project-select-open-link {
  display: none;
}
.project-select-open-link.project-select-open-link--allocation-modal {
  display: flex;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.project-select-open-link-icon {
  position: relative;
  height: 15px;
  width: auto;
}
.project-select-open-link-icon path {
  fill: var(--text-default);
}

.Select__custom__option__label_tag {
  position: absolute;
  top: 1px;
  right: -3px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-default);
  background-color: var(--bg-grey-e);
  border-radius: 3px;
  opacity: 0;
}
.project-select-with-completed .Select__option:hover .Select__custom__option__label_tag, .project-select-with-completed .Select__option.Select__option--is-focused .Select__custom__option__label_tag {
  opacity: 1;
}

.select-component-link-option-separator {
  border: none;
}
.Select__option:first-child .select-component-link-option-separator {
  display: none;
}

.select-component-link-option {
  display: flex;
  font-weight: 600;
}

.select-component-link-option-icon {
  align-self: center;
  width: 12px;
  height: auto;
  transform: translateY(0.5px);
}
.select-component-link-option-icon path {
  fill: currentColor;
}

.Select__option:has(> .select-component-link-option),
.Select__option.select-component-link-option {
  background-color: var(--bg-content);
}
.Select__option:has(> .select-component-link-option):hover, .Select__option:has(> .select-component-link-option).Select__option--is-focused, .Select__option:has(> .select-component-link-option):active,
.Select__option.select-component-link-option:hover,
.Select__option.select-component-link-option.Select__option--is-focused,
.Select__option.select-component-link-option:active {
  background-color: var(--bg-content) !important;
}

.Select__option-checkbox-item {
  display: flex;
  align-items: flex-start;
}

.dropdown-menu > li .Select__option-toggle-item.form-switch-field {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.dropdown-menu > li > a,
.dropdown-menu > li a {
  font-weight: 500;
}

.dropdown-menu > li .Select__option-settings-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  cursor: pointer;
  border-radius: 4px;
}
.dropdown-menu > li .Select__option-settings-icon svg {
  width: 15px;
  height: auto;
  stroke: var(--text-lighter);
}
.dropdown-menu > li .Select__option-settings-icon:hover svg {
  stroke: var(--text-muted);
}

.react-select-multi-tags .select-tag {
  position: relative;
  float: left;
  display: inline-block;
  padding: 3px 10px 1px;
  line-height: 1.4;
  margin: 0px 3px 3px 0;
  line-height: 2;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-default);
  background: var(--bg-grey-fa);
  border: 1px solid var(--border-content-alt);
  border-radius: 3px;
}
@media (min-width: 768px) {
  .react-select-multi-tags .select-tag {
    max-width: none;
  }
}

.react-select-multi-tags.multi-select-contained .Select-multi-value-wrapper {
  display: block;
}
.react-select-multi-tags.multi-select-contained .Select-placeholder {
  padding: 0 10px;
}
.react-select-multi-tags.multi-select-contained .Select-input {
  display: inline-block;
  float: left;
  height: 30px;
  margin-left: 5px;
}
.react-select-multi-tags.multi-select-contained .Select-input input {
  padding: 6px 0;
}
.react-select-multi-tags.multi-select-contained .Select-clear-zone {
  top: 1px;
}

.dropdown-contained-reveal-fields {
  padding-left: 7px;
  margin-left: -10px;
  border-left: 3px solid var(--border-content-alt);
}
@media (min-width: 480px) {
  .dropdown-contained-reveal-fields {
    padding-left: 14px;
    margin-left: -18px;
    border-left-width: 4px;
  }
}

.Select.is-disabled .Select-value {
  cursor: not-allowed;
}

.checkbox-component {
  display: flex;
}
.checkbox-component label {
  margin-left: 10px;
}

.dropdown-with-crown-icon .Select__option:hover .crown-default path,
.dropdown-with-crown-icon .Select__option.Select__option--is-focused .crown-default path {
  fill: var(--bg-content);
}

.dropdown-lg {
  font-size: 16px;
}
.dropdown-lg .Select__control {
  min-height: 50px;
}
.dropdown-lg .Select__value-container {
  padding: 2px 13px;
}
.dropdown-lg .Select__option {
  padding: 15px 15px 12px;
}
.dropdown-lg .Select__menu,
.dropdown-lg .Select__placeholder,
.dropdown-lg .Select__input input,
.dropdown-lg .Select__option,
.dropdown-lg .Select-value-label,
.dropdown-lg .Select__value-container {
  font-size: 16px;
}

.Select__option.top-separator {
  border-top: 1px solid var(--bg-grey-f5);
}
.Select__option.bottom-separator {
  border-bottom: 1px solid var(--bg-grey-f5);
}
.Select__option.with-color {
  padding-left: 20px;
}

.Select__multi-value {
  max-width: 200px;
}

.dropdown-component-file-access.dropdown-no-background .Select__control {
  padding: 10px var(--ghost-input-side-width);
  cursor: pointer;
  border-radius: 6px;
}
.dropdown-component-file-access.dropdown-no-background .Select__control:hover {
  background-color: var(--bg-input-hover-subtle);
}
.dropdown-component-file-access.dropdown-no-background .Select__value-container {
  flex: none;
  justify-content: flex-start;
  width: auto;
}
.dropdown-component-file-access.dropdown-no-background .Select__single-value {
  margin-left: 0;
}
.dropdown-component-file-access.dropdown-no-background .Select__menu {
  width: 150px;
  top: 50%;
  left: 40px;
}

.dropdown-component-file-access-icon {
  position: relative;
  top: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background-color: var(--bg-grey-f1);
  border-radius: 50%;
}
.dropdown-component-file-access-icon svg {
  width: 12px;
  height: auto;
}
.dropdown-component-file-access-icon svg path {
  fill: var(--text-lighter);
}
.dropdown-component-file-access-icon.dropdown-component-file-access-icon--public svg {
  width: 15px;
}
.dropdown-component-file-access-icon.dropdown-component-file-access-icon--public svg path {
  fill: var(--color-primary);
}

.support-launcher {
  position: fixed;
  z-index: var(--z-support-launcher);
  display: none;
  right: 26px;
  bottom: 26px;
  height: 40px;
  width: 40px;
  text-align: center;
  cursor: pointer;
  background: var(--bg-content);
  border-radius: 50%;
  border: 1px solid var(--border-content-alt);
  transition: all var(--transition-fast) ease;
}
.support-launcher:hover {
  border-color: var(--text-muted);
  box-shadow: 0 1px 7px color-mix(in srgb, var(--bg-shadow) 4%, transparent);
}
.support-launcher.open {
  border-color: var(--text-muted);
  box-shadow: 0 1px 10px color-mix(in srgb, var(--bg-shadow) 5%, transparent);
}
@media (min-width: 768px) {
  .support-launcher {
    display: block;
  }
}

.support-launcher-icon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 11px;
  height: auto;
  margin: auto;
  padding-top: 1px;
  user-select: none;
  opacity: 1;
  transition: all var(--transition-normal) ease;
  transform-origin: 50% 50%;
}
.support-launcher-icon path {
  fill: var(--text-default);
}
.support-launcher:hover .support-launcher-icon path {
  fill: var(--text-default);
}
.support-launcher.open .support-launcher-icon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.support-launcher-icon-close {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 11px;
  height: auto;
  margin: auto;
  padding-top: 2px;
  user-select: none;
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
  transition: all var(--transition-normal) ease;
  transform-origin: 50% 50%;
}
.support-launcher-icon-close fill {
  path: var(--text-default);
}
.support-launcher.open .support-launcher-icon-close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.support-launcher-tooltip {
  position: fixed;
  z-index: 10000;
  right: 26px;
  bottom: 74px;
  height: 50px;
  width: 155px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-primary-contrast);
  user-select: none;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background: color-mix(in srgb, var(--black) 95%, transparent);
  border-radius: 4px;
  transition: opacity var(--transition-fast) var(--transition-normal) ease;
}
.support-launcher:hover + .support-launcher-tooltip {
  visibility: visible;
  opacity: 1;
}
.support-launcher.open + .support-launcher-tooltip {
  visibility: hidden;
  opacity: 0;
  transition: none;
}

.support-menu {
  position: fixed;
  z-index: 10001;
  right: 20px;
  bottom: 80px;
  width: 215px;
  padding-top: 10px;
  background: var(--bg-content);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  border-radius: 12px;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--bg-shadow) 12%, transparent);
  transform: translateY(10px);
  transition: all var(--transition-fast) ease;
}
.support-menu.open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.support-menu-link {
  display: block;
  padding: 8px 15px 6px;
  font-weight: 500;
  user-select: none;
}
.support-menu-link, .support-menu-link:focus, .support-menu-link:visited {
  color: var(--text-default);
}
.support-menu-link:hover, .support-menu-link:active {
  color: var(--text-default);
  background: var(--bg-grey-fc);
}

.support-menu-legal {
  margin-top: 10px;
  padding: 15px 15px;
  color: var(--text-lighter);
  font-weight: 500;
  font-size: 12px;
  cursor: default;
  user-select: none;
  border-top: 1px solid var(--border-content);
}
.support-menu-legal a,
.support-menu-legal a:focus,
.support-menu-legal a:visited {
  color: var(--text-lighter);
}
.support-menu-legal a:hover,
.support-menu-legal a:active {
  color: var(--text-lighter);
  text-decoration: underline;
}

.form-attachment-uploader-wrapper {
  position: relative;
  height: 40px;
  width: 100%;
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
  transition: all var(--transition-normal) ease;
}
.form-attachment-uploader-wrapper:hover {
  border-color: var(--color-primary);
}
.form-attachment-uploader-wrapper.with-attachment {
  border: 1px solid var(--border-content-alt);
}

.form-attachment-filename {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-lighter);
  padding: 10px 50px 10px 13px;
}
.with-attachment .form-attachment-filename {
  z-index: 3;
}

.form-attachment-uploader-download-icon {
  position: absolute;
  width: 14px;
  height: auto;
  top: 0.5px;
  left: 0;
}

.form-attachment-uploader-file-link {
  padding-left: 25px;
  position: relative;
}
.with-attachment .form-attachment-uploader-file-link {
  color: var(--color-primary);
}
.form-attachment-uploader-file-link:has(a):hover {
  text-decoration: underline;
}

.form-attachment-uploader-placeholder {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: left;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--color-primary);
  cursor: pointer;
  opacity: 1;
  transition: all var(--transition-normal) ease;
}
.form-attachment-uploader-wrapper.with-attachment .form-attachment-uploader-placeholder {
  opacity: 0;
}

.form-attachment-uploader-placeholder-icon {
  position: relative;
  height: auto;
  width: 15px;
  margin-right: 10px;
}
.form-attachment-uploader-placeholder-icon svg {
  display: inline-block;
  width: 100%;
  height: auto;
}

.form-attachment-uploader-placeholder-bg {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  opacity: 0;
  transition: all var(--transition-normal) ease;
  border-radius: 6px;
}
.form-attachment-uploader-wrapper.with-attachment .form-attachment-uploader-placeholder-bg {
  opacity: 0;
}

.form-attachment-image-uploader-placeholder-icon {
  width: 15px;
  height: auto;
  margin: 1px 7px 0 0;
}

.form-attachment-uploader-delete {
  position: absolute;
  z-index: 4;
  right: 0;
  top: 5px;
  bottom: 0;
  height: 30px;
  width: 33px;
  padding: 0 11px 0;
  text-align: center;
  font-size: 20px;
  letter-spacing: 1px;
  cursor: pointer;
  border-left: 1px solid var(--border-content);
}
.form-attachment-uploader-delete path {
  fill: var(--color-danger);
}
.form-attachment-uploader-delete:hover path, .form-attachment-uploader-delete:active path {
  fill: color-mix(in srgb, var(--color-danger) 95%, var(--black));
}

.form-attachment-uploader-file {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.with-attachment .form-attachment-uploader-file {
  z-index: 1;
}

.form-attachment-uploader-progress-bar {
  position: absolute;
  z-index: 5;
  display: none;
  left: 20px;
  right: 20px;
  top: 50%;
  height: 5px;
  margin-top: -2px;
  margin-bottom: 20px;
  overflow: hidden;
  background: var(--bg-grey-f1);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--black) 4%, transparent);
}
.form-attachment-uploader-progress-bar.failed {
  background-color: var(--color-danger);
}
.form-attachment-uploader-progress-bar.input-image-uploader {
  left: 135px;
}

.form-attachment-uploader-progress-bar-in {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background-color: var(--color-accent-yellow);
}
.form-attachment-uploader-progress-bar.failed .form-attachment-uploader-progress-bar-in {
  background-color: var(--color-danger);
}
.form-attachment-uploader-progress-bar-in.input-image-uploader {
  background-color: var(--color-primary);
}

.form-attachment-download-icon {
  position: relative;
  height: 18px;
  width: 18px;
  margin-right: 6px;
  top: 4px;
}
.form-attachment-download-icon path {
  stroke: var(--color-primary);
}

#modal-scope-of-work .form-attachment-uploader-wrapper.with-attachment:hover, .agreement-steps-container .form-attachment-uploader-wrapper.with-attachment:hover {
  border-color: var(--color-primary);
}
#modal-scope-of-work .form-attachment-filename, .agreement-steps-container .form-attachment-filename {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 0 15px;
  height: 100%;
}
#modal-scope-of-work .form-attachment-filename .form-attachment-uploader-file-link, .agreement-steps-container .form-attachment-filename .form-attachment-uploader-file-link {
  flex-grow: 1;
  line-height: 1em;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
#modal-scope-of-work .form-attachment-filename .form-attachment-uploader-file-link svg, .agreement-steps-container .form-attachment-filename .form-attachment-uploader-file-link svg {
  width: 18px;
  height: auto;
}
#modal-scope-of-work .form-attachment-filename .form-attachment-uploader-file-link:hover, .agreement-steps-container .form-attachment-filename .form-attachment-uploader-file-link:hover {
  text-decoration: none;
}

.app-signup-banner {
  position: relative;
  display: block;
  padding-top: 30px;
  padding-bottom: 60px;
  background: var(--bg-info);
}

.app-signup-banner-content {
  position: relative;
  text-align: left;
  overflow: hidden;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 4%, transparent);
}

.app-signup-banner-main {
  padding: 40px;
}

.app-signup-banner-copy {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .app-signup-banner-copy {
    font-size: 18px;
  }
}

.app-signup-banner-points {
  margin-top: 20px;
  text-align: left;
}

.app-signup-banner-point {
  position: relative;
  margin-bottom: 5px;
  padding: 10px 0 10px 45px;
  font-weight: 400;
  font-size: 16px;
  color: var(--text-default);
}
.app-signup-banner-point:last-child {
  margin-bottom: 0;
}

.app-signup-banner-point-icon {
  position: absolute;
  left: 0;
}
.app-signup-banner-point-icon.contracts {
  top: 6px;
  width: 26px;
}
.app-signup-banner-point-icon.contracts path {
  fill: var(--color-primary);
}
.app-signup-banner-point-icon.invoices {
  top: 4px;
  width: 30px;
  left: -1px;
}
.app-signup-banner-point-icon.invoices path {
  fill: var(--color-primary);
}
.app-signup-banner-point-icon.invoices .cls-1 {
  fill: none;
}
.app-signup-banner-point-icon.stats {
  top: 6px;
  width: 30px;
  left: -1px;
}
.app-signup-banner-point-icon.stats path {
  fill: var(--color-primary);
}
.app-signup-banner-point-icon.people {
  top: 5px;
  width: 30px;
}
.app-signup-banner-point-icon.people path {
  fill: var(--color-primary);
}

.app-signup-banner-aside {
  padding: 40px;
  text-align: center;
  border-top: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .app-signup-banner-aside {
    position: absolute;
    right: 0;
    width: 50%;
    height: 100%;
    padding: 0;
    background: var(--bg-content);
    border-left: 1px solid var(--border-content);
    border-top: none;
  }
}

@media (min-width: 768px) {
  .app-signup-banner-aside-in {
    position: absolute;
    left: 5%;
    width: 90%;
    top: 50%;
    transform: translateY(-50%);
  }
}

.app-signup-banner-aside-copy {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-lighter);
}

.app-signup-banner-aside-contact {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-lighter);
}

.app-successful-banner {
  position: relative;
  z-index: 20;
  display: block;
  width: 100%;
  padding: 30px 20px 0;
  font-size: 16px;
  text-align: center;
  color: var(--text-default);
  background: var(--bg-info);
}
@media (min-width: 480px) {
  .app-successful-banner {
    font-size: 18px;
  }
}

.app-successful-banner-link, .app-successful-banner-link:focus, .app-successful-banner-link:visited {
  color: var(--text-default);
  text-decoration: underline;
}
.app-successful-banner-link:hover, .app-successful-banner-link:active {
  color: color-mix(in srgb, var(--text-default) 98%, transparent);
  text-decoration: underline;
}

.app-successful-takeover {
  position: fixed;
  display: none;
  z-index: 1050;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  padding-bottom: 60px;
  background: var(--bg-content);
  -webkit-overflow-scrolling: touch;
  outline: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.app-successful-takeover.showing {
  display: block;
}

.app-successful-takeover-line1 {
  margin-top: 40px;
  margin-bottom: 5px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-default);
}
.app-successful-takeover-line1 a,
.app-successful-takeover-line1 a:focus,
.app-successful-takeover-line1 a:visited {
  color: var(--text-default);
  text-decoration: underline;
}
.app-successful-takeover-line1 a:hover,
.app-successful-takeover-line1 a:active {
  color: var(--text-default);
  text-decoration: underline;
}
@media (min-width: 768px) {
  .app-successful-takeover-line1 {
    font-size: 26px;
  }
}

.app-successful-takeover-line2 {
  margin-bottom: 40px;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-lighter);
}

.app-successful-takeover-features {
  max-width: 700px;
  margin: auto;
}

.app-successful-takeover-feature {
  position: relative;
  display: block;
  padding: 160px 40px 105px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  background: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  transition: all var(--transition-normal) ease;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--black) 10%, transparent);
}

.app-successful-takeover-feature-icon {
  position: absolute;
  top: 30px;
  left: 50%;
  margin-left: -41px;
  font-size: 100px;
  color: #999;
}
.app-successful-takeover-feature-icon.w9 {
  top: 24px;
}
.app-successful-takeover-feature-icon.chat {
  top: 30px;
}

.app-successful-takeover-feature-btn {
  position: absolute;
  bottom: 40px;
  left: 40px;
  right: 40px;
  width: auto;
}

.app-successful-takeover-project-copy {
  margin-top: 45px;
  font-size: 20px;
  font-weight: 500;
  color: var(--text-default);
}

.app-successful-takeover-project-link, .app-successful-takeover-project-link:focus, .app-successful-takeover-project-link:visited {
  color: var(--text-default);
  text-decoration: underline;
}
.app-successful-takeover-project-link:hover, .app-successful-takeover-project-link:active {
  color: var(--text-default);
  text-decoration: underline;
}

.powered-by-bonsai-container {
  font-family: var(--font-sans-serif);
  text-align: center;
  padding: 17px 0px;
  border-width: 0 1px 1px;
  border-style: solid;
  border-color: var(--border-content);
  background: var(--bg-grey-fa);
}
.customform-form-embed .powered-by-bonsai-container {
  border-color: var(--bg-grey-f5);
  background: none;
}

.powered-by-bonsai-invoice {
  margin-top: -1px;
  border-radius: 0px 0px 5px 5px;
}
@media (min-width: 768px) {
  .powered-by-bonsai-invoice {
    margin: -1px 0 0;
  }
}

.powered-by-bonsai-custom-form {
  border-width: 1px 0 0;
  border-radius: 0px 0px 5px 5px;
}

.powered-by-bonsai-client-portal {
  border-radius: 0px 0px 14px 14px;
}

.powered-by-bonsai-client-portal-project {
  width: 100%;
  margin-bottom: 40px;
}
@media (min-width: 1200px) {
  .powered-by-bonsai-client-portal-project {
    margin-bottom: 20px;
  }
}

.powered-by-bonsai-client-portal-project-wrapper {
  display: none;
  justify-content: flex-start;
  margin-top: 30px;
}
@media (min-width: 992px) {
  .powered-by-bonsai-client-portal-project-wrapper {
    display: flex;
  }
}

.powered-by-bonsai-scheduling {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-left: -30px;
  opacity: 0.8;
}
@media (min-width: 768px) {
  .powered-by-bonsai-scheduling {
    margin-left: -40px;
  }
}

.powered-by-bonsai-copy {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-default);
  opacity: 0.58;
}

.powered-by-bonsai-logo {
  position: relative;
  top: 2px;
  width: 75px;
  height: 15px;
  margin-left: 6px;
}

.powered-by-bonsai-muted {
  display: flex;
  align-items: center;
  gap: 8px;
}

.powered-by-bonsai-muted-copy {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-default);
  opacity: 0.2;
}

.powered-by-bonsai-muted-logo {
  position: relative;
  width: 75px;
  height: 15px;
  filter: grayscale(1);
  opacity: 0.2;
}

.grouped-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 10px 15px 12px;
  cursor: pointer;
  background: var(--bg-grey-fa);
  border-radius: 6px;
}
.grouped-list-header:hover {
  background: var(--bg-grey-fa);
}
.grouped-list-header.header-collapsed {
  margin-bottom: 2px;
}
@media (min-width: 768px) {
  .grouped-list-header {
    padding-right: 40px;
  }
}

.grouped-list-header-title {
  display: inline-block;
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grouped-list-header-title.black {
  color: var(--text-default);
}
.grouped-list-header-title.capitalize {
  text-transform: capitalize;
}
.grouped-list-header.header-collapsed .grouped-list-header-title {
  color: var(--text-default);
}

.grouped-list-header-toggle {
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -8px;
  overflow: hidden;
  opacity: 0.5;
  line-height: 1;
}

.grouped-list-rows .list-item:first-of-type {
  border-top: none;
}

.grouped-list-rows .list-item-in.with-checkbox {
  padding-left: 41px;
}

.grouped-list-rows .list-item-dd-toggle {
  text-align: left;
  width: 34px;
}

.grouped-list-rows .task-item-toggle {
  left: 10px;
}

.grouped-list-rows .task-item-add-icon {
  left: 16px;
}

:root body {
  /* Font sizes */
  --rnf-font-size-xs: 10px;
  --rnf-font-size-sm: 14px;
  /* changed */
  --rnf-font-size-md: 16px;
  --rnf-font-size-lg: 18px;
  --rnf-font-size-xl: 22px;
  --rnf-empty-feed-header-font-size: 16px;
  --rnf-empty-feed-body-font-size: 14px;
  --rnf-notification-cell-content-font-size: 14px;
  /* Line heights */
  --rnf-notification-cell-content-line-height: 1.41;
  /* changed */
  /* Spacing */
  --rnf-spacing-0: 0;
  --rnf-spacing-1: 5px;
  --rnf-spacing-2: 10px;
  --rnf-spacing-3: 12px;
  --rnf-spacing-4: 15px;
  --rnf-spacing-5: 20px;
  --rnf-spacing-6: 25px;
  --rnf-spacing-7: 30px;
  --rnf-spacing-8: 40px;
  --rnf-notification-cell-padding: 15px 20px;
  /* Font weights */
  --rnf-font-weight-normal: 500;
  --rnf-font-weight-medium: 500;
  --rnf-font-weight-semibold: 500;
  --rnf-font-weight-bold: 600;
  /* Font family */
  --rnf-font-family-sanserif: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  /* Border radius */
  --rnf-border-radius-sm: 2px;
  --rnf-border-radius-md: 4px;
  --rnf-border-radius-lg: 8px;
  --rnf-notification-feed-popover-border-radius: 10px;
  /* Shadows */
  --rnf-shadow-sm: 0px 5px 10px color-mix(in srgb, var(--black) 12%, transparent);
  --rnf-shadow-md: 0px 8px 30px color-mix(in srgb, var(--black) 24%, transparent);
  /* Colors */
  --rnf-color-white: var(--bg-content);
  --rnf-color-white-a-75: rgba(255, 255, 255, 0.75);
  --rnf-color-black: var(--bg-inverse);
  --rnf-color-gray-900: #1a1f36;
  --rnf-color-gray-800: #3c4257;
  --rnf-color-gray-700: #3c4257;
  --rnf-color-gray-600: #515669;
  --rnf-color-gray-500: #697386;
  --rnf-color-gray-400: #9ea0aa;
  --rnf-color-gray-300: var(--grey-8);
  --rnf-color-gray-200: var(--border-content-alt);
  --rnf-color-gray-100: var(--bg-grey-e);
  --rnf-color-brand-500: #e95744;
  --rnf-color-brand-700: #e4321b;
  --rnf-color-brand-900: #891e10;
  /* Component specific colors */
  --rnf-unread-badge-bg-color: #dd514c;
  --rnf-avatar-bg-color: #ef8476;
  --rnf-avatar-size: 28px;
  --rnf-message-cell-unread-dot-bg-color: #f4ada4;
  --rnf-message-cell-hover-bg-color: #f1f6fc;
  --rnf-unseen-badge-bg-color: #22AD01;
  --rnf-notification-cell-content-color: var(--text-default);
  /* changed */
  --rnf-notification-cell-unread-dot-bg-color: #22AD01;
  --rnf-notification-cell-unread-dot-border-color: #22AD01;
  /* changed */
  --rnf-notification-feed-popover-height: 600px;
  /* changed */
  --rnf-unseen-badge-bg-color: #eb5757;
  --rnf-unseen-badge-size: 16px;
  --rnf-unseed-badge-font-size: 9px;
  --rnf-notification-feed-popover-shadow: drop-shadow(0px 5px 12px rgba(0, 0, 0, .12));
  /* Custom adjusts on the default theme */
}
:root body .rnf-notification-cell__content blockquote {
  font-size: var(--rnf-font-size-sm);
  line-height: var(--rnf-font-size-2xl);
}
:root body .rnf-tooltip {
  font-size: 1.1rem;
}
:root body .rnf-unseen-badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 2px;
  right: 2px;
  width: var(--rnf-unseen-badge-size);
  height: var(--rnf-unseen-badge-size);
  background-color: var(--rnf-unseen-badge-bg-color);
  border-radius: var(--rnf-unseen-badge-size);
}
:root body .rnf-unseen-badge__count {
  font-size: var(--rnf-unseed-badge-font-size);
  font-weight: var(--rnf-font-weight-medium);
  color: var(--rnf-color-white);
  margin-top: -1px;
}
:root body .rnf-unseen-badge--dark {
  --rnf-unseen-badge-bg-color: #ef3434;
}
:root body .rnf-notification-icon-button {
  width: 36px;
  height: 36px;
  border-radius: 6px;
}
@media (min-width: 768px) {
  :root body .rnf-notification-icon-button:hover {
    background: var(--bg-grey-fa);
  }
}
:root body .rnf-notification-icon-button.rnf-notification-icon-button--open {
  background: var(--bg-grey-fa);
}
:root body .rnf-notification-icon-button-icon {
  width: 18px;
  height: auto;
}
:root body .rnf-notification-icon-button-icon path {
  fill: var(--text-muted);
}
:root body .rnf-notification-icon-button:hover .rnf-notification-icon-button-icon path {
  fill: var(--text-default);
}
:root body .rnf-notification-feed-popover {
  max-height: calc(100vh - 60px);
}
:root body .rnf-notification-feed {
  background-color: var(--bg-panel);
}
:root body .rnf-notification-cell__unread-dot {
  top: 25px;
}
:root body .rnf-notification-feed-popover__inner {
  border: 1px solid var(--border-content);
}
:root body .rnf-notification-feed__container {
  padding-bottom: 20px;
}
:root body .rnf-notification-cell {
  border-bottom: 1px solid var(--border-content);
}
:root body .rnf-notification-cell:hover,
:root body .rnf-notification-cell:focus,
:root body .rnf-notification-cell:active {
  background-color: var(--bg-content);
  outline: none;
}
:root body .rnf-notification-cell:first-child {
  border-top: 1px solid var(--border-content);
}
:root body .rnf-notification-cell:last-child {
  border-bottom: 1px solid var(--border-content);
}
:root body .rnf-notification-cell__content {
  padding-top: 3px;
}
:root body .rnf-notification-cell__content p {
  margin: 0 0 0.5em;
}
:root body .rnf-notification-cell__content-outer {
  min-width: 0;
}
:root body .rnf-notification-cell__feature {
  max-width: 100%;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-muted);
}
:root body .rnf-notification-cell__feature-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-muted);
}
:root body .rnf-notification-cell__model-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-muted);
}
:root body .rnf-notification-cell__model-desc {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-default);
}
:root body .rnf-notification-cell__timestamp {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

:root[data-theme=dark] body {
  --rnf-color-gray-900: var(--grey-e);
  --rnf-color-gray-800: var(--grey-d);
  --rnf-color-gray-700: var(--grey-d);
}

.share-file-link-modal-form-field.form-field-view-only {
  padding-right: 95px;
  cursor: pointer;
}

.share-file-link-modal-btn {
  position: absolute;
  right: 3px;
  top: 3px;
}

.field-popup-menu {
  position: absolute;
  flex-direction: column;
  display: flex;
  z-index: var(--z-popup-menu);
  left: 30px;
  top: 100%;
  width: 300px;
  max-width: calc(100% - 60px);
  margin-top: 5px;
  padding: 5px 5px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 6px;
  user-select: none;
  box-shadow: var(--box-shadow-medium);
}
.field-popup-menu.popup-menu-120 {
  width: 120px;
  max-width: none;
}
.field-popup-menu.popup-menu-160 {
  width: 160px;
  max-width: none;
}
.field-popup-menu.popup-menu-200 {
  width: 200px;
  max-width: none;
}
.field-popup-menu.popup-menu-280 {
  width: 280px;
  max-width: none;
}
.field-popup-menu.popup-menu-400 {
  width: 400px;
  max-width: none;
}
.field-popup-menu.field-popup-menu--dates {
  width: 340px;
  max-width: none;
  padding: 10px;
}
.field-popup-menu.align-center-xs {
  left: 50%;
  transform: translateX(-50%);
}
.field-popup-menu.field-popup-menu--right-aligned {
  left: auto;
  right: 0;
}
.field-popup-menu .status-field-label {
  margin-bottom: 5px;
  width: 100%;
  cursor: pointer;
}
.field-popup-menu .status-field-label .status-field-text {
  cursor: pointer;
}
.field-popup-menu .status-field-label-wrapper:last-child .status-field-label {
  margin-bottom: 0;
}

.field-popup-menu-list-section {
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 10px 10px 0px;
}

.field-popup-menu-list-divider {
  border-top: 1px solid var(--border-content);
  margin: 5px -5px 5px;
}

.field-popup-menu-list-item {
  display: block;
  padding: 7px 10px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  border-radius: var(--border-radius-medium);
}
.field-popup-menu-list-item, .field-popup-menu-list-item:focus, .field-popup-menu-list-item:visited {
  color: var(--text-default);
  text-decoration: none;
}
.field-popup-menu-list-item:hover, .field-popup-menu-list-item:active {
  color: var(--text-default);
  text-decoration: none;
  background: var(--bg-grey-fc);
}
.field-popup-menu-list-item.with-icon {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}
.field-popup-menu-list-item.with-icon .weekly-icon {
  position: relative;
  top: 1px;
  width: 20px;
  height: auto;
  margin-left: -2px;
  margin-right: -2px;
}
.field-popup-menu-list-item.with-icon .weekly-icon path {
  stroke: var(--text-muted);
}
.field-popup-menu-list-item.with-icon:hover .weekly-icon path {
  stroke: var(--color-primary);
}
.field-popup-menu-list-item.active {
  color: var(--text-default);
  background: var(--bg-grey-f1);
}

.field-popup-menu-dates-inputs {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 20px 20px 10px;
}

.drawer-side-checkbox-label {
  font-size: 14px;
  font-weight: normal;
  padding: 2px 0 20px 30px;
}

.status-field-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 3px 10px 3px 31px;
  overflow: hidden;
  border-radius: 6px;
  transition: filter var(--transition-fast) ease;
}
.status-field-label.scheduled {
  cursor: pointer;
}
.status-field-label.status-field-smd {
  height: 36px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-right: 12px;
  font-size: 14px;
  max-width: 150px;
}
.status-field-label.status-field-sm {
  padding-top: 3px;
  padding-left: 30px;
  font-size: 14px;
  max-width: 150px;
}
.status-field-label.status-field-xs {
  height: 24px;
  padding-top: 3px;
  padding-bottom: 2px;
  padding-left: 24px;
  font-size: 12px;
  max-width: 100%;
  border-radius: 4px;
}
.status-field-label:hover {
  filter: brightness(85%);
}
.status-field-label.no-hover:hover {
  filter: none;
}
.list-grid-item-cell .status-field-label {
  width: 100%;
  max-width: none;
}

.status-label-container {
  height: 30px;
  z-index: 4;
}
.list-grid-item-cell .status-label-container {
  max-width: 100%;
  width: 100%;
}

.status-field-label-wrapper {
  display: inline-block;
}
.list-grid-item-cell .status-field-label-wrapper {
  max-width: 100%;
  width: 100%;
}

.status-field-label-board .status-field-label {
  position: relative;
  max-width: 178px;
  min-width: 150px;
}
.status-field-label-board .status-field-label:hover {
  filter: none;
}

.status-field-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.12;
  background: var(--grey-c);
  border-radius: 6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .status-field-bg {
    opacity: 0.45;
  }
}
:root[data-theme=dark] .status-field-bg {
  opacity: 0.45;
}
.drafted > .status-field-bg {
  background: var(--grey-f5) !important;
  opacity: 1;
}
.scheduled > .status-field-bg {
  background: var(--grey-f5);
  opacity: 1;
}
.outstanding > .status-field-bg, .sent > .status-field-bg {
  background: var(--grey-f5);
  opacity: 1;
}
.active > .status-field-bg {
  background: var(--color-accent-blue);
}
.overdue > .status-field-bg, .rejected > .status-field-bg, .expired > .status-field-bg {
  background: var(--color-danger);
}
.awaiting-deposit > .status-field-bg, .awaiting_deposit > .status-field-bg {
  background: var(--color-accent-orange);
}
.pending > .status-field-bg, .to_do > .status-field-bg {
  background: var(--color-accent-purple);
}
.paid > .status-field-bg, .accepted > .status-field-bg, .complete > .status-field-bg, .completed > .status-field-bg {
  background: var(--color-primary);
}
.archived > .status-field-bg {
  background: var(--grey-9);
}

.status-field-dot {
  position: absolute;
  left: 12px;
  top: 10px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: var(--grey-9);
}
.drafted > .status-field-dot {
  background: var(--grey-c);
}
.scheduled > .status-field-dot {
  background: var(--grey-8);
}
.outstanding > .status-field-dot, .sent > .status-field-dot {
  background: var(--text-muted);
}
.active > .status-field-dot {
  background: var(--color-accent-blue);
}
.overdue > .status-field-dot, .rejected > .status-field-dot, .expired > .status-field-dot {
  background: var(--color-danger);
}
.awaiting-deposit > .status-field-dot, .awaiting_deposit > .status-field-dot {
  background: var(--color-accent-orange);
}
.pending > .status-field-dot, .to_do > .status-field-dot {
  background: var(--color-accent-purple);
}
.paid > .status-field-dot, .accepted > .status-field-dot, .complete > .status-field-dot, .completed > .status-field-dot {
  background: var(--color-primary);
}
.archived > .status-field-dot {
  background: var(--grey-9);
}
.status-field-label.status-field-smd .status-field-dot {
  top: 13px;
}
.status-field-label.status-field-sm .status-field-dot {
  top: 10px;
}
.status-field-xs .status-field-dot {
  top: 8px;
  left: 10px;
  height: 8px;
  width: 8px;
}

.status-dot-compact-wrapper {
  position: absolute;
  top: 6px;
  left: 6px;
  height: 18px;
  width: 18px;
  padding: 3px;
  border-radius: 50%;
  border: 1px solid var(--grey-9);
}

.status-dot-compact {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--grey-9);
}

.status-field-text {
  position: relative;
  color: var(--text-default);
  font-weight: 500;
  font-size: 14px;
  cursor: default;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-field-label.status-field-smd .status-field-text {
  font-size: 14px;
}
.status-field-label.status-field-sm .status-field-text {
  font-size: 14px;
}
.status-field-label.status-field-xs .status-field-text {
  font-size: 12px;
}
.status-field-label.archived > .status-field-text {
  color: var(--text-muted);
}

.status-field-caret-icon {
  position: absolute;
  right: 12px;
  top: 13px;
  width: 10px;
  height: auto;
  opacity: 0.2;
  transition: all var(--transition-normal) ease;
}
.status-field-caret-icon.active {
  transform: rotate(180deg);
}

#navigation {
  position: fixed;
  z-index: var(--z-navigation);
  display: flex;
  align-items: center;
  justify-content: space-between;
  top: 0;
  left: 0;
  right: 0;
  user-select: none;
  background-color: var(--bg-content);
  height: var(--navigation-height);
  border-bottom: 1px solid var(--border-content);
}
@media print {
  #navigation {
    display: none;
  }
}
#navigation.ghost, #outer-wrapper.ghost #navigation {
  position: absolute;
  background: none;
  border: none;
}
#navigation.navigation-admin .navigation-left {
  overflow: scroll;
  max-width: 90%;
}
@media (min-width: 1200px) {
  #navigation.navigation-admin .navigation-left {
    overflow: hidden;
  }
}
#navigation.navigation-admin .navigation-admin-items {
  display: flex;
}
#navigation.navigation-client-portal {
  position: absolute;
}
@media (min-width: 1200px) {
  #outer-wrapper.with-sidebar #navigation {
    left: var(--sidebar-width-collapsed);
    transition: left var(--transition-fast) ease;
    transform: translateZ(1px);
  }
  #outer-wrapper.with-sidebar.with-secondary-menu #navigation, #outer-wrapper.with-sidebar.with-sidebar-expanded #navigation {
    left: var(--sidebar-width);
  }
  #outer-wrapper.page-preload #navigation {
    transition: none;
  }
  #outer-wrapper.wrapper-document-editor #navigation {
    position: fixed;
  }
}
@media print {
  #navigation {
    display: none;
  }
}

.navigation-right {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  height: var(--navigation-height);
  min-width: 0;
  gap: 2px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .navigation-right {
    padding-right: 29px;
  }
}

.navigation-left {
  position: relative;
  display: flex;
  align-items: center;
}

.navigation-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 10px;
  padding: 17px 0 15px;
  line-height: 1.8;
  font-size: 14px;
  font-weight: 600;
  height: var(--navigation-height);
  transition: all var(--transition-normal) ease;
}
.navigation-item, .navigation-item:focus, .navigation-item:visited {
  color: var(--text-default);
}
.navigation-item:hover {
  color: var(--text-default);
}
.navigation-item.active {
  color: var(--color-primary);
}
#navigation.ghost .navigation-item, #navigation.ghost .navigation-item:focus, #navigation.ghost .navigation-item:visited {
  color: var(--text-default);
}
#navigation.ghost .navigation-item:hover {
  color: var(--text-default);
  opacity: 0.9;
}
.navigation-item .caret {
  position: relative;
  top: -1px;
}
.navigation-item.project-navigation-item {
  display: none;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .navigation-item.project-navigation-item {
    display: inline-block;
  }
}
.navigation-item.automation-document-navigation-item {
  display: none;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .navigation-item.automation-document-navigation-item {
    display: inline-block;
  }
}
.navigation-item.preview-document-navigation-item {
  display: none;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .navigation-item.preview-document-navigation-item {
    display: inline-block;
  }
}

.automation-document-navigation-item-active-dot {
  animation: fade-in-out-halfway 2s ease-in infinite;
}
.automation-document-navigation-item-active-dot path,
.automation-document-navigation-item-active-dot g,
.automation-document-navigation-item-active-dot rect,
.automation-document-navigation-item-active-dot polygon {
  fill: var(--color-primary) !important;
}

.navigation-item-btn {
  margin: 15px 10px;
}
.navigation-item-btn.btn-outline, .navigation-item-btn.btn-outline:focus, .navigation-item-btn.btn-outline:visited {
  border-color: color-mix(in srgb, var(--black) 10%, transparent);
}
.navigation-item-btn.btn-outline:hover, .navigation-item-btn.btn-outline:active {
  border-color: color-mix(in srgb, var(--black) 20%, transparent);
}
@media (min-width: 768px) {
  .navigation-item-btn {
    margin: 15px;
  }
}

.navigation-role {
  position: relative;
  display: none;
  margin: 0 10px 0 20px;
  padding: 3px 15px 4px;
  height: 32px;
  font-size: 16px;
  font-weight: 600;
  user-select: none;
  border-radius: 50px;
  border: 1px solid var(--border-content);
  transition: all var(--transition-fast) ease;
}
.navigation-role, .navigation-role:focus, .navigation-role:visited {
  color: var(--text-default);
}
.navigation-role:hover, .navigation-role:active {
  color: var(--text-default);
  border: 1px solid var(--border-content-alt);
}
.open > .navigation-role {
  color: var(--text-default);
  border: 1px solid var(--border-content-alt);
}
@media (min-width: 768px) {
  .navigation-role {
    display: inline-block;
  }
}

.navigation-role-link, .navigation-role-link:focus, .navigation-role-link:visited {
  color: var(--text-default);
}
.navigation-role-link:hover, .navigation-role-link:active {
  color: var(--text-default);
}

.navigation-brand {
  position: relative;
  display: inline-block;
  height: var(--navigation-height);
  padding: 15px;
  line-height: 25px;
  user-select: none;
}
.navigation-brand:active {
  transform: scale(0.98);
}
.navigation-brand.no-transform:active {
  transform: none;
}
.navigation-brand.border-right {
  border-right: 1px solid var(--border-content);
}
.navigation-brand.white {
  border-right: none;
}

.navigation-brand-logo {
  height: 32px;
  margin-right: 5px;
  border-radius: 2px;
}

.navigation-brand-icon {
  width: 30px;
  height: 30px;
  transform: translateZ(0px);
  border-radius: 2px;
  object-fit: contain;
}

.navigation-to-dashboard {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: top;
  height: var(--navigation-height);
  padding: 0 10px 2px 15px;
  line-height: 1.8;
  font-size: 14px;
  font-weight: 600;
  transition: all var(--transition-normal) ease;
}
.navigation-to-dashboard, .navigation-to-dashboard:focus, .navigation-to-dashboard:visited {
  color: var(--text-default);
}
.navigation-to-dashboard:hover {
  color: var(--text-default);
}

.navigation-to-dashboard-label {
  display: none;
  margin-left: 5px;
}
@media (min-width: 768px) {
  .navigation-to-dashboard-label {
    display: inline-block;
  }
}

.navigation-to-dashboard-icon {
  position: relative;
  top: 3px;
  width: 16px;
  height: auto;
}

.navigation-client-icon {
  position: relative;
  margin-right: 6px;
  top: 3px;
  width: 17px;
  height: auto;
}

.navigation-project-icon {
  position: relative;
  margin-right: 8px;
  top: 2px;
  width: 17px;
  height: auto;
}

.navigation-preview-icon {
  position: relative;
  margin-right: 8px;
  top: 7px;
}

.navigation-responses-icon {
  position: relative;
  margin-right: 8px;
  top: 7px;
  width: 17px;
  height: auto;
}

.navigation-breadcumb {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 50px;
}
@media (min-width: 1200px) {
  .navigation-breadcumb {
    padding-left: 30px;
  }
  .navigation-breadcumb.navigation-breadcumb--with-document {
    padding-left: 10px;
  }
}
.navigation-breadcumb.navigation-breadcumb--with-document {
  flex: 1;
}
.navigation-breadcumb.navigation-breadcumb--in-drawer {
  margin-left: -10px;
  margin-bottom: 30px;
  padding-left: 0;
  pointer-events: auto;
}
@media (min-width: 768px) {
  .navigation-breadcumb.navigation-breadcumb--in-drawer {
    margin-bottom: 15px;
  }
}

.navigation-breadcumb-item {
  display: none;
  align-items: center;
  vertical-align: top;
  padding: 0 7px;
  margin: 0 3px;
  height: 28px;
  max-width: 200px;
  font-size: 14px;
  font-weight: 500;
  cursor: default;
  pointer-events: none;
  user-select: text;
  border-radius: 6px;
  transition: all var(--transition-fast) ease;
}
.navigation-breadcumb-item, .navigation-breadcumb-item:focus, .navigation-breadcumb-item:visited {
  color: var(--text-default);
}
.navigation-breadcumb-item:last-child {
  display: inline-flex;
}
@media (min-width: 1200px) {
  .navigation-breadcumb-item {
    display: inline-flex;
    pointer-events: auto;
    font-weight: 500;
  }
  .navigation-breadcumb-item, .navigation-breadcumb-item:focus, .navigation-breadcumb-item:visited {
    color: var(--text-muted);
  }
  .navigation-breadcumb-item:hover, .navigation-breadcumb-item:active {
    color: var(--text-muted);
  }
}
@media (min-width: 1200px) {
  .navigation-breadcumb-item.navigation-breadcumb-item--link {
    cursor: pointer;
  }
  .navigation-breadcumb-item.navigation-breadcumb-item--link:hover, .navigation-breadcumb-item.navigation-breadcumb-item--link:active {
    background-color: var(--bg-grey-fa);
  }
}
.navigation-breadcumb-item.navigation-breadcumb-item--dropdown {
  position: relative;
  pointer-events: auto;
}
@media (min-width: 1200px) {
  .navigation-breadcumb-item.navigation-breadcumb-item--dropdown {
    cursor: pointer;
  }
  .navigation-breadcumb-item.navigation-breadcumb-item--dropdown:hover, .navigation-breadcumb-item.navigation-breadcumb-item--dropdown:active {
    background-color: var(--bg-grey-fa);
  }
}
.navigation-breadcumb-item.navigation-breadcumb-item--dropdown .ghost-input-wrapper {
  min-width: 0;
}
@media (min-width: 1200px) {
  .navigation-breadcumb-item.navigation-breadcumb-item--dashboard-title {
    max-width: 100%;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-default);
  }
}
.navigation-breadcumb-item.navigation-breadcumb-item--editable {
  border: none;
  outline: none;
  box-shadow: none;
  background-color: transparent;
}
.navigation-breadcumb-item.navigation-breadcumb-item--editable:hover, .navigation-breadcumb-item.navigation-breadcumb-item--editable:active {
  cursor: text;
  border: none;
  outline: none;
  box-shadow: none;
  background-color: var(--bg-grey-fa);
}
.navigation-breadcumb-item.navigation-breadcumb-item--editable:focus, .navigation-breadcumb-item.navigation-breadcumb-item--editable:focus-visible {
  border: none;
  outline: none;
  box-shadow: none;
  background-color: var(--bg-grey-fa);
}
.navigation-breadcumb-item.navigation-breadcumb-item--placeholder {
  cursor: default;
  color: var(--text-lightest);
}
.navigation-breadcumb-item.navigation-breadcumb-item--in-drawer {
  display: inline-flex;
  font-size: 14px;
  font-weight: 500;
  padding-bottom: 0;
}

.navigation-breadcumb-item-link, .navigation-breadcumb-item-link:focus, .navigation-breadcumb-item-link:visited {
  color: var(--text-default);
}
.navigation-breadcumb-item-link:hover {
  color: var(--text-default);
}

.navigation-breadcumb-separator {
  display: none;
  font-size: 16px;
  font-weight: 400;
  color: var(--border-content-alt);
}
@media (min-width: 1200px) {
  .navigation-breadcumb-separator {
    display: inline-flex;
  }
}
.navigation-breadcumb-separator.navigation-breadcumb-separator--in-drawer {
  display: inline-flex;
  font-size: 14px;
  font-weight: 400;
}

.navigation-breadcumb-dropdown {
  min-width: 0;
  user-select: none;
}

.navigation-breadcumb-dropdown-select.dropdown-menu {
  position: absolute;
  z-index: var(--z-popup-menu);
  max-height: 400px;
  overflow-y: auto;
}

.navigation-breadcumb-dropdown-select.dropdown-menu > li > a.navigation-breadcumb-dropdown-select-option,
.navigation-breadcumb-dropdown-select.dropdown-menu > li a.navigation-breadcumb-dropdown-select-option {
  overflow: visible;
  white-space: normal;
}

.navigation-breadcumb-dropdown-toggle-chevron {
  position: absolute;
  right: 2px;
  top: 55%;
  width: 10px;
  transform: translateY(-50%);
  transition: all var(--transition-fast) ease;
}
.navigation-breadcumb-dropdown-toggle-chevron.active {
  transform: translateY(-50%) rotate(180deg);
}
.navigation-breadcumb-dropdown-toggle-chevron path {
  fill: var(--text-muted);
}

.navigation-title-section {
  display: flex;
  align-items: center;
  padding-left: 20px;
  min-width: 0;
}

.navigation-title {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
}

.navigation-changes-saved {
  position: relative;
  display: flex;
  align-items: center;
  float: left;
  padding: 0 0 0 5px;
  height: var(--navigation-height);
  transition: visibility 0s, opacity var(--transition-fast) linear;
  opacity: 0;
  visibility: hidden;
}
.navigation-changes-saved.showing {
  opacity: 1;
  visibility: visible;
}

.navigation-changes-saved-in {
  display: flex;
  align-items: center;
  padding: 6px 14px 6px 7px;
  background: var(--bg-grey-f5);
  border-radius: 20px;
}

.navigation-changes-saved-icon {
  width: 20px;
  height: auto;
  margin-right: 5px;
}
.navigation-changes-saved-icon path,
.navigation-changes-saved-icon rect {
  stroke: var(--text-muted);
}

.navigation-changes-saved-text {
  position: relative;
  top: -1px;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-muted);
}

.navigation-start-trial {
  position: relative;
  display: none;
  float: right;
}
@media (min-width: 600px) {
  .navigation-start-trial {
    display: inline-block;
  }
}

.navigation-start-trial-btn.btn {
  padding: 6px 15px 6px 34px;
}

.navigation-upgrade-btn, .navigation-start-trial-btn {
  margin: 18px 15px;
  border-radius: 50px;
}

.navigation-start-trial-btn-icon {
  position: absolute;
  left: 12px;
  top: 6px;
}

.navigation-template-label {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 20px;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-grey-f1);
  padding: 0 7px;
  border-radius: 5px;
}
@media (min-width: 768px) {
  .navigation-template-label {
    display: flex;
  }
}

.top-navigation-link-tooltip {
  position: absolute;
  display: none;
  z-index: 5;
  top: 100%;
  left: 50%;
  margin-top: 3px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  white-space: nowrap;
  border-radius: 8px;
  background: var(--bg-content);
  box-shadow: 1px 3px 14px color-mix(in srgb, var(--black) 8%, transparent);
  border: 1px solid var(--border-content);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
}
.navigation-action-cta .top-navigation-link-tooltip {
  left: 0;
}
@media (min-width: 1200px) {
  .rnf-notification-icon-button:not(.rnf-notification-icon-button--open):hover .top-navigation-link-tooltip, .navigation-action-cta:not(.navigation-action-cta--showing-dropdown):hover .top-navigation-link-tooltip, .global-search-link:hover .top-navigation-link-tooltip, .timetracker-nav-item:not(.open):not(.showing-item):hover .top-navigation-link-tooltip, .btn:hover > .top-navigation-link-tooltip {
    display: block;
    opacity: 1;
    animation: 0.2s ease-in forwards 1 top-nav-tooltip-fade-up;
  }
}

.navigation-action-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  transition: all var(--transition-fast) ease;
}
@media (min-width: 768px) {
  .navigation-action-cta:hover {
    background: var(--bg-grey-fa);
  }
}
.navigation-action-cta.navigation-action-cta--showing-dropdown {
  background: var(--bg-grey-fa);
}

.navigation-action-cta-icon {
  width: 18px;
  height: auto;
  transition: all var(--transition-fast) ease;
}
.navigation-action-cta-icon path {
  fill: var(--text-muted);
}
@media (min-width: 768px) {
  .navigation-action-cta:hover .navigation-action-cta-icon path {
    fill: var(--text-default);
  }
}
.navigation-action-cta.showing-dropdown .navigation-action-cta-icon path {
  fill: var(--text-default);
}

.navigation-action-menu {
  position: absolute;
  left: auto;
  right: 0;
  top: 42px;
  margin: 0;
  width: 180px;
  background: var(--bg-content);
  padding: 10px 10px;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid var(--border-content);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--bg-shadow) 10%, transparent);
}

.navigation-action-menu-option {
  position: relative;
  display: block;
  padding: 7px 0 7px 36px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
}
.navigation-action-menu-option, .navigation-action-menu-option:focus, .navigation-action-menu-option:visited {
  color: var(--text-default);
}
.navigation-action-menu-option:hover, .navigation-action-menu-option:active {
  color: var(--text-default);
  background: var(--bg-grey-fc);
}

.navigation-tooltip-bottom {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  margin: 0;
  top: 22px !important;
  width: 230px !important;
}
.navigation-tooltip-bottom:before, .navigation-tooltip-bottom:after {
  display: none;
}

.global-search-navigation {
  position: relative;
}

.global-search-link {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 10px;
  cursor: pointer;
  border-radius: 6px;
  transition: all var(--transition-fast) ease;
}
@media (min-width: 768px) {
  .global-search-link:hover {
    background: var(--bg-grey-fa);
  }
}

.global-search-link-icon {
  width: auto;
  height: 18px;
  transition: all var(--transition-fast) ease;
}
.global-search-link-icon path {
  fill: var(--text-muted);
}
@media (min-width: 768px) {
  .global-search-link:hover .global-search-link-icon path {
    fill: var(--text-default);
  }
}

.global-search-wrapper {
  position: fixed;
  z-index: var(--z-search);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  animation: global-search-fade-in var(--transition-fast) 1 forwards;
}

.global-search-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--black) 80%, transparent);
}

.global-search-commands {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 15px;
  text-align: right;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-content);
}

.global-search-command-key {
  height: 25px;
  padding: 4px 7px;
  margin: 0 1px;
  font-weight: 500;
  background: var(--bg-grey-f5);
  border-radius: 4px;
}

.global-search {
  position: absolute;
  top: 60px;
  left: 20px;
  right: 20px;
  background: var(--bg-panel);
  border-radius: 8px;
  box-shadow: 0 10px 55px -10px color-mix(in srgb, var(--black) 20%, transparent);
}
@media (min-width: 768px) {
  .global-search {
    top: 15%;
    left: 50%;
    right: auto;
    margin-left: -300px;
    width: 600px;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .global-search {
    box-shadow: 0 0 0 1px var(--border-content);
  }
}
:root[data-theme=dark] .global-search {
  box-shadow: 0 0 0 1px var(--border-content);
}

.react-autosuggest__input.form-field.input-lg, .input-group-lg > .react-autosuggest__input.form-field.form-control,
.input-group-lg > .react-autosuggest__input.form-field.input-group-addon,
.input-group-lg > .input-group-btn > .react-autosuggest__input.form-field.btn {
  padding-left: 45px;
  color: var(--text-default);
  font-weight: 400;
  background: transparent;
  border: 1px solid transparent;
  appearance: none;
  box-shadow: none;
  transition: all var(--transition-fast) ease;
}
.react-autosuggest__input.form-field.input-lg:hover, .input-group-lg > .react-autosuggest__input.form-field.form-control:hover,
.input-group-lg > .react-autosuggest__input.form-field.input-group-addon:hover,
.input-group-lg > .input-group-btn > .react-autosuggest__input.form-field.btn:hover {
  border-color: transparent;
}
.react-autosuggest__input.form-field.input-lg:focus, .input-group-lg > .react-autosuggest__input.form-field.form-control:focus,
.input-group-lg > .react-autosuggest__input.form-field.input-group-addon:focus,
.input-group-lg > .input-group-btn > .react-autosuggest__input.form-field.btn:focus {
  border-color: transparent;
}
.react-autosuggest__input.form-field.input-lg::placeholder, .input-group-lg > .react-autosuggest__input.form-field.form-control::placeholder,
.input-group-lg > .react-autosuggest__input.form-field.input-group-addon::placeholder,
.input-group-lg > .input-group-btn > .react-autosuggest__input.form-field.btn::placeholder {
  color: var(--text-lighter) !important;
}

.navigation-search-label {
  position: absolute;
  left: 16px;
  top: 15px;
  cursor: pointer;
  transition: all var(--transition-normal) ease;
}

.navigation-search-icon {
  width: 19px;
  height: auto;
}
.navigation-search-icon path {
  fill: var(--color-primary);
}

.global-search-results-section {
  border-top: 1px solid var(--border-content);
}

.global-search-last-viewed-label {
  padding: 10px 22px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-lighter);
  cursor: default;
  user-select: none;
  background: var(--bg-panel);
}

.react-autosuggest__suggestions-container {
  width: 100%;
  max-height: 70vh;
  overflow: hidden;
  overflow-y: scroll;
  background: var(--bg-panel);
}
@media (min-height: 750px) {
  .react-autosuggest__suggestions-container {
    max-height: 65vh;
  }
}
@media (min-height: 900px) {
  .react-autosuggest__suggestions-container {
    max-height: 500px;
  }
}

.navigation-search-empty {
  padding: 20px 20px 18px;
  color: var(--text-lighter);
}

.react-autosuggest__suggestions-list {
  list-style: none;
  padding: 10px;
  margin: 0;
}

.react-autosuggest__suggestion {
  display: block;
  font-size: 18px;
  cursor: pointer;
  border-radius: 6px;
}
.react-autosuggest__suggestion.active-result {
  background: var(--bg-grey-fa);
}

.navigation-search-result {
  position: relative;
  padding: 8px 12px 10px;
  border-radius: 10px;
}

.navigation-search-result-link {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
}

.navigation-search-result-link-name {
  display: flex;
  justify-content: space-between;
  flex: 1;
  align-items: center;
  font-weight: 500;
}

.navigation-search-result-link-label {
  padding-top: 2px;
  padding-right: 10px;
  font-size: 12px;
  color: var(--color-primary);
}

.navigation-search-result-link-icon {
  position: relative;
  margin-left: 10px;
  width: 10px;
  height: auto;
}
.navigation-search-result-link-icon path {
  fill: var(--color-primary);
}

.navigation-search-result-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
}
.react-autosuggest__suggestion:hover .navigation-search-result-name {
  color: var(--text-default);
}

.navigation-search-result-name-label {
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navigation-search-result-client {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.navigation-search-result-client-unassigned {
  font-style: italic;
  color: var(--text-lighter);
}

.navigation-search-result-top {
  position: relative;
  margin-bottom: 5px;
}

.navigation-search-result-type {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
}
.react-autosuggest__suggestion:hover .navigation-search-result-type {
  color: color-mix(in srgb, var(--color-primary) 97%, var(--black));
}

.navigation-search-result-id {
  margin-left: 10px;
  font-weight: 500;
  color: var(--text-lighter);
}

.navigation-search-result-status {
  display: inline-block;
  float: right;
  font-size: 12px;
  color: var(--text-lighter);
  text-transform: capitalize;
}
.react-autosuggest__suggestion:hover .navigation-search-result-status {
  color: var(--text-lighter);
}

.navigation-search-result-icon {
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: auto;
}

.navigation-search-result-details {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: capitalize;
}

.navigation-search-result-amount {
  display: inline-block;
  float: right;
}

.navigation-project-link-copy {
  padding-left: 3px;
}

.navigation-project-icon-mobile {
  position: relative;
  display: inline-block;
  top: -2px;
  width: 15px;
  height: auto;
  vertical-align: middle;
  transition: all var(--transition-normal) ease;
}

.navigation-automation-document-icon {
  position: relative;
  top: -1.5px;
  width: auto;
  height: 15px;
  margin-right: 2px;
  vertical-align: middle;
  transition: all var(--transition-normal) ease;
}

.preview-document-navigation-item-icon {
  position: relative;
  top: -1px;
  width: 11px;
  height: auto;
  margin-right: 4px;
  vertical-align: middle;
  transition: all var(--transition-normal) ease;
}
.preview-document-navigation-item-icon path,
.preview-document-navigation-item-icon g,
.preview-document-navigation-item-icon rect {
  fill: var(--color-primary);
}
.navigation-item:hover .preview-document-navigation-item-icon path,
.navigation-item:hover .preview-document-navigation-item-icon g,
.navigation-item:hover .preview-document-navigation-item-icon rect {
  fill: var(--color-primary);
}

.preview-agreement-navigation-item-icon {
  position: relative;
  margin-right: 2px;
  vertical-align: middle;
  transition: all var(--transition-normal) ease;
}
.preview-agreement-navigation-item-icon svg {
  height: 16px;
}
.preview-agreement-navigation-item-icon path,
.preview-agreement-navigation-item-icon g,
.preview-agreement-navigation-item-icon rect {
  stroke: var(--color-primary);
  stroke-width: 2;
}
.navigation-item:hover .preview-agreement-navigation-item-icon path,
.navigation-item:hover .preview-agreement-navigation-item-icon g,
.navigation-item:hover .preview-agreement-navigation-item-icon rect {
  stroke: var(--color-primary);
  stroke-width: 2;
}

.second-navigation {
  position: fixed;
  z-index: var(--z-navigation);
  top: 0;
  left: 0;
  width: 100%;
  min-height: 62px;
  background-color: var(--bg-content);
  box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 20%, transparent);
  transition: all var(--transition-slow) ease;
  transform: translateY(-100%);
}
.second-navigation.active {
  transform: translateY(0%);
}
@media print {
  .second-navigation {
    display: none;
  }
}

.search-loading-icon-bg {
  position: absolute;
  z-index: 2;
  top: 0px;
  left: 5px;
  width: 40px;
  height: 50px;
  background: var(--bg-panel);
  border-radius: 10px 0 0 0;
}

.search-loading-icon {
  position: absolute;
  top: 18px;
  left: 11px;
  width: 18px;
  height: auto;
  animation: container-rotate 2s linear infinite;
  opacity: 0.5;
}
.search-loading-icon path {
  fill: var(--text-default);
}

.global-search-filter {
  position: absolute;
  right: 0;
  top: 0;
}

.global-search-filter-toggle {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 5px;
  top: 5px;
  cursor: pointer;
  width: 40px;
  height: 40px;
}

.global-search-filter-icon {
  width: 20px;
  height: auto;
}
.global-search-filter-toggle:hover .global-search-filter-icon path, .global-search-filter.open .global-search-filter-icon path {
  fill: var(--text-default);
}

.global-search-filter-dropdown.dropdown-menu {
  top: 40px !important;
  margin-left: 5px;
}

.global-search-filter-label {
  position: absolute;
  right: 45px;
  top: 13px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: default;
  user-select: none;
  background: var(--bg-grey-f5);
  padding: 3px 13px 4px;
  border-radius: 4px;
}

.navigation-icon-link {
  display: none;
  float: right;
  padding-left: 10px;
  padding-right: 10px;
}
@media (min-width: 768px) {
  .navigation-icon-link {
    display: inline-flex;
    align-items: center;
  }
}

.navigation-user-menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: var(--border-radius-medium);
  cursor: pointer;
}
.navigation-user-menu-trigger:hover {
  background: var(--bg-hover-subtle);
}

.navigation-user-menu-person {
  flex: 1;
  min-width: 0;
}

.navigation-user-menu-person-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
}

.navigation-user-menu-person-email {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.navigation-user-menu-shortcut-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: default;
  border-radius: var(--border-radius-medium);
}
.navigation-user-menu-shortcut-item:hover {
  background: var(--bg-hover-subtle);
}

.navigation-user-menu-appearance-header {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-default);
}

.navigation-user-menu-back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--border-radius-medium);
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}
.navigation-user-menu-back-button:hover {
  background: var(--bg-hover-subtle);
}

.navigation-user-menu-back-icon {
  width: 12px;
  height: auto;
}
.navigation-user-menu-back-icon path {
  fill: var(--text-muted);
}

.navigation-user-menu-theme-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  border-radius: var(--border-radius-medium);
}
.navigation-user-menu-theme-option:hover, .navigation-user-menu-theme-option:active {
  color: var(--text-default);
  background: var(--bg-hover-subtle);
}
.navigation-user-menu-theme-option.active {
  color: var(--text-default);
  pointer-events: none;
  background: var(--bg-grey-f8);
}

.navigation-user-menu-theme-preview {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border-semi-transparent);
}

.navigation-user-menu-theme-preview-inner {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  border-radius: 0 30px 30px 0;
}

.sidebar-container {
  position: fixed;
  z-index: var(--z-sidebar);
  height: 100%;
  top: 0;
  left: 0;
  width: var(--sidebar-width-collapsed);
}
.sidebar-container::-webkit-scrollbar {
  display: none;
}
@media print {
  .sidebar-container {
    display: none;
  }
}

.sidebar {
  position: absolute;
  z-index: calc(var(--z-navigation) + 10);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--sidebar-primary-bg);
  border-right: 1px solid var(--sidebar-primary-border);
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sidebar.sidebar-type-mobile {
  display: none;
  opacity: 0;
  transition: opacity var(--transition-normal) ease;
}
.sidebar.sidebar-type-mobile.sidebar-type-mobile-showing {
  display: block;
  opacity: 1;
}

.sidebar-mobile-backdrop {
  position: fixed;
  z-index: calc(var(--z-navigation) + 8);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .sidebar-mobile-backdrop {
    background: rgba(255, 255, 255, 0.85);
  }
}
:root[data-theme=dark] .sidebar-mobile-backdrop {
  background: rgba(0, 0, 0, 0.85);
}

.sidebar-mobile-link {
  position: fixed;
  z-index: calc(var(--z-navigation) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 0;
  width: 60px;
  height: var(--navigation-height);
  padding-bottom: 1px;
  text-align: center;
  cursor: pointer;
}
@media print {
  .sidebar-mobile-link {
    display: none;
  }
}

.sidebar-mobile-link-icon {
  width: 15px;
  height: auto;
}

.sidebar-top-section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  height: var(--navigation-height);
}

.sidebar-brand {
  position: relative;
  display: inline-flex;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  user-select: none;
  opacity: 1;
  border-radius: 6px;
  transition: opacity 0s ease, transform var(--transition-fast) ease;
}
.sidebar-brand:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.sidebar-brand-logo {
  width: 24px;
  height: auto;
}
.sidebar-brand-logo path {
  fill: var(--sidebar-logo-color);
}

.sidebar-navigation-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  overflow-y: scroll;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sidebar-navigation-container::-webkit-scrollbar {
  display: none;
}

.sidebar-navigation {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.sidebar-navigation-collapse-toggle {
  position: absolute;
  display: none;
  right: 20px;
  top: 28px;
  cursor: pointer;
  opacity: 0;
  transition: all var(--transition-fast) ease;
}

.sidebar-navigation-groups {
  flex: 1;
}

.sidebar-navigation-group-item {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 46px;
  width: 100%;
  margin-bottom: 5px;
  padding: 10px 10px;
  font-size: 14px;
  font-weight: 500;
  user-select: none;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}

.sidebar-navigation-group-icon {
  position: relative;
  z-index: 2;
  left: 10px;
  width: 20px;
  height: auto;
  overflow: visible;
  opacity: 0.75;
}
.sidebar-navigation-group-icon path {
  fill: var(--sidebar-primary-icon-color);
}
.sidebar-navigation-group-item:hover .sidebar-navigation-group-icon {
  opacity: 1;
}
.sidebar-navigation-group-item--showing .sidebar-navigation-group-icon {
  opacity: 1;
}
.sidebar-navigation-group-item.subitem-selected .sidebar-navigation-group-icon {
  opacity: 1;
}
.sidebar-navigation-group-item.subitem-selected .sidebar-navigation-group-icon path {
  fill: var(--sidebar-primary-icon-selected-color);
}
.sidebar-navigation-group-icon.financial {
  left: 9px;
}
.sidebar-navigation-group-icon.reports {
  left: 10px;
  top: -0.5px;
}
.sidebar-navigation-group-icon.automations {
  left: 9.5px;
}

.sidebar-navigation-group-label {
  position: absolute;
  display: none;
  z-index: 5;
  left: 100%;
  margin-left: -5px;
  margin-top: -1px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  white-space: nowrap;
  border-radius: 8px;
  background: var(--bg-content);
  box-shadow: 1px 3px 14px color-mix(in srgb, var(--black) 8%, transparent);
  border: 1px solid var(--border-content);
  pointer-events: none;
  opacity: 0;
}
@media (min-width: 1200px) {
  .sidebar-navigation-group-item:hover .sidebar-navigation-group-label, .sidebar-brand:hover + .sidebar-navigation-group-label {
    display: block;
    opacity: 1;
    animation: sidebar-tooltip-fade-right var(--transition-fast) 1 forwards;
  }
}

.sidebar-navigation-group-bg {
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  bottom: 0;
  opacity: 0;
  border-radius: 6px;
  border: 1px solid transparent;
  background-color: var(--sidebar-primary-icon-bg);
  border-color: transparent;
}
.sidebar-navigation-group-item:hover .sidebar-navigation-group-bg, .sidebar-navigation-group-item:active .sidebar-navigation-group-bg {
  opacity: 1;
}
.sidebar-navigation-group-item.sidebar-navigation-group-item--showing .sidebar-navigation-group-bg {
  opacity: 1;
}
.sidebar-navigation-group-item.subitem-selected .sidebar-navigation-group-bg {
  opacity: 1;
  background-color: var(--sidebar-primary-icon-selected-bg);
  border-color: var(--sidebar-primary-icon-selected-border);
}

.sidebar-navigation-item-features {
  display: block;
  position: absolute;
  z-index: calc(var(--z-navigation) + 9);
  top: 0;
  left: 100%;
  height: 100%;
  overflow-y: scroll;
  background-color: var(--sidebar-secondary-bg);
  border-right: 1px solid var(--sidebar-secondary-border);
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
  scrollbar-width: none;
  transform: translateX(-100%);
  transition: transform var(--transition-fast) ease;
}
.sidebar-navigation-item-features::-webkit-scrollbar {
  display: none;
}
.sidebar-navigation-item-features.showing {
  display: block;
}
.sidebar-navigation-item-features.showing-animated {
  display: block;
  transform: translateX(0);
}
.sidebar-navigation-item-features.page-preload {
  transition: none;
}
.sidebar-navigation-item-features.sidebar-type-mobile {
  display: none;
  transition: none;
  transform: translateX(0);
}
.sidebar-navigation-item-features.sidebar-type-mobile.sidebar-type-mobile-showing {
  display: block;
  animation: sidebar-tooltip-fade-right var(--transition-fast) 1;
}
.sidebar-navigation-item-features.sidebar-type-hover {
  display: block;
  transition: none;
  transform: translateX(0);
}

.sidebar-navigation-features-collapse {
  position: absolute;
  display: none;
  align-items: center;
  right: 10px;
  top: 16px;
  padding: 8px 6px;
  cursor: pointer;
  border-radius: 4px;
}
.sidebar-navigation-features-collapse:hover {
  background: color-mix(in srgb, var(--black) 5%, transparent);
}
.sidebar-container:hover .sidebar-navigation-features-collapse {
  display: inline-flex;
}

.sidebar-navigation-features-collapse-icon {
  width: 16px;
  height: auto;
}
.sidebar-navigation-features-collapse-icon path {
  fill: var(--sidebar-secondary-collapse-color);
}

.sidebar-navigation-item-features-content {
  width: calc(var(--sidebar-width) - var(--sidebar-width-collapsed));
  padding: 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-default);
}

.sidebar-navigation-item-features-header {
  margin-bottom: 21px;
  padding-left: 12px;
  padding-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sidebar-secondary-title-color);
  cursor: default;
}

.sidebar-navigation-item-features-item {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 40px;
  min-width: 152px;
  margin-bottom: 5px;
  padding: 12px 10px 12px 40px;
  font-size: 14px;
  font-weight: 500;
  user-select: none;
  cursor: pointer;
  opacity: 0.75;
  transition: all var(--transition-fast) ease;
  border-radius: 6px;
}
.sidebar-navigation-item-features-item:focus {
  text-decoration: none;
}
.sidebar-navigation-item-features-item:hover, .sidebar-navigation-item-features-item:active {
  opacity: 1;
}
.sidebar-navigation-item-features-item.active {
  opacity: 1;
}
.sidebar-navigation-item-features-item.without-icon {
  padding-left: 10px;
}

.sidebar-navigation-features-item-label {
  position: relative;
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
  color: var(--sidebar-secondary-text-color);
  text-decoration: none;
}

.sidebar-navigation-features-item-bg {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  border-radius: 6px;
  opacity: 0;
  background: var(--sidebar-secondary-item-hover-bg);
}
.sidebar-navigation-item-features-item:focus .sidebar-navigation-features-item-bg {
  opacity: 1;
}
.sidebar-navigation-item-features-item:hover .sidebar-navigation-features-item-bg {
  opacity: 1;
}
.sidebar-navigation-item-features-item.active .sidebar-navigation-features-item-bg {
  background-color: var(--sidebar-secondary-item-selected-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--black) 2%, transparent);
  opacity: 1;
}

.sidebar-navigation-features-item-icon {
  position: absolute;
  z-index: 2;
  height: auto;
  background-color: transparent;
  pointer-events: none;
}
.sidebar-navigation-features-item-icon path {
  fill: var(--sidebar-secondary-text-color);
}
.sidebar-navigation-features-item-icon.clients {
  top: 14px;
  left: 14px;
  width: 16px;
}
.sidebar-navigation-features-item-icon.contacts {
  top: 12.25px;
  left: 14px;
  width: 16px;
}
.sidebar-navigation-features-item-icon.deals {
  top: 14px;
  left: 15.5px;
  width: 14px;
}
.sidebar-navigation-features-item-icon.estimates {
  top: 13px;
  left: 15.5px;
  width: 14px;
}
.sidebar-navigation-features-item-icon.projects {
  top: 14px;
  left: 14px;
  width: 16px;
}
.sidebar-navigation-features-item-icon.proposals {
  top: 13.5px;
  left: 14px;
  width: 14px;
}
.sidebar-navigation-features-item-icon.agreements {
  top: 12.5px;
  left: 14px;
  width: 14px;
}
.sidebar-navigation-features-item-icon.invoices {
  top: 11px;
  left: 14px;
  width: 16px;
}
.sidebar-navigation-features-item-icon.timetracking {
  top: 12px;
  left: 14px;
  width: 16px;
}
.sidebar-navigation-features-item-icon.timesheets {
  top: 12.5px;
  left: 15px;
  width: 16px;
}
.sidebar-navigation-features-item-icon.taxes {
  top: 11.5px;
  left: 15px;
  width: 14px;
}
.sidebar-navigation-features-item-icon.accounting {
  top: 12.5px;
  left: 14px;
  width: 16px;
}
.sidebar-navigation-features-item-icon.tasks {
  top: 12.5px;
  left: 14px;
  width: 15px;
}
.sidebar-navigation-features-item-icon.resourcing {
  top: 12.5px;
  left: 15px;
  width: 14px;
}
.sidebar-navigation-features-item-icon.cash {
  top: 12px;
  left: 14px;
  width: 16px;
}
.sidebar-navigation-features-item-icon.payments {
  top: 11.5px;
  left: 14.5px;
  width: 15px;
}
.sidebar-navigation-features-item-icon.forms {
  top: 13px;
  left: 15px;
  width: 14px;
}
.sidebar-navigation-features-item-icon.services {
  top: 13.5px;
  left: 14.5px;
  width: 15px;
}
.sidebar-navigation-features-item-icon.scheduling-icon {
  top: 12px;
  left: 15px;
  width: 14px;
}
.sidebar-navigation-features-item-icon.client-portal {
  top: 13px;
  left: 14px;
  width: 16px;
}
.sidebar-navigation-features-item-icon.expenses {
  top: 12px;
  left: 15.5px;
  width: 13px;
}
.sidebar-navigation-features-item-icon.incomes {
  top: 14px;
  left: 14.5px;
  width: 15.5px;
}
.sidebar-navigation-features-item-icon.rate-cards {
  top: 13px;
  left: 14.5px;
  width: 15px;
}
.sidebar-navigation-features-item-icon.suppliers {
  top: 13px;
  left: 14.5px;
  width: 15px;
}

.sidebar-navigation-overdue-notice {
  position: absolute;
  display: inline-block;
  z-index: 2;
  top: 12px;
  left: 25px;
  width: 7px;
  height: 7px;
  background: var(--color-danger);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--sidebar-secondary-item-hover-bg);
  animation: scale-up var(--transition-slow) 1 forwards;
}
.sidebar-navigation-item-features-item.active .sidebar-navigation-overdue-notice {
  box-shadow: 0 0 0 2px var(--sidebar-secondary-item-selected-bg);
}

.sidebar-navigation-user-links {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 0 20px;
}

.avatar-img.sidebar-navigation-user-avatar {
  cursor: pointer;
  margin-top: 10px;
  background-size: contain;
  box-shadow: 0 1px 5px color-mix(in srgb, var(--black) 5%, transparent), 0 0 0 3px rgba(255, 255, 255, 0);
  transition: all var(--transition-fast) ease;
}
.avatar-img.sidebar-navigation-user-avatar:hover, .avatar-img.sidebar-navigation-user-avatar:active {
  box-shadow: 0 1px 5px color-mix(in srgb, var(--black) 5%, transparent), 0 0 0 3px rgba(255, 255, 255, 0.15);
}
.avatar-img.sidebar-navigation-user-avatar.active {
  box-shadow: 0 1px 5px color-mix(in srgb, var(--black) 5%, transparent), 0 0 0 3px rgba(255, 255, 255, 0.15);
}

.sidebar-navigation-user-menu {
  position: absolute;
  left: 100%;
  margin-left: -5px;
  bottom: 34px;
  width: 250px;
  user-select: none;
  background: var(--bg-content);
  border-radius: 6px;
  border: 1px solid var(--border-content);
  box-shadow: 0 3px 18px color-mix(in srgb, var(--black) 5%, transparent);
}

.sidebar-navigation-user-info {
  position: relative;
  padding: 10px;
  border-bottom: 1px solid var(--border-content);
}

.sidebar-navigation-user-info-link {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  padding: 10px;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  border-radius: 6px;
}
.sidebar-navigation-user-info-link:hover {
  background: var(--bg-grey-fc);
}

.avatar-img.sidebar-navigation-user-menu-avatar {
  flex-shrink: 0;
  background-size: contain;
}

.sidebar-navigation-user-info-details {
  flex: 1;
  padding-left: 15px;
  min-width: 0;
}
.sidebar-navigation-user-info-details.with-multiple-companies {
  padding-right: 22px;
}

.sidebar-navigation-user-menu-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.sidebar-navigation-user-menu-company {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
}

.sidebar-navigation-user-info-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -3px;
  width: 12px;
  height: auto;
  opacity: 0.5;
  transition: all var(--transition-fast) ease;
}
.sidebar-navigation-user-info-link:hover .sidebar-navigation-user-info-arrow {
  opacity: 1;
}
.sidebar-navigation-user-info-link.showing .sidebar-navigation-user-info-arrow {
  opacity: 1;
  transform: rotate(180deg);
}

.sidebar-navigation-user-menu-companies {
  position: absolute;
  z-index: 10;
  top: 80px;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10px;
  overflow: auto;
  background: var(--bg-content);
  border-radius: 0 0 6px 6px;
}

.sidebar-navigation-user-menu-companies-label {
  padding: 0 10px 10px;
  font-size: 14px;
  font-weight: 600;
}

.sidebar-navigation-user-menu-company-link {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 2px;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-default);
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  border-radius: 6px;
}
.sidebar-navigation-user-menu-company-link:hover, .sidebar-navigation-user-menu-company-link:active {
  color: var(--color-primary);
  background: var(--bg-grey-fc);
}
.sidebar-navigation-user-menu-company-link.active {
  color: var(--color-primary);
  pointer-events: none;
  background: var(--bg-grey-f8);
}

.sidebar-navigation-user-menu-company-active {
  position: absolute;
  right: 12px;
  width: 14px;
}
.sidebar-navigation-user-menu-company-active path {
  stroke: var(--color-primary);
}

.sidebar-navigation-user-menu-themes {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20px 10px 10px;
  overflow: auto;
  background: var(--bg-content);
  border-radius: 6px;
}

.sidebar-navigation-user-menu-themes-label {
  padding: 0 10px 10px;
  font-size: 14px;
  font-weight: 600;
}

.sidebar-navigation-user-menu-themes-close {
  padding: 0 10px 10px;
  font-size: 14px;
  font-weight: 600;
}

.sidebar-navigation-user-menu-theme {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  padding: 10px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  border-radius: 6px;
}
.sidebar-navigation-user-menu-theme:hover, .sidebar-navigation-user-menu-theme:active {
  color: var(--text-default);
  background: var(--bg-grey-fc);
}
.sidebar-navigation-user-menu-theme.active {
  color: var(--text-default);
  pointer-events: none;
  background: var(--bg-grey-f8);
}

.sidebar-navigation-user-menu-theme-bg {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 40px;
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}

.sidebar-navigation-user-menu-theme-bg2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  border-radius: 0 40px 40px 0;
}

.sidebar-navigation-user-menu-links {
  padding: 10px;
  border-bottom: 1px solid var(--border-content);
}
.sidebar-navigation-user-menu-links:last-child {
  border-bottom: 0;
}

.sidebar-navigation-user-menu-link {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  transition: all var(--transition-fast) ease;
  border-radius: 6px;
}
.sidebar-navigation-user-menu-link, .sidebar-navigation-user-menu-link:focus, .sidebar-navigation-user-menu-link:visited {
  color: var(--text-default);
}
.sidebar-navigation-user-menu-link:hover, .sidebar-navigation-user-menu-link:active {
  color: var(--text-default);
  background: var(--bg-grey-fc);
}

:root {
  --sidenav-padding: 16px;
  --sidenav-padding-medium: 12px;
  --sidenav-padding-small: 8px;
}

.sidenav-container {
  position: fixed;
  z-index: var(--z-sidebar);
  height: 100%;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
}
.sidenav-container.sidenav-container--collapsed {
  --sidenav-padding: 12px;
  width: var(--sidebar-width-collapsed);
}
.sidenav-container.sidenav-container--mobile {
  --sidebar-width: 100%;
}
.sidenav-container::-webkit-scrollbar {
  display: none;
}
@media print {
  .sidenav-container {
    display: none;
  }
}

.sidenav {
  position: absolute;
  z-index: calc(var(--z-navigation) + 10);
  display: flex;
  flex-direction: column;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--sidebar-primary-bg);
  border-right: 1px solid var(--sidebar-primary-border);
  overflow: auto;
}
.sidenav.sidenav-type-mobile {
  display: none;
  opacity: 0;
  transition: opacity var(--transition-normal) ease;
}
.sidenav.sidenav-type-mobile.sidenav-type-mobile-showing {
  display: block;
  opacity: 1;
}

.sidenav-collapse-toggle {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
}
.sidenav-collapse-toggle:hover {
  background: var(--sidenav-item-hover-bg);
}
.sidenav-container--collapsed .sidenav-collapse-toggle {
  display: none;
  justify-content: center;
  width: 42px;
}
.sidenav-container--collapsed:hover .sidenav-collapse-toggle {
  display: flex;
}
.sidenav-container--mobile .sidenav-collapse-toggle {
  display: none;
}

.sidenav-collapse-toggle-arrow {
  width: 14px;
  height: auto;
  opacity: 0;
  transition: all var(--transition-fast) ease;
}
.sidenav-container:hover .sidenav-collapse-toggle-arrow {
  opacity: 0.75;
}
.sidenav-container--collapsed .sidenav-collapse-toggle-arrow {
  opacity: 0.75;
}
.sidenav-collapse-toggle:hover .sidenav-collapse-toggle-arrow {
  opacity: 1;
}
.sidenav-collapse-toggle-arrow path {
  fill: var(--sidenav-text-color);
}

.sidenav-company-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 8.5px var(--sidenav-padding-small);
}
.sidenav-container--collapsed .sidenav-company-section {
  justify-content: center;
}

.sidenav-company-menu {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 42px;
}

.sidenav-company-menu-details {
  overflow: hidden;
}
.sidenav-container--collapsed .sidenav-company-menu-details {
  display: none;
}

.sidenav-company-switcher-collapse-toggle {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
}
.sidenav-company-switcher-collapse-toggle:hover {
  background: var(--sidenav-item-hover-bg);
}

.sidenav-company-menu-link {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: var(--sidenav-padding-small);
  border-radius: var(--border-radius-medium);
  cursor: pointer;
}
.sidenav-company-menu-link:hover {
  background: var(--sidenav-item-hover-bg);
}
.sidenav-company-menu-link.showing {
  background: var(--sidenav-item-hover-bg);
}
.sidenav-container--collapsed:hover .sidenav-company-menu-link {
  display: none;
}

.sidenav-navigation-company-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--sidenav-text-color);
  user-select: none;
}

.sidenav-company-menu-arrow {
  width: 8px;
  height: auto;
  opacity: 0.3;
  transition: all var(--transition-fast) ease;
}
.sidenav-company-menu-link:hover .sidenav-company-menu-arrow {
  opacity: 0.5;
}
.sidenav-company-menu-link.showing .sidenav-company-menu-arrow {
  opacity: 0.5;
  transform: rotate(180deg);
}
.sidenav-container--collapsed .sidenav-company-menu-arrow {
  display: none;
}
.sidenav-company-menu-arrow path {
  fill: var(--sidenav-text-color);
}

.sidenav-company-menu-close-button {
  display: flex;
  align-items: center;
  padding: 8px 12px;
}

.sidenav-company-menu-close-button-icon {
  width: 12px;
  height: auto;
}
.sidenav-company-menu-close-button-icon path {
  fill: var(--sidenav-text-color);
}

.sidenav-settings-back-link {
  display: flex;
  flex: 1;
  gap: 10px;
  align-items: center;
  padding: var(--sidenav-padding-small) var(--sidenav-padding-medium);
  margin: 0 var(--sidenav-padding-small);
  border-radius: var(--border-radius-medium);
  cursor: pointer;
  text-decoration: none;
  min-width: 0;
}
.sidenav-settings-back-link:hover {
  background: var(--sidenav-item-hover-bg);
}

.sidenav-settings-back-arrow {
  width: 12px;
  height: auto;
  flex-shrink: 0;
}
.sidenav-settings-back-arrow path {
  fill: var(--sidenav-text-color);
}

.sidenav-settings-back-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--sidenav-text-color);
  user-select: none;
}

.sidenav-company-popover {
  width: calc(var(--sidenav-width) - var(--sidenav-padding-small) * 2);
}

.sidenav-company-current-workspace {
  display: flex;
  flex-direction: column;
}

.sidenav-company-workspace-item {
  display: flex;
  gap: 10px;
  align-items: center;
}
.sidenav-company-workspace-item:hover {
  background: var(--bg-grey-fc);
}
.sidenav-company-workspace-item.active {
  pointer-events: none;
  background: var(--bg-grey-f8);
}
.sidenav-company-workspace-item.only-current-company, .sidenav-company-workspace-item.only-current-company:hover, .sidenav-company-workspace-item.only-current-company.active {
  pointer-events: none;
  background: none;
}

.sidenav-navigation-user-menu-company {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  user-select: none;
}

.sidenav-company-workspace-item-members-count {
  margin-top: -1px;
  font-size: 12px;
  color: var(--text-muted);
}

.sidenav-company-workspace-item-checkmark {
  flex-shrink: 0;
  margin-left: 4px;
  margin-right: 4px;
  width: 12px;
  height: auto;
}

.sidenav-top-section {
  position: sticky;
  z-index: 2;
  top: 0;
  background: var(--sidebar-primary-bg);
}
.sidenav-top-section.sidenav-top-section--stuck {
  box-shadow: 0 1px 0 var(--border-semi-transparent);
}

.sidenav-top-section-search {
  padding: 0 var(--sidenav-padding);
}

.sidenav-top-section-search-input.form-field {
  font-weight: 500;
  color: color-mix(in srgb, var(--sidenav-text-color) 75%, transparent);
  background: var(--sidebar-primary-bg);
  border: 1px solid color-mix(in srgb, var(--sidebar-primary-border) 50%, transparent);
}
.sidenav-top-section-search-input.form-field:hover {
  color: var(--sidenav-text-color);
  border-color: var(--sidebar-primary-border);
}
.sidenav-container--collapsed .sidenav-top-section-search-input.form-field {
  padding-left: 0;
  padding-right: 0;
}

.sidenav-top-section-search-command-key {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--sidenav-text-color) 75%, transparent);
  background: var(--sidebar-primary-icon-selected-bg);
  padding: 1px 5px;
  border-radius: 4px;
}

.sidenav-top-section-links {
  padding: var(--sidenav-padding);
}
.sidenav-container--collapsed .sidenav-top-section-links {
  padding-top: 0;
}

.sidenav-link-section {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 0 var(--sidenav-padding);
}

.sidenav-link-section-header {
  position: relative;
  margin-bottom: var(--sidenav-padding-small);
  padding-left: 10px;
  padding-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sidenav-text-color);
  cursor: default;
  opacity: 0.5;
}
.sidenav-container--collapsed .sidenav-link-section-header::after {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 2px;
  content: "";
  display: block;
  height: 1px;
  background: var(--sidebar-primary-border);
}

.sidenav-container--collapsed .sidenav-link-section-header-label {
  display: none;
}

.sidenav-container--collapsed .sidenav-link-section-header-label {
  display: none;
}

.sidenav-features-item {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 32px;
  margin-bottom: 0;
  padding: var(--sidenav-padding-small) 10px var(--sidenav-padding-small) 32px;
  font-size: 14px;
  font-weight: 500;
  user-select: none;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  border-radius: var(--border-radius-medium);
}
.sidenav-features-item, .sidenav-features-item:focus, .sidenav-features-item:visited {
  color: var(--sidenav-text-color);
  text-decoration: none;
}
.sidenav-features-item:hover, .sidenav-features-item:active {
  color: var(--sidenav-text-color);
  text-decoration: none;
}
.sidenav-features-item.without-icon {
  padding-left: 10px;
}
.sidenav-container--collapsed .sidenav-features-item {
  padding-right: 0;
}

.sidenav-features-item-label {
  position: relative;
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
  text-decoration: none;
  opacity: 0.75;
}
.sidenav-features-item.active .sidenav-features-item-label {
  opacity: 1;
}
.sidenav-container--collapsed .sidenav-features-item-label {
  display: none;
}
.sidenav-container--collapsed .sidenav-features-item-label {
  display: none;
}

.sidenav-features-item-bg {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  border-radius: var(--border-radius-medium);
  opacity: 0;
  background: var(--sidenav-item-hover-bg);
}
.sidenav-features-item:focus .sidenav-features-item-bg {
  opacity: 1;
}
.sidenav-features-item:hover .sidenav-features-item-bg, .sidenav-favorite-link-wrapper:hover .sidenav-features-item-bg {
  opacity: 1;
}
.sidenav-features-item:active .sidenav-features-item-bg {
  background: var(--sidenav-item-selected-bg);
  opacity: 0.75;
}
.sidenav-features-item.open .sidenav-features-item-bg {
  background-color: var(--sidenav-item-selected-bg);
  opacity: 0.5;
}
.sidenav-features-item.active .sidenav-features-item-bg {
  background-color: var(--sidenav-item-selected-bg);
  opacity: 1;
}

.sidenav-features-item-icon {
  position: absolute;
  z-index: 2;
  height: auto;
  background-color: transparent;
  pointer-events: none;
  opacity: 0.75;
}
.sidenav-features-item-icon path {
  fill: currentColor;
}
.sidenav-features-item.active .sidenav-features-item-icon {
  opacity: 1;
}
.sidenav-features-item-icon.automation {
  top: 9.5px;
  left: 12px;
  width: 12px;
}
.sidenav-features-item-icon.home {
  top: 9.5px;
  left: 12px;
  width: 13px;
}
.sidenav-features-item-icon.notifications {
  top: 10px;
  left: 11px;
  width: 15px;
}
.sidenav-features-item-icon.clients {
  top: 10px;
  left: 10.5px;
  width: 16px;
}
.sidenav-features-item-icon.company {
  top: 10px;
  left: 12.5px;
  width: 12px;
}
.sidenav-features-item-icon.contacts {
  top: 9px;
  left: 10.5px;
  width: 15px;
}
.sidenav-features-item-icon.contact {
  top: 10.5px;
  left: 12px;
  width: 12px;
}
.sidenav-features-item-icon.deals {
  top: 11px;
  left: 12.5px;
  width: 12px;
}
.sidenav-features-item-icon.estimates {
  top: 9px;
  left: 11px;
  width: 13px;
}
.sidenav-features-item-icon.projects {
  top: 10px;
  left: 11px;
  width: 14px;
}
.sidenav-features-item-icon.proposals {
  top: 9.5px;
  left: 11.5px;
  width: 13px;
}
.sidenav-features-item-icon.agreements {
  top: 8.5px;
  left: 11.5px;
  width: 13px;
}
.sidenav-features-item-icon.invoices {
  top: 8px;
  left: 11px;
  width: 14px;
}
.sidenav-features-item-icon.search {
  top: 9.5px;
  left: 11.5px;
  width: 12px;
}
.sidenav-features-item-icon.support {
  top: 9px;
  left: 11.5px;
  width: 14px;
}
.sidenav-features-item-icon.timetracking {
  top: 8.5px;
  left: 11.5px;
  width: 14px;
}
.sidenav-features-item-icon.timesheets {
  top: 8.5px;
  left: 11.5px;
  width: 15px;
}
.sidenav-features-item-icon.taxes {
  top: 8.5px;
  left: 12px;
  width: 12px;
}
.sidenav-features-item-icon.accounting {
  top: 9px;
  left: 11px;
  width: 14px;
}
.sidenav-features-item-icon.tasks {
  top: 9px;
  left: 11px;
  width: 14px;
}
.sidenav-features-item-icon.resourcing {
  top: 9px;
  left: 12px;
  width: 13px;
}
.sidenav-features-item-icon.cash {
  top: 8px;
  left: 11px;
  width: 15px;
}
.sidenav-features-item-icon.payments {
  top: 8.5px;
  left: 11.5px;
  width: 13px;
}
.sidenav-features-item-icon.forms {
  top: 9.5px;
  left: 12px;
  width: 13px;
}
.sidenav-features-item-icon.services {
  top: 9.5px;
  left: 11.5px;
  width: 14px;
}
.sidenav-features-item-icon.scheduling-icon {
  top: 8.5px;
  left: 12px;
  width: 13px;
}
.sidenav-features-item-icon.client-portal {
  top: 9px;
  left: 10.5px;
  width: 15px;
}
.sidenav-features-item-icon.expenses {
  top: 9px;
  left: 12.5px;
  width: 11px;
}
.sidenav-features-item-icon.incomes {
  top: 11px;
  left: 11.5px;
  width: 13px;
}
.sidenav-features-item-icon.rate-cards {
  top: 10px;
  left: 11.5px;
  width: 12px;
}
.sidenav-features-item-icon.reports {
  top: 9px;
  left: 11.5px;
  width: 14px;
}
.sidenav-features-item-icon.suppliers {
  top: 10.5px;
  left: 12px;
  width: 12px;
}
.sidenav-features-item-icon.purchase-orders {
  top: 9.5px;
  left: 11.5px;
  width: 13px;
}
.sidenav-features-item-icon.more {
  top: 9px;
  left: 11.5px;
  width: 14px;
}

.sidenav-navigation-overdue-notice {
  position: absolute;
  display: inline-block;
  z-index: 2;
  top: 12px;
  left: 25px;
  width: 7px;
  height: 7px;
  background: var(--color-danger);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--sidenav-item-hover-bg);
  animation: scale-up var(--transition-slow) 1 forwards;
}
.sidenav-features-item.active .sidenav-navigation-overdue-notice {
  box-shadow: 0 0 0 2px var(--sidenav-item-selected-bg);
}

.sidenav-navigation-bottom-links {
  width: 100%;
  padding: 30px var(--sidenav-padding) 20px;
}

.sidenav-more-link {
  cursor: pointer;
}

.sidenav-more-popover {
  position: fixed !important;
  top: 0 !important;
  left: var(--sidebar-width) !important;
  height: 100vh;
  max-height: 100vh !important;
  margin: 0 !important;
  padding-bottom: 20px !important;
  transform: none !important;
  border-radius: 0;
  border-top: none;
  border-bottom: none;
  border-left: none;
  overflow-y: auto;
  background: var(--sidebar-primary-bg);
  box-shadow: 10px 0 10px rgba(0, 0, 0, 0.05);
}
.sidenav-more-popover.sidenav-more-popover--collapsed {
  left: var(--sidebar-width-collapsed) !important;
}
.sidenav-more-popover.sidenav-more-popover--mobile {
  left: 0 !important;
  width: 100% !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .sidenav-more-popover {
    background: var(--bg-sidebar);
  }
}
:root[data-theme=dark] .sidenav-more-popover {
  background: var(--bg-sidebar);
}
.sidenav-more-popover .field-popup-menu-list-divider {
  border-top: 1px solid color-mix(in srgb, var(--sidebar-primary-border) 50%, transparent);
}

.sidenav-more-popover-mobile-close-button {
  position: sticky;
  z-index: 10;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 15px;
  gap: 10px;
  top: -5px;
  left: 0;
  width: 100%;
  height: 40px;
  background: var(--sidebar-primary-bg);
  border-bottom: 1px solid var(--sidebar-primary-border);
}

.sidenav-more-popover-mobile-close-button-icon {
  width: 12px;
  height: auto;
  opacity: 0.75;
}
.sidenav-more-popover-mobile-close-button-icon path {
  fill: currentColor;
}

.sidenav-favorite-link-wrapper {
  position: relative;
  border-radius: var(--border-radius-medium);
}
.sidenav-favorite-link-wrapper:hover {
  background: var(--sidenav-item-hover-bg);
}

.sidenav-features-item {
  padding-right: 32px;
}

.sidenav-favorite-link-favorite {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--border-radius-medium);
  color: var(--sidenav-text-color);
  cursor: pointer;
  opacity: 0;
  transition: all var(--transition-fast);
}
.sidenav-favorite-link-wrapper:hover .sidenav-favorite-link-favorite {
  opacity: 0.75;
}
.sidenav-favorite-link-favorite:focus-visible {
  background: var(--sidenav-item-hover-bg);
  opacity: 0.75;
}
.sidenav-favorite-link-favorite:hover {
  background: var(--sidenav-item-hover-bg);
  opacity: 1;
}
.sidenav-favorite-link-favorite.favorited {
  color: var(--sidenav-text-color);
  opacity: 0.75;
}
.sidenav-favorite-link-favorite.favorited:hover {
  background: var(--sidenav-item-hover-bg);
  opacity: 1;
}
.sidenav-container--collapsed .sidenav-favorite-link-favorite {
  display: none;
}
.sidenav-favorite-link-favorite svg {
  width: auto;
  height: 10px;
}

.sidenav-popup-section-header {
  font-weight: 500;
  font-size: 12px;
  color: var(--text-lighter);
}

.sidenav-draggable-list {
  position: relative;
  min-height: 32px;
  border-radius: var(--border-radius-medium);
  transition: background 0.15s;
}
.sidenav-draggable-list.is-over {
  background: var(--sidenav-item-hover-bg);
  box-shadow: 0 0 0 1px var(--sidebar-primary-border);
}

.sidenav-draggable-list-empty {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sidenav-text-color);
  opacity: 0.5;
}
.sidenav-container--collapsed .sidenav-draggable-list-empty {
  display: none;
}

.sidenav-draggable-item {
  position: relative;
  user-select: none;
}
.sidenav-draggable-item a,
.sidenav-draggable-item img,
.sidenav-draggable-item svg {
  -webkit-user-drag: none;
  user-drag: none;
}

.sidenav-draggable-content {
  transition: opacity 0.15s;
}

.sidenav-active-non-favorited-link {
  position: relative;
  margin-top: 8px;
  padding-top: 8px;
  transition: opacity 0.15s;
}
.sidenav-active-non-favorited-link a,
.sidenav-active-non-favorited-link img,
.sidenav-active-non-favorited-link svg {
  -webkit-user-drag: none;
  user-drag: none;
}
.sidenav-active-non-favorited-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  height: 1px;
  background: var(--sidebar-primary-border);
  opacity: 0.5;
}
.sidenav-container--collapsed .sidenav-active-non-favorited-link::before {
  left: 4px;
  right: 4px;
}

.sidenav-notifications-wrapper {
  position: relative;
}

.sidenav-notifications-link {
  cursor: pointer;
}

.sidenav-notifications-badge {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--white);
  background: var(--color-danger);
  border-radius: 9px;
}
.sidenav-container--collapsed .sidenav-notifications-badge {
  height: 7px;
  width: 7px;
  min-width: 7px;
  padding: 0;
  top: 9px;
  right: 9px;
  transform: none;
  border: 1px solid var(--sidebar-primary-bg);
}

.sidenav-container--collapsed .sidenav-notifications-badge-count {
  display: none;
}

.sidenav-support-wrapper {
  position: relative;
}

.sidenav-support-link {
  cursor: pointer;
}

.sidenav-support-menu {
  padding: var(--sidenav-padding-small);
}

.sidenav-support-menu-legal {
  margin: 8px;
  padding: 12px 0 0;
  font-size: 10px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-content);
}
.sidenav-support-menu-legal a {
  color: var(--text-muted);
  text-decoration: none;
}
.sidenav-support-menu-legal a:hover {
  color: var(--text-default);
  text-decoration: underline;
}

.sidenav-support-menu-legal-separator {
  margin: 0 5px;
}

.sidenav-link-tooltip {
  z-index: calc(var(--z-navigation) + 20);
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  white-space: nowrap;
  border-radius: 8px;
  background: var(--bg-content);
  box-shadow: 1px 3px 14px color-mix(in srgb, var(--black) 8%, transparent);
  border: 1px solid var(--border-content);
  pointer-events: none;
}

.scrolled-navigation {
  position: fixed;
  z-index: var(--z-scrolled-navigation);
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--bg-content);
  border-bottom: 1px solid var(--border-content);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--bg-shadow) 2%, transparent);
  transition: all var(--transition-slow) ease;
  transform: translateY(-100%);
}
.scrolled-navigation.active {
  transform: translateY(0%);
  transform: translate3d(0, 0, 0);
}
@media (min-width: 768px) {
  .scrolled-navigation.with-style-editor {
    right: calc(var(--document-editor-width) + 1px);
    width: auto;
    border-bottom: 1px solid var(--border-content);
  }
}
@media print {
  .scrolled-navigation {
    display: none;
  }
}

.accounting-report-header-section {
  position: relative;
  background: var(--bg-grey-fc);
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .accounting-report-header-section {
    padding: 30px 0 84px;
  }
}
@media print {
  .accounting-report-header-section {
    background: none;
    border: none;
  }
}

.accounting-report-container {
  position: relative;
  z-index: 2;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .accounting-report-container {
    margin-top: -60px;
  }
}

.accounting-report-content {
  position: relative;
  padding: 40px 40px 60px;
  text-align: left;
  background-color: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--black) 2%, transparent);
}
@media (min-width: 768px), print {
  .accounting-report-content {
    padding: 60px 60px 120px;
  }
}
@media print {
  .accounting-report-content {
    width: 100%;
    min-width: 900px;
    border: none;
    box-shadow: none;
  }
}

@media (min-width: 768px), print {
  .accounting-report-content-header {
    padding-right: 200px;
  }
}

.accounting-report-content-header-name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
@media (min-width: 768px), print {
  .accounting-report-content-header-name {
    font-size: 30px;
  }
}

.accounting-report-content-header-email {
  margin-top: 10px;
}

.accounting-report-content-header-address {
  margin-top: 5px;
}

.accounting-report-content-title {
  margin-bottom: 60px;
  padding-bottom: 40px;
  color: var(--text-lighter);
  border-bottom: 1px solid var(--border-content-alt);
}
@media (min-width: 768px), print {
  .accounting-report-content-title {
    position: absolute;
    right: 60px;
    top: 60px;
    margin-bottom: 0;
    padding-bottom: 0;
    text-align: right;
    border-bottom: 0;
  }
}

.accounting-report-content-title-name {
  margin-bottom: 10px;
  font-size: 24px;
}

.accounting-report-content-body {
  margin-top: 30px;
}

.accounting-report-content-section {
  margin-top: 60px;
}

.accounting-report-content-section-header {
  margin-bottom: 10px;
  padding-bottom: 20px;
  font-size: 16px;
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .accounting-report-content-section-header {
    font-size: 22px;
  }
}

.accounting-report-content-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .accounting-report-content-row {
    font-size: 16px;
  }
}
.accounting-report-content-row.total {
  margin-top: 10px;
  margin-bottom: 0;
  padding-top: 10px;
  color: var(--text-default);
  font-weight: 600;
  border-top: 1px solid var(--border-content);
}

.accounting-report-content-row-group-icon {
  position: relative;
  top: -1px;
  margin-left: 8px;
  font-size: 10px;
  color: var(--text-lightest);
}

.accounting-sub-category-report-content-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 14px;
  color: var(--text-muted-alt);
}
@media (min-width: 768px) {
  .accounting-sub-category-report-content-row {
    font-size: 16px;
  }
}
.accounting-sub-category-report-content-row.total {
  margin-top: 10px;
  margin-bottom: 0;
  padding-top: 10px;
  color: var(--text-default);
  font-weight: 600;
  border-top: 1px solid var(--border-content);
}

.accounting-report-content-total {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
  padding: 15px 0 11px;
  font-size: 16px;
  font-weight: 500;
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .accounting-report-content-total {
    font-size: 22px;
  }
}

.accounting-index-page {
  position: relative;
  z-index: 2;
}

.accounting-index-placeholder {
  position: relative;
  padding: 120px 40px 120px;
  text-align: center;
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
}

.accounting-index-placeholder-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  background: var(--bg-content) url("bookkeeping/profit-loss-placeholder.png") no-repeat center center;
  background-size: cover;
}
@media only screen and (min-resolution: 1.5dppx) {
  .accounting-index-placeholder-bg {
    background-image: url("bookkeeping/profit-loss-placeholder@2x.png");
  }
}

.accounting-index-placeholder-content {
  position: relative;
  margin: auto;
  max-width: 600px;
  text-align: center;
}

.accounting-index-placeholder-copy {
  color: var(--text-muted);
  font-size: 16px;
}

.accounting-header-content {
  position: relative;
}

.accounting-header-content-in {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 11;
}

.accounting-header-datepicker-section {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
@media (min-width: 768px) {
  .accounting-header-datepicker-section {
    display: flex;
  }
}
.accounting-header-datepicker-section .DateRangePicker {
  width: auto !important;
}
.accounting-header-datepicker-section .DateRangePicker .DateRangePickerInput {
  width: 210px;
  background: none;
  border: 0;
}
.accounting-header-datepicker-section .DateRangePicker .DateInput_input {
  height: auto;
  padding: 0;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
}
.accounting-header-datepicker-section .DateRangePickerInput_arrow_svg {
  position: relative;
  top: -1px;
  width: 14px;
  height: auto;
  margin-right: 3px;
}
.accounting-header-datepicker-section .DateRangePicker_picker {
  top: 130% !important;
}
.accounting-header-datepicker-section .DateInput_fang {
  display: none;
}
.accounting-header-datepicker-section .ghost-form-control, .accounting-header-datepicker-section .ghost-form-display {
  margin-top: -2px;
  font-size: 14px;
  margin-left: -7px;
  color: var(--text-default);
}
.accounting-header-datepicker-section .ghost-form-select {
  position: relative;
  top: -9px;
  left: -10px;
  width: 180px;
  color: var(--text-default);
}
.accounting-header-datepicker-section .Select__option {
  font-size: 14px;
}
.accounting-header-datepicker-section .dashboard-date-select-preset .Select__control, .accounting-header-datepicker-section .dashboard-date-select-preset {
  min-width: 0;
  min-height: 24px;
  height: 24px;
  left: -5px;
}
.accounting-header-datepicker-section .dashboard-date-select-preset .Select__control {
  border: 0;
  background: none;
  top: -1px;
}
.accounting-header-datepicker-section .dashboard-date-select-preset .Select__value-container {
  display: none;
}
.accounting-header-datepicker-section .dashboard-date-select-preset .Select__menu {
  right: 0;
  left: auto;
  min-width: 150px;
  border-color: color-mix(in srgb, var(--black) 10%, transparent);
  z-index: 11;
}
.accounting-header-datepicker-section .dashboard-date-select-preset .Select__menu-list {
  max-height: 360px;
}
.accounting-header-datepicker-section .dashboard-date-select-preset .Select__indicators .Select__dropdown-indicator {
  padding: 3px 8px 2px;
}
.accounting-header-datepicker-section .dashboard-date-select-preset .Select__indicators .Select__dropdown-indicator svg {
  width: 19px;
}

.accounting-header-datepicker-icon {
  display: none;
  line-height: 18px;
  font-size: 18px;
  color: var(--text-default);
  width: 15px;
  height: auto;
}
.accounting-header-datepicker-icon path {
  fill: var(--text-default);
}
@media (min-width: 768px) {
  .accounting-header-datepicker-icon {
    display: inline-block;
  }
}

.accounting-header-datepicker-display {
  display: flex;
  height: 24px;
  padding-left: 14px;
  font-weight: 500;
  font-size: 18px;
  text-align: left;
}

.accounting-header-datepicker-caret {
  padding-top: 4px;
  padding-left: 3px;
  font-size: 0.7em;
  color: var(--text-lightest);
}
.ghost-input-wrapper.showing + .accounting-header-datepicker-caret {
  display: none;
}

.accounting-header-aside {
  display: inline-flex;
  align-items: center;
}

.accounting-export-header-dropdown {
  position: relative;
  text-align: right;
  font-size: 14px;
}
.accounting-export-header-dropdown .dropdown-menu {
  left: auto;
  right: -10px;
}

.accounting-export-header-dropdown-toggle {
  display: none;
  padding: 3px 20px 3px 10px;
  text-align: center;
  font-weight: 500;
}
.accounting-export-header-dropdown-toggle, .accounting-export-header-dropdown-toggle:focus, .accounting-export-header-dropdown-toggle:visited {
  color: var(--text-default);
}
.accounting-export-header-dropdown-toggle:hover, .accounting-export-header-dropdown-toggle:active {
  color: var(--text-default);
}
@media (min-width: 768px) {
  .accounting-export-header-dropdown-toggle {
    display: inline-block;
  }
}
.accounting-export-header-dropdown-toggle .list-item-dd-toggle-dots {
  margin-left: 10px;
  width: 10px;
}
.accounting-export-header-dropdown-toggle .list-item-dd-toggle-dots path {
  fill: var(--border-darker);
}
.open .accounting-export-header-dropdown-toggle .list-item-dd-toggle-dots {
  transform: rotate(180deg);
}

.accounting-export-header-dropdown-icon {
  position: absolute;
  left: -15px;
  top: 3px;
}

.accounting-header-toggle-currency {
  display: flex;
  align-items: center;
  text-align: right;
  color: var(--text-lighter);
  font-weight: 500;
  font-size: 16px;
}
@media (min-width: 768px) {
  .accounting-header-toggle-currency {
    margin-left: 15px;
  }
}
.accounting-header-toggle-currency .Select__menu {
  width: 160px;
  text-align: left;
  border-radius: 4px;
  border: 1px solid var(--border-content);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--black) 12%, transparent);
}
@media (min-width: 768px) {
  .accounting-header-toggle-currency .Select__menu {
    right: 0;
  }
}

.accounting-header-toggle-currency-value {
  margin-left: 2px;
  color: var(--text-muted);
  font-weight: 500;
}

.accounting-index-export-btn {
  position: relative;
  display: block;
  width: 100%;
  line-height: 1.5;
  padding: 9px 15px 10px;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  background: var(--bg-content);
  border-radius: 0;
  transition: all var(--transition-normal) ease;
}
.accounting-index-export-btn, .accounting-index-export-btn:focus, .accounting-index-export-btn:visited {
  color: var(--text-default);
  border: none;
  box-shadow: none;
}
.accounting-index-export-btn:hover, .accounting-index-export-btn:active {
  color: var(--color-primary);
  background: var(--bg-grey-fc);
  border: none;
  box-shadow: none;
}

.accounting-index-paypal-fee-notice {
  padding: 30px;
  font-size: 16px;
}

.accounting-index-paypal-fee-description {
  font-size: 14px;
  color: var(--text-lighter);
}

.accounting-index-tax-promo {
  position: relative;
  font-size: 14px;
  color: var(--text-muted);
}

.accounting-index-tax-promo-header {
  max-width: 300px;
  margin-bottom: 15px;
  color: var(--text-default);
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
}

.accounting-index-tax-promo-copy {
  max-width: 300px;
}

.accounting-index-tax-promo-content {
  font-size: 14px;
  line-height: 140%;
  padding: 30px 30px 42px 30px;
  border: 1px solid var(--border-content);
  border-radius: 6px;
}

.accounting-index-tax-promo-cta {
  padding: 15px 0 0;
  font-weight: 600;
  font-size: 16px;
}
.accounting-index-tax-promo-cta a {
  display: block;
  height: 100%;
  width: 100%;
}

.accounting-index-tax-promo-cta-arrow {
  margin-left: 7px;
  transition: all var(--transition-normal) ease;
}
.accounting-index-tax-promo-cta a:hover .accounting-index-tax-promo-cta-arrow {
  transform: translateX(5px);
}

.accounting-expenses-placeholder {
  position: relative;
  padding: 90px 40px;
  text-align: center;
}

.accounting-expenses-placeholder-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  background: var(--bg-content) url("bookkeeping/expense-totals-placeholder.png") no-repeat top center;
  background-size: cover;
}
@media only screen and (min-resolution: 1.5dppx) {
  .accounting-expenses-placeholder-bg {
    background-image: url("bookkeeping/expense-totals-placeholder@2x.png");
  }
}

.accounting-expenses-placeholder-bg2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}

.accounting-expenses-placeholder-content {
  position: relative;
}

.accounting-expenses-placeholder-copy {
  font-size: 16px;
  color: var(--text-muted);
}

.accounting-expenses-tax-promo-bg {
  position: absolute;
  top: 0;
  right: 0;
}

.accounting-index-tax-promo-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 16px 15px 10px;
  cursor: pointer;
  font-size: 14px;
}
.accounting-index-tax-promo-close, .accounting-index-tax-promo-close:focus, .accounting-index-tax-promo-close:visited {
  opacity: 0.5;
}
.accounting-index-tax-promo-close:hover, .accounting-index-tax-promo-close:active {
  opacity: 0.7;
}

.accounting-index-tax-section {
  margin-bottom: 40px;
}

.accounting-index-tax-total-item {
  margin: 0 0 30px;
  text-align: left;
}

.accounting-index-tax-total-label {
  margin-bottom: 5px;
  font-size: 14px;
  color: var(--text-muted);
}

.accounting-index-tax-total-amount {
  color: var(--text-muted);
  font-size: 16px;
}
@media (min-width: 768px) {
  .accounting-index-tax-total-amount {
    font-size: 22px;
  }
}

.accounting-index-tax-totals-copy {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-default);
}
.accounting-index-tax-totals-copy:last-child {
  margin-bottom: 0;
}

.accounting-index-tax-connect-bank {
  position: relative;
  padding: 30px;
  margin-bottom: 20px;
  background: var(--bg-content-empty);
  border: 1px solid var(--border-content);
  border-radius: var(--border-radius-medium);
}

.accounting-index-tax-connect-bank-copy {
  margin-bottom: 20px;
  padding-right: 20px;
  font-size: 16px;
  color: var(--text-muted);
}

.accounting-index-tax-download-btn {
  position: relative;
  display: block;
  width: 100%;
  line-height: 1.5;
  padding: 0 20px 0 22px;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  background: transparent;
  border-radius: 0;
  transition: all var(--transition-normal) ease;
}
.accounting-index-tax-download-btn, .accounting-index-tax-download-btn:focus, .accounting-index-tax-download-btn:visited {
  color: var(--color-primary);
  border: none;
  box-shadow: none;
}
.accounting-index-tax-download-btn:hover, .accounting-index-tax-download-btn:active {
  color: var(--color-primary);
  border: none;
  box-shadow: none;
}

.accounting-index-tax-download-btn-icon {
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: auto;
}

.accounting-index-tax-powered-hurdlr {
  font-weight: 500;
  font-size: 12px;
  color: var(--text-lighter);
  padding: 10px 0 8px;
}
.accounting-index-tax-powered-hurdlr.without-border {
  margin-top: 10px;
  border-top: none;
}

.accounting-index-tax-powered-hurdlr-link, .accounting-index-tax-powered-hurdlr-link:focus, .accounting-index-tax-powered-hurdlr-link:visited {
  color: var(--text-lighter);
}
.accounting-index-tax-powered-hurdlr-link:hover, .accounting-index-tax-powered-hurdlr-link:active {
  color: var(--text-lighter);
}

.accounting-index-share-link-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.accounting-index-reports-divider {
  margin-top: 40px;
}

.accounting-index-reports-link {
  position: relative;
  padding: 10px 10px 10px 24px;
  font-weight: 500;
  font-size: 16px;
}

.accounting-index-reports-link-icon {
  position: absolute;
  left: 0;
  top: 13px;
  top: 13.5px;
  width: 15px;
  height: auto;
}
.accounting-index-reports-link-icon path {
  stroke: var(--color-primary);
}

.accounting-index-quickbooks-promo {
  position: relative;
  display: block;
  margin-bottom: 60px;
  padding: 30px 50px 30px 30px;
  font-size: 16px;
  border: 1px solid var(--border-content);
  border-radius: 6px;
}

.accounting-index-quickbooks-promo-copy {
  max-width: 340px;
}

.accounting-index-quickbooks-promo-link {
  display: inline-block;
  padding: 15px 0 0;
  font-weight: 600;
}

.accounting-index-quickbooks-promo-link-arrow {
  margin-left: 7px;
  transition: all var(--transition-normal) ease;
}
.accounting-index-quickbooks-promo-link:hover .accounting-index-quickbooks-promo-link-arrow {
  transform: translateX(5px);
}

.accounting-index-quickbooks-promo-icon {
  position: relative;
  width: 141px;
  height: auto;
  margin-bottom: 25px;
}

.accounting-index-quickbooks-promo-leaves {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 49px;
  height: 80px;
  background: transparent right bottom no-repeat;
  background-size: contain;
  background-image: url("leaves/quickbooks-promo-leaves.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .accounting-index-quickbooks-promo-leaves {
    background-image: url("leaves/quickbooks-promo-leaves@2x.png");
  }
}
@media (min-width: 1400px) {
  .accounting-index-quickbooks-promo-leaves {
    width: 75px;
    height: 120px;
  }
}

.accounting-index-quickbooks-promo-close {
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 15px;
  width: 45px;
  height: auto;
  cursor: pointer;
  transition: all var(--transition-normal) ease;
}
.accounting-index-quickbooks-promo-close path {
  fill: var(--text-lighter);
}
.accounting-index-quickbooks-promo-close:hover path {
  fill: var(--text-muted);
}

.accounting-expenses-categories-container {
  padding: 30px 0;
}

.accounting-expenses-category-group-item {
  position: relative;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .accounting-expenses-category-group-item {
    padding-left: 60px;
    margin-bottom: 30px;
  }
}

.accounting-expenses-category-group-percent {
  position: absolute;
  display: none;
  text-align: center;
  justify-content: center;
  align-items: center;
  left: 0;
  top: 0;
  width: 35px;
  height: 35px;
  font-size: 10px;
  text-align: center;
}
@media (min-width: 768px) {
  .accounting-expenses-category-group-percent {
    display: flex;
  }
}

.accounting-expenses-category-group-percent-value {
  position: relative;
}

.accounting-expenses-category-group-circle {
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
  border-radius: 100%;
  background-color: var(--bg-content);
}

.accounting-expenses-category-group-circle-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid transparent;
}

.accounting-expenses-category-group-name {
  position: relative;
  padding: 6px 72px 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
  cursor: pointer;
  user-select: none;
}

.accounting-expenses-category-group-total {
  position: absolute;
  right: 0;
  top: 6px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
}

.accounting-expenses-category-group-icon {
  position: relative;
  top: -1px;
  margin-left: 8px;
  font-size: 10px;
  color: var(--text-lightest);
}

.accounting-expenses-categories-list {
  margin-top: 10px;
  margin-bottom: 30px;
}

.accounting-expenses-category-group-undefined {
  margin-bottom: 15px;
  margin-top: 30px;
  padding-top: 10px;
  border-top: 2px solid var(--border-content);
}

.expense-category-percentage {
  text-align: right;
  cursor: default;
  color: var(--text-muted-alt);
  position: absolute;
  right: 0;
  top: 0;
  background: var(--bg-content);
}

.accounting-expenses-category-list-item {
  margin-bottom: 5px;
  font-size: 16px;
  color: var(--text-muted);
}

.accounting-expenses-category-list-item-bar {
  padding-top: 7px;
}

.expense-category-bar {
  height: 8px;
  overflow: hidden;
  background: var(--bg-grey-f5);
  border-radius: 10px;
  box-shadow: inset 0 0 1px color-mix(in srgb, var(--black) 10%, transparent);
}

.expense-category-fill {
  height: 8px;
  width: 0;
  margin: 0;
  border-radius: 10px;
  box-shadow: 0 0 2px color-mix(in srgb, var(--black) 10%, transparent);
  transition: all var(--transition-slow) ease;
}

.accounting-expenses-totals-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
  padding: 20px 0 18px;
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .accounting-expenses-totals-container {
    flex-direction: row;
  }
}

.accounting-expenses-total-item {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  margin-bottom: 10px;
}
.accounting-expenses-total-item:last-child {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .accounting-expenses-total-item {
    margin-bottom: 0;
  }
}

.accounting-expenses-total-value {
  font-size: 18px;
  font-weight: 500;
}

.accounting-expenses-total-label {
  padding-left: 10px;
  padding-top: 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted-alt);
}

.tax-total-modal-row {
  padding: 20px 40px;
}

.tax-total-filing-status {
  font-size: 14px;
  color: var(--text-muted-alt);
}
@media (min-width: 768px) {
  .tax-total-filing-status {
    font-size: 16px;
  }
}

.tax-total-filing-status-icon {
  position: relative;
  top: 1px;
  margin-right: 10px;
  font-size: 1.1em;
}

.tax-total-edit-profile {
  text-align: right;
  font-weight: 600;
}

.tax-total-income-bracket-section {
  margin: 0 40px;
  padding: 30px;
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.tax-total-income-bracket-label {
  margin-bottom: 0;
  color: var(--text-muted-alt);
}

.tax-total-income-bracket-amount {
  font-size: 26px;
  margin-bottom: 15px;
  padding: 5px 0 10px;
  border-bottom: 1px solid var(--border-content);
}

.tax-total-income-bracket-details {
  font-size: 12px;
  color: var(--text-muted-alt);
}

.tax-total-income-bracket-details-value {
  text-align: right;
}

.tax-total-income-breakdown {
  padding-top: 40px;
  padding-bottom: 40px;
  margin: 40px;
  font-size: 14px;
  border-top: 1px solid var(--border-content-alt);
}
@media (min-width: 768px) {
  .tax-total-income-breakdown {
    font-size: 18px;
  }
}

.tax-total-income-breakdown-amount {
  text-align: right;
}

.tax-total-income-breakdown-total {
  margin-top: 15px;
  padding-top: 15px;
  font-weight: 600;
  border-top: 1px solid var(--border-content);
}

.tax-total-income-breakdown-toggle, .tax-total-income-breakdown-toggle:focus, .tax-total-income-breakdown-toggle:visited {
  color: var(--text-muted);
}
.tax-total-income-breakdown-toggle:hover, .tax-total-income-breakdown-toggle:active {
  color: var(--text-muted);
}

.tax-total-income-breakdown-icon {
  position: relative;
  top: 1px;
  margin-left: 8px;
  font-size: 0.9em;
}

.annual-taxes-notice {
  margin: 40px 40px 0;
  padding: 20px;
  font-size: 14px;
  color: var(--text-default);
  background: var(--bg-grey-f5);
  border-radius: 4px;
}

.annual-federal-taxes-breakdown-details {
  padding: 20px;
  color: var(--text-muted);
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.annual-federal-taxes-minus {
  padding-left: 5px;
  font-size: 16px;
}

.tax-payments-notice {
  margin: 0 0 40px;
  padding: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  background: var(--bg-grey-f5);
  border-radius: 4px;
}

.tax-payments-form-section {
  margin-bottom: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--border-content-alt);
}

.tax-payment-amounts-section {
  padding: 30px 30px 25px;
  background: var(--bg-grey-f5);
}

.tax-payment-amounts-due {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
}

.tax-payment-amounts-due-total {
  color: var(--color-danger);
}

.tax-payment-amounts-paid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}

.tax-payment-amounts-paid-input {
  width: 100px;
  margin-right: -10px;
  text-align: right;
}

.tax-payment-amounts-remaining {
  margin-top: 15px;
  padding-top: 15px;
  font-size: 16px;
  font-weight: 600;
  text-align: right;
  border-top: 1px solid var(--border-content-alt);
}

.tax-payment-amounts-remaining-label {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 500;
}

.tax-reminder-top {
  position: relative;
  padding: 30px;
}
@media (min-width: 768px) {
  .tax-reminder-top {
    padding: 40px 60px;
  }
}

.tax-reminder-top-priority {
  position: absolute;
  display: none;
  right: 60px;
  top: 0;
  padding: 8px 25px 5px;
  color: var(--text-lighter);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
  border-top: 0;
  border-radius: 0 0 4px 4px;
}
.tax-reminder-top-priority.required {
  color: var(--color-primary-contrast);
  background: var(--color-danger);
  border-color: var(--color-danger);
}
@media (min-width: 768px) {
  .tax-reminder-top-priority {
    display: block;
  }
}

.tax-reminder-top-title {
  font-size: 22px;
  font-weight: 600;
}

.tax-reminder-top-subtitle {
  color: var(--color-danger);
  font-weight: 600;
  font-size: 16px;
}

.tax-reminder-top-subtitle-note {
  display: flex;
  margin-top: 15px;
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  color: var(--text-muted-alt);
}

.tax-reminder-top-subtitle-note-icon {
  margin-right: 6px;
  font-size: 1.1em;
  color: var(--text-muted);
}

.tax-reminder-actions-section {
  padding: 30px;
  background: var(--bg-grey-fc);
  border-top: 0 solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
}
.tax-reminder-actions-section:first-child {
  border-top-width: 1px;
}
@media (min-width: 768px) {
  .tax-reminder-actions-section {
    padding: 30px 60px;
  }
}

@media (min-width: 768px) {
  .tax-reminder-action-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.tax-reminder-action-item-name {
  margin-bottom: 1px;
  font-size: 14px;
  font-weight: 600;
}

.tax-reminder-action-item-detail {
  font-size: 16px;
  font-weight: 500;
}

.tax-reminder-action-item-button2 {
  margin-right: 15px;
  margin-left: auto;
}

.tax-reminder-details {
  padding: 30px;
}
@media (min-width: 768px) {
  .tax-reminder-details {
    padding: 40px 60px 60px;
  }
}
.tax-reminder-details h3 {
  margin-bottom: 20px;
  font-weight: 500;
}

.tax-reminder-details-copy {
  font-size: 16px;
}

.tax-reminder-resources {
  font-size: 16px;
  font-weight: 600;
}

.tax-reminder-resources-link {
  position: relative;
  display: block;
  padding-left: 25px;
}

.tax-reminder-resources-icon {
  position: absolute;
  top: 1px;
  left: 0;
  font-size: 1.1em;
}
.tax-reminder-resources-icon.bouy {
  top: -3px;
}

.accounting-estimates-page {
  position: relative;
  z-index: 2;
}

.accounting-estimates-list-placeholder-header {
  position: relative;
  padding: 40px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 14px;
  box-shadow: 0 1px 15px color-mix(in srgb, var(--black) 2%, transparent);
}
@media (min-width: 768px) {
  .accounting-estimates-list-placeholder-header {
    padding: 20px 20px 26px 81px;
  }
}

.accounting-estimates-list-placeholder-coming {
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
@media (min-width: 768px) {
  .accounting-estimates-list-placeholder-coming {
    font-size: 16px;
  }
}

.accounting-estimates-list-placeholder-title {
  margin-bottom: 3px;
  font-size: 18px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .accounting-estimates-list-placeholder-title {
    font-size: 26px;
  }
}

.accounting-estimates-list-placeholder-icon {
  position: absolute;
  display: none;
  left: 20px;
  top: 34px;
  width: 47px;
  height: auto;
}
@media (min-width: 768px) {
  .accounting-estimates-list-placeholder-icon {
    display: block;
  }
}

.accounting-estimates-placeholder-leaf {
  position: absolute;
  right: -20px;
  bottom: -64px;
  width: 150px;
  height: 150px;
  background-position: top center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("leaves/leaf-1.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .accounting-estimates-placeholder-leaf {
    background-image: url("leaves/leaf-1@2x.png");
  }
}
@media (min-width: 768px) {
  .accounting-estimates-placeholder-leaf {
    right: -62px;
    bottom: -81px;
    width: 200px;
    height: 200px;
  }
}

.accounting-estimates-list-placeholder-content {
  position: relative;
  padding: 40px;
  margin-top: 10px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
  box-shadow: 0 1px 15px color-mix(in srgb, var(--black) 2%, transparent);
}

.accounting-estimates-list-placeholder-list-item {
  position: relative;
  margin-bottom: 15px;
  padding-left: 40px;
  font-size: 16px;
  color: var(--text-muted);
}
@media (min-width: 768px) {
  .accounting-estimates-list-placeholder-list-item {
    font-size: 18px;
  }
}

.accounting-estimates-list-placeholder-list-item-icon {
  position: absolute;
  left: -5px;
  top: 0;
  font-size: 21px;
  color: var(--color-primary);
}

.accounting-estimates-list-placeholder-cta {
  position: relative;
  margin-top: 30px;
}

.accounting-estimates-chart-container {
  margin-bottom: 60px;
}

.accounting-estimates-totals {
  margin-bottom: 60px;
  padding: 20px 20px 15px;
  border: 1px solid var(--border-content);
  border-radius: 10px;
  box-shadow: 0 1px 12px color-mix(in srgb, var(--black) 2%, transparent);
}

.accounting-estimates-placeholder-items {
  margin-top: 40px;
  padding: 20px;
  border: 1px solid var(--border-content);
  border-radius: 10px;
  box-shadow: 0 1px 15px color-mix(in srgb, var(--black) 2%, transparent);
}

.accounting-estimates-total-item {
  position: relative;
  padding: 30px 25px 32px 70px;
  margin-bottom: 5px;
  background: var(--bg-grey-fc);
  border: 1px solid transparent;
  border-radius: 6px;
  transition: all var(--transition-slower) ease;
}
.accounting-estimates-total-item:hover {
  background-color: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--black) 2%, transparent);
}

.accounting-estimates-total-item-icon {
  position: absolute;
  left: 24px;
  top: 50%;
  width: 26px;
  height: auto;
  transform: translateY(-50%);
}
.accounting-estimates-total-item-name {
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.accounting-estimates-total-item-amount {
  height: 30px;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-default);
}

.accounting-estimates-total-item-view {
  position: absolute;
  display: block;
  right: 30px;
  top: 50%;
  font-weight: 500;
  transform: translateY(-50%);
}
@media (min-width: 768px) {
  .accounting-estimates-total-item-view {
    display: none;
  }
}
@media (min-width: 1440px) {
  .accounting-estimates-total-item-view {
    display: block;
  }
}

.accounting-estimates-total-item-empty {
  height: 22px;
  padding-top: 3px;
  font-size: 30px;
  line-height: 0;
  color: var(--bg-grey-e);
}
.accounting-estimates-total-item-empty .ion-minus-round {
  margin-right: 7px;
}

.accounting-estimates-chart-section {
  padding: 0 0 10px;
}

.accounting-estimates-chart-item {
  padding: 20px;
  border: 1px solid var(--border-content);
  border-radius: 6px;
  box-shadow: 0 1px 12px color-mix(in srgb, var(--black) 2%, transparent);
}

.accounting-estimates-chart-label {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.accounting-estimates-chart-label-icon {
  margin-left: 7px;
  font-size: 0.9em;
  opacity: 0.4;
}
.accounting-estimates-chart-label-icon:hover {
  opacity: 0.5;
}

.accounting-estimates-chart-value {
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: 500;
  color: var(--text-default);
}

.accounting-estimates-chart-loading {
  font-size: 20px;
  color: var(--text-lightest);
  letter-spacing: 1px;
}

.accounting-estimates-chart-empty {
  color: var(--text-lightest);
}

.accounting-estimates-chart-paid-copy {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}
.accounting-estimates-chart-paid-copy.taxes-empty {
  color: var(--text-lightest);
}

.accounting-estimates-chart-value-due {
  color: var(--color-danger);
}

.accounting-estimates-payments-list-toggle {
  padding: 15px 0 13px;
  font-weight: 600;
}
.accounting-estimates-payments-list-toggle a:hover,
.accounting-estimates-payments-list-toggle a:active {
  text-decoration: underline;
}

.accounting-estimates-payments-list-toggle-icon {
  display: inline-block;
  margin-left: 7px;
  font-size: 0.75em;
  line-height: 0;
  transition: all var(--transition-normal) ease;
}
.accounting-estimates-payments-list-toggle.active .accounting-estimates-payments-list-toggle-icon {
  transform: rotate(180deg);
}

.accounting-estimates-payments-list-border {
  display: block;
  border-top: 1px solid var(--border-content);
}

.accounting-estimates-payments-list-in {
  padding: 10px 0 0;
}

.accounting-estimates-payments-list-empty {
  padding: 30px;
  text-align: center;
  font-size: 14px;
  color: var(--text-lightest);
}

.accounting-estimates-payments-list-item {
  position: relative;
  padding: 10px 35px 10px 0;
  cursor: default;
  transition: all var(--transition-normal) ease;
  border-radius: 4px;
}
.accounting-estimates-payments-list-item:hover {
  background: var(--bg-grey-fc);
}
.accounting-estimates-payments-list-item .list-item-dd-toggle-link {
  padding: 12px 0 5px;
}
.accounting-estimates-payments-list-item .list-item-dd-toggle .dropdown-menu {
  top: 36px;
}

.accounting-estimates-payments-list-item-name {
  margin-right: 7px;
  font-weight: 600;
  color: var(--text-default);
}

.accounting-estimates-payments-list-item-date {
  display: block;
  color: var(--text-lighter);
}
@media (min-width: 768px) {
  .accounting-estimates-payments-list-item-date {
    display: initial;
  }
}

.accounting-estimates-payments-list-item-value {
  text-align: right;
  font-weight: 600;
}

.accounting-estimates-reminders-list {
  margin-bottom: 40px;
}

.accounting-estimates-reminders-list-empty {
  position: relative;
  padding: 40px;
  text-align: center;
  font-size: 16px;
  color: var(--text-lightest);
}

.accounting-estimates-reminder {
  position: relative;
  display: block;
  padding: 30px 30px 30px 40px;
  border: 1px solid var(--border-content);
  border-bottom: none;
  transition: all var(--transition-fast) ease;
}
.accounting-estimates-reminder, .accounting-estimates-reminder:focus, .accounting-estimates-reminder:visited, .accounting-estimates-reminder:hover, .accounting-estimates-reminder:active {
  color: var(--text-default);
}
.accounting-estimates-reminder:hover {
  background: var(--bg-grey-fc);
}
.accounting-estimates-reminder:first-child {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.accounting-estimates-reminder:last-child {
  border-bottom: 1px solid var(--border-content);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.accounting-estimates-reminder-icon-border {
  position: absolute;
  left: -20px;
  top: 22px;
  width: 40px;
  padding: 11px 0 5px;
  text-align: center;
  background: var(--bg-content);
  border-radius: 10px;
  border: 1px solid var(--border-content);
}

.accounting-estimates-reminder-icon {
  width: 16px;
}

.accounting-estimates-reminder-line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-right: 1px solid var(--border-content);
}

@media (min-width: 768px) {
  .accounting-estimates-reminder-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.accounting-estimates-reminder-title {
  max-width: 350px;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 500;
}

.accounting-estimates-reminder-priority {
  position: relative;
  top: -2px;
  min-width: 134px;
  padding: 4px 10px 4px;
  color: var(--color-primary-contrast);
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  border-radius: 3px;
  transition: all var(--transition-normal) ease;
}
.accounting-estimates-reminder-priority.recommended {
  background: var(--bg-grey-c);
}
.accounting-estimates-reminder:hover .accounting-estimates-reminder-priority.recommended {
  background: var(--bg-grey-c);
}
.accounting-estimates-reminder-priority.required {
  background: color-mix(in srgb, var(--color-danger) 70%, transparent);
}
.accounting-estimates-reminder:hover .accounting-estimates-reminder-priority.required {
  background: color-mix(in srgb, var(--color-danger) 90%, transparent);
}

.accounting-estimates-reminder-date {
  margin-bottom: 5px;
  font-size: 14px;
}

.accounting-estimates-reminder-detail {
  color: var(--text-muted);
  font-size: 14px;
  transition: all var(--transition-normal) ease;
}
.accounting-estimates-reminder:hover .accounting-estimates-reminder-detail {
  color: var(--text-muted);
}

.income-form-content .SingleDatePicker .DateInput_input {
  text-align: left;
}

.incomes-item-type-icon {
  position: absolute;
  cursor: pointer;
  display: block;
  left: 0;
  top: 13px;
}

.incomes-item-type-icon-svg {
  height: auto;
  opacity: 0.5;
}
.incomes-item-type-icon-svg.external {
  width: 12px;
  margin-top: 3px;
  margin-left: 1px;
}
.incomes-item-type-icon-svg.invoiced {
  width: 13px;
}
.list-item-in:hover .incomes-item-type-icon-svg {
  opacity: 0.7;
}

.incomes-list-item-amount {
  color: var(--color-primary);
}

.agreement-doc.tease-agreement-doc {
  max-height: 1300px;
  overflow: hidden;
}

.tease-agreement-signup {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 40px 20px 80px;
  text-align: center;
  background: var(--bg-content);
}
.tease-agreement-signup:before {
  position: absolute;
  content: "";
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 180px;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
}

.tease-agreement-signup-copy {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 400;
  font-family: var(--font-sans-serif);
}

.tease-agreement-instructions {
  position: relative;
  z-index: 3;
  padding-left: 0px;
  padding-right: 0px;
}
@media (min-width: 768px) {
  .tease-agreement-instructions {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.tease-agreement-instructions-in {
  position: relative;
  padding: 15px 15px;
  margin-bottom: 2px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted-alt);
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 2px;
}

.tease-agreement-doc .highlight {
  background-color: var(--bg-highlight);
}

.tease-agreement-bottom-links {
  color: var(--text-lighter);
  font-size: 16px;
  text-align: center;
}
.tease-agreement-bottom-links a,
.tease-agreement-bottom-links a:focus,
.tease-agreement-bottom-links a:visited {
  color: var(--text-muted-alt);
  text-decoration: underline;
}
.tease-agreement-bottom-links a:hover,
.tease-agreement-bottom-links a:active {
  color: var(--text-muted-alt);
  text-decoration: underline;
}

.agreements-show-page {
  position: relative;
  padding: 0 0 80px;
  background: var(--bg-grey-fc);
}
.agreements-show-page.with-side-panel {
  min-height: 100vh;
}
@media (min-width: 1200px) {
  .agreements-show-page.with-side-panel {
    padding-right: var(--document-editor-width);
  }
}

.agreement-show-top {
  position: relative;
  padding: 30px 0px;
  color: var(--text-default);
  font-weight: 600;
  font-size: 16px;
  text-align: center;
}
@media (min-width: 480px) {
  .agreement-show-top {
    padding: 30px 20px;
  }
}
@media (min-width: 768px) {
  .agreement-show-top {
    padding: 30px 0;
    font-size: 16px;
  }
}
@media print {
  .agreement-show-top {
    display: none;
  }
}

@media (max-width: 992px) {
  .agreement-cta {
    position: fixed;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    z-index: 10;
    margin-left: 0;
    border-radius: 0px;
  }
}

.agreements-show-top-left {
  text-align: left;
}

.agreements-show-top-right {
  text-align: right;
}

.agreement-doc-top {
  text-align: center;
}

.agreement-doc-top-logo.image-uploader-top-logo-img,
.agreement-doc-top-logo.image-uploader-top-logo-img-display {
  position: relative;
  margin: 0 auto 70px;
  background-size: contain;
}

.agreement-sidebar-status-section {
  margin-top: 60px;
  padding: 20px;
  color: var(--text-default);
  background: var(--bg-grey-fd);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}

.agreement-sidebar-status {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agreement-sidebar-status-border {
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  border-right: 1px dashed var(--border-content-alt);
}

.agreement-sidebar-status-item {
  position: relative;
  padding-left: 20px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: capitalize;
}
.agreement-sidebar-status-item.active {
  font-weight: 600;
  color: var(--text-muted);
}
.agreement-sidebar-status-item.upcoming {
  color: var(--text-lighter);
}

.agreement-sidebar-status-item-icon {
  position: absolute;
  left: -2px;
  top: 9px;
  width: 5px;
  height: 5px;
  background-color: var(--bg-grey-fd);
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--bg-grey-fd);
}
.agreement-sidebar-status-item.active .agreement-sidebar-status-item-icon {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.agreement-sidebar-status-item.upcoming .agreement-sidebar-status-item-icon {
  border: 1px solid var(--text-lighter);
}

.agreement-doc-wrapper {
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
}
@media (min-width: 768px) {
  .agreement-doc-wrapper {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.agreement-doc {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding: 80px 20px;
  font-family: var(--font-legal);
  font-size: 16px;
  color: var(--black);
  background-color: var(--white);
  border: 1px solid var(--grey-e);
  border-radius: 2px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--black) 2%, transparent);
}
.agreement-doc.status-5, .agreement-doc.status-6, .agreement-doc.status-7 {
  cursor: default;
}
.agreement-doc.status-0 {
  color: var(--text-lighter) !important;
}
@media (min-width: 768px) {
  .agreement-doc {
    padding: 80px 60px;
  }
}
@media (min-width: 992px) {
  .agreement-doc {
    padding: 80px;
  }
}
@media print {
  .agreement-doc {
    border: none;
    box-shadow: none;
  }
}
.agreement-doc .wysiwyg-editor p,
.agreement-doc .wysiwyg-editor ul,
.agreement-doc .wysiwyg-editor li {
  font-family: var(--font-legal);
  font-size: 16px;
}
.agreement-doc .wysiwyg-editor ul, .agreement-doc .wysiwyg-editor ol {
  margin-bottom: 0;
  padding-left: 28px;
}
.agreement-doc .wysiwyg-editor h1 {
  margin: 20px 0 18px;
  font-weight: 600;
  font-family: var(--font-legal);
}
.agreement-doc .wysiwyg-editor h1,
.agreement-doc .wysiwyg-editor h1 span {
  font-size: 24px !important;
}
.agreement-doc .wysiwyg-editor h1:first-child {
  margin-top: 0;
}
.agreement-doc .wysiwyg-editor h2 {
  margin: 20px 0 18px;
  font-weight: 600;
  font-family: var(--font-legal);
}
.agreement-doc .wysiwyg-editor h2,
.agreement-doc .wysiwyg-editor h2 span {
  font-size: 20px !important;
}
.agreement-doc .wysiwyg-editor h3 {
  margin: 20px 0 18px;
  font-weight: 600;
  font-family: var(--font-legal);
}
.agreement-doc .wysiwyg-editor h3,
.agreement-doc .wysiwyg-editor h3 span {
  font-size: 18px !important;
}
.agreement-doc .wysiwyg-editor h4 {
  margin: 20px 0 18px;
  font-weight: 600;
  font-family: var(--font-legal);
}
.agreement-doc .wysiwyg-editor h4,
.agreement-doc .wysiwyg-editor h4 span {
  font-size: 16px !important;
}

.agreement-doc-title {
  margin-bottom: 40px;
  text-align: center;
  font-weight: 600;
  font-size: 24px;
}

.agreement-doc-sub-title {
  margin: 40px 0 40px 0;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
}

.agreement-doc-section {
  margin-top: 20px;
}

.section-title {
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 600;
  margin: 20px 0px 20px 0px;
}

.sub-section {
  margin: 10px 0px 0px 25px;
}

.break {
  display: block;
}

.sub-sub-section {
  margin-left: 45px;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}

.sub-sub-sub-section {
  margin-left: 65px;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}

.sub-section-title {
  font-weight: 600;
}

.agreement-doc .highlight,
.agreement-doc .secondary-highlight {
  background-color: transparent;
}

.agreement-doc.status-1:not(.agreement-doc-contact) .highlight,
.agreement-doc.status-2:not(.agreement-doc-contact) .highlight,
.agreement-doc.status-3:not(.agreement-doc-contact) .highlight,
.agreement-doc.status-10:not(.agreement-doc-contact) .highlight {
  cursor: pointer;
  color: var(--black);
  background-color: var(--bg-highlight);
  transition: all var(--transition-normal) ease;
}
.agreement-doc.status-1:not(.agreement-doc-contact) .highlight:hover,
.agreement-doc.status-2:not(.agreement-doc-contact) .highlight:hover,
.agreement-doc.status-3:not(.agreement-doc-contact) .highlight:hover,
.agreement-doc.status-10:not(.agreement-doc-contact) .highlight:hover {
  background-color: color-mix(in srgb, var(--bg-highlight) 98%, var(--black));
}

.agreement-doc.status-1:not(.agreement-doc-contact) .secondary-highlight,
.agreement-doc.status-2:not(.agreement-doc-contact) .secondary-highlight,
.agreement-doc.status-3:not(.agreement-doc-contact) .secondary-highlight,
.agreement-doc.status-10:not(.agreement-doc-contact) .secondary-highlight {
  cursor: pointer;
  transition: all var(--transition-normal) ease;
  background-color: color-mix(in srgb, var(--bg-highlight) 50%, transparent);
}
.agreement-doc.status-1:not(.agreement-doc-contact) .secondary-highlight:hover,
.agreement-doc.status-2:not(.agreement-doc-contact) .secondary-highlight:hover,
.agreement-doc.status-3:not(.agreement-doc-contact) .secondary-highlight:hover,
.agreement-doc.status-10:not(.agreement-doc-contact) .secondary-highlight:hover {
  color: var(--black);
  background-color: color-mix(in srgb, var(--bg-highlight) 98%, var(--black));
}

.agreement-doc .wysiwyg-editor h1, .agreement-doc .wysiwyg-editor h2, .agreement-doc .wysiwyg-editor h3, .agreement-doc .wysiwyg-editor h4 {
  color: var(--black);
}
.agreement-doc .wysiwyg-editor .highlight, .agreement-doc .wysiwyg-editor .secondary-highlight {
  cursor: initial !important;
}

.indent {
  margin-left: 25px;
}

.agreement-doc-newline {
  display: block;
  margin-bottom: 5px;
}

.agreement-doc-statement-of-work {
  margin-top: 10px;
  margin-bottom: 15px;
}

.agreement-doc-statement-of-work-label {
  display: block;
}

.toolbar-wrapper.agreement-toolbar-wrapper {
  max-width: calc(var(--wrapper-width) - 80px);
}

.agreement-doc-signatures-section {
  padding-top: 80px;
}
.agreement-doc.status-10 .agreement-doc-signatures-section {
  display: none;
}

.agreement-doc-signatures,
.agreement-doc-signatures-empty {
  margin-top: 80px;
  padding-bottom: 80px;
}

.agreement-doc-signatures-title {
  font-style: italic;
  font-weight: 600;
}

.agreement-doc-signatures-co {
  margin-bottom: 40px;
}

.agreement-doc-signature-placeholder-label {
  font-style: italic;
  color: var(--grey-9);
}

.agreement-doc-signature {
  position: relative;
  margin-top: 10px;
  font-family: var(--font-signature);
  font-size: 65px;
  line-height: 0.6;
  border-bottom: 1px solid var(--grey-d);
  display: inline-block;
  width: 90%;
  min-width: 230px;
  max-width: 280px;
  margin-bottom: 15px;
  height: 43px;
  white-space: nowrap;
  padding-left: 10px;
}
.agreement-doc-signature:before {
  position: absolute;
  content: "x";
  left: 0;
  bottom: 5px;
  font-family: "Helvetica", sans-serif;
  font-size: 10px;
  color: var(--grey-d);
}

.agreement-doc-template-signatures-empty {
  margin: 60px 0 80px;
  padding: 80px 40px;
  font-size: 16px;
  color: var(--grey-9);
  text-align: center;
  font-family: var(--font-sans-serif);
  background: var(--grey-fc);
  border: 1px solid var(--grey-d);
  border-radius: 4px;
}

.agreement-doc-data {
  margin-bottom: 5px;
  font-size: 14px;
}

.agreement-doc-control {
  color: var(--grey-9);
}

.agreement-doc-statement-of-work-link {
  word-break: break-word;
}

.new-form-modal-body {
  padding: 40px 20px 0;
  font-size: 20px;
  line-height: 46px;
}
@media (min-width: 480px) {
  .new-form-modal-body {
    padding: 40px 40px 0;
  }
}
.new-form-modal-body .new-form-wrap {
  width: 100%;
  max-width: none;
}
.new-form-modal-body .new-form-group {
  margin-bottom: 30px;
}
.new-form-modal-body .agreement-form-help {
  display: none;
}
.new-form-modal-body .agreement-modal-help {
  display: block;
}

.agreement-doc-edit-paragraph {
  display: none;
  opacity: 0;
  transition: all var(--transition-slow) ease;
}
.agreement-doc-section > p:hover .agreement-doc-edit-paragraph, .agreement-doc-section > .sub-section:hover .agreement-doc-edit-paragraph {
  opacity: 1;
  transition: all var(--transition-normal) ease;
}
.agreement-doc-edit-paragraph:hover {
  color: var(--text-lighter);
}

.agreement-doc.status-1:not(.agreement-doc-contact) .agreement-doc-edit-paragraph,
.agreement-doc.status-2:not(.agreement-doc-contact) .agreement-doc-edit-paragraph,
.agreement-doc.status-3:not(.agreement-doc-contact) .agreement-doc-edit-paragraph,
.agreement-doc.status-10:not(.agreement-doc-contact) .agreement-doc-edit-paragraph {
  position: relative;
  display: inline-block;
  top: -2px;
  margin-left: 2px;
  padding: 3px 6px 0px;
  color: var(--color-primary);
  cursor: pointer;
  border: 1px solid var(--color-primary);
  border-radius: 5px;
  font-size: 10px;
}

.agreement-doc.agreement-doc-contractor .custom-agreement span.highlight {
  display: inline-block;
  min-height: 15px;
  min-width: 80px;
  margin-left: 3px;
  vertical-align: middle;
  box-shadow: 0 -2px 0 var(--bg-highlight), 0 2px 0 color-mix(in srgb, var(--black) 5%, transparent);
}
.agreement-doc.agreement-doc-contractor .custom-agreement span.highlight:not(:empty) {
  display: inline;
  min-width: 0;
  margin-left: 0;
  text-decoration: underline;
  background: none;
  box-shadow: none;
}

.custom-agreement-modal-header-warning {
  padding: 20px 20px 18px;
  font-size: 14px;
  text-align: center;
  color: var(--text-muted-alt);
  border-bottom: 1px solid var(--border-content-alt);
}

.agreements-cc-page {
  background: var(--bg-grey-fc);
}

.agreements-cc-footer {
  margin-top: 80px;
  padding: 40px 20px 40px;
  font-size: 16px;
  text-align: center;
  color: var(--text-muted);
}
@media print {
  .agreements-cc-footer {
    display: none;
  }
}

.agreements-cc-footer-info a,
.agreements-cc-footer-info a:hover,
.agreements-cc-footer-info a:focus,
.agreements-cc-footer-info a:visited {
  color: var(--text-default);
}

.agreements-new-page {
  position: relative;
  overflow: hidden;
  min-height: var(--minimum-page-height-desktop);
  padding: 40px 20px;
  background: var(--bg-content);
}
@media (min-width: 768px) {
  .agreements-new-page {
    padding: 40px 0px 80px;
  }
}

.agreements-new-project-notice {
  text-align: center;
  padding: 8px 10px 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-lighter);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}

.agreements-new-project-link {
  font-weight: 600;
}
.agreements-new-project-link, .agreements-new-project-link:focus, .agreements-new-project-link:visited {
  color: var(--text-default);
}
.agreements-new-project-link:hover, .agreements-new-project-link:active {
  color: var(--text-default);
  text-decoration: underline;
}

.form-errors {
  position: relative;
  display: none;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  padding: 14px 14px 12px;
  font-size: 16px;
  font-weight: 400;
  background-color: var(--color-danger);
  color: var(--color-primary-contrast);
}
.form-errors a {
  color: var(--color-primary-contrast);
  text-decoration: underline;
}
.form-errors a:hover {
  color: var(--color-primary-contrast);
}

.new-form-wrap {
  position: relative;
}
@media (min-width: 768px) {
  .new-form-wrap {
    max-width: 55%;
  }
}

.new-form-top-btn {
  position: relative;
  display: block;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .new-form-top-btn {
    position: absolute;
    right: 0;
    top: 1px;
    margin: 0;
  }
}
.new-form-top-btn .btn {
  float: right;
}

.new-form-step {
  position: relative;
  display: none;
}
.new-form-step:first-child {
  display: block;
}

.new-form-section {
  position: relative;
  min-height: 200px;
  padding-top: 56px;
  padding-bottom: 0px;
  font-size: 22px;
  font-weight: 400;
  line-height: 50px;
}

.new-form-section-header {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 20px;
  color: var(--text-default);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  font-size: 24px;
  text-align: center;
  border-bottom: 1px solid var(--border-content);
  box-shadow: 0 1px 0 #f5f5f5;
}
@media (min-width: 768px) {
  .new-form-section-header {
    text-align: left;
  }
}

.new-form-step-count {
  margin-top: 10px;
  text-align: center;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 400;
}
@media (min-width: 768px) {
  .new-form-step-count {
    position: absolute;
    right: 0;
    top: 1px;
    margin: 0;
    font-size: 20px;
  }
}

.new-form-group {
  margin-bottom: 40px;
  color: var(--text-default);
}
.new-form-group.governing-state {
  margin-bottom: 20px;
}

.new-form-input {
  position: relative;
  display: inline-block;
  max-width: 100%;
  font-weight: 600;
}
.new-form-input.animate-show {
  display: inline-block;
  animation: fade-in var(--transition-normal) 1 forwards;
}
.new-form-input.showing-component {
  z-index: 10;
}
.new-form-input.text-area {
  padding-bottom: 15px;
}
.new-form-input.with-trailing-space {
  margin-right: 3px;
}
.new-form-input.with-trailing-comma {
  padding-right: 5px;
}
.new-form-input.with-trailing-comma:after {
  position: absolute;
  content: ",";
  right: 0;
  top: 0;
}
.new-form-input.with-trailing-period {
  padding-right: 5px;
}
.new-form-input.with-trailing-period:after {
  position: absolute;
  content: ".";
  right: 0;
  top: 0;
}
.new-form-input.with-trailing-percent {
  padding-right: 20px;
}
.new-form-input.with-trailing-percent:after {
  position: absolute;
  content: "%";
  right: 0;
  top: 0;
}
.new-form-input.with-trailing-period-and-percent {
  padding-right: 20px;
}
.new-form-input.with-trailing-period-and-percent:after {
  position: absolute;
  content: "%.";
  right: 0;
  top: 0;
}
.new-form-input.with-dollar-sign .currency-symbol {
  padding-right: 4px;
}
.new-form-input.text-area {
  display: block;
  font-weight: 500;
}
.invisible-field-validator {
  position: relative;
  z-index: 2;
  width: 40px;
  height: 0px;
}
.invisible-field-validator input[type=text].invisible-field-input {
  height: 0px;
  padding: 0px;
  width: 0px;
  border: 0px;
}

input.new-form-control {
  position: relative;
  display: inline-block;
  height: 38px;
  max-width: 99%;
  padding: 0;
  line-height: 1.45;
  font-size: inherit;
  color: var(--text-default);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--text-default);
  appearance: none;
  border-radius: 0;
  box-shadow: none;
}
input.new-form-control:hover {
  border-bottom-color: var(--color-primary);
}
input.new-form-control:focus {
  border-bottom: 1px solid var(--color-primary);
  box-shadow: 0 1px 0 var(--color-primary);
}
.has-success input.new-form-control {
  border-color: var(--border-darker);
  box-shadow: none;
}
.has-success input.new-form-control:focus {
  border-color: var(--color-primary);
  box-shadow: inset 0 -1px 0 var(--color-primary);
}
.has-error input.new-form-control {
  border-color: var(--border-darker);
  box-shadow: none;
}
.has-error input.new-form-control:focus {
  border-color: var(--color-primary);
  box-shadow: inset 0 -1px 0 var(--color-primary);
}
@media (min-width: 768px) {
  input.new-form-control {
    height: 38px;
  }
}

textarea.new-form-control {
  min-height: 200px;
  width: 100%;
  padding: 11px 10px 9px;
  font-size: 14px;
  line-height: 1.428571429;
  color: var(--text-default);
  border: 1px solid var(--border-darker);
  resize: vertical;
  appearance: none;
  border-radius: 4px;
  box-shadow: none;
}
textarea.new-form-control:focus {
  border-color: var(--color-primary);
  box-shadow: none;
}
textarea.new-form-control:hover {
  border-color: var(--color-primary);
}
.has-success textarea.new-form-control {
  box-shadow: none;
}
.has-success textarea.new-form-control:focus {
  box-shadow: none;
}
.has-error textarea.new-form-control {
  border-color: var(--border-darker);
  box-shadow: none;
}
.has-error textarea.new-form-control:focus {
  border-color: var(--color-primary);
  box-shadow: none;
}

.new-form-text {
  position: relative;
  z-index: 1;
  margin-right: 3px;
}
.checkbox-label .new-form-text {
  font-size: 22px;
}

.new-form-span {
  position: relative;
  z-index: 1;
}

.new-form-input-money-sign {
  font-weight: 600;
}

.new-agreeement-governing-state .dropdown-label {
  min-width: 100px;
}

.new-form-country .Select__menu {
  width: 240px !important;
}

.new-agreeement-payment-type .Select__menu {
  width: 180px !important;
}

.new-agreement-payment-amount {
  min-width: 74px;
}

.new-form-wrap .checkbox-toggle {
  top: 14px;
}

.new-agreement-milestones {
  margin-top: 40px;
}

.milestone-group {
  position: relative;
  margin-bottom: 20px;
  color: var(--text-muted);
}
@media (min-width: 500px) {
  .milestone-group {
    margin-bottom: 5px;
  }
}

.milestone-group-value-amount {
  margin-right: 20px;
  color: var(--text-lightest);
  font-size: 14px;
}

.milestone-add-fields {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.new-form-advanced-toggle {
  font-size: 18px;
  font-weight: 600;
  user-select: none;
}

.new-form-advanced-toggle-show {
  display: inline;
}
.new-form-advanced-toggle.showing .new-form-advanced-toggle-show {
  display: none;
}

.new-form-advanced-toggle-hide {
  display: none;
}
.new-form-advanced-toggle.showing .new-form-advanced-toggle-hide {
  display: inline;
}

.new-form-advanced-toggle-text {
  margin-right: 5px;
}

.new-form-advanced-toggle-arrow {
  position: relative;
  display: inline-block;
  top: 2px;
  line-height: 0;
  font-size: 18px;
  transition: all var(--transition-slow) ease;
}
.new-form-advanced-toggle.showing .new-form-advanced-toggle-arrow {
  transform: rotate(180deg);
}

.new-form-advanced-section {
  position: relative;
  display: none;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 22px;
  font-weight: 400;
  line-height: 50px;
}
.new-form-advanced-section:last-child {
  padding-bottom: 0;
}

.new-form-step4-details {
  margin-top: 0px;
  font-size: 16px;
}

.form-help.agreement-form-help {
  right: auto;
  left: 118%;
  width: 64%;
}
.form-help.agreement-form-help.scope-of-work {
  top: 49px;
}
@media (min-width: 768px) {
  .new-form-group.showing-help .form-help.agreement-form-help, .form-help.agreement-form-help.showing-help {
    display: block;
    z-index: 0;
    animation: form-tip-fade-in var(--transition-normal) 1 forwards;
  }
  .new-form-group.removing-help .form-help.agreement-form-help, .form-help.agreement-form-help.removing-help {
    z-index: 0;
    animation: form-tip-fade-out var(--transition-normal) 1 forwards;
  }
}

.agreement-form-help-arrow-icon {
  position: relative;
  top: 1px;
  margin-left: 4px;
  font-size: 0.9em;
}

.agreement-modal-help {
  display: none;
  margin-top: 40px;
  padding: 30px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: default;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.new-form-bottom {
  padding-top: 40px;
  text-align: center;
}

.new-form-step-btn {
  min-width: 300px;
}

.agreements-invoicing-subtitle {
  font-size: 20px;
}

.agreements-invoice-generation-settings {
  padding: 24px 40px;
  margin-bottom: 28px;
  background: var(--bg-grey-fa);
}
.agreements-invoice-generation-settings label {
  margin: 0;
  font-size: 20px;
  font-weight: normal;
}
.agreements-invoice-generation-settings i {
  top: 2px;
}

.auto-invoice-gen-schedule {
  font-size: 18px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .auto-invoice-gen-schedule {
    margin-top: 0;
  }
}

.auto-invoice-gen-schedule-loading {
  padding: 30px 30px 28px;
  text-align: center;
  color: var(--text-lightest);
  font-weight: 500;
  font-size: 16px;
  background: var(--bg-grey-fa);
  border: 1px solid var(--border-content);
}

.auto-invoice-gen-schedule-item {
  position: relative;
  font-size: 12px;
  line-height: 1.41;
  font-weight: 500;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  margin-bottom: 30px;
  border-radius: 6px;
}
@media (min-width: 600px) {
  .auto-invoice-gen-schedule-item {
    font-size: 16px;
  }
}
.auto-invoice-gen-schedule-item .auto-invoice-gen-schedule-item-content {
  padding: 25px 20px 23px 65px;
}

.deposit-settings {
  border-top: 1px solid var(--border-content);
}

.auto-invoice-gen-schedule-item-num {
  position: absolute;
  left: 22px;
  top: 22px;
  bottom: 0;
  width: 28px;
  height: 28px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  padding-top: 2px;
  border-radius: 100px;
  border: 1px var(--color-primary) solid;
}

.auto-invoice-gen-schedule-item-name {
  font-weight: 600;
}
@media (min-width: 600px) {
  .auto-invoice-gen-schedule-item-name {
    float: left;
    display: inline-block;
  }
}

.auto-invoice-gen-schedule-item-amount {
  display: block;
  font-weight: 400;
  color: var(--text-lighter);
}
@media (min-width: 600px) {
  .auto-invoice-gen-schedule-item-amount {
    float: left;
    display: inline-block;
    margin-left: 6px;
  }
}

.auto-invoice-gen-schedule-item-date {
  color: var(--text-muted);
}
.auto-invoice-gen-schedule-item-date span {
  color: var(--text-muted);
}
@media (min-width: 600px) {
  .auto-invoice-gen-schedule-item-date {
    float: right;
    margin-left: 20px;
  }
}

.new-form-group .new-form-control input[type=text] {
  max-width: 90px;
}
.new-form-group .dropdown-contained {
  display: inline-block;
}
.new-form-group .Select__control {
  height: 38px;
  cursor: pointer;
  border: none;
  border-bottom: 1px dashed var(--text-default);
  border-radius: 0;
  flex-grow: 2;
  line-height: normal;
}
.new-form-group .Select__menu {
  z-index: 10;
  min-width: 180px;
  line-height: 1.5;
  font-size: 18px;
}
.new-form-group .Select__state_governing_law {
  width: 190px;
}
.new-form-group .Select__dropdown-indicator {
  padding: 7px 0;
}
.new-form-group .Select__single-value,
.new-form-group .Select__placeholder {
  font-size: 22px;
  margin: 0;
  max-width: 100%;
  text-overflow: none;
  position: static;
  transform: none;
  line-height: normal;
}
.new-form-group .Select__single-value, .new-form-group .Select__single-value + div,
.new-form-group .Select__placeholder,
.new-form-group .Select__placeholder + div {
  line-height: normal;
}
.new-form-group .SingleDatePickerInput {
  border-radius: 0;
  border: 0;
  border-bottom: 1px dashed #ccc;
  text-align: unset;
  line-height: normal;
}
.new-form-group .DateInput_input {
  text-align: left;
  padding: 0;
  height: 36px;
  width: 165px;
  font-size: 22px;
  line-height: 2.5;
  margin-left: 6px;
  font-weight: 600;
}

.agreements-list-item {
  position: relative;
  margin-bottom: 4px;
  padding: 20px 20px 16px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--black) 7%, transparent);
  border-radius: 4px;
  transition: all var(--transition-fast) ease;
}
.agreements-list-item:last-child {
  margin-bottom: 0;
}
.agreements-list-item:hover {
  box-shadow: 0 2px 5px color-mix(in srgb, var(--black) 8%, transparent);
}
.agreements-list-item.animating-out {
  overflow: hidden;
  animation: fade-out-dashboard-item var(--transition-slow) ease forwards;
}

.agreements-list-item-left {
  position: relative;
}
@media (min-width: 600px) {
  .agreements-list-item-left {
    padding-right: 250px;
  }
}

.agreements-list-item-status {
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  color: var(--text-lighter);
}

.agreements-list-item-contact-name {
  display: block;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 600px) {
  .agreements-list-item-contact-name {
    font-size: 22px;
  }
}

.agreements-list-item-date {
  display: inline-block;
  float: left;
  margin-top: 10px;
  text-align: left;
  font-size: 12px;
  color: var(--text-lighter);
}
@media (min-width: 600px) {
  .agreements-list-item-date {
    position: absolute;
    top: 20px;
    right: 70px;
    margin-top: 0;
    text-align: right;
    font-size: 14px;
  }
}

.agreements-list-item-rate {
  display: inline-block;
  float: right;
  margin-top: 10px;
  color: var(--text-lighter);
  text-align: right;
  font-size: 12px;
}
@media (min-width: 600px) {
  .agreements-list-item-rate {
    position: absolute;
    top: 20px;
    right: 230px;
    margin-top: 0;
    font-size: 14px;
  }
}

.agreements-list-item-actions {
  width: 100%;
  margin-top: 10px;
}
@media (min-width: 600px) {
  .agreements-list-item-actions {
    position: absolute;
    right: 70px;
    top: 37px;
    width: auto;
  }
}

.agreements-list-item-action {
  width: auto;
  margin-right: 5px;
  opacity: 0.6;
}
.agreements-list-item-action:hover {
  opacity: 1;
}
@media (min-width: 768px) {
  .agreements-list-item-action {
    margin-right: auto;
    margin-left: 5px;
  }
}

.agreements-list-item.archived .agreements-list-item-remind {
  display: none !important;
}

.agreements-list-item.archived .agreements-list-item-revert {
  display: none !important;
}

.agreements-list-item.archived .agreements-list-item-archive {
  display: none !important;
}

.agreements-list-item-restore {
  display: none !important;
}
.agreements-list-item.archived .agreements-list-item-restore {
  display: block !important;
}

.agreements-list-item.archived .agreements-list-item-mark-signed {
  display: none !important;
}

.agreements-list-item-dd-toggle {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  font-size: 26px;
  width: 50px;
  text-align: center;
}
@media (min-width: 600px) {
  .agreements-list-item-dd-toggle {
    background-color: var(--bg-grey-fc);
    border-left: 1px solid #f1f1f1;
    border-radius: 0 4px 4px 0;
  }
}
.agreements-list-item-dd-toggle .dropdown-menu {
  left: auto;
  right: 3px;
  top: 40px;
}

.agreements-list-item-dd-toggle-link {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  padding: 20px 0;
  color: var(--text-lighter);
  cursor: pointer;
  font-size: 14px;
}
.agreements-list-item-dd-toggle-link:focus, .agreements-list-item-dd-toggle-link:visited {
  color: var(--text-lighter);
}
.agreements-list-item-dd-toggle-link:hover {
  color: var(--text-lighter);
}
.agreements-list-item-dd-toggle-link .ion-chevron-down:before {
  transition: all var(--transition-normal) ease;
}
.agreements-list-item-dd-toggle.open .agreements-list-item-dd-toggle-link .ion-chevron-down:before {
  transform: rotate(180deg);
}

.agreement-templates-empty {
  padding: 90px 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-lighter);
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--black) 3%, transparent);
}
@media (min-width: 768px) {
  .agreement-templates-empty {
    font-size: 16px;
  }
}

.list-item.agreement-template-item {
  cursor: default;
}

.agreement-template-editor .ghost-textarea {
  min-height: 32px;
}
.agreement-template-editor .agreement-template-header {
  text-align: center;
  margin-bottom: 20px;
}
.agreement-template-editor .agreement-template-name {
  font-size: 24px;
  font-weight: 600;
}
.agreement-template-editor .agreement-template-name .ghost-form-control, .agreement-template-editor .agreement-template-name .ghost-form-display {
  font-size: inherit;
}
.agreement-template-editor .agreement-template-name input.ghost-form-control, .agreement-template-editor .agreement-template-name input.ghost-form-display {
  width: 100%;
  text-align: center;
}
.agreement-template-editor .agreement-template-remove-icon {
  color: var(--text-lightest);
  margin-left: 5px;
}
.agreement-template-editor .agreement-template-remove-icon:hover {
  color: var(--color-danger);
}
.agreement-template-editor .agreement-template-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--border-content);
}
.agreement-template-editor .agreement-template-section-header {
  font-weight: 600;
  font-size: 18px;
  padding-left: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.agreement-template-editor .agreement-template-section-header .ghost-form-control, .agreement-template-editor .agreement-template-section-header .ghost-form-display {
  font-size: inherit;
  width: auto;
}
.agreement-template-editor .agreement-template-section-title .ghost-form-control, .agreement-template-editor .agreement-template-section-title .ghost-form-display {
  font-size: inherit;
}
.agreement-template-editor .agreement-template-section-title .input-group-addon {
  font-size: inherit;
}
.agreement-template-editor .agreement-template-section-text {
  margin-left: 0;
}
.agreement-template-editor .agreement-template-section-items {
  margin: 10px 0 0 10px;
}
.agreement-template-editor .agreement-template-section-item {
  margin-bottom: 10px;
}
.agreement-template-editor .agreement-template-section-item-header {
  font-weight: 600;
  font-size: 16px;
  padding-left: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.agreement-template-editor .agreement-template-section-item-header .ghost-form-control, .agreement-template-editor .agreement-template-section-item-header .ghost-form-display {
  font-size: inherit;
  width: auto;
}
.tax-profile-container-notice {
  max-width: 640px;
  margin: 0 auto 20px;
}

.tax-profile-container {
  max-width: 640px;
  margin: 0 auto 40px;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--black) 3%, transparent);
}

.tax-profile-form-toggles {
  display: flex;
  padding: 3px 40px 0;
  border-bottom: 1px solid var(--border-content-alt);
}

.tax-profile-form-toggle {
  padding: 10px 0 10px 0;
  margin-right: 20px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.tax-profile-form-toggle.active {
  color: var(--text-muted);
  box-shadow: 0 1px 0;
}

.tax-profile-form {
  display: none;
  padding: 40px;
}
.tax-profile-form.active {
  display: block;
}

.tax-profile-ctas {
  max-width: 600px;
  margin: 40px auto 0;
  text-align: center;
}

.timesheets-page {
  min-height: 600px;
}
@media print {
  .timesheets-page {
    width: 1000px;
  }
}

.timesheets-auth-notice {
  margin-bottom: 40px;
  padding: 60px 30px;
  font-size: 16px;
  text-align: center;
  background-color: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--black) 3%, transparent);
}

.timesheets-page-row {
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .timesheets-page-row {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
  }
}

.timesheets-content-header {
  margin-bottom: 40px;
}

.timesheets-content-project-name {
  margin-bottom: 5px;
  font-weight: 600;
}

.timesheets-content-project-back-btn {
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-lighter);
}
.timesheets-content-project-back-btn:active, .timesheets-content-project-back-btn:visited, .timesheets-content-project-back-btn:hover {
  color: var(--text-lighter);
}

.timesheets-content-project-name-icon {
  margin-right: 10px;
  font-size: 12px;
}

.timesheets-unavailable {
  padding: 80px 40px;
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}

.timesheets-details-summary {
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
  cursor: default;
}
@media (min-width: 992px) {
  .timesheets-details-summary {
    border-top: none;
  }
}
.timesheets-details-summary .btn {
  max-width: 700px;
}

.timesheets-details-summary-content-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 60px 0 20px;
}
@media (min-width: 992px) {
  .timesheets-details-summary-content-wrap {
    padding-top: 0;
  }
}

.timesheets-details-summary-content {
  flex: 50%;
  margin-bottom: 20px;
}
@media (min-width: 992px) {
  .timesheets-details-summary-content {
    flex: 100%;
  }
}
@media (min-width: 1200px) {
  .timesheets-details-summary-content {
    flex: 50%;
  }
}
.timesheets-details-summary-content .display-label {
  margin-bottom: 5px;
  color: var(--text-muted);
}

.timesheets-details-summary-content-locked {
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: 14px;
  border-radius: 4px;
}

.timesheets-details-summary-value {
  display: inline-block;
  font-size: 20px;
  font-weight: 500;
  color: var(--text-default);
}

.timesheets-details-create-invoice-link {
  margin-top: 15px;
}

.timesheets-details-create-invoice-link-icon {
  padding-left: 2px;
  font-size: 0.8em;
}

.timesheets-details-summary-needs-refresh {
  margin-bottom: 40px;
}

.timesheets-details-summary-needs-refresh-notice {
  padding-left: 70px;
  font-size: 16px;
}

.timesheets-details-summary-needs-refresh-icon {
  position: absolute;
  top: 28px;
  left: 23px;
  opacity: 0.7;
}
.timesheets-details-summary-needs-refresh-icon #new-timer-open-added {
  fill: var(--color-primary);
}

.timesheets-billed-empty {
  padding: 60px 20px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-lighter);
  border: 1px solid var(--border-content);
  border-radius: 10px;
}
@media (min-width: 480px) {
  .timesheets-billed-empty {
    padding: 80px 40px;
    font-size: 20px;
  }
}

.timesheets-billed-empty-in {
  display: block;
  text-align: center;
  font-weight: 400;
  font-size: 16px;
  color: var(--text-lightest);
}

.timesheets-billed-item {
  position: relative;
  display: block;
  padding: 20px 0 20px 30px;
  background: var(--bg-content);
  border-top: 1px solid var(--border-content);
}
.timesheets-billed-item, .timesheets-billed-item:focus, .timesheets-billed-item:visited {
  color: var(--text-default);
}
.timesheets-billed-item:hover, .timesheets-billed-item:active {
  color: color-mix(in srgb, var(--text-default) 97%, transparent);
}
.timesheets-billed-item:last-child {
  border-bottom: 1px solid var(--border-content);
}
.timesheets-billed-item .list-item-status {
  top: 50%;
  transform: translateY(-50%);
}

.timesheets-billed-item-header {
  position: relative;
  display: block;
  margin-bottom: 2px;
  padding-right: 90px;
  font-size: 16px;
  font-weight: 600;
}
.timesheets-billed-item-header, .timesheets-billed-item-header:focus, .timesheets-billed-item-header:visited, .timesheets-billed-item-header:hover, .timesheets-billed-item-header:active {
  color: var(--text-default);
}

.timesheets-billed-item-hours {
  position: absolute;
  right: 0;
  top: 0;
  font-weight: 500;
}

.timesheets-billed-item-dates {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-lighter);
}

.timesheets-billed-item-download-links {
  position: absolute;
  display: none;
  right: 0;
  bottom: 18px;
}
@media (min-width: 768px) {
  .timesheets-billed-item-download-links {
    display: block;
  }
}

.timesheets-billed-item-download-link {
  display: inline-block;
  float: right;
  padding-right: 0;
  font-size: 12px;
  color: var(--color-primary);
  background: transparent;
  appearance: none;
  border: 0;
}

.timesheets-billed-item-download-link-icon {
  position: relative;
  top: 1px;
  margin-right: 6px;
  font-size: 14px;
}

.timesheets-billed-item-invoice {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-lighter);
}
@media (min-width: 992px) {
  .timesheets-billed-item-invoice {
    flex-direction: row;
    gap: 10px;
  }
}

.timesheets-billed-item-status {
  display: block;
  text-transform: capitalize;
  color: var(--text-lighter);
}
@media (min-width: 600px) {
  .timesheets-billed-item-status {
    display: inline-block;
    margin-right: 10px;
  }
}

.unbilled-entries-col-headers {
  position: relative;
  margin-bottom: 10px;
  padding-left: 20px;
  padding-right: 60px;
}

.unbilled-entries-col-header {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  color: var(--text-muted-alt);
  cursor: default;
}

.unbilled-entries-col-header-first {
  position: absolute;
  left: 0;
}

.unbilled-entries-list {
  border-bottom: 1px solid var(--border-content);
}

.unbilled-entry {
  position: relative;
}

.unbilled-entry-in {
  display: block;
  padding: 16px 30px 16px 0;
  border-top: 1px solid var(--border-content);
  transition: all var(--transition-normal) ease;
}
.unbilled-entry-in, .unbilled-entry-in:focus, .unbilled-entry-in:visited {
  color: var(--text-default);
}
.unbilled-entry-in.unbilled-entry-in-link:hover, .unbilled-entry-in.unbilled-entry-in-link:active {
  color: var(--text-default);
}
.unbilled-entry-in.ongoing {
  opacity: 0.8;
}

.unbilled-entry-visible-xs {
  display: inline-block;
  margin-right: 5px;
  font-size: 12px;
  color: var(--text-lighter);
}
@media (min-width: 768px) {
  .unbilled-entry-visible-xs {
    display: none;
  }
}

.unbilled-entry-col-date {
  margin-bottom: 5px;
  font-size: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
}
@media (min-width: 768px) {
  .unbilled-entry-col-date {
    margin-bottom: 0;
    font-size: 14px;
  }
}

.unbilled-entry-col-owner {
  position: absolute;
  right: 30px;
  top: 15.5px;
}

.unbilled-entry-col-owner-name {
  text-transform: capitalize;
  color: var(--text-default);
  padding-right: 10px;
  font-family: var(--font-body);
}

.unbilled-entry-col-notes {
  position: relative;
  margin-top: 10px;
  padding-left: 26px;
  color: var(--text-muted);
  white-space: pre-wrap;
}
.unbilled-entry-col-notes.col-task-completed {
  text-decoration: line-through;
}

.unbilled-entry-col-notes-icon {
  position: absolute;
  left: 0px;
  top: -1px;
  color: var(--text-lighter);
  font-size: 17px;
}

.unbilled-entries-empty {
  padding: 60px 20px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-lighter);
  border: 1px solid var(--border-content);
  border-radius: 10px;
}
@media (min-width: 480px) {
  .unbilled-entries-empty {
    padding: 80px 40px;
    font-size: 20px;
  }
}

.unbilled-entries-empty-in {
  display: block;
  text-align: center;
  font-weight: 400;
  font-size: 16px;
  color: var(--text-lightest);
}

.timesheets-details-timesheets {
  display: none;
}

.timesheets-totals-by-member {
  margin-bottom: 40px;
}

.timesheets-totals-by-member-item {
  position: relative;
  padding-left: 60px;
  margin-bottom: 40px;
  cursor: default;
}
.timesheets-totals-by-member-item:last-child {
  margin-bottom: 0;
}

.timesheets-totals-by-member-item-name {
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-default);
}

.timesheets-totals-by-member-itemm-value {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.timesheets-totals-by-member-item-avatar {
  position: absolute;
  left: 0;
  top: 7px;
}

.timesheets-show-summary-content-wrap {
  display: flex;
  flex-direction: column;
  padding: 40px 0 60px;
}
@media (min-width: 768px) {
  .timesheets-show-summary-content-wrap {
    flex-direction: row;
    align-items: center;
    padding: 60px 0;
  }
}

.timesheets-show-summary-content {
  flex: 1;
}
.timesheets-show-summary-content.timesheets-show-summary-content--hours {
  flex-shrink: 1;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .timesheets-show-summary-content.timesheets-show-summary-content--hours {
    margin-bottom: 0;
  }
}
.timesheets-show-summary-content.timesheets-show-summary-content--col-right {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}
@media (min-width: 768px) {
  .timesheets-show-summary-content.timesheets-show-summary-content--col-right {
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-start;
    margin-top: 0;
    flex-basis: 25%;
  }
}
.timesheets-show-summary-content.timesheets-show-summary-content--locked {
  margin-top: 40px;
}
@media (min-width: 768px) {
  .timesheets-show-summary-content.timesheets-show-summary-content--locked {
    margin-top: 0;
  }
}
.timesheets-show-summary-content .btn {
  width: 100%;
}
@media (min-width: 768px) {
  .timesheets-show-summary-content .btn {
    width: auto;
  }
}
.timesheets-show-summary-content .display-label {
  margin-bottom: 5px;
  color: var(--text-muted);
}

.timesheets-show-summary-locked {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 15px;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 14px;
  cursor: default;
  background: var(--bg-grey-f8);
  border-radius: 4px;
}

.timesheets-show-summary-locked-icon {
  margin-top: 3px;
  width: 12px;
  height: auto;
  flex-shrink: 0;
}
.timesheets-show-summary-locked-icon path {
  fill: var(--text-muted);
}

.timesheets-show-summary-value {
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-default);
}

.timesheets-show-summary-subvalue {
  margin-left: 10px;
  color: var(--text-lighter);
  font-weight: 500;
  font-size: 14px;
}

.DateRangePicker__picker--portal {
  z-index: 1050;
}

.time-entries-create-invoice-dates {
  margin-bottom: 20px;
}

.time-entries-create-invoice-rounding-notice {
  margin: -5px 0 20px;
  width: 100%;
  padding: 20px 15px 15px;
  font-weight: 400;
  font-size: 12px;
  background: var(--bg-grey-f8);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 0 0 6px 6px;
}
.time-entries-create-invoice-rounding-notice .page-form-info-icon {
  top: 2px;
}

.time-entries-create-invoice-rounding-note {
  margin-top: 20px;
}

.time-entries-create-invoice-detail {
  font-size: 14px;
  font-weight: 400;
  padding: 15px 20px;
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
}

.time-entries-create-invoice-detail-label {
  text-align: left;
}

.time-entries-create-invoice-detail-value {
  text-align: right;
}

.unbilled-time-entries-notice {
  margin-top: 15px;
  padding-top: 15px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-default);
  border-top: 1px solid var(--border-content-alt);
}

.unbilled-time-entries-warning-label {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.unbilled-time-entries-notice-message {
  margin-bottom: 10px;
}
.unbilled-time-entries-notice-message:last-child {
  margin: 0;
}

.log-time-form-content .DateRangePickerInput,
.log-time-form-content .DateRangePicker {
  text-align: center;
  width: 100%;
}

.log-time-form-hours-label {
  margin-bottom: 20px;
}

.log-time-form-input {
  font-size: 16px;
  padding: 10px;
  max-width: 160px;
  border: 1px solid var(--border-field);
  border-radius: 4px;
}
.log-time-form-input:hover, .log-time-form-input:focus {
  box-shadow: none;
  border-color: var(--color-primary);
}
.log-time-form-input.w100 {
  max-width: 100%;
}

.settings-integrations {
  margin: 0 auto 60px;
}

.settings-integrations-group {
  position: relative;
  margin-bottom: 10px;
  padding: 30px 30px 26px;
  background: var(--bg-content);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--black) 15%, transparent);
}
.settings-integrations-group.zapier {
  border-left: 5px solid var(--zapier-orange);
}
.settings-integrations-group.freshbooks {
  border-left: 5px solid var(--freshbooks-blue);
}
.settings-integrations-group.slack {
  border-left: 5px solid var(--slack-blue);
  font-size: 18px;
}
.settings-integrations-group.google-calendar {
  border-left: 5px solid var(--google-calendar-blue);
  font-size: 18px;
}
.settings-integrations-group.gmail {
  border-left: 5px solid var(--gmail-green);
}
.settings-integrations-group.gmail p {
  font-size: 18px;
}

.settings-integration-logo {
  width: 80px;
  margin-bottom: 20px;
}
.settings-integration-logo.freshbooks {
  width: 110px;
  margin-top: -5px;
}
.settings-integration-logo.google-calendar {
  width: 60px;
}
.settings-integration-logo.gmail {
  max-width: 42px;
}

.settings-integration-coming-soon {
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
}

.settings-integration-info-label {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-lightest);
}

.settings-integration-key-row {
  margin-bottom: 20px;
  font-size: 16px;
  color: var(--text-muted-alt);
}

.settings-integration-key {
  word-wrap: break-word;
}

.settings-integration-delete {
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-danger);
  font-size: 12px;
}
.settings-integration-delete:focus, .settings-integration-delete:visited {
  color: var(--color-danger);
}
.settings-integration-delete:hover, .settings-integration-delete:active {
  color: color-mix(in srgb, var(--color-danger) 97%, transparent);
}

.settings-integration-generate-form {
  display: inline-block;
  float: left;
  margin-right: 20px;
}

.settings-integrations-btn {
  position: relative;
  margin-top: 30px;
  width: 100%;
}
@media (min-width: 480px) {
  .settings-integrations-btn {
    width: auto;
  }
}
@media (min-width: 768px) {
  .settings-integrations-btn {
    position: absolute;
    right: 30px;
    bottom: 30px;
    margin-top: 0px;
  }
}
.settings-integrations-btn.btn-blue {
  color: var(--color-primary-contrast);
  background: var(--stripe-blue-1);
  border-color: var(--stripe-blue-1);
  background-image: linear-gradient(to bottom, var(--stripe-blue-1) 0%, var(--stripe-blue-2) 100%);
}
.settings-integrations-btn.btn-blue:focus, .settings-integrations-btn.btn-blue:visited {
  background: var(--stripe-blue-1);
  border-color: var(--stripe-blue-1);
  background-image: linear-gradient(to bottom, var(--stripe-blue-1) 0%, var(--stripe-blue-2) 100%);
}
.settings-integrations-btn.btn-blue:hover, .settings-integrations-btn.btn-blue:active {
  background: color-mix(in srgb, var(--stripe-blue-1) 98%, transparent);
  border-color: color-mix(in srgb, var(--stripe-blue-1) 98%, transparent);
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--stripe-blue-1) 98%, transparent) 0%, color-mix(in srgb, var(--stripe-blue-2) 98%, transparent) 100%);
}

.settings-integrations-upgrade {
  font-size: 18px;
}

.gmail-integration-details {
  margin-top: 35px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 15px;
}
.gmail-integration-details .form-label {
  font-size: 12px;
}

.integrations {
  margin-bottom: 60px;
}

.integrations-title {
  font-size: 21px;
  line-height: 29px;
  margin-bottom: 30px;
}

.integrations-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

.integrations-integration {
  position: relative;
  width: 100%;
  padding: 20px;
  cursor: pointer;
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
  background: var(--bg-panel);
}
@media (min-width: 768px) {
  .integrations-integration {
    max-width: calc((100% - 40px) / 3);
  }
  .integrations-integration:hover {
    border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
    box-shadow: 0 0 9px color-mix(in srgb, var(--bg-shadow) 3%, transparent);
  }
}
@media (min-width: 768px) {
  .integrations-integration {
    max-width: calc((100% - 40px) / 3);
  }
}
.integrations-integration.connected {
  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.integration-badge-beta {
  background-color: var(--bg-grey-9);
  border-radius: 2px;
  font-weight: 500;
  letter-spacing: 0.15em;
  padding: 4px 9px 5px;
}

.integrations-integration-icon {
  min-width: 20px;
  min-height: 20px;
  max-width: 95px;
  max-height: 40px;
  margin: 15px 0;
}
.integrations-integration-icon.quickbooks_integration {
  position: relative;
  max-width: 192px;
  max-height: 60px;
  margin: 11px 0;
}

.integrations-integration-connected {
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--color-primary);
  font-size: 1.5em;
}

.integrations-integration-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: var(--text-default);
  margin: 15px 0 5px;
}

.integrations-integration-description {
  font-size: 14px;
  line-height: 22px;
  color: var(--text-default);
}

.integrations-footer {
  padding: 15px;
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
  margin: 20px 0 0;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  line-height: 160%;
}
.integrations-footer p {
  margin: 0;
}
.integrations-footer a {
  color: var(--color-primary);
}

.integration-modal .form-label {
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 500;
}
.integration-modal .form-field {
  font-size: 14px;
  line-height: 19px;
  color: var(--text-muted-alt);
}
.integration-modal .btn-block {
  margin-top: 40px;
}

.integration-icon {
  max-width: 115px;
  max-height: 40px;
}
.integration-icon.quickbooks_integration {
  position: relative;
  max-width: 192px;
  max-height: 60px;
  margin: 0 0 10px;
}

.integration-status-label {
  position: absolute;
  top: 40px;
  right: 40px;
}

.integration-title {
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  color: var(--text-default);
  margin: 25px 0 15px;
}

.integration-connected {
  float: right;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
}
.integration-connected i {
  margin-left: 10px;
  font-size: 0.8em;
}

.integration-description {
  font-size: 16px;
  color: var(--text-default);
  margin: 0;
}

.integration-separator {
  margin: 25px 0;
  border-color: var(--border-content-alt);
}

.integration-fixed-text {
  font-family: monospace;
  font-size: 0.9em;
}

.integration-links {
  font-size: 14px;
  margin: 30px 0;
}

.integration-modal-features-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
  background-color: var(--bg-grey-f8);
  border-radius: 6px;
}

.integration-modal-features-list-item {
  position: relative;
  padding-left: 20px;
}

.integration-modal-features-list-item-icon {
  position: absolute;
  width: 9px;
  height: auto;
  top: 7px;
  left: 0;
}

.integration-modal-setting-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
  background-color: var(--bg-grey-f8);
  border-radius: 6px;
}

.integration-modal-tax-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.integration-modal-tax-items .form-label {
  font-weight: 400;
}
@media (min-width: 768px) {
  .integration-modal-tax-items {
    gap: 12px;
  }
}

.integration-modal-setting-section.hris-form .integration-modal-tax-row {
  padding: 10px 0;
}
@media (min-width: 768px) {
  .integration-modal-tax-row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .integration-modal-setting-section.hris-form .integration-modal-tax-row {
    border-bottom: 1px solid var(--border-content);
  }
  .integration-modal-setting-section.hris-form .integration-modal-tax-row:first-child {
    border-top: 1px solid var(--border-content);
  }
  .integration-modal-setting-section.hris-form .integration-modal-tax-row:last-child {
    border-bottom: none;
  }
}

.integration-modal-setting-section.hris-form {
  padding-bottom: 0;
}
.integration-modal-setting-section.hris-form .integration-modal-tax-items {
  gap: 0;
}
.integration-modal-setting-section.hris-form .integration-modal-column-headers {
  border-bottom: 1px solid var(--border-content);
}

.integration-setup-policy-types-title {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0%;
  vertical-align: middle;
  margin-bottom: 15px;
}

.integration-setup-policy-types-title + .mt30 {
  margin-top: 20px !important;
}

.integration-setup-policy-types-title-description {
  margin-top: 10px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: var(--text-muted);
}

.integration-historical-import-box {
  margin-bottom: 30px;
  padding: 20px;
  border-radius: 8px;
  background-color: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
}

.integration-historical-import-description {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.integration-historical-continue-link {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: var(--color-primary);
  cursor: pointer;
}
.integration-historical-continue-link:hover {
  color: color-mix(in srgb, var(--color-primary) 90%, var(--black));
  text-decoration: underline;
}

.integration-historical-import-link-container {
  margin-top: 20px;
  padding: 16px;
  background-color: color-mix(in srgb, var(--color-primary) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: 8px;
  transition: all var(--transition-medium) ease;
}
.integration-historical-import-link-container:hover {
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.integration-historical-import-link-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 15px;
  line-height: 24px;
  color: var(--color-primary);
  text-align: left;
  transition: all var(--transition-medium) ease;
}
.integration-historical-import-link-btn:hover {
  color: color-mix(in srgb, var(--color-primary) 90%, var(--black));
}
.integration-historical-import-link-btn:focus {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  outline-offset: 2px;
}
.integration-historical-import-link-btn span {
  flex: 1;
}

.integration-historical-import-daterange {
  position: relative;
}
.integration-historical-import-daterange .integration-historical-import-calendar-icon {
  position: absolute;
  left: 12px;
  top: calc(50% + 2px);
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}
.integration-historical-import-daterange .integration-historical-import-calendar-icon svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}
.integration-historical-import-daterange .DateRangePicker {
  width: 100% !important;
}
.integration-historical-import-daterange .DateRangePicker .DateInput {
  width: 50% !important;
}
.integration-historical-import-daterange .DateRangePicker .DateInput .DateInput_input {
  padding-left: 40px !important;
  font-size: 14px !important;
  line-height: 19px !important;
  color: #3a3a3a !important;
}
.integration-historical-import-daterange .DateRangePicker .DateRangePickerInput_calendarIcon {
  display: none !important;
}
.integration-historical-import-daterange .DateRangePickerInput {
  width: 100% !important;
}

.integration-historical-import-btn-container {
  padding-top: 20px;
}
@media (min-width: 992px) {
  .integration-historical-import-btn-container {
    padding-top: 0;
    padding-left: 20px;
  }
}

.settings-checkboxes-title {
  margin: 0;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  color: var(--text-default);
  cursor: default;
}

.settings-checkboxes-description {
  margin-top: 10px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  color: var(--text-lighter);
}

@media (max-width: 767px) {
  .settings-checkboxes-wrapper {
    overflow-x: auto;
  }
}

.settings-checkboxes-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin: 10px 15px 10px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--border-content);
}
.settings-checkboxes-header.settings-checkboxes-header--no-options {
  padding-bottom: 0;
  border-bottom: none;
}
.settings-checkboxes-header > .dropdown-contained {
  min-width: 200px;
  width: 100%;
}
@media (min-width: 768px) {
  .settings-checkboxes-header > .dropdown-contained {
    width: auto;
  }
}
@media (min-width: 768px) {
  .settings-checkboxes-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.settings-checkboxes-features {
  width: 100%;
}
.settings-checkboxes-features thead th {
  padding: 10px 15px;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4em;
  text-transform: uppercase;
  color: var(--text-lighter);
  text-align: center;
  cursor: default;
}
.settings-checkboxes-features thead th:first-child {
  width: 50%;
  text-align: left;
}
.settings-checkboxes-features tbody th {
  min-width: 150px;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-default);
  cursor: default;
}
@media (min-width: 768px) {
  .settings-checkboxes-features tbody th {
    font-size: 16px;
  }
}
.settings-checkboxes-features tbody td {
  padding: 10px 25px;
  text-align: center;
}
.settings-checkboxes-features tbody tr:hover {
  background: var(--bg-grey-fc);
}

.settings-checkboxes-features-checkbox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.settings-checkboxes-features-checkbox .checkbox-toggle {
  position: relative;
  left: auto;
  top: auto;
  cursor: pointer;
}

.settings-checkboxes-tooltip-toggle {
  position: relative;
  top: 1px;
  width: 14px;
  height: auto;
  margin-left: 8px;
}

.settings-data-upgrade-required {
  padding: 30px;
  font-size: 18px;
  color: var(--text-muted-alt);
  font-weight: 400;
}

.settings-data-imexport {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2%;
  row-gap: 20px;
}

.settings-data-imexport-generate-form {
  display: inline-block;
  width: 100%;
}
@media (min-width: 768px) {
  .settings-data-imexport-generate-form {
    flex: 0 0 32%;
  }
}

.settings-data-import-data-content {
  padding: 10px 0 0;
}

.settings-data-import-data-type-copy,
.settings-data-import-label {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
}

.settings-data-import-instructions {
  margin-bottom: 40px;
  margin-top: 40px;
  padding: 40px;
  font-size: 16px;
  color: var(--text-default);
  background: var(--bg-grey-f5);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}
.settings-data-import-instructions a,
.settings-data-import-instructions a:focus,
.settings-data-import-instructions a:visited,
.settings-data-import-instructions a:hover,
.settings-data-import-instructions a:active {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}

.settings-data-import-sample-section {
  font-size: 14px;
  color: var(--text-lighter);
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.settings-data-import-sample-section-in {
  padding: 12px;
}

.settings-data-import-sample-section-item {
  min-height: 70px;
  margin-bottom: 20px;
}

.settings-data-import-sample-label {
  padding: 12px 12px 9px;
  color: var(--text-lighter);
  letter-spacing: 0.075em;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  background: rgba(255, 255, 255, 0.2);
  border-top: 1px solid color-mix(in srgb, var(--black) 8%, transparent);
  margin-top: -22px;
}

.settings-data-import-notes {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--border-content);
}

.import-csv-status-section {
  margin-top: 20px;
  padding: 30px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: var(--text-default);
  background: var(--bg-grey-f5);
  border-radius: 4px;
}
.import-csv-status-section a,
.import-csv-status-section a:focus,
.import-csv-status-section a:visited,
.import-csv-status-section a:hover,
.import-csv-status-section a:active {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}

.import-csv-status-section-copy {
  margin-bottom: 20px;
}

.import-csv-errors-section {
  margin-top: 20px;
  padding: 30px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-danger);
  background: var(--bg-grey-fa);
  border-radius: 4px;
  border: 1px solid var(--border-content);
}
.import-csv-errors-section a,
.import-csv-errors-section a:focus,
.import-csv-errors-section a:visited,
.import-csv-errors-section a:hover,
.import-csv-errors-section a:active {
  color: var(--color-danger);
  font-weight: 600;
  text-decoration: underline;
}

.import-csv-errors-section-copy {
  margin-bottom: 20px;
}

.settings-password-wrapper {
  border: 1px solid var(--border-content);
  transform-origin: top;
  transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease, max-height var(--transition-slow) ease, padding var(--transition-slow) ease;
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  transform: scale(1, 0);
  padding: 0 30px;
}

.settings-password-wrapper.expanded {
  opacity: 1;
  max-height: 1000px;
  transform: scale(1, 1);
  padding: 30px;
}

.settings-receipts-empty {
  position: relative;
  background: var(--bg-content);
  padding: 60px 40px;
  text-align: center;
  font-size: 16px;
  color: var(--text-lighter);
  border: 1px solid var(--border-content-alt);
  border-radius: 10px;
}

.list-item.settings-receipt-item .list-item-in {
  padding-left: 0;
  padding-right: 0;
}

.settings-receipt-item-link.disabled {
  cursor: progress;
  opacity: 0.6;
}

.settings-receipt-item-details {
  padding: 40px;
  margin-top: -5px;
  margin-bottom: 20px;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-top-color: var(--border-content);
  border-radius: 0 0 5px 5px;
}

.settings-receipt-item-currency {
  text-transform: uppercase;
}

.settings-page-in {
  min-height: var(--minimum-page-height-desktop);
  padding: 0 0 60px;
}
@media (min-width: 768px) {
  .settings-page-in {
    padding: 0 0 80px;
  }
}

.settings-section-container {
  margin-bottom: 40px;
  padding: 20px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 3px;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--black) 3%, transparent);
}
@media (min-width: 768px) {
  .settings-section-container {
    padding: 40px;
  }
}

.settings-header {
  margin-bottom: 7px;
  font-size: 16px;
  font-weight: 500;
}

.settings-subheader {
  font-weight: 400;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.settings-invites {
  position: fixed;
  z-index: var(--z-partner-invitations);
  right: 20px;
  bottom: 20px;
  left: 20px;
}
@media (min-width: 768px) {
  .settings-invites {
    right: 78px;
    bottom: 26px;
    left: auto;
  }
}

.settings-invite-bar {
  position: relative;
  margin-bottom: 5px;
  padding: 10px 23px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  background: var(--color-primary);
  border-radius: 30px;
}
.settings-invite-bar:last-child {
  margin-bottom: 0;
}

.settings-invite-notice {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .settings-invite-notice {
    justify-content: flex-start;
  }
}
.settings-invite-notice, .settings-invite-notice:focus, .settings-invite-notice:visited {
  color: var(--color-primary-contrast);
}
.settings-invite-notice:hover, .settings-invite-notice:visited {
  color: var(--color-primary-contrast);
  text-decoration: underline;
}

.settings-invite-notice-action {
  position: relative;
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  margin-left: 10px;
}

.settings-invite-notice-icon {
  width: 14px;
  height: auto;
  margin-right: 10px;
}

.subscription-annual-upgrade-notice {
  display: none;
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  padding: 15px 15px 14px;
  background: var(--bg-grey-fa);
  border: 1px solid #ddd;
  border-radius: 4px;
}
@media (min-width: 768px) {
  .subscription-annual-upgrade-notice {
    display: block;
  }
}

.settings-page-editing-notice {
  position: relative;
  margin-bottom: 10px;
  padding: 15px 15px 13px 58px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-info-dark);
  background: var(--bg-info-light);
  border: 1px solid var(--border-semi-transparent-alt);
  border-radius: 6px;
}
.dashboard-chart-container .settings-page-editing-notice {
  margin-bottom: 0;
  border: none;
  border-bottom: 1px solid var(--border-semi-transparent-alt);
  border-radius: 0;
}

.settings-page-editing-notice-icon, .settings-page-editing-lock-icon {
  position: absolute;
  left: 19px;
  top: 50%;
  line-height: 1;
  font-size: 28px;
  color: var(--text-info-dark);
  transform: translateY(-45%);
}

.settings-page-editing-lock-icon {
  left: 22px;
  font-size: 22px;
}

.settings-page-editing-notice-icon-one-line {
  position: absolute;
  left: 19px;
  top: 7px;
  font-size: 28px;
  color: var(--text-info-dark);
}

.settings-form-header {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .settings-form-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.settings-form-subheader-bold {
  font-weight: 600;
}

.settings-header-text {
  width: 69%;
}
@media (max-width: 768px) {
  .settings-header-text {
    width: 100%;
  }
}

.settings-form-header-button {
  padding: 0 0 9px 0;
  margin-top: -10px;
}
.settings-form-header-button.account-settings-button {
  width: 31%;
}
.settings-form-header-button.account-settings-button .switch-toggle {
  margin-right: 0;
}
@media (max-width: 768px) {
  .settings-form-header-button {
    width: 100%;
    margin-bottom: 20px;
    margin-top: 5px;
  }
  .settings-form-header-button .btn {
    width: 100%;
  }
  .settings-form-header-button.account-settings-button {
    padding-top: 0;
    width: 100%;
  }
  .settings-form-header-button.account-settings-button .switch-toggle {
    margin-left: 0;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .settings-form-header-text {
    width: 100%;
  }
}

.settings-form-section > div {
  scrollbar-width: none;
}
.settings-form-section > div::-webkit-scrollbar {
  display: none;
}

.settings-section-title {
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
}

.settings-section-header {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border-content-alt);
}
@media (min-width: 768px) {
  .settings-section-header {
    flex-direction: row;
    align-items: center;
  }
}

.settings-section-header-title {
  margin-bottom: 7px;
  font-size: 20px;
  font-weight: 600;
}

.settings-section-header-subtitle {
  font-weight: 400;
  font-size: 14px;
  color: var(--text-muted);
}

.settings-form-checkbox-label {
  font-weight: 500;
  font-size: 16px;
}

.settings-form-text {
  margin-bottom: 25px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted-alt);
}

.settings-group-header {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
}

.settings-group-subtitle {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}

.settings-fields-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 20px;
}

.settings-dropdown {
  width: 100%;
}
.settings-dropdown--100 {
  width: 100px;
}
.settings-dropdown--130 {
  width: 130px;
}
.settings-dropdown--150 {
  width: 150px;
}
.settings-dropdown--200 {
  width: 200px;
}
.settings-dropdown--250 {
  width: 250px;
}

.branding-settings-logo-size {
  cursor: pointer;
}

.branding-settings-color-input {
  position: relative;
  display: block;
  text-align: left;
  text-transform: uppercase;
  width: 100%;
  padding-left: 32px;
  padding-right: 24px;
  cursor: pointer;
  background: var(--bg-content);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.branding-settings-color-input, .branding-settings-color-input:focus, .branding-settings-color-input:visited {
  color: var(--text-lighter);
}
.branding-settings-color-input:hover, .branding-settings-color-input:active {
  background: var(--bg-content);
  border-color: color-mix(in srgb, var(--color-primary) 70%, transparent);
}

.branding-settings-color-preview {
  position: absolute;
  left: 5px;
  top: 5px;
  bottom: 5px;
  width: 20px;
  cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 4px;
}

.branding-settings-color-picker {
  position: absolute;
  z-index: 10;
  top: 50px;
  right: 0;
  background-color: var(--bg-content);
  padding-bottom: 10px;
  box-shadow: color-mix(in srgb, var(--black) 15%, transparent) 0px 0px 0px 1px, color-mix(in srgb, var(--black) 15%, transparent) 0px 8px 16px;
  border-radius: 4px;
}
.branding-settings-color-picker .sketch-picker {
  box-shadow: none !important;
}

.branding-settings-color-picker-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9;
}

.branding-settings-color-picker-close {
  position: absolute;
  right: 0;
  padding: 2px 10px;
  font-size: 13px;
  color: var(--text-lighter);
}
.branding-settings-color-picker-close:hover {
  color: var(--text-muted-alt);
}

.settings-user-form,
.settings-company-form {
  margin: auto;
}
.settings-user-form #error_explanation,
.settings-company-form #error_explanation {
  padding: 20px 20px 18px;
  text-align: center;
  font-size: 12px;
  border: 1px solid var(--color-danger);
}
.settings-user-form .form-group,
.settings-company-form .form-group {
  margin-bottom: 40px;
}
.settings-user-form .form-control,
.settings-company-form .form-control {
  padding-left: 0;
  padding-right: 0;
  font-weight: 600;
}

.settings-pending-email {
  margin-top: 5px;
  padding: 8px 8px 5px;
  font-size: 12px;
  color: var(--text-lighter);
  font-weight: 600;
  text-align: center;
  background-color: var(--bg-grey-f8);
  border-radius: 5px;
}

.settings-password-toggle {
  position: relative;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.settings-password-toggle-icon {
  position: relative;
  display: inline-block;
  top: 1px;
  margin-right: 10px;
  line-height: 7px;
  transition: all var(--transition-slow) ease;
  transform-origin: 50%;
}
.settings-password-toggle-link.showing .settings-password-toggle-icon {
  transform: rotate(180deg);
}

.settings-dd {
  margin-bottom: -9px;
  line-height: 45px;
  font-weight: 600;
  font-size: 18px;
}

.settings-dd-transaction-fees {
  display: block;
  padding-top: 14px;
}

.settings-company-open-address {
  margin-top: 20px;
}
.settings-company-open-address .company-open-address-link {
  display: block;
  min-height: 88px;
  padding: 8px 11px 9px;
  font-size: 16px;
  font-weight: 400;
  white-space: pre-wrap;
  background: var(--bg-grey-fc);
  border: 1px dashed var(--border-content);
  border-radius: 4px;
}
.settings-company-open-address .company-open-address-link, .settings-company-open-address .company-open-address-link:focus, .settings-company-open-address .company-open-address-link:visited {
  color: var(--color-primary);
}
.settings-company-open-address .company-open-address-link:hover, .settings-company-open-address .company-open-address-link:active {
  color: var(--text-muted);
  border-color: var(--color-primary);
}

.settings-company-profile-url {
  width: 100%;
}

.settings-timer-alert-wrapper {
  max-width: 200px;
}

.settings-timer-alert-input-wrapper {
  float: left;
  margin-right: -5px;
}

.settings-timer-alert-label {
  display: inline-block;
  float: left;
  height: 40px;
  padding: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-lighter);
  cursor: default;
  background: var(--bg-grey-e);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.account-settings-menu {
  margin-bottom: 40px;
  padding-right: 0;
}
@media (min-width: 768px) {
  .account-settings-menu {
    margin-bottom: 0;
    padding-right: 40px;
  }
}

.account-settings-menu-item {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 500;
  padding: 14px;
  border-radius: 8px;
  transition: all var(--transition-fast) ease;
}
.account-settings-menu-item, .account-settings-menu-item:focus, .account-settings-menu-item:visited {
  color: var(--text-muted);
}
.account-settings-menu-item:hover, .account-settings-menu-item:active {
  color: var(--text-muted);
}
.account-settings-menu-item.active {
  color: var(--color-primary);
  font-weight: 600;
  background-color: var(--bg-grey-f5);
}

.account-settings-delete-account {
  padding: 40px 0;
}
.account-settings-delete-account .setting-form-delete-account-copy {
  text-align: left;
}

.account-settings-delete-account-button {
  text-align: left;
  padding-top: 10px;
}
@media (min-width: 768px) {
  .account-settings-delete-account-button {
    text-align: right;
    padding-top: 20px;
  }
}

@media (min-width: 768px) {
  .account-settings-profile-settings-avatar {
    position: absolute;
    left: 5px;
    top: 5px;
  }
}

@media (min-width: 768px) {
  .account-settings-profile-settings-fields {
    padding-left: 164px;
  }
}

.settings-subscriptions-group {
  position: relative;
  margin-bottom: 20px;
}
.settings-subscriptions-group:last-child {
  margin-bottom: 0;
}

.settings-checkbox-wrap {
  position: relative;
}
.settings-checkbox-wrap .checkbox-toggle {
  top: 4px;
}

.settings-checkbox-right {
  font-size: 18px;
  cursor: pointer;
  -webkit-touch-callout: none;
  user-select: none;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0em;
  text-align: left;
}

.settings-checkbox-text {
  font-size: 18px;
  cursor: pointer;
  user-select: none;
}

.settings-subscriptions-timer-input.form-field {
  position: relative;
  width: 150px;
  padding-right: 70px;
}

.settings-subscriptions-timer-input-label {
  position: absolute;
  right: 10px;
  top: 2px;
  font-size: 14px;
}

.settings-subscriptions-section {
  padding: 15px 10px;
  margin-bottom: 30px;
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}

.setting-form-delete-account {
  margin-top: 20px;
  padding: 20px 20px 18px;
  border-top: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}

.setting-form-delete-account-copy {
  margin-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted-alt);
}
@media (min-width: 768px) {
  .setting-form-delete-account-copy {
    top: 7px;
    margin-bottom: 0;
    text-align: left;
  }
}

.setting-form-delete-account-trigger {
  text-align: center;
}
@media (min-width: 768px) {
  .setting-form-delete-account-trigger {
    text-align: right;
  }
}

.settings-admin-top-notice {
  margin-bottom: 40px;
  padding: 20px;
  font-size: 16px;
  font-weight: 400;
  background: var(--bg-content);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--black) 15%, transparent);
}
@media (min-width: 480px) {
  .settings-admin-top-notice {
    padding: 40px;
  }
}

.settings-admin-top-notice-account {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 600;
}

.settings-tags-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.settings-tags-actions .page-section-header {
  float: left;
  margin: 0;
  margin-top: 10px;
}

.settings-tag-list {
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}

.settings-tag-header {
  display: flex;
  justify-content: space-between;
  padding: 20px 20px 0;
}

.settings-tag-header-label {
  font-size: 14px;
  color: var(--text-lighter);
}

.settings-tag-header-info {
  font-size: 14px;
  color: var(--text-lighter);
  text-align: right;
}

.settings-tags-empty {
  padding: 40px 20px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-muted-alt);
}

.settings-tag-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-content);
  transition: all var(--transition-fast) ease;
}
.settings-tag-item:first-child {
  border-top: 1px solid var(--border-content);
}

.settings-tag-item-inline-form {
  flex: 1;
}

.settings-tag {
  float: left;
  display: inline-block;
  padding: 0 10px;
  margin-right: 5px;
  line-height: 2;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-grey-e);
  border-radius: 3px;
}
@media (min-width: 768px) {
  .settings-tag {
    max-width: none;
    font-size: 16px;
  }
}

.settings-tag-icon {
  display: inline-block;
  margin-right: 2px;
  font-size: 0.8em;
}

.settings-tag-options {
  flex: 1;
}

.settings-tag-description {
  float: right;
  padding: 5px 5px 5px;
  color: var(--text-lighter);
  font-weight: 500;
  text-transform: capitalize;
}

.settings-tag-actions {
  float: right;
}
.settings-tag-actions.tag-list-actions-for-lead {
  display: none;
  width: 99px;
  height: 1px;
}
@media (min-width: 768px) {
  .settings-tag-actions.tag-list-actions-for-lead {
    display: inline-block;
  }
}
@media (min-width: 480px) {
  .settings-tag-actions {
    margin: 0 0 0 10px;
  }
}

.settings-tag-action {
  float: left;
  padding: 5px 10px 5px;
  font-weight: 500;
  color: var(--text-muted);
}
.settings-tag-action:hover, .settings-tag-action:focus, .settings-tag-action:active {
  color: var(--text-default);
}
.settings-tag-action.settings-tag-action-delete {
  color: var(--color-danger);
  padding-right: 5px;
}

input[type=checkbox].project-settings-checkbox {
  margin: 1px 5px 5px 0px;
}

.branding-preview {
  padding-left: 0;
  padding-right: 0;
}

.branding-settings-background-image-field {
  height: 150px;
}

.branding-settings-background-image {
  height: 150px;
  border: 1px solid var(--border-content);
}

.branding-settings-whitelabel-branding-options-radio {
  margin-bottom: 10px;
}
.branding-settings-whitelabel-branding-options-radio .radio-label {
  font-style: normal;
  color: var(--text-default);
  font-size: 14px;
  display: block;
  text-transform: none;
  letter-spacing: 0;
  padding: 0 0 0 30px;
  line-height: 26px;
}
.branding-settings-whitelabel-branding-options-radio .radio-label .radio-fill {
  height: 20px;
  width: 20px;
  background: var(--bg-content);
  border: 1.5px solid var(--border-content-alt);
  top: 4px;
}
.branding-settings-whitelabel-branding-options-radio .radio-label .radio-fill-in {
  width: 10px;
  height: 10px;
  left: 3.5px;
  top: 3.5px;
  right: 3.5px;
  bottom: 3.5px;
}
.branding-settings-whitelabel-branding-options-radio .radio-label input[type=radio]:checked ~ .radio-label-copy {
  font-weight: 500;
}
.branding-settings-whitelabel-branding-options-radio .radio-label input[type=radio]:checked ~ .radio-fill {
  box-shadow: none;
  background: var(--bg-content);
  border: 1.5px solid #22ad01;
}
.branding-settings-whitelabel-branding-options-radio .radio-label input[type=radio]:checked ~ .radio-fill .radio-fill-in {
  background: var(--color-primary);
}

.settings-project-numbering-section .title {
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  color: var(--text-default);
}
.settings-project-numbering-section .info-icon {
  width: 12.5px;
  height: auto;
}
.settings-project-numbering-section .info-icon path {
  fill: var(--text-lighter);
}
.settings-project-numbering-section .projects-numbering-fields {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  column-gap: 10px;
}
.settings-project-numbering-section .projects-prefix-strategy {
  width: 130px;
}
.settings-project-numbering-section .projects-custom-prefix {
  width: 65px;
}
.settings-project-numbering-section .projects-sequence-strategy {
  width: 165px;
}

.settings-hr {
  margin: 0;
}

.default-client-message-wysiwig-form {
  min-height: 180px;
  background: var(--bg-content);
  padding: 20px;
  border: 1px solid var(--border-field);
  border-radius: 6px;
}

.settings-tax-rate-item {
  display: flex;
  align-items: center;
  justify-content: normal;
  column-gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-content);
  font-size: 14px;
}
.settings-tax-rate-item:first-child {
  border-top: 1px solid var(--border-content);
}
.settings-tax-rate-item .form-switch {
  cursor: pointer;
}

.settings-holiday-calendar-header {
  font-weight: 500;
  color: var(--text-default);
}

.settings-referral-top {
  margin-bottom: 40px;
  padding: 40px;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
}

.settings-referral-header {
  margin-bottom: 10px;
}

.settings-referral-subheader {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-muted-alt);
}

.settings-referral-totals {
  margin-bottom: 40px;
  padding: 40px 40px 38px;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.settings-referral-free-months {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
}

.settings-referral-amount {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-muted-alt);
}

.settings-referrals-list {
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.settings-referrals-list-empty {
  padding: 40px 40px 38px;
  color: var(--text-lightest);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}

.settings-referrals-list-item {
  position: relative;
  padding: 20px 20px 20px 72px;
  font-size: 16px;
  border-bottom: 1px solid var(--border-content);
}
.settings-referrals-list-item:last-child {
  border-bottom: 0;
}
@media (min-width: 768px) {
  .settings-referrals-list-item {
    padding: 30px 30px 28px 72px;
  }
}

.settings-referrals-list-item-user {
  position: relative;
  font-weight: 600;
}

.settings-referrals-list-item-avatar.avatar {
  position: absolute;
  left: 24px;
  top: 24px;
}

.settings-referrals-list-item-status.signed_up {
  color: var(--text-lighter);
}
.settings-referrals-list-item-status.subscribed_to_a_plan {
  color: var(--color-primary);
  font-weight: 600;
}
@media (min-width: 768px) {
  .settings-referrals-list-item-status {
    text-align: right;
  }
}

.tag-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 30px;
  cursor: default;
}

.tag-settings-sections {
  display: flex;
  min-height: 300px;
  align-items: stretch;
  flex-direction: column;
  gap: 20px;
  padding: 0 0 60px;
}
@media (min-width: 1024px) {
  .tag-settings-sections {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
  }
}

.tag-settings-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  background-color: var(--bg-content);
  border-radius: 10px;
  border: 1px solid var(--border-content);
}
@media (min-width: 1024px) {
  .tag-settings-section {
    flex: 0 0 calc(50% - 10px);
  }
}

.tag-settings-section-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 20px 10px 20px;
  font-size: 18px;
  font-weight: 500;
  cursor: default;
}
.tag-settings-section-header .dashboard-chart-option-add-icon {
  top: 23px;
}

.tag-settings-items {
  margin: 20px 20px 40px;
}

.tag-settings-items-category {
  margin: 10px 15px 0;
  color: var(--text-lighter);
  text-transform: uppercase;
  font-size: 12px;
}

.tag-settings-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 8px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--border-content);
}
.tag-settings-item:first-child {
  border-top: 1px solid var(--border-content);
}

.tag-settings-clickable-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.tag-settings-item-color {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 10px;
  border-radius: 5px;
  background: var(--color-primary);
}

.tag-settings-item-name {
  flex: 1;
  font-size: 16px;
}

.tag-settings-item-action {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
  opacity: 0;
  border-radius: 4px;
}
.tag-settings-item:hover .tag-settings-item-action {
  opacity: 1;
}
.tag-settings-item-action:hover {
  background: var(--bg-grey-f8);
}

.tag-settings-item-action-icon {
  width: 12px;
  height: auto;
}
.tag-settings-item-action-icon .tag-settings-item-action-icon--delete {
  width: 15px;
}
.tag-settings-item-action-icon path {
  fill: var(--text-muted);
}
.tag-settings-item-action:hover .tag-settings-item-action-icon path {
  fill: var(--text-default);
}

.settings-tax-forms-empty {
  padding: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-muted-alt);
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.tax-forms-list-item {
  position: relative;
  width: 100%;
  margin: 0 0 2px;
  transition: all var(--transition-fast) ease;
  border-radius: 3px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--black) 4%, transparent);
}
.tax-forms-list-item:hover {
  z-index: 2;
  box-shadow: 0 1px 6px color-mix(in srgb, var(--black) 6%, transparent);
  transform: scale(1.002);
}
.tax-forms-list-item.showing-component {
  z-index: 3;
}
.tax-forms-list-item .tooltip {
  text-transform: capitalize;
}
.tax-forms-list-item .list-item-title {
  font-size: 18px;
  font-weight: 500;
}

.tax-forms-list-item-in {
  display: block;
  padding: 26px 25px 24px 66px;
  text-align: left;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 4px;
  transition: all var(--transition-fast) ease;
}
.tax-forms-list-item-in, .tax-forms-list-item-in:focus, .tax-forms-list-item-in:visited {
  color: var(--text-muted-alt);
}
.list-item:hover .tax-forms-list-item-in {
  color: var(--text-muted);
}
.tax-forms-list-item-in:hover, .tax-forms-list-item-in:active, .list-item:hover .tax-forms-list-item-in:hover, .list-item:hover .tax-forms-list-item-in:active {
  color: var(--text-default);
}
.list-item:hover .tax-forms-list-item-in {
  border: 1px solid var(--border-content-alt);
}

.tax-forms-list-item-icon {
  position: absolute;
  left: 20px;
  top: 20px;
}
.tax-forms-list-item-icon svg {
  width: 28px;
  height: auto;
}
.tax-forms-list-item-icon svg path {
  fill: var(--border-darker);
}

.tax-forms-list-item-action {
  display: inline-block;
  float: left;
  font-size: 14px;
  margin-right: 20px;
  padding-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}
@media (min-width: 768px) {
  .tax-forms-list-item-action {
    float: right;
    margin-left: 20px;
    margin-right: 0;
  }
}

.payment-credit-cards {
  margin-top: 30px;
}
.payment-credit-cards .credit-card {
  padding: 4px 15px;
}
.payment-credit-cards .credit-card-details {
  display: inline-block;
  float: left;
  width: 50%;
}

.payment-credit-card-new {
  padding: 60px 30px;
  text-align: center;
  background-color: var(--bg-content-alt);
  border-radius: 0 0 4px 4px;
}

.payment-credit-card-new-copy {
  position: relative;
  margin-bottom: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-lighter);
}

.cc-setup-linked-item-in {
  position: relative;
  padding: 30px 110px 30px 25px;
}

.cc-setup-linked-items {
  position: relative;
  z-index: 2;
}

.cc-setup-linked-item {
  position: relative;
  text-align: left;
  border-bottom: 1px solid var(--border-content);
}
.cc-setup-linked-item:last-child {
  border-bottom: none;
}

.cc-setup-linked-item-name {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-setup-linked-item-brand {
  display: inline-block;
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.cc-setup-linked-item-number {
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
}

.cc-setup-linked-item-expire-label {
  display: inline-block;
  float: left;
  margin-right: 15px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.cc-setup-linked-item-expire {
  display: inline-block;
  float: left;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
}

.cc-setup-linked-item-delete {
  position: absolute;
  right: 20px;
  bottom: 30px;
}

.banking-wrapper {
  max-width: 600px;
  margin: auto;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .banking-wrapper {
    padding: 0;
  }
}

.banking-setup-page {
  min-height: var(--minimum-page-height-mobile);
  padding-top: 60px;
  padding-bottom: 160px;
}
@media (min-width: 768px) {
  .banking-setup-page {
    min-height: var(--minimum-page-height-desktop);
  }
}

.banking-setup-option {
  text-align: center;
  width: 50%;
  border-top: 1px solid #eef2f3;
  border-bottom: 1px solid #eef2f3;
  background-color: var(--bg-grey-fc);
  display: inline-block;
  padding: 30px 0px;
  margin-bottom: 20px;
  float: left;
}
.banking-setup-option p {
  font-size: 18px;
}
.banking-setup-option .btn {
  display: inline-block;
}

.banking-setup-linked-bank-accounts {
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 6px;
  box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 5%, transparent);
}

.banking-setup-linked-bank-accounts-header {
  position: relative;
  padding: 30px 30px 28px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-default);
  background: var(--bg-grey-fc);
  background-image: linear-gradient(to bottom, #ffffff 0%, #f9f9f9 100%);
  border-bottom: 1px solid var(--border-content);
  border-radius: 5px 5px 0 0;
}

.banking-setup-linked-bank-accounts-subheader {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-lighter);
}

.banking-setup-linked-items {
  position: relative;
  z-index: 2;
  background: var(--bg-grey-fc);
  border-bottom: 1px solid var(--border-content);
  box-shadow: 0 1px color-mix(in srgb, var(--black) 4%, transparent);
}

.banking-setup-linked-item {
  position: relative;
  text-align: left;
  background: var(--bg-content);
  border-bottom: 1px solid var(--border-content);
}
.banking-setup-linked-item:last-child {
  border-bottom: none;
}

.banking-setup-linked-item-in {
  position: relative;
  padding: 30px 110px 30px 25px;
}

.banking-setup-linked-item-default {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 10px;
  padding: 10px 15px 8px;
  color: var(--text-default);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--bg-grey-f8);
  border-bottom: 1px solid var(--border-content);
  border-left: 1px solid var(--border-content);
  border-radius: 0 0 0 5px;
}

.banking-setup-linked-item-bank-name {
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted-alt);
}

.banking-setup-linked-item-label {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.banking-setup-linked-item-type {
  display: inline-block;
  float: left;
  margin-right: 15px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.banking-setup-linked-item-num {
  display: inline-block;
  float: left;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
}

.banking-setup-verify-deposits {
  margin: -16px 25px 0;
  padding: 15px 0 30px;
  font-weight: 600;
  border-top: 1px dashed var(--border-content);
}

.banking-setup-verify-deposits-copy {
  margin-top: 5px;
  font-weight: 400;
  font-size: 12px;
  font-style: italic;
  color: var(--text-lighter);
}

.banking-setup-verify-deposits-icon {
  position: relative;
  margin-right: 7px;
}

.banking-setup-linked-item-delete {
  position: absolute;
  right: 20px;
  bottom: 30px;
}

.banking-setup-linked-item-status {
  position: absolute;
  right: 20px;
  top: 30px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.banking-setup-linked-item-status.pending {
  color: var(--text-lighter);
}
.banking-setup-linked-item-status.failed {
  color: var(--color-primary);
}
.banking-setup-linked-item-status.verified {
  color: var(--color-primary);
}

.banking-setup-legal-disclaimer {
  max-width: 400px;
  margin: auto;
  padding: 20px;
  text-align: center;
  color: var(--text-lighter);
  font-size: 10px;
  font-weight: 400;
}

.banking-setup-link-more {
  padding: 30px;
}

.banking-setup-link-another {
  position: relative;
  margin-bottom: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-lighter);
}

#plaid-form {
  text-align: center;
}

.banking-setup-complete-btns {
  margin-top: 45px;
  text-align: center;
}

.banking-setup-none-linked {
  position: relative;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--bg-shadow) 3%, transparent);
}

.banking-setup-none-linked-content {
  padding: 60px 30px 65px;
  border-bottom: 1px solid var(--border-content);
}

.banking-setup-none-linked-text {
  position: relative;
  padding: 0 0 20px;
  font-size: 20px;
  text-align: center;
  font-weight: 400;
  color: var(--text-muted);
  border-radius: 5px 5px 0 0;
}

.banking-setup-secure-note {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  padding: 13px 20px 11px;
  text-align: center;
  font-size: 14px;
  background-color: var(--bg-info);
  color: var(--text-muted-alt);
  font-weight: 400;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--black) 5%, transparent);
}
@media print {
  .banking-setup-secure-note {
    display: none;
  }
}
.banking-setup-secure-note i {
  padding-right: 5px;
}

.banking-setup-secure-note-more {
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}
.banking-setup-secure-note-more a {
  color: var(--text-info-dark);
}
.banking-setup-secure-note-more a:visited, .banking-setup-secure-note-more a:focus {
  color: var(--text-info-dark);
}
.banking-setup-secure-note-more a:hover {
  color: color-mix(in srgb, var(--text-info-dark) 98%, var(--black));
}

.past-invoice-items {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border-content);
}

.past-invoice-item {
  display: block;
  padding: 10px 15px;
  border-radius: 5px;
}
.past-invoice-item:hover {
  background: var(--bg-grey-fc);
}

.past-invoice-item-name {
  font-weight: 600;
  font-size: 20px;
}

.past-invoice-item-date {
  margin-top: 2px;
  font-size: 14px;
  color: var(--text-lighter);
}

.past-invoice-item-value {
  padding-top: 9px;
  text-align: right;
  font-size: 20px;
  color: var(--text-default);
}

.banking-identity-page .dropdown-wrap {
  width: 100%;
}
.banking-identity-page .dropdown-wrap .dropdown-label {
  width: 100%;
}
.banking-identity-page .dropdown-wrap .dropdown-label:after {
  bottom: 5px;
}
.banking-identity-page .dropdown-wrap .dropdown-label-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.banking-setup-steps {
  padding: 0 40px 30px;
  text-align: center;
}

.banking-setup-step {
  display: inline-block;
  float: left;
  width: 50%;
  padding: 30px 10px 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: default;
  opacity: 0.3;
}
.banking-setup-step.active {
  opacity: 1;
}

.banking-setup-progress {
  position: relative;
  clear: both;
  height: 4px;
  width: 100%;
  overflow: hidden;
  background: color-mix(in srgb, var(--black) 5%, transparent);
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--black) 4%, transparent);
  border-radius: 10px;
}

.verify-id-user-info {
  margin-top: 30px;
  padding: 40px 40px 25px;
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
  border-radius: 6px;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--black) 4%, transparent);
}
.verify-id-user-info:first-child {
  margin-top: 0;
}

.verify-id-form-dd {
  display: inline-block;
  margin-bottom: -6px;
  line-height: 45px;
  font-weight: 600;
  font-size: 18px;
}

.verify-id-sensitive-info {
  position: relative;
  margin-top: 30px;
  padding: 40px 40px 25px;
  background: var(--bg-content) url("waves.png") repeat;
  border: 1px solid var(--border-content);
  border-radius: 6px;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--black) 4%, transparent);
}

.verify-id-sensitive-info-lock {
  position: absolute;
  z-index: 3;
  right: -1px;
  top: -1px;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 0 5px 0 0;
}

.verify-id-sensitive-info-lock-in {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 0;
  border-color: transparent var(--color-info) transparent transparent;
}

.verify-id-sensitive-info-lock-icon {
  position: absolute;
  right: 9px;
  top: 7px;
  font-size: 15px;
  color: color-mix(in srgb, var(--color-info) 80%, var(--black));
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}
.verify-id-sensitive-info-lock-icon:focus, .verify-id-sensitive-info-lock-icon:visited {
  color: color-mix(in srgb, var(--color-info) 80%, var(--black));
}
.verify-id-sensitive-info-lock-icon:hover {
  color: color-mix(in srgb, var(--color-info) 70%, var(--black));
}

.verify-id-secure-note {
  margin-bottom: 40px;
  font-size: 10px;
  color: #aaa;
  text-align: center;
}
@media (min-width: 768px) {
  .verify-id-secure-note {
    position: absolute;
    z-index: 2;
    right: 40px;
    bottom: 41px;
    width: 160px;
    padding-left: 20px;
    margin-bottom: 0px;
    text-align: right;
  }
}

.verify-id-secure-note-more {
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 8px;
}
.verify-id-secure-note-more a {
  color: var(--text-lightest);
}
.verify-id-secure-note-more a:visited, .verify-id-secure-note-more a:focus {
  color: var(--text-lightest);
}
.verify-id-secure-note-more a:hover {
  color: var(--text-lighter);
}

.verify-id-label-invisible {
  visibility: hidden;
  opacity: 0;
}

.verify-id-form-btns {
  margin-top: 45px;
  padding-bottom: 60px;
  text-align: center;
}
.verify-id-form-btns .btn.verifying {
  color: transparent;
}
.verify-id-form-btns .btn.verifying:before {
  content: "Verifying...";
  position: absolute;
  left: -1px;
  top: -1px;
  right: -1px;
  bottom: -1px;
  padding: 17px;
  color: var(--color-primary-contrast);
  font-size: 14px;
  background: var(--color-primary);
  animation: fade-in var(--transition-normal) 1 forwards;
  border-radius: 4px;
}

.verify-id-terms-of-service {
  max-width: 340px;
  margin: 30px auto 0;
  color: var(--text-lighter);
  font-size: 10px;
}

.payments-setting-notices-wrapper {
  max-width: var(--settings-width);
  margin: auto;
  padding: 0 20px;
}
@media (min-width: 950px) {
  .payments-setting-notices-wrapper {
    padding: 0;
  }
}

.payments-setting-border {
  position: absolute;
  top: 83px;
  left: 0;
  width: 100%;
  border-color: var(--border-content);
}

.payments-setting-defaults {
  position: relative;
  max-width: var(--settings-width);
  margin: auto;
  margin-bottom: 40px;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .payments-setting-defaults {
    padding: 0;
  }
}
@media (min-width: 950px) {
  .payments-setting-defaults {
    display: flex;
    align-items: center;
  }
}

.payments-setting-defaults-label {
  margin-bottom: 15px;
  padding-right: 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-default);
}
@media (min-width: 950px) {
  .payments-setting-defaults-label {
    margin-bottom: 0;
  }
}

.payments-setting-defaults-blank {
  position: relative;
  max-width: var(--settings-width);
  margin: auto;
  margin-bottom: 20px;
  text-align: center;
  color: var(--text-lighter);
  background: var(--bg-content);
  padding: 20px 20px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--black) 15%, transparent);
}

.payments-setting-defaults-edit-link {
  display: block;
  margin: 30px auto 0 0;
}
@media (min-width: 480px) {
  .payments-setting-defaults-edit-link {
    position: absolute;
    display: inline-block;
    right: 20px;
    bottom: 14px;
    margin: 0;
  }
}
@media (min-width: 950px) {
  .payments-setting-defaults-edit-link {
    position: absolute;
    display: inline-block;
    right: 0;
    top: 50%;
    bottom: auto;
    margin: -16px 0 0 0;
  }
}

.payment-methods-accepted-none {
  color: var(--text-lightest);
}

.payment-method-icons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  user-select: none;
}

.payment-method-icon {
  margin-left: 5px;
}

.payment-method-icon-img {
  height: 24px;
  width: auto;
}
.payment-method-icon-img.inline {
  width: 35px;
  pointer-events: none;
  background-size: contain;
}
.payment-method-icon-img.amex {
  background-image: url("payments/Amex.png");
}
.payment-method-icon-img.mastercard {
  background-image: url("payments/Mastercard.png");
}
.payment-method-icon-img.visa {
  background-image: url("payments/Visa.png");
}
.payment-method-icon-img.discover {
  background-image: url("payments/Discover.png");
}
.payment-method-icon-img.ach {
  background-image: url("payments/Ach.png");
}
.payment-method-icon-img.paypal {
  background-image: url("payments/PayPal.png");
}
.payment-method-icon-img.venmo {
  background-image: url("payments/Venmo.png");
}

.payments-setting-accounts {
  max-width: var(--settings-width);
  margin: auto;
}

@media (min-width: 950px) {
  .payments-setting-accounts-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
  }
  .payments-setting-accounts-row .payments-setting-group {
    height: 100%;
  }
}

@media (min-width: 950px) {
  .payments-setting-accounts-col {
    width: 50%;
  }
}

.payments-setting-group {
  position: relative;
  margin-bottom: 30px;
  padding: 30px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--bg-shadow) 3%, transparent);
  border-radius: 10px;
}
@media (min-width: 768px) {
  .payments-setting-group {
    padding: 60px;
  }
}
.payments-setting-group.stripe {
  padding-bottom: 108px;
}
.payments-setting-group.paypal {
  padding-bottom: 108px;
}
.payments-setting-group-logo {
  width: 80px;
  margin-bottom: 20px;
}
.payments-setting-group-logo.stripe {
  width: 70px;
}
.payments-setting-group-logo.paypal {
  margin-top: -5px;
}

.payments-setting-btn {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 30px;
}
@media (min-width: 768px) {
  .payments-setting-btn {
    left: 60px;
    right: 60px;
    bottom: 60px;
  }
}

.payments-setting-group-other {
  position: relative;
  margin-bottom: 15px;
  padding: 30px 30px 28px;
  background: var(--bg-content);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--bg-shadow) 5%, transparent);
  border-left: 5px solid var(--text-default);
  border-radius: 6px;
}

.payments-setting-group-other-title {
  font-weight: 600;
  color: var(--text-muted);
}

@media (min-width: 950px) {
  .payments-setting-group-other-copy {
    padding-right: 220px;
  }
}

.payments-setting-other-btn {
  position: relative;
  width: 100%;
  margin-top: 10px;
}
@media (min-width: 480px) {
  .payments-setting-other-btn {
    width: auto;
  }
}
@media (min-width: 950px) {
  .payments-setting-other-btn {
    position: absolute;
    right: 30px;
    top: 50%;
    margin-top: -16px;
  }
}

.payments-setting-enabled-status {
  position: absolute;
  display: inline-block;
  right: 30px;
  top: 39px;
  font-weight: 600;
  font-size: 16px;
  cursor: default;
}
@media (min-width: 768px) {
  .payments-setting-enabled-status {
    right: 60px;
    top: 69px;
  }
}

.payments-setting-enabled-status-icon {
  margin-right: 7px;
  font-size: 0.9em;
}

.payments-setting-enabled-status-copy.enabled {
  color: var(--color-primary);
}
.payments-setting-enabled-status-copy.disabled {
  color: var(--text-lighter);
}

.setup-online-payments-promo {
  position: relative;
  margin-bottom: 40px;
}

.promo-banner-container.setup-payment-banner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}
@media (min-width: 768px) {
  .promo-banner-container.setup-payment-banner {
    flex-direction: row;
    align-items: center;
    padding: 30px 40px;
  }
}

.promo-banner-header-wrapper {
  padding-right: 140px;
}

.promo-banner-header {
  margin-bottom: 20px;
  font-size: 18px;
  font-family: var(--font-display-header);
}

.setup-payment-banner-points {
  width: 100%;
  margin: 20px 0 0;
  padding: 20px;
  color: var(--text-default);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--border-content-alt);
  border-radius: 10px;
}
@media (min-width: 768px) {
  .setup-payment-banner-points {
    margin: 5px;
    width: 50%;
  }
}

.setup-payment-banner-point {
  position: relative;
  margin-bottom: 10px;
  padding-left: 27px;
  font-size: 14px;
}
.setup-payment-banner-point:last-child {
  margin-bottom: 0;
}

.setup-payment-banner-check {
  position: absolute;
  left: 0;
  top: -4px;
  font-size: 30px;
  line-height: 0;
}

.setup-payment-banner-method {
  position: relative;
  margin-bottom: 15px;
  padding-left: 33px;
  font-size: 14px;
  font-weight: 600;
}
.setup-payment-banner-method:last-child {
  margin-bottom: 0;
}

.setup-payment-banner-method-toggle {
  position: absolute;
  left: 0;
  top: -6px;
  font-size: 23px;
  color: var(--color-primary);
}

.setup-payment-banner-method-link, .setup-payment-banner-method-link:focus, .setup-payment-banner-method-link:visited {
  color: var(--text-muted);
}
.setup-payment-banner-method-link:hover, .setup-payment-banner-method-link:active {
  color: var(--text-muted);
}

.setup-instant-payments-promo {
  position: relative;
  padding: 30px 30px 30px 70px;
  background: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 6px;
}
@media (min-width: 768px) {
  .setup-instant-payments-promo {
    padding: 30px 30px 30px 100px;
  }
}

.setup-instant-payments-promo-header {
  margin-bottom: 5px;
  font-weight: 600;
}

.setup-instant-payments-promo-copy {
  color: var(--text-muted);
}

.setup-instant-payments-promo-icon {
  position: absolute;
  left: 27px;
  top: 21px;
  font-size: 45px;
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .setup-instant-payments-promo-icon {
    left: 40px;
    font-size: 54px;
  }
}

.setup-instant-payments-promo-cta {
  margin-top: 20px;
}
@media (min-width: 768px) {
  .setup-instant-payments-promo-cta {
    position: absolute;
    right: 40px;
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);
  }
}

.modal-instant-payouts-header {
  padding: 40px 0 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-default);
  text-align: center;
}

.modal-instant-payouts-header-icon-wrapper {
  margin-bottom: 10px;
  text-align: center;
}

.modal-instant-payouts-header-icon {
  display: block;
  margin: 0 auto;
  font-size: 60px;
  text-align: center;
  color: var(--color-accent-yellow);
}

.modal-instant-payouts-current-account {
  margin-top: 40px;
}
.modal-instant-payouts-current-account .bonsai-payments-section-external-account-default {
  display: none;
}

.modal-instant-payouts-current-label {
  padding: 10px;
  text-align: center;
  font-weight: 600;
  color: var(--color-primary);
  cursor: default;
}

.timetracker-container {
  position: relative;
  display: flex;
  align-items: center;
  height: 36px;
}

.timetracker-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
  padding: 0 10px 0 26px;
  cursor: pointer;
  text-align: center;
  border-radius: 6px;
  transition: all var(--transition-fast) ease;
}
@media (min-width: 768px) {
  .timetracker-nav-item:hover {
    background: var(--bg-grey-fa);
  }
}
.timetracker-nav-item.open {
  background: var(--bg-grey-fa);
}
.timetracker-nav-item.showing-item {
  background: var(--bg-grey-f8);
}
@media (min-width: 768px) {
  .timetracker-nav-item.showing-item {
    padding-left: 36px;
  }
}
.timetracker-nav-item-icon-bg {
  position: absolute;
  display: block;
  z-index: 2;
  top: 9px;
  left: 9px;
  width: 18px;
  height: 18px;
  padding: 0;
  text-align: center;
  background: transparent;
  border: 2px solid var(--text-muted);
  border-radius: 50%;
  transition: all var(--transition-fast) ease;
  transform-origin: center center;
  flex-grow: 0;
  flex-shrink: 0;
}
.timetracker-nav-item:hover .timetracker-nav-item-icon-bg, .list-grid-item-cell:hover .timetracker-nav-item-icon-bg {
  border-color: var(--text-default);
}
.timetracker-nav-item-icon-bg[disabled] {
  opacity: 0.7;
}
.playing .timetracker-nav-item-icon-bg {
  background: var(--color-danger);
  color: var(--color-primary-contrast);
  border-color: transparent;
}
.list-grid-item-cell:hover .playing .timetracker-nav-item-icon-bg {
  border-color: transparent;
}
.playing.timetracker-nav-item:hover .timetracker-nav-item-icon-bg {
  border-color: transparent;
}

.timetracker-nav-item-icon-border {
  position: absolute;
  display: none;
  z-index: 1;
  top: 5px;
  left: 5px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-grow: 0;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .timetracker-nav-item-icon-border {
    display: flex;
  }
}
.timetracker-nav-item-icon-border.pause {
  border: 1px solid color-mix(in srgb, var(--color-danger) 25%, transparent);
  animation: timer-spin 0.75s linear infinite forwards;
}
.timetracker-nav-item-icon-border.pause:before {
  position: absolute;
  display: block;
  content: "";
  height: 25px;
  width: 50%;
  top: 0;
  right: 0;
  background: transparent;
  background-image: linear-gradient(transparent, color-mix(in srgb, var(--color-danger) 65%, transparent));
  border-radius: 0 90px 90px 0;
}
.timetracker-nav-item-icon-border.pause:after {
  position: absolute;
  display: block;
  content: "";
  height: 24px;
  width: 24px;
  top: 50%;
  left: 50%;
  background: var(--bg-grey-fc);
  border-radius: 80%;
  transform: translate(-50%, -50%);
}

.timetracker-nav-item-icon-border {
  position: absolute;
}

.timetracker-nav-item-icon {
  position: absolute;
  line-height: 1;
  transition: all var(--transition-fast) ease;
}

.timetracker-nav-item-icon-play {
  top: 51%;
  left: 5px;
  width: 6px;
  height: auto;
  transform: translate3d(0, -50%, 0);
}
.timetracker-nav-item-icon-play path {
  fill: var(--text-muted);
}
.timetracker-nav-item:hover .timetracker-nav-item-icon-play path, .list-grid-item-cell:hover .timetracker-nav-item-icon-play path {
  fill: var(--text-default);
}

.timetracker-nav-item-icon-pause {
  top: 50%;
  left: 50%;
  width: 6px;
  height: auto;
  transform: translate3d(-50%, -50%, 0);
}

.timetracker-nav-item-time {
  display: none;
  line-height: 1.41;
  color: var(--text-default);
  user-select: none;
}
.timetracker-nav-item-time ::selection {
  background: transparent;
}
@media (min-width: 768px) {
  .timetracker-nav-item-time {
    display: block;
  }
}

.timetracker-nav-item-seconds {
  position: relative;
  top: 1px;
  font-size: 14px;
  font-weight: 500;
  height: 23px;
  color: var(--text-muted);
  transition: all var(--transition-fast) ease;
}
.timetracker-nav-item:hover .timetracker-nav-item-seconds,
.timetracker-nav-item-seconds .timetracker-nav-item.open {
  color: var(--text-muted);
}

.timetracker-nav-item-numbers {
  display: inline-flex;
  justify-content: space-evenly;
  align-items: center;
  min-width: 24px;
  text-align: center;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.timetracking-pane {
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-content);
}
.timetracking-pane.entries {
  overflow: hidden;
}
@media (min-width: 768px) {
  .timetracking-pane {
    position: absolute;
    top: 105%;
    right: -10px;
    width: 375px;
    min-height: 712px;
    height: auto;
    border: 1px solid var(--border-content);
    border-radius: 10px;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--black) 12%, transparent);
  }
  .timetracking-pane.without-billing {
    min-height: 637px;
  }
}
@media (max-height: 770px) and (min-width: 768px) {
  .timetracking-pane {
    min-height: calc(100% - 60px);
    max-height: 90vh;
    height: 90vh;
  }
}

.timetracking-pane-header {
  position: relative;
  z-index: 2;
  height: 180px;
  padding: 18px;
  text-align: center;
  font-size: 16px;
  background-color: var(--bg-panel);
  border-bottom: 1px solid var(--border-content);
  box-shadow: 0 3px 4px color-mix(in srgb, var(--black) 4%, transparent);
  border-radius: 10px 10px 0 0;
}
.timetracking-pane-header:after {
  content: "";
  display: table;
  clear: both;
}

.timetracking-pane-header-copy {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: default;
}

.timetracking-pane-header-back-link {
  position: absolute;
  left: 0;
  top: 0;
  padding: 15px 17px;
  font-size: 16px;
  font-weight: 600;
  transition: color var(--transition-normal) ease;
}
.timetracking-pane-header-back-link, .timetracking-pane-header-back-link:focus, .timetracking-pane-header-back-link:visited {
  color: var(--color-primary);
}
.timetracking-pane-header-back-link:hover, .timetracking-pane-header-back-link:active {
  color: var(--color-primary);
}

.timetracking-pane-header-delete-link {
  position: absolute;
  right: 0;
  top: 0;
  padding: 18px 18px 5px;
  transition: color var(--transition-normal) ease;
}
.timetracking-pane-header-delete-link, .timetracking-pane-header-delete-link:focus, .timetracking-pane-header-delete-link:visited {
  color: var(--color-danger);
}
.timetracking-pane-header-delete-link:hover, .timetracking-pane-header-delete-link:active {
  color: color-mix(in srgb, var(--color-danger) 95%, transparent);
}

.timetracking-pane-header-btn-bg {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  height: 50px;
  width: 100%;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-content);
}

.timetracking-pane-header-btn {
  position: absolute;
  z-index: 2;
  bottom: 15px;
  left: 50%;
  margin-left: -35px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  transition: background var(--transition-fast) ease, border var(--transition-fast) ease, box-shadow var(--transition-normal) ease;
}
.timetracking-pane-header-btn.start {
  background-image: linear-gradient(to bottom, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 95%, var(--black)) 100%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 95%, var(--black));
  box-shadow: 0 4px 16px rgba(0, 178, 137, 0.3);
}
.timetracking-pane-header-btn.start:hover {
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 99%, transparent) 0%, color-mix(in srgb, var(--color-primary) 96%, var(--black)) 100%);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.timetracking-pane-header-btn.pause {
  background-image: linear-gradient(to bottom, var(--color-danger) 0%, color-mix(in srgb, var(--color-danger) 95%, var(--black)) 100%);
  border: 1px solid color-mix(in srgb, var(--color-danger) 95%, var(--black));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-danger) 20%, transparent);
}
.timetracking-pane-header-btn.pause:hover {
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 99%, transparent) 0%, color-mix(in srgb, var(--color-danger) 96%, var(--black)) 100%);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-danger) 30%, transparent);
}

.timetracking-pane-header-btn-in {
  position: absolute;
  left: 5px;
  top: 5px;
  bottom: 5px;
  right: 5px;
  text-shadow: 0 1px 3px color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 50%;
  transition: background var(--transition-fast) ease, border var(--transition-fast) ease, box-shadow var(--transition-normal) ease;
}
.timetracking-pane-header-btn-in.start {
  background-image: linear-gradient(to bottom, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 95%, var(--black)) 100%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 90%, var(--black));
  box-shadow: 0 0 4px color-mix(in srgb, var(--black) 14%, transparent);
}
.timetracking-pane-header-btn:hover .timetracking-pane-header-btn-in.start {
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 99%, transparent) 0%, color-mix(in srgb, var(--color-primary) 96%, var(--black)) 100%);
}
.timetracking-pane-header-btn:active .timetracking-pane-header-btn-in.start {
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 96%, var(--black)) 0%, color-mix(in srgb, var(--color-primary) 99%, transparent) 100%);
}
.timetracking-pane-header-btn-in.pause {
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 95%, var(--black)) 0%, color-mix(in srgb, var(--color-danger) 90%, var(--black)) 100%);
  border: 1px solid color-mix(in srgb, var(--color-danger) 80%, var(--black));
  box-shadow: 0 0 4px color-mix(in srgb, var(--black) 14%, transparent);
}
.timetracking-pane-header-btn:hover .timetracking-pane-header-btn-in.pause {
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 96%, var(--black)) 0%, color-mix(in srgb, var(--color-danger) 91%, var(--black)) 100%);
}
.timetracking-pane-header-btn:active .timetracking-pane-header-btn-in.pause {
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 91%, var(--black)) 0%, color-mix(in srgb, var(--color-danger) 96%, var(--black)) 100%);
}

.timetracking-pane-header-btn-icon {
  position: absolute;
  text-align: center;
}
.timetracking-pane-header-btn-icon.start {
  top: 50%;
  left: 20px;
  width: 20px;
  transform: translate(0, -50%);
}
.timetracking-pane-header-btn-icon.pause {
  top: 50%;
  left: 50%;
  width: 20px;
  transform: translate(-50%, -50%);
}

.timetracking-pane-header-collapse-toggle {
  position: absolute;
  display: block;
  left: 50%;
  top: 0;
  height: 50px;
  width: 120px;
  margin-left: -60px;
  padding: 6px 30px;
  line-height: 0;
  border-radius: 0 0 6px 6px;
  opacity: 0.8;
}
@media (min-width: 768px) {
  .timetracking-pane-header-collapse-toggle {
    display: none;
  }
}
.timetracking-pane-header-collapse-toggle svg {
  width: 100%;
}

.timetracking-pane-body {
  position: absolute;
  left: 0;
  top: 180px;
  bottom: 0;
  width: 100%;
  padding: 30px 40px 40px;
  overflow-y: scroll;
}

.timetracking-pane-body-empty {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: var(--text-lighter);
  padding: 120px 40px;
}

.timetracking-pane-entries {
  position: absolute;
  left: 0;
  top: 180px;
  bottom: 0;
  width: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-timetracker-row);
}

.timetracking-pane-entry-row {
  position: relative;
  display: block;
  padding: 18px 0 16px;
  margin: 2px 0;
  background: var(--bg-panel);
  box-shadow: 0 1px 0 var(--shadow-timetracker);
  transition: box-shadow var(--transition-normal) ease;
}
.timetracking-pane-entry-row:after {
  content: "";
  display: table;
  clear: both;
}
.timetracking-pane-entry-row:hover, .timetracking-pane-entry-row:active {
  background: var(--bg-hover-subtle);
}
.timetracking-pane-entry-row:first-child {
  margin-top: 0;
}
.timetracking-pane-entry-row.locked {
  cursor: not-allowed;
}

.timetracking-pane-entry-row-column {
  display: inline-block;
  float: left;
  font-size: 12px;
}
.timetracking-pane-entry-row-column.column-date {
  position: relative;
  top: -1px;
  width: 17%;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--color-primary);
  text-align: center;
  font-weight: 600;
}
.timetracking-pane-entry-row-column.middle {
  width: 59%;
  margin-top: -2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.timetracking-pane-entry-date-2 {
  margin-top: 0;
  height: 20px;
  line-height: 1;
  font-size: 18px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  transform: translateY(2px);
}

.timetracking-pane-entry-client {
  margin-bottom: 2px;
  padding-right: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
}
.timetracking-pane-entry-client.no-client {
  color: var(--text-lighter);
  font-weight: 500;
}

.timetracking-pane-entry-project {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.timetracking-pane-entry-project.no-project {
  color: var(--text-lightest);
}

.timetracking-pane-entry-row-notes {
  position: relative;
  width: 100%;
  height: 16px;
  margin-top: 8px;
  padding-bottom: 2px;
  padding-left: 18px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.timetracking-pane-entry-row-notes-icon {
  position: absolute;
  left: 0;
  top: -2px;
  width: 17px;
  font-size: 15px;
  color: var(--text-lighter);
}

.timetracking-pane-entry-lock-icon {
  position: absolute;
  right: 88px;
  top: 15px;
  width: 32px;
  height: 32px;
  stroke: var(--border-content-alt);
}

.timetracking-pane-entry-time {
  position: absolute;
  right: 13px;
  top: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
}

.timetracking-pane-entry-time-numbers {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  vertical-align: middle;
}

.timetracking-entry-saved-update {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 12px 6px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
  background: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-top: 0;
  border-right: 0;
  visibility: hidden;
  opacity: 0;
  border-radius: 0 0 0 6px;
  transition: all var(--transition-normal) ease;
}
.timetracking-entry-saved-update.showing {
  opacity: 1;
  visibility: visible;
}

.timetracker-container .timetracking-entry-notes-input {
  min-height: 80px;
}

.timetracking-entry-select, .timetracking-client-select,
.timetracking-task-select {
  z-index: 6;
}

.timetracking-client-select,
.timetracking-task-select {
  z-index: 5;
}

.timetracking-entry-project-invalid {
  text-align: center;
  padding: 40px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-accent-brown);
  background: var(--bg-yellow);
  border: 1px solid color-mix(in srgb, var(--black) 8%, transparent);
  border-radius: 4px;
}

.timetracking-entry-checkbox {
  margin-top: 20px;
}

.timetracking-entry-checkbox-label {
  padding-top: 1px;
}

.timetracking-entry-time-number-fields {
  position: relative;
  width: 100%;
  max-width: 180px;
  margin: -5px auto 0;
}
.timetracking-entry-time-number-fields.blank {
  line-height: 1.5;
  font-size: 34px;
  cursor: default;
  color: var(--text-default);
  user-select: none;
}

.timetracking-header-number-field {
  position: relative;
  float: left;
  width: 33.3333333333%;
}
.timetracking-entry-time-number-fields.blank .timetracking-header-number-field {
  text-indent: 3px;
}

.timetracking-header-number-colon {
  position: absolute;
  left: 32%;
  height: 100%;
  color: var(--text-default);
  font-size: 34px;
}
.timetracking-header-number-colon.seconds-colon {
  left: 65%;
}
.timetracking-entry-time-number-fields.blank .timetracking-header-number-colon {
  top: -1px;
}

.timetracking-header-number-input {
  height: 50px;
  width: 100%;
  margin: 0;
  padding: 0;
  text-indent: 3px;
  font-size: 34px;
  color: var(--text-default);
  text-align: center;
  background: transparent;
  border: none;
  appearance: none;
  border-radius: 0;
  box-shadow: none;
}
.timetracking-header-number-input:hover {
  color: var(--color-primary);
  transition: all var(--transition-fast) ease;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.timetracking-header-number-input:focus {
  color: var(--text-default);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--color-primary) 50%, transparent);
  animation: pop-on-input var(--transition-normal) 1 forwards;
}
.timetracking-header-number-input[disabled] {
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
  opacity: 1;
}

.timetracking-entry-form-rate-input.updated {
  animation: pop-on-input var(--transition-slow) 1 forwards;
  border-color: var(--color-primary);
}

.timetracking-information-tooltip {
  max-width: 240px;
}

.timetracking-first-time-banner, .timetracking-macos-app-banner {
  padding: 8px 0 4px;
  text-align: center;
  font-weight: 500;
  background: var(--bg-content);
  border-bottom: 1px solid var(--border-semi-transparent-alt);
  color: var(--text-muted);
}

.timetracking-macos-app-banner a {
  color: var(--text-muted);
}
.timetracking-macos-app-banner strong {
  margin-left: 4px;
}

.timetracking-modal-form .modal-footer .btn {
  width: 100%;
}
@media (min-width: 768px) {
  .timetracking-modal-form .modal-footer .btn {
    width: auto;
  }
}
.timetracking-modal-form .locked-time-entry {
  cursor: not-allowed;
}
.timetracking-modal-form.locked-time-entry input,
.timetracking-modal-form.locked-time-entry a:not(.project-select-open-link),
.timetracking-modal-form.locked-time-entry button,
.timetracking-modal-form.locked-time-entry textarea,
.timetracking-modal-form.locked-time-entry .form-field-view-only,
.timetracking-modal-form.locked-time-entry .project-select {
  cursor: not-allowed;
}

.timetracking-modal-header {
  display: flex;
  flex-direction: column-reverse;
  align-items: self-start;
  padding: 0px 0 30px;
}
@media (min-width: 768px) {
  .timetracking-modal-header {
    flex-direction: row;
    justify-content: space-between;
    padding: 40px 40px 30px;
  }
}

.timetracking-modal-header-content {
  padding: 40px 20px 0;
  width: 100%;
}
@media (min-width: 768px) {
  .timetracking-modal-header-content {
    flex: 1;
    padding: 0;
    width: auto;
  }
}

.timetracking-modal-date-top-options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 60px 14px 0;
  width: 100%;
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .timetracking-modal-date-top-options {
    padding: 0;
    width: auto;
    border: none;
  }
}

.timetracking-modal-hours {
  display: flex;
  align-items: center;
  width: 220px;
  margin-left: -10px;
  margin-bottom: 5px;
  margin-top: -10px;
}

.timetracking-modal-hour-item {
  position: relative;
  float: left;
  width: 32.5%;
}
.timetracking-modal-hour-item.timetracking-modal-hour-item--minutes {
  width: 35%;
}

.timetracking-modal-hour-field.ghost-form-control, .timetracking-modal-hour-field.ghost-form-display {
  width: 100%;
  text-align: left;
  padding-left: 10px;
  padding-right: 0;
}

.timetracking-modal-hour-label {
  position: absolute;
  top: 18px;
  line-height: 1;
  font-size: 20px;
  color: var(--text-muted);
  transform: translateX(-50%);
}
.timetracking-modal-hour-label.timetracking-modal-hour-label--hours {
  left: 57px;
}
.timetracking-modal-hour-label.timetracking-modal-hour-label--minutes {
  left: 133px;
}
.timetracking-modal-hour-label.timetracking-modal-hour-label--seconds {
  left: 205px;
}

.timetracking-modal-date {
  margin-top: -5px;
  color: var(--text-muted);
}
.timetracking-modal-date .SingleDatePicker {
  z-index: 10;
}

.timetracking-modal-project-section {
  display: flex;
  align-items: center;
  padding: 20px;
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .timetracking-modal-project-section {
    padding: 20px 40px;
  }
}

.timetracking-modal-project-field,
.timetracking-modal-member-field {
  position: relative;
  width: 50%;
}

.timetracking-modal-project-field {
  padding-left: 30px;
  padding-right: 10px;
}

.timetracking-modal-member-field .ghost-input-wrapper {
  padding-left: 30px;
}

.timetracking-modal-project-icon {
  position: absolute;
  left: 0;
  top: 7.5px;
  width: 16px;
  height: auto;
}
.timetracking-modal-project-icon path {
  stroke: var(--text-lighter);
}

.timetracking-modal-section-notice.section-notice .section-notice-header a, .timetracking-modal-section-notice.section-notice .section-notice-header a:focus, .timetracking-modal-section-notice.section-notice .section-notice-header a:visited {
  color: var(--text-default);
}
.timetracking-modal-section-notice.section-notice .section-notice-header a:hover, .timetracking-modal-section-notice.section-notice .section-notice-header a:active {
  color: var(--text-default);
  text-decoration: underline;
}

.timetracking-modal-invoice-status.invoice-item-status {
  position: absolute;
  left: 21px;
  top: 22px;
}

.timetracking-entry-time-datepicker {
  z-index: 3;
}

.time-number-field-container {
  position: relative;
  float: left;
  width: 33.3333333333%;
  padding: 0 10px;
}

.time-number-field-label {
  position: absolute;
  top: 8px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-lighter);
  z-index: 1;
  cursor: text;
  user-select: none;
}
.disabled .time-number-field-label {
  cursor: not-allowed;
}

.time-number-fields-colon {
  position: absolute;
  left: 30%;
  height: 100%;
  padding-top: 7px;
  font-size: 32px;
  color: var(--text-lighter);
}
.time-number-fields-colon.time-number-fields-seconds-colon {
  left: 66%;
}

.task-modal-action-bar {
  padding: 10px 45px 10px 20px;
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .task-modal-action-bar {
    padding: 30px 40px 20px;
    border-bottom: none;
  }
  .task-modal-action-bar:before {
    display: none;
  }
}

.task-modal-action-bar-in {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .task-modal-action-bar-in {
    justify-content: flex-end;
  }
}
.task-modal-action-bar-in .ghost-input-wrapper {
  flex: 1;
}

.task-modal-header {
  display: flex;
  flex-direction: column-reverse;
}
@media (min-width: 768px) {
  .task-modal-header {
    flex-direction: column;
  }
}

.task-modal-action-bar-subtask-label {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  height: 40px;
  padding: 10px 15px;
  cursor: default;
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .task-modal-action-bar-subtask-label {
    padding: 0px 15px 0 12px;
  }
}
.task-modal-action-bar-subtask-label a:not(.btn),
.task-modal-action-bar-subtask-label a:not(.btn):focus,
.task-modal-action-bar-subtask-label a:not(.btn):visited,
.task-modal-action-bar-subtask-label a:not(.btn):hover,
.task-modal-action-bar-subtask-label a:not(.btn):active {
  color: inherit;
  text-decoration: underline;
}

.task-modal-action-bar-subtask-field {
  position: relative;
  flex: 1;
  align-content: center;
  overflow: hidden;
  height: 30px;
  font-weight: 500;
}
.task-modal-action-bar-subtask-field .ghost-form-control, .task-modal-action-bar-subtask-field .ghost-form-display {
  padding-top: 3px;
  text-decoration: underline;
}

.task-modal-action-bar-subtask-field-icon {
  flex-shrink: 0;
  width: 15px;
  height: auto;
  margin-right: 5px;
}
.task-modal-action-bar-subtask-field-icon path {
  fill: currentColor;
}

.task-modal-details {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 30px 20px 20px;
  line-height: 1.3;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .task-modal-details {
    padding: 0px 40px 20px;
  }
}
.task-modal-details .ghost-input-wrapper {
  position: initial;
  font-size: 14px;
}
.task-modal-details .ghost-form-select.dropdown-sm .dropdown-contained .Select__value-container,
.task-modal-details .ghost-form-select.dropdown-sm .dropdown-contained .Select__placeholder {
  padding-top: 0px;
  font-size: 14px;
}
.task-modal-details .ghost-form-datepicker .SingleDatePicker .DateInput_input {
  font-size: 14px;
}

.task-batch-update-drawer .ghost-input-wrapper {
  position: initial;
}

.task-modal-details-mobile {
  display: block;
  width: 100%;
}
@media (min-width: 768px) {
  .task-modal-details-mobile {
    display: none;
  }
}

.task-modal-assigned {
  position: relative;
  height: 30px;
  padding-left: 30px;
}

.task-modal-assigned-user-avatar {
  position: absolute;
  left: -1px;
  top: 5px;
}

.task-modal-unassigned-icon {
  position: absolute;
  left: 1px;
  top: 5.5px;
  width: 20px;
  height: 20px;
  padding: 3px;
}
.task-modal-unassigned-icon path {
  fill: var(--text-lighter);
}

.task-modal-project {
  height: 30px;
  padding-left: 30px;
}

.task-modal-project-icon {
  position: absolute;
  left: 0;
  top: 5px;
  width: 20px;
  height: 20px;
}
.task-modal-project-icon path {
  stroke: var(--text-lighter);
}
.task-modal-project-icon.task-modal-project-icon--empty {
  padding: 2px;
}

.task-modal-project-client-tooltip {
  z-index: calc(var(--z-drawer) + 1) !important;
}

.task-modal-project-link, .task-modal-project-link:focus, .task-modal-project-link:visited, .task-modal-project-link:hover, .task-modal-project-link:active {
  color: var(--text-default);
}

.task-modal-timer {
  position: relative;
  padding-left: 20px;
}

.task-modal-timer-icon {
  position: absolute;
  display: block;
  top: 7.5px;
  left: 0;
  width: 15px;
  height: auto;
}
.task-modal-timer-icon path {
  fill: var(--text-lighter);
}
@media (min-width: 768px) {
  .task-modal-timer:hover .task-modal-timer-icon, .task-modal-timer.active .task-modal-timer-icon {
    display: none;
  }
}

.task-modal-play-icon-wrapper {
  position: absolute;
  display: none;
  top: 2px;
  left: -2px;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}
@media (min-width: 768px) {
  .task-modal-timer:hover .task-modal-play-icon-wrapper, .task-modal-timer.active .task-modal-play-icon-wrapper {
    display: block;
  }
}
.task-modal-play-icon-wrapper .time-tracker-mini {
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
}
.task-modal-play-icon-wrapper .time-tracker-mini-toggle {
  left: 0;
  top: 4px;
  right: auto;
  opacity: 1;
}
.task-modal-play-icon-wrapper .time-tracker-mini-toggle svg path {
  fill: var(--color-primary);
}
.task-modal-play-icon-wrapper .time-tracker-mini-time {
  display: none;
}
.task-modal-play-icon-wrapper .timetracker-nav-item-icon-bg {
  top: 0;
  left: 0;
  border: 2px solid var(--color-primary);
}
.task-modal-play-icon-wrapper .playing .timetracker-nav-item-icon-bg {
  border-color: transparent;
}
.task-modal-play-icon-wrapper .timetracker-nav-item-icon-play {
  top: 50%;
}
.task-modal-play-icon-wrapper .timetracker-nav-item-icon-border {
  left: -4px;
  top: -4px;
}

.task-modal-play-icon {
  width: 12px;
  height: auto;
  transition: all var(--transition-fast) ease;
}
.task-modal-play-icon path {
  fill: var(--text-lighter);
}
.task-modal-play-icon-wrapper:hover .task-modal-play-icon path {
  fill: var(--color-primary);
}

.task-modal-timer-toggle {
  display: inline-block;
  height: 30px;
  padding: 4px 7px;
  user-select: none;
}
.task-modal-timer-toggle.with-timer-value {
  color: var(--text-default);
  cursor: pointer;
}
.task-modal-timer-toggle.with-timer-value .ion-chevron-down {
  color: var(--text-lighter);
  font-size: 14px;
  margin-left: 10px;
}
.task-modal-timer-toggle.with-timer-value .ion-chevron-down:before {
  transition: all var(--transition-normal) ease;
}
.task-modal-timer-toggle.with-timer-value .ion-chevron-down.open:before {
  transform: rotate(180deg);
}
.task-modal-timer-toggle.with-timer-active {
  color: var(--text-lighter);
  cursor: default;
}

.task-modal-timer-toggle-empty-text {
  display: inline-block;
}
.drawer-side-field-item:hover .task-modal-timer-toggle-empty-text {
  display: none;
}

.task-modal-timer-toggle-empty-text-hover {
  display: none;
}
.drawer-side-field-item:hover .task-modal-timer-toggle-empty-text-hover {
  display: inline-block;
}

.task-modal-time-entries {
  position: absolute;
  z-index: 4;
  width: 100%;
  right: 0;
  margin-top: -10px;
  max-height: 340px;
  font-size: 14px;
  overflow: scroll;
  background: var(--bg-content);
  border-radius: 10px;
  border: 1px solid var(--border-content);
  box-shadow: 0px 4px 14px 0px color-mix(in srgb, var(--black) 12%, transparent);
}
@media (min-width: 768px) {
  .task-modal-time-entries {
    width: 460px;
    right: 113px;
  }
}

.time-entries-add-button {
  position: sticky;
  bottom: 0;
  background: var(--bg-content);
  padding: 10px 20px;
  border-top: 1px solid var(--border-content);
  z-index: 10;
}

.task-time-entries-group-title {
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  border-bottom: 1px solid var(--border-content);
  line-height: 20px;
}

.task-time-entries-group-title-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.task-time-entries-group-total {
  color: var(--text-default);
  text-align: right;
  font-size: 14px;
  font-weight: 500;
}

.task-modal-time-entries-add {
  position: sticky;
  display: flex;
  align-items: center;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 10px 0 0;
  padding: 15px 22px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
  background: var(--bg-content);
  box-shadow: 0 -2px 6px color-mix(in srgb, var(--black) 2%, transparent);
}

.task-modal-time-entries-add-icon {
  position: relative;
  top: 1px;
  width: 12px;
  height: auto;
  margin-right: 7px;
}
.task-modal-time-entries-add-icon path {
  fill: currentColor;
}

.task-time-entry {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  padding: 12px 0 12px 38px;
  cursor: pointer;
  align-items: center;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-semi-transparent-alt);
}
@media (min-width: 768px) {
  .task-time-entry:hover {
    color: var(--text-muted);
    background: var(--bg-grey-fc);
  }
}
.task-time-entry .user-avatar {
  position: absolute;
  left: 10px;
}

.task-time-entry-owner {
  flex: auto;
  padding-left: 10px;
  color: var(--text-default);
}

.task-time-entry-date {
  top: 1px;
}

.task-time-entry-time {
  text-align: right;
  font-weight: 500;
  padding-right: 10px;
}

.task-modal-dependency-editor {
  position: absolute;
  z-index: 6;
  width: 100%;
  top: 40px;
  right: 0;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid var(--border-content);
  background: var(--bg-content);
  box-shadow: 0px 4px 14px 0px color-mix(in srgb, var(--black) 12%, transparent);
}
.task-modal-dependency-editor.table-list {
  padding: 10px 20px;
}
@media (min-width: 768px) {
  .task-modal-dependency-editor.table-list {
    padding: 20px 30px;
  }
}
@media (min-width: 768px) {
  .task-modal-dependency-editor {
    width: 567px;
  }
}

.task-modal-destroy-task-dependency-icon {
  position: absolute;
  right: 2px;
  top: 10px;
  width: auto;
  height: 18px;
  cursor: pointer;
}
.disabled .task-modal-destroy-task-dependency-icon {
  opacity: 0.5;
  cursor: default;
}
.task-modal-destroy-task-dependency-icon path {
  fill: var(--color-danger);
}

.task-modal-task-dependency-item .dependent-task-title {
  font-weight: 500;
  text-decoration: underline;
}

.task-modal-open-dependent-task-link {
  position: absolute;
  z-index: 10;
  display: none;
  align-items: center;
  right: 0;
  top: 0;
  height: 30px;
  padding: 3px 6px 4px 7px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 6px;
  box-shadow: 0 1px 6px color-mix(in srgb, var(--black) 5%, transparent);
}
.task-modal-open-dependent-task-link:hover {
  border: 1px solid var(--border-content);
}
.task-modal-task-dependency-item:hover .task-modal-open-dependent-task-link {
  display: inline-flex;
}

.task-modal-task-dependency-item-tooltip {
  position: absolute !important;
  top: auto !important;
  left: 23px !important;
  right: 39px;
  bottom: 100%;
  bottom: calc(100% - 3px);
  max-width: 155px !important;
}

.task-modal-template-dates-configuration {
  position: absolute;
  z-index: 6;
  width: 395px;
  top: 40px;
  right: 0;
  padding: 30px;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid var(--border-content);
  background: var(--bg-content);
  box-shadow: 0px 4px 14px 0px color-mix(in srgb, var(--black) 12%, transparent);
}
.task-modal-template-dates-configuration .date-input-container {
  color: var(--text-muted);
}

.template-date-offset-container {
  position: relative;
}
.template-date-offset-container::after {
  position: absolute;
  content: "DAYS";
  font-family: var(--font-sans-serif);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-lighter);
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
}

.task-modal-template-date-offset-form-field {
  width: 90px;
  padding-right: 42px;
}

.task-modal-repeat-icon {
  position: absolute;
  top: 7px;
  left: -0.5px;
  width: 18px;
  height: auto;
}
.task-modal-repeat-icon path {
  fill: var(--text-lighter);
}

.task-modal-estimate-icon {
  position: absolute;
  top: 6px;
  left: -1px;
  width: 18px;
  height: auto;
}
.task-modal-estimate-icon path {
  fill: var(--text-lighter);
}

.task-recursion-checkbox.checkbox-label.checkbox-sm {
  display: flex;
  align-items: center;
  height: 40px;
  width: 100%;
  padding: 10px 10px 9px;
  text-wrap: nowrap;
  margin-bottom: 10px;
  border: 1px solid var(--border-field);
  border-radius: 6px;
}
.task-recursion-checkbox.checkbox-label.checkbox-sm .checkbox-toggle {
  margin-right: 10px;
  position: relative;
}

.task-recursion-month-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.task-recursion-month-day-label {
  font-size: 14px;
}

.task-recursion-month-day-select {
  display: inline-block;
  min-width: 70px;
  margin-left: 10px;
}

.task-recursion-weekly-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.task-recursion-weekday {
  font-size: 14px;
  font-weight: 600;
}

.task-recursion-weekday-option {
  width: 25px;
  height: 25px;
  padding: 2px 0;
  text-align: center;
  cursor: pointer;
  color: var(--text-muted);
  background: var(--bg-grey-e);
  border-radius: 50%;
}
.task-recursion-weekday-option:hover {
  background: var(--border-content-alt);
}
.task-recursion-weekday-option.selected {
  color: var(--color-primary-contrast);
  background: var(--color-primary);
}

.task-modal-body {
  border-top: 1px solid var(--border-content);
}

.task-modal-description {
  min-height: 100px;
  padding: 40px 20px 40px;
  font-size: 16px;
  color: var(--text-default);
  word-break: break-word;
  white-space: pre-line;
}
@media (min-width: 768px) {
  .task-modal-description {
    padding: 40px 40px 40px;
  }
}

.task-html-editor.wysiwyg-editor {
  border: none;
}
.task-html-editor.wysiwyg-editor .fr-element {
  padding: 0;
  min-height: 100px !important;
}
.task-html-editor.wysiwyg-editor .fr-quick-insert {
  left: -35px !important;
  transform: scale(0.8);
}
.task-html-editor.wysiwyg-editor .fr-qi-helper {
  padding: 0;
}
.task-html-editor.wysiwyg-editor.not-focused:hover {
  cursor: text;
}
.task-html-editor.wysiwyg-editor.focused {
  border: none;
}

.ghost-form-control.task-modal-description-input, .task-modal-description-input.ghost-form-display {
  min-height: 100px !important;
  width: calc(100% + 14px);
}

.task-modal-description-empty {
  color: var(--border-content-alt);
}

.task-modal-comments {
  padding: 35px 20px 90px;
  border-top: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .task-modal-comments {
    padding: 35px 40px 90px;
  }
}

.task-modal-subtasks-loading {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .task-modal-subtasks-loading {
    padding: 0 40px;
  }
}

.task-modal-subtasks-loading-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  padding-left: 25px;
  overflow: hidden;
}

.task-modal-subtasks-loading-item-checkbox {
  position: absolute;
  top: 12px;
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--bg-grey-f8);
  border: 2px solid var(--border-content);
  border-radius: 6px;
}

.task-modal-subtasks-loading-item-title {
  position: relative;
  height: 18px;
  width: 100%;
  background: var(--bg-grey-f8);
  border-radius: 5px;
}
.task-modal-subtasks-loading-item-title::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(140deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
  animation: loading-skeleton-shimmer var(--transition-slower) infinite;
  content: "";
}

[data-modal-name*=TASK_TEMPLATE_TASK_MODAL_NAME] .task-modal-subtasks {
  padding-left: 0;
  padding-right: 0;
}
[data-modal-name*=TASK_TEMPLATE_TASK_MODAL_NAME] .form-attachment-uploader-placeholder {
  padding-left: 0;
}
[data-modal-name*=TASK_TEMPLATE_TASK_MODAL_NAME] .subtask-form-wrapper {
  margin-left: 0;
}
[data-modal-name*=TASK_TEMPLATE_TASK_MODAL_NAME] .subtask-item-wrapper {
  padding-right: 25px;
}

.comments-container-list.comments-container-list--descending .task-modal-comment-item:last-child:after {
  display: none;
}

.task-modal-comment-item {
  position: relative;
  margin-bottom: 20px;
  padding-left: 32px;
}
.task-modal-comment-item.task-modal-event-item {
  margin-bottom: 20px;
}
.task-modal-comment-item:first-child {
  margin-top: 0;
}
.task-modal-comment-item:last-child, .task-modal-comment-item.task-modal-event-item:last-child {
  margin-bottom: 30px;
}
.task-modal-comment-item:after {
  content: "";
  position: absolute;
  left: 9.5px;
  bottom: -9px;
  top: 27px;
  border-right: 1px solid var(--border-content);
}
.task-modal-comment-item.task-modal-event-item:after {
  bottom: -13px;
  top: 23px;
}
.task-modal-comment-item:last-child:after, .task-modal-comment-item.task-modal-event-item:last-child:after {
  bottom: -26px;
}

.task-modal-event-item-text {
  margin-left: 2px;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12px;
}
.task-modal-event-item-text a,
.task-modal-event-item-text a:focus,
.task-modal-event-item-text a:visited {
  color: var(--text-default);
  text-decoration: none;
}
.task-modal-event-item-text a:hover,
.task-modal-event-item-text a:active {
  color: var(--text-default);
  text-decoration: underline;
}

.task-modal-comment-item-avatar {
  position: absolute;
  left: 0;
  top: -3px;
}

.task-modal-comment-item-name {
  position: relative;
  margin-bottom: 5px;
  padding-right: 30px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-default);
  cursor: default;
}

.task-modal-comment-item-timestamp {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all var(--transition-normal) ease;
}

.task-modal-comment-item-timestamp-separator {
  padding: 0 5px;
  color: var(--text-muted);
}

.task-modal-comment-item-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-default);
  word-break: break-word;
}
.task-modal-comment-item-text img {
  max-width: 100%;
  height: auto;
}

.task-modal-comment-item-dropdown {
  position: absolute;
  right: -5px;
  top: -5px;
}
.task-modal-comment-item-dropdown .dropdown-menu {
  left: auto;
  right: -9px;
  top: 28px;
}

.task-modal-comment-item-dropdown-toggle {
  display: block;
  padding: 7px;
  line-height: 10px;
  cursor: pointer;
  opacity: 0.2;
  transition: all var(--transition-normal) ease;
}
.task-modal-comment-item:hover .task-modal-comment-item-dropdown-toggle {
  opacity: 0.7;
}
.task-modal-comment-item-dropdown-toggle:hover, .task-modal-comment-item-dropdown-toggle:active {
  opacity: 1;
}
.task-modal-comment-item-dropdown.open .task-modal-comment-item-dropdown-toggle {
  opacity: 1;
}

.task-modal-comment-item-form .task-html-editor {
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--border-field);
}
.task-modal-comment-item-form .task-html-editor.focused {
  border: 1px solid var(--color-primary);
}

.task-modal-comment-item-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.task-modal-comment-item-attachment {
  width: 100px;
}
.task-modal-comment-item-attachment .task-attachment-in {
  height: 56px;
}
.task-modal-comment-item-attachment .task-attachment-name {
  padding-top: 8px;
  font-size: 12px;
  line-height: 1.2;
}

.task-modal-footer {
  padding: 20px;
  text-align: right;
  border-top: 1px solid var(--border-content);
}

.task-attachments {
  padding: 30px 20px;
  border-top: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .task-attachments {
    padding: 30px 40px;
  }
}
.task-attachments .form-attachment-uploader-placeholder {
  position: relative;
  display: inline-flex;
  width: auto;
  height: auto;
  padding: 5px 13.5px 5px 8.5px;
  font-size: 14px;
  left: -8.5px;
  color: var(--text-muted);
  margin-top: 10px;
}
.task-attachments .form-attachment-uploader-placeholder:hover {
  border-radius: 6px;
  background-color: var(--bg-grey-f8);
}
.task-attachments .form-attachment-uploader-progress-bar {
  left: 0;
  right: 0;
  margin-top: 3.5px;
}

.task-modal-attachment-add-icon {
  position: relative;
  top: 0;
  width: 10px;
  height: auto;
  margin-right: 7px;
}
.task-modal-attachment-add-icon path {
  fill: var(--text-muted);
}

.task-attachments-row {
  margin: 0 -10px 20px;
}

.task-attachment {
  padding: 20px 10px 0;
  position: relative;
}

.task-attachment-uploader-wrapper {
  position: relative;
  height: 40px;
  width: 200px;
}

.task-attachment-in {
  position: relative;
  display: block;
  height: 85px;
  width: 100%;
  background: var(--bg-content) center center no-repeat;
  background-size: cover;
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 6px;
  box-shadow: none;
  transition: all var(--transition-normal) ease;
}
.task-attachment-in:hover {
  border-color: color-mix(in srgb, var(--black) 25%, transparent);
  box-shadow: var(--box-shadow-small);
}
.task-attachment-in.task-attachment-in--uploading {
  background: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  box-shadow: none;
}

.task-attachment-in-view {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.task-attachment-name {
  position: absolute;
  padding: 8px 20px 10px 10px;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  color: var(--text-default);
  word-break: break-all;
  cursor: default;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-content) 90%, transparent);
  border: 1px solid var(--border-semi-transparent);
  border-radius: 6px;
  transition: all var(--transition-normal) ease;
}
.task-attachment-in.with-image .task-attachment-name {
  opacity: 0;
}
.task-attachment-in.with-image:hover .task-attachment-name {
  opacity: 1;
}

.task-attachment-dropdown {
  position: absolute;
  top: 5px;
  right: 5px;
  transition: all var(--transition-normal) ease;
  opacity: 0;
}
.task-attachment-in:hover .task-attachment-dropdown {
  opacity: 1;
}

.task-attachment-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 5px;
}

.task-attachment-public-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  pointer-events: none;
  user-select: none;
  background: var(--bg-grey-fa);
  border-radius: 5px;
}
.task-attachment-public-badge span {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-default);
  line-height: 20px;
}

.task-attachment-public-badge-icon {
  width: 12px;
  height: auto;
}
.task-attachment-public-badge-icon path {
  fill: var(--text-default);
}

.task-attachment-download-icon {
  position: absolute;
  right: -1px;
  bottom: -1px;
  padding: 3px 10px 0px;
  font-size: 18px;
  background: color-mix(in srgb, var(--black) 75%, transparent);
  border-radius: 5px 0 6px 0;
  transition: all var(--transition-normal) ease;
  opacity: 0.75;
}
.task-attachment-download-icon, .task-attachment-download-icon:focus, .task-attachment-download-icon:visited, .task-attachment-download-icon:hover, .task-attachment-download-icon:active {
  color: var(--color-primary-contrast);
}
.task-attachment-download-icon:hover, .task-attachment-download-icon:active {
  background: color-mix(in srgb, var(--black) 90%, transparent);
  opacity: 1;
}

.task-status-modal .status-field-label-list > form,
.status-modal .status-field-label-list > form {
  position: relative;
}
.task-status-modal .add-status-link,
.status-modal .add-status-link {
  display: inline-flex;
  flex-direction: row;
  align-items: last baseline;
  gap: 7px;
  padding: 5px 12px 5px 9px;
  border-radius: 4px;
  color: var(--text-muted);
  font-weight: 600;
  line-height: 1.4em;
}
.task-status-modal .add-status-link svg,
.status-modal .add-status-link svg {
  width: 11px;
  height: auto;
}
.task-status-modal .add-status-link svg path,
.status-modal .add-status-link svg path {
  fill: var(--text-muted);
}
.task-status-modal .add-status-link:hover,
.status-modal .add-status-link:hover {
  background: var(--bg-grey-f8);
}
.task-status-modal hr,
.status-modal hr {
  margin: 20px 0;
}
.task-status-modal .task-status-dropdown,
.status-modal .task-status-dropdown {
  position: absolute;
  top: 50px;
  z-index: 100;
  width: 100%;
  padding: 20px 0;
  max-width: 320px;
  border-radius: 4px;
  background: var(--bg-content);
  box-shadow: 0px 0px 14px 0px color-mix(in srgb, var(--black) 7%, transparent);
  border: 1px solid var(--border-content);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.task-status-modal .task-status-dropdown hr,
.status-modal .task-status-dropdown hr {
  width: 100%;
  margin: 20px 0 15px;
}
.task-status-modal .task-status-dropdown .delete-link,
.status-modal .task-status-dropdown .delete-link {
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2em;
}
.task-status-modal .task-status-dropdown .delete-link:hover,
.status-modal .task-status-dropdown .delete-link:hover {
  color: var(--text-default);
}
.task-status-modal .task-status-dropdown .btn-lg,
.status-modal .task-status-dropdown .btn-lg {
  padding: 6px 30px;
  min-height: 40px;
}
.task-status-modal .task-status-dropdown .btn-outline,
.status-modal .task-status-dropdown .btn-outline {
  border-color: var(--border-content);
  color: var(--text-default);
}
.task-status-modal .task-status-dropdown .btn-outline:hover,
.status-modal .task-status-dropdown .btn-outline:hover {
  border-color: #cdd0d2;
}
.task-status-modal .task-status-dropdown.deletion-confirmation,
.status-modal .task-status-dropdown.deletion-confirmation {
  padding: 20px;
}
.task-status-modal .task-status-dropdown.deletion-confirmation hr,
.status-modal .task-status-dropdown.deletion-confirmation hr {
  margin: 20px 0;
}
.task-status-modal .task-status-dropdown.deletion-confirmation p,
.status-modal .task-status-dropdown.deletion-confirmation p {
  font-size: 16px;
  line-height: 1.4em;
  margin: 0;
}
.task-status-modal [data-rfd-droppable-context-id],
.status-modal [data-rfd-droppable-context-id] {
  user-select: none;
  margin-bottom: 20px;
}
.task-status-modal [data-rfd-droppable-context-id] [data-rfd-draggable-id],
.status-modal [data-rfd-droppable-context-id] [data-rfd-draggable-id] {
  position: relative;
  margin: 0 -40px 20px;
  padding: 0 40px;
}
.task-status-modal [data-rfd-droppable-context-id] [data-rfd-draggable-id]:last-child,
.status-modal [data-rfd-droppable-context-id] [data-rfd-draggable-id]:last-child {
  margin-bottom: 0;
}
.task-status-modal [data-rfd-droppable-context-id] [data-rfd-draggable-id]:hover .task-status-drag-handle,
.status-modal [data-rfd-droppable-context-id] [data-rfd-draggable-id]:hover .task-status-drag-handle {
  display: block;
}
.task-status-modal [data-rfd-droppable-context-id] .task-status-drag-handle,
.status-modal [data-rfd-droppable-context-id] .task-status-drag-handle {
  display: none;
  position: absolute;
  left: 20px;
  top: 10px;
  cursor: grab;
}

.task-status-form-field.form-field-with-icon {
  background: var(--bg-panel);
  max-width: 320px;
}
.task-status-form-field.form-field-with-icon .form-field {
  font-size: 16px;
  font-weight: 500;
  padding: 7px 11px;
  line-height: 1em;
  background: var(--backgroundColor);
  border-color: transparent;
  color: var(--text-default);
  cursor: pointer;
}
.task-status-form-field.form-field-with-icon .form-field:hover {
  border-color: var(--borderColor);
}
.task-status-form-field.form-field-with-icon .form-field:focus {
  border-color: var(--baseColor);
}
.task-status-form-field.form-field-with-icon .form-field-icon {
  background: var(--baseColor);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  left: 14px !important;
  top: 20px;
}

.task-modal-container {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;
  flex: 1;
}

.task-modal-main-panel {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 768px) {
  .task-modal-main-panel {
    max-width: calc(100% - 275px);
  }
}

.task-modal-priority,
.task-modal-dependency,
.task-modal-deal {
  padding-left: calc(20px + var(--ghost-input-side-width));
}
.list-grid-item-cell .task-modal-priority,
.list-grid-item-cell .task-modal-dependency,
.list-grid-item-cell .task-modal-deal {
  margin: 0;
  padding: 0;
  width: auto;
}

.task-modal-priority-icon {
  position: absolute;
  left: 0.5px;
  top: 3px;
  width: 16px;
  height: auto;
}
.task-modal-priority-icon path {
  fill: var(--text-lighter);
}
.ghost--toggle:hover .task-modal-priority-icon path {
  fill: var(--text-muted);
}
.task-modal-priority-icon.urgent path, .ghost--toggle:hover .task-modal-priority-icon.urgent path {
  fill: var(--color-danger);
}
.task-modal-priority-icon.high path, .ghost--toggle:hover .task-modal-priority-icon.high path {
  fill: var(--color-accent-orange);
}
.task-modal-priority-icon.medium path, .ghost--toggle:hover .task-modal-priority-icon.medium path {
  fill: var(--color-accent-yellow);
}
.task-modal-priority-icon.low path, .ghost--toggle:hover .task-modal-priority-icon.low path {
  fill: var(--color-info);
}
.task-modal-priority-icon.task-modal-priority-icon-small {
  left: -2px;
  width: 14px;
}
.task-modal-priority-icon.list-grid-group-header-icon {
  position: relative;
  left: auto;
  top: 0;
  width: 14px;
  margin-left: 12px;
}
.drawer-side-field-item .task-modal-priority-icon {
  top: 6px;
  width: 15px;
}
.list-grid-item-cell .task-modal-priority-icon {
  position: relative;
  width: 15px;
}

.task-modal-dependency-icon {
  position: absolute;
  left: 1px;
  top: 7px;
  width: 14px;
  height: auto;
}
.task-modal-dependency-icon path {
  fill: var(--text-lighter);
}

.task-modal-dependency-selected-task {
  padding: 5px 7px;
  min-height: 30px;
}
.task-modal-dependency-selected-task:hover {
  background: var(--bg-input-hover);
  border-radius: 4px;
}

.task-modal-billable > .unauthorized:hover {
  background-color: transparent;
}

.task-modal-billable {
  padding-left: 23px;
}
.task-modal-billable .Select__single-value {
  top: -1px;
}
.task-modal-billable .Select__option--is-focused .task-modal-priority-icon-outline path {
  fill: var(--bg-content);
}

.task-modal-priority-label {
  font-size: 14px;
}

.task-modal-task-list-label {
  font-size: 14px;
}

.drawer-side-deal-icon {
  position: absolute;
  top: 8px;
  left: 1px;
  width: 17px;
  height: auto;
}
.drawer-side-deal-icon path {
  fill: var(--text-lighter);
}

.task-id-breadcrumb {
  font-size: 14px;
}

.tasks-list-top-action-btn-icon {
  width: 28px;
  height: auto;
}

.tasks-list-empty {
  min-height: 100px;
  text-align: center;
  color: var(--text-lighter);
  font-size: 16px;
  font-weight: 400;
  border: 1px solid var(--border-content);
  border-radius: 10px;
}

.tasks-list-empty-copy {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 50%;
  width: 100%;
  margin-top: -11px;
  text-align: center;
  color: var(--text-lighter);
  font-size: 16px;
  font-weight: 400;
}

.tasks-list-empty-bg {
  width: 100%;
  opacity: 0.5;
  border-radius: 10px;
}

.tasks-list-empty-with-links {
  padding: 40px 30px;
  text-align: center;
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 400;
  border: 1px solid var(--border-content);
  border-radius: 10px;
}

.tasks-list-items {
  border-bottom: 1px solid var(--border-content);
}

.list-grid-item .drawer-side-tags .react-select-multi-tags {
  width: 220px;
  position: absolute;
  z-index: 10;
}
.list-grid-item .drawer-side-tags .drawer-side-field-link.empty {
  font-size: 14px;
}
.list-grid-item .drawer-side-tags .drawer-side-field-default {
  padding-left: 0px;
}
.list-grid-item .drawer-side-tags .drawer-side-tags-list {
  left: 0px;
  min-height: 0;
  padding: 0px;
  margin: 0px;
  gap: 7px;
  min-height: none;
  flex-wrap: nowrap;
  overflow: hidden;
}

.reorder-column-li {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 5px 2px;
  padding: 7px 30px 7px 30px;
  max-width: 100%;
  border-radius: 6px;
}
.reorder-column-li:hover {
  background: var(--bg-grey-fc);
}
.reorder-column-li:last-child {
  margin-bottom: 15px;
}

.reorder-column-icon {
  position: absolute;
  left: 9px;
  top: 9px;
  width: 12px;
  height: auto;
  padding: 2px;
  fill: var(--text-muted);
  opacity: 0.2;
  transition: all var(--transition-fast) ease;
}
.reorder-column-li:hover .reorder-column-icon {
  opacity: 1;
}

.task-item {
  position: relative;
  flex-grow: 1;
  flex-shrink: 0;
  width: auto;
  height: 44px;
  min-width: 100%;
  background: var(--bg-content);
  border-top: 1px solid var(--border-content);
  transition: all var(--transition-fast) ease;
  transform: none !important;
}
.task-item:hover {
  z-index: initial;
}
.task-item.completing {
  pointer-events: none;
  user-select: none;
}
.task-item.task-list-compact {
  padding: 9px 24px 9px 26px;
  min-height: 44px;
  height: auto;
}

.task-item-inline-input {
  position: relative;
  display: block;
  z-index: 5;
  width: 100%;
  max-width: 100%;
  height: 36px;
  padding: 8px 8px 8px 5px;
  margin-left: -5px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  word-break: break-word;
  pointer-events: none;
  background: transparent;
  border: none;
  appearance: none;
  border-radius: 0;
  box-shadow: none;
  white-space: pre-wrap;
}
.task-item-inline-input:before {
  padding: 7px;
}
.task-item-inline-input:not(:focus) {
  width: fit-content;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.task-item-inline-input:empty {
  width: 80px;
}
.task-item-inline-input.content-editable-input-focused {
  z-index: 100;
  height: 36px;
  min-height: 36px;
  background-color: var(--bg-content);
  border-radius: 4px;
}
.task-item-inline-input.subtask-title-input {
  height: auto;
  min-height: 36px;
  background-color: transparent;
  border-radius: 4px;
}
.task-item-inline-input.subtask-title-input:focus {
  background: var(--bg-content);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.task-item-inline-input.subtask-title-input:not(:focus) {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}
@media (min-width: 768px) {
  .task-item-inline-input {
    pointer-events: auto;
  }
}

.task-item-drag-handler {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  left: -10px;
  top: 0;
  width: 30px;
  height: 100%;
  padding: 10px;
  cursor: pointer;
  opacity: 0.2;
  transition: all var(--transition-normal) ease;
}
.list-item .task-item-drag-handler {
  top: 14px;
}
.task-item:hover .task-item-drag-handler {
  opacity: 1;
}

.task-item-drag-handler-icon path {
  fill: var(--text-lighter);
}
.task-item-drag-handler:hover .task-item-drag-handler-icon path {
  fill: var(--text-muted);
}

.task-template-item-link {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 11px 15px 13px 25px;
}
.task-template-item-link .task-item-title {
  margin-top: 0;
  margin-bottom: 0;
  min-height: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-item-title {
  position: relative;
  margin-top: -6px;
  margin-bottom: -6px;
  padding-right: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
}
.task-item.completed .task-item-title {
  text-decoration: line-through;
}
.task-item-title.with-avatar {
  padding-right: 50px;
}
.task-item-title.with-repeat {
  padding-right: 80px;
}
.task-item-title.with-repeat.with-avatar {
  padding-right: 70px;
}
@media (min-width: 768px) {
  .task-item-title.with-repeat.with-avatar {
    padding-right: 100px;
  }
}

.task-list-title-readonly {
  padding-top: 7px;
}

.task-list-item-link {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.task-list-item-open-link {
  position: absolute;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  right: -10px;
  top: 5px;
  height: 33px;
  width: 40px;
  padding: 5px 0 5px 1px;
  flex-shrink: 0;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 6px !important;
  box-shadow: 0 1px 6px color-mix(in srgb, var(--black) 5%, transparent);
}
.task-item.task-list-compact .task-list-item-open-link {
  z-index: 5;
  top: 1px;
  right: 10px;
}
.gantt-table-body-cell .task-list-item-open-link {
  display: flex;
}
@media (min-width: 768px) {
  .task-list-item-open-link {
    right: 10px;
  }
  .task-list-item-open-link:hover {
    border: 1px solid var(--border-content-alt);
  }
  .list-grid-item:hover .task-list-item-open-link, .task-item:hover .task-list-item-open-link {
    display: flex;
  }
  .gantt-table-body-cell .task-list-item-open-link {
    display: none;
    right: 0;
    width: 40px;
  }
  .gantt-table-body-row:hover .task-list-item-open-link {
    display: flex;
  }
}

.task-list-item-open-link-icon {
  position: relative;
  top: 1px;
  height: 15px;
  width: auto;
}
.task-list-item-open-link-icon path {
  fill: var(--text-default);
}

.task-item-subtask-icon {
  position: relative;
  z-index: 5;
  display: inline-flex;
  flex-shrink: 0;
  flex-grow: 0;
  align-items: center;
  align-self: center;
  height: 28px;
}
.task-item-subtask-icon svg {
  display: inline-flex;
  flex-shrink: 0;
  flex-grow: 0;
  align-items: center;
  width: 18px;
  padding: 0 7px 0 1px;
  height: auto;
}
.task-item-subtask-icon path {
  fill: var(--text-lighter);
}
.gantt-task-bar-bar .task-item-subtask-icon svg {
  position: relative;
  top: 1px;
}
.workload-timeline-bar__content .task-item-subtask-icon {
  top: 1px;
  margin-top: -2px;
}
.workload-timeline-bar__content .task-item-subtask-icon svg {
  width: 16px;
}

.task-list-item-title {
  height: 36px;
  max-width: calc(100% - 40px);
}
.task-list-item-title.with-repeat {
  padding-right: 70px;
}
.gantt-table-body-cell .task-list-item-title {
  max-width: none;
  padding-left: 20px;
  padding-right: 30px;
}

.task-list-item-title-clickable-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.task-item-assigned-avatar {
  position: absolute;
  z-index: 3;
  top: 1px;
  right: 15px;
}
.task-item.task-list-compact .task-item-assigned-avatar {
  top: 9px;
}
.list-item.task-item .task-item-assigned-avatar {
  top: 2px;
  right: -10px;
}
@media (min-width: 768px) {
  .list-item.task-item .task-item-assigned-avatar {
    top: 1px;
    right: 15px;
  }
  .list-item:hover .list-item.task-item .task-item-assigned-avatar {
    display: none;
  }
}

.task-list-item-recursion-wrapper {
  display: inline-flex;
  margin-left: 7px;
  align-items: center;
}
.gantt-table-body-cell .task-list-item-recursion-wrapper {
  margin-left: auto;
}

.task-list-item-recursion {
  position: relative;
  z-index: 1;
  width: 18px;
  height: auto;
}
.task-list-item-recursion path {
  fill: currentColor;
}
.task-item.task-list-compact .task-list-item-recursion {
  position: absolute;
  right: 15px;
}
@media (min-width: 768px) {
  .task-item.task-list-compact:hover .task-list-item-recursion {
    display: none;
  }
}
.task-item-title.with-avatar .task-list-item-recursion {
  position: absolute;
  top: 10px;
  right: 45px;
}
.task-list-item-title.with-avatar ~ .task-list-item-recursion {
  position: absolute;
  right: 18px;
}
@media (min-width: 768px) {
  .task-list-item-title.with-avatar ~ .task-list-item-recursion {
    right: 45px;
  }
}

.task-list-item-with-repeat {
  padding-right: 40px;
}

.task-list-item-recursion-tooltip.react-tooltip {
  margin-top: 0 !important;
  text-transform: capitalize;
}

.tasks-list-item-assignee-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 2px;
  transition: all var(--transition-fast) ease;
}
.tasks-list-item-assignee-empty svg {
  width: 17px;
  height: auto;
  transform: translateX(1px);
}
.tasks-list-item-assignee-empty svg path {
  stroke: var(--text-lighter);
}
.ghost--toggle:hover .tasks-list-item-assignee-empty svg path {
  stroke: var(--text-muted);
}

.tasks-list-item-timetracking-empty {
  width: 56px;
  text-align: center;
}

.task-item-details {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-lighter);
  padding-top: 10px;
}

.task-item-description {
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  color: var(--text-lighter);
}
.task-item-description p {
  display: inline;
  margin: 0;
  padding: 0;
}
.task-item-description p:after {
  content: " ";
}

.task-item-date {
  padding-right: 15px;
  color: var(--text-lighter);
}
.task-item-date.overdue {
  color: var(--color-danger);
}

.task-item-overdue {
  color: var(--color-danger) !important;
}

.task-item-toggle {
  position: absolute;
  z-index: 6;
  left: -5px;
  top: 10px;
  width: 30px;
  height: 36px;
  cursor: pointer;
}
.task-item-toggle.task-toggle-compact {
  top: 4px;
}
.task-item-toggle.subtask-form-toggle {
  top: 2px;
  left: -5px;
}
.list-grid-item-cell .task-item-toggle {
  top: 1px;
  left: -30px;
}
.gantt-table-body-cell .task-item-toggle {
  top: 1px;
  left: -10px;
}

.task-item-checked-box {
  position: absolute;
  top: 9px;
  left: 5px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-content-alt);
  border-radius: 6px;
  transition: all var(--transition-fast) ease;
}
.task-item:hover .task-item-checked-box {
  border-color: var(--text-lighter);
}
.task-item-toggle:hover .task-item-checked-box, .task-item-checked-box:hover {
  border-color: var(--color-primary);
}
.task-item-checked-box.completing {
  transition: all var(--transition-normal) var(--transition-normal) ease;
  border-color: var(--color-primary);
}
.task-item-checked-box.completed {
  border-color: var(--color-primary);
}
.task-item-toggle.task-toggle-compact .task-item-checked-box {
  top: 10px;
}
.task-list-items .task-item-toggle .task-item-checked-box {
  top: 10px;
  left: 0px;
}
.task-list-compact .task-item-checked-box {
  z-index: 10;
  top: 13.5px;
  left: 2px;
}

.task-item-checked-bg {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: var(--color-primary);
  border-radius: 6px;
  opacity: 0;
}
.task-item-checked-box.completing .task-item-checked-bg {
  opacity: 1;
  animation: pop-on-task-completion var(--transition-slow) 1 forwards;
}
.task-item-checked-box.completed .task-item-checked-bg {
  opacity: 1;
}
.task-item-checked-box.completed:hover .task-item-checked-bg {
  background: color-mix(in srgb, var(--color-primary) 97%, var(--black));
}

.task-item-checked-bg-effect1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--color-primary) 40%, transparent);
  border-radius: 4px;
  opacity: 0;
  transform: scale(0);
}
.task-item-checked-box.completing .task-item-checked-bg-effect1 {
  animation: task-fade-out-scale-up1 var(--transition-normal) 1 forwards;
}
.task-item-checked-bg-effect2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: 5px;
  opacity: 0;
  transform: scale(0);
}
.task-item-checked-box.completing .task-item-checked-bg-effect2 {
  animation: task-fade-out-scale-up2 var(--transition-normal) 1 forwards;
}
.task-item-checked-svg {
  position: absolute;
  left: 1px;
  top: 2px;
  width: 10px;
  height: auto;
}
.task-item-checked-svg path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: all var(--transition-slow) ease;
}
.task-item-checked-box.completing .task-item-checked-svg path {
  stroke-dashoffset: 0;
}
.task-item-checked-box.completed .task-item-checked-svg path {
  stroke-dashoffset: 0;
  transition: none;
}

.task-item-checked-spark1 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 2px;
  background: color-mix(in srgb, var(--color-primary) 80%, transparent);
  border-radius: 50%;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
}
.task-item-checked-box.completing .task-item-checked-spark1 {
  animation: task-spark-effect1 var(--transition-slow) 1 forwards;
}

.task-item-checked-spark2 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 5px;
  background: color-mix(in srgb, var(--color-primary) 80%, transparent);
  border-radius: 50%;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all 0.6s ease;
}
.task-item-checked-box.completing .task-item-checked-spark2 {
  animation: task-spark-effect2 var(--transition-slow) 1 forwards;
}

.task-item-checked-spark3 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 2px;
  background: color-mix(in srgb, var(--color-primary) 80%, transparent);
  border-radius: 50%;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all 0.6s ease;
}
.task-item-checked-box.completing .task-item-checked-spark3 {
  animation: task-spark-effect3 var(--transition-slow) 1 forwards;
}

.task-item-checked-spark4 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 5px;
  background: color-mix(in srgb, var(--color-primary) 80%, transparent);
  border-radius: 50%;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all 0.6s ease;
}
.task-item-checked-box.completing .task-item-checked-spark4 {
  animation: task-spark-effect4 var(--transition-slow) 1 forwards;
}

.task-item-status {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  left: 0;
  margin: 0;
  width: 100%;
}

.task-item-dropdown .list-item-dd-toggle-link {
  left: auto;
  right: -15px;
  width: auto;
  padding: 8.5px 15px;
  transition: all var(--transition-normal) ease;
}
.task-item.task-list-compact .task-item-dropdown .list-item-dd-toggle-link {
  padding: 10px 15px 9px;
}
.task-item-dropdown .dropdown-menu {
  top: 40px !important;
}

.tasks-dashboard-container.calendar-view {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  flex: 1;
}
.tasks-dashboard-container .list-item-dd-toggle-link {
  padding-top: 21px;
  padding-bottom: 15px;
}

.time-tracker-mini {
  position: relative;
  z-index: 3;
  display: none;
  height: 20px;
  width: 100%;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .time-tracker-mini {
    display: flex;
  }
}

.time-tracker-mini-toggle {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 20px;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  pointer-events: auto;
}
.task-item:hover .time-tracker-mini-toggle, .list-grid-item:hover .time-tracker-mini-toggle, .time-tracker-mini.active .time-tracker-mini-toggle {
  opacity: 1;
}
.list-grid-item .time-tracker-mini-toggle .playing {
  position: relative;
}
.list-grid-item .time-tracker-mini-toggle .timetracker-nav-item-icon-border {
  top: -4px;
  left: -4px;
}
.list-grid-item .time-tracker-mini-toggle .timetracker-nav-item-icon-bg {
  position: relative;
  top: 0;
  left: 0;
}

.time-tracker-mini-time {
  transition: all var(--transition-normal) ease;
  width: 100%;
  height: 100%;
  text-align: left;
}
.task-item:hover .time-tracker-mini-time, .list-grid-item:hover .time-tracker-mini-time, .time-tracker-mini.active .time-tracker-mini-time {
  opacity: 0;
}

.time-tracker-add-button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 25px;
  width: 20px;
  height: 20px;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
}
.task-item:hover .time-tracker-add-button, .list-grid-item:hover .time-tracker-add-button {
  opacity: 1;
}

.time-tracker-add-button-icon {
  position: relative;
  width: 18px;
  height: auto;
  padding: 4px;
  background: var(--chart-tick-color);
  border-radius: 4px;
}
.time-tracker-add-button-icon path {
  fill: var(--bg-content);
}
.time-tracker-add-button-icon:hover {
  background: var(--text-default);
}
.time-tracker-add-button-icon:hover path {
  fill: var(--bg-content);
}

.task-item-add:hover .task-item-add-icon path {
  fill: var(--text-muted);
}
.task-item-add:hover .task-item-add-title {
  color: var(--text-muted);
}

.task-item-add-icon {
  position: absolute;
  left: 1px;
  top: 9px;
  width: 14px;
  height: 36px;
}
.task-item-add-icon path {
  fill: var(--text-lighter);
}

.task-item-add-title {
  color: var(--text-lighter);
}

.task-list-item .ghost-input-toggle-placeholder,
.task-list-item .tasks-list-item-assignee-empty,
.task-list-item .task-item-inline-input-placeholder {
  display: none;
}
.task-list-item:hover .ghost-input-toggle-placeholder,
.task-list-item:hover .tasks-list-item-assignee-empty,
.task-list-item:hover .task-item-inline-input-placeholder {
  display: block;
}
.task-list-item .SingleDatePicker,
.task-list-item .SingleDatePickerInput__withBorder,
.task-list-item .SingleDatePickerInput__withBorder:hover {
  border: none;
}
.task-list-item .DateInput_input:focus {
  border: none;
}
.task-list-item .ghost-form-control, .task-list-item .ghost-form-display,
.task-list-item .ghost-input-wrapper {
  text-overflow: ellipsis;
  font-size: 14px;
  border: none;
  box-shadow: none;
  border-style: none;
}

#task-board .infinite-scroll-component {
  overflow: visible !important;
}

.task-board-card-title.text-muted {
  color: var(--text-lighter);
}

.task-board-card-project {
  margin-bottom: 10px;
}
.task-board-card-project.text-muted {
  color: var(--text-lighter);
}

.task-board-card-due-date {
  display: inline-block;
  color: var(--text-muted-alt);
  margin-left: 10px;
}
.task-board-card-due-date.task-board-card-due-date--empty {
  color: var(--text-muted-alt);
}

.task-board-card-assignee-avatar {
  padding: 0 !important;
}

.task-board-card-recursion-wrapper {
  display: inline-block;
}

.task-board-card-recursion {
  position: relative;
  align-items: center;
  top: 3px;
  margin-left: 7px;
  width: auto;
  height: 15px;
  text-align: center;
  cursor: pointer;
}
.task-board-card-recursion path {
  fill: var(--text-muted);
}

.task-board-card-assignee-wrapper {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.task-board-card-assignee-avatar-empty {
  width: 20px;
  height: auto;
}

.task-billable-icon {
  width: 30px;
  height: 30px;
  min-height: auto;
  padding: 0;
  line-height: 1em;
  background: none;
  border: none;
}
.task-billable-icon:focus, .task-billable-icon:active {
  box-shadow: none;
  background: none;
  border: none;
}
.task-billable-icon.billable svg path {
  fill: var(--color-primary);
}
.task-billable-icon:hover {
  background: var(--bg-grey-f8);
  border-radius: 6px;
}
.list-grid-item-cell .task-billable-icon {
  position: relative;
  z-index: 3;
}

.task-billable-icon.unauthorized:hover {
  background: transparent;
  cursor: default;
}

.task-list-item-task-list-cell .drawer-side-field-item {
  margin-left: 0;
  padding-left: 0 !important;
}

.task-board-card-fields {
  display: flex;
  flex-wrap: wrap;
  padding: 5px 0 15px;
  gap: 10px;
}
.task-board-card-fields:empty {
  padding: 5px 0 0;
}

.task-board-card-field {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
  height: 20px;
  padding: 0 10px 0 8px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-grey-f5);
  color: var(--text-semi-transparent);
  cursor: pointer;
}
.task-board-card-field a {
  color: var(--text-muted);
}
.task-board-card-field--urgent {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger);
}
.task-board-card-field--high {
  background: color-mix(in srgb, var(--color-accent-orange) 10%, transparent);
  color: var(--color-accent-orange);
}
.task-board-card-field--medium {
  background: color-mix(in srgb, var(--color-accent-yellow) 10%, transparent);
  color: var(--color-accent-yellow);
}
.task-board-card-field--low {
  background: color-mix(in srgb, var(--color-info) 10%, transparent);
  color: var(--color-info);
}

.task-board-card-field__value {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.task-board-card-field__icon {
  display: flex;
  align-items: center;
  margin-right: 5px;
}
.task-board-card-field__icon svg {
  width: 13px;
  height: auto;
  max-height: 13px;
}
.task-board-card-field__icon path {
  fill: var(--text-semi-transparent);
}
.task-board-card-field--project .task-board-card-field__icon svg {
  width: 13px;
}
.task-board-card-field--company .task-board-card-field__icon {
  margin-right: 6px;
}
.task-board-card-field--task-list .task-board-card-field__icon {
  margin-right: 6px;
  margin-left: 2px;
}
.task-board-card-field--task-list .task-board-card-field__icon svg {
  width: 10px;
}
.task-board-card-field--time-estimate .task-board-card-field__icon {
  margin-right: 4px;
}
.task-board-card-field--billable .task-board-card-field__icon {
  margin-right: 6px;
}
.task-board-card-field--billable .task-board-card-field__icon svg {
  width: 12px;
}
.task-board-card-field--priority .task-board-card-field__icon {
  margin-right: 6px;
  margin-left: 2px;
}
.task-board-card-field--tracked-time .task-board-card-field__icon {
  margin-right: 6px;
}
.task-board-card-field--tracked-time .task-board-card-field__icon svg {
  width: 12px;
}
.task-board-card-field--services .task-board-card-field__icon {
  margin-right: 6px;
}
.task-board-card-field--services .task-board-card-field__icon svg {
  width: 12px;
}
.task-board-card-field--dependencies .task-board-card-field__icon {
  margin-right: 6px;
  margin-left: 2px;
}
.task-board-card-field--dependencies .task-board-card-field__icon svg {
  width: 10px;
}
.task-board-card-field--probability .task-board-card-field__icon {
  margin-right: 6px;
  margin-left: 2px;
}
.task-board-card-field--probability .task-board-card-field__icon svg {
  width: 10px;
}
.task-board-card-field--amount .task-board-card-field__icon {
  margin-right: 6px;
  margin-left: 2px;
}
.task-board-card-field--amount .task-board-card-field__icon svg {
  width: 10px;
}
.task-board-card-field--progress .task-board-card-field__icon {
  margin-right: 7px;
}
.task-board-card-field--progress .task-board-card-field__icon svg {
  max-height: 10px;
}

.task-board-card-field__icon .task-board-card-priority-icon {
  position: relative;
  top: 1px;
  width: 10px;
  cursor: pointer;
}
.task-board-card-field__icon .task-board-card-priority-icon.urgent path {
  fill: var(--color-danger);
}
.task-board-card-field__icon .task-board-card-priority-icon.high path {
  fill: var(--color-accent-orange);
}
.task-board-card-field__icon .task-board-card-priority-icon.medium path {
  fill: var(--color-accent-yellow);
}
.task-board-card-field__icon .task-board-card-priority-icon.low path {
  fill: var(--color-info);
}

.task-board-card-field__icon .task-board-card-field__select-icon {
  width: 10px;
  height: auto;
}

.task-board-card-field-capitalize {
  text-transform: capitalize;
}

.task-board-card-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.task-board-card-field-avatar-icon {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.task-board-card-field-avatar-icon.task-board-card-field-avatar-icon--user {
  border-radius: 50px;
}

.task-template-task-dependency-item {
  z-index: 3;
}
.task-template-task-dependency-item .dependent-task-title {
  font-weight: 500;
  text-decoration: underline;
}

.task-list-container.task-list-container--negative-margin .task-list-items, .task-list-container.task-list-container--negative-margin .task-list-add-button-wrapper {
  margin-left: -20px;
  margin-right: -20px;
}
@media (min-width: 768px) {
  .task-list-container.task-list-container--negative-margin .task-list-items, .task-list-container.task-list-container--negative-margin .task-list-add-button-wrapper {
    margin-left: -40px;
    margin-right: -40px;
  }
}

.task-list-items {
  position: relative;
}

.task-list-item-right {
  display: flex;
  gap: 5px;
  margin-left: 5px;
}

.task-list-draggable-item {
  position: relative;
}
.task-list-draggable-item .task-list-drag-handle {
  cursor: grab;
  padding: 4px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  opacity: 0.5;
  transition: opacity var(--transition-normal);
}
.task-list-draggable-item .task-list-drag-handle:hover {
  opacity: 1;
}
.task-list-draggable-item .task-list-drag-handle:active {
  cursor: grabbing;
}

.task-cell-title {
  flex: 1;
  min-width: 0;
}
.task-cell-title-input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 14px;
  line-height: 20px;
  color: inherit;
}
.task-cell-title-input:focus {
  background: var(--bg-content);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.task-cell-title-input:not(:focus) {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

.task-item-drag-preview {
  padding: 8px 12px;
  background-color: var(--bg-content);
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--black) 15%, transparent);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gantt-body {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid var(--border-content);
  border-left: 0;
  background: var(--bg-content);
  user-select: none;
}
.gantt-body *,
.gantt-body *::before,
.gantt-body *::after {
  box-sizing: border-box;
}
.gantt-body header {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 56px;
}
.gantt-body main {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  flex: 1;
  border-top: 1px solid var(--border-content);
  will-change: transform;
  will-change: overflow;
}

.gantt-today {
  position: absolute;
  top: 0;
  background: var(--black);
  width: 0;
  height: 0;
  text-align: center;
  line-height: 1px;
  border-radius: 50%;
  font-size: 12px;
  color: var(--color-primary-contrast);
  pointer-events: none;
}

.gantt-today_line {
  width: 1px;
  background: var(--black);
  margin-left: 15px;
}

.gantt-time-indicator {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--bg-inverse);
  box-shadow: 0 2px 4px rgba(1, 113, 194, 0.1);
  transform: translate(15px, 5px);
  transition: opacity var(--transition-medium);
  padding: 0 7px;
  color: var(--text-inverse);
  border-radius: 4px;
  outline: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  user-select: none;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  font-size: 12px;
}
.gantt-time-indicator-scrolling {
  opacity: 0;
}

.gantt-time-axis-scale-toggle {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  height: 56px;
  padding: 0 12px 0 13px;
  cursor: pointer;
  background-color: var(--bg-content);
  border-left: 1px solid var(--border-content);
  transition: color var(--transition-normal);
}

.gantt-time-axis-scale-toggle-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-default);
}

.gantt-time-axis-scale-toggle-icon {
  width: 13px;
  height: auto;
  margin-right: 10px;
}

.gantt-time-axis-scale-shadow {
  position: absolute;
  top: 4px;
  right: 0;
  width: 90px;
  height: 48px;
  z-index: 0;
  transition: box-shadow var(--transition-slow);
}
.gantt-time-axis-scale-shadow.gantt-time-axis-scale-shadow--scrolling {
  box-shadow: -3px 0 10px 0 color-mix(in srgb, var(--black) 5%, transparent);
}

.gantt-time-axis-scale-menu.dropdown-menu {
  position: absolute;
  top: 55px;
  right: 12px;
  left: auto;
}

.gantt-time-axis {
  height: 56px;
  position: absolute;
  top: 0;
  user-select: none;
  overflow: hidden;
  cursor: ew-resize;
}

.gantt-time-axis-render-chunk {
  position: absolute;
  top: 0;
  left: 0;
  height: 56px;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.gantt-time-axis-today {
  color: var(--color-primary-contrast);
  background-color: var(--black);
  border-radius: 2px;
}

.gantt-time-axis-monthYear {
  position: absolute;
  overflow: hidden;
  box-sizing: content-box;
  height: 28px;
  border-right: 1px solid var(--border-content);
  font-weight: 500;
  text-align: left;
  font-size: 12px;
  line-height: 28px;
  color: var(--text-default);
  border-bottom: 1px solid var(--border-content);
}
.gantt-time-axis-monthYear-label {
  overflow: hidden;
  padding-left: 8px;
  white-space: nowrap;
}
.gantt-time-axis-monthYear + .planner-date-header-column {
  border-left: 1px solid var(--border-content);
}

.gantt-time-axis-dateWeek {
  position: absolute;
  top: 27px;
  box-sizing: content-box;
  height: 28px;
  border-top: 1px solid var(--border-content);
  border-right: 1px solid var(--border-content);
  text-align: center;
  font-size: 12px;
  line-height: 28px;
  color: var(--text-default);
}
.gantt-time-axis-dateWeek.weekends {
  background-color: hsla(0, 0%, 96.9%, 0.5);
}

.gantt-time-axis-holiday {
  background-color: hsla(220, 40%, 95%, 0.8);
  font-weight: 500;
  color: var(--text-default);
}
.gantt-time-axis-holiday:hover {
  background-color: hsla(220, 40%, 90%, 0.9);
}

.gantt-holiday-popover {
  background-color: var(--bg-content);
  color: var(--text-default);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--black) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--black) 8%, transparent);
  min-width: 200px;
}
.gantt-holiday-popover-date {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-default);
  margin-bottom: 6px;
}
.gantt-holiday-popover-name {
  font-size: 14px;
  color: var(--text-default);
  margin-bottom: 4px;
  font-weight: 500;
}
.gantt-holiday-popover-type {
  color: #666;
  font-size: 12px;
  font-weight: 400;
}

.gantt-task-bar-thumb {
  position: absolute;
  cursor: pointer;
  white-space: nowrap;
  z-index: 2;
  overflow: hidden;
  max-width: 200px;
  color: #595959;
  text-overflow: ellipsis;
  word-break: keep-all;
  line-height: 16px;
  user-select: none;
  font-size: 12px;
  padding-right: 16px;
  display: flex;
  align-items: center;
}
.gantt-task-bar-thumb-left {
  transform: translate(0);
}
.gantt-task-bar-thumb-right {
  transform: translate(-100%);
}
.gantt-task-bar-thumb-circle-left {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  margin-right: 10px;
}
.gantt-task-bar-thumb-circle-right {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  margin-left: 10px;
}

.gantt-task-bar {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
}

.gantt-task-bar-estimate {
  flex-shrink: 0;
  color: color-mix(in srgb, var(--black) 60%, transparent);
  z-index: 1;
  margin-left: 5px;
}
.gantt-task-bar-estimate svg {
  position: relative;
  top: 0.5px;
  width: 12px;
  margin-right: 2px;
}
.gantt-task-bar-estimate svg path {
  fill: color-mix(in srgb, var(--black) 60%, transparent);
}

.gantt-task-bar-loading {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: not-allowed;
  z-index: 9;
}

.gantt-task-bar-bar {
  position: relative;
  top: 0;
  height: 30px;
  cursor: pointer;
}

.gantt-task-bar-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-default);
  padding: 3px 8px 3px 9px;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--bg-content);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--black) 2%, transparent), inset 0 0 0 1px var(--shadow-gantt);
}
.gantt-task-bar-content:focus, .gantt-task-bar-content:visited {
  outline: none;
  text-decoration: none;
}
.gantt-task-bar.gantt-task-bar--showing .gantt-task-bar-content {
  box-shadow: inset 0 0 0 1px var(--shadow-gantt-hover);
}
.gantt-task-bar-content.task-recursion {
  box-shadow: none;
  border: 1px dashed var(--text-lighter);
}
.gantt-task-bar-content.task-recursion .gantt-task-bar-content-border {
  display: none;
}

.gantt-task-bar-content-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  border-radius: 4px;
  transition: opacity var(--transition-fast) ease;
}
.gantt-task-bar-bar:hover .gantt-task-bar-content-bg {
  opacity: 0.1;
}

.gantt-task-bar-content-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  border-left: 2px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 3px 0 0 3px;
}
.gantt-task-bar-content-border.gantt-task-bar-content-border--time-off {
  border-left-color: var(--text-default);
}

.gantt-task-bar-content-primary {
  position: relative;
  display: flex;
  align-items: center;
  flex-grow: 1;
  color: var(--text-default);
  flex-shrink: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gantt-task-bar-content-primary--loading {
  justify-content: space-between;
}

.gantt-task-bar-content-primary-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gantt-task-bar-content-spinner {
  flex-shrink: 0;
}

.gantt-task-bar-content-secondary {
  text-align: right;
  padding-left: 5px;
  font-weight: 500;
  white-space: nowrap;
}

.gantt-task-bar-content-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--black);
  opacity: 0.5;
  transition: height var(--transition-normal) ease;
}
.gantt-task-bar.gantt-task-bar--showing .gantt-task-bar-content-progress {
  height: 2px;
  opacity: 0.6;
}

.gantt-task-bar-invalid-date-range {
  display: none;
}

.gantt-task-bar-resize-bg {
  position: absolute;
  left: 0;
  top: -5px;
  border-radius: 4px;
  box-shadow: 0 2px 14px 0 color-mix(in srgb, var(--black) 5%, transparent);
  border: 1px solid var(--border-content);
  background-color: var(--bg-content);
}
.gantt-task-bar-resize-bg-compact {
  height: 17px;
}

.gantt-task-bar-resize-handle {
  position: absolute;
  z-index: 3;
  width: 14px;
  padding: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.gantt-task-bar-resize-handle:after, .gantt-task-bar-resize-handle:before {
  top: 6px;
  width: 2px;
  height: 80%;
  border-radius: 3px;
  background-color: var(--border-content-alt);
  content: "";
}
.gantt-task-bar-resize-handle-disabled {
  cursor: not-allowed !important;
}
.gantt-task-bar-resize-handle-left {
  cursor: col-resize;
}
.gantt-task-bar-resize-handle-left:before {
  left: 4px;
}
.gantt-task-bar-resize-handle-left:after {
  right: 4px;
}
.gantt-task-bar-resize-handle-right {
  cursor: col-resize;
}
.gantt-task-bar-resize-handle-right:before {
  left: 4px;
}
.gantt-task-bar-resize-handle-right:after {
  right: 4px;
}

.gantt-task-bar-date-text {
  color: var(--text-lighter);
  pointer-events: none;
}
.gantt-task-bar.gantt-task-bar--showing .gantt-task-bar-date-text {
  color: var(--text-lighter);
}

.gantt-task-bar-date-text {
  position: absolute;
  white-space: nowrap;
  font-size: 12px;
  top: 7px;
  padding: 0 22px;
}

.gantt-task-bar-popover {
  padding: 20px;
  background: var(--bg-panel);
  border: 1px solid var(--border-content);
  border-radius: 6px;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--black) 5%, transparent);
  animation: gantt-popover-fade-in var(--transition-fast) ease;
}

.gantt-task-bar-popover-only-title {
  display: inline-block;
  max-width: 260px;
  width: auto;
  padding: 9px 13px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-default);
  word-break: break-word;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  box-shadow: 0 1px 12px color-mix(in srgb, var(--black) 5%, transparent);
  border-radius: 6px;
  opacity: 0;
  animation: fade-in var(--transition-fast) var(--transition-slow) ease forwards;
}

.gantt-task-bar-popover-title {
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  word-break: break-word;
}

.gantt-task-bar-popover-subtitle {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-lighter);
}

.gantt-task-bar-popover-status {
  flex-grow: 1;
  flex-shrink: 0;
  max-width: 54%;
}
.gantt-task-bar-popover-status .status-field-dot {
  width: 12px;
  height: 12px;
  top: 3px;
  left: 4px;
}

.gantt-task-bar-popover-item {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-left: 30px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-default);
}
.gantt-task-bar-popover-item.gantt-task-bar-popover-item--blank {
  color: var(--text-lighter);
}
.gantt-task-bar-popover-item.gantt-task-bar-popover-item--avatar-list {
  margin-bottom: 10px;
  margin-top: -5px;
}

.gantt-task-bar-popover-item-icon {
  position: absolute;
  left: 0;
  top: 0;
}
.gantt-task-bar-popover-item-icon.gantt-task-bar-popover-item-icon--avatar {
  top: -1px;
}
.gantt-task-bar-popover-item-icon.gantt-task-bar-popover-item-icon--person {
  top: 2.5px;
  left: 3.5px;
  width: 14px;
  height: auto;
}
.gantt-task-bar-popover-item-icon.gantt-task-bar-popover-item-icon--calendar {
  top: 1px;
  left: 3px;
  width: 14px;
  height: auto;
}
.gantt-task-bar-popover-item-icon.gantt-task-bar-popover-item-icon--clock {
  top: 1px;
  left: 2px;
  width: 16px;
  height: auto;
}
.gantt-task-bar-popover-item-icon.gantt-task-bar-popover-item-icon--estimate {
  top: 0;
  left: 1px;
  width: 18px;
  height: auto;
}

.gantt-task-bar-popover-item-recursion {
  position: relative;
  top: 0.5px;
  width: 18px;
  height: auto;
  margin-left: 7px;
}
.gantt-task-bar-popover-item-recursion path {
  fill: var(--text-lighter);
}

.workload-timeline-bar__popover-only-title {
  display: inline-block;
  max-width: 260px;
  width: auto;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-default);
  word-break: break-word;
  background: var(--bg-panel);
  border: 1px solid var(--border-content);
  box-shadow: 0 1px 12px color-mix(in srgb, var(--black) 5%, transparent);
  border-radius: 6px;
  opacity: 0;
  animation: fade-in var(--transition-fast) var(--transition-slow) ease forwards;
}

.workload-timeline-bar__popover-tentative {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-default);
}

.workload-timeline-bar__popover-duration {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-default);
}

.workload-timeline-bar__popover-notes {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.gantt-table-header {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  border-right: 1px solid var(--border-content);
}

.gantt-table-header-head {
  position: relative;
}

.gantt-table-header-row {
  position: absolute;
  left: 0;
  display: flex;
  transition: height var(--transition-medium);
  width: 100%;
}

.gantt-table-header-column {
  position: relative;
  display: flex;
  flex-shrink: 0;
}

.gantt-table-header-cell {
  display: flex;
  flex: 1;
  align-items: center;
  overflow: hidden;
  padding: 0 10px;
  user-select: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-lighter);
}
.gantt-table-header-column:first-child .gantt-table-header-cell {
  padding-left: 30px;
}
.gantt-table-header-column.gantt-table-header-column--project-title .gantt-table-header-cell {
  padding-left: 20px;
}

.gantt-table-header-ellipsis {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gantt-table-body {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  border-right: 1px solid var(--border-content);
}

.gantt-table-body-empty {
  margin-top: 30px;
  color: var(--text-lighter);
  text-align: center;
}

.gantt-table-body-row,
.gantt-table-body-border_row {
  display: flex;
  align-items: center;
  position: absolute;
  width: 100%;
}

.gantt-table-body-border_row {
  height: 100%;
  pointer-events: none;
}

.gantt-table-body-column {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
  color: var(--text-muted);
  user-select: none;
  padding: 0 10px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-semi-transparent-alt);
}
.gantt-table-body-column:hover {
  color: var(--text-default);
}
.gantt-table-body-column.gantt-table-body-column--reorder {
  width: 30px;
  justify-content: stretch;
  flex-shrink: 0;
  padding: 0 0 0 2px;
}
.gantt-table-body-row.gantt-table-body-row-sort-before .gantt-table-body-column {
  box-shadow: 0 -1px 0 var(--text-default);
}
.gantt-table-body-row.gantt-table-body-row-sort-after .gantt-table-body-column {
  border-bottom: 1px solid var(--text-default);
}

.gantt-table-body-cell {
  display: inline-flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  flex-grow: 1;
  width: 100%;
  height: 100%;
  align-items: center;
  vertical-align: top;
  white-space: nowrap;
  background: var(--bg-content);
  transition: all var(--transition-fast) ease;
}
.gantt-table-body-column.gantt-table-body-column--reorder .gantt-table-body-cell {
  cursor: grab;
  border: 0;
  outline: none;
}
.gantt-table-body-column.gantt-table-body-column--reorder .gantt-table-body-cell[disabled] {
  cursor: not-allowed;
}

.gantt-table-row-title {
  color: var(--text-default);
  font-weight: 500;
}
.gantt-table-row-title a,
.gantt-table-row-title a:focus,
.gantt-table-row-title a:visited {
  color: var(--text-default);
  text-decoration: none;
}
.gantt-table-row-title a:hover,
.gantt-table-row-title a:active {
  color: var(--text-default);
  text-decoration: underline;
}

.gantt-table-body-row-indentation {
  height: 100%;
  position: absolute;
  left: 0;
  pointer-events: none;
}
.gantt-table-body-row-indentation:before {
  content: "";
  position: absolute;
  height: 100%;
  left: 0;
  width: 1px;
  bottom: 0;
  background-color: #d9e6f2;
}

.gantt-table-body-row-indentation-both:after {
  content: "";
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: #d9e6f2;
}

.gantt-table-body-row-indentation-hidden {
  visibility: hidden;
}

.gantt-table-body-row-new {
  display: flex;
  align-items: center;
  margin-left: 7.5px;
  font-weight: 500;
  color: var(--text-lighter);
}

.gantt-table-body-row-new-label {
  position: relative;
  top: -1px;
}

.gantt-table-body-row-new-icon {
  margin-right: 11px;
  width: 11px;
  height: auto;
}
.gantt-table-body-row-new-icon path {
  fill: var(--text-lighter);
}

.gantt-row-toggler {
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #d9d9d9;
  cursor: pointer;
  position: relative;
  z-index: 5;
}
.gantt-row-toggler:hover {
  color: #8c8c8c;
}
.gantt-row-toggler > i {
  width: 20px;
  height: 20px;
  background: var(--bg-content);
}
.gantt-row-toggler > i > svg {
  transition: transform 218ms;
  fill: currentColor;
}
.gantt-row-toggler-collapsed > i > svg {
  transform: rotate(-90deg);
}

.gantt-selection-indicator {
  position: absolute;
  width: 100%;
  background: color-mix(in srgb, var(--black) 1%, transparent);
  pointer-events: none;
  z-index: 10;
}

.gantt-invalid-task-bar {
  position: absolute;
  left: 0;
  width: 100vw;
}

.gantt-invalid-task-bar-block {
  position: absolute;
  width: 16px;
  min-width: 8px;
  height: 9px;
  left: 0;
  border: 1px solid;
  border-radius: 6px;
  cursor: pointer;
  z-index: 1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .gantt-invalid-task-bar-block {
    background: var(--bg-content-alt) !important;
    border-color: var(--border-content-alt) !important;
  }
}
:root[data-theme=dark] .gantt-invalid-task-bar-block {
  background: var(--bg-content-alt) !important;
  border-color: var(--border-content-alt) !important;
}

.gantt-invalid-task-bar-block-icon {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 10px;
  height: auto;
  transform: translateX(-50%);
}

.gantt-invalid-task-bar-date {
  position: absolute;
  top: -7px;
  white-space: nowrap;
  color: var(--text-default);
  font-weight: 500;
  font-size: 12px;
}

.gantt-group-bar {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
}
.gantt-group-bar .gantt-bar {
  position: relative;
  top: -3px;
}

.gantt-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  cursor: default;
}
.gantt-divider:hover hr {
  border-color: var(--text-default);
}
.gantt-divider:hover hr:before {
  background: var(--black);
}
.gantt-divider:hover .gantt-divider-icon-wrapper {
  background-color: var(--black);
  border-color: var(--text-default);
  border-top: 0;
  border-bottom: 0;
  cursor: pointer;
}
.gantt-divider:hover .gantt-divider-icon-wrapper:after {
  content: "";
  right: -3px;
  position: absolute;
  width: 2px;
  height: 30px;
  background-color: transparent;
}
.gantt-divider:hover .gantt-divider-icon-wrapper .gantt-divider-arrow:after,
.gantt-divider:hover .gantt-divider-icon-wrapper .gantt-divider-arrow:before {
  background-color: var(--bg-content);
}
.gantt-divider > hr {
  margin: 0;
  height: 100%;
  width: 0;
  border: none;
  border-right: 1px solid transparent;
}
.gantt-divider > .gantt-divider-icon-wrapper {
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 30px;
  border-radius: 0 4px 4px 0;
  border: 1px solid var(--border-content);
  border-left: 0;
  background-color: var(--bg-content);
}
.gantt-divider .gantt-divider-arrow:before {
  bottom: -1px;
  transform: rotate(30deg);
}
.gantt-divider .gantt-divider-arrow:after {
  top: -1px;
  transform: rotate(-30deg);
}
.gantt-divider .gantt-divider-arrow:after,
.gantt-divider .gantt-divider-arrow:before {
  content: "";
  display: block;
  position: relative;
  width: 2px;
  height: 8px;
  background-color: #bfbfbf;
  border-radius: 1px;
}

.gantt-divider-arrow.gantt-divider-reverse {
  transform: rotate(-180deg);
}

.gantt-divider_only > hr:before {
  content: "";
  position: absolute;
  border-top: 7px solid var(--bg-content);
  border-bottom: 7px solid var(--bg-content);
  background: #a7add0;
  z-index: 2;
  height: 26px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
}

.gantt-divider_only > hr {
  border-color: #a7add0;
}

.task-dependency-line {
  z-index: -1;
}
.task-dependency-line .line {
  stroke: #f87872;
}

.gantt-chart {
  position: absolute;
  top: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

.gantt-chart-svg-renderer {
  position: absolute;
  top: 0;
  left: 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .gantt-chart-svg-renderer g[stroke="#f8f8f8"] {
    stroke: var(--grey-3);
  }
}
:root[data-theme=dark] .gantt-chart-svg-renderer g[stroke="#f8f8f8"] {
  stroke: var(--grey-3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .gantt-chart-svg-renderer rect[fill="#fcfcfc"] {
    opacity: 0.02;
  }
}
:root[data-theme=dark] .gantt-chart-svg-renderer rect[fill="#fcfcfc"] {
  opacity: 0.02;
}

.gantt-render-chunk {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.gantt-task-reorder-icon {
  margin: 0 auto;
  width: 8px;
  height: auto;
}
.gantt-task-reorder-icon path {
  fill: var(--border-content-alt);
}
.gantt-table-body-row:hover .gantt-task-reorder-icon path {
  fill: var(--text-lighter);
}
.gantt-table-body-cell:hover .gantt-task-reorder-icon path {
  fill: var(--text-muted);
}

.gantt-table-body-cell.gantt-table-body-cell--with-expandable {
  padding-left: 15px;
}

.gantt-table-body-cell .list-grid-item-row-expandable {
  top: 6.5px;
  left: -8.5px;
}
.gantt-table-body-cell .list-grid-item-row-expandable.list-grid-item-row-expandable--depth-1 {
  top: 6.5px;
  left: 0;
}
.gantt-table-body-cell .list-grid-item-row-expandable.list-grid-item-row-expandable--depth-2 {
  top: 6.5px;
  left: 0;
}

.gantt-table-body-cell .list-grid-item-row-expandable-icon {
  width: 11px;
  height: auto;
}

.workload-table-body-row {
  border-bottom: 1px solid var(--border-semi-transparent-alt);
}

.workload-table-body-row-in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  padding: 10px 40px 10px 15px;
  cursor: pointer;
  max-width: 100%;
}
.workload-table-body-row-in.workload-table-body-row-in--top-align {
  align-items: flex-start;
  min-height: 70px;
  padding-top: 19px;
}
.workload-table-body-row-in.workload-table-body-row-in--top-align.workload-table-body-row-in--with-job-role {
  padding-top: 16px;
}
.workload-table-body-row-in.workload-table-body-row-in--non-expanding {
  padding-right: 20px;
  cursor: default;
}

.workload-table-body-row-label {
  position: relative;
  top: -1px;
  min-width: 0;
  user-select: none;
  white-space: nowrap;
  font-weight: 500;
}

.workload-table-body-row-sublabel {
  margin-top: 1px;
  font-size: 12px;
  color: var(--text-lighter);
}

.workload-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.workload-group-title, .workload-group-title:focus, .workload-group-title:visited, .workload-group-title:hover, .workload-group-title:active {
  color: var(--text-default);
}
.workload-group-title:hover:not(.workload-group-title--unavailable), .workload-group-title:active:not(.workload-group-title--unavailable) {
  text-decoration: underline;
}

.workload-group-title-unavailable-icon {
  width: 15px;
  height: auto;
  margin: 1px 2.5px 0;
}
.workload-group-title-unavailable-icon path {
  fill: var(--text-lighter);
}

.workload-capacity {
  border-bottom: 1px solid var(--border-semi-transparent-alt);
  box-shadow: 0 -1px 0 var(--border-content);
}

.workload-invalid-task-bar {
  position: absolute;
  left: 0;
  width: 100vw;
}

.workload-invalid-task-bar-block {
  position: absolute;
  z-index: 1;
  width: 16px;
  min-width: 8px;
  height: 9px;
  left: 0;
  cursor: pointer;
  border: 1px solid;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.workload-invalid-task-bar-block-icon {
  width: 10px;
  height: auto;
}

.workload-invalid-task-bar-date {
  position: absolute;
  top: -8px;
  white-space: nowrap;
  color: var(--text-default);
  font-weight: 500;
  font-size: 12px;
}

.task-drag-preview {
  position: fixed;
  top: -100%;
  left: -100%;
  background: var(--bg-content);
  padding: 8px;
  pointer-events: none;
  z-index: 9999;
}

.workload-row-column-capacity-dragging-over {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #f2f7f2;
  border-radius: 6px;
  border: 1px solid #acdca1;
  pointer-events: none;
}

.unplanned-task-header {
  cursor: default;
  padding: 30px 30px 0;
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: 500;
}

.unplanned-task-group-header {
  cursor: pointer;
  padding: 15px 30px;
}
.unplanned-task-group-header:first-child {
  padding-top: 0px;
}

.unplanned-task-item {
  position: relative;
  margin-bottom: 5px;
  padding-right: 30px;
}

.unplanned-task-item-drag-handle {
  padding-left: 30px;
  cursor: grab;
}
.unplanned-task-item-drag-handle:hover .gantt-task-bar-content-bg {
  border-color: var(--border-content-alt);
}
.unplanned-task-item-drag-handle:active {
  cursor: grabbing;
}
.unplanned-task-item-drag-handle:active .gantt-task-bar-content-bg {
  border-top-color: var(--text-default);
  border-right-color: var(--text-default);
  border-bottom-color: var(--text-default);
}

.unplanned-task-item-drag-handle-icon {
  position: absolute;
  left: 13px;
  top: 11px;
  z-index: 2;
  width: 6px;
  height: auto;
  opacity: 0;
  transition: all var(--transition-fast) ease;
}
.unplanned-task-item-drag-handle-icon path {
  fill: var(--text-lighter);
}
.unplanned-task-item-drag-handle:hover .unplanned-task-item-drag-handle-icon, .unplanned-task-item-drag-handle:active .unplanned-task-item-drag-handle-icon {
  opacity: 1;
}
.unplanned-task-item-drag-handle-icon:hover path, .unplanned-task-item-drag-handle:active .unplanned-task-item-drag-handle-icon path {
  fill: var(--text-default);
}

.unplanned-task-group-title-container {
  min-width: 0;
  padding-right: 20px;
}

.unplanned-task-group-title {
  font-weight: 500;
}

.unplanned-task-group-subtitle {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-lighter);
}

.unplanned-task-empty {
  margin: 0 30px;
  padding: 30px;
  text-align: left;
  cursor: default;
  background: var(--bg-grey-f8);
  border-radius: 6px;
}

.unplanned-task-empty-title {
  font-weight: 500;
}

.unplanned-task-empty-copy {
  margin-top: 7px;
  font-weight: 400;
}

.allocation-timeline-bar {
  position: relative;
  color: var(--text-default);
  padding: 5px 9px 3px 9px;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 4px;
  background-color: var(--bg-content);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--black) 12%, transparent), 0 0 12px color-mix(in srgb, var(--black) 4%, transparent);
}
.gantt-task-bargantt-task-bar--showing .allocation-timeline-bar, .allocation-timeline-bar.gantt-task-bar--showing .allocation-timeline-bar {
  box-shadow: none;
}
.allocation-timeline-bar.allocation-timeline-bar--min-height {
  padding-top: 3px;
}

.allocation-timeline-bar-content-bg.project-color {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 4px;
  transition: all var(--transition-fast) ease;
}
.allocation-timeline-bar.allocation-timeline-bar--unavailable .allocation-timeline-bar-content-bg.project-color {
  opacity: 0.5;
  background: top left repeat;
  background-image: url("planners/planner-empty-day.png");
  box-shadow: inset 0 0 0 1px var(--border-content-alt);
  border-radius: 4px;
}
.allocation-timeline-bar-content-bg.project-color.allocation-timeline-bar-content-bg--outline {
  box-shadow: none;
}

.allocation-timeline-bar-content-primary {
  position: relative;
  z-index: 2;
  padding-right: 30px;
  user-select: none;
}
.allocation-timeline-bar-content-primary.allocation-timeline-bar-content-primary--full-length {
  padding-right: 0;
}
.allocation-timeline-bar.allocation-timeline-bar--dark-color .allocation-timeline-bar-content-primary {
  color: var(--color-primary-contrast);
}

.allocation-timeline-bar-icon {
  position: relative;
  top: 0.5px;
  width: 9px;
  height: auto;
  margin-left: -1px;
  margin-right: 5px;
}
.allocation-timeline-bar-icon path {
  fill: currentColor;
}
.allocation-timeline-bar-icon.allocation-timeline-bar-icon--time-off-category {
  top: -1px;
  width: 11px;
  margin-left: -1px;
  margin-right: 6px;
  vertical-align: middle;
}

.allocation-timeline-client-icon {
  position: relative;
  top: 1px;
  width: 9px;
  height: auto;
  margin-left: -1px;
  margin-right: 2px;
}
.allocation-timeline-client-icon path {
  fill: currentColor;
}

.allocation-timeline-bar-project-client {
  position: relative;
  z-index: 2;
  padding-right: 30px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  user-select: none;
}
.allocation-timeline-bar-project-client.allocation-timeline-bar-project-client--full-length {
  padding-right: 0;
}
.allocation-timeline-bar.allocation-timeline-bar--dark-color .allocation-timeline-bar-project-client {
  color: rgba(255, 255, 255, 0.8);
}

.allocation-timeline-bar-estimate {
  position: absolute;
  z-index: 3;
  bottom: 3px;
  right: 8px;
  font-size: 12px;
  color: var(--text-default);
  font-weight: 400;
}
.allocation-timeline-bar.allocation-timeline-bar--dark-color .allocation-timeline-bar-estimate {
  color: var(--color-primary-contrast);
}

.holiday-popover {
  z-index: 10000;
}

.holiday-popover-content {
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--black) 15%, transparent);
  min-width: 240px;
  font-family: var(--font-sans-serif);
}

.holiday-popover-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-default);
  margin-bottom: 12px;
}

.holiday-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.holiday-popover-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-info);
  flex-shrink: 0;
}

.holiday-popover-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.4;
}

:root {
  --fc-border-color: var(--border-content);
}

.react-calendar-toolbar {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: flex-start;
}
.react-calendar-toolbar .table-list-actions {
  flex: 1;
}

.react-calendar {
  user-select: none;
}
.react-calendar .fc-dayGridMonth-view {
  padding-bottom: 40px;
}
.react-calendar .fc-dayGridMonth-view thead {
  position: sticky;
  z-index: 10;
  top: var(--navigation-height);
  background: var(--bg-content);
}
.react-calendar .fc-dayGridMonth-view .fc-daygrid-event {
  margin-top: 5px;
}
.react-calendar .fc-dayGridMonth-view .fc-daygrid-event .react-calendar-event-wrapper {
  padding-left: 12px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-width: 0;
  border-right-width: 0;
}
.react-calendar .fc-dayGridMonth-view .fc-daygrid-event .react-calendar-event-wrapper-border {
  display: none;
}
.react-calendar .fc-dayGridMonth-view .fc-daygrid-event.fc-event-past {
  margin-left: 0;
}
.react-calendar .fc-dayGridMonth-view .fc-daygrid-event.fc-event-future {
  margin-right: 0;
}
.react-calendar .fc-dayGridMonth-view .fc-daygrid-event.fc-event-start {
  margin-left: 5px;
}
.react-calendar .fc-dayGridMonth-view .fc-daygrid-event.fc-event-start .react-calendar-event-wrapper {
  padding-left: 7px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.react-calendar .fc-dayGridMonth-view .fc-daygrid-event.fc-event-start .react-calendar-event-wrapper-border {
  display: block;
}
.react-calendar .fc-dayGridMonth-view .fc-daygrid-event.fc-event-start .react-calendar-event-wrapper-bg {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.react-calendar .fc-dayGridMonth-view .fc-daygrid-event.fc-event-end {
  margin-right: 5px;
}
.react-calendar .fc-dayGridMonth-view .fc-daygrid-event.fc-event-end .react-calendar-event-wrapper {
  border-right-width: 1px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.react-calendar .fc-dayGridMonth-view .fc-daygrid-event::before, .react-calendar .fc-dayGridMonth-view .fc-daygrid-event::after {
  display: none;
}
.react-calendar .fc-event,
.react-calendar .fc-h-event {
  background: none;
  border: none;
}
.react-calendar .react-calendar-event-wrapper {
  position: relative;
  margin: 0;
  min-height: 23px;
  padding: 4px 7px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  background-color: var(--bg-content);
  border: 1px solid var(--border-content-alt);
}
.react-calendar .react-calendar-event-wrapper .user-avatar {
  display: none;
}
@media (min-width: 768px) {
  .react-calendar .react-calendar-event-wrapper .user-avatar {
    display: inline-block;
  }
}
.react-calendar .react-calendar-event-wrapper.task-recursion {
  border: 1px dashed var(--text-lighter);
  border-left-width: 1px !important;
}
.react-calendar .react-calendar-event-wrapper.task-recursion .react-calendar-event-wrapper-border {
  display: none !important;
}
.react-calendar .react-calendar-event-title-text {
  color: var(--text-default);
}
.react-calendar .fc-theme-standard td,
.react-calendar .fc-theme-standard th {
  border-color: var(--border-content);
}
.react-calendar .fc-dayGridMonth-view .fc-col-header-cell.fc-day {
  text-align: left;
  padding: 10px 7px;
}
.react-calendar .fc-dayGridMonth-view .fc-col-header-cell-cushion {
  cursor: default;
  font-weight: 600;
}
.react-calendar .fc-dayGridMonth-view .fc-col-header-cell-cushion, .react-calendar .fc-dayGridMonth-view .fc-col-header-cell-cushion:focus, .react-calendar .fc-dayGridMonth-view .fc-col-header-cell-cushion:visited {
  color: var(--text-default);
}
.react-calendar .fc-dayGridMonth-view .fc-col-header-cell-cushion:hover, .react-calendar .fc-dayGridMonth-view .fc-col-header-cell-cushion:active {
  color: var(--text-default);
}
.react-calendar .fc-dayGridMonth-view .fc-daygrid-body-natural .fc-daygrid-day-frame {
  min-height: 95px;
}
.react-calendar .fc-dayGridMonth-view .fc-daygrid-body-natural .fc-daygrid-day-events {
  margin-top: 0;
  margin-bottom: 30px;
}
.react-calendar .fc-dayGridMonth-view .fc-daygrid-day-top {
  flex-direction: row;
}
.react-calendar .fc-dayGridMonth-view .fc-daygrid-day.fc-day {
  position: relative;
}
.react-calendar .fc-dayGridMonth-view .fc-daygrid-day.fc-day-today {
  background: none;
}
.react-calendar .fc-dayGridMonth-view .fc-daygrid-day.fc-day-sat,
.react-calendar .fc-dayGridMonth-view .fc-daygrid-day.fc-day-sun {
  background: var(--bg-grey-f5);
}
.react-calendar .fc-dayGridMonth-view .fc-highlight {
  background: var(--black);
  opacity: 0.028;
}
.react-calendar .fc-daygrid-day-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  cursor: pointer;
  transition: background var(--transition-fast) ease;
}
.react-calendar .fc-daygrid-day-bg:hover {
  background: color-mix(in srgb, var(--black) 1%, transparent);
}
.react-calendar.react-calendar--without-create .fc-daygrid-day-bg {
  cursor: default;
  pointer-events: none;
}
.react-calendar .fc-dayGridMonth-view .fc-daygrid-day-number {
  padding: 5px 3px 0;
  font-weight: 500;
}
.react-calendar .fc-dayGridMonth-view .react-calendar-date-num {
  padding: 3px 7px;
  color: var(--text-muted);
  pointer-events: none;
  border-radius: 4px;
}
.react-calendar .fc-dayGridMonth-view .react-calendar-date-num--today {
  color: var(--color-primary-contrast);
  background: var(--black);
}
.react-calendar .fc-daygrid-event-harness:focus, .react-calendar .fc-daygrid-event-harness:focus-within, .react-calendar .fc-daygrid-event-harness:focus-visible {
  outline: none;
}

.react-calendar-event-wrapper-border {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0;
  width: 2px;
  border-radius: 4px 0 0 4px;
  background-color: var(--text-lighter);
}

.react-calendar-event-wrapper-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background-color: var(--bg-inverse);
  opacity: 0.05;
}
.react-calendar-event-wrapper:hover .react-calendar-event-wrapper-bg, .react-calendar-event-wrapper:active .react-calendar-event-wrapper-bg, .react-calendar-event-wrapper--hover .react-calendar-event-wrapper-bg {
  opacity: 0.1;
}

.react-calendar-event-title-text {
  position: relative;
  padding-right: 2px;
  top: 0.5px;
  font-weight: 500;
}

.react-calendar-event-subtask-icon {
  width: 8px;
  height: auto;
  margin-right: -1px;
}
.react-calendar-event-subtask-icon path {
  fill: var(--text-default);
}

.welcome-state-index-screenshot {
  position: relative;
  margin: 0px auto 40px;
  max-width: 1240px;
  background: var(--bg-content);
  overflow: hidden;
  box-shadow: 0 1px 14px color-mix(in srgb, var(--bg-shadow) 2%, transparent), inset 0 0 0 1px var(--border-content);
  border-radius: 12px;
}

.welcome-state-index-screenshot-texture {
  position: absolute;
  display: none;
  left: 15px;
  top: 15px;
  width: 34%;
  max-width: 350px;
  bottom: 15px;
  background: var(--bg-grey-f5);
  border-radius: 12px 12px 40px 12px;
}
.welcome-state-index-screenshot-texture.welcome-state-index-upgrade-width {
  width: 25%;
  max-width: 270px;
}
@media (min-width: 768px) {
  .welcome-state-index-screenshot-texture {
    display: block;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .welcome-state-index-screenshot-texture {
    display: none;
  }
}
:root[data-theme=dark] .welcome-state-index-screenshot-texture {
  display: none;
}

.welcome-state-index-screenshot-img {
  position: absolute;
  display: none;
  left: 30px;
  top: 30px;
  bottom: 30px;
  right: 55%;
  background: none;
  box-shadow: none;
  border-radius: 0;
  background: transparent center center no-repeat;
  background-size: contain;
  border-radius: 5px;
}
@media (min-width: 768px) {
  .welcome-state-index-screenshot-img {
    display: block;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .welcome-state-index-screenshot-img {
    filter: brightness(0.75) contrast(1.5);
  }
}
:root[data-theme=dark] .welcome-state-index-screenshot-img {
  filter: brightness(0.75) contrast(1.5);
}
.welcome-state-index-screenshot-img.projects {
  left: 80px;
  right: 53%;
  background-image: url("welcome_states/projects.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.projects {
    background-image: url("welcome_states/projects@2x.png");
  }
}
.welcome-state-index-screenshot-img.trial-ended {
  left: 118px;
  top: 32px;
  right: 56%;
  background-image: url("welcome_states/trial-ended.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.trial-ended {
    background-image: url("welcome_states/trial-ended@2x.png");
  }
}
.welcome-state-index-screenshot-img.proposals {
  left: 90px;
  right: 56%;
  background-image: url("welcome_states/proposals.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.proposals {
    background-image: url("welcome_states/proposals@2x.png");
  }
}
.welcome-state-index-screenshot-img.agreements {
  left: 90px;
  right: 58%;
  background-image: url("welcome_states/contracts.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.agreements {
    background-image: url("welcome_states/contracts@2x.png");
  }
}
.welcome-state-index-screenshot-img.invoices {
  left: 105px;
  right: 57%;
  background-image: url("welcome_states/invoicing.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.invoices {
    background-image: url("welcome_states/invoicing@2x.png");
  }
}
.welcome-state-index-screenshot-img.expenses {
  left: 80px;
  right: 55%;
  background-image: url("welcome_states/expenses.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.expenses {
    background-image: url("welcome_states/expenses@2x.png");
  }
}
.welcome-state-index-screenshot-img.contacts {
  left: 90px;
  right: 56%;
  background-position: center center;
  background-image: url("welcome_states/contacts.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.contacts {
    background-image: url("welcome_states/contacts@2x.png");
  }
}
.welcome-state-index-screenshot-img.timetracking {
  left: 80px;
  right: 55%;
  background-image: url("welcome_states/time-tracking.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.timetracking {
    background-image: url("welcome_states/time-tracking@2x.png");
  }
}
.welcome-state-index-screenshot-img.timesheets {
  left: 90px;
  right: 55%;
  background-image: url("welcome_states/timesheets.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.timesheets {
    background-image: url("welcome_states/timesheets@2x.png");
  }
}
.welcome-state-index-screenshot-img.contractors {
  left: 90px;
  right: 56%;
  background-position: center center;
  background-image: url("welcome_states/contacts.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.contractors {
    background-image: url("welcome_states/contacts@2x.png");
  }
}
.welcome-state-index-screenshot-img.onboardings {
  left: 90px;
  right: 56%;
  background-position: center center;
  background-image: url("welcome_states/onboardings.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.onboardings {
    background-image: url("welcome_states/onboardings@2x.png");
  }
}
.welcome-state-index-screenshot-img.tasks {
  left: 80px;
  right: 55%;
  background-image: url("welcome_states/tasks.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.tasks {
    background-image: url("welcome_states/tasks@2x.png");
  }
}
.welcome-state-index-screenshot-img.task-templates {
  left: 90px;
  right: 55%;
  background-image: url("welcome_states/task-templates.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.task-templates {
    background-image: url("welcome_states/task-templates@2x.png");
  }
}
.welcome-state-index-screenshot-img.proposal-templates {
  left: 90px;
  right: 55%;
  background-image: url("welcome_states/proposal-templates.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.proposal-templates {
    background-image: url("welcome_states/proposal-templates@2x.png");
  }
}
.welcome-state-index-screenshot-img.agreement-templates {
  left: 110px;
  right: 57%;
  background-image: url("welcome_states/agreement-templates.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.agreement-templates {
    background-image: url("welcome_states/agreement-templates@2x.png");
  }
}
.welcome-state-index-screenshot-img.customforms {
  left: 80px;
  right: 55%;
  background-image: url("welcome_states/client-forms.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.customforms {
    background-image: url("welcome_states/client-forms@2x.png");
  }
}
.welcome-state-index-screenshot-img.automations {
  left: 96px;
  right: 55%;
  background-image: url("welcome_states/workflow-automation.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.automations {
    background-image: url("welcome_states/workflow-automation@2x.png");
  }
}
.welcome-state-index-screenshot-img.bonsai-cash {
  left: 88px;
  right: 55%;
  background-image: url("welcome_states/banking.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.bonsai-cash {
    background-image: url("welcome_states/banking@2x.png");
  }
}
.welcome-state-index-screenshot-img.timetracking-insights {
  left: 80px;
  right: 55%;
  background-position: center;
  background-image: url("welcome_states/time-tracking-insights.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.timetracking-insights {
    background-image: url("welcome_states/time-tracking-insights@2x.png");
  }
}
.welcome-state-index-screenshot-img.project-insights {
  top: 0px;
  left: 120px;
  right: 56%;
  background-position: center;
  background-image: url("welcome_states/project-insights.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.project-insights {
    background-image: url("welcome_states/project-insights@2x.png");
  }
}
.welcome-state-index-screenshot-img.services {
  left: 80px;
  right: 55%;
  background-position: center;
  background-image: url("welcome_states/service-packages.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.services {
    background-image: url("welcome_states/service-packages@2x.png");
  }
}
.welcome-state-index-screenshot-img.scheduling-blank-state {
  left: 100px;
  right: 56%;
  height: auto;
  background-position: center;
  background-image: url("welcome_states/scheduling.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.scheduling-blank-state {
    background-image: url("welcome_states/scheduling@2x.png");
  }
}
.welcome-state-index-screenshot-img.team-utilization-blank-state {
  left: 100px;
  max-width: 380px;
  height: auto;
  background-position: center;
  background-image: url("welcome_states/team-utilization.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.team-utilization-blank-state {
    background-image: url("welcome_states/team-utilization@2x.png");
  }
}
.welcome-state-index-screenshot-img.planner-member-blank-state {
  top: 40px;
  left: 120px;
  right: 54%;
  height: auto;
  background-position: center;
  background-image: url("welcome_states/planner-member-blank-state.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.planner-member-blank-state {
    background-image: url("welcome_states/planner-member-blank-state@2x.png");
  }
}
.welcome-state-index-screenshot-img.custom-permissions {
  top: 60px;
  left: 100px;
  right: 54%;
  height: auto;
  background-position: center;
  background-image: url("welcome_states/custom-permissions-welcome-state.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.custom-permissions {
    background-image: url("welcome_states/custom-permissions-welcome-state@2x.png");
  }
}
.welcome-state-index-screenshot-img.workload-blank-state {
  top: 40px;
  left: 120px;
  right: 54%;
  height: auto;
  background-position: center;
  background-image: url("welcome_states/workload-blank-state.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.workload-blank-state {
    background-image: url("welcome_states/workload-blank-state@2x.png");
  }
}
.welcome-state-index-screenshot-img.deals {
  top: 40px;
  left: 120px;
  right: 54%;
  height: auto;
  background-position: center;
  background-image: url("welcome_states/deals.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.deals {
    background-image: url("welcome_states/deals@2x.png");
  }
}
.welcome-state-index-screenshot-img.estimates {
  top: 40px;
  left: 120px;
  right: 54%;
  height: auto;
  background-position: center;
  background-image: url("welcome_states/estimates.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.estimates {
    background-image: url("welcome_states/estimates@2x.png");
  }
}
.welcome-state-index-screenshot-img.rate-cards {
  top: 40px;
  left: 100px;
  right: 55%;
  height: auto;
  background-position: center;
  background-image: url("welcome_states/rate-cards.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-index-screenshot-img.rate-cards {
    background-image: url("welcome_states/rate-cards@2x.png");
  }
}
.welcome-state-index-screenshot-img.welcome-state-index-screenshot-upgrade {
  left: 40px;
  right: 65%;
}

.welcome-state-index-content {
  position: relative;
  padding: 50px 40px 60px;
}
@media (min-width: 768px) {
  .welcome-state-index-content {
    width: 55%;
    margin-left: auto;
    padding: 150px 60px;
  }
}
@media (min-width: 1280px) {
  .welcome-state-index-content {
    padding: 160px 90px;
  }
}

.welcome-state-index-insured {
  position: relative;
  margin-top: 8px;
  margin-bottom: 10px;
  padding: 6px 14px 4px 32px;
  cursor: default;
  font-size: 12px;
  font-family: var(--font-sans-serif);
  color: var(--color-primary);
  white-space: nowrap;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: 50px;
}

.welcome-state-index-insured-icon {
  position: absolute;
  left: 13px;
  top: 7px;
}

.welcome-state-index-title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 25px;
  font-size: 20px;
  font-weight: 600;
  font-family: var(--font-display-header);
  line-height: 1.4;
  color: var(--text-default);
}
@media (min-width: 480px) {
  .welcome-state-index-title {
    font-size: 22px;
  }
  .welcome-state-index-content.version-all_in_one_v1 .welcome-state-index-title {
    max-width: 400px;
    margin-bottom: 20px;
  }
}

.welcome-state-index-desc {
  font-size: 14px;
  color: var(--text-muted);
}
@media (min-width: 1280px) {
  .welcome-state-index-desc {
    font-size: 16px;
  }
}

.welcome-state-index-buttons {
  margin-top: 30px;
}
@media (min-width: 768px) {
  .welcome-state-index-buttons.flex-align-center {
    display: flex;
    align-items: center;
  }
}

.welcome-state-index-button-link {
  font-size: 14px;
  font-weight: 500;
}

.welcome-state-index-button-link-icon {
  position: relative;
  top: 1px;
  font-size: 1.15em;
  margin-left: 5px;
}

.welcome-state-index-restricted {
  padding: 7px 10px 4px;
  text-align: center;
  color: var(--text-lighter);
  font-weight: 600;
  font-size: 12px;
  cursor: default;
  border: 1px solid var(--text-lighter);
  border-radius: 2px;
}

.welcome-state-index-chat {
  position: absolute;
  right: 20px;
  bottom: 16px;
  font-size: 12px;
  color: color-mix(in srgb, var(--black) 40%, transparent);
}

.welcome-state-index-feature-list-item {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
  padding-left: 22px;
  padding-right: 0;
  font-size: 14px;
}
.welcome-state-index-feature-list-item:last-child {
  margin-bottom: 0;
}

.welcome-state-index-feature-list-item-icon {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
}

.welcome-state-index-feature-offer-expiration {
  position: absolute;
  right: 20px;
  bottom: 20px;
  font-size: 12px;
  font-style: italic;
  color: var(--text-lighter);
}

.welcome-state-index-feature-coming-soon {
  position: relative;
  padding: 7px 11px 6px;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-lighter);
  background: var(--bg-grey-f5);
  border-radius: 20px;
}

.welcome-state-add-on-screenshot-img {
  position: absolute;
  display: none;
  left: 60px;
  top: 120px;
  bottom: 0;
  right: 65%;
  background: transparent top center no-repeat;
  background-size: contain;
}
@media (min-width: 768px) {
  .welcome-state-add-on-screenshot-img {
    display: block;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .welcome-state-add-on-screenshot-img {
    filter: brightness(0.75) contrast(1.5);
  }
}
:root[data-theme=dark] .welcome-state-add-on-screenshot-img {
  filter: brightness(0.75) contrast(1.5);
}
.welcome-state-add-on-screenshot-img.accounting {
  background-image: url("welcome_states/accounting.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-add-on-screenshot-img.accounting {
    background-image: url("welcome_states/accounting@2x.png");
  }
}
.welcome-state-add-on-screenshot-img.income {
  background-image: url("welcome_states/income-tracking.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-add-on-screenshot-img.income {
    background-image: url("welcome_states/income-tracking@2x.png");
  }
}

.welcome-state-add-on-content-top {
  max-width: 600px;
}

.welcome-state-add-on-content {
  position: relative;
  padding: 40px 20px 60px;
}
@media (min-width: 480px) {
  .welcome-state-add-on-content {
    padding: 40px 40px 60px;
  }
}
@media (min-width: 768px) {
  .welcome-state-add-on-content {
    width: 67%;
    margin-left: auto;
    padding: 90px 60px 90px;
  }
}
@media (min-width: 1400px) {
  .welcome-state-add-on-content {
    padding-left: 90px;
    padding-right: 90px;
  }
}

.welcome-state-add-on-title {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 600;
  font-family: var(--font-display-header);
  color: var(--text-default);
}
@media (min-width: 1280px) {
  .welcome-state-add-on-title {
    font-size: 28px;
  }
}

.welcome-state-add-on-flag {
  display: none;
  font-family: var(--font-body);
}
@media (min-width: 768px) {
  .welcome-state-add-on-flag {
    display: inline-block;
  }
}

.welcome-state-add-on-desc {
  font-size: 16px;
  color: var(--text-muted-alt);
}
@media (min-width: 1280px) {
  .welcome-state-add-on-desc {
    font-size: 18px;
  }
}
.welcome-state-add-on-desc b {
  color: var(--text-default);
}

.welcome-state-add-on-buttons {
  margin-top: 30px;
}

.welcome-state-add-on-includes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--border-content);
}

.welcome-state-add-on-includes-item {
  position: relative;
  width: 100%;
  margin-bottom: 15px;
  padding-left: 25px;
  padding-right: 15px;
  font-size: 14px;
  color: var(--text-muted);
}
@media (min-width: 768px) {
  .welcome-state-add-on-includes-item {
    width: 50%;
  }
}

.welcome-state-add-on-includes-icon {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
}

.welcome-state-add-on-includes-lighter {
  color: var(--text-lighter);
}

.welcome-state-feature-block {
  position: relative;
  margin: 20px auto 60px;
  background: var(--bg-content);
  overflow: hidden;
  box-shadow: 0 1px 10px color-mix(in srgb, var(--black) 8%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--black) 8%, transparent);
  border-radius: 6px;
}
@media (min-width: 768px) {
  .welcome-state-feature-block {
    margin: 60px auto 100px;
  }
}

.welcome-state-feature-block-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-position: right bottom;
  background-size: cover;
  background-image: url("welcome_states/waves-bg-1.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-feature-block-bg {
    background-image: url("welcome_states/waves-bg-1@2x.png");
  }
}

.welcome-state-feature-block-content {
  padding: 40px 40px 60px;
}
@media (min-width: 768px) {
  .welcome-state-feature-block-content {
    margin-left: auto;
    padding: 60px;
  }
}

.welcome-state-feature-block-title {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .welcome-state-feature-block-title {
    font-size: 28px;
  }
}

.welcome-state-feature-block-desc {
  font-size: 14px;
  color: var(--text-muted-alt);
}
@media (min-width: 768px) {
  .welcome-state-feature-block-desc {
    font-size: 16px;
  }
}

.welcome-state-feature-block-buttons {
  margin-top: 40px;
}

.welcome-state-feature-block-chat {
  position: absolute;
  right: 20px;
  bottom: 16px;
  font-size: 12px;
  color: color-mix(in srgb, var(--black) 40%, transparent);
}

.welcome-state-index-empty-list {
  padding: 53px 0;
  text-align: center;
  border: 1px solid var(--border-content);
  border-radius: 10px;
}

.welcome-state-index-empty-list-copy {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-lighter);
  line-height: 12px;
}

.welcome-state-dashboard-banner {
  position: relative;
  margin-bottom: 30px;
  padding: 60px 30px;
  font-size: 20px;
  text-align: left;
  overflow: hidden;
  background: var(--bg-content);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--bg-shadow) 8%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--bg-shadow) 8%, transparent);
  border-radius: 6px;
}
@media (min-width: 768px) {
  .welcome-state-dashboard-banner {
    padding: 60px 40px;
    text-align: center;
  }
}

.welcome-state-dashboard-banner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 27%;
  height: 100%;
  background-position: right bottom;
  background-size: cover;
  background-image: url("welcome_states/welcome-state-background-1.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-dashboard-banner-img {
    background-image: url("welcome_states/welcome-state-background-1@2x.png");
  }
}

.welcome-state-dashboard-banner-img2 {
  position: absolute;
  top: 13%;
  bottom: 0;
  right: 0;
  width: 27%;
  background-position: top left;
  background-size: cover;
  background-image: url("welcome_states/welcome-state-background-2.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .welcome-state-dashboard-banner-img2 {
    background-image: url("welcome_states/welcome-state-background-2@2x.png");
  }
}

.welcome-state-dashboard-banner-title {
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-default);
}
@media (min-width: 480px) {
  .welcome-state-dashboard-banner-title {
    margin-bottom: 5px;
    font-size: 26px;
  }
}

.bonsai-cash-welcome-section {
  position: relative;
  margin-bottom: 60px;
  overflow: hidden;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  box-shadow: 0 2px 15px color-mix(in srgb, var(--bg-shadow) 2%, transparent);
  border-radius: 10px;
}

.bonsai-cash-welcome-section-bg {
  position: absolute;
  top: -60px;
  left: -6%;
  width: 110%;
  height: auto;
}

.bonsai-cash-welcome-section-graphic {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40%;
  height: 75%;
  background: none right bottom no-repeat;
  background-size: contain;
  background-image: url("bonsai-cash/welcome-cash-graphic.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .bonsai-cash-welcome-section-graphic {
    background-image: url("bonsai-cash/welcome-cash-graphic@2x.png");
  }
}
.bonsai-cash-welcome-section-graphic.id-check {
  width: 35%;
  height: 65%;
  background-image: url("bonsai-cash/welcome-verify-identity-graphic.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .bonsai-cash-welcome-section-graphic.id-check {
    background-image: url("bonsai-cash/welcome-verify-identity-graphic@2x.png");
  }
}

.bonsai-cash-welcome-section-in {
  position: relative;
  z-index: 2;
  padding: 90px 40px;
}
@media (min-width: 768px) {
  .bonsai-cash-welcome-section-in {
    padding: 110px 60px;
  }
}
@media (min-width: 1200px) {
  .bonsai-cash-welcome-section-in {
    padding: 110px 90px;
  }
}

.bonsai-cash-welcome-header {
  position: relative;
  margin-bottom: 15px;
  font-size: 24px;
  font-family: var(--font-display-header);
}

.bonsai-cash-welcome-copy {
  max-width: 400px;
  margin-bottom: 30px;
  font-size: 16px;
  color: var(--text-muted);
}
.bonsai-cash-welcome-copy a {
  color: var(--text-muted);
  text-decoration: underline;
}

@media (min-width: 480px) {
  .bonsai-cash-welcome-btn {
    min-width: 200px;
  }
}

.bonsai-cash-envelope-empty-section {
  position: relative;
  margin-bottom: 60px;
  overflow: hidden;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  box-shadow: 0 1px 15px color-mix(in srgb, var(--bg-shadow) 2%, transparent);
  border-radius: 10px;
}

.bonsai-cash-envelope-empty-bg {
  position: absolute;
  top: -25%;
  left: -25%;
  width: 150%;
  height: auto;
  min-height: 150%;
}
@media (min-width: 768px) {
  .bonsai-cash-envelope-empty-bg {
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
  }
}

.bonsai-cash-envelope-empty-content {
  position: relative;
  z-index: 2;
  padding: 90px 40px;
}
@media (min-width: 768px) {
  .bonsai-cash-envelope-empty-content {
    padding: 110px 90px;
    text-align: center;
  }
}
@media (min-width: 1200px) {
  .bonsai-cash-envelope-empty-content {
    padding: 110px 90px;
  }
}

.bonsai-cash-envelope-empty-icon {
  width: 25px;
  height: auto;
  margin-bottom: 15px;
}
@media (min-width: 768px) {
  .bonsai-cash-envelope-empty-icon {
    width: 37px;
    height: auto;
    margin-bottom: 20px;
  }
}
.bonsai-cash-envelope-empty-icon path {
  fill: var(--color-primary);
}

.bonsai-cash-envelope-empty-header {
  position: relative;
  margin-bottom: 15px;
  font-size: 16px;
  font-family: var(--font-display-header);
}
@media (min-width: 768px) {
  .bonsai-cash-envelope-empty-header {
    font-size: 22px;
  }
}

.bonsai-cash-envelope-empty-copy {
  max-width: 500px;
  margin: 0 auto;
  font-size: 12px;
  color: var(--text-muted);
}
.bonsai-cash-envelope-empty-copy a {
  color: var(--text-muted);
  text-decoration: underline;
}
@media (min-width: 768px) {
  .bonsai-cash-envelope-empty-copy {
    font-size: 16px;
  }
}

.bonsai-cash-requirement-banner {
  position: relative;
  margin-bottom: 40px;
  padding: 30px;
  overflow: hidden;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}
@media (min-width: 768px) {
  .bonsai-cash-requirement-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.bonsai-cash-requirement-banner .btn {
  white-space: nowrap;
}

.bonsai-cash-requirement-banner-header {
  margin-bottom: 10px;
  font-family: var(--font-display-header);
  font-size: 18px;
  font-weight: 600;
}

.bonsai-cash-requirement-banner-copy {
  color: var(--text-muted);
  font-size: 14px;
}
@media (min-width: 768px) {
  .bonsai-cash-requirement-banner-copy {
    max-width: 500px;
    padding-right: 40px;
  }
}

.bonsai-cash-requirement-banner-btn {
  position: relative;
  min-width: 170px;
  margin-top: 20px;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .bonsai-cash-requirement-banner-btn {
    margin-top: 0;
  }
}

.cash-close-onboarding {
  position: absolute;
  z-index: 11;
  top: 0;
  right: 0;
  padding: 18px 17px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
@media (min-width: 1280px) {
  .cash-close-onboarding {
    padding: 30px;
  }
}

.cash-close-onboarding-icon {
  width: 14px;
  height: auto;
}
.cash-close-onboarding-icon path {
  fill: var(--text-lighter);
}
@media (min-width: 1280px) {
  .cash-close-onboarding-icon {
    width: 16px;
  }
}
.cash-close-onboarding:hover .cash-close-onboarding-icon path {
  fill: var(--text-muted);
}

.cash-onboarding-container {
  position: fixed;
  display: flex;
  flex-direction: row;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-content);
  overflow-y: scroll;
}

.cash-onboarding-sidebar {
  position: fixed;
  z-index: 10;
  color: var(--text-default);
  width: 100%;
  text-align: left;
  background-color: var(--bg-content);
}
@media (min-width: 1280px) {
  .cash-onboarding-sidebar {
    width: 30%;
    height: 100%;
  }
}

.cash-onboarding-content {
  position: relative;
  width: 100%;
  text-align: center;
}
@media (min-width: 1280px) {
  .cash-onboarding-content {
    width: 70%;
    margin-left: 30%;
  }
}

.cash-onboarding-sidebar-content {
  position: relative;
  display: flex;
  padding: 16px 15px 14px;
  cursor: default;
}
@media (min-width: 1280px) {
  .cash-onboarding-sidebar-content {
    display: block;
    max-width: 480px;
    padding: 60px;
  }
}
@media (min-width: 1500px) {
  .cash-onboarding-sidebar-content {
    padding: 90px;
  }
}

.cash-onboarding-sidebar-step-num {
  padding-top: 1px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-contrast);
  letter-spacing: 0.075em;
  opacity: 0.8;
}
@media (min-width: 1280px) {
  .cash-onboarding-sidebar-step-num {
    margin-bottom: 15px;
    padding-top: 0;
  }
}

.cash-onboarding-sidebar-step-indicators {
  position: absolute;
  display: flex;
  top: 23px;
  right: 56px;
}
@media (min-width: 1280px) {
  .cash-onboarding-sidebar-step-indicators {
    right: 15px;
  }
}

.cash-onboarding-sidebar-step-indicator {
  width: 10px;
  height: 4px;
  margin: 0 5px;
  background: var(--color-primary);
  border-radius: 10px;
  opacity: 0.5;
}
.cash-onboarding-sidebar-step-indicator.active {
  width: 24px;
  opacity: 0.8;
}

.cash-onboarding-sidebar-step-title {
  display: none;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 600;
  font-family: var(--font-display-header);
  color: var(--text-default);
}
@media (min-width: 1280px) {
  .cash-onboarding-sidebar-step-title {
    display: block;
  }
}

.cash-onboarding-sidebar-step-subtitle {
  display: none;
  font-size: 14px;
  color: var(--text-muted);
}
@media (min-width: 1280px) {
  .cash-onboarding-sidebar-step-subtitle {
    display: block;
  }
}

.cash-onboarding-sidebar-task-list {
  position: relative;
}
@media (min-width: 1280px) {
  .cash-onboarding-sidebar-task-list {
    margin-top: 30px;
  }
}

.cash-onboarding-sidebar-task-line {
  position: absolute;
  display: none;
  left: 6px;
  top: 11px;
  bottom: 11px;
  width: 1px;
  background-color: var(--bg-grey-e);
}
@media (min-width: 1280px) {
  .cash-onboarding-sidebar-task-line {
    display: block;
  }
}

.cash-onboarding-sidebar-task {
  position: relative;
  display: none;
  padding-left: 22px;
}
.cash-onboarding-sidebar-task:last-child {
  margin-bottom: 0;
}
.cash-onboarding-sidebar-task.active {
  display: block;
}
@media (min-width: 1280px) {
  .cash-onboarding-sidebar-task {
    display: block;
    margin-bottom: 10px;
  }
}

.cash-onboarding-sidebar-task-icon {
  position: absolute;
  z-index: 2;
  display: none;
  top: 6px;
  left: 0;
  width: 13px;
  height: 13px;
  background-color: var(--bg-grey-c);
  border-radius: 50%;
  border: 4px solid var(--bg-brand-muted);
}
.cash-onboarding-sidebar-task.active .cash-onboarding-sidebar-task-icon {
  background-color: var(--color-primary);
}
@media (min-width: 1280px) {
  .cash-onboarding-sidebar-task-icon {
    display: block;
  }
}

.cash-onboarding-sidebar-task-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-default);
  opacity: 0.3;
  transition: all 0.1 ease;
}
.cash-onboarding-sidebar-task.active .cash-onboarding-sidebar-task-text {
  opacity: 1;
}
@media (min-width: 1280px) {
  .cash-onboarding-sidebar-task-text {
    font-size: 16px;
  }
}

.cash-onboarding-section {
  display: inline-block;
  width: 100%;
  max-width: 460px;
  margin: 90px auto 60px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 6px;
  box-shadow: 0 2px 15px color-mix(in srgb, var(--bg-shadow) 2%, transparent);
}
.cash-onboarding-section.with-illustration {
  padding: 70px 90px 90px;
}
.cash-onboarding-section.without-illustration {
  padding: 45px 60px 60px;
}
.cash-onboarding-section.cash-onboarding-loading {
  padding-left: 70px;
  padding-right: 70px;
  padding-bottom: 70px;
}
.cash-onboarding-section.align-left {
  text-align: left;
}
.cash-onboarding-section.width-md {
  max-width: 490px;
}
.cash-onboarding-section.width-lg {
  max-width: 600px;
}
.cash-onboarding-section.funding-transfer {
  max-width: 600px;
  padding: 70px 60px 60px;
}
@media (min-width: 1500px) {
  .cash-onboarding-section {
    margin: 120px auto 90px;
  }
}

.cash-onboarding-section-title {
  margin-bottom: 15px;
  font-family: var(--font-display-header);
  font-size: 22px;
  text-align: center;
  color: var(--text-default);
}
.cash-onboarding-section-title.align-left {
  text-align: left;
}

.cash-onboarding-section-copy {
  font-size: 14px;
  color: var(--text-muted);
}
.cash-onboarding-section-copy.align-left {
  text-align: left;
}
.cash-onboarding-section-copy.cash-copy-max-400 {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.cash-onboarding-section-outside-copy {
  max-width: 460px;
  margin: 30px auto;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.cash-onboarding-section-outside-copy a {
  text-decoration: underline;
}

.cash-onboarding-section-support-copy {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  margin: 30px auto;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.cash-onboarding-section-support-copy a {
  text-decoration: underline;
}

.cash-onboarding-section-legal-notice {
  padding: 30px 60px 30px;
  text-align: center;
  color: var(--text-lighter);
  font-size: 12px;
}
@media (min-height: 800px) {
  .cash-onboarding-section-legal-notice {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

.cash-onboarding-section-legal-notice-copy {
  display: inline-block;
  max-width: 900px;
}
.cash-onboarding-section-legal-notice-copy a,
.cash-onboarding-section-legal-notice-copy a:focus,
.cash-onboarding-section-legal-notice-copy a:visited,
.cash-onboarding-section-legal-notice-copy a:hover,
.cash-onboarding-section-legal-notice-copy a:active {
  color: var(--text-lighter);
}

.cash-resume-onboarding-page {
  position: relative;
  text-align: center;
  padding-bottom: 120px;
}
@media (min-width: 1200px) {
  .cash-resume-onboarding-page {
    padding-bottom: 200px;
  }
}

.cash-resume-onboarding-bg {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-content);
}

.cash-resume-onboarding-section {
  position: relative;
  z-index: 2;
  display: inline-block;
  width: 100%;
  max-width: 460px;
  margin: 60px auto 0;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 6px;
  box-shadow: 0 2px 15px color-mix(in srgb, var(--bg-shadow) 4%, transparent);
}
@media (min-width: 1200px) {
  .cash-resume-onboarding-section {
    margin: 90px auto 0;
  }
}

.cash-resume-onboarding-content {
  padding: 70px 60px 60px;
}

.cash-resume-onboarding-icon {
  width: 125px;
  height: auto;
  margin-bottom: 40px;
}

.cash-resume-onboarding-required-icon {
  width: 150px;
  height: auto;
  margin-bottom: 20px;
}

.cash-resume-onboarding-header {
  margin-bottom: 20px;
  font-size: 22px;
  font-family: var(--font-display-header);
  color: var(--text-default);
}

.cash-resume-onboarding-copy {
  margin-bottom: 30px;
  font-size: 14px;
  color: var(--text-muted);
}

.cash-onboarding-loading-sidebar {
  position: relative;
}

@keyframes cash-animate-loading-bg {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.cash-onboarding-loading-sidebar-line1 {
  position: absolute;
  left: 90px;
  right: 90px;
  top: 90px;
  height: 30px;
  width: 30%;
  max-width: 100px;
  background-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.12) 100%);
  border-radius: 3px;
  background-size: 200% 100%;
  animation: cash-animate-loading-bg 2s ease infinite;
}

.cash-onboarding-loading-sidebar-line2 {
  position: absolute;
  left: 90px;
  right: 120px;
  top: 140px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-radius: 3px;
  background-size: 200% 100%;
  animation: cash-animate-loading-bg 2s ease infinite;
}

.cash-onboarding-loading-sidebar-line3 {
  position: absolute;
  left: 90px;
  right: 110px;
  top: 170px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.12) 100%);
  border-radius: 3px;
  background-size: 200% 100%;
  animation: cash-animate-loading-bg 1.5s ease infinite;
}

.cash-onboarding-loading-sidebar-line4 {
  position: absolute;
  left: 90px;
  right: 130px;
  top: 200px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-radius: 3px;
  background-size: 200% 100%;
  animation: cash-animate-loading-bg 2.5s ease infinite;
}

.cash-onboarding-loading-header {
  margin-top: 50px;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-default);
}

.cash-onboarding-loading-copy {
  font-size: 14px;
  color: var(--text-muted);
}

.cash-onboarding-loading-notice {
  margin-top: 30px;
  padding: 20px;
  color: var(--text-muted);
  background: var(--bg-grey-f8);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.cash-onboarding-cardholder-preview-name {
  position: absolute;
  left: 50%;
  margin-left: -90px;
  top: 66%;
  max-width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.cash-onboarding-cardholder-address {
  box-sizing: border-box;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 4px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  text-align: center;
  color: var(--text-default);
  padding: 25px;
}

.cash-onboarding-return-to-cash-card-order-form {
  position: absolute;
  top: 0;
  left: 0;
  padding: 40px;
}

.cash-onboarding-funding-title {
  margin-bottom: 15px;
  font-family: var(--font-display-header);
  font-size: 18px;
  text-align: center;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .cash-onboarding-funding-title {
    font-size: 22px;
  }
}

.cash-onboarding-funding-option {
  position: relative;
  margin: 0 -33px;
  padding: 20px 60px 20px 70px;
  cursor: pointer;
  border-radius: 6px;
}
.cash-onboarding-funding-option:hover {
  background-color: var(--bg-grey-fc);
}

.cash-onboarding-funding-option-icon {
  position: absolute;
  left: 15px;
  top: 20px;
}

.cash-onboarding-funding-option-arrow {
  position: absolute;
  right: 20px;
  top: 47px;
  width: 20px;
  height: auto;
}

.cash-onboarding-funding-invoices-graphic {
  margin-top: -20px;
  margin-bottom: -20px;
}

.cash-onboarding-funding-option-title {
  margin-bottom: 3px;
  font-size: 16px;
  font-weight: 600;
}

.cash-onboarding-funding-option-subtitle {
  font-size: 14px;
  color: var(--text-muted);
}

.cash-onboarding-funding-invoices-features {
  margin-top: 40px;
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .cash-onboarding-funding-invoices-features {
    padding: 30px;
    background-color: var(--bg-info-lighter);
    border: 1px solid var(--bg-info-light);
    border-radius: 6px;
  }
}

.cash-onboarding-funding-invoices-feature {
  position: relative;
  margin-bottom: 20px;
  padding-left: 34px;
  font-size: 16px;
  color: var(--text-default);
}
.cash-onboarding-funding-invoices-feature:last-child {
  margin-bottom: 0;
}

.cash-onboarding-funding-invoices-feature-check {
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: auto;
}
.cash-onboarding-funding-invoices-feature-check path {
  stroke: var(--color-primary);
}

.cash-onboarding-funding-transfer-graphic {
  margin-bottom: -10px;
  margin-right: -15px;
}

.cash-funding-option-completed-graphic {
  margin-bottom: 20px;
}

.cash-onboarding-financial-address {
  padding: 30px;
  box-sizing: border-box;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  text-align: left;
  color: var(--text-default);
  background: var(--bg-info-lighter);
  border: 1px solid var(--bg-info-light);
  border-radius: 4px;
}

.cash-onboarding-financial-address-copier {
  padding: 0;
  margin-left: 5px;
  vertical-align: top;
  border: none;
}

.cash-blocked-account-creation-page {
  position: relative;
  text-align: center;
}

.cash-blocked-account-creation-content {
  padding: 40px 50px 50px;
}

.cash-blocked-account-creation-required-icon {
  width: 150px;
  height: auto;
}

.cash-blocked-account-creation-copy {
  margin-bottom: 60px;
  font-size: 14px;
  color: var(--text-muted);
}

.bonsai-cash-welcome-state {
  position: relative;
  margin: 0px auto;
  background: var(--color-primary);
  overflow: hidden;
  box-shadow: 0 1px 12px color-mix(in srgb, var(--bg-shadow) 4%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--black) 5%, transparent);
  border-radius: 12px;
}

.bonsai-cash-welcome-state-support-link, .bonsai-cash-welcome-state-support-link:focus, .bonsai-cash-welcome-state-support-link:visited {
  color: inherit;
  text-decoration: underline;
}
.bonsai-cash-welcome-state-support-link:hover, .bonsai-cash-welcome-state-support-link:active {
  color: color-mix(in srgb, var(--black) 50%, transparent);
  text-decoration: underline;
}

.bonsai-cash-welcome-state-bg {
  position: absolute;
  top: 0;
  left: -20%;
  height: 680px;
  width: 500px;
  background: transparent repeat;
  background-position: right bottom;
  background-size: contain;
  background-image: url("welcome_states/bonsai-cash-bg.png");
  filter: brightness(0.95);
}

.bonsai-cash-welcome-state-bg2 {
  position: absolute;
  display: none;
  top: -33%;
  left: 66%;
  height: 134%;
  width: 460px;
  background: transparent repeat;
  background-position: top left;
  background-size: contain;
  background-image: url("welcome_states/bonsai-cash-bg-2.png");
  filter: brightness(0.95);
}
@media (min-width: 768px) {
  .bonsai-cash-welcome-state-bg2 {
    display: block;
  }
}

.bonsai-cash-welcome-state-icon {
  position: relative;
  width: 32px;
  height: 32px;
  margin: 0 0 40px;
  background: center center no-repeat;
  background-size: contain;
  background-image: url("welcome_states/bonsai-cash-welcome-state-icon.png");
  opacity: 0.4;
}
@media (min-width: 768px) {
  .bonsai-cash-welcome-state-icon {
    margin: 0 auto 60px;
  }
}

.bonsai-cash-welcome-state-content {
  position: relative;
  padding: 40px 40px 90px;
}
@media (min-width: 768px) {
  .bonsai-cash-welcome-state-content {
    padding: 130px 90px 180px;
    text-align: center;
  }
}

.bonsai-cash-welcome-state-title {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
  font-family: var(--font-display-header);
  color: var(--color-primary-contrast);
  text-shadow: 3px 3px 0 color-mix(in srgb, var(--black) 3%, transparent);
}
@media (min-width: 768px) {
  .bonsai-cash-welcome-state-title {
    text-align: center;
    font-size: 28px;
  }
}

.bonsai-cash-welcome-state-desc {
  max-width: 650px;
  margin: 0 auto 30px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}
@media (min-width: 1280px) {
  .bonsai-cash-welcome-state-desc {
    font-size: 16px;
  }
}

.bonsai-cash-welcome-state-buttons {
  margin-top: 30px;
}

.bonsai-cash-card-wrapper {
  width: 100%;
}

.bonsai-cash-card-reveal-link {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: color-mix(in srgb, var(--black) 20%, transparent);
  border-radius: 10px;
}
.bonsai-cash-card-reveal-link, .bonsai-cash-card-reveal-link:focus, .bonsai-cash-card-reveal-link:visited, .bonsai-cash-card-reveal-link:hover, .bonsai-cash-card-reveal-link:active {
  color: var(--color-primary-contrast);
}
@media (min-width: 768px) {
  .bonsai-cash-card-reveal-link {
    opacity: 0;
    transition: all var(--transition-slower) ease;
  }
  .bonsai-cash-card-reveal-link:hover, .bonsai-cash-card-reveal-link:active {
    opacity: 1;
  }
}

.bonsai-cash-card-reveal-toggle {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 50%;
  padding: 12px 10px 9px;
  font-weight: 600;
  font-size: 16px;
  user-select: none;
  background: color-mix(in srgb, var(--black) 20%, transparent);
  border-radius: 6px;
  transform: translateY(-50%);
}

.bonsai-cash-card-freeze-link {
  user-select: none;
}
.bonsai-cash-card-freeze-link, .bonsai-cash-card-freeze-link:focus, .bonsai-cash-card-freeze-link:visited {
  color: var(--text-muted);
}
.bonsai-cash-card-freeze-link:hover, .bonsai-cash-card-freeze-link:active {
  color: var(--text-muted);
}
.form-switch.active + .bonsai-cash-card-freeze-link {
  color: var(--text-default);
}

.bonsai-cash-card-freeze-toggle {
  position: absolute;
  right: 6px;
  top: 6px;
  font-weight: 600;
  font-size: 14px;
  user-select: none;
}

.bonsai-cash-card-modal-border {
  position: absolute;
  left: 0;
  top: 205px;
  right: 0;
  border-bottom: 1px solid var(--border-content-alt);
}

.bonsai-cash-card-wrapper {
  margin: 0 auto 20px;
}

.bonsai-cash-card {
  position: relative;
  width: 100%;
  padding: 0 0 62.4%;
  text-align: left;
  color: var(--color-primary-contrast);
  background: var(--bg-content);
  background: linear-gradient(to top right, #F8F8f8, var(--bg-content));
  overflow: hidden;
  border: 1px solid var(--border-content-alt);
  border-radius: 10px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--bg-shadow) 5%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.bonsai-cash-card-bg-img {
  position: absolute;
  left: -10%;
  top: -20%;
  width: 142%;
  height: 120%;
  pointer-events: none;
  opacity: 0.7;
  background-size: cover;
  background-image: url("bonsai-cash/virtual-card-background.png");
}

.bonsai-cash-card-logo {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 90px;
  height: auto;
}
.bonsai-cash-card-logo path {
  fill: var(--color-primary);
}

.bonsai-cash-locked-card {
  position: absolute;
  right: 20px;
  top: 45px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-lighter);
}
.bonsai-cash-locked-card.locked-white {
  top: 50px;
  color: rgba(255, 255, 255, 0.8);
}

.bonsai-cash-locked-card-icon {
  position: relative;
  margin-right: 7px;
  width: 8px;
  height: auto;
}
.bonsai-cash-locked-card-icon path {
  fill: var(--text-lighter);
}
.bonsai-cash-locked-card.locked-white .bonsai-cash-locked-card-icon path {
  fill: rgba(255, 255, 255, 0.8);
}

.bonsai-cash-card-visa-logo {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 65px;
  height: auto;
}
.bonsai-cash-card-visa-logo path {
  fill: var(--color-primary-dark);
  opacity: 0.2;
}

.bonsai-cash-card-type-label {
  position: absolute;
  right: 20px;
  top: 22px;
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 16px;
  opacity: 0.7;
}

.bonsai-cash-card-name {
  position: absolute;
  left: 20px;
  bottom: 20px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--text-default) 70%, transparent);
  font-weight: 600;
}

.bonsai-cash-card-back {
  position: relative;
  width: 100%;
  padding: 0 0 62.4%;
  text-align: left;
  color: var(--text-default);
  background: var(--bg-content);
  overflow: hidden;
  border: 1px solid var(--border-content-alt);
  border-radius: 10px;
  background: linear-gradient(to top right, var(--bg-grey-f5), var(--bg-content));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--bg-shadow) 5%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.bonsai-cash-card-back-number {
  position: absolute;
  left: 20px;
  top: 43%;
  letter-spacing: 0.1em;
  font-size: 18px;
  font-weight: 600;
}

.bonsai-cash-card-back-name {
  position: absolute;
  left: 20px;
  top: 60%;
  right: 20px;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-weight: 600;
}

.bonsai-cash-card-back-exp {
  position: absolute;
  display: flex;
  align-items: center;
  left: 20px;
  bottom: 18px;
  color: var(--text-muted);
  font-size: 16px;
}

.bonsai-cash-card-back-exp-label {
  position: relative;
  top: -2px;
  padding-right: 6px;
  letter-spacing: 1px;
  font-size: 10px;
}

.bonsai-cash-card-back-cvv {
  position: absolute;
  display: flex;
  align-items: center;
  left: 115px;
  bottom: 18px;
  color: var(--text-muted);
  font-size: 16px;
}

.bonsai-cash-card-back-cvv-label {
  position: relative;
  top: -2px;
  padding-right: 6px;
  letter-spacing: 1px;
  font-size: 10px;
}

.bonsai-cash-card-back-stripe {
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  padding-bottom: 11%;
  background: var(--border-content-alt);
  background: linear-gradient(to right, var(--border-darker), var(--bg-grey-e));
}

.bonsai-cash-physical-card-wrapper {
  margin-bottom: 40px;
  width: 100%;
}

.bonsai-cash-physical-card {
  position: relative;
  width: 100%;
  padding: 0 0 62.4%;
  text-align: left;
  color: var(--color-primary-contrast);
  background: var(--color-primary);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 10px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--bg-shadow) 5%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.bonsai-cash-physical-card.physical-cancelled {
  background: var(--bg-grey-c);
}

.bonsai-cash-physical-bg-img {
  position: absolute;
  left: -10%;
  top: -20%;
  width: 142%;
  height: 120%;
  pointer-events: none;
  background-size: cover;
  background-image: url("bonsai-cash/physical-card-background.png");
}

.bonsai-cash-physical-logo {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 90px;
  height: auto;
}
.bonsai-cash-physical-logo path {
  fill: var(--bg-content);
}

.bonsai-cash-physical-visa-logo {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 65px;
  height: auto;
}
.bonsai-cash-physical-visa-logo path {
  fill: var(--bg-content);
}

.bonsai-cash-physical-chip {
  position: absolute;
  left: 40px;
  top: 36%;
}

.bonsai-cash-physical-active-ending {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: 20px;
  left: 30px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3em;
}

.bonsai-cash-physical-bullets {
  position: relative;
  top: 0;
  width: 46px;
  height: auto;
  margin-right: 13px;
}

.bonsai-cash-physical-bottom-links {
  text-align: center;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--border-content);
}

.bonsai-cash-update-pin {
  text-align: center;
}

.bonsai-cash-update-pin-form {
  margin: -10px;
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
}
.bonsai-cash-update-pin-form .form-field-error {
  border-radius: 6px 6px 0 0;
}

.bonsai-cash-update-pin-top {
  height: 123px;
  padding: 30px 0 0;
  margin-bottom: 30px;
  background: var(--bg-grey-fc);
  border-bottom: 1px solid var(--border-content-alt);
  border-radius: 6px 6px 0 0;
}

.bonsai-cash-update-pin-header {
  margin-bottom: 30px;
  font-weight: 600;
}

.bonsai-cash-update-pin-text {
  color: var(--text-muted);
}

.bonsai-cash-update-pin-header-otp {
  display: inline-flex !important;
}

.bonsai-cash-transaction-date {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  cursor: default;
}

.bonsai-cash-transaction-date-label {
  padding-right: 15px;
}

.bonsai-cash-transaction-date-border {
  flex: 1;
  border-top: 1px solid var(--border-content);
}

.bonsai-cash-transaction-item {
  position: relative;
  cursor: pointer;
  border-bottom: 1px solid var(--border-content);
}
.bonsai-cash-transaction-item:hover {
  color: var(--text-default);
}

.bonsai-cash-transaction-item-in {
  width: 100%;
  padding: 18px 20px 20px 50px;
}
@media (min-width: 768px) {
  .bonsai-cash-transaction-item-in {
    display: flex;
    align-items: center;
  }
}
.bonsai-cash-transaction-item-in, .bonsai-cash-transaction-item-in:focus, .bonsai-cash-transaction-item-in:visited {
  color: var(--text-default);
}
.bonsai-cash-transaction-item-in:hover, .bonsai-cash-transaction-item-in:active {
  color: var(--text-default);
}

.bonsai-cash-transaction-item-name {
  padding-right: 80px;
  font-size: 14px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .bonsai-cash-transaction-item-name {
    padding-right: 10px;
  }
}
.bonsai-cash-transaction-item.pending-transaction .bonsai-cash-transaction-item-name {
  color: var(--text-lighter);
}

.bonsai-cash-transaction-item-detail {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
}

.bonsai-cash-transaction-item-category {
  height: 27px;
  margin-top: 10px;
}
@media (min-width: 768px) {
  .bonsai-cash-transaction-item-category {
    margin-top: 0;
  }
}

.bonsai-cash-transaction-item-amount {
  position: absolute;
  display: inline-block;
  right: 20px;
  top: 18px;
  font-weight: 600;
  text-align: right;
}
@media (min-width: 768px) {
  .bonsai-cash-transaction-item-amount {
    position: relative;
    right: 0;
    top: 0;
    margin-left: auto;
    width: 25%;
  }
}
.bonsai-cash-transaction-item.pending-transaction .bonsai-cash-transaction-item-amount {
  color: var(--text-lighter);
}
.bonsai-cash-transaction-item.positive-transaction .bonsai-cash-transaction-item-amount {
  color: var(--color-primary);
}

.bonsai-cash-transaction-item-arrow-up {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 20px;
  height: 20px;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: 50%;
}

.bonsai-cash-transaction-item-arrow-down {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 20px;
  height: 20px;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  color: var(--text-lightest);
  background: var(--bg-grey-f8);
  border-radius: 50%;
}

.bonsai-cash-transaction-item-arrow-swap {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 20px;
  height: 20px;
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
  color: var(--text-lightest);
  background: var(--bg-grey-f8);
  border-radius: 50%;
}

.bonsai-cash-transaction-empty {
  padding: 90px 20px;
  text-align: center;
  color: var(--text-lighter);
  font-size: 16px;
  background: color-mix(in srgb, var(--black) 1%, transparent);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}
@media (min-width: 768px) {
  .bonsai-cash-transaction-empty {
    padding: 90px;
  }
}

.bonsai-cash-transaction-icon-wrapper {
  position: absolute;
  display: flex;
  align-items: center;
  top: 20px;
  left: 0;
  height: 36px;
}

.bonsai-cash-transaction-icon {
  position: relative;
  width: 36px;
  height: auto;
}
.bonsai-cash-transaction-icon.cash-out-icon, .bonsai-cash-transaction-icon.cash-in-icon {
  width: 35px;
  left: 0;
  top: 1px;
}
.bonsai-cash-transaction-icon.cash-pending-icon {
  width: 35px;
  left: 0;
  top: 0;
}

.cash-welcome-modal-content {
  position: relative;
  padding: 50px 60px 60px;
}
.cash-welcome-modal-content .bonsai-cash-card-wrapper {
  max-width: 300px;
  margin: 0 auto 60px;
}
.cash-welcome-modal-content .bonsai-cash-card-name {
  font-size: 10px;
}

.cash-welcome-modal-bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 134px;
  overflow: hidden;
  background: url("bonsai-cash/cash-welcome-modal-card-bg.png") center center;
  background-size: cover;
  background-color: var(--color-primary-dark);
  border-radius: 4px 4px 0 0;
}

.cash-welcome-modal-card-decor {
  position: absolute;
  left: 50%;
  top: -32px;
  height: 262px;
  width: 344px;
  margin-left: -172px;
  background-position: top center;
  background-size: contain;
  background-image: url("bonsai-cash/cash-welcome-modal-card-decor.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .cash-welcome-modal-card-decor {
    background-image: url("bonsai-cash/cash-welcome-modal-card-decor@2x.png");
  }
}

.cash-welcome-modal-body {
  text-align: center;
}

.cash-welcome-modal-title {
  font-family: var(--font-display-header);
  font-size: 22px;
  font-weight: 400;
}
@media (min-width: 480px) {
  .cash-welcome-modal-title {
    font-size: 26px;
  }
}

.cash-welcome-modal-cta {
  max-width: 300px;
  margin: auto;
}

.cash-welcome-modal-virtual-copy {
  padding: 40px 40px;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: var(--text-muted);
  border-top: 1px solid var(--border-content-alt);
}
@media (min-width: 480px) {
  .cash-welcome-modal-virtual-copy {
    padding: 40px 60px;
  }
}

.cash-welcome-modal-virtual-link {
  display: block;
  margin-top: 15px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0em;
  text-align: center;
}

.bonsai-cash-fund-account-options {
  text-align: left;
}

.bonsai-cash-fund-account-option {
  position: relative;
  margin-bottom: 10px;
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
  transition: all 0.2s ease;
}
.bonsai-cash-fund-account-option:hover {
  box-shadow: 0 2px 12px color-mix(in srgb, var(--bg-shadow) 3%, transparent);
}
.bonsai-cash-fund-account-option.expanded {
  box-shadow: none;
}
.bonsai-cash-fund-account-option.completed {
  background: var(--bg-grey-fa);
  border: 1px solid var(--border-content);
  box-shadow: none;
}
.bonsai-cash-fund-account-option:last-child {
  margin-bottom: 0;
}

.bonsai-cash-fund-account-option-in {
  padding: 20px 50px 20px 20px;
  cursor: pointer;
  user-select: none;
}
.bonsai-cash-fund-account-option.completed .bonsai-cash-fund-account-option-in {
  cursor: default;
}

.bonsai-cash-fund-account-option-completed-tag {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 30px;
  height: 30px;
  padding: 0;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  color: var(--text-muted-alt);
  cursor: default;
  border-radius: 50%;
  border: 1px solid var(--text-lighter);
}

.bonsai-cash-fund-account-option-completed-tag-icon {
  position: relative;
  top: -4px;
  line-height: 1;
}

.bonsai-cash-fund-account-option-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-default);
}
.bonsai-cash-fund-account-option.completed .bonsai-cash-fund-account-option-title {
  color: var(--text-muted-alt);
  text-decoration: line-through;
}

.bonsai-cash-fund-account-option-desc {
  margin-top: 2px;
  font-size: 14px;
  color: var(--text-muted-alt);
}
.bonsai-cash-fund-account-option.completed .bonsai-cash-fund-account-option-desc {
  display: none;
}

.bonsai-cash-fund-account-option-expandable {
  margin: 0 20px 20px;
  padding: 20px;
  background: var(--bg-info-lighter);
  border-radius: 4px;
}

.cash-transfer-modal-modes {
  position: relative;
  background: var(--bg-grey-fc);
  border-bottom: 1px solid var(--border-semi-transparent-alt);
  border-radius: 6px 6px 0 0;
}

.cash-transfer-modal-mode {
  display: inline-block;
  padding: 19px 10px 19px;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  user-select: none;
}
.cash-transfer-modal-mode, .cash-transfer-modal-mode:focus, .cash-transfer-modal-mode:visited {
  color: var(--text-muted-alt);
}
.cash-transfer-modal-mode:hover, .cash-transfer-modal-mode:active {
  color: var(--text-muted-alt);
}
.cash-transfer-modal-mode.active {
  color: var(--color-primary);
  background: var(--bg-content);
  box-shadow: 0 1px 0 white;
}
.cash-transfer-modal-mode:first-child {
  border-right: 1px solid var(--border-semi-transparent-alt);
  border-radius: 6px 0 0 0;
}
.cash-transfer-modal-mode:last-child {
  border-radius: 0 6px 0 0;
}

.cash-transfer-modal-accounts {
  position: relative;
  border-radius: 6px;
  border: 1px solid var(--border-darker);
}

.cash-transfer-modal-account {
  position: relative;
  padding: 5px 5px 5px 55px;
  user-select: none;
}
.cash-transfer-modal-account:first-child {
  border-bottom: 1px solid var(--border-content);
}

.cash-transfer-modal-account-loading {
  text-align: center;
}

.cash-transfer-modal-account-direction {
  position: absolute;
  left: 15px;
  top: 26px;
  width: 34px;
  text-align: right;
  font-size: 12px;
  color: var(--text-lighter);
}

.cash-transfer-modal-account-details {
  position: relative;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
}
.cash-transfer-modal-account-details.with-icon {
  position: relative;
  padding-left: 54px;
}
.cash-transfer-modal-account-details.within-list:first-child {
  margin-top: 10px;
}
.cash-transfer-modal-account-details.within-list:last-child {
  margin-bottom: 10px;
}
.cash-transfer-modal-account-details:hover {
  background: var(--bg-grey-fc);
}
.cash-transfer-modal-account-details.not-selectable {
  cursor: default;
  background: var(--bg-content);
}
.cash-transfer-modal-account-details.account-unverified {
  cursor: default;
  background: var(--bg-content);
}

.cash-transfer-modal-account-details-icon {
  position: absolute;
  left: 10px;
  top: 12px;
}

.cash-transfer-modal-account-details-arrow {
  position: absolute;
  right: 14px;
  top: 16px;
  font-size: 20px;
  color: color-mix(in srgb, var(--black) 20%, transparent);
}
.cash-transfer-modal-account-details-arrow.active {
  transform: rotate(-90deg);
}

.cash-transfer-modal-account-name {
  margin-bottom: 1px;
  padding-right: 20px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.cash-transfer-modal-account-details.account-unverified .cash-transfer-modal-account-name {
  color: var(--text-lighter);
}

.cash-transfer-modal-account-num {
  padding-right: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.cash-transfer-modal-account-details.account-unverified .cash-transfer-modal-account-num {
  color: var(--text-lighter);
}

.cash-transfer-modal-account-num-digits {
  letter-spacing: 2px;
}

.cash-transfer-modal-account-empty {
  margin-bottom: -10px;
  color: var(--text-lighter);
  padding: 12px 0 0;
  font-size: 14px;
}

.cash-transfer-modal-account-add-btn {
  display: inline-block;
  padding: 10px 10px;
  font-weight: 600;
}

.cash-transfer-modal-account-viewall {
  position: absolute;
  right: 6px;
  top: 1px;
}

.cash-transfer-modal-account-unverified {
  position: relative;
  z-index: 2;
  margin-top: -5px;
  margin-bottom: 7px;
  padding: 0 10px;
  font-weight: 600;
}

.cash-transfer-modal-switch {
  position: absolute;
  display: flex;
  z-index: 2;
  align-items: center;
  justify-content: center;
  right: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
  border-radius: 50%;
  transform: translate(50%, -50%);
}
.cash-transfer-modal-switch:hover {
  border: 1px solid color-mix(in srgb, var(--color-primary) 80%, transparent);
}

.cash-transfer-modal-switch-icon {
  position: relative;
  left: 0;
  opacity: 0.9;
}
.cash-transfer-modal-switch:hover .cash-transfer-modal-switch-icon {
  opacity: 1;
}

.cash-transfer-modal-amount-currency {
  position: absolute;
  left: 41px;
  top: 11px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-lighter);
}

.cash-transfer-modal-amount-input.form-field.input-lg, .input-group-lg > .cash-transfer-modal-amount-input.form-field.form-control,
.input-group-lg > .cash-transfer-modal-amount-input.form-field.input-group-addon,
.input-group-lg > .input-group-btn > .cash-transfer-modal-amount-input.form-field.btn {
  padding-left: 65px;
}

.cash-transfer-modal-cta-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-content);
}

.cash-transfer-modal-back {
  position: absolute;
  display: flex;
  align-items: center;
  left: 10px;
  top: 10px;
}
.cash-transfer-modal-back svg {
  fill: var(--text-lighter);
}

.cash-transfer-modal-back-link {
  display: block;
  padding: 20px;
}

.cash-transfer-modal-connect-bank {
  padding-top: 40px;
  text-align: center;
}

.cash-transfer-modal-bank-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin: 0 auto 40px;
  text-align: center;
}

.cash-transfer-modal-bank-svg {
  width: 100px;
  height: auto;
}

.cash-transfer-modal-connect-bank-text {
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: 500;
}

.cash-transfer-modal-account-connected {
  border: 1px solid var(--border-content-alt);
  border-radius: 10px;
}

.cash-transfer-modal-account-connected-label {
  display: flex;
  align-items: center;
  padding: 10px 10px 8px;
  text-transform: uppercase;
  color: var(--color-primary);
  border-bottom: 1px solid var(--border-content-alt);
}

.cash-transfer-modal-account-connected-label-icon {
  margin-right: 10px;
  font-size: 20px;
  line-height: 20px;
}

.cash-transfer-modal-account-connected-details {
  position: relative;
  padding: 20px 20px 18px 75px;
}

.cash-transfer-modal-account-connected-details-icon {
  position: absolute;
  left: 20px;
  top: 23px;
}

.cash-transfer-modal-account-connected-details-name {
  margin-bottom: 5px;
  font-weight: 600;
}

.cash-transfer-modal-account-connected-details-num {
  font-weight: 14px;
  color: var(--text-lighter);
}

.cash-transfer-modal-confirm-copy {
  margin-bottom: 60px;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 600;
}

.cash-transfer-modal-connect-other {
  margin-top: 30px;
  padding-top: 30px;
  color: var(--text-lighter);
  border-top: 1px solid var(--border-content);
}

.bonsai-cash-bank-connected-info {
  margin-top: 40px;
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.bonsai-cash-bank-connected-info-status {
  position: relative;
  padding: 11px 10px 10px 38px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-content-alt);
}

.bonsai-cash-bank-connected-info-status-icon {
  position: absolute;
  left: 12px;
  top: 10px;
  font-size: 18px;
}

.bonsai-cash-bank-connected-info-details {
  position: relative;
  padding: 20px 20px 20px 80px;
}

.bonsai-cash-bank-connected-info-details-icon {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 38px;
  height: auto;
}

.bonsai-cash-bank-connected-info-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-default);
}

.bonsai-cash-bank-connected-info-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bonsai-cash-bank-connected-info-num {
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-lighter);
}

.bonsai-cash-envelope-icon-wrapper {
  background: none;
  border: 1px solid var(--border-content-alt);
  border-radius: 7px;
}
.bonsai-cash-envelope-icon-wrapper.envelope-icon-small {
  width: 32px;
  height: 32px;
}
.bonsai-cash-envelope-icon-wrapper.envelope-icon-list-item {
  width: 34px;
  height: 34px;
}
.bonsai-cash-envelope-icon-wrapper.envelope-icon-large {
  width: 60px;
  height: 60px;
  border-radius: 10px;
}
.bonsai-cash-envelope-icon-wrapper.envelope-selector {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.bonsai-cash-envelope-icon-wrapper.envelope-transaction-transfer {
  position: relative;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-content);
  border-radius: 50%;
}
.bonsai-cash-envelope-icon-wrapper.icon-card {
  background: var(--bg-content);
  border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}
.bonsai-cash-envelope-icon-wrapper.icon-card .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-card .bonsai-cash-envelope-icon path {
  fill: var(--color-primary);
  opacity: 1;
}
.bonsai-cash-envelope-icon-wrapper.icon-card.envelope-transaction-transfer {
  background: var(--bg-content);
}
.bonsai-cash-envelope-icon-wrapper.icon-card.envelope-transaction-transfer .bonsai-cash-envelope-icon path {
  fill: color-mix(in srgb, var(--color-primary) 70%, transparent);
}
.bonsai-cash-envelope-icon-wrapper.icon-cash-balance {
  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}
.bonsai-cash-envelope-icon-wrapper.icon-cash-balance .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-cash-balance .bonsai-cash-envelope-icon path {
  fill: var(--color-primary);
}
.bonsai-cash-envelope-icon-wrapper.icon-tax {
  border-color: rgba(77, 123, 169, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-tax .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-tax .bonsai-cash-envelope-icon path {
  fill: #4d7ba9;
}
.bonsai-cash-envelope-icon-wrapper.icon-usd-circle {
  border-color: rgba(120, 206, 133, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-usd-circle .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-usd-circle .bonsai-cash-envelope-icon path {
  fill: #78ce85;
}
.bonsai-cash-envelope-icon-wrapper.icon-plane-departure {
  border-color: rgba(73, 179, 208, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-plane-departure .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-plane-departure .bonsai-cash-envelope-icon path {
  fill: #49b3d0;
}
.bonsai-cash-envelope-icon-wrapper.icon-home {
  border-color: rgba(216, 189, 76, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-home .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-home .bonsai-cash-envelope-icon path {
  fill: #d8bd4c;
}
.bonsai-cash-envelope-icon-wrapper.icon-car {
  border-color: rgba(142, 116, 199, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-car .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-car .bonsai-cash-envelope-icon path {
  fill: #8e74c7;
}
.bonsai-cash-envelope-icon-wrapper.icon-calendar {
  border-color: rgba(115, 152, 206, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-calendar .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-calendar .bonsai-cash-envelope-icon path {
  fill: #7398ce;
}
.bonsai-cash-envelope-icon-wrapper.icon-heart {
  border-color: rgba(239, 114, 101, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-heart .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-heart .bonsai-cash-envelope-icon path {
  fill: #ef7265;
}
.bonsai-cash-envelope-icon-wrapper.icon-compass {
  border-color: rgba(108, 150, 220, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-compass .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-compass .bonsai-cash-envelope-icon path {
  fill: #6c96dc;
}
.bonsai-cash-envelope-icon-wrapper.icon-medical-square {
  border-color: rgba(247, 109, 109, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-medical-square .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-medical-square .bonsai-cash-envelope-icon path {
  fill: #f76d6d;
}
.bonsai-cash-envelope-icon-wrapper.icon-fire {
  border-color: rgba(241, 196, 15, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-fire .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-fire .bonsai-cash-envelope-icon path {
  fill: #f1c40f;
}
.bonsai-cash-envelope-icon-wrapper.icon-flower {
  border-color: rgba(243, 169, 52, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-flower .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-flower .bonsai-cash-envelope-icon path {
  fill: #f3a934;
}
.bonsai-cash-envelope-icon-wrapper.icon-folder {
  border-color: rgba(76, 197, 174, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-folder .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-folder .bonsai-cash-envelope-icon path {
  fill: #4cc5ae;
}
.bonsai-cash-envelope-icon-wrapper.icon-gift {
  border-color: rgba(236, 147, 88, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-gift .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-gift .bonsai-cash-envelope-icon path {
  fill: #ec9358;
}
.bonsai-cash-envelope-icon-wrapper.icon-glass-martini {
  border-color: rgba(212, 110, 178, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-glass-martini .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-glass-martini .bonsai-cash-envelope-icon path {
  fill: #d46eb2;
}
.bonsai-cash-envelope-icon-wrapper.icon-keyhole-circle {
  border-color: rgba(135, 135, 159, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-keyhole-circle .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-keyhole-circle .bonsai-cash-envelope-icon path {
  fill: #87879f;
}
.bonsai-cash-envelope-icon-wrapper.icon-map-marker-alt {
  border-color: rgba(199, 139, 139, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-map-marker-alt .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-map-marker-alt .bonsai-cash-envelope-icon path {
  fill: #c78b8b;
}
.bonsai-cash-envelope-icon-wrapper.icon-mountains-sun {
  border-color: rgba(210, 158, 95, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-mountains-sun .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-mountains-sun .bonsai-cash-envelope-icon path {
  fill: #d29e5f;
}
.bonsai-cash-envelope-icon-wrapper.icon-navigator {
  border-color: rgba(112, 172, 212, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-navigator .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-navigator .bonsai-cash-envelope-icon path {
  fill: #70acd4;
}
.bonsai-cash-envelope-icon-wrapper.icon-parcel {
  border-color: rgba(177, 123, 199, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-parcel .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-parcel .bonsai-cash-envelope-icon path {
  fill: #b17bc7;
}
.bonsai-cash-envelope-icon-wrapper.icon-restaurant {
  border-color: rgba(222, 111, 111, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-restaurant .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-restaurant .bonsai-cash-envelope-icon path {
  fill: #de6f6f;
}
.bonsai-cash-envelope-icon-wrapper.icon-rocket {
  border-color: rgba(88, 202, 181, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-rocket .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-rocket .bonsai-cash-envelope-icon path {
  fill: #58cab5;
}
.bonsai-cash-envelope-icon-wrapper.icon-shield-plus {
  border-color: rgba(132, 152, 142, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-shield-plus .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-shield-plus .bonsai-cash-envelope-icon path {
  fill: #84988e;
}
.bonsai-cash-envelope-icon-wrapper.icon-ship {
  border-color: rgba(97, 149, 191, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-ship .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-ship .bonsai-cash-envelope-icon path {
  fill: #6195bf;
}
.bonsai-cash-envelope-icon-wrapper.icon-star {
  border-color: rgba(220, 206, 80, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-star .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-star .bonsai-cash-envelope-icon path {
  fill: #dcce50;
}
.bonsai-cash-envelope-icon-wrapper.icon-sunset {
  border-color: rgba(230, 141, 62, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-sunset .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-sunset .bonsai-cash-envelope-icon path {
  fill: #e68d3e;
}
.bonsai-cash-envelope-icon-wrapper.icon-ticket {
  border-color: rgba(88, 199, 135, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-ticket .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-ticket .bonsai-cash-envelope-icon path {
  fill: #58c787;
}
.bonsai-cash-envelope-icon-wrapper.icon-user {
  border-color: rgba(183, 116, 183, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-user .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-user .bonsai-cash-envelope-icon path {
  fill: #b774b7;
}
.bonsai-cash-envelope-icon-wrapper.icon-video {
  border-color: rgba(166, 148, 241, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-video .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-video .bonsai-cash-envelope-icon path {
  fill: #a694f1;
}
.bonsai-cash-envelope-icon-wrapper.icon-ambulance {
  border-color: rgba(216, 128, 138, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-ambulance .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-ambulance .bonsai-cash-envelope-icon path {
  fill: #d8808a;
}
.bonsai-cash-envelope-icon-wrapper.icon-books {
  border-color: rgba(158, 153, 126, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-books .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-books .bonsai-cash-envelope-icon path {
  fill: #9e997e;
}
.bonsai-cash-envelope-icon-wrapper.icon-camera {
  border-color: rgba(126, 126, 127, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-camera .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-camera .bonsai-cash-envelope-icon path {
  fill: #7e7e7f;
}
.bonsai-cash-envelope-icon-wrapper.icon-lock-alt {
  border-color: rgba(83, 179, 191, 0.5);
}
.bonsai-cash-envelope-icon-wrapper.icon-lock-alt .bonsai-cash-envelope-icon,
.bonsai-cash-envelope-icon-wrapper.icon-lock-alt .bonsai-cash-envelope-icon path {
  fill: #53b3bf;
}

.envelope-icon-small .bonsai-cash-envelope-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: auto;
  fill: var(--text-lighter);
  transform: translate(-50%, -50%);
  opacity: 0.7;
}

.envelope-icon-list-item .bonsai-cash-envelope-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: auto;
  fill: var(--text-lighter);
  transform: translate(-50%, -50%);
  opacity: 0.7;
}

.envelope-icon-large .bonsai-cash-envelope-icon {
  position: relative;
  left: 50%;
  top: 50%;
  width: 30px;
  height: auto;
  fill: var(--text-lighter);
  transform: translate(-50%, -50%);
  opacity: 0.9;
}

.envelope-transaction-transfer .bonsai-cash-envelope-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: auto;
  fill: var(--text-lighter);
  transform: translate(-50%, -50%);
  opacity: 0.9;
}

.bonsai-cash-envelope-automation-active {
  position: absolute;
  right: -10px;
  top: -10px;
  padding: 0px 3px;
  height: 18px;
  line-height: 1.25;
  background: var(--bg-grey-f5);
  border: 1px solid var(--border-semi-transparent-alt);
  border-radius: 4px;
}
.bonsai-cash-envelope-automation-active svg {
  width: 10px;
  height: auto;
}

.bonsai-cash-envelope-icon-loading {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 14px;
  color: color-mix(in srgb, var(--black) 10%, transparent);
  transform: translate(0%, -50%);
}
.envelope-icon-large .bonsai-cash-envelope-icon-loading {
  font-size: 20px;
}

.bonsai-cash-envelope-form .form-error-banner {
  border-radius: 6px 6px 0 0;
}

.bonsai-cash-envelope-form-top {
  height: 100px;
  margin-bottom: 40px;
  background: var(--bg-grey-fc);
  border-bottom: 1px solid var(--border-content-alt);
  border-radius: 6px 6px 0 0;
}

.bonsai-cash-envelope-form-selector {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 60px;
}

.bonsai-cash-envelope-form-selector-box {
  position: relative;
  width: 80px;
  height: 80px;
  padding: 10px;
  background: var(--bg-content);
  border-radius: 10px;
  overflow: hidden;
}

.bonsai-cash-envelope-form-selector-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: auto;
  fill: var(--text-info-dark);
  transform: translate(-50%, -50%);
}

.bonsai-cash-envelope-form-selector-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: auto;
  text-align: center;
  font-size: 20px;
  color: var(--text-lightest);
  transform: translate(-50%, -50%);
}

.bonsai-cash-envelope-form-selector-arrow {
  width: 40px;
  height: 40px;
  margin: 0 20px;
  text-align: center;
  font-size: 32px;
  line-height: 1.15;
  background: var(--bg-content);
  border-radius: 50%;
  border: 1px solid var(--border-content-alt);
  box-shadow: 0 0 9px color-mix(in srgb, var(--bg-shadow) 3%, transparent);
}
.bonsai-cash-envelope-form-selector-arrow, .bonsai-cash-envelope-form-selector-arrow:focus, .bonsai-cash-envelope-form-selector-arrow:visited {
  color: var(--text-muted);
}
.bonsai-cash-envelope-form-selector-arrow:hover, .bonsai-cash-envelope-form-selector-arrow:active {
  color: var(--text-muted);
  border: 1px solid var(--border-darker);
}

.bonsai-cash-envelope-form-content {
  padding: 40px;
  text-align: center;
}
.bonsai-cash-envelope-form-content .form-field {
  text-align: center;
}

.envelopes-show {
  position: relative;
  padding: 25px 20px 20px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}
@media (min-width: 992px) {
  .envelopes-show {
    padding: 40px;
  }
}

@media (min-width: 992px) {
  .envelopes-show-header {
    display: flex;
    align-items: center;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--border-content);
  }
}

.envelopes-show-title-section {
  display: flex;
}

.envelopes-show-title-text {
  padding-left: 30px;
}

.envelopes-show-title {
  margin-top: -5px;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 16px;
  color: var(--text-default);
}

.envelopes-show-total {
  font-weight: 500;
  font-size: 34px;
  font-family: var(--font-display-header);
  color: var(--text-default);
}

.envelopes-show-top-actions {
  display: flex;
  flex: 1;
  margin-top: 20px;
  text-align: left;
}
.envelopes-show-top-actions .btn {
  flex: auto;
}
@media (min-width: 992px) {
  .envelopes-show-top-actions {
    display: block;
    margin-top: 0;
    text-align: right;
  }
  .envelopes-show-top-actions .btn {
    flex: initial;
  }
}

.bonsai-cash-fund-account-options {
  text-align: center;
}

.cash-funding-option {
  cursor: pointer;
  position: relative;
  margin: 0 -15px;
  padding: 20px 60px 20px 70px;
  min-height: 77px;
  text-align: left;
  border-radius: 6px;
  font-size: 18px;
}
.cash-funding-option:hover {
  background-color: var(--bg-grey-fc);
}
.cash-funding-option.disabled {
  cursor: default;
  text-decoration: line-through;
}
.cash-funding-option.disabled .cash-funding-option-title {
  text-decoration: line-through;
}
.cash-funding-option.disabled .cash-funding-option-icon {
  color: var(--text-muted-alt);
}

.cash-funding-options-section-content {
  padding: 0px 90px;
  text-align: center;
}

.cash-funding-options-section-title {
  margin-bottom: 15px;
  font-family: var(--font-display-header);
  font-size: 18px;
  text-align: center;
  color: var(--text-default);
}
.cash-funding-options-section-title.align-left {
  text-align: left;
}
.cash-funding-options-section-title.align-center {
  text-align: center;
}
@media (min-width: 768px) {
  .cash-funding-options-section-title {
    font-size: 22px;
  }
}

.cash-funding-option-title {
  position: absolute;
  right: 50px;
  left: 70px;
  top: 50%;
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-sans-serif);
  transform: translateY(-50%);
}

.cash-funding-option-copy {
  font-size: 14px;
  color: var(--text-muted);
}
.cash-funding-option-copy.align-left {
  text-align: left;
}
.cash-funding-option-copy.align-center {
  text-align: center;
}

.cash-funding-option-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 32px;
  height: 32px;
  background: transparent center center no-repeat;
  background-size: contain;
  transform: translateY(-50%);
}
.cash-funding-option-icon.payPal {
  background-image: url("bonsai-cash/apps/paypal.png");
}
.cash-funding-option-icon.venmo {
  background-image: url("bonsai-cash/apps/venmo.png");
}
.cash-funding-option-icon.deel {
  background-image: url("bonsai-cash/apps/deel.png");
}
.cash-funding-option-icon.gusto {
  background-image: url("bonsai-cash/apps/gusto.png");
}
.cash-funding-option-icon.stripe {
  background-image: url("bonsai-cash/apps/stripe.png");
}
.cash-funding-option-icon.cashApp {
  background-image: url("bonsai-cash/apps/cash-app.png");
}
.cash-funding-option-icon.square {
  background-image: url("bonsai-cash/apps/square.png");
}
.cash-funding-option-icon.upwork {
  background-image: url("bonsai-cash/apps/upwork.png");
}
.cash-funding-option-icon.quickBooks {
  background-image: url("bonsai-cash/apps/quickbooks.png");
}
.cash-funding-option-icon.wave {
  background-image: url("bonsai-cash/apps/wave-app.png");
}
.cash-funding-option-icon.shopify {
  background-image: url("bonsai-cash/apps/shopify.png");
}

.cash-funding-option-icon-other {
  position: absolute;
  left: 10px;
  top: -2px;
  color: var(--text-lightest);
  font-size: 27px;
}

.cash-funding-option-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  width: 20px;
  height: auto;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.bonsai-cash-fund-account-apps-instructions-title-section {
  display: flex;
}

.bonsai-cash-fund-account-apps-instructions-title-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px 10px;
  margin-left: -20px;
  margin-bottom: 30px;
  border-radius: 4px;
}
.bonsai-cash-fund-account-apps-instructions-title-link:hover, .bonsai-cash-fund-account-apps-instructions-title-link:active {
  background: var(--bg-grey-f8);
}

.bonsai-cash-fund-account-apps-instructions-title {
  margin-left: 20px;
  font-family: var(--font-display-header);
  font-size: 18px;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .bonsai-cash-fund-account-apps-instructions-title {
    font-size: 22px;
  }
}

.bonsai-cash-fund-account-apps-instructions {
  text-align: left;
  font-family: var(--font-sans-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
}

.bonsai-cash-fund-account-apps-instructions-section-title {
  margin-bottom: 20px;
}

.bonsai-cash-fund-account-apps-instructions-step {
  position: relative;
  margin-bottom: 20px;
  padding-left: 30px;
}
.bonsai-cash-fund-account-apps-instructions-step.step-without-number {
  padding-left: 0;
}

.bonsai-cash-fund-account-apps-instructions-number {
  position: absolute;
  top: 0;
  left: 0;
}

.bonsai-cash-promo-banner {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 25px 30px 28px;
  background: var(--bg-content);
  background-image: linear-gradient(to right, var(--bg-brand-muted) 0%, var(--bg-grey-f5) 100%);
  border: 1px solid var(--border-content-alt);
  overflow: hidden;
  border-radius: 4px;
}
@media (min-width: 1320px) {
  .bonsai-cash-promo-banner {
    flex-direction: row;
    align-items: center;
  }
}
.bonsai-cash-promo-banner .btn {
  white-space: nowrap;
}

.bonsai-cash-promo-banner-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent center center no-repeat;
  background-size: cover;
  background-image: url("bonsai-cash/banner-bg.png");
  opacity: 0.5;
}

.bonsai-cash-promo-banner-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 12px;
  height: 12px;
  cursor: pointer;
  opacity: 0.6;
}
.bonsai-cash-promo-banner-close path {
  fill: var(--text-default);
}
.bonsai-cash-promo-banner-close:hover, .bonsai-cash-promo-banner-close:active {
  color: var(--text-default);
  opacity: 0.8;
}

.bonsai-cash-promo-banner-text {
  position: relative;
  margin-bottom: 20px;
}
@media (min-width: 1320px) {
  .bonsai-cash-promo-banner-text {
    margin-bottom: 0;
  }
}

.bonsai-cash-promo-banner-title {
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-default);
}

.bonsai-cash-promo-banner-subtitle {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.bonsai-cash-promo-banner-info-icon {
  position: relative;
  top: -2px;
  padding-left: 4px;
  font-size: 10px;
}
.bonsai-cash-promo-banner-info-icon, .bonsai-cash-promo-banner-info-icon:focus, .bonsai-cash-promo-banner-info-icon:visited {
  color: var(--text-lighter);
}
.bonsai-cash-promo-banner-info-icon:hover, .bonsai-cash-promo-banner-info-icon:active {
  color: var(--text-lighter);
}

.bonsai-cash-show {
  position: relative;
  padding-top: 20px;
}
@media (min-width: 992px) {
  .bonsai-cash-show {
    padding-top: 40px;
  }
}

.bonsai-cash-content {
  position: relative;
}

.bonsai-cash-header {
  display: block;
}
@media (min-width: 992px) {
  .bonsai-cash-header {
    display: flex;
    flex-direction: row-reverse;
  }
}

.bonsai-cash-bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 171px;
  background: var(--bg-grey-fd);
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 992px) {
  .bonsai-cash-bg {
    height: 164px;
  }
  .bonsai-cash-bg.envelopes-show-page {
    height: 208px;
  }
}

.bonsai-cash-card-preview {
  position: relative;
  display: block;
  height: 50px;
  width: 100%;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
  user-select: none;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 7px;
  transition: all var(--transition-fast) ease;
}
@media (min-width: 992px) {
  .bonsai-cash-card-preview {
    height: 84px;
    width: 163px;
    margin-bottom: 0;
  }
}
.bonsai-cash-card-preview:hover {
  border: 1px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.bonsai-cash-card-preview-num {
  position: absolute;
  left: 67px;
  top: 14px;
  color: var(--text-default);
}
@media (min-width: 992px) {
  .bonsai-cash-card-preview-num {
    left: 15px;
    bottom: 13px;
    top: auto;
  }
}

.bonsai-cash-card-preview-last4 {
  letter-spacing: 3px;
}

.bonsai-cash-card-preview-dots {
  position: relative;
  top: -1px;
  margin-right: 6px;
  letter-spacing: 3px;
}

.bonsai-cash-card-preview-copy {
  position: absolute;
  right: 15px;
  top: 14px;
  color: var(--color-primary);
}
@media (min-width: 992px) {
  .bonsai-cash-card-preview-copy {
    top: 15px;
  }
}

.bonsai-cash-card-preview-visa {
  position: absolute;
  left: 15px;
  top: 19px;
  width: 32px;
  height: auto;
}
@media (min-width: 992px) {
  .bonsai-cash-card-preview-visa {
    left: auto;
    top: auto;
    right: 15px;
    bottom: 19px;
  }
}
.bonsai-cash-card-preview-visa path {
  fill: var(--text-muted);
}

.bonsai-cash-card-preview-chip {
  position: absolute;
  display: none;
  left: 15px;
  top: 24px;
  width: 22px;
  height: auto;
}
@media (min-width: 992px) {
  .bonsai-cash-card-preview-chip {
    display: block;
  }
}
.bonsai-cash-card-preview-chip rect {
  fill: var(--bg-grey-e);
}

.bonsai-cash-totals-section {
  background-color: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
  box-shadow: 0 2px 14px color-mix(in srgb, var(--bg-shadow) 2%, transparent);
}
@media (min-width: 992px) {
  .bonsai-cash-totals-section {
    margin-top: -84px;
  }
}

.bonsai-cash-total-card {
  position: relative;
  padding: 26px 30px 30px;
}

.bonsai-cash-total-card-top {
  height: 66px;
}
@media (min-width: 992px) {
  .bonsai-cash-total-card-top {
    height: 76px;
  }
}

.bonsai-cash-total-header {
  margin-bottom: -2px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: default;
}

.bonsai-cash-total-amount {
  font-size: 34px;
  font-family: var(--font-display-header);
}

.bonsai-cash-account-info {
  margin: 10px 20px 20px 20px;
  font-weight: 600;
  text-align: center;
  color: var(--text-default);
  user-select: text;
}

.bonsai-cash-account-info-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: 500;
}
.bonsai-cash-account-info-line:last-child {
  margin-bottom: 0;
}

.bonsai-cash-account-info-address {
  text-align: right;
}

.bonsai-cash-account-info-note {
  margin-top: 15px;
  padding-top: 15px;
  font-size: 14px;
  color: var(--text-muted-alt);
  border-top: 1px solid var(--border-content);
}

.bonsai-cash-total-info-unavailable {
  margin: 10px 20px 30px 50px;
  padding: 30px;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-grey-f8);
  border-radius: 4px;
}

.bonsai-cash-envelopes-list {
  border-top: 1px solid var(--border-content);
}

.bonsai-cash-envelope-card {
  position: relative;
  display: block;
  padding: 5px;
  border-top: 1px solid var(--border-content);
}
.bonsai-cash-envelope-card:first-child {
  border-top: none;
}
.bonsai-cash-envelope-card .bonsai-cash-envelope-icon-wrapper {
  position: absolute;
  left: 30px;
  top: 30px;
}

.bonsai-cash-envelope-card-in {
  display: block;
  padding: 20px 15px 16px 80px;
  cursor: pointer;
  border-radius: 6px;
}
@media (min-width: 768px) {
  .bonsai-cash-envelope-card-in:hover {
    background: #fbfbfb;
  }
}

.bonsai-cash-envelope-header {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-default);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bonsai-cash-envelope-amount {
  font-size: 22px;
  font-family: var(--font-display-header);
  color: var(--text-default);
}

.bonsai-cash-envelopes-info {
  padding: 30px;
}

.bonsai-cash-envelopes-info-in {
  padding: 10px;
  text-align: center;
  cursor: default;
}

.bonsai-cash-envelopes-info-icon {
  width: 28px;
  height: auto;
  margin: 0 auto 15px;
}
.bonsai-cash-envelopes-info-icon path {
  fill: var(--color-primary);
}

.bonsai-cash-envelopes-info-header {
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-default);
}

.bonsai-cash-envelopes-info-copy {
  font-size: 14px;
  color: var(--text-lighter);
}

.bonsai-cash-main-content {
  padding-top: 40px;
}
@media (min-width: 992px) {
  .bonsai-cash-main-content {
    padding-top: 95px;
    padding-left: 60px;
  }
}
.bonsai-cash-main-content .bonsai-payments-verification-pending {
  margin-top: 0;
  margin-bottom: 40px;
}

.bonsai-cash-envelope-controls {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border-content);
}

.bonsai-cash-envelope-create {
  position: relative;
  display: inline-block;
  padding: 20px 20px 20px 56px;
  font-weight: 600;
}

.bonsai-cash-envelope-create-icon {
  position: absolute;
  left: 30px;
  top: 25px;
  width: 16px;
  height: auto;
}
.bonsai-cash-envelope-create-icon path {
  fill: var(--color-primary);
}

.bonsai-cash-envelope-automations {
  display: inline-block;
  padding: 20px 30px 20px 20px;
  font-weight: 600;
}

.bonsai-cash-control-actions {
  margin-top: 40px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
  box-shadow: 0 2px 14px color-mix(in srgb, var(--bg-shadow) 2%, transparent);
}

.bonsai-cash-control-action {
  display: block;
  text-align: left;
  color: var(--text-default);
  border-top: 1px solid var(--border-content);
}
.bonsai-cash-control-action:first-child {
  border-top: none;
}

.bonsai-cash-control-action-in,
.bonsai-cash-control-action-in-button {
  font-weight: 600;
  font-size: 14px;
}
.bonsai-cash-control-action-in, .bonsai-cash-control-action-in:focus, .bonsai-cash-control-action-in:visited,
.bonsai-cash-control-action-in-button,
.bonsai-cash-control-action-in-button:focus,
.bonsai-cash-control-action-in-button:visited {
  color: var(--text-default);
}
.bonsai-cash-control-action-in path, .bonsai-cash-control-action-in:focus path, .bonsai-cash-control-action-in:visited path,
.bonsai-cash-control-action-in-button path,
.bonsai-cash-control-action-in-button:focus path,
.bonsai-cash-control-action-in-button:visited path {
  fill: var(--text-default);
}
.bonsai-cash-control-action-in:hover, .bonsai-cash-control-action-in:active,
.bonsai-cash-control-action-in-button:hover,
.bonsai-cash-control-action-in-button:active {
  color: var(--text-default);
  background: var(--bg-grey-fc);
}
.bonsai-cash-control-action-in:hover path, .bonsai-cash-control-action-in:active path,
.bonsai-cash-control-action-in-button:hover path,
.bonsai-cash-control-action-in-button:active path {
  fill: var(--text-default);
}

.bonsai-cash-control-action-in {
  position: relative;
  display: block;
  padding: 15px 15px 16px 50px;
}

.bonsai-cash-control-action-in-button {
  text-align: left;
  background-color: transparent;
  width: 100%;
  border: 0px;
  padding-left: 0px;
}

.bonsai-cash-control-action-icon {
  position: absolute;
  left: 18px;
  top: 10px;
  font-size: 22px;
}
.bonsai-cash-control-action-icon.icon-bank-account {
  width: 17px;
  height: auto;
  top: 18px;
}
.bonsai-cash-control-action-icon.icon-invoices {
  width: 15px;
  height: auto;
  top: 16px;
}
.bonsai-cash-control-action-icon.icon-feedback {
  width: 15px;
  height: auto;
  top: 11px;
}

.bonsai-cash-control-action-caret {
  position: absolute;
  right: 20px;
  top: 17px;
  font-size: 14px;
  color: var(--text-lighter);
}
.bonsai-cash-control-action-caret.active {
  top: 15px;
  transform: rotate(180deg);
}

.bonsai-cash-transaction-filters {
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .bonsai-cash-transaction-filters {
    margin-bottom: 30px;
  }
}

.bonsai-cash-income-link {
  position: relative;
  display: inline-block;
  padding-top: 1px;
}
.bonsai-cash-income-link, .bonsai-cash-income-link:focus, .bonsai-cash-income-link:visited {
  color: var(--text-muted);
}
.bonsai-cash-income-link:hover, .bonsai-cash-income-link:active {
  color: var(--text-muted);
}

.bonsai-cash-transaction-filter-select {
  z-index: 10;
}
.bonsai-cash-transaction-filter-select .Select__control {
  cursor: pointer;
  border: 0 !important;
  background: none;
  box-shadow: none !important;
}
.bonsai-cash-transaction-filter-select .Select__placeholder {
  font-size: 14px;
  right: 24px;
  cursor: pointer;
  color: var(--text-muted) !important;
}
.bonsai-cash-transaction-filter-select .Select__placeholder:hover {
  color: var(--text-muted) !important;
}
.bonsai-cash-transaction-filter-select .Select__single-value {
  position: relative;
  top: 0;
  right: 0;
  max-width: 100%;
  margin-right: 16px;
  transform: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-lighter) !important;
}
.bonsai-cash-transaction-filter-select .Select__single-value:hover {
  color: var(--text-lighter) !important;
}
.bonsai-cash-transaction-filter-select .Select__menu {
  right: 0;
  left: auto;
  min-width: 150px;
  border-color: color-mix(in srgb, var(--black) 10%, transparent);
}
.bonsai-cash-transaction-filter-select .Select__menu-list {
  max-height: 360px;
}
.bonsai-cash-transaction-filter-select .Select__indicators {
  display: none;
}

.bonsai-cash-income-link-icon {
  position: absolute;
  top: 9px;
  right: 0;
  font-size: 17px;
  cursor: pointer;
}

.bonsai-cash-transaction-search-wrapper {
  position: relative;
}

.bonsai-cash-transaction-search-input {
  font-weight: 600;
}
.bonsai-cash-transaction-search-input::placeholder {
  color: var(--text-lighter) !important;
}

.bonsai-cash-automation-link-icon {
  position: absolute;
  left: 15px;
  top: 8px;
  width: 15px;
  height: auto;
}

.bonsai-balance-transaction-statement-download-btn {
  margin-left: auto;
  padding-left: 34px;
  white-space: nowrap;
}
.bonsai-balance-transaction-statement-download-btn svg path {
  stroke: var(--text-muted);
}
.bonsai-balance-transaction-statement-download-btn:hover svg path {
  stroke: var(--text-default);
}

.bonsai-cash-transaction-statement-download-btn {
  position: relative;
  line-height: 1.5;
  padding: 0 20px 0 32px;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  background: transparent;
  border-radius: 0;
  transition: all var(--transition-normal) ease;
  margin-right: 0px;
}
.bonsai-cash-transaction-statement-download-btn, .bonsai-cash-transaction-statement-download-btn:focus, .bonsai-cash-transaction-statement-download-btn:visited {
  color: var(--color-primary);
  border: none;
  box-shadow: none;
}
.bonsai-cash-transaction-statement-download-btn:hover, .bonsai-cash-transaction-statement-download-btn:active {
  color: color-mix(in srgb, var(--color-primary) 95%, var(--black));
  border: none;
  box-shadow: none;
}

.cash-transaction-modal-in {
  padding: 30px 40px 40px;
  text-align: center;
}

.cash-transaction-modal-icon-section {
  padding-top: 60px;
}

.cash-transaction-modal-pending-icon {
  position: absolute;
  right: 2px;
  bottom: 2px;
}

.cash-transaction-modal-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin: auto;
  text-align: center;
  background: var(--bg-content);
  border-radius: 50%;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--bg-shadow) 6%, transparent);
}
.cash-transaction-modal-icon.transfer {
  border: 1px solid var(--text-info-dark);
}
.cash-transaction-modal-icon.credit {
  border: 1px solid var(--color-primary);
}
.cash-transaction-modal-icon.debit {
  border: 1px solid var(--text-lighter);
}

.cash-transaction-modal-swap-icon {
  margin-top: 1px;
  width: 45px;
  height: auto;
}

.cash-transaction-modal-up-icon {
  margin-top: 1px;
  width: 30px;
  height: auto;
}

.cash-transaction-modal-down-icon {
  margin-top: 1px;
  width: 30px;
  height: auto;
}

.cash-transaction-modal-amount-section {
  margin-bottom: 30px;
}

.cash-transaction-modal-amount-label {
  margin-bottom: 2px;
  font-size: 14px;
  color: var(--text-muted-alt);
}

.cash-transaction-modal-amount-total {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-default);
}

.cash-transaction-modal-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-content);
}
.cash-transaction-modal-detail:last-child {
  border-bottom: 0;
}

.cash-transaction-modal-detail-label {
  color: var(--text-muted-alt);
}

.cash-transaction-modal-detail-value {
  color: var(--text-muted-alt);
}
.cash-transaction-modal-detail-value.currency {
  text-transform: uppercase;
}

.cash-transaction-modal-description.modal-default-notice-section {
  margin-top: 25px;
  font-size: 16px;
}

.invoice-template-form-section-break {
  padding-top: 40px;
  border-top: 1px solid var(--border-content);
}

.invoice-template-form-theme-options {
  display: flex;
  gap: 10px;
}
.invoice-template-form-theme-options.invoice-template-form-theme-options--project-billing {
  flex-wrap: wrap;
}

.invoice-template-form-theme-option {
  flex: 1;
  padding: 13px 15px 14px;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  user-select: none;
  border: 1px solid var(--border-content);
  border-radius: 6px;
}
.invoice-template-form-theme-option, .invoice-template-form-theme-option:focus, .invoice-template-form-theme-option:visited {
  color: var(--text-default);
}
.invoice-template-form-theme-option:hover, .invoice-template-form-theme-option:active {
  color: var(--text-default);
  border-color: var(--border-content-alt);
}
.invoice-template-form-theme-option.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.invoice-template-form-theme-option.invoice-template-form-theme-option--project-billing {
  flex-grow: 0;
  padding: 9px 12px 9px;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}

.invoice-template-form-client-layout-options {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 992px) {
  .invoice-template-form-client-layout-options {
    flex-direction: row;
    justify-content: stretch;
    align-items: center;
    gap: 20px;
  }
}

.invoice-template-form-client-layout-option {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding: 5px 5px 5px 15px;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid var(--border-content);
  transition: all 0.2s ease;
}
@media (min-width: 768px) {
  .invoice-template-form-client-layout-option {
    margin-bottom: 0;
  }
  .invoice-template-form-client-layout-option:hover {
    border-color: var(--border-content-alt);
  }
}
.invoice-template-form-client-layout-option.selected {
  border-color: var(--color-primary);
}

.invoice-template-form-client-layout-option-image {
  width: 72px;
  height: 40px;
  background: top center no-repeat;
  background-size: cover;
  border-radius: 2px;
}
.invoice-template-form-client-layout-option-image.full_view {
  background-image: url("payments/client-layout-full.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .invoice-template-form-client-layout-option-image.full_view {
    background-image: url("payments/client-layout-full@2x.png");
  }
}
.invoice-template-form-client-layout-option-image.simplified_view {
  background-image: url("payments/client-layout-simplified.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .invoice-template-form-client-layout-option-image.simplified_view {
    background-image: url("payments/client-layout-simplified@2x.png");
  }
}

.invoice-template-form-client-layout-option-label {
  padding-top: 2px;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-default);
  transition: all 0.2s ease;
}
.invoice-template-form-client-layout-option:hover .invoice-template-form-client-layout-option-label {
  color: var(--color-primary);
}
.invoice-template-form-client-layout-option.selected .invoice-template-form-client-layout-option-label {
  color: var(--color-primary);
}

.invoice-template-form-checkfields {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 20px;
}

.invoice-template-form-checkfield {
  width: 100%;
  margin: 0 0 30px 0;
}
@media (min-width: 1200px) {
  .invoice-template-form-checkfield {
    width: 48%;
    margin: 0 2% 30px 0;
  }
}

.invoice-template-form-checkbox-label {
  font-weight: 500;
  font-size: 16px;
}

.invoice-template-form-checkbox-sublabel {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.invoice-template-form-preview-wrapper {
  position: absolute;
  top: 60px;
  left: 50%;
  width: 800px;
  pointer-events: none;
  background-color: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--black) 5%, transparent);
  overflow: hidden;
  transform: transform(-50%, 0) scale(1);
  transform-origin: top center;
}

.invoice-template-form-preview-loading {
  max-width: 70%;
  margin: 60px auto;
  background-color: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--black) 5%, transparent);
}

.invoice-template-form-background-image {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 120px;
  max-width: 30%;
  bottom: 10px;
  border-radius: 4px;
  background: none center center no-repeat;
  background-size: cover;
}

.invoice-template-form-background-none {
  position: absolute;
  top: 13px;
  right: 10px;
  width: 120px;
  text-align: right;
}

.invoice-template-studio-top {
  position: relative;
  padding: 60px 20px 40px;
}
@media (min-width: 768px), print {
  .invoice-template-studio-top {
    padding: 70px 60px 40px;
  }
}

.invoice-template-studio-logo {
  position: absolute;
  top: 50px;
  right: 0;
  transform: scale(0.5);
}
@media (min-width: 768px), print {
  .invoice-template-studio-logo {
    top: 60px;
    right: 60px;
    transform: scale(1);
  }
}

.invoice-template-studio-title {
  margin-bottom: 20px;
  padding-right: 100px;
  font-size: 40px;
}
@media (min-width: 768px), print {
  .invoice-template-studio-title {
    margin-bottom: 50px;
    padding-right: 200px;
  }
}
.invoice-template-studio-title .invoice-title-input,
.invoice-template-studio-title .invoice-title-display {
  text-align: left;
  font-size: 20px;
  font-weight: 500;
}
@media (min-width: 768px), print {
  .invoice-template-studio-title .invoice-title-input,
  .invoice-template-studio-title .invoice-title-display {
    font-size: 26px;
  }
}

.invoice-template-studio-header-col {
  width: 100%;
}
@media (min-width: 768px), print {
  .invoice-template-studio-header-col {
    width: 33.3333%;
  }
}

@media (min-width: 768px) {
  .invoice-editor.frame-template .invoice-editor-dates-due-date-input-wrapper,
  .invoice-editor.frame-template .invoice-client-payment-invoice-content .invoice-editor-dates-due-date-input-wrapper {
    right: -8px;
  }
  .invoice-editor.frame-template .invoice-editor-dates-due-date-edit-link,
  .invoice-editor.frame-template .invoice-client-payment-invoice-content .invoice-editor-dates-due-date-edit-link {
    right: auto;
    left: -27px;
  }
}
.invoice-editor.frame-template .invoice-display-total-section,
.invoice-editor.frame-template .invoice-display-deposit-section,
.invoice-editor.frame-template .invoice-client-payment-invoice-content .invoice-display-total-section,
.invoice-editor.frame-template .invoice-client-payment-invoice-content .invoice-display-deposit-section {
  margin-top: 10px;
}

.invoice-template-frame-top {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 60px 20px 40px;
}
@media (min-width: 768px), print {
  .invoice-template-frame-top {
    flex-direction: row;
    gap: 0;
    align-items: center;
    padding: 70px 60px 40px;
  }
}

.invoice-template-frame-logo {
  position: relative;
}

.invoice-template-frame-top-fields {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  text-align: left;
}
@media (min-width: 768px), print {
  .invoice-template-frame-top-fields {
    text-align: right;
    align-items: flex-end;
  }
}

@media (min-width: 768px), print {
  .invoice-template-frame-title {
    padding-left: 40px;
  }
}
.invoice-template-frame-title .invoice-title-input,
.invoice-template-frame-title .invoice-title-display {
  min-height: 15px;
  padding: 0;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
}
@media (min-width: 768px), print {
  .invoice-template-frame-title .invoice-title-input,
  .invoice-template-frame-title .invoice-title-display {
    font-size: 16px;
    text-align: right;
  }
}

.invoice-template-frame-top-field {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}
@media (min-width: 768px), print {
  .invoice-template-frame-top-field {
    justify-content: flex-end;
    text-align: right;
  }
}

.invoice-template-frame-info {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: left;
  padding: 0 20px 20px;
}
@media (min-width: 768px), print {
  .invoice-template-frame-info {
    padding: 0 60px 20px;
  }
}
@media (min-width: 768px), print {
  .invoice-template-frame-info {
    flex-direction: row;
  }
}

.invoice-template-frame-header-col {
  width: 100%;
}
@media (min-width: 768px), print {
  .invoice-template-frame-header-col {
    width: 33.3333%;
  }
}

.invoice-template-frame-header-col-dates {
  text-align: left;
}
.invoice-template-frame-header-col-dates .ghost-form-control, .invoice-template-frame-header-col-dates .ghost-form-display {
  margin-left: calc(var(--ghost-input-side-width) * -1);
}
@media (min-width: 768px), print {
  .invoice-template-frame-header-col-dates {
    text-align: right;
  }
  .invoice-template-frame-header-col-dates .ghost-form-control, .invoice-template-frame-header-col-dates .ghost-form-display {
    text-align: right;
    margin-left: auto;
    margin-right: calc(var(--ghost-input-side-width) * -1);
  }
}

.invoice-editor-page {
  padding-top: 40px;
  padding-bottom: 120px;
}
.invoice-editor-page.with-side-panel {
  min-height: 100vh;
}
@media (min-width: 1200px) {
  .invoice-editor-page.with-side-panel {
    padding-right: var(--document-editor-width);
  }
}

.invoice-editor-wrapper {
  max-width: var(--invoice-wrapper-width);
  width: 100%;
  margin: auto;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 768px) {
  .invoice-editor-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.invoice-editor-wrapper .invoice-top-action-button.disabled {
  pointer-events: all;
}
.invoice-editor-wrapper a:not(.btn) {
  font-family: var(--font-sans-serif);
  color: var(--color-primary);
}

.invoice-editor-wrapper label,
.invoice-client-wrapper label {
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: 0.075em;
  color: var(--text-lighter);
  text-transform: uppercase;
}

.invoice-label-tooltip-icon {
  margin-left: 1px;
  font-size: 12px;
  color: var(--text-muted-alt);
}

@media print {
  .invoice-top-actions {
    display: none;
  }
}

.invoice-refunding-status {
  max-width: var(--invoice-wrapper-width);
  width: 100%;
  margin: 10px auto 10px;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 480px) {
  .invoice-refunding-status {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.invoice-refunding-status-content {
  position: relative;
  padding: 60px 20px;
  background: var(--bg-content);
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--bg-shadow) 5%, transparent);
}
@media (min-width: 480px) {
  .invoice-refunding-status-content {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 768px) {
  .invoice-refunding-status-content {
    padding-left: 60px;
    padding-right: 60px;
    border: 1px solid var(--border-content);
  }
}

.invoice-refunding-status-header {
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-default);
}

.invoice-refund-processing-status {
  position: relative;
  max-width: var(--invoice-wrapper-width);
  width: 100%;
  margin: 0 auto 20px;
  padding: 30px;
  color: var(--text-muted-alt);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 4px;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--bg-shadow) 2%, transparent);
}

.invoice-refund-processing-header {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-default);
}

.online-payments-activated-container {
  position: relative;
  padding: 20px 20px 20px;
  margin-bottom: 20px;
  font-size: 13px;
  background-color: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 4px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 2%, transparent);
}

.online-payments-activated-header {
  font-size: 16px;
}

.online-payments-activated-container a.online-payments-activated-learn-more {
  text-decoration: underline;
}
.online-payments-activated-container a.online-payments-activated-learn-more:focus, .online-payments-activated-container a.online-payments-activated-learn-more:visited, .online-payments-activated-container a.online-payments-activated-learn-more:hover, .online-payments-activated-container a.online-payments-activated-learn-more:active {
  color: var(--text-default);
}

.online-payments-activated-separator {
  border-top: 1px solid var(--border-content);
  margin-bottom: 10px;
}

.online-payments-activated-cta {
  font-size: 12px;
  font-weight: 500;
  text-align: right;
  margin-top: 3px;
}

.invoice-editor {
  position: relative;
  z-index: 1;
  padding-bottom: 80px;
  font-size: 14px;
  color: var(--text-default);
  background-color: var(--bg-content);
  border: 1px solid var(--border-content);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--black) 2%, transparent);
  border-radius: 4px;
}
@media print {
  .invoice-editor {
    border: none;
  }
}
.invoice-editor .ghost-form-control,
.invoice-editor .ghost-form-display {
  font-size: 14px;
}
.invoice-editor .SingleDatePicker .DateInput_input,
.invoice-editor .DateRangePicker .DateInput_input {
  font-size: 14px;
}
.invoice-editor .form-attachment-filename,
.invoice-editor .invoice-bottom-section .form-attachment-uploader-placeholder {
  font-weight: 600;
  font-size: 14px;
  font-family: var(--font-sans-serif);
}
.invoice-editor .SingleDatePicker .DateInput_input:hover,
.invoice-editor .invoice-editor-dates-due-date-input-wrapper:hover {
  background: var(--bg-input-hover);
}

.invoice-editor-saving-bg {
  position: absolute;
  display: none;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
}

.invoice-editor-stamp {
  position: absolute;
  z-index: 10;
  right: 4%;
  top: 15px;
  width: 80px;
  max-width: 40%;
  height: auto;
}
@media (min-width: 768px) {
  .invoice-editor-stamp {
    right: 5%;
    width: 120px;
  }
}
.invoice-editor-stamp.classic-stamp {
  top: -20px;
  right: -20px;
}

.invoice-top-action-bar {
  display: none;
}
.invoice-top-action-bar.showing {
  display: block;
}
@media print {
  .invoice-top-action-bar.showing {
    display: none;
  }
}

.invoice-top-copy {
  position: absolute;
  display: none;
  left: 50%;
  margin-left: -140px;
  width: 280px;
  font-size: 16px;
  text-align: center;
  padding: 0;
  top: 50%;
  font-weight: 500;
  color: var(--text-lighter);
  transform: translateY(-54%);
}
@media (min-width: 1300px) {
  .invoice-top-copy {
    display: inline-block;
    opacity: 0;
    transition: all 0s ease;
  }
  .invoice-top-copy.showing {
    opacity: 1;
    transition: all var(--transition-normal) ease;
  }
}

.invoice-top-action-button {
  position: relative;
  display: none;
  float: right;
  margin-top: 30px;
  margin-bottom: 30px;
}
@media (min-width: 768px) {
  .invoice-top-action-button {
    display: inline-block;
  }
  .invoice-top-action-button.-second-btn {
    margin-right: 15px;
  }
}
.scrolled-navigation .invoice-top-action-button {
  margin-top: 11px;
  margin-bottom: 11px;
}

.invoice-top-action-button-icon {
  margin-right: 7px;
  font-size: 0.9em;
}

.invoice-top-action-link-icon {
  position: relative;
  display: inline-block;
  top: 1px;
  width: 13px;
  height: auto;
  margin-left: 10px;
  opacity: 0;
  transition: opacity var(--transition-fast) ease;
}
.invoice-top-action-link-icon path {
  fill: currentColor;
}
a:hover > .invoice-top-action-link-icon {
  opacity: 0.8;
}

.invoice-top-stripe-notice {
  position: relative;
  display: block;
  width: 100%;
  padding: 20px 0;
  background: var(--bg-info);
  border-bottom: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--bg-info) 99%, var(--black)) 0%, color-mix(in srgb, var(--bg-info) 99%, transparent) 100%);
}

@media (min-width: 768px) {
  .invoice-top-stripe-notice-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
}

.invoice-top-stripe-notice-content {
  margin-bottom: 20px;
  cursor: default;
}
@media (min-width: 768px) {
  .invoice-top-stripe-notice-content {
    flex: 1;
    margin-bottom: 0;
  }
}

.invoice-top-stripe-notice-header {
  position: relative;
  font-size: 14px;
  font-weight: 500;
}

.invoice-top-status {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 40px;
  padding: 12px 20px;
  text-align: center;
  font-weight: 500;
  font-size: 12px;
  background: var(--bg-content);
  border-bottom: 1px solid var(--border-content);
}
.invoice-top-status.archived {
  background: var(--color-danger);
}
@media (min-width: 480px) {
  .invoice-top-status {
    font-size: 14px;
  }
}
@media (min-width: 768px) {
  .invoice-top-status {
    padding: 12px 0;
  }
}

.invoice-top-status-left {
  position: relative;
  display: flex;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  padding-right: 15px;
  font-weight: 500;
  color: var(--text-default);
  user-select: none;
}
@media (min-width: 480px) {
  .invoice-top-status-left {
    padding-right: 0;
  }
}
.invoice-top-status-left.drafted {
  color: var(--text-muted);
}

.invoice-top-amt-due {
  position: relative;
  padding-left: 15px;
  cursor: default;
  color: var(--text-default);
  white-space: nowrap;
}
.invoice-top-amt-due.overdue {
  color: var(--color-danger);
}
.invoice-top-amt-due.draft-notice {
  color: var(--text-lighter);
}

.invoice-top-date {
  position: relative;
  padding-left: 15px;
  cursor: default;
  color: var(--text-default);
  white-space: nowrap;
}

.invoice-top-status-send-url {
  display: inline-block;
  padding: 15px 0 11px;
  text-align: center;
  font-weight: 600;
  border-bottom: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  font-size: 14px;
}
.invoice-top-status-send-url, .invoice-top-status-send-url:hover, .invoice-top-status-send-url:visited, .invoice-top-status-send-url:focus {
  color: color-mix(in srgb, var(--black) 50%, transparent);
}

.invoice-top-days-late {
  position: relative;
  display: inline-block;
  margin-left: 15px;
  font-weight: 500;
}

.invoice-top-status-paid {
  position: relative;
  display: inline-block;
  font-weight: 500;
  color: var(--text-default);
  user-select: none;
}
@media (min-width: 480px) {
  .invoice-top-status-paid {
    float: left;
  }
}

.invoice-top-status-pending {
  position: relative;
  display: none;
  padding-left: 15px;
  font-weight: 500;
  user-select: none;
}
@media (min-width: 480px) {
  .invoice-top-status-pending {
    display: block;
  }
}

.invoice-top-status-archived {
  position: relative;
  display: inline-block;
  font-weight: 600;
  color: var(--color-primary-contrast);
  user-select: none;
}

.invoice-top-logo-wrapper {
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
  text-align: center;
}

.invoice-editor-top {
  position: relative;
  padding: 60px 20px 48px;
}
@media (min-width: 768px) {
  .invoice-editor-top {
    padding-left: 60px;
    padding-right: 60px;
  }
}
.invoice-editor-top.without-logo {
  padding: 60px 40px 40px;
}
.invoice-editor-top.without-title {
  padding: 60px 20px 40px;
}
.invoice-editor-top.without-logo.without-title {
  height: 48px;
  padding: 0;
}
.invoice-editor-top .image-uploader-top-logo-img {
  background-size: contain;
}
.invoice-editor-top.with-background-image {
  padding-top: 200px;
}
.invoice-editor-top.with-background-image .invoice-top-logo-wrapper.logo-small_square {
  margin-top: -92px;
}
.invoice-editor-top.with-background-image .invoice-top-logo-wrapper.logo-big_square {
  margin-top: -105px;
}
.invoice-editor-top.with-background-image .invoice-top-logo-wrapper.logo-small_rectangle {
  margin-top: -90px;
}
.invoice-editor-top.with-background-image .invoice-top-logo-wrapper.logo-big_rectangle {
  margin-top: -100px;
}
.invoice-editor-top.with-background-image .invoice-top-logo-img-display {
  background: var(--white) center center no-repeat;
  border: 2px solid var(--white);
  background-size: contain;
  box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 0 0px 0px 1px color-mix(in srgb, var(--black) 7%, transparent);
  border-radius: 4px;
}
.invoice-editor-top.with-background-image.without-logo {
  padding-top: 190px;
}

.invoice-editor-cover-header-bg.with-image {
  height: 150px;
  border-radius: 4px 4px 0 0;
}
.invoice-editor-cover-header-bg .header-background-image-delete,
.invoice-editor-cover-header-bg .header-background-image-add,
.invoice-editor-cover-header-bg .header-background-image-loading {
  left: 10px;
  right: auto;
}
.invoice-editor-cover-header-bg .header-background-image-edit {
  left: 46px;
  right: auto;
}

.invoice-relative-header-bg {
  position: relative;
  height: auto;
}
.invoice-relative-header-bg.with-image {
  height: auto;
  padding-bottom: 17.5%;
}

.invoice-title-form-group {
  text-align: center;
}

.invoice-title-input,
.invoice-title-display {
  width: 100%;
  padding: 15px 0 10px;
  min-height: 32px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  text-align: inherit;
}

.invoice-title-input {
  border-radius: 6px;
}
.invoice-title-input:hover {
  background-color: var(--bg-input-hover);
}
.invoice-editor.classic-template .invoice-title-input {
  justify-content: center;
}
.invoice-editor.studio-template .invoice-title-input {
  min-height: 62px;
}

.invoice-title-project {
  text-align: center;
}

.invoice-title-project-link {
  font-size: 14px;
  font-weight: 500;
}
.invoice-title-project-link, .invoice-title-project-link:focus, .invoice-title-project-link:visited {
  color: var(--text-muted-alt);
}
.invoice-title-project-link:hover, .invoice-title-project-link:active {
  color: var(--text-muted);
}
.invoice-title-project-link.blank {
  pointer-events: none;
  color: var(--text-muted);
}

.invoice-title-project-link-icon {
  position: relative;
  top: 1px;
  margin-right: 5px;
  margin-left: -5px;
  font-size: 1.1em;
  opacity: 0.4;
}

.invoice-po-number-group {
  position: absolute;
  top: 15px;
  left: 17px;
  max-width: 200px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted-alt);
  word-break: break-word;
}

.invoice-po-number-group-label {
  margin-right: 5px;
  color: var(--text-lighter);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  vertical-align: middle;
}

.invoice-number-form-group {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 30px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 3px;
}
.invoice-number-form-group .invoice-number-label {
  position: absolute;
  left: 9px;
  top: 6px;
  margin: 0;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-muted);
}

.invoice-number-content-editable {
  min-width: 28px;
  min-height: 20px;
}

.invoice-number-header-input {
  display: inline-flex;
  align-items: center;
  right: 0;
  max-width: 190px;
  min-height: 28px;
  padding-left: 80px;
  padding-right: 8px;
  text-align: right;
  font-weight: 600;
}
.invoice-number-header-input.invoice-number-header-input--classic {
  min-width: 122px;
}
.invoice-number-header-input.invoice-number-header-input--classic::before {
  display: none;
}

.invoice-po-number-input {
  position: absolute;
  top: 10px;
  left: 10px;
}

.invoice-editor-people {
  padding: 50px 20px 0px;
  border-top: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .invoice-editor-people {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media print {
  .invoice-editor-people .col-sm-6 {
    display: inline-block;
    float: left;
    width: 50%;
    margin-top: 0;
  }
}

.invoice-person-input {
  width: 100%;
  color: var(--text-default);
}
.invoice-person-input.invoice-person-autofilled-item {
  margin-bottom: 3px;
}

.invoice-person-email-display {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted-alt);
  word-break: break-word;
}

textarea.invoice-person-address-input,
.invoice-person-address-input {
  width: 100%;
  min-height: 34px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  resize: none;
}
textarea.invoice-person-address-input:focus,
.invoice-person-address-input:focus {
  resize: none;
}

.invoice-person-address-link,
.invoice-editor-item-header a {
  cursor: pointer;
}
.invoice-person-address-link:hover,
.invoice-editor-item-header a:hover {
  background: var(--bg-input-hover);
}
.invoice-person-address-link:focus,
.invoice-editor-item-header a:focus {
  background: var(--bg-input-hover);
  box-shadow: none;
}

.invoice-person-address-text {
  white-space: pre-wrap;
}

.invoice-person-add-address {
  color: var(--color-primary);
  text-align: left;
  font-weight: 600;
}

.invoice-person-company-input {
  width: 100%;
  font-weight: 400;
  color: var(--text-muted);
}

.invoice-person-company-display {
  width: 100%;
  padding: 0 7px 4px 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-default);
  word-break: break-word;
  word-wrap: break-word;
}

.invoice-person-address-display {
  width: 100%;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  word-break: break-word;
  white-space: pre-line;
}

.invoice-person-autofilled-item {
  min-height: 30px;
  line-height: 1.41;
  padding: 4px 0 4px;
}

.invoice-editor-new-client-link {
  position: relative;
  display: block;
  margin-top: 5px;
  padding: 30px 20px 30px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  border: 1px dashed;
  border-radius: 5px;
}

.invoice-person-email-input {
  width: 100%;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-muted);
}
.invoice-person-email-input + .react-autocomplete-menu {
  margin-left: var(--ghost-input-side-width);
}
.invoice-person-email-input.has-error {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 70%, transparent);
}

.invoice-person-email-add-block {
  position: relative;
  margin-top: 5px;
  margin-bottom: 10px;
}

.invoice-person-email-add {
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

.invoice-person-email-cc {
  position: relative;
  display: none;
}
.invoice-person-email-cc.showing {
  display: block;
  margin-bottom: 10px;
}

.invoice-person-email-cc-delete {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  right: 10px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
@media (min-width: 768px) {
  .invoice-person-email-cc-delete {
    right: -25px;
    opacity: 0;
    transition: all var(--transition-normal) ease;
    transform: translateX(-15px);
    transform: translate3d(-15px, 0, 0);
  }
  .invoice-person-email-cc:hover .invoice-person-email-cc-delete {
    opacity: 1;
    transform: translateX(0);
  }
}
.invoice-person-email-cc-delete svg {
  width: 12px;
  height: 12px;
}
.invoice-person-email-cc-delete path {
  fill: var(--color-danger);
}
.invoice-person-email-cc-delete:hover path {
  fill: color-mix(in srgb, var(--color-danger) 95%, var(--black));
}

.invoice-editor-dates {
  padding: 20px 20px 52px;
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .invoice-editor-dates {
    padding-left: 60px;
    padding-right: 60px;
  }
}

.invoice-date-input.ghost-form-control, .invoice-date-input.ghost-form-display {
  position: relative;
  z-index: 3;
  margin-left: -8px;
  padding: 0;
  font-size: 14px;
}
@media (min-width: 768px) {
  .invoice-date-input.ghost-form-control.ghost-form-pull-right, .invoice-date-input.ghost-form-pull-right.ghost-form-display {
    margin-left: 8px;
  }
  .invoice-date-input.ghost-form-control.ghost-form-pull-right .SingleDatePicker .DateInput_input, .invoice-date-input.ghost-form-pull-right.ghost-form-display .SingleDatePicker .DateInput_input {
    text-align: right;
  }
}
.invoice-date-input.ghost-form-control .SingleDatePickerInput, .invoice-date-input.ghost-form-display .SingleDatePickerInput {
  border: none;
}
.invoice-date-input.ghost-form-control .SingleDatePicker .DateInput_input, .invoice-date-input.ghost-form-display .SingleDatePicker .DateInput_input {
  height: 30px;
  padding: 8px 8px 6px;
  text-align: left;
  border-radius: 4px;
}
.invoice-date-input.ghost-form-control .SingleDatePicker .DateInput__display-text, .invoice-date-input.ghost-form-display .SingleDatePicker .DateInput__display-text {
  text-align: left;
}
.invoice-date-input.ghost-form-control .DateInput_input.DateInput_input__focused, .invoice-date-input.ghost-form-display .DateInput_input.DateInput_input__focused {
  background: color-mix(in srgb, var(--black) 3%, transparent);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.invoice-auto-pay-alert {
  padding: 20px 20px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent-brown);
  text-align: center;
  border-bottom: 1px solid var(--border-content);
  background-color: var(--bg-yellow);
}

.invoice-editor-amounts {
  padding: 0 20px 80px;
}
@media (min-width: 768px) {
  .invoice-editor-amounts {
    padding-left: 60px;
    padding-right: 60px;
  }
}

.invoice-editor-item-group {
  margin: 0;
}

.invoice-editor-item-deposit-uneditable {
  margin: 60px 20px 0;
  padding: 20px;
  text-align: center;
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}
@media (min-width: 768px) {
  .invoice-editor-item-deposit-uneditable {
    margin-left: 60px;
    margin-right: 60px;
    padding: 30px;
  }
}
.invoice-editor-item-deposit-uneditable a {
  font-family: inherit;
}

.timesheet-invoice-item-name {
  cursor: pointer;
}

.invoice-editor-line-items {
  padding: 40px 0 25px;
  overflow-x: scroll;
}
@media (min-width: 768px) {
  .invoice-editor-line-items {
    overflow-x: visible;
  }
}
.invoice-editor-line-items .ghost-input-wrapper.has-error .ghost-form-control, .invoice-editor-line-items .ghost-input-wrapper.has-error .ghost-form-display {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 70%, transparent);
}
.invoice-editor-line-items .with-hidden-rates .items-list-item-rate,
.invoice-editor-line-items .with-hidden-rates .items-list-item-amount {
  visibility: hidden;
  display: none;
}

.invoice-editor-line-item-labels {
  padding: 0 20px 0 20px;
}
@media (min-width: 768px) {
  .invoice-editor-line-item-labels {
    padding: 0 60px 0 60px;
  }
}
.invoice-editor-line-item-labels label {
  margin-bottom: 0;
  color: var(--text-lighter);
}

.invoice-editor-item-error {
  position: absolute;
  top: 12px;
  left: -12px;
  color: var(--color-danger);
  height: 23px;
  width: 23px;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--color-danger);
  border-radius: 50%;
}
.invoice-editor-item-error svg {
  width: 10px;
  height: auto;
}

.invoice-editor-line-item {
  position: relative;
  padding: 8px 20px;
  font-size: 14px;
}
@media (min-width: 768px) {
  .invoice-editor-line-item {
    padding: 8px 60px;
  }
}
.invoice-editor-line-item.focused-inputs .ghost-form-control, .invoice-editor-line-item.focused-inputs .ghost-form-display {
  background: color-mix(in srgb, var(--black) 3%, transparent);
  border: none;
  box-shadow: inset 0 0 1px color-mix(in srgb, var(--black) 10%, transparent);
}
.invoice-editor-line-item .ghost-input-toggle,
.invoice-editor-line-item .ghost-form-control,
.invoice-editor-line-item .ghost-form-display {
  font-weight: 400;
}
.invoice-editor-line-item .ghost-form-control, .invoice-editor-line-item .ghost-form-display {
  display: block;
  width: 100%;
}
.invoice-editor-line-item .ghost-form-control:focus, .invoice-editor-line-item .ghost-form-display:focus {
  border: none;
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.invoice-editor-line-item .ghost-form-display {
  box-shadow: none;
}
.invoice-editor-line-item .line-item-unit-type {
  font-weight: 400;
}

.invoice-editor-line-item-columns {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.invoice-editor-line-item .item-remove,
.invoice-editor-discount-section .item-remove,
.invoice-editor-expense-item .item-remove {
  width: 21px;
  height: auto;
  padding: 5px;
  opacity: 1;
  transition: all var(--transition-fast) ease;
  backface-visibility: hidden;
  text-align: right;
}
.invoice-editor-line-item .item-remove path,
.invoice-editor-discount-section .item-remove path,
.invoice-editor-expense-item .item-remove path {
  fill: var(--color-danger);
}
@media (min-width: 768px) {
  .invoice-editor-line-item .item-remove,
  .invoice-editor-discount-section .item-remove,
  .invoice-editor-expense-item .item-remove {
    opacity: 0;
    transform: translateX(-15px);
    transform: translate3d(-15px, 0, 0);
  }
}
.invoice-editor-line-item:hover .item-remove,
.invoice-editor-discount-section:hover .item-remove,
.invoice-editor-expense-item:hover .item-remove {
  opacity: 1;
  transform: translateX(0);
  transform: translate3d(0, 0, 0);
}

.invoice-editor-line-item-remove {
  display: inline-block;
  font-weight: 500;
  font-size: 12px;
  color: var(--color-danger);
}
@media (min-width: 768px) {
  .invoice-editor-line-item-remove {
    display: none;
  }
}

.invoice-editor-line-item-drag-handler {
  position: absolute;
  display: none;
  left: 10px;
  height: 30px;
  font-size: 19px;
  top: 7px;
  padding: 4px 15px;
  cursor: pointer;
  opacity: 0.5;
  transition: all var(--transition-normal) ease;
}
@media (min-width: 768px) {
  .invoice-editor-line-item:hover .invoice-editor-line-item-drag-handler, .invoice-editor-line-item.focused-inputs .invoice-editor-line-item-drag-handler {
    display: block;
  }
}

.has-error .ghost-form-control, .has-error .ghost-form-display {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 40%, transparent);
}

.invoice-editor-item-total {
  position: relative;
  z-index: 1;
  min-height: 30px;
  padding: 7px 0 4px;
  line-height: 1.41;
  font-size: 14px;
  font-weight: 400;
  cursor: default;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invoice-editor-item-total.placeholder {
  color: var(--text-lightest);
}

.invoice-editor-item-total-val {
  min-height: 30px;
  padding: 5px 0 4px;
  font-size: 14px;
  font-weight: 400;
  cursor: default;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-editor-subtotal-section {
  position: relative;
  padding: 35px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.invoice-editor-subtotal-label {
  position: relative;
  display: inline-block;
  float: left;
  width: 50%;
}

.invoice-editor-subtotal-value {
  position: relative;
  display: inline-block;
  float: left;
  width: 50%;
  text-align: right;
}

.invoice-editor-taxes-section {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin-top: 10px;
  margin-bottom: -10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
}
.invoice-editor-taxes-section .ghost-form-inline-input.with-trailing-percent:after {
  top: 5px;
  font-weight: 500;
}
.invoice-editor-taxes-section.invoice-display {
  margin-top: 10px;
  margin-bottom: 0px;
}

.invoice-editor-taxes-label {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}
.invoice-editor-taxes-label .ghost-form-inline-input {
  top: -4px;
}

.invoice-editor-taxes-value {
  position: relative;
  flex: 1;
  text-align: right;
}

input.invoice-editor-tax-percent.ghost-form-control, input.invoice-editor-tax-percent.ghost-form-display {
  width: 60px;
}

input.invoice-editor-tax-abbreviation {
  min-width: 40px;
  max-width: 60px;
}

.invoice-editor-tax-percent-icon {
  position: absolute;
  right: 0;
}

.invoice-timesheet-link-list-item {
  display: flex;
  flex-wrap: nowrap;
}

.invoice-timesheet-link-list-item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invoice-timesheet-link-list-item-link {
  margin-left: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.invoice-editor-discount-toggle-link {
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

.invoice-editor-discount-section {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-default);
}
.invoice-editor-discount-section.invoice-display {
  margin-top: 10px;
}

.invoice-editor-processing-fee-section {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0 3px;
  font-size: 14px;
  font-weight: 400;
  color: var(--black);
}

.invoice-editor-discount-label,
.invoice-editor-processing-fee-label {
  position: relative;
  flex: 1;
}

.invoice-editor-discount-label .ghost-form-inline-input,
.invoice-editor-discount-label .ghost-form-inline-text {
  top: 1px;
}

.invoice-editor-discount-value,
.invoice-editor-processing-fee-value {
  position: relative;
  flex: 1;
  text-align: right;
  padding-left: 0;
  padding-right: 0;
}

.invoice-editor-item-inline-remove {
  position: absolute;
  display: inline-block;
  width: 17px;
  height: 17px;
  right: -23px;
  top: 2px;
  padding: 4px;
  cursor: pointer;
  opacity: 0.5;
}
.invoice-editor-item-inline-remove path {
  fill: var(--color-danger);
}
.invoice-editor-item-inline-remove:hover {
  opacity: 1;
}

.invoice-editor-add-expense {
  padding: 10px 0 0;
}

.invoice-editor-add-expense-link {
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

.invoice-editor-expenses-section {
  padding-top: 26px;
  padding-bottom: 10px;
  margin-top: 15px;
  border-top: 1px solid var(--border-content);
}
.invoice-editor-expenses-section.display-section {
  padding-top: 22px;
  padding-bottom: 5px;
  margin-top: 10px;
}

.invoice-editor-expense-item {
  position: relative;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--black);
}
.invoice-editor-expense-item.invoice-display {
  margin-top: 11px;
}

.invoice-editor-expenses-label {
  position: relative;
  display: flex;
  float: left;
  width: 78.5%;
  cursor: pointer;
  padding: 0;
}

.invoice-editor-expenses-label,
.invoice-editor-discount-edit-link {
  cursor: pointer;
}
.invoice-editor-expenses-label a:not(.btn),
.invoice-editor-expenses-label a:not(.btn):focus,
.invoice-editor-expenses-label a:not(.btn):visited,
.invoice-editor-discount-edit-link a:not(.btn),
.invoice-editor-discount-edit-link a:not(.btn):focus,
.invoice-editor-discount-edit-link a:not(.btn):visited {
  color: var(--black);
  font-family: inherit;
}
.invoice-editor-expenses-label a:not(.btn):hover,
.invoice-editor-expenses-label a:not(.btn):active,
.invoice-editor-discount-edit-link a:not(.btn):hover,
.invoice-editor-discount-edit-link a:not(.btn):active {
  color: var(--black);
  text-decoration: underline;
}

.invoice-editor-expenses-value {
  position: relative;
}
.invoice-editor-expense-item.display-item .invoice-editor-expenses-value {
  padding-right: 0;
}

.invoice-editor-expenses-value-text {
  font-weight: 400;
  text-align: right;
}

.invoice-editor-total-section {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  margin-top: 30px;
  padding: 30px 0 0;
  font-size: 14px;
  font-weight: 500;
  border-top: 1px solid var(--grey-e);
}

.invoice-editor-deposit-section {
  margin-top: 20px;
  font-size: 14px;
}

.invoice-editor-remaining-section {
  padding: 20px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.invoice-editor-total-label,
.invoice-editor-deposit-label,
.invoice-editor-remaining-label {
  position: relative;
  display: inline-block;
  float: left;
  width: 25%;
}

.invoice-editor-deposit-label {
  position: relative;
  display: inline-block;
  float: left;
  width: 25%;
  font-weight: normal;
}

.invoice-editor-total-value,
.invoice-editor-deposit-value,
.invoice-editor-remaining-value {
  position: relative;
  display: flex;
  flex: 1;
  text-align: right;
  justify-content: flex-end;
  align-items: center;
}

.invoice-editor-deposit-label,
.invoice-editor-deposit-value {
  font-weight: normal;
}

.invoice-currency-select-wrapper {
  display: inline-block;
  width: 60px;
  margin-right: -18px;
  cursor: pointer;
  vertical-align: middle;
}

.invoice-currency-select {
  z-index: 2;
}
.invoice-currency-select .Select__single-value {
  width: 42px !important;
  font-size: 14px;
  text-align: right;
}

.invoice-editor-total-in-btc {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-lightest);
}

.invoice-bottom-section {
  position: relative;
  padding: 0px 20px 40px;
  color: var(--black);
}
.invoice-bottom-section .dropdown-contained .Select__value-container {
  font-size: 16px;
}
.invoice-bottom-section .dropdown-contained .Select__single-value {
  max-width: 100% !important;
}
@media print {
  .invoice-bottom-section {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}
@media (min-width: 768px) {
  .invoice-bottom-section {
    padding-left: 60px;
    padding-right: 60px;
  }
}
.invoice-bottom-section.invoice-tax-id {
  padding-bottom: 40px;
}
.invoice-bottom-section.with-timesheet {
  margin-top: -20px;
  padding-top: 40px;
  padding-bottom: 60px;
  border-top: 1px solid var(--grey-e);
}
.invoice-bottom-section.invoice-notes .invoice-notes-input {
  font-weight: 400;
}
.invoice-bottom-section label {
  display: block;
}
.invoice-bottom-section .new-form-input {
  vertical-align: middle;
}
.invoice-bottom-section .form-attachment-uploader-placeholder {
  font-size: 14px;
}

.invoice-label-icon {
  margin-left: 7px;
  opacity: 0.7;
}

.invoice-label-icon-tooltip {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.invoice-payment-methods-label {
  margin-bottom: 10px;
}

.invoice-payment-methods-add-link {
  font-size: 14px;
  font-weight: 600;
}

.invoice-payment-methods-input {
  font-weight: 600;
}

.invoice-payment-methods-dropdown {
  position: relative;
  top: -1px;
  width: 92px;
  margin: 0 5px;
}
.invoice-payment-methods-dropdown .Select-value-label {
  color: var(--black) !important;
}

.invoice-payment-methods-pdf-payment-note {
  display: none;
}
@media print {
  .invoice-payment-methods-pdf-payment-note {
    display: initial;
  }
}

.invoice-payment-methods-offline-section {
  margin-top: 40px;
}

.invoice-payment-methods-offline-content {
  white-space: pre-wrap;
  word-break: break-word;
}

.invoice-late-payment-label {
  margin-bottom: 10px;
}

.invoice-late-fee-input-wrapper {
  top: -2px;
  margin-left: 3px;
  margin-right: 5px;
}

input.invoice-late-fee-input {
  font-weight: 600;
  height: 24px;
  width: 55px;
}

.invoice-notes textarea.ghost-textarea {
  min-height: 54px !important;
}

.invoice-notes-label {
  margin-bottom: 10px;
}

.invoice-tax-id-input-wrap {
  display: inline-block;
  min-width: 200px;
}

.invoice-attachments {
  position: relative;
}
.invoice-attachments .form-attachment-uploader-placeholder-icon {
  position: relative;
  height: auto;
  width: 15px;
  top: 1px;
  margin-right: 8px;
  margin-left: -5px;
}

.invoice-attachment {
  margin-bottom: 5px;
}

.invoice-finalized-attachment-item {
  position: relative;
  display: block;
}

.invoice-finalized-attachment {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  padding: 5px 5px 5px 0;
}

.invoice-finalized-attachment-icon {
  width: 18px;
  height: auto;
  margin-right: 10px;
}
.invoice-finalized-attachment-icon path {
  fill: var(--color-primary);
  fill: currentColor;
}

.invoice-contract-create-new {
  text-align: right;
  font-size: 14px;
  font-weight: 500;
}

.invoice-contract-create-new-no-previous {
  text-align: left;
  font-size: 14px;
  font-weight: 500;
}

.invoice-bottom-bank-account-info {
  padding: 20px;
  font-size: 14px;
  border: 1px solid var(--grey-e);
}

.invoice-bottom-actions {
  position: relative;
  padding: 20px 0 0;
  text-align: center;
}

.invoice-item-uneditable .ghost-form-control:hover, .invoice-item-uneditable .ghost-form-display:hover, .invoice-item-uneditable .ghost-form-control:focus, .invoice-item-uneditable .ghost-form-display:focus, .invoice-item-uneditable .ghost-form-control:active, .invoice-item-uneditable .ghost-form-display:active {
  background: none;
  border: none;
  box-shadow: none;
}

.invoice-editor-dates-due-date {
  position: relative;
}

.invoice-editor-dates-due-date-options-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
}

.invoice-editor-dates-due-date-options-wrapper {
  position: absolute;
  z-index: 10;
  width: auto;
  top: 70px;
  left: -8px;
  font-family: var(--font-sans-serif);
  background: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  box-sizing: border-box;
  border-radius: 3px;
}
@media (max-width: 584px) {
  .invoice-editor-dates-due-date-options-wrapper {
    padding: 0;
    margin: 0 -20px;
    right: 0;
    left: 0;
  }
}

.invoice-editor-dates-after-x-days-input {
  width: 36px;
  height: 30px;
  font-size: 14px;
  padding-left: 7px;
  margin-left: 7px;
  margin-right: 8px;
  background: var(--white);
  border: 1px solid var(--grey-c);
  border-radius: 3px;
}

.invoice-editor-dates-due-date-input-wrapper {
  position: relative;
  right: 8px;
  cursor: pointer;
}
.invoice-editor-dates-due-date-input-wrapper.active {
  background: color-mix(in srgb, var(--black) 3%, transparent);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  border-radius: 4px;
}

.invoice-editor-dates-due-date-input {
  position: relative;
  display: inline-block;
  padding: 8px 8px 6px;
}

.invoice-editor-dates-due-date-edit-link {
  position: absolute;
  right: -24px;
  top: -3px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
}
@media (min-width: 480px) {
  .invoice-editor-dates-due-date-edit-link {
    right: -33px;
  }
}

.invoice-editor-dates-due-date-options {
  padding: 25px;
  width: 270px;
}
.invoice-editor-dates-due-date-options button {
  width: 100%;
}
@media (max-width: 584px) {
  .invoice-editor-dates-due-date-options {
    width: 100%;
  }
}

.invoice-editor-dates-due-date-calendar {
  width: 327px;
  margin: 0 auto;
}
.invoice-editor-dates-due-date-calendar a {
  font-size: 14px;
  font-weight: 600;
}

.invoice-editor-dates-due-date-calendar-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 20px;
}

@media (max-width: 400px) {
  .invoice-editor-dates-due-date-edit-text {
    display: none;
  }
}

.invoice-editor-dates-due-date-edit-icon {
  display: block;
}
@media (min-width: 480px) {
  .invoice-editor-dates-due-date-edit-icon {
    display: none;
  }
}
.invoice-editor-dates-due-date-edit-icon svg {
  width: 15px;
  height: auto;
}

.invoice-editor-dates-due-date-options-radio {
  margin-bottom: 15px;
}
.invoice-editor-dates-due-date-options-radio .radio-label {
  font-style: normal;
  color: var(--black);
  font-size: 16px;
  display: block;
  text-transform: none;
  letter-spacing: 0;
  padding: 0 0 0 35px;
  line-height: 30px;
}
.invoice-editor-dates-due-date-options-radio .radio-label .radio-fill {
  height: 20px;
  width: 20px;
  background: var(--white);
  border: 1.5px solid #d7d7d7;
  top: 4px;
}
.invoice-editor-dates-due-date-options-radio .radio-label .radio-fill-in {
  width: 10px;
  height: 10px;
  left: 3.5px;
  top: 3.5px;
  right: 3.5px;
  bottom: 3.5px;
}
.invoice-editor-dates-due-date-options-radio .radio-label input[type=radio]:checked ~ .radio-label-copy {
  font-weight: 600;
}
.invoice-editor-dates-due-date-options-radio .radio-label input[type=radio]:checked ~ .radio-fill {
  box-shadow: none;
  background: var(--white);
  border: 1.5px solid var(--color-primary);
}
.invoice-editor-dates-due-date-options-radio .radio-label input[type=radio]:checked ~ .radio-fill .radio-fill-in {
  background: var(--color-primary);
}

.invoice-editor-item-header {
  margin-bottom: -10px;
  padding: 40px 20px 0;
}
@media (min-width: 768px) {
  .invoice-editor-item-header {
    padding: 40px 60px 0;
  }
}
.invoice-editor-item-header h4 {
  display: inline-block;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
}

.invoice-editor-item-group-controls-wrapper {
  position: absolute;
  display: none;
  top: 35px;
  left: 100%;
  opacity: 0;
  transition: all var(--transition-fast) ease;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
@media (min-width: 768px) {
  .invoice-editor-item-group-controls-wrapper {
    display: block;
    margin-left: -15px;
  }
}
@media (min-width: 992px) {
  .invoice-editor-item-group-controls-wrapper {
    margin-left: 0;
    padding-left: 5px;
    transform: translateX(-15px);
    transform: translate3d(-15px, 0, 0);
  }
  .invoice-editor-item-group:hover .invoice-editor-item-group-controls-wrapper {
    opacity: 1;
    transform: translateX(0);
    transform: translate3d(0, 0, 0);
  }
}

.invoice-editor-item-group-controls {
  width: 36px;
  text-align: center;
  background: var(--white);
  font-family: var(--font-sans-serif);
  border: 1px solid var(--grey-e);
  box-shadow: 0 1px 12px color-mix(in srgb, var(--black) 5%, transparent);
}
@media (min-width: 768px) {
  .invoice-editor-item-group-controls {
    border-radius: 5px;
  }
}

.invoice-editor-item-group-actions {
  position: sticky;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 17px;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 768px) {
  .invoice-editor-item-group-actions {
    position: relative;
    padding-left: 60px;
    padding-right: 60px;
  }
}

.invoice-editor-unbilled-time-entries-form .DateInput_input {
  text-align: center;
}

.invoice-editor-unbilled-notice {
  display: none;
  align-items: center;
  gap: 7px;
  padding-top: 1px;
  font-weight: 400;
  font-size: 12px;
  color: var(--grey-8);
  cursor: default;
}
@media (min-width: 768px) {
  .invoice-editor-unbilled-notice {
    display: flex;
  }
}

.invoice-editor-unbilled-notice-icon {
  position: relative;
  top: -1px;
  width: 10px;
  height: auto;
}

.invoice-editor-unbilled-notice-icon path {
  fill: var(--grey-8);
}

.invoice-item-add-item {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}
.invoice-item-add-item .invoice-editor-timesheet-link {
  margin: 0;
}
.invoice-item-add-item a {
  display: block;
}
.invoice-item-add-item i {
  padding-right: 7px;
  position: relative;
  top: 1px;
}
@media (min-width: 478px) {
  .invoice-item-add-item a {
    display: inline;
  }
  .invoice-item-add-item .invoice-editor-timesheet-link {
    margin-left: 20px !important;
  }
}

.invoice-editor-item-group-actions-right {
  display: flex;
  gap: 12px;
  align-items: center;
}
@media (min-width: 478px) {
  .invoice-editor-item-group-actions-right {
    margin-left: 20px;
  }
}

.invoice-editor-item-group-delete-button {
  display: block;
  padding: 9px 7px 8px;
  line-height: 0;
}
.invoice-editor-item-group-delete-button, .invoice-editor-item-group-delete-button:focus, .invoice-editor-item-group-delete-button:visited {
  color: var(--color-danger);
}
.invoice-editor-item-group-delete-button:hover, .invoice-editor-item-group-delete-button:active {
  color: color-mix(in srgb, var(--color-danger) 95%, var(--black));
}

.invoice-items-group-subtotal {
  display: flex;
  justify-content: flex-end;
  color: var(--black);
  font-size: 14px;
}

.invoice-items-subtotal {
  margin-top: 35px;
  color: var(--black);
  font-size: 14px;
  font-weight: 500;
}

.invoice-editor-items-sections-types {
  display: none;
  position: sticky;
  left: 0;
  flex-direction: row;
  justify-content: flex-start;
  padding-top: 25px;
  padding-left: 20px;
  margin-top: 27px;
  border-top: 1px solid var(--grey-e);
}
.invoice-editor-item-group:last-child .invoice-editor-items-sections-types {
  display: flex;
}
@media (min-width: 768px) {
  .invoice-editor-items-sections-types {
    position: relative;
    padding-left: 60px;
  }
}
@media print {
  .invoice-editor-items-sections-types {
    display: none;
  }
}

.invoice-editor-items-sections-types-item {
  position: absolute;
  z-index: 3;
  top: 46px;
  width: 340px;
  background: var(--white);
  box-shadow: 0 0 20px color-mix(in srgb, var(--bg-shadow) 7%, transparent);
  border-radius: 6px;
}

.invoice-editor-items-sections-types-item-option {
  display: block;
  padding: 20px;
  text-align: left;
  user-select: none;
  border-top: 1px solid var(--grey-e);
}
.invoice-editor-items-sections-types-item-option:first-child {
  border-top: 0;
}
.invoice-editor-items-sections-types-item-option:hover {
  background: var(--grey-fc);
}

.invoice-editor-items-sections-types-item-option-text {
  margin-top: 5px;
  color: var(--grey-6);
  font-weight: 500;
}

.invoice-editor-items-sections-types-projects {
  padding: 30px;
  font-family: var(--font-sans-serif);
}

.invoice-editor-items-sections-add-wrapper {
  margin: 0;
  font-size: 14px;
  user-select: none;
}

.invoice-editor-items-sections-add-link {
  display: inline-block;
  font-weight: 600;
}

.invoice-editor-items-sections-add-link.cancel-link, .invoice-editor-items-sections-add-link.cancel-link:focus, .invoice-editor-items-sections-add-link.cancel-link:visited {
  color: var(--grey-6);
}
.invoice-editor-items-sections-add-link.cancel-link:hover, .invoice-editor-items-sections-add-link.cancel-link:active {
  color: var(--grey-6);
}

.items-list-item-name,
.proposal-form-item-name {
  position: relative;
}

.items-list-item-name.items-list-item-name--expense-item {
  display: flex;
  align-items: flex-start;
}

.invoice-item-expense-date {
  margin-top: 4px;
  margin-bottom: 5px;
  clear: both;
  display: block;
  width: 100%;
  font-size: 12px;
  font-weight: 400;
  color: rgb(86, 86, 86);
}

.items-list-item-expense-icon {
  position: relative;
  top: 2px;
  flex-shrink: 0;
  width: 11px;
  height: auto;
  margin-left: 10px;
}
.items-list-item-expense-icon path {
  fill: var(--text-lighter);
}

.invoice-editor-service-list {
  position: absolute;
  z-index: 9999;
  max-width: 100%;
  margin: 6px 0 0 -7px;
  width: 100%;
  font-size: 14px;
  background: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 6px;
  user-select: none;
  box-shadow: 0 4px 11px color-mix(in srgb, var(--black) 10%, transparent);
}

.invoice-editor-services {
  padding: 5px;
  margin: 0px;
  max-height: 300px;
  overflow-y: scroll;
}

.invoice-editor-service {
  display: block;
  padding: 10px;
  border-radius: 4px;
}
.invoice-editor-service, .invoice-editor-service:focus, .invoice-editor-service:visited {
  color: var(--text-default) !important;
}
.invoice-editor-service:hover, .invoice-editor-service:active {
  color: var(--text-default) !important;
  cursor: pointer;
  background: var(--bg-grey-fc);
}

.invoice-editor-service-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
}

.invoice-editor-service-name {
  font-weight: 500;
  line-height: 1.2em;
  margin: 0;
  padding-right: 10px;
}

.invoice-editor-service-rate {
  font-weight: 500;
  text-align: right;
  line-height: 1em;
  white-space: nowrap;
}

.invoice-editor-service-description {
  line-height: normal;
  margin: 7px 0 0 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
  max-width: 100%;
}

.invoice-editor-services-separator {
  border: none;
  border-top: 1px solid var(--border-content);
  margin: 0 15px;
}

.invoice-editor-service-list-manage {
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 1em;
  margin: 15px;
  display: block;
  font-weight: 500;
  color: var(--color-primary);
}
.invoice-editor-service-list-manage i {
  margin: 1px 0 0 8px;
}

.invoice-editor-discount-type-form {
  position: absolute;
  z-index: 3;
  top: -50px;
  left: 80%;
  margin-left: -120px;
  padding: 15px;
  width: 240px;
  background: var(--bg-content);
  box-shadow: 0 0 20px color-mix(in srgb, var(--bg-shadow) 7%, transparent);
  border-radius: 6px;
}
.invoice-editor-discount-type-form:after {
  position: absolute;
  left: -9px;
  top: calc(50% - 12.5px + 1px);
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 9px 10px 0;
  border-color: transparent #ffffff transparent transparent;
}
.invoice-editor-discount-type-form .switch-toggle {
  width: 74px;
}
.invoice-editor-discount-type-form .invoice-editor-discount-type-form-row {
  justify-content: space-between;
  align-items: center;
}
.invoice-editor-discount-type-form .ghost-input-toggle {
  border: 1px var(--border-darker) solid;
  border-radius: 4px;
}

.invoice-client-ach-needs-setup {
  position: relative;
  padding: 30px 20px;
  text-align: left;
  border: 1px solid var(--border-content);
  border-radius: 4px;
}
@media (min-width: 768px) {
  .invoice-client-ach-needs-setup {
    padding: 30px;
  }
}
.invoice-client-page-content.full-invoice .invoice-client-ach-needs-setup {
  border: none;
  border-top: 1px solid var(--border-content);
  border-radius: 0;
}
@media (min-width: 768px) {
  .invoice-client-page-content.full-invoice .invoice-client-ach-needs-setup {
    padding: 30px;
    border-radius: 0 0 6px 6px;
  }
}

.invoice-client-ach-account-not-found {
  margin-bottom: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}
.invoice-client-ach-account-not-found.with-bank-accounts {
  margin-top: 20px;
  margin-bottom: 0;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}

.invoice-client-ach-needs-setup-lines {
  margin-bottom: 25px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
}

.invoice-client-ach-needs-setup-subline {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-lighter);
}

.invoice-client-ach-us-only {
  padding-left: 2px;
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  color: var(--text-lighter);
}

.invoice-client-ach-security-notice {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-lighter);
}
.invoice-client-ach-security-notice a,
.invoice-client-ach-security-notice a:focus,
.invoice-client-ach-security-notice a:visited {
  color: var(--text-lighter);
  text-decoration: underline;
}
.invoice-client-ach-security-notice a:hover,
.invoice-client-ach-security-notice a:active {
  color: var(--text-muted-alt);
  text-decoration: underline;
}

.invoice-client-ach-needs-setup-btn {
  width: 100%;
}
@media (min-width: 480px) {
  .invoice-client-ach-needs-setup-btn {
    width: auto;
    min-width: 250px;
  }
}

.invoice-client-ach-needs-setup-bottom {
  padding: 15px 0 0;
  text-align: center;
}

.invoice-client-ach-too-large {
  position: relative;
  padding: 30px 20px;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.invoice-client-ach-too-large-lines {
  font-size: 16px;
}

.invoice-client-ach-too-large-subline {
  max-width: 400px;
  margin: auto;
  font-size: 12px;
  color: var(--text-lighter);
}

.invoice-ach-payment-form-loading {
  position: absolute;
  display: none;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
}

.invoice-client-banking-form {
  border: 1px solid var(--border-content);
  border-radius: 6px;
}
.invoice-client-page-content.full-invoice .invoice-client-banking-form {
  border: none;
  border-top: 1px solid var(--border-content);
  border-radius: 0;
}
@media (min-width: 768px) {
  .invoice-client-page-content.full-invoice .invoice-client-banking-form {
    border-radius: 0 0 6px 6px;
  }
}

.invoice-client-ach-accounts {
  position: relative;
}

.invoice-client-ach-active {
  position: relative;
  padding: 20px;
  text-align: left;
}

.invoice-client-ach-active-toggle {
  padding: 13px 12px 10px;
  cursor: pointer;
  border-radius: 4px;
  background: var(--bg-content);
  border: 1px solid var(--border-field);
}
.invoice-client-ach-active-toggle.read-only {
  cursor: default;
}
@media (min-width: 768px) {
  .invoice-client-ach-active-toggle:not(.read-only):hover {
    border-color: var(--color-primary);
    box-shadow: 0 1px 6px color-mix(in srgb, var(--black) 7%, transparent);
  }
}

.invoice-client-ach-active-bank-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invoice-client-ach-active-label {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted-alt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invoice-client-ach-active-type {
  display: inline-block;
  float: left;
  margin-right: 15px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.invoice-client-ach-active-num {
  display: inline-block;
  float: left;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
}

.invoice-client-ach-active-caret {
  position: absolute;
  right: 35px;
  top: 50%;
  margin-top: -7px;
  color: var(--border-content-alt);
  font-size: 12px;
}

.ach-dd-items {
  position: absolute;
  display: none;
  z-index: 10;
  left: 15px;
  top: 25px;
  width: 100%;
  max-width: 80%;
  overflow: scroll;
  max-height: 200px;
  background-color: var(--bg-content);
  border: 1px solid var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--black) 15%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--black) 8%, transparent);
  border-radius: 4px;
}
.ach-dd-items.showing {
  display: block;
  animation: dropdown-open var(--transition-normal) 1 forwards;
}
.ach-dd-items.hiding {
  animation: fade-out var(--transition-normal) 1 forwards;
}

.ach-dd-item {
  position: relative;
  padding: 15px;
  text-align: left;
  cursor: pointer;
  color: var(--text-muted-alt);
  border-bottom: 1px solid #f8f8f8;
}
.ach-dd-item:last-child {
  border-bottom: none;
}
.ach-dd-item.active {
  color: var(--color-primary-contrast);
  background: var(--color-primary);
}

.ach-dd-item-bank-name {
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ach-dd-item-label {
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ach-dd-item-type {
  display: inline-block;
  float: left;
  margin-right: 15px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
}

.ach-dd-item-num {
  display: inline-block;
  float: left;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
}

.btn.invoice-client-bank-editing {
  margin-top: 10px;
}

.invoice-client-ach-amount {
  position: relative;
}

.invoice-client-ach-amount-value {
  position: relative;
  z-index: 2;
  margin: 20px 20px 0;
  padding: 8px 0px 6px;
  font-weight: 600;
  text-align: center;
  border: 2px dashed var(--border-content);
}
@media (min-width: 480px) {
  .invoice-client-ach-amount-value {
    position: absolute;
    bottom: 0;
    right: 20px;
    width: 140px;
    margin: 0;
  }
}

.invoice-client-ach-payment-btn-div {
  position: relative;
  z-index: 2;
  padding: 0 20px 20px;
  text-align: right;
}

.invoice-client-ach-security-note-wrapper {
  max-width: 400px;
  margin: 0 auto 0;
  padding: 0;
  overflow: hidden;
}

.invoice-client-ach-payment-security-note {
  text-align: center;
  font-size: 12px;
  padding: 5px 0 0;
  color: var(--text-muted-alt);
}

.invoice-pending-status,
.invoice-sample-status {
  position: relative;
  margin: 30px;
  padding: 30px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  border: 1px solid var(--border-content);
  background: var(--bg-grey-fc);
  border-radius: 4px;
}
@media (min-width: 768px) {
  .invoice-pending-status,
  .invoice-sample-status {
    margin: 0;
  }
}
.invoice-pending-status:last-child,
.invoice-sample-status:last-child {
  margin-bottom: 0;
}

.invoice-pending-status-header,
.invoice-sample-status-header {
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-default);
}

.invoice-pending-status-cancel {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--border-content);
}

.invoice-pending-status-cancel-link {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-danger);
}
.invoice-pending-status-cancel-link:focus, .invoice-pending-status-cancel-link:visited {
  color: var(--color-danger);
}
.invoice-pending-status-cancel-link:hover, .invoice-pending-status-cancel-link:active {
  color: color-mix(in srgb, var(--color-danger) 97%, transparent);
}

.invoice-editor-repeating-icon {
  position: absolute;
  left: 12px;
  top: 7px;
  height: 20px;
  width: 20px;
  padding-top: 2px;
  font-size: 19px;
  line-height: 1;
  text-align: center;
  text-indent: 0.5px;
  color: var(--color-primary);
}
.invoice-editor-repeating-icon.ion-refresh {
  left: 13px;
  top: 10px;
  font-size: 17px;
}

.invoice-editor-repeating-header {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
}
.invoice-editor-repeating-header, .invoice-editor-repeating-header:focus, .invoice-editor-repeating-header:visited, .invoice-editor-repeating-header:hover, .invoice-editor-repeating-header:active {
  color: var(--color-primary);
}

.invoice-editor-repeating-details {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
}
.invoice-editor-repeating-details, .invoice-editor-repeating-details:focus, .invoice-editor-repeating-details:visited {
  color: var(--color-primary);
}
.invoice-editor-repeating-details:hover, .invoice-editor-repeating-details:active {
  color: color-mix(in srgb, var(--color-primary) 95%, var(--black));
}

.modal-invoice-schedule-cycle {
  text-transform: capitalize;
}

.modal-invoice-schedule-icon {
  margin-right: 10px;
  color: var(--color-primary);
}

.modal-invoice-schedule-list {
  padding: 35px 0 30px;
  border-top: 1px solid var(--border-content);
}

.modal-invoice-schedule-list-item {
  display: block;
  padding: 10px 10px 8px;
  margin-left: -10px;
  margin-right: -10px;
  cursor: pointer;
  font-weight: 600;
  border-radius: 3px;
  transition: all var(--transition-normal) ease;
}
.modal-invoice-schedule-list-item, .modal-invoice-schedule-list-item:visited, .modal-invoice-schedule-list-item:focus, .modal-invoice-schedule-list-item:hover, .modal-invoice-schedule-list-item:active {
  color: var(--text-default);
}
.modal-invoice-schedule-list-item:hover {
  background: var(--bg-grey-fc);
}

.modal-invoice-schedule-list-item-status {
  font-weight: 600;
  text-transform: capitalize;
}
.modal-invoice-schedule-list-item-status.drafted {
  color: var(--text-lightest);
}
.modal-invoice-schedule-list-item-status.scheduled {
  color: var(--text-muted-alt);
}
.modal-invoice-schedule-list-item-status.outstanding {
  color: var(--text-muted);
}
.modal-invoice-schedule-list-item-status.overdue {
  color: var(--color-danger);
}
.modal-invoice-schedule-list-item-status.pending {
  color: var(--color-info);
}
.modal-invoice-schedule-list-item-status.paid {
  color: var(--color-primary);
}
.modal-invoice-schedule-list-item-status.deleted {
  color: var(--color-danger);
}

.modal-invoice-schedule-bottom {
  padding-top: 40px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-content);
}

.modal-invoice-schedule-confirmation-btns {
  display: flex;
  align-items: center;
}

.modal-invoice-schedule-confirmation-back {
  display: inline-block;
  margin-left: 20px;
  color: var(--text-lighter);
  cursor: pointer;
}

.credit-card-form-wrapper {
  max-width: 400px;
  min-height: 190px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 6px;
  box-shadow: 0 1px 6px color-mix(in srgb, var(--black) 8%, transparent);
  transition: all var(--transition-slow) ease;
}

.credit-card-form-content {
  position: relative;
  border: 5px solid var(--bg-content);
}

.credit-card-inner-form {
  padding: 10px 0 10px;
}

.credit-card-form-address-form {
  padding: 0 20px 30px;
}
.credit-card-form-address-form .form-label {
  margin-bottom: 15px;
  font-size: 12px;
}

.credit-card-form-address-back {
  display: inline-block;
  float: right;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.credit-card-form-address-back-icon {
  position: relative;
  top: 1px;
  margin-right: 7px;
}

.credit-card-form-divider-section {
  position: relative;
  padding: 0 40px;
  margin-top: -10px;
}

.credit-card-form-divider-section-or {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 1px 12px 0;
  font-size: 12px;
  color: var(--text-lighter);
  background: var(--bg-content);
  transform: translate(-50%, -50%);
}

.credit-card-form-divider {
  margin: 10px 0 20px;
}

.credit-card-form-saved-cards {
  position: relative;
  z-index: 4;
  padding: 0 20px 10px;
  text-align: left;
}
@media (min-width: 350px) {
  .credit-card-form-saved-cards {
    padding: 0 20px 10px;
  }
}

.saved-credit-card {
  position: relative;
  margin: 0 20px 10px;
  padding: 20px 20px 18px 68px;
  text-align: left;
  color: var(--text-default);
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 5px;
}
.client-payment-methods-list .saved-credit-card {
  margin: 0;
}

.saved-credit-card-brand {
  position: absolute;
  left: 18px;
  top: 20px;
  width: 35px;
  height: 24px;
  pointer-events: none;
  background-size: contain;
  background-image: url("payments/Fallback.png");
}
.saved-credit-card-brand.amex {
  background-image: url("payments/Amex.png");
}
.saved-credit-card-brand.mastercard {
  background-image: url("payments/Mastercard.png");
}
.saved-credit-card-brand.visa {
  background-image: url("payments/Visa.png");
}
.saved-credit-card-brand.diners_club {
  background-image: url("payments/DinersClub.png");
}
.saved-credit-card-brand.discover {
  background-image: url("payments/Discover.png");
}
.saved-credit-card-brand.jcb {
  background-image: url("payments/JCB.png");
}
.saved-credit-card-brand.unionpay {
  background-image: url("payments/Union.png");
}

.saved-credit-card-number {
  margin-bottom: 5px;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 600;
}
@media (min-width: 480px) {
  .saved-credit-card-number {
    letter-spacing: 2px;
  }
}

.saved-credit-card-name {
  padding-right: 90px;
  color: var(--text-lighter);
  font-size: 12px;
}

.saved-credit-card-exp {
  position: absolute;
  right: 20px;
  top: 20px;
  padding-left: 25px;
  color: var(--text-lighter);
}

.saved-credit-card-exp-label {
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 10px;
}

.saved-credit-card-delete {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 20px;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 600;
  opacity: 0;
}
.saved-credit-card-delete, .saved-credit-card-delete:focus, .saved-credit-card-delete:visited, .saved-credit-card-delete:hover, .saved-credit-card-delete:active {
  color: var(--color-danger);
}
.saved-credit-card:hover .saved-credit-card-delete {
  opacity: 1;
}

.credit-card-form-group {
  position: relative;
  padding: 0 10px 10px;
}
@media (min-width: 350px) {
  .credit-card-form-group {
    padding: 0 20px 10px;
  }
}

.invoice-cc-payment-form-card-content {
  padding: 12px 10px;
}

.credit-card-payment-errors {
  display: none;
  padding: 5px 15px;
  color: var(--color-primary-contrast);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  background: var(--color-danger);
  border-radius: 5px;
}

.invoice-cc-payment-form-card-label {
  position: relative;
  margin: 0;
  width: 100%;
  text-align: left;
}
.invoice-client-wrapper .invoice-cc-payment-form-card-label {
  letter-spacing: normal;
  color: var(--text-muted);
}

.credit-card-form-input {
  width: 100%;
  padding: 7px 0 5px 38px;
}
.credit-card-form-input:hover ~ .credit-card-form-input-icon:not(.disabled), .credit-card-form-input:focus ~ .credit-card-form-input-icon:not(.disabled), .credit-card-form-input:active ~ .credit-card-form-input-icon:not(.disabled) {
  color: var(--text-muted);
}

.modal-confirm-mark-as-paid-form-elements .credit-card-form-input {
  display: inline-flex;
  align-items: center;
  transition: none;
  color: var(--text-default);
  background-color: var(--bg-content);
  border: 1px solid var(--border-field);
}
.modal-confirm-mark-as-paid-form-elements .credit-card-form-input.form-field-uneditable {
  background: var(--bg-grey-f5);
}
.modal-confirm-mark-as-paid-form-elements .credit-card-form-partial-currency {
  z-index: 2;
  color: var(--text-lightest);
}

.credit-card-form-input-icon {
  position: absolute;
  z-index: 3;
  left: 14px;
  color: var(--text-lighter);
  pointer-events: none;
  transition: all var(--transition-normal) ease;
}
.credit-card-form-input-icon.ion-person {
  top: 8px;
  font-size: 18px;
}
.credit-card-form-input-icon.ion-pound {
  top: 10px;
  left: 13px;
  font-size: 16px;
}
.credit-card-form-input-icon.ion-cash {
  top: 8px;
  left: 12px;
  font-size: 18px;
}
.credit-card-form-input-icon.card-icon {
  width: 15px;
  height: auto;
  top: 15px;
}
.credit-card-form-input-icon.card-icon path {
  fill: var(--text-lighter);
}
.credit-card-form-input-icon.disabled {
  color: var(--text-lightest);
}

.credit-card-form-promo-text {
  padding-top: 4px;
  text-align: left;
  font-size: 14px;
  color: var(--text-lightest);
  cursor: default;
}

.credit-card-form-btn-div {
  padding: 0 20px 20px;
}

.credit-card-form-total-note {
  padding: 15px 15px 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
}

.payment-security-note-wrapper {
  max-width: 400px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

.payment-security-note {
  text-align: center;
  font-size: 12px;
  padding: 15px 10px 0;
  color: var(--text-lighter);
}

.credit-card-form-sub-text {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 12px;
}

.credit-card-form-fees-note {
  text-align: center;
  font-size: 12px;
  margin-bottom: -7px;
  padding: 15px 10px 0;
  color: var(--text-muted-alt);
}

.credit-card-form-partial-group {
  position: relative;
  padding: 10px 10px 10px;
}
@media (min-width: 350px) {
  .credit-card-form-partial-group {
    padding: 10px 20px 10px;
  }
}

.credit-card-form-partial-toggle {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 6px 33px 6px 9px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-content);
  border: 1px solid var(--border-field);
  border-radius: 4px;
}

.credit-card-form-partial-toggle-link {
  font-weight: 600;
}

.credit-card-form-partial-toggle-icon {
  position: absolute;
  right: 8px;
  top: 0;
  margin-left: 5px;
  font-size: 1.7em;
}

.credit-card-form-partial-wrapper {
  position: relative;
  display: flex;
}

.credit-card-form-partial-choices {
  display: flex;
  width: 100%;
}

.credit-card-form-partial-choice {
  position: relative;
  width: 25%;
  text-align: center;
  padding: 6px 10px 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-lighter);
  cursor: pointer;
  background: var(--bg-grey-f8);
  border: 1px solid var(--border-content-alt);
  border-right-width: 0;
}
.credit-card-form-partial-choice:first-child {
  border-radius: 4px 0 0 4px;
}
.credit-card-form-partial-choice:last-child {
  border-right-width: 1px;
  border-radius: 0 4px 4px 0;
}
.credit-card-form-partial-choice:hover {
  color: var(--text-muted-alt);
}
.credit-card-form-partial-choice.active {
  color: var(--color-primary);
  background: var(--bg-content);
}

.credit-card-form-partial-other-wrapper {
  display: flex;
  width: 100%;
}

.credit-card-form-partial-input.form-field {
  width: 100%;
  min-width: 150px;
  padding: 7px 0 5px 38px;
}
@media (min-width: 768px) {
  .credit-card-form-partial-input.form-field {
    min-width: 180px;
  }
}
.credit-card-form-partial-input.form-field:hover ~ .credit-card-form-partial-input-icon:not(.disabled), .credit-card-form-partial-input.form-field:focus ~ .credit-card-form-partial-input-icon:not(.disabled), .credit-card-form-partial-input.form-field:active ~ .credit-card-form-partial-input-icon:not(.disabled) {
  color: var(--text-muted);
}

.credit-card-form-partial-input-icon {
  position: absolute;
  z-index: 3;
  top: 7px;
  left: 12px;
  font-size: 18px;
  color: var(--text-lighter);
  pointer-events: none;
  transition: all var(--transition-normal) ease;
}

.credit-card-form-partial-currency {
  position: absolute;
  right: 0;
  top: 51%;
  padding: 0 10px;
  font-size: 12px;
  color: var(--text-lighter);
  pointer-events: none;
  transform: translateY(-50%);
}

.credit-card-form-partial-back {
  position: relative;
  display: block;
  width: 100%;
  margin-left: 10px;
}

.credit-card-stripe-loading-failed {
  max-width: 700px;
  margin: 0 auto;
  padding: 5px;
  text-align: left;
  overflow: hidden;
  background: var(--bg-content);
  transition: all var(--transition-slow) ease;
}

.credit-card-stripe-loading-failed-in {
  position: relative;
  padding: 40px;
  text-align: left;
  background: var(--bg-content);
  background-image: linear-gradient(to bottom, #fafafa 0%, var(--bg-content) 100%);
  box-shadow: 0 0 1px color-mix(in srgb, var(--black) 20%, transparent);
  border-radius: 4px;
}

.credit-card-stripe-loading-failed-header {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
}

.credit-card-stripe-loading-failed-copy {
  font-size: 16px;
  color: var(--text-muted-alt);
}

.credit-card-security-notice {
  color: var(--text-lighter);
  font-size: 12px;
  font-weight: 400;
  cursor: default;
}

.credit-card-security-notice-icon {
  width: auto;
  height: 10px;
  margin-right: 5px;
}
.credit-card-security-notice-icon path {
  fill: currentColor;
}

.modal-sending-zero-amount-notice {
  padding: 20px 30px 0;
  cursor: default;
}

.modal-sending-settings {
  position: relative;
  z-index: 12;
  display: flex;
  align-items: center;
  padding: 20px 40px;
  cursor: default;
  border-bottom: 1px solid var(--border-content);
}
.modal-sending-settings.proposal-modal {
  display: block;
}
@media (min-width: 768px) {
  .modal-sending-settings.proposal-modal {
    display: flex;
  }
}

.modal-sending-reminder-section {
  display: flex;
  align-items: center;
  margin-right: 30px;
  cursor: default;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-default);
}
.modal-sending-reminder-section.reminders-disabled {
  color: var(--text-lighter);
}
.modal-sending-reminder-section .Select__menu {
  left: -10px;
  width: 210px;
}

.modal-sending-reminder-icon {
  position: relative;
  display: inline-block;
  top: 0;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  font-size: 11px;
  padding: 2px 0 1px;
  text-align: center;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: 3px;
}
.modal-sending-reminder-section.reminders-disabled .modal-sending-reminder-icon, .modal-sending-reminder-icon.reminders-disabled {
  padding-top: 1px;
  font-size: 14px;
  color: var(--text-lighter);
  background: var(--bg-grey-f8);
}

.modal-sending-schedule-section {
  display: flex;
  align-items: center;
  flex: 1;
  cursor: default;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-default);
}
.modal-sending-schedule-section .Select__menu {
  left: -10px;
  width: 220px;
}

.modal-sending-schedule-icon {
  position: relative;
  display: inline-block;
  top: -2px;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  font-size: 17px;
  text-align: center;
  color: var(--color-primary);
}

.modal-sending-confirm-copy {
  margin-bottom: 60px;
  font-size: 18px;
  color: var(--text-lighter);
}

.modal-auto-invoice-faq {
  position: relative;
  top: 1px;
  margin-left: 10px;
  font-size: 12px;
}
.modal-auto-invoice-faq, .modal-auto-invoice-faq:focus, .modal-auto-invoice-faq:visited {
  color: var(--border-content-alt);
}
.modal-auto-invoice-faq:hover, .modal-auto-invoice-faq:active {
  color: var(--text-lighter);
}

.modal-send-invoice-reminder-copy {
  text-align: center;
  font-size: 18px;
  margin-bottom: 30px;
  font-weight: 600;
}

.modal-send-invoice-reminder-btn {
  width: 100%;
}

.modal-send-invoice-reminder-method-toggle {
  float: none;
  margin: 15px auto 0;
}

.modal-resend-invoice-link-copy {
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

#modal-resend-invoice-link-copy-input {
  padding-left: 12px;
}

.modal-resend-invoice-link-copy-note {
  position: relative;
  margin: 0;
  padding: 9px 10px 4px;
  width: 100%;
  text-align: center;
  border: 1px solid var(--border-content-alt);
  border-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  cursor: pointer;
  background: var(--bg-grey-fc);
  user-select: none;
  transition: all var(--transition-normal) ease;
}

.modal-resend-invoice-link-copy-note-icon {
  position: relative;
  margin-left: 3px;
  font-size: 0.9em;
}

.modal-resend-invoice-link-back {
  text-align: center;
  padding-top: 30px;
}

.invoice-client-autopay-section {
  position: relative;
  border: 1px solid var(--border-content);
  background: var(--bg-grey-fc);
  border-radius: 4px;
}

.invoice-client-autopay-section-content {
  padding: 30px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
.invoice-client-autopay-section-content.with-bottom-border {
  border-bottom: 1px solid var(--border-content);
}

.invoice-client-autopay-section-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.invoice-client-autopay-section-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}

.invoice-client-autopay-section-bordered-copy {
  margin-top: 25px;
  padding-top: 25px;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-content);
}

.invoice-client-autopay-notice-btn {
  margin-top: 30px;
}

.invoice-client-autopay-notice-cancel {
  text-align: center;
  padding: 15px 15px 13px;
  font-size: 12px;
  border-top: 1px solid var(--border-content);
  border-radius: 0 0 4px 4px;
}

.invoice-client-autopay-notice-cancel-link, .invoice-client-autopay-notice-cancel-link:focus, .invoice-client-autopay-notice-cancel-link:visited {
  color: var(--text-muted);
}
.invoice-client-autopay-notice-cancel-link:hover, .invoice-client-autopay-notice-cancel-link:active {
  color: var(--text-muted);
}

.invoice-client-payment-amounts {
  margin-bottom: 35px;
}

.invoice-client-payment-total-due {
  text-align: center;
  padding-top: 5px;
}

.invoice-client-payment-total-due-label {
  margin-bottom: 5px;
  color: var(--text-lighter);
  font-size: 14px;
}

.invoice-client-payment-total-due-value {
  font-size: 34px;
}

.invoice-client-payment-amount-items {
  margin-top: 20px;
  padding: 0 30px;
}
@media (min-width: 768px) {
  .invoice-client-payment-amount-items {
    padding: 0;
  }
}

.invoice-client-payment-amount-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.invoice-client-payment-amount-item.total-due {
  margin-bottom: 0;
  margin-top: 10px;
  padding-top: 12px;
  font-weight: 600;
  color: var(--text-default);
  border-top: 1px solid var(--border-content);
}
.invoice-client-payment-amount-item.subtracted {
  font-size: 12px;
  color: var(--text-lighter);
}
@media (min-width: 480px) {
  .invoice-client-payment-amount-item {
    font-size: 14px;
  }
}

.invoice-client-payment-amount-fees-label {
  margin-left: 3px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-lighter);
}
@media (min-width: 480px) {
  .invoice-client-payment-amount-fees-label {
    font-size: 12px;
  }
}

.invoice-client-payment-paid-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 10px;
}

.invoice-client-payment-paid-notice-icon {
  width: 72px;
  height: auto;
  margin-bottom: 30px;
}
.invoice-client-payment-paid-notice-icon path {
  stroke: var(--color-primary);
}

.invoice-client-payment-page-total-due {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
}
@media (min-width: 768px) {
  .invoice-client-payment-page-total-due {
    padding-top: 37px;
  }
}

.invoice-client-payment-page-total-due-label {
  padding-right: 20px;
  font-size: 14px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .invoice-client-payment-page-total-due-label {
    font-size: 16px;
  }
}

.invoice-client-payment-page-total-due-sublabel {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-lighter);
  cursor: default;
}
@media (min-width: 768px) {
  .invoice-client-payment-page-total-due-sublabel {
    font-size: 14px;
  }
}

.invoice-client-payment-section-pdf-btn {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  padding-left: 38px;
}

.invoice-client-payment-section-pdf-btn-icon {
  position: absolute;
  left: 14px;
  top: 10px;
}

.invoice-client-payment-autopay-section {
  padding: 0;
}
@media (min-width: 768px) {
  .invoice-client-payment-autopay-section {
    padding: 30px;
  }
}
@media (min-width: 1300px) {
  .invoice-client-payment-autopay-section {
    padding: 60px;
  }
}

.invoice-client-payment-page-paid-notice {
  display: flex;
  align-items: center;
  pointer-events: none;
  font-size: 24px;
}
@media (min-width: 768px) {
  .invoice-client-payment-page-paid-notice {
    justify-content: center;
    font-size: 18px;
  }
}

.invoice-client-payment-page-paid-notice-icon {
  position: relative;
  display: none;
  width: 19px;
  top: 2px;
  margin-right: 12px;
}
@media (min-width: 768px) {
  .invoice-client-payment-page-paid-notice-icon {
    display: inline-block;
  }
}
.invoice-client-payment-page-paid-notice-icon path {
  stroke: currentColor;
}

.invoice-client-payment-page-offline-notice {
  text-align: center;
  color: var(--text-lighter);
}

.invoice-client-no-payment-text {
  margin: 0 auto 30px;
  padding: 30px;
  font-size: 16px;
  text-align: center;
  border: 1px solid var(--border-content);
  background: var(--bg-grey-fc);
  border-radius: 4px;
}
.invoice-client-page-content.payment-page .invoice-client-no-payment-text {
  padding: 40px 30px;
  border: 1px solid var(--border-content-alt);
  border-radius: 0px;
}
@media (min-width: 768px) {
  .invoice-client-page-content.payment-page .invoice-client-no-payment-text {
    border-radius: 4px;
  }
}

.invoice-client-no-payment-email {
  display: flex;
  word-break: break-word;
  justify-content: center;
  font-weight: 600;
}

.invoice-client-no-payment-email-icon {
  position: relative;
  top: 1px;
  margin-right: 10px;
  font-size: 1.1em;
}

.invoice-client-no-payment-line2 {
  margin-top: 30px;
  padding-top: 30px;
  text-align: center;
  color: var(--text-lighter);
  border-top: 1px solid var(--border-content);
}

.invoice-client-no-payment-method {
  position: relative;
  display: block;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
}
@media (min-width: 768px) {
  .invoice-client-no-payment-method {
    border-radius: 4px;
  }
}

.invoice-client-no-payment-method-title {
  position: relative;
  display: block;
  padding: 20px 20px 19px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-default);
  cursor: pointer;
}

.invoice-client-no-payment-method-content {
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.invoice-client-page-content.payment-page .invoice-client-no-payment-method-content {
  margin: 0 20px 20px;
}

.invoice-client-paypal-wrap {
  max-width: 400px;
  min-height: 200px;
  margin: 0 auto 0;
  padding: 3px 0 0;
  overflow: hidden;
  background: var(--bg-content);
  border-radius: 4px;
  border: 1px solid var(--border-content);
  transition: all var(--transition-slow) ease;
}

.invoice-client-paypal {
  position: relative;
  border: 5px solid var(--bg-content);
}

.invoice-client-paypal-form {
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.invoice-client-paypal-logo {
  width: 90px;
  margin-top: 30px;
}

.invoice-client-paypal-lines {
  padding: 20px 30px 20px;
  font-size: 14px;
  font-weight: normal;
}

.invoice-client-paypal-btns {
  padding: 0 20px 20px;
}

.paypal-loading-wrapper {
  position: relative;
  height: 120px;
}

.paypal-loading {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--bg-content);
  top: 0;
  left: 0;
  opacity: 0.5;
  display: flex;
  align-items: center;
  z-index: 201;
}

.invoice-display-actions {
  display: none;
}
.invoice-display-actions.showing {
  display: block;
}

.invoice-date-display {
  color: var(--text-default);
}

.invoice-display-group-border {
  margin: 0 60px;
  border-bottom: 1px solid var(--border-content);
}

.invoice-display-subtotal-section {
  position: relative;
  padding: 40px 0 0;
  font-size: 14px;
  border-top: 1px solid var(--border-content);
}

.invoice-display-total-section, .invoice-display-deposit-section {
  position: relative;
  margin-top: 20px;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
}

.invoice-display-late-fees-section {
  position: relative;
  padding-top: 7px;
  padding-bottom: 5px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted-alt);
}

.invoice-display-late-fees-label {
  position: relative;
  display: inline-block;
  float: left;
  width: 50%;
}

.invoice-display-late-fees-value {
  position: relative;
  display: inline-block;
  float: left;
  width: 50%;
  text-align: right;
  padding-left: 0;
  padding-right: 0;
}

.invoice-payment-summary {
  max-width: var(--invoice-wrapper-width);
  width: 100%;
  margin: 20px auto 20px;
}

.invoice-payment-summary-content {
  position: relative;
  padding: 60px 20px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 4px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 2%, transparent);
}
@media (min-width: 480px) {
  .invoice-payment-summary-content {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 768px) {
  .invoice-payment-summary-content {
    padding-left: 60px;
    padding-right: 60px;
  }
}

.invoice-payment-summary-label {
  position: absolute;
  left: 50%;
  top: 0;
  padding: 5px 10px 5px;
  margin-left: -100px;
  width: 200px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 600;
  background: var(--bg-grey-f8);
  border-radius: 0 0 4px 4px;
}

.invoice-payment-summary-totals {
  margin-top: 20px;
}

.invoice-payment-summary-after-fees {
  font-weight: 500;
  color: var(--text-default);
  font-size: 14px;
}

.invoice-payment-summary-after-fees-amount {
  margin-bottom: 10px;
}

.invoice-payment-summary-after-fees-total {
  margin-top: 15px;
  padding-top: 15px;
  font-weight: 600;
  border-top: 1px solid var(--border-content);
}

.invoice-payment-summary-item-source-name {
  text-transform: uppercase;
}

.invoice-payment-history {
  max-width: var(--invoice-wrapper-width);
  width: 100%;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.invoice-payment-history-item {
  position: relative;
  padding: 10px 10px 12px 42px;
  margin-bottom: 2px;
  color: var(--color-primary);
  font-weight: 600;
  background-color: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
  border-radius: 3px;
}
.invoice-payment-history-item:last-child {
  margin-bottom: 20px;
}
@media (min-width: 480px) {
  .invoice-payment-history-item.invoice-bundle {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .invoice-payment-history-item.repeating-wrapper {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}

.invoice-payment-history-item-icon {
  position: absolute;
  left: 14px;
  top: 21px;
  color: var(--color-primary);
  font-size: 19px;
  line-height: 0;
  transform: translateY(-50%);
}
.invoice-payment-history-item-icon.invoice-bundle {
  top: 20px;
  left: 15px;
  font-size: 20px;
}

.invoice-payment-history-item-link {
  white-space: nowrap;
}

.invoice-payment-history-item-details {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.invoice-payment-history-bundle-details {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-primary);
}

.invoice-payment-history-refund-details {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-lighter);
}

.invoice-payment-history-refund-item {
  position: relative;
  margin-top: 5px;
}

.invoice-payment-history-refund-item-icon {
  position: absolute;
  left: -27px;
  top: 1px;
  opacity: 0.7;
}

.invoice-bottom-timesheet-section {
  max-width: var(--invoice-wrapper-width);
  width: 100%;
  margin-top: 20px;
}

.invoice-bottom-timesheet-content {
  position: relative;
  padding: 60px 20px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--black) 2%, transparent);
}
@media (min-width: 768px), print {
  .invoice-bottom-timesheet-content {
    padding-left: 60px;
    padding-right: 60px;
    border-radius: 4px;
  }
}

.invoice-bottom-timesheet-title {
  position: absolute;
  left: 50%;
  top: 0;
  padding: 5px 10px 7px;
  margin-left: -100px;
  width: 200px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  background: var(--bg-grey-f8);
  border-radius: 0 0 4px 4px;
}
.invoice-bottom-timesheet-title, .invoice-bottom-timesheet-title:focus, .invoice-bottom-timesheet-title:visited, .invoice-bottom-timesheet-title:hover, .invoice-bottom-timesheet-title:active {
  color: var(--text-muted);
}

.invoice-bottom-timesheet-list-title {
  margin-bottom: 30px;
  font-weight: 600;
  font-size: 14px;
}

.invoice-bottom-timesheet-item {
  margin-bottom: 15px;
  padding-bottom: 15px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-content);
}
.invoice-bottom-timesheet-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.invoice-bottom-timesheet-item-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.invoice-bottom-timesheet-item-top:last-child {
  margin-bottom: 0;
}

.invoice-bottom-timesheet-item-notes,
.invoice-bottom-timesheet-item-task {
  position: relative;
  margin-top: 3px;
  margin-left: 5px;
  padding-left: 18px;
  font-size: 12px;
  color: var(--text-lighter);
  word-break: break-word;
}

.invoice-bottom-timesheet-item-notes-icon {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text-lighter);
}

.invoice-bottom-timesheet-item-task-icon {
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--text-lighter);
}

.invoice-bottom-timesheet-edit {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

.invoice-bottom-timesheet-edit-link {
  display: block;
  padding: 9px 10px 10px;
  background: color-mix(in srgb, var(--black) 2%, transparent);
  border-radius: 4px;
}
.invoice-bottom-timesheet-edit-link:hover, .invoice-bottom-timesheet-edit-link:active {
  background: color-mix(in srgb, var(--color-primary) 3%, transparent);
}

.invoice-bottom-timesheet-placeholder {
  padding: 30px;
  text-align: center;
  color: var(--text-default);
  font-size: 14px;
  background: var(--bg-grey-fd);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.invoice-client-page {
  position: relative;
  padding-bottom: 140px;
  min-height: 80vh;
}
@media print {
  .invoice-client-page {
    width: 800px;
  }
}

.invoice-client-page-wrapper {
  max-width: 1600px;
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.invoice-client-page-content {
  padding-top: 40px;
}

.invoice-client-wrapper {
  max-width: 480px;
  width: 100%;
  margin: auto;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 600px) {
  .invoice-client-wrapper {
    max-width: var(--invoice-wrapper-width);
  }
}
@media (min-width: 1200px) {
  .invoice-client-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.invoice-client-wrapper.document-expired-wrapper {
  padding: 80px 0;
  max-width: 455px;
}

.modal-attachments-locked-notice {
  position: relative;
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: var(--text-default);
}

.modal-attachments-locked-notice-icon {
  position: relative;
  right: -10px;
  margin: 0 auto 30px;
  line-height: 1;
  width: 250px;
  height: 190px;
  background-position: top center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("invoices/attachment-locked.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .modal-attachments-locked-notice-icon {
    background-image: url("invoices/attachment-locked@2x.png");
  }
}

.invoice-client-not-found {
  padding: 120px 0 120px;
  text-align: center;
  font-size: 22px;
}

.invoice-client-not-found-1 {
  padding: 30px 30px 25px;
  background: var(--bg-info);
  border-bottom: 1px solid var(--border-semi-transparent-alt);
  border-radius: 4px 4px 0 0;
}

.invoice-client-not-found-2 {
  padding: 30px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-lighter);
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 0 0 4px 4px;
}

.invoice-client-not-found-logo {
  margin: 0 0 80px;
  text-align: center;
  opacity: 0.2;
}

.invoice-client-not-found-logo-icon {
  width: 50px;
}

.invoice-client-top-archived {
  margin: 0 auto 10px;
  padding: 10px 20px 10px;
  text-align: center;
  user-select: none;
  background: var(--color-danger);
  border-radius: 4px;
}
.invoice-client-page-content.payment-page .invoice-client-top-archived {
  margin: 0 0 20px;
}

.invoice-client-bottom-pay-cta {
  max-width: 300px;
  margin: 0 auto;
  padding: 40px 0;
}

.invoice-client-top-paid {
  margin: 0 auto 10px;
  padding: 13px 20px 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-default);
  user-select: none;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.invoice-client-aside-section {
  position: relative;
  max-width: 480px;
  width: 100%;
  margin: 0 auto 30px;
  background: var(--bg-panel);
  border: 1px solid var(--border-content);
  border-radius: 10px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--black) 2%, transparent);
}
@media (min-width: 430px) {
  .invoice-client-aside-section {
    margin: 0 auto 30px;
  }
}
@media (min-width: 600px) {
  .invoice-client-aside-section {
    max-width: 630px;
  }
}
@media print {
  .invoice-client-aside-section {
    display: none;
  }
}

.invoice-client-aside-notice {
  padding: 15px 15px;
  text-align: center;
  color: var(--text-lighter);
  border-top: 1px solid var(--border-content);
  border-radius: 0 0 10px 10px;
}

.invoice-client-aside-notice-button {
  margin: 30px 30px 0;
}
@media (min-width: 768px) {
  .invoice-client-aside-notice-button {
    margin: 30px 0 0;
  }
}

.invoice-client-aside-late-notice {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}
.invoice-client-aside-late-notice.notice-paid {
  color: var(--color-primary);
}
.invoice-client-aside-late-notice.notice-overdue {
  color: var(--color-danger);
}

.invoice-client-aside-body {
  padding: 40px 0;
}
@media (min-width: 768px) {
  .invoice-client-aside-body {
    padding: 40px 30px;
  }
}

.invoice-client-aside-group {
  padding: 30px;
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.invoice-client-aside-group-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.invoice-client-aside-group-row:last-child {
  margin-bottom: 0;
}

.invoice-client-aside-inline {
  margin-bottom: 20px;
}
@media print {
  .invoice-client-aside-inline {
    display: none;
  }
}

.invoice-client-aside-inline-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 12px 10px 9px;
  color: var(--text-lighter);
}
.invoice-client-aside-inline-security-note a,
.invoice-client-aside-inline-security-note a:focus,
.invoice-client-aside-inline-security-note a:visited,
.invoice-client-aside-inline-security-note a:hover,
.invoice-client-aside-inline-security-note a:active {
  color: var(--text-lighter);
  text-decoration: underline;
}

.invoice-client-aside-footer {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding-top: 20px;
}

.invoice-client-aside-footer-security-note {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 12px;
  padding: 12px 10px 9px;
  color: var(--text-lighter);
}
.invoice-client-aside-footer-security-note a,
.invoice-client-aside-footer-security-note a:focus,
.invoice-client-aside-footer-security-note a:visited,
.invoice-client-aside-footer-security-note a:hover,
.invoice-client-aside-footer-security-note a:active {
  color: var(--text-lighter);
  text-decoration: underline;
}

.invoice-client-payment-page-forms {
  position: relative;
  padding: 0 0 40px;
}
@media (min-width: 768px) {
  .invoice-client-payment-page-forms {
    padding: 0 40px 40px;
  }
}
@media print {
  .invoice-client-payment-page-forms {
    display: none;
  }
}

.invoice-client-payment-section {
  position: relative;
  max-width: 680px;
  margin: 0 auto 20px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--black) 2%, transparent);
}
@media print {
  .invoice-client-payment-section {
    display: none;
  }
}

.invoice-client-payment-top-content {
  padding: 30px 30px 30px;
}
@media (min-width: 768px) {
  .invoice-client-payment-top-content {
    padding: 40px;
  }
}

.invoice-client-payment-section-top {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .invoice-client-payment-section-top {
    height: 80px;
    padding-bottom: 34px;
  }
  .invoice-client-payment-section-top.showing-calculations {
    height: auto;
  }
}

.invoice-client-payment-section-top-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .invoice-client-payment-section-top-content {
    flex-direction: row;
  }
}

.invoice-client-payment-section-top-title-wrapper {
  max-width: 100%;
}
@media (min-width: 768px) {
  .invoice-client-payment-section-top-title-wrapper {
    padding-right: 200px;
  }
}

.invoice-client-payment-section-title {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
@media (min-width: 768px) {
  .invoice-client-payment-section-title {
    font-size: 18px;
  }
}

.invoice-client-payment-section-subtitle {
  display: none;
  padding-right: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-lighter);
}
@media (min-width: 768px) {
  .invoice-client-payment-section-subtitle {
    display: block;
    padding-right: 0;
  }
}

.invoice-client-payment-section-value {
  margin-top: 5px;
  font-size: 24px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .invoice-client-payment-section-value {
    position: absolute;
    display: inline-block;
    right: 0;
    top: 50%;
    margin-top: 0;
    text-align: right;
    font-size: 28px;
    transform: translateY(-54%);
  }
}

.invoice-client-payment-section-value-with-fees {
  display: none;
  font-size: 14px;
  font-weight: 500;
  text-align: right;
  color: var(--text-lighter);
}
@media (min-width: 768px) {
  .invoice-client-payment-section-value-with-fees {
    display: block;
  }
}

.invoice-client-payment-page-totals-toggle {
  position: relative;
  margin-top: 5px;
  padding-right: 13px;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  user-select: none;
}
@media (min-width: 768px) {
  .invoice-client-payment-page-totals-toggle {
    margin-top: 0;
  }
}

.invoice-client-payment-page-totals-toggle-icon {
  position: absolute;
  right: 0;
  top: 5px;
  font-size: 8px;
  line-height: 1;
  transition: all 0.2s ease;
}
.invoice-client-payment-page-totals-toggle.active .invoice-client-payment-page-totals-toggle-icon {
  transform: rotate(180deg);
}

.invoice-client-payment-page-amount-items {
  margin-top: 20px;
  padding: 20px;
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.invoice-client-payment-page-amount-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.invoice-client-payment-page-amount-item.total-due {
  margin-bottom: 0;
  margin-top: 10px;
  padding-top: 12px;
  font-weight: 600;
  color: var(--text-default);
  border-top: 1px dashed var(--border-content-alt);
}
.invoice-client-payment-page-amount-item.subtracted {
  font-size: 12px;
  color: var(--text-lighter);
}
@media (min-width: 480px) {
  .invoice-client-payment-page-amount-item {
    font-size: 14px;
  }
}

.invoice-client-payment-page-amount-fees-label {
  margin-left: 3px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-lighter);
}
@media (min-width: 480px) {
  .invoice-client-payment-page-amount-fees-label {
    font-size: 12px;
  }
}

.invoice-client-page-content.full-invoice .invoice-client-payment-content {
  display: none;
  background: var(--bg-panel);
  border: 1px solid var(--border-content);
  border-top: 0;
  border-radius: 0 0 4px 4px;
}
.invoice-client-page-content.full-invoice .invoice-client-payment-content.showing {
  display: block;
}
.invoice-client-page-content.full-invoice .credit-card-form {
  padding: 20px 0 10px;
  border-top: 1px solid var(--border-content);
  border-radius: 0;
}
@media (min-width: 768px) {
  .invoice-client-page-content.full-invoice .credit-card-form {
    border-radius: 0 0 6px 6px;
  }
}
.invoice-client-page-content.full-invoice .saved-credit-card {
  margin: 0 20px 10px;
}

.invoice-client-payment-methods {
  margin: 0 -1px;
}
@media (min-width: 768px) {
  .invoice-client-payment-methods {
    margin: 0;
  }
}

.invoice-client-payment-method {
  margin-bottom: 10px;
}
.invoice-client-payment-method:last-child {
  margin-bottom: 0;
}

.invoice-client-payment-method-toggle {
  position: relative;
  z-index: 5;
  display: block;
  padding: 20px 22px 19px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-content);
  border-left-width: 0;
  border-right-width: 0;
}
.invoice-client-payment-method-toggle, .invoice-client-payment-method-toggle:visited, .invoice-client-payment-method-toggle:focus {
  color: var(--text-default);
}
.invoice-client-payment-method-toggle:hover, .invoice-client-payment-method-toggle:active {
  color: var(--text-default);
}
@media (min-width: 768px) {
  .invoice-client-payment-method-toggle {
    border-radius: 4px;
    border-left-width: 1px;
    border-right-width: 1px;
  }
  .invoice-client-payment-method-toggle:hover {
    color: color-mix(in srgb, var(--text-default) 95%, transparent);
  }
  .invoice-client-payment-method-toggle:hover:not(.active) {
    box-shadow: 0 1px 12px color-mix(in srgb, var(--bg-shadow) 2%, transparent);
  }
}
.invoice-client-payment-method-toggle.with-radio {
  padding-left: 50px;
}
.invoice-client-payment-method-toggle.active {
  color: var(--text-default);
  border-bottom: none;
}
@media (min-width: 768px) {
  .invoice-client-payment-method-toggle.active {
    border-radius: 4px 4px 0 0;
  }
}

.invoice-client-payment-method-subtitle {
  position: relative;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}

.invoice-client-payment-method-icon {
  position: relative;
  margin-left: 7px;
  width: 8px;
  height: auto;
}

.invoice-client-payment-method-type-radio.radio-fill {
  left: 20px;
  top: 34px;
}
.invoice-client-payment-method-toggle.active .invoice-client-payment-method-type-radio.radio-fill {
  background: var(--bg-content);
  border-color: color-mix(in srgb, var(--color-primary) 80%, transparent);
}
.invoice-client-payment-method-toggle.active .invoice-client-payment-method-type-radio.radio-fill .radio-fill-in {
  background: var(--color-primary);
}

.invoice-client-payment-method-type-icons {
  position: absolute;
  display: none;
  right: 20px;
  top: 29px;
}
@media (min-width: 768px) {
  .invoice-client-payment-method-type-icons {
    display: flex;
  }
}
.invoice-client-payment-method-type-icons .payment-method-icon-img {
  margin-left: 5px;
}

.invoice-client-payment-method-toggle-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -13px;
  font-size: 20px;
  color: var(--text-lightest);
  transition: all var(--transition-normal) ease;
}
.invoice-client-payment-method-toggle.active .invoice-client-payment-method-toggle-icon {
  color: var(--text-lighter);
  transform: rotate(-90deg);
}

.bundled-invoice-payment-blocked {
  position: relative;
  padding: 30px;
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  border: 1px solid var(--border-content-alt);
  background: var(--bg-grey-fc);
}
@media (min-width: 768px) {
  .bundled-invoice-payment-blocked {
    border-radius: 4px;
  }
}

.invoice-client-payment-sample-notice {
  margin-bottom: 30px;
  font-size: 16px;
  padding: 30px;
  text-align: center;
  color: var(--text-info-dark);
  background: var(--bg-info-lighter);
  border: 1px solid var(--bg-info-light);
  border-radius: 4px;
}

.invoice-client-payment-method-sample {
  margin-bottom: 30px;
  padding: 0 20px 20px;
  border: 1px solid var(--border-content);
  border-top: 0;
  border-radius: 0 0 6px 6px;
}
.invoice-client-page-content.payment-page .invoice-client-payment-method-sample {
  margin-bottom: 0;
  border-color: var(--border-content);
}

.invoice-client-payment-method-sample-content {
  padding: 30px;
  background: var(--bg-grey-f8);
  border-radius: 6px;
}

.modal-pay-deposit-payment-amount {
  margin-bottom: 15px;
  text-align: center;
  font-size: 36px;
  font-weight: 600;
}

.modal-pay-deposit-payment-forms .invoice-client-payment-content {
  display: none;
  padding: 0 5px 5px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-top: 0;
}
@media (min-width: 768px) {
  .modal-pay-deposit-payment-forms .invoice-client-payment-content {
    padding: 0 20px 20px;
    border-radius: 0 0 4px 4px;
  }
}
.modal-pay-deposit-payment-forms .invoice-client-payment-content.showing {
  display: block;
}

.modal-pay-deposit-description {
  max-width: 440px;
  margin: 0 auto 40px;
  text-align: center;
  font-size: 16px;
}

.invoice-client-page-content.payment-page .invoice-client-payment-content {
  display: none;
  padding: 0 5px 5px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-top: 0;
}
@media (min-width: 768px) {
  .invoice-client-page-content.payment-page .invoice-client-payment-content {
    padding: 10px 50px 50px;
    border-radius: 0 0 4px 4px;
  }
}
.invoice-client-page-content.payment-page .invoice-client-payment-content.showing {
  display: block;
}
@media (min-width: 768px) {
  .invoice-client-page-content.payment-page .credit-card-form {
    margin: 0 -20px -20px;
  }
}
.invoice-client-page-content.payment-page .saved-credit-card {
  margin: 0 20px 10px;
}
.invoice-client-page-content.payment-page .invoice-client-paypal-wrap {
  max-width: none;
}
.invoice-client-page-content.payment-page .bundled-invoice-payment-blocked {
  font-size: 16px;
  font-weight: 500;
  text-align: left;
}
@media (min-width: 768px) {
  .invoice-client-page-content.payment-page .bundled-invoice-payment-blocked {
    padding: 60px;
    border-radius: 6px;
  }
}

.invoice-client-payment-method-section-title {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.invoice-client-payment-invoice-section {
  margin-top: 30px;
}

.invoice-client-payment-invoice-content {
  font-size: 14px;
  color: var(--text-default);
}

.invoice-client-payment-invoice-item-name {
  word-break: break-word;
  white-space: pre-line;
}

.invoice-client-payment-invoice-item-description {
  word-break: break-word;
  white-space: pre-line;
  color: var(--text-muted);
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  width: 100%;
  margin-top: 10px;
}

.invoice-client-payment-invoice-item-amount,
.invoice-client-payment-invoice-item-rate {
  display: none;
}
@media (min-width: 768px) {
  .invoice-client-payment-invoice-item-amount,
  .invoice-client-payment-invoice-item-rate {
    display: inline-block;
  }
}
@media print {
  .invoice-client-payment-invoice-item-amount,
  .invoice-client-payment-invoice-item-rate {
    display: inline-block;
  }
}

@media (min-width: 768px) {
  .invoice-client-payment-invoice-item-total {
    display: inline-block;
  }
}
@media print {
  .invoice-client-payment-invoice-item-total {
    display: inline-block;
  }
}

.invoice-client-payment-invoice-item-name,
.invoice-client-payment-invoice-item-amount,
.invoice-client-payment-invoice-item-rate,
.invoice-client-payment-invoice-item-total {
  color: var(--text-default);
  font-size: 14px;
  font-weight: 400;
}

.invoice-client-payment-invoice-item-sum {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-lighter);
  font-weight: 400;
}
@media (min-width: 768px) {
  .invoice-client-payment-invoice-item-sum {
    display: none;
  }
}
@media print {
  .invoice-client-payment-invoice-item-sum {
    display: none;
  }
}

.invoice-client-download-wrap {
  position: relative;
  margin-top: 20px;
  text-align: center;
}
@media print {
  .invoice-client-download-wrap {
    display: none;
  }
}

.invoice-payout-warning {
  margin: 20px 0px;
  color: var(--color-danger);
}

.document-expired-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  background: var(--bg-content);
  border: 1px solid #DAE2DB;
  border-radius: 10px;
  padding: 60px 60px 50px;
  text-align: center;
}
.document-expired-not-found img {
  width: 100px;
  height: 100px;
}
.document-expired-not-found h1 {
  font-weight: 500;
  font-size: 25px;
  margin: 0;
  color: var(--text-default);
}
.document-expired-not-found p {
  margin: 0;
  font-size: 18px;
  color: var(--text-muted);
}
.document-expired-not-found .document-expired-timeout {
  margin-top: -10px;
  font-size: 0.9em;
  color: var(--text-lighter);
}

.invoice-preview-banner {
  font-family: var(--font-sans-serif);
  padding: 25px 0;
  color: var(--text-invoice-badge);
  background: var(--bg-invoice-badge);
}
@media print {
  .invoice-preview-banner {
    display: none;
  }
}
.invoice-preview-banner .invoice-client-page-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 768px) {
  .invoice-preview-banner .invoice-preview-banner-text {
    padding: 0 20px 0 0;
  }
}
.invoice-preview-banner .invoice-preview-banner-text h3 {
  margin: 0 0 5px;
  font-family: var(--font-sans-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 140%;
  color: inherit;
}
.invoice-preview-banner .invoice-preview-banner-text p {
  margin: 0;
  font-family: var(--font-sans-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 140%;
}

.invoice-preview-banner-button {
  flex: 1;
  text-align: right;
}
.invoice-preview-banner-button .btn {
  width: auto;
  white-space: nowrap;
  font-family: var(--font-sans-serif);
  color: var(--bg-grey-f5);
  border-color: var(--bg-grey-f5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .invoice-preview-banner-button .btn {
    color: var(--grey-2);
    background: var(--white);
    border-color: var(--border-content);
  }
}
:root[data-theme=dark] .invoice-preview-banner-button .btn {
  color: var(--grey-2);
  background: var(--white);
  border-color: var(--border-content);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .invoice-preview-banner-button .btn:hover,
  :root:not([data-theme=light]) .invoice-preview-banner-button .btn:active,
  :root:not([data-theme=light]) .invoice-preview-banner-button .btn:active:hover {
    color: var(--grey-2);
    background: var(--white);
    border-color: var(--border-content);
  }
}
:root[data-theme=dark] .invoice-preview-banner-button .btn:hover,
:root[data-theme=dark] .invoice-preview-banner-button .btn:active,
:root[data-theme=dark] .invoice-preview-banner-button .btn:active:hover {
  color: var(--grey-2);
  background: var(--white);
  border-color: var(--border-content);
}
@media (min-width: 768px) {
  .invoice-preview-banner-button .btn {
    width: 200px;
  }
}

.project-invoices-page-row {
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .project-invoices-page-row {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
  }
}
.project-invoices-page-row .table-list-wrapper {
  min-height: 0px;
}

.project-invoices-summary {
  cursor: default;
}

.project-invoices-summary-content-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.project-invoices-summary-content {
  flex: 50%;
  margin-bottom: 20px;
}
@media (min-width: 992px) {
  .project-invoices-summary-content {
    flex: 100%;
  }
}
@media (min-width: 1200px) {
  .project-invoices-summary-content {
    flex: 50%;
  }
}
.project-invoices-summary-content .display-label {
  margin-bottom: 5px;
  color: var(--text-muted);
}

.project-invoices-summary-value {
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-default);
}
.project-invoices-summary-value.overdue {
  color: var(--color-danger);
}
.project-invoices-summary-value.paid {
  color: var(--color-primary);
}
.project-invoices-summary-value.zero {
  color: var(--text-lightest);
}
.page-properties-section .project-invoices-summary-value {
  font-size: 14px;
  font-weight: 400;
}

.project-invoices-summary-label-icon {
  position: relative;
  top: 1px;
  width: 12px;
  height: auto;
  margin-left: 8px;
}

.project-invoices-content {
  padding-top: 40px;
  border-top: 1px solid var(--border-content);
}
@media (min-width: 992px) {
  .project-invoices-content {
    border-top: 0;
  }
}

.invoice-list-wrapper {
  position: relative;
  min-height: 400px;
}

.invoices-list-loading {
  position: absolute;
  z-index: 10;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 40px 0;
  background: var(--bg-content);
}

.invoices-list-no-results {
  display: none;
  text-align: center;
  padding: 70px 40px;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-lighter);
  background: var(--bg-content-empty);
}

.invoice-list-item {
  position: relative;
  margin-bottom: 2px;
  padding: 20px 20px 20px 63px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 3px;
  transition: all var(--transition-fast) ease;
  box-shadow: 0 0 2px color-mix(in srgb, var(--bg-shadow) 2%, transparent);
}
@media (min-width: 768px) {
  .invoice-list-item:hover {
    background: var(--bg-content);
    box-shadow: 0 1px 6px color-mix(in srgb, var(--bg-shadow) 4%, transparent);
  }
}
.invoice-list-item .list-item-dd-toggle {
  right: 10px;
  text-align: center;
}
.invoice-list-item .list-item-dd-toggle-link {
  top: 24px;
}
.invoice-list-item:last-child {
  margin-bottom: 0;
}
.invoice-list-item.animating-out {
  overflow: hidden;
  animation: fade-out-dashboard-item var(--transition-slow) ease forwards;
}
.invoice-list-item.new {
  border-left: 4px solid var(--border-content);
}
.invoice-list-item.drafted {
  border-left: 4px solid var(--border-darker);
}
.invoice-list-item.scheduled {
  border-left: 4px solid var(--text-muted-alt);
}
.invoice-list-item.outstanding {
  border-left: 4px solid var(--text-muted);
}
.invoice-list-item.overdue {
  border-left: 4px solid var(--color-danger);
}
.invoice-list-item.pending {
  border-left: 4px solid var(--color-info);
}
.invoice-list-item.paid {
  border-left: 4px solid var(--color-primary);
}
.invoice-list-item.recurring {
  margin-bottom: 15px;
}

.invoice-list-item-left {
  position: relative;
  padding-right: 30px;
}
@media (min-width: 600px) {
  .invoice-list-item-left {
    padding-top: 5px;
    padding-bottom: 3px;
    padding-right: 150px;
    padding-left: 20px;
    border-left: 1px solid var(--border-content);
  }
}

.invoice-list-item-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invoice-list-item-name, .invoice-list-item-name:focus, .invoice-list-item-name:visited {
  color: var(--text-default);
}
.invoice-list-item-name:hover, .invoice-list-item-name:active {
  color: color-mix(in srgb, var(--text-default) 97%, transparent);
}

.invoice-list-item-info {
  margin-top: 5px;
}

.invoice-list-item-status {
  position: relative;
  display: inline-block;
  float: left;
  font-size: 12px;
  color: var(--text-lighter);
  font-weight: 500;
}

.invoice-list-item-repeat {
  display: inline-block;
  float: left;
  margin-top: -1px;
  margin-left: 12px;
  height: 18px;
  width: 20px;
  padding-top: 1px;
  font-size: 13px;
  line-height: 1;
  text-align: center;
  color: var(--color-primary);
  background: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--black) 20%, transparent);
  border-radius: 3px;
}

.invoice-list-item-date {
  position: absolute;
  left: 20px;
  top: 23px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  color: var(--text-muted-alt);
  cursor: default;
}
@media (min-width: 768px) {
  .invoice-list-item-date {
    top: 27px;
  }
}
.invoice-list-item-date.empty {
  width: 22px;
  padding-top: 3px;
  text-align: center;
  color: var(--text-lighter);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 2px;
}

.invoice-list-item-date-line1 {
  margin-bottom: 1px;
  font-weight: 600;
  font-size: 10px;
}

.invoice-list-item-date-line2 {
  font-size: 20px;
  font-weight: normal;
  font-variant-numeric: tabular-nums;
}

.invoice-list-item-rate {
  display: block;
  margin-top: 10px;
  color: var(--text-default);
  text-align: left;
  font-size: 14px;
}
@media (min-width: 600px) {
  .invoice-list-item-rate {
    position: absolute;
    top: 35px;
    right: 50px;
    margin-top: 0px;
    padding-right: 10px;
    text-align: right;
    font-size: 16px;
    border-right: 1px solid var(--border-content);
  }
}
.invoice-list-item-rate.client {
  right: 20px;
  padding-right: 0;
  border-right: 0;
}

.invoice-list-item-project {
  position: absolute;
  right: 20px;
  top: 46px;
  color: var(--text-lighter);
  font-size: 12px;
}
@media (min-width: 600px) {
  .invoice-list-item-project {
    top: 52px;
  }
}

.invoice-list-item-project-icon {
  position: relative;
  top: 1px;
  margin-right: 7px;
  margin-left: -5px;
  font-size: 1.1em;
  opacity: 0.4;
}

.invoice-list-item-actions {
  width: 100%;
  margin-top: 10px;
}
@media (min-width: 600px) {
  .invoice-list-item-actions {
    position: absolute;
    right: 70px;
    top: 40px;
    width: auto;
  }
}

.invoice-list-item-action {
  width: auto;
  margin-right: 5px;
  opacity: 0.6;
}
.invoice-list-item-action:hover {
  opacity: 1;
}
@media (min-width: 768px) {
  .invoice-list-item-action {
    margin-right: auto;
    margin-left: 5px;
  }
}

.invoice-list-item-dd-toggle {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  font-size: 26px;
  width: 50px;
  text-align: center;
}
.invoice-list-item-dd-toggle .dropdown-menu {
  left: auto;
  right: 3px;
  top: 50px;
}

.invoice-list-item-dd-toggle-link {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  padding: 20px 0;
  color: var(--text-lighter);
  cursor: pointer;
  font-size: 14px;
}
.invoice-list-item-dd-toggle-link:focus, .invoice-list-item-dd-toggle-link:visited {
  color: var(--text-lighter);
}
@media (min-width: 600px) {
  .invoice-list-item-dd-toggle-link {
    padding: 37px 0 35px;
  }
  .invoice-list-item-dd-toggle-link:hover {
    color: var(--text-muted);
  }
}
.invoice-list-item-dd-toggle-link .ion-chevron-down:before {
  transition: all var(--transition-normal) ease;
}
.invoice-list-item-dd-toggle.open .invoice-list-item-dd-toggle-link .ion-chevron-down:before {
  transform: rotate(180deg);
}

.invoice-payout-title {
  position: relative;
  text-align: center;
  padding-top: 10px;
}

.invoice-payout-title-line1 {
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-lightest);
}

.invoice-payout-title-line2 {
  margin-top: 5px;
  font-size: 20px;
  font-weight: 400;
}
@media (min-width: 768px) {
  .invoice-payout-title-line2 {
    font-size: 26px;
  }
}

.invoice-payout-date-pending {
  color: var(--text-lightest);
}

.invoice-item-status.new {
  background: var(--grey-f5);
}
.invoice-item-status.drafted {
  background: var(--grey-c);
}
.invoice-item-status.scheduled {
  background: var(--grey-8);
}
.invoice-item-status.outstanding {
  background: var(--grey-6);
}
.invoice-item-status.overdue {
  background: var(--color-danger);
}
.invoice-item-status.pending {
  background: var(--color-accent-blue);
}
.invoice-item-status.paid {
  background: var(--color-primary);
}

.invoice-item-recurring-icon {
  position: absolute;
  left: -25px;
  top: 13px;
  height: 18px;
  width: 16px;
  padding-top: 1px;
  font-size: 13px;
  line-height: 1;
  text-align: center;
  color: var(--text-default);
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 3px;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.invoice-item-amount-total {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
}
@media (min-width: 768px) {
  .invoice-item-amount-total {
    font-size: 14px;
  }
}
.invoice-item-amount-total.drafted {
  color: var(--text-muted-alt);
}
.invoice-item-amount-total.scheduled {
  color: var(--text-muted-alt);
}
.invoice-item-amount-total.outstanding, .invoice-item-amount-total.overdue, .invoice-item-amount-total.pending {
  color: var(--color-danger);
}
.invoice-item-amount-total.paid {
  color: var(--color-primary);
}

.invoice-item-amount-paid {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .invoice-item-amount-paid {
    font-size: 14px;
  }
}
.invoice-item-amount-paid.drafted {
  color: var(--text-lightest);
}

.invoice-item-number {
  text-align: right;
  font-size: 16px;
}
@media (min-width: 768px) {
  .invoice-item-number {
    text-align: left;
    font-size: 14px;
  }
}

.invoice-item-bundled-icon {
  margin-right: 6px;
}

.quickbooks-not-allowed {
  width: 20px;
}

.quickbooks-integration-button {
  position: absolute;
  font-size: 26px;
  width: 50px;
  bottom: 10px;
  top: auto;
  right: -15px;
}
@media (min-width: 768px) {
  .quickbooks-integration-button {
    top: 4px;
    bottom: auto;
    right: 7%;
  }
}
.quickbooks-integration-button button {
  background-color: var(--bg-content);
  border: none;
  height: 36px;
  margin: -7px;
}
.quickbooks-integration-button .quickbooks-integration-icon g path:first-child:hover {
  fill: var(--text-muted-alt);
}

.invoice-list-status-label {
  margin: -5px 0;
}
.invoice-list-status-label .document-status-label {
  max-width: 100%;
}

.invoice-client-bitcoin-wrap {
  position: relative;
  max-width: 600px;
  min-height: 100px;
  margin: 0 auto 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  box-shadow: 0 1px 8px color-mix(in srgb, var(--black) 8%, transparent);
  transition: all var(--transition-slow) ease;
}

.invoice-client-bitcoin {
  position: relative;
  border: 5px solid var(--bg-content);
}

.invoice-bitcoin-payment-form-loading {
  position: absolute;
  display: none;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
}

.invoice-client-bitcoin-form {
  padding: 30px 20px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.invoice-client-bitcoin-lines {
  margin-bottom: 20px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}

.invoice-client-bitcoin-subline {
  font-size: 14px;
  color: var(--text-lighter);
}

.invoice-client-bitcoin-address {
  display: inline-block;
  padding: 11px 15px 9px;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.invoice-client-bitcoin-equivalent {
  padding: 15px 10px 5px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-lighter);
}

.invoice-client-bank-info-form,
.invoice-client-contractor-payment-notice {
  padding: 30px;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  background: var(--bg-panel);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}
.invoice-client-page-content.full-invoice .invoice-client-bank-info-form,
.invoice-client-page-content.full-invoice .invoice-client-contractor-payment-notice {
  border: none;
  border-top: 1px solid var(--border-content);
  border-radius: 0;
}
@media (min-width: 768px) {
  .invoice-client-page-content.full-invoice .invoice-client-bank-info-form,
  .invoice-client-page-content.full-invoice .invoice-client-contractor-payment-notice {
    border-radius: 0 0 6px 6px;
  }
}

.invoice-client-bank-info-copy,
.invoice-client-contractor-payment-notice-copy {
  font-size: 14px;
}

.invoice-client-bank-info-copy {
  text-wrap: wrap;
  word-wrap: break-word;
}

.bank-info-details {
  padding-top: 20px;
}

.invoice-client-check-info-copy {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-content);
}

.invoice-client-offline-copy {
  font-size: 14px;
}

.modal-invoice-tip {
  padding: 60px 30px 30px;
  text-align: center;
}
@media (min-width: 678px) {
  .modal-invoice-tip {
    padding: 60px;
  }
}

.modal-invoice-tip-logo-wrapper {
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
  text-align: center;
}

.modal-invoice-tip-title {
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
}

.modal-invoice-tip-amount {
  padding: 10px;
}

.modal-invoice-tip-amount-in {
  padding: 20px 10px 18px;
  text-align: center;
  font-weight: 600;
  font-size: 26px;
  cursor: pointer;
  border: 2px dashed var(--border-content-alt);
  border-radius: 6px;
  transition: all var(--transition-normal) ease;
}
.modal-invoice-tip-amount-in:hover {
  border: 2px solid var(--color-primary);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--color-primary) 20%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 70%, transparent);
}
.modal-invoice-tip-amount.selected .modal-invoice-tip-amount-in {
  border: 2px solid var(--color-primary);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--color-primary) 20%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 70%, transparent);
}

.modal-invoice-tip-amount-calculated {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-lighter);
}

.modal-invoice-tip-cc-form {
  max-width: 380px;
  margin: 40px auto 0;
}

.modal-invoice-tip-skip-section {
  margin-top: 40px;
  text-align: center;
}

.modal-invoice-tip-skip-link {
  font-size: 18px;
  font-weight: 600;
}

.modal-invoice-tip-skip-link-icon {
  position: relative;
  top: -1px;
  margin-left: 10px;
  font-size: 0.8em;
}

.invoice-form-container {
  display: flex;
  position: fixed;
  flex-direction: row;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-content);
  overflow: hidden;
  overflow-y: scroll;
}
.invoice-form-container .invoice-wizard-navigation {
  left: 0px !important;
}

.invoice-form-content {
  position: relative;
  top: var(--navigation-height);
  width: 100%;
  text-align: center;
}

.invoice-form-content-top-bar {
  position: relative;
  height: var(--navigation-height);
  left: 0px;
  right: 0;
}

.invoice-form-project-radio {
  position: relative;
  height: 60px;
  padding: 17px 20px 18px 54px;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-content);
  border-radius: 6px;
  transition: all var(--transition-fast) ease;
}
.invoice-form-project-radio:hover {
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 3%, transparent);
  transform: scale(1.005);
}
.invoice-form-project-radio.active {
  border-color: color-mix(in srgb, var(--color-primary) 75%, transparent);
}
.invoice-form-project-radio:last-child {
  margin-bottom: 0;
}
.invoice-form-project-radio .checkbox-toggle {
  left: 18px;
  top: 18px;
}

.invoice-add-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.invoice-add-row .dropdown-menu a {
  color: var(--text-default) !important;
}

.invoice-add-row svg {
  vertical-align: middle;
}

.invoice-sync-section {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0px;
  border: none;
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast) ease;
  max-width: none;
  overflow: visible;
}
.invoice-sync-section:hover:not(:disabled) {
  background-color: var(--bg-hover-subtle);
}
.invoice-sync-section:disabled {
  cursor: default;
}
.invoice-sync-section--synced .invoice-sync-text {
  color: var(--text-default);
}
.invoice-sync-section--error .invoice-sync-text {
  color: var(--text-default);
}
.invoice-sync-section--compact {
  position: absolute;
  padding: 12px;
  bottom: 10px;
  top: auto;
  right: -15px;
}
@media (min-width: 768px) {
  .invoice-sync-section--compact {
    top: 0;
    bottom: auto;
    right: 7%;
  }
}

.invoice-sync-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.invoice-sync-icon .icon-sync {
  width: 20px;
  height: 20px;
}

.invoice-sync-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-default);
  white-space: nowrap;
}

.invoice-sync-spinner {
  width: 20px !important;
  height: 20px !important;
}
.invoice-sync-spinner .spinner-layer {
  border-color: var(--color-primary);
}

.invoice-sync-checkmark {
  width: 20px;
  height: 20px;
}

.invoice-sync-tooltip-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.invoice-sync-tooltip-link {
  color: var(--color-primary) !important;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.invoice-sync-tooltip-link-icon {
  width: 12px;
  height: 12px;
}

.invoice-sync-tooltip {
  max-width: 220px;
  background-color: var(--bg-content) !important;
  color: var(--text-default) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.4;
  margin-top: -20px !important;
}
.invoice-sync-tooltip--compact {
  margin-top: 0px !important;
  margin-left: 10px;
}
.invoice-sync-tooltip.react-tooltip__show {
  opacity: 1;
}
.invoice-sync-tooltip a {
  color: var(--color-primary) !important;
  text-decoration: none !important;
}

.charge-card-form .saved-credit-card {
  margin: 10px 0 0;
}

.scheduling-header {
  padding: 0 0 40px 0;
  margin: 0 0 40px;
  border-bottom: 1px solid var(--border-content);
}
.scheduling-header h1 {
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 28px;
  line-height: 34px;
  color: var(--text-default);
}

.scheduling-settings {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .scheduling-settings {
    flex-direction: row;
    gap: 60px;
  }
}

.scheduling-upcoming-events {
  flex-grow: 1;
}

.scheduling-event-types {
  width: 100%;
}
@media (min-width: 768px) {
  .scheduling-event-types {
    max-width: 370px;
  }
}

.scheduling-event-types-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.scheduling-event-types-blank-state {
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
  padding: 40px 0;
  text-align: center;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  color: var(--text-lighter);
}

.scheduling-event-types-list {
  margin-top: 30px;
}

.scheduling-event-type {
  position: relative;
  border-top: 1px solid var(--border-content);
  padding: 25px 0 30px 55px;
}
.scheduling-event-type:last-child {
  border-bottom: 1px solid var(--border-content);
}
.scheduling-event-type .scheduling-event-type-icon {
  position: absolute;
  top: 29px;
  left: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--text-default);
  border-radius: 7px;
  font-size: 1.3em;
  line-height: 1em;
  padding-top: 1px;
}
.scheduling-event-type.video-conferencing .scheduling-event-type-icon {
  color: var(--color-info);
  border-color: var(--color-info);
}
.scheduling-event-type.phone-call .scheduling-event-type-icon {
  color: #E27C7C;
  border-color: #E27C7C;
  font-size: 1.5em;
}
.scheduling-event-type.in-person .scheduling-event-type-icon {
  color: var(--color-accent-purple);
  border-color: var(--color-accent-purple);
}
.scheduling-event-type.other .scheduling-event-type-icon {
  color: #E27C7C;
  border-color: #E27C7C;
  font-size: 1.5em;
  padding-top: 3px;
}
.scheduling-event-type .scheduling-event-type-name {
  margin-bottom: 2px;
  font-weight: 600;
  font-size: 16px;
  line-height: 140%;
  color: var(--text-default);
}
.scheduling-event-type .scheduling-event-type-description {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 140%;
  color: var(--text-muted);
}
.scheduling-event-type .scheduling-event-type-links {
  position: relative;
  display: flex;
  z-index: 2;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  line-height: 1em;
  gap: 10px;
}
.scheduling-event-type .scheduling-event-type-links .scheduling-event-type-booking-link {
  font-weight: 600;
}

.scheduling-event-type-booking-copier {
  position: relative;
  padding-left: 23px;
  font-weight: 600;
}
.scheduling-event-type-booking-copier .ion-link {
  position: absolute;
  left: 0;
  top: -1px;
  font-size: 19px;
}

.event-type-buttons.dashboard-mobile-fixed-btn {
  background: var(--bg-content);
  padding: 15px 20px;
  border-top: 1px solid var(--border-content);
}

.event-type-title {
  font-size: 18px;
  color: var(--text-default);
  font-weight: 500;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px var(--bg-grey-f5) solid;
}
@media (min-width: 768px) {
  .event-type-title {
    font-size: 20px;
  }
}
.event-type-title .event-type-title-step-index {
  color: var(--text-muted);
}

.event-type-steps-no-index .event-type-title-step-index {
  display: none;
}

[data-modal-name=scheduling-create-modal] .event-type-finished {
  text-align: center;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
[data-modal-name=scheduling-create-modal] .event-type-finished .event-type-finished-title {
  max-width: 425px;
  line-height: 140%;
  font-size: 18px;
}
[data-modal-name=scheduling-create-modal] .event-type-finished .event-type-finished-title h4 {
  font-size: inherit;
  font-weight: 600;
  font-size: 20px;
}
[data-modal-name=scheduling-create-modal] .event-type-finished .input-group {
  max-width: 500px;
  display: flex;
  flex-direction: row;
}
[data-modal-name=scheduling-create-modal] .event-type-finished .input-group .form-field {
  border-radius: 4px 0 0 4px;
  border-right: none;
  min-width: 320px;
}
[data-modal-name=scheduling-create-modal] .event-type-finished .input-group .btn {
  border-radius: 0 4px 4px 0;
  padding: 12px 20px 10px;
  font-size: 1.7em;
  line-height: 1em;
}

.event-type-steps-tabs.project-header-subnav {
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 1px var(--border-content) solid;
}

.event-type-steps {
  display: flex;
  flex-direction: column;
  position: relative;
  order: -1;
  margin-bottom: 15px;
  margin-left: -15px;
}
.event-type-steps:not(.event-type-steps-no-index)::before {
  position: absolute;
  top: 30px;
  left: 24px;
  background-color: var(--bg-grey-e);
  display: block;
  width: 1px;
  height: 140px;
  content: "";
  z-index: 1;
}
.event-type-steps .event-type-step {
  display: flex;
  z-index: 2;
  align-items: center;
  box-sizing: content-box;
  font-size: 16px;
  border-radius: 8px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 10px;
}
.event-type-steps .event-type-step.disabled {
  opacity: 1;
}
.event-type-steps .event-type-step.disabled .event-type-step-index {
  color: color-mix(in srgb, var(--text-default) 50%, transparent);
}
.event-type-steps .event-type-step.disabled .event-type-step-title {
  opacity: 0.5;
}
.event-type-steps .event-type-step .event-type-step-index {
  font-weight: 600;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 15px;
  color: var(--text-default);
  background-color: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 50%;
}
.event-type-steps .event-type-step.completed .event-type-step-index {
  color: var(--text-lightest);
  background: var(--bg-grey-fc);
}
.event-type-steps .event-type-step:not(.disabled):hover, .event-type-steps .event-type-step.current {
  cursor: pointer;
  color: var(--text-default);
}
.event-type-steps .event-type-step.current {
  background: var(--bg-grey-f5);
}
.event-type-steps .event-type-step.current .event-type-step-index {
  color: var(--color-primary);
  background: var(--bg-content);
  border: 1px solid var(--color-primary);
  box-shadow: 0 0 0 5px var(--bg-grey-f5);
}

.event-type-steps-sm-wrapper .event-type-steps {
  display: flex;
  flex-direction: row;
  position: relative;
  order: -1;
}

.event-type-modal {
  padding: 20px;
}
.event-type-modal .form-label {
  display: flex !important;
}
.event-type-modal .payment-method-icon-img {
  height: 20px;
}
@media (min-width: 992px) {
  .event-type-modal {
    padding: 40px;
  }
}
.event-type-modal .cronofy-availability-rules {
  min-height: 300px;
}
.event-type-modal .AvailabilityViewer {
  margin-bottom: 0;
}
.event-type-modal .AvailabilityViewer .AvailabilityViewer__label--day {
  max-width: 85px;
}
.event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone {
  justify-content: flex-end;
}
.event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone p {
  display: none;
}
.event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone .AvailabilityViewer__timezone-selector {
  max-width: 25rem;
}
.event-type-modal .AvailabilityViewer .AvailabilityViewer__confirmation,
.event-type-modal .AvailabilityViewer .AvailabilityViewer__submit {
  display: none;
}
.event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone-selector--button {
  border: 1px solid var(--border-darker);
}
.event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone-selector--button:hover, .event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone-selector--button:focus, .event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone-selector--button:active, .event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone-selector--button:target {
  box-shadow: none;
  background: var(--bg-content);
  border-color: var(--color-primary);
}
.event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone-selector--selected,
.event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone-selector--focused {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  box-shadow: none;
  border: none;
}
.event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone-selector--selected:hover, .event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone-selector--selected:focus, .event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone-selector--selected:active, .event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone-selector--selected:target,
.event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone-selector--focused:hover,
.event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone-selector--focused:focus,
.event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone-selector--focused:active,
.event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone-selector--focused:target,
.event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone-selector--option:hover,
.event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone-selector--option:focus,
.event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone-selector--option:active,
.event-type-modal .AvailabilityViewer .AvailabilityViewer__timezone-selector--option:target {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  box-shadow: none;
  border: none;
}
.event-type-modal .ion-ios-information-outline {
  font-size: 16px;
  position: relative;
  top: 2px;
  margin-top: -3px;
}
.event-type-modal .event-type-instructions {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 23px;
  color: var(--text-muted);
}
.event-type-modal .event-type-link {
  display: flex;
  flex-direction: column;
}
.event-type-modal .event-type-link .event-type-link-label {
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .event-type-modal .event-type-link {
    align-items: baseline;
    flex-direction: row;
  }
  .event-type-modal .event-type-link .event-type-link-label {
    margin-right: 10px;
    margin-bottom: 0;
  }
  .event-type-modal .event-type-link .event-type-link-input {
    flex-grow: 1;
  }
}
.event-type-modal .color-picker-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.event-type-modal .color-picker-label {
  font-weight: 400;
  font-size: 16px;
}
.event-type-modal .event-type-notification {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
  margin-top: 20px;
}
.event-type-modal .event-type-notification .event-type-notification-label {
  width: 32%;
}
.event-type-modal .event-type-notification .event-type-notification-label, .event-type-modal .event-type-notification .event-type-notification-label .checkbox-label {
  font-size: 13px;
}
@media (min-width: 390px) {
  .event-type-modal .event-type-notification .event-type-notification-label, .event-type-modal .event-type-notification .event-type-notification-label .checkbox-label {
    font-size: 14px;
  }
}
@media (min-width: 768px) {
  .event-type-modal .event-type-notification .event-type-notification-label {
    width: auto;
  }
}
@media (min-width: 768px) {
  .event-type-modal .event-type-notification .event-type-notification-label, .event-type-modal .event-type-notification .event-type-notification-label .checkbox-label {
    font-size: 16px;
    width: auto !important;
  }
}
.event-type-modal .event-type-notification .event-type-notification-interval + .event-type-notification-label, .event-type-modal .event-type-notification .event-type-notification-unit + .event-type-notification-label {
  width: 18%;
}
.event-type-modal .event-type-notification .event-type-notification-interval + .event-type-notification-label, .event-type-modal .event-type-notification .event-type-notification-unit + .event-type-notification-label {
  width: 18%;
}
.event-type-modal .event-type-notification .event-type-notification-interval {
  max-width: 50px;
  flex-grow: 1;
}
.event-type-modal .event-type-notification .event-type-notification-interval input {
  -moz-appearance: textfield;
}
.event-type-modal .event-type-notification .event-type-notification-interval input::-webkit-outer-spin-button, .event-type-modal .event-type-notification .event-type-notification-interval input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.event-type-modal .event-type-notification .event-type-notification-interval .form-field-error {
  padding: 7px 5px 2px;
}
.event-type-modal .event-type-notification .event-type-notification-unit {
  max-width: 120px;
  flex-grow: 1;
}
.event-type-modal .event-type-add-notification {
  font-weight: 600;
}
.event-type-modal .event-type-add-notification i {
  margin-right: 10px;
}
.event-type-modal .event-type-panel {
  border-bottom: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.event-type-modal .event-type-panel:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.event-type-modal .event-type-panel .event-type-panel-content {
  display: none;
}
.event-type-modal .event-type-panel.open .event-type-panel-content {
  display: block;
}
.event-type-modal .event-type-panel-content {
  margin-top: 40px;
}
.event-type-modal .event-type-panel-title {
  cursor: pointer;
  font-weight: 600;
  font-size: 18px;
  line-height: 100%;
  margin: 0;
}
.event-type-modal .event-type-panel-title i {
  font-size: 0.8em;
  margin-right: 15px;
}

.scheduling-upcoming-events-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
}
.scheduling-upcoming-events-header h3 {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
}
.scheduling-upcoming-events-list {
  margin-top: 30px;
}
.scheduling-upcoming-events-list .table-list-container {
  margin-bottom: 20px;
}
.scheduling-upcoming-events-list .scheduling-upcoming-date:last-child .table-list-container {
  margin-bottom: 0;
}
.scheduling-upcoming-events-list .table-list-wrapper {
  min-height: auto;
}

.scheduling-upcoming-date-header {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  align-items: center;
  margin-bottom: 20px;
}
.scheduling-upcoming-date-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  display: block;
  height: 1px;
  top: 10px;
  width: calc(100% - 25px);
  background: var(--bg-grey-e);
}

.scheduling-upcoming-date-day {
  margin: 0;
  padding-right: 15px;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-lighter);
  background: var(--bg-content);
}

.scheduling-upcoming-date-day-icon {
  margin-top: 1px;
  width: 12px;
  height: auto;
  transition: all var(--transition-slower) ease;
}
.scheduling-upcoming-date-day-icon.showing {
  transform: rotate(180deg);
}
.scheduling-upcoming-date-day-icon path {
  fill: var(--border-darker);
}

.scheduling-upcoming-blank-state {
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
  padding: 100px;
  text-align: center;
}
.scheduling-upcoming-blank-state p {
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  color: var(--text-lighter);
  margin-top: 20px;
}

.calendar-connections-providers {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.calendar-connections-blank-provider {
  width: 48%;
  margin-bottom: 10px;
  padding: 20px;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  line-height: 140%;
  color: var(--text-default);
  border: 1px solid var(--border-content);
  border-radius: 8px;
  transition: all var(--transition-fast) ease;
}
.calendar-connections-blank-provider:hover {
  background: var(--bg-content);
  border-color: color-mix(in srgb, var(--color-primary) 70%, transparent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--color-primary) 5%, transparent);
}
.calendar-connections-blank-provider.provider-full-width {
  width: 100%;
}

.calendar-connections-blank-provider-icon {
  width: 25px;
  height: 25px;
}

.calendar-connections-blank-provider-name {
  margin-top: 7px;
  font-weight: 600;
  font-size: 16px;
  color: var(--text-default);
}

.calendar-connections-provider {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin-bottom: 40px;
  color: var(--text-default);
}
.calendar-connections-provider:last-child {
  margin-bottom: 0;
}
.calendar-connections-provider .calendar-connections-provider-details {
  flex-grow: 1;
  line-height: 140%;
}
.calendar-connections-provider .calendar-connections-provider-name {
  font-weight: 600;
  font-size: 16px;
}
.calendar-connections-provider .calendar-connections-provider-description {
  font-size: 14px;
}
.calendar-connections-provider .btn {
  min-width: 140px;
}
.calendar-connections-provider .list-item-dd-toggle {
  position: relative;
  width: auto;
}
.calendar-connections-provider .list-item-dd-toggle .ion-chevron-down {
  display: inline-block;
  margin-left: 10px;
}
.calendar-connections-provider .list-item-dd-toggle.open .ion-chevron-down {
  transform: rotate(180deg);
}

.additional-question {
  border-radius: 10px;
  padding: 10px 15px 15px;
}
.additional-question:hover {
  background: var(--bg-grey-f5);
}
.additional-question:hover div[data-for=question-required-tooltip] {
  opacity: 1;
}
.additional-question div[data-for=question-required-tooltip] {
  opacity: 0;
}
.additional-question div[data-for=question-required-tooltip] i {
  font-size: 1.7em;
  color: var(--color-primary);
}
.additional-question div[data-for=question-required-tooltip] #question-required-tooltip {
  padding: 15px 20px !important;
  margin-top: 8px;
}
.additional-question div[data-for=question-required-tooltip] #question-required-tooltip .flex {
  gap: 15px;
}
.additional-question div[data-for=question-required-tooltip] #question-required-tooltip .flex label {
  margin: 0;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 400;
  line-height: 125%;
}

.calendar-connections-provider-icon {
  width: 25px;
  height: 25px;
}

#calendar-connections-modal .CalendarSync {
  margin-bottom: 0;
}
#calendar-connections-modal .CalendarSync__add-toggle-button {
  display: none;
}
#calendar-connections-modal .CalendarSync__status-icon--tick {
  background: var(--color-primary);
}
#calendar-connections-modal .CalendarSync__edit-toggle-text {
  border: none;
}

.scheduling-tax-abbrev-input {
  margin-top: -3px;
  font-size: 14px;
  margin-bottom: 7px;
  min-height: 19px;
  padding: 2px 5px;
  width: 100%;
}

.scheduling-tax-abbrev-display {
  font-size: 14px;
  margin: -5px 0 11px -7px;
}

.ghost-input-wrapper.has-error .scheduling-tax-abbrev-display {
  margin-left: 0;
}

.scheduling-event-overlay-container {
  max-width: 1000px;
}
.scheduling-event-overlay-container .form-attachment-uploader-progress-bar.input-image-uploader {
  left: auto;
  width: 60px;
}
.scheduling-event-overlay-container .profile-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
}

.scheduling-event-type-overlay-header {
  position: sticky;
  top: 0;
  z-index: 3;
}
.scheduling-event-type-overlay-header .modal-title {
  padding-top: 3px;
}

.scheduling-event-type-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 5;
}
.scheduling-event-type-footer .btn + .btn {
  margin-top: 0 !important;
}

.event-type-deposit-settings {
  border-top: 1px var(--bg-grey-f5) solid;
  border-bottom: 1px var(--bg-grey-f5) solid;
}

.reorder-column-list {
  width: calc(100% + 24px);
  margin: 0 -12px;
}

body.scheduled_events-show,
body.scheduled_events-reschedule,
body.scheduled_events-cancel {
  background: var(--white);
}
body.scheduled_events-show #outer-wrapper,
body.scheduled_events-reschedule #outer-wrapper,
body.scheduled_events-cancel #outer-wrapper {
  background: none;
}
body.scheduled_events-show .page,
body.scheduled_events-reschedule .page,
body.scheduled_events-cancel .page {
  padding-top: 0;
}
body.scheduled_events-show .wrapper-lg,
body.scheduled_events-reschedule .wrapper-lg,
body.scheduled_events-cancel .wrapper-lg {
  padding: 0;
}
@media (min-width: 768px) {
  body.scheduled_events-show,
  body.scheduled_events-reschedule,
  body.scheduled_events-cancel {
    background: var(--grey-f8);
  }
  body.scheduled_events-show .page,
  body.scheduled_events-reschedule .page,
  body.scheduled_events-cancel .page {
    padding-top: 80px;
  }
  body.scheduled_events-show .wrapper-lg,
  body.scheduled_events-reschedule .wrapper-lg,
  body.scheduled_events-cancel .wrapper-lg {
    padding-left: 20px;
    padding-right: 20px;
    max-width: 1240px;
  }
}
body.scheduled_events-show.embed,
body.scheduled_events-reschedule.embed,
body.scheduled_events-cancel.embed {
  background: var(--white);
}
body.scheduled_events-show.embed .page,
body.scheduled_events-reschedule.embed .page,
body.scheduled_events-cancel.embed .page {
  padding: 0;
  background: var(--white);
}
body.scheduled_events-show.embed .wrapper-lg,
body.scheduled_events-reschedule.embed .wrapper-lg,
body.scheduled_events-cancel.embed .wrapper-lg {
  padding: 0;
}

.scheduling {
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: "Proxima Nova", Arial, Helvetica, sans-serif;
  background-color: var(--white);
}
@media (min-width: 768px) {
  .scheduling {
    flex-direction: row;
    border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
    box-shadow: 0px 2px 12px rgba(2, 4, 69, 0.03);
    border-radius: 5px;
  }
}
.customform-page .scheduling {
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.customform-page .scheduling.scheduling-no-slot-selected {
  display: block;
}
.scheduling.success {
  max-width: 576px;
  margin: 0 auto;
}
.scheduling.success .text-strikethrough {
  text-decoration: line-through;
}
.scheduling .scheduling-automation-copy {
  padding: 60px calc(80px - 1em) 0;
}
.scheduling h1,
.scheduling h2,
.scheduling h3,
.scheduling h4,
.scheduling h5 {
  font-family: "Proxima Nova", Arial, Helvetica, sans-serif;
  color: var(--black);
}
.scheduling .btn {
  padding: 9px 20px 7px;
  font-family: "Proxima Nova", Arial, Helvetica, sans-serif;
}
.scheduling .form-field {
  color: var(--black);
  font-weight: 500;
  background: var(--white);
  border: 1px solid var(--grey-c);
}
.scheduling .form-field:hover {
  border-color: var(--black);
}
.scheduling .form-field:focus {
  border-color: var(--black);
}
.scheduling .DTP__wrapper {
  color: var(--black);
}
.scheduling .scheduling-event {
  position: relative;
  flex-grow: 1;
  width: 100%;
  padding: 30px;
  color: var(--black);
}
@media (min-width: 768px) {
  .scheduling .scheduling-event {
    border-radius: 5px 0 0 5px;
    padding: 60px 40px;
    max-width: 360px;
    min-height: 660px;
  }
}
.scheduling .scheduling-event h1, .scheduling .scheduling-event h2, .scheduling .scheduling-event h3 {
  font-family: inherit;
}
.scheduling .scheduling-event .scheduling-event-back {
  font-size: 16px;
  line-height: 140%;
  margin-bottom: 25px;
  display: inline-block;
}
.scheduling .scheduling-event .scheduling-event-back i {
  margin-right: 10px;
  font-size: 0.8em;
}
.scheduling .scheduling-event .scheduling-event-logo {
  margin-bottom: 25px;
  border-radius: 4px;
  display: inline-block;
}
.scheduling .scheduling-event .scheduling-event-logo img {
  width: 50px;
  height: 50px;
  border-radius: 4px;
}
@media (min-width: 768px) {
  .scheduling .scheduling-event .scheduling-event-logo img {
    width: 80px;
    height: 80px;
  }
}
.scheduling .scheduling-event .scheduling-event-company-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 140%;
  margin-bottom: 10px;
  color: inherit;
  opacity: 0.7;
}
@media (min-width: 768px) {
  .scheduling .scheduling-event .scheduling-event-company-name {
    font-size: 16px;
  }
}
.scheduling .scheduling-event .scheduling-event-name {
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
  margin: 0;
  color: inherit;
}
@media (min-width: 768px) {
  .scheduling .scheduling-event .scheduling-event-name {
    font-size: 20px;
  }
}
.scheduling .scheduling-event .scheduling-event-duration, .scheduling .scheduling-event .scheduling-event-deposit {
  font-size: 18px;
  font-weight: 400;
  line-height: 170%;
  margin: 0;
  color: inherit;
  opacity: 0.8;
}
.scheduling .scheduling-event .scheduling-event-description {
  margin: 25px 0 0;
  font-size: 14px;
  line-height: 140%;
  color: inherit;
  word-break: break-word;
}
@media (min-width: 768px) {
  .scheduling .scheduling-event .scheduling-event-description {
    font-size: 16px;
  }
}
.scheduling .scheduling-event .scheduling-event-description:empty {
  display: none;
}
.scheduling .scheduling-event .scheduling-event-reschedule-link {
  display: inline-block;
  margin-top: 25px;
  color: inherit;
  font-size: 16px;
  font-weight: 600;
}
.scheduling .scheduling-event .scheduling-event-reschedule-link-icon {
  margin-right: 10px;
}
.scheduling .scheduling-event .scheduling-event-reschedule-link-icon path {
  fill: currentColor;
}
.scheduling .scheduling-event.with-brand {
  padding: 30px 30px 90px;
}
@media (min-width: 768px) {
  .scheduling .scheduling-event.with-brand {
    padding: 60px 40px;
  }
}
.scheduling .cronofy-date-time-picker {
  padding: 20px 10px;
  color: var(--black);
}
@media (min-width: 768px) {
  .scheduling .cronofy-date-time-picker {
    padding: 60px calc(80px - 1em);
  }
}
.scheduling .cronofy-date-time-picker .DTP {
  display: flex;
  flex-direction: column-reverse;
}
.scheduling .cronofy-date-time-picker .DTP__details {
  margin-top: 20px;
}
@media (min-width: 768px) {
  .scheduling .cronofy-date-time-picker .DTP__details {
    margin-top: 0;
    padding-top: 0;
  }
}
.scheduling .cronofy-date-time-picker .DTP__details--tz {
  justify-content: center;
}
.scheduling .cronofy-date-time-picker .DTP__details--tz .DTP__timezone-selector {
  max-width: 300px;
  margin-left: 10px;
}
.scheduling .cronofy-date-time-picker .DTP__details--duration p {
  display: none;
}
.scheduling .cronofy-date-time-picker .DTP__calendar-header--title {
  font-weight: 500;
  font-size: 23px;
  line-height: 28px;
  color: var(--black);
}
.scheduling .cronofy-date-time-picker .DTP__calendar-grid--button {
  max-height: 54px;
  padding: 0.8em 0;
}
.scheduling .cronofy-date-time-picker .DTP__calendar-grid--focused {
  border-color: none;
  background: none;
  box-shadow: none;
}
.scheduling .cronofy-date-time-picker .DTP__calendar-grid--available {
  border-color: var(--grey-d);
}
.scheduling .cronofy-date-time-picker .DTP__calendar-grid--selected,
.scheduling .cronofy-date-time-picker .DTP__calendar-grid--available:hover {
  color: var(--white);
  font-weight: 500;
  background: var(--color-primary);
  border: 1px solid transparent;
  box-shadow: none;
}
.scheduling .cronofy-date-time-picker .DTP__time-slots-list--header {
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  color: var(--black);
  margin: 40px 0 35px;
}
@media (min-width: 768px) {
  .scheduling .cronofy-date-time-picker .DTP__time-slots-list--header {
    margin-top: 10px;
  }
}
.scheduling .cronofy-date-time-picker #confirm-slot-details {
  margin-bottom: 30px;
  margin-top: 40px;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: var(--black);
}
@media (min-width: 1276px) {
  .scheduling .cronofy-date-time-picker #confirm-slot-details {
    margin-top: 5px;
  }
}
.scheduling .cronofy-date-time-picker #confirm-slot-details .DTP__confirm-details--color-info {
  font-size: inherit;
  margin-bottom: 5px;
  font-weight: 500;
}
.scheduling .cronofy-date-time-picker .DTP__cancel-button,
.scheduling .cronofy-date-time-picker .DTP__confirm-button {
  min-height: 40px;
  width: 80%;
  word-break: break-word;
  white-space: normal;
  padding: 8px 20px 8px;
  font-size: 14px;
  font-weight: 600;
}
.scheduling .cronofy-date-time-picker .DTP__time-slot {
  padding: 10px 0 7px;
  height: auto;
  font-weight: 400;
  width: 80%;
  margin: 0 auto;
}
.scheduling .cronofy-date-time-picker .DTP__cancel-button {
  min-width: 60%;
}
.scheduling .cronofy-date-time-picker .DTP__time-slot, .scheduling .cronofy-date-time-picker .DTP__time-slot:focus, .scheduling .cronofy-date-time-picker .DTP__time-slot:visited,
.scheduling .cronofy-date-time-picker .DTP__cancel-button,
.scheduling .cronofy-date-time-picker .DTP__cancel-button:focus,
.scheduling .cronofy-date-time-picker .DTP__cancel-button:visited {
  color: var(--black);
  background-color: var(--grey-fc);
  border: 1px solid var(--grey-d);
  box-shadow: none;
}
.scheduling .cronofy-date-time-picker .DTP__time-slot:hover,
.scheduling .cronofy-date-time-picker .DTP__cancel-button:hover {
  color: var(--black);
  background-color: var(--grey-fc);
  border: 1px solid var(--grey-c);
  box-shadow: none;
}
.scheduling .cronofy-date-time-picker .DTP__time-slot:active, .scheduling .cronofy-date-time-picker .DTP__time-slot:active:hover,
.scheduling .cronofy-date-time-picker .DTP__cancel-button:active,
.scheduling .cronofy-date-time-picker .DTP__cancel-button:active:hover {
  color: var(--black);
  background-color: var(--grey-fc);
  border: 1px solid var(--grey-c);
  box-shadow: none;
}
.scheduling .cronofy-date-time-picker .DTP__confirm-button {
  font-weight: 600 !important;
}
.scheduling .cronofy-date-time-picker .DTP__confirm-button, .scheduling .cronofy-date-time-picker .DTP__confirm-button:active, .scheduling .cronofy-date-time-picker .DTP__confirm-button:focus, .scheduling .cronofy-date-time-picker .DTP__confirm-button:visited {
  color: var(--white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  background-image: linear-gradient(to bottom, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 98%, var(--black)) 100%);
}
.scheduling .cronofy-date-time-picker .DTP__confirm-button:hover {
  color: var(--white);
  background-color: color-mix(in srgb, var(--color-primary) 98%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 98%, transparent);
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 98%, transparent) 0%, var(--color-primary) 100%);
}
.scheduling .cronofy-date-time-picker .DTP__confirm-button:focus {
  outline: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.scheduling .cronofy-date-time-picker .DTP__confirm-button:active, .scheduling .cronofy-date-time-picker .DTP__confirm-button:active:hover, .scheduling .cronofy-date-time-picker .DTP__confirm-button:active:focus {
  background-color: color-mix(in srgb, var(--color-primary) 98%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 98%, transparent);
  box-shadow: inset 0 2px 5px color-mix(in srgb, var(--black) 10%, transparent);
}
.scheduling .cronofy-date-time-picker .DTP__confirm-button.disabled, .scheduling .cronofy-date-time-picker .DTP__confirm-button[disabled] {
  opacity: 0.5;
}
.scheduling .cronofy-date-time-picker .DTP__confirm-button.disabled, .scheduling .cronofy-date-time-picker .DTP__confirm-button.disabled:focus, .scheduling .cronofy-date-time-picker .DTP__confirm-button.disabled:hover, .scheduling .cronofy-date-time-picker .DTP__confirm-button[disabled], .scheduling .cronofy-date-time-picker .DTP__confirm-button[disabled]:focus, .scheduling .cronofy-date-time-picker .DTP__confirm-button[disabled]:hover {
  color: var(--white);
  background-color: color-mix(in srgb, var(--color-primary) 90%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 90%, transparent);
  background-image: none;
}
.scheduling .cronofy-date-time-picker .DTP__confirm-button:hover, .scheduling .cronofy-date-time-picker .DTP__confirm-button:active {
  box-shadow: none;
  border: none;
}
.scheduling .cronofy-date-time-picker .DTP__confirm-button:visited, .scheduling .cronofy-date-time-picker .DTP__confirm-button:focus {
  box-shadow: none;
  border: none;
  color: var(--white);
}
.scheduling .cronofy-date-time-picker .DTP .DTP__time-slots-list > * + *,
.scheduling .cronofy-date-time-picker .DTP .DTP__slot-list > * + * {
  margin-top: 5px;
}
.scheduling .cronofy-date-time-picker .DTP__calendar-header-button:hover, .scheduling .cronofy-date-time-picker .DTP__calendar-header-button:active, .scheduling .cronofy-date-time-picker .DTP__calendar-header-button:target {
  box-shadow: none;
  background: var(--white);
  border-color: var(--color-primary);
}
.scheduling .cronofy-date-time-picker .DTP__calendar-header-button:hover .DTP__calendar-header-button--icon, .scheduling .cronofy-date-time-picker .DTP__calendar-header-button:active .DTP__calendar-header-button--icon, .scheduling .cronofy-date-time-picker .DTP__calendar-header-button:target .DTP__calendar-header-button--icon {
  fill: var(--color-primary);
}
.scheduling .cronofy-date-time-picker .DTP__timezone-selector--button {
  border: 1px solid var(--grey-c);
}
.scheduling .cronofy-date-time-picker .DTP__timezone-selector--button:hover, .scheduling .cronofy-date-time-picker .DTP__timezone-selector--button:focus, .scheduling .cronofy-date-time-picker .DTP__timezone-selector--button:active, .scheduling .cronofy-date-time-picker .DTP__timezone-selector--button:target {
  box-shadow: none;
  background: var(--white);
  border-color: var(--color-primary);
}
.scheduling .cronofy-date-time-picker .DTP__timezone-selector--selected,
.scheduling .cronofy-date-time-picker .DTP__timezone-selector--focused {
  background: var(--color-primary);
  color: var(--white);
  box-shadow: none;
  border: none;
}
.scheduling .cronofy-date-time-picker .DTP__timezone-selector--selected:hover, .scheduling .cronofy-date-time-picker .DTP__timezone-selector--selected:focus, .scheduling .cronofy-date-time-picker .DTP__timezone-selector--selected:active, .scheduling .cronofy-date-time-picker .DTP__timezone-selector--selected:target,
.scheduling .cronofy-date-time-picker .DTP__timezone-selector--focused:hover,
.scheduling .cronofy-date-time-picker .DTP__timezone-selector--focused:focus,
.scheduling .cronofy-date-time-picker .DTP__timezone-selector--focused:active,
.scheduling .cronofy-date-time-picker .DTP__timezone-selector--focused:target,
.scheduling .cronofy-date-time-picker .DTP__timezone-selector--option:hover,
.scheduling .cronofy-date-time-picker .DTP__timezone-selector--option:focus,
.scheduling .cronofy-date-time-picker .DTP__timezone-selector--option:active,
.scheduling .cronofy-date-time-picker .DTP__timezone-selector--option:target {
  background: var(--color-primary);
  color: var(--white);
  box-shadow: none;
  border: none;
}
@media (min-width: 768px) {
  .scheduling .cronofy-date-time-picker .DTP__wrapper {
    min-height: 490px;
  }
  .scheduling .cronofy-date-time-picker .DTP__time-slots-group--wrapper {
    height: 390px;
    overflow-y: scroll;
  }
}
.scheduling .scheduling-event-form {
  padding: 30px;
}
@media (min-width: 768px) {
  .scheduling .scheduling-event-form {
    padding: 50px;
    width: 100%;
    max-width: 500px;
    min-height: 600px;
  }
}
.scheduling .scheduling-event-form h4 {
  font-weight: 600;
  font-size: 23px;
  line-height: 28px;
  margin-bottom: 40px;
}
.scheduling .scheduling-event-form .form-label {
  font-weight: 600;
  font-size: 16px;
  font-family: "Proxima Nova", Arial, Helvetica, sans-serif;
  line-height: 29px;
  color: #292A2D;
  text-transform: none;
  letter-spacing: normal;
}
.scheduling .StripeElement {
  padding: 10px;
  border: 1px var(--grey-c) solid;
  border-radius: 4px;
}
.scheduling .scheduling-success {
  margin: 0 auto;
  text-align: center;
}
@media (min-width: 768px) {
  .scheduling .scheduling-success {
    width: 100%;
  }
}
.scheduling .scheduling-success .confirm-checkmark {
  width: 57px;
  height: 57px;
  margin-bottom: 25px;
}
.scheduling .scheduling-success .confirm-checkmark,
.scheduling .scheduling-success .confirm-checkmark-circle {
  stroke: #22AD01;
}
.scheduling .scheduling-success .scheduling-success-title {
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 30px;
  line-height: 37px;
}
.scheduling .scheduling-success .scheduling-success-subtitle {
  font-weight: 400;
  font-size: 16px;
  line-height: 31px;
  color: var(--black);
  margin-bottom: 40px;
}
.scheduling .scheduling-success .scheduling-event-details {
  border-top: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  padding: 40px 0;
  width: 100%;
  color: #292A2D;
}
.scheduling .scheduling-success .scheduling-event-name {
  font-size: 20px;
  font-size: 20px;
  line-height: 150%;
}
.scheduling .scheduling-success .scheduling-event-duration, .scheduling .scheduling-success .scheduling-event-deposit {
  font-size: 18px;
}
.scheduling .scheduling-success .scheduling-event-time {
  font-weight: 400;
  font-size: 16px;
  line-height: 31px;
  margin-top: 15px;
}
.scheduling .scheduling-success .scheduling-event-location {
  font-size: 16px;
  line-height: 23px;
  margin-top: 15px;
}
.scheduling .scheduling-success .scheduling-event-location i {
  color: var(--color-primary);
  margin-right: 10px;
}
.scheduling .scheduling-success .scheduling-success-bonsai {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  margin-top: 60px;
}
.scheduling .scheduling-success .scheduling-success-bonsai a {
  font-weight: 600;
  color: var(--color-primary);
}
.scheduling .scheduling-powered {
  margin: 20px 0;
  text-align: center;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
}
.scheduling .scheduling-powered a {
  font-family: "Proxima Nova", Arial, Helvetica, sans-serif;
  font-weight: 600;
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .scheduling .scheduling-powered {
    position: absolute;
    bottom: 25px;
    right: 30px;
    margin: 0;
  }
}

.event-type-modal .Select__theme .Select__single-value {
  width: 100%;
  padding-right: 10px;
}
.event-type-modal .Select__theme .theme-option {
  display: flex;
  align-items: center;
}
.event-type-modal .Select__theme .theme-option span {
  flex-grow: 1;
}
.event-type-modal .Select__theme .theme-option .theme-sidebar-color,
.event-type-modal .Select__theme .theme-option .theme-sidebar-text-color,
.event-type-modal .Select__theme .theme-option .theme-brand-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  margin-left: 6px;
}
.event-type-modal .Select__theme .Select__menu .theme-option {
  padding-right: 27px;
}
.event-type-modal .booking-preview {
  background: var(--white);
  border: 1px solid var(--grey-e);
  padding: 30px 40px;
  max-width: 240px;
  margin-left: 18px;
}
.event-type-modal .booking-preview .booking-preview-container {
  display: flex;
  flex-direction: row;
  border: 1px solid var(--grey-e);
  border-radius: 5px;
}
.event-type-modal .booking-preview .booking-preview-sidebar {
  background: #005542;
  width: 40%;
  padding: 25px 10px;
  min-height: 110px;
  border-radius: 5px 0 0 5px;
}
.event-type-modal .booking-preview .booking-preview-content {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  background: var(--grey-fa);
  width: 60%;
  padding: 12px;
}
.event-type-modal .booking-preview .booking-preview-title {
  background: var(--white);
  height: 5px;
  border-radius: 5px;
  margin-bottom: 5px;
}
.event-type-modal .booking-preview .booking-preview-text {
  background: var(--white);
  height: 4px;
  border-radius: 5px;
  width: 80%;
}
.event-type-modal .booking-preview .booking-preview-cta {
  background: var(--grey-6);
  border-radius: 4px;
  height: 15px;
  width: 40px;
}

.event-type-modal .Select__theme .theme-option.standard .theme-sidebar-color {
  background: #ECF0F1;
}
.event-type-modal .Select__theme .theme-option.standard .theme-brand-color {
  background: #DFE5E7;
}
.event-type-modal .booking-preview.standard .booking-preview-sidebar {
  background: #ECF0F1;
}
.event-type-modal .booking-preview.standard .booking-preview-title {
  background: black;
}
.event-type-modal .booking-preview.standard .booking-preview-text {
  background: black;
}
.event-type-modal .booking-preview.standard .booking-preview-cta {
  background: #DFE5E7;
}

.event-type-modal .Select__theme .theme-option.classic .theme-sidebar-color {
  background: #005542;
}
.event-type-modal .Select__theme .theme-option.classic .theme-brand-color {
  background: #65816D;
}
.event-type-modal .booking-preview.classic .booking-preview-sidebar {
  background: #005542;
}
.event-type-modal .booking-preview.classic .booking-preview-title {
  background: white;
}
.event-type-modal .booking-preview.classic .booking-preview-text {
  background: white;
}
.event-type-modal .booking-preview.classic .booking-preview-cta {
  background: #65816D;
}

.event-type-modal .Select__theme .theme-option.fun .theme-sidebar-color {
  background: #FFAF3E;
}
.event-type-modal .Select__theme .theme-option.fun .theme-brand-color {
  background: #FFD43E;
}
.event-type-modal .booking-preview.fun .booking-preview-sidebar {
  background: #FFAF3E;
}
.event-type-modal .booking-preview.fun .booking-preview-title {
  background: black;
}
.event-type-modal .booking-preview.fun .booking-preview-text {
  background: black;
}
.event-type-modal .booking-preview.fun .booking-preview-cta {
  background: #FFD43E;
}

.event-type-modal .Select__theme .theme-option.sky .theme-sidebar-color {
  background: #CBEAEA;
}
.event-type-modal .Select__theme .theme-option.sky .theme-brand-color {
  background: #A9D7D7;
}
.event-type-modal .booking-preview.sky .booking-preview-sidebar {
  background: #CBEAEA;
}
.event-type-modal .booking-preview.sky .booking-preview-title {
  background: black;
}
.event-type-modal .booking-preview.sky .booking-preview-text {
  background: black;
}
.event-type-modal .booking-preview.sky .booking-preview-cta {
  background: #A9D7D7;
}

.event-type-modal .Select__theme .theme-option.coffee .theme-sidebar-color {
  background: #382225;
}
.event-type-modal .Select__theme .theme-option.coffee .theme-brand-color {
  background: #A97A60;
}
.event-type-modal .booking-preview.coffee .booking-preview-sidebar {
  background: #382225;
}
.event-type-modal .booking-preview.coffee .booking-preview-title {
  background: white;
}
.event-type-modal .booking-preview.coffee .booking-preview-text {
  background: white;
}
.event-type-modal .booking-preview.coffee .booking-preview-cta {
  background: #A97A60;
}

.event-type-modal .Select__theme .theme-option.olive .theme-sidebar-color {
  background: #7F8368;
}
.event-type-modal .Select__theme .theme-option.olive .theme-brand-color {
  background: #999988;
}
.event-type-modal .booking-preview.olive .booking-preview-sidebar {
  background: #7F8368;
}
.event-type-modal .booking-preview.olive .booking-preview-title {
  background: white;
}
.event-type-modal .booking-preview.olive .booking-preview-text {
  background: white;
}
.event-type-modal .booking-preview.olive .booking-preview-cta {
  background: #999988;
}

.payment-methods-body {
  position: relative;
  padding: 40px 20px 40px;
  border-radius: 6px 6px 0 0;
}
@media (min-width: 768px) {
  .payment-methods-body {
    padding: 40px;
  }
}

.payment-methods-title {
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 600;
  text-align: left;
}

.payment-methods-subtitle {
  margin-bottom: 40px;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  color: var(--text-muted);
}

.payment-methods-item {
  position: relative;
  margin-bottom: 20px;
  padding: 30px;
  text-align: left;
  cursor: default;
  background-color: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 10px;
}
.payment-methods-item:last-child {
  margin-bottom: 0;
}
.payment-methods-item.offline-payments {
  margin-bottom: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.payment-methods-item.without-subtext {
  margin-bottom: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.payment-methods-item-logo {
  display: block;
  width: 140px;
  height: auto;
  margin-bottom: 30px;
}
.payment-methods-item-logo.stripe {
  width: 75px;
}
.payment-methods-item-logo.paypal {
  width: 80px;
  margin-top: -5px;
}
.payment-methods-item-logo.bonsai-payments {
  display: block;
  width: 130px;
  height: auto;
}

.payment-methods-option {
  position: relative;
  margin-top: 15px;
}

.payment-method-external-payouts {
  margin-top: 30px;
  text-align: right;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12px;
}

.payment-methods-option-label {
  position: relative;
  padding-left: 40px;
  user-select: none;
}

.payment-methods-option-id {
  position: absolute;
  right: 60px;
  top: 22px;
  max-width: 160px;
  font-size: 12px;
  color: var(--text-lighter);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .payment-methods-option-id {
    max-width: 250px;
  }
}

.payment-methods-item-fees {
  margin-left: 15px;
  padding-top: 3px;
  font-size: 12px;
  font-weight: 500;
}
.payment-methods-item-fees, .payment-methods-item-fees:focus, .payment-methods-item-fees:visited {
  color: var(--text-muted-alt);
}
.payment-methods-item-fees:hover, .payment-methods-item-fees:active {
  color: var(--text-muted-alt);
  text-decoration: underline;
}

.payment-methods-item-fees-icon {
  position: relative;
  display: inline-block;
  top: 1px;
  transform: scale(1.3);
}

.payment-method-fees-on-toggle {
  position: absolute;
  right: 0;
  top: 3px;
}
.payment-method-fees-on-toggle .payment-method-icon-img {
  height: 15px;
}
@media (min-width: 768px) {
  .payment-method-fees-on-toggle .payment-method-icon-img {
    height: 24px;
  }
}

.payment-methods-option-toggle .form-switch {
  position: absolute;
  left: 0;
  top: 9px;
}
.payment-methods-option-toggle.without-subtext .form-switch {
  position: absolute;
  left: 0;
  top: 1px;
}

.payment-methods-option-toggle-subtext {
  margin-top: 2px;
  color: var(--text-lighter);
  font-size: 12px;
  font-weight: 400;
}

.payment-methods-offline-title {
  margin-top: 40px;
  margin-bottom: 20px;
  font-size: 16px;
  text-align: left;
  color: var(--text-muted);
}

.payment-methods-auto-pay-note {
  padding-top: 25px;
  margin-top: 30px;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-content);
}

.payment-methods-balance-promo {
  position: relative;
  padding: 30px;
  margin-top: 40px;
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
}
@media (min-width: 768px) {
  .payment-methods-balance-promo {
    margin-top: 60px;
  }
}

.payment-methods-balance-promo-header {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
}

.payment-methods-balance-promo-copy {
  max-width: 80%;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
}

.payment-methods-balance-promo-bg {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  border-radius: 6px;
  background: var(--bg-content) right bottom no-repeat;
  background-size: cover;
  background-image: url("bonsai-cash/balance-promo-bg.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .payment-methods-balance-promo-bg {
    background-image: url("bonsai-cash/balance-promo-bg@2x.png");
  }
}

.payment-methods-balance-promo-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  cursor: pointer;
  opacity: 0.2;
}
.payment-methods-balance-promo-close:hover {
  opacity: 0.4;
}
.payment-methods-balance-promo-close svg {
  width: 12px;
  height: auto;
}

.client-portal-details-modal {
  position: relative;
}

.client-portal-details-modal-content {
  position: relative;
  padding: 30px;
}
.client-portal-details-modal-content label {
  color: var(--text-default);
}
@media (min-width: 768px) {
  .client-portal-details-modal-content {
    padding: 60px;
  }
}
.client-portal-details-modal-content h2 {
  margin-bottom: 20px;
  font-size: 26px;
  font-weight: 600;
}
.client-portal-details-modal-content .email-field-container {
  display: flex;
}
.client-portal-details-modal-content .email-field-container .email-field {
  flex: 3;
  text-overflow: ellipsis;
  border-radius: 3px 0 0 3px;
  color: var(--text-muted-alt);
}
.client-portal-details-modal-content .email-field-container .btn {
  height: 40px;
  width: 117px;
  border-radius: 0 3px 3px 0;
}
.client-portal-details-modal-content .portal-field-error {
  width: 287px;
}
.client-portal-details-modal-content .settings-page-editing-notice {
  color: var(--text-default);
  background: var(--bg-info-lighter);
  border: 1px solid var(--bg-info);
  border-left: 5px solid var(--color-info);
  display: flex;
  align-items: center;
}
.client-portal-details-modal-content .settings-page-editing-notice-icon, .client-portal-details-modal-content .settings-page-editing-lock-icon {
  top: 22px;
  font-size: 24px;
}

.must-upgrade-notice-text {
  width: 200px;
  margin-right: 15px;
}

.email-field {
  flex: 3;
  text-overflow: ellipsis;
}

.client-portal-details-modal-bg {
  position: absolute;
  display: none;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40%;
  border-left: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  background: var(--bg-grey-f5);
  border-radius: 0 6px 6px 0;
}
@media (min-width: 768px) {
  .client-portal-details-modal-bg {
    display: block;
  }
}

.client-portal-details-modal-bg-1 {
  position: absolute;
  right: 0;
  top: 90px;
  left: 66px;
  bottom: 90px;
  background: var(--bg-content) url("clients/client-portal-promo.png") top left no-repeat;
  background-size: cover;
  border-radius: 20px 0 0 20px;
  box-shadow: -1px 1px 10px color-mix(in srgb, var(--bg-shadow) 10%, transparent);
}
@media only screen and (min-resolution: 1.5dppx) {
  .client-portal-details-modal-bg-1 {
    background-image: url("clients/client-portal-promo@2x.png");
  }
}

.client-portal-details-modal-status {
  position: absolute;
  right: 45px;
  top: 32px;
  padding: 5px 15px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-lighter);
  background: var(--bg-grey-e);
  border-radius: 20px;
}
.client-portal-details-modal-status.enabled {
  color: var(--color-primary);
  background: var(--bg-brand-muted);
}
@media (min-width: 768px) {
  .client-portal-details-modal-status {
    right: 60px;
    top: 64px;
  }
}

.client-portal-details-modal-copy {
  margin-bottom: 30px;
  font-size: 16px;
  color: var(--text-muted);
}
.client-portal-details-modal-copy p {
  margin-bottom: 30px;
}

.client-portal-details-modal-config {
  margin-top: 30px;
  padding-top: 30px;
  color: var(--text-default);
  font-size: 14px;
  border-top: 1px solid var(--border-content);
}

.client-portal-details-modal-settings {
  margin-top: 20px;
  color: var(--text-muted);
}

.client-portal-details-modal-upgrade-link {
  font-weight: 600;
  width: 140px;
  min-height: 40px;
}
.client-portal-details-modal-upgrade-link, .client-portal-details-modal-upgrade-link:focus, .client-portal-details-modal-upgrade-link:visited {
  color: var(--text-info-dark);
}
.client-portal-details-modal-upgrade-link:hover, .client-portal-details-modal-upgrade-link:active {
  color: color-mix(in srgb, var(--text-info-dark) 95%, transparent);
}

.btn-copy-link {
  max-height: 40px;
  width: 117px;
  background-color: var(--text-lighter);
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 0 3px 3px 0;
  padding: 7px 10px 7px;
}

.copy-url-portal {
  margin-top: 3px;
}

.btn-dark .ion-link {
  font-size: 30px;
  height: 40px;
}

.mt-22 {
  margin-top: 22px;
}

.client-portal-company-logo {
  position: absolute;
  z-index: 2;
  display: inline-block;
  left: 50%;
}
.client-portal-company-logo.logo-small_square {
  top: -42px;
  margin-left: -42px;
}
.client-portal-company-logo.logo-small_square .client-portal-company-logo-img {
  width: 84px;
  height: 84px;
}
.client-portal-company-logo.logo-big_square {
  top: -60px;
  margin-left: -60px;
}
.client-portal-company-logo.logo-big_square .client-portal-company-logo-img {
  width: 120px;
  height: 120px;
}
.client-portal-company-logo.logo-small_rectangle {
  top: -40px;
  margin-left: -70px;
}
.client-portal-company-logo.logo-small_rectangle .client-portal-company-logo-img {
  width: 140px;
  height: 80px;
}
.client-portal-company-logo.logo-big_rectangle {
  top: -50px;
  margin-left: -100px;
}
.client-portal-company-logo.logo-big_rectangle .client-portal-company-logo-img {
  width: 200px;
  height: 100px;
}

.client-portal-company-logo-img {
  position: relative;
  display: inline-block;
  margin: auto;
  vertical-align: middle;
  cursor: pointer;
  background: var(--bg-content) center center no-repeat;
  border: 2px solid var(--bg-content);
  background-size: cover;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--bg-shadow) 4%, transparent), 0 0px 0px 1px color-mix(in srgb, var(--black) 3%, transparent);
  border-radius: 4px;
}

.client-portal-auth {
  position: relative;
  z-index: 10;
  margin-top: -60px;
  padding: 60px 30px;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 14px;
}
.client-portal-auth.with-logo {
  padding-top: 75px;
}
.client-portal-auth.within-modal {
  margin-top: 0;
  background: none;
  border: none;
}
.client-portal-auth.with-brand {
  border-radius: 14px 14px 0 0;
}
@media (min-width: 768px) {
  .client-portal-auth {
    margin-top: -90px;
    padding: 75px 60px;
  }
  .client-portal-auth.within-modal {
    margin-top: 0;
    padding: 60px;
    border: none;
  }
}

.client-portal-auth-header {
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .client-portal-auth-header {
    font-size: 22px;
  }
}

.client-portal-auth-field-label {
  margin-bottom: 30px;
  font-size: 16px;
  color: var(--text-lighter);
}

.client-portal-auth-success {
  margin-top: 40px;
  padding: 40px;
  background: var(--bg-grey-fc);
  border-radius: 22px;
}

.client-portal-auth-success-copy {
  font-size: 16px;
  color: var(--text-muted);
}

.client-portal-auth-success-icon {
  line-height: 0;
  font-size: 80px;
  color: var(--color-primary);
}

.client-portal-projects {
  position: relative;
  z-index: 10;
  margin-top: -45px;
  padding: 60px 30px;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 14px;
}
.client-portal-projects.with-logo {
  padding-top: 90px;
}
.client-portal-projects.with-brand {
  border-radius: 14px 14px 0 0;
}
@media (min-width: 768px) {
  .client-portal-projects {
    padding: 75px 60px;
  }
  .client-portal-projects.with-logo {
    padding-top: 100px;
  }
}

.client-portal-projects-item {
  display: block;
  margin-bottom: 10px;
  padding: 20px 20px 18px;
  font-size: 18px;
  font-weight: 600;
  border: 1px solid var(--border-content);
  border-radius: 4px;
  transition: all var(--transition-fast) ease;
}
.client-portal-projects-item:last-child {
  margin-bottom: 0;
}
.client-portal-projects-item:hover {
  border-color: var(--border-content-alt);
}

.client-portal-projects-empty {
  padding: 40px;
  font-size: 16px;
  color: var(--text-lighter);
  background: var(--bg-grey-fc);
  border-radius: 22px;
}

.client-portal-projects-signout {
  padding: 40px;
  text-align: center;
  color: var(--text-lighter);
}

.client-portal-projects-signout-link, .client-portal-projects-signout-link:focus, .client-portal-projects-signout-link:visited {
  color: var(--text-lighter);
}
.client-portal-projects-signout-link:hover, .client-portal-projects-signout-link:active {
  color: var(--text-muted-alt);
}

.client-portal-settings-wrapper {
  margin: auto;
  padding: 40px 20px 60px;
  border: none;
  box-shadow: none;
}
@media (min-width: 768px) {
  .client-portal-settings-wrapper {
    padding: 40px 40px 90px;
  }
}
@media (min-width: 1080px) {
  .client-portal-settings-wrapper {
    padding: 40px 40px 90px;
  }
}
@media (min-width: 1800px) {
  .client-portal-settings-wrapper {
    padding: 60px 60px 90px;
    max-width: 1760px;
  }
}

.client-portal-settings {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (min-width: 992px) {
  .client-portal-settings {
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
  }
}
.client-portal-settings .copy-to-clipboard-link {
  padding: 8px 13px;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-lighter);
  border-color: var(--border-field);
}
.client-portal-settings #bonsai-branding-tooltip {
  max-width: 290px;
  margin-left: 1px;
}

.client-portal-messaging {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}
.client-portal-messaging .form-label {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}
.client-portal-messaging .form-label svg {
  width: 15px;
  height: 15px;
  margin-top: 2px;
}

.client-portal-settings-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
  flex-grow: 1;
}
@media (min-width: 992px) {
  .client-portal-settings-form {
    flex-grow: 0;
    flex-shrink: 0;
    width: 380px;
  }
}
.client-portal-settings-form .form-group {
  margin-bottom: 0;
}

.client-portal-enabled-section {
  border: 1px solid var(--border-semi-transparent);
  background: var(--bg-content);
  border-radius: 6px;
}

.client-portal-enabled-setting {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.client-portal-link .form-label {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.client-portal-link .form-label-link {
  font-weight: 600;
}
.client-portal-link .form-label-link svg {
  width: 13px;
  height: 13px;
  margin-right: 5px;
  margin-bottom: -2px;
  fill: var(--color-primary);
}

.client-portal-link-field.form-field-view-only {
  padding-right: 95px;
  cursor: pointer;
}

.client-portal-link-btn {
  position: absolute;
  right: 3px;
  top: 3px;
}

.client-portal-bonsai-branding {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.client-portal-bonsai-branding .form-label {
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}
.client-portal-bonsai-branding .form-label svg {
  width: 15px;
  height: 15px;
  margin-top: 2px;
}

.client-portal-task-permission {
  display: flex;
  align-items: center;
  margin-top: 15px;
}
.client-portal-task-permission .checkbox-sm .checkbox-toggle {
  top: 1px;
}

.client-portal-task-permission-copy {
  font-size: 14px;
}

.portal-access-preview {
  display: none;
  flex-grow: 1;
  width: 100%;
}
@media (min-width: 992px) {
  .portal-access-preview {
    display: block;
  }
}

.portal-access-preview-disabled {
  position: relative;
  z-index: 2;
  padding: 10px 20px;
  text-align: center;
  color: var(--text-default);
  font-weight: 500;
  font-size: 14px;
  background: var(--bg-grey-f8);
  border: 1px solid var(--border-content-alt);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.portal-access-preview-block {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 10px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--black) 2%, transparent);
}
.portal-access-preview-block.portal-access-preview-block--disabled {
  border-radius: 0 0 10px 10px;
}

.portal-access-preview-form-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
.portal-access-preview-form-wrapper.portal-access-preview-form-wrapper--with-background {
  width: 64%;
}

.portal-access-preview-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: stretch;
  max-width: 400px;
  width: 100%;
  padding: 160px 40px 190px;
}

.portal-access-preview-avatar {
  width: 40px;
  height: 40px;
  box-shadow: 0px 1px 6px 0px color-mix(in srgb, var(--black) 10%, transparent);
  background: transparent center no-repeat;
  background-size: cover;
  border-radius: 4px;
}

.portal-access-preview-title {
  flex-grow: 0;
  min-width: 0;
  max-width: 100%;
  margin: 20px 0 15px;
  font-weight: 500;
  font-size: 14px;
  word-wrap: break-word;
}

.portal-access-preview-subtitle {
  width: 100%;
  height: 7px;
  border-radius: 10px;
  background-color: var(--bg-grey-e);
}

.portal-access-preview-subtitle2 {
  width: 43%;
  height: 7px;
  margin-top: 5px;
  border-radius: 10px;
  background-color: var(--bg-grey-e);
}

.portal-access-preview-cta {
  width: 70px;
  height: 24px;
  background-color: var(--color-primary);
  border-radius: 5px;
}

.portal-access-preview-field {
  flex: 1;
  height: 24px;
  margin-right: 10px;
  padding: 4px 5px;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-lighter);
  cursor: default;
  user-select: none;
  border-radius: 6px;
  border: 1px solid var(--border-field);
}

.portal-access-preview-branding {
  position: absolute;
  left: 20px;
  bottom: 20px;
  transform: scale(0.7);
  transform-origin: left bottom;
}

.portal-access-preview-img {
  position: absolute;
  width: 36%;
  top: 10px;
  bottom: 10px;
  right: 10px;
  border-radius: 6px;
  background: var(--bg-grey-f8) center no-repeat;
  background-size: cover;
}

.client-portal-preview {
  display: none;
  flex-grow: 1;
  width: 100%;
}
@media (min-width: 992px) {
  .client-portal-preview {
    position: sticky;
    display: block;
  }
}

.client-portal-preview-block {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 20px;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 10px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--black) 2%, transparent);
}

.client-portal-preview-left {
  flex-shrink: 0;
  width: 240px;
  padding: 20px 0 20px 20px;
}
@media (min-width: 1720px) {
  .client-portal-preview-left {
    padding: 30px 0 30px 30px;
  }
}

.client-portal-preview-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-grow: 1;
  max-width: 100%;
  padding: 20px;
}
@media (min-width: 1720px) {
  .client-portal-preview-right {
    padding: 30px;
  }
}

.client-portal-preview-header {
  position: relative;
  width: 100%;
  min-height: 65px;
  padding-bottom: 16%;
  margin-bottom: 20px;
  border-radius: 10px;
  background: var(--bg-grey-f8) center no-repeat;
  background-size: cover;
}

.client-portal-preview-header-copy {
  position: absolute;
  left: 20px;
  bottom: 15px;
  right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-default);
}
.client-portal-preview-header-copy.client-portal-preview-header-copy--default {
  color: color-mix(in srgb, var(--black) 60%, transparent);
}

.client-portal-preview-avatar {
  width: 40px;
  height: 40px;
  box-shadow: 0px 1px 6px 0px color-mix(in srgb, var(--black) 10%, transparent);
  background: transparent center no-repeat;
  background-size: cover;
  border-radius: 4px;
}

.client-portal-preview-title {
  margin: 25px 0 10px;
  font-weight: 500;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-portal-preview-description {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-default);
}
.client-portal-preview-description a,
.client-portal-preview-description a:focus,
.client-portal-preview-description a:visited,
.client-portal-preview-description a:hover,
.client-portal-preview-description a:active {
  color: var(--text-default);
  text-decoration: underline;
}

.client-portal-preview-cta {
  width: 100%;
  height: 7px;
  border-radius: 10px;
  background-color: var(--bg-grey-e);
}

.client-portal-preview-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 10px 20px;
  margin-bottom: 60px;
  border: 1px solid var(--border-content-alt);
  border-radius: 10px;
}

.client-portal-preview-section-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-content);
}
.client-portal-preview-section-row:last-child {
  border-bottom: none;
}

.client-portal-preview-copy {
  width: 100%;
  height: 7px;
  border-radius: 10px;
  background-color: var(--bg-grey-e);
}

.client-portal-preview-cta {
  background-color: var(--color-primary);
  border-radius: 5px;
  max-width: 70px;
  height: 24px;
}

.client-portal-preview-text {
  color: var(--text-default);
  text-align: center;
  font-weight: 400;
  line-height: 20px;
}
.client-portal-preview-text a,
.client-portal-preview-text a:focus,
.client-portal-preview-text a:visited,
.client-portal-preview-text a:hover,
.client-portal-preview-text a:active {
  color: var(--text-default) !important;
  text-decoration: underline;
}

.client-portal-preview-projects {
  display: flex;
  flex-direction: row;
  gap: 3%;
  flex-wrap: nowrap;
  margin-bottom: 20px;
}

.client-portal-preview-project {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 50%;
  padding: 15px;
  border: 1px solid var(--border-content-alt);
  border-radius: 10px;
}
.client-portal-preview-project:nth-child(2) {
  display: none;
}
@media (min-width: 1400px) {
  .client-portal-preview-project {
    width: 33%;
  }
  .client-portal-preview-project:nth-child(2) {
    display: flex;
  }
}

.client-portal-preview-project-avatars {
  display: flex;
  flex-direction: row;
}

.client-portal-preview-project-avatar {
  width: 12px;
  height: 12px;
  background: var(--border-content-alt);
  border-radius: 50%;
}
.client-portal-preview-project-avatar:nth-child(2) {
  margin-left: -7px;
  background: var(--bg-grey-c);
}
.client-portal-preview-project-avatar:nth-child(3) {
  margin-left: -7px;
  background: var(--text-lighter);
}

.client-portal-preview-project-status {
  padding: 2px 5px;
  font-size: 6px;
  font-weight: 500;
  color: var(--text-default);
  background: var(--bg-grey-e);
  border-radius: 10px;
}

.client-portal-preview-project-name {
  width: 100%;
  height: 7px;
  margin-top: 20px;
  border-radius: 10px;
  background-color: var(--bg-grey-e);
}

.client-portal-preview-project-name2 {
  width: 72%;
  height: 7px;
  margin-top: 5px;
  border-radius: 10px;
  background-color: var(--bg-grey-e);
}

.client-portal-preview-project-progress {
  position: relative;
  width: 100%;
  height: 2px;
  margin-top: 25px;
  border-radius: 10px;
  background-color: var(--bg-grey-e);
}

.client-portal-preview-project-progress-in {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 25%;
  border-radius: 10px;
  background-color: var(--black);
}

.client-portal-help-notice {
  position: relative;
  padding: 25px 20px;
  background: var(--bg-content);
  border-bottom: 1px solid var(--border-semi-transparent);
  border-radius: 6px 6px 0 0;
}

.client-portal-help-notice-icon-close {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  line-height: 0;
}

.client-portal-help-notice-icon-close-icon {
  width: 10px;
  height: auto;
  opacity: 0.4;
}
.client-portal-help-notice-icon-close:hover .client-portal-help-notice-icon-close-icon {
  opacity: 0.8;
}

.client-portal-help-notice-title {
  color: var(--text-default);
  font-size: 14px;
}

.client-portal-help-notice-text {
  color: var(--text-muted);
  font-weight: 400;
  line-height: 160%;
}

.portal-access-page {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 100vh;
  background: var(--bg-content);
}
@media (min-width: 1200px) {
  .portal-access-page {
    flex-direction: row;
  }
}
.portal-access-page .btn {
  font-weight: 500;
}

.portal-access-background {
  position: relative;
  width: 100%;
  padding-bottom: 130%;
}
@media (min-width: 1200px) {
  .portal-access-background {
    position: absolute;
    right: 20px;
    top: 20px;
    bottom: 20px;
    width: 36%;
    padding-bottom: 0;
  }
}

.portal-access-background-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent no-repeat center center;
  background-size: cover;
}
@media (min-width: 768px) {
  .portal-access-background-image {
    top: 0;
    left: 60px;
    right: 60px;
    bottom: 60px;
    border-radius: 30px;
  }
}
@media (min-width: 1200px) {
  .portal-access-background-image {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

.portal-access-form {
  display: flex;
  justify-content: center;
  padding: 90px 20px 120px;
  width: 100%;
}
.portal-access-form.portal-access-form--with-logo {
  padding-top: 20px;
  padding-bottom: 90px;
}
@media (min-width: 768px) {
  .portal-access-form {
    padding: 90px 60px 180px;
  }
  .portal-access-form.portal-access-form--with-logo {
    padding-top: 60px;
    padding-bottom: 220px;
  }
}
@media (min-width: 1200px) {
  .portal-access-form {
    padding: 120px 120px 180px;
  }
  .portal-access-form.portal-access-form--with-logo {
    padding-bottom: 220px;
  }
  .portal-access-form.portal-access-form--with-background {
    width: 60%;
  }
}

.portal-access-form-content {
  display: flex;
  flex-direction: column;
  max-width: 560px;
  width: 100%;
}

.portal-access-company-logo {
  margin-bottom: 60px;
}
@media (min-width: 1200px) {
  .portal-access-company-logo {
    margin-bottom: 30px;
  }
}
.portal-access-company-logo.logo-small_square .portal-access-company-logo-img {
  width: 75px;
  height: 75px;
}
.portal-access-company-logo.logo-big_square .portal-access-company-logo-img {
  width: 90px;
  height: 90px;
}
.portal-access-company-logo.logo-small_rectangle .portal-access-company-logo-img {
  width: 140px;
  height: 80px;
}
.portal-access-company-logo.logo-big_rectangle .portal-access-company-logo-img {
  width: 200px;
  height: 100px;
}

.portal-access-company-logo-img {
  background: var(--bg-content) center center no-repeat;
  background-size: cover;
  border-radius: 10px;
}

.portal-access-form-header {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 500;
}
@media (min-width: 768px) {
  .portal-access-form-header {
    font-size: 24px;
  }
}

.portal-access-form-subheader {
  margin-bottom: 40px;
  font-weight: 400;
  font-size: 14px;
}
@media (min-width: 768px) {
  .portal-access-form-subheader {
    font-size: 16px;
  }
}

.portal-access-form-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 768px) {
  .portal-access-form-fields {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
  }
}
.portal-access-form-fields.portal-access-form-fields--completed {
  opacity: 0;
  pointer-events: none;
}

.portal-access-form-input {
  flex: 1;
  text-align: left;
  min-width: 220px;
}

.portal-access-form-submit-btn {
  flex-shrink: 0;
}

.portal-access-form-success {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px 25px;
  color: var(--text-default);
  background: var(--bg-grey-fa);
  border-radius: 10px;
}

.portal-access-form-success-icon {
  width: 21px;
  height: auto;
}
.portal-access-form-success-icon path {
  fill: currentColor;
}

.portal-access-form-success-title {
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 500;
}

.portal-access-form-success-copy {
  font-size: 14px;
  font-weight: 400;
}

.portal-access-powered-bonsai {
  position: relative;
  top: -40px;
}
@media (min-width: 1200px) {
  .portal-access-powered-bonsai {
    position: absolute;
    top: auto;
    bottom: 30px;
    left: 30px;
    transform: translateX(0);
  }
}

.portal-access-selection-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
@media (min-width: 1200px) {
  .portal-access-selection-wrapper.portal-access-selection-wrapper--with-background {
    width: 60%;
    align-items: flex-start;
  }
}

.portal-access-selection {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 90px 20px 220px;
  width: 100%;
}
@media (min-width: 768px) {
  .portal-access-selection {
    max-width: 560px;
    padding-left: 0;
    padding-right: 0;
  }
}
.portal-access-selection.portal-access-selection--with-logo {
  padding-top: 60px;
}

.portal-access-selection-title {
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: 500;
}

.portal-access-signout {
  margin-right: 20px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.5;
}
.portal-access-signout, .portal-access-signout:focus, .portal-access-signout:visited {
  color: var(--text-default);
}
.portal-access-signout:hover, .portal-access-signout:active {
  color: var(--text-default);
  text-decoration: underline;
  opacity: 1;
}

.portal-dashboard-sidebar {
  position: fixed;
  display: flex;
  z-index: 100;
  flex-direction: column;
  justify-content: space-between;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(100% - 60px);
  padding: 40px;
  cursor: default;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  background-color: var(--bg-content);
  opacity: 0;
  appearance: none;
  transform: translateX(100%);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}
@media (min-width: 480px) {
  .portal-dashboard-sidebar {
    width: 320px;
  }
}
@media (min-width: 1200px) {
  .portal-dashboard-sidebar {
    left: 0;
    right: auto;
    opacity: 1;
    appearance: auto;
    transform: translateX(0);
    transition: none;
  }
}
.portal-dashboard-sidebar.portal-dashboard-sidebar--showing {
  opacity: 1;
  appearance: auto;
  transform: translateX(0);
}

.portal-dashboard-sidebar::-webkit-scrollbar {
  display: none;
}

.portal-dashboard-sidebar-title {
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 500;
  word-wrap: break-word;
}
@media (min-width: 768px) {
  .portal-dashboard-sidebar-title {
    font-size: 22px;
  }
}

.portal-dashboard-sidebar-description a {
  text-decoration: underline;
}

.portal-dashboard-sidebar-subtitle {
  font-size: 14px;
  font-weight: 400;
}

.portal-dashboard-sidebar-logo {
  margin-bottom: 30px;
  height: 60px;
  width: auto;
  border-radius: 6px;
}

.portal-dashboard-mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
@media (min-width: 992px) {
  .portal-dashboard-mobile-header {
    padding: 20px 40px;
  }
}
@media (min-width: 1200px) {
  .portal-dashboard-mobile-header {
    display: none;
  }
}

.portal-dashboard-mobile-header-logo {
  height: 30px;
  width: auto;
  border-radius: 4px;
}

.portal-dashboard-mobile-sidebar-toggle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  margin-right: -10px;
}

.portal-dashboard-sidebar-overlay {
  position: fixed;
  z-index: 99;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: color-mix(in srgb, var(--black) 80%, transparent);
  opacity: 0;
  backdrop-filter: blur(3px);
  pointer-events: none;
  transition: opacity var(--transition-normal);
}
.portal-dashboard-sidebar-overlay.portal-dashboard-sidebar-overlay--showing {
  opacity: 1;
  pointer-events: auto;
}

.portal-dashboard-main {
  min-height: 100vh;
  padding: 0px 20px 60px;
}
@media (min-width: 992px) {
  .portal-dashboard-main {
    padding: 0px 40px 60px;
  }
}
@media (min-width: 1200px) {
  .portal-dashboard-main {
    padding: 40px 40px 60px 380px;
  }
}

.portal-dashboard-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-top: 7.7%;
  margin-bottom: 40px;
  background: var(--bg-grey-f8);
  border-radius: 20px;
}

.portal-dashboard-banner-image {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 100%;
  background: none center center no-repeat;
  background-size: cover;
  border-radius: 20px;
}

.portal-dashboard-banner-title {
  position: relative;
  z-index: 2;
  padding: 40px 30px 24px;
  min-height: 85px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-primary-contrast);
}
@media (min-width: 992px) {
  .portal-dashboard-banner-title {
    padding: 40px 40px 34px;
    min-height: 100px;
    font-size: 20px;
  }
}

.portal-section-header {
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 500;
  cursor: default;
}

.portal-dashboard-projects-list {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 30px;
  padding-bottom: 10px;
  overflow-x: scroll;
  overscroll-behavior-x: contain;
}
.portal-dashboard-projects-list::-webkit-scrollbar {
  height: 8px;
}
.portal-dashboard-projects-list::-webkit-scrollbar-thumb:horizontal {
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--black) 20%, transparent);
}
.portal-dashboard-projects-list::-webkit-scrollbar-thumb:horizontal:hover {
  background-color: color-mix(in srgb, var(--black) 30%, transparent);
}

.portal-dashboard-projects-list-fader {
  position: sticky;
  display: flex;
  flex-shrink: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}

.portal-dashboard-projects-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  flex-shrink: 0;
  padding: 40px 30px;
  width: 100%;
  font-size: 16px;
  text-align: center;
  color: color-mix(in srgb, var(--black) 20%, transparent);
  cursor: default;
  background: var(--bg-client-portal-item);
  border-radius: 20px;
}

.portal-dashboard-projects-item {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  flex-grow: 0;
  justify-content: space-between;
  padding: 30px;
  width: 430px;
  border: 1px solid var(--border-semi-transparent);
  border-radius: 20px;
}
.portal-dashboard-projects-item:hover {
  border-color: var(--border-semi-transparent-subtle);
}
.portal-dashboard-projects-item::after {
  content: none !important;
}

.portal-dashboard-projects-item-in {
  display: flex;
  flex-direction: column;
}

.portal-dashboard-projects-item-status-section {
  padding-right: 50px;
}

.portal-dashboard-projects-item-status {
  display: inline-block;
  margin-bottom: 15px;
  padding: 4px 11px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-lighter);
  background: var(--bg-input-hover);
  border-radius: 20px;
}
.portal-dashboard-projects-item-status.portal-dashboard-projects-item-status--active {
  color: var(--text-default);
  background: var(--bg-input-hover);
}

.portal-dashboard-projects-item-members {
  position: absolute;
  right: 27px;
  top: 27px;
}

.portal-dashboard-projects-item-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-default);
}

.portal-dashboard-projects-item-desc {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  word-break: break-word;
  color: color-mix(in srgb, var(--black) 50%, transparent);
}

.portal-dashboard-projects-item-progress {
  position: relative;
  margin-top: 30px;
  height: 4px;
  background: color-mix(in srgb, var(--black) 4%, transparent);
  border-radius: 4px;
  overflow: hidden;
}

.portal-dashboard-projects-item-progress-in {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--black);
  border-radius: 4px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.portal-dashboard-projects-item:hover .portal-dashboard-projects-item-progress-in {
  opacity: 1;
}

.portal-dashboard-widget-section {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: stretch;
}
@media (min-width: 992px) {
  .portal-dashboard-widget-section {
    flex-wrap: nowrap;
  }
}

.portal-section {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-top: 30px;
  padding: 30px;
  color: var(--text-default);
  background-color: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 20px;
}

.portal-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
}

.portal-section-header-link {
  font-size: 14px;
  font-weight: 500;
}

.portal-section-header-link-plus {
  position: relative;
  top: -1px;
  width: 8px;
  height: auto;
  margin-right: 2px;
}
.portal-section-header-link-plus path {
  fill: currentColor;
}
@media (min-width: 768px) {
  .portal-section-header-link-plus {
    display: none;
  }
}

.portal-section-header-count {
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin-left: 10px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 4px;
}

.portal-dashboard-actions.portal-section {
  width: 100%;
}

.portal-dashboard-actions-list {
  display: flex;
  flex-direction: column;
}

.portal-dashboard-action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 0;
  cursor: default;
  border-top: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}
.portal-dashboard-action-item:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}

.portal-dashboard-action-item-btn {
  flex-shrink: 0;
  min-width: 112px;
}

.portal-dashboard-action-item-name {
  font-size: 14px;
  font-weight: 500;
}

.portal-dashboard-action-item-desc {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-semi-transparent-muted);
}

.portal-dashboard-meetings-list {
  display: flex;
  flex-direction: column;
}

.portal-dashboard-meetings-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 20px;
  cursor: default;
  background: var(--bg-client-portal-item);
  border-top: 1px solid var(--border-semi-transparent-alt);
  border-radius: 0 0 10px 10px;
}
.portal-dashboard-meetings-item:first-child {
  border-top: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.portal-dashboard-meetings-item-icon {
  display: flex;
  justify-content: center;
  align-self: self-start;
  flex-shrink: 0;
  margin-top: 2px;
  width: 20px;
  height: 20px;
  background: color-mix(in srgb, var(--black) 5%, transparent);
  border-radius: 5px;
}
.portal-dashboard-meetings-item-icon svg {
  width: 9px;
  height: auto;
}
.portal-dashboard-meetings-item-icon path {
  stroke: var(--text-default);
}

.portal-dashboard-meetings-item-name {
  font-size: 14px;
  font-weight: 500;
}

.portal-dashboard-meetings-item-desc {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;
  color: color-mix(in srgb, var(--black) 60%, transparent);
}

.portal-dashboard-meetings-dd-toggle {
  flex-shrink: 0;
}

.portal-project-page {
  padding-bottom: 60px;
}

.portal-project-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 40px;
}

.portal-project-top-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in srgb, var(--black) 60%, transparent);
  cursor: default;
}

.portal-project-top-breadcrumb-home {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-project-top-breadcrumb-home, .portal-project-top-breadcrumb-home:focus, .portal-project-top-breadcrumb-home:visited {
  color: color-mix(in srgb, var(--black) 60%, transparent);
}
.portal-project-top-breadcrumb-home:hover, .portal-project-top-breadcrumb-home:active {
  color: var(--text-default);
  text-decoration: underline;
}

.portal-project-top-breadcrumb-home-icon {
  position: relative;
  top: 1px;
  width: 10px;
  height: auto;
  margin-right: 7px;
}
.portal-project-top-breadcrumb-home-icon path {
  fill: currentColor;
}

.portal-project-top-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.portal-project-top-right-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in srgb, var(--black) 60%, transparent);
  cursor: default;
}

.portal-project-top-icon {
  position: relative;
  top: -0.5px;
  width: 13px;
  height: auto;
}
.portal-project-top-icon path {
  fill: currentColor;
}

.portal-project-members-tooltip {
  left: auto !important;
  right: 40px;
  top: 50px !important;
}

.portal-project-header-left {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 768px) {
  .portal-project-header-left {
    align-items: center;
    flex-direction: row;
  }
  .portal-project-header-left.portal-project-header-left--with-description {
    align-items: flex-start;
  }
}

.portal-project-header-content {
  margin-top: -4px;
  cursor: default;
}
@media (min-width: 768px) {
  .portal-project-header-content {
    margin-top: -3px;
  }
}

.portal-project-header-logo {
  width: auto;
  height: 26px;
  border-radius: 3px;
}
@media (min-width: 768px) {
  .portal-project-header-logo {
    height: 60px;
    border-radius: 6px;
  }
}

.portal-project-header-title-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.portal-project-header-title {
  font-size: 18px;
  font-weight: 500;
  word-break: break-word;
}
@media (min-width: 768px) {
  .portal-project-header-title {
    font-size: 22px;
  }
}

.portal-project-header-progress {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 3px 11px 3px 8px;
  font-size: 12px;
  font-weight: 500;
  text-wrap: nowrap;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: 20px;
}
.portal-project-header-progress.portal-project-header-progress--overage {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
}

.portal-project-header-progress-icon {
  width: 10px;
  height: auto;
}
.portal-project-header-progress--overage .portal-project-header-progress-icon path {
  fill: var(--color-danger);
}

.portal-project-header-progress-text {
  position: relative;
}

.portal-project-header-desc {
  margin-top: 10px;
  max-width: 800px;
  font-size: 12px;
  font-weight: 400;
}
@media (min-width: 768px) {
  .portal-project-header-desc {
    margin-top: 5px;
    font-size: 14px;
  }
}
.portal-project-header-desc a {
  text-decoration: underline;
}

.portal-project-header-desc-link {
  user-select: none;
}
.portal-project-header-desc-link, .portal-project-header-desc-link:focus, .portal-project-header-desc-link:visited {
  color: var(--text-default);
  text-decoration: underline;
}
.portal-project-header-desc-link:hover, .portal-project-header-desc-link:active {
  color: var(--text-default);
  text-decoration: underline;
}

.portal-project-navigation {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
}

.portal-project-navigation-item {
  display: flex;
  align-items: center;
  padding: 7px 12px 8px;
  line-height: 1;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 20px;
}
.portal-project-navigation-item, .portal-project-navigation-item:focus, .portal-project-navigation-item:visited {
  color: color-mix(in srgb, var(--black) 60%, transparent);
}
.portal-project-navigation-item:hover, .portal-project-navigation-item:active {
  color: var(--text-default);
}
.portal-project-navigation-item.active {
  color: var(--text-default);
  background-color: color-mix(in srgb, var(--black) 4%, transparent);
}

.portal-project-documents {
  display: flex;
  flex-direction: column;
}

.portal-project-document-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}
.portal-project-document-item:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}
.portal-project-document-item, .portal-project-document-item:focus, .portal-project-document-item:visited {
  color: var(--text-default);
}
.portal-project-document-item:hover, .portal-project-document-item:active {
  color: var(--text-default);
}
.portal-project-document-item.portal-project-document-item--link {
  display: block;
  padding: 0;
}

.portal-project-document-item-icon {
  display: flex;
  justify-content: center;
  align-self: self-start;
  flex-shrink: 0;
  margin-top: 2px;
  width: 20px;
  height: 20px;
  background: color-mix(in srgb, var(--black) 5%, transparent);
  border-radius: 5px;
}
.portal-project-document-item-icon svg {
  width: 10px;
  height: auto;
}
.portal-project-document-item-icon path {
  fill: var(--text-default);
}
.portal-project-document-item-icon.portal-project-document-item-icon--Proposal {
  padding-right: 0.5px;
}
.portal-project-document-item-icon.portal-project-document-item-icon--Agreement {
  padding-right: 0.5px;
}

.portal-project-document-item-name {
  font-size: 14px;
  font-weight: 500;
}
.portal-project-document-item:hover .portal-project-document-item-name, .portal-project-document-item:active .portal-project-document-item-name {
  text-decoration: underline;
}

.portal-project-document-item-desc {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;
  color: color-mix(in srgb, var(--black) 60%, transparent);
}

.portal-project-billing-totals {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 0 0;
}

.portal-project-billing-total {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 33.333%;
  max-width: 200px;
}

.portal-project-billing-total-label {
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in srgb, var(--black) 60%, transparent);
}

.portal-project-billing-total-value {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
}

.portal-project-invoices-wrapper {
  margin-top: 30px;
  border-top: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}

.portal-project-messages-wrapper {
  margin-top: 30px;
  border-top: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}

.customform-form-bg {
  background-color: var(--bg-grey-f8);
}
.customform-form-bg #outer-wrapper {
  background-color: var(--bg-grey-f8);
}

.customform-background-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 230px;
}

.customform-background-1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 230px;
  background: transparent center center no-repeat;
  background-size: cover;
}

.customform-form-container {
  background: var(--bg-grey-fc);
  padding-bottom: 100px;
}
.customform-form-container .input-lg, .customform-form-container .input-group-lg > .form-control,
.customform-form-container .input-group-lg > .input-group-addon,
.customform-form-container .input-group-lg > .input-group-btn > .btn {
  font-size: 16px;
}
.customform-form-container .wrapper-sm {
  max-width: 880px;
}

.customform-form-content.with-margin {
  margin-top: 90px;
  margin-bottom: 60px;
}
.customform-form-content.customform-form-embed.without-background {
  margin-top: 0 !important;
  margin-bottom: 60px !important;
  border: none;
}

.customform-form-top {
  position: relative;
  font-size: 16px;
  border-radius: 6px 6px 0 0;
}

.customform-form-status {
  padding: 10px 5px 7px;
  font-size: 14px;
  text-align: center;
  border-bottom: 1px solid color-mix(in srgb, var(--black) 2%, transparent);
}

.customform-form-top-view-only {
  color: var(--color-primary-contrast);
  letter-spacing: 0.075em;
  background: var(--bg-inverse);
}

.customform-form-top-submitted {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  background: var(--color-primary);
}

.customform-form-top-content {
  padding: 40px 40px 0;
}
.customform-form-top-content.with-calendly {
  padding-bottom: 40px;
}
@media (min-width: 690px) {
  .customform-form-top-content.with-calendly {
    padding-bottom: 0;
  }
}
@media (max-width: 480px) {
  .customform-form-top-content {
    padding: 25px 25px 0;
  }
}

.customform-form-header {
  margin-bottom: 0;
  font-size: 22px;
  font-family: inherit;
  line-height: 1.4;
  font-weight: 400;
}
@media (min-width: 480px) {
  .customform-form-header {
    font-size: 30px;
  }
}

.customform-form-description {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
  white-space: pre-line;
  color: inherit;
}
.customform-form-description textarea {
  font-size: 16px;
}

.customform-questions-blank-state {
  padding: 90px 40px;
  text-align: center;
  font-size: 18px;
  color: var(--text-lightest);
}

.customform-section {
  padding: 0 20px 0;
  transition: all var(--transition-fast) ease;
}
@media (min-width: 768px) {
  .customform-section {
    padding: 0 80px 0;
  }
}
.customform-section .form-field {
  font-size: 14px;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--grey-e);
}
@media (min-width: 480px) {
  .customform-section .form-field {
    font-size: 16px;
  }
}
.customform-section .form-field-view-only {
  color: var(--black);
  background: var(--grey-f5);
  border: 1px solid var(--grey-e);
}
.customform-section .form-attachment-uploader-wrapper {
  border: 1px solid var(--grey-e);
}
.customform-section .dropdown-contained .Select__control {
  background: var(--white);
  border: 1px solid var(--grey-e);
}
.customform-section div.Select__single-value {
  color: var(--black);
}

.customform-section.customform-section-title {
  padding-top: 50px;
}
@media (min-width: 768px) {
  .customform-section.customform-section-title {
    padding-top: 60px;
  }
}

.customform-form-item {
  margin: 0;
}
.customform-form-item .form-attachment-uploader-wrapper {
  height: 40px;
  line-height: 20px;
  border: 1px solid var(--grey-e);
}
.customform-form-item .form-attachment-download-icon {
  top: 1px;
  margin-right: 8px;
}
.customform-form-item .form-attachment-uploader-placeholder-icon {
  margin-right: 10px;
  width: 15px;
  height: auto;
}
.customform-form-item .form-attachment-uploader-file-link span {
  bottom: 3px;
  position: relative;
}
@media (min-width: 480px) {
  .customform-form-item .form-attachment-filename {
    font-size: 16px;
  }
}
@media (min-width: 480px) {
  .customform-form-item .form-attachment-uploader-placeholder {
    font-size: 16px;
  }
}
@media (min-width: 480px) {
  .customform-form-item .form-field {
    font-size: 16px;
  }
}
@media (min-width: 480px) {
  .customform-form-item .Select__value-container, .customform-form-item .Select__placeholder {
    font-size: 16px;
  }
}
.customform-form-item.with-error .form-field, .customform-form-item.with-error .form-field:hover, .customform-form-item.with-error .form-field:focus,
.customform-form-item.with-error .SingleDatePicker, .customform-form-item.with-error .SingleDatePickerInput__withBorder {
  border-color: var(--color-danger-dark);
}
.customform-form-item.with-error .dropdown-contained .Select__control,
.customform-form-item.with-error .dropdown-contained .Select__control:hover,
.customform-form-item.with-error .dropdown-contained .Select__control--menu-is-open,
.customform-form-item.with-error .dropdown-contained .Select__control--is-focused {
  border-color: var(--color-danger-dark);
}

.customform-form-item-in {
  position: relative;
  transition: all var(--transition-fast) ease;
  margin-top: 30px;
}
.customform-form-item-in.pa0 {
  padding: 0;
}
@media (min-width: 480px) {
  .customform-form-item-in .Select__placeholder {
    font-size: 16px;
  }
}

.customform-form-item-num {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 20px;
  font-weight: 600;
  color: color-mix(in srgb, var(--black) 8%, transparent);
}

.customform-form-question-label {
  font-weight: 400;
  font-size: 14px;
  font-family: inherit;
  line-height: 29px;
  color: inherit;
}
@media (min-width: 480px) {
  .customform-form-question-label {
    font-size: 16px;
  }
}

.customform-form-ghost-textarea {
  min-height: 61px !important;
  font-size: 18px;
}

.customform-form-textarea {
  height: 80px;
}

.customform-form-item-dateselect {
  display: block;
  position: relative;
  width: 100%;
  max-width: 300px;
}
@media (min-width: 480px) {
  .customform-form-item-dateselect {
    width: 300px;
  }
}
.customform-form-item-dateselect .SingleDatePicker .SingleDatePickerInput,
.customform-form-item-dateselect .DateRangePicker .SingleDatePickerInput {
  background: var(--white);
}
.customform-form-item-dateselect .DateInput {
  background: none;
}
.customform-form-item-dateselect .DateInput_input {
  text-align: left;
  padding: 12px;
  height: 40px;
  font-size: 14px;
  color: var(--black);
}
.customform-form-item-dateselect .DateInput_input::placeholder {
  color: var(--grey-6) !important;
}
@media (min-width: 480px) {
  .customform-form-item-dateselect .DateInput_input {
    font-size: 16px;
  }
}

.customform-form-item-dateselect-icon {
  position: absolute;
  bottom: 11px;
  right: 15px;
  line-height: 20px;
  font-size: 20px;
  color: var(--grey-9);
}

.customform-form-item-option {
  margin-bottom: 20px;
}
.customform-form-item-option:last-child {
  margin-bottom: 0;
}
.customform-form-item-option .radio-label {
  display: inline-block;
  padding: 0 15px 0 28px;
  font-size: 14px;
  border-radius: 5px;
  transition: all var(--transition-normal) ease;
  font-weight: 500;
  line-height: 100%;
}
.customform-form-item-option .radio-label:hover {
  border-color: var(--grey-d);
}
@media (min-width: 480px) {
  .customform-form-item-option .radio-label {
    font-size: 16px;
  }
}
.customform-form-item-option .radio-fill {
  background-color: var(--grey-fa);
  top: 0;
}
.customform-form-item-option .checkbox-label {
  padding: 0 15px 0 28px;
  font-size: 14px;
  border-radius: 5px;
  transition: all var(--transition-normal) ease;
  font-weight: 500;
  line-height: 100%;
}
.customform-form-item-option .checkbox-label:hover {
  border-color: var(--grey-d);
}
@media (min-width: 480px) {
  .customform-form-item-option .checkbox-label {
    font-size: 16px;
  }
}
.customform-form-item-option .checkbox-toggle {
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 3px;
}
.customform-form-item-option .checkbox-unselected {
  background-color: var(--grey-fa);
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--black) 18%, transparent);
}
.customform-form-item-option .checkbox-selected-icon,
.customform-form-item-option .checkbox-unselected-icon {
  width: 10px;
}
.customform-form-item-option .checkbox-toggle-copy {
  color: var(--grey-6);
  line-height: 1.5;
}
.customform-form-item-option .checkbox-focused, .customform-form-item-option .checkbox-label:hover .checkbox-toggle, .checkbox-label:hover .customform-form-item-option .checkbox-toggle {
  border: 0;
}

.customform-form-submit-section {
  position: relative;
  padding-top: 40px;
}
@media (min-width: 480px) {
  .customform-form-submit-section {
    display: flex;
    flex-direction: column;
    padding-top: 60px;
  }
}
.customform-form-submit-section .btn-primary {
  width: 100%;
  font-weight: 400;
}
@media (min-width: 480px) {
  .customform-form-submit-section .btn-primary {
    width: 186px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 480px) {
  .customform-form-submit-section .btn-primary {
    font-size: 14px;
  }
}
.customform-form-submit-section .btn-primary.left {
  margin-left: 0;
}
.customform-form-submit-section .btn-primary.right {
  margin-right: 0;
}

.customform-form-submit-button {
  cursor: default;
}

.customform-form-submit-copy {
  display: none;
  float: right;
  padding: 12px 30px 0px;
  color: var(--grey-9);
  font-size: 18px;
}
@media (min-width: 768px) {
  .customform-form-submit-copy {
    display: inline-block;
  }
}

.customform-form-wysiwyg-editor {
  margin-top: 10px;
  color: inherit;
}
.customform-form-wysiwyg-editor p {
  line-height: 170% !important;
  color: inherit;
}
.customform-form-wysiwyg-editor h1, .customform-form-wysiwyg-editor h2, .customform-form-wysiwyg-editor h3, .customform-form-wysiwyg-editor h4 {
  color: inherit;
}
.customform-form-wysiwyg-editor h4 {
  font-size: 16px !important;
}

.star-rating .star-rating-star {
  display: inline-block;
  margin: 20px 15px 0 0;
  transition: none;
}
.star-rating .star-rating-star-icon {
  font-size: 2em;
  text-shadow: 1px solid #000;
}
.star-rating .star-rating-star-empty {
  color: var(--color-accent-yellow);
}
.star-rating .star-rating-star-selected {
  color: var(--color-accent-yellow);
}
.star-rating.star-rating-disabled .star-rating-star {
  cursor: default;
}

.customform-form-recaptcha {
  margin-bottom: 35px;
}
@media (min-width: 480px) {
  .customform-form-recaptcha {
    margin-left: auto;
    margin-right: auto;
  }
}
.customform-form-recaptcha.left {
  margin-left: 0;
}
.customform-form-recaptcha.right {
  margin-right: 0;
}

.customform-calendly-contact {
  padding-bottom: 40px;
  text-align: center;
  font-size: 14px;
  color: var(--grey-9);
}
.customform-calendly-contact a,
.customform-calendly-contact a:focus,
.customform-calendly-contact a:visited,
.customform-calendly-contact a:hover,
.customform-calendly-contact a:active {
  text-decoration: underline;
}

.customform-form-footer {
  position: fixed;
  width: 100%;
  height: 53px;
  bottom: 0px;
  background: rgba(59, 63, 68, 0.7);
  border-radius: 0px;
}
.customform-form-footer .customform-form-footer-button {
  font-size: 15px;
  height: 33px;
  width: auto;
  font-weight: 600;
  font-size: 15px;
  float: right;
  margin: 10px;
}

.customform-form-completed-icon {
  font-size: 100px;
  color: var(--color-primary);
}

.customform-form-completed-header {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 30px;
  color: var(--text-default);
}

.customform-form-completed-copy {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-default);
}

.customform-form-completed-footer {
  margin-top: 0;
  padding: 40px 20px 30px;
  text-align: center;
  border-top: 1px solid var(--border-content);
}

.customform-form-completed .modal-document-sign-up-promo-top.with-sign-up-container {
  padding: 54px 30px 172px;
  border-bottom: none;
}
@media (min-width: 480px) {
  .customform-form-completed .modal-document-sign-up-promo-top.with-sign-up-container {
    padding: 54px 60px 172px;
  }
}

.customform-share-url-copy {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
}

.customform-share-selection-toggle {
  margin-top: 30px;
}

.copy-to-clipboard-link.customform-share-clipboard-link {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-content-alt);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

.form-control.textarea-copier.customform-share-clipboard-textarea {
  font-size: 14px;
  font-family: monospace;
  padding: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.customform-share-customize {
  margin-bottom: 15px;
}
.customform-share-customize p {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
}

.customform-share-customize-label {
  font-size: 16px;
  font-weight: 400;
  font-family: var(--font-sans-serif);
  position: relative;
  bottom: 6px;
  padding-right: 10px;
}

.customform-share-customize-copy-switch-field {
  display: inline-block;
}

.form-switch-indicator {
  width: 18px;
  height: 18px;
}

.customform-send-modal-form .form-label {
  font-family: var(--font-sans-serif);
}

.custom-form-response-section {
  font-size: 16px;
  margin-bottom: 20px;
}
@media print {
  .custom-form-response-section {
    page-break-after: auto;
  }
}

.custom-form-response-label {
  font-weight: 600;
  margin-bottom: 10px;
}

.custom-form-response-value .star-rating-star {
  margin-top: 0 !important;
}

.custom-form-response-modal-controls {
  position: absolute;
  display: flex;
  justify-content: space-between;
  right: 50px;
  top: 8px;
}
@media (min-width: 768px) {
  .custom-form-response-modal-controls {
    right: 20px;
    top: 37px;
  }
}
@media print {
  .custom-form-response-modal-controls {
    display: none;
  }
}

.custom-form-response-modal-controls-icon {
  width: 40px;
  height: auto;
  padding: 10px;
  cursor: pointer;
}
.custom-form-response-modal-controls-icon path {
  fill: var(--text-default);
}

.custom-form-response-modal-print-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  border-top: 1px solid var(--border-content);
}
@media print {
  .custom-form-response-modal-print-button {
    display: none;
  }
}

@media print {
  .custom-form-response-modal .modal-body,
  .custom-form-response-modal .modal-dialog,
  .custom-form-response-modal .modal-content {
    overflow: hidden;
    box-shadow: none !important;
  }
}
@media print {
  .custom-form-response-modal {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    visibility: visible;
    overflow: visible !important;
  }
  .custom-form-response-modal .modal-header-close {
    display: none;
  }
}

.custom-form-response-list {
  cursor: pointer;
}

.customform-embed #outer-wrapper {
  min-height: auto;
}
@media (min-width: 768px) {
  .customform-embed #outer-wrapper {
    min-height: auto;
  }
}
.customform-embed .customform-form-container {
  box-shadow: none;
}
.customform-embed .wrapper-sm {
  padding: 0 !important;
}

.customform-page {
  position: relative;
}
.customform-page .wrapper-sm {
  max-width: 880px;
}
@media (max-width: 481px) {
  .customform-page .wrapper-sm {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.customform-form-wrapper {
  padding-right: 0;
}
.customform-form-wrapper.with-style-editor {
  min-height: 100vh;
}
@media (min-width: 1200px) {
  .customform-form-wrapper.with-style-editor {
    padding-right: var(--document-editor-width);
  }
  .customform-form-wrapper.with-style-editor .customform-background-wrapper {
    width: calc(100% - var(--document-editor-width));
  }
}

.customform-form-actions {
  padding: 30px 0 30px;
  position: relative;
  z-index: 2;
}
.customform-form-actions.embed-form {
  padding: 0px 0 90px;
  background: transparent;
  border-bottom: none;
}
.customform-form-actions .dropdown-menu {
  left: auto;
  right: -7px;
}

.customform-form-actions-copy-form-link {
  border: none;
}

.customform-form-content {
  position: relative;
  font-size: 16px;
  font-family: Arial, sans-serif;
  color: var(--black);
  background-color: var(--white);
  border-radius: 5px;
  border: 1px solid var(--grey-e);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--black) 2%, transparent);
}
.customform-form-content .checkbox-label {
  font-weight: 500;
  font-size: 16px;
  font-family: inherit;
}
.customform-form-content .checkbox-label .input-md {
  font-weight: 400;
}
.customform-form-content .radio-label {
  font-weight: 500;
  font-size: 16px;
  font-family: inherit;
}
.customform-form-content .radio-label .input-md {
  font-weight: 400;
}
.customform-form-content .ghost-form-control, .customform-form-content .ghost-form-display {
  color: inherit;
  font-family: inherit;
}
.customform-form-content .ghost-form-control:focus, .customform-form-content .ghost-form-display:focus {
  box-shadow: none;
  background: transparent;
}
.customform-form-content .btn {
  font-family: inherit;
}
.customform-form-content .form-label,
.customform-form-content .control-label {
  color: inherit;
}
.customform-form-content.completed {
  background-color: var(--white) !important;
}

.customform-form-description {
  font-size: 16px;
}
@media (min-width: 768px) {
  .customform-form-description {
    font-size: 18px;
  }
}

.customform-form-client-input-instructions {
  position: relative;
}
.customform-form-client-input-instructions.with-notice .customform-form-client-inputs-demo {
  cursor: not-allowed;
  opacity: 0.25;
  filter: blur(1px);
}

.customform-form-client-inputs-demo {
  position: relative;
}

.customform-form-client-input-instructions-text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 70px 60px 50px;
  font-size: 16px;
  color: var(--text-default);
  cursor: default;
}

.question-types-header {
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 18px;
  text-align: left;
}

.question-types-options {
  margin-top: 30px;
}

.question-types-option {
  width: 100%;
  margin-bottom: 5px;
}

.question-types-option-in {
  position: relative;
  padding: 14px 15px 14px 55px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-normal) ease;
  border: 1px solid var(--border-content);
  border-radius: 5px;
  background-color: var(--bg-content);
}
.question-types-option-in, .question-types-option-in:visited, .question-types-option-in:focus {
  color: var(--text-default);
  text-decoration: none;
}
@media (min-width: 768px) {
  .question-types-option-in:hover, .question-types-option-in:active {
    color: var(--text-default);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--color-primary) 20%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 70%, transparent);
  }
}

.question-types-option-icon {
  position: absolute;
  left: 20px;
  top: 14px;
  transition: all var(--transition-normal) ease;
}
.question-types-option-icon.text-input {
  width: 23px;
  height: auto;
  left: 17px;
}
.question-types-option-icon.single-choice {
  width: 27px;
  height: auto;
  top: 16px;
  left: 17px;
}
.question-types-option-icon.multi-choice {
  width: 27px;
  height: auto;
  top: 16px;
  left: 17px;
}
.question-types-option-icon.date-select {
  width: 23px;
  height: auto;
  left: 17px;
  top: 13px;
}
.question-types-option-icon.custom-content {
  width: 20px;
  height: auto;
  left: 18px;
  top: 15px;
}
.question-types-option-icon.attachment {
  width: 20px;
  height: auto;
  top: 15px;
  left: 18px;
}
.question-types-option-icon.file-upload {
  width: 24px;
  height: auto;
  top: 16px;
  left: 16px;
}
.question-types-option-icon.dropdown {
  width: 23px;
  height: auto;
  left: 17px;
}
.question-types-option-icon.star-rating {
  width: 23px;
  height: auto;
  left: 17px;
  top: 13px;
}
.question-types-option-icon.star-rating path {
  stroke: var(--text-default);
}
.question-types-option-icon g[fill=black],
.question-types-option-icon g[fill="#0f1010"],
.question-types-option-icon path[fill=black],
.question-types-option-icon path[fill="#0f1010"] {
  fill: var(--text-default);
}
.question-types-option-icon rect[stroke=black],
.question-types-option-icon rect[stroke="#0f1010"],
.question-types-option-icon line[stroke=black],
.question-types-option-icon line[stroke="#0f1010"] {
  stroke: var(--text-default);
}
.question-types-option-icon g[fill=white],
.question-types-option-icon g[fill="#ffffff"],
.question-types-option-icon path[fill=white],
.question-types-option-icon path[fill="#ffffff"] {
  fill: var(--text-inverse);
}
@media (min-width: 768px) {
  .question-types-option-in:hover .question-types-option-icon {
    opacity: 1;
  }
}

.question-item {
  position: relative;
}

.question-item-type {
  position: absolute;
  right: 0;
  top: 1px;
  padding: 4px 9px 4px;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans-serif);
  color: var(--grey-9);
  background: var(--grey-f5);
  border-radius: 3px;
  transition: all var(--transition-normal) ease;
}
.question-item:hover .question-item-type {
  color: var(--text-lighter);
}
@media (max-width: 767px) {
  .question-item-type {
    display: none;
  }
}

.question-item-controls-wrapper {
  position: absolute;
  display: none;
  top: -10px;
  left: 100%;
  padding: 10px;
  opacity: 0;
  transition: all var(--transition-normal) ease;
}
.question-item:hover .question-item-controls-wrapper, .question-item-controls:hover .question-item-controls-wrapper {
  opacity: 1;
}
@media (min-width: 768px) {
  .question-item-controls-wrapper {
    display: block;
    padding-left: 51px;
  }
}
@media (min-width: 992px) {
  .question-item-controls-wrapper {
    left: 130%;
    padding-left: 90px;
    transform: translateX(0);
  }
  .customform-section:hover .question-item-controls-wrapper, .question-item:hover .question-item-controls-wrapper, .question-item-controls:hover .question-item-controls-wrapper {
    opacity: 1;
    transform: translateX(-195px);
  }
}

.question-item-controls {
  width: 30px;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  box-shadow: 0 1px 12px color-mix(in srgb, var(--black) 5%, transparent);
}

.question-item-controls-up {
  display: block;
  padding: 8px 5px 1px;
}
.question-item-controls-up, .question-item-controls-up:focus, .question-item-controls-up:visited {
  color: var(--text-lighter);
}
.question-item-controls-up:hover, .question-item-controls-up:active {
  color: var(--text-muted-alt);
}
.question-item-controls-up.disabled {
  pointer-events: none;
  opacity: 0.3;
}

.question-item-controls-down {
  display: block;
  padding: 1px 5px 8px;
}
.question-item-controls-down, .question-item-controls-down:focus, .question-item-controls-down:visited {
  color: var(--text-lighter);
}
.question-item-controls-down:hover, .question-item-controls-down:active {
  color: var(--text-muted-alt);
}
.question-item-controls-down.disabled {
  pointer-events: none;
  opacity: 0.3;
}

.question-item-controls-remove {
  display: block;
  height: 32px;
  padding: 9px 5px 5px;
  font-size: 12px;
  border-top: 1px solid var(--border-content);
}

.question-item-controls-remove-icon {
  width: 15px;
  height: auto;
  opacity: 0.7;
}
.question-item-controls-remove-icon path {
  fill: var(--color-danger);
}
.question-item-controls-remove:hover .question-item-controls-remove-icon, .question-item-controls-remove:active .question-item-controls-remove-icon {
  opacity: 1;
}
.question-item-controls-remove:hover .question-item-controls-remove-icon path, .question-item-controls-remove:active .question-item-controls-remove-icon path {
  fill: var(--color-danger);
}

.question-item-controls-options-menu {
  position: absolute;
  z-index: 10001;
  top: -67px;
  right: -20px;
  width: 213px;
  font-family: var(--font-sans-serif);
  color: var(--text-default);
  background: var(--bg-content);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  border-radius: 4px;
  box-shadow: 0 1px 12px color-mix(in srgb, var(--bg-shadow) 8%, transparent);
  transform: translateY(10px);
  transition: all var(--transition-fast) ease;
  text-align: left;
  padding: 15px;
}
.question-item-controls-options-menu.open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.question-item-controls-options-menu:before {
  position: absolute;
  bottom: -10px;
  right: 24px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 11px 0 11px;
  border-color: var(--bg-grey-f5) transparent transparent transparent;
}
.question-item-controls-options-menu:after {
  position: absolute;
  bottom: -9px;
  right: 25px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 10px 0 10px;
  border-color: var(--bg-content) transparent transparent transparent;
}

.question-item-controls-options-menu-switch {
  position: absolute;
  right: 6px;
  top: 6px;
}

.question-item-controls-gear {
  padding-top: 5px;
  font-size: 12px;
  border-bottom: 1px solid var(--border-content);
  cursor: pointer;
}

.question-item-field-error {
  position: relative;
  top: 5px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans-serif);
  color: var(--color-danger-dark);
  border-radius: 4px;
}

.question-item-option-item {
  position: relative;
  margin-bottom: 15px;
  padding-right: 40px;
}
.question-item-option-item:last-child {
  margin-bottom: 0;
}
.question-item-option-item .radio-label {
  display: block;
  padding-left: 30px;
}
.question-item-option-item .radio-fill {
  top: 14px;
}
.question-item-option-item .checkbox-label {
  display: block;
}
.question-item-option-item .checkbox-toggle {
  top: 12px;
}
.question-item-option-item .checkbox-unselected {
  border: 1px solid color-mix(in srgb, var(--black) 18%, transparent);
}

.question-item-option-item-placeholder-copy {
  display: inline-block;
  padding: 9px 0;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-sans-serif);
  opacity: 0.8;
}
.question-item-option-item-placeholder-copy:hover, .question-item-option-item-placeholder-copy:active {
  opacity: 1;
}

.custom-form-error-notice {
  padding: 8px 0;
  font-weight: 600;
  text-align: center;
  color: var(--color-danger);
  font-family: var(--font-sans-serif);
  background: var(--color-danger-light);
  border-radius: 6px 6px 0 0;
}

.question-item-option-item-radio-fill-placeholder {
  opacity: 0.5;
}

.question-item-option-item-checkbox-toggle-placeholder {
  opacity: 0.55;
}

.question-item-option-item-checkbox-toggle-placeholder,
.question-item-option-item-checkbox-toggle-builder {
  border: none !important;
}

.question-item-option-item-dropdown-item-builder {
  position: absolute;
  top: 18px;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--grey-d);
  border-radius: 30px;
}

.question-item-option-item-remove {
  position: absolute;
  right: 8px;
  top: 5px;
  width: 36px;
  height: 36px;
  font-size: 16px;
  text-align: center;
  transition: all var(--transition-normal) ease;
}
.question-item-option-item-remove, .question-item-option-item-remove:focus, .question-item-option-item-remove:visited {
  color: var(--color-danger);
  opacity: 0.5;
}
@media (min-width: 768px) {
  .question-item-option-item-remove, .question-item-option-item-remove:focus, .question-item-option-item-remove:visited {
    color: var(--color-danger);
    opacity: 0;
    transform: translateX(-40px);
  }
  .question-item-option-item:hover .question-item-option-item-remove, .question-item-option-item:hover .question-item-option-item-remove:focus, .question-item-option-item:hover .question-item-option-item-remove:visited {
    color: var(--color-danger);
    opacity: 0.7;
    transform: translateX(0px);
  }
  .question-item-option-item:hover .question-item-option-item-remove:hover, .question-item-option-item:hover .question-item-option-item-remove:active {
    color: var(--color-danger);
    opacity: 1;
  }
}

.custom-form-builder-editor-description {
  font-size: 14px;
  font-weight: 600;
}

.custom-form-builder-editor-color-preview-wrapper:hover .custom-form-builder-editor-color-preview {
  box-shadow: 0 0 0 1px var(--text-muted-alt);
}
.custom-form-builder-editor-color-preview-wrapper:hover .custom-form-builder-editor-color-close {
  color: var(--text-muted);
}

.custom-form-builder-editor-color-preview {
  position: absolute;
  right: 25px;
  bottom: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--black) 10%, transparent);
}

.custom-form-builder-editor-color-close {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 3px 10px;
  font-size: 9px;
  color: var(--text-lighter);
}

.custom-form-builder-editor-color-picker-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9;
}

.custom-form-builder-editor-color-picker {
  position: absolute;
  z-index: 10;
  top: 35px;
  right: 0;
}
.custom-form-builder-editor-color-picker.minus-right {
  right: -30px;
}
.custom-form-builder-editor-color-picker.left-align {
  left: 0;
  right: auto;
}
.custom-form-builder-editor-color-picker.bottom-position {
  top: auto;
  bottom: 35px;
}
.custom-form-builder-editor-color-picker .flexbox-fix input {
  width: 100% !important;
  text-align: center;
}

.custom-form-builder-editor-dropdown {
  position: absolute !important;
  top: -7px;
  right: 0;
  width: 109px;
}

.customform-editor-header-bg-section {
  position: relative;
  height: 150px;
  border-bottom: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}
.customform-editor-header-bg-section.no-background {
  height: 115px;
  border-bottom: none;
}

.customform-editor-header-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--color-info) no-repeat;
  background-size: cover;
  background-position: top center;
}

.customform-editor-cover-header-bg.with-image {
  height: 100%;
}
.customform-editor-cover-header-bg .header-background-image-delete,
.customform-editor-cover-header-bg .header-background-image-add,
.customform-editor-cover-header-bg .header-background-image-loading {
  left: 10px;
  right: auto;
}
.customform-editor-cover-header-bg .header-background-image-edit {
  left: 46px;
  right: auto;
}

.customform-editor-background {
  width: 100%;
  height: 150px;
  background: transparent center center no-repeat;
  background-size: cover;
}

.customform-logo-wrapper {
  padding-top: 60px;
  text-align: center;
}
.customform-logo-wrapper .customform-logo {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background: transparent center center no-repeat;
  background-size: contain;
}
@media (min-width: 768px) {
  .customform-logo-wrapper .customform-logo {
    width: 106px;
    height: 106px;
  }
}
.customform-logo-wrapper.left {
  padding-left: 20px;
  text-align: left;
}
.customform-logo-wrapper.left .customform-logo {
  margin: 0;
}
@media (min-width: 768px) {
  .customform-logo-wrapper.left {
    padding-left: 80px;
    padding-top: 80px;
  }
}
.customform-logo-wrapper.hide-logo {
  display: none;
}

.w9-form-top {
  position: relative;
  padding: 60px 20px;
  background: var(--bg-content);
  border-bottom: 1px solid var(--border-content);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 10%, transparent);
}
@media (min-width: 992px) {
  .w9-form-top {
    padding: 60px;
  }
}

.w9-form-top-type {
  text-align: left;
  line-height: 1;
}

.w9-form-top-label {
  position: relative;
  top: 2px;
  margin-bottom: 15px;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-lightest);
  vertical-align: top;
}

.w9-form-top-title {
  max-width: 700px;
  font-size: 32px;
  font-weight: 600;
}
@media (min-width: 992px) {
  .w9-form-top-title {
    font-size: 40px;
  }
}

.w9-form-content {
  position: relative;
  padding: 60px 20px;
  background: var(--bg-content);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 10%, transparent);
}
@media (min-width: 992px) {
  .w9-form-content {
    padding: 60px 60px;
  }
}

.w9-form-payee-section {
  margin-left: -20px;
  margin-right: -20px;
  padding: 40px 20px;
  background: var(--bg-grey-fd);
  border: 1px solid var(--border-content-alt);
  border-left-width: 0;
  border-right-width: 0;
}
@media (min-width: 768px) {
  .w9-form-payee-section {
    margin-right: 0px;
    border-right-width: 1px;
    border-radius: 0 4px 4px 0;
  }
}
@media (min-width: 992px) {
  .w9-form-payee-section {
    margin-left: -60px;
    padding: 40px 40px 40px 60px;
  }
}

.w9-form-ssn-section {
  position: relative;
  margin-left: -20px;
  margin-right: -20px;
  padding: 60px 20px 40px;
  background: var(--bg-grey-fd);
  border: 1px solid var(--border-content-alt);
  border-left-width: 0;
  border-right-width: 0;
}
@media (min-width: 768px) {
  .w9-form-ssn-section {
    padding: 40px 40px 40px 60px;
    margin-right: 0px;
    border-right-width: 1px;
    border-radius: 0 4px 4px 0;
  }
}
@media (min-width: 992px) {
  .w9-form-ssn-section {
    margin-left: -60px;
  }
}

.w9-form-ssn-lock {
  position: absolute;
  right: 20px;
  top: 20px;
  line-height: 1;
  font-size: 16px;
  color: var(--text-lighter);
}
@media (min-width: 480px) {
  .w9-form-ssn-lock {
    font-size: 18px;
  }
}

.ssn-field-1 {
  display: inline-block;
  float: left;
  width: 40px;
}

.ssn-field-2 {
  display: inline-block;
  float: left;
  width: 30px;
}

.ssn-field-3 {
  display: inline-block;
  float: left;
  width: 60px;
}

.w9-form-ein-or {
  display: inline-block;
  float: left;
}

.w9-form-ein-1 {
  display: inline-block;
  float: left;
  width: 26px;
}

.w9-form-ein-dash {
  display: inline-block;
  float: left;
  padding: 18px 10px 0;
  color: var(--text-lighter);
}

.w9-form-ein-2 {
  display: inline-block;
  float: left;
  max-width: 180px;
}

.w9-form-btns {
  position: relative;
  text-align: right;
  position: relative;
  padding: 20px;
  background: var(--bg-content);
  border-top: 1px solid #ecf0f1;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 10%, transparent);
}
@media (min-width: 768px) {
  .w9-form-btns {
    padding: 30px;
  }
}

.w9-select .Select-placeholder {
  font-size: 14px;
}

.form-help.w9-form-help {
  width: 100%;
}
.form-help.w9-form-help.last-form-help {
  top: auto;
  bottom: -60px;
}

.legal-form-add-field-btn {
  display: block;
  padding: 20px 10px 17px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--border-content);
  border-radius: 10px;
  box-shadow: 0 1px 8px color-mix(in srgb, var(--black) 5%, transparent);
}
.legal-form-add-field-btn, .legal-form-add-field-btn:focus, .legal-form-add-field-btn:visited {
  color: var(--text-default);
}
.legal-form-add-field-btn:hover, .legal-form-add-field-btn:active {
  color: var(--text-default);
  border: 1px solid var(--border-content-alt);
}

.legal-form-add-field {
  position: relative;
  padding: 25px 140px 33px 30px;
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
  box-shadow: 0 1px 8px color-mix(in srgb, var(--black) 5%, transparent);
}

.legal-form-add-field-cancel {
  position: absolute;
  right: -14px;
  top: -12px;
  width: 29px;
  height: 29px;
  color: var(--color-danger);
  font-size: 27px;
  line-height: 0;
  cursor: pointer;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 50%;
  box-shadow: 0 0 4px color-mix(in srgb, var(--black) 10%, transparent);
}
.legal-form-add-field-cancel, .legal-form-add-field-cancel:focus, .legal-form-add-field-cancel:visited, .legal-form-add-field-cancel:hover, .legal-form-add-field-cancel:active {
  color: var(--color-danger);
}

.legal-form-add-field-confirm {
  position: absolute;
  right: 30px;
  top: 33px;
}

.legal-form-remove-field {
  position: relative;
  top: -1px;
  padding: 5px 5px 5px 10px;
  font-weight: 500;
  font-size: 12px;
}
.legal-form-remove-field, .legal-form-remove-field:focus, .legal-form-remove-field:visited, .legal-form-remove-field:hover, .legal-form-remove-field:active {
  color: var(--color-danger);
}

.promotions-carousel {
  user-select: none;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
}
@media (min-width: 1750px) {
  .promotions-carousel {
    display: none;
  }
}

.promotions-carousel-cards {
  position: relative;
  overflow: hidden;
}
.promotions-carousel-cards .promotions-carousel-card-action {
  position: absolute;
}
.promotions-carousel-cards .promotions-carousel-card-dismiss {
  top: 12px;
  right: 15px;
  color: color-mix(in srgb, var(--black) 20%, transparent);
  font-size: 1.4em;
  line-height: 1em;
}
.promotions-carousel-cards .promotions-carousel-card-dismiss:hover {
  color: color-mix(in srgb, var(--black) 40%, transparent);
}
.promotions-carousel-cards .promotions-carousel-card-prev,
.promotions-carousel-cards .promotions-carousel-card-next {
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  line-height: 23px;
  text-align: center;
  color: #fff;
  background: color-mix(in srgb, var(--black) 30%, transparent);
  border-radius: 24px;
  opacity: 0;
  transition: all var(--transition-slower) ease;
}
.promotions-carousel-cards .promotions-carousel-card-prev {
  left: 15px;
  transform: translate3d(-20px, 0, 0);
}
.promotions-carousel-cards .promotions-carousel-card-next {
  right: 15px;
  transform: translate3d(20px, 0, 0);
}
.promotions-carousel-cards:hover .promotions-carousel-card-prev {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.promotions-carousel-cards:hover .promotions-carousel-card-next {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.promotions-carousel-cards:hover img {
  opacity: 0.85;
}

.promotions-carousel-cards-wrapper {
  display: flex;
  flex-direction: row;
  transition: var(--transition-normal);
  transition-timing-function: ease-in-out;
}

.promotions-carousel-card {
  position: relative;
  min-width: 100%;
}
.promotions-carousel-card img {
  width: 100%;
  height: auto;
  border-radius: 10px 10px 0 0;
}

.promotions-carousel-dots {
  display: flex;
}

.promotions-carousel-dot {
  display: block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  background: var(--bg-grey-e);
  border-radius: 50%;
}
.promotions-carousel-dot:hover {
  background: var(--border-content-alt);
}
.promotions-carousel-dot.active {
  background: var(--color-primary);
}

.promotions-carousel-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1;
  padding: 15px 15px 15px 15px;
  font-size: 14px;
  font-weight: 600;
  border-top: 1px solid var(--border-content);
}

.dashboard-page {
  position: relative;
}

.dashboard-connect-bank-account .text-banner-alt {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
}

.dashboard-chart-container.with-border {
  border: 1px solid var(--border-content);
}
.dashboard-chart-container .dashboard-date-range-combo-container .dashboard-date-select .Select__control, .dashboard-chart-container .dashboard-date-range-combo-container .dashboard-date-select {
  min-width: 0;
  min-height: 37px;
}
.dashboard-chart-container .dashboard-date-range-combo-container .dashboard-date-select .Select__value-container {
  display: none;
}
.dashboard-chart-container .dashboard-date-range-combo-container .dashboard-date-select .Select__menu {
  right: 0;
  left: auto;
  min-width: 150px;
}
.dashboard-chart-container .dashboard-date-range-combo-container .dashboard-date-select .Select__indicator {
  padding: 8px 8px 8px 5px;
}

.income-expense-chart-spinner {
  padding: 204px 0;
}

.dashboard-date-range-combo-container.dashboard-chart-option {
  display: flex;
  max-width: 280px;
}
.dashboard-date-range-combo-container .Select.chart-option-select {
  min-width: 0;
}
.dashboard-date-range-combo-container .Select-menu-outer {
  max-height: 275px;
  overflow: hidden;
  overflow-y: scroll;
}
.dashboard-date-range-combo-container .Select-menu {
  max-height: none;
}
.dashboard-date-range-combo-container .DateInput {
  width: auto;
}
.dashboard-date-range-combo-container .DateRangePicker,
.dashboard-date-range-combo-container .dashboard-date-select {
  float: left;
}
.dashboard-date-range-combo-container .Select.chart-option-select .Select-input {
  padding: 0 34px 0 0;
}
.dashboard-date-range-combo-container .Select-menu-outer {
  min-width: 150px;
  left: auto;
  right: 0;
}
.dashboard-date-range-combo-container .Select-value-label,
.dashboard-date-range-combo-container .Select-placeholder {
  display: none;
}
.dashboard-date-range-combo-container .DateRangePicker {
  position: relative;
  height: 37px;
  margin-right: -1px;
  color: var(--text-muted);
  border: 1px solid var(--border-content);
  border-radius: 2px 0 0 2px;
  background-image: linear-gradient(to bottom, #ffffff 0%, #fcfcfc 100%);
}
.dashboard-date-range-combo-container .DateRangePicker:hover {
  z-index: 2;
  border-color: var(--border-content-alt);
}
.dashboard-date-range-combo-container .DateRangePicker .DateInput {
  color: var(--text-default);
  background: none;
}
.dashboard-date-range-combo-container .DateRangePicker .DateInput_input {
  height: 35px;
  width: 120px;
  padding-top: 7px;
  cursor: pointer;
}
.dashboard-date-range-combo-container .DateRangePicker .DateInput__display-text {
  padding: 2px 6px 2px;
}
.dashboard-date-range-combo-container .DateRangePicker .DateInput__display-text--has-input {
  color: var(--text-muted);
  font-weight: normal;
}
.dashboard-date-range-combo-container .DateRangePicker .DateRangePickerInput_arrow:after {
  content: "-";
  color: var(--text-lighter);
}
.dashboard-date-range-combo-container .DateRangePicker .DateRangePickerInput_arrow_svg {
  display: none;
}
.dashboard-date-range-combo-container .DateRangePicker .DateInput_fang {
  display: none;
}
.dashboard-date-range-combo-container .DateRangePickerInput {
  background: none;
  border: 0;
}
.dashboard-date-range-combo-container .DateRangePicker__picker {
  left: auto !important;
  right: -60px;
}
.dashboard-date-range-combo-container .DateRangePickerInput__arrow {
  position: relative;
  top: 1px;
  height: 1px;
  width: 6px;
  background: var(--text-muted);
}
.dashboard-date-range-combo-container .DateRangePickerInput__arrow svg {
  display: none;
}

.dashboard-chart-title-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
}

.dashboard-chart-container-empty {
  padding: 60px 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-lighter);
  border: 1px solid var(--border-content);
  border-radius: 10px;
}

.dashboard-chart-title {
  display: flex;
  align-items: flex-start;
  flex: 1;
  min-height: 30px;
  padding-top: 3px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
  cursor: default;
  user-select: none;
}
.dashboard-chart-title.with-dropdown {
  position: relative;
  padding-right: 32px;
  cursor: pointer;
  user-select: none;
}
.dashboard-chart-title.without-filters {
  margin-top: -10px;
}
.dashboard-chart-title.dashboard-chart-title--with-btn-smd {
  padding-top: 8px;
}

.dashboard-chart-title-info {
  position: relative;
  float: right;
  margin-left: 8px;
  top: 6px;
  height: 12px;
  width: auto;
  transition: all var(--transition-normal) ease;
}
.dashboard-chart-title-info path {
  fill: var(--text-lighter);
}
.dashboard-chart-title-info:hover path {
  fill: var(--text-muted);
}
.dashboard-chart-title-info + .tooltip {
  min-width: 200px;
}
.dashboard-chart-title-info.white-space-nowrap + .tooltip {
  white-space: nowrap;
}
.dashboard-chart-title-info.white-space-nowrap + .tooltip .tooltip-inner {
  max-width: none;
}

.dashboard-chart-subtitle {
  padding-top: 3px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
}

.dashboard-chart-options {
  display: none;
  gap: 10px;
  margin-left: auto;
}
@media (min-width: 768px) {
  .dashboard-chart-options {
    display: inline-flex;
    flex-shrink: 0;
  }
}
.dashboard-chart-options.showing-xs {
  display: inline-flex;
  flex-shrink: 0;
}

.dashboard-chart-option {
  position: relative;
  z-index: 11;
  display: inline-block;
  float: left;
  margin-left: 10px;
  text-align: left;
}
.dashboard-chart-option:first-child {
  margin-left: 0;
}
.dashboard-chart-option.btn-smd {
  margin-top: 1px;
}
.dashboard-chart-option .chart-option-select .Select__value-container {
  position: relative;
  top: 0;
  font-size: 14px;
  font-weight: 600;
}

.dashboard-chart-option-link {
  display: inline-block;
  height: 30px;
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 500;
  background: var(--bg-grey-f8);
  border-radius: 5px;
}
.dashboard-chart-option-link, .dashboard-chart-option-link:focus, .dashboard-chart-option-link:visited {
  color: var(--text-muted);
}
.dashboard-chart-option-link:hover, .dashboard-chart-option-link:active {
  color: var(--text-muted);
  background: var(--bg-grey-f5);
}
.dashboard-chart-option-link.subheader-title-link {
  height: 30px;
  padding: 4px 14px;
  font-size: 14px;
}

.dashboard-chart-options-totals {
  display: block;
  clear: both;
  padding: 5px 10px 8px;
  font-size: 14px;
  color: var(--text-muted);
}
@media (min-width: 768px) {
  .dashboard-chart-options-totals {
    display: inline-block;
    float: right;
    clear: none;
    padding: 10px 10px 8px;
  }
}

.dashboard-chart-option-add-dropdown {
  display: flex;
}

.dashboard-chart-option-add-icon {
  display: inline-flex;
  justify-content: center;
  height: 30px;
  width: 30px;
  text-align: center;
  cursor: pointer;
  background-color: var(--bg-grey-f8);
  border-radius: 5px;
  transition: all var(--transition-normal) ease;
}
.dashboard-chart-option-add-icon:hover {
  background-color: var(--bg-grey-f8);
}
.dashboard-chart-option-add-icon svg {
  width: 12px;
  height: auto;
}
.dashboard-chart-option-add-icon svg path {
  fill: var(--text-muted);
}
.dashboard-chart-option-add-icon:hover path {
  fill: var(--text-default);
}
.page-properties-section-title .dashboard-chart-option-add-icon {
  background-color: transparent;
}
.page-properties-section-title .dashboard-chart-option-add-icon:hover {
  background-color: var(--bg-grey-fc);
}

.dashboard-chart-bottom-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 10px;
}

.dashboard-chart-bottom-section-link {
  padding: 15px 20px 15px 0;
  font-weight: 600;
  font-size: 12px;
}
.dashboard-chart-bottom-section-link:hover, .dashboard-chart-bottom-section-link:active {
  text-decoration: underline;
}

.dashboard-date-select.chart-option-select .Select__menu {
  min-width: 150px;
  right: 0;
}

.dashboard-unit-select {
  min-width: 100px;
}

.dashboard-project-select {
  min-width: 200px;
}

.dashboard-currency-select.chart-option-select .Select__menu {
  min-width: 140px;
  right: 0;
}

.dashboard-project-tag-select {
  min-width: 150px;
}

.dashboard-unit-select.chart-option-select .Select__control {
  min-width: 105px;
}

.dashboard-text-container {
  font-size: 16px;
  font-weight: 400;
  border: 1px solid var(--border-content);
  border-radius: 10px;
  padding: 40px;
}
.dashboard-text-container.empty {
  color: var(--text-muted);
}

.dashboard-chart-title-dropdown-icon {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  padding: 10px;
  color: var(--text-lighter);
  cursor: pointer;
  font-size: 12px;
  transition: all var(--transition-medium) ease;
}
.dashboard-chart-title-dropdown-icon.showing {
  transform: rotate(180deg);
}
.dashboard-chart-title.aside .dashboard-chart-title-dropdown-icon {
  padding: 9px 10px 5px;
}

.dashboard-chart-title-filters {
  height: 40px;
  max-height: 0;
  overflow: hidden;
}
.dashboard-chart-title-filters.showing {
  max-height: 40px;
  margin-top: -10px;
  margin-bottom: 10px;
}

.dashboard-chart-title-filter-item {
  display: inline-block;
  float: left;
  padding: 10px 0 10px;
  margin-right: 20px;
  font-weight: 600;
}
.dashboard-chart-title-filter-item, .dashboard-chart-title-filter-item:focus, .dashboard-chart-title-filter-item:visited {
  color: var(--text-muted);
}
.dashboard-chart-title-filter-item:hover, .dashboard-chart-title-filter-item:active {
  color: var(--text-muted);
}
.dashboard-chart-title-filter-item.active {
  color: var(--color-primary);
}

.dashboard-chart-title-filters-link {
  display: inline-block;
  float: right;
  padding: 10px 0 10px;
  color: var(--color-primary);
  font-weight: 600;
}

.chart-tooltip {
  text-align: center;
  min-width: 100px;
  padding: 5px 0 3px;
  font-family: var(--font-sans-serif);
}

.chart-tooltip-l1 {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted);
}

.chart-tooltip-l2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
}

.dashboard-total-section {
  position: relative;
  width: 100%;
  padding: 30px 20px;
  text-align: center;
}
.dashboard-total-section.aside {
  padding: 25px 25px 15px;
  text-align: left;
}

.dashboard-total-section-link, .dashboard-total-section-link:focus, .dashboard-total-section-link:visited {
  color: var(--text-muted-alt);
}
.dashboard-total-section-link:hover {
  color: var(--text-muted-alt);
}

.dashboard-total-section-metric {
  margin-bottom: 2px;
  font-size: 28px;
  font-weight: 500;
  color: var(--text-default);
}

.dashboard-total-section-label {
  position: relative;
  z-index: 2;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: color-mix(in srgb, var(--black) 50%, transparent);
}

.dashboard-metrics-total-section {
  position: relative;
}
.dashboard-metrics-total-section.aside {
  text-align: left;
}

.dashboard-metrics-total-item {
  margin-bottom: 20px;
}

.dashboard-metrics-total {
  font-size: 20px;
  font-weight: 500;
}

.dashboard-metrics-total-copy {
  font-weight: 400;
  font-size: 16px;
  padding-left: 2px;
}

.dashboard-metrics-total-label {
  display: flex;
  align-items: center;
  margin-top: 1px;
  font-size: 12px;
  color: var(--text-lighter);
}
.dashboard-metrics-total-label.positive {
  color: var(--color-primary);
}
.dashboard-metrics-total-label.negative {
  color: var(--color-danger);
}

.dashboard-metrics-total-label-icon {
  margin-right: 5px;
  line-height: 1;
}

.dashboard-metrics-total-more-link {
  font-weight: 600;
}

.dashboard-action-items {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 56px;
  padding: 15px;
  border: 1px solid var(--border-content);
  border-radius: 10px;
}

.dashboard-action-item {
  position: relative;
  display: inline-block;
  width: 47%;
  margin: 1.5%;
  padding: 60px 10px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 8px;
  transition: all var(--transition-fast) ease;
}
.dashboard-action-item:hover {
  background: var(--bg-content);
  border-color: color-mix(in srgb, var(--color-primary) 70%, transparent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--color-primary) 5%, transparent);
}

.dashboard-action-item-icon {
  position: absolute;
  left: 50%;
  top: 25px;
  width: 25px;
  height: auto;
  transform: translateX(-50%);
}
.dashboard-action-item-icon path.fill-none {
  stroke: var(--color-primary);
}
.dashboard-action-item-icon path:not(.fill-none) {
  fill: var(--color-primary);
}

.dashboard-action-item-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-default);
  user-select: none;
}
.dashboard-action-item:hover .dashboard-action-item-name {
  color: var(--text-default);
}
@media (min-width: 1360px) {
  .dashboard-action-item-name {
    font-size: 14px;
  }
}

.dashboard-subscription-plan-details {
  position: relative;
  padding: 25px;
  overflow: hidden;
  cursor: default;
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
}

.dashboard-subscription-plan-details-bg1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: transparent top left no-repeat;
  background-size: contain;
  background-image: url("welcome_states/welcome-state-background-1.png");
}

.dashboard-subscription-plan-details-bg2 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24%;
  height: 100%;
  background: transparent bottom right no-repeat;
  background-size: contain;
  background-image: url("welcome_states/welcome-state-background-2.png");
}

.dashboard-subscription-plan-details-tag {
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-lighter);
  cursor: default;
  background: var(--bg-grey-e);
  border-radius: 3px;
}

.dashboard-subscription-plan-details-copy {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
}

.dashboard-subscription-plan-details-items {
  position: relative;
  font-size: 14px;
}

.dashboard-subscription-plan-details-item {
  position: relative;
  margin-bottom: 10px;
  padding-left: 25px;
}
.dashboard-subscription-plan-details-item:last-child {
  margin-bottom: 0;
}

.dashboard-subscription-plan-details-item-checkmark {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
}

.partial-dashboard-activity div .dashboard-chart-container {
  margin-top: 0px !important;
}

.chart-totals-container.with-top-border {
  border-top: 1px solid var(--border-content);
}

.chart-totals-list {
  padding-top: 20px;
}
@media (min-width: 768px) {
  .chart-totals-list {
    padding-top: 0;
  }
}

@media (min-width: 768px) {
  .chart-totals-list.with-5-totals .chart-totals-item {
    width: 20%;
  }
}

@media (min-width: 768px) {
  .chart-totals-list.with-3-totals .chart-totals-item {
    width: 33.3333%;
  }
}

.chart-totals-item {
  display: inline-block;
  float: left;
  width: 50%;
  padding: 3px 0 20px;
  user-select: none;
}
@media (min-width: 768px) {
  .chart-totals-item {
    width: 25%;
    padding: 23px 0 20px;
  }
}
.chart-totals-item .react-tooltip {
  max-width: 220px;
}

.chart-totals-item-label {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: capitalize;
  transition: all var(--transition-normal) ease;
  position: relative;
}
.chart-totals-item-label .ion-information-circled {
  margin-left: 5px;
  font-size: 0.8em;
  position: absolute;
  top: 1px;
}

.chart-totals-item-amount {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
}
.chart-totals-item-amount.overdue, .chart-totals-item-amount.expenses {
  color: var(--color-danger);
}
.chart-totals-item-amount.paid, .chart-totals-item-amount.paid_before_fees, .chart-totals-item-amount.paid_after_fees, .chart-totals-item-amount.paid_and_pending, .chart-totals-item-amount.other_income {
  color: var(--color-primary);
}
.chart-totals-item-amount.zero {
  color: var(--text-lightest);
}
@media (min-width: 768px) {
  .chart-totals-item-amount {
    font-size: 18px;
  }
}

.chart-totals-container.accounting .chart-totals-item {
  cursor: default;
}

.income-chart-tooltip {
  display: block;
  min-width: 120px;
  padding: 15px;
  color: var(--text-default);
  font-family: var(--font-sans-serif);
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 6px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--black) 10%, transparent);
}

.income-chart-tooltip-title {
  display: block;
  margin-bottom: 15px;
  text-transform: capitalize;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
}

.income-chart-tooltip-info {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-bottom: 8px;
}
.income-chart-tooltip-info:last-child {
  padding-bottom: 0;
}
.income-chart-tooltip-info.chart-tooltip-info-profit {
  margin-top: 5px;
  font-weight: 500;
}

.income-chart-tooltip-label {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  color: var(--text-default);
  gap: 7px;
}

.income-chart-tooltip-label-icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border: 1px dashed var(--bg-content);
  border-radius: 3px;
}
.income-chart-tooltip-label-icon.income-chart-tooltip-label-icon--used {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.income-chart-tooltip-label-icon.income-chart-tooltip-label-icon--forecast {
  border: 1px dashed var(--color-primary);
}
.income-chart-tooltip-label-icon.income-chart-tooltip-label-icon--overbudget {
  background-color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

.income-chart-tooltip-amount-generic {
  padding-left: 30px;
  font-size: 14px;
  color: var(--text-default);
  flex-shrink: 0;
}

.income-chart-tooltip-amount-paid,
.income-chart-tooltip-amount-expenses,
.income-chart-tooltip-amount-profit {
  font-size: 14px;
  color: var(--text-default);
}

.income-chart-tooltip-amount-expenses {
  color: var(--text-default);
}

.income-chart-tooltip-amount-profit {
  color: var(--text-default);
}

.Select.chart-option-select {
  min-width: 130px;
}

.time-tracked-chart {
  overflow: visible;
}

.time-tracked-chart-tooltip {
  min-width: 190px;
  padding: 15px;
  color: var(--text-default);
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 6px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--black) 10%, transparent);
}

.time-tracked-chart-tooltip-title {
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 500;
}

.time-tracked-chart-tooltip-info {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  flex-flow: column;
}

.time-tracked-chart-tooltip-info-line {
  display: flex;
  margin-bottom: 7px;
  font-size: 14px;
}

.time-tracked-chart-tooltip-label {
  flex: 1;
  margin-right: 15px;
  color: var(--text-default);
}

.time-tracked-chart-tooltip-amount {
  padding-left: 5px;
  color: var(--text-default);
}
.time-tracked-chart-tooltip-amount.billed {
  color: var(--text-default);
}

.events-timeline-section {
  position: relative;
  min-height: 80px;
}
.events-timeline-section .content-spinner {
  margin: 42px 0;
}

.events-timeline-no-activity {
  position: relative;
  padding: 60px 40px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: var(--text-lighter);
  border: 1px solid var(--border-content);
  border-radius: 10px;
}

.project-event {
  position: relative;
}
.project-event:first-child {
  margin-top: -10px;
}

.project-event-in {
  position: relative;
  padding: 10px 20px 10px 20px;
  cursor: default;
}
.project-messaging-container .project-event-in {
  padding-left: 20px;
  padding-right: 30px;
}

.project-event-border {
  position: absolute;
  left: 2px;
  top: 20px;
  bottom: 40px;
  border-left: 1px dashed var(--border-content-alt);
}

.project-event-description {
  font-size: 14px;
  color: var(--text-default);
  word-break: break-word;
}
.project-event-description a, .project-event-description a:focus, .project-event-description a:visited, .project-event-description a:hover, .project-event-description a:active {
  color: var(--text-default);
  font-weight: 500;
}
.project-event-description a:hover, .project-event-description a:active {
  text-decoration: underline;
}

.project-event-description-note {
  margin-top: 5px;
  font-size: 12px;
}

.project-event-date {
  display: inline-block;
  font-size: 12px;
  color: var(--text-lighter);
  cursor: default;
  transition: all var(--transition-normal) ease;
}

.project-event-date-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 5px 0 0;
}

.project-event-open-mail-log {
  margin-left: 15px;
  flex-shrink: 0;
  font-weight: 500;
  font-size: 12px;
  transition: all var(--transition-normal) ease;
}

.project-event-show-more-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal) ease;
}
.project-event-show-more-link, .project-event-show-more-link:focus, .project-event-show-more-link:visited {
  color: var(--text-muted);
  text-decoration: underline;
}
.project-event-show-more-link:hover, .project-event-show-more-link:active {
  color: var(--text-default);
  text-decoration: underline;
}

.project-event-item {
  position: relative;
  padding: 10px 20px 10px 30px;
  min-height: 40px;
  transition: all var(--transition-fast) ease;
}
.project-event-item::after {
  content: "";
  position: absolute;
  left: 9.5px;
  bottom: 1px;
  top: 39px;
  border-right: 1px solid var(--border-content);
}
.project-event-item.project-event-item--header-only::after {
  bottom: -3px;
  top: 35px;
}
.project-event-item:last-child::after {
  display: none;
}
.project-event-item .email-editor-wysiwyg-attachment {
  font-size: 12px;
}

.project-event-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}
.project-event-item-header:last-child {
  margin-bottom: 0;
}

.project-event-header-content {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.project-event-person-avatar {
  position: absolute;
  top: -1px;
  left: -30px;
}

.project-event-person-name {
  margin-right: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-default);
}

.project-event-person-co {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.project-event-person-metadata {
  color: var(--text-muted);
}
.project-event-person-metadata span:first-child {
  color: var(--text-muted);
  font-weight: 600;
}
.project-event-person-metadata a,
.project-event-person-metadata a:focus,
.project-event-person-metadata a:visited {
  color: var(--text-default);
  font-weight: 500;
  text-decoration: underline;
}
.project-event-person-metadata a:hover,
.project-event-person-metadata a:active {
  color: var(--text-default);
  font-weight: 500;
  text-decoration: underline;
}

.project-event-person-separator {
  padding: 0 5px;
  color: var(--text-muted);
}

.project-event-person-date {
  font-size: 12px;
  color: var(--text-muted);
}

.project-event-date {
  font-size: 12px;
  color: var(--text-muted);
}

.project-event-person-edited {
  margin-left: 5px;
  color: var(--text-muted);
}

.project-event-item-body {
  position: relative;
  word-break: break-word;
  color: var(--text-default);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
.project-event-item-body h1,
.project-event-item-body h2,
.project-event-item-body h3,
.project-event-item-body h4 {
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.4;
}
.project-event-item-body h1,
.project-event-item-body h1 span {
  font-weight: 500;
  font-size: 22px;
}
.project-event-item-body h2,
.project-event-item-body h2 span {
  font-weight: 500;
  font-size: 20px;
}
.project-event-item-body h3,
.project-event-item-body h3 span {
  font-weight: 500;
  font-size: 16px;
}
.project-event-item-body h4,
.project-event-item-body h4 span {
  font-weight: 500;
  font-size: 14px;
}
.project-event-item-body p {
  margin-bottom: 12px;
  font-size: 14px;
}
.project-event-item-body p:last-child {
  margin-bottom: 0;
}
.project-event-item-body td {
  font-family: var(--font-sans-serif);
}

.project-event-item-dropdown-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -2px;
  right: -5px;
  width: 30px;
  height: 18px;
  border-radius: 4px;
}
.project-event-item-dropdown-toggle:hover {
  background: var(--bg-grey-f5);
}

.project-event-document-preview {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  max-width: 100%;
  padding: 7px 12px 7px 30px;
  font-weight: 500;
  background-color: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 4px;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--black) 3%, transparent);
}
.project-event-document-preview:hover, .project-event-document-preview:active {
  border-color: var(--border-content-alt);
  box-shadow: 0 2px 14px color-mix(in srgb, var(--bg-shadow) 5%, transparent);
}

.project-event-document-preview-type {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 100%;
  text-align: center;
}

.project-event-document-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: auto;
  transform: translate(-50%, -50%);
}

.project-event-document-preview-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-default);
}

.project-event-document-preview-right {
  margin-left: 20px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-lighter);
}

.deal-board-form-label-probability {
  width: 120px;
}

.deal-board-form-item {
  position: relative;
  padding: 10px 0;
}

.deal-board-form-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 100%;
  top: 10px;
  height: 36px;
  width: 40px;
  padding: 5px 0;
  opacity: 0;
  transition: all var(--transition-slower) ease;
}
.deal-board-form-drag-handle svg {
  width: 8px;
  height: auto;
}
.deal-board-form-item:hover .deal-board-form-drag-handle {
  opacity: 0.6;
}

.deal-board-form-item-probability {
  display: flex;
  align-items: center;
  justify-content: stretch;
  width: 120px;
}

.deal-board-form-color-input.document-editor-color-input {
  position: relative;
  top: 3px;
  left: auto;
  right: auto;
}

.deal-board-form-colorpicker {
  position: absolute;
  display: none;
  z-index: 2;
  left: -10px;
  top: 40px;
  width: 316px;
  padding: 15px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 8px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--black) 12%, transparent);
}
.deal-board-form-colorpicker.deal-board-form-colorpicker--showing {
  display: block;
}

.deal-board-form-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 100%;
  margin: 0 5px;
  height: 36px;
  width: 30px;
  flex-shrink: 0;
  padding: 0;
  opacity: 0;
  transition: all var(--transition-slower) ease;
  border-radius: 4px;
}
.deal-board-form-delete svg {
  width: 13px;
  height: auto;
}
.deal-board-form-delete svg path {
  fill: var(--text-default);
}
.deal-board-form-item:hover .deal-board-form-delete {
  display: inline-flex;
  opacity: 0.6;
}
.deal-board-form-delete:hover {
  opacity: 1;
}

#deal-board.board {
  padding: 0 20px;
}
@media (min-width: 768px) {
  #deal-board.board {
    padding: 0 40px;
  }
}

.deal-board-group-header {
  position: relative;
  padding: 10px 80px 10px 0;
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
}

.deal-board-group-status {
  position: relative;
  padding-left: 15px;
}

.deal-board-group-status-dot {
  position: absolute;
  left: 0px;
  top: 5px;
  height: 31px;
  width: 2px;
  border-radius: 10px;
  background: var(--grey-9);
}

.deal-board-group-status-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--text-default);
  font-weight: 500;
  font-size: 14px;
  cursor: default;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deal-board-group-status-text-in {
  min-width: 0;
}

.deal-board-group-totals {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}

.deal-board-group-weighted-total {
  display: flex;
  min-width: 0;
}

.deal-board-group-weighted-total-label {
  display: none;
  flex-shrink: 0;
  padding-left: 3px;
}
.deal-board-group-header:hover .deal-board-group-weighted-total-label {
  display: block;
}

.deal-board-group-raw-total {
  display: none;
  min-width: 0;
  flex-shrink: 0;
}
.deal-board-group-header:hover .deal-board-group-raw-total {
  display: block;
}

.deal-board-group-total-separator {
  display: none;
  min-width: 0;
  margin: 0 5px;
}
.deal-board-group-header:hover .deal-board-group-total-separator {
  display: block;
}

.deal-board-group-add-deal {
  display: none;
  position: absolute;
  right: 40px;
  top: 15px;
}
.deal-board-group-header:hover .deal-board-group-add-deal {
  display: inline-flex;
}

.deal-card-outer {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 10px;
}

.deal-card-outer--hidden {
  display: none;
}

.deal-card-inner {
  flex-shrink: 0;
}

.deal-card-inner--dragging {
  opacity: 0.4;
}

.deal-card-shadow {
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--bg-grey-f8);
}

.deal-drawer-content {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;
  flex: 1;
}

.deal-drawer-main-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 768px) {
  .deal-drawer-main-content {
    max-width: calc(100% - 275px);
  }
}

.deal-drawer-side-loading-items {
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: flex-start;
}

.deal-drawer-side-loading-item-label {
  position: relative;
  width: 30%;
  height: 10px;
  margin-bottom: 7px;
  border-radius: 4px;
  background: linear-gradient(60deg, color-mix(in srgb, var(--black) 0%, transparent) 33%, color-mix(in srgb, var(--black) 2%, transparent) 50%, color-mix(in srgb, var(--black) 0%, transparent) 66%) var(--bg-grey-f1);
  background-size: 300% 100%;
  animation: loading-shine 1.5s ease-in infinite;
}

.deal-drawer-side-loading-item {
  position: relative;
  width: 100%;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(60deg, color-mix(in srgb, var(--black) 0%, transparent) 33%, color-mix(in srgb, var(--black) 2%, transparent) 50%, color-mix(in srgb, var(--black) 0%, transparent) 66%) var(--bg-grey-f5);
  background-size: 300% 100%;
  animation: loading-shine 1.5s ease-in infinite;
}
.deal-drawer-side-loading-item:nth-child(2) {
  width: 80%;
}
.deal-drawer-side-loading-item:nth-child(3) {
  width: 60%;
}
.deal-drawer-side-loading-item:nth-child(4) {
  width: 85%;
}
.deal-drawer-side-loading-item.deal-drawer-side-loading-item--field-item {
  width: 100%;
  height: 20px;
  margin-top: 15px;
  margin-bottom: 20px;
}

.deal-drawer-header {
  padding: 25px 20px 15px;
}
@media (min-width: 768px) {
  .deal-drawer-header {
    padding: 25px 40px 15px;
  }
}

.deal-drawer-mobile-fields {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .deal-drawer-mobile-fields {
    display: none;
  }
}

.deal-drawer-contacts {
  padding: 30px 20px;
}
@media (min-width: 768px) {
  .deal-drawer-contacts {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.deal-drawer-contacts-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.deal-drawer-contacts-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  border: 1px solid var(--border-content);
  border-radius: 6px;
}
.deal-drawer-contacts-item:hover {
  border-color: var(--border-content-alt);
}
.deal-drawer-contacts-item .copy-to-clipboard-link-icon {
  width: 13px;
}

.deal-drawer-contacts-bg-link {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.deal-drawer-contacts-item-content {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.deal-drawer-contacts-item-name {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
}

.deal-drawer-contacts-item-avatar {
  position: relative;
  top: 3px;
}

.deal-drawer-contacts-item-cta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}

.deal-drawer-comments {
  padding: 35px 20px 90px;
}
@media (min-width: 768px) {
  .deal-drawer-comments {
    padding: 35px 40px 90px;
  }
}

.deal-drawer-comment-toggle {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding: 15px;
  font-size: 14px;
  font-weight: 500;
  background: var(--bg-grey-fa);
  border-radius: 6px;
}
.deal-drawer-comment-toggle, .deal-drawer-comment-toggle:focus, .deal-drawer-comment-toggle:visited {
  color: var(--text-default);
}
.deal-drawer-comment-toggle:hover, .deal-drawer-comment-toggle:active {
  color: var(--text-default);
  background: var(--bg-grey-f8);
}

.deal-drawer-comment-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  padding: 4px;
  background: var(--bg-grey-f1);
  border-radius: 5px;
}
.deal-drawer-comment-toggle:hover .deal-drawer-comment-toggle-icon, .deal-drawer-comment-toggle:active .deal-drawer-comment-toggle-icon {
  background: var(--bg-grey-e);
}
.deal-drawer-comment-toggle-icon svg {
  width: 12px;
  height: auto;
}
.deal-drawer-comment-toggle-icon svg path {
  fill: var(--text-default);
}

.deal-drawer-comment-form {
  margin-bottom: 40px;
}
.deal-drawer-comment-form .comment-form-wrapper {
  margin-top: 0;
}

.deal-drawer-projects {
  padding: 30px 20px 40px;
}
@media (min-width: 768px) {
  .deal-drawer-projects {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.deal-drawer-projects-add-section.field-popup-menu {
  left: auto;
  right: 0;
  top: 40px;
  padding: 30px;
  width: 400px;
  max-width: 100%;
}

.deal-drawer-projects-add-form {
  display: flex;
  align-items: center;
  gap: 20px;
}

.deal-drawer-projects-add-section-close {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  width: 30px;
  height: auto;
  padding: 10px;
  cursor: pointer;
  opacity: 0.5;
  transition: all var(--transition-fast) ease;
}
.deal-drawer-projects-add-section-close:hover {
  opacity: 1;
}

.deal-drawer-projects-item-btn {
  position: absolute;
  z-index: 2;
  right: 20px;
  top: 20px;
}

.deal-drawer-projects-item-budget {
  position: relative;
  z-index: 2;
  margin-left: -5px;
}
.deal-drawer-projects-item-budget .project-budget-mini-progressbar {
  height: auto;
  font-weight: 400;
  padding: 0 5px;
}

.drawer-revenue-distribution-list {
  position: relative;
  max-height: 145px;
  margin: 0 -7px 20px;
  padding-bottom: 10px;
  overflow-y: auto;
}

.drawer-revenue-distribution-list-fader {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  pointer-events: none;
}

.revenue-month-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 7px;
  border-radius: 6px;
}
.revenue-month-row:hover {
  background-color: var(--bg-hover-subtle);
}

.revenue-month-label-col {
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
}

.revenue-month-header-col {
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  padding-right: 0px;
}

.revenue-month-lock-wrapper {
  height: 25px;
}

.revenue-month-lock-trigger {
  cursor: pointer;
}

.revenue-month-lock-icon {
  display: inline-block;
  width: 22px;
  height: auto;
  padding: 6px;
  cursor: pointer;
  opacity: 0;
  border-radius: 5px;
  transition: opacity 0.1s ease;
}
.revenue-month-lock-icon.unlocked path {
  fill: var(--text-lighter);
}
.revenue-month-lock-icon.unlocked:hover path {
  fill: var(--text-muted);
}
.revenue-month-lock-icon.locked {
  opacity: 1;
}
.revenue-month-lock-icon.locked path {
  fill: var(--text-muted);
}
.revenue-month-lock-icon.locked:hover path {
  fill: var(--text-default);
}
.revenue-month-row:hover .revenue-month-lock-icon {
  opacity: 1;
}
.revenue-month-header-col .revenue-month-lock-icon {
  opacity: 1;
}
.revenue-month-lock-icon:hover {
  background: var(--bg-hover-subtle);
}

.revenue-distribution-variance-banner {
  background: var(--bg-grey-f8);
  border: 1px solid var(--border-content);
  border-radius: 5px;
  padding: 10px 12px;
  margin: 20px 0;
  color: var(--text-default);
}

.revenue-distribution-recalculate-link, .revenue-distribution-recalculate-link:focus, .revenue-distribution-recalculate-link:visited {
  color: var(--color-primary);
  text-decoration: underline;
}
.revenue-distribution-recalculate-link:hover, .revenue-distribution-recalculate-link:active {
  color: var(--color-primary);
  text-decoration: underline;
}

.deal-finances-metrics {
  padding: 15px 20px 20px;
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}

.deal-finances-section {
  margin-bottom: 30px;
}
.deal-finances-section:last-child {
  margin-bottom: 0;
}

.deal-finances-section-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
  border-bottom: 1px solid var(--border-content);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.deal-finances-metrics-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.deal-finances-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: normal;
}

.deal-finances-metric-label {
  font-size: 14px;
  font-weight: 500;
}

.deal-finances-metric-value {
  font-size: 14px;
  font-weight: 400;
  text-align: right;
  color: var(--text-default);
}

.deal-finances-profit-value {
  display: flex;
  align-items: center;
  gap: 5px;
}

.deal-finances-metrics-divider {
  border-top: 1px solid var(--border-content);
  width: 100%;
  height: 1px;
}

.deal-drawer-docs {
  padding: 30px 20px 40px;
}
@media (min-width: 768px) {
  .deal-drawer-docs {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.drawer-side-panel-content .has-field-error {
  margin-bottom: 10px !important;
}
.drawer-side-panel-content .has-field-error .drawer-side-field-item {
  margin-bottom: 0 !important;
}

.client-portal-configuration-drawer-wrapper {
  flex-direction: column;
  align-items: stretch;
  width: 500px;
}
.client-portal-configuration-drawer-wrapper.showing {
  display: flex !important;
}

.client-portal-configuration-drawer-content {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;
  flex: 1;
}

.client-portal-configuration-main-content {
  flex: 1;
  max-width: 100%;
  width: 100%;
}

.client-portal-configuration-header {
  padding: 25px 20px 25px;
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .client-portal-configuration-header {
    padding: 25px 40px 25px;
  }
}

.client-portal-configuration-company-info {
  display: flex;
  align-items: center;
}
.client-portal-configuration-company-info .client-portal-title {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
}

.client-portal-configuration-company-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-grey-f5);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
}

.client-portal-configuration-company-details {
  flex: 1;
}
.client-portal-configuration-company-details h2 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-default);
}

.client-portal-configuration-content {
  padding: 30px 20px 40px;
}
@media (min-width: 768px) {
  .client-portal-configuration-content {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.client-portal-configuration-section {
  margin-bottom: 30px;
}
.client-portal-configuration-section:last-child {
  margin-bottom: 0;
}
.client-portal-configuration-section.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.client-portal-configuration-section.disabled .client-portal-configuration-setting.client-portal-access-status {
  opacity: 1;
  pointer-events: auto;
  background-color: var(--bg-grey-f8);
}

.client-portal-configuration-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.client-portal-configuration-section-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
}

.client-portal-reset-button {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #22AD01;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.client-portal-reset-button:hover {
  color: #22AD01;
  text-decoration: none;
}
.client-portal-reset-button:focus {
  outline: 2px solid #22AD01;
  outline-offset: 2px;
}
.client-portal-reset-button:disabled {
  color: var(--text-lighter);
  cursor: not-allowed;
}
.client-portal-reset-button:disabled:hover {
  color: var(--text-lighter);
  text-decoration: none;
}

.client-portal-configuration-menu {
  margin-left: auto;
}

.client-portal-configuration-setting {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  margin-bottom: 8px;
}
.client-portal-configuration-setting:last-child {
  margin-bottom: 0;
}
.client-portal-configuration-setting.client-portal-access-status {
  padding: 16px 20px;
  background-color: var(--bg-grey-f8);
  border: 1px solid var(--border-content);
  border-radius: 8px;
  margin-bottom: 24px;
  align-items: center;
}

.client-portal-configuration-setting-content {
  flex: 1;
}
.client-portal-configuration-setting-content h3, .client-portal-configuration-setting-content h4 {
  margin: 0 0 5px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
}
.client-portal-configuration-setting-content p {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.4;
}
.client-portal-configuration-setting-content .client-portal-access-title {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-default);
}
.client-portal-configuration-setting-content .client-portal-access-description {
  margin: 0;
  font-size: 13px;
  color: #666;
}

.client-portal-configuration-image-upload select {
  padding: 8px 12px;
  border: 1px solid var(--border-content);
  border-radius: 4px;
  background: var(--bg-content);
  font-size: 14px;
  color: var(--text-default);
}
.client-portal-configuration-image-upload select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.client-portal-configuration-description-editor {
  border: 1px solid var(--border-content);
  border-radius: 4px;
  background: var(--bg-content);
}
.client-portal-configuration-description-editor .editor-toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-content);
  background: var(--bg-grey-fa);
}
.client-portal-configuration-description-editor .editor-toolbar .editor-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}
.client-portal-configuration-description-editor .editor-toolbar .editor-btn:hover {
  background: var(--bg-grey-f5);
  color: var(--text-default);
}
.client-portal-configuration-description-editor .editor-toolbar .editor-btn:focus {
  outline: none;
  background: var(--bg-grey-f5);
  color: var(--text-default);
}
.client-portal-configuration-description-editor .editor-content {
  padding: 12px;
  min-height: 60px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-default);
}
.client-portal-configuration-description-editor .editor-content:focus {
  outline: none;
}
.client-portal-configuration-description-editor .editor-content:empty:before {
  content: attr(placeholder);
  color: var(--text-lighter);
}

.client-portal-portal-access-status {
  z-index: 4;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  background: none;
  border: none;
  padding: 4px 6px;
  margin: -4px 0;
  cursor: pointer;
  transition: background-color var(--transition-fast) ease;
  border-radius: 4px;
}
.client-portal-portal-access-status:hover {
  background-color: var(--bg-input-hover);
}
.client-portal-portal-access-status:hover .list-grid-item-cell {
  background: none !important;
}
.client-portal-portal-access-status:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.portal-access-status-display {
  display: flex;
  align-items: center;
}

.portal-access-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.portal-access-status-dot--enabled {
  background-color: #22ad01;
}
.portal-access-status-dot--disabled {
  background-color: #999999;
}

.client-portal-portal-access-updating {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0;
  padding: 0;
  line-height: 1.4;
  vertical-align: baseline;
  display: inline-block;
}

.search-advanced-filters .react-select-single .Select__control {
  border: 1px solid var(--border-field);
  border-radius: 6px;
  min-height: 38px;
  transition: border-color var(--transition-fast) ease;
}
.search-advanced-filters .react-select-single .Select__control:hover {
  border-color: var(--color-primary);
}
.search-advanced-filters .react-select-single .Select__control.Select__control--is-focused {
  border-color: var(--color-primary);
  box-shadow: none;
}
.search-advanced-filters .react-select-single .Select__control.Select__control--menu-is-open {
  border-top: 1px solid var(--color-primary);
  border-left: 1px solid var(--color-primary);
  border-right: 1px solid var(--color-primary);
  border-bottom: 1px solid var(--border-field);
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.search-advanced-filters .react-select-single .Select__menu {
  margin-top: -1px;
  border: 1px solid var(--color-primary);
  border-top-color: var(--border-field);
  border-radius: 0;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--black) 10%, transparent);
  overflow: hidden;
}

.client-portal-preview-section {
  margin-bottom: 30px;
}

.client-portal-preview-setting {
  align-items: flex-start;
  padding: 15px 0;
}
.client-portal-preview-setting .client-portal-configuration-setting-content {
  display: flex;
  flex-direction: column;
}
.client-portal-preview-setting .client-portal-configuration-setting-content h4 {
  margin-bottom: 8px;
}

.client-portal-preview-client-display {
  display: flex;
  align-items: center;
}

.client-portal-preview-client-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
}

.client-portal-preview-button {
  align-self: flex-start;
  margin-top: 25px;
}

.client-portal-preview-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  text-decoration: none;
  margin-top: 7px;
  font-weight: 500;
}
.client-portal-preview-link i {
  font-size: 12px;
}

.client-portal-preview-link-icon {
  position: relative;
  top: 1px;
  width: 14px;
  height: auto;
  margin-right: 5px;
}
.client-portal-preview-link-icon path {
  fill: currentColor;
}

.client-portal-disabled-message {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  text-align: center;
  padding: 60px 20px;
}
.client-portal-disabled-message .client-portal-disabled-message-content {
  font-size: 18px;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.client-portal-disabled-message .client-portal-disabled-message-content a {
  color: var(--color-primary);
  text-decoration: none;
}
.client-portal-disabled-message .client-portal-disabled-message-content a:hover {
  text-decoration: underline;
}

.doc-ai-editor {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.doc-ai-editor-header {
  padding: 30px 30px 10px;
  font-size: 14px;
  font-weight: 500;
  background: var(--bg-content);
}

.doc-ai-editor-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.doc-ai-editor-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.ai-requests-list {
  position: absolute;
  top: 60px;
  bottom: 130px;
  width: 100%;
  padding: 15px 30px 30px;
  overflow-y: scroll;
}

.ai-requests-empty {
  display: flex;
  align-items: center;
  margin-top: -10px;
  color: var(--text-muted);
  font-weight: 400;
}

.ai-request-item {
  margin-bottom: 15px;
  padding: 12px 15px;
  background: var(--bg-grey-f5);
  border-radius: 6px;
}
.ai-request-item:last-child {
  margin-bottom: 0;
}
.ai-request-item.ai-request-item--system {
  border: 1px solid var(--border-content);
  background: var(--bg-grey-fc);
}

.ai-request-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}

.ai-request-status {
  font-size: 14px;
}
.ai-request-status.ai-request-status-pending {
  color: #ffc107;
}
.ai-request-status.ai-request-status-completed {
  color: #28a745;
}
.ai-request-status.ai-request-status-error {
  color: #dc3545;
}

.ai-request-timestamp {
  font-size: 12px;
  color: var(--text-muted);
}

.ai-request-message {
  color: var(--text-muted);
  word-wrap: break-word;
  white-space: pre-wrap;
}

.ai-response-slots {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ai-slot-item {
  position: relative;
  padding-left: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.ai-slot-status {
  position: absolute;
  left: 0;
}
.ai-slot-status.ai-slot-status--pending, .ai-slot-status.ai-slot-status--processing {
  top: 7px;
  left: -2px;
}

.doc-ai-editor-form {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid var(--border-content);
  padding: 20px;
  background: var(--bg-content);
}

.ai-request-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.ai-request-textarea {
  max-height: 200px;
}

.doc-builder-page {
  position: relative;
  z-index: 1;
  height: calc(100vh - 60px);
}
@media (min-width: 1200px) {
  .doc-builder-page.with-side-panel {
    padding-right: var(--document-editor-width);
  }
}
.doc-builder-page .gjs-cv-canvas {
  width: 100%;
  height: 100%;
  top: 0;
}
.doc-builder-page .gjs-frame {
  background-color: var(--bg-grey-f5);
}
.doc-builder-page .gjs-cv-canvas .gjs-highlighter,
.doc-builder-page .gjs-cv-canvas .gjs-highlighter-sel {
  outline: 1px solid var(--border-content) !important;
  outline-offset: 0 !important;
}
.doc-builder-page .gjs-com-badge,
.doc-builder-page .gjs-badge {
  font-family: "Geist", "Helvetica Neue", "Helvetica", arial, sans-serif;
  padding: 5px 0;
  color: var(--color-primary-contrast);
  font-size: 12px;
  font-weight: 600;
  background: none;
}
.doc-builder-page .gjs-badge__name {
  padding: 1px 6px 1px;
  color: var(--color-primary-contrast);
  font-size: 12px;
  font-weight: 600;
  background: var(--black);
  border-radius: 4px;
}
.doc-builder-page .gjs-toolbar {
  padding: 5px 0;
  background: none;
}
.doc-builder-page .gjs-toolbar {
  position: initial;
  padding: 0;
  background: none;
}
.doc-builder-page .gjs-toolbar-item.gjs-toolbar-item--drag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -3px;
  right: 100%;
  margin-right: 3px;
  height: 24px;
  padding: 0;
  max-height: calc(100% + 6px);
  color: var(--text-default);
  background: none;
}
.doc-builder-page .gjs-toolbar-item.gjs-toolbar-item--drag-icon svg {
  fill: var(--text-lighter);
  width: 8px;
  height: auto;
}
.doc-builder-page .gjs-toolbar-item.gjs-toolbar-item--drag-icon:hover svg {
  fill: var(--text-muted);
}
.doc-builder-page .gjs-toolbar-item.gjs-toolbar-item--delete-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 100%;
  top: -2px;
  height: 24px;
  width: 24px;
  max-height: calc(100% + 4px);
  padding: 0;
  background: var(--grey-e);
  border-radius: 0 3px 3px 0;
}
.doc-builder-page .gjs-toolbar-item.gjs-toolbar-item--delete-icon svg {
  width: 12px;
  height: auto;
}
.doc-builder-page .gjs-toolbar-item.gjs-toolbar-item--delete-icon svg path {
  fill: var(--grey-9);
}
.doc-builder-page .gjs-toolbar-item.gjs-toolbar-item--delete-icon:hover svg path {
  fill: var(--grey-6);
}
.doc-builder-page .gjs-toolbar-item.gjs-toolbar-item--settings-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 100%;
  top: -2px;
  height: 24px;
  width: 24px;
  margin-left: -22px;
  max-height: calc(100% + 4px);
  padding: 0;
  background: var(--grey-e);
  border-radius: 3px;
}
.doc-builder-page .gjs-toolbar-item.gjs-toolbar-item--settings-icon svg {
  width: 14px;
  height: auto;
}
.doc-builder-page .gjs-toolbar-item.gjs-toolbar-item--settings-icon svg path {
  fill: var(--grey-9);
}
.doc-builder-page .gjs-toolbar-item.gjs-toolbar-item--settings-icon:hover svg path {
  fill: var(--grey-6);
}
.doc-builder-page .gjs-placeholder.horizontal {
  border-color: transparent !important;
}
.doc-builder-page .gjs-placeholder.vertical {
  border-color: transparent !important;
}
.doc-builder-page .gjs-placeholder-int {
  padding: 1px;
  background-color: var(--black);
  border-radius: 2px;
  box-shadow: none;
}
.doc-builder-page .gjs-placeholder.horizontal,
.doc-builder-page .gjs-com-placeholder.horizontal,
.doc-builder-page .gjs-placeholder.horizontal {
  margin: -4px 0 0;
  border-width: 3px 0;
  transition: top 0.05s, left 0.05s, width 0.05s, height 0.05s;
}
.doc-builder-page .gjs-resizer-h {
  width: 6px;
  height: 6px;
  border-width: 3px;
  border-color: var(--grey-c) !important;
  border-radius: 50%;
}
.doc-builder-page .gjs-resizer-h::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  background: none;
  border-radius: 50%;
}
.doc-builder-page .gjs-rte-toolbar-ui {
  position: fixed !important;
  top: 60px !important;
  left: 0 !important;
  width: auto !important;
  right: var(--document-editor-width) !important;
}
.doc-builder-page .gjs-rte-toolbar-ui:empty {
  display: none !important;
}
.doc-builder-page .doc-builder-field-select-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.doc-builder-default-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.doc-builder-tab-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.doc-builder-component-title {
  position: relative;
  padding: 30px 30px 15px;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.doc-builder-component-title-close {
  position: absolute;
  top: 2px;
  right: 0;
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.doc-builder-component-title-close-icon {
  width: 13px;
  height: auto;
  transition: all var(--transition-normal) ease;
}
.doc-builder-component-title-close-icon path {
  fill: var(--text-lighter);
}
.doc-builder-component-title-close:hover .doc-builder-component-title-close-icon path {
  fill: var(--text-muted);
}

.doc-trait-field {
  width: 100%;
}

.doc-trait-field input,
.doc-trait-field select,
.doc-trait-field button {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--grey-c);
  border-radius: 4px;
  font-size: 14px;
}

.doc-trait-field input[type=checkbox] {
  width: auto;
}

.doc-trait-field button {
  background-color: var(--grey-f1);
  cursor: pointer;
}

.doc-trait-field button:hover {
  background-color: var(--grey-e);
}

.doc-trait-field-description {
  padding: 12px 15px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-default);
  word-break: break-word;
  cursor: default;
  background: var(--bg-grey-f8);
  border-radius: 6px;
}

.doc-builder-block-manager {
  padding: 30px;
}

.doc-builder-block-category {
  margin-bottom: 20px;
}

.doc-builder-block-category-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--text-default);
}

.doc-builder-block-category-items {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
}

.doc-builder-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 4px;
  cursor: move;
  transition: all var(--transition-normal) ease;
  user-select: none;
}

.doc-builder-block:hover {
  border-color: var(--border-darker);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--black) 10%, transparent);
}

.doc-builder-block-media {
  position: relative;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc-builder-block-section-icon {
  width: 14px;
  height: auto;
}
.doc-builder-block-section-icon path {
  fill: var(--text-default);
}
.doc-builder-block-section-icon--text {
  width: 12px;
}
.doc-builder-block-section-icon--two-column {
  width: 14px;
}
.doc-builder-block-section-icon--three-column {
  width: 14px;
}
.doc-builder-block-section-icon--initials {
  width: 10px;
}
.doc-builder-block-section-icon--signature {
  width: 14px;
}
.doc-builder-block-section-icon--text-input {
  width: 9px;
}

.doc-builder-block-label {
  font-size: 14px;
  text-align: center;
  color: var(--text-default);
}

.doc-builder-block-manager-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 400px;
  padding: 0 40px;
  color: var(--text-lighter);
}

.custom-style-manager {
  font-size: 14px;
}

.doc-builder-style-sections {
  margin-bottom: 30px;
}

.doc-builder-style-section-title {
  font-size: 14px;
  font-weight: 500;
  padding: 12px 30px 10px;
  color: var(--text-default);
}

.doc-builder-style-section-properties {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 5px 30px 10px;
}

.document-editor-spacing-fields {
  position: relative;
  height: 175px;
  width: 100%;
  width: calc(100% - 60px);
  margin: 0 30px 10px;
  background-color: var(--bg-grey-fc);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.document-editor-spacing-fields-label {
  position: absolute;
  top: 5px;
  left: 7px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-lighter);
}

.document-editor-spacing-fields-margin {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.document-editor-spacing-fields-padding {
  position: absolute;
  top: 40px;
  left: 50px;
  right: 50px;
  bottom: 40px;
  background-color: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 2px;
}

.document-editor-spacing-field {
  position: absolute;
  width: 40px;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}
.document-editor-spacing-field.--margin-top, .document-editor-spacing-field.--padding-top {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.document-editor-spacing-field.--margin-right, .document-editor-spacing-field.--padding-right {
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}
.document-editor-spacing-field.--margin-bottom, .document-editor-spacing-field.--padding-bottom {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.document-editor-spacing-field.--margin-left, .document-editor-spacing-field.--padding-left {
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}
.document-editor-spacing-field.--page-margin-left {
  top: 50%;
  left: 45px;
  transform: translateY(-50%);
}
.document-editor-spacing-field.--page-margin-top {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.document-editor-spacing-field.--page-margin-right {
  top: 50%;
  right: 45px;
  transform: translateY(-50%);
}
.document-editor-spacing-field.--page-margin-bottom {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.doc-builder-page-margin {
  position: relative;
  width: 100%;
  height: 220px;
  background-color: var(--bg-grey-fc);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.doc-builder-page-margin-rect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 140px;
  background-color: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 1px;
}

.style-sector {
  margin-bottom: 25px;
}

.style-sector-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-content);
  color: var(--text-muted);
}

.style-sector-properties {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.style-property-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  min-height: 30px;
}

.style-property-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.style-property-input-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: auto;
}
.style-property-input-icon path {
  fill: var(--text-lighter);
}

.style-property-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 40%;
}
.style-property-input .dropdown-contained {
  width: 100%;
}
.style-property-input .form-field {
  width: 100%;
}

.style-manager-empty {
  padding: 30px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  border: 1px dashed var(--border-content);
  border-radius: 4px;
  margin: 30px;
}

.style-property-group {
  margin-bottom: 15px;
  border: 1px solid var(--border-content);
  border-radius: 4px;
  padding: 12px;
  background-color: var(--bg-grey-fa);
}

.style-property-group-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-muted);
  padding-bottom: 5px;
  border-bottom: 1px dotted var(--border-content);
}

.style-property-group-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.style-property-group-item {
  flex-basis: calc(50% - 5px);
  background: var(--bg-content);
  padding: 8px;
  border-radius: 3px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--black) 5%, transparent);
}

.style-property-close-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0.3;
  transition: all var(--transition-normal) ease;
}
.style-property-close-icon:hover {
  opacity: 0.5;
}
.style-property-close-icon svg {
  width: 8px;
  height: auto;
}

.doc-builder-style-section .document-editor-color-picker {
  position: absolute;
  z-index: 9999;
}
.doc-builder-style-section .document-editor-color-picker-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
}
.doc-builder-style-section .document-editor-color-input {
  border-radius: 4px;
  border: 1px solid var(--border-content);
  cursor: pointer;
  overflow: hidden;
}
.doc-builder-style-section .document-editor-color-input.document-editor-color-input--rounded {
  border-radius: 40px;
}
.doc-builder-style-section .document-editor-color-preview {
  width: 100%;
  height: 100%;
}

.doc-builder-variables {
  margin-bottom: 20px;
}

.doc-builder-variable-list {
  padding: 20px;
  background-color: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}

.doc-builder-variable-item {
  margin-bottom: 10px;
}
.doc-builder-variable-item.doc-builder-variable-item--missing .doc-builder-variable-item-label {
  color: var(--color-danger);
}
.doc-builder-variable-item.doc-builder-variable-item--missing .form-field {
  border-color: var(--color-danger);
}

.doc-builder-variable-item-label {
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-default);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-builder-variable-input.form-field-view-only {
  cursor: not-allowed;
  background-color: var(--bg-content);
  border-color: var(--border-field);
}

.doc-builder-variable-item-readonly {
  font-size: 14px;
  color: var(--text-default);
  padding: 4px 0;
}

.doc-builder-variable-item-label-missing-icon {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 10px;
  height: auto;
}
.doc-builder-variable-item-label-missing-icon path {
  fill: var(--color-danger);
}

.doc-builder-variable-item-label-checked-icon {
  position: absolute;
  right: 9px;
  top: 11px;
  width: 10px;
  height: auto;
}
.doc-builder-variable-item-label-checked-icon path {
  stroke: var(--color-primary);
}

.gjs-rte-toolbar.gjs-rte-toolbar-ui {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--bg-content);
  border: none;
  border-bottom: 1px solid var(--border-content);
  border-radius: 0;
}

.tiptap-toolbar {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 2px;
  align-items: center;
}
.tiptap-toolbar button svg {
  width: 15px;
  height: auto;
  color: var(--text-default);
}

button svg.tiptap-toolbar-icon--subscript {
  position: relative;
  top: -1px;
}

.tiptap-toolbar-group {
  display: flex;
  gap: 5px;
  align-items: center;
}

.tiptap-toolbar-separator {
  width: 1px;
  height: 24px;
  background-color: var(--tt-border-color, rgba(37, 39, 45, 0.1));
  margin: 0 8px;
}

.tiptap-spacer {
  flex: 1;
}

.tiptap-toolbar button {
  height: 32px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-content);
  border: none;
  border-radius: 4px;
  padding: 5px;
  color: var(--text-default);
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}

.tiptap-toolbar button:hover {
  background: var(--bg-grey-f8);
}

.tiptap-toolbar button.is-active {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
}

/* Editor content styling */
.tiptap-editor-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tiptap-content-container {
  flex: 1;
  outline: none;
  height: 100%;
  padding: 8px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Dropdown styling */
.tiptap-dropdown {
  position: relative;
  display: inline-block;
}

.tiptap-dropdown button {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tiptap-toolbar button .tiptap-dropdown-arrow {
  width: 7px;
  height: auto;
  color: var(--text-lighter);
}
.tiptap-toolbar button .tiptap-dropdown-arrow path {
  fill: var(--text-lighter);
}

.tiptap-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 160px;
  max-height: 220px;
  margin-top: 2px;
  padding: 5px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 4px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--black) 10%, transparent);
  overflow: hidden;
  overflow-y: auto;
}
.tiptap-dropdown-content::-webkit-scrollbar {
  display: none;
}
.tiptap-dropdown-content.tiptap-dropdown-content--merge-fields {
  min-width: 210px;
  max-height: 300px;
  overflow-y: auto;
}

.tiptap-merge-field-search {
  position: sticky;
  top: -5px;
  margin: -5px -5px 0;
  padding: 10px;
  background: var(--bg-content);
}

.tiptap-merge-field-search-empty {
  padding: 10px;
  margin: 0 5px 5px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-content-empty);
  border-radius: 5px;
}

.tiptap-dropdown-content > button,
.tiptap-dropdown-content > .tiptap-dropdown-content-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  word-break: break-word;
  border: none;
  border-radius: 4px;
}
.tiptap-dropdown-content > button, .tiptap-dropdown-content > button:focus, .tiptap-dropdown-content > button:visited,
.tiptap-dropdown-content > .tiptap-dropdown-content-item,
.tiptap-dropdown-content > .tiptap-dropdown-content-item:focus,
.tiptap-dropdown-content > .tiptap-dropdown-content-item:visited {
  color: var(--text-default);
}

.tiptap-dropdown-content > button:hover,
.tiptap-dropdown-content > button:active,
.tiptap-dropdown-content > button:focus-visible,
.tiptap-dropdown-content > .tiptap-dropdown-content-item:hover,
.tiptap-dropdown-content > .tiptap-dropdown-content-item:active,
.tiptap-dropdown-content > .tiptap-dropdown-content-item:focus-visible {
  background: var(--bg-input-hover-subtle);
  color: var(--text-default);
  text-decoration: none;
}

.tiptap-dropdown-content > button.is-active,
.tiptap-dropdown-content > .tiptap-dropdown-content-item.is-active {
  background: var(--bg-input-hover-active-light);
  color: var(--color-primary);
  text-decoration: none;
}

.tiptap-toolbar button .tiptap-dropdown-icon--merge-field {
  width: 13px;
}

.doc-component-context-menu {
  min-width: 160px;
  font-family: var(--font-sans-serif);
  padding: 5px 5px;
  margin: 5px 0 0 0;
  border-radius: 10px;
  background: var(--bg-content);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--black) 10%, transparent);
  border: 1px solid var(--border-content);
  overflow: hidden;
  user-select: none;
}

.doc-context-menu-item {
  display: block;
  padding: 8px 12px;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-default);
  border-radius: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-context-menu-item:focus, .doc-context-menu-item:visited, .doc-context-menu-item:hover, .doc-context-menu-item:active {
  color: var(--text-default);
}
.doc-context-menu-item:hover:not(.disabled) {
  color: var(--color-primary);
  background-color: var(--bg-grey-fc);
}
.doc-context-menu-item.disabled {
  color: var(--text-muted-alt);
  cursor: not-allowed;
}

.doc-context-menu-label {
  flex: 1;
  text-align: left;
}

.doc-context-menu-separator {
  height: 1px;
  margin: 5px 10px;
  background-color: var(--bg-grey-e);
}

.doc-fee-overlay-body {
  max-width: var(--wrapper-smd-width);
  padding: 40px 40px 60px;
  margin: 0 auto;
  overflow-x: auto;
}

.doc-fee-overlay-package-optional-indicator {
  position: relative;
  top: 1px;
  display: inline-block;
  margin-right: 7px;
  width: 12px;
  height: 12px;
  background: var(--black);
  padding: 2px;
  border-radius: 3px;
}
.doc-fee-overlay-package-optional-indicator path {
  fill: var(--bg-content);
}

.doc-fee-overlay-package-header {
  padding: 20px;
  margin-bottom: 20px;
  background: var(--bg-grey-f8);
  border-radius: 8px;
}
.doc-fee-overlay-package-header a,
.doc-fee-overlay-package-header a:focus,
.doc-fee-overlay-package-header a:visited {
  color: var(--text-default);
}
.doc-fee-overlay-package-header a:hover {
  color: var(--text-default);
}

.doc-fee-overlay-package-header-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.doc-fee-overlay-package-dropdown-toggle {
  position: relative;
  top: -10px;
}

.doc-fee-overlay-package-header-unit {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}

.doc-fee-overlay-package-tax {
  display: flex;
  align-items: center;
  gap: 5px;
  text-align: right;
  margin-right: 25px;
}
.doc-fee-overlay-package-tax .items-list-item-dropdown-toggle {
  right: -23px;
  top: 3px;
}
.doc-fee-overlay-package-tax .dropdown-menu-chevron-icon {
  width: 7px;
  height: auto;
}

.doc-fee-overlay-package-fees {
  padding: 30px 0 20px;
  border: 1px solid var(--border-content);
  border-radius: 8px;
}
.doc-fee-overlay-package-fees .items-list-item-amount {
  width: 50px;
  min-width: 50px;
}

.doc-fee-overlay-scrollable {
  min-width: calc(var(--wrapper-smd-width) - 80px);
}

.doc-fee-overlay-row-wrapper {
  position: relative;
}

.doc-fee-overlay-row-wrapper-draggable {
  position: relative;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.doc-fee-overlay-row-wrapper-draggable.doc-fee-overlay-row-wrapper--dragging {
  opacity: 0.5;
}
.doc-fee-overlay-row-wrapper-draggable.doc-fee-overlay-row-wrapper--drop-top .doc-fee-overlay-row, .doc-fee-overlay-row-wrapper-draggable.doc-fee-overlay-row-wrapper--drop-bottom .doc-fee-overlay-row {
  background-color: var(--bg-grey-fc);
}
.doc-fee-overlay-row-wrapper-draggable.doc-fee-overlay-row-wrapper--drop-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30px;
  right: 30px;
  height: 1px;
  background-color: var(--black);
  border-radius: 2px;
  z-index: 10;
}
.doc-fee-overlay-row-wrapper-draggable.doc-fee-overlay-row-wrapper--drop-bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 30px;
  right: 30px;
  height: 1px;
  background-color: var(--black);
  border-radius: 2px;
  z-index: 10;
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.doc-fee-overlay-row.invoice-editor-line-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 15px 60px 15px 30px;
}
.doc-fee-overlay-row.invoice-editor-line-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 30px;
  right: 30px;
  height: 1px;
  background-color: var(--border-content);
}
.doc-fee-overlay-row.invoice-editor-line-item.doc-fee-overlay-row--optional {
  padding-left: 30px;
}
.doc-fee-overlay-row.invoice-editor-line-item.doc-fee-overlay-row--dragging {
  opacity: 0.5;
}
.doc-fee-overlay-row-wrapper:last-child .doc-fee-overlay-row.invoice-editor-line-item.doc-fee-overlay-row--with-estimate {
  border-bottom: none;
}

.doc-fee-overlay-row-drag-handle {
  position: absolute;
  z-index: 5;
  left: 3px;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 40px;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.doc-fee-overlay-row-drag-handle:hover, .doc-fee-overlay-row:hover .doc-fee-overlay-row-drag-handle {
  opacity: 1;
}
.doc-fee-overlay-row-drag-handle:active {
  cursor: grabbing;
}
.doc-fee-overlay-row-drag-handle svg {
  width: 7px;
  height: auto;
}

.doc-fee-row-drag-preview {
  padding: 12px 16px;
  min-width: 250px;
  max-width: 400px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 6px;
  box-shadow: var(--box-shadow-medium);
}

.doc-fee-overlay-row-columns {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
}

.doc-fee-overlay-col-headers.items-list-item-labels {
  padding: 0 60px 5px 30px;
}
.doc-fee-overlay-col-headers.items-list-item-labels label {
  margin-bottom: 0;
  color: var(--text-lighter);
}

.doc-fee-overlay-row-optional {
  position: absolute;
  left: 30px;
  top: 22px;
  width: 15px;
  height: 15px;
  background-color: var(--bg-grey-e);
  border-radius: 4px;
  border: 1px solid var(--border-darker);
}

.doc-fee-overlay-row-actions {
  position: absolute;
  right: 25px;
  top: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.doc-fee-overlay-row-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
}
.doc-fee-overlay-row-dropdown-toggle:hover {
  background-color: var(--bg-hover-subtle);
}
.doc-fee-overlay-row-dropdown-toggle .list-item-dd-toggle-dots {
  width: 14px;
  height: auto;
  fill: var(--text-muted);
}

.doc-role-card-header {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  user-select: none;
  color: var(--text-default);
}

.doc-role-card-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.doc-role-card-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 5px;
}

.doc-role-card-icon {
  width: 14px;
  height: auto;
}

.doc-preview-page {
  position: relative;
  z-index: 1;
  height: calc(100vh - 60px);
}
@media (min-width: 1200px) {
  .doc-preview-page.with-side-panel {
    padding-right: var(--document-editor-width);
  }
}

.doc-preview-sidebar-recipients-list {
  display: flex;
  flex-direction: column;
  margin-top: -10px;
  margin-left: -10px;
  width: calc(100% + 20px);
}

.doc-preview-sidebar-recipients-list-item {
  position: relative;
  display: flex;
  gap: 15px;
  align-items: flex-start;
  margin-bottom: 5px;
  padding: 10px 10px;
  border-radius: 4px;
}
.doc-preview-sidebar-recipients-list-item:last-child {
  margin-bottom: 0;
}

.doc-preview-sidebar-recipients-list-item-avatar {
  flex-shrink: 0;
}

.doc-preview-sidebar-recipients-list-item-content {
  flex: 1;
  min-width: 0;
  margin-top: -5px;
}

.doc-preview-sidebar-recipients-list-item-name {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

.doc-preview-sidebar-recipients-list-item-detail {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

.doc-preview-sidebar-recipients-list-item-status {
  position: absolute;
  top: 17px;
  right: -3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--border-content-alt);
  box-shadow: 0 0 0 1.5px var(--bg-content);
}
.doc-preview-sidebar-recipients-list-item-status.completed {
  background: var(--color-primary);
}
.doc-preview-sidebar-recipients-list-item-status.pending {
  background: var(--border-content-alt);
}

.doc-preview-sidebar-recipients-list-item-icon {
  width: 7px;
  height: auto;
}
.doc-preview-sidebar-recipients-list-item-icon path {
  fill: var(--bg-content);
}
.doc-preview-sidebar-recipients-list-item-icon.--pending {
  width: 6px;
}
.doc-preview-sidebar-recipients-list-item-icon.--pending path {
  fill: var(--text-default);
}
.doc-preview-sidebar-recipients-list-item-icon.--completed {
  width: 8px;
}

.preview-document-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  background: rgba(50, 50, 50, 0.8);
  backdrop-filter: blur(6px);
}

.preview-document-overlay-content {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.preview-document-overlay-content .doc-preview-container {
  min-height: 100%;
}

.preview-document-overlay-content-title {
  position: absolute;
  z-index: 2;
  top: 0;
  width: 100%;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-primary-contrast);
  background: color-mix(in srgb, var(--black) 85%, transparent);
}

.preview-document-overlay-close {
  position: absolute;
  top: 7px;
  right: 5px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border: none;
  opacity: 0.7;
  transition: opacity var(--transition-slower) ease-in-out;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=) no-repeat center;
}
.preview-document-overlay-close:hover {
  opacity: 1;
}

.doc-preview-container {
  color: var(--black);
  background: var(--bg-content-alt) !important;
}
.doc-preview-container h1,
.doc-preview-container h2,
.doc-preview-container h3,
.doc-preview-container h4,
.doc-preview-container h5,
.doc-preview-container h6 {
  color: var(--black);
}

.doc-preview-signature-modal-draw {
  border: 1px solid var(--border-content-alt);
  border-radius: 8px;
}

.doc-preview-signature-modal-draw-canvas {
  position: relative;
  width: 100%;
  height: 150px;
  border-bottom: 1px solid var(--border-content-alt);
}

.doc-preview-signature-modal-draw-actions {
  display: flex;
  justify-content: flex-end;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.doc-preview-signature-modal-draw-action, .doc-preview-signature-modal-draw-action:focus, .doc-preview-signature-modal-draw-action:visited {
  color: var(--text-muted);
}
.doc-preview-signature-modal-draw-action:hover {
  color: var(--text-muted);
}

.doc-preview-signature-modal-type {
  border: 1px solid var(--border-content-alt);
  border-radius: 8px;
}

.doc-preview-signature-modal-type-input {
  display: flex;
  align-items: center;
  height: 150px;
  width: 100%;
  padding: 0 20px;
  text-align: center;
  font-size: 32px;
  font-weight: 500;
  color: var(--text-default);
  border: none;
  outline: none;
}

.doc-preview-signature-modal-type-actions {
  display: flex;
  justify-content: flex-end;
  padding: 7px 5px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  border-top: 1px solid var(--border-content-alt);
}

.doc-preview-signature-modal-type-font {
  width: auto;
}
.doc-preview-signature-modal-type-font .Select__single-value {
  text-align: right;
  color: var(--text-muted);
}
.doc-preview-signature-modal-type-font .Select__single-value:hover {
  color: var(--text-muted);
}
.doc-preview-signature-modal-type-font .Select__menu {
  width: 200px;
  right: -10px;
  left: auto;
  margin-top: 5px;
}

.doc-preview-signature-modal-legal-text {
  padding: 20px 0;
  margin-bottom: 20px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: default;
}

.doc-wizard-step-title {
  position: relative;
  top: -1px;
}

.doc-wizard-step-template-name {
  position: absolute;
  left: 50%;
  top: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: default;
  transform: translateX(-50%) translateY(-50%);
}
@media (min-width: 768px) {
  .doc-wizard-step-template-name {
    display: flex;
  }
}

.doc-wizard-step-template-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--bg-grey-f5);
  border-radius: 4px;
}

.doc-wizard-step-template-svg {
  width: auto;
  height: 10px;
}
.doc-wizard-step-template-svg path {
  fill: var(--text-muted);
}

.doc-wizard-step-template-name-text {
  position: relative;
  top: -1px;
  max-width: 180px;
}

.doc-wizard-body {
  padding: 30px 0;
}
@media (min-width: 768px) {
  .doc-wizard-body {
    padding: 30px;
  }
}

.doc-wizard-member-selector {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 15px;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--border-content);
}

.doc-recipient-card {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px;
  margin-bottom: 15px;
  cursor: default;
  border-radius: 8px;
  border: 1px solid var(--border-content);
}
.doc-recipient-card.doc-recipient-card--sm {
  padding: 15px;
  margin-bottom: 10px;
}

.doc-recipient-role-content {
  display: flex;
  flex: 1;
  align-items: flex-start;
  min-width: 0;
  padding-right: 20px;
}
.doc-recipient-card--sm .doc-recipient-role-content {
  padding-right: 0;
}

.doc-wizard-add-recipients {
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--border-content);
}

.doc-recipient-avatar {
  position: relative;
  margin-right: 15px;
}
.doc-recipient-card--sm .doc-recipient-avatar {
  top: -3px;
  margin-right: 12px;
}

.doc-recipient-actions {
  display: flex;
  gap: 8px;
}
.doc-recipient-card--sm .doc-recipient-actions {
  display: none;
  position: absolute;
  right: 10px;
  top: 10px;
}
.doc-recipient-card--sm:hover .doc-recipient-actions {
  display: flex;
}

.doc-recipient-info {
  flex: 1;
  min-width: 0;
}

.doc-recipient-name {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}
.doc-recipient-card--sm .doc-recipient-name {
  justify-content: space-between;
  margin-bottom: 1px;
  font-weight: 500;
  font-size: 14px;
}

.doc-recipient-role {
  position: relative;
  flex-shrink: 0;
  max-width: 130px;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  padding: 1px 8px 2px;
  color: var(--text-muted);
}
.doc-recipient-role.sender-role {
  color: color-mix(in srgb, var(--black) 70%, transparent);
}
.doc-recipient-role.receiver-role {
  color: color-mix(in srgb, var(--black) 70%, transparent);
}
.doc-recipient-role.cc-role {
  color: color-mix(in srgb, var(--black) 70%, transparent);
}
.doc-recipient-card--sm .doc-recipient-role {
  max-width: 100%;
}

.doc-recipient-role-color {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-grey-e);
  opacity: 0.2;
  border-radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .doc-recipient-role-color {
    opacity: 0.45;
  }
}
:root[data-theme=dark] .doc-recipient-role-color {
  opacity: 0.45;
}
.doc-recipient-role.sender-role .doc-recipient-role-color {
  background: var(--color-primary);
}
.doc-recipient-role.receiver-role .doc-recipient-role-color {
  background: var(--color-accent-blue);
}
.doc-recipient-role.cc-role .doc-recipient-role-color {
  background: var(--text-muted);
}

.doc-recipient-role-label {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: var(--text-default);
}

.doc-recipient-company {
  color: var(--text-muted);
  font-size: 12px;
}

.doc-recipient-email {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 2px;
}
.doc-recipient-card--sm .doc-recipient-email {
  font-size: 12px;
}

.doc-wizard-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 30px;
}

.doc-wizard-confirmation-content {
  text-align: center;
  padding: 60px 0;
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
  border-radius: 8px;
}

.doc-wizard-confirmation-message {
  font-size: 20px;
  color: var(--text-default);
}

.doc-wizard-confirmation-copy {
  max-width: 620px;
  margin: auto;
  padding: 20px;
  color: var(--text-default);
  font-size: 16px;
}
.doc-wizard-confirmation-copy a:not(.btn),
.doc-wizard-confirmation-copy a:not(.btn):focus,
.doc-wizard-confirmation-copy a:not(.btn):visited,
.doc-wizard-confirmation-copy a:not(.btn):hover,
.doc-wizard-confirmation-copy a:not(.btn):active {
  color: var(--text-default);
  text-decoration: underline;
}

.docs-list-item-date-pending {
  color: var(--color-danger);
}

.docs-list-item-pending-icon {
  margin-right: 7px;
  width: 14px;
  height: auto;
}
.docs-list-item-pending-icon path {
  fill: currentColor;
}

.navigation-doc-fields-count {
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  gap: 7px;
  padding-right: 15px;
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  transition: all var(--transition-normal) ease;
}
@media (min-width: 768px) {
  .navigation-doc-fields-count {
    display: flex;
  }
}
.navigation-doc-fields-count--completed {
  gap: 0;
}

.navigation-doc-fields-count-text {
  transition: all var(--transition-normal) ease;
}
.navigation-doc-fields-count--completed .navigation-doc-fields-count-text {
  color: var(--text-lighter);
}

.navigation-doc-count-progress {
  position: relative;
  width: 150px;
  height: 4px;
  border-radius: 4px;
  background: var(--bg-grey-e);
  transition: all var(--transition-normal) ease;
}
.navigation-doc-fields-count--completed .navigation-doc-count-progress {
  height: 0;
  transform: translateY(5px);
}

.navigation-doc-fields-count-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 4px;
  background: var(--black);
  transition: width var(--transition-medium) ease;
}

.doc-sign-confirmation-package {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 15px;
  margin-top: 10px;
  text-align: left;
  cursor: default;
  background: var(--bg-grey-f8);
  border-radius: 4px;
  border: 1px solid var(--border-content);
}
.doc-sign-confirmation-package:first-child {
  margin-top: 40px;
}

.doc-sign-confirmation-package-title {
  flex: 1;
  padding-right: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-default);
}

.doc-sign-confirmation-package-total {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}

.doc-sign-confirmation-totals {
  margin-top: 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-default);
}

.doc-sign-confirmation-totals-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wysiwyg-link-popover {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 2px;
  z-index: 1000;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 4px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--black) 10%, transparent);
  padding: 12px;
  width: 300px;
}

.wysiwyg-link-popover-title {
  margin-bottom: 5px;
  font-weight: 500;
  font-size: 14px;
}

.wysiwyg-link-popover-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wysiwyg-link-popover-checkbox {
  margin-top: 5px;
}

.wysiwyg-link-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  margin-top: 5px;
  font-size: 14px;
}

.ProseMirror {
  outline: none;
  height: 100%;
}

.ProseMirror p {
  margin: 0.5em 0;
}

.ProseMirror h1 {
  font-size: 1.5em;
  margin: 0.67em 0;
}

.ProseMirror h2 {
  font-size: 1.3em;
  margin: 0.75em 0;
}

.ProseMirror h3 {
  font-size: 1.17em;
  margin: 0.83em 0;
}

.ProseMirror ul,
.ProseMirror ol {
  padding-left: 2em;
}

.ProseMirror a {
  color: var(--tt-brand-color-500, rgb(98, 41, 255));
  text-decoration: underline;
}

.ProseMirror blockquote {
  border-left: 3px solid var(--tt-border-color, rgba(37, 39, 45, 0.1));
  padding-left: 1em;
  margin-left: 0;
  margin-right: 0;
}

.ProseMirror pre {
  background: var(--tt-gray-light-100, rgb(244, 244, 245));
  padding: 0.75em 1em;
  border-radius: var(--tt-radius-sm, 0.375rem);
  font-family: monospace;
  overflow-x: auto;
}

.ProseMirror code {
  background: var(--tt-gray-light-100, rgb(244, 244, 245));
  padding: 0.25em;
  border-radius: var(--tt-radius-xs, 0.25rem);
  font-family: monospace;
}

/* Task lists */
.ProseMirror ul[data-type=taskList] {
  list-style: none;
  padding: 0;
}

.ProseMirror ul[data-type=taskList] li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.5em;
}

.ProseMirror ul[data-type=taskList] li > label {
  flex: 0 0 auto;
  margin-right: 0.5em;
  user-select: none;
}

/* Mark styles */
.ProseMirror mark {
  background-color: var(--tt-color-yellow-base, hsl(52, 100%, 50%));
  color: inherit;
}

.estimate-editor-page {
  position: relative;
  z-index: 1;
  padding-top: 40px;
  padding-bottom: 120px;
  background: var(--bg-content-alt);
}
.estimate-editor-page.with-side-panel {
  min-height: 100vh;
}
@media (min-width: 1200px) {
  .estimate-editor-page.with-side-panel {
    padding-right: var(--document-editor-width);
  }
}

.estimate-sidebar-top {
  margin-bottom: 25px;
}

.estimate-sidebar-top-title {
  flex: 1;
  min-height: 30px;
  padding: 8px var(--ghost-input-side-width) 8px;
  margin-left: calc(var(--ghost-input-side-width) * -1);
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 500;
  word-break: break-word;
  word-wrap: break-word;
  cursor: text;
}
.estimate-sidebar-top-title:empty:before {
  padding-left: var(--ghost-input-side-width);
}
@media (min-width: 768px) {
  .estimate-sidebar-top-title {
    padding-top: 2px;
    padding-bottom: 0;
    transition: background var(--transition-fast) ease;
    border-radius: 4px;
  }
  .estimate-sidebar-top-title:hover:not(.content-editable-input-disabled) {
    background: var(--bg-input-hover);
  }
}

.estimate-sidebar-top-total {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  cursor: default;
}
.estimate-sidebar-top-total .ghost-form-select {
  position: absolute;
  z-index: 10;
  top: -3px;
  left: -3px;
  width: 80px;
}

.estimate-sidebar-top-currency {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 5px;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 3px;
}
.estimate-sidebar-top-currency:hover {
  background-color: var(--bg-grey-f8);
}
.estimate-sidebar-top-currency.readonly {
  cursor: default;
}
.estimate-sidebar-top-currency.readonly:hover {
  background-color: transparent;
}

.estimate-sidebar-top-currency-icon {
  width: 8px;
  height: auto;
}
.estimate-sidebar-top-currency-icon path {
  fill: var(--text-muted);
}

.estimate-builder-editable-input.content-editable-input {
  width: 100%;
  min-width: 100px;
  min-height: auto;
  outline: none;
  cursor: text;
  padding: 5px var(--ghost-input-side-width);
  white-space: nowrap;
  border-radius: 4px;
}
.estimate-builder-editable-input.content-editable-input:hover {
  background-color: var(--bg-input-hover);
}
.estimate-builder-editable-input.content-editable-input:focus {
  background-color: var(--bg-content);
}
.estimate-builder-editable-input.content-editable-input.input-error {
  border: 1px solid var(--color-danger);
  background-color: color-mix(in srgb, var(--color-danger) 5%, transparent);
}
.estimate-builder-editable-input.content-editable-input:empty:before {
  padding-left: var(--ghost-input-side-width);
}
.list-grid-group-header-title-content .estimate-builder-editable-input.content-editable-input {
  padding-top: 4px;
  padding-left: 10px;
  padding-right: 10px;
  overflow: visible;
}
.list-grid-group-header-title-content .estimate-builder-editable-input.content-editable-input:empty:before {
  padding-left: 10px;
}
.list-grid-group-header-title-content .estimate-builder-editable-input.content-editable-input:focus {
  background-color: var(--bg-input-hover);
  box-shadow: inset 0 0 0 1px var(--border-content-alt);
}
.list-grid-item-cell .estimate-builder-editable-input.content-editable-input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.estimate-builder-editable-input.content-editable-input.content-editable-input-focused {
  height: 30px;
  min-height: 30px;
  overflow-x: hidden;
  overflow-y: scroll;
  white-space: normal;
  word-break: break-word;
  word-wrap: break-word;
  background-color: var(--bg-content);
  border-radius: 4px;
}

.expense-banking-plaid-reload-notice {
  display: none;
  text-align: center;
}

.expense-banking-blank-container {
  margin-top: 40px;
  padding: 40px;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 5px;
  box-shadow: 0 2px 14px color-mix(in srgb, var(--black) 5%, transparent);
}
@media (min-width: 768px) {
  .expense-banking-blank-container {
    padding: 60px;
  }
}

.expense-banking-blank-header {
  font-weight: 600;
}

.expense-banking-blank-subheader {
  max-width: 400px;
  margin: 0 auto 40px;
  font-size: 16px;
  font-weight: normal;
  color: var(--text-muted-alt);
}

.expenses-accounts-list {
  position: relative;
  max-width: 640px;
  margin: auto;
  padding-top: 40px;
}

.expenses-accounts-list-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  margin-top: -18px;
  font-size: 16px;
  font-weight: 600;
}

.expenses-import-aside-bank-accounts {
  width: 100%;
}

.expenses-accounts-blank-state {
  padding: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--black) 3%, transparent);
}
@media (min-width: 768px) {
  .expenses-accounts-blank-state {
    padding: 50px 60px;
  }
}

.expenses-accounts-blank-state-copy {
  margin: 0 auto 30px;
  max-width: 430px;
}

.expenses-accounts-blank-state-icon {
  height: 60px;
  width: auto;
}

.expenses-accounts-blank-state-ctas {
  max-width: 280px;
  margin: auto;
}

.expense-bank-account-item {
  position: relative;
  margin-bottom: 5px;
  padding: 20px 50px 18px 80px;
  cursor: default;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--black) 3%, transparent);
}
.expense-bank-account-item .list-item-dd-toggle.list-item-dots {
  right: 20px;
}

.expense-bank-account-item-importing-spinner {
  position: absolute;
  left: 23px;
  top: 28px;
  opacity: 0.5;
}

.expense-bank-account-item-icon {
  position: absolute;
  left: 20px;
  top: 26px;
  width: 35px;
  height: auto;
}
.expense-bank-account-item-icon.setup-icon {
  top: 33px;
  left: 30px;
}

.expense-bank-account-item-title {
  margin-bottom: 2px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-default);
}
.expense-bank-account-item.importing .expense-bank-account-item-title, .expense-bank-account-item.reauthenticate .expense-bank-account-item-title {
  color: var(--text-lighter);
}

.expense-bank-account-kind {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--text-lighter);
}
.expense-bank-account-item.importing .expense-bank-account-kind {
  color: var(--text-lighter);
}

.expense-bank-account-reauthenticate {
  margin-top: 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-danger);
}

.expense-bank-account-reauthenticate-copy {
  display: flex;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid;
  border-radius: 3px;
}

@media (min-width: 768px) {
  .expense-bank-account-reauthenticate-actions {
    display: flex;
  }
}

.expense-bank-account-reauthenticate-link {
  width: 100%;
}
@media (min-width: 768px) {
  .expense-bank-account-reauthenticate-link {
    width: auto;
  }
}

.expense-bank-account-number {
  margin-left: 25px;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--text-lighter);
}
.expense-bank-account-item.importing .expense-bank-account-number {
  color: var(--text-lightest);
}

.expense-bank-account-number-dots {
  margin-right: 5px;
  letter-spacing: 0.3em;
}

.expense-bank-account-item-setup-form {
  position: relative;
  padding: 200px 40px 40px;
  text-align: center;
  background: var(--bg-content);
  border-radius: 6px;
}

.expense-bank-account-item-setup-form-in {
  position: relative;
}

.expense-bank-account-item-setup-icon {
  position: absolute;
  left: 50%;
  top: 20px;
  margin-left: -77px;
  height: 200px;
  width: 200px;
  background: center center no-repeat;
  background-size: contain;
  background-image: url("expenses/connect-graphic.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .expense-bank-account-item-setup-icon {
    background-image: url("expenses/connect-graphic@2x.png");
  }
}

.expense-bank-account-item-setup-label {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
}

.expense-bank-account-item-select-text {
  margin-bottom: 15px;
}

.expense-bank-account-item-setup-instructions {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 600;
}

.expense-bank-account-item-select-label {
  display: flex;
  justify-content: space-between;
}

.expense-bank-account-item-select-input {
  text-align: left;
}

.expenses-accounts-list-add {
  position: relative;
  width: 100%;
  padding: 22px 50px 24px 80px;
  margin: auto;
  color: var(--color-primary);
  text-align: left;
  font-size: 18px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 58%, transparent);
  border-radius: 4px;
  background: var(--bg-content);
}
.expenses-accounts-list-add:hover {
  border: 1px solid color-mix(in srgb, var(--color-primary) 70%, transparent);
}

.expenses-accounts-list-add-icon {
  position: absolute;
  left: 23px;
  top: 24px;
  width: 35px;
  height: 35px;
  font-size: 33px;
  color: var(--color-primary);
  line-height: 0;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
  border-radius: 4px;
}

.expenses-accounts-list-add-copy {
  margin-top: 5px;
  font-size: 14px;
  font-style: italic;
  color: var(--text-muted-alt);
}

.expenses-import-aside-notice {
  position: relative;
  margin-top: 60px;
  margin-bottom: 2px;
  font-size: 14px;
  color: var(--text-muted-alt);
  padding: 30px 30px 30px 58px;
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.expenses-import-aside-notice-icon {
  position: absolute;
  left: 19px;
  top: 30px;
  line-height: 1;
  font-size: 28px;
  color: var(--text-muted-alt);
}

.bulk-delete-expenses-notice {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin-top: 25px;
  margin-bottom: 2px;
  font-size: 14px;
  color: var(--text-muted-alt);
  padding: 15px 15px 15px 25px;
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}
.bulk-delete-expenses-notice .action-text {
  display: flex;
  align-items: center;
}
.bulk-delete-expenses-notice button {
  white-space: nowrap;
}

.expense-detail-title {
  font-weight: 600;
}

.expense-detail-amount-date {
  margin-bottom: 30px;
  font-size: 18px;
}

.expense-detail-summary-content {
  margin-bottom: 40px;
}
.expense-detail-summary-content:last-child {
  margin-bottom: 0;
}

.expense-detail-attachment {
  margin-top: 40px;
}

.expense-detail-summary-file-img {
  width: 100%;
  margin-top: 20px;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--black) 10%, transparent);
}
.expense-detail-summary-file-img:hover {
  filter: brightness(0.98);
}

.expense-detail-summary-file-link {
  font-weight: 600;
}

.expense-form-header {
  text-align: left;
  padding: 40px 20px 40px;
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .expense-form-header {
    padding: 30px 30px 31px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.expense-form-header:before, .expense-form-header:after {
  content: none;
}
.expense-form-header .expense-form-switch {
  margin: 0;
}

.expense-deduction-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .expense-deduction-status {
    flex-direction: row-reverse;
    margin-top: 0;
  }
}

.expense-deductible-amount {
  position: relative;
  display: none;
  margin-right: 20px;
  color: var(--color-primary);
  font-style: italic;
  min-height: 40px;
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  .expense-deductible-amount {
    display: flex;
  }
}
.expense-deductible-amount--display .expense-deductible-amount-text {
  line-height: 40px;
}
.expense-deductible-amount--editing {
  align-items: center;
}

.expense-deductible-amount-field {
  width: 120px;
  font-style: normal;
  height: 40px;
  box-sizing: border-box;
}

.expense-deductible-amount-field-icon {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  padding: 10px 15px;
  color: var(--text-lighter);
  background-color: var(--bg-content-alt);
  border-left: 1px solid var(--border-content);
  border-radius: 0 5px 5px 0;
}

.expense-form-content .SingleDatePicker .DateInput_input {
  text-align: left;
}

.expense-form-group-top {
  padding: 40px 20px;
}
@media (min-width: 768px) {
  .expense-form-group-top {
    padding: 40px;
  }
}

.expense-form-group {
  padding: 40px 20px;
  border-top: 1px solid var(--border-content);
}
.expense-form-group.pb20 {
  padding-bottom: 0;
}
@media (min-width: 768px) {
  .expense-form-group {
    padding: 40px;
  }
  .expense-form-group.pb20 {
    padding-bottom: 20px;
  }
}

.expense-form-border {
  position: absolute;
  display: none;
  right: 25%;
  top: 0;
  bottom: 0;
  border-right: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .expense-form-border {
    display: block;
  }
}

.expense-form-uneditable-notice.text-banner {
  margin-top: -1px;
  border-top: 1px solid var(--border-semi-transparent-alt);
  border-bottom: 1px solid var(--border-semi-transparent-alt);
}

.expense-form-text-icon {
  top: 2px;
  margin-left: 2px;
  margin-right: 12px;
}
.expense-form-text-icon svg {
  width: 12px;
  height: auto;
}

.expense-form-additional-fields-toggle {
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.expense-form-additional-fields-toggle:focus {
  outline: none;
}

.expense-form-toggle-icon {
  position: relative;
  display: inline-block;
  top: 1px;
  width: 11px;
  height: auto;
  margin-left: 10px;
  transition: transform var(--transition-normal) ease;
}
.expense-form-toggle-icon path {
  fill: var(--color-primary);
}
.expense-form-toggle-icon.expanded {
  transform: rotate(180deg);
}
.expense-form-toggle-icon.collapsed {
  transform: rotate(0deg);
}

.expense-form-additional-fields-text {
  color: var(--color-primary);
}

.expense-form-additional-option {
  margin-bottom: 10px;
}

.expense-form-additional-option-in {
  display: flex;
  align-items: center;
  line-height: 1;
  padding: 11px 20px 10px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  color: var(--color-primary);
}

.expense-form-additional-option-copy {
  display: inline-block;
  padding-top: 1px;
  vertical-align: top;
}

.expense-form-additional-option-icon {
  position: relative;
  margin-right: 10px;
  vertical-align: top;
}
.expense-form-additional-option-icon g,
.expense-form-additional-option-icon path {
  fill: var(--color-primary);
}
.expense-form-additional-option.active .expense-form-additional-option-icon g,
.expense-form-additional-option.active .expense-form-additional-option-icon path {
  fill: var(--border-darker);
}

.expense-form-image-icon {
  top: 3px;
}
.expense-form-image-icon svg {
  width: 17px;
  height: auto;
}

textarea.form-control.expense-form-notes {
  min-height: 50px;
}

.expense-form-billable-wrapper {
  padding: 28px 0 0;
}

.expense-form-markup-wrapper {
  min-width: 120px;
}

.expense-form-image-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  background: var(--bg-grey-f8);
  border-radius: 6px;
}

.expense-form-image-remove {
  display: inline-block;
  padding: 5px;
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
}
.expense-form-image-remove, .expense-form-image-remove:focus, .expense-form-image-remove:visited {
  color: var(--text-default);
}
.expense-form-image-remove:hover, .expense-form-image-remove:active {
  color: var(--text-default);
  text-decoration: underline;
}

.expense-form-image-preview-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  transform: translateZ(0px);
  transition: all var(--transition-fast) ease;
}
@media (min-width: 768px) {
  .expense-form-image-preview-link:hover {
    text-decoration: underline;
  }
}

.expense-form-image-preview {
  width: auto;
  height: 42px;
  flex-shrink: 0;
  border: 1px solid var(--border-semi-transparent-alt);
  border-radius: 6px;
}
.expense-form-image-preview-link:hover .expense-form-image-preview {
  filter: brightness(1.02);
}

.expense-form-image-remove-old {
  display: inline-block;
  padding: 15px 0 5px;
  margin: 0 0 0 auto;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}
.expense-form-image-remove-old, .expense-form-image-remove-old:focus, .expense-form-image-remove-old:visited {
  color: var(--color-danger);
}
.expense-form-image-remove-old:hover, .expense-form-image-remove-old:active {
  color: color-mix(in srgb, var(--color-danger) 97%, transparent);
}

.expense-form-image-preview-old {
  width: auto;
  height: auto;
  max-width: 100%;
  box-shadow: 0 0 6px color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 4px;
}

.expense-form-image-preview-filename {
  flex-grow: 1;
  padding-right: 30px;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted-alt);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.switch-toggle.expense-batch-form-switch {
  width: 100%;
}

.percentage-symbol {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.expense-purchase-order-banner {
  position: relative;
}
.expense-purchase-order-banner .expense-purchase-order-banner__status {
  position: absolute;
  width: 12px;
  height: 12px;
  left: 17px;
  top: 22px;
  border-radius: 50%;
  background: var(--bg-grey-d);
}
.expense-purchase-order-banner .expense-purchase-order-banner__status.expense-purchase-order-banner__status--draft, .expense-purchase-order-banner .expense-purchase-order-banner__status.expense-purchase-order-banner__status--drafted {
  background: var(--bg-drafted);
}
.expense-purchase-order-banner .expense-purchase-order-banner__status.expense-purchase-order-banner__status--sent {
  background: var(--bg-grey-8);
}
.expense-purchase-order-banner .expense-purchase-order-banner__status.expense-purchase-order-banner__status--approved {
  background: var(--color-accent-blue);
}
.expense-purchase-order-banner .expense-purchase-order-banner__status.expense-purchase-order-banner__status--paid {
  background: var(--color-primary);
}
.expense-purchase-order-banner .expense-purchase-order-banner__status.expense-purchase-order-banner__status--cancelled {
  background: var(--color-danger);
}
.expense-purchase-order-banner .section-notice-header a, .expense-purchase-order-banner .section-notice-header a:focus, .expense-purchase-order-banner .section-notice-header a:visited {
  color: var(--text-default);
}
.expense-purchase-order-banner .section-notice-header a:hover, .expense-purchase-order-banner .section-notice-header a:active {
  color: var(--text-default);
  text-decoration: underline;
}

.expenses-tag-list-group {
  margin-top: 20px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--text-lighter);
}
.expenses-tag-list-group:first-child {
  margin-top: 0;
}

.expenses-tag-item {
  margin-bottom: 3px;
  padding: 7px 15px 6px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 3px;
}
.expenses-tag-item.expenses-expense-tag-item {
  border-left: 5px solid var(--border-content);
}

.expenses-tag {
  position: relative;
  float: left;
  display: inline-block;
  margin-right: 10px;
  padding-left: 34px;
  line-height: 2;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
}
.expenses-expense-tag-item .expenses-tag {
  padding-left: 0;
}
@media (min-width: 768px) {
  .expenses-tag {
    max-width: none;
  }
}

.expenses-tag-icon {
  position: absolute;
  left: 0;
  top: 7px;
  font-size: 1.3em;
  line-height: 0;
  color: var(--text-lightest);
}

.expenses-tag-locked {
  display: inline-block;
  float: left;
  padding-top: 6px;
  color: var(--border-content-alt);
}

.expenses-tag-action {
  float: left;
  padding: 8px 10px 3px;
  font-weight: 600;
  color: var(--text-muted);
}
.expenses-tag-action:hover, .expenses-tag-action:focus, .expenses-tag-action:active {
  color: var(--text-default);
}
.expenses-tag-action.expenses-tag-action-delete {
  color: var(--color-danger);
  padding-right: 5px;
}

.expense-tag-options {
  float: right;
}

.expense-tag-actions {
  float: right;
}
@media (min-width: 480px) {
  .expense-tag-actions {
    margin: 0 0 0 10px;
  }
}

.expenses-filter .page-filters {
  width: 230px;
}

.edit-multiple-expenses-actions {
  position: fixed;
  display: none;
  align-items: center;
  z-index: var(--z-search);
  left: 50%;
  bottom: 20px;
  width: 700px;
  padding: 12px 12px 12px 20px;
  color: var(--text-inverse);
  background-color: var(--bg-inverse-expense);
  transform: translateX(-50%);
  border-radius: 10px;
}
@media (min-width: 768px) {
  .edit-multiple-expenses-actions {
    display: flex;
  }
}

.edit-multiple-expenses-count {
  flex: 1;
  padding-right: 20px;
  font-size: 14px;
  font-weight: 400;
}

.list-item-expense-categorize {
  position: absolute;
  right: 47px;
  top: 22px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}
.list-item-expense-categorize, .list-item-expense-categorize:focus, .list-item-expense-categorize:visited, .list-item-expense-categorize:hover, .list-item-expense-categorize:active {
  color: var(--text-lighter);
}

.list-expense-empty-filter {
  text-align: center;
  margin-top: 60px;
}

.expenses-top-connect-account-link {
  font-size: 16px;
  font-weight: 600;
}
.expenses-top-connect-account-link, .expenses-top-connect-account-link:focus, .expenses-top-connect-account-link:visited {
  color: var(--text-muted);
}
.expenses-top-connect-account-link:hover, .expenses-top-connect-account-link:active {
  color: var(--text-muted);
}

.expenses-top-connect-account-action {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.075em;
}
.expenses-top-connect-account-action a {
  color: var(--text-lighter);
  text-transform: uppercase;
}

.expenses-top-connect-account-action-icon {
  position: relative;
  top: -1px;
  margin-left: 1px;
  font-size: 7px;
}

@media (max-width: 768px) {
  .expenses-list-item .list-item-dd-toggle.list-item-dots {
    top: 8px;
  }
}

.expenses-list-item-category-tag {
  position: relative;
  display: inline-block;
  left: 0;
  padding: 6px 12px 3px;
  font-size: 12px;
  font-weight: 600;
}
.expenses-list-item-category-tag.uncategorized {
  padding: 4px 0 8px;
  font-style: italic;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-lighter);
  cursor: pointer;
}
.expenses-list-item-category-tag.uncategorized:hover {
  color: var(--text-lighter);
}

.expenses-list-item-category-tag-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0.12;
  border-radius: 20px;
  transition: opacity var(--transition-fast) ease;
}
.expenses-list-item-category-tag:hover .expenses-list-item-category-tag-bg {
  opacity: 0.16;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .expenses-list-item-category-tag-bg {
    opacity: 0.45;
  }
  .expenses-list-item-category-tag:hover :root:not([data-theme=light]) .expenses-list-item-category-tag-bg {
    opacity: 0.45;
  }
}
:root[data-theme=dark] .expenses-list-item-category-tag-bg {
  opacity: 0.45;
}
.expenses-list-item-category-tag:hover :root[data-theme=dark] .expenses-list-item-category-tag-bg {
  opacity: 0.45;
}

.col-expenses-list-item-name {
  position: relative;
  margin-bottom: 20px;
  padding-right: 60px;
}
@media (min-width: 768px) {
  .col-expenses-list-item-name {
    float: left;
    width: 22%;
    min-height: 1px;
    margin-bottom: 0;
    padding-right: 0;
  }
}

@media (min-width: 768px) {
  .col-expenses-list-item-project {
    float: left;
    width: 12%;
    min-height: 1px;
    margin-bottom: 0;
    padding-right: 0;
  }
}

@media (min-width: 768px) {
  .col-expenses-list-item-status {
    float: left;
    width: 10%;
    min-height: 1px;
    margin-bottom: 0;
    padding-right: 0;
  }
}

@media (min-width: 768px) {
  .col-expenses-list-item-date {
    float: left;
    width: 9%;
    min-height: 1px;
    margin-bottom: 0;
    padding-right: 0;
  }
}

.col-expenses-list-item-amount {
  position: absolute;
  top: 17px;
  right: 50px;
}
@media (min-width: 768px) {
  .col-expenses-list-item-amount {
    position: relative;
    float: left;
    width: 11%;
    top: auto;
    right: auto;
  }
}

.col-expenses-list-item-icons {
  position: absolute;
  right: 12px;
  bottom: 35px;
}
@media (min-width: 768px) {
  .col-expenses-list-item-icons {
    position: relative;
    float: left;
    width: 11%;
    left: 10px;
    bottom: auto;
  }
}
@media (min-width: 992px) {
  .col-expenses-list-item-icons {
    left: auto;
  }
}

@media (min-width: 768px) {
  .col-expenses-list-item-centered {
    margin-top: 10px;
  }
}

.col-expenses-list-item-category {
  margin-bottom: 9px;
  pointer-events: none;
}
@media (min-width: 768px) {
  .col-expenses-list-item-category {
    float: left;
    width: 14%;
    min-height: 1px;
    margin-top: 13px;
    margin-bottom: 0;
    pointer-events: auto;
  }
}

.expenses-list-item-project {
  padding-bottom: 5px;
  pointer-events: none;
}
@media (min-width: 768px) {
  .expenses-list-item-project {
    padding-bottom: 0;
    padding-right: 20px;
    pointer-events: auto;
  }
}

.expenses-list-item-title {
  padding-right: 15px;
}

.expenses-list-item-amount {
  text-align: right;
  color: var(--text-default);
  font-weight: 500;
  font-size: 16px;
}
@media (min-width: 768px) {
  .expenses-list-item-amount {
    font-size: 14px;
  }
}

.expenses-list-item-non-billable {
  font-style: italic;
}

.expense-list-batch-checkbox {
  position: absolute;
  display: block;
  z-index: 3;
  left: -4px;
  bottom: 16px;
}
@media (min-width: 768px) {
  .expense-list-batch-checkbox {
    display: none;
    top: -1px;
    bottom: -1px;
    left: -38px;
    width: 38px;
    padding: 10px 0 0 10px;
    border: 1px solid var(--border-content);
    border-right: 0;
    border-radius: 4px 0 0 4px;
  }
}
.expenses-list-item:hover .expense-list-batch-checkbox {
  display: block;
  background: var(--bg-grey-fd);
}
.expense-list-batch-checkbox.is-visible {
  display: block;
}

.expense-list-batch-checkbox-select-all {
  position: absolute;
  display: none;
  left: -28px;
  top: 2px;
}
.expense-list-batch-checkbox-select-all.is-visible {
  display: block;
}

.expenses-list-item-deductible {
  position: absolute;
  right: 62px;
  top: 0;
  width: 14px;
  height: auto;
  opacity: 0.8;
  transition: all var(--transition-fast) ease;
}
.expenses-list-item-deductible.expense-list-item-deductible-questionable g {
  fill: var(--color-danger) !important;
}
.expenses-list-item-deductible.expense-list-item-deductible-default g {
  fill: var(--border-darker) !important;
}
@media (min-width: 768px) {
  .expenses-list-item-deductible {
    top: 13px;
  }
  .list-item:hover .expenses-list-item-deductible {
    opacity: 1;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .expenses-list-item-deductible g {
    fill: var(--grey-f5) !important;
  }
}
:root[data-theme=dark] .expenses-list-item-deductible g {
  fill: var(--grey-f5) !important;
}

.expense-list-recurring-icon {
  position: absolute;
  right: 12px;
  top: -2px;
  height: auto;
  width: 18px;
  opacity: 0.8;
  transition: all var(--transition-fast) ease;
}
@media (min-width: 768px) {
  .expense-list-recurring-icon {
    top: 11px;
  }
  .list-item:hover .expense-list-recurring-icon {
    opacity: 1;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .expense-list-recurring-icon path {
    fill: var(--grey-f5) !important;
  }
}
:root[data-theme=dark] .expense-list-recurring-icon path {
  fill: var(--grey-f5) !important;
}

.expenses-list-item-attachment {
  right: 38px;
  top: 0;
  width: 14px;
  height: auto;
  opacity: 0.8;
  transition: all var(--transition-fast) ease;
}
.expenses-list-item-attachment.not-attached g {
  fill: var(--border-darker) !important;
}
.expenses-list-item-attachment.attached {
  width: 17px;
  margin-right: -3px;
}
@media (min-width: 768px) {
  .expenses-list-item-attachment {
    top: 13px;
  }
  .list-item:hover .expenses-list-item-attachment {
    opacity: 1;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .expenses-list-item-attachment.attached path {
    fill: var(--grey-f5) !important;
  }
}
:root[data-theme=dark] .expenses-list-item-attachment.attached path {
  fill: var(--grey-f5) !important;
}

.expenses-list-needs-review-notice {
  margin-top: -8px;
  margin-bottom: 28px;
}
.expenses-list-needs-review-notice .notice-banner-icon {
  top: 24px;
}
.expenses-list-needs-review-notice .btn-link {
  color: var(--text-muted);
  text-decoration: underline;
  padding: 0px;
}
.expenses-list-needs-review-notice .btn-link:hover {
  color: var(--text-muted);
}

.expense-modal-add-account-leaf {
  position: absolute;
  bottom: -50px;
  right: -30px;
  width: 130px;
  height: 170px;
  background: transparent bottom right no-repeat;
  background-size: contain;
  background-image: url("leaves/leaf-07.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .expense-modal-add-account-leaf {
    background-image: url("leaves/leaf-07@2x.png");
  }
}
@media (min-width: 768px) {
  .expense-modal-add-account-leaf {
    bottom: -67px;
    right: -50px;
    width: 170px;
  }
}

.expense-modal-add-account-copy {
  margin-bottom: 40px;
  margin-top: 20px;
  font-size: 16px;
  color: var(--text-muted);
}

.allocation-modal-project-select {
  min-height: 53px;
}

.allocation-modal-project-selected-section {
  cursor: pointer;
  padding: 7px 10px;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 40px;
  background: var(--bg-content);
  border-radius: 6px;
  border: 1px solid var(--border-field);
  transition: all var(--transition-fast) ease;
}
.allocation-modal-project-selected-section:hover {
  background-color: var(--bg-grey-fc);
  border-color: var(--color-primary);
}
.allocation-modal-project-selected-section.disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background-color: var(--bg-grey-fa);
  border-color: var(--border-content);
}
.allocation-modal-project-selected-section.disabled:hover {
  background-color: var(--bg-grey-fa);
  border-color: var(--border-content);
}

.allocation-modal-project-selected-details {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}

.allocation-modal-project-selected {
  position: relative;
  padding-right: 50px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-default);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.allocation-modal-project-selected-color {
  position: relative;
  top: 4px;
}

.allocation-modal-project-selected-name {
  position: relative;
  top: -1px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--text-default);
  font-size: 14px;
  font-weight: 400;
}

.allocation-modal-project-selected-sublabel {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
}

.allocation-modal-project-member-addition {
  display: flex;
  gap: 7px;
  margin-top: 5px;
  padding: 10px 10px 10px 15px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: default;
  background: var(--bg-grey-f8);
  border-radius: 4px;
}

.allocation-modal-project-member-addition-icon {
  position: relative;
  top: 0.5px;
  width: 15px;
  height: auto;
  margin-right: 5px;
}
.allocation-modal-project-member-addition-icon path {
  fill: var(--text-muted);
}

.allocation-modal-summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  padding: 20px;
  font-weight: 500;
  color: var(--text-default);
  cursor: default;
  background: var(--bg-grey-f8);
  border-radius: 6px;
}
.allocation-modal-summary.with-error-notice {
  background: var(--color-danger-light);
}

.allocation-modal-summary-in {
  display: flex;
  align-items: center;
  gap: 10px;
}
.allocation-modal-summary.with-error-notice .allocation-modal-summary-in {
  gap: 15px;
}

.allocation-modal-summary-icon {
  width: 15px;
  height: auto;
}
.allocation-modal-summary-icon path {
  fill: var(--text-lighter);
}

.allocation-modal-summary-alert-icon {
  width: 18px;
  height: auto;
}
.allocation-modal-summary-alert-icon path {
  fill: var(--color-danger);
}

.allocation-modal-duration-text {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 10px 12px;
  font-family: var(--font-sans-serif);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: var(--text-muted);
  cursor: default;
  background: var(--bg-grey-f8);
  border-radius: 5px;
}

.project-team-list.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.project-team-list.disabled .btn-add-link {
  color: var(--text-muted);
  cursor: not-allowed;
}
.project-team-list.disabled .btn-add-link:hover {
  color: var(--text-muted);
}
.project-team-list.disabled .project-team-contact-name {
  color: var(--text-muted);
}
.project-team-list.disabled:hover {
  background-color: transparent;
}

.project-select-open-link.disabled {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}

.allocation-imported-notice {
  padding: 16px;
  border: 1px solid var(--border-content);
  background: var(--bg-grey-fa);
  border-radius: 6px;
  margin-bottom: 20px;
}
.allocation-imported-notice p {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}
.allocation-imported-notice strong {
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: block;
}

.planner-page > div {
  scrollbar-width: none;
}
.planner-page > div::-webkit-scrollbar {
  display: none;
}

.planner-scrollable {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: hidden;
  padding-top: 20px;
  padding-bottom: 100px;
}

.planner-empty-state {
  padding: 160px 40px;
  text-align: center;
  background: var(--bg-grey-fd);
  border-bottom: 1px solid var(--border-semi-transparent-alt);
}

.planner-empty-state-content {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-lighter);
}

.planner-date-header {
  position: relative;
  display: inline-flex;
  vertical-align: top;
  flex-wrap: nowrap;
  user-select: none;
  background-color: var(--bg-content);
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
  transform: translateZ(1px);
}

.planner-date-header-columns {
  display: flex;
  flex-wrap: nowrap;
  height: 60px;
  cursor: default;
  position: relative;
}
.planner-date-header-columns.column-month-labels {
  height: 30px;
}

.planner-date-header-column {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 100px;
  border-right: 1px solid var(--border-content);
  top: 28px;
}
.planner-date-header-column.column-month-sticky {
  position: sticky;
  z-index: 10;
  background-color: var(--bg-content);
}
.planner-date-header-column.column-weekend .planner-date-header-column-day {
  opacity: 0.3;
}
.planner-date-header-column.column-weekend .planner-date-header-column-date {
  opacity: 0.3;
}
.planner-date-header-column.column-today .planner-date-header-column-day {
  color: var(--color-primary-contrast);
  opacity: 1;
}
.planner-date-header-column.column-today .planner-date-header-column-date {
  color: var(--color-primary-contrast);
  opacity: 1;
}
.planner-date-header-column.day {
  top: 7px;
  border: none;
}

.planner-date-header-column-in {
  padding: 6px 10px;
  text-align: left;
  width: 70px;
  border-radius: 6px;
}
.planner-date-header-column.column-today .planner-date-header-column-in {
  background: var(--bg-inverse);
}
.planner-date-header-column.week .planner-date-header-column-in {
  text-align: center;
}

.planner-date-header-column-day {
  margin-bottom: -1px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.planner-date-header-column-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.planner-row {
  position: relative;
  flex-wrap: nowrap;
  user-select: none;
  transform: translateZ(1px);
}

.planner-row-columns {
  display: flex;
  position: relative;
  flex-wrap: nowrap;
  height: 70px;
  cursor: default;
  border-bottom: 1px solid var(--border-semi-transparent-alt);
}

.planner-row-label {
  position: sticky;
  z-index: 10;
  display: flex;
  align-items: center;
  left: 0;
  flex-shrink: 0;
  padding: 0 40px 0 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background-color: var(--bg-content);
  border-right: 1px solid var(--border-semi-transparent-alt);
}

.planner-row-label-name {
  position: relative;
  top: -1px;
  max-width: 100%;
}
.planner-row-label-name a,
.planner-row-label-name a:focus,
.planner-row-label-name a:visited {
  color: var(--text-default);
}
.planner-row-label-name a:hover,
.planner-row-label-name a:active {
  color: var(--text-default);
  text-decoration: underline;
}

.planner-row-label-subtitle {
  margin-top: 5px;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-muted);
}

.planner-row-chevron {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 10px;
  height: auto;
  transform: translateY(-50%);
  opacity: 0.5;
}
.planner-row-label:hover .planner-row-chevron {
  opacity: 1;
}
.planner-row-chevron.active {
  opacity: 1;
  transform: translateY(-50%) rotate(180deg);
}
.planner-row-chevron path {
  fill: var(--text-lighter);
}

.planner-row-column {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100px;
  height: 100%;
}
.planner-row-column.column-weekend {
  background-color: color-mix(in srgb, var(--black) 2%, transparent);
}
.planner-row-column.column-saturday {
  border-left: 1px solid var(--border-semi-transparent-alt);
}
.planner-row-column.column-sunday {
  border-right: 1px solid var(--border-semi-transparent-alt);
}

.planner-row-column-inner {
  position: relative;
  width: 100%;
  height: 70px;
}

.planner-row-column-capacity {
  position: absolute;
  left: 0;
  right: 0;
  top: 1px;
  bottom: 1px;
}
.planner-row-column-capacity.workload-row-column-capacity {
  top: 0;
  bottom: 0;
}

.planner-row-column-capacity.column-no-capacity,
.workload-row-column-capacity.column-no-capacity {
  background: var(--bg-input-hover-subtle) center center repeat;
  background-size: cover;
  box-shadow: -1px 0 0 var(--bg-grey-f5), inset -1px 0 0 var(--bg-grey-f5);
}

.planner-row-column-capacity-border {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px dashed var(--border-content-alt);
  transform: translateZ(0);
}

.planner-row-column-used-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 25%, transparent), color-mix(in srgb, var(--color-primary) 10%, transparent));
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  transform: translateZ(0);
  transition: height 0.5s ease, background 0.2s ease, border-top-color 0.2s ease, opacity 0.5s ease;
}
.planner-row-column-capacity.column-zero-used .planner-row-column-used-bg {
  opacity: 0;
}
.planner-row-column-capacity.column-full-used .planner-row-column-used-bg {
  border-top-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}
.planner-row-column-capacity.column-over-capacity .planner-row-column-used-bg {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger) 80%, transparent) 0%, color-mix(in srgb, var(--color-primary) 20%, transparent) 15%, color-mix(in srgb, var(--color-primary) 10%, transparent) 100%);
  border-top-color: color-mix(in srgb, var(--color-danger) 50%, transparent);
}
.workload-capacity:hover .planner-row-column-used-bg {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 35%, transparent), color-mix(in srgb, var(--color-primary) 12%, transparent));
}

.planner-row-column-used-label {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-semi-transparent-muted);
  transform: translate(-50%, -50%);
  transform: translate3d(-50%, -50%, 0);
  transition: all var(--transition-slower) ease;
}
.workload-capacity:hover .planner-row-column-used-label {
  color: var(--text-default);
}

.planner-row-column-capacity-tooltip {
  color: var(--color-primary-contrast);
  font-size: 14px;
  font-weight: 500;
  background: var(--bg-content);
  border-radius: 6px;
  box-shadow: 0 2px 20px color-mix(in srgb, var(--bg-shadow) 5%, transparent);
  pointer-events: none;
  transform: translateY(5px);
  transition: transform var(--transition-slower) ease;
}

.planner-row-column-capacity-tooltip {
  position: absolute;
  z-index: 11;
  bottom: 100%;
  left: 50%;
  margin-bottom: -20px;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-50%);
}
.planner-row-column-inner:hover ~ .planner-row-column-capacity-tooltip, .workload-capacity:hover .planner-row-column-capacity-tooltip {
  visibility: visible;
  opacity: 1;
}
.planner-row-column-capacity-tooltip.capacity-tooltip-zero {
  min-width: 160px;
  left: 50%;
  padding: 10px 12px;
  pointer-events: auto;
}
.planner-row-column-capacity-tooltip.capacity-tooltip-zero:hover {
  opacity: 1;
  visibility: visible;
  opacity: 1;
}

.workload-capacity {
  cursor: pointer;
}

.workload-capacity-tooltip {
  pointer-events: none;
  word-break: break-word;
  transform: translateY(5px);
  transition: transform var(--transition-fast) ease;
  animation: fade-in-up var(--transition-fast) ease forwards;
}
.workload-capacity-tooltip.capacity-tooltip-zero {
  max-width: 160px;
  transform: translateX(20px);
}

.planner-nested-row {
  position: relative;
  flex-wrap: nowrap;
  user-select: none;
  transform: translateZ(1px);
}
.planner-nested-row:hover {
  z-index: 2;
}

.planner-nested-row-columns {
  display: flex;
  flex-wrap: nowrap;
  cursor: default;
  border-bottom: 1px solid var(--border-content);
}

.planner-nested-row-label {
  position: sticky;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  left: 0;
  flex-shrink: 0;
  padding: 13px 30px 15px 32px;
  font-size: 14px;
  font-weight: 500;
  background-color: var(--bg-content);
  border-right: 1px solid var(--border-content);
}
.planner-nested-row-label.planner-nested-row-label--with-color {
  padding-left: 38px;
}
.planner-nested-row-label.planner-nested-row-label--time-off {
  justify-content: center;
  padding-left: 20px;
}

.planner-nested-row-label-color.project-color {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.planner-nested-row-label-title {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-default);
}
.planner-nested-row-label-title a,
.planner-nested-row-label-title a:focus,
.planner-nested-row-label-title a:visited {
  color: var(--text-default);
}
.planner-nested-row-label-title a:hover,
.planner-nested-row-label-title a:active {
  color: var(--text-default);
  text-decoration: underline;
}

.planner-nested-row-label-subtitle {
  margin-top: 5px;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-muted);
}

.planner-nested-row-label-off {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  color: var(--text-default);
}
.planner-nested-row-label-off svg {
  width: 11px;
  height: auto;
  margin-top: 2px;
}
.planner-nested-row-label-off svg path {
  fill: var(--text-default);
}

.planner-nested-row-column {
  position: absolute;
  flex-shrink: 0;
  width: 100px;
  height: 100%;
}
.planner-nested-row-column.column-weekend {
  background-color: color-mix(in srgb, var(--black) 2%, transparent);
}
.planner-nested-row-column.column-saturday {
  border-left: 1px solid var(--border-content);
}
.planner-nested-row-column.column-sunday {
  border-right: 1px solid var(--border-content);
}

.planner-nested-row-column-inner {
  position: absolute;
  z-index: 1;
  left: 5px;
  right: 5px;
  top: 5px;
  bottom: 5px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color var(--transition-slower) ease;
}
.planner-nested-row-column-inner:hover {
  background-color: var(--bg-grey-e);
}

.planner-event {
  position: absolute;
  z-index: 2;
  left: 0;
  padding: 7px 9px 7px 10px;
  height: 80px;
  cursor: pointer;
  background-color: var(--bg-content);
  border-radius: 4px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--black) 4%, transparent);
  transform: translateZ(1px);
  transition: all var(--transition-slower) ease;
}
.planner-event:hover {
  box-shadow: 0 0 12px color-mix(in srgb, var(--black) 4%, transparent);
}
.planner-event.planner-event-dragging {
  pointer-events: none;
  opacity: 0.2;
  transition: none;
}
.planner-event.planner-event-resizing {
  box-shadow: 0 0 12px color-mix(in srgb, var(--black) 4%, transparent);
  transition: none;
}

.planner-event-time-off-background {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: top left repeat;
  background-image: url(/assets/planners/planner-empty-day.png);
  opacity: 0.7;
}

.planner-event-draggable-wrapper {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-content);
  border-radius: 4px;
}

.planner-event-draggable.project-color {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.planner-event.planner-event-time-off .planner-event-draggable.project-color {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--black) 12%, transparent);
}
.planner-event.planner-event-time-off:hover .planner-event-draggable.project-color {
  box-shadow: inset 0 0 0 1px var(--border-content-alt);
}

.planner-event-resize-left, .planner-event-resize-right {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  cursor: ew-resize;
  overflow: hidden;
  background-color: var(--bg-content);
  border: 1px solid var(--border-content-alt);
}
.planner-event:hover .planner-event-resize-left .planner-event-resize-left-icon, .planner-event:hover .planner-event-resize-right .planner-event-resize-left-icon {
  transform: translate3d(0, 0, 1px);
}
.planner-event.planner-event-dragging .planner-event-resize-left, .planner-event.planner-event-resizing .planner-event-resize-left, .planner-event.planner-event-dragging .planner-event-resize-right, .planner-event.planner-event-resizing .planner-event-resize-right {
  transition: none;
}

.planner-event-resize-left {
  display: none;
  left: -14px;
  border-radius: 4px 0 0 4px;
}
.planner-event:hover .planner-event-resize-left {
  display: block;
}
.planner-event:hover .planner-event-resize-left .planner-event-resize-left-icon {
  transform: translate3d(0, 0, 1px);
}

.planner-event-resize-right {
  display: none;
  right: -14px;
  border-radius: 0 4px 4px 0;
}
.planner-event:hover .planner-event-resize-right {
  display: block;
}
.planner-event:hover .planner-event-resize-right .planner-event-resize-right-icon {
  transform: translate3d(0, 0, 1px);
}

.planner-event-resize-left-icon,
.planner-event-resize-left-icon2,
.planner-event-resize-right-icon,
.planner-event-resize-right-icon2 {
  position: absolute;
  width: 2px;
  top: 12%;
  height: 76%;
  opacity: 0.5;
  background: var(--bg-grey-c);
  transition: all var(--transition-slower) ease;
}
.planner-event-resize-left:hover .planner-event-resize-left-icon,
.planner-event-resize-left:hover .planner-event-resize-left-icon2,
.planner-event-resize-left:hover .planner-event-resize-right-icon,
.planner-event-resize-left:hover .planner-event-resize-right-icon2 {
  opacity: 1;
}
.planner-event.planner-event-resizing .planner-event-resize-left-icon,
.planner-event.planner-event-resizing .planner-event-resize-left-icon2,
.planner-event.planner-event-resizing .planner-event-resize-right-icon,
.planner-event.planner-event-resizing .planner-event-resize-right-icon2 {
  opacity: 1;
}

.planner-event-resize-left-icon {
  left: 4px;
}
.planner-event-resize-left:hover .planner-event-resize-left-icon {
  opacity: 1;
}

.planner-event-resize-left-icon2 {
  left: 8px;
}
.planner-event-resize-left:hover .planner-event-resize-left-icon2 {
  opacity: 1;
}

.planner-event-resize-right-icon {
  right: 4px;
}
.planner-event-resize-right:hover .planner-event-resize-right-icon {
  opacity: 1;
}

.planner-event-resize-right-icon2 {
  right: 8px;
}
.planner-event-resize-right:hover .planner-event-resize-right-icon2 {
  opacity: 1;
}

.planner-event-content {
  position: relative;
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary-contrast);
}
.planner-event.planner-event-tentative .planner-event-content, .planner-event-draggable-clone.planner-event-tentative .planner-event-content, .planner-event.planner-event-time-off .planner-event-content, .planner-event-draggable-clone.planner-event-time-off .planner-event-content {
  color: var(--text-default);
}

.planner-event-draggable-clone {
  position: fixed;
  z-index: 100;
  left: 0;
  padding: 7px 18px 7px 10px;
  height: 80px;
  pointer-events: none;
  background-color: var(--bg-content);
  border-radius: 4px;
  transform: translateZ(1px);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.planner-event-detail {
  padding-top: 5px;
  cursor: default;
}

.planner-event-detail-floating {
  z-index: 3;
}

.planner-event-detail-in {
  width: 230px;
  padding: 20px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  box-shadow: 0 4px 22px color-mix(in srgb, var(--black) 8%, transparent);
  border-radius: 6px;
}

.planner-event-detail-label {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-default);
}

.planner-event-detail-avatar {
  position: absolute;
  left: 0;
  top: -1px;
}

.planner-event-detail-icon {
  position: absolute;
  left: 3px;
  top: 50%;
  width: 14px;
  height: auto;
  transform: translateY(-50%);
}

.planner-event-detail-links {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}

.planner-row-allocation-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
}

.planner-row-allocation-bar-inner {
  position: relative;
  width: 100%;
  height: 7px;
  background: var(--bg-grey-f5);
}

.planner-row-allocation-bar-used {
  position: absolute;
  height: 5px;
  top: 1px;
  background: var(--color-primary);
  opacity: 0.5;
  border-radius: 20px;
}

.project-list-item .SingleDatePicker {
  z-index: 2;
}
.project-list-item .SingleDatePicker_picker {
  top: 38px !important;
}
.project-list-item .DateInput_fang {
  display: none;
}
.project-list-item .SingleDatePickerInput_clearDate {
  z-index: 2;
}

.project-list-item-date-col {
  margin-top: 0;
  color: var(--text-default);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.project-list-item-tags-container {
  position: relative;
  max-width: 100%;
  padding-right: 10px;
  flex-grow: 1;
}

.project-list-item-tags {
  display: flex;
  gap: 5px;
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(to right, black 50%, transparent 100%);
}

.project-color {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
  background-color: var(--color);
}
.project-color.outline {
  border: 1px dashed var(--color);
  background: var(--bg-content) repeating-linear-gradient(-45deg, transparent, transparent 2px, var(--light-color) 2px, var(--light-color) 4px);
}
.project-color.outline.project-header-color-sample {
  background-color: var(--light-color);
}
.project-color.outline.allocation-timeline-bar-content-bg {
  background: var(--bg-content) repeating-linear-gradient(-45deg, transparent, transparent 4px, var(--light-color) 4px, var(--light-color) 8px);
}

.project-page {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.project-new-banner {
  margin-top: 40px;
}
.project-new-banner .section-notice-icon {
  top: 19px;
}

.project-new-banner-title {
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .project-new-banner-title {
    font-size: 18px;
  }
}

.project-new-banner-link, .project-new-banner-link:hover, .project-new-banner-link:focus, .project-new-banner-link:visited, .project-new-banner-link:active {
  color: var(--text-info-dark);
  text-decoration: underline;
}

.project-tags {
  margin-top: 20px;
}

.project-tags-display-list-item {
  font-size: 14px;
}
@media (min-width: 480px) {
  .project-tags-display-list-item {
    font-size: 16px;
  }
}

.project-header-color-selector {
  position: relative;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  width: 36px;
  height: 20px;
  padding: 3px 7px 3px 5px;
  cursor: pointer;
  background: var(--bg-grey-f5);
  border-radius: 7px;
  transition: all var(--transition-fast) ease-in;
}

.project-header-color-sample {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.project-header-color-sample-caret {
  position: relative;
  top: 0.5px;
  width: 8px;
  height: auto;
  transition: transform var(--transition-fast) ease-in;
}
.project-header-color-sample-caret path {
  transition: fill var(--transition-fast) ease-in;
  fill: var(--border-darker);
}
.project-header-color-selector:hover .project-header-color-sample-caret path {
  fill: var(--text-default);
}
.project-header-color-sample-caret.project-header-color-sample-caret--open {
  transform: rotate(180deg);
}
.project-header-color-sample-caret.project-header-color-sample-caret--open path {
  fill: var(--text-default);
}

.project-settings-aside {
  padding: 30px;
}

.project-settings-override-note {
  margin-top: 20px;
  color: var(--text-default);
  font-size: 16px;
}
.project-settings-override-note .checkbox-label {
  font-weight: 600;
}

.project-settings-prefix-form-field {
  width: 100px;
}

.project-settings-sequence-form-field {
  width: 100px;
}

.project-settings-number-separator {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  color: var(--text-default);
}

.project-content-blank-add {
  margin-bottom: 20px;
  padding: 40px;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}
@media (min-width: 768px) {
  .project-content-blank-add {
    padding: 100px 40px;
  }
}

.project-content-blank-add-copy1 {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 400;
}

.project-content-blank-add-btns {
  max-width: 430px;
  margin: auto;
}
.project-content-blank-add-btns .btn {
  width: 100%;
  max-width: 200px;
}

.project-description-content {
  word-break: break-word;
}

.project-description-client-portal-content {
  padding: 30px;
  font-size: 16px;
}

.project-description-client-portal-link {
  font-weight: 600;
}

.project-detail-milestones {
  margin-top: 10px;
}

.project-detail-milestone-item {
  margin-bottom: 5px;
  font-size: 16px;
  color: var(--text-muted-alt);
}
.project-detail-milestone-item:last-child {
  margin-bottom: 0;
}

.project-detail-milestone-item-date {
  color: var(--text-lighter);
  font-weight: 400;
}

.project-detail-contract-link {
  display: block;
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-details-statement-link {
  display: block;
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auto-client-reminders-form {
  display: inline;
}

.project-detail-set-completion {
  display: inline-block;
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
}

.project-time-tracking-details {
  margin-bottom: 20px;
  overflow: hidden;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--black) 3%, transparent);
  border-radius: 4px;
}

.project-time-tracking-info {
  padding: 20px;
}

.project-time-tracking {
  position: relative;
  margin-bottom: 20px;
}
.project-time-tracking:last-child {
  margin-bottom: 0;
}

.project-time-tracking-label {
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 10px;
  color: var(--text-lighter);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.project-time-tracking-label .link-inline, .project-time-tracking-label .modal-payment-methods-item-edit-link {
  display: inline-block;
  padding-top: 3px;
  vertical-align: top;
}

.project-time-tracking-value {
  font-size: 14px;
  font-weight: 600;
}

.project-time-tracking-hours {
  display: inline-block;
  font-size: 16px;
  padding-right: 4px;
}

.project-time-tracking-timesheets-btn {
  display: block;
  padding: 10px 0 8px;
  border-top: 1px solid #d8d8d8;
  line-height: 1;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  background: var(--bg-grey-fd);
  color: var(--text-lighter);
}
.project-time-tracking-timesheets-btn:link, .project-time-tracking-timesheets-btn:active, .project-time-tracking-timesheets-btn:visited {
  color: var(--text-lighter);
}
.project-time-tracking-timesheets-btn:hover {
  color: var(--text-lighter);
}

.project-notes-display {
  white-space: pre-wrap;
  word-break: break-word;
}

.project-notes-empty {
  padding: 40px 25px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted);
  border: 1px solid var(--border-content);
  border-radius: 10px;
}

.project-user {
  position: relative;
  padding: 22px 60px 18px 64px;
  text-align: left;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-lighter);
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-top-width: 0;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--black) 4%, transparent);
}
.project-user:first-child {
  border-top-width: 1px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.project-user:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.project-user-icon {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 40px;
  height: 40px;
  padding-top: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  background: var(--bg-grey-e);
  border-radius: 50%;
}

.project-user-info {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-user-email {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  height: 100%;
  width: 50px;
  padding-top: 20px;
  text-align: center;
  font-size: 26px;
  line-height: 1;
  color: var(--text-lighter);
  background: var(--bg-grey-fc);
  border-left: 1px solid var(--border-content);
  border-radius: 0 4px 4px 0;
}
.project-user-email:focus, .project-user-email:visited {
  color: var(--text-lighter);
}
.project-user-email:hover {
  color: var(--text-muted-alt);
}

.project-details-sections {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  margin-bottom: 20px;
}

.project-details-section {
  position: relative;
  width: 100%;
  padding: 30px 25px;
  margin-bottom: 40px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 8px;
}
.project-details-section ::-webkit-scrollbar {
  display: none;
}
.project-details-section.full-width {
  width: 100%;
}
.project-details-section.with-brand {
  margin-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.project-details-section.flex {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
@media (min-width: 768px) {
  .project-details-section.flex {
    padding: 30px 40px;
  }
}
@media (min-width: 1200px) {
  .project-details-section {
    margin-bottom: 20px;
    width: 48%;
  }
}

.project-role-section-lead {
  color: var(--text-default);
}

.project-details-section-title {
  margin-bottom: 25px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-default);
}

.project-details-section-label {
  display: block;
  margin-bottom: 2px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}
@media (min-width: 768px) {
  .project-details-section-label {
    font-size: 14px;
    font-weight: 500;
  }
}

.project-details-section-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-default);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .project-details-section-value {
    font-size: 16px;
    font-weight: 600;
  }
}
.project-details-section-value.overdue, .project-details-section-value.red {
  color: var(--color-danger);
}
.project-details-section-value.paid, .project-details-section-value.green {
  color: var(--color-primary);
}
.project-details-section-value.yellow {
  color: var(--color-accent-yellow-dark);
}
.project-details-section-value.orange {
  color: var(--color-accent-orange);
}

.project-details-document-item {
  position: relative;
  border-bottom: 1px solid var(--border-content);
}
.project-details-document-item:first-child {
  border-top: 1px solid var(--border-content);
}

.project-details-document-item-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 35px 10px 30px;
}
@media (min-width: 768px) {
  .project-details-document-item-link {
    flex-direction: row;
    gap: 15px;
    align-items: center;
  }
  .project-details-document-item-link:hover {
    background: var(--bg-grey-fd);
  }
}

.project-details-section-document-item-title {
  position: relative;
  flex-grow: 1;
  min-width: 0;
  max-width: 100%;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-default);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.project-details-section-document-item-sublabel {
  position: relative;
  display: flex;
  align-self: flex-start;
  gap: 5px;
  flex-shrink: 0;
  top: 1px;
  min-width: 0;
  max-width: 250px;
  color: var(--text-muted);
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .project-details-section-document-item-sublabel {
    align-self: center;
  }
}

.project-details-section-document-item-sublabel-icon {
  width: 9px;
  height: auto;
}
.project-details-section-document-item-sublabel-icon path {
  fill: var(--text-muted);
}

.project-details-section-document-item-icon {
  position: absolute;
  left: 1px;
  top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: color-mix(in srgb, var(--black) 5%, transparent);
  border-radius: 5px;
}
.project-details-section-document-item-icon.app-icon {
  width: 15px;
  height: auto;
  top: 14px;
  left: 3px;
  background: none;
  border-radius: 0;
}
.project-details-section-document-item-icon.favicon-icon {
  width: 15px;
  height: 15px;
  top: 12.5px;
  left: 3px;
  background: transparent center center no-repeat;
  background-size: cover;
  border-radius: 0;
}

.project-details-section-document-item-svg {
  width: 10px;
  height: auto;
}
.project-details-section-document-item-svg.note-icon {
  width: 9px;
}
.project-details-section-document-item-svg path {
  fill: var(--text-default);
}

.dropdown-menu.project-details-section-add-menu {
  top: 30px;
  left: auto;
}

.project-details-section-item {
  width: 25%;
}

.project-details-invoice-empty {
  width: 100%;
  border: 1px solid var(--border-content);
  border-radius: 10px;
}

.project-details-invoice-empty-in {
  text-align: center;
  padding: 40px 20px;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-lighter);
}

.project-details-invoice-new-link {
  margin-top: 20px;
}

.project-details-budget {
  width: 100%;
  padding: 30px 0 0;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}

.project-details-budget-chart {
  width: 100%;
}

.project-details-budget-bar {
  position: relative;
  z-index: 1;
  flex: 1;
}

.project-details-budget-bar-bg {
  position: relative;
  height: 5px;
  background: var(--bg-grey-e);
  border-radius: 10px;
  overflow: hidden;
}

.project-details-budget-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--color-primary);
  border-radius: 10px;
}
.project-details-budget-bar-fill.near-budget {
  background: var(--color-accent-yellow-dark);
}
.project-details-budget-bar-fill.over-budget {
  background: var(--color-danger);
}
.project-details-budget-bar-fill.state-placeholder {
  opacity: 0.1;
}

.project-details-budget-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: default;
}

.project-details-budget-calculation-mode {
  display: flex;
  align-items: baseline;
  text-transform: capitalize;
}

.project-details-budget-calculation-mode-amount {
  margin-right: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
}

.project-details-budget-range {
  display: flex;
  align-items: flex-end;
}

.project-details-budget-amounts {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: default;
}

.project-details-budget-notification-threshold {
  position: relative;
}

.project-details-budget-notification-threshold::after {
  color: var(--text-lighter);
  content: "%";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.project-details-budget-calculation-mode:hover .project-details-budget-placeholder-amount {
  display: none;
}

.project-details-budget-placeholder-amount-link {
  display: none;
}
.project-details-budget-calculation-mode:hover .project-details-budget-placeholder-amount-link {
  display: inline-block;
}

.project-details-budget-placeholder-img {
  width: 100%;
  margin: 0 auto 30px;
  padding-bottom: 20%;
  background: top center no-repeat;
  background-size: contain;
  background-image: url("projects/placeholder-chart.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .project-details-budget-placeholder-img {
    background-image: url("projects/placeholder-chart@2x.png");
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .project-details-budget-placeholder-img {
    opacity: 0.5;
  }
}
:root[data-theme=dark] .project-details-budget-placeholder-img {
  opacity: 0.5;
}

.project-client-view-link {
  display: block;
  padding: 14px 15px 9px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-lighter);
  font-size: 12px;
  line-height: 1.5;
  border-top: 1px solid var(--border-content);
  border-radius: 0 0 4px 4px;
}
.project-client-view-link:focus, .project-client-view-link:visited {
  color: var(--text-lighter);
}
.project-client-view-link:hover {
  color: var(--text-lighter);
}

.project-client-view-link-icon {
  position: relative;
  margin-left: 5px;
  font-size: 0.9em;
}

.project-agreements-empty {
  padding: 18px 20px 20px;
  margin-bottom: 20px;
  background: var(--bg-grey-fd);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.project-agreements-empty-in {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-lighter);
}

.project-agreements-empty-note {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-lighter);
}

.project-proposal-empty {
  padding: 20px;
  margin-bottom: 20px;
  background: var(--bg-grey-fd);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.project-send-w9-container {
  margin-bottom: 40px;
}

.project-tax-form-item {
  display: block;
  padding: 20px 20px 18px;
  font-size: 16px;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--black) 3%, transparent);
}

.project-tax-form-item-type {
  margin-bottom: 5px;
  letter-spacing: 0.075em;
  color: var(--text-default);
}

.project-tax-form-item-date {
  font-size: 14px;
  color: var(--text-lighter);
}

.project-collaborator-promo-section {
  position: relative;
  margin-bottom: 40px;
  padding: 25px;
  font-size: 14px;
  color: var(--text-muted);
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
}

.project-collaborator-promo-header {
  margin-bottom: 10px;
  font-size: 18px;
  color: var(--text-default);
}

.project-collaborator-promo-avatars {
  display: flex;
  justify-content: space-evenly;
  margin-top: 20px;
}
.project-collaborator-promo-avatars .avatar {
  margin: 0 5px;
}

.project-restricted-content {
  max-width: 900px;
  margin: auto;
  padding: 60px 20px;
  text-align: center;
}
@media (min-width: 768px) {
  .project-restricted-content {
    padding: 90px 60px;
  }
}

.project-restricted-title {
  margin-top: 60px;
  font-size: 24px;
  font-weight: 600;
  font-family: var(--font-display-header);
  color: var(--text-default);
}
@media (min-width: 768px) {
  .project-restricted-title {
    font-size: 32px;
  }
}

.project-restricted-subtitle {
  margin-top: 10px;
  margin-bottom: 30px;
  font-size: 16px;
  color: var(--text-muted);
}
@media (min-width: 768px) {
  .project-restricted-subtitle {
    font-size: 18px;
  }
}

.project-restricted-copy {
  color: var(--text-muted);
}

.projects-timeline {
  position: relative;
  z-index: 3;
  text-align: center;
  min-height: 164px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
}

.projects-timeline-in {
  display: flex;
  align-items: stretch;
  align-content: stretch;
}

.projects-timeline-loading {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 70px 20px 60px;
  color: var(--text-lightest);
  background: var(--bg-content);
  text-align: center;
  border-radius: 0 0 6px 6px;
}

.projects-timeline-empty {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 70px 20px 60px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-lighter);
  background: var(--bg-content-document);
  text-align: center;
  border-radius: 10px;
}

.projects-timeline-axis {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
}

.projects-timeline-vertaxis {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  border-right: 1px dashed color-mix(in srgb, var(--black) 5%, transparent);
}
.projects-timeline-vertaxis:nth-child(1) {
  left: 12.5%;
  display: none;
}
.projects-timeline-vertaxis:nth-child(2) {
  left: 25%;
}
.projects-timeline-vertaxis:nth-child(3) {
  left: 37.5%;
  display: none;
}
.projects-timeline-vertaxis:nth-child(4) {
  left: 50%;
  border-right-color: color-mix(in srgb, var(--black) 15%, transparent);
}
.projects-timeline-vertaxis:nth-child(5) {
  left: 62.5%;
  display: none;
}
.projects-timeline-vertaxis:nth-child(6) {
  left: 75%;
}
.projects-timeline-vertaxis:nth-child(7) {
  left: 87.5%;
  display: none;
}

.projects-timeline-vertaxis-label {
  position: absolute;
  left: -35px;
  width: 70px;
  top: 0;
  padding: 13px 0 12px;
  color: var(--text-lighter);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  background: var(--bg-content);
}
.projects-timeline-vertaxis:nth-child(4) .projects-timeline-vertaxis-label {
  color: color-mix(in srgb, var(--text-default) 80%, transparent);
}

.projects-timeline-project-names {
  width: 160px;
  min-height: 164px;
  padding-bottom: 40px;
  text-align: left;
  border-right: 1px solid var(--border-semi-transparent-alt);
  border-top: 42px solid color-mix(in srgb, var(--black) 1%, transparent);
}

.projects-timeline-names-in {
  border-top: 1px solid var(--border-content);
}

.projects-timeline-name {
  height: 40px;
  border-bottom: 1px solid var(--border-semi-transparent-alt);
}
.projects-timeline-name:nth-child(even) {
  background-color: color-mix(in srgb, var(--black) 1%, transparent);
}

.projects-timeline-name-link {
  display: block;
  padding: 11px 12px 11px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.projects-timeline-name-link, .projects-timeline-name-link:focus, .projects-timeline-name-link:visited {
  color: var(--text-default);
}
.projects-timeline-name-link:hover, .projects-timeline-name-link:active {
  color: var(--text-default);
  text-decoration: underline;
}

.projects-timeline-project-items {
  position: relative;
  flex-grow: 6;
}

.projects-timeline-track {
  position: relative;
  z-index: 3;
  margin-bottom: 40px;
  overflow: hidden;
  border-top: 42px solid color-mix(in srgb, var(--black) 1%, transparent);
}

.projects-timeline-track-in {
  border-top: 1px solid var(--border-content);
}

.timeline-project-item {
  position: relative;
  height: 40px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-semi-transparent-alt);
  transition: all var(--transition-normal) ease;
}
.timeline-project-item:nth-child(even) {
  background-color: color-mix(in srgb, var(--black) 1%, transparent);
}

.timeline-project-item-invoice {
  position: absolute;
  left: 30px;
  top: 5px;
  width: 29px;
  height: 29px;
  margin-left: -14.5px;
  padding-top: 1px;
  font-size: 17px;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 50%;
  box-shadow: 0 1px 5px color-mix(in srgb, var(--black) 7%, transparent);
  transition: all var(--transition-fast) ease;
}
.timeline-project-item-invoice.upcoming, .timeline-project-item-invoice.upcoming:focus, .timeline-project-item-invoice.upcoming:visited {
  border-color: var(--border-content-alt);
}
.timeline-project-item-invoice.upcoming:hover, .timeline-project-item-invoice.upcoming:active {
  border-color: var(--border-content-alt);
}
.timeline-project-item-invoice.upcoming .timeline-project-item-invoice-icon path.fill-none {
  stroke: var(--border-darker);
}
.timeline-project-item-invoice.upcoming .timeline-project-item-invoice-icon path:not(.fill-none) {
  fill: var(--border-darker);
}
.timeline-project-item-invoice.drafted, .timeline-project-item-invoice.drafted:focus, .timeline-project-item-invoice.drafted:visited {
  border-color: var(--grey-c);
}
.timeline-project-item-invoice.drafted:hover, .timeline-project-item-invoice.drafted:active {
  border-color: var(--grey-9);
}
.timeline-project-item-invoice.drafted .timeline-project-item-invoice-icon path.fill-none {
  stroke: var(--grey-9);
}
.timeline-project-item-invoice.drafted .timeline-project-item-invoice-icon path:not(.fill-none) {
  fill: var(--grey-9);
}
.timeline-project-item-invoice.scheduled, .timeline-project-item-invoice.scheduled:focus, .timeline-project-item-invoice.scheduled:visited {
  border-color: color-mix(in srgb, var(--grey-8) 80%, transparent);
}
.timeline-project-item-invoice.scheduled:hover, .timeline-project-item-invoice.scheduled:active {
  border-color: var(--grey-8);
}
.timeline-project-item-invoice.scheduled .timeline-project-item-invoice-icon path.fill-none {
  stroke: var(--grey-8);
}
.timeline-project-item-invoice.scheduled .timeline-project-item-invoice-icon path:not(.fill-none) {
  fill: var(--grey-8);
}
.timeline-project-item-invoice.outstanding, .timeline-project-item-invoice.outstanding:focus, .timeline-project-item-invoice.outstanding:visited {
  border-color: color-mix(in srgb, var(--grey-6) 80%, transparent);
}
.timeline-project-item-invoice.outstanding:hover, .timeline-project-item-invoice.outstanding:active {
  border-color: var(--grey-6);
}
.timeline-project-item-invoice.outstanding .timeline-project-item-invoice-icon path.fill-none {
  stroke: var(--grey-6);
}
.timeline-project-item-invoice.outstanding .timeline-project-item-invoice-icon path:not(.fill-none) {
  fill: var(--grey-6);
}
.timeline-project-item-invoice.overdue, .timeline-project-item-invoice.overdue:focus, .timeline-project-item-invoice.overdue:visited {
  border-color: color-mix(in srgb, var(--color-danger) 80%, transparent);
}
.timeline-project-item-invoice.overdue:hover, .timeline-project-item-invoice.overdue:active {
  border-color: var(--color-danger);
}
.timeline-project-item-invoice.overdue .timeline-project-item-invoice-icon path.fill-none {
  stroke: var(--color-danger);
}
.timeline-project-item-invoice.overdue .timeline-project-item-invoice-icon path:not(.fill-none) {
  fill: var(--color-danger);
}
.timeline-project-item-invoice.approved, .timeline-project-item-invoice.approved:focus, .timeline-project-item-invoice.approved:visited {
  border-color: color-mix(in srgb, var(--border-content) 80%, transparent);
}
.timeline-project-item-invoice.approved:hover, .timeline-project-item-invoice.approved:active {
  border-color: var(--border-content);
}
.timeline-project-item-invoice.approved .timeline-project-item-invoice-icon path.fill-none {
  stroke: var(--grey-e);
}
.timeline-project-item-invoice.approved .timeline-project-item-invoice-icon path:not(.fill-none) {
  fill: var(--grey-e);
}
.timeline-project-item-invoice.pending, .timeline-project-item-invoice.pending:focus, .timeline-project-item-invoice.pending:visited {
  border-color: color-mix(in srgb, var(--color-info) 80%, transparent);
}
.timeline-project-item-invoice.pending:hover, .timeline-project-item-invoice.pending:active {
  border-color: var(--color-info);
}
.timeline-project-item-invoice.pending .timeline-project-item-invoice-icon path.fill-none {
  stroke: var(--color-info);
}
.timeline-project-item-invoice.pending .timeline-project-item-invoice-icon path:not(.fill-none) {
  fill: var(--color-info);
}
.timeline-project-item-invoice.paid, .timeline-project-item-invoice.paid:focus, .timeline-project-item-invoice.paid:visited {
  border-color: color-mix(in srgb, var(--color-primary) 80%, transparent);
}
.timeline-project-item-invoice.paid:hover, .timeline-project-item-invoice.paid:active {
  border-color: var(--color-primary);
}
.timeline-project-item-invoice.paid .timeline-project-item-invoice-icon path.fill-none {
  stroke: var(--color-primary);
}
.timeline-project-item-invoice.paid .timeline-project-item-invoice-icon path:not(.fill-none) {
  fill: var(--color-primary);
}

.timeline-project-item-invoice-icon {
  position: relative;
  top: 2px;
  left: 0;
  width: 15px;
  height: auto;
}

.timeline-project-item-proposal {
  position: absolute;
  left: 30px;
  top: 5px;
  width: 29px;
  height: 29px;
  margin-left: -14.5px;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 50%;
  box-shadow: 0 1px 5px color-mix(in srgb, var(--black) 7%, transparent);
  transition: all var(--transition-fast) ease;
}
.timeline-project-item-proposal.drafted, .timeline-project-item-proposal.drafted:focus, .timeline-project-item-proposal.drafted:visited {
  border-color: var(--grey-c);
}
.timeline-project-item-proposal.drafted:hover, .timeline-project-item-proposal.drafted:active {
  border-color: var(--grey-9);
}
.timeline-project-item-proposal.drafted .timeline-project-item-proposal-icon path {
  stroke: var(--grey-9);
}
.timeline-project-item-proposal.sent, .timeline-project-item-proposal.sent:focus, .timeline-project-item-proposal.sent:visited {
  border-color: color-mix(in srgb, var(--grey-6) 80%, transparent);
}
.timeline-project-item-proposal.sent:hover, .timeline-project-item-proposal.sent:active {
  border-color: var(--grey-6);
}
.timeline-project-item-proposal.sent .timeline-project-item-proposal-icon path {
  stroke: var(--grey-6);
}
.timeline-project-item-proposal.rejected, .timeline-project-item-proposal.rejected:focus, .timeline-project-item-proposal.rejected:visited {
  border-color: color-mix(in srgb, var(--color-danger) 80%, transparent);
}
.timeline-project-item-proposal.rejected:hover, .timeline-project-item-proposal.rejected:active {
  border-color: var(--color-danger);
}
.timeline-project-item-proposal.rejected .timeline-project-item-proposal-icon path {
  stroke: var(--color-danger);
}
.timeline-project-item-proposal.accepted, .timeline-project-item-proposal.accepted:focus, .timeline-project-item-proposal.accepted:visited {
  border-color: color-mix(in srgb, var(--color-primary) 80%, transparent);
}
.timeline-project-item-proposal.accepted:hover, .timeline-project-item-proposal.accepted:active {
  border-color: var(--color-primary);
}
.timeline-project-item-proposal.accepted .timeline-project-item-proposal-icon path {
  stroke: var(--color-primary);
}

.timeline-project-item-proposal-icon {
  position: relative;
  top: 6px;
  width: 17px;
  height: auto;
  left: -1px;
}

.timeline-project-item-agreement {
  position: absolute;
  left: 30px;
  top: 5px;
  width: 29px;
  height: 29px;
  margin-left: -14.5px;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 50%;
  box-shadow: 0 1px 5px color-mix(in srgb, var(--black) 7%, transparent);
  transition: all var(--transition-fast) ease;
}
.timeline-project-item-agreement.status-1, .timeline-project-item-agreement.status-1:focus, .timeline-project-item-agreement.status-1:visited, .timeline-project-item-agreement.status-2, .timeline-project-item-agreement.status-2:focus, .timeline-project-item-agreement.status-2:visited, .timeline-project-item-agreement.status-3, .timeline-project-item-agreement.status-3:focus, .timeline-project-item-agreement.status-3:visited, .timeline-project-item-agreement.status-4, .timeline-project-item-agreement.status-4:focus, .timeline-project-item-agreement.status-4:visited {
  border-color: var(--grey-c);
}
.timeline-project-item-agreement.status-1:hover, .timeline-project-item-agreement.status-1:active, .timeline-project-item-agreement.status-2:hover, .timeline-project-item-agreement.status-2:active, .timeline-project-item-agreement.status-3:hover, .timeline-project-item-agreement.status-3:active, .timeline-project-item-agreement.status-4:hover, .timeline-project-item-agreement.status-4:active {
  border-color: var(--grey-9);
}
.timeline-project-item-agreement.status-1 .timeline-project-item-agreement-icon path, .timeline-project-item-agreement.status-2 .timeline-project-item-agreement-icon path, .timeline-project-item-agreement.status-3 .timeline-project-item-agreement-icon path, .timeline-project-item-agreement.status-4 .timeline-project-item-agreement-icon path {
  stroke: var(--grey-9);
}
.timeline-project-item-agreement.status-5, .timeline-project-item-agreement.status-5:focus, .timeline-project-item-agreement.status-5:visited {
  border-color: color-mix(in srgb, var(--grey-6) 80%, transparent);
}
.timeline-project-item-agreement.status-5:hover, .timeline-project-item-agreement.status-5:active {
  border-color: var(--grey-6);
}
.timeline-project-item-agreement.status-5 .timeline-project-item-agreement-icon path {
  stroke: var(--text-muted);
}
.timeline-project-item-agreement.status-6, .timeline-project-item-agreement.status-6:focus, .timeline-project-item-agreement.status-6:visited {
  border-color: color-mix(in srgb, var(--color-primary) 80%, transparent);
}
.timeline-project-item-agreement.status-6:hover, .timeline-project-item-agreement.status-6:active {
  border-color: var(--color-primary);
}
.timeline-project-item-agreement.status-6 .timeline-project-item-agreement-icon path {
  stroke: var(--color-primary);
}

.timeline-project-item-agreement-icon {
  position: relative;
  top: 5px;
  left: 0;
  width: 15px;
  height: auto;
}

.timeline-project-item-invoice::after,
.timeline-project-item-proposal::after,
.timeline-project-item-agreement::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid;
  background: transparent;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1);
  transition: all var(--transition-normal) ease;
}
.timeline-project-item-invoice:hover::after,
.timeline-project-item-proposal:hover::after,
.timeline-project-item-agreement:hover::after {
  opacity: 0.3;
  transform: scale(1.25);
}

.timeline-project-tooltip {
  position: absolute;
  z-index: 100;
  width: 250px;
  min-height: 40px;
  background: var(--bg-panel);
  border-radius: 6px;
  border: 1px solid var(--border-content);
  box-shadow: 0 4px 30px color-mix(in srgb, var(--black) 15%, transparent);
}
.timeline-project-tooltip:after {
  position: absolute;
  top: -9px;
  left: 50%;
  margin-left: -10px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 9px 10px;
  border-color: transparent transparent var(--border-content) transparent;
}

.timeline-project-tooltip-item {
  position: relative;
  padding: 20px;
  text-align: left;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--border-content);
}
.timeline-project-tooltip-item:first-child {
  border-top-left-radius: 4px;
}
.timeline-project-tooltip-item:last-child {
  border-bottom: none;
  border-bottom-left-radius: 4px;
}
.timeline-project-tooltip-item.proposal.drafted {
  border-left-color: var(--grey-c);
}
.timeline-project-tooltip-item.proposal.sent {
  border-left-color: var(--grey-6);
}
.timeline-project-tooltip-item.proposal.rejected {
  border-left-color: var(--color-danger);
}
.timeline-project-tooltip-item.proposal.accepted {
  border-left-color: var(--color-primary);
}
.timeline-project-tooltip-item.agreement.status-1, .timeline-project-tooltip-item.agreement.status-2, .timeline-project-tooltip-item.agreement.status-3, .timeline-project-tooltip-item.agreement.status-4 {
  border-left-color: var(--grey-c);
}
.timeline-project-tooltip-item.agreement.status-5 {
  border-left-color: var(--grey-6);
}
.timeline-project-tooltip-item.agreement.status-6 {
  border-left-color: var(--color-primary);
}
.timeline-project-tooltip-item.invoice.drafted {
  border-left-color: var(--grey-c);
}
.timeline-project-tooltip-item.invoice.scheduled {
  border-left-color: var(--grey-8);
}
.timeline-project-tooltip-item.invoice.outstanding {
  border-left-color: var(--grey-6);
}
.timeline-project-tooltip-item.invoice.overdue {
  border-left-color: var(--color-danger);
}
.timeline-project-tooltip-item.invoice.pending {
  border-left-color: var(--color-info);
}
.timeline-project-tooltip-item.invoice.paid {
  border-left-color: var(--color-primary);
}

.timeline-project-tooltip-item-type {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted-alt);
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

.timeline-project-tooltip-item-status {
  float: right;
  color: var(--text-muted-alt);
}

.timeline-project-tooltip-item-title {
  display: block;
  margin-bottom: 2px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline-project-tooltip-item-title, .timeline-project-tooltip-item-title:focus, .timeline-project-tooltip-item-title:visited, .timeline-project-tooltip-item-title:hover, .timeline-project-tooltip-item-title:active {
  color: var(--text-default);
}

.timeline-project-tooltip-item-amount {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted-alt);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-project-tooltip-item-dates {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted-alt);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-tracker-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.task-tracker {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  flex: 1;
  color: var(--text-muted);
  user-select: none;
}

.task-tracker-dot {
  width: 10px;
  height: 10px;
  margin-right: 2px;
  border-radius: 50%;
}
.task-tracker.task-tracker--completed .task-tracker-dot {
  background: color-mix(in srgb, var(--color-primary) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 70%, transparent);
}
.task-tracker.task-tracker--on-track .task-tracker-dot {
  background: var(--bg-grey-c);
  border: 1px solid var(--text-lighter);
}
.task-tracker.task-tracker--overdue .task-tracker-dot {
  background: color-mix(in srgb, var(--color-danger) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-danger) 70%, transparent);
}

.overbudget-alert-tooltip-icon {
  width: 16px;
  height: 16px;
}

.overbudget-alert-tooltip-wrapper {
  float: right;
  margin-top: 4px;
}

.overbudget-alert-tooltip-fee {
  width: 340px;
}

.overbudget-alert-tooltip-time {
  width: 230px;
}

.overbudget-alert-tooltip-label {
  text-align: left;
  font-weight: 500;
  width: 115px;
}

.overbudget-alert-tooltip-row {
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  padding: 4px;
  text-align: right;
}

.project-profitability-section {
  padding-top: 40px;
  border-top: 1px solid var(--border-content);
}

.project-finances-segments {
  display: flex;
  flex-direction: column;
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
  border-radius: 10px;
}
@media (min-width: 992px) {
  .project-finances-segments {
    flex-direction: row;
    flex-wrap: nowrap;
  }
}

.project-finances-segment {
  padding: 30px;
  width: 100%;
  border-bottom: 1px solid var(--border-content);
}
.project-finances-segment:nth-child(3) {
  border-bottom: none;
}
.page-properties-section .project-finances-segment {
  padding: 0;
  border: none;
}
@media (min-width: 992px) {
  .project-finances-segment {
    width: 33.3333%;
    border-bottom: none;
    border-right: 1px solid var(--border-content);
  }
  .project-finances-segment:nth-child(3) {
    border-right: none;
  }
  .page-properties-section .project-finances-segment {
    width: 100%;
    padding: 0;
    border: none;
  }
}

.project-finances-segment-title {
  margin-bottom: 20px;
  font-weight: 500;
  font-size: 16px;
}
.page-properties-section .project-finances-segment-title {
  font-size: 14px;
}

.project-header-section {
  position: relative;
  border-bottom: 1px solid var(--border-content);
}

.project-header-content-in {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  padding-top: 20px;
  padding-bottom: 40px;
}
@media (min-width: 1080px) {
  .project-header-content-in {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 27px;
    padding-bottom: 7px;
  }
}
.project-header-content-in.align-items-center {
  align-items: center;
}

.project-header-main-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 20px;
}
@media (min-width: 1080px) {
  .project-header-main-content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding-left: 45px;
  }
}

.project-header-title {
  position: relative;
  margin-bottom: 0;
  font-size: 22px;
  font-weight: 600;
  word-break: break-word;
}
.project-header-title.editing {
  z-index: 10;
  top: 0;
  width: 100%;
  margin-bottom: 1px;
}

.project-header-title-wrapper-second-row {
  margin-top: 4px;
  padding-left: 5px;
}

.project-header-title-wrapper-second-row-icon {
  position: relative;
  top: 3px;
  width: 12px;
  margin-right: 6px;
}
.project-header-title-wrapper-second-row-icon path {
  fill: var(--text-default);
}

.project-header-info-display {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.project-header-title-display {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  height: auto;
  cursor: default;
  border-radius: 6px;
  transition: background var(--transition-fast) ease;
}
@media (min-width: 1280px) {
  .project-header-title-display {
    padding: 0 5px;
    cursor: pointer;
  }
  .project-header-title-display:hover {
    background-color: var(--bg-grey-fa);
  }
}

.project-header-title-form {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 20px;
}
.company-details-inner-wrapper .project-header-title-form {
  margin-left: -1px;
  margin-bottom: 6px;
}

.project-header-title-form-field {
  height: 30px;
  width: 300px;
  max-width: 100%;
  padding: 0 5px;
  font-size: 22px;
  font-weight: 600;
}
.company-details-inner-wrapper .project-header-title-form-field {
  width: 100%;
}
.project-header-title.editing .project-header-title-form-field {
  width: 100%;
}

.project-header-dropdown {
  position: absolute;
  right: 0;
  top: 20px;
}
@media (min-width: 1080px) {
  .project-header-dropdown {
    position: relative;
    right: 0;
    top: 0;
  }
}
.project-header-dropdown:has(.dropdown-menu:empty) {
  display: none;
}

.project-header-tags {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  gap: 5px;
  align-items: center;
}
@media (min-width: 1080px) {
  .project-header-tags {
    flex-wrap: nowrap;
    padding-right: 10px;
    overflow: hidden;
    mask-image: linear-gradient(to right, black 90%, transparent 100%);
  }
}
.project-header-title.editing + .project-header-tags {
  display: none;
}

.project-header-tags-empty {
  padding-left: 5px;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.project-header-tags-empty, .project-header-tags-empty:focus, .project-header-tags-empty:visited {
  color: var(--text-muted);
}
.project-header-tags-empty:hover, .project-header-tags-empty:active {
  color: var(--text-muted);
}

.project-header-assignments-wrapper {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  right: 60px;
  gap: 12px;
  flex-shrink: 0;
}
@media (min-width: 1080px) {
  .project-header-assignments-wrapper {
    position: relative;
    right: auto;
    margin-right: 15px;
    padding-right: 14px;
  }
  .project-header-assignments-wrapper::after {
    content: "";
    position: absolute;
    right: 0;
    top: 5px;
    bottom: 5px;
    border-right: 1px solid var(--border-content);
  }
}

.project-header-budget-chart-wrapper {
  position: relative;
  display: none;
  flex-direction: row;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
  margin-right: 15px;
  padding-right: 3px;
}
@media (min-width: 1080px) {
  .project-header-budget-chart-wrapper {
    display: flex;
  }
  .project-header-budget-chart-wrapper::after {
    content: "";
    position: absolute;
    right: 0;
    top: 5px;
    bottom: 5px;
    border-right: 1px solid var(--border-content);
  }
}

.project-budget-mini-progressbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 190px;
  height: 30px;
  padding: 0 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: all var(--transition-fast) ease;
}
.project-budget-mini-progressbar:hover {
  background: var(--bg-grey-fa);
}
.gantt-task-bar-popover .project-budget-mini-progressbar {
  width: 100%;
  padding: 0 3px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-default);
}

.project-budget-mini-progress-label,
.project-budget-mini-progress-value {
  position: relative;
  top: -1px;
  flex-shrink: 0;
}

.project-header-right-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
@media (min-width: 1080px) {
  .project-header-right-content {
    align-items: flex-end;
    flex-direction: row-reverse;
    margin-bottom: 0;
  }
}

.project-header-top-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.project-header-client-portal-links {
  position: absolute;
  right: 0;
  top: 20px;
  font-size: 12px;
}
@media (min-width: 768px) {
  .project-header-client-portal-links {
    right: 0;
    top: 36px;
    font-size: 16px;
  }
}

.project-header-client-portal-link, .project-header-client-portal-link:focus, .project-header-client-portal-link:visited {
  color: var(--text-lighter);
}
.project-header-client-portal-link:hover, .project-header-client-portal-link:active {
  color: var(--text-lighter);
}

.project-contact-details {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex-shrink: 0;
}
@media (min-width: 1080px) {
  .project-contact-details {
    position: absolute;
    left: 0;
    top: 27px;
  }
}

.project-contacts-contact {
  display: flex;
  align-items: center;
}

.project-contacts-contact-avatar {
  display: none;
}
@media (min-width: 1080px) {
  .project-contacts-contact-avatar {
    display: block;
  }
}

.project-contacts-contact-avatar-mobile {
  display: block;
}
@media (min-width: 1080px) {
  .project-contacts-contact-avatar-mobile {
    display: none;
  }
}

.project-contacts-contact-name-mobile {
  display: block;
  padding-left: 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--text-default);
}
@media (min-width: 1080px) {
  .project-contacts-contact-name-mobile {
    display: none;
  }
}

.project-team-list {
  cursor: pointer;
  padding: 7px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 15px;
  row-gap: 5px;
  min-height: 40px;
  margin: 0 -6px;
}
.project-team-list:hover {
  background-color: var(--bg-grey-f8);
  border-radius: 4px;
}

.project-team-contact {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.project-team-contact-name {
  max-width: 180px;
  padding-left: 10px;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .project-team-contact-name {
    max-width: none;
  }
}

#modal-project-edit-members .autocomplete-tags {
  text-transform: uppercase;
}

.project-contacts-members {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 4;
}

.project-contacts-members-more {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  padding-bottom: 1px;
  font-size: 14px;
  font-weight: 400;
  text-indent: -3px;
  color: var(--text-muted);
  background: var(--bg-grey-f5);
  border-radius: 50%;
  border: 2px solid var(--bg-content);
}
.project-contacts-members-more .project-contacts-members-more--text {
  padding-bottom: 1px;
}
.project-contacts-members-more.project-contacts-members-more--empty {
  cursor: pointer;
  padding-bottom: 0;
}
.project-contacts-members-more.project-contacts-members-more--empty path {
  fill: var(--text-muted);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .drawer-wrapper .project-contacts-members-more {
    background: var(--grey-3);
    border-color: var(--bg-content-alt);
  }
}
:root[data-theme=dark] .drawer-wrapper .project-contacts-members-more {
  background: var(--grey-3);
  border-color: var(--bg-content-alt);
}

.project-contacts-members-more-icon {
  position: relative;
  font-size: 10px;
  font-weight: 600;
  margin-right: 4px;
}

.status-field-label.project-group-select {
  max-width: 200px;
  padding-right: 30px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-field-label.project-group-select .status-field-text {
  cursor: pointer;
}
.list-grid-item-cell .status-field-label.project-group-select {
  max-width: 100%;
}

.project-header-subnav {
  position: relative;
  margin-bottom: -1px;
  margin-left: -20px;
  margin-right: -20px;
  display: flex;
  align-items: center;
  gap: 20px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--border-content);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.project-header-subnav::-webkit-scrollbar {
  display: none;
}
.project-header-subnav.project-header-subnav--no-border {
  border-top: none;
}
@media (min-width: 768px) {
  .project-header-subnav {
    margin-left: 0px;
    margin-right: 0px;
    border-top: none;
    overflow: initial;
  }
}

.project-header-subnav-item {
  display: inline-block;
  height: 46px;
  width: auto;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
.project-header-subnav-item, .project-header-subnav-item:focus, .project-header-subnav-item:visited {
  color: var(--text-muted);
  text-decoration: none;
}
.project-header-subnav-item:hover, .project-header-subnav-item:active {
  color: var(--text-default);
  text-decoration: none;
}
.project-header-subnav-item.active {
  color: var(--text-default);
  pointer-events: none;
  border-bottom: 2px solid var(--color-primary);
}
.project-header-subnav-item:first-child {
  margin-left: 20px;
}
.project-header-subnav-item:focus-visible {
  text-decoration: underline;
  outline: none;
}
@media (min-width: 768px) {
  .project-header-subnav-item {
    padding: 14px 0;
  }
  .project-header-subnav-item:first-child {
    margin-left: 0;
  }
}

.project-header-subnav-customize {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px 5px 5px;
  margin-left: -5px;
  height: 100%;
}

.project-header-subnav-customize-icon {
  width: 13px;
  height: auto;
}
.project-header-subnav-customize-icon path {
  fill: var(--text-muted);
}
.project-header-subnav-customize:hover .project-header-subnav-customize-icon path {
  fill: var(--text-default);
}

.new-member-modal-wrapper {
  position: relative;
  margin: 0 auto;
  color: var(--text-default);
  background: var(--bg-content);
  border-top: 1px solid var(--border-content-alt);
}
@media (min-width: 768px) {
  .new-member-modal-wrapper {
    box-shadow: 0 1px 14px color-mix(in srgb, var(--bg-shadow) 10%, transparent);
  }
}
@media (min-width: 1100px) {
  .new-member-modal-wrapper {
    margin: 30px auto 30px;
    max-width: calc(var(--wrapper-md-width) - 60px);
    border-top: none;
    border-radius: 6px;
  }
}

.new-member-modal-tabs {
  display: flex;
  overflow: hidden;
  background: var(--bg-content);
  background-image: linear-gradient(to bottom, white 0%, #fcfcfc 100%);
  border-radius: 5px 5px 0 0;
  box-shadow: inset 0 -1px 2px color-mix(in srgb, var(--black) 8%, transparent);
}

.new-member-modal-tab {
  padding: 20px 25px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
  transition: all var(--transition-normal) ease;
}
.new-member-modal-tab.active {
  color: var(--color-primary);
  pointer-events: none;
  background: var(--bg-content);
  box-shadow: 0 0 4px color-mix(in srgb, var(--black) 10%, transparent), inset 0 2px 0;
}

.new-member-modal-tab-price {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted-alt);
  transition: all var(--transition-normal) ease;
}
.new-member-modal-tab.active .new-member-modal-tab-price {
  color: var(--color-primary);
}

.new-member-modal-col-left {
  padding: 40px;
}
@media (min-width: 768px) {
  .new-member-modal-col-left {
    padding: 60px;
  }
}

.new-member-modal-col-right {
  padding: 40px 40px 90px;
  font-size: 16px;
  border-top: 1px solid var(--border-content-alt);
}
@media (min-width: 768px) {
  .new-member-modal-col-right {
    padding: 60px 60px 120px;
    border-top: none;
  }
}

.new-member-modal-col-border {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  overflow: hidden;
  pointer-events: none;
}
@media (min-width: 768px) {
  .new-member-modal-col-border {
    left: 58.33333%;
    height: 100%;
    background-image: linear-gradient(to top left, var(--bg-grey-fa) 0%, var(--bg-content) 100%);
    border-left: 1px solid var(--border-content);
    border-radius: 0 6px 6px 0;
  }
}

.new-member-modal-col-bg {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 130px;
  width: 100%;
  background: transparent right bottom no-repeat;
  background-size: contain;
  background-image: url("shared/partner-collaborator-bg.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .new-member-modal-col-bg {
    background-image: url("shared/partner-collaborator-bg@2x.png");
  }
}

.new-member-modal-support-link {
  position: absolute;
  left: 30px;
  bottom: 30px;
  font-size: 14px;
  color: var(--text-lighter);
}
@media (min-width: 768px) {
  .new-member-modal-support-link {
    left: auto;
    right: 30px;
  }
}

.new-member-modal-submit-form {
  margin-top: 45px;
  text-align: right;
}
.new-member-modal-submit-form .btn {
  width: 100%;
}
@media (min-width: 480px) {
  .new-member-modal-submit-form .btn {
    width: auto;
  }
}

.new-member-modal-contractors {
  margin-top: 30px;
}

.new-member-modal-contractors-list {
  max-height: 160px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-darker);
  border-radius: 4px;
}

.new-member-modal-contractor-item .checkbox-label {
  display: block;
  padding-left: 60px;
  padding-right: 50px;
  border-radius: 3px;
}
.new-member-modal-contractor-item .checkbox-label:hover {
  background: var(--bg-grey-fc);
}
.new-member-modal-contractor-item .checkbox-toggle {
  top: 23px;
  left: auto;
  right: 20px;
}

.new-member-modal-contractor-item-in {
  padding: 13px 0;
}

.new-member-modal-contractor-item-avatar {
  position: absolute;
  left: 15px;
  top: 15px;
}

.new-member-modal-contractor-name {
  font-size: 16px;
  font-weight: 600;
}

.new-member-modal-contractor-email {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-lighter);
}

.new-member-modal-project-section {
  margin-bottom: 60px;
}

.new-member-modal-selected-project {
  position: relative;
  min-height: 72px;
  padding: 15px 15px 15px 65px;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid var(--color-primary);
  border-left: 4px solid var(--color-primary);
  border-radius: 6px;
}

.new-member-modal-selected-project-icon {
  position: absolute;
  left: 20px;
  top: 16px;
  font-size: 30px;
  color: color-mix(in srgb, var(--color-primary) 90%, transparent);
}

.new-member-modal-selected-project-client {
  margin-top: 1px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-lighter);
}

.new-collaborator-list-contractor-section {
  padding-top: 40px;
  margin-top: 40px;
  border-top: 1px solid var(--border-content);
}

.new-collaborator-list-contractor-items {
  max-height: 320px;
  overflow: hidden;
  overflow-y: scroll;
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.new-collaborator-list-contractor-item {
  position: relative;
  display: block;
  padding: 13px 15px 15px 60px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-content);
  transition: all var(--transition-normal) ease;
}
.new-collaborator-list-contractor-item:hover {
  background: var(--bg-grey-fc);
}
.new-collaborator-list-contractor-item:first-child {
  border-radius: 4px 4px 0 0;
}
.new-collaborator-list-contractor-item:last-child {
  border-radius: 0 0 4px 4px;
  border-bottom: 0;
}

.new-collaborator-list-contractor-item-avatar {
  position: absolute;
  left: 15px;
  top: 15px;
}

.new-collaborator-list-contractor-item-projects {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

.new-collaborator-list-contractor-item-projects-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.new-collaborator-list-contractor-item-projects-list li {
  display: inline;
  max-width: 100%;
  margin-right: 2px;
  margin-top: 5px;
  padding: 1px 10px 3px;
  font-weight: 600;
  font-size: 12px;
  color: var(--color-primary);
  cursor: default;
  white-space: nowrap;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--bg-grey-f5);
  border-radius: 20px;
}

.new-collaborator-list-empty-state {
  padding: 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-lighter);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.new-member-modal-features {
  list-style: none;
  padding: 0;
}

.new-member-modal-feature {
  position: relative;
  margin-bottom: 7px;
  padding-left: 28px;
}
.new-member-modal-feature:last-child {
  margin-bottom: 0;
}

.new-member-modal-feature-check {
  position: absolute;
  left: 0;
  top: -10px;
  font-size: 39px;
  line-height: 1;
  color: var(--color-primary);
}

.new-member-modal-feature-close {
  position: absolute;
  left: 2px;
  top: -6px;
  font-size: 34px;
  line-height: 1;
  color: var(--color-danger);
}

.project-message-list-item-attachment {
  position: relative;
  margin-top: 5px;
  padding: 10px 12px 8px;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: 4px;
}

.project-message-list-item-attachment-download {
  position: absolute;
  right: 2px;
  top: 2px;
  bottom: 2px;
  padding: 7px 9px;
  font-size: 18px;
  background-color: var(--bg-content-alt);
  border-radius: 3px;
}
.project-message-list-item-attachment-download, .project-message-list-item-attachment-download:focus, .project-message-list-item-attachment-download:visited {
  color: var(--text-muted);
  border: 1px solid var(--border-content-alt);
}
.project-message-list-item-attachment-download:hover, .project-message-list-item-attachment-download:active {
  color: var(--text-default);
  border: 1px solid var(--border-darker);
}

.project-message-list-item-attachment-preview {
  margin-top: 5px;
}

.project-message-list-item-attachment-preview-in {
  position: relative;
  display: inline-block;
}

.project-message-list-item-attachment-preview-img {
  width: auto;
  height: auto;
  max-width: 300px;
  cursor: pointer;
  background-color: var(--bg-content);
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  transition: all var(--transition-normal) ease;
}
.project-message-list-item-attachment-preview-img:hover {
  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 10%, transparent);
}

.project-message-list-item-attachment-preview-download {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 36px;
  width: 36px;
  padding: 7px;
  text-align: center;
  font-size: 18px;
  background-color: var(--bg-content-alt);
  border-radius: 5px;
  border: 1px solid var(--border-semi-transparent);
}
.project-message-list-item-attachment-preview-download, .project-message-list-item-attachment-preview-download:focus, .project-message-list-item-attachment-preview-download:visited {
  color: var(--text-muted);
}
.project-message-list-item-attachment-preview-download:hover, .project-message-list-item-attachment-preview-download:active {
  color: var(--text-muted);
  border: 1px solid color-mix(in srgb, var(--black) 15%, transparent);
}

.project-message-list-item-delete {
  position: absolute;
  right: 17px;
  top: 17px;
  width: 30px;
  height: 30px;
  max-width: 30px;
  padding-top: 3px;
  font-size: 22px;
  color: var(--color-danger);
  text-align: center;
  line-height: 0;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: hidden;
  background: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--color-danger) 20%, transparent);
  border-radius: 4px;
  transition: all var(--transition-fast) ease;
  opacity: 0;
  overflow: hidden;
}
.project-event-item:hover .project-message-list-item-delete {
  opacity: 1;
}
.project-message-list-item-delete:hover {
  border-color: color-mix(in srgb, var(--color-danger) 80%, transparent);
}
.project-event-item.origin-email .project-message-list-item-delete {
  right: 60px;
}
.project-message-list-item-delete.confirming {
  width: auto;
  max-width: 100px;
  border-color: var(--color-danger);
}

.project-message-list-item-delete-confirm {
  height: 100%;
  padding: 12px 10px 13px;
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.modal-project-email-modal-copy {
  font-size: 16px;
  color: var(--text-muted);
}

.modal-project-email-modal-address {
  margin: 30px 0 0;
  padding: 12px 15px 10px;
  font-weight: 600;
  font-size: 18px;
  text-align: center;
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content-alt);
  overflow-x: scroll;
  border-radius: 4px;
}

.email-content {
  overflow-x: scroll;
}

.project-message-content-preview-with-link {
  margin-top: 10px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.075em;
}

.project-message-attachments-header {
  padding-top: 40px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  color: rgb(170, 170, 170);
  text-transform: uppercase;
}

.project-message-attachment {
  display: inline-block;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px;
}
.project-message-attachment, .project-message-attachment:focus, .project-message-attachment:visited {
  color: var(--color-primary);
  text-decoration: underline;
}
.project-message-attachment:hover, .project-message-attachment:active {
  color: color-mix(in srgb, var(--color-primary) 95%, transparent);
  text-decoration: underline;
}

.project-message-attachment-icon {
  font-size: 18px;
  padding-right: 10px;
}

.project-messages-empty-state-container {
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: var(--bg-grey-f8);
  padding: 16px;
  border-radius: 10px;
}
.project-messages-empty-state-container .chat-icon {
  flex-shrink: 0;
  padding-left: 10px;
  padding-right: 20px;
  width: 21px;
  height: 20px;
}
.project-messages-empty-state-container .chat-icon path {
  fill: var(--text-default);
}
.project-messages-empty-state-container .empty-state-text div:first-child {
  color: var(--text-default);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 2px;
}
.project-messages-empty-state-container .empty-state-text div:last-child {
  color: var(--text-default);
  font-size: 14px;
  font-weight: 400;
}

.project-document-list {
  overflow: hidden;
  border-radius: 4px;
}

.project-details-section-document-empty-state {
  padding: 40px 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-lighter);
  border: 1px solid var(--border-content);
  border-radius: 10px;
}

.project-document-item {
  position: relative;
  display: block;
  padding: 25px 25px 22px;
  background: var(--bg-content);
  border-top: 1px solid var(--border-content-alt);
  transition: all var(--transition-normal) ease;
}
.project-document-item:nth-child(1) {
  border-top-width: 0;
}

.project-document-item-type {
  margin-bottom: 5px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--text-lighter);
}
.project-document-item:hover .project-document-item-type {
  color: var(--text-lighter);
}

.project-document-item-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-document-item.empty .project-document-item-title {
  color: var(--color-primary);
}

.project-document-item-status {
  font-size: 12px;
  color: var(--text-muted-alt);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-document-item-add-icon {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -18px;
  padding: 7px 13px 4px;
  font-size: 22px;
  line-height: 22px;
  color: var(--color-primary);
  background: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  box-shadow: -1px 0 3px color-mix(in srgb, var(--black) 3%, transparent);
  transition: all var(--transition-normal) ease;
}
.project-document-item:hover .project-document-item-add-icon {
  color: color-mix(in srgb, var(--color-primary) 97%, transparent);
  box-shadow: -1px 0 3px color-mix(in srgb, var(--black) 5%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.project-settings-budget-notification {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 768px) {
  .project-settings-budget-notification {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
}

.project-files-attachment-graphic {
  position: relative;
  margin: 0 auto 40px;
  width: 200px;
  height: 250px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("projects/file-upload.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .project-files-attachment-graphic {
    background-image: url("projects/file-upload@2x.png");
  }
}

.project-files-attachment {
  margin-top: 40px;
}
.project-files-attachment .checkbox-sm .checkbox-toggle {
  top: 1px;
}

.project-files-attachment-in {
  position: relative;
  width: 100%;
  border: 1px dashed var(--border-content-alt);
  background: var(--bg-grey-fd);
  border-radius: 6px;
}
.project-files-attachment-in:hover {
  border: 1px dashed color-mix(in srgb, var(--color-primary) 50%, transparent);
}
.project-files-attachment-in.files-loading {
  pointer-events: none;
  border: 1px solid var(--bg-grey-f8);
  background: var(--bg-grey-fd);
}

.project-files-attachment-placeholder-link {
  position: relative;
  padding: 40px 20px 40px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
}

.project-files-attachment-placeholder-icon {
  position: absolute;
  top: 23px;
  left: 20px;
  width: 22px;
  height: auto;
}

.project-files-attachment-placeholder-link-sublabel {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
}

.project-files-attachment-value {
  padding: 30px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  background: var(--bg-grey-fd);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}

.project-files-attachment-value-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
}

.project-files-attachment-value-filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-files-attachment-value-notifications {
  font-size: 14px;
}

.project-files-attachment-loading {
  position: relative;
  padding: 30px 20px 40px;
  text-align: center;
  background: var(--bg-grey-f8);
  border-radius: 6px;
}

.project-files-attachment-loading-text {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
}

.project-links-form {
  padding: 30px;
  text-align: left;
  background: var(--bg-grey-fd);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}

.project-links-form-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
}

.project-links-form-filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-links-form-notifications {
  font-size: 14px;
}

.project-links-form-label-section {
  margin-top: 30px;
  border-top: 1px solid var(--border-content);
}

.project-links-form-preview-section {
  position: relative;
  padding: 0 0 0 40px;
}

.project-links-form-label-icon {
  position: absolute;
  top: 8px;
  left: 0;
  width: 18px;
  height: auto;
}
.project-links-form-label-icon g {
  fill: var(--color-primary);
}

.project-links-form-label-favicon {
  position: absolute;
  left: 6px;
  top: 11px;
  width: 17px;
  height: 17px;
  background: transparent center center no-repeat;
  background-size: cover;
}

.tasks-insight-item {
  min-height: 54px;
  padding: 16px 0;
  text-align: left;
  border-top: 1px solid var(--border-content);
}
.tasks-insight-item:last-child {
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .tasks-insight-item .row {
    display: flex;
    align-items: center;
    height: 100%;
  }
}

@media (max-width: 768px) {
  .tasks-insight-item-right-xs {
    display: flex;
    justify-content: flex-end;
  }
}

.difference-value.negative {
  color: var(--color-danger) !important;
}
.difference-value.positive {
  color: var(--color-primary) !important;
}
.difference-value.equal {
  color: var(--color-accent-orange) !important;
}

.profile-review {
  position: relative;
  padding: 20px 0;
  color: var(--text-muted);
}
.profile-review .review-stars {
  float: none;
  display: inline-block;
  margin-bottom: 15px;
}
.profile-review .link-inline, .profile-review .modal-payment-methods-item-edit-link {
  position: absolute;
  top: 20px;
  right: 0;
}

.profile-review-text {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 400;
}

.profile-reviewer {
  position: relative;
  min-height: 32px;
  padding-left: 45px;
}
.profile-reviewer .avatar {
  position: absolute;
  left: 0;
  top: 0;
}

.profile-reviewer-info {
  display: inline-block;
}

.profile-reviewer-name {
  line-height: 1;
  color: var(--text-lighter);
}

.profile-review-project {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-lighter);
}

.profile-review-project-link {
  color: var(--text-muted-alt);
}
.profile-review-project-link:focus, .profile-review-project-link:visited {
  color: var(--text-muted-alt);
}
.profile-review-project-link:hover, .profile-review-project-link:active {
  color: var(--text-muted);
}

.profile-reviews-more {
  display: block;
  padding: 15px;
  border: 1px solid var(--border-content-alt);
  border-top: 0;
  background: var(--bg-content);
  letter-spacing: 1px;
  color: var(--color-primary);
  border-radius: 0 0 4px 4px;
}

.profile-reviews-more-icon {
  font-size: 10px;
}

.profile-reviews-empty {
  display: block;
  padding: 30px;
  text-align: center;
  font-weight: 400;
  font-size: 16px;
  color: var(--text-lightest);
  background: var(--bg-content);
}

.company-notes-list {
  display: flex;
  flex-direction: column;
}

.company-notes-item {
  display: flex;
  flex-direction: column;
  padding: 15px 0;
  width: 100%;
  border-bottom: 1px solid var(--border-content);
  transition: all var(--transition-slower) ease;
}
.company-notes-item:hover {
  cursor: pointer;
  background-color: var(--bg-grey-fd);
}
.company-notes-item:first-child {
  border-top: 1px solid var(--border-content);
}

.company-notes-item-header-date {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.company-notes-item-title {
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 500;
}

.company-notes-item-body {
  display: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.company-notes-item-body.company-notes-item-body--placeholder {
  color: var(--text-lighter);
}
@media (min-width: 480px) {
  .company-notes-item-body {
    display: block;
  }
}

.modal-contact-edit-rate-info {
  padding: 20px;
  text-align: center;
  font-size: 14px;
  background: var(--bg-grey-fc);
  border-bottom: 1px solid var(--border-content);
}

.modal-contact-edit-rate-input-wrap {
  position: relative;
  padding-left: 70px;
  padding-right: 70px;
}

.modal-contact-edit-rate-symbol {
  position: absolute;
  left: 0;
  top: 3px;
  width: 55px;
  font-size: 26px;
  font-weight: 400;
  text-align: right;
}

.modal-contact-edit-rate-input {
  position: relative;
  z-index: 1;
  font-size: 26px;
  width: 100%;
  font-weight: 500;
}

.modal-contact-edit-rate-currency {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  line-height: 36px;
  letter-spacing: 1px;
}
.modal-contact-edit-rate-currency .dropdown-label {
  top: 0;
  min-height: 40px;
}
.modal-contact-edit-rate-currency .dropdown-label-text {
  position: relative;
  top: 3px;
}
.modal-contact-edit-rate-currency .dropdown-caret {
  margin-top: -18px;
}
.modal-contact-edit-rate-currency .dropdown-div {
  left: auto;
  right: 0;
}

.modal-contact-edit-rate-type-copy {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.modal-contact-edit-rate-type-dd {
  position: relative;
  display: inline-block;
  top: 9px;
  padding-left: 4px;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.modal-contact-edit-rate-type-dd .dropdown-label {
  min-height: 40px;
}
.modal-contact-edit-rate-type-dd .dropdown-caret {
  margin-top: -20px;
}
.modal-contact-edit-rate-type-dd .dropdown-div {
  left: auto;
  right: 0;
}

.contacts-show-page {
  position: relative;
}

.contacts-show-bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 120px;
  background: var(--bg-grey-fc);
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .contacts-show-bg {
    height: 112px;
  }
}

@media (min-width: 992px) {
  .contacts-show-page-columns {
    display: flex;
  }
}

.contacts-show-deleted-banner {
  position: relative;
  padding: 13px 20px 11px;
  text-align: center;
  background: var(--color-danger);
}

.contacts-show-deleted-banner-text {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary-contrast);
  user-select: none;
}

.profile-title-rate-container {
  position: relative;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-muted);
}
.profile-title-rate-container:hover .link-inline, .profile-title-rate-container:hover .modal-payment-methods-item-edit-link {
  opacity: 1;
}
.profile-title-rate-container .link-inline, .profile-title-rate-container .modal-payment-methods-item-edit-link {
  display: inline-block;
  padding-left: 5px;
  font-weight: 600;
  opacity: 0.7;
  transition: all var(--transition-normal) ease;
}
.profile-title-rate-container .link-inline:hover, .profile-title-rate-container .modal-payment-methods-item-edit-link:hover {
  opacity: 1;
}
@media (min-width: 768px) {
  .profile-title-rate-container {
    font-size: 22px;
  }
}

.profile-title-reviews {
  display: inline-block;
}

.review-stars {
  margin-top: 10px;
  font-size: 18px;
  line-height: 1;
  color: var(--color-accent-yellow);
}
.review-stars .rating-star-empty {
  color: var(--border-content-alt);
}
@media (min-width: 768px) {
  .review-stars {
    float: left;
    margin-top: 0px;
    margin-right: 10px;
    font-size: 22px;
  }
}

.review-star-text {
  display: inline-block;
  padding-top: 8px;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
  vertical-align: top;
  font-weight: 400;
  color: var(--text-lightest);
}

.profile-section-header {
  position: relative;
  margin-bottom: 8px;
  line-height: 1;
}
.profile-section-header:after {
  content: "";
  display: table;
  clear: both;
}
.profile-section-header .tooltip.top {
  margin-left: -5px;
}
.profile-section-header .tooltip-inner {
  max-width: none;
}

.profile-section-title-icon {
  position: relative;
  float: left;
  height: 18px;
  padding-right: 10px;
  font-size: 17px;
  color: var(--text-muted);
}
@media (min-width: 768px) {
  .profile-section-title-icon {
    height: 22px;
    font-size: 20px;
  }
}

.profile-section-title-icon-shared {
  position: relative;
  right: 0;
  top: -1px;
  width: 18px;
}
@media (min-width: 768px) {
  .profile-section-title-icon-shared {
    width: 20px;
  }
}
.profile-section-title-icon-shared path {
  fill: var(--text-muted);
}

.profile-section-container {
  border: 1px solid var(--border-content-alt);
  border-bottom-width: 0px;
  color: var(--text-muted);
  background: var(--bg-content);
}
.profile-section-container:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.profile-section-container:last-child {
  border-bottom-width: 1px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.profile-contact-section {
  margin-top: 30px;
}

.profile-contact-item {
  position: relative;
  margin-bottom: 5px;
}
.profile-contact-item .list-item-dd-toggle-link {
  padding-top: 8px;
}

.profile-contact-item-in {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 16px 50px 16px 20px;
  color: var(--text-default);
  cursor: pointer;
  background: var(--bg-content);
  border-radius: 6px;
  border: 1px solid var(--border-content);
  transition: all var(--transition-fast) ease;
}
.profile-contact-item-in:hover {
  border-color: var(--border-content-alt);
}

.profile-contact-item-dropdown {
  display: none;
}
.profile-contact-item:hover .profile-contact-item-dropdown {
  display: block;
}

.profile-contact-item-avatar {
  position: absolute;
  left: 20px;
  top: 20px;
}

.profile-contact-item-email-section {
  position: relative;
  z-index: 3;
  display: inline-flex;
  flex-wrap: nowrap;
  max-width: 100%;
}

.profile-contact-item-email {
  display: inline-block;
  font-size: 14px;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: visible;
}
.profile-contact-item-email, .profile-contact-item-email:focus, .profile-contact-item-email:visited {
  color: var(--text-muted);
}
.profile-contact-item-email:hover, .profile-contact-item-email:active {
  color: var(--text-muted);
  text-decoration: underline;
}

.profile-contact-item-name {
  position: relative;
  margin-bottom: 2px;
  font-size: 16px;
  font-weight: 500;
  word-break: break-word;
  user-select: none;
}

.profile-contact-item-job-title {
  position: relative;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 400;
  word-break: break-word;
}

.profile-contact-item-default {
  display: inline-flex;
  flex-shrink: 0;
  height: 26px;
  padding: 5px 10px 4px;
  margin-top: -6px;
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  background: var(--bg-grey-f5);
  user-select: none;
  border-radius: 5px;
  transform: translateY(3px);
}

.profile-notes {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-default);
  border-radius: 4px;
}
.profile-notes.empty {
  display: block;
  padding: 40px;
  text-align: center;
  font-size: 16px;
  color: var(--text-lighter);
  height: auto;
  border: 1px solid var(--border-content);
  border-radius: 10px;
}
@media (min-width: 768px) {
  .profile-notes {
    font-size: 16px;
  }
}

.profile-notes-form {
  color: var(--text-muted-alt);
}

.profile-notes-form-control {
  min-height: 300px;
  font-size: 14px;
}
@media (min-width: 768px) {
  .profile-notes-form-control {
    font-size: 16px;
  }
}

.profile-notes-form-btns {
  position: relative;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
}
.profile-notes-form-btns .btn {
  width: 100%;
}
@media (min-width: 768px) {
  .profile-notes-form-btns {
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center;
  }
  .profile-notes-form-btns .btn {
    width: auto;
    min-width: 100px;
  }
}

.profile-notes-form-markdown {
  position: relative;
  display: none;
  flex: 1;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-lighter);
}
@media (min-width: 600px) {
  .profile-notes-form-markdown {
    display: block;
  }
}

.profile-notes-form-markdown-icon {
  position: relative;
  top: -2px;
  float: left;
  margin-right: 8px;
  font-size: 20px;
  vertical-align: middle;
  line-height: 1;
}

.profile-fields-items {
  padding: 30px;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.profile-fields-item {
  margin-bottom: 20px;
}
.profile-fields-item:last-child {
  margin-bottom: 0;
}

.profile-fields-label {
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 10px;
  color: var(--text-lighter);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.profile-fields-value {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted-alt);
}
@media (min-width: 768px) {
  .profile-fields-value {
    font-size: 16px;
  }
}

.profile-projects-list .pagination-wrapper {
  margin-bottom: 10px;
}

.profile-project {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-top: 1px solid var(--border-content);
  transition: all var(--transition-fast) ease;
}
.profile-project, .profile-project:focus, .profile-project:visited {
  color: var(--text-muted);
}
.profile-project:hover, .profile-project:active {
  color: var(--text-muted);
  background: var(--bg-grey-fd);
}
.profile-project:last-child {
  border-bottom: 1px solid var(--border-content);
}

.profile-project-title {
  flex: 1;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .profile-project-title.profile-project-title--with-cols {
    flex: unset;
    width: 27%;
  }
}

.profile-project-col-1 {
  display: none;
  justify-content: flex-start;
  align-items: center;
  width: 15%;
}
@media (min-width: 768px) {
  .profile-project-col-1 {
    display: flex;
  }
}
@media (min-width: 1200px) {
  .profile-project-col-1 {
    display: flex;
    width: 10%;
  }
}

.profile-project-col-2 {
  display: none;
  justify-content: flex-start;
  align-items: center;
  width: 15%;
}
@media (min-width: 768px) {
  .profile-project-col-2 {
    display: flex;
  }
}

.profile-project-col-3 {
  display: none;
  justify-content: flex-start;
  align-items: center;
  width: 23%;
}
@media (min-width: 1200px) {
  .profile-project-col-3 {
    display: flex;
  }
}

.profile-project-status-col {
  display: flex;
  justify-content: flex-end;
  width: 40%;
}
@media (min-width: 768px) {
  .profile-project-status-col {
    width: 28%;
  }
}
@media (min-width: 1200px) {
  .profile-project-status-col {
    width: 140px;
  }
}
.profile-project-status-col .status-field-text {
  max-width: 140px;
  cursor: pointer;
}

.profile-projec-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  max-width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, black 50%, transparent 100%);
}

.profile-customform-list {
  border-bottom: 1px solid var(--border-content);
}

.profile-customform-list-item {
  position: relative;
}

.profile-customform-list-item-in {
  display: block;
  padding: 12px 0;
  transition: all var(--transition-fast) ease;
  border-top: 1px solid var(--border-content);
}

.profile-customform-list-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  word-wrap: break-word;
}

.profile-customform-list-item-col {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}
@media (min-width: 768px) {
  .profile-customform-list-item-col {
    text-align: right;
  }
}

.profile-customform-list-item-status {
  padding-right: 40px;
  font-size: 14px;
  font-weight: 400;
}
.profile-customform-list-item-status.incomplete {
  color: var(--text-lighter);
}
.profile-customform-list-item-status.completed {
  color: var(--color-primary);
  font-weight: 600;
}
@media (min-width: 768px) {
  .profile-customform-list-item-status {
    text-align: right;
  }
}

.profile-details-content-onboarding {
  margin-bottom: 60px;
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
}

.profile-details-onboarding {
  display: block;
  padding: 20px 0;
}
.profile-details-onboarding:nth-child(n+2) {
  border-top: 1px solid var(--border-content);
}
.profile-details-onboarding .display-label {
  font-weight: 500;
  color: var(--text-default);
}

.profile-onboarding-status {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-lighter);
}
.profile-onboarding-status .active {
  color: var(--color-primary);
}
.profile-onboarding-status .submitted {
  color: var(--text-muted);
}

.profile-onboarding-status-icon {
  position: relative;
  float: left;
  top: -2px;
  font-size: 16px;
}

.profile-onboarding-status-text {
  display: inline-block;
  text-transform: uppercase;
  padding: 1px 0 0 5px;
}

.import-csv-container {
  float: right;
  margin: 10px 20px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}
.import-csv-container .ion-upload {
  margin-right: 5px;
}

#contacts-dashboard-container .table-list-empty {
  display: block;
}

.contact-list-loading {
  display: block;
  width: 100%;
  position: absolute;
  top: 110px;
}

.contact-list-no-results {
  display: none;
  text-align: center;
  padding: 70px 40px;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-lighter);
  background: color-mix(in srgb, var(--black) 2%, transparent);
}

.contact-list-actions-dd-link {
  left: 5px;
  top: -14px;
}

.admin-emails-list-header-input {
  display: inline-block;
  float: right;
  width: auto;
  min-width: 200px;
  margin-right: 10px;
}

.admin-emails-list-wrapper {
  margin-bottom: 20px;
  padding: 0 15px;
  background: var(--bg-content);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--bg-shadow) 5%, transparent);
  border-radius: 6px;
}
@media (min-width: 480px) {
  .admin-emails-list-wrapper {
    padding: 15px 30px;
  }
}

.admin-emails-list-item {
  padding: 15px 0;
  border-bottom: 1px solid var(--border-content);
}
.admin-emails-list-item:last-child {
  border-bottom: none;
}

.admin-emails-list-item-delete {
  letter-spacing: 0.075em;
}
.admin-emails-list-item-delete, .admin-emails-list-item-delete:focus, .admin-emails-list-item-delete:visited {
  color: var(--color-danger);
}
.admin-emails-list-item-delete:hover, .admin-emails-list-item-delete:active {
  color: color-mix(in srgb, var(--color-danger) 95%, var(--black));
}

.admin-emails-list-show-all {
  display: inline-block;
  padding: 20px 0 10px;
  font-size: 14px;
  font-weight: 600;
}

.admin-dashboard-search {
  position: relative;
  margin-top: 40px;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .admin-dashboard-search {
    position: absolute;
    right: 60px;
    top: 18px;
    width: 480px;
    margin-top: 0px;
  }
}

.admin-dashboard-search-input {
  position: relative;
  padding-left: 30px;
  padding-right: 0;
}

.admin-dashboard-search-icon {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 9px;
  font-size: 28px;
  color: #ccc;
  cursor: pointer;
}
.admin-dashboard-search-icon:hover {
  color: var(--color-primary);
}
.admin-dashboard-search-input:focus + .admin-dashboard-search-icon {
  color: var(--color-primary);
}

.admin-dashboard-list {
  padding-bottom: 80px;
}
.admin-dashboard-list .pagination {
  display: block;
  text-align: right;
  font-size: 18px;
}

.admin-dashboard-list-empty {
  margin-top: 40px;
  padding: 60px 40px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-grey-f5);
  border-radius: 10px;
}
@media (min-width: 768px) {
  .admin-dashboard-list-empty {
    padding: 60px;
    font-size: 20px;
  }
}

.admin-dashboard-list-header {
  padding: 15px 15px 12px;
  font-weight: 600;
}

.admin-dashboard-list-item {
  position: relative;
  border-bottom: 1px solid var(--border-content);
}
.admin-dashboard-list-item:first-child {
  border-top: 1px solid var(--border-content);
}

.admin-dashboard-list-item-in {
  display: block;
  padding: 15px 15px 12px;
  transition: all var(--transition-normal) ease;
}
.admin-dashboard-list-item-in, .admin-dashboard-list-item-in:focus, .admin-dashboard-list-item-in:visited, .admin-dashboard-list-item-in:hover, .admin-dashboard-list-item-in:active {
  color: var(--text-muted);
}
.admin-dashboard-list-item-in:hover {
  color: var(--text-muted);
  background: var(--bg-content);
}

.admin-dashboard-list-item-copy {
  position: absolute;
  right: -10px;
  top: 0;
  padding: 10px;
  cursor: pointer;
  font-size: 20px;
  color: var(--color-primary);
}
.admin-dashboard-list-item-copy:hover {
  color: var(--color-primary);
}

.admin-dashboard-list-item-name {
  font-weight: 600;
}

.admin-dashboard-list-item-subscription {
  text-transform: capitalize;
}
.admin-dashboard-list-item-subscription.active {
  color: var(--color-primary);
  font-weight: 600;
}

.admin-dashboard-list-item-tax-plan.active {
  color: var(--color-primary);
  font-weight: 600;
}

.admin-user-container {
  padding: 40px 0 60px;
}

.admin-user-section {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  padding: 20px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--bg-shadow) 2%, transparent);
  border-radius: 6px;
}
@media (min-width: 480px) {
  .admin-user-section {
    padding: 40px;
  }
}

.admin-user-section-divider {
  width: 100%;
  max-width: 600px;
  margin-bottom: 60px;
  border-bottom: 1px solid var(--border-content);
}

.admin-user-section-tag {
  position: absolute;
  right: 40px;
  top: 40px;
}

.admin-section-title {
  margin: 0;
}

.admin-section-subtitle-link {
  display: inline-block;
  margin-bottom: 20px;
  margin-top: 5px;
  font-weight: 600;
  font-size: 14px;
}

.admin-section-subtitle-link-list {
  display: inline-block;
  margin-top: 2px;
  font-weight: 600;
}

.admin-section-copy-link {
  position: absolute;
  right: 20px;
  top: 20px;
}

.admin-user-info-header {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--border-content);
}
.admin-user-info-header.no-border {
  margin-bottom: 0;
  border-bottom: none;
}

.admin-user-identity-verification-group {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--border-content);
}

.admin-user-identity-verification-report-group {
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-user-info-group {
  margin-bottom: 10px;
  font-size: 16px;
}
.admin-user-info-group:last-child {
  margin-bottom: 0;
}

.admin-user-info-group-callout {
  padding: 20px;
  margin: 20px -20px;
  background: var(--bg-grey-fa);
  border-radius: 10px;
}

.admin-user-info-copier {
  display: inline;
  margin-left: 10px;
}

.admin-notes {
  word-break: break-word;
  white-space: pre-wrap;
}

.admin-user-info-sublabel {
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-lighter);
}

.admin-user-info-detail {
  font-size: 16px;
  color: var(--text-lighter);
}

.admin-user-tax-group {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--border-content);
}

.admin-user-tax-group-active {
  color: var(--color-primary);
}

.admin-user-info-controls {
  font-size: 16px;
}

.admin-subscription-charge {
  border-bottom: 1px solid var(--border-content);
  padding-bottom: 10px;
}
.admin-subscription-charge:last-child {
  border-bottom: none;
}

.admin-subscription-charge-date {
  margin-left: 10px;
  color: var(--text-lightest);
}

.admin-subscription-charge-actions-refund, .admin-subscription-charge-actions-refund:focus, .admin-subscription-charge-actions-refund:visited, .admin-subscription-charge-actions-refund:hover, .admin-subscription-charge-actions-refund:active {
  color: var(--color-danger);
}
.admin-subscription-charge-actions-refund.disabled {
  cursor: not-allowed;
  opacity: 0.8;
}
.admin-subscription-charge.charge-refunded .admin-subscription-charge-actions-refund {
  color: var(--text-lightest);
  cursor: not-allowed;
}

.admin-subscription-charge-actions-refunded {
  color: var(--text-lightest);
}

.admin-subscription-charge-actions-view-link {
  margin-right: 20px;
}

.admin-subscription-charge-actions-refund-cancel, .admin-subscription-charge-actions-refund-cancel:focus, .admin-subscription-charge-actions-refund-cancel:visited, .admin-subscription-charge-actions-refund-cancel:hover, .admin-subscription-charge-actions-refund-cancel:active {
  color: var(--text-lighter);
}

.admin-subscription-charge-refund-form {
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid var(--border-content);
}

.admin-subscription-charge-amount-refunded {
  margin-top: 5px;
  font-size: 12px;
  color: var(--color-danger);
}

.admin-delete-user-link {
  font-size: 14px;
  font-weight: 600;
}
.admin-delete-user-link, .admin-delete-user-link:focus, .admin-delete-user-link:visited, .admin-delete-user-link:hover, .admin-delete-user-link:active {
  color: var(--color-danger);
}

.admin-delete-user-copy {
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-lighter);
}

.admin-plans-table {
  width: 80%;
  margin-bottom: 60px;
  text-align: center;
  border-collapse: collapse;
}
.admin-plans-table thead th {
  text-align: center;
}
.admin-plans-table th {
  background: var(--bg-grey-e);
  white-space: nowrap;
}
.admin-plans-table th, .admin-plans-table td {
  border: 1px solid #ccc;
  padding: 2px 5px;
}
.admin-plans-table tr:hover {
  background: var(--bg-grey-e);
}

.financial-account-unrestricted {
  color: var(--color-primary);
  text-transform: capitalize;
}

.financial-account-restricted {
  color: var(--color-danger);
  text-transform: capitalize;
}

.risk-status-box {
  display: block;
  padding: 15px 20px;
  border: 1px solid transparent;
  font-weight: 400;
  cursor: pointer;
  border-radius: 4px;
  transition: all var(--transition-normal) ease;
}
.risk-status-box:hover, .risk-status-box.selected-risk-status {
  border-color: color-mix(in srgb, var(--black) 10%, transparent);
  background: var(--bg-input-hover);
}

.risk-status-label {
  font-size: 18px;
  font-weight: 600;
}

.risk-status-charges-disabled {
  color: var(--color-danger);
  font-weight: 600;
}

.profiles-index-top-section {
  position: relative;
  padding: 80px 0 180px;
  background: var(--bg-content);
  overflow: hidden;
  border-bottom: 1px solid var(--border-content-alt);
}
@media (min-width: 768px) {
  .profiles-index-top-section {
    padding: 120px 0 180px;
  }
}

.profiles-index-top-content {
  position: relative;
  z-index: 2;
}

.profiles-index-top-header {
  position: relative;
  z-index: 2;
  margin-bottom: 30px;
  font-size: 20px;
  font-weight: 400;
  text-shadow: 8px 8px 4px color-mix(in srgb, var(--black) 3%, transparent);
}
@media (min-width: 768px) {
  .profiles-index-top-header {
    font-size: 28px;
  }
}

.profiles-index-top-location {
  margin-top: 7px;
  font-size: 30px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .profiles-index-top-location {
    font-size: 50px;
  }
}

.profiles-index-top-details {
  padding: 12px 20px 4px;
  border-left: 3px solid color-mix(in srgb, var(--black) 5%, transparent);
}

.profiles-index-top-subheader {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in srgb, var(--black) 30%, transparent);
}
@media (min-width: 768px) {
  .profiles-index-top-subheader {
    font-size: 20px;
  }
}

.profiles-index-top-narrow-links {
  padding-bottom: 10px;
  color: color-mix(in srgb, var(--black) 30%, transparent);
  font-size: 14px;
  font-weight: 400;
}

.profiles-index-top-narrow-link {
  margin-left: 5px;
}

.profiles-index-top-bg {
  position: absolute;
  display: none;
  right: -25%;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@media (min-width: 768px) {
  .profiles-index-top-bg {
    display: block;
  }
}

.profiles-index-top-bg-img {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-content) center center no-repeat;
  background-size: cover;
  filter: grayscale(0.5);
}

.profiles-index-top-bg-gradient {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.3) 100%);
}

.profiles-index-list-section {
  margin-top: -140px;
}

.profiles-index-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.profiles-index-list-col {
  flex-grow: 1;
  width: 100%;
  padding: 60px 15px 30px;
}
@media (min-width: 480px) {
  .profiles-index-list-col {
    width: 50%;
  }
}
@media (min-width: 768px) {
  .profiles-index-list-col {
    width: 33.3333%;
  }
}

.profiles-index-list-item {
  position: relative;
  display: block;
  text-align: center;
  min-height: 185px;
  padding: 58px 30px 30px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  box-shadow: 0 2px 16px color-mix(in srgb, var(--black) 5%, transparent);
  border-radius: 4px;
  transition: all var(--transition-normal) ease;
}
.profiles-index-list-item:hover {
  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
  box-shadow: 0 3px 18px color-mix(in srgb, var(--black) 7%, transparent);
}

.profiles-index-list-item-avatar {
  position: absolute;
  left: 50%;
  margin-left: -37px;
  top: -37px;
}

.profiles-index-list-item-name {
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 18px;
}

.profiles-index-list-item-location {
  font-style: italic;
  color: var(--text-lighter);
}

.profiles-index-list-item-desc {
  margin-top: 15px;
  min-height: 34px;
  font-size: 12px;
  color: var(--text-muted-alt);
}
.profiles-index-list-item:hover .profiles-index-list-item-desc {
  color: var(--text-muted-alt);
}

.profiles-index-list-item-skills {
  position: relative;
  margin-top: 15px;
  padding: 0 20px;
  overflow: hidden;
  white-space: nowrap;
}
.profiles-index-list-item-skills::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 100%;
  content: "";
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--bg-content) 100%);
}

.profiles-index-list-item-skill {
  display: inline-block;
  margin-left: 2px;
  padding: 4px 10px;
  color: var(--border-content-alt);
  font-weight: 500;
  font-size: 10px;
  border: 1px solid var(--border-content);
  border-radius: 40px;
  background: var(--bg-content);
  transition: all var(--transition-normal) ease;
}
.profiles-index-list-item-skill:first-child {
  margin-left: 0;
}
.profiles-index-list-item:hover .profiles-index-list-item-skill {
  color: var(--text-lighter);
  border-color: var(--border-content-alt);
}

.profiles-index-pagination {
  display: flex;
  justify-content: center;
  margin: 30px 0 60px;
  text-align: center;
}
.profiles-index-pagination .pagination {
  border: 1px solid var(--border-content);
  border-radius: 4px;
  box-shadow: 0 1px 10px color-mix(in srgb, var(--black) 7%, transparent);
}
.profiles-index-pagination .pagination > span {
  display: table-cell;
  padding: 7px 7px 6px;
  font-size: 16px;
  font-weight: 600;
}
.profiles-index-pagination .pagination > span:first-child {
  padding-left: 15px;
}
.profiles-index-pagination .pagination > span:last-child {
  padding-right: 15px;
}

.profiles-index-related-section {
  position: relative;
  padding: 60px 0 0;
  border-top: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .profiles-index-related-section {
    padding: 60px 0 0 160px;
  }
}

.profiles-index-related-label {
  margin-bottom: 20px;
  color: color-mix(in srgb, var(--black) 30%, transparent);
  font-size: 18px;
}
@media (min-width: 768px) {
  .profiles-index-related-label {
    position: absolute;
    left: 0;
    top: 68px;
  }
}

.profiles-index-related-link {
  display: inline-block;
  float: left;
  padding: 10px 12px 8px;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  background: var(--bg-content);
  border: 1px solid var(--border-field);
  border-radius: 6px;
}
.profiles-index-related-link, .profiles-index-related-link:focus, .profiles-index-related-link:visited {
  color: var(--text-lighter);
  opacity: 0.8;
}
.profiles-index-related-link:hover, .profiles-index-related-link:active {
  opacity: 1;
}

.drawer-wrapper {
  display: none;
  position: fixed;
  z-index: var(--z-drawer);
  right: 0;
  top: 0;
  width: 100%;
  max-width: var(--drawer-width);
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background: var(--bg-panel);
  transition: all var(--transition-normal) ease;
  box-shadow: -1px 0 0 var(--border-content), -10px 0 20px color-mix(in srgb, var(--bg-shadow) 8%, transparent);
}
@media (min-width: 768px) {
  .drawer-wrapper {
    transform: translateX(100%);
  }
}
.drawer-wrapper.showing {
  opacity: 1;
  transform: translateX(0);
}
.drawer-wrapper.task-modal-wrapper {
  flex-direction: column;
  align-items: stretch;
}
.drawer-wrapper.task-modal-wrapper.showing {
  display: flex !important;
}
.drawer-wrapper.deal-drawer-wrapper {
  flex-direction: column;
  align-items: stretch;
}
.drawer-wrapper.deal-drawer-wrapper.showing {
  display: flex !important;
}
.drawer-wrapper.width-720 {
  max-width: 720px;
}
.drawer-wrapper.width-400 {
  max-width: 400px;
}
.drawer-wrapper.width-500 {
  max-width: 500px;
}

.confirmation-overlay,
.security-overlay {
  z-index: 1090;
}

.drawer-wrapper-close-toggle {
  position: fixed;
  display: block;
  z-index: var(--z-drawer);
  top: 100px;
  height: 100px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 41px 10px 40px 10px;
  background: var(--bg-panel);
  transform: translateX(var(--drawer-width));
  transition: all var(--transition-normal) ease;
}
.drawer-wrapper-close-toggle:hover {
  padding-right: 10px;
  padding-left: 12px;
  background: var(--bg-content);
}
.drawer-wrapper.showing ~ .drawer-wrapper-close-toggle {
  transform: translateX(0px);
}
.drawer-wrapper.width-720 ~ .drawer-wrapper-close-toggle {
  right: 721px;
}
.drawer-wrapper.width-400 ~ .drawer-wrapper-close-toggle {
  right: 401px;
}
.drawer-wrapper.width-500 ~ .drawer-wrapper-close-toggle {
  right: 501px;
}
@media (min-width: 768px) {
  .drawer-wrapper-close-toggle {
    left: 0;
    right: auto;
    border: 1px solid var(--border-content);
    border-left: 0;
    border-radius: 0 4px 4px 0;
  }
}
@media (min-width: 910px) {
  .drawer-wrapper-close-toggle {
    left: auto;
    right: calc(var(--drawer-width) + 1px);
    border: 1px solid var(--border-content);
    border-right: 0;
    box-shadow: var(--shadow-drawer);
    border-radius: 4px 0 0 4px;
  }
}

.drawer-wrapper-close-mobile-toggle {
  position: absolute;
  z-index: 10;
  right: 0;
  top: 0;
  padding: 21px 20px 18px 10px;
}

.drawer-wrapper-close-mobile-toggle-icon {
  display: inline-block;
  height: 13px;
  width: 13px;
  vertical-align: middle;
}
.drawer-wrapper-close-mobile-toggle-icon path {
  fill: var(--text-default);
}

.drawer-mobile-dropdown {
  position: absolute;
  z-index: 2;
  right: 50px;
  top: 11.5px;
  height: 40px;
}
@media (min-width: 768px) {
  .drawer-mobile-dropdown {
    display: none;
  }
}
.drawer-mobile-dropdown .dropdown-menu {
  top: 50px;
}

.drawer-mobile-dropdown-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
.drawer-mobile-dropdown-btn path {
  fill: var(--text-default);
}

.drawer-title-field {
  flex: 1;
  min-height: 30px;
  padding: 8px var(--ghost-input-side-width) 9px;
  margin-left: calc(var(--ghost-input-side-width) * -1);
  font-size: 18px;
  font-weight: 600;
  word-break: break-word;
  word-wrap: break-word;
  cursor: text;
}
.drawer-title-field:empty:before {
  padding-left: var(--ghost-input-side-width);
}
.drawer-title-field.input-smd {
  height: auto;
  min-height: 40px;
  padding: 5px var(--ghost-input-side-width) 4px;
}
.drawer-title-field.input-md {
  height: auto;
  min-height: 40px;
  padding: 5px var(--ghost-input-side-width) 4px;
}
@media (min-width: 768px) {
  .drawer-title-field {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 22px;
    transition: background var(--transition-fast) ease;
    border-radius: 4px;
  }
  .drawer-title-field:hover:not(.content-editable-input-disabled) {
    background: var(--bg-input-hover);
  }
  .drawer-title-field.input-md {
    height: auto;
    min-height: 40px;
    padding: 5px var(--ghost-input-side-width) 4px;
  }
}

.drawer-section {
  padding: 30px 20px 40px;
}
@media (min-width: 768px) {
  .drawer-section {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.drawer-section-add-existing-popup {
  position: absolute;
  z-index: 10;
  right: 0;
  top: 40px;
  padding: 20px;
  width: 400px;
  max-width: 100%;
  margin-bottom: 20px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  box-shadow: color-mix(in srgb, var(--black) 12%, transparent) 0px 4px 14px;
  border-radius: 6px;
}

.drawer-section-add-existing-form {
  display: flex;
  align-items: center;
  gap: 20px;
}

.drawer-status-popup-menu.field-popup-menu {
  left: -10px;
  min-width: 150px;
  width: auto;
  max-width: none;
  padding: 10px;
  z-index: calc(var(--z-drawer) + 1);
  max-height: calc(100% - 100px);
  overflow-y: auto;
}
.drawer-status-popup-menu.field-popup-menu.task-list-item-popup-menu {
  left: -10px;
}
.drawer-status-popup-menu.field-popup-menu.subtask-status-dropdown {
  max-width: 250px;
}
.drawer-status-popup-menu.field-popup-menu .status-field-label.status-field-sm {
  min-width: 150px;
}

.drawer-header-action-more {
  position: absolute;
  z-index: 2;
  right: 40px;
  top: 40px;
}
@media (max-width: 767px) {
  .drawer-header-action-more {
    right: 50px;
    top: 2px;
  }
}

@media (max-width: 767px) {
  .drawer-header-action-more-btn.btn-dropdown-dots {
    top: 10px;
    padding: 0;
    max-width: none;
    width: 40px;
    justify-content: center;
    border: none !important;
    box-shadow: none !important;
  }
}
@media (max-width: 767px) {
  .drawer-header-dropdown .drawer-header-action-more-btn.btn-dropdown-dots {
    top: -16px;
  }
}

.task-modal-field-popup-menu.field-popup-menu {
  padding: 20px;
  width: 230px;
  max-width: none;
}
@media (min-width: 768px) {
  .task-modal-field-popup-menu.field-popup-menu {
    left: auto;
  }
}

.task-modal-field-popup-menu.task-modal-field-popup-menu-dates {
  right: 0;
  padding: 10px;
  margin-top: 13px;
  width: 340px;
}

.task-modal-field-popup-menu-dates-inputs {
  display: flex;
  gap: 10px;
  padding: 20px;
}

.drawer-side-panel {
  display: none;
  width: 275px;
  background-color: var(--bg-content-alt);
  padding: 30px 30px 0;
  border-left: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .drawer-side-panel {
    display: block;
  }
}

.drawer-side-panel-content .drawer-side-field-item {
  margin-bottom: 15px;
}
@media (min-width: 768px) {
  .drawer-side-panel-content .drawer-side-field-item {
    width: 100%;
  }
}
.drawer-side-panel-content .ghost-form-select.dropdown-sm .dropdown-contained .Select__value-container,
.drawer-side-panel-content .ghost-form-select.dropdown-sm .dropdown-contained .Select__placeholder {
  font-size: 14px;
}
.drawer-side-panel-content .ghost-form-datepicker .SingleDatePicker .DateInput_input {
  font-size: 14px;
}

.drawer-side-status {
  position: relative;
  padding-right: 20px;
}
.drawer-side-status .status-field-label {
  min-width: 150px;
  padding-left: 30px;
  padding-right: 30px;
  cursor: pointer;
}
.drawer-status-popup-menu .drawer-side-status .status-field-label {
  margin-bottom: 5px;
  width: auto;
}
.drawer-status-popup-menu .drawer-side-status .status-field-label:last-child {
  margin-bottom: 0;
}
.drawer-side-status .drawer-status-popup-menu .status-field-label {
  margin-bottom: 10px;
  width: 100%;
  padding-right: 17px;
}
.drawer-side-status .drawer-status-popup-menu .status-field-label:last-child {
  margin-bottom: 0;
}
.drawer-side-status .status-field-dot {
  top: 10px;
  height: 10px;
  width: 10px;
}
.drawer-side-status .status-field-text {
  cursor: pointer;
}

.drawer-side-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
  margin-bottom: 5px;
}

.drawer-side-label-icon {
  position: relative;
  top: 2px;
  width: 12px;
  height: auto;
  margin-left: 5px;
}

.drawer-side-field-item {
  position: relative;
  width: 100%;
  padding-right: 0 !important;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 400;
}
@media (min-width: 768px) {
  .drawer-side-field-item {
    width: 50%;
    padding-right: 20px;
  }
}
.drawer-side-field-item.drawer-side-field-item--editing {
  display: none;
}
.drawer-side-field-item.drawer-side-field-item--show-focus:focus {
  color: var(--text-default);
  background-color: var(--bg-content);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  border-radius: 4px;
}
.drawer-side-field-item.ghost-form-control, .drawer-side-field-item.ghost-form-display {
  background-color: var(--bg-content);
}
.drawer-side-field-item .ghost-form-control,
.drawer-side-field-item .ghost-form-display {
  font-size: 14px;
  font-weight: 400;
}
.list-grid-item-cell .drawer-side-field-item {
  width: 100%;
  top: 1px;
  margin-bottom: 0;
  margin-left: calc(var(--ghost-input-side-width) * -1);
}
.list-grid-item-cell .drawer-side-field-item.drawer-side-tags {
  top: -0.5px;
}
.list-grid-item-cell .drawer-side-field-item .drawer-side-field-link {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  height: 30px;
  font-size: 14px;
  overflow: hidden;
}
.custom-field-value-wrapper.custom-field-full-size-with-value .drawer-side-field-item {
  margin-left: calc(var(--ghost-input-side-width) * -1);
}

.drawer-side-field-default {
  position: relative;
  padding-left: 20px;
}
.drawer-side-field-default.unauthorized {
  cursor: not-allowed;
}
.drawer-side-field-default.unauthorized .ghost-input-wrapper {
  pointer-events: none;
  background-color: transparent;
}

.drawer-side-field-value {
  display: flex;
  height: 30px;
  min-height: auto;
  padding: 5.5px var(--ghost-input-side-width);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-side-field-link {
  display: flex;
  height: 30px;
  min-height: auto;
  padding: 5.5px 7px;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 4px;
}
.drawer-side-field-link.empty {
  color: var(--text-lighter);
}
.drawer-side-field-link.fit-content {
  height: auto;
  min-height: 30px;
  overflow: visible;
  white-space: normal;
}
.drawer-side-field-link:hover {
  background: var(--bg-input-hover);
}
.drawer-side-field-link.drawer-side-field-link--focused, .page-properties-section-item-editable-input:focus .drawer-side-field-link {
  background-color: var(--bg-content);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.drawer-side-field-link.ghost-form-pull-left {
  margin-left: calc(var(--ghost-input-side-width) * -1);
}
.task-list .drawer-side-field-link {
  padding-top: 4px;
}
.drawer-side-field-item--disabled .drawer-side-field-link {
  cursor: not-allowed;
}
.drawer-side-field-link .content-spinner-inline {
  position: absolute;
  top: 13px;
  left: 10px;
}

.drawer-side-field-item--disabled {
  pointer-events: auto;
  cursor: not-allowed;
}
.drawer-side-field-item--disabled .ghost-form-control, .drawer-side-field-item--disabled .ghost-form-display {
  pointer-events: none;
}

.drawer-side-field-contact {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 10px;
  height: 30px;
}

.drawer-side-field-contact-link {
  padding-right: 5px;
}
.drawer-side-field-contact-link, .drawer-side-field-contact-link:focus, .drawer-side-field-contact-link:visited {
  color: var(--text-default);
}
.drawer-side-field-contact-link:hover, .drawer-side-field-contact-link:active {
  color: var(--text-default);
  text-decoration: underline;
}

.drawer-side-field-contact-copier {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

.drawer-side-field-contact-icon {
  width: 16px;
  height: auto;
}
.drawer-side-field-contact-icon.drawer-side-field-contact-icon--phone {
  position: relative;
  top: 0.5px;
  width: 14px;
}
.drawer-side-field-contact-icon path {
  fill: var(--text-muted);
}
.drawer-side-field-contact-copier:hover .drawer-side-field-contact-icon path {
  fill: var(--text-default);
}

.drawer-side-tags-list {
  display: flex;
  justify-content: flex-start;
  margin-top: 6px;
  min-height: 36px;
  flex-wrap: wrap;
  gap: 10px 5px;
  cursor: pointer;
  position: relative;
  left: -6px;
  padding: 6px 6px 6px 6px;
}
.drawer-side-tags-list:hover {
  background-color: var(--bg-grey-f8);
  border-radius: 6px;
}

.drawer-side-tags {
  position: relative;
}
.list-grid-item-cell .drawer-side-tags {
  mask-image: linear-gradient(to right, black 50%, transparent 100%);
}
.drawer-side-tags a {
  color: var(--text-lighter);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4em;
}

.drawer-side-tags-icon {
  position: absolute;
  top: 8px;
  left: 0px;
  width: 17px;
  height: auto;
}
.drawer-side-tags-icon path {
  fill: var(--text-lighter);
}

.drawer-side-assigned {
  position: relative;
  height: 30px;
  padding-left: 30px;
}

.drawer-side-assigned-user-avatar {
  position: absolute;
  left: -1px;
  top: 5px;
}

.drawer-side-unassigned-icon {
  position: absolute;
  left: -1px;
  top: 5px;
  width: 21px;
  height: auto;
  padding: 3px;
}
.drawer-side-unassigned-icon path {
  fill: var(--text-lighter);
}

.drawer-side-date {
  position: relative;
  padding-left: 30px;
}
.drawer-side-date .ghost-input-wrapper {
  z-index: 5;
}

.drawer-side-date-icon {
  position: absolute;
  top: 7px;
  left: 1px;
  width: 15px;
  height: auto;
}
.drawer-side-date-icon path {
  fill: var(--text-lighter);
}

.drawer-side-revenue-distribution-icon {
  position: absolute;
  top: 7px;
  left: 1px;
  width: 15px;
  height: auto;
}
.drawer-side-revenue-distribution-icon path {
  fill: var(--text-lighter);
}

.drawer-side-billable-icon {
  position: absolute;
  top: 7px;
  left: -1px;
  width: 16px;
  height: auto;
}
.drawer-side-billable-icon path {
  fill: var(--text-lighter);
}

.drawer-side-value-icon {
  position: absolute;
  top: 9px;
  left: 0px;
  width: 16px;
  height: auto;
}
.drawer-side-value-icon path {
  fill: var(--text-lighter);
}

.drawer-side-probability-icon {
  position: absolute;
  top: 8px;
  left: 0px;
  width: 15px;
  height: auto;
}
.drawer-side-probability-icon path {
  fill: var(--text-lighter);
}

.drawer-side-services-icon {
  position: absolute;
  top: 7.5px;
  left: 0px;
  width: 16px;
  height: auto;
}
.drawer-side-services-icon path {
  fill: var(--text-lighter);
}

.drawer-side-created-by-icon {
  position: absolute;
  top: 6px;
  left: 0px;
}

.drawer-side-task-list-icon {
  position: absolute;
  left: 0px;
  top: 8px;
  width: 14px;
  height: auto;
}
.drawer-side-task-list-icon path {
  fill: var(--text-lighter);
}

.drawer-side-task-list-spinner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 30px;
}

.task-batch-update-drawer {
  background-color: var(--bg-grey-fc);
  padding: 30px 30px 0;
  height: 100%;
}

.modal-share-body {
  padding: 40px 40px;
  font-size: 18px;
  text-align: left;
}

.modal-share-overlay-content {
  max-width: 600px;
  margin: 36px auto;
}
@media (min-width: 768px) {
  .modal-share-overlay-content {
    margin: 0 auto 20px;
  }
}

.modal-share-body-copy {
  padding: 10px 0;
  color: var(--text-muted);
  text-align: center;
  font-size: 16px;
  font-weight: 500;
}
@media (min-width: 768px) {
  .modal-share-body-copy {
    padding: 10px 60px;
    font-size: 14px;
  }
}

.modal-share-title {
  color: var(--color-primary);
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  padding: 0 30px;
}
@media (min-width: 768px) {
  .modal-share-title {
    padding: 0;
    font-size: 25px;
  }
}

@media (min-width: 768px) {
  .modal-share-input-inline {
    width: 389px;
  }
}

.modal-share-referral-input {
  padding: 15px;
  border-radius: 4px 4px 0 0;
  height: 50px;
  vertical-align: middle;
  font-size: 14px;
}
@media (min-width: 468px) {
  .modal-share-referral-input {
    border-right: 0;
    border-radius: 4px 0 0 4px;
    width: 75%;
  }
}

@media (min-width: 768px) {
  .modal-share-copy-link-container .modal-share-referral-input {
    width: 87%;
  }
}

.modal-share-referral-btn {
  border-radius: 0 0 4px 4px;
  height: 50px;
  font-size: 16px;
  padding: 15px;
  line-height: 19px;
  width: 100%;
  white-space: nowrap;
  font-weight: 600;
}
@media (min-width: 468px) {
  .modal-share-referral-btn {
    border-left: 0;
    border-radius: 0 4px 4px 0;
    width: 25%;
  }
}

@media (min-width: 768px) {
  .modal-share-copy-link-container .modal-share-referral-btn {
    width: 13%;
  }
}

.modal-share-copy-link-btn, .modal-share-copy-link-btn:active, .modal-share-copy-link-btn:focus, .modal-share-copy-link-btn:visited {
  color: var(--bg-content);
  background-color: var(--grey-6);
  border-color: var(--grey-6);
  background-image: linear-gradient(to bottom, var(--grey-6) 0%, color-mix(in srgb, var(--grey-6) 98%, var(--black)) 100%);
}
.modal-share-copy-link-btn:hover {
  color: var(--bg-content);
  background-color: color-mix(in srgb, var(--grey-6) 98%, transparent);
  border-color: color-mix(in srgb, var(--grey-6) 98%, transparent);
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--grey-6) 98%, transparent) 0%, var(--grey-6) 100%);
}
.modal-share-copy-link-btn:focus {
  outline: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--grey-6) 15%, transparent);
}
.modal-share-copy-link-btn:active, .modal-share-copy-link-btn:active:hover, .modal-share-copy-link-btn:active:focus {
  background-color: color-mix(in srgb, var(--grey-6) 98%, transparent);
  border-color: color-mix(in srgb, var(--grey-6) 98%, transparent);
  box-shadow: inset 0 2px 5px color-mix(in srgb, var(--black) 10%, transparent);
}
.modal-share-copy-link-btn.disabled, .modal-share-copy-link-btn[disabled] {
  opacity: 0.5;
}
.modal-share-copy-link-btn.disabled, .modal-share-copy-link-btn.disabled:focus, .modal-share-copy-link-btn.disabled:hover, .modal-share-copy-link-btn[disabled], .modal-share-copy-link-btn[disabled]:focus, .modal-share-copy-link-btn[disabled]:hover {
  color: var(--bg-content);
  background-color: color-mix(in srgb, var(--grey-6) 90%, transparent);
  border-color: color-mix(in srgb, var(--grey-6) 90%, transparent);
  background-image: none;
}

.modal-share-copy-link-btn > i {
  vertical-align: middle;
  margin-right: 10px;
  display: none;
}
@media (min-width: 768px) {
  .modal-share-copy-link-btn > i {
    display: block;
  }
}

.modal-share-copy-link-btn > span {
  display: block;
}
@media (min-width: 768px) {
  .modal-share-copy-link-btn > span {
    display: none;
  }
}

#modal-share-copy-link-input {
  cursor: pointer;
}
#modal-share-copy-link-input:hover, #modal-share-copy-link-input:focus {
  border-color: var(--text-lighter);
}

.modal-share-input-label {
  font-size: 16px;
  font-weight: 600;
  text-align: left;
}

.modal-share-copy-link-container {
  margin: 15px 0 40px;
}

.modal-share-invite-link-container {
  margin: 15px 0 40px;
}
@media (min-width: 768px) {
  .modal-share-invite-link-container {
    margin: 15px 0 30px;
  }
}

@media (min-width: 768px) {
  .modal-share-flex-box {
    display: flex;
    justify-content: space-between;
  }
}

.modal-share-options {
  max-width: 180px;
}

.modal-share-subtext {
  margin-top: 40px;
  font-size: 14px;
  font-weight: 600;
}

.modal-share-links {
  margin-top: 15px;
}
.modal-share-links ul.share-buttons {
  list-style: none;
  margin: 0;
  padding: 0;
}
.modal-share-links ul.share-buttons li {
  display: inline;
}
.modal-share-links .copy-to-clipboard-link-checkmark,
.modal-share-links .copy-to-clipboard-link-icon {
  display: none;
}

.modal-share-link-item {
  display: inline-block;
}

.modal-share-link-icon {
  position: relative;
  font-size: 27px;
  height: 50px;
  width: 50px;
  border-radius: 4px;
  padding: 4px;
  text-align: center;
  background: #e8f7ff;
}
.modal-share-link-icon .ion-social-twitter, .modal-share-link-icon .profile-link-icon.twitter {
  color: #1ca1f1;
}
.modal-share-link-icon .ion-social-facebook {
  color: #1a78f1;
}
.modal-share-link-icon.facebook {
  background: #e8f1fe;
}
.modal-share-link-icon.linkedin {
  background: #e2f1ff;
}

.modal-share-link-svg {
  position: relative;
}

.modal-share-link-label {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.modal-share-scorecard {
  margin: 40px 0;
  text-align: center;
  background-color: var(--bg-content);
}
@media (min-width: 768px) {
  .modal-share-scorecard {
    margin: 40px 0 30px;
  }
}

.modal-share-scorecard-row {
  padding: 28px 0;
}
@media (min-width: 768px) {
  .modal-share-scorecard-row {
    padding: 17px 0;
  }
}

.modal-share-scorecard-subscribed {
  color: var(--color-primary-dark);
}

.modal-share-scorecard-free-months-credit {
  color: var(--color-primary);
}

.modal-share-scorecard-total {
  font-size: 25px;
  font-weight: 500;
}

.modal-share-scorecard-label {
  font-size: 14px;
  font-weight: 500;
  margin: 7px auto;
  line-height: 120%;
}

.modal-share-scorecard-invite-sent .modal-share-scorecard-total {
  color: var(--text-default);
}

.modal-share-scorecard-invite-sent .modal-share-scorecard-label {
  color: var(--text-muted);
}

.modal-share-referrals-list {
  background: var(--bg-content);
  text-align: left;
}

.modal-share-referrals-list-empty {
  margin-top: 50px;
  margin-bottom: 60px;
  text-align: center;
}

.modal-share-referrals-list-empty-text {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .modal-share-referrals-list-empty-text {
    font-size: 18px;
  }
}

.modal-share-referrals-list-item {
  position: relative;
  padding: 20px 0 20px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border-content);
  display: flex;
  align-items: left;
  flex-direction: column;
}
@media (min-width: 600px) {
  .modal-share-referrals-list-item {
    padding: 28px 0 28px 0;
    flex-direction: row;
    align-items: center;
  }
}

.modal-share-referrals-list-item-user {
  position: relative;
  font-weight: 400;
}

.modal-share-referrals-list-item-avatar.avatar {
  display: inline;
  margin-right: 16px;
}

.modal-share-referrals-list-item-send-reminder {
  margin: 5px 0;
}

@media (min-width: 600px) {
  .modal-share-referrals-list-item-status {
    text-align: right;
  }
}

.modal-share-referrals-list-item-status-tag {
  font-weight: 600;
  border-radius: 20px;
  font-size: 12px;
  text-align: center;
  padding: 7px 13px;
}
.modal-share-referrals-list-item-status-tag.signed_up {
  color: #4ec2db;
  background-color: #ecf9fc;
}
.modal-share-referrals-list-item-status-tag.subscribed_to_a_plan {
  color: #5cc298;
  background-color: #eef9f5;
}
.modal-share-referrals-list-item-status-tag.invited {
  color: #67a3f0;
  background-color: #eef5fe;
}
.modal-share-referrals-list-item-status-tag.trial_started {
  color: #676bbd;
  background-color: #eaeafb;
}

.modal-share-footer {
  margin-top: 60px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  border-radius: 5px;
  border: 1px solid #ecf1ec;
  background: #fafcfa;
  width: 100%;
  justify-content: space-between;
  background-size: contain;
  background-image: url("referral/footer-bg.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .modal-share-footer {
    background-image: url("referral/footer-bg@2x.png");
  }
}
@media (min-width: 768px) {
  .modal-share-footer {
    margin-top: 0;
  }
}

.modal-share-footer-affiliate-copy {
  color: var(--color-primary-dark);
  font-size: 17px;
  font-weight: 600;
  padding-top: 21px;
  padding-bottom: 21px;
  max-width: 186px;
}
@media (min-width: 768px) {
  .modal-share-footer-affiliate-copy {
    font-size: 20px;
    padding-top: 32px;
    padding-bottom: 30px;
    max-width: none;
  }
}

.modal-share-footer-affiliate-button {
  padding-top: 25px;
  padding-bottom: 25px;
}
@media (min-width: 768px) {
  .modal-share-footer-affiliate-button {
    padding-top: 26px;
  }
}

.modal-share-footer-affiliate-link {
  display: block;
  text-align: left;
}

.modal-share-footer-feedback {
  display: flex;
  height: 46px;
  align-items: center;
}
@media (min-width: 768px) {
  .modal-share-footer-feedback {
    justify-content: flex-end;
  }
}

.modal-share-footer-feedback-icon {
  color: var(--color-primary);
  font-size: 20px;
  margin-right: 10px;
}

.onboarding-invite-contact-notice {
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-lighter);
}

.modal-accept-countries-content {
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: normal;
}

.modal-accept-countries-accept-group {
  position: relative;
  text-align: left;
  margin-top: 40px;
  padding-left: 30px;
  color: var(--text-muted-alt);
  user-select: none;
}

.modal-accept-countries-accept-checkbox {
  position: absolute;
  left: 0;
  top: 0;
}

.modal-accept-countries-accept-label {
  cursor: pointer;
}

.modal-sample-client-notice {
  margin-top: -30px;
  margin-bottom: 40px;
  width: 100%;
  padding: 12px 15px 13px;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-muted);
  cursor: default;
  background-color: var(--bg-grey-f8);
  border: 1px solid color-mix(in srgb, var(--black) 8%, transparent);
  border-radius: 4px;
}
.modal-sample-client-notice.welcome-notice {
  margin-top: 0;
}

.modal-new-project-copy {
  margin-bottom: 30px;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-muted-alt);
}

.modal-new-project-invoice {
  font-size: 16px;
}

.modal-new-project-invoice-link {
  text-decoration: underline;
  color: var(--text-muted);
}
.modal-new-project-invoice-link:focus, .modal-new-project-invoice-link:visited {
  color: var(--text-muted);
}
.modal-new-project-invoice-link:hover {
  color: var(--text-muted-alt);
  text-decoration: underline;
}

.modal-new-project-empty {
  display: none;
  text-align: center;
}

.modal-new-project-empty-notice {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 400;
}

.modal-completion-date-copy {
  position: relative;
  padding: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted-alt);
  background: var(--bg-grey-fc);
  border-bottom: 1px solid var(--border-content);
}

.modal-mark-complete-notice {
  padding: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}

.modal-complete-project-review {
  padding: 0 40px 20px;
}

.modal-complete-project-review-title {
  margin-bottom: 40px;
  padding: 15px 10px 13px;
  text-align: center;
  background: var(--bg-grey-fa);
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
}

.modal-complete-project-review-title-line1 {
  color: var(--text-lighter);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.modal-complete-project-review-title-line2 {
  font-size: 12px;
  color: var(--text-lighter);
}

.modal-about-payment-basic-info {
  margin-bottom: 40px;
  color: var(--text-muted);
  font-size: 16px;
}

.modal-onboarding-assignment-form-content {
  padding: 20px 20px;
  line-height: 46px;
}
@media (min-width: 480px) {
  .modal-onboarding-assignment-form-content {
    padding: 40px 40px;
  }
}
.modal-onboarding-assignment-form-content .Select-placeholder {
  line-height: inherit;
}
.modal-onboarding-assignment-form-content .Select-option {
  padding: 0 10px;
}
.modal-onboarding-assignment-form-content .form-label.with-checkbox {
  line-height: 2;
}

.modal-confirm-onboarding-delete-copy {
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: normal;
  word-break: break-word;
}

.modal-invite-body {
  font-size: 16px;
  line-height: 1.5;
}

.modal-link-bank-dd {
  display: inline-block;
  margin-bottom: -9px;
  line-height: 45px;
  font-weight: 600;
  font-size: 18px;
}

.modal-link-bank-top-copy {
  position: relative;
  text-align: center;
  padding: 15px 15px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted-alt);
  background: var(--bg-grey-fc);
  border-bottom: 1px solid var(--border-semi-transparent-alt);
}

.modal-verify-deposits-body {
  padding: 0;
}

.modal-verify-deposits-bank-info {
  padding: 20px 15px 15px;
  background-color: var(--bg-grey-fc);
  border-bottom: 1px solid var(--border-semi-transparent-alt);
}

.modal-verify-deposits-bank-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.modal-verify-deposits-account-label {
  margin-top: 7px;
  margin-bottom: 7px;
  font-size: 16px;
  font-weight: 400;
}

.modal-verify-deposits-account-num {
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 1px;
  color: color-mix(in srgb, var(--black) 20%, transparent);
}

.modal-verify-deposits-bank-amounts {
  padding: 30px 30px 0;
}
.modal-verify-deposits-bank-amounts .form-control {
  font-weight: 600;
}

.modal-verify-deposits-btns {
  padding: 0 30px 30px;
}

.modal-account-frozen {
  padding: 40px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-muted-alt);
  text-align: center;
}
@media (min-width: 480px) {
  .modal-account-frozen {
    padding: 60px;
  }
}

.modal-account-frozen-icon {
  width: 100%;
  max-width: 240px;
  padding-bottom: 60%;
  margin: 0 auto 40px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("bonsai-cash/account-frozen.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .modal-account-frozen-icon {
    background-image: url("bonsai-cash/account-frozen@2x.png");
  }
}

.modal-account-frozen-title {
  margin-bottom: 20px;
  color: var(--text-default);
  font-weight: 600;
  font-size: 18px;
}

.modal-account-frozen-copy {
  margin-bottom: 40px;
  font-size: 14px;
  text-align: center;
}

.new-onboard-modal-steps {
  position: relative;
  padding-top: 20px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .new-onboard-modal-steps {
    padding-top: 0;
  }
}

.new-onboard-modal-step {
  position: relative;
  width: 100%;
  height: 100px;
  text-align: left;
}
@media (min-width: 768px) {
  .new-onboard-modal-step {
    width: auto;
    height: auto;
    padding-top: 20px;
    text-align: center;
  }
}

.new-onboard-modal-step-label {
  position: relative;
  z-index: 2;
  padding: 34px 0 0 120px;
  font-size: 20px;
  font-weight: 400;
}
@media (min-width: 768px) {
  .new-onboard-modal-step-label {
    margin-bottom: 10px;
    padding: 0;
    font-size: 18px;
  }
}

.new-onboard-modal-step-img {
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 40px;
  width: 60px;
  height: 60px;
  max-width: none;
}
@media (min-width: 768px) {
  .new-onboard-modal-step-img {
    position: relative;
    top: auto;
    left: auto;
    max-width: 130px;
    width: 100%;
    height: auto;
  }
}

.new-onboard-modal-step-arrow-1 {
  position: absolute;
  display: none;
  left: 33.3333%;
  top: 50%;
  margin-top: 15px;
  margin-left: -10px;
  text-align: center;
  width: 20px;
  color: var(--text-lighter);
}
@media (min-width: 768px) {
  .new-onboard-modal-step-arrow-1 {
    display: block;
  }
}

.new-onboard-modal-step-arrow-2 {
  position: absolute;
  display: none;
  left: 66.6666%;
  top: 50%;
  margin-top: 15px;
  margin-left: -10px;
  text-align: center;
  width: 20px;
  color: var(--text-lighter);
}
@media (min-width: 768px) {
  .new-onboard-modal-step-arrow-2 {
    display: block;
  }
}

.new-onboard-modal-text {
  max-width: 500px;
  margin: auto;
  padding: 10px 0 30px;
  color: var(--text-muted);
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}

.modal-new-agreement-template-dropdown.dropdown-contained .Select__menu-list {
  max-height: 284px;
}

.modal-custom-paragraph-notice {
  position: relative;
  z-index: 2;
  padding: 20px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: var(--text-muted-alt);
  border-bottom: 1px solid var(--border-semi-transparent-alt);
}
@media (min-width: 480px) {
  .modal-custom-paragraph-notice {
    padding: 20px 40px;
  }
}

.modal-custom-paragraph-form-content {
  font-family: "Georgia", serif;
}
.modal-custom-paragraph-form-content .sub-section-title {
  font-size: 18px;
}
.modal-custom-paragraph-form-content .new-form-control.text-area {
  margin-top: 0;
  font-size: 16px;
}

.modal-custom-paragraph-legal-note {
  line-height: 1;
  padding: 30px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text-lightest);
}

.modal-create-account-body .new-form-group {
  margin-bottom: 30px;
}

.modal-create-account-login {
  margin-top: 5px;
  font-size: 14px;
}
.modal-create-account-login a {
  font-weight: 600;
}

.modal-login-body {
  padding: 40px 40px;
}

.modal-login-reset-link {
  float: right;
  display: inline-block;
  font-weight: 600;
  color: var(--text-muted-alt);
}
.modal-login-reset-link:focus, .modal-login-reset-link:visited {
  color: var(--text-muted-alt);
}
.modal-login-reset-link:hover {
  color: var(--text-muted);
}

.modal-connect-bonsai-payments-body {
  position: relative;
  padding: 40px 20px 20px;
  border-radius: 6px 6px 0 0;
  margin-bottom: 20px;
}

.modal-connect-bonsai-payments-img {
  position: absolute;
  bottom: -67px;
  right: -36px;
  width: 170px;
  height: 170px;
  background: transparent bottom right no-repeat;
  background-size: contain;
  background-image: url("leaves/leaf-07.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .modal-connect-bonsai-payments-img {
    background-image: url("leaves/leaf-07@2x.png");
  }
}

.modal-connect-bonsai-payments-title {
  margin-bottom: 30px;
}

.modal-connect-bonsai-payments-text {
  margin-top: 30px;
  font-size: 16px;
  color: var(--text-muted);
  text-align: center;
}

.modal-connect-bonsai-payments-cta {
  width: 250px;
  margin: 40px auto 20px;
}

.modal-connect-bonsai-payments-footer {
  position: relative;
  text-align: center;
  margin-top: 20px;
  padding-bottom: 0;
}

.modal-revert-sent-body,
.modal-revert-signature-body {
  padding: 40px 40px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}

.modal-revert-sent-warning,
.modal-revert-signature-warning {
  width: 100%;
  margin-bottom: 30px;
  padding: 0px 5px 15px;
  text-align: center;
  color: var(--text-lighter);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--border-content-alt);
}

.modal-revert-sent-button,
.modal-revert-signature-button {
  margin-top: 30px;
}

.modal-new-contact-checkbox-label {
  font-size: 18px;
}

.modal-new-contact-no-onboardings-notice {
  display: none;
  margin-top: 20px;
  padding: 2px 0 0 20px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-muted);
  border-left: 4px solid #e06666;
}

.modal-new-contact-no-onboardings-notice-link {
  text-transform: uppercase;
  letter-spacing: 0.075em;
  font-size: 14px;
}
.modal-new-contact-no-onboardings-notice-link, .modal-new-contact-no-onboardings-notice-link:focus, .modal-new-contact-no-onboardings-notice-link:visited {
  color: var(--text-muted);
}
.modal-new-contact-no-onboardings-notice-link:hover, .modal-new-contact-no-onboardings-notice-link:active {
  color: var(--text-muted-alt);
}

.modal-new-contact-onboarding-template-wrapper {
  margin-top: 30px;
}

#modal-new-contact form div[data-new-contact-onboarding],
#modal-new-contact form div[data-new-contact-onboarding-empty-content],
#modal-new-contact form div[data-new-contact-onboarding-select-content] {
  display: none;
}
#modal-new-contact form.has-onboarding div[data-new-contact-onboarding] {
  display: block;
}
#modal-new-contact form.has-templates div[data-new-contact-onboarding-select-content] {
  display: block;
}
#modal-new-contact form.no-templates div[data-new-contact-onboarding-empty-content] {
  display: block;
}

.modal-new-payout-form-content {
  font-size: 18px;
}
.modal-new-payout-form-content .form-group {
  margin-bottom: 40px;
}
.modal-new-payout-form-content .dropdown-label {
  line-height: 45px;
  font-size: 18px;
}

.modal-new-payout-form-back-step {
  position: relative;
  display: block;
  text-align: center;
  padding: 9px 15px 6px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-lighter);
  text-indent: -5px;
  border-bottom: 1px solid var(--border-content);
}
.modal-new-payout-form-back-step:focus, .modal-new-payout-form-back-step:visited {
  color: var(--text-lighter);
}
.modal-new-payout-form-back-step:hover, .modal-new-payout-form-back-step:active {
  color: var(--text-lighter);
}

.modal-new-payout-vendor-prefill {
  margin-bottom: 20px;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
}

.modal-payout-payment-amts.form-control {
  font-weight: 600;
}

.modal-new-payout-currency-select {
  top: 1px;
  width: 100%;
  padding-left: 20px;
}
.modal-new-payout-currency-select .dropdown-label:after {
  bottom: 6px;
}

.modal-new-payout-tip-add {
  display: block;
  padding: 15px 0 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
}

.modal-payout-methods-items {
  width: 100%;
}
.modal-payout-methods-items .dropdown-wrap {
  margin-bottom: -7px;
}
.modal-payout-methods-items .dropdown-label {
  width: 100%;
}
.modal-payout-methods-items .dropdown-div {
  min-width: 100%;
  left: 0;
}
.modal-payout-methods-items .dropdown-item-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-new-payout-radio-label {
  margin-bottom: 15px;
}

.modal-payout-methods-item {
  margin-bottom: 15px;
}
.modal-payout-methods-item:last-child {
  margin-bottom: 0;
}
.modal-payout-methods-item.unavailable {
  opacity: 0.5;
}
.modal-payout-methods-item .radio-fill {
  top: 4px;
}

.modal-payout-methods-item-name {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted-alt);
}

.modal-payout-methods-item-fees {
  margin-top: 1px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-lighter);
}

.modal-new-invoice-dd-link {
  margin-bottom: -10px;
  padding-top: 10px;
  text-align: right;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.modal-logo-label {
  display: block;
  padding: 0;
  margin-bottom: 10px;
}
.modal-logo-label .checkbox-input {
  position: absolute;
  visibility: hidden;
}
.modal-logo-label .checkbox-toggle {
  right: 20px;
  left: initial;
  top: 28px;
  pointer-events: none;
}

.modal-logo-size {
  display: block;
  padding: 15px 20px;
  border: 1px solid transparent;
  font-weight: 400;
  cursor: pointer;
  border-radius: 4px;
  transition: all var(--transition-normal) ease;
}
.checkbox-input:checked ~ .modal-logo-size, .modal-logo-size:hover {
  border-color: color-mix(in srgb, var(--black) 10%, transparent);
  background: var(--bg-input-hover);
}

.modal-logo-size-name {
  font-size: 18px;
  font-weight: 600;
}

.modal-logo-size-note {
  padding-top: 10px;
  text-align: center;
  font-weight: 500;
  color: var(--text-muted-alt);
}

.modal-selection-list {
  min-height: 200px;
  max-height: 300px;
  overflow-y: scroll;
}

.modal-selection-list-item {
  position: relative;
  padding: 20px 20px 18px 60px;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-default);
  border-bottom: 1px solid color-mix(in srgb, var(--black) 3%, transparent);
  transition: all var(--transition-normal) ease;
}
.modal-selection-list-item:first-child {
  border-top: 1px solid color-mix(in srgb, var(--black) 3%, transparent);
}
.modal-selection-list-item:hover {
  z-index: 2;
  color: var(--text-default);
  box-shadow: 0 1px 8px color-mix(in srgb, var(--bg-shadow) 4%, transparent);
}
.modal-selection-list-item.selected {
  color: var(--text-default);
}
.modal-selection-list-item ::selection {
  background: transparent;
}
.modal-selection-list-item ::-moz-selection {
  background: transparent;
}
.modal-selection-list-item.disabled {
  color: var(--text-lighter);
  cursor: not-allowed;
  background: var(--bg-grey-fc);
  opacity: 1;
}

.modal-selection-list-item-select {
  position: absolute;
  left: 20px;
  top: 20px;
}

.modal-selection-list-item-name {
  float: left;
  width: 70%;
}

.modal-selection-list-item-amount {
  float: left;
  width: 30%;
  text-align: right;
}

.modal-selection-list-empty {
  margin: 0 20px;
  padding: 40px 20px;
  text-align: center;
  border: 1px solid var(--border-content);
  border-radius: 10px;
}

.modal-selection-list-empty-copy {
  margin-bottom: 20px;
  font-size: 16px;
  color: var(--text-lighter);
}

.modal-confirm-contact-delete-copy {
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: normal;
}

.modal-confirm-contact-delete-notice {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted-alt);
}

.modal-see-clause-list h3 {
  margin-bottom: 15px;
}
.modal-see-clause-list p {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-lighter);
  text-align: center;
}
.modal-see-clause-list a {
  color: var(--color-primary);
}

.modal-notification-errors {
  display: none;
  padding: 10px 15px 7px;
  color: var(--color-primary-contrast);
  font-size: 12px;
  font-weight: 600;
  background: var(--color-danger);
  text-align: center;
}

.modal-send-contact-cc-add {
  margin-top: 10px;
  margin-bottom: 30px;
  font-size: 12px;
  font-weight: 600;
}

.modal-send-contact-cc-add-icon {
  margin-right: 7px;
}

.modal-send-contact-cc-field {
  position: relative;
  margin-top: 10px;
}

.modal-send-contact-cc-remove {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 24px;
  padding-top: 11px;
  font-size: 14px;
  color: var(--color-danger);
  opacity: 0.7;
  transition: all var(--transition-normal) ease;
}
.modal-send-contact-cc-remove:hover {
  opacity: 1;
}

.modal-send-contact-message-preview-wrapper {
  box-shadow: 0 2px 10px color-mix(in srgb, var(--black) 15%, transparent);
  border-radius: 4px;
}

textarea.modal-send-contact-message-preview {
  padding: 15px;
  min-height: 140px;
  border: none;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 14px;
}
textarea.modal-send-contact-message-preview.input-lg, .input-group-lg > textarea.modal-send-contact-message-preview.form-control,
.input-group-lg > textarea.modal-send-contact-message-preview.input-group-addon,
.input-group-lg > .input-group-btn > textarea.modal-send-contact-message-preview.btn {
  font-size: 16px;
}
textarea.modal-send-contact-message-preview, textarea.modal-send-contact-message-preview:hover, textarea.modal-send-contact-message-preview:active, textarea.modal-send-contact-message-preview:focus {
  border: none;
}

.modal-send-contact-message-preview-header {
  padding: 15px 15px 14px;
  color: var(--text-lighter);
  border-bottom: 1px solid var(--border-content);
  font-size: 14px;
}

.modal-send-contact-message-preview-footer {
  padding: 15px 15px 14px;
  color: var(--text-lighter);
  border-top: 1px solid var(--border-content);
  font-size: 14px;
}

.modal-send-contact-email-input + .react-autocomplete-menu {
  position: absolute;
  left: 0 !important;
  top: 100% !important;
}

.modal-send-method {
  display: none;
  opacity: 0;
}
.modal-send-method.showing {
  display: block;
  transition: all var(--transition-slow) ease;
}
.modal-send-method.showing-active {
  opacity: 1;
}

@media (min-width: 480px) {
  .modal-send-method-in-footer-btn {
    float: right;
  }
}

.modal-send-link-legal {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}

.modal-send-link-legal-copy {
  font-size: 16px;
  color: var(--text-muted);
}

.modal-send-link-content {
  display: none;
}
.modal-send-link-content.active {
  display: block;
}

.modal-send-link-copy {
  margin-bottom: 30px;
  padding-top: 30px;
  font-size: 16px;
  font-weight: 500;
  border-top: 1px solid var(--border-content);
}

#modal-send-link-copy-input {
  padding-left: 12px;
}
@media (min-width: 768px) {
  #modal-send-link-copy-input {
    padding-left: 166px;
  }
}

.modal-send-link-copy-note {
  position: relative;
  margin: 0;
  padding: 10px 10px 8px;
  width: 100%;
  text-align: center;
  border: 1px solid var(--border-content-alt);
  border-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  cursor: pointer;
  background: var(--bg-grey-fc);
  user-select: none;
  transition: all var(--transition-normal) ease;
}
@media (min-width: 768px) {
  .modal-send-link-copy-note {
    position: absolute;
    left: 1px;
    top: 2px;
    bottom: 2px;
    width: auto;
    padding: 17px 15px;
    border: none;
    box-shadow: 1px 0 1px color-mix(in srgb, var(--black) 10%, transparent);
    border-radius: 4px 0 0 4px;
  }
  .modal-send-link-copy-note:active {
    background: var(--bg-grey-fa);
  }
}

.modal-send-link-copy-note-icon {
  position: relative;
  top: -1px;
  margin-left: 3px;
  font-size: 0.9em;
}

.modal-send-link-status-completed .form-field-view-only-icon {
  color: var(--color-primary);
}

.modal-send-link-back {
  padding-top: 30px;
}

.modal-send-risk-unacceptable {
  padding: 40px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-muted-alt);
  text-align: center;
  margin: 0 40px 0 40px;
}
@media (min-width: 480px) {
  .modal-send-risk-unacceptable {
    padding: 60px 40px;
  }
}
.modal-send-risk-unacceptable .risk-unacceptable-text {
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: top;
  margin-bottom: 40px;
}
.modal-send-risk-unacceptable .risk-unacceptable-title {
  color: var(--text-default);
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  vertical-align: top;
}

.modal-send-requiring-payment-methods {
  padding: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-muted-alt);
}

.modal-send-requiring-payment-methods-sublink {
  margin-top: 20px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}
.modal-send-requiring-payment-methods-sublink a,
.modal-send-requiring-payment-methods-sublink a:focus,
.modal-send-requiring-payment-methods-sublink a:visited {
  color: var(--text-lighter);
}
.modal-send-requiring-payment-methods-sublink a:hover,
.modal-send-requiring-payment-methods-sublink a:active {
  color: var(--text-muted-alt);
}

.modal-payment-security-headline {
  margin-bottom: 40px;
  text-align: center;
}
.modal-payment-security-headline h4 {
  padding-bottom: 40px;
  color: var(--text-info-dark);
  font-weight: 500;
  border-bottom: 1px solid var(--border-content);
}

.modal-payment-security-item {
  margin-bottom: 30px;
}
.modal-payment-security-item:last-child {
  margin-bottom: 0;
}
.modal-payment-security-item h3 {
  margin-bottom: 15px;
}

.modal-payment-security-item-details {
  color: var(--text-lighter);
}
.modal-payment-security-item-details a {
  color: var(--text-lighter);
}

.modal-payment-security-item-more {
  margin-top: 15px;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 600;
  text-align: right;
}

.modal-payment-security-item-more-icon {
  margin-left: 5px;
}

.modal-payment-security-customer-support {
  padding-top: 30px;
  color: var(--text-lighter);
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  border-top: 1px solid var(--border-content);
}

.modal-sign-dialog {
  width: auto;
  max-width: 740px;
}

.modal-sign-body {
  padding: 20px;
}
@media (min-width: 480px) {
  .modal-sign-body {
    padding: 40px;
  }
}
@media (min-width: 768px) {
  .modal-sign-body {
    padding: 60px;
  }
}
.modal-sign-body label {
  margin-bottom: 0;
  font-size: 14px;
}

@media (min-width: 768px) {
  .modal-sign-form-inputs {
    width: 50%;
    padding-right: 20px;
  }
}

.modal-sign-name-verification {
  font-size: 16px;
}

.modal-sign-name-verification-label {
  font-weight: 600;
}

.modal-sign-contact-email {
  margin-top: 30px;
}

.modal-sign-contact-title {
  margin-top: 30px;
}

.label-optional {
  position: relative;
  display: block;
  color: var(--text-lightest);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
}

.modal-sign-legal {
  margin-top: 20px;
  font-size: 10px;
}

.modal-sign-preview {
  position: relative;
  margin-top: 40px;
  width: 100%;
  padding: 50px 20px 20px;
  color: var(--text-muted-alt);
  font-family: "Georgia", serif;
  font-size: 10px;
  overflow: hidden;
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}
@media (min-width: 768px) {
  .modal-sign-preview {
    position: absolute;
    top: 60px;
    right: 60px;
    margin-top: 0px;
    width: 38%;
    width: calc(50% - 80px);
  }
}

.modal-sign-preview-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: var(--font-body);
  border-bottom: 1px solid var(--border-content-alt);
  padding: 9px 10px 6px;
  text-transform: uppercase;
}

.modal-sign-preview-signature {
  position: relative;
  height: 25px;
  margin-bottom: 10px;
  padding-left: 6px;
  line-height: 0.5;
  font-family: var(--font-signature);
  font-size: 40px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-content-alt);
}
.modal-sign-preview-signature:before {
  position: absolute;
  content: "x";
  left: 0;
  bottom: 3px;
  font-family: "Helvetica", sans-serif;
  font-size: 6px;
  color: var(--border-content-alt);
}

.modal-sign-preview-data {
  margin-bottom: 3px;
}
.modal-sign-preview-data.document-preview {
  font-family: var(--font-sans-serif);
}
.modal-sign-preview-data:last-child {
  margin-bottom: 0;
}

.modal-sign-preview-email {
  color: var(--text-lighter);
}

.modal-sign-footer {
  text-align: right;
}

.modal-proposal-template-selected {
  margin-bottom: 40px;
  padding: 20px;
  font-size: 14px;
  font-weight: 500;
  background: var(--bg-grey-fc);
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--text-info-dark) 15%, transparent);
}
.modal-proposal-template-selected:hover {
  border: 1px solid color-mix(in srgb, var(--text-info-dark) 25%, transparent);
}
.modal-proposal-template-selected.active {
  border: 1px solid color-mix(in srgb, var(--text-info-dark) 25%, transparent);
}

.modal-proposal-template-selected-copy {
  margin-bottom: 5px;
  font-size: 16px;
}

.modal-proposal-template-selected-icon {
  position: relative;
  top: 1px;
  margin-right: 7px;
  font-size: 1.1em;
}

.modal-proposal-template-upgrade-required {
  padding-top: 20px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  border-top: 1px solid var(--border-content-alt);
}

.modal-proposal-template-upgrade-link {
  margin-left: 7px;
  font-weight: 600;
  font-style: normal;
  text-decoration: underline;
}

.modal-dual-mode-description {
  margin-bottom: 20px;
  font-size: 18px;
  text-align: center;
}

.modal-dual-mode-description2 {
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: var(--text-lighter);
}

.modal-fullscreen-bg-white {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-grey-fd);
}

.modal-fullscreen-wrapper {
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: 60px 0 0;
}
.modal.fade .modal-fullscreen-wrapper {
  opacity: 0;
  transform: translate3d(0, 0, 0);
}
.modal.in .modal-fullscreen-wrapper {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.modal-fullscreen-action-bar {
  position: fixed;
  z-index: 3;
  left: 0;
  top: 0;
  width: 100%;
  height: 60px;
  background: var(--black);
  border-bottom: 1px solid color-mix(in srgb, var(--black) 20%, transparent);
}
@media (min-width: 768px) {
  .modal-fullscreen-action-bar {
    box-shadow: 0 2px 8px color-mix(in srgb, var(--black) 15%, transparent);
  }
}

.modal-fullscreen-close {
  position: absolute;
  margin: 0;
  right: 0;
  top: 0;
  height: 100%;
  padding: 5px 20px;
  font-size: 50px;
  line-height: 50px;
  border-left: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}
.modal-fullscreen-close, .modal-fullscreen-close:visited, .modal-fullscreen-close:focus {
  color: var(--border-content-alt);
}
.modal-fullscreen-close:hover, .modal-fullscreen-close:active {
  color: var(--color-primary-contrast);
}

.modal-fullscreen-navigation-btn {
  position: absolute;
  display: block;
  top: 0px;
  height: 100%;
  padding: 13px 23px;
  line-height: 36px;
  font-size: 36px;
  border-right: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}
.modal-fullscreen-navigation-btn, .modal-fullscreen-navigation-btn:visited, .modal-fullscreen-navigation-btn:focus {
  color: var(--border-content-alt);
}
.modal-fullscreen-navigation-btn:hover, .modal-fullscreen-navigation-btn:active {
  color: var(--color-primary-contrast);
}
.modal-fullscreen-navigation-btn.disabled {
  color: color-mix(in srgb, var(--black) 20%, transparent);
}

.modal-fullscreen-navigation-btn-prev {
  left: 0px;
}

.modal-fullscreen-navigation-btn-next {
  left: 60px;
}

.modal-fullscreen {
  max-width: 1400px;
  margin: 0 auto;
  border: 0;
  background: none;
  box-shadow: none;
}

.modal-fullscreen-figure {
  padding: 0;
}
.modal-fullscreen-figure:before, .modal-fullscreen-figure:after {
  display: table;
  content: " ";
}
.modal-fullscreen-figure:after {
  clear: both;
}
@media (min-width: 768px) {
  .modal-fullscreen-figure {
    padding: 60px;
  }
}

.modal-fullscreen-figure-image {
  width: 100%;
  box-shadow: 0 2px 14px color-mix(in srgb, var(--black) 30%, transparent);
}
@media (min-width: 1080px) {
  .modal-fullscreen-figure-image {
    display: inline-block;
    float: left;
    width: 64%;
    margin: 0;
  }
}

.modal-fullscreen-figure-caption {
  display: block;
  padding: 20px 20px 60px;
}
.modal-fullscreen-figure.with-image .modal-fullscreen-figure-caption {
  display: inline-block;
  float: right;
  width: 100%;
}
@media (min-width: 768px) {
  .modal-fullscreen-figure.with-image .modal-fullscreen-figure-caption {
    padding: 40px 0;
  }
}
@media (min-width: 1080px) {
  .modal-fullscreen-figure.with-image .modal-fullscreen-figure-caption {
    width: 36%;
    padding: 0 0 0 60px;
  }
}
.modal-fullscreen-figure.without-image .modal-fullscreen-figure-caption {
  display: block;
  margin: auto;
  width: 100%;
  max-width: 660px;
}
@media (min-width: 768px) {
  .modal-fullscreen-figure.without-image .modal-fullscreen-figure-caption {
    padding: 0 0 60px;
  }
}

.modal-fullscreen-figure-caption-title {
  font-weight: 600;
  color: var(--text-default);
}
.modal-fullscreen-figure.with-image .modal-fullscreen-figure-caption-title {
  margin-bottom: 10px;
  font-size: 26px;
}
.modal-fullscreen-figure.without-image .modal-fullscreen-figure-caption-title {
  margin-bottom: 20px;
  font-size: 26px;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .modal-fullscreen-figure.without-image .modal-fullscreen-figure-caption-title {
    font-size: 32px;
  }
}

.modal-fullscreen-figure-caption-description {
  font-weight: 500;
  color: var(--text-muted);
  word-wrap: break-word;
}
.modal-fullscreen-figure.with-image .modal-fullscreen-figure-caption-description {
  font-size: 14px;
}
@media (min-width: 1200px) {
  .modal-fullscreen-figure.with-image .modal-fullscreen-figure-caption-description {
    font-size: 16px;
  }
}
.modal-fullscreen-figure.without-image .modal-fullscreen-figure-caption-description {
  font-size: 16px;
}
@media (min-width: 768px) {
  .modal-fullscreen-figure.without-image .modal-fullscreen-figure-caption-description {
    font-size: 18px;
  }
}

.modal-general-notice-text {
  font-size: 18px;
  font-weight: normal;
}

.modal-general-notice-subtext {
  margin-top: 10px;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-lighter);
}

.modal-new-invoice-form-content {
  padding: 40px 20px;
}
@media (min-width: 480px) {
  .modal-new-invoice-form-content {
    padding: 40px 40px;
  }
}

.modal-new-invoice-disabled-note {
  margin-bottom: 40px;
  padding: 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted-alt);
  background: var(--bg-grey-fa);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.modal-new-invoice-termination-date .SingleDatePicker {
  display: block;
  width: 100%;
}

.modal-new-invoice-tabs {
  overflow: hidden;
  margin: 30px 20px 0;
}
@media (min-width: 480px) {
  .modal-new-invoice-tabs {
    margin: 30px 40px 0;
  }
}

.modal-new-invoice-recurring-animate {
  display: none;
}
.modal-new-invoice-recurring-animate.animate-show {
  display: inline-block;
  animation: fade-in var(--transition-normal) 1 forwards;
}

.modal-new-invoice-recurring-content {
  padding-top: 30px;
  margin-top: 30px;
  border-top: 1px solid var(--border-content);
}

.modal-new-invoice-type-notice {
  margin-top: -20px;
  margin-bottom: 40px;
}

.modal-new-invoice-project-label {
  margin-bottom: 10px;
}

.modal-new-invoice-project-items {
  width: 100%;
}
.modal-new-invoice-project-items .dropdown-label {
  width: 100%;
}
.modal-new-invoice-project-items .dropdown-div {
  min-width: 100%;
  left: 0;
}
.modal-new-invoice-project-items .dropdown-item-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-new-invoice-contract-new {
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.modal-new-invoice-contract-empty {
  text-align: center;
  line-height: 1.4;
  font-size: 16px;
  padding: 20px 0 0;
  color: var(--text-lighter);
}

.modal-confirm-invoice-delete-association {
  margin-bottom: 30px;
  padding: 30px;
  text-align: left;
  background: var(--bg-info-lighter);
  border: 1px solid var(--bg-info-light);
  border-radius: 4px;
}

.modal-confirm-invoice-delete-association-question {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
}

.modal-confirm-invoice-delete-association-answer {
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
}

input[type=radio].modal-confirm-invoice-delete-association-radio {
  margin: 0 7px 0 0;
}

.modal-confirm-invoice-delete-association-warning {
  margin-top: 10px;
  font-size: 12px;
  font-style: italic;
  color: var(--text-lighter);
}

.modal-confirm-mark-as-paid-content {
  font-weight: normal;
}

.modal-confirm-mark-as-paid-form-content {
  padding: 20px 0px 0px;
  text-align: left;
  font-size: 20px;
  border-top: 1px solid var(--border-content);
}
.modal-confirm-mark-as-paid-form-content.padding-lg {
  padding: 20px 0px 20px;
}

.modal-confirm-mark-as-paid-form-elements {
  font-size: 16px;
}
.modal-confirm-mark-as-paid-form-elements input[type=radio] {
  margin: 0 5px 0 0;
}
.modal-confirm-mark-as-paid-form-elements .dropdown-wrap {
  line-height: 3.1;
}

.modal-confirm-mark-as-paid-payment-label {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
}

.modal-confirm-mark-as-paid-payment-option {
  margin-right: 15px;
  margin-bottom: 10px;
  font-weight: 400;
  color: var(--text-muted-alt);
  cursor: pointer;
  user-select: none;
}
@media (min-width: 600px) {
  .modal-confirm-mark-as-paid-payment-option {
    margin-bottom: 0;
  }
}

textarea.modal-confirm-mark-as-paid-textarea.new-form-control {
  margin-top: 10px;
  min-height: 100px;
}

.modal-mark-draft-paid-incomplete-msg {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-danger);
}

#modal-confirm-invoice-delete .modal-footer-alt-link {
  color: var(--text-muted-alt);
}

.invoice-payment-refund-amounts {
  padding: 20px;
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}

.invoice-payment-refund-amount-item-method {
  margin-bottom: 10px;
}
.invoice-payment-refund-amount-item-method:last-child {
  margin-bottom: 0;
}

.invoice-payment-refund-amount-item {
  display: flex;
  align-items: center;
}

.invoice-payment-refund-amount-full {
  text-align: right;
  font-size: 16px;
  font-weight: 600;
}

.invoice-payment-refund-amount-max {
  font-size: 12px;
  padding-right: 10px;
  color: var(--text-muted-alt);
}

.invoice-payment-refund-amount-input {
  text-align: right;
}

.invoice-payment-refund-error {
  margin-top: 10px;
  text-align: center;
  border-radius: 3px;
}

.invoice-payment-refund-accounts-label {
  margin-bottom: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

.invoice-payment-refund-account {
  display: block;
  padding: 10px 12px 9px;
  margin-bottom: 2px;
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}
.invoice-payment-refund-account, .invoice-payment-refund-account:focus, .invoice-payment-refund-account:visited {
  color: var(--text-default);
}
.invoice-payment-refund-account:hover, .invoice-payment-refund-account:active {
  color: var(--text-default);
  border-color: var(--color-primary);
}

.invoice-payment-refund-account-name {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
  font-weight: 600;
}

.invoice-payment-refund-account-type {
  color: var(--text-lighter);
  font-size: 12px;
}

.modal-tags-select-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 10px;
  min-height: 36px;
  padding: 20px;
  cursor: pointer;
  border: 1px solid var(--border-content);
  border-radius: 10px;
}
.modal-tags-select-list:hover {
  border: 1px solid var(--border-content);
}

.modal-tags-list-wrapper {
  min-height: 36px;
}
.drawer-side-field-item .modal-tags-list-wrapper {
  min-height: 30px;
}

.modal-content-header {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-display-header);
  color: var(--text-default);
  cursor: default;
}
@media (min-width: 768px) {
  .modal-content-header {
    font-size: 22px;
  }
}

.modal-content-subheader {
  margin-top: -2px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-sans-serif);
  color: var(--text-muted);
  cursor: default;
}

.modal-scoped-notice {
  padding: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted-alt);
  text-align: center;
}

.modal-scoped-notice-in {
  padding: 13px 12px 15px;
  background: var(--bg-grey-f1);
  border-radius: 5px 5px 1px 1px;
}

.modal-download-section {
  padding: 30px;
  text-align: center;
  background: var(--bg-grey-f5);
  border-radius: 4px;
}

.modal-download-section-copy {
  margin-bottom: 20px;
  font-size: 14px;
}

.modal-download-section-copy-with-border {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-content-alt);
}

.modal-body-banner-notice {
  padding: 20px 20px 19px;
  text-align: center;
  font-size: 16px;
  color: var(--text-muted);
  background: var(--bg-grey-f5);
  border-radius: 6px;
}

.modal-label {
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-default);
}

.modal-label-wide {
  width: 100%;
}

.modal-notice-header {
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
}

.modal-notice-copy {
  margin-bottom: 40px;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: var(--text-muted);
}

.modal-notice-alt-copy {
  text-align: left;
  font-size: 16px;
}

.modal-notice-subcopy {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-lighter);
}

.modal-new-instructions {
  margin: 10px 0 20px 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-muted-alt);
}

.modal-confirm-copy {
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: normal;
}

.modal-confirm-copy-list-header {
  font-size: 16px;
  font-weight: 600;
  text-align: left;
}

.modal-confirm-copy-list {
  margin-top: 10px;
  margin-bottom: 30px;
  padding-left: 20px;
  text-align: left;
}

.modal-confirm-copy-list-item {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}

.modal-confirm-copy-pause-link {
  font-size: 16px;
  margin-top: 20px;
}

.modal-contents-header {
  font-family: var(--font-display-header);
  font-size: 22px;
  color: var(--text-default);
  margin-bottom: 15px;
}

.modal-contents-subheader {
  font-family: var(--font-sans-serif);
  font-size: 14px;
  color: var(--text-muted);
}

.modal-optional-banner {
  padding: 7px 5px 3px;
  font-size: 12px;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-lighter);
  cursor: default;
  background: var(--bg-grey-fc);
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
}

.modal-outside {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
}
.modal-outside a {
  text-decoration: underline;
  color: inherit;
}
.modal-outside a:hover, .modal-outside a:visited, .modal-outside a:focus, .modal-outside a:active {
  color: inherit;
}

.modal-footer .btn + .btn {
  margin-top: 10px;
  margin-left: 0;
}
@media (min-width: 480px) {
  .modal-footer .btn + .btn {
    margin-top: 0;
    margin-left: 5px;
  }
}

.modal-footer-help-links {
  display: inline-block;
  float: left;
  padding: 12px 10px 9px;
}

.modal-footer-help-link {
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
}

.modal-footer-help-icon {
  position: relative;
  top: -2px;
  margin-right: 10px;
  font-size: 1.2em;
  vertical-align: middle;
}

.modal-footer-alt-links {
  text-align: left;
}

.modal-footer-alt-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 50px;
  transition: all var(--transition-slow) ease;
}
.modal-footer-alt-link, .modal-footer-alt-link:focus {
  color: var(--color-primary);
}
.modal-footer-alt-link:hover {
  color: var(--color-primary);
}
.modal-footer-alt-link.danger, .modal-footer-alt-link.danger:focus, .modal-footer-alt-link.danger:hover {
  color: var(--color-danger);
}
.modal-footer-alt-link.in-modal-footer {
  display: block;
  text-align: center;
  padding-top: 20px;
}
@media (min-width: 480px) {
  .modal-footer-alt-link.in-modal-footer {
    display: inline-block;
    float: left;
    margin-top: 15px;
    margin-left: 10px;
    padding-top: 0;
  }
}

.modal-footer-alt-link-icon {
  display: inline-block;
  margin-right: 10px;
  transform: scale(1.5) translateY(0);
}

.modal-footer-with-cta-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
}
.modal-footer-with-cta-links .btn {
  width: 100%;
}
@media (min-width: 768px) {
  .modal-footer-with-cta-links {
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .modal-footer-with-cta-links .btn {
    width: auto;
  }
}
.modal-footer-with-cta-links a:not(.btn),
.modal-footer-with-cta-links a:not(.btn):focus,
.modal-footer-with-cta-links a:not(.btn):visited {
  color: var(--text-muted);
}
.modal-footer-with-cta-links a:not(.btn):focus-visible {
  text-decoration: underline;
}
.modal-footer-with-cta-links a:not(.btn):hover,
.modal-footer-with-cta-links a:not(.btn):active {
  color: var(--text-default);
  text-decoration: underline;
}

.modal-footer-with-cta-links-items {
  flex: 1;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .modal-footer-with-cta-links-items {
    margin-top: 0;
  }
}

.modal-subfield-link {
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

.modal-table-wrapper {
  background: var(--bg-content);
}

.modal-checkbox-field-wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-height: 40px;
  font-size: 14px;
  padding: 8px 12px 8px 8px;
  cursor: pointer;
  background: var(--bg-content);
  border: 1px solid var(--border-field);
  border-radius: 6px;
  transition: all var(--transition-normal) ease;
}
.modal-checkbox-field-wrapper:hover {
  border-color: var(--color-primary);
}
.modal-checkbox-field-wrapper.with-label-margin {
  margin-top: 30px;
}
.modal-checkbox-field-wrapper.as-label {
  min-height: auto;
  padding: 0;
  border: none;
}
.modal-checkbox-field-wrapper.disabled {
  color: var(--text-lighter);
  cursor: not-allowed;
  background: var(--bg-grey-fa);
  border-color: var(--border-darker);
}
.modal-checkbox-field-wrapper.checkbox-sm {
  min-height: 30px;
  padding: 0 10px 0 5px;
}

.modal-checkbox {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 22px;
}

.modal-checkbox-label {
  padding: 1px 5px 0 9px;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
.modal-checkbox-field-wrapper.disabled .modal-checkbox-label {
  cursor: not-allowed;
}

.modal-checkbox-information {
  padding-top: 3px;
  font-size: 0.8em;
  color: var(--text-lightest);
  transition: all var(--transition-normal) ease;
}
.modal-checkbox-information:hover {
  color: var(--text-lighter);
}

.modal-checkbox-information-tooltip {
  max-width: 280px;
}

.modal-information-section {
  padding: 20px 20px;
  font-size: 14px;
  color: var(--text-default);
  word-break: break-word;
  background: var(--bg-grey-f5);
  border-radius: 6px;
}
.modal-information-section a,
.modal-information-section a:focus,
.modal-information-section a:visited {
  color: var(--text-default);
  text-decoration: underline;
}
.modal-information-section a:hover,
.modal-information-section a:active {
  color: var(--text-default);
  text-decoration: underline;
}

.modal-information-section-title {
  font-size: 16px;
  font-weight: 600;
}

.modal-information-section-more-link {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

.modal-default-notice-section {
  padding: 18px 20px 20px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-default);
  word-break: break-word;
  cursor: default;
  background: var(--bg-grey-f8);
  border-radius: 6px;
}
.modal-default-notice-section a:not(.btn),
.modal-default-notice-section a:not(.btn):focus,
.modal-default-notice-section a:not(.btn):visited {
  color: var(--text-default);
  text-decoration: underline;
}
.modal-default-notice-section a:not(.btn):hover,
.modal-default-notice-section a:not(.btn):active {
  color: var(--text-default);
  text-decoration: underline;
}
.modal-default-notice-section.with-green-border {
  border-left: 5px solid var(--color-primary);
}
.modal-default-notice-section.text-sm {
  font-size: 13px;
  font-weight: 400;
}

.modal-default-notice-section-title {
  color: var(--text-default);
  font-size: 16px;
  font-weight: 500;
}

.modal-warning {
  padding: 20px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-danger) 50%, transparent);
  border-radius: 4px;
}
.modal-warning a,
.modal-warning a:focus,
.modal-warning a:visited {
  color: var(--color-danger);
}
.modal-warning a:hover,
.modal-warning a:active {
  color: color-mix(in srgb, var(--color-danger) 95%, var(--black));
  text-decoration: underline;
}

.modal-warning-label {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

.modal-warning-notice {
  position: relative;
  padding: 18px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  word-break: break-word;
  background: var(--bg-warning-notice);
  border: 1px solid color-mix(in srgb, var(--color-danger) 20%, transparent);
  border-radius: 4px;
}
.modal-warning-notice a,
.modal-warning-notice a:focus,
.modal-warning-notice a:visited {
  color: var(--text-default);
  text-decoration: underline;
}
.modal-warning-notice a:hover,
.modal-warning-notice a:active {
  color: var(--text-default);
  text-decoration: underline;
}
.modal-warning-notice.with-icon {
  padding-left: 42px;
}
.modal-warning-notice.with-border {
  border-left: 5px solid var(--color-danger);
}

.modal-warning-notice-icon {
  position: absolute;
  top: 21px;
  left: 15px;
  width: 16px;
  height: auto;
}

.replaced-modal-content .modal-header {
  padding: 0;
  border-bottom: none;
}

.requires-business-legality-fields .original-modal-content {
  display: none;
}

.bonsai-country-currency-modal-note {
  margin-bottom: 30px;
  font-weight: 600;
  font-size: 16px;
}

.bonsai-country-currency-modal-note-tax {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.bonsai-country-currency-modal-business-structure .getting-started-question-title, .bonsai-country-currency-modal-work-type .getting-started-question-title {
  font-weight: 600;
}
.bonsai-country-currency-modal-business-structure .dropdown-contained, .bonsai-country-currency-modal-work-type .dropdown-contained {
  text-align: left;
}

.bonsai-country-currency-modal-picker {
  margin-bottom: 20px;
  text-align: left;
}

.modal-template-suggestions {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-info-dark);
  background: var(--bg-grey-fc);
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--text-info-dark) 15%, transparent);
}
.modal-template-suggestions:hover {
  border: 1px solid color-mix(in srgb, var(--text-info-dark) 25%, transparent);
}
.modal-template-suggestions.active {
  border: 1px solid color-mix(in srgb, var(--text-info-dark) 25%, transparent);
}

.modal-template-suggestions-toggle {
  display: flex;
  justify-content: space-between;
  padding: 8px 11px 8px 10px;
}
.modal-template-suggestions-toggle, .modal-template-suggestions-toggle:focus, .modal-template-suggestions-toggle:visited, .modal-template-suggestions-toggle:hover, .modal-template-suggestions-toggle:active {
  color: inherit;
}

.modal-template-suggestions-toggle-icon {
  margin-top: 2px;
  font-size: 0.9em;
}

.modal-template-suggestions-list {
  margin-top: -2px;
  padding: 0 10px 10px;
}

.modal-template-suggestions-list-item {
  display: inline-block;
  padding: 5px 9px 4px;
  margin-right: 5px;
  margin-top: 5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  background: color-mix(in srgb, var(--text-info-dark) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-info-dark) 15%, transparent);
  border-radius: 3px;
  transition: all var(--transition-fast) ease;
}
.modal-template-suggestions-list-item:hover {
  background: color-mix(in srgb, var(--black) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-info-dark) 30%, transparent);
}
.modal-template-suggestions-list-item:active {
  box-shadow: inset 0 0 5px color-mix(in srgb, var(--black) 5%, transparent);
}

.otp-overlay-container {
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
[data-react-class=TwoFactorAuthenticationContainer] .otp-overlay-container {
  padding-bottom: 80px;
}

.otp-overlay-top {
  padding: 60px 40px 100px;
  width: 100%;
  text-align: center;
  background: var(--bg-content);
  border-bottom: 1px solid var(--border-content-alt);
}
@media (min-width: 1200px) {
  .otp-overlay-top {
    padding: 100px 40px 120px;
  }
}

.otp-overlay-top-content {
  max-width: 620px;
  margin: auto;
  font-size: 14px;
  font-weight: 400;
  word-break: break-word;
}
@media (min-width: 768px) {
  .otp-overlay-top-content {
    font-size: 18px;
  }
}

.otp-overlay-top-subheader {
  margin-top: 20px;
  color: var(--text-muted);
}

.otp-overlay-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  max-width: 600px;
  padding: 0 20px;
}

.otp-overlay-icon {
  height: 145px;
  margin-top: -65px;
  margin-bottom: 30px;
}

.otp-overlay-bottom-copy {
  margin-bottom: 30px;
  color: var(--text-muted);
  font-size: 18px;
  text-align: center;
}

.otp-overlay-inputs.form-field.input-lg, .input-group-lg > .otp-overlay-inputs.form-field.form-control,
.input-group-lg > .otp-overlay-inputs.form-field.input-group-addon,
.input-group-lg > .input-group-btn > .otp-overlay-inputs.form-field.btn {
  width: 50px !important;
  height: 70px;
  padding-left: 0;
  padding-right: 0;
  margin: 0 3px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .otp-overlay-inputs.form-field.input-lg, .input-group-lg > .otp-overlay-inputs.form-field.form-control,
  .input-group-lg > .otp-overlay-inputs.form-field.input-group-addon,
  .input-group-lg > .input-group-btn > .otp-overlay-inputs.form-field.btn {
    margin: 0 10px;
  }
}

.otp-overlay-remember-me {
  margin-bottom: 30px;
}
.otp-overlay-remember-me .checkbox-label {
  padding: 10px 20px 10px 40px;
  font-weight: 500;
  border-radius: 10px;
}
.otp-overlay-remember-me .checkbox-toggle {
  left: 10px;
  top: 11px;
}

.otp-icon-container {
  transform: translateZ(0px);
}

@keyframes otpIconContainerError {
  10% {
    transform: translate3d(-1px, 0, 0);
  }
  20% {
    transform: translate3d(2px, 0, 0);
  }
  30% {
    transform: translate3d(-4px, 0, 0);
  }
  40% {
    transform: translate3d(4px, 0, 0);
  }
  50% {
    transform: translate3d(-4px, 0, 0);
  }
  60% {
    transform: translate3d(4px, 0, 0);
  }
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  80% {
    transform: translate3d(2px, 0, 0);
  }
  90% {
    transform: translate3d(-1px, 0, 0);
  }
}
.otp-icon-container-error {
  animation: otpIconContainerError 0.75s ease-in forwards;
}

.otp-icon-inner-circle {
  stroke: var(--black);
  transition: all var(--transition-slow) ease;
}

.otp-icon-inner-circle-success {
  stroke: var(--color-primary);
}

.otp-icon-inner-circle-error {
  stroke: var(--color-danger);
}

.otp-icon-key {
  fill: var(--black);
}

.otp-icon-key-wrapper {
  transform-origin: 50% 47%;
}

@keyframes otpIconKeyWrapperSuccess {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
.otp-icon-key-wrapper-success {
  animation: otpIconKeyWrapperSuccess var(--transition-medium) ease-in forwards;
}

.modal-pdf-download-graphic {
  position: relative;
  margin: 0 auto 40px;
  width: 230px;
  height: 210px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("shared/download-pdf.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .modal-pdf-download-graphic {
    background-image: url("shared/download-pdf@2x.png");
  }
}

.modal-pdf-download-content {
  padding: 30px 30px 60px;
  font-size: 18px;
  text-align: center;
  font-weight: 600;
}
@media (min-width: 768px) {
  .modal-pdf-download-content {
    padding: 30px 60px 60px;
  }
}
.modal-pdf-download-content .content-spinner {
  margin-top: 40px;
}

.modal-pdf-download-content-in {
  padding: 30px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-default);
  text-align: center;
  background: var(--bg-grey-f5);
  border-radius: 4px;
}

.modal.confirmation-modal {
  z-index: 10003;
}
.modal.confirmation-modal + .modal-backdrop {
  z-index: 10002;
}

.modal-copy {
  font-size: 18px;
  text-align: center;
}

.modal-contact-list {
  max-height: 400px;
  overflow-y: auto;
  margin: -5px;
}

.modal-contact-list-item {
  padding: 15px;
  cursor: pointer;
  border-radius: 6px;
  transition: background var(--transition-fast) ease;
}
.modal-contact-list-item:hover {
  background: var(--bg-grey-fc);
}

.modal-contact-list-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  margin-bottom: 3px;
}

.modal-contact-list-item-email {
  font-size: 13px;
  color: var(--text-muted);
}

.modal-connect-stripe-header {
  padding: 20px 15px 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--black) 8%, transparent);
  background: #28a0e5;
  background-image: linear-gradient(to right, #28a0e5 0%, #1280c0 100%);
  border-radius: 6px 6px 0 0;
}

.modal-connect-stripe-logo {
  width: 90px;
}

.modal-connect-stripe-copy {
  margin-bottom: 30px;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
}
.modal-connect-stripe-copy a {
  text-decoration: underline;
  color: var(--text-muted);
}

.stripe-connect {
  display: inline-block;
  margin-bottom: 1px;
  font-smoothing: antialiased;
  border: 0;
  padding: 1px;
  height: 42px;
  text-decoration: none;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--black) 20%, transparent);
  border-radius: 4px;
  background-image: linear-gradient(#28a0e5, #015e94);
  cursor: pointer;
  user-select: none;
}

.stripe-connect span {
  display: block;
  position: relative;
  padding: 5px 18px 4px 48px;
  height: 40px;
  background: #1275ff;
  background-image: linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);
  font-size: 14px;
  line-height: 30px;
  color: var(--color-primary-contrast);
  font-weight: 600;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 -1px 0 color-mix(in srgb, var(--black) 20%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border-radius: 3px;
}

.stripe-connect span:before {
  content: "";
  display: block;
  position: absolute;
  left: 11px;
  top: 50%;
  width: 23px;
  height: 24px;
  margin-top: -12px;
  background-repeat: no-repeat;
  background-size: 23px 24px;
}

.stripe-connect:active {
  background: #005d93;
}

.stripe-connect:active span {
  color: #eee;
  background: #008cdd;
  background-image: linear-gradient(#008cdd, #008cdd 85%, #239adf);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--black) 10%, transparent);
}

.stripe-connect.light-blue {
  background: #b5c3d8;
  background-image: linear-gradient(#b5c3d8, #9cabc2);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--black) 10%, transparent);
}

.stripe-connect.light-blue span {
  color: #556f88;
  text-shadow: 0 1px rgba(255, 255, 255, 0.8);
  background: #f0f5fa;
  background-image: linear-gradient(#f0f5fa, #e4ecf5 85%, #e7eef6);
  box-shadow: inset 0 1px 0 #fff;
}

.stripe-connect.light-blue:active {
  background: #9babc2;
}

.stripe-connect.light-blue:active span {
  color: #556f88;
  text-shadow: 0 1px rgba(255, 255, 255, 0.8);
  background: #d7dee8;
  background-image: linear-gradient(#d7dee8, #e7eef6);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--black) 5%, transparent);
}

.stripe-connect span:before,
.stripe-connect.blue span:before {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAYCAYAAAARfGZ1AAAKRGlDQ1BJQ0MgUHJvZmlsZQAASA2dlndUFNcXx9/MbC+0XZYiZem9twWkLr1IlSYKy+4CS1nWZRewN0QFIoqICFYkKGLAaCgSK6JYCAgW7AEJIkoMRhEVlczGHPX3Oyf5/U7eH3c+8333nnfn3vvOGQAoASECYQ6sAEC2UCKO9PdmxsUnMPG9AAZEgAM2AHC4uaLQKL9ogK5AXzYzF3WS8V8LAuD1LYBaAK5bBIQzmX/p/+9DkSsSSwCAwtEAOx4/l4tyIcpZ+RKRTJ9EmZ6SKWMYI2MxmiDKqjJO+8Tmf/p8Yk8Z87KFPNRHlrOIl82TcRfKG/OkfJSREJSL8gT8fJRvoKyfJc0WoPwGZXo2n5MLAIYi0yV8bjrK1ihTxNGRbJTnAkCgpH3FKV+xhF+A5gkAO0e0RCxIS5cwjbkmTBtnZxYzgJ+fxZdILMI53EyOmMdk52SLOMIlAHz6ZlkUUJLVlokW2dHG2dHRwtYSLf/n9Y+bn73+GWS9/eTxMuLPnkGMni/al9gvWk4tAKwptDZbvmgpOwFoWw+A6t0vmv4+AOQLAWjt++p7GLJ5SZdIRC5WVvn5+ZYCPtdSVtDP6386fPb8e/jqPEvZeZ9rx/Thp3KkWRKmrKjcnKwcqZiZK+Jw+UyL/x7ifx34VVpf5WEeyU/li/lC9KgYdMoEwjS03UKeQCLIETIFwr/r8L8M+yoHGX6aaxRodR8BPckSKPTRAfJrD8DQyABJ3IPuQJ/7FkKMAbKbF6s99mnuUUb3/7T/YeAy9BXOFaQxZTI7MprJlYrzZIzeCZnBAhKQB3SgBrSAHjAGFsAWOAFX4Al8QRAIA9EgHiwCXJAOsoEY5IPlYA0oAiVgC9gOqsFeUAcaQBM4BtrASXAOXARXwTVwE9wDQ2AUPAOT4DWYgSAID1EhGqQGaUMGkBlkC7Egd8gXCoEioXgoGUqDhJAUWg6tg0qgcqga2g81QN9DJ6Bz0GWoH7oDDUPj0O/QOxiBKTAd1oQNYSuYBXvBwXA0vBBOgxfDS+FCeDNcBdfCR+BW+Bx8Fb4JD8HP4CkEIGSEgeggFggLYSNhSAKSioiRlUgxUonUIk1IB9KNXEeGkAnkLQaHoWGYGAuMKyYAMx/DxSzGrMSUYqoxhzCtmC7MdcwwZhLzEUvFamDNsC7YQGwcNg2bjy3CVmLrsS3YC9ib2FHsaxwOx8AZ4ZxwAbh4XAZuGa4UtxvXjDuL68eN4KbweLwa3gzvhg/Dc/ASfBF+J/4I/gx+AD+Kf0MgE7QJtgQ/QgJBSFhLqCQcJpwmDBDGCDNEBaIB0YUYRuQRlxDLiHXEDmIfcZQ4Q1IkGZHcSNGkDNIaUhWpiXSBdJ/0kkwm65KdyRFkAXk1uYp8lHyJPEx+S1GimFLYlESKlLKZcpBylnKH8pJKpRpSPakJVAl1M7WBep76kPpGjiZnKRcox5NbJVcj1yo3IPdcnihvIO8lv0h+qXyl/HH5PvkJBaKCoQJbgaOwUqFG4YTCoMKUIk3RRjFMMVuxVPGw4mXFJ0p4JUMlXyWeUqHSAaXzSiM0hKZHY9O4tHW0OtoF2igdRzeiB9Iz6CX07+i99EllJWV75RjlAuUa5VPKQwyEYcgIZGQxyhjHGLcY71Q0VbxU+CqbVJpUBlSmVeeoeqryVYtVm1Vvqr5TY6r5qmWqbVVrU3ugjlE3VY9Qz1ffo35BfWIOfY7rHO6c4jnH5tzVgDVMNSI1lmkc0OjRmNLU0vTXFGnu1DyvOaHF0PLUytCq0DqtNa5N03bXFmhXaJ/RfspUZnoxs5hVzC7mpI6GToCOVGe/Tq/OjK6R7nzdtbrNug/0SHosvVS9Cr1OvUl9bf1Q/eX6jfp3DYgGLIN0gx0G3QbThkaGsYYbDNsMnxipGgUaLTVqNLpvTDX2MF5sXGt8wwRnwjLJNNltcs0UNnUwTTetMe0zg80czQRmu836zbHmzuZC81rzQQuKhZdFnkWjxbAlwzLEcq1lm+VzK32rBKutVt1WH60drLOs66zv2SjZBNmstemw+d3W1JZrW2N7w45q52e3yq7d7oW9mT3ffo/9bQeaQ6jDBodOhw+OTo5ixybHcSd9p2SnXU6DLDornFXKuuSMdfZ2XuV80vmti6OLxOWYy2+uFq6Zroddn8w1msufWzd3xE3XjeO2323Ineme7L7PfchDx4PjUevxyFPPk+dZ7znmZeKV4XXE67m3tbfYu8V7mu3CXsE+64P4+PsU+/T6KvnO9632fein65fm1+g36e/gv8z/bAA2IDhga8BgoGYgN7AhcDLIKWhFUFcwJTgquDr4UYhpiDikIxQODQrdFnp/nsE84by2MBAWGLYt7EG4Ufji8B8jcBHhETURjyNtIpdHdkfRopKiDke9jvaOLou+N994vnR+Z4x8TGJMQ8x0rE9seexQnFXcirir8erxgvj2BHxCTEJ9wtQC3wXbF4wmOiQWJd5aaLSwYOHlReqLshadSpJP4iQdT8YmxyYfTn7PCePUcqZSAlN2pUxy2dwd3Gc8T14Fb5zvxi/nj6W6pZanPklzS9uWNp7ukV6ZPiFgC6oFLzICMvZmTGeGZR7MnM2KzWrOJmQnZ58QKgkzhV05WjkFOf0iM1GRaGixy+LtiyfFweL6XCh3YW67hI7+TPVIjaXrpcN57nk1eW/yY/KPFygWCAt6lpgu2bRkbKnf0m+XYZZxl3Uu11m+ZvnwCq8V+1dCK1NWdq7SW1W4anS1/+pDa0hrMtf8tNZ6bfnaV+ti13UUahauLhxZ77++sUiuSFw0uMF1w96NmI2Cjb2b7Dbt3PSxmFd8pcS6pLLkfSm39Mo3Nt9UfTO7OXVzb5lj2Z4tuC3CLbe2emw9VK5YvrR8ZFvottYKZkVxxavtSdsvV9pX7t1B2iHdMVQVUtW+U3/nlp3vq9Orb9Z41zTv0ti1adf0bt7ugT2ee5r2au4t2ftun2Df7f3++1trDWsrD+AO5B14XBdT1/0t69uGevX6kvoPB4UHhw5FHupqcGpoOKxxuKwRbpQ2jh9JPHLtO5/v2pssmvY3M5pLjoKj0qNPv0/+/tax4GOdx1nHm34w+GFXC62luBVqXdI62ZbeNtQe395/IuhEZ4drR8uPlj8ePKlzsuaU8qmy06TThadnzyw9M3VWdHbiXNq5kc6kznvn487f6Iro6r0QfOHSRb+L57u9us9ccrt08rLL5RNXWFfarjpebe1x6Gn5yeGnll7H3tY+p772a87XOvrn9p8e8Bg4d93n+sUbgTeu3px3s//W/Fu3BxMHh27zbj+5k3Xnxd28uzP3Vt/H3i9+oPCg8qHGw9qfTX5uHnIcOjXsM9zzKOrRvRHuyLNfcn95P1r4mPq4ckx7rOGJ7ZOT437j154ueDr6TPRsZqLoV8Vfdz03fv7Db56/9UzGTY6+EL+Y/b30pdrLg6/sX3VOhU89fJ39ema6+I3am0NvWW+738W+G5vJf49/X/XB5EPHx+CP92ezZ2f/AAOY8/wRDtFgAAADQklEQVRIDbWVaUiUQRjHZ96dXY/d1fYQj1U03dJSw9YkFgy6DIkILRArQSSC7PjQjQQqVH7oQ0GHQUWgpQhKHzoNSqiUwpXcsrwIjzVtPVrzbPV9Z6bZhYV3N3WXYAeGmWeeZ37z8J95GEgpBf5oeXn1Es4fYAdzPDlM6je4RBYhR+LMU89UxiCBGiCgkUwsBYSA+SlPKLQBQAYEAZm+3j42K96z3NyOF7VOeMrp62opRcacjPW5+43rDTpNSKQ8QKZAEg7xmPCTs/O27uGJgXuNbW0pxyvLfTmAEBzthEsFZLxRvPdi5rpYo2cmUiQJDA4IVeo0obGdlvGfXUPj0Sym2zPuHxvzcWjDyVupJ/YYizKTGNjLw/HiduNTAqIRIUJ6Vpp+ky8bCSFgwQ2xgkGxFi1ioNWEBGuJB31gbLIv/2pd7SpFoGxtpCYkLSEq4ptlzIYFO7tc7w0TKkeEYg5ADnrWkkYhD8s26GPq3nW0WKxTptftPYBI4Mj3O2fHvKNZBMVSDmMwarXNjDkSF3d5kExZeiCr8M2VI+VFu9IvsPcYtzAvkfoEZkEEE45jMppq3ppbCNPFIY1nD1cpo07lbMmvOXeoDCF8BLKy9uUAAjDkBh+c6bz78mNtVVP7MwET7JBnqb4xXpdWVpC1OVzWn+ELHLCsneX/s7rkRWl1463cy1U3WroG21jhCGKJXPOtKQnpAuENvsAppgDB3TcDVIrpDHbK5Kd+y7W8iodNybHh22rOHyxUK+UaMYjZaoyp25rYL54TSihSKmwZ14v3lc3ZFxdbeywjn/tGJnkmzrydX1ApxOEACKymmXLYfXVpi1JMEOGxPi1ep18doY4r2J7uFumQQ9yGf01bMcZW8dpyc0oIjxxpuC5wuUDX+ovWrnYeg3aXvdLIqnmOvXPsfH6uA5YbTb1DX8ofvTLzTy6ZV4K6fAw+gXiATfdffmjeaUgc1UdpdWplsCooQBrEnqUw82dhdnjit/Vxc4f59tP3DRjzJvYteqrl4rmNlJIfrOwpgNklesDRNQBCHYtQAQqD2CgACNjHAJnG1EyfV/S67fZiJB5t2OGEe4n7L3fS4fpEv/2hUEATfoPbuam5v8N7nps70YTbAAAAAElFTkSuQmCC");
}

.stripe-connect.light-blue span:before {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAYCAYAAAARfGZ1AAAKRGlDQ1BJQ0MgUHJvZmlsZQAASA2dlndUFNcXx9/MbC+0XZYiZem9twWkLr1IlSYKy+4CS1nWZRewN0QFIoqICFYkKGLAaCgSK6JYCAgW7AEJIkoMRhEVlczGHPX3Oyf5/U7eH3c+8333nnfn3vvOGQAoASECYQ6sAEC2UCKO9PdmxsUnMPG9AAZEgAM2AHC4uaLQKL9ogK5AXzYzF3WS8V8LAuD1LYBaAK5bBIQzmX/p/+9DkSsSSwCAwtEAOx4/l4tyIcpZ+RKRTJ9EmZ6SKWMYI2MxmiDKqjJO+8Tmf/p8Yk8Z87KFPNRHlrOIl82TcRfKG/OkfJSREJSL8gT8fJRvoKyfJc0WoPwGZXo2n5MLAIYi0yV8bjrK1ihTxNGRbJTnAkCgpH3FKV+xhF+A5gkAO0e0RCxIS5cwjbkmTBtnZxYzgJ+fxZdILMI53EyOmMdk52SLOMIlAHz6ZlkUUJLVlokW2dHG2dHRwtYSLf/n9Y+bn73+GWS9/eTxMuLPnkGMni/al9gvWk4tAKwptDZbvmgpOwFoWw+A6t0vmv4+AOQLAWjt++p7GLJ5SZdIRC5WVvn5+ZYCPtdSVtDP6386fPb8e/jqPEvZeZ9rx/Thp3KkWRKmrKjcnKwcqZiZK+Jw+UyL/x7ifx34VVpf5WEeyU/li/lC9KgYdMoEwjS03UKeQCLIETIFwr/r8L8M+yoHGX6aaxRodR8BPckSKPTRAfJrD8DQyABJ3IPuQJ/7FkKMAbKbF6s99mnuUUb3/7T/YeAy9BXOFaQxZTI7MprJlYrzZIzeCZnBAhKQB3SgBrSAHjAGFsAWOAFX4Al8QRAIA9EgHiwCXJAOsoEY5IPlYA0oAiVgC9gOqsFeUAcaQBM4BtrASXAOXARXwTVwE9wDQ2AUPAOT4DWYgSAID1EhGqQGaUMGkBlkC7Egd8gXCoEioXgoGUqDhJAUWg6tg0qgcqga2g81QN9DJ6Bz0GWoH7oDDUPj0O/QOxiBKTAd1oQNYSuYBXvBwXA0vBBOgxfDS+FCeDNcBdfCR+BW+Bx8Fb4JD8HP4CkEIGSEgeggFggLYSNhSAKSioiRlUgxUonUIk1IB9KNXEeGkAnkLQaHoWGYGAuMKyYAMx/DxSzGrMSUYqoxhzCtmC7MdcwwZhLzEUvFamDNsC7YQGwcNg2bjy3CVmLrsS3YC9ib2FHsaxwOx8AZ4ZxwAbh4XAZuGa4UtxvXjDuL68eN4KbweLwa3gzvhg/Dc/ASfBF+J/4I/gx+AD+Kf0MgE7QJtgQ/QgJBSFhLqCQcJpwmDBDGCDNEBaIB0YUYRuQRlxDLiHXEDmIfcZQ4Q1IkGZHcSNGkDNIaUhWpiXSBdJ/0kkwm65KdyRFkAXk1uYp8lHyJPEx+S1GimFLYlESKlLKZcpBylnKH8pJKpRpSPakJVAl1M7WBep76kPpGjiZnKRcox5NbJVcj1yo3IPdcnihvIO8lv0h+qXyl/HH5PvkJBaKCoQJbgaOwUqFG4YTCoMKUIk3RRjFMMVuxVPGw4mXFJ0p4JUMlXyWeUqHSAaXzSiM0hKZHY9O4tHW0OtoF2igdRzeiB9Iz6CX07+i99EllJWV75RjlAuUa5VPKQwyEYcgIZGQxyhjHGLcY71Q0VbxU+CqbVJpUBlSmVeeoeqryVYtVm1Vvqr5TY6r5qmWqbVVrU3ugjlE3VY9Qz1ffo35BfWIOfY7rHO6c4jnH5tzVgDVMNSI1lmkc0OjRmNLU0vTXFGnu1DyvOaHF0PLUytCq0DqtNa5N03bXFmhXaJ/RfspUZnoxs5hVzC7mpI6GToCOVGe/Tq/OjK6R7nzdtbrNug/0SHosvVS9Cr1OvUl9bf1Q/eX6jfp3DYgGLIN0gx0G3QbThkaGsYYbDNsMnxipGgUaLTVqNLpvTDX2MF5sXGt8wwRnwjLJNNltcs0UNnUwTTetMe0zg80czQRmu836zbHmzuZC81rzQQuKhZdFnkWjxbAlwzLEcq1lm+VzK32rBKutVt1WH60drLOs66zv2SjZBNmstemw+d3W1JZrW2N7w45q52e3yq7d7oW9mT3ffo/9bQeaQ6jDBodOhw+OTo5ixybHcSd9p2SnXU6DLDornFXKuuSMdfZ2XuV80vmti6OLxOWYy2+uFq6Zroddn8w1msufWzd3xE3XjeO2323Ineme7L7PfchDx4PjUevxyFPPk+dZ7znmZeKV4XXE67m3tbfYu8V7mu3CXsE+64P4+PsU+/T6KvnO9632fein65fm1+g36e/gv8z/bAA2IDhga8BgoGYgN7AhcDLIKWhFUFcwJTgquDr4UYhpiDikIxQODQrdFnp/nsE84by2MBAWGLYt7EG4Ufji8B8jcBHhETURjyNtIpdHdkfRopKiDke9jvaOLou+N994vnR+Z4x8TGJMQ8x0rE9seexQnFXcirir8erxgvj2BHxCTEJ9wtQC3wXbF4wmOiQWJd5aaLSwYOHlReqLshadSpJP4iQdT8YmxyYfTn7PCePUcqZSAlN2pUxy2dwd3Gc8T14Fb5zvxi/nj6W6pZanPklzS9uWNp7ukV6ZPiFgC6oFLzICMvZmTGeGZR7MnM2KzWrOJmQnZ58QKgkzhV05WjkFOf0iM1GRaGixy+LtiyfFweL6XCh3YW67hI7+TPVIjaXrpcN57nk1eW/yY/KPFygWCAt6lpgu2bRkbKnf0m+XYZZxl3Uu11m+ZvnwCq8V+1dCK1NWdq7SW1W4anS1/+pDa0hrMtf8tNZ6bfnaV+ti13UUahauLhxZ77++sUiuSFw0uMF1w96NmI2Cjb2b7Dbt3PSxmFd8pcS6pLLkfSm39Mo3Nt9UfTO7OXVzb5lj2Z4tuC3CLbe2emw9VK5YvrR8ZFvottYKZkVxxavtSdsvV9pX7t1B2iHdMVQVUtW+U3/nlp3vq9Orb9Z41zTv0ti1adf0bt7ugT2ee5r2au4t2ftun2Df7f3++1trDWsrD+AO5B14XBdT1/0t69uGevX6kvoPB4UHhw5FHupqcGpoOKxxuKwRbpQ2jh9JPHLtO5/v2pssmvY3M5pLjoKj0qNPv0/+/tax4GOdx1nHm34w+GFXC62luBVqXdI62ZbeNtQe395/IuhEZ4drR8uPlj8ePKlzsuaU8qmy06TThadnzyw9M3VWdHbiXNq5kc6kznvn487f6Iro6r0QfOHSRb+L57u9us9ccrt08rLL5RNXWFfarjpebe1x6Gn5yeGnll7H3tY+p772a87XOvrn9p8e8Bg4d93n+sUbgTeu3px3s//W/Fu3BxMHh27zbj+5k3Xnxd28uzP3Vt/H3i9+oPCg8qHGw9qfTX5uHnIcOjXsM9zzKOrRvRHuyLNfcn95P1r4mPq4ckx7rOGJ7ZOT437j154ueDr6TPRsZqLoV8Vfdz03fv7Db56/9UzGTY6+EL+Y/b30pdrLg6/sX3VOhU89fJ39ema6+I3am0NvWW+738W+G5vJf49/X/XB5EPHx+CP92ezZ2f/AAOY8/wRDtFgAAADIElEQVRIDbWVTWgTQRTHZ2Z3s5vdpsm2aZp+iKKNCgZsK4iWik0tClqwHozS9iYo4nfw0KNU8ebBm+JNESktBfEgWg+KB0FbiqhFMS1SKyk0lTY1zcd+jG82TSkNoXtoXngk+2bm92b/780EU0pRKWxwcJAjpQAzZrKqSigZ3G3ISsnguka8/FpZWrrOtwi8cI4jpJkiuodgTKAkhqbrC9lM5ms6o936/ObJ+7Vriv3GHFe/Cm8LX76nejwR2elEgsOBOI5DGD6UmpyuG750OtWuZbNLALMFp4axzYK3h690V6oVkXJ3ORJF0QITDIphQMHWTdNEqZSE3IroK7bT9XFMSG7n1T7vDaXMhWRZRhBcPw8ReAuHYVhJCwaLBGBPOc1FSdopSU4Lwuay3ve45FTfhdMfE8ll4U8srkxMTquLC4s/irAKwvDSiiWLw+HgeB40xkyHHHwu/lfouXZ7ePjhnafVlWptczAQhKFfbNyWYZTrc9XtikFjIOiOFSfIoAjyCfeP9kR+tp662AXAZ+AfbIFhEqUrAu8LNjw32SMksJLAwWVd4/V6UW1Njeqv9vW3n7n6JRQKrXbXRkkwMrE1OXyi7YFJcWDs29RxaBGetSDhCQKtkCiJVqHhOzhLyGOAdm8Ezo/ndxI923m4f3/jru8v346GpmPzTXCd5ZJA9/AcD8W2ZGPy2LY8nC0Y217vj17q7Xw3HZs79Gjg9c2sbkACMA4jSZJQRnJK7NGOUUSoBT/WG+mDWv4jFI8ih/ip4+DeqK5p16HpeVYDZjwkYBLZNYypacHravzhjKY3GXBQTPDxiSnkUVWkyMpqe0L9kbtMztiFw3TNgleoHqdOWRmhxtREBHR2CIKlM4sxM0yKAlv9UbtwqFnSggsAEggPx9t6LFgPlxfyV7oTvSc77hYMFgmAzHGLdqBp94vZ+aWFxUSyPpXRVN0wnHAEsMARw6VI6WBgS6yjpXEIOANFWAVhapozeOU/dAeMNoDXgXvAneCt4Anw3+CvwEfAbdvQyPiRvA6TsIr5phnc5zOF9+sm4XnBjJcMvsgtJ/8DyYLwNvinaNYAAAAASUVORK5CYII=");
}

/* Retina support */
@media only screen and (min-resolution: 1.5dppx) {
  .stripe-connect span:before,
  .stripe-connect.blue span:before {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAwCAYAAABuZUjcAAAKRGlDQ1BJQ0MgUHJvZmlsZQAASA2dlndUFNcXx9/MbC+0XZYiZem9twWkLr1IlSYKy+4CS1nWZRewN0QFIoqICFYkKGLAaCgSK6JYCAgW7AEJIkoMRhEVlczGHPX3Oyf5/U7eH3c+8333nnfn3vvOGQAoASECYQ6sAEC2UCKO9PdmxsUnMPG9AAZEgAM2AHC4uaLQKL9ogK5AXzYzF3WS8V8LAuD1LYBaAK5bBIQzmX/p/+9DkSsSSwCAwtEAOx4/l4tyIcpZ+RKRTJ9EmZ6SKWMYI2MxmiDKqjJO+8Tmf/p8Yk8Z87KFPNRHlrOIl82TcRfKG/OkfJSREJSL8gT8fJRvoKyfJc0WoPwGZXo2n5MLAIYi0yV8bjrK1ihTxNGRbJTnAkCgpH3FKV+xhF+A5gkAO0e0RCxIS5cwjbkmTBtnZxYzgJ+fxZdILMI53EyOmMdk52SLOMIlAHz6ZlkUUJLVlokW2dHG2dHRwtYSLf/n9Y+bn73+GWS9/eTxMuLPnkGMni/al9gvWk4tAKwptDZbvmgpOwFoWw+A6t0vmv4+AOQLAWjt++p7GLJ5SZdIRC5WVvn5+ZYCPtdSVtDP6386fPb8e/jqPEvZeZ9rx/Thp3KkWRKmrKjcnKwcqZiZK+Jw+UyL/x7ifx34VVpf5WEeyU/li/lC9KgYdMoEwjS03UKeQCLIETIFwr/r8L8M+yoHGX6aaxRodR8BPckSKPTRAfJrD8DQyABJ3IPuQJ/7FkKMAbKbF6s99mnuUUb3/7T/YeAy9BXOFaQxZTI7MprJlYrzZIzeCZnBAhKQB3SgBrSAHjAGFsAWOAFX4Al8QRAIA9EgHiwCXJAOsoEY5IPlYA0oAiVgC9gOqsFeUAcaQBM4BtrASXAOXARXwTVwE9wDQ2AUPAOT4DWYgSAID1EhGqQGaUMGkBlkC7Egd8gXCoEioXgoGUqDhJAUWg6tg0qgcqga2g81QN9DJ6Bz0GWoH7oDDUPj0O/QOxiBKTAd1oQNYSuYBXvBwXA0vBBOgxfDS+FCeDNcBdfCR+BW+Bx8Fb4JD8HP4CkEIGSEgeggFggLYSNhSAKSioiRlUgxUonUIk1IB9KNXEeGkAnkLQaHoWGYGAuMKyYAMx/DxSzGrMSUYqoxhzCtmC7MdcwwZhLzEUvFamDNsC7YQGwcNg2bjy3CVmLrsS3YC9ib2FHsaxwOx8AZ4ZxwAbh4XAZuGa4UtxvXjDuL68eN4KbweLwa3gzvhg/Dc/ASfBF+J/4I/gx+AD+Kf0MgE7QJtgQ/QgJBSFhLqCQcJpwmDBDGCDNEBaIB0YUYRuQRlxDLiHXEDmIfcZQ4Q1IkGZHcSNGkDNIaUhWpiXSBdJ/0kkwm65KdyRFkAXk1uYp8lHyJPEx+S1GimFLYlESKlLKZcpBylnKH8pJKpRpSPakJVAl1M7WBep76kPpGjiZnKRcox5NbJVcj1yo3IPdcnihvIO8lv0h+qXyl/HH5PvkJBaKCoQJbgaOwUqFG4YTCoMKUIk3RRjFMMVuxVPGw4mXFJ0p4JUMlXyWeUqHSAaXzSiM0hKZHY9O4tHW0OtoF2igdRzeiB9Iz6CX07+i99EllJWV75RjlAuUa5VPKQwyEYcgIZGQxyhjHGLcY71Q0VbxU+CqbVJpUBlSmVeeoeqryVYtVm1Vvqr5TY6r5qmWqbVVrU3ugjlE3VY9Qz1ffo35BfWIOfY7rHO6c4jnH5tzVgDVMNSI1lmkc0OjRmNLU0vTXFGnu1DyvOaHF0PLUytCq0DqtNa5N03bXFmhXaJ/RfspUZnoxs5hVzC7mpI6GToCOVGe/Tq/OjK6R7nzdtbrNug/0SHosvVS9Cr1OvUl9bf1Q/eX6jfp3DYgGLIN0gx0G3QbThkaGsYYbDNsMnxipGgUaLTVqNLpvTDX2MF5sXGt8wwRnwjLJNNltcs0UNnUwTTetMe0zg80czQRmu836zbHmzuZC81rzQQuKhZdFnkWjxbAlwzLEcq1lm+VzK32rBKutVt1WH60drLOs66zv2SjZBNmstemw+d3W1JZrW2N7w45q52e3yq7d7oW9mT3ffo/9bQeaQ6jDBodOhw+OTo5ixybHcSd9p2SnXU6DLDornFXKuuSMdfZ2XuV80vmti6OLxOWYy2+uFq6Zroddn8w1msufWzd3xE3XjeO2323Ineme7L7PfchDx4PjUevxyFPPk+dZ7znmZeKV4XXE67m3tbfYu8V7mu3CXsE+64P4+PsU+/T6KvnO9632fein65fm1+g36e/gv8z/bAA2IDhga8BgoGYgN7AhcDLIKWhFUFcwJTgquDr4UYhpiDikIxQODQrdFnp/nsE84by2MBAWGLYt7EG4Ufji8B8jcBHhETURjyNtIpdHdkfRopKiDke9jvaOLou+N994vnR+Z4x8TGJMQ8x0rE9seexQnFXcirir8erxgvj2BHxCTEJ9wtQC3wXbF4wmOiQWJd5aaLSwYOHlReqLshadSpJP4iQdT8YmxyYfTn7PCePUcqZSAlN2pUxy2dwd3Gc8T14Fb5zvxi/nj6W6pZanPklzS9uWNp7ukV6ZPiFgC6oFLzICMvZmTGeGZR7MnM2KzWrOJmQnZ58QKgkzhV05WjkFOf0iM1GRaGixy+LtiyfFweL6XCh3YW67hI7+TPVIjaXrpcN57nk1eW/yY/KPFygWCAt6lpgu2bRkbKnf0m+XYZZxl3Uu11m+ZvnwCq8V+1dCK1NWdq7SW1W4anS1/+pDa0hrMtf8tNZ6bfnaV+ti13UUahauLhxZ77++sUiuSFw0uMF1w96NmI2Cjb2b7Dbt3PSxmFd8pcS6pLLkfSm39Mo3Nt9UfTO7OXVzb5lj2Z4tuC3CLbe2emw9VK5YvrR8ZFvottYKZkVxxavtSdsvV9pX7t1B2iHdMVQVUtW+U3/nlp3vq9Orb9Z41zTv0ti1adf0bt7ugT2ee5r2au4t2ftun2Df7f3++1trDWsrD+AO5B14XBdT1/0t69uGevX6kvoPB4UHhw5FHupqcGpoOKxxuKwRbpQ2jh9JPHLtO5/v2pssmvY3M5pLjoKj0qNPv0/+/tax4GOdx1nHm34w+GFXC62luBVqXdI62ZbeNtQe395/IuhEZ4drR8uPlj8ePKlzsuaU8qmy06TThadnzyw9M3VWdHbiXNq5kc6kznvn487f6Iro6r0QfOHSRb+L57u9us9ccrt08rLL5RNXWFfarjpebe1x6Gn5yeGnll7H3tY+p772a87XOvrn9p8e8Bg4d93n+sUbgTeu3px3s//W/Fu3BxMHh27zbj+5k3Xnxd28uzP3Vt/H3i9+oPCg8qHGw9qfTX5uHnIcOjXsM9zzKOrRvRHuyLNfcn95P1r4mPq4ckx7rOGJ7ZOT437j154ueDr6TPRsZqLoV8Vfdz03fv7Db56/9UzGTY6+EL+Y/b30pdrLg6/sX3VOhU89fJ39ema6+I3am0NvWW+738W+G5vJf49/X/XB5EPHx+CP92ezZ2f/AAOY8/wRDtFgAAAIbklEQVRoBdVZa5BURxU+fZ9z57mzs7PvF4i7srAQSCifMVDERC0jYlzUlJalKeGPlCnL/NEfywpWacoiVZRVJIYfGjGUu5bxj5qHFSAYyQOBEsJzYSHDvnd2dp535j66PX1vNgsULDPs1cr2Vs+9e7v79NfnnnP663MJYwwWYxEWI2iOedEClxabxgkBwjEvOuA9PQOOlSw64JMr4vK8GidYYMcOES4tVSEAAZ8FAUqon1GiAJEEEG0CjFB8cTaxZUMAo1gEqQA0UABprAjPbrUwXnkesgqKP8CBk5vDIenrE+BKmwI+MawA1MbCkdV10cBDflXuVmSxQRbFkCAQZ9U2ZTaONyxKcyXDHjMs83ImV3rz6njmDRPMUZB80zAJOuvvsflkXpTP7DrWyeXcYCqk75AEieawrEoty1vrvlcV0ja3VQdb1rVUQVd9EFqqNIj5ZfDJooPBsCnohq2ldDMynC42XZnW7z09lu25lMxDMl34y0gyvTsBwyewc84Z4MEPpWIzF/MBcLLtNzJISmxZU+PmWETbtqGzfvVja5uguyF02+kCIEJUk6Ex4oMV9XP9ZnQT/nZ24it7XrtoJ5LZ7SjAM+Bg2+0ckAOcbBkQIaZFVzY1bGurjezYfn87PNQZ5+13ZaQRXMzH26Lg8ymfUokQdAR59INOc53GQ6q/Jiiua6oJ7+h9uAPua47cHeLrwHEmQRmTGLHV6x4v+JYwWsOFCGRDn6RKem1rPPrkN9Y0uqAXLN4VwCgjYGEE8rBgMAjwKsF9S9WgLa9qjYcf+Po9jXdlGrfC5Wj8Vg0Lf+ZENAFmpGB9TWTLhmUxUD1UDg/gtudRnK+a4RtkgqQyO+RT5LVrmiLgJcN19gcGNojUWriS5yRQm7pcBTc/vyCKdW1RrWwzOTiYhGf+dRUmcgZosgDVfgWaMCS2V2tO+OzG0MiVjdUwiFiYm9a7O4kJAoZEooV9H4T0O0ofODkKr5+6+nY6V3heVZQpv6ZWaz55qSJJnXjtUBW5pT7k8xeK5u+B0PQdBVbQgTLq9HbQYthyNVSmTT6A/nB0aGpF0K99+trY1F7TNI9PZGXkKUVRtYjGZCIOV1dHR4Ynz8FSLV8BrjK6uiAlpLcmco1ipmgpAaU8rfesboCuumBg31uJbx6+qH0uX9D/em0i85xFhaslKZKA8/82RtYDhd/1MkCuBnjxrLgKB0EQSb5oWO+9O1bZrsy3+Kc3dcH+b99b07NuyXe6P9r8z/am+C9lkuqCjo4qGGkQES76qJcuz/2GOlUoFuVsQS+98frlaSeq8Gkqqctrg7Dz853wwrfugUfXtj3W3tJ8oCletRUEXy1SCSSYHhdu41gFqILcZCrzwkvnJmE0U3JtHefiL7eS2l7th11f7IQ9j65aVh+r+nlzbd2TELJrHPLmIXZX3wyBX8MTQMm8PJ0u9Pe9chGQYy9omvXouHu/thJqI+Ef1sZDm0AMBmfPiQsSPDuY2zhWwSH5ISU5Pjm98x9nRo7+7JVBB3wl5nJz35Vo/z/esBQUVf2+QlkD9Aw42/Ts3Au7ushdAhQ5UzJoOjE+OrV9/1tDR7cNnIax7N2bDX9nm1bUQXdz9Rp/MLwRoqAtDOzcaO7rvDrAWW8vhcatWVNjF6cmJre9embkz1947h3YfXgIUgVzblQldxgFH0ZOr/qULwM15k4Zlci4Vd9ZU5ltY71oObHBnBFQBidmUk8kEsOP7Hntwqsb974NfS8PAh7LKoo23Hw+2R4FQcSzKlDPgFOEyf8kx3HW94kQ7xJgRRdAJG7CyIWxgiXNUN0+k5nJLN83k3n8D8eHN3+1ux5+8uBHIKiWt1G1Rn3IJkiUCcQzU3G0h9qWHMeJdoSrwtr9dl6I6DNjFwRRyxiKnStSqkPJPsGSmZ+mp1P9z2dzOy3Klj31yMdmX9S8V75APEsomMZwT9fz9i6vkW9AvEgQyqrBQM2Dq9rrD0gCgXfHA0jpjIRm2Zcw+3CR2tZl27SnMZFSZ1lWcRwZITeDckresAEXaoKwwBh7/WQubgTOQj5BVjdv7KiBJz7bztMNcHIk03JiONNyfiK/ntv2VMHAMx6BjpoA/Gj9Emdjul7W7e6TeQNDK9WJLRm361P5c1drEmAaymaYoXpfjZoiOk7FHWuh5dxEHmzLHiXM9oyTz9FawRZw65f5yyzXBMpd0JGhFKB5nSwRMVvumDv2cxm4m1f5X4AuWhRePDUOtqEPQJVVGfWcBz1ahmPlTlxzqaJLquYZU1HTvjcTMD6dOULM0n+g5nKposHzdWbo7FgEkDBviWlYx++53XtQ33kvDU8dHAJm6L8usdwEZn09S3qiPed5lcCSLUpI0eEA8620zLbDl6bh8T+egkI+/7Rl6kegcTSPst1QUKaM+brhrjnF2yUQJNxnrGMnR7KbTw5nYFVjyAl98w2+VdvVlA67Dw3BgROjAKa+yyrpz0BKTbJnez1NT6AKrrnA1bEi1av2v3xaiL90dnxL2Kc0rsXc4WpcQEc8AEtiGrRiejmK6WWeMDIxtVwwKExijB5KFuBYIg1cy8dx0dTQ/yQVc78yBXMIqJ5i/VvvkqHdSjXuM/THKy7w2LQJ6fpJms38QiHGvlzBt+RwJv2JQ2elbjyRtjIi1AIRMAsKPuQduHVzr2YW+kIBE5BTwOzzxLKOiMX8QVuWh00IpqD+S0WHtLlzefpLBOZo/IYvEqQPnTX5dxmy4xookqaCjRuT4mMi8g3bxs2KCkj3GFj4+QSzA0RkeskU8iCJeUiBDv09Jt8OPEV6k7DlP3gxxh/dAPymPh/Kf5d897dIOd9P7H8oEd4G1JV8wPGbRadx52sgLmrRAZ99EZ5+LZgV+v+4Llrg/wX6HRCxgvzAAwAAAABJRU5ErkJggg==");
  }
  .stripe-connect.light-blue span:before {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAwCAYAAABuZUjcAAAKRGlDQ1BJQ0MgUHJvZmlsZQAASA2dlndUFNcXx9/MbC+0XZYiZem9twWkLr1IlSYKy+4CS1nWZRewN0QFIoqICFYkKGLAaCgSK6JYCAgW7AEJIkoMRhEVlczGHPX3Oyf5/U7eH3c+8333nnfn3vvOGQAoASECYQ6sAEC2UCKO9PdmxsUnMPG9AAZEgAM2AHC4uaLQKL9ogK5AXzYzF3WS8V8LAuD1LYBaAK5bBIQzmX/p/+9DkSsSSwCAwtEAOx4/l4tyIcpZ+RKRTJ9EmZ6SKWMYI2MxmiDKqjJO+8Tmf/p8Yk8Z87KFPNRHlrOIl82TcRfKG/OkfJSREJSL8gT8fJRvoKyfJc0WoPwGZXo2n5MLAIYi0yV8bjrK1ihTxNGRbJTnAkCgpH3FKV+xhF+A5gkAO0e0RCxIS5cwjbkmTBtnZxYzgJ+fxZdILMI53EyOmMdk52SLOMIlAHz6ZlkUUJLVlokW2dHG2dHRwtYSLf/n9Y+bn73+GWS9/eTxMuLPnkGMni/al9gvWk4tAKwptDZbvmgpOwFoWw+A6t0vmv4+AOQLAWjt++p7GLJ5SZdIRC5WVvn5+ZYCPtdSVtDP6386fPb8e/jqPEvZeZ9rx/Thp3KkWRKmrKjcnKwcqZiZK+Jw+UyL/x7ifx34VVpf5WEeyU/li/lC9KgYdMoEwjS03UKeQCLIETIFwr/r8L8M+yoHGX6aaxRodR8BPckSKPTRAfJrD8DQyABJ3IPuQJ/7FkKMAbKbF6s99mnuUUb3/7T/YeAy9BXOFaQxZTI7MprJlYrzZIzeCZnBAhKQB3SgBrSAHjAGFsAWOAFX4Al8QRAIA9EgHiwCXJAOsoEY5IPlYA0oAiVgC9gOqsFeUAcaQBM4BtrASXAOXARXwTVwE9wDQ2AUPAOT4DWYgSAID1EhGqQGaUMGkBlkC7Egd8gXCoEioXgoGUqDhJAUWg6tg0qgcqga2g81QN9DJ6Bz0GWoH7oDDUPj0O/QOxiBKTAd1oQNYSuYBXvBwXA0vBBOgxfDS+FCeDNcBdfCR+BW+Bx8Fb4JD8HP4CkEIGSEgeggFggLYSNhSAKSioiRlUgxUonUIk1IB9KNXEeGkAnkLQaHoWGYGAuMKyYAMx/DxSzGrMSUYqoxhzCtmC7MdcwwZhLzEUvFamDNsC7YQGwcNg2bjy3CVmLrsS3YC9ib2FHsaxwOx8AZ4ZxwAbh4XAZuGa4UtxvXjDuL68eN4KbweLwa3gzvhg/Dc/ASfBF+J/4I/gx+AD+Kf0MgE7QJtgQ/QgJBSFhLqCQcJpwmDBDGCDNEBaIB0YUYRuQRlxDLiHXEDmIfcZQ4Q1IkGZHcSNGkDNIaUhWpiXSBdJ/0kkwm65KdyRFkAXk1uYp8lHyJPEx+S1GimFLYlESKlLKZcpBylnKH8pJKpRpSPakJVAl1M7WBep76kPpGjiZnKRcox5NbJVcj1yo3IPdcnihvIO8lv0h+qXyl/HH5PvkJBaKCoQJbgaOwUqFG4YTCoMKUIk3RRjFMMVuxVPGw4mXFJ0p4JUMlXyWeUqHSAaXzSiM0hKZHY9O4tHW0OtoF2igdRzeiB9Iz6CX07+i99EllJWV75RjlAuUa5VPKQwyEYcgIZGQxyhjHGLcY71Q0VbxU+CqbVJpUBlSmVeeoeqryVYtVm1Vvqr5TY6r5qmWqbVVrU3ugjlE3VY9Qz1ffo35BfWIOfY7rHO6c4jnH5tzVgDVMNSI1lmkc0OjRmNLU0vTXFGnu1DyvOaHF0PLUytCq0DqtNa5N03bXFmhXaJ/RfspUZnoxs5hVzC7mpI6GToCOVGe/Tq/OjK6R7nzdtbrNug/0SHosvVS9Cr1OvUl9bf1Q/eX6jfp3DYgGLIN0gx0G3QbThkaGsYYbDNsMnxipGgUaLTVqNLpvTDX2MF5sXGt8wwRnwjLJNNltcs0UNnUwTTetMe0zg80czQRmu836zbHmzuZC81rzQQuKhZdFnkWjxbAlwzLEcq1lm+VzK32rBKutVt1WH60drLOs66zv2SjZBNmstemw+d3W1JZrW2N7w45q52e3yq7d7oW9mT3ffo/9bQeaQ6jDBodOhw+OTo5ixybHcSd9p2SnXU6DLDornFXKuuSMdfZ2XuV80vmti6OLxOWYy2+uFq6Zroddn8w1msufWzd3xE3XjeO2323Ineme7L7PfchDx4PjUevxyFPPk+dZ7znmZeKV4XXE67m3tbfYu8V7mu3CXsE+64P4+PsU+/T6KvnO9632fein65fm1+g36e/gv8z/bAA2IDhga8BgoGYgN7AhcDLIKWhFUFcwJTgquDr4UYhpiDikIxQODQrdFnp/nsE84by2MBAWGLYt7EG4Ufji8B8jcBHhETURjyNtIpdHdkfRopKiDke9jvaOLou+N994vnR+Z4x8TGJMQ8x0rE9seexQnFXcirir8erxgvj2BHxCTEJ9wtQC3wXbF4wmOiQWJd5aaLSwYOHlReqLshadSpJP4iQdT8YmxyYfTn7PCePUcqZSAlN2pUxy2dwd3Gc8T14Fb5zvxi/nj6W6pZanPklzS9uWNp7ukV6ZPiFgC6oFLzICMvZmTGeGZR7MnM2KzWrOJmQnZ58QKgkzhV05WjkFOf0iM1GRaGixy+LtiyfFweL6XCh3YW67hI7+TPVIjaXrpcN57nk1eW/yY/KPFygWCAt6lpgu2bRkbKnf0m+XYZZxl3Uu11m+ZvnwCq8V+1dCK1NWdq7SW1W4anS1/+pDa0hrMtf8tNZ6bfnaV+ti13UUahauLhxZ77++sUiuSFw0uMF1w96NmI2Cjb2b7Dbt3PSxmFd8pcS6pLLkfSm39Mo3Nt9UfTO7OXVzb5lj2Z4tuC3CLbe2emw9VK5YvrR8ZFvottYKZkVxxavtSdsvV9pX7t1B2iHdMVQVUtW+U3/nlp3vq9Orb9Z41zTv0ti1adf0bt7ugT2ee5r2au4t2ftun2Df7f3++1trDWsrD+AO5B14XBdT1/0t69uGevX6kvoPB4UHhw5FHupqcGpoOKxxuKwRbpQ2jh9JPHLtO5/v2pssmvY3M5pLjoKj0qNPv0/+/tax4GOdx1nHm34w+GFXC62luBVqXdI62ZbeNtQe395/IuhEZ4drR8uPlj8ePKlzsuaU8qmy06TThadnzyw9M3VWdHbiXNq5kc6kznvn487f6Iro6r0QfOHSRb+L57u9us9ccrt08rLL5RNXWFfarjpebe1x6Gn5yeGnll7H3tY+p772a87XOvrn9p8e8Bg4d93n+sUbgTeu3px3s//W/Fu3BxMHh27zbj+5k3Xnxd28uzP3Vt/H3i9+oPCg8qHGw9qfTX5uHnIcOjXsM9zzKOrRvRHuyLNfcn95P1r4mPq4ckx7rOGJ7ZOT437j154ueDr6TPRsZqLoV8Vfdz03fv7Db56/9UzGTY6+EL+Y/b30pdrLg6/sX3VOhU89fJ39ema6+I3am0NvWW+738W+G5vJf49/X/XB5EPHx+CP92ezZ2f/AAOY8/wRDtFgAAAHH0lEQVRoBdVZ628UVRS/857dme3strvblpaXCiI+WkCkpFAoECAgr0oqxASjiAZMiF9MiI80/AfqB+WD3/xABOMrKCgRJCBSLCACQUEIEai8ywJ97GNm/J3ZbizM7C7trpG9m7N39t5z7/2dM+eec+5dzrZtVoqFL0XQhLlkgYulpnGOYxxhLjngW7Zsdayk5IB3RyJSSWrcMP1aSQJPJfnwoIA3LFhTy3hrAdx+IzbIOMbsGkQAR3pM1Icdcxv1ZZtxf+D5OGPm3vbJo4/YbW0WLVSswglCLc3F5QtAzyx6ZbbA7Hc5jp8hCAIj4nmecTy2NyRwCqShOEZzWZbFTMtkpmky27Ku2Da36cC2j9vSjIV/b93RsZpmybo5n2htlct6yz6SReFlWZaZIitMURRGz6IkMoEXHPAOFAewnQacSrFkMsUSiTgoEU0kk4vBUzTgHM87GvcE3traKgTjxleyT5mvaTrTdY2pqo9JBNjReBp0v0sFLtI4tA2ClqFtIpPF43EIEdcd4Yr0hSWy23hnIvi2T/PPDwaDLBAIMFVRmSACbMY0XCDSImTCsOOvYDr0hqxUQnGxF9AA4/T2Ks2LXwsD9Iby8nIWNIJMVmTGZwWcAwFW4AWIYmfEycE7mC6OZfHjqviCYZT5gobhaIw24VALjRz6aO9Vsdm9I6eu6XN1mIcC8+ALAO0sS28qvY43iiG0csxydOHanJqm1ZFNk8vLp67hVeHjLfMbvx9ZHY7Fbvco17pi2vlL1youXemKXLh8Y8SV610jelPJIcDLP8QFXJHlELm77BsxPaltW6xx4vgDo2uiN6klZOh9RGNG1VzHz1Ogn6j99LkLcaqLXVzA4acRnIS82k6lTLbjx/aqhgmPvglQMZAMItcXAkVAw4nGjKq9hbroxQVcVeVenuN9//po7zUpQp44ffbZOSvWb48nEhv3fr5pBzhJu6TxP0E/g6iUpavifrt8VUXIuEC27eyrHDVFTtoLiqo2SKK4vem5tQebWl5dwW3ceO+c/4nG712EwUaPIhDmRU5RtMwoY5FwhIXg83VNmyxJ6uamY5ePNbWsXVFc/bpncwFfMnvqN4oi3iRTyfXh+zVO0bUyGmXRykpWXkEC6ONlWdo8c/m6L+atWpXJHt0rF9jiAq7rvpPzGuu/hqlYjjskr5mFKDiRB/Ijtw8FQywaibJKCEBvwOf3L032lf0wbcnqQIEYPYe7gIPrRPPU+kONk8Z/jVAPb38fH0gpiiLA+lgwaDgCRMJhJGf6FFXV3vNcucBGL+Am5ty2dM6UjkWzp3ziU+Vb+TZqpp9yGhLADwFCoXKYTgVD3vPSrBXr6wrE6RruBZyYzoK+nT7psdMb1rS8P+Hxh3bKstiT19X0S4CcGSmDzAzkO9gDHHL5510rF9jg8uMD5juC55jfry5aubBpb+xOz8Fd+3+rO3bqr6ndvX0VA/i8HyEEHT4CeoAl4/GFYHrLm3Fordk0npmNNP8haJeh+7uWzW04+M665R9MmzT+S0kU+jImkq2mJE1RFab6fA9nJixWnUvjmTUoS6K84xfQU0i+piya9fRhjrftfR2/L3M8TobToxYFEScnqehu0QW8ufX1eoGXJPNy6Mju3W2pAVgSeO4AHQLV+SR5pIVES+CQ1+QolPeoqlr0RMsFXJTkpXDbbVxVV/eclW+04wjTDod4HGe907aQuiImOV7RfbXVVdWNeqCMCUpu4ORM4Zl6csg2pC4X8GHRsNbdl6BrBs1MpWbh4DuLrhvoEGzZODVJHA7GPOuLJ5iG0ELAchUcn5mh63/n4hlKnwt4bW11uCvW65x+cLXAkgkQDgMpXDtQRkhAydXRKQnJVTqq5liZTv/V0dDJHCyD6rIZT5mU+15Fgk36/X7n/oQ0beGawQTgtMZxT4UP2a1zt4I6n8bxPlLNU+u+GxS6HMwch43lBZzu+tHpXPaIPDRKWi2gPDKi6sDo2sqjBUxx91CbOWdBN6r+hCqfJu+ezfuXEfCdX7lw+k70nvDmGHwr7KSbRrmA9+POa7v5lgwHA2debJn5KSIvxQBnsXxj7qcfwe4a8bmAD4tWnLp6s7uzN2lWw33kdhkeK/lUpat+3Kg9C2ZMPIzuC6A9HmxDbsJeozndwNesXLCf2mO376gnz3TW4Jph2I3Y7cidnr7ynt54MJky/ZZli8jFTZHnE7Ikdmt+9Ua0wjg/bvSwM0+OHXER0ZV2PqULn4EGBjH8LKzgJH+OZnBpHG3kczuNgF7dUD/2DJ6JBlO6wLwP9OtgBt0vr22a3hrHBHQnQkSXlTWgahBlg+WgIMgHIoEpb6cdTvZ7A3QRRFruBDm+FnXRiyhZ3jY+YCXKLwgI0QNTYkKPt1d5YBBmAaJdver48bx/pWQZ/781wx06nq7kgGc0lu8ElOF74OqSBf4P9hj31KSAw4AAAAAASUVORK5CYII=");
  }
}
.modal-connect-coinbase-header {
  padding: 20px 15px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--black) 8%, transparent);
  background: #14497b;
  background-image: linear-gradient(to bottom, #14497b 0%, #2162a2 100%);
  border-radius: 3px 3px 0 0;
}

.modal-connect-coinbase-logo {
  width: 110px;
}

.btn.coinbase-connect-btn {
  font-size: 12px;
  text-transform: uppercase;
  height: 50px;
  letter-spacing: 0.05em;
  border-radius: 2px;
  padding: 17px 30px;
  width: 100%;
  transition: all var(--transition-fast) ease;
  border-color: #137dba;
  background-image: linear-gradient(#0e86c4, #0e86c4);
  box-shadow: 0 2px 1px color-mix(in srgb, var(--black) 10%, transparent);
}

.modal-connect-coinbase-copy {
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 16px;
  text-align: left;
}
.modal-connect-coinbase-copy a {
  text-decoration: underline;
  color: #6d6d6d;
}

.modal-connect-coinbase-copy2 {
  margin-bottom: 30px;
  font-weight: 400;
  font-size: 14px;
  text-align: left;
}
.modal-connect-coinbase-copy2 a {
  text-decoration: underline;
  color: #6d6d6d;
}

.modal-connect-paypal-logo {
  width: 140px;
}

.modal-connect-paypal-copy {
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 16px;
}

.modal-connect-paypal-copy2 {
  margin-bottom: 30px;
  font-weight: 400;
  font-size: 14px;
}

.paypal-connect-btn {
  width: 100%;
  background: var(--paypal-blue);
  border-color: var(--paypal-blue);
  background-image: linear-gradient(to right, var(--paypal-blue) 0%, color-mix(in srgb, var(--paypal-blue) 95%, var(--black)) 100%);
}
.paypal-connect-btn:focus, .paypal-connect-btn:visited {
  background: var(--paypal-blue);
  border-color: var(--paypal-blue);
  background-image: linear-gradient(to right, var(--paypal-blue) 0%, color-mix(in srgb, var(--paypal-blue) 95%, var(--black)) 100%);
}
.paypal-connect-btn:hover, .paypal-connect-btn:active {
  background: color-mix(in srgb, var(--paypal-blue) 98%, transparent);
  border-color: color-mix(in srgb, var(--paypal-blue) 98%, transparent);
  background-image: linear-gradient(to right, color-mix(in srgb, var(--paypal-blue) 98%, transparent) 0%, color-mix(in srgb, var(--paypal-blue) 97%, var(--black)) 100%);
}

.modal-payment-methods-body {
  position: relative;
  padding: 40px 20px 20px;
  border-radius: 6px 6px 0 0;
}
@media (min-width: 768px) {
  .modal-payment-methods-body {
    padding: 40px;
  }
}

.modal-payment-methods-save-button {
  width: 100%;
}

.modal-payment-methods-spinner-bg {
  position: absolute;
  display: none;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
}

.modal-payment-methods-title {
  margin-bottom: 10px;
  font-family: var(--font-display-header);
  font-size: 22px;
  text-align: left;
}

.modal-payment-methods-subtitle {
  margin-bottom: 20px;
  font-size: 16px;
  text-align: left;
  color: var(--text-muted);
}

.modal-payment-methods-subtitle-icon {
  position: relative;
  display: inline-block;
  top: -2px;
  margin-left: 3px;
  font-size: 16px;
}

.modal-payment-methods-benefits {
  position: relative;
  z-index: 2;
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 20px;
  color: var(--text-default);
  background: var(--bg-content);
  font-weight: 500;
  border: 1px solid var(--border-content-alt);
  border-radius: 8px;
}

.modal-payment-methods-benefit {
  position: relative;
  margin-bottom: 10px;
  padding-left: 27px;
  font-size: 14px;
}
.modal-payment-methods-benefit:last-child {
  margin-bottom: 0;
}

.modal-payment-methods-benefit-icon {
  position: absolute;
  left: 0;
  top: -4px;
  font-size: 30px;
  line-height: 0;
  color: var(--color-primary);
}

.modal-payment-methods-item {
  position: relative;
  margin-bottom: 10px;
  padding: 30px 24px;
  text-align: left;
  cursor: default;
  background-color: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 10px;
}
.modal-payment-methods-item:last-child {
  margin-bottom: 0;
}
.modal-payment-methods-item.unavailable {
  opacity: 0.5;
}
.modal-payment-methods-item.offline-payments {
  padding: 20px 24px 16px;
}
.modal-payment-methods-item.offline-payments .form-switch-field.disabled.active {
  opacity: 1;
}
.modal-payment-methods-item .tooltip-inner {
  max-width: 350px;
}
.modal-payment-methods-item .ion-alert-circled {
  position: relative;
  margin-left: 3px;
  font-size: 13px;
  color: var(--color-accent-orange);
  opacity: 0.7;
}

.modal-payment-methods-item-logo {
  display: block;
  width: 140px;
  height: auto;
}
.modal-payment-methods-item-logo.stripe {
  width: 75px;
}
.modal-payment-methods-item-logo.paypal {
  width: 80px;
  margin-top: -5px;
}

.modal-payment-methods-item-cta {
  display: block;
  margin-top: 30px;
  margin-left: auto;
}
@media (min-width: 768px) {
  .modal-payment-methods-item-cta {
    position: absolute;
    display: inline-block;
    right: 30px;
    top: 30px;
    margin: 0;
  }
}

.modal-payment-methods-item-fees {
  margin-left: 15px;
  font-size: 12px;
  padding-top: 3px;
}
.modal-payment-methods-item-fees, .modal-payment-methods-item-fees:focus, .modal-payment-methods-item-fees:visited {
  color: var(--text-muted);
}
.modal-payment-methods-item-fees:hover, .modal-payment-methods-item-fees:active {
  color: var(--text-muted);
}

.modal-payment-methods-item-fees-icon {
  position: relative;
  display: inline-block;
  top: 1px;
  transform: scale(1.3);
}

.modal-payment-method-fees-on-toggle {
  position: relative;
  margin-top: 5px;
}
.modal-payment-method-fees-on-toggle .modal-payment-methods-item-fees {
  margin-left: 56px;
}
@media (min-width: 768px) {
  .modal-payment-method-fees-on-toggle {
    position: absolute;
    right: 0;
    top: 3px;
    margin-top: 0;
    margin-left: 0;
  }
}

.modal-payment-method-fees-on-section {
  position: absolute;
  z-index: 2;
  right: 30px;
  bottom: 38px;
}

.modal-payment-methods-item-icons {
  margin-top: 20px;
}

.modal-payment-method-status {
  position: absolute;
  right: 30px;
  top: 30px;
  color: var(--color-primary);
  font-weight: 600;
}

.modal-payment-method-status-icon {
  margin-right: 5px;
}

.modal-payment-methods-option {
  position: relative;
  margin-top: 30px;
}

.modal-payment-methods-option-label {
  display: flex;
}

.modal-payment-methods-item-toggle {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  text-align: center;
  padding-top: 4px;
  font-size: 13px;
  color: transparent;
  cursor: pointer;
  background: var(--bg-grey-e);
  border: 1px solid var(--border-content);
  border-radius: 4px;
  transition: all var(--transition-normal) ease;
}
.modal-payment-methods-item-toggle:hover {
  background: color-mix(in srgb, var(--bg-grey-e) 98%, transparent);
}
.modal-payment-methods-item.unavailable .modal-payment-methods-item-toggle {
  pointer-events: none;
}
.modal-payment-methods-item-toggle.active {
  color: var(--color-primary-contrast);
  background: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 98%, var(--black));
}
.modal-payment-methods-item-toggle.active:hover {
  background: color-mix(in srgb, var(--color-primary) 98%, transparent);
}

.modal-payment-methods-item-name {
  font-weight: 600;
  font-size: 16px;
}
.modal-payment-methods-item-name, .modal-payment-methods-item-name:visited, .modal-payment-methods-item-name:focus, .modal-payment-methods-item-name:hover, .modal-payment-methods-item-name:active {
  color: var(--text-default);
}

.modal-payment-methods-item-limit {
  margin-left: 2px;
  color: var(--text-lighter);
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
}

.modal-payment-methods-item-description {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-lighter);
  display: none;
}

.modal-payment-methods-item-edit-link {
  display: inline-block;
  margin-left: 5px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
}

.modal-payment-methods-item-inline-edit {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
}

.modal-payment-methods-auto-pay-note {
  padding-top: 25px;
  margin-top: 30px;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-content);
}

.modal-payment-methods-apply-all {
  position: relative;
  margin-top: 20px;
  padding: 20px;
  color: var(--text-muted);
  user-select: none;
  font-size: 16px;
  font-weight: 600;
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.modal-payment-methods-apply-all-checkbox {
  position: absolute;
  left: 0;
  top: 18px;
}

.modal-payment-methods-apply-all-label {
  margin: 0;
  cursor: pointer;
}

.modal-connect-methods-copy {
  margin-bottom: 30px;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
}

.modal-connect-methods-send-anyway {
  margin-top: 30px;
}

.modal-connect-methods-send-anyway-link {
  text-decoration: underline;
  text-align: center;
  font-size: 16px;
  color: var(--text-lighter);
}
.modal-connect-methods-send-anyway-link:focus, .modal-connect-methods-send-anyway-link:visited {
  color: var(--text-lighter);
}
.modal-connect-methods-send-anyway-link:hover {
  color: var(--text-muted-alt);
  text-decoration: underline;
}

.modal-connect-methods-button {
  margin: 10px 0px 10px;
}

.modal-payment-fees-section-promo {
  position: relative;
  z-index: 2;
  padding: 40px;
  border-bottom: 1px solid var(--border-content);
  box-shadow: 0 0 14px color-mix(in srgb, var(--bg-shadow) 4%, transparent);
}

.modal-payment-fees-section-promo-content {
  position: relative;
}

.modal-payment-fees-section-promo-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 29%;
  height: 29%;
  opacity: 0.8;
  border-top-left-radius: 6px;
  background-position: right bottom;
  background-size: cover;
  background-image: url("welcome_states/welcome-state-background-1.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .modal-payment-fees-section-promo-bg {
    background-image: url("welcome_states/welcome-state-background-1@2x.png");
  }
}

.modal-payment-fees-section-promo-bg2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18%;
  height: 45%;
  opacity: 0.8;
  background-position: top left;
  background-size: cover;
  background-image: url("welcome_states/welcome-state-background-2.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .modal-payment-fees-section-promo-bg2 {
    background-image: url("welcome_states/welcome-state-background-2@2x.png");
  }
}

.modal-payment-fees-section-title {
  margin-bottom: 20px;
  font-size: 18px;
}

.modal-payment-fees-section-notice {
  margin-top: 15px;
  font-size: 12px;
  font-style: italic;
  color: var(--text-lighter);
}

.modal-payment-fees-section-title {
  margin-bottom: 20px;
  font-size: 18px;
}

.modal-payment-fees-section-subtitle {
  color: var(--color-primary);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 600;
}

.modal-payment-fees-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
}
.modal-payment-fees-item:last-child {
  margin-bottom: 0;
}

.modal-payment-fees-item-name {
  font-weight: 600;
}

.modal-payment-fees-item-rate {
  text-align: right;
  color: var(--text-muted);
}
.modal-payment-fees-item-rate.promo {
  color: var(--color-primary);
  font-weight: 600;
}

.modal-resend-verify-body {
  text-align: center;
  font-size: 16px;
}

.modal-resend-verify-address {
  margin-top: 20px;
  font-size: 16px;
}

.modal-resend-verify-address-email {
  position: relative;
  font-weight: 600;
  padding: 10px;
  word-break: break-word;
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
}

.modal-resend-verify-address-email-input {
  display: block;
  text-align: center;
}

.modal-resend-verify-address-label {
  position: relative;
  margin-bottom: 10px;
}

button.modal-resend-verify-address-link {
  padding: 0 !important;
  color: var(--color-primary);
  cursor: pointer;
  background: none !important;
  border: none;
  appearance: none;
  text-transform: none;
}

.modal-resend-verify-edit {
  padding: 20px 30px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  border-top: 1px solid var(--border-content-alt);
}

.modal-selection-list-item-unbilled-time-entries.ongoing {
  color: var(--text-lighter);
  cursor: default;
}
.modal-selection-list-item-unbilled-time-entries.ongoing:hover {
  color: var(--text-lighter);
  box-shadow: none;
}
.modal-selection-list-item-unbilled-time-entries .modal-selection-list-item-column.date {
  font-weight: 600;
}
@media (max-width: 768px) {
  .modal-selection-list-item-unbilled-time-entries .modal-selection-list-item-column.time {
    font-weight: 600;
  }
  .modal-selection-list-item-unbilled-time-entries .modal-selection-list-item-column.time, .modal-selection-list-item-unbilled-time-entries .modal-selection-list-item-column.owner {
    text-align: right;
  }
}

.modal-support-bg1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 36%;
  height: 30%;
  border-top-right-radius: 6px;
  background-position: right bottom;
  background-size: cover;
  background-image: url("support/support-background-1.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .modal-support-bg1 {
    background-image: url("support/support-background-1@2x.png");
  }
}

.modal-support-bg2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 67%;
  height: 18%;
  border-bottom-left-radius: 6px;
  background-position: top left;
  background-size: cover;
  background-image: url("support/support-background-2.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .modal-support-bg2 {
    background-image: url("support/support-background-2@2x.png");
  }
}

.modal-support-content {
  position: relative;
  z-index: 2;
}

.modal-support-copy {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

.modal-support-copy-line2 {
  font-weight: 500;
  color: var(--text-lighter);
}

.modal-support-separator {
  margin-top: 35px;
  margin-bottom: 30px;
  border-top: 1px solid var(--border-content);
}

.modal-pricing-item {
  margin-bottom: 25px;
}
.modal-pricing-item:last-child {
  margin-bottom: 0;
}
.modal-pricing-item h4 {
  margin-bottom: 10px;
  font-weight: 600;
}
.modal-pricing-item p {
  color: var(--text-muted);
  font-size: 16px;
  padding: 5px 0px;
}
.modal-pricing-item li {
  color: var(--text-muted);
  font-size: 16px;
}

.modal-pricing-customer-support {
  padding-top: 30px;
  color: var(--text-lighter);
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  border-top: 1px solid var(--border-content);
}

.edit-client-modal .avatar-img {
  position: relative;
  cursor: pointer;
}

#AUTOMATION_MODAL_FORM .modal-title .category-tag {
  cursor: default;
  margin: 0 0 0 15px;
  border-radius: 32px;
  height: auto;
  top: -3px;
  font-weight: 600;
  font-size: 9px;
  line-height: 11px;
  padding: 3px 9px;
  text-transform: uppercase;
  color: #676BBD;
}
#AUTOMATION_MODAL_FORM .modal-title .category-tag .category-tag-bg {
  background-color: #EAEAFB;
}

.overlay-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 20px 60px 20px 20px;
  background-color: var(--bg-content);
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .overlay-header {
    flex-direction: row;
    justify-content: space-between;
    padding: 20px;
  }
}

.overlay-header-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.overlay-header-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.428571429;
}
@media (min-width: 768px) {
  .overlay-header-title {
    padding-top: 3px;
  }
}

.overlay-header-actions {
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: var(--bg-content);
  border-top: 1px solid var(--border-content);
}
.overlay-header-actions .btn {
  flex: 1;
}
@media (min-width: 768px) {
  .overlay-header-actions {
    display: flex;
    position: relative;
    bottom: auto;
    left: auto;
    width: auto;
    padding: 0;
    background-color: transparent;
    border-top: none;
  }
  .overlay-header-actions .btn {
    flex: auto;
  }
}

.overlay-header-close {
  position: fixed;
  z-index: 10;
  right: 7px;
  top: 7px;
  padding: 20px 20px;
}

.overlay-header-close-icon {
  width: 16px;
  height: auto;
}
.overlay-header-close-icon path {
  fill: var(--text-lighter);
}

.overlay-close-icon {
  width: 15px;
  height: 15px;
  transition: all var(--transition-slower) ease;
}
@media (min-width: 768px) {
  .overlay-close-icon {
    width: 18px;
    height: 18px;
  }
}
.overlay-close-icon path {
  fill: var(--text-lighter);
}
.upgrade-overlay-skip-link:hover .overlay-close-icon path {
  fill: var(--text-muted);
}
.upgrade-overlay.upgrade-overlay--sticky-header .overlay-close-icon {
  width: 15px;
  height: auto;
}

.overlay-split-editor {
  display: flex;
  flex-direction: column-reverse;
  overflow: scroll;
}
@media (min-width: 768px) {
  .overlay-split-editor {
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: 100vh;
    height: calc(100vh - 81px);
  }
}

.overlay-split-editor-form {
  flex: 1;
}
@media (min-width: 768px) {
  .overlay-split-editor-form {
    max-width: 50%;
  }
}

.overlay-split-editor-preview {
  position: absolute;
  display: none;
  right: 0;
  top: 81px;
  width: 50%;
  bottom: 0;
  overflow: scroll;
  background-color: var(--bg-grey-fc);
  border-left: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .overlay-split-editor-preview {
    display: block;
  }
}

@media (min-width: 768px) {
  .bonsai-payments-payouts-balance-section {
    width: 50%;
    padding-right: 60px;
  }
}

.bonsai-payments-payouts-balance {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
}

.bonsai-payments-payouts-balance-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}
.bonsai-payments-payouts-balance-item:last-child {
  margin-bottom: 0;
}

.bonsai-payments-section-balance-header {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-default);
  white-space: nowrap;
}

.bonsai-payments-payouts-balance-total {
  font-size: 14px;
}

.bonsai-payments-payouts-balance-currency {
  padding-left: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-lighter);
  text-transform: uppercase;
}

.bonsai-payments-payouts-balance-note {
  margin-top: 2px;
  color: var(--text-lighter);
  font-size: 12px;
  font-weight: 500;
}

.bonsai-payments-footer-links {
  padding: 20px 0 0;
}

.bonsai-payments-footer-links-other {
  flex: 1;
  text-align: right;
}

.bonsai-payments-payouts-history-section {
  margin-top: 40px;
}

.bonsai-payments-payouts-history-toggle {
  position: relative;
  display: block;
  padding: 20px 20px 20px 54px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-default);
  cursor: pointer;
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
  transition: all 0.2s ease;
}
.bonsai-payments-payouts-history-toggle:hover {
  border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.bonsai-payments-payouts-history-toggle.showing {
  border-color: var(--border-content-alt);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.bonsai-payments-payouts-history-toggle-icon {
  position: absolute;
  left: 22px;
  top: 18px;
  color: var(--text-lighter);
  font-size: 18px;
}

.bonsai-payments-payouts-history-toggle-caret {
  position: absolute;
  right: 20px;
  top: 20px;
  color: var(--text-lightest);
  font-size: 16px;
  transform-origin: 50% 50%;
}
.bonsai-payments-payouts-history-toggle.showing .bonsai-payments-payouts-history-toggle-caret {
  transform: rotate(180deg);
}

.bonsai-payments-payouts-history {
  border: 1px solid var(--border-content);
  border-top: 0;
  border-radius: 0 0 6px 6px;
}

.bonsai-payments-section-deactivate-btn {
  margin-left: 30px;
}
.bonsai-payments-section-deactivate-btn, .bonsai-payments-section-deactivate-btn:focus, .bonsai-payments-section-deactivate-btn:visited {
  color: var(--color-danger);
}
.bonsai-payments-section-deactivate-btn:hover, .bonsai-payments-section-deactivate-btn:active {
  color: var(--color-danger);
}

.bonsai-payments-list-toggles {
  box-shadow: inset 0 -1px 0 var(--border-content);
}

.bonsai-payments-list-toggle {
  display: inline-block;
  padding: 11px 0 8px;
  margin-left: 20px;
  font-weight: 600;
  color: var(--text-lighter);
  border-bottom: 2px solid transparent;
}
.bonsai-payments-list-toggle.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.bonsai-payments-payouts-list {
  padding: 30px;
}

.bonsai-payments-payouts-list-empty {
  color: var(--text-lighter);
}

.bonsai-payments-list-item-status {
  color: var(--text-lighter);
  font-weight: 600;
}
.bonsai-payments-list-item-status.disbursed, .bonsai-payments-list-item-status.paid {
  color: var(--color-primary);
}
.bonsai-payments-list-item-status.failed {
  color: var(--color-danger);
}
.bonsai-payments-list-item-status.pending {
  color: var(--color-info);
}
.bonsai-payments-list-item-status.refunded {
  color: var(--text-lighter);
}

.bonsai-payments-list-item-status-icon {
  margin-right: 5px;
  font-size: 0.9em;
}

.bonsai-payments-list-item-id {
  color: var(--text-lighter);
}

.bonsai-payments-destination-section {
  margin-top: 60px;
}

.bonsai-payments-logo-img {
  display: block;
  width: 150px;
  height: auto;
}

.bonsai-payments-signup-modal-body {
  padding: 40px;
  text-align: center;
  border-radius: 6px;
}

.bonsai-payments-signup-leaf {
  position: absolute;
  display: none;
  top: -13px;
  left: -59px;
  width: 243px;
  height: 130px;
  background: transparent top left no-repeat;
  background-size: contain;
  background-image: url("leaves/leaf-05.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .bonsai-payments-signup-leaf {
    background-image: url("leaves/leaf-05@2x.png");
  }
}
@media (min-width: 768px) {
  .bonsai-payments-signup-leaf {
    display: block;
  }
}

.bonsai-payments-signup-header {
  position: relative;
  padding: 0 0 30px;
  text-align: center;
}

.bonsai-payments-signup-icon {
  display: inline-block;
  width: 40px;
  height: auto;
}

.bonsai-payments-signup-form {
  position: relative;
  padding: 0 0 30px;
}
@media (min-width: 480px) {
  .bonsai-payments-signup-form {
    padding: 0 30px 30px;
  }
}

.bonsai-payments-signup-legal {
  margin-top: 20px;
  color: var(--text-lighter);
  font-size: 12px;
  font-weight: 500;
}
.bonsai-payments-signup-legal a,
.bonsai-payments-signup-legal a:focus,
.bonsai-payments-signup-legal a:visited,
.bonsai-payments-signup-legal a:hover,
.bonsai-payments-signup-legal a:active {
  color: var(--text-lighter);
}
.bonsai-payments-signup-legal a:hover,
.bonsai-payments-signup-legal a:active {
  text-decoration: underline;
}

.bonsai-payments-auto-pay-notice {
  margin-top: 10px;
  padding: 11px;
  background: var(--bg-info-light);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 3px;
  color: var(--text-default);
  font-size: 13px;
}

.bonsai-payments-settings {
  margin-top: 40px;
}
@media (min-width: 768px) {
  .bonsai-payments-settings {
    display: flex;
  }
}

.bonsai-payments-section {
  position: relative;
  flex-direction: column;
  margin-bottom: 30px;
  text-align: left;
  font-weight: 500;
}
.bonsai-payments-section:last-child {
  margin-bottom: 0;
  border-right: 0;
}
@media (min-width: 768px) {
  .bonsai-payments-section {
    display: flex;
    flex: 1;
    margin-bottom: 0;
  }
}

.bonsai-payments-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 16px;
  color: var(--text-default);
}
.bonsai-payments-section-header.with-link {
  justify-content: flex-start;
}
.bonsai-payments-section-header.with-link a {
  color: var(--text-default);
}

.bonsai-payments-section-header-links {
  font-size: 12px;
}
@media (min-width: 768px) {
  .bonsai-payments-section-header-links {
    font-size: 14px;
  }
}

.bonsai-payments-verification-pending, .bonsai-payments-verification-warning {
  position: relative;
  min-height: 90px;
  margin-bottom: 40px;
  font-weight: 500;
  border: 1px solid var(--border-content);
  border-radius: 6px;
}

.bonsai-payments-verification-pending {
  color: var(--text-default);
  background: var(--bg-content-alt);
}
.bonsai-payments-verification-pending a:not(.btn),
.bonsai-payments-verification-pending a:not(.btn):focus,
.bonsai-payments-verification-pending a:not(.btn):visited {
  color: var(--text-default);
  text-decoration: underline;
}
.bonsai-payments-verification-pending a:not(.btn):hover,
.bonsai-payments-verification-pending a:not(.btn):active {
  color: color-mix(in srgb, var(--text-default) 95%, transparent);
}
.bonsai-payments-verification-pending .bonsai-payments-verification-section {
  padding-right: 40px;
}
.bonsai-payments-verification-pending .bonsai-payments-verification-section.with-cta {
  padding-right: 200px;
}
.bonsai-payments-verification-pending .bonsai-payments-verification-section.within-modal {
  padding-right: 30px;
}

.bonsai-payments-verification-pending-icon {
  position: absolute;
  top: 27px;
  left: 22px;
  width: 20px;
  height: 20px;
  opacity: 0.5;
  animation: container-rotate var(--transition-slower) linear infinite;
}

.bonsai-payments-verification-info-icon {
  position: absolute;
  top: 27px;
  left: 22px;
  width: 20px;
  height: 20px;
}

.bonsai-payments-verification-warning {
  color: var(--text-default);
  background: var(--bg-content-alt);
  border: 1px solid color-mix(in srgb, var(--color-danger) 20%, transparent);
}
.bonsai-payments-verification-warning a:not(.btn),
.bonsai-payments-verification-warning a:not(.btn):focus,
.bonsai-payments-verification-warning a:not(.btn):visited {
  color: inherit;
  text-decoration: underline;
}
.bonsai-payments-verification-warning a:not(.btn):hover,
.bonsai-payments-verification-warning a:not(.btn):active {
  color: inherit;
}
.bonsai-payments-verification-warning.warning-banner {
  background: color-mix(in srgb, var(--color-accent-orange) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent-orange) 20%, transparent);
}

.bonsai-payments-verification-section {
  padding: 25px 30px 25px 60px;
}
@media (min-width: 768px) {
  .bonsai-payments-verification-section {
    padding-right: 210px;
  }
}
.bonsai-payments-verification-section.within-modal {
  padding-right: 30px;
}

.bonsai-payments-verification-section-icon {
  position: absolute;
  top: 27px;
  left: 22px;
  width: 20px;
  height: auto;
}
.bonsai-payments-verification-section-icon.warning-banner-icon path {
  fill: var(--color-accent-orange);
}

.bonsai-payments-verification-title {
  font-size: 16px;
}

.bonsai-payments-verification-subcopy {
  margin-top: 7px;
  font-weight: 400;
  color: var(--text-muted);
}
.bonsai-payments-verification-warning .bonsai-payments-verification-subcopy {
  color: var(--text-muted);
}

.bonsai-payments-verification-cta {
  margin-top: 20px;
}
@media (min-width: 768px) {
  .bonsai-payments-verification-cta {
    position: absolute;
    top: 50%;
    right: 30px;
    margin-top: 0;
    transform: translateY(-50%);
  }
}
.bonsai-payments-verification-section.within-modal .bonsai-payments-verification-cta {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  margin-top: 20px;
}

.bonsai-payments-return-to-cta {
  position: absolute;
  top: 10px;
  right: 30px;
}

.bonsai-payments-verification-list-item {
  padding: 5px 15px;
}
.bonsai-payments-verification-list-item:last-child {
  padding-bottom: 15px;
}

.bonsai-payments-verification-detail-item {
  padding-bottom: 10px;
  padding-left: 30px;
  font-weight: 500;
  font-style: italic;
}

.bonsai-payments-payout-secure-notice {
  padding: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-lighter);
}

.bonsai-payments-payout-account {
  padding: 15px;
  margin-top: 10px;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.bonsai-payments-payout-account-country {
  display: flex;
  margin-top: 10px;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--text-lighter);
}

.bonsai-payments-payout-account-country-label {
  margin-right: 2px;
  text-transform: none;
}

.bonsai-payments-payout-debit-card {
  padding: 20px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
}
@media (min-width: 768px) {
  .bonsai-payments-payout-debit-card {
    padding: 40px;
  }
}

.bonsai-payments-payout-debit-card-copy {
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: 600;
}

.payout-id-button-copy,
.payment-id-button-copy {
  padding: 0;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  -webkit-appearance: none;
  border: none;
  opacity: 0.7;
  transition: all var(--transition-normal) ease;
}
.payout-id-button-copy:hover,
.payment-id-button-copy:hover {
  opacity: 1;
}

.payout-status-border-bottom {
  border-bottom: 1px dotted var(--text-muted);
  cursor: help;
}

.bonsai-payments-payout-verification {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 60px 40px;
}

.bonsai-payments-payout-verification-copy {
  margin-bottom: 40px;
  font-size: 16px;
  text-align: center;
  word-wrap: break-word;
}

.bonsai-payments-payout-verification-inputs.form-field.input-lg, .input-group-lg > .bonsai-payments-payout-verification-inputs.form-field.form-control,
.input-group-lg > .bonsai-payments-payout-verification-inputs.form-field.input-group-addon,
.input-group-lg > .input-group-btn > .bonsai-payments-payout-verification-inputs.form-field.btn {
  width: 50px !important;
  height: 70px;
  padding-left: 0;
  padding-right: 0;
  margin: 0 5px;
  font-weight: 600;
}

.bonsai-payments-section-external-accounts {
  border: 1px solid var(--border-content-alt);
  border-radius: 10px;
}

.bonsai-payments-section-external-account-item {
  position: relative;
  padding: 15px 20px 15px 20px;
  cursor: default;
  transition: all var(--transition-normal) ease;
  border-bottom: 1px solid var(--border-content);
}
.bonsai-payments-section-external-account-item:hover {
  background: var(--bg-grey-fc);
}
.bonsai-payments-section-external-account-item:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.bonsai-payments-section-external-account-item:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.bonsai-payments-section-external-account-item .list-item-dd-toggle {
  text-align: center;
}
.bonsai-payments-section-external-account-item .list-item-dd-toggle-link {
  padding-top: 15px;
}

.bonsai-payments-section-external-accounts-show {
  display: inline-block;
  margin-top: 5px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.075em;
}

.bonsai-payments-section-external-accounts-close {
  display: block;
  padding: 15px 15px;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  font-size: 12px;
  text-align: right;
  border-top: 1px solid var(--border-content);
}

.bonsai-payments-section-primary-account-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 80px 20px 20px;
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}
@media (min-width: 768px) {
  .bonsai-payments-section-primary-account-item {
    flex-direction: row;
  }
}

.bonsai-payments-section-account-item-name {
  margin-bottom: 5px;
  padding-right: 90px;
}

.bonsai-payments-section-account-type {
  color: var(--text-muted);
}

.bonsai-payments-section-external-account-default {
  position: absolute;
  right: 20px;
  top: 20px;
  font-weight: 600;
  color: var(--color-primary);
}
.bonsai-payments-section-external-account-item .bonsai-payments-section-external-account-default {
  top: 15px;
}

.bonsai-payments-section-cash-account-item-name {
  position: relative;
  margin-right: 10px;
  font-weight: 600;
}

.bonsai-payments-section-cash-account-item-icon {
  position: absolute;
  left: 0;
  top: 1px;
  width: 25px;
  height: auto;
}

.bonsai-payments-schedule-section {
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: left;
}
@media (min-width: 768px) {
  .bonsai-payments-schedule-section {
    width: 50%;
    margin-top: 0;
    margin-bottom: 0;
  }
}
.bonsai-payments-schedule-section .radio-label {
  padding: 0;
}

.bonsai-payments-schedule-option {
  position: relative;
  padding: 20px 100px 20px 50px;
  font-size: 14px;
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
}
.bonsai-payments-schedule-option:hover {
  border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.bonsai-payments-schedule-option.unavailable {
  cursor: not-allowed;
  opacity: 0.8;
}
.bonsai-payments-schedule-option.unavailable:hover {
  border-color: var(--border-content-alt);
}
.bonsai-payments-schedule-option .radio-fill {
  position: absolute;
  left: 20px;
  top: 22px;
}

.bonsai-payments-schedule-option-name {
  font-weight: 600;
  color: var(--text-default);
}

.bonsai-payments-schedule-option-speed {
  position: absolute;
  right: 20px;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-muted);
}
@media (min-width: 768px) {
  .bonsai-payments-schedule-option-speed {
    font-size: 14px;
  }
}

.bonsai-payments-schedule-option-instant-icon {
  position: relative;
  top: 3px;
  margin-left: 8px;
}

.bonsai-payments-schedule-frozen {
  position: relative;
  padding: 15px 15px 15px 40px;
  color: var(--color-danger-dark);
  background: var(--color-danger-light);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 4px;
}
.bonsai-payments-schedule-frozen a,
.bonsai-payments-schedule-frozen a:visited,
.bonsai-payments-schedule-frozen a:focus,
.bonsai-payments-schedule-frozen a:hover,
.bonsai-payments-schedule-frozen a:active {
  color: var(--color-danger-dark);
  text-decoration: underline;
}

.bonsai-payments-schedule-frozen-icon {
  position: absolute;
  left: 15px;
}

.bonsai-payments-cash-payouts-promo-wrapper {
  padding: 20px;
}

.bonsai-payments-cash-payouts-promo {
  position: relative;
  padding: 40px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  overflow: hidden;
  border-radius: 10px;
}

.bonsai-payments-cash-payouts-promo-title {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 600;
  font-family: var(--font-display-header);
}

.bonsai-payments-cash-payouts-promo-screenshot {
  position: absolute;
  display: none;
  right: 0;
  bottom: 0;
  width: 162px;
  height: 126px;
  background-position: right bottom;
  background-size: cover;
  background-image: url("bonsai-cash/balance-promo-bg.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .bonsai-payments-cash-payouts-promo-screenshot {
    background-image: url("bonsai-cash/balance-promo-bg@2x.png");
  }
}
@media (min-width: 768px) {
  .bonsai-payments-cash-payouts-promo-screenshot {
    display: block;
  }
}

.bonsai-payments-cash-payouts-promo-content {
  position: relative;
}

@media (min-width: 768px) {
  .bonsai-payments-cash-payouts-promo-desc {
    padding-right: 60px;
  }
}

.bonsai-payments-dashboard-totals-section {
  padding: 20px 0;
  border-bottom: 1px solid var(--border-content);
}

.bonsai-payments-dashboard-totals-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .bonsai-payments-dashboard-totals-wrapper {
    align-items: center;
  }
}

.bonsai-payments-dashboard-totals {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .bonsai-payments-dashboard-totals {
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
  }
}

.bonsai-payments-dashboard-total-amount {
  margin-right: 10px;
  font-size: 20px;
  font-weight: 500;
  color: var(--text-default);
}

.bonsai-payments-dashboard-total-label {
  display: flex;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.bonsai-payments-dashboard-total-tooltip {
  margin-left: 7px;
  width: 15px;
  height: auto;
}

.bonsai-payments-dashboard-payout-account {
  display: none;
  height: 40px;
  margin-right: 30px;
}
@media (min-width: 992px) {
  .bonsai-payments-dashboard-payout-account {
    display: block;
  }
}

.bonsai-payments-dashboard-payout-account-speed {
  font-size: 14px;
  text-align: right;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: capitalize;
  cursor: default;
}

.bonsai-payments-dashboard-payout-account-name {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-weight: 500;
  font-size: 14px;
}
.bonsai-payments-dashboard-payout-account-name a,
.bonsai-payments-dashboard-payout-account-name a:focus,
.bonsai-payments-dashboard-payout-account-name a:visited {
  color: var(--text-default);
}
.bonsai-payments-dashboard-payout-account-name a:hover,
.bonsai-payments-dashboard-payout-account-name a:active {
  color: var(--text-default);
  text-decoration: underline;
}
.bonsai-payments-dashboard-payout-account-name.with-green-text a {
  color: var(--color-primary);
}

.bonsai-payments-dashboard-payout-account-info {
  position: relative;
  top: 1px;
  width: 12px;
  height: auto;
  margin-right: 8px;
}
.bonsai-payments-dashboard-payout-account-info.expiring path {
  fill: var(--color-danger);
}

.bonsai-payments-dashboard-faq-item {
  margin-bottom: 20px;
}
.bonsai-payments-dashboard-faq-item:last-child {
  margin-bottom: 0;
}

.bonsai-payments-dashboard-faq-name {
  position: relative;
  width: calc(100% + 20px);
  padding: 5px 40px 5px 10px;
  margin-top: -5px;
  margin-left: -10px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
}
.bonsai-payments-dashboard-faq-name:hover {
  background-color: var(--bg-grey-fc);
}

.bonsai-payments-dashboard-faq-chevron {
  position: absolute;
  top: 12px;
  right: 15px;
  width: 12px;
  height: auto;
  transition: all var(--transition-slower) ease;
}
.bonsai-payments-dashboard-faq-chevron.showing {
  transform: rotate(180deg);
}
.bonsai-payments-dashboard-faq-chevron path {
  fill: var(--border-darker);
}

.bonsai-payments-dashboard-faq-copy {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}

.security-overlay {
  height: 100%;
  background: var(--bg-grey-fc);
}

.security-overlay-container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.security-overlay-top {
  padding: 40px 40px 120px;
  width: 100%;
  flex-shrink: 0;
  text-align: center;
  background: var(--bg-content);
  border-bottom: 1px solid var(--border-content-alt);
}
@media (min-width: 768px) {
  .security-overlay-top {
    padding: 40px 40px 135px;
  }
}
.security-overlay-top h3 {
  font-size: 18px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .security-overlay-top h3 {
    font-size: 22px;
  }
}

.security-overlay-content {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-top: -80px;
  padding: 0 20px;
  text-align: center;
  background-color: var(--bg-panel);
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
  box-shadow: 0 2px 16px color-mix(in srgb, var(--bg-shadow) 3%, transparent);
}

.security-overlay-content-icon {
  display: inline-block;
  width: 100px;
  height: auto;
  margin: 60px auto 20px;
  line-height: 0;
}

.security-overlay-required-icon {
  width: 240px;
  height: 180px;
  margin-left: -65px;
  background: center center no-repeat;
  background-size: contain;
  background-image: url("shared/verify-identity.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .security-overlay-required-icon {
    background-image: url("shared/verify-identity@2x.png");
  }
}

.security-overlay-confirmed-icon {
  width: 100px;
  height: auto;
}

.security-overlay-content-copy {
  max-width: 280px;
  margin: 0 auto 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-default);
}

.security-overlay-content-subcopy {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.security-overlay-content-btn {
  max-width: 280px;
  margin: 0 auto 60px;
}

.security-overlay-content-skip {
  width: 200px;
  margin-top: 40px;
  padding-bottom: 40px;
}

.security-overlay-content-input {
  text-align: center;
  max-width: 280px;
  margin: 0 auto 20px;
  vertical-align: top;
}
.security-overlay-content-input.phone-number {
  width: 180px;
}
.security-overlay-content-input.country-code {
  width: 90px;
  margin-right: 10px;
}
.security-overlay-content-input.text-left {
  text-align: left;
}

.security-overlay-back-btn {
  width: 145px;
  margin: 40px auto;
}

.security-overlay-footer-content {
  margin-bottom: 33px;
  color: var(--text-muted);
}

.security-overlay-footer-link {
  margin-left: 5px;
  text-decoration: underline;
}

.security-overlay-content-otp-security-code {
  max-width: 280px;
  margin: 0 auto 20px;
  color: var(--black);
}
.security-overlay-content-otp-security-code label {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0;
}
.security-overlay-content-otp-security-code .otp-overlay-send-another-code {
  display: inline;
  margin-left: 10px;
}

.sms-setup-recaptcha {
  margin-top: 10px;
  max-width: 304px;
}

.subscription-reactivation-page {
  padding-top: var(--navigation-height);
}

.subscription-reactivation-header {
  margin-bottom: 40px;
}

.subscription-reactivation-container {
  padding: 90px 40px;
  text-align: center;
}

.subscription-reactivation-content {
  max-width: 700px;
  margin: auto;
  padding: 60px;
  font-size: 18px;
  color: var(--text-muted);
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content-alt);
}

.subscription-reactivation-new-card-notice {
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-lighter);
}

.subscription-reactivation-new-card-section {
  margin-top: 40px;
}

.subscription-reactivation-cancel-note {
  margin-top: 40px;
  color: var(--text-lighter);
  font-size: 14px;
}

.subscription-section-header {
  text-align: center;
  margin-bottom: 30px;
  font-weight: 500;
}

.subscription-section-subheader {
  margin-top: 5px;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-lighter);
}

.subscription-settings-plans {
  margin-bottom: 60px;
}

.subscription-settings-plans-list {
  background-color: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 10px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .subscription-settings-plans-list {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
}

.subscription-settings-plans-free {
  margin-bottom: 40px;
  padding: 0 20px;
  text-align: center;
  font-size: 16px;
  font-style: italic;
  color: var(--text-lighter);
}

.subscription-settings-plan-option {
  position: relative;
  flex: 1;
  text-align: left;
  padding: 36px 40px 120px;
  color: var(--text-default);
  background: var(--bg-content);
  border-right: 1px solid var(--border-content-alt);
}
.subscription-settings-plan-option:last-child {
  border-right: none;
}
@media (min-width: 768px) {
  .subscription-settings-plan-option {
    margin-bottom: 0;
    padding: 36px 30px 120px;
  }
}
.subscription-settings-plan-option .subscription-plan-chooser-includes {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.subscription-settings-plan-option .subscription-plan-chooser-includes-item span {
  white-space: normal;
  border: 0;
}

.subscription-settings-plan-option-asterisk {
  position: relative;
  left: 3px;
  top: 1px;
  width: 5px;
  height: auto;
  vertical-align: top;
  font-size: 6px;
  color: var(--text-lighter);
}
.subscription-settings-plan-option-asterisk path {
  fill: var(--text-lighter);
}

.subscription-settings-plan-option-asterisk-note {
  padding: 5px 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--text-lighter);
}

.subscription-plan-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-default);
}

.subscription-plan-subtitle {
  margin-top: 15px;
  font-weight: 600;
  font-size: 14px;
}

.subscription-plan-pricing {
  margin: 5px 0 30px;
  padding-bottom: 20px;
  font-weight: 500;
  font-size: 34px;
  border-bottom: 1px solid var(--border-content-alt);
}
.subscription-plan-pricing.tax-plan {
  margin: 10px 0 10px;
  padding-bottom: 0;
  border-bottom: none;
}

.subscription-plan-pricing-amount {
  position: relative;
  display: inline-block;
  float: left;
  padding-left: 15px;
  font-weight: 600;
}
.subscription-plan-pricing-amount.free-plan {
  padding-left: 0;
}

.subscription-plan-pricing-amount-currency {
  position: absolute;
  left: 0;
  top: 4px;
  font-size: 20px;
}

.subscription-plan-pricing-interval {
  display: inline-block;
  float: left;
  font-size: 12px;
  margin-top: 22px;
  margin-left: 8px;
  font-weight: 500;
  color: var(--text-lighter);
}

.subscription-settings-plan-option-item {
  position: relative;
  display: flex;
  width: 100%;
  margin-bottom: 12px;
  padding-left: 22px;
  padding-right: 0;
  font-size: 14px;
}
.subscription-settings-plan-option-item:last-child {
  margin-bottom: 0;
}

.subscription-settings-plan-option-item-icon {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
}

.subscription-settings-plan-option-item-asterisk {
  position: relative;
  width: 5px;
  height: auto;
  margin-left: 2px;
  top: 3px;
}
.subscription-settings-plan-option-item-asterisk path {
  fill: var(--text-lighter);
}

.subscription-settings-plan-option-fees-note {
  position: relative;
  padding-left: 20px;
  font-size: 10px;
  color: var(--text-lighter);
  font-style: italic;
}

.subscription-settings-plan-option-fees-icon {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 9px;
}

.subscription-plan-cta-btn {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
}

.subscription-enterprise-notice {
  max-width: 800px;
  margin-bottom: 40px;
  padding: 30px;
  font-size: 18px;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--bg-shadow) 3%, transparent);
  border-radius: 4px;
}

.subscription-plan-feature-plus-price {
  margin-left: 4px;
  font-size: 12px;
  color: var(--text-lighter);
}

.subscription-settings-tax-option {
  position: relative;
  flex: 1;
  margin-top: 30px;
  padding: 40px;
  color: var(--text-default);
  text-align: left;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 10px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .subscription-settings-tax-option {
    display: flex;
    padding: 45px;
  }
}

.subscription-settings-tax-option-left {
  min-width: 220px;
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .subscription-settings-tax-option-left {
    margin-bottom: 0;
    padding-right: 45px;
    border-right: 1px solid var(--border-content);
  }
}

.subscription-settings-tax-option-btn {
  display: block;
  width: 100%;
}

@media (min-width: 768px) {
  .subscription-settings-tax-option-right {
    padding-left: 45px;
  }
}

.subscription-other-plans {
  margin-top: 60px;
}

.subscription-other-plan-option {
  position: relative;
  text-align: left;
  margin-bottom: 20px;
  padding: 40px 30px 120px;
  background: var(--bg-content);
}
@media (min-width: 768px) {
  .subscription-other-plan-option {
    margin-bottom: 0;
    padding: 60px 30px 110px;
  }
}
.subscription-other-plan-option ul {
  padding: 0;
  margin: 0;
}
.subscription-other-plan-option li {
  list-style-type: none;
  padding: 6px 0 3px;
}

.subscription-other-plan-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--color-primary);
}

.subscription-other-plan-subtitle {
  margin-top: 15px;
  font-weight: 600;
  font-size: 14px;
}

.subscription-other-plan-pricing {
  margin: 10px 0 15px;
  font-weight: 500;
  font-size: 40px;
}
.subscription-other-plan-pricing strike {
  font-weight: normal;
  color: var(--text-muted-alt);
}

.subscription-other-plan-pricing-amount {
  display: inline-block;
  float: left;
}

.subscription-other-plan-pricing-interval {
  display: inline-block;
  float: left;
  font-size: 12px;
  margin-top: 27px;
  margin-left: 8px;
  font-weight: 500;
  color: var(--text-lighter);
}

.btn-other-subscription {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
}

.subscription-current-plan {
  margin-bottom: 60px;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 10px;
}
.subscription-current-plan strike {
  color: var(--text-lighter);
}

.subscription-workflow-section {
  padding: 0 30px 30px;
}
.subscription-workflow-section:first-child {
  padding-top: 30px;
}

.subscription-workflow-section-content {
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .subscription-workflow-section-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.subscription-workflow-section-content a:not(.btn) {
  font-weight: 500;
}

.subscription-workflow-plan-name {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 500;
}

.subscription-workflow-plan-free-trial {
  margin-left: 10px;
  font-weight: normal;
  color: var(--text-lighter);
}

.subscription-workflow-plan-upgrade-link,
.subscription-workflow-plan-cancel-link {
  margin-left: 8px;
  font-size: 14px;
  font-weight: normal;
  font-weight: 500;
}

.subscription-workflow-plan-pricing {
  align-items: flex-end;
  margin-top: 5px;
  font-size: 16px;
  color: var(--text-muted);
}
@media (min-width: 992px) {
  .subscription-workflow-plan-pricing {
    display: block;
    margin-top: 0;
  }
}

.subscription-plan-trial-details {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.subscription-plan-trial-details a:not(.btn) {
  font-weight: 600;
}

.subscription-add-on {
  padding: 15px 30px;
  background: var(--bg-content-alt);
  border-top: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}
.subscription-add-on:first-child {
  border-top: 0;
}
.subscription-add-on .subscription-add-on-content {
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .subscription-add-on .subscription-add-on-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.subscription-add-on-trial-info {
  font-size: 12px;
  color: var(--text-muted);
}
.subscription-add-on-trial-info i {
  margin-left: 5px;
}

.subscription-add-on-name {
  font-size: 16px;
  font-weight: 600;
}

.subscription-add-on-flag {
  vertical-align: middle;
  margin-left: 10px;
  padding: 6px 13px 6px;
  color: var(--color-info);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  background: color-mix(in srgb, var(--color-info) 5%, transparent);
  border: 1px solid var(--border-semi-transparent-alt);
  border-radius: 20px;
}

.subscription-add-on-details {
  display: flex;
  align-items: flex-end;
  margin-top: 5px;
  font-size: 16px;
  color: var(--text-muted);
}
@media (min-width: 992px) {
  .subscription-add-on-details {
    display: block;
    margin-top: 0;
  }
}

.subscription-add-on-btn {
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  font-size: 12px;
  font-weight: 600;
}
.subscription-add-on-btn, .subscription-add-on-btn:focus, .subscription-add-on-btn:visited, .subscription-add-on-btn:hover, .subscription-add-on-btn:active {
  color: var(--color-danger);
}
@media (min-width: 992px) {
  .subscription-add-on-btn {
    margin-left: 10px;
  }
}

.subscription-add-ons-options-section {
  margin-bottom: 40px;
}

.subscription-add-ons-options {
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.subscription-add-on-option {
  display: flex;
  flex-direction: column;
  padding: 30px 30px;
  border-top: 1px solid var(--border-content);
}
.subscription-add-on-option:first-child {
  border-top: 0;
}
@media (min-width: 992px) {
  .subscription-add-on-option {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.subscription-add-on-option-name {
  font-size: 18px;
  font-weight: 600;
}

.subscription-add-on-option-price {
  margin-top: 10px;
  font-size: 16px;
  color: var(--text-muted);
}

.subscription-add-on-option-details {
  display: flex;
  align-items: flex-end;
  margin-top: 5px;
  font-size: 16px;
  color: var(--text-muted);
}
@media (min-width: 992px) {
  .subscription-add-on-option-details {
    display: block;
    margin-top: 0;
  }
}

.subscription-add-on-option-btn {
  margin-left: auto;
}
@media (min-width: 992px) {
  .subscription-add-on-option-btn {
    margin-left: 20px;
  }
}

.subscription-billing-total-section {
  padding: 30px;
  border-top: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}
.subscription-billing-total-section a:not(.btn) {
  font-weight: 500;
}

.subscription-billing-discount {
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .subscription-billing-discount {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.subscription-billing-total,
.subscription-discount {
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .subscription-billing-total,
  .subscription-discount {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.subscription-billing-total-label {
  font-size: 16px;
  font-weight: 500;
}

.subscription-billing-total-value {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
}
@media (min-width: 992px) {
  .subscription-billing-total-value {
    margin-top: 0;
  }
}

.subscription-plan-billing-settings {
  margin-top: 30px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}
.subscription-plan-billing-settings a:not(.btn) {
  font-weight: 500;
}

.subscription-plan-billing-failure {
  padding: 20px;
  color: var(--color-danger-dark);
  background: var(--color-danger-light);
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  border-radius: 4px;
}
.subscription-plan-billing-failure a,
.subscription-plan-billing-failure a:focus,
.subscription-plan-billing-failure a:visited {
  color: var(--color-danger-dark);
  text-decoration: underline;
}
.subscription-plan-billing-failure a:hover,
.subscription-plan-billing-failure a:active {
  color: color-mix(in srgb, var(--color-danger-dark) 95%, transparent);
}

.subscription-plan-billing-failure-header {
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 16px;
}

.subscription-discount {
  margin-bottom: 20px;
}

.subscription-discount-label {
  font-size: 16px;
  font-style: italic;
  color: var(--text-muted);
}

.subscription-discount-sublabel {
  font-size: 12px;
}

.subscription-discount-value {
  margin-top: 10px;
  font-size: 16px;
  font-style: italic;
  color: var(--text-muted);
}
@media (min-width: 992px) {
  .subscription-discount-value {
    margin-top: 0;
  }
}

.subscription-billing-payment-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.subscription-credit-card {
  font-size: 14px;
  color: var(--text-lighter);
}
.subscription-credit-card.no-payment-method {
  color: var(--color-danger);
}

.confirm-subscription-page {
  position: relative;
  z-index: 2;
  min-height: 700px;
  padding: 60px 0 120px;
}

.confirm-subscription-banner {
  position: relative;
  z-index: 2;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 6px 6px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 4%, transparent);
}

.confirm-subscription-banner-note {
  width: 100%;
  padding: 20px 20px 16px;
  letter-spacing: 8px;
  color: var(--text-muted-alt);
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  border-bottom: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 4px 4px 0 0;
  background-image: linear-gradient(to bottom, var(--bg-grey-fc) 0%, #ffffff 100%);
}
@media (min-width: 768px) {
  .confirm-subscription-banner-note {
    font-size: 16px;
  }
}

.confirm-subscription-banner-header {
  margin: 0;
  padding: 60px 40px;
  font-weight: 600;
}

.confirm-subscription-banner-header1 {
  margin-bottom: 10px;
  font-size: 20px;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .confirm-subscription-banner-header1 {
    font-size: 24px;
  }
}

.confirm-subscription-banner-header2 {
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-lighter);
}

.confirm-subscription-banner-header2-feat {
  text-transform: lowercase;
}

.confirm-subscription-details {
  margin-top: 40px;
  text-align: left;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 6px 6px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 4%, transparent);
}

.confirm-subscription-details-header {
  margin-bottom: 0;
  padding: 30px 20px 28px;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 4px 4px 0 0;
  background-image: linear-gradient(to bottom, var(--bg-grey-fc) 0%, #ffffff 100%);
}
@media (min-width: 768px) {
  .confirm-subscription-details-header {
    font-size: 20px;
  }
}

.confirm-subscription-details-border {
  position: absolute;
  display: none;
  right: 41.66667%;
  top: 0;
  bottom: 0;
  border-right: 1px solid var(--border-content);
}
@media (min-width: 992px) {
  .confirm-subscription-details-border {
    display: block;
  }
}

.confirm-subscription-actions {
  padding: 40px;
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .confirm-subscription-actions {
    padding: 60px;
    border-bottom: none;
  }
}

.confirm-subscription-action-item {
  padding: 0 0 60px;
}
.confirm-subscription-action-item:last-child {
  padding-bottom: 0;
}

.confirm-subscription-action-title {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-default);
}

.confirm-subscription-action-desc {
  font-size: 16px;
  color: var(--text-lighter);
}

.confirm-subscription-action-link-section {
  margin-top: 20px;
}

.confirm-subscription-action-link-icon {
  margin-left: 10px;
  font-size: 0.9em;
}

.confirm-subscription-features {
  padding: 40px;
}
@media (min-width: 768px) {
  .confirm-subscription-features {
    padding: 60px;
  }
}

.confirm-subscription-feature {
  margin-bottom: 30px;
}
.confirm-subscription-feature:last-child {
  margin-bottom: 0;
}

.confirm-subscription-feature-title {
  position: relative;
  margin-bottom: 5px;
  padding-left: 30px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-default);
}

.confirm-subscription-feature-checkbox {
  position: absolute;
  left: 0;
  top: -9px;
  font-size: 42px;
  line-height: 0;
  color: var(--color-primary);
}

.confirm-subscription-modal-content {
  position: relative;
  text-align: center;
}
@media (min-width: 768px) {
  .confirm-subscription-modal-content {
    background: var(--bg-content);
    border: 1px solid var(--border-content);
    border-radius: 6px;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--bg-shadow) 4%, transparent);
  }
}

.confirm-subscription-modal-header {
  letter-spacing: 8px;
  color: var(--text-muted-alt);
  font-size: 10px;
  font-weight: 500;
  text-align: center;
}
@media (min-width: 768px) {
  .confirm-subscription-modal-header {
    font-size: 16px;
  }
}

.confirm-subscription-modal-text {
  padding: 20px 0;
  font-weight: 600;
}
@media (min-width: 768px) {
  .confirm-subscription-modal-text {
    padding: 60px 40px;
  }
}

.confirm-subscription-modal-text2 {
  max-width: 390px;
  margin: 0 auto 30px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-lighter);
}

.confirm-subscription-modal-text2-feat {
  text-transform: lowercase;
}

.subscription-essentials {
  margin-top: 60px;
}

.subscription-essential-features {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -2px;
}

.subscription-essential-feature {
  width: 100%;
  padding: 1px;
}
@media (min-width: 768px) {
  .subscription-essential-feature {
    width: 50%;
  }
}
@media (min-width: 992px) {
  .subscription-essential-feature {
    width: 50%;
  }
}

.subscription-essential-feature-in {
  position: relative;
  padding: 20px 20px 19px 50px;
  text-align: left;
  font-weight: 600;
  font-size: 16px;
  cursor: default;
  color: var(--text-default);
  background: var(--bg-content);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--bg-shadow) 5%, transparent);
  border-radius: 2px;
}

.subscription-essential-feature-check {
  position: absolute;
  left: 20px;
  margin-top: -15px;
  color: var(--color-primary);
  font-size: 42px;
}

.subscription-payment-method-page {
  padding: 60px 0;
}

.subscription-payment-method-wrapper {
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--bg-shadow) 3%, transparent);
  border-radius: 4px;
}

.subscription-payment-method-title {
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 24px;
}
@media (min-width: 768px) {
  .subscription-payment-method-title {
    font-size: 30px;
  }
}

.subscription-payment-method-subtitle {
  display: block;
  font-size: 14px;
  font-weight: 500;
}
.subscription-payment-method-subtitle, .subscription-payment-method-subtitle:focus, .subscription-payment-method-subtitle:visited {
  color: var(--text-muted-alt);
}

.subscription-payment-method-bottom-link {
  display: inline-block;
  font-size: 16px;
}

.subscription-payment-bottom-per-project {
  display: inline-block;
  margin-top: 30px;
  font-size: 14px;
  font-weight: 600;
}
.subscription-payment-bottom-per-project a {
  text-decoration: underline;
}

.subscription-payment-method-list {
  padding: 20px;
}

.subscription-payment-method-list-item {
  margin-bottom: 10px;
  padding: 30px 30px 30px 20px;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  border: 1px solid var(--border-content);
  border-radius: 6px;
}
@media (min-width: 768px) {
  .subscription-payment-method-list-item {
    display: flex;
    justify-content: space-between;
  }
}
.subscription-payment-method-list-item:last-child {
  margin-bottom: 0;
}

.subscription-payment-method-list-item-card {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .subscription-payment-method-list-item-card {
    margin-bottom: 0;
  }
}

.subscription-payment-method-list-item-brand {
  line-height: 1;
  margin-right: 20px;
  padding: 3px 4px 1px;
  color: var(--text-info-dark);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.subscription-payment-method-list-item-exp {
  margin-left: 20px;
  padding-top: 1px;
  font-weight: 500;
  font-style: italic;
  font-size: 14px;
  color: var(--text-lighter);
}

.subscription-payment-method-list-item-default {
  display: inline-block;
  color: var(--text-lighter);
  cursor: default;
  text-align: right;
}

.subscription-payment-method-list-item-set {
  float: right;
  margin-left: 20px;
  font-size: 14px;
}
@media (min-width: 768px) {
  .subscription-payment-method-list-item-set {
    float: none;
  }
}

.subscription-payment-method-list-item-delete {
  float: right;
  margin-left: 20px;
  font-size: 14px;
}
@media (min-width: 768px) {
  .subscription-payment-method-list-item-delete {
    float: none;
  }
}

.subscription-payment-method-modal-form .credit-card-form-wrapper {
  padding: 0;
  border: none;
  box-shadow: none;
}
@media (min-width: 992px) {
  .subscription-payment-method-modal-form .credit-card-form-wrapper {
    margin: 0 auto 0 0;
  }
}

.trial-confirmation-page {
  padding-top: var(--navigation-height);
}

.trial-confirmation-container {
  padding: 60px 0;
  text-align: center;
}

.trial-confirmation-header {
  margin-bottom: 30px;
  font-weight: 500;
}

.trial-confirmation-change-note {
  margin-bottom: 40px;
  font-size: 18px;
  color: var(--text-lighter);
}

.client-payment-methods .saved-credit-card-delete {
  opacity: 1;
}

.client-payment-methods-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.upgrade-page-container {
  padding-top: var(--navigation-height);
}

.upgrade-overlay {
  display: none;
  position: fixed;
  z-index: 1039;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-content-alt);
  opacity: 0;
  transition: all var(--transition-fast) ease;
}
.upgrade-overlay.showing {
  opacity: 1;
}

.confirmation-overlay,
.security-overlay {
  z-index: 1090;
}

.upgrade-overlay-top {
  position: relative;
  width: 100%;
  margin: 0 auto;
  text-align: left;
  padding: 0 20px 37px;
  font-size: 14px;
  font-weight: 600;
}
@media (min-width: 480px) {
  .upgrade-overlay-top {
    font-size: 18px;
    text-align: center;
  }
}
@media (min-width: 768px) {
  .upgrade-overlay-top {
    min-height: 80px;
  }
}

.upgrade-overlay-top-line {
  display: inline-block;
  cursor: default;
  padding: 9px 15px 7px;
  color: var(--text-info-dark);
  background: var(--bg-info-lighter);
  border: 1px solid color-mix(in srgb, var(--color-info) 20%, transparent);
  border-top: 0;
  border-radius: 0 0 3px 3px;
}
@media (min-width: 480px) {
  .upgrade-overlay-top-line {
    padding: 9px 26px 7px;
  }
}

.upgrade-overlay-skip-link {
  position: fixed;
  z-index: 10;
  right: 0;
  top: 0;
  padding: 14px 20px;
  font-size: 28px;
  line-height: 1;
}
.upgrade-overlay-skip-link, .upgrade-overlay-skip-link:focus, .upgrade-overlay-skip-link:visited {
  color: var(--text-lighter);
}
.upgrade-overlay-skip-link:hover, .upgrade-overlay-skip-link:active {
  color: var(--text-lighter);
}
@media (min-width: 768px) {
  .upgrade-overlay-skip-link {
    padding: 14px 20px;
    font-size: 34px;
  }
}
.upgrade-overlay.upgrade-overlay--sticky-header .upgrade-overlay-skip-link {
  display: flex;
  align-items: center;
  height: 60px;
}
.upgrade-overlay.upgrade-overlay--absolute-header .upgrade-overlay-skip-link {
  position: absolute;
}

.upgrade-overlay-content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
@media (min-width: 1024px) {
  .upgrade-overlay-content {
    flex-wrap: nowrap;
    justify-content: center;
  }
}
@media (min-width: 768px) {
  .upgrade-overlay-content {
    min-height: 100%;
  }
}

.upgrade-overlay-content-left-col {
  position: relative;
  flex-grow: 1;
  width: 100%;
  padding-top: 80px;
}
@media (min-width: 1024px) {
  .upgrade-overlay-content-left-col {
    width: auto;
  }
}

.upgrade-overlay-content-right-col {
  padding: 20px;
  margin-bottom: 40px;
  width: 100%;
  max-width: 440px;
  background: var(--bg-content);
  border-top: 1px solid var(--border-content-alt);
}
@media (min-width: 440px) {
  .upgrade-overlay-content-right-col {
    border-top: none;
  }
}
@media (min-width: 700px) {
  .upgrade-overlay-content-right-col {
    padding: 40px 40px 60px;
    margin-bottom: 0;
    background: none;
  }
}
@media (min-width: 1024px) {
  .upgrade-overlay-content-right-col {
    width: 420px;
    padding: 140px 20px 60px;
    background-color: var(--bg-content);
    border-left: 1px solid var(--border-content-alt);
  }
}
@media (min-width: 1500px) {
  .upgrade-overlay-content-right-col {
    width: 520px;
    max-width: none;
    padding-left: 90px;
    padding-right: 90px;
  }
}

.subscription-plan-chooser {
  margin: auto;
  padding: 0 20px;
}

.subscription-plan-chooser-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .subscription-plan-chooser-list {
    flex-direction: row;
    justify-content: center;
  }
}

.subscription-plan-chooser-annual-discount {
  display: none;
  padding: 9px 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-lighter);
}
@media (min-width: 600px) {
  .subscription-plan-chooser-annual-discount {
    display: inline-block;
  }
}

.subscription-plans-option {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 30px;
  margin-bottom: 20px;
  font-size: 16px;
  cursor: default;
  background: var(--bg-content);
  border: 1px solid var(--border-semi-transparent-alt);
  box-shadow: 0 2px 18px color-mix(in srgb, var(--bg-shadow) 3%, transparent);
  border-radius: 10px;
  transition: all var(--transition-fast) ease;
}
.subscription-plans-option:hover {
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}
.subscription-plans-option.selected {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary), 0 2px 18px color-mix(in srgb, var(--bg-shadow) 5%, transparent);
}
@media (min-width: 1024px) {
  .subscription-plans-option {
    max-width: 310px;
    margin: 0 15px 20px;
  }
}

.subscription-plans-option-name {
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--text-default);
  font-size: 20px;
  line-height: 28px;
  max-width: 210px;
}
@media (min-width: 1024px) {
  .subscription-plans-option-name {
    font-size: 26px;
  }
}

.subscription-plans-option-price {
  position: relative;
  top: auto;
  right: auto;
  max-width: 100%;
  margin: 10px 0 20px;
  font-size: 26px;
  font-weight: 400;
  color: var(--text-default);
}

.subscription-plans-option-price-free {
  font-size: 26px;
}

.subscription-plans-option-price-subtitle {
  font-size: 16px;
  font-weight: normal;
}

.subscription-plans-option-price-cycle {
  display: inline;
  margin-left: 7px;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 12px;
  text-align: left;
}

.subscription-plans-option-min-seats {
  position: relative;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
  color: var(--text-muted);
}

.subscription-plan-chooser-includes {
  font-weight: 400;
  font-size: 16px;
  cursor: default;
  color: var(--text-default);
}
.subscription-plan-chooser-list.single-plan .subscription-plan-chooser-includes {
  margin-top: 0;
  border-top: 1px solid var(--border-content-alt);
  padding-top: 20px;
}

.subscription-plan-chooser-includes-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  padding-left: 25px;
  font-size: 14px;
  font-weight: 400;
  cursor: default;
}
.subscription-plan-chooser-includes-item.without-icon {
  padding-left: 0;
}
.subscription-plan-chooser-includes.tax-plan .subscription-plan-chooser-includes-item {
  display: block;
  align-items: initial;
}

.subscription-plan-chooser-includes-icon {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
}

.subscription-plan-chooser-includes-underline {
  transition: all var(--transition-fast) ease;
}
.subscription-plan-chooser-includes-underline:hover {
  filter: brightness(75%);
}

.subscription-plan-chooser-includes-tooltip {
  max-width: 250px;
  margin-left: 20px !important;
}

.subscription-plan-chooser-asterisk {
  position: relative;
  left: 3px;
  top: 1px;
  vertical-align: top;
  font-size: 6px;
  color: var(--text-lighter);
}

.subscription-plan-chooser-asterisk-note {
  padding: 10px 20px 0;
  font-size: 12px;
  font-style: italic;
  color: var(--text-lighter);
}

.subscription-plan-chooser-includes-img {
  width: 100%;
  height: 130px;
  margin-top: 10px;
  margin-bottom: 5px;
  border-radius: 7px;
  background-position: top left;
  background-size: cover;
}
.subscription-plan-chooser-includes-img.customform {
  height: 130px;
  background-image: url("welcome_states/forms-ss-1.png");
}
.subscription-plan-chooser-includes-img.automations {
  height: 100px;
  background-image: url("welcome_states/automations-ss-1.png");
}
.subscription-plan-chooser-includes-img.client-portal {
  height: 130px;
  background-image: url("welcome_states/client-portal-ss-1.png");
}

.subscription-plans-option-btns {
  margin-top: 30px;
}
.subscription-plan-chooser-list.single-plan .subscription-plans-option-btns {
  display: none;
}

.subscription-plans-selected-btn {
  cursor: pointer;
  border-color: var(--color-primary);
  border-width: 1.5px;
  color: var(--color-primary);
}
.subscription-plans-selected-btn:active {
  border-color: var(--color-primary);
  border-width: 1.5px;
}

.subscription-conversion-plans-link {
  margin: 10px auto 60px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

.subscription-conversion-plans-link-icon {
  margin-left: 8px;
  font-size: 0.8em;
}

.subscription-plan-chooser-totals {
  padding: 20px;
  font-size: 16px;
  border: 1px solid var(--border-content);
  border-radius: 10px;
}
.subscription-plan-chooser-totals.simplified .subscription-plan-chooser-total-plan {
  font-weight: 600;
}
.subscription-plan-chooser-totals.simplified .subscription-plan-chooser-simplified-total-due {
  font-size: 14px;
}

.subscription-plan-chooser-total-plan {
  display: flex;
  justify-content: space-between;
}

.subscription-plan-chooser-total-coupon {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.subscription-plan-chooser-total-coupon.showing-input {
  margin-top: 10px;
  align-items: center;
}
.subscription-plan-chooser-total-coupon.with-discount, .subscription-plan-chooser-total-coupon.with-error {
  padding-top: 5px;
}

.subscription-plan-chooser-total-coupon-toggle {
  padding-top: 2px;
  font-size: 14px;
}

.subscription-plan-chooser-total-coupon-input {
  width: 100%;
}

.subscription-plan-chooser-total-coupon-code {
  padding-left: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
}

.subscription-plan-chooser-total-proration {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-lighter);
}

.subscription-plan-chooser-total-btn {
  padding-left: 20px;
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px;
}

.subscription-plan-chooser-total-coupon-invalid {
  color: var(--color-danger);
  font-size: 12px;
  font-style: italic;
}
.subscription-plan-chooser-total-coupon-invalid a,
.subscription-plan-chooser-total-coupon-invalid a:focus,
.subscription-plan-chooser-total-coupon-invalid a:visited {
  color: var(--color-danger);
}
.subscription-plan-chooser-total-coupon-invalid a:hover,
.subscription-plan-chooser-total-coupon-invalid a:active {
  color: color-mix(in srgb, var(--color-danger) 97%, transparent);
}

.subscription-plan-chooser-total-discount {
  display: flex;
  justify-content: space-between;
  padding-top: 5px;
}

.subscription-plan-chooser-total-due {
  display: flex;
  justify-content: space-between;
  padding: 5px 0 0;
}

.subscription-plan-chooser-payment-container .credit-card-form-group {
  padding: 0 0 10px;
}
.subscription-plan-chooser-payment-container .credit-card-form-btn-div {
  padding: 0 0 20px;
}
.subscription-plan-chooser-payment-container .subscription-plan-chooser-existing-cc-content {
  padding: 20px 0;
}
@media (min-width: 992px) {
  .subscription-plan-chooser-payment-container .payment-security-note-wrapper {
    margin: 0 0 0 auto;
  }
}

.subscription-plan-chooser-existing-cc-wrapper {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}
.subscription-plan-chooser-payment-container .subscription-plan-chooser-existing-cc-wrapper {
  margin: 0 auto 0 0;
}

.subscription-plan-chooser-existing-cc-content {
  padding: 20px;
  font-size: 18px;
  font-weight: 600;
}

.subscription-plan-chooser-existing-cc-toggle {
  padding: 0 0 10px;
}

.subscription-payment-existing-cc {
  position: relative;
  display: flex;
  align-items: center;
  padding: 14px 15px 12px;
  font-size: 16px;
  font-weight: 500;
  cursor: default;
  background: var(--bg-content-alt);
  border: 1px solid color-mix(in srgb, var(--text-info-dark) 20%, transparent);
  border-radius: 5px;
}

.subscription-payment-existing-cc-brand {
  line-height: 1.1;
  margin-right: 15px;
  color: var(--text-info-dark);
}

.subscription-plan-chooser-coupon-code {
  margin-top: 5px;
  padding: 6px 5px 3px;
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
  cursor: default;
  color: var(--text-lighter);
  background: var(--bg-grey-f8);
  border: 1px dashed var(--border-content-alt);
  border-radius: 2px;
}

.subscription-plan-trialing-title {
  font-weight: 500;
  color: var(--text-default);
  line-height: 35px;
  text-align: center;
  font-size: 18px;
  padding: 0 40px;
  margin: 0 0 25px;
}
@media (min-width: 992px) {
  .subscription-plan-trialing-title {
    padding: 0 75px;
    font-size: 22px;
  }
}
@media (min-width: 1024px) {
  .subscription-plan-trialing-title {
    padding: 0;
    margin: 0 0 50px;
  }
}
@media (min-width: 1600px) {
  .subscription-plan-trialing-title {
    margin-left: -30px;
    margin-right: -30px;
  }
}

.subscription-plan-trialing-referral-banner {
  background: #f2f7f2;
  border: 1px solid #e6f3f0;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 20px;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 20px;
  position: relative;
}
.subscription-plan-trialing-referral-banner p {
  margin-left: 50px;
}

.subscription-plan-trialing-referral-icon {
  position: absolute;
  top: 20px;
  left: 20px;
}

.subscription-plan-trialing-benefits {
  padding: 20px 0 20px 20px;
  margin: 20px 0 10px;
  font-size: 16px;
  cursor: default;
  background: color-mix(in srgb, var(--color-accent-yellow) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent-yellow) 25%, transparent);
  border-radius: 6px;
}

.subscription-plan-trialing-benefits-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.subscription-plan-trialing-benefits-item:last-child {
  margin-bottom: 0;
}

.subscription-plan-trialing-benefits-icon {
  position: relative;
  margin-right: 10px;
  width: 16px;
  height: 16px;
}

.subscription-plan-chooser-period {
  margin-bottom: 40px;
}

.subscription-plan-chooser-cycle {
  position: relative;
  height: 50px;
  margin-bottom: 5px;
  padding: 10px 15px 10px 42px;
  text-align: left;
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font-sans-serif);
  color: var(--text-default);
  background-color: var(--bg-content);
  border: 1px solid var(--border-field);
  border-radius: 6px;
}
.subscription-plan-chooser-cycle.active {
  border-color: var(--color-primary);
}
.subscription-plan-chooser-cycle .radio-fill {
  top: 16px;
  left: 15px;
}

.subscription-plan-chooser-cycle-savings {
  position: absolute;
  right: 15px;
  top: 15px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.075em;
  color: var(--color-primary);
}

.subscription-overdue-overlay {
  display: block;
  position: fixed;
  z-index: var(--z-onboarding);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background: var(--bg-content);
}

.subscription-overdue-overlay-top {
  padding: 27px 20px 31px;
  text-align: center;
}

.subscription-overdue-overlay-header {
  margin-bottom: 20px;
}

.subscription-overdue-overlay-subheader {
  max-width: 600px;
  margin: auto;
  font-size: 16px;
  color: var(--text-muted-alt);
}

.subscription-overdue-overlay-cancel-link {
  padding: 40px 40px 80px;
  text-align: center;
  font-size: 16px;
  color: var(--text-muted-alt);
}

.paid-feature-tag {
  position: relative;
  display: inline-block;
  top: -1px;
  margin-left: 6px;
  padding: 5px 7px 3px;
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: 10px;
  font-family: var(--font-body);
  letter-spacing: 0.075em;
  background: var(--bg-content);
  border-radius: 3px;
  border: 1px solid var(--color-primary);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--black) 5%, transparent);
}
.paid-feature-tag.select-option-tag {
  position: absolute;
  top: 6px;
  right: 5px;
  opacity: 0.3;
}
.Select-option.is-focused .paid-feature-tag.select-option-tag {
  opacity: 0.9;
}
.welcome-state-index-title > .paid-feature-tag {
  position: absolute;
  right: 20px;
  top: 20px;
}
@media (min-width: 1300px) {
  .welcome-state-index-title > .paid-feature-tag {
    position: relative;
    display: inline;
    right: 0;
    top: -3px;
    margin: 0 0 0 15px;
  }
}

.upgrade-overlay-tax-wrapper {
  padding-top: 60px;
  padding-bottom: 60px;
}
.upgrade-overlay-tax-top {
  position: relative;
  margin-bottom: 40px;
  padding: 70px 40px 40px;
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 4px;
}
@media (min-width: 768px) {
  .upgrade-overlay-tax-top {
    padding: 45px 60px 40px 120px;
  }
}

.upgrade-overlay-tax-optional {
  position: absolute;
  display: inline-block;
  top: -1px;
  left: -1px;
  right: -1px;
  padding: 9px 22px 8px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.075em;
  overflow: hidden;
  background: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}
@media (min-width: 768px) {
  .upgrade-overlay-tax-optional {
    top: -17px;
    left: auto;
    right: 40px;
    border-radius: 4px;
  }
}

.upgrade-overlay-tax-optional-copy {
  position: relative;
  color: var(--color-info);
}

.upgrade-overlay-tax-optional-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--color-info) 5%, transparent);
}

.upgrade-overlay-tax-top-interested {
  margin-bottom: 8px;
  color: var(--text-lighter);
  font-size: 16px;
  font-weight: 600;
}

.upgrade-overlay-tax-header {
  margin: 0;
  font-weight: 600;
  font-size: 26px;
}
@media (min-width: 768px) {
  .upgrade-overlay-tax-header {
    font-size: 32px;
  }
}

.upgrade-overlay-tax-top-icon {
  position: absolute;
  display: none;
  left: 40px;
  top: 51px;
  height: auto;
  width: 46px;
}
.upgrade-overlay-tax-top-icon g {
  fill: var(--color-accent-yellow);
}
@media (min-width: 768px) {
  .upgrade-overlay-tax-top-icon {
    display: block;
  }
}

.upgrade-overlay-tax-desc {
  margin-top: 10px;
  font-size: 18px;
  color: var(--text-muted);
}

.upgrade-overlay-tax-desc-us {
  font-size: 14px;
  color: var(--text-lighter);
}
@media (min-width: 480px) {
  .upgrade-overlay-tax-desc-us {
    padding-left: 8px;
  }
}

.upgrade-overlay-tax-includes-skip {
  margin-top: 30px;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

.upgrade-overlay-tax-includes-skip-icon {
  margin-left: 6px;
  font-size: 0.9em;
}

.upgrade-overlay-tax-details {
  padding: 40px;
  background: var(--bg-grey-fc);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 4px;
}

.upgrade-overlay-tax-cc-wrapper {
  padding: 40px;
  font-size: 18px;
  color: var(--text-muted);
  background: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 4px;
}

.upgrade-overlay-tax-cc-content {
  font-size: 16px;
}

.upgrade-overlay-tax-details-pricing {
  margin-bottom: 20px;
  padding-bottom: 20px;
  font-size: 28px;
  font-weight: 600;
  color: var(--text-default);
  border-bottom: 1px solid var(--border-content-alt);
}

.upgrade-overlay-tax-details-pricing-note {
  margin-bottom: 1px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-lighter);
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

.upgrade-overlay-tax-details-pricing-trial {
  margin-bottom: 40px;
  padding: 20px 20px 18px;
  font-size: 16px;
  color: var(--text-info-dark);
  background: var(--bg-info-light);
  border-radius: 4px;
}

.upgrade-overlay-tax-includes-item {
  position: relative;
  margin-bottom: 10px;
  padding-left: 25px;
  font-size: 16px;
}

.upgrade-overlay-tax-includes-icon {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
}

.upgrade-overlay-tax-includes-coming {
  font-style: italic;
  color: var(--text-lighter);
}

.upgrade-overlay-logo {
  position: absolute;
  top: 30px;
  left: 20px;
  width: 80px;
}
@media (min-width: 992px) {
  .upgrade-overlay-logo {
    left: 40px;
    width: 120px;
  }
}

.crown-default {
  display: inline-block;
  margin-left: 5px;
}
.crown-default path {
  fill: var(--color-primary);
  fill-opacity: 1;
}
.welcome-state-index-title > .crown-default {
  position: absolute;
  right: 20px;
  top: 20px;
}
.welcome-state-index-title > .crown-default svg {
  width: 30px;
  height: 30px;
}

.subscription-plan-chooser-skip-trial {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: 50px;
  text-align: center;
}
.subscription-plan-chooser-skip-trial i {
  margin-left: 5px;
  font-size: 0.8em;
}

.subscription-pause {
  padding: 40px;
  font-size: 16px;
  background: var(--bg-grey-fc);
  border-bottom: 1px solid var(--border-content-alt);
}

.subscription-pause-copy2 {
  color: var(--text-lighter);
}

.subscription-pause-confirm-months-label {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
}

.subscription-pause-confirm-details {
  margin-bottom: 20px;
  font-size: 16px;
}

.subscription-cancellation-form {
  padding: 40px;
}

.subscription-cancellation-reason-apology {
  margin: 15px 0;
  padding: 20px;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-default);
  background-color: var(--bg-grey-f8);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}

.modal-confirm-downgrade-list {
  text-align: left;
  margin: 15px 0 0;
  padding: 0 0 0 15px;
  font-size: 14px;
}

.modal-confirm-downgrade-list-item {
  margin-bottom: 10px;
}
.modal-confirm-downgrade-list-item:last-child {
  margin-bottom: 0;
}

.modal-confirm-downgrade-warning-text {
  padding: 0 0 5px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border-content);
}

.modal-team-member-seat-status-list {
  padding-bottom: 20px;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}

.modal-team-member-seat-status-list-item {
  display: flex;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 400;
}
.modal-team-member-seat-status-list-item:last-child {
  margin-bottom: 0;
}

.modal-team-member-seat-status-list-value {
  flex-shrink: 0;
  margin-right: 10px;
  font-weight: 600;
}

.modal-team-member-seat-adder-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  text-align: center;
  background: var(--bg-grey-fa);
  border-radius: 6px;
}

.modal-team-member-seat-adder {
  max-width: 160px;
}

.modal-team-member-seat-subtract-icon {
  width: 15px;
  height: auto;
}

.modal-team-member-seat-add-icon {
  width: 15px;
  height: auto;
}

.subscription-change-plan-pricing {
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
  border: 1px solid var(--border-content);
  padding: 30px 20px;
  border-radius: 4px;
  background: var(--bg-content);
  box-shadow: 0 0 2px color-mix(in srgb, var(--black) 10%, transparent);
}

.modal-limited-plan-features {
  padding-top: 12px;
  font-size: 16px;
}

.modal-limited-plan-feature {
  position: relative;
  margin-bottom: 10px;
  padding-left: 25px;
  font-size: 14px;
}
.modal-limited-plan-feature:last-child {
  margin-bottom: 0;
}

.modal-limited-plan-feature-icon {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
}

.subscription-upgrade-modal.modal-body {
  padding: 40px 60px 60px 60px;
}

.subscription-upgrade-modal-icon {
  display: block;
  text-align: center;
  margin: 0 auto;
  height: 100px;
  width: auto;
}

.subscription-upgrade-modal-title {
  font-family: var(--font-display-header);
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  line-height: 140%;
  text-align: center;
  margin: 30px 0;
}

.subscription-upgrade-modal-points {
  list-style: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  margin-bottom: 30px;
  padding: 0;
}
.subscription-upgrade-modal-points li {
  margin-bottom: 20px;
  padding-left: 22px;
  position: relative;
}
.subscription-upgrade-modal-points .ion-checkmark {
  color: var(--color-primary);
  position: absolute;
  font-size: 1.1em;
  left: 0;
  top: 1px;
}
.subscription-upgrade-modal-points svg {
  position: absolute;
  width: auto;
  height: 10px;
  left: 0;
  top: 4px;
}
.subscription-upgrade-modal-points svg path {
  stroke: var(--color-primary);
}

.subscription-upgrade-modal-message {
  margin: 10px auto -5px;
  max-width: 260px;
  line-height: 180%;
  color: var(--text-muted);
  text-align: center;
}

.subscription-upgrade-modal-overlay-link {
  color: var(--color-primary);
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  line-height: 1em;
}
.subscription-upgrade-modal-overlay-link .ion-android-open {
  font-size: 1.3em;
}

div[data-modal-name=subscription-start-trial-overlay] .upgrade-overlay-skip-link {
  position: absolute;
}

.getting-started-page::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  background: url("leaves/leaves-left.png"), url("leaves/leaves-left@2x.png"), url("leaves/leaves-right.png"), url("leaves/leaves-right@2x.png");
}

.subscription-start-trial-overlay {
  padding: 20px;
}
@media (min-width: 768px) {
  .subscription-start-trial-overlay {
    padding: 30px;
  }
}
.subscription-start-trial-overlay .subscription-overlay-bonsai-logo .bonsai-logo {
  max-width: 120px;
}
.subscription-start-trial-overlay .subscription-overlay-content {
  max-width: 900px;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 768px) {
  .subscription-start-trial-overlay .subscription-overlay-content {
    flex-direction: row;
    align-items: flex-start;
    gap: 80px;
  }
}
.subscription-start-trial-overlay .subscription-overlay-content .getting-started-content-aside-ratings {
  display: none;
}
@media (min-width: 767px) {
  .subscription-start-trial-overlay .subscription-overlay-content .getting-started-content-aside-ratings {
    display: block;
  }
}
.subscription-start-trial-overlay .subscription-overlay-content .getting-started-content-aside-rating {
  margin: 0;
  height: 28px;
  width: auto;
}
@media (min-width: 767px) {
  .subscription-start-trial-overlay .subscription-overlay-content .getting-started-content-aside-rating {
    height: 32px;
  }
}
.subscription-start-trial-overlay .plan-information {
  flex-grow: 1;
  padding-top: 30px;
}
.subscription-start-trial-overlay .plan-information-title {
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: 600;
  color: #003c2f;
}
@media (min-width: 768px) {
  .subscription-start-trial-overlay .plan-information-title {
    font-size: 30px;
  }
}
.subscription-start-trial-overlay .plan-information-description {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .subscription-start-trial-overlay .plan-information-description {
    font-size: 20px;
    margin-bottom: 40px;
  }
}
.subscription-start-trial-overlay .plan-benefits-list {
  display: none;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .subscription-start-trial-overlay .plan-benefits-list {
    display: block;
    margin: 0 0 40px;
    font-size: 18px;
  }
}
.subscription-start-trial-overlay .plan-benefits-item {
  margin-bottom: 15px;
  display: none;
  flex-direction: row;
  align-items: center;
}
.subscription-start-trial-overlay .plan-benefits-item .subscription-icon {
  max-width: 20px;
  margin-right: 12px;
}
@media (min-width: 768px) {
  .subscription-start-trial-overlay .plan-benefits-item {
    display: flex;
    margin-bottom: 20px;
  }
}
.subscription-start-trial-overlay .plan-also-included {
  display: none;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
  box-shadow: 0px 2px 18px color-mix(in srgb, var(--black) 5%, transparent);
  padding: 20px;
  position: relative;
}
.subscription-start-trial-overlay .plan-also-included i.ion-android-close {
  position: absolute;
  top: 4px;
  right: 11px;
  font-size: 1.5em;
  color: var(--text-lighter);
}
@media (min-width: 768px) {
  .subscription-start-trial-overlay .plan-also-included {
    display: block;
    padding: 30px;
  }
}
.subscription-start-trial-overlay .plan-also-included-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1em;
  color: var(--bg-brand-dark);
  margin-bottom: 25px;
}
.subscription-start-trial-overlay .plan-also-included-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 0 0 30px;
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
}
.subscription-start-trial-overlay .plan-also-included-item {
  width: 50%;
}
.subscription-start-trial-overlay .subscription-payment {
  flex-grow: 1;
  width: 100%;
  max-width: 385px;
}
.subscription-start-trial-overlay .subscription-payment.with-payment .subscription-payment-amount-due {
  padding-bottom: 15px;
  padding-top: 0;
  border-top: none;
  border-bottom: 1px solid var(--border-content-alt);
}
.subscription-start-trial-overlay .subscription-payment.with-payment .subscription-payment-billing-cycle {
  margin-bottom: 15px;
}
.subscription-start-trial-overlay .subscription-payment .credit-card-inner-form {
  padding-top: 0;
}
.subscription-start-trial-overlay .subscription-payment .credit-card-form-group,
.subscription-start-trial-overlay .subscription-payment .credit-card-form-btn-div {
  padding: 0 0 10px 0;
}
.subscription-start-trial-overlay .subscription-payment .subscription-plan-chooser-existing-cc-content {
  padding: 0;
}
.subscription-start-trial-overlay .subscription-payment .subscription-plan-chooser-existing-cc-toggle {
  margin-top: 15px;
  padding: 0;
}
.subscription-start-trial-overlay .subscription-payment .credit-card-security-notice {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}
@media (min-width: 768px) {
  .subscription-start-trial-overlay .subscription-payment {
    background: var(--bg-grey-f5);
    border-radius: 10px;
    padding: 30px;
  }
}
@media (max-width: 768px) {
  .subscription-start-trial-overlay .subscription-payment .subscription-payment-form {
    padding-bottom: 60px;
  }
  .subscription-start-trial-overlay .subscription-payment .credit-card-form-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    border-top: 1px solid var(--border-content);
    background: var(--bg-content);
    z-index: 10;
  }
}
.subscription-start-trial-overlay .subscription-interval-selector {
  margin-bottom: 30px;
  display: flex;
  gap: 10px;
  flex-direction: column;
}
.subscription-start-trial-overlay .subscription-interval-option {
  background: var(--bg-content);
  border-radius: 4px;
  padding: 16px 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: 0 0 0 1px var(--border-content-alt);
  cursor: pointer;
  flex: 1;
  position: relative;
}
.subscription-start-trial-overlay .subscription-interval-option.selected {
  box-shadow: 0 0 0 2px var(--color-primary);
  cursor: default;
}
.subscription-start-trial-overlay .subscription-interval-option.selected .radio-label {
  cursor: default;
}
.subscription-start-trial-overlay .subscription-interval-option .radio-label {
  height: 16px;
  width: 16px;
  margin: -6px 18px 0 0;
  padding: 0;
  transform: scale(115%);
}
@media (min-width: 768px) {
  .subscription-start-trial-overlay .subscription-interval-option {
    border-color: transparent;
  }
}
.subscription-start-trial-overlay .subscription-interval-details {
  flex-grow: 1;
}
.subscription-start-trial-overlay .subscription-interval-price {
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  margin-bottom: 7px;
}
.subscription-start-trial-overlay .subscription-interval-price-value {
  font-weight: 600;
  font-size: 18px;
}
.subscription-start-trial-overlay .subscription-interval-billing {
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  color: var(--text-muted);
}
.subscription-start-trial-overlay .subscription-interval-discount {
  background: var(--bg-brand-dark);
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  line-height: 100%;
  padding: 7px 10px;
}
.subscription-start-trial-overlay .subscription-interval-discount p {
  font-weight: 600;
}
.subscription-start-trial-overlay .subscription-payment-amount-due {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--border-content-alt);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.subscription-start-trial-overlay .subscription-payment-line-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 16px;
  margin-bottom: 15px;
}
.subscription-start-trial-overlay .subscription-payment-line-item-remove {
  margin-left: 10px;
  color: var(--text-default);
}
.subscription-start-trial-overlay .subscription-payment-line-item-remove:hover {
  color: var(--color-primary);
}
.subscription-start-trial-overlay .subscription-payment-billing-cycle {
  color: var(--text-default);
  margin-bottom: 30px;
}
.subscription-start-trial-overlay .subscription-payment-billing-cycle b {
  color: var(--text-default);
}
.subscription-start-trial-overlay .subscription-payment-add-coupon {
  font-size: 14px;
  font-weight: 600;
  margin-top: 15px;
}
.subscription-start-trial-overlay .subscription-payment-coupon {
  font-weight: 500;
  color: var(--text-muted);
}
.subscription-start-trial-overlay .subscription-payment-coupon-code {
  color: var(--color-primary);
}
.subscription-start-trial-overlay .subscription-coupon {
  margin-bottom: 30px;
}
.subscription-start-trial-overlay .subscription-coupon .question-item-field-error {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-danger);
}
.subscription-start-trial-overlay .subscription-coupon-field {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.subscription-start-trial-overlay .subscription-coupon-field .btn {
  min-width: 120px;
}
.subscription-start-trial-overlay .subscription-payment-conditions-list {
  margin: 0 0 30px;
  padding: 20px;
  list-style: none;
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
}
.subscription-start-trial-overlay .subscription-payment-conditions-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}
.subscription-start-trial-overlay .subscription-payment-conditions-item .subscription-icon {
  max-width: 17px;
  margin-right: 10px;
}
.subscription-start-trial-overlay .subscription-payment-conditions-item:last-child {
  margin-bottom: 0;
}

.subscription-multi-plan-overlay .plans-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
}
@media (min-width: 992px) {
  .subscription-multi-plan-overlay .plans-list {
    padding-top: 10px;
  }
}
.subscription-multi-plan-overlay .plans-list-title {
  font-weight: 600;
  font-size: 24px;
  line-height: 140%;
  color: var(--color-primary-dark);
  text-align: center;
  margin-bottom: 40px;
  max-width: 280px;
}
@media (min-width: 768px) {
  .subscription-multi-plan-overlay .plans-list-title {
    margin-bottom: 70px;
    max-width: 100%;
  }
}
.subscription-multi-plan-overlay .plans-options {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  padding-bottom: 80px;
}
@media (min-width: 768px) {
  .subscription-multi-plan-overlay .plans-options {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
    padding-bottom: 0;
  }
}
@media (min-width: 992px) {
  .subscription-multi-plan-overlay .plans-options {
    flex-wrap: nowrap;
  }
}
.subscription-multi-plan-overlay .plan-option {
  position: relative;
  flex-grow: 1;
  padding: 30px;
  cursor: pointer;
  user-select: none;
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 20px;
}
.subscription-multi-plan-overlay .plan-option.plan-premium {
  position: relative;
  margin-top: 27px;
  border-top: 0;
  border-radius: 0 0 20px 20px;
}
.subscription-multi-plan-overlay .plan-option.plan-premium:before {
  position: absolute;
  top: -25px;
  left: -1px;
  width: calc(100% + 2px);
  content: "Most Popular";
  padding: 7px 0;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  line-height: 13px;
  text-align: center;
  text-transform: uppercase;
  background: var(--color-primary-dark);
  border-radius: 20px 20px 0 0;
}
.subscription-multi-plan-overlay .plan-option.plan-premium.selected {
  border-color: var(--color-primary-dark);
}
@media (min-width: 768px) {
  .subscription-multi-plan-overlay .plan-option.plan-premium {
    margin-top: 0;
  }
}
.subscription-multi-plan-overlay .plan-option.selected {
  border-color: var(--color-primary);
}
@media (min-width: 768px) {
  .subscription-multi-plan-overlay .plan-option {
    max-width: 330px;
    width: 50%;
    padding: 30px 30px 50px;
  }
}
@media (min-width: 1200px) {
  .subscription-multi-plan-overlay .plan-option {
    width: auto;
  }
}
.subscription-multi-plan-overlay .plan-option-included {
  display: none;
}
@media (min-width: 768px) {
  .subscription-multi-plan-overlay .plan-option-included {
    display: block;
  }
}
.subscription-multi-plan-overlay .plan-option.selected .plan-option-included {
  display: block;
}
.subscription-multi-plan-overlay .plan-option-header {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
}
.subscription-multi-plan-overlay .plan-option-tagline {
  font-weight: 500;
  font-size: 16px;
  line-height: 140%;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.subscription-multi-plan-overlay .plan-option-name {
  margin: 0;
  font-weight: 600;
  font-size: 24px;
  line-height: 100%;
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .subscription-multi-plan-overlay .plan-option-name {
    font-size: 30px;
  }
}
.subscription-multi-plan-overlay .plan-option-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 30px;
  top: 30px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-content-alt);
  border-radius: 50%;
}
.subscription-multi-plan-overlay .plan-option-radio .checkmark-icon {
  width: 15px;
  height: auto;
  margin-top: 1px;
  opacity: 0;
}
.subscription-multi-plan-overlay .plan-option-radio.selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  overflow: hidden;
}
.subscription-multi-plan-overlay .plan-option-radio.selected .checkmark-icon {
  opacity: 1;
}
@media (min-width: 768px) {
  .subscription-multi-plan-overlay .plan-option-radio {
    right: 26px;
    top: 26px;
  }
}
.subscription-multi-plan-overlay .plan-option-included {
  margin-top: 20px;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .subscription-multi-plan-overlay .plan-option-included {
    margin-top: 28px;
  }
}
.subscription-multi-plan-overlay .plan-option-included h5 {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 20px;
}
.subscription-multi-plan-overlay .plan-features-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.subscription-multi-plan-overlay .plan-features-item {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.subscription-multi-plan-overlay .plan-features-item .subscription-icon {
  width: 15px;
  height: auto;
  flex-shrink: 0;
}
.subscription-multi-plan-overlay .plans-footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  background: var(--bg-content);
  border-top: 1px solid var(--border-darker);
  position: fixed;
  bottom: 0;
  padding: 20px;
}
@media (min-width: 768px) {
  .subscription-multi-plan-overlay .plans-footer {
    background: transparent;
    position: relative;
    padding: 0;
    border: 0;
  }
  .subscription-multi-plan-overlay .plans-footer .btn-primary {
    max-width: 300px;
  }
}
.subscription-multi-plan-overlay .payment-step {
  display: flex;
  flex-direction: column-reverse;
  gap: 30px;
  margin-top: 40px;
  padding-bottom: 80px;
}
@media (min-width: 768px) {
  .subscription-multi-plan-overlay .payment-step {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    margin-top: 70px;
    padding-bottom: 0;
    gap: 0;
  }
}
.subscription-multi-plan-overlay .payment-card-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 575px;
  flex-grow: 1;
}
.subscription-multi-plan-overlay .payment-card-details .payment-card-details-title {
  display: none;
}
@media (min-width: 768px) {
  .subscription-multi-plan-overlay .payment-card-details {
    padding: 60px 60px 70px;
    border: 1px solid var(--border-darker);
    background: var(--bg-content);
    border-radius: 20px 0 0 20px;
    gap: 40px;
  }
  .subscription-multi-plan-overlay .payment-card-details .payment-card-details-title {
    display: block;
  }
}
.subscription-multi-plan-overlay .payment-card-details-title {
  font-weight: 600;
  font-size: 24px;
  line-height: 140%;
  color: var(--text-default);
  margin: 0;
}
@media (min-width: 768px) {
  .subscription-multi-plan-overlay .payment-card-details-title {
    font-size: 30px;
  }
}
.subscription-multi-plan-overlay .payment-method-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.subscription-multi-plan-overlay .payment-method-title h3 {
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: var(--text-default);
  margin: 0;
}
.subscription-multi-plan-overlay .payment-method-icons img {
  width: auto;
  height: 21px;
  margin-left: 7px;
}
.subscription-multi-plan-overlay .credit-card-inner-form {
  padding-top: 0;
}
.subscription-multi-plan-overlay .credit-card-inner-form .credit-card-form-group,
.subscription-multi-plan-overlay .credit-card-form-btn-div {
  padding-left: 0;
  padding-right: 0;
}
.subscription-multi-plan-overlay .subscription-plan-chooser-existing-cc-wrapper {
  max-width: 100%;
  margin: 0;
}
.subscription-multi-plan-overlay .subscription-plan-chooser-existing-cc-content {
  padding: 0 0 20px 0;
}
@media (max-width: 767px) {
  .subscription-multi-plan-overlay .subscription-plan-chooser-existing-cc-content {
    padding-bottom: 0;
  }
  .subscription-multi-plan-overlay .subscription-plan-chooser-existing-cc-content form,
  .subscription-multi-plan-overlay .credit-card-form-btn-div {
    width: 100%;
    background: var(--bg-content);
    border-top: 1px solid var(--border-darker);
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 20px;
  }
}
.subscription-multi-plan-overlay .credit-card-security-notice {
  padding-top: 0 !important;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}
.subscription-multi-plan-overlay .subscription-payment-conditions-list {
  padding: 23px 25px;
  color: var(--text-default);
  margin: 0;
}
.subscription-multi-plan-overlay .subscription-payment-conditions-list .subscription-payment-conditions-item {
  margin-bottom: 20px;
}
.subscription-multi-plan-overlay .subscription-payment-conditions-list .subscription-payment-conditions-item:last-child {
  margin-bottom: 0;
}
.subscription-multi-plan-overlay .getting-started-content-aside-ratings {
  display: flex;
  flex-direction: row;
  gap: 40px;
  justify-content: center;
  align-items: center;
}
@media (min-width: 767px) {
  .subscription-multi-plan-overlay .getting-started-content-aside-ratings {
    gap: 40px;
  }
}
.subscription-multi-plan-overlay .getting-started-content-aside-rating {
  margin: 0;
  height: 28px;
  width: auto;
}
@media (min-width: 767px) {
  .subscription-multi-plan-overlay .getting-started-content-aside-rating {
    height: 24px;
  }
}
.subscription-multi-plan-overlay .subscription-payment {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 433px;
  flex-grow: 1;
}
.subscription-multi-plan-overlay .subscription-payment .payment-card-details-title {
  display: block;
  border-bottom: 1px solid var(--border-content-alt);
  padding-bottom: 15px;
}
@media (min-width: 768px) {
  .subscription-multi-plan-overlay .subscription-payment {
    padding: 60px 60px 70px;
    border: 1px solid var(--border-darker);
    border-radius: 0 20px 20px 0;
    border-left-width: 0;
    background: var(--bg-grey-f5);
  }
  .subscription-multi-plan-overlay .subscription-payment .payment-card-details-title {
    display: none;
  }
}
.subscription-multi-plan-overlay .subscription-payment-header {
  margin-top: -5px;
}
@media (min-width: 767px) {
  .subscription-multi-plan-overlay .subscription-payment-header {
    margin-top: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-darker);
  }
}
.subscription-multi-plan-overlay .subscription-payment-plan {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}
.subscription-multi-plan-overlay .subscription-payment-plan h3 {
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: var(--text-default);
  margin: 0;
}
.subscription-multi-plan-overlay .subscription-payment-plan a {
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  color: var(--color-primary);
  margin-top: 3px;
}
.subscription-multi-plan-overlay .subscription-payment-plan-tagline {
  font-weight: 500;
  font-size: 16px;
  line-height: 140%;
  color: var(--text-muted);
  margin: 0;
}
.subscription-multi-plan-overlay .subscription-plan-chooser-total-coupon-amount {
  display: none;
}
.subscription-multi-plan-overlay .subscription-interval-selector {
  margin-bottom: 0;
}
.subscription-multi-plan-overlay .subscription-interval-selector .subscription-interval-discount {
  text-align: center;
  background: var(--color-primary-dark);
  font-weight: normal;
  line-height: 128%;
  padding: 6px 10px;
}
.subscription-multi-plan-overlay .subscription-interval-selector .subscription-interval-discount strong {
  display: block;
}

.subscription-start-trial-overlay.no-cc-trial .subscription-interval-selector {
  flex-direction: row;
}
.subscription-start-trial-overlay.no-cc-trial .subscription-interval-option {
  padding: 20px;
}
.subscription-start-trial-overlay.no-cc-trial .subscription-interval-option .radio-label {
  display: none;
}
.subscription-start-trial-overlay.no-cc-trial .subscription-interval-price {
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 0;
}
.subscription-start-trial-overlay.no-cc-trial .subscription-interval-billing {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-default);
}
.subscription-start-trial-overlay.no-cc-trial .subscription-payment-header {
  padding-bottom: 0;
  border-bottom: none;
}
.subscription-start-trial-overlay.no-cc-trial .subscription-interval-discount {
  font-weight: 600;
  padding: 5px;
  position: absolute;
  top: 15px;
  right: 15px;
  line-height: 100%;
  color: var(--text-lighter);
}
.subscription-start-trial-overlay.no-cc-trial .subscription-payment-amount-due {
  padding-top: 15px;
  padding-bottom: 0;
  border-top: 1px solid var(--border-content-alt);
  border-bottom: 0;
}

.tags-manage-list-item {
  position: relative;
  margin-bottom: 2px;
  padding: 8px 35px 7px 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--bg-0);
  border-radius: 3px;
}
.tags-manage-list-item:last-child {
  margin-bottom: 0;
}

.tags-manage-list-item-remove {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px;
  font-size: 0.95em;
}
.tags-manage-list-item-remove, .tags-manage-list-item-remove:focus, .tags-manage-list-item-remove:visited {
  color: var(--text-placeholder);
}
.tags-manage-list-item-remove:hover, .tags-manage-list-item-remove:active {
  color: var(--text-8);
}

.tags-manage-list-empty {
  display: none;
  padding: 60px 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--border-2);
  background: var(--bg-7);
  border: 1px solid color-mix(in srgb, var(--overlay-base) 5%, transparent);
  border-radius: 4px;
}
.tags-manage-list-empty.active {
  display: block;
}

.autocomplete-tags-input-wrapper {
  position: relative;
  z-index: 2;
}

.autocomplete-tags-suggestions {
  position: absolute;
  z-index: 3;
  display: none;
  left: 0;
  top: 100%;
  width: 100%;
  max-height: 200px;
  overflow: scroll;
  background: var(--bg-9);
  border: 1px solid var(--border-1);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 8px color-mix(in srgb, var(--overlay-base) 8%, transparent);
}

.autocomplete-tags-suggestion-item {
  position: relative;
  padding: 12px 12px 11px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-normal) ease;
}
.autocomplete-tags-suggestion-item:last-child {
  border-radius: 0 0 4px 4px;
}
.autocomplete-tags-suggestion-item:hover {
  color: var(--text-muted);
  background: var(--bg-7);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--overlay-base) 2%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--overlay-base) 2%, transparent);
}

.autocomplete-tags-suggestion-item-icon {
  margin-right: 10px;
  font-size: 0.85em;
}

.tags-display-list {
  display: inline-block;
  color: var(--text-8);
  color: color-mix(in srgb, var(--overlay-base) 35%, transparent);
  font-weight: 500;
  font-size: 16px;
}
.tags-display-list .link-inline, .tags-display-list .modal-payment-methods-item-edit-link {
  display: inline-block;
  vertical-align: middle;
  padding-left: 5px;
  transition: all var(--transition-normal) ease;
}

.tags-display-list-icon {
  position: relative;
  display: inline-block;
  margin-right: 4px;
  top: 1px;
}

.tags-display-list-item {
  cursor: default;
  color: var(--text-7);
  font-weight: 600;
}

.tax-rates-select {
  position: relative;
}
.tax-rates-select .tax-rates-select-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--border-field);
  border-radius: 4px;
  background-color: var(--bg-content);
  min-height: 36px;
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
}
.tax-rates-select .tax-rates-select-trigger:hover, .tax-rates-select .tax-rates-select-trigger:focus {
  border-color: var(--color-primary);
  box-shadow: none;
}
.tax-rates-select .tax-rates-select-trigger[disabled] {
  border-color: var(--border-content);
  cursor: not-allowed;
  background-color: #f9f9f9;
}
.tax-rates-select .tax-rates-select-trigger[disabled]:hover, .tax-rates-select .tax-rates-select-trigger[disabled]:focus {
  border-color: var(--border-content);
  box-shadow: none;
}
.tax-rates-select .tax-rates-select-trigger.is-open {
  border: 1px solid var(--color-primary);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}
.tax-rates-select .tax-rates-select-trigger .tax-rates-select-text.text-muted {
  color: #6c757d;
}
.tax-rates-select .tax-rates-select-trigger .tax-rates-select-chevron {
  margin-left: 8px;
  transform: rotate(0deg);
  transition: transform var(--transition-normal) ease;
}
.tax-rates-select .tax-rates-select-trigger .tax-rates-select-chevron.is-open {
  transform: rotate(180deg);
}
.tax-rates-select .tax-rates-select-trigger .tax-rates-select-chevron-icon {
  width: 12px;
  height: 6px;
}

.task-modal-subtasks {
  padding: 30px 0 30px;
  border-top: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .task-modal-subtasks {
    padding: 30px 0 30px;
  }
}
.task-modal-subtasks .dashboard-chart-title {
  padding-left: 20px;
}
@media (min-width: 768px) {
  .task-modal-subtasks .dashboard-chart-title {
    padding-left: 40px;
  }
}

.subtask-item-sortable-item {
  position: relative;
  padding-left: 40px;
  padding-right: 40px;
}
.subtask-item-sortable-item:hover {
  background: var(--bg-grey-fc);
}

.subtask-form-wrapper {
  position: relative;
  width: 100%;
  padding: 1px 100px 1px 25px;
  border: 1px solid transparent;
  border-radius: 6px;
}

.subtask-clickable-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.subtask-form-input.form-field.input-sm, .input-group-sm > .subtask-form-input.form-field.form-control,
.input-group-sm > .subtask-form-input.form-field.input-group-addon,
.input-group-sm > .input-group-btn > .subtask-form-input.form-field.btn {
  padding-left: 35px;
  border: none;
  font-weight: 500;
}

.subtask-form-input-icon.task-item-checked-box {
  left: 15px;
  top: 17px;
  pointer-events: none;
}

.subtask-form-save-btn {
  position: absolute;
  right: 10px;
  top: 10px;
}

.subtask-items {
  margin-top: 10px;
  margin-bottom: 5px;
}
.subtask-items:empty {
  margin: 0;
}

.subtask-item-wrapper {
  position: relative;
  padding-left: 30px;
  padding-right: 60px;
}
.subtask-item-wrapper.completing {
  pointer-events: none;
}
.subtask-item-wrapper .task-item-checked-box {
  top: 7px;
  left: 0;
}

.subtask-item-toggle {
  position: absolute;
  left: -5px;
  top: -2px;
  width: 30px;
  height: 36px;
  cursor: pointer;
}

.subtask-field,
.subtask-field-input {
  font-weight: 500;
  color: var(--text-default);
  border: none !important;
  box-shadow: none !important;
  transition: color var(--transition-slower) ease;
}
.subtask-field.completing,
.subtask-field-input.completing {
  color: var(--text-lighter);
}
.subtask-field.completed,
.subtask-field-input.completed {
  color: var(--text-lighter);
}

.subtask-field {
  transition: all var(--transition-slower) ease;
}
.subtask-field:not(.completing):hover, .subtask-field:not(.completed):hover {
  background: var(--bg-grey-fa) !important;
}

.subtask-field-input {
  background: var(--bg-grey-fa) !important;
}

.subtask-priority-link {
  position: absolute;
  display: flex;
  align-items: center;
  right: 63px;
  top: 4px;
}
.subtask-priority-link .ghost--toggle {
  height: 30px;
  width: 30px;
  padding: 0;
  cursor: pointer;
  opacity: 0;
}
.subtask-item-sortable-item:hover .subtask-priority-link .ghost--toggle, .subtask-form-wrapper.subtask-form-wrapper--focused .subtask-priority-link .ghost--toggle {
  opacity: 1;
}
.subtask-priority-link.subtask-priority-link--with-value .ghost--toggle {
  opacity: 1;
}
.subtask-priority-link .task-modal-priority-icon {
  top: 7px;
  left: 9px;
  width: 14px;
}

.subtask-item-tooltip.react-tooltip {
  position: absolute !important;
  top: auto !important;
  bottom: 100%;
}

.subtask-assignee {
  position: absolute;
  right: 27px;
  top: 4px;
}
.subtask-assignee .ghost--toggle {
  width: 34px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
}
.subtask-item-sortable-item:hover .subtask-assignee .ghost--toggle, .subtask-form-wrapper.subtask-form-wrapper--focused .subtask-assignee .ghost--toggle {
  opacity: 1;
}
.subtask-assignee.subtask-assignee--showing .ghost--toggle {
  opacity: 1;
}

.subtask-assignee-dropdown {
  position: relative;
  z-index: 3;
  width: 200px;
}

.subtask-assignee-user-avatar {
  position: absolute;
  right: 0;
  top: 5px;
  cursor: pointer;
}

.subtask-unassigned-icon {
  position: absolute;
  right: 2px;
  top: 6px;
  width: auto;
  height: 18px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: all var(--transition-fast) ease;
}
.subtask-form-wrapper:hover .subtask-unassigned-icon {
  opacity: 1;
}

.subtask-status {
  position: absolute;
  display: flex;
  align-items: center;
  right: -5px;
  top: 4px;
  height: 30px;
  width: 30px;
  cursor: pointer;
  border-radius: 3px;
  transition: background-color var(--transition-slower) ease;
}
.subtask-status:hover {
  background-color: var(--bg-input-hover);
}

.subtask-item-details-link {
  position: absolute;
  left: 100%;
  top: -0.5px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 40px;
  height: 100%;
  padding-top: 11px;
  padding-right: 6px;
  cursor: pointer;
  border-radius: 3px;
  transition: all var(--transition-slower) ease;
}
@media (min-width: 768px) {
  .subtask-item-details-link {
    opacity: 0;
  }
  .subtask-item-sortable-item:hover .subtask-item-details-link {
    opacity: 1;
  }
}

.subtask-item-details-icon {
  width: 18px;
  height: auto;
}
.subtask-item-details-icon path {
  fill: var(--text-lighter);
}
.subtask-item-details-link:hover .subtask-item-details-icon path {
  fill: var(--text-muted);
}

.task-modal-subtasks-reorder {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  left: 10px;
  height: 100%;
  padding: 14px 8px 14px 10px;
  outline: none;
  border: none;
  background: none;
}
@media (min-width: 768px) {
  .task-modal-subtasks-reorder {
    display: none;
    left: 15px;
  }
  .subtask-item-sortable-item:hover .task-modal-subtasks-reorder {
    display: flex;
  }
}

.task-modal-subtasks-reorder-icon {
  width: 8px;
  height: auto;
}
.task-modal-subtasks-reorder-icon path {
  fill: var(--border-content-alt);
}
.subtask-item-sortable-item:hover .task-modal-subtasks-reorder-icon path {
  fill: var(--text-lighter);
}
.task-modal-subtasks-reorder:hover .task-modal-subtasks-reorder-icon path, .task-modal-subtasks-reorder:active .task-modal-subtasks-reorder-icon path {
  fill: var(--text-muted);
}

.task-list-items .subtask-item {
  display: flex;
  align-items: center;
}
.task-list-items .subtask-form-wrapper {
  display: flex;
  align-items: center;
  padding: 0;
}
.task-list-items .task-item-toggle {
  position: static;
  margin-right: -5px;
}
.task-list-items .subtask-item-details-link {
  position: absolute;
  padding: 0;
  align-items: center;
}

.signup-page-connect-bg {
  position: absolute;
  left: 0;
  top: 260px;
  bottom: 0;
  width: 100%;
  background-color: var(--bg-content);
  border-top: 1px solid var(--border-content-alt);
}

.signup-page-connect-logo-img {
  position: relative;
  width: 120px;
  margin: 0 auto 50px;
}
@media (min-width: 768px) {
  .signup-page-connect-logo-img {
    width: 180px;
    margin: 0 auto 60px;
  }
}

.signup-page-connect {
  padding-bottom: 60px;
  text-align: center;
}

.signup-page-connect-form {
  position: relative;
  max-width: 460px;
  min-height: 480px;
  margin: auto;
  padding: 50px 40px 40px;
  background: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--bg-shadow) 3%, transparent);
  border-radius: 12px;
}
@media (min-width: 480px) {
  .signup-page-connect-form {
    padding: 60px 60px 40px;
  }
}
.signup-page-connect-form .signup-page-form {
  max-width: none;
  padding: 20px 0 0;
  box-shadow: none;
}
.signup-page-connect-form .signup-page-form .btn {
  max-width: none;
}

.signup-page-connect-bar {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  overflow: hidden;
  border-radius: 50px 50px 0 0;
}
.signup-page-connect-bar.freelancers-union-connect .signup-page-connect-bar-section {
  background-color: #F88262;
}
.signup-page-connect-bar.betterlegal-connect .signup-page-connect-bar-section {
  background-color: #563c5c;
}
.signup-page-connect-bar.zoom-connect .signup-page-connect-bar-section {
  background-color: #0B5BFF;
}

.signup-page-connect-bar-section {
  width: 16.6%;
  height: 100%;
  background: var(--bg-grey-e);
}
.signup-page-connect-bar-section.section-1 {
  background-color: color-mix(in srgb, var(--dribbble-pink) 100%, transparent);
}
.signup-page-connect-bar-section.section-2 {
  background-color: color-mix(in srgb, var(--dribbble-pink) 60%, transparent);
}
.signup-page-connect-bar-section.section-3 {
  background-color: color-mix(in srgb, var(--dribbble-pink) 30%, transparent);
}
.signup-page-connect-bar-section.section-4 {
  background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.signup-page-connect-bar-section.section-5 {
  background-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}
.signup-page-connect-bar-section.section-6 {
  background-color: color-mix(in srgb, var(--color-primary) 100%, transparent);
}

.signup-page-connect-bar-spacer {
  width: 0.4%;
  height: 100%;
  background: var(--bg-content);
}

.signup-page-connect-form-header {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .signup-page-connect-form-header {
    font-size: 22px;
    margin: auto;
  }
}

.signup-page-connect-form-subheader {
  font-size: 15px;
  margin-top: 10px;
}

.signup-page-connect-form-login {
  position: relative;
  margin-top: 30px;
  color: var(--text-muted);
  text-align: center;
}

.login-page {
  padding: 70px 0;
}
@media (min-width: 768px) {
  .login-page {
    padding: 80px 0;
  }
}
@media (min-height: 1000px) {
  .login-page {
    padding: 80px 0;
  }
}

.authentication-page-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 219px;
  border-bottom: 1px solid var(--border-content-alt);
}

.authentication-page-content {
  position: relative;
  max-width: 400px;
  margin: auto;
  padding: 60px 40px;
  background-color: var(--bg-panel);
  border-radius: 6px;
  border: 1px solid var(--border-content-alt);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--bg-shadow) 3%, transparent);
}
@media (min-width: 768px) {
  .authentication-page-content {
    padding: 60px 40px;
    border-radius: 6px;
  }
  .authentication-page-content.password-page-content {
    padding-bottom: 40px;
  }
}
.authentication-page-content h2 {
  font-size: 26px;
}
@media (min-width: 768px) {
  .authentication-page-content .control-label {
    padding-right: 10px;
  }
}
.authentication-page-content .form-group {
  margin-bottom: 10px;
}
.authentication-page-content .form-group:after {
  content: "";
  display: table;
  clear: both;
}
.authentication-page-content .form-control {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
.authentication-page-content .btn {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

#error_explanation,
#error-explanation {
  margin-bottom: 40px;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-danger-dark);
  background: var(--color-danger-light);
  border: 1px solid color-mix(in srgb, var(--color-danger) 20%, transparent);
  border-radius: 6px;
}

.error-explanation-reason {
  display: block;
  margin-bottom: 5px;
}
.error-explanation-reason:last-child {
  margin-bottom: 0;
}

.login-page-prepop-email {
  position: relative;
  padding: 10px 0;
  overflow: hidden;
  font-size: 14px;
  text-align: left;
  cursor: not-allowed;
  border-bottom: 1px solid var(--border-content-alt);
}

.devise-links {
  font-size: 16px;
  font-weight: 400;
}

.devise-links-log-in {
  margin-top: 10px;
  font-size: 14px;
}

.login-cta-divider-section {
  position: relative;
}

.login-cta-divider-section-or {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 1px 12px 0;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-panel);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.login-cta-divider-section-or.grey-bg {
  background-color: var(--bg-grey-fc);
}

.login-cta-divider {
  margin: 30px 0;
}

.login-connect-btn {
  display: flex;
  height: 46px;
  margin-top: 10px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
  border-radius: 4px;
  line-height: 1em;
}
.login-connect-btn, .login-connect-btn:focus, .login-connect-btn:visited {
  color: var(--text-default);
  background: var(--bg-panel);
  border: 1px solid var(--border-field);
}
.login-connect-btn:hover {
  color: var(--text-default);
  background: var(--bg-panel);
  border-color: color-mix(in srgb, var(--color-primary) 80%, transparent);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--black) 5%, transparent);
}
.login-connect-btn:active {
  color: var(--text-default);
  background: var(--bg-panel);
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--black) 3%, transparent);
}

.login-connect-icon {
  width: 20px;
}

.login-connect-text {
  margin-left: 15px;
  margin-right: 10px;
}

.password-reset-form {
  margin-bottom: 40px;
}

.login-password-reset-success {
  display: none;
  margin-bottom: 40px;
  padding: 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted-alt);
  background: var(--bg-grey-fa);
  border: 1px solid var(--border-content);
  border-radius: 4px;
  text-align: center;
}

.login-password-reset-error {
  display: none;
  margin-bottom: 40px;
  padding: 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted-alt);
  background: var(--bg-grey-fa);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.login-page-password-set-success {
  padding: 30px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted-alt);
  background: var(--bg-grey-fa);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.login-page-authorization-errors {
  display: none;
  padding: 10px 12px 10px;
  color: var(--color-primary-contrast);
  font-size: 12px;
  font-weight: 600;
  background: var(--color-danger);
  border-radius: 6px;
}

#sessions-new-content .login-content-container {
  max-width: 840px;
  margin: 0 auto;
}
#sessions-new-content .login-headway-changelog {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 40px auto;
}
@media (min-width: 768px) {
  #sessions-new-content .login-headway-changelog {
    float: left;
    width: 340px;
    margin: 0;
  }
}
#sessions-new-content .login-headway-changelog-loading {
  position: absolute;
  left: 0;
  right: 0;
  top: 200px;
}
#sessions-new-content #HW_frame_cont {
  width: 100%;
  box-shadow: 0 0 0 1px var(--border-content-alt), 0 8px 16px color-mix(in srgb, var(--black) 5%, transparent);
}
#sessions-new-content .authentication-page-content {
  width: 100%;
}
@media (min-width: 768px) {
  #sessions-new-content .authentication-page-content {
    float: right;
  }
}

.login-g-recaptcha,
.passwords-g-recaptcha {
  margin-bottom: 20px;
}
.login-g-recaptcha iframe,
.passwords-g-recaptcha iframe {
  width: 100% !important;
  transform: scale(0.98);
  transform-origin: 0 0;
}
@media (min-width: 480px) {
  .login-g-recaptcha iframe,
  .passwords-g-recaptcha iframe {
    transform: scale(1.05);
  }
}

.signup-fullpage {
  position: relative;
  padding: 80px 0;
  background-color: var(--bg-content);
  border-bottom: 1px solid var(--border-content-alt);
}
@media (min-width: 768px) {
  .signup-fullpage {
    padding: 0 0 0 36%;
  }
}

.signup-fullpage-aside {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-content);
  overflow: hidden;
}
@media (min-width: 768px) {
  .signup-fullpage-aside {
    width: 36%;
    height: 100%;
    border-right: 1px solid var(--border-content-alt);
  }
}

.signup-fullpage-aside-bg {
  position: absolute;
  right: 0;
  top: 0;
  width: 1080px;
  height: auto;
}

.signup-fullpage-aside-hero-wrapper {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 100%);
}

.signup-fullpage-hero {
  position: absolute;
  display: none;
  left: 50%;
  margin-left: -280px;
  top: 90px;
  width: 560px;
  height: auto;
}
@media (min-width: 768px) {
  .signup-fullpage-hero {
    display: block;
  }
}

.signup-fullpage-main {
  position: relative;
  text-align: center;
}

.signup-fullpage-main-content {
  max-width: 570px;
  margin: auto;
}
.signup-fullpage-main-content .signup-page-form {
  max-width: none;
  padding: 0 40px 60px;
  background: none;
  box-shadow: none;
}
@media (min-width: 768px) {
  .signup-fullpage-main-content .signup-page-form {
    padding: 0 60px 120px;
  }
}
.signup-fullpage-main-content .signup-page-form .btn {
  max-width: none;
}
.signup-fullpage-main-content .signup-page-lead-avatar {
  margin-bottom: 0;
}

.signup-fullpage-main-header-content {
  padding: 40px 40px 40px;
  text-align: left;
}
@media (min-width: 768px) {
  .signup-fullpage-main-header-content {
    padding: 100px 60px 60px;
  }
}

.signup-fullpage-main-header {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font-display-header);
  color: var(--text-default);
}
@media (min-width: 768px) {
  .signup-fullpage-main-header {
    font-size: 28px;
  }
}

.signup-fullpage-aside-text {
  display: flex;
  align-items: center;
  padding: 40px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-default);
  cursor: default;
}
@media (min-width: 768px) {
  .signup-fullpage-aside-text {
    position: absolute;
    left: 0;
    top: 40px;
    width: 100%;
    padding: 0 40px;
    font-size: 14px;
  }
}
.signup-fullpage-aside-text .tooltip {
  max-width: 180px;
}

.signup-fullpage-aside-logo {
  width: 30px;
  margin-right: 20px;
}

.unsubscribe-page {
  position: relative;
  max-width: 600px;
  margin: auto;
  padding: 40px 0;
  text-align: center;
}
@media (min-width: 600px) {
  .unsubscribe-page {
    padding: 80px 0;
  }
}

.unsubscribe-message {
  margin-bottom: 20px;
  padding: 20px 20px 18px;
  font-size: 18px;
  text-align: center;
  color: var(--color-accent-brown);
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  background-color: var(--bg-yellow);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 4px;
}
@media (min-width: 500px) {
  .unsubscribe-message {
    padding: 20px 40px 18px;
  }
}

.unsubscribe-groups {
  padding: 40px;
  text-align: left;
  background-color: var(--bg-content);
  border: 1px solid var(--border-content);
}

.unsubscribe-group {
  position: relative;
  margin-bottom: 40px;
}

.unsubscribe-checkbox-wrap {
  position: relative;
  padding-left: 40px;
}

.unsubscribe-checkbox-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
}

.unsubscribe-checkbox-right {
  font-size: 18px;
  cursor: pointer;
  -webkit-touch-callout: none;
  user-select: none;
}

.unsubscribe-btn-wrap {
  text-align: center;
}

.signup-fullpage-testimonial {
  position: relative;
  padding: 40px 0 80px;
  background-color: var(--bg-content);
  border-bottom: 1px solid var(--border-content-alt);
}
@media (min-width: 768px) {
  .signup-fullpage-testimonial {
    padding: 0 0 0 36%;
  }
}

.signup-fullpage-testimonial-aside {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-content);
  overflow: hidden;
}
@media (min-width: 768px) {
  .signup-fullpage-testimonial-aside {
    width: 36%;
    height: 100%;
    border-right: 1px solid var(--border-content-alt);
  }
}

.signup-fullpage-testimonial-aside-bg {
  position: absolute;
  right: 0;
  top: 0;
  width: 1080px;
  height: auto;
}

.signup-fullpage-testimonial-aside-hero-wrapper {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 100%);
}

.signup-fullpage-testimonial-hero {
  position: absolute;
  display: none;
  left: 50%;
  margin-left: -230px;
  bottom: 200px;
  width: 460px;
  height: auto;
}
@media (min-width: 768px) {
  .signup-fullpage-testimonial-hero {
    display: block;
  }
}

.signup-fullpage-testimonial-main {
  position: relative;
  text-align: center;
}

.signup-fullpage-testimonial-main-content {
  max-width: 570px;
  margin: auto;
}
.signup-fullpage-testimonial-main-content .signup-page-form {
  max-width: none;
  padding: 0 40px 60px;
  background: none;
  box-shadow: none;
}
@media (min-width: 768px) {
  .signup-fullpage-testimonial-main-content .signup-page-form {
    padding: 0 60px 120px;
  }
}
.signup-fullpage-testimonial-main-content .signup-page-form .btn {
  max-width: none;
}
.signup-fullpage-testimonial-main-content .signup-page-lead-avatar {
  margin-bottom: 0;
}

.signup-fullpage-testimonial-main-header-content {
  padding: 40px 40px 40px;
  text-align: left;
}
@media (min-width: 768px) {
  .signup-fullpage-testimonial-main-header-content {
    padding: 100px 60px 60px;
  }
}

.signup-fullpage-testimonial-main-header {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font-display-header);
  color: var(--text-default);
}
@media (min-width: 768px) {
  .signup-fullpage-testimonial-main-header {
    font-size: 28px;
  }
}

.signup-fullpage-testimonial-quote {
  position: absolute;
  display: none;
  left: 0;
  right: 0;
  bottom: 55px;
  padding: 0 40px;
}
@media (min-width: 768px) {
  .signup-fullpage-testimonial-quote {
    display: block;
  }
}

.signup-fullpage-testimonial-quote-icon {
  width: 15px;
  height: auto;
}

.signup-fullpage-testimonial-quote-copy {
  margin-top: 12px;
  font-size: 16px;
  font-style: italic;
}

.signup-fullpage-testimonial-quote-source {
  display: flex;
  align-items: center;
  margin-top: 20px;
  font-size: 12px;
}

.signup-fullpage-testimonial-avatar {
  width: 30px;
  height: 30px;
  margin-right: 15px;
  border-radius: 4px;
}

.signup-page {
  position: relative;
  padding: 0 20px 60px;
}
@media (min-width: 768px) {
  .signup-page {
    padding: 0 0 80px;
  }
}
.signup-page .form-field-hint {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  margin: 7px 0 0;
}

.signup-page-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 212px;
  background-color: var(--bg-content);
  border-bottom: 1px solid var(--border-content-alt);
}

.signup-page-logo-section {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding: 30px 0;
  text-align: center;
}
@media (min-width: 768px) {
  .signup-page-logo-section {
    padding: 30px 20px;
  }
}
@media (min-width: 900px) {
  .signup-page-logo-section {
    padding: 20px 20px 0;
  }
}

.signup-page-header-login {
  color: var(--text-default);
}
.signup-page-header-login a,
.signup-page-header-login a:focus,
.signup-page-header-login a:visited {
  color: var(--text-default);
  font-weight: 600;
  text-decoration: underline;
}
.signup-page-header-login a:hover,
.signup-page-header-login a:active {
  color: var(--text-muted);
  text-decoration: underline;
}

.signup-page-header-login-copy {
  display: none;
  margin-right: 7px;
}
@media (min-width: 1160px) {
  .signup-page-header-login-copy {
    display: inline;
  }
}

.auth-page-logo-section {
  position: relative;
  z-index: 2;
  padding: 30px 0;
  text-align: center;
}

.signup-page-logo {
  width: 100px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .signup-page-logo {
    filter: brightness(1) grayscale(1) contrast(1.5) invert(0.5);
  }
}
:root[data-theme=dark] .signup-page-logo {
  filter: brightness(1) grayscale(1) contrast(1.5) invert(0.5);
}

.signup-page-content {
  position: relative;
  z-index: 2;
  max-width: 500px;
  margin: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border-content-alt);
  border-radius: 10px;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--black) 3%, transparent);
}

.signup-page-content-in {
  padding: 30px;
  text-align: center;
}
@media (min-width: 768px) {
  .signup-page-content-in {
    padding: 35px 60px 60px;
  }
}

.signup-page-onboarding-content-in {
  padding: 30px;
  text-align: center;
}
@media (min-width: 768px) {
  .signup-page-onboarding-content-in {
    padding: 35px 0 60px;
  }
}

.signup-page-header-content {
  margin-bottom: 0;
}

.signup-page-lead-avatar {
  margin-bottom: 40px;
}
.signup-page-lead-avatar img {
  width: 100px;
  height: 100px;
  box-shadow: 0 1px 5px color-mix(in srgb, var(--black) 5%, transparent);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.signup-page-header {
  max-width: 720px;
  margin: 0 auto 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .signup-page-header {
    font-size: 20px;
  }
}

.signup-page-header2 {
  font-weight: 600;
  font-size: 16px;
}
@media (min-width: 768px) {
  .signup-page-header2 {
    font-size: 20px;
  }
}

.highlight {
  background-color: var(--bg-highlight);
}

.signup-page-form {
  display: inline-block;
  width: 100%;
  padding: 20px 0 0;
  text-align: center;
  box-shadow: none;
}
@media (min-width: 768px) {
  .signup-page-form.password-page-content {
    padding-bottom: 40px;
  }
}
.signup-page-form h3 {
  margin-bottom: 30px;
}
.signup-page-form .form-group {
  margin-bottom: 10px;
}
.signup-page-form .form-group:after {
  content: "";
  display: table;
  clear: both;
}
.signup-page-form .btn {
  margin-left: auto;
  margin-right: auto;
}

.signup-page-form-content {
  text-align: left;
}
.signup-page-form-content .new-form-group {
  margin-bottom: 25px;
}

.form-field-with-icon {
  position: relative;
}
.form-field-with-icon .form-field {
  padding-right: 40px;
}
.form-field-with-icon .form-field-icon {
  position: absolute;
  top: 50%;
  right: 2px;
  color: var(--text-lighter);
  font-size: 24px;
  width: 40px;
  text-align: center;
}
.form-field-with-icon.icon-left .form-field {
  padding-right: 10px;
  padding-left: 40px;
}
.form-field-with-icon.icon-left .form-field-icon {
  left: 0;
  right: auto;
}

.signup-page-disclaimer {
  font-size: 12px;
  color: var(--text-lighter);
}

.signup-form-role-wrapper {
  margin-bottom: 30px;
}

.signup-form-role-label {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
}

.signup-form-dropdown {
  font-size: 16px;
  font-weight: 600;
  line-height: 40px;
}
.signup-form-dropdown .dropdown-caret {
  margin-top: -21px;
}

.terms-conditions-acceptance {
  position: relative;
  display: block;
  margin-bottom: 0;
  color: var(--text-muted-alt);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  user-select: none;
}
.terms-conditions-acceptance a,
.terms-conditions-acceptance a:focus,
.terms-conditions-acceptance a:visited,
.terms-conditions-acceptance a:hover,
.terms-conditions-acceptance a:active {
  color: var(--text-default);
  text-decoration: underline;
}
.terms-conditions-acceptance.with-checkbox {
  color: var(--text-muted-alt);
  padding: 10px 12px 7px 35px;
  text-align: left;
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}
.terms-conditions-acceptance.with-checkbox a,
.terms-conditions-acceptance.with-checkbox a:focus,
.terms-conditions-acceptance.with-checkbox a:visited,
.terms-conditions-acceptance.with-checkbox a:hover,
.terms-conditions-acceptance.with-checkbox a:active {
  color: var(--text-default);
  text-decoration: underline;
}
.terms-conditions-acceptance.with-checkbox label {
  font-weight: normal;
}
.terms-conditions-acceptance.with-checkbox .checkbox-label {
  position: absolute;
  left: 6px;
  top: 50%;
  margin-top: -11px;
}

.signup-page-sales-point {
  position: relative;
  margin-bottom: 30px;
  padding-left: 90px;
  text-align: left;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-muted-alt);
}

.signup-page-sales-contracts-icon {
  position: absolute;
  left: 2px;
  top: -19px;
  width: 50px;
}

.signup-page-sales-payments-icon {
  position: absolute;
  left: 0;
  top: -10px;
  width: 60px;
}

.signup-page-invite-header {
  padding-bottom: 80px;
  border-bottom: 1px solid var(--border-content);
}
.signup-page-invite-header.without-avatar {
  padding-bottom: 20px;
  border-bottom: none;
}

.signup-page-invite-header-text {
  max-width: 720px;
  margin: 0 auto 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .signup-page-invite-header-text {
    font-size: 16px;
  }
}

.signup-page-invite-subheader-text {
  max-width: 550px;
  margin: 0 auto;
  padding: 0 20px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}
@media (min-width: 768px) {
  .signup-page-invite-subheader-text {
    font-size: 14px;
  }
}

.signup-page-invite-form {
  width: 100%;
}
.signup-page-invite-form.onboarding-invite {
  padding: 0;
  text-align: left;
}

.signup-page-invite-form-header {
  position: relative;
  margin-bottom: 0;
  padding: 62px 20px 0;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  line-height: 1.41;
  border-radius: 4px 4px 0 0;
}

.signup-page-invite-form-header-copy {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signup-page-invite-form-header-img {
  position: absolute;
  left: 50%;
  top: -42px;
  margin-left: -42px;
}

.signup-page-invite-form-title {
  margin-bottom: 30px;
}

.signup-form-btn-section {
  margin-top: 35px;
}

.signup-form-loading {
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  text-align: center;
  background: var(--bg-panel-semi-transparent);
}
.signup-form-loading.showing {
  display: block;
  animation: fade-in var(--transition-slow) 1 forwards;
}

.signup-form-loading-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -50px;
}

.signup-form-g-recaptcha {
  display: inline-block;
  margin-bottom: 20px;
}
.signup-form-g-recaptcha iframe {
  width: 100% !important;
  transform: scale(0.98);
  transform-origin: 0 0;
}
@media (min-width: 480px) {
  .signup-form-g-recaptcha iframe {
    transform: scale(1.05);
  }
}

.time-entries-page .list-item:first-child {
  border-top: 0;
}
.time-entries-page .list-item.ongoing {
  box-shadow: none;
  pointer-events: none;
}
.time-entries-page .list-item.ongoing .time-entries-index-list-item-duration {
  color: var(--color-primary);
}
.time-entries-page .table-list-col-headers {
  margin: 5px 0 15px;
  font-size: 14px;
}
.time-entries-page .list-item-avatar .user-avatar {
  margin: 10px 0;
}
.time-entries-page .top-action-btn .btn-icon {
  padding: 3px 12px 0;
  font-size: 1.5em;
}
.time-entries-page .dashboard-chart-container {
  margin-bottom: 40px;
}
.time-entries-page .dashboard-chart-title-container .react-tooltip {
  max-width: 300px;
}
.time-entries-page .chart-totals-container {
  padding: 0 15px;
}
.time-entries-page .table-list {
  margin: 0 0 40px 0;
}

.time-entries-index-list-row-status {
  position: relative;
  top: 4px;
  left: 0;
}
.time-entries-index-list-row-status.non-billable {
  background: var(--border-content-alt);
}
.time-entries-index-list-row-status.no-project, .time-entries-index-list-row-status.no-invoice, .time-entries-index-list-row-status.invoice-drafted {
  background: var(--color-accent-yellow);
}
.time-entries-index-list-row-status.paid, .time-entries-index-list-row-status.unpaid, .time-entries-index-list-row-status.manually-billed {
  background: var(--color-primary);
}

.time-entries-day-total-time {
  margin-right: 10px;
  padding-left: 18px;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-default);
  white-space: nowrap;
}
.time-entries-day-header.header-collapsed .time-entries-day-total-time {
  color: var(--text-default);
}
@media (min-width: 768px) {
  .time-entries-day-total-time {
    width: auto;
    padding-left: 0;
    text-align: right;
  }
}

.time-entries-list-item-tooltip.react-tooltip.show {
  margin-left: 1px;
}

.large-project-select {
  min-width: 220px;
}

.time-entries-settings {
  display: inline;
  position: relative;
}
.time-entries-settings .dropdown-menu-center {
  position: absolute;
  top: 50px;
  left: -95px;
  min-width: 240px;
  padding: 15px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  line-height: 1em;
}
.time-entries-settings.open > .dropdown-menu-center {
  display: flex;
}

.time-entries-summary-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.time-entries-summary-group {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 992px) {
  .time-entries-summary-group {
    gap: 20px;
  }
}

.time-entries-summary-info {
  display: flex;
  align-items: baseline;
  gap: 7px;
  width: 50%;
  padding: 5px 20px 5px 0;
  white-space: nowrap;
}
@media (min-width: 992px) {
  .time-entries-summary-info {
    width: auto;
    padding: 5px 0;
  }
  .time-entries-summary-info::after {
    content: "•";
    position: relative;
    top: -2px;
    padding-left: 10px;
    color: var(--text-lightest);
  }
  .time-entries-summary-info:last-child::after {
    display: none;
  }
}

.time-entries-summary-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.time-entries-summary-value {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
}

.time-entries-list .table-list-col-headers.with-avatars {
  padding-left: 50px;
  padding-right: 50px;
}
.time-entries-list .list-item {
  border-top: 0;
  border-bottom: 1px solid var(--border-content);
}
.time-entries-list .list-item-in {
  line-height: normal;
}
.time-entries-list .list-item-in.with-avatar {
  padding: 20px 50px 20px 50px;
}
.time-entries-list .list-item-in .list-item-title {
  margin-top: -3px;
  margin-bottom: 3px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}
.time-entries-list .list-item-in .list-item-subtitle {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  color: var(--text-muted);
}
.time-entries-list .list-item-in .time-entry-billable-value,
.time-entries-list .list-item-in .time-entry-cost-value {
  margin-left: 6px;
  margin-top: 10px;
}
.time-entries-list .list-item-in .time-entry-billable-value.billable,
.time-entries-list .list-item-in .time-entry-cost-value.billable {
  margin-left: 0;
}
.time-entries-list .list-item-in:hover .time-entry-billable-icon {
  display: flex;
}
.time-entries-list .list-item-in:hover .time-entry-billable-value {
  display: none;
}
.time-entries-list .list-item-in:hover .time-entry-billable-value.locked-time-entry {
  display: flex;
}
.time-entries-list .list-grid-item .time-entry-billable-icon {
  display: flex;
  z-index: 3;
}
.time-entries-list .list-grid-item:hover .time-entry-billable-value {
  display: none;
}
.time-entries-list .list-grid-item:hover .time-entry-billable-value.locked-time-entry {
  display: flex;
}
.time-entries-list .time-entry-billable-icon {
  display: none;
  width: 30px;
  height: 30px;
  min-height: auto;
  padding: 0;
  align-items: center;
  justify-content: center;
  line-height: 1em;
  background: none;
  border: none;
}
.time-entries-list .time-entry-billable-icon:focus, .time-entries-list .time-entry-billable-icon:active {
  box-shadow: none;
  background: none;
  border: none;
}
.time-entries-list .time-entry-billable-icon.billable svg path {
  fill: var(--color-primary);
}
.time-entries-list .time-entry-billable-icon:hover {
  background: var(--bg-grey-f8);
  border-radius: 6px;
}
.time-entries-list .time-entry-billable-icon.read-only {
  background: none;
  border: none;
}
.time-entries-list .time-entry-status-dot {
  display: flex;
  gap: 10px;
}
.time-entries-list .time-entry-lock-status {
  position: absolute;
  right: 44px;
  top: 20.5px;
  width: auto;
}
.time-entries-list .time-entry-lock-status-icon {
  width: 32px;
  height: 32px;
  stroke: var(--border-content-alt);
}
@media (min-width: 768px) {
  .time-entries-list .row .time-entry-duration-column {
    max-width: 9%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
@media (max-width: 768px) {
  .time-entries-list .table-list {
    margin: 0;
    padding: 0 0 20px 0;
  }
  .time-entries-list .list-item-in.with-avatar {
    padding: 20px 45px;
  }
  .time-entries-list .list-item-in .avatar {
    left: 0;
  }
  .time-entries-list .list-item-in .list-item-subtitle {
    display: none;
  }
  .time-entries-list .list-item-in .list-item-title {
    margin: 0;
  }
  .time-entries-list .grouped-list-header {
    padding: 12px 15px 10px;
  }
  .time-entries-list .grouped-list-header .grouped-list-header-toggle {
    position: initial;
    margin-left: 15px;
  }
  .time-entries-list .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .time-entries-list .row:before, .time-entries-list .row:after {
    display: none;
  }
  .time-entries-list .row .time-entry-billable-icon {
    display: flex;
    margin-top: 0px;
    width: 18px;
    height: 18px;
  }
  .time-entries-list .row .time-entry-billable-icon svg {
    width: 18px;
    height: 18px;
  }
  .time-entries-list .row .time-entry-billable-value {
    display: none;
  }
  .time-entries-list .row .time-entry-task-column {
    order: 0;
  }
  .time-entries-list .row .time-entry-task-column .list-item-title {
    padding-right: 40px;
  }
  .time-entries-list .row .time-entry-billable-column {
    position: absolute;
    right: 45px;
    top: 19px;
  }
  .time-entries-list .row .time-entry-cost-column {
    order: 2;
    margin-left: auto;
  }
  .time-entries-list .row .time-entry-duration-column {
    order: 3;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-default);
    text-align: left;
  }
  .time-entries-list .row .time-entry-status-column {
    order: 4;
  }
  .time-entries-list .row .time-entry-project-column {
    order: 3;
    flex-grow: 1;
    max-width: 200px;
  }
  .time-entries-list .row .time-entry-project-column .list-item-title {
    font-weight: 500;
  }
  .time-entries-list .list-item-dd-toggle {
    margin-top: 0px;
  }
}

.time-entries-insights {
  position: relative;
}

.time-entries-insights-top {
  padding-bottom: 30px;
  background-color: var(--bg-content);
}
.time-entries-insights-top .table-list-actions {
  padding: 0;
}
.reports-header-container .time-entries-insights-top {
  padding-bottom: 0;
}

.time-entries-insights-page {
  position: relative;
  z-index: 2;
}
.time-entries-insights-page .DateRangePicker_picker {
  z-index: 11;
}
.time-entries-insights-page .accounting-header-content-in {
  padding: 0;
}
.time-entries-insights-page .accounting-export-header-dropdown-toggle {
  background: none;
}
.time-entries-insights-page .chart-totals-container {
  padding: 0;
}
@media (min-width: 768px) {
  .time-entries-insights-page .chart-totals-container {
    padding: 0;
  }
}
.time-entries-insights-page .time-utilization-loading-row {
  height: 50px;
}

.preset-date-range-picker .DayPicker__withBorder {
  min-width: 850px;
}
.preset-date-range-picker .preset-picker {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 0;
  right: 0;
  width: 230px;
  height: 100%;
  margin: 0;
  padding: 15px 15px;
  font-size: 14px;
  font-weight: 500;
  border-left: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}
.preset-date-range-picker .preset-picker a.btn {
  margin-top: auto;
}
.preset-date-range-picker .preset-picker-options {
  max-height: 212px;
  max-height: calc(100% - 50px);
  padding-bottom: 10px;
  overflow: scroll;
}
.preset-date-range-picker .preset-picker-options-fader {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  height: 40px;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, #ffffff 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .preset-date-range-picker .preset-picker-options-fader {
    display: none;
  }
}
:root[data-theme=dark] .preset-date-range-picker .preset-picker-options-fader {
  display: none;
}
.preset-date-range-picker a.date-range-preset {
  display: block;
  margin-bottom: 0;
  padding: 4px 10px 5px;
  border-radius: 4px;
}
.preset-date-range-picker a.date-range-preset, .preset-date-range-picker a.date-range-preset:focus, .preset-date-range-picker a.date-range-preset:visited {
  color: var(--text-muted);
}
.preset-date-range-picker a.date-range-preset:hover, .preset-date-range-picker a.date-range-preset:active {
  color: var(--color-primary);
}
.preset-date-range-picker a.date-range-preset.active {
  color: var(--text-default);
  background: var(--bg-grey-f5);
}
.preset-date-range-picker .preset-date-range-picker-dropdown {
  cursor: pointer;
  color: var(--text-lighter);
}
.preset-date-range-picker.with-dropdown-positioning {
  position: relative;
}
.preset-date-range-picker.with-dropdown-positioning .preset-date-range-picker-dropdown {
  position: absolute;
  right: -11px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.preset-date-range-picker-mobile {
  font-weight: 500;
  text-align: left;
}
.preset-date-range-picker-mobile .Select__menu {
  min-width: 180px;
}

.preset-date-range-mobile-no-background {
  padding-left: 10px;
  font-weight: 500;
  text-align: left;
}
.preset-date-range-mobile-no-background .Select__menu {
  min-width: 180px;
}

.time-entries-insights-charts {
  display: flex;
  flex-direction: row;
  line-height: normal;
  gap: 80px;
  white-space: nowrap;
  margin-bottom: 30px;
}
.time-entries-insights-charts .time-entries-insights-chart {
  display: flex;
  align-items: center;
  gap: 30px;
}
.time-entries-insights-charts .time-entries-insights-overview-title {
  display: block;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 15px;
}
.time-entries-insights-charts .time-entries-insights-overview-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-default);
}
.time-entries-insights-charts .time-entries-insights-overview-value .time-utilization-row-bar-bg {
  right: 0px;
  width: 140px;
}
.time-entries-insights-charts .time-entries-insights-legend {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.time-entries-insights-charts .time-entries-insights-legend-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
  color: var(--text-default);
}
.time-entries-insights-charts .time-entries-insights-legend-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.time-entries-insights-charts .time-entries-insights-legend-color.color-1 {
  background: var(--color-primary);
}
.time-entries-insights-charts .time-entries-insights-legend-color.color-2 {
  background: var(--border-content-alt);
}
.time-entries-insights-charts .time-entries-insights-legend-value {
  font-weight: 600;
}
.time-entries-insights-charts .time-entries-insights-legend-label {
  font-weight: 500;
}
.time-entries-insights-charts .time-entries-insights-chart-tooltip {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.time-entries-insights-charts .time-entries-insights-chart-tooltip .time-entries-insights-chart-tooltip-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 40px;
}
.time-entries-insights-charts .time-entries-insights-chart.color-danger .donut-chart-circle-path {
  stroke: var(--color-danger);
}
.time-entries-insights-charts .time-entries-insights-chart.color-danger .time-entries-insights-legend-color.color-1 {
  background-color: var(--color-danger);
}
.time-entries-insights-charts .time-entries-insights-chart.color-warning .donut-chart-circle-path {
  stroke: var(--color-accent-yellow-dark);
}
.time-entries-insights-charts .time-entries-insights-chart.color-warning .time-entries-insights-legend-color.color-1 {
  background-color: var(--color-accent-yellow-dark);
}
.time-entries-insights-charts .time-entries-insights-chart.color-success .donut-chart-circle-path {
  stroke: var(--color-primary);
}
.time-entries-insights-charts .time-entries-insights-chart.color-success .time-entries-insights-legend-color.color-1 {
  background-color: var(--color-primary);
}
@media (max-width: 992px) {
  .time-entries-insights-charts {
    gap: 30px;
  }
  .time-entries-insights-charts .time-entries-insights-chart-graph,
  .time-entries-insights-charts .time-entries-insights-legend {
    display: none;
  }
}

@media print {
  .time-entries-timesheets-page {
    padding-top: 40px;
    transform: scale(0.8);
    transform-origin: top left;
  }
}
@media print {
  .time-entries-timesheets-page .time-entries-insights-top {
    display: none;
  }
}

.time-entries-timesheets {
  min-height: 600px;
}
.time-entries-timesheets .table-list-col-header-title .ion-arrow-up-b {
  top: -3px;
}
.time-entries-timesheets .table-list-col-header-title .ion-arrow-down-b {
  top: 4px;
}

.time-entries-timesheets-scrollable {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 87px;
  padding-bottom: 100px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.time-entries-timesheets-datestamp {
  display: none;
  flex: 1;
  align-self: center;
  justify-content: flex-end;
  margin-right: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-lighter);
}
@media (min-width: 768px) {
  .time-entries-timesheets-datestamp {
    display: flex;
  }
}

.time-entries-timesheets-column-day-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-default);
}

.time-entries-timesheets-column-today-bg {
  position: absolute;
  left: -10px;
  right: 20px;
  top: -10px;
  bottom: -10px;
  background-color: var(--bg-brand-muted);
  border-radius: 6px;
}

.time-entries-timesheets-column-today-label,
.time-entries-timesheets-column-today-day {
  position: relative;
  color: var(--color-primary);
  font-weight: 600;
}

.time-entries-timesheets-bg-fader {
  position: absolute;
  z-index: 9;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background-image: linear-gradient(to right, color-mix(in srgb, var(--bg-content) 0%, transparent) 0%, color-mix(in srgb, var(--bg-content) 100%, transparent) 100%);
}
@media (min-width: 1400px) {
  .time-entries-timesheets-bg-fader {
    display: none;
  }
}
@media print {
  .time-entries-timesheets-bg-fader {
    display: none;
  }
}

.time-entries-timesheets-list {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  min-width: 100%;
  align-items: flex-start;
}
.time-entries-timesheets-list #time-entries-timesheet-lock-icon-tooltip {
  margin-top: -20px;
}

.time-entries-timesheets-group {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 100%;
}

.time-entries-timesheets-row {
  position: relative;
  display: inline-flex;
  justify-content: space-between;
  min-width: 100%;
  cursor: default;
}
.time-entries-timesheets-row.header-row {
  position: absolute;
  z-index: 11;
  left: 0;
  top: 0;
  min-width: 100%;
  padding: 20px 0;
  background: var(--bg-content);
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-semi-transparent-alt);
  will-change: transform;
}
.time-entries-timesheets-row.member-row {
  min-width: 100%;
  padding: 15px 0 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-semi-transparent-alt);
  transition: all var(--transition-fast) ease;
}
.time-entries-timesheets-row.member-row:hover {
  background: var(--bg-content-alt);
}
.time-entries-timesheets-row.expanded-row {
  padding: 15px 0 16px;
  background: var(--bg-grey-fc);
  border-bottom: 1px solid var(--border-semi-transparent-alt);
  transition: all var(--transition-fast) ease;
}
.time-entries-timesheets-row.expanded-row:hover {
  background: var(--bg-grey-fc);
}
.time-entries-timesheets-row.totals-row {
  padding: 15px 0;
}
.time-entries-timesheets-row.overtime .time-entries-timesheets-column-bar,
.time-entries-timesheets-row .time-entries-timesheets-column.overtime .time-entries-timesheets-column-bar {
  background-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
}

.time-entries-timesheets-clickarea {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.time-entries-timesheets-column {
  display: flex;
}
.time-entries-timesheets-column.member {
  flex: 1;
  justify-content: space-between;
  width: 280px;
  min-width: 280px;
  user-select: none;
}
@media (min-width: 1400px) {
  .time-entries-timesheets-column.member {
    width: 320px;
    min-width: 320px;
  }
}
.time-entries-timesheets-column .member-avatar-name-container {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
.time-entries-timesheets-column .member-timesheet-lock-icon {
  z-index: 5;
  position: absolute;
  top: 8px;
  right: 30px;
}
.time-entries-timesheets-column.project {
  flex: 1;
  padding-left: 21px;
  width: 280px;
  min-width: 280px;
  user-select: none;
}
@media (min-width: 1400px) {
  .time-entries-timesheets-column.project {
    width: 320px;
    min-width: 320px;
  }
}
.time-entries-timesheets-column.day {
  position: relative;
  width: 10%;
  min-width: 120px;
  user-select: none;
}
.time-entries-timesheets-column.total {
  width: 10%;
  min-width: 120px;
}
.time-entries-timesheets-row.header-row .time-entries-timesheets-column {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 5px;
  color: var(--text-muted);
  font-weight: 400;
}
.time-entries-timesheets-row.member-row .time-entries-timesheets-column {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 5px 0;
  color: var(--text-default);
}
.time-entries-timesheets-row.member-row .time-entries-timesheets-column.member {
  padding-left: 22px;
  font-weight: 500;
}
@media print {
  .time-entries-timesheets-row.member-row .time-entries-timesheets-column.member {
    padding-left: 0;
  }
}
.time-entries-timesheets-row.member-row .time-entries-timesheets-column.total {
  font-weight: 500;
}
.time-entries-timesheets-row.member-row .time-entries-timesheets-column.zero {
  color: var(--border-content-alt);
}
.time-entries-timesheets-row.expanded-row .time-entries-timesheets-column {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  color: var(--text-default);
}
.time-entries-timesheets-row.expanded-row .time-entries-timesheets-column.project {
  font-weight: 500;
}
.time-entries-timesheets-row.expanded-row .time-entries-timesheets-column.zero {
  color: var(--border-content-alt);
}
.time-entries-timesheets-row.totals-row .time-entries-timesheets-column {
  color: var(--border-content-alt);
  font-weight: 500;
}
.time-entries-timesheets-row.totals-row .time-entries-timesheets-column.zero {
  color: var(--border-content-alt);
}

.time-entries-timesheets-row-icon {
  position: absolute;
  left: 0;
  top: 52%;
  width: 11px;
  height: auto;
  transform: translateY(-50%);
  transition: all var(--transition-fast) ease;
}
.time-entries-timesheets-row-icon.expanded {
  transform: translateY(-50%) rotate(180deg);
}
.time-entries-timesheets-row-icon path {
  fill: var(--text-lighter);
}
@media print {
  .time-entries-timesheets-row-icon {
    display: none;
  }
}

.time-entries-timesheet-locked-icon {
  width: 32px;
  height: 32px;
  stroke: var(--border-content-alt);
}

.time-entries-timesheet-lock-icon {
  width: 32px;
  height: 32px;
  opacity: 0;
  border-radius: 50px;
}
.time-entries-timesheet-lock-icon.locked {
  stroke: var(--border-content-alt);
  opacity: 1;
}
.time-entries-timesheet-lock-icon.unlocked {
  stroke: var(--color-primary);
}
.time-entries-timesheets-row:hover .time-entries-timesheet-lock-icon {
  opacity: 1;
}
.time-entries-timesheet-lock-icon:hover {
  background-color: var(--bg-grey-f8);
  opacity: 1;
}
.time-entries-timesheet-lock-icon:hover.locked {
  stroke: var(--text-lighter);
}
.time-entries-timesheet-lock-icon.always-display {
  opacity: 1;
}

.time-entries-timesheets-column-day-label {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 14px;
}

.time-entries-timesheets-column-bar {
  position: absolute;
  z-index: 2;
  left: -10px;
  right: 30px;
  bottom: 0;
  background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: 4px;
}
.time-entries-timesheets-row.overtime .time-entries-timesheets-column-bar {
  background-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
}
.time-entries-timesheets-row.locked .time-entries-timesheets-column-bar {
  opacity: 0.5;
}
.time-entries-timesheets-column-bar.with-time-off {
  opacity: 0.8;
  background: color-mix(in srgb, var(--black) 1%, transparent) center center repeat;
  background-size: cover;
  background-image: url("planners/planner-empty-day.png");
  border: 1px solid var(--border-content);
  z-index: 10;
}

.time-entries-timesheets-column-day-hours {
  position: relative;
  z-index: 2;
}

.time-entries-timesheets-column-utilization {
  position: absolute;
  z-index: 5;
  top: 7.5px;
}
.time-entries-timesheets-row.locked .time-entries-timesheets-column-utilization {
  opacity: 0.7;
}

.time-entries-timesheets-project-link {
  max-width: 100%;
}
.time-entries-timesheets-project-link, .time-entries-timesheets-project-link:focus, .time-entries-timesheets-project-link:visited {
  color: var(--text-default);
  text-decoration: none;
}
.time-entries-timesheets-project-link:hover:not(.projectless) {
  text-decoration: underline;
}

.time-entries-timesheets-project-title {
  width: 100%;
  padding-right: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.time-entries-timesheets-project-title.projectless {
  padding: 10px 0;
  color: var(--text-lighter);
  pointer-events: none;
}

.time-entries-timesheets-project-client {
  width: 100%;
  margin-top: 3px;
  padding-right: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-entries-timesheets-add-hours {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  left: -10px;
  right: 30px;
  top: 0;
  bottom: 0;
}

.time-entries-timesheets-add-hours-link {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: var(--text-lighter);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: 6px;
  opacity: 0;
}
.time-entries-timesheets-add-hours-link:hover {
  opacity: 1;
}
.time-entries-timesheets-add-hours-link.showing {
  background: var(--bg-input-hover);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  opacity: 1;
}
@media print {
  .time-entries-timesheets-add-hours-link {
    display: none;
  }
}

.time-entries-timesheets-add-hours-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  transform-origin: center;
  transition: all var(--transition-normal) ease;
  transform: rotate(0deg) scale(0);
}
.time-entries-timesheets-add-hours-icon svg {
  width: 12px;
  height: 12px;
}
.time-entries-timesheets-add-hours-icon path {
  fill: var(--color-primary);
}
.time-entries-timesheets-add-hours-link.showing .time-entries-timesheets-add-hours-icon {
  transform: rotate(135deg) scale(1);
}
.time-entries-timesheets-add-hours-link.showing .time-entries-timesheets-add-hours-icon path {
  fill: var(--text-lighter);
}

.time-entries-timesheets-project-popover {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 350px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
  box-shadow: 0 2px 4px color-mix(in srgb, var(--text-default) 10%, transparent);
}

.time-entries-timesheets-project-popover-add-new.dashboard-chart-option-add-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  margin-top: 0;
}

.time-entries-timesheets-project-popover-header {
  padding: 15px 80px 5px 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
  cursor: default;
}

.time-entries-timesheets-project-popover-date {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}

.time-entries-timesheets-project-popover-list {
  padding: 10px 10px;
  max-height: 170px;
  overflow: scroll;
}

.time-entries-timesheets-project-popover-list-empty {
  padding: 20px;
  margin: 10px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: var(--text-lighter);
  cursor: default;
  background: var(--bg-grey-f8);
}

.time-entries-timesheets-project-popover-list-item {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 10px 15px 10px 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-default);
  cursor: pointer;
  border-radius: 6px;
}
.time-entries-timesheets-project-popover-list-item:hover {
  background: var(--bg-grey-f8);
}

.time-entries-timesheets-project-popover-list-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.time-entries-timesheets-project-popover-list-item-name.time-entries-timesheets-project-popover-list-item-name--empty {
  color: var(--text-muted);
}

.time-entry-status-dot.time-entries-timesheets-project-popover-list-item-status {
  position: relative;
  top: auto;
  right: auto;
}
.time-entry-status-dot.time-entries-timesheets-project-popover-list-item-status .list-item-status {
  position: relative;
  top: auto;
  left: auto;
}

.time-entries-timesheets-row-no-projects {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 25px 21px;
  color: var(--text-lighter);
  font-size: 14px;
  font-weight: 500;
  cursor: default;
  background: var(--bg-grey-fc);
  border-bottom: 1px solid var(--border-content);
}

.time-entries-timesheets-row-add-project {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 100%;
  padding: 15px 0 15px 11px;
  background: var(--bg-grey-fc);
  border-bottom: 1px solid var(--border-content);
}

.time-entries-timesheets-row-add-project-link {
  display: flex;
  align-items: center;
  width: 260px;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  border-radius: 6px;
}
.time-entries-timesheets-row-add-project-link:hover {
  background: var(--bg-grey-f5);
}

.time-entries-timesheets-row-add-project-icon {
  position: relative;
  width: 10px;
  height: auto;
  margin-right: 10px;
}
.time-entries-timesheets-row-add-project-icon path {
  fill: var(--text-default);
}

.time-entries-timesheets-row-add-project-menu {
  width: 260px;
}

.time-entries-timesheets-utilization-circle {
  position: relative;
  text-align: center;
  width: 36px;
  height: 36px;
}

.time-entries-timesheets-utilization-circle-bg {
  fill: none;
  stroke: var(--bg-grey-e);
  stroke-width: 3.8;
}

.time-entries-timesheets-utilization-circle-path {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke: var(--color-primary);
  transition: stroke-dasharray var(--transition-slow) ease-in-out;
}
.time-entries-timesheets-utilization-circle-path.overtime {
  stroke: var(--color-danger);
}

.time-entries-timesheets-utilization-percentage {
  font-size: 10px;
  font-weight: 500;
  fill: var(--text-lighter);
  text-anchor: middle;
}

.timesheet-reminder-checkbox-group {
  background-color: var(--bg-grey-f8);
  border: 1px solid var(--border-content);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.timesheet-reminder-checkbox-group .checkbox-label {
  margin-bottom: 0;
}

.timesheet-reminder-weekday-selector {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .timesheet-reminder-weekday-selector {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }
}
.timesheet-reminder-weekday-selector .btn {
  white-space: nowrap;
}

.time-entries-weekly {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  flex-direction: column;
  margin-top: 0;
  border-top: 1px solid var(--border-content);
}
@media (min-width: 992px) {
  .time-entries-weekly {
    flex-direction: row;
  }
}

.time-entries-weekly-totals {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  bottom: 0;
  width: 100%;
  height: 60px;
  font-weight: 500;
  background: var(--bg-content);
  border-top: 1px solid var(--border-content);
}
@media (min-width: 992px) {
  .time-entries-weekly-totals {
    position: sticky;
    z-index: 5;
    justify-content: space-between;
  }
}

.time-entries-weekly-total {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  font-weight: 600;
}

.time-entries-weekly-total-label {
  padding-left: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted-alt);
}

.time-entries-weekly-weekend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.time-entries-weekly-nav-mobile {
  position: relative;
  padding: 20px 0;
  text-align: center;
  font-size: 16px;
  color: var(--text-default);
  border-top: 1px solid var(--border-content);
}
@media (min-width: 992px) {
  .time-entries-weekly-nav-mobile {
    display: none;
  }
}

.time-entries-weekly-loading {
  position: absolute;
  display: none;
  left: 50%;
  transform: translateX(-50%);
  top: 200px;
}
@media (min-width: 992px) {
  .time-entries-weekly-loading {
    display: block;
  }
}

.time-entries-weekly-day {
  display: flex;
  flex-direction: column;
  flex: 1;
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 992px) {
  .time-entries-weekly-day {
    min-height: 500px;
    border-bottom: none;
  }
}

.time-entries-weekly-header {
  position: sticky;
  display: flex;
  z-index: 10;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  top: 60px;
  text-align: center;
  padding: 19px 0 20px;
  user-select: none;
  color: var(--text-default);
  background-color: var(--bg-content);
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 992px) {
  .time-entries-weekly-header {
    flex-direction: column;
    align-items: stretch;
  }
}
.time-entries-weekly-day.weekly-day-today .time-entries-weekly-header {
  color: var(--color-primary);
}
.time-entries-weekly-day.weekly-day-upcoming .time-entries-weekly-header {
  color: var(--text-lighter);
}

.time-entries-weekly-header-today-bg {
  position: absolute;
  left: -5px;
  right: -5px;
  top: 7px;
  bottom: 7px;
  background-color: var(--bg-content);
  border-radius: 10px;
}
@media (min-width: 992px) {
  .time-entries-weekly-header-today-bg {
    left: 7px;
    right: 7px;
  }
}

.time-entries-weekly-header-date {
  position: relative;
  margin-bottom: 5px;
  font-weight: 600;
  white-space: nowrap;
}

.time-entries-weekly-header-time {
  position: relative;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
}

.time-entries-weekly-header-navigate-left {
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 0;
  bottom: 7px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  transition: all var(--transition-fast) ease;
}
@media (min-width: 992px) {
  .time-entries-weekly-header-navigate-left:hover {
    background: var(--bg-grey-fa);
  }
}
@media (min-width: 992px) and (max-width: 1400px) {
  .time-entries-weekly-header-navigate-left {
    left: -20px;
  }
}

.time-entries-weekly-header-navigate-left-icon {
  width: 20px;
  height: auto;
  transition: all var(--transition-fast) ease;
  opacity: 0.8;
}
.time-entries-weekly-header-navigate-left:hover .time-entries-weekly-header-navigate-left-icon {
  opacity: 1;
}

.time-entries-weekly-header-navigate-right {
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 0;
  bottom: 7px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  transition: all var(--transition-fast) ease;
}
@media (min-width: 992px) {
  .time-entries-weekly-header-navigate-right:hover {
    background: var(--bg-grey-fa);
  }
}
@media (min-width: 992px) and (max-width: 1400px) {
  .time-entries-weekly-header-navigate-right {
    right: -20px;
  }
}

.time-entries-weekly-header-navigate-right-icon {
  width: 20px;
  height: auto;
  transition: all var(--transition-fast) ease;
  opacity: 0.8;
}
.time-entries-weekly-header-navigate-right:hover .time-entries-weekly-header-navigate-right-icon {
  opacity: 1;
}

.time-entries-weekly-column {
  position: relative;
  display: flex;
  flex: 1;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding-top: 10px;
  padding-bottom: 60px;
}
.time-entries-weekly-day.weekly-day-today .time-entries-weekly-column {
  background: var(--bg-grey-fd);
}
@media (min-width: 992px) {
  .time-entries-weekly-day:hover .time-entries-weekly-column {
    background: var(--bg-grey-fd);
  }
  .time-entries-weekly-day.weekly-day-today:hover .time-entries-weekly-column {
    background: var(--bg-grey-fd);
  }
}

.time-entries-weekly-entry {
  position: relative;
  margin: 7px 7px 0;
  min-height: 15px;
  cursor: pointer;
  user-select: none;
  background: var(--bg-content);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border-semi-transparent);
}
.time-entries-weekly-entry:first-child {
  margin-top: 0;
}
.time-entries-weekly-entry:hover {
  box-shadow: inset 0 0 0 1px var(--border-semi-transparent-strong);
}

.time-entries-weekly-entry-clickable {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.time-entries-weekly-entry-bg {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0.05;
  border-radius: 6px;
  transition: all var(--transition-fast) ease;
}
.time-entries-weekly-entry:hover .time-entries-weekly-entry-bg {
  opacity: 0.1;
}
.time-entries-weekly-entry.entry-without-project .time-entries-weekly-entry-bg {
  left: 1px;
  right: 1px;
  top: 1px;
  bottom: 1px;
  opacity: 1;
  background-color: var(--bg-grey-f8);
}
.time-entries-weekly-entry.entry-without-project:hover .time-entries-weekly-entry-bg {
  opacity: 1;
  background-color: var(--bg-grey-f8);
}

.time-entries-weekly-entry-bg-border {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 6px 0 0 6px;
  transition: all var(--transition-fast) ease;
}
.time-entries-weekly-entry.entry-without-project .time-entries-weekly-entry-bg-border {
  display: none;
}

.time-entries-weekly-entry-resize {
  position: absolute;
  z-index: 3;
  display: none;
  height: 20px;
  left: 50%;
  width: 50px;
  bottom: 0;
  margin-left: -25px;
  cursor: ns-resize;
}
@media (min-width: 992px) {
  .time-entries-weekly-entry:hover .time-entries-weekly-entry-resize {
    display: block;
  }
}

.time-entries-weekly-entry-resize-border {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  height: 2px;
  background: color-mix(in srgb, var(--black) 15%, transparent);
  border-radius: 2px;
}
@media (min-width: 992px) {
  .time-entries-weekly-entry-resize:hover .time-entries-weekly-entry-resize-border {
    background: color-mix(in srgb, var(--black) 20%, transparent);
  }
}

.time-entries-weekly-entry-avatar {
  position: absolute;
  z-index: 3;
  right: 10px;
  top: 10px;
}
.time-entries-weekly-entry-avatar .user-avatar {
  margin: 0;
}

.time-entries-weekly-entry-details {
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 10px;
  right: 10px;
  bottom: 4px;
  padding-right: 30px;
  overflow: hidden;
  border-radius: 0 0 3px 3px;
}
.time-entries-weekly-entry-details.details-condensed {
  top: 50%;
  bottom: auto;
  margin-top: -11px;
}

.time-entries-weekly-entry-client {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.time-entries-weekly-entry-details.details-condensed .time-entries-weekly-entry-client {
  display: none;
}

.time-entries-weekly-entry-client-empty {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.6;
  transition: all var(--transition-fast) ease;
}
.time-entries-weekly-entry-details.details-condensed .time-entries-weekly-entry-client-empty {
  display: none;
}
@media (min-width: 992px) {
  .time-entries-weekly-entry:hover .time-entries-weekly-entry-client-empty {
    opacity: 0.8;
  }
}

.time-entries-weekly-entry-project {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
}
.time-entries-weekly-entry-details.details-condensed .time-entries-weekly-entry-project {
  display: none;
}

.time-entries-weekly-entry-task {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  opacity: 0.6;
  transition: all var(--transition-fast) ease;
}
.time-entries-weekly-entry-details.details-condensed .time-entries-weekly-entry-task {
  display: none;
}
@media (min-width: 992px) {
  .time-entries-weekly-entry:hover .time-entries-weekly-entry-task {
    opacity: 0.8;
  }
}

.time-entries-weekly-entry-time {
  margin-top: 1px;
  color: var(--text-default);
  font-weight: 500;
  font-size: 12px;
}
.time-entries-weekly-entry-details.details-condensed .time-entries-weekly-entry-time {
  margin-top: 0;
}
.time-entries-weekly-entry-details.details-condensed .time-entries-weekly-entry-time.time-empty {
  margin-top: 2px;
}

.time-entries-weekly-day-time-numbers {
  letter-spacing: 1px;
  padding-left: 1px;
  text-align: center;
  vertical-align: middle;
}
.time-entries-weekly-day-time-numbers:first-child {
  padding-left: 0;
}

.time-entries-weekly-entry-hover-tooltip {
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: 100%;
  background: var(--black);
}

.time-entries-weekly-add-time {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 10px 7px;
  padding: 10px;
  color: var(--text-lighter);
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  user-select: none;
  background: var(--bg-grey-fa);
  border-radius: 6px;
  opacity: 1;
}
.time-entries-weekly-add-time:first-child {
  margin-top: 0;
}
@media (min-width: 992px) {
  .time-entries-weekly-add-time {
    opacity: 0;
    background: none;
  }
  .time-entries-weekly-add-time:hover {
    background: var(--bg-grey-f5);
    color: var(--text-lighter);
  }
  .time-entries-weekly-day:hover .time-entries-weekly-add-time {
    opacity: 1;
  }
}

.time-entries-weekly-add-time-icon {
  position: relative;
  top: 0;
  width: 10px;
  height: auto;
}
.time-entries-weekly-add-time-icon path {
  fill: var(--text-lighter);
}
.time-entries-weekly-add-time:hover .time-entries-weekly-add-time-icon path {
  fill: var(--text-lighter);
}

@media print {
  .time-utilization-page {
    padding-top: 40px;
    transform: scale(0.8);
    transform-origin: top left;
  }
}
@media print {
  .time-utilization-page .time-entries-insights-top {
    display: none;
  }
}

.time-utilization-scrollable {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: hidden;
}
.time-utilization-scrollable.with-dropdown-padding {
  padding-bottom: 200px;
}

.time-utilization-bg-fader {
  position: absolute;
  z-index: 9;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60px;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
}
@media (min-width: 1300px) {
  .time-utilization-bg-fader {
    display: none;
  }
}
.time-utilization-bg-fader.always-visible {
  display: block;
}
@media print {
  .time-utilization-bg-fader {
    display: none !important;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .time-utilization-bg-fader {
    display: none !important;
  }
}
:root[data-theme=dark] .time-utilization-bg-fader {
  display: none !important;
}

.time-utilization-list {
  flex: 1;
}
.time-utilization-list .table-list-col-header-title .ion-arrow-up-b {
  top: -2px;
}
.time-utilization-list .table-list-col-header-title .ion-arrow-down-b {
  top: 4px;
}

.time-utilization-row {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  min-width: 100%;
  height: 44px;
  cursor: default;
}
.time-utilization-row.expandable {
  cursor: pointer;
}
.time-utilization-row.type-member {
  cursor: pointer;
  border-bottom: 1px solid var(--border-content);
  transition: all var(--transition-slower) ease;
}
.time-utilization-row.type-non-expanding {
  border-bottom: 1px solid var(--border-content);
}
.time-utilization-row.time-utilization-list-header {
  z-index: 9;
  height: 44px;
  background: var(--bg-content);
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
  transform: translateZ(1px);
  will-change: transform;
  user-select: none;
}
.time-utilization-row.time-utilization-list-totals {
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .time-utilization-row:hover:not(.time-utilization-list-header):not(.time-utilization-list-totals) {
    background: var(--bg-grey-fc);
  }
  .time-utilization-row:hover.expandable:not(.time-utilization-list-header):not(.time-utilization-list-totals) {
    background: var(--bg-grey-fc);
  }
}

.time-utilization-column {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 160px;
  flex-shrink: 0;
  font-weight: 500;
  color: var(--text-muted);
}
.time-utilization-column.title {
  width: 280px;
  gap: 12px;
}
.time-utilization-column.title a, .time-utilization-column.title a:visited, .time-utilization-column.title a:focus {
  color: inherit;
}
.time-utilization-column.title a:hover, .time-utilization-column.title a:active {
  color: inherit;
  text-decoration: underline;
}
.time-utilization-row.type-member .time-utilization-column.title {
  padding-left: 25px;
  font-weight: 600;
  color: var(--text-default);
}
.time-utilization-row.type-non-expanding .time-utilization-column.title {
  padding-left: 0;
  font-weight: 600;
  color: var(--text-default);
}
.time-utilization-row.time-utilization-list-totals .time-utilization-column.title {
  padding-left: 24px;
}
.time-utilization-column.empty-col, .time-utilization-column.loading-col {
  flex: 1;
}
.time-utilization-column.column-bold {
  font-weight: 500;
  color: var(--text-default);
}
.time-utilization-column.column-bold a, .time-utilization-column.column-bold a:visited, .time-utilization-column.column-bold a:focus {
  color: inherit;
}
.time-utilization-column.column-bold a:hover, .time-utilization-column.column-bold a:active {
  color: inherit;
  text-decoration: underline;
}
.time-utilization-column.column-extrasmall {
  width: 100px;
}
.time-utilization-column.column-small {
  width: 130px;
}
.time-utilization-column.column-medium {
  width: 200px;
}
.time-utilization-column.column-large {
  width: 240px;
}
.time-utilization-column.column-member {
  gap: 12px;
}
.time-utilization-column.with-right-border {
  position: relative;
  padding-right: 30px;
}
.time-utilization-column.with-right-border:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--bg-grey-e);
}
.time-utilization-column.column-sticky-left {
  position: sticky;
  z-index: 2;
  left: 0;
  background: var(--bg-content);
  border-right: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .time-utilization-row:hover:not(.time-utilization-list-header):not(.time-utilization-list-totals) .time-utilization-column.column-sticky-left {
    background: var(--bg-grey-fc);
  }
}
.time-utilization-row.time-utilization-list-header .time-utilization-column {
  color: var(--text-lighter);
  font-weight: 600;
  font-size: 12px;
}
.time-utilization-row.time-utilization-list-totals .time-utilization-column {
  color: var(--text-default);
  font-weight: 600;
}

.time-utilization-loading-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 160px;
  cursor: default;
  background: var(--bg-grey-fc);
}
.time-utilization-loading-row .content-spinner {
  margin: 0;
}

.time-utilization-row-bar {
  position: relative;
  flex: 1;
}

.time-utilization-row-bar-bg {
  position: absolute;
  left: 0;
  top: -4px;
  bottom: -5px;
  right: 40px;
  max-width: 140px;
  overflow: hidden;
  background: var(--bg-grey-f5);
  border-radius: 6px;
}

.time-utilization-row-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: 2px;
  transition: width 0.3s ease;
  box-shadow: inset -2px 0 0 color-mix(in srgb, var(--color-primary) 90%, transparent);
}
.color-danger .time-utilization-row-bar-fill {
  background-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
  box-shadow: inset -2px 0 0 color-mix(in srgb, var(--color-danger) 90%, transparent);
}
.color-warning .time-utilization-row-bar-fill {
  background-color: color-mix(in srgb, var(--color-accent-yellow) 40%, transparent);
  box-shadow: inset -2px 0 0 color-mix(in srgb, var(--color-accent-yellow-dark) 90%, transparent);
}

.time-utilization-row-bar-value {
  position: relative;
  z-index: 2;
  padding-left: 7px;
  color: var(--text-default);
}

.table-report .list-item-budget {
  width: 100%;
}

.company-member-empty-state {
  padding: 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-lighter);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.company-member-items {
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}

.company-member-item {
  position: relative;
  display: block;
  padding: 20px 60px 20px 60px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-content);
  transition: all var(--transition-normal) ease;
}
.company-member-item:hover {
  background: var(--bg-grey-fc);
}
.company-member-item:first-child {
  border-radius: 4px 4px 0 0;
}
.company-member-item:last-child {
  border-radius: 0 0 4px 4px;
  border-bottom: 0;
}

.company-member-item-avatar {
  position: absolute;
  left: 15px;
  top: 15px;
}

.company-member-item-owner {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

.company-member-item-dropdown {
  position: absolute;
  display: block;
  right: 15px;
  top: 16px;
  line-height: 10px;
  cursor: pointer;
}
.company-member-item-dropdown .dropdown-menu {
  right: -8px;
  left: auto;
}

.company-member-item-dropdown-toggle {
  display: block;
  padding: 7px;
  transition: all var(--transition-normal) ease;
}
.company-member-item-dropdown-toggle, .company-member-item-dropdown-toggle:focus, .company-member-item-dropdown-toggle:visited {
  color: var(--text-muted);
}
.company-member-item-dropdown-toggle:hover, .company-member-item-dropdown-toggle:active {
  color: var(--text-muted);
}
.company-member-item-dropdown.open .company-member-item-dropdown-toggle {
  transform: rotate(180deg);
}

.automation-modal-document-empty {
  padding: 30px 20px 28px;
  text-align: center;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-grey-fd);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.automation-modal-document-items {
  background: var(--bg-grey-fd);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.automation-modal-document-item {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  user-select: none;
  transition: all var(--transition-fast) ease;
  border-bottom: 1px solid var(--border-content);
}
.automation-modal-document-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.automation-modal-document-item:last-child {
  border-bottom: none;
}
.automation-modal-document-item.active {
  background: var(--bg-grey-f8);
}
.automation-modal-document-item.completed {
  pointer-events: none;
  background: var(--bg-grey-f8);
  filter: grayscale(1);
}
.automation-modal-document-item.completed .checkbox-toggle {
  opacity: 0.5;
}
.automation-modal-document-item.completed .automation-modal-document-item-step-text {
  text-decoration: line-through;
}
.automation-modal-document-item .automation-create-project-details {
  display: flex;
  flex-direction: row;
  gap: 20px;
  border-top: 1px solid var(--border-content);
  margin-top: 20px;
  padding-top: 20px;
}
.automation-modal-document-item .automation-create-project-details .form-group {
  margin: 0;
  flex-grow: 1;
  max-width: 50%;
}

.automation-modal-document-item-step {
  position: relative;
}
.automation-modal-document-item-step.trigger-step {
  font-style: italic;
  color: var(--text-lighter);
}
.automation-modal-document-item.active .automation-modal-document-item-step.trigger-step, .automation-modal-document-item:hover .automation-modal-document-item-step.trigger-step {
  color: var(--text-lighter);
}
.automation-modal-document-item-step.action-step {
  margin-bottom: 5px;
  font-weight: 500;
  color: var(--text-muted);
}
.automation-modal-document-item.active .automation-modal-document-item-step.action-step, .automation-modal-document-item:hover .automation-modal-document-item-step.action-step {
  color: var(--text-muted);
}

.automation-modal-document-item-global {
  position: relative;
  top: -1px;
  margin-left: 10px;
  padding: 3px 9px 2px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.075em;
  color: var(--color-info);
  background: color-mix(in srgb, var(--color-info) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-info) 60%, transparent);
  border-radius: 3px;
}

.automation-modal-document-add {
  margin-top: 20px;
  text-align: right;
  font-weight: 600;
}

.automation-modal-document-reminders {
  padding: 20px;
  background: var(--bg-grey-fd);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}
.automation-modal-document-reminders.active {
  background: var(--bg-content-alt);
}

.automation-modal-document-upgrade {
  padding: 20px;
  background: var(--bg-grey-fa);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.automation-modal-document-upgrade-link {
  font-size: 12px;
  font-weight: 500;
}

.automation-form-header {
  text-align: left;
}
@media (min-width: 768px) {
  .automation-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.automation-form-header:before, .automation-form-header:after {
  content: none;
}
.automation-form-header .automation-form-switch {
  margin: 0;
}

.automation-form-subheader {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.automation-form-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .automation-form-status {
    flex-direction: row-reverse;
    margin-top: 0;
  }
}

.automation-form-form-arrow {
  position: absolute;
  display: none;
  right: -5px;
  top: 50px;
}
.automation-form-form-arrow path {
  fill: var(--border-darker);
}
@media (min-width: 768px) {
  .automation-form-form-arrow {
    display: block;
  }
}

@media (min-width: 768px) {
  .automation-form-in {
    margin-bottom: -40px;
    padding-right: 40px;
  }
}

.automation-form-extra-link {
  font-size: 16px;
  font-weight: 600;
}

.automation-form-action-instruction {
  margin-top: 3px;
  padding: 18px 20px 16px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  background: var(--bg-grey-f5);
  border-radius: 6px;
}
.automation-form-action-instruction.email-instructions {
  margin: 0 30px 40px;
}
.automation-form-action-instruction a,
.automation-form-action-instruction a:focus,
.automation-form-action-instruction a:visited,
.automation-form-action-instruction a:hover,
.automation-form-action-instruction a:active {
  color: var(--text-info-dark);
  text-decoration: underline;
}

.automation-form-action-content {
  padding-top: 40px;
  border-top: 1px solid var(--border-content);
}

.automation-form-create-customform {
  padding: 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}
@media (min-width: 768px) {
  .automation-form-create-customform {
    display: flex;
    align-items: center;
  }
}

.automation-form-create-customform-btn {
  margin: 10px 0 0;
  display: inline-block;
}
@media (min-width: 768px) {
  .automation-form-create-customform-btn {
    margin: 0 0 0 auto;
  }
}

.automation-form-create-bonsai-cash-custom-envelope {
  padding: 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
  border: 1px solid var(--border-content-alt);
  border-radius: 4px;
}
@media (min-width: 768px) {
  .automation-form-create-bonsai-cash-custom-envelope {
    display: flex;
    align-items: center;
  }
}

.automation-form-create-bonsai-cash-custom-envelope-btn {
  margin: 10px 0 0;
  display: inline-block;
}
@media (min-width: 768px) {
  .automation-form-create-bonsai-cash-custom-envelope-btn {
    margin: 0 0 0 auto;
  }
}

.automation-email-form {
  position: relative;
  z-index: 1;
  margin: 0 -30px;
}
@media (min-width: 768px) {
  .automation-email-form {
    margin: 0;
    padding: 30px 0 0;
    border: 1px solid var(--border-content);
    border-radius: 6px;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--bg-shadow) 4%, transparent);
  }
}

.automations-list-beta-notice {
  position: relative;
  display: block;
  height: 36px;
  padding: 8px 15px 8px 32px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  transition: all var(--transition-fast) ease;
}
.automations-list-beta-notice, .automations-list-beta-notice:focus, .automations-list-beta-notice:visited {
  color: var(--text-default);
  background-color: var(--bg-content);
  border: 1px solid var(--border-content);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--black) 2%, transparent);
}
.automations-list-beta-notice:hover, .automations-list-beta-notice:active {
  color: var(--text-default);
  background: var(--bg-content);
  border: 1px solid var(--border-darker);
  box-shadow: 0 1px 10px color-mix(in srgb, var(--black) 2%, transparent);
}
@media (min-width: 768px) {
  .automations-list-beta-notice {
    display: inline-block;
  }
}

.automations-list-beta-notice-info {
  position: absolute;
  left: 12px;
  top: 8px;
  width: 12px;
}
.automations-list-beta-notice-info path {
  fill: currentColor;
}

.automation-list-item-title {
  padding-left: 20px;
}

.automation-list-item-step {
  margin-top: 4px;
}
.automation-list-item-step.action-step {
  font-weight: 500;
  color: var(--color-primary);
}
.automation-list-item-step:first-child {
  margin-top: 0;
}

.automation-list-item-icon {
  position: absolute;
  top: 4px;
  left: 0;
  width: 10px;
  height: auto;
  opacity: 0.2;
}
.automation-list-item-icon g path {
  fill: var(--text-default);
}

.automation-form-modal-body label {
  font-family: inherit;
}

.automation-scheduling-modal-copy {
  font-size: 18px;
  text-align: center;
}

.task-template-edit-title {
  position: relative;
  display: inline-block;
  float: left;
  width: 100%;
  max-width: 400px;
  padding-right: 60px;
}

.task-template-edit-title-toggle {
  display: none;
  margin-left: 15px;
  color: var(--color-primary);
  font-size: 0.8em;
  cursor: pointer;
  opacity: 0.75;
  transition: all var(--transition-normal) ease;
}
.task-template-edit-title-toggle:hover {
  opacity: 1;
}
@media (min-width: 768px) {
  .task-template-edit-title-toggle {
    display: inline-block;
  }
}

.dashboard-chart-title-editing {
  display: inline-block;
  float: left;
}

.task-template-edit-title-btn {
  position: absolute;
  right: 0;
}

.task-template-edit-tasks-list {
  min-height: 130px;
}

.task-templates-empty {
  padding: 90px 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-lighter);
  background: var(--bg-content);
  border: 1px solid var(--border-content-alt);
  border-radius: 6px;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--black) 3%, transparent);
}
@media (min-width: 768px) {
  .task-templates-empty {
    font-size: 16px;
  }
}

.document-show-page {
  position: relative;
  padding: 0 0 80px;
}

.document-show-top {
  position: relative;
  padding: 60px 0px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 16px;
  text-align: center;
}
@media (min-width: 480px) {
  .document-show-top {
    padding: 60px 20px;
  }
}
@media (min-width: 768px) {
  .document-show-top {
    padding: 60px 0;
    font-size: 18px;
    text-align: left;
  }
}
@media print {
  .document-show-top {
    display: none;
  }
}

.document-cta {
  position: fixed;
  z-index: 10;
  display: block;
  left: 0;
  bottom: 0;
  width: 100%;
  min-width: 200px;
  border-radius: 0px;
}
@media (min-width: 768px) {
  .document-cta {
    position: relative;
    display: inline-block;
    width: auto;
    border-radius: 2px;
  }
}

.document-show-second-nav {
  position: fixed;
  z-index: var(--z-agreement-secondary-nav);
  top: 0;
  left: 0;
  width: 100%;
  min-height: 80px;
  background-color: var(--bg-content);
  box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 20%, transparent);
  transition: all var(--transition-slow) ease;
  transform: translateY(-100%);
}
.document-show-second-nav.active {
  transform: translateY(0%);
}
@media print {
  .document-show-second-nav {
    display: none;
  }
}

.document-show-second-nav-in {
  padding: 15px 0;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 18px;
  text-align: left;
}

.document-doc-wrapper {
  position: relative;
  padding-left: 0px;
  padding-right: 0px;
}
@media (min-width: 768px) {
  .document-doc-wrapper {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.document-doc {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding: 80px 20px;
  font-family: var(--font-sans-serif);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  background-color: var(--bg-content);
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--black) 4%, transparent);
}
@media (min-width: 480px) {
  .document-doc {
    padding: 80px 40px;
    font-size: 16px;
  }
}
@media (min-width: 768px) {
  .document-doc {
    padding: 80px;
    border: 1px solid var(--border-content);
  }
}
@media print {
  .document-doc {
    border: none;
    box-shadow: none;
  }
}
.document-doc ul {
  margin-bottom: 0;
}

.document-doc-title {
  margin-bottom: 40px;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
}

.document-doc-section {
  margin-top: 20px;
}

.document-doc-indent {
  padding-left: 40px;
}

.document-doc .highlight {
  cursor: pointer;
  padding: 0 1px;
  border-bottom: 1px dashed color-mix(in srgb, var(--black) 20%, transparent);
  transition: all var(--transition-normal) ease;
}
.document-doc .highlight:hover {
  border-bottom-color: var(--color-primary);
}
.document-doc .highlight:active, .document-doc .highlight:focus {
  border-bottom: 1px solid var(--color-primary);
  box-shadow: 0 1px 0 var(--color-primary);
}
.document-doc .highlight:focus {
  background: transparent;
  animation: pop-on-input var(--transition-normal) 1 forwards;
}

.document-doc.signed .highlight {
  padding: 0;
  border-bottom: none;
}

.nda-company-name {
  display: inline-block;
  min-width: 60px;
}

.nda-inline-address {
  display: inline-block;
  min-width: 100px;
}

.document-doc .highlight[placeholder]:empty:before {
  content: attr(placeholder);
  color: color-mix(in srgb, var(--black) 30%, transparent);
}

.document-doc .highlight[placeholder]:empty:focus:before {
  content: "";
}

.slide-appear {
  opacity: 0;
  transition: opacity 0.7s ease-in;
}

.slide-appear.slide-appear-active {
  opacity: 1;
}

.slide-enter {
  max-height: 0;
  transition: all 2s ease-in;
}

.slide-enter.slide-enter-active {
  max-height: 1000px;
}

.slide-exit {
  transition: all var(--transition-normal) ease-out;
}

.slide-exit.slide-exit-active {
  max-height: 0;
}

.todo-profile-form {
  padding: 40px;
}

.todo-profile-form-group {
  margin-bottom: 40px;
}
.todo-profile-form-group:last-child {
  margin-bottom: 0;
}

.todo-profile-display-value {
  margin-top: 10px;
  font-size: 16px;
}

.todo-display-address-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-lighter);
  font-weight: 400;
  font-size: 14px;
}
@media (min-width: 480px) {
  .todo-display-address-empty {
    font-size: 16px;
  }
}

.onboarding-todo-address-form {
  padding: 40px;
}

.todo-display-address-container {
  padding: 30px;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
}

.todo-display-address-status,
.todo-display-status {
  margin: 0;
  padding: 10px 20px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: color-mix(in srgb, var(--black) 40%, transparent);
  background: var(--bg-grey-fc);
  border-bottom: 1px solid var(--border-content);
}
.todo-display-address-status:last-child,
.todo-display-status:last-child {
  border-bottom: 0;
}

.todo-display-address-map {
  width: 100%;
  margin-top: 30px;
  border-radius: 4px;
  overflow: hidden;
}

.modal-bundled-invoice-selection-list {
  min-height: 200px;
  max-height: 300px;
  margin: 20px;
  overflow-y: scroll;
  border: 1px solid var(--border-content-alt);
  border-radius: 10px;
}
.modal-bundled-invoice-selection-list .modal-selection-list-item-select {
  top: 6px;
}

.invoice-bundle-invoice-item-title {
  padding-right: 10px;
  font-size: 14px;
  font-weight: 600;
}

.invoice-bundle-invoice-item-project {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-muted);
}

.invoice-bundle-invoice-item-status-text {
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

.invoice-bundle-invoice-item-invalid {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--black) 60%, transparent);
}

.invoice-bundle-invoice-item-invalid-icon {
  margin-right: 7px;
  font-size: 13px;
  color: var(--color-accent-orange);
  opacity: 0.7;
}

.invoice-bundle-total {
  display: flex;
  justify-content: space-between;
  padding: 10px 30px 30px;
  font-size: 16px;
  font-weight: 600;
}

.invoice-bundle-invoice-amount {
  text-align: right;
  font-size: 14px;
  font-weight: 600;
}

.invoice-bundle-invoice-empty {
  margin: 20px 20px 0;
}

.invoice-bundle-invoice-empty-back {
  font-size: 14px;
}

.bundled-invoices-container {
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--black) 2%, transparent);
}

.bundled-invoices-header {
  padding: 34px 30px;
}
@media (min-width: 768px) {
  .bundled-invoices-header {
    display: flex;
    justify-content: stretch;
  }
}

.bundled-invoices-header-title {
  flex: 1;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-default);
  cursor: default;
}

.bundled-invoices-header-dates {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted-alt);
}

.bundled-invoices-header-aside {
  font-size: 12px;
  color: var(--text-muted-alt);
}

.bundled-invoices-header-status {
  display: inline-block;
  margin-top: 5px;
  margin-right: 10px;
  text-transform: capitalize;
  font-weight: 600;
  font-size: 12px;
}
.bundled-invoices-header-status.drafted {
  color: var(--text-muted-alt);
}
.bundled-invoices-header-status.outstanding {
  color: var(--text-muted-alt);
}
.bundled-invoices-header-status.paid {
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .bundled-invoices-header-status {
    display: block;
    text-align: right;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 11px;
    font-size: 16px;
  }
}

.bundled-invoices-list .invoice-list-item-date {
  min-width: 20px;
}
.bundled-invoices-list .invoice-bundle-invoice-item-invalid {
  padding-left: 20px;
}
@media (min-width: 600px) {
  .bundled-invoices-list .invoice-list-item-rate {
    top: 25px;
    right: 20px;
    padding-right: 0;
    border-right: 0;
  }
}

.terms-page h3 {
  margin: 40px 0 40px 0;
  text-align: center;
}
.terms-page h4 {
  margin-top: 20px;
}

.legal-links {
  margin: 40px 0 40px 0;
}

.privacy-page h4 {
  margin-top: 20px;
}

.page-not-found {
  position: relative;
  padding-bottom: 140px;
}

.page-not-found-wrapper {
  max-width: var(--invoice-wrapper-width);
  width: 100%;
  margin: auto;
  padding: 120px 0 60px;
}
@media (min-width: 480px) {
  .page-not-found-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.page-not-found-content {
  margin-bottom: 60px;
  text-align: center;
  font-size: 22px;
  border: 1px solid var(--border-content);
  border-radius: 4px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--black) 2%, transparent);
}

.page-not-found-top {
  padding: 30px 30px 25px;
  color: var(--text-default);
  background: var(--bg-content);
  border-radius: 4px 4px 0 0;
}

.page-not-found-top-subline {
  font-size: 16px;
  font-weight: 400;
}

.page-not-found-bottom {
  padding: 30px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-lighter);
  background: var(--bg-grey-fd);
  border-top: 1px solid var(--border-content);
  border-radius: 0 0 4px 4px;
}

.page-not-found-logo {
  margin: 0 0 80px;
  text-align: center;
  opacity: 0.2;
}

.page-not-found-logo-icon {
  width: 40px;
}

.template-gallery-overlay-content {
  position: relative;
  width: 100%;
  margin: 0px auto;
  padding: 20px;
}
@media (min-width: 768px) {
  .template-gallery-overlay-content {
    padding: 40px;
    max-width: 1085px;
  }
}

.template-selector-modal {
  display: flex;
  flex-direction: column;
  border-radius: 0;
}
@media (min-width: 768px) {
  .template-selector-modal {
    border-radius: 6px;
    flex-direction: row;
    gap: 50px;
  }
}

.template-selector-sidebar {
  width: 100%;
}
@media (min-width: 768px) {
  .template-selector-sidebar {
    max-width: 230px;
  }
  .template-selector-sidebar .template-selector-search {
    display: none;
  }
}
.template-selector-sidebar .filters-dropdown {
  position: relative;
}
.template-selector-sidebar .toggle-filters-dropdown {
  margin: 20px 0;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.template-selector-sidebar .toggle-filters-dropdown-icon {
  margin-right: 10px;
}

.template-selector-content {
  flex-grow: 1;
  max-width: 725px;
}
.template-selector-content .template-selector-search {
  display: none;
}
@media (min-width: 768px) {
  .template-selector-content .template-selector-search {
    display: block;
    margin-bottom: 20px;
  }
}

.template-selector-search-clear-field {
  position: absolute;
  right: 0;
  top: 50%;
  padding: 7px 12px 7px;
  font-size: 18px;
  color: var(--text-default);
  opacity: 0.6;
  transform: translateY(-50%);
}
.template-selector-search-clear-field:hover {
  color: var(--text-default);
  opacity: 1;
}

.template-selector-title {
  font-weight: 600;
  font-size: 18px;
  line-height: 120%;
  margin-bottom: 15px;
}

.template-selector-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 140%;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .template-selector-description {
    margin-bottom: 30px;
  }
}

.template-selector-tabs {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
}
.template-selector-tabs > a {
  flex-grow: 1;
  color: var(--text-muted-alt);
  font-weight: 500;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-content);
  text-align: center;
}
.template-selector-tabs > a.selected {
  color: var(--text-default);
  border-bottom: 2px solid var(--text-default);
}

.template-selector-filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.template-selector-filter-list .template-selector-filter-list-item {
  order: 2;
}
.template-selector-filter-list .template-selector-filter-list-item.first {
  order: 0;
}
.template-selector-filter-list .template-selector-filter-list-item.second {
  order: 1;
}
.template-selector-filter-list .template-selector-filter-list-item.last {
  order: 3;
}
.filters-dropdown .template-selector-filter-list {
  position: absolute;
  padding: 30px;
  top: 30px;
  right: 15px;
  background: var(--bg-content);
  box-shadow: 0px 0px 14px color-mix(in srgb, var(--black) 7%, transparent);
  border-radius: 4px;
  min-width: 300px;
  z-index: 100;
}
.filters-dropdown .template-selector-filter-list:before {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;
  content: " ";
  position: absolute;
  right: 33px;
  top: -10px;
}

.template-selector-filter-list-item {
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 180%;
  color: var(--text-default);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  user-select: none;
}
.template-selector-filter-list-item:hover {
  border-radius: 5px;
  background: var(--bg-grey-fa);
  font-weight: 500;
}
.template-selector-filter-list-item.selected {
  border-radius: 5px;
  background: var(--bg-grey-f5);
  font-weight: 500;
}

@media (min-width: 768px) {
  .template-selector-templates-list {
    min-height: calc(171px * 4 + 25px * 3);
  }
}

.template-selector-templates {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 25px;
  max-width: 725px;
}
.template-selector-templates .template-selector-template {
  flex-basis: calc((100% - 25px) / 2);
  max-width: calc((100% - 25px) / 2);
}
.template-selector-templates .template-selector-template-thumbnail-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-direction: column;
}
@media (min-width: 768px) {
  .template-selector-templates .template-selector-template {
    flex-basis: calc((100% - 50px) / 3);
    max-width: calc((100% - 50px) / 3);
  }
}

.template-selector-template {
  padding: 14px;
  border: 1px solid var(--border-content);
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  max-height: 171px;
}
.template-selector-template:hover {
  box-shadow: 0px 0px 14px color-mix(in srgb, var(--black) 7%, transparent);
}
.template-selector-template:hover .template-selector-template-thumbnail::after {
  display: block;
}
.template-selector-template.start-from-scratch:hover .template-selector-template-thumbnail::after {
  display: none;
}
.template-selector-template.start-from-scratch .template-selector-template-thumbnail {
  background: var(--bg-grey-f5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.template-selector-template.start-from-scratch .template-selector-template-thumbnail svg {
  width: auto;
  height: 43px;
}
.template-selector-template.start-from-scratch .template-selector-template-thumbnail svg path {
  fill: var(--color-primary);
}

.template-selector-template-thumbnail {
  position: relative;
  background: var(--bg-grey-fa);
  aspect-ratio: 2.3780487805;
  width: 100%;
  height: auto;
  max-width: 195px;
  max-height: 82px;
  margin-bottom: 15px;
  border: 1px solid #f2f2f2;
  background-position: center top;
  background-size: cover;
}
.template-selector-template-thumbnail::after {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 7px 10px;
  content: "Preview";
  background: var(--bg-content);
  opacity: 0.9;
  font-size: 12px;
  color: var(--color-primary);
}

.template-selector-template-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 125%;
  margin-bottom: 5px;
}

.template-selector-template-use-link {
  font-weight: 600;
  fons-size: 12px;
  line-height: 140%;
  color: var(--color-primary);
}

.template-selector-empty {
  padding: 100px 0;
  text-align: center;
}

.template-selector-empty-title {
  font-family: var(--font-display-header);
  font-weight: 500;
  font-size: 22px;
  line-height: 120%;
  margin: 30px 0 35px;
}

.template-selector-pagination {
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.template-preview-modal {
  padding: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.template-selector-preview-header {
  padding: 40px 40px 40px 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  line-height: 1em;
}
@media (min-width: 992px) {
  .template-selector-preview-header {
    padding: 40px 0;
  }
}

.template-selector-preview-return a {
  font-weight: 500;
  color: inherit;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.template-selector-preview-return .btn-left-arrow-icon {
  margin: 0;
  font-size: 0.7em;
}

.template-selector-preview-cta .btn {
  margin-left: 30px;
}

.custom-form .template-selector-preview-content {
  padding: 0;
  border: 1px solid var(--border-content);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background-color: var(--bg-grey-f8);
}
.custom-form .template-selector-preview-content .wrapper-sm {
  margin: 0 auto;
  padding: 50px 0;
}
.custom-form .template-selector-preview-content .customform-form-top {
  margin-top: 0;
}
.custom-form .template-selector-preview-content .customform-form-top-view-only {
  display: none;
}

.proposal .template-selector-template {
  max-height: 364px;
}
.proposal .template-selector-template-thumbnail {
  aspect-ratio: 0.7090909091;
  max-width: 195px;
  max-height: 275px;
}
.proposal.template-preview-modal {
  max-width: 850px;
}
.proposal .template-selector-preview-content {
  display: flex;
  justify-content: center;
  padding: 0 0 50px;
}
.proposal .template-selector-preview-content .proposal-gallery-preview-iframe {
  margin: 0;
}

.template-or-new-options {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 25px;
}
@media (min-width: 768px) {
  .template-or-new-options {
    padding: 20px 0;
    flex-direction: row;
  }
  .template-or-new-options .template-or-new-option {
    max-width: 180px;
  }
}

.template-or-new-option {
  flex-grow: 1;
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  background: color-mix(in srgb, var(--bg-grey-e) 30%, transparent);
}
.template-or-new-option:hover {
  background: color-mix(in srgb, var(--border-content-alt) 30%, transparent);
}
.template-or-new-option.start-from-scratch {
  color: inherit;
}

.template-or-new-option-icon {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: 65px;
  margin-bottom: 15px;
}
.start-from-scratch .template-or-new-option-icon svg {
  width: 50px;
  height: auto;
  padding: 15px;
  background: var(--bg-content-alt);
  border-radius: 15px;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--bg-shadow) 2%, transparent);
}

.template-or-new-option-title {
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .service {
    padding: 40px;
    max-width: 1322px;
  }
}
.service .template-selector-content {
  max-width: 962px;
}
.service .template-selector-templates {
  max-width: 962px;
  display: block;
}

.template-selector-service-template {
  display: flex;
  padding: 30px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.template-selector-service-template-name-and-description {
  width: 70%;
}
@media (min-width: 1400px) {
  .template-selector-service-template-name-and-description {
    width: 540px;
  }
}

.template-selector-service-template-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.template-selector-service-template-description {
  word-break: break-word;
  white-space: pre-line;
  font-size: 16px;
}

.template-selector-service-template-rate {
  font-size: 16px;
  font-weight: 600;
  width: 30%;
  text-align: right;
}
@media (min-width: 1400px) {
  .template-selector-service-template-rate {
    text-align: center;
    width: 153px;
  }
}

.template-selector-service-template-tag {
  padding-top: 15px;
}
@media (min-width: 1400px) {
  .template-selector-service-template-tag {
    position: relative;
    top: -3px;
    padding-top: 0;
    width: 170px;
    text-align: center;
  }
}

.template-selector-service-template-action {
  padding-top: 15px;
}
@media (min-width: 1400px) {
  .template-selector-service-template-action {
    padding-top: 0;
    text-align: right;
    width: 99px;
  }
}

.template-selector-service-template-action-add-service {
  position: relative;
  top: -3px;
}

.template-selector-service-template-action-add-service-icon {
  font-size: 21px;
  background: #F2F7F2;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  padding: 5px 10px;
}
.template-selector-service-template-action-add-service-icon::before {
  position: relative;
  top: -1px;
}

.template-selector-service-template-tooltip.react-tooltip__place-top::after {
  left: 51% !important;
}

.doc .template-selector-template {
  max-height: 364px;
}
.doc .template-selector-template-thumbnail {
  aspect-ratio: 0.7090909091;
  max-width: 195px;
  max-height: 275px;
  background-color: var(--bg-grey-f8);
}
.doc .template-selector-preview-content {
  display: flex;
  justify-content: center;
  padding: 0 0 50px;
}

.doc-template-preview {
  position: relative;
  width: 100%;
}
.doc-template-preview iframe {
  border-radius: 10px;
}

.email-event-item {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.email-event-item-timestamp {
  text-transform: uppercase;
  letter-spacing: 0.075em;
  font-size: 12px;
}

.email-event-item-to,
.email-event-item-subject {
  margin-top: 5px;
  font-size: 14px;
}

.email-event-item-status {
  margin-top: 20px;
  font-size: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--border-content);
}

.email-event-item-notes {
  margin-top: 5px;
  font-size: 14px;
}

.modal.fade .modal-dialog.modal-view-mail-log-dialog {
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  box-shadow: none;
  transform: translate3d(0, 0, 0);
}
.modal.fade .modal.fade .modal-dialog.modal-view-mail-log-dialog {
  opacity: 0;
  transform: translate3d(0, 0, 0);
}
.modal.in .modal.fade .modal-dialog.modal-view-mail-log-dialog {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.modal.fade .modal-dialog.modal-view-mail-log-dialog .modal-content,
.modal.fade .modal-dialog.modal-view-mail-log-dialog .modal-view-mail-log-component,
.modal.fade .modal-dialog.modal-view-mail-log-dialog .modal-view-mail-log-content {
  height: 100%;
}

.modal-view-mail-log-close {
  position: absolute;
  right: 10px;
  top: 10px;
}

.modal-view-mail-log-close-icon {
  width: 40px;
  height: auto;
  padding: 10px;
}
.modal-view-mail-log-close-icon path {
  fill: var(--text-lighter);
}
.modal-view-mail-log-close-icon .modal-view-mail-log-close:hover path,
.modal-view-mail-log-close-icon .modal-view-mail-log-close:active path {
  fill: var(--text-lighter);
}

.modal-view-mail-log-iframe {
  height: 100%;
  width: 100%;
  border: none;
}

.company-setup-steps-section {
  position: relative;
  z-index: 1;
  padding: 20px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--black) 15%, transparent);
}

.company-setup-steps-section-bg {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.company-setup-steps-section-bg-in {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 200%;
  background-image: radial-gradient(center, ellipse farthest-corner, color-mix(in srgb, var(--text-info-dark) 2%, transparent) 0%, color-mix(in srgb, var(--text-info-dark) 30%, transparent) 100%);
}

.company-setup-steps {
  position: relative;
  z-index: 2;
}

.company-setup-step {
  display: inline-block;
  float: left;
  padding: 0 10px;
  text-align: center;
  color: color-mix(in srgb, var(--text-default) 35%, transparent);
  font-size: 12px;
  font-weight: 500;
  cursor: default;
}
@media (min-width: 480px) {
  .company-setup-step {
    font-size: 14px;
  }
}
.company-setup-step.active {
  color: var(--text-info-dark);
}
.company-setup-step.done {
  color: color-mix(in srgb, var(--text-info-dark) 75%, transparent);
}
.company-setup-steps.steps-2 .company-setup-step {
  width: 50%;
}
.company-setup-steps.steps-3 .company-setup-step {
  width: 33.3333%;
}

.company-setup-step-indicator {
  width: 10px;
  height: 10px;
  margin: 5px auto 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--black) 15%, transparent);
}
.company-setup-step.active .company-setup-step-indicator {
  background: color-mix(in srgb, var(--text-info-dark) 50%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-info-dark) 75%, transparent);
}
.company-setup-step.done .company-setup-step-indicator {
  background: color-mix(in srgb, var(--text-info-dark) 25%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-info-dark) 25%, transparent);
}

.company-setup-step-border-1 {
  position: absolute;
  left: 20%;
  bottom: 4px;
  height: 2px;
  width: 27%;
  background: color-mix(in srgb, var(--black) 5%, transparent);
  border-radius: 10px;
}
.company-setup-step-border-1.active {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--text-info-dark) 25%, transparent) 0%, color-mix(in srgb, var(--color-info) 65%, transparent) 100%);
}
.company-setup-step-border-1.done {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--text-info-dark) 15%, transparent) 0%, color-mix(in srgb, var(--text-info-dark) 25%, transparent) 100%);
}

.company-setup-step-border-2 {
  position: absolute;
  right: 20%;
  bottom: 4px;
  height: 2px;
  width: 27%;
  background: color-mix(in srgb, var(--black) 5%, transparent);
  border-radius: 10px;
}
.company-setup-step-border-2.done {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--text-info-dark) 25%, transparent) 0%, color-mix(in srgb, var(--color-info) 65%, transparent) 100%);
}

.company-setup-title {
  margin-bottom: 40px;
  text-align: center;
}

.company-setup-header {
  margin-bottom: 0;
}

.company-setup-skip-step,
.company-setup-back-step {
  margin-top: 5px;
}

.company-setup-skip-step-link,
.company-setup-back-step-link {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.company-setup-skip-step-icon {
  position: relative;
  top: -1px;
  margin-left: 1px;
  font-size: 0.7em;
}

.company-setup-back-step-icon {
  position: relative;
  top: -1px;
  margin-right: 1px;
  font-size: 0.7em;
}

.companies-show-page {
  padding-bottom: 60px;
  background: var(--bg-content);
}

.companies-show-avatar {
  position: relative;
  z-index: 2;
  margin: -60px auto 0;
  max-width: 120px;
}
@media (min-width: 992px) {
  .companies-show-avatar {
    max-width: none;
  }
}

.companies-show-main {
  padding: 0 0 60px;
}
@media (min-width: 992px) {
  .companies-show-main {
    padding: 70px 0 60px 90px;
  }
}

.companies-show-title {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 46px;
}

.companies-show-subtitle {
  margin-top: 5px;
  font-size: 22px;
  font-weight: 500;
  color: var(--text-lighter);
}

.companies-show-short-description-mobile {
  margin-top: 5px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-lighter);
}

.companies-show-subtitle-input {
  font-weight: 500;
}

.companies-show-section {
  margin-top: 60px;
}

.companies-show-section-label {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  font-weight: 400;
  font-size: 16px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--text-lighter);
}
@media (min-width: 768px) {
  .companies-show-section-label {
    font-size: 18px;
  }
}

.profile-section-body {
  padding: 40px;
  border: 1px solid var(--border-content-alt);
  background: var(--bg-content);
  border-radius: 4px;
}
.profile-section-body.no-padding {
  padding: 0;
}

.profile-section-empty {
  display: block;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-lighter);
}

.company-profile-edit-btn {
  float: right;
  padding: 5px 0;
  font-size: 14px;
}
.company-profile-edit-btn.disabled {
  opacity: 0.8;
  pointer-events: false;
}

textarea.company-biography-edit-textarea {
  font-size: 16px;
  min-height: 200px;
}

.company-biography-display {
  font-size: 16px;
}
@media (min-width: 768px) {
  .company-biography-display {
    font-size: 18px;
  }
}

.companies-show-location {
  position: relative;
  margin-bottom: 15px;
}

.companies-show-location-icon {
  position: absolute;
  left: 0;
  top: -4px;
  font-size: 24px;
  color: var(--border-content-alt);
}

.companies-show-location-text {
  padding-left: 30px;
  vertical-align: middle;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-lighter);
}

.companies-show-work-type {
  position: relative;
}

.companies-show-work-type-icon {
  position: absolute;
  left: 2px;
  top: -4px;
  font-size: 25px;
  color: var(--border-content-alt);
}

.companies-show-work-type-text {
  padding-left: 30px;
  vertical-align: middle;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-lighter);
  text-transform: capitalize;
}

.company-portfolio-empty {
  padding: 40px;
  border: 1px solid var(--border-content-alt);
  background: var(--bg-content);
  border-radius: 4px;
}

.company-portfolio-row {
  margin: 0 -10px -20px;
}

.company-portfolio-item-image {
  position: relative;
  margin: 0 10px 20px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  transition: all var(--transition-normal) ease;
  border-radius: 10px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 5%, transparent);
}
@media (min-width: 768px) {
  .company-portfolio-item-image:hover {
    box-shadow: 0 3px 9px color-mix(in srgb, var(--black) 7%, transparent);
  }
  .company-portfolio-item-image:active {
    transform: scale(0.99);
  }
}

.company-portfolio-item-link {
  display: block;
  width: 100%;
  padding-bottom: 80%;
  background: var(--bg-content) center center no-repeat;
  background-size: cover;
  border-radius: 3px;
}

.company-portfolio-item-over {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  padding: 20px;
  opacity: 0;
  overflow: hidden;
  background: var(--bg-content);
  border-radius: 3px;
  transition: all var(--transition-normal) ease;
}
.company-portfolio-item-image.no-image .company-portfolio-item-over {
  opacity: 0.75;
}
.company-portfolio-item-image:hover .company-portfolio-item-over {
  opacity: 0.95;
}
@media (min-width: 768px) {
  .company-portfolio-item-over {
    padding: 40px;
  }
}

.company-portfolio-item-over-title {
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 14px;
}
@media (min-width: 480px) {
  .company-portfolio-item-over-title {
    font-size: 24px;
  }
}

.company-portfolio-item-over-description {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted-alt);
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 480px) {
  .company-portfolio-item-over-description {
    font-size: 16px;
  }
}

.company-portfolio-item-over-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 60%, rgb(255, 255, 255) 100%);
}

.company-portfolio-edit-items {
  margin-bottom: 20px;
  background: var(--bg-content);
}

.company-portfolio-edit-item {
  position: relative;
  padding: 40px;
  border: 1px solid var(--border-content-alt);
  border-bottom: 0;
}
.company-portfolio-edit-item:before, .company-portfolio-edit-item:after {
  display: table;
  content: " ";
}
.company-portfolio-edit-item:after {
  clear: both;
}
.company-portfolio-edit-item:first-child {
  border-radius: 4px 4px 0 0;
}
.company-portfolio-edit-item:last-child {
  border-bottom: 1px solid var(--border-content-alt);
  border-radius: 0 0 4px 4px;
}
.company-portfolio-edit-item:only-child {
  border-radius: 4px;
}

.company-portfolio-edit-item-remove {
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 8px 11px 6px;
  line-height: 1;
  font-size: 16px;
  color: var(--color-danger);
  border: 1px solid var(--border-content-alt);
  box-shadow: inset 1px -1px 2px color-mix(in srgb, var(--black) 7%, transparent);
  border-radius: 0 0 0 4px;
}
.company-portfolio-edit-item-remove:focus, .company-portfolio-edit-item-remove:visited {
  color: var(--color-danger);
}
.company-portfolio-edit-item-remove:hover, .company-portfolio-edit-item-remove:active {
  color: color-mix(in srgb, var(--color-danger) 98%, var(--black));
}

.company-portfolio-edit-item-placeholder {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

.company-portfolio-edit-item-photos-icon {
  margin-bottom: 2px;
  font-size: 28px;
}

.company-portfolio-edit-item-photos-optional {
  font-size: 12px;
  color: var(--text-lighter);
}

.company-portfolio-edit-item-attachment {
  margin: 0 auto 40px;
}
@media (min-width: 768px) {
  .company-portfolio-edit-item-attachment {
    margin: 0 auto;
  }
}
.company-portfolio-edit-item-attachment .form-attachment-filename {
  display: none;
}

.company-portfolio-edit-item-uploader {
  position: relative;
  width: 100%;
  padding-bottom: 80%;
  margin: 0 auto;
  background: var(--bg-grey-f8) center center no-repeat;
  background-size: cover;
  border-radius: 2px;
  box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 0 0px 0px 1px color-mix(in srgb, var(--black) 7%, transparent);
}

.company-portfolio-modal-bg-white {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-grey-fd);
}

.modal.fade .modal-dialog.company-portfolio-modal-wrapper {
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: 60px 0 0;
  box-shadow: none;
  transform: translate3d(0, 0, 0);
}
.modal.fade .modal.fade .modal-dialog.company-portfolio-modal-wrapper {
  opacity: 0;
  transform: translate3d(0, 0, 0);
}
.modal.in .modal.fade .modal-dialog.company-portfolio-modal-wrapper {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.company-portfolio-modal-action-bar {
  position: fixed;
  z-index: 3;
  left: 0;
  top: 0;
  width: 100%;
  height: 60px;
  background: var(--bg-grey-fc);
  border-bottom: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}
@media (min-width: 768px) {
  .company-portfolio-modal-action-bar {
    box-shadow: 0 1px 4px color-mix(in srgb, var(--black) 5%, transparent);
  }
}

.company-portfolio-modal-close {
  position: absolute;
  margin: 0;
  right: 0;
  top: 0;
  height: 100%;
  padding: 5px 20px;
  font-size: 50px;
  line-height: 50px;
  border-left: 1px solid var(--border-semi-transparent-alt);
}
.company-portfolio-modal-close, .company-portfolio-modal-close:visited, .company-portfolio-modal-close:focus {
  color: var(--text-muted);
}
.company-portfolio-modal-close:hover, .company-portfolio-modal-close:active {
  color: var(--text-muted);
}

.company-portfolio-modal-navigation-btn {
  position: absolute;
  display: block;
  top: 0px;
  height: 100%;
  padding: 13px 23px;
  line-height: 36px;
  font-size: 36px;
  border-right: 1px solid var(--border-semi-transparent-alt);
}
.company-portfolio-modal-navigation-btn, .company-portfolio-modal-navigation-btn:visited, .company-portfolio-modal-navigation-btn:focus {
  color: var(--text-muted);
}
.company-portfolio-modal-navigation-btn:hover, .company-portfolio-modal-navigation-btn:active {
  color: var(--text-muted);
}
.company-portfolio-modal-navigation-btn.disabled {
  color: color-mix(in srgb, var(--black) 10%, transparent);
}

.company-portfolio-modal-navigation-btn-prev {
  left: 0px;
}

.company-portfolio-modal-navigation-btn-next {
  left: 60px;
}

.company-portfolio-modal {
  max-width: 1400px;
  margin: 0 auto;
  border: 0;
  background: none;
  box-shadow: none;
}

.company-portfolio-modal-figure {
  padding: 0;
}
@media (min-width: 768px) {
  .company-portfolio-modal-figure {
    padding: 60px;
  }
}

.company-portfolio-modal-item-image {
  width: 100%;
  box-shadow: 0 2px 14px color-mix(in srgb, var(--black) 30%, transparent);
}
@media (min-width: 1080px) {
  .company-portfolio-modal-item-image {
    display: inline-block;
    float: left;
    width: 64%;
    margin: 0;
  }
}

.company-portfolio-modal-item-caption {
  display: block;
  padding: 20px 20px 60px;
}
.company-portfolio-modal-figure.with-image .company-portfolio-modal-item-caption {
  display: inline-block;
  float: right;
  width: 100%;
}
@media (min-width: 768px) {
  .company-portfolio-modal-figure.with-image .company-portfolio-modal-item-caption {
    padding: 40px 0;
  }
}
@media (min-width: 1080px) {
  .company-portfolio-modal-figure.with-image .company-portfolio-modal-item-caption {
    width: 36%;
    padding: 0 0 0 60px;
  }
}
.company-portfolio-modal-figure.without-image .company-portfolio-modal-item-caption {
  display: block;
  margin: auto;
  width: 100%;
  max-width: 660px;
}
@media (min-width: 768px) {
  .company-portfolio-modal-figure.without-image .company-portfolio-modal-item-caption {
    padding: 0 0 60px;
  }
}

.company-portfolio-modal-item-caption-title {
  font-weight: 600;
  color: var(--text-default);
}
.company-portfolio-modal-figure.with-image .company-portfolio-modal-item-caption-title {
  margin-bottom: 10px;
  font-size: 26px;
}
.company-portfolio-modal-figure.without-image .company-portfolio-modal-item-caption-title {
  margin-bottom: 20px;
  font-size: 26px;
  color: var(--text-default);
}
@media (min-width: 768px) {
  .company-portfolio-modal-figure.without-image .company-portfolio-modal-item-caption-title {
    font-size: 32px;
  }
}

.company-portfolio-modal-item-caption-description {
  font-weight: 500;
  color: var(--text-muted);
  word-wrap: break-word;
}
.company-portfolio-modal-figure.with-image .company-portfolio-modal-item-caption-description {
  font-size: 14px;
}
@media (min-width: 1200px) {
  .company-portfolio-modal-figure.with-image .company-portfolio-modal-item-caption-description {
    font-size: 16px;
  }
}
.company-portfolio-modal-figure.without-image .company-portfolio-modal-item-caption-description {
  font-size: 16px;
}
@media (min-width: 768px) {
  .company-portfolio-modal-figure.without-image .company-portfolio-modal-item-caption-description {
    font-size: 18px;
  }
}

.company-details-status {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px 30px 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--text-lighter);
  background: var(--bg-grey-fc);
  border-left: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 0 4px 0 4px;
  box-shadow: inset 2px -2px 3px color-mix(in srgb, var(--black) 2%, transparent);
}
.company-details-status.approved {
  color: var(--text-default);
}
.company-details-status.rejected {
  color: var(--color-danger);
}

@media (min-width: 992px) {
  .top-header-section.company .top-header-content-in {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
  }
}

.company-details-inner-wrapper {
  position: relative;
  text-align: left;
}
@media (min-width: 768px) {
  .company-details-inner-wrapper {
    flex: 1;
  }
}
@media (min-width: 992px) {
  .company-details-inner-wrapper {
    max-width: 60%;
    min-height: 84px;
    padding-left: 110px;
    padding-top: 5px;
  }
}

.company-details-mobile-avatar {
  position: absolute;
  left: 50%;
  margin-left: -30px;
  top: -90px;
}

.company-details-column1 {
  position: relative;
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .company-details-column1 {
    position: absolute;
    left: 0;
    top: 0;
    margin-bottom: 0;
  }
}
.company-details-column1 .avatar-img,
.company-details-column1 .user-avatar {
  background-size: contain;
  background-color: var(--bg-grey-f5);
}

.company-details-top-status {
  position: absolute;
  display: flex;
  align-items: center;
  right: 58px;
  top: 0;
}
@media (min-width: 992px) {
  .company-details-top-status {
    top: 50%;
    transform: translateY(-50%);
  }
}

.company-details-dropdown-menu {
  position: absolute;
  z-index: 10;
  right: 0;
  top: 0;
}
@media (min-width: 992px) {
  .company-details-dropdown-menu {
    top: 50%;
    transform: translateY(-50%);
  }
}

.company-details-contact-count {
  display: none;
  position: relative;
  align-items: center;
  margin-right: 30px;
  height: 30px;
  padding: 0 12px;
  font-weight: 500;
  background: var(--bg-grey-f5);
  border-radius: 30px;
  transition: all var(--transition-fast) ease;
}
.company-details-contact-count:hover {
  background: color-mix(in srgb, var(--bg-grey-f5) 98%, var(--black));
}
.company-details-contact-count::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 5px;
  bottom: 5px;
  border-right: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .company-details-contact-count {
    display: inline-flex;
  }
}

.company-details-contact-count-link {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
}

.company-details-contact-count-copy {
  display: flex;
  align-items: center;
  font-weight: 500;
}

.company-details-contact-count-user-icon {
  width: 15px;
  height: auto;
  transform: translateY(1px);
  margin-right: 5px;
}
.company-details-contact-count-user-icon path {
  fill: currentColor;
}

.company-details-contact-count-add {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 6px;
  margin-left: 7px;
  margin-right: -7px;
  background: var(--bg-content);
  border-radius: 50%;
  transition: all var(--transition-fast) ease;
}

.company-details-contact-count-icon {
  width: 12px;
  height: auto;
  transition: all var(--transition-fast) ease;
}
.company-details-contact-count-icon path {
  fill: var(--text-muted);
}
.company-details-contact-count-add:hover .company-details-contact-count-icon path {
  fill: var(--text-default);
}

.company-details-reviews {
  text-align: center;
  margin-top: 10px;
}
@media (min-width: 768px) {
  .company-details-reviews {
    text-align: left;
  }
}

@media (min-width: 768px) {
  .company-details-reviews-star-wrapper {
    float: left;
    display: inline-block;
  }
}
.company-details-reviews-star-wrapper .review-stars {
  float: none;
  margin: 0;
}

.company-details-reviews-count {
  margin-top: 5px;
  color: var(--text-lightest);
  font-weight: 400;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  font-size: 12px;
}
@media (min-width: 768px) {
  .company-details-reviews-count {
    float: left;
    display: inline-block;
    margin-left: 15px;
  }
}

.company-details-name {
  margin-bottom: 5px;
  padding: 0 5px;
  color: var(--text-default);
  cursor: pointer;
  font-size: 22px;
  font-weight: 600;
  word-wrap: break-word;
  border-radius: 10px;
  transition: all var(--transition-normal) ease;
}
.company-details-name:hover {
  background: var(--bg-grey-f8);
}
.company-details-name.name-not-editable {
  cursor: default;
  background: none;
}
.company-details-name .tooltip-inner {
  max-width: 300px;
}

.company-details-contact-name {
  font-size: 18px;
  color: var(--text-muted);
  margin-bottom: 0;
  font-weight: 600;
}

.company-details-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  margin-left: 5px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-lighter);
}

.company-details-info-link {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}
.company-details-info-link:hover {
  text-decoration: underline;
}

.company-details-info-icon {
  position: relative;
  top: 1px;
  margin-right: 5px;
  width: 18px;
  height: auto;
}
.company-details-info-icon path {
  fill: currentColor;
}

.company-details-name-display {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .company-details-name-display {
    justify-content: flex-start;
  }
}

.company-details-name-display-icon {
  margin-left: 12px;
  font-size: 0.6em;
  opacity: 0.3;
  transition: opacity var(--transition-fast) ease;
}
.company-details-name-display:hover .company-details-name-display-icon {
  opacity: 0.8;
}

.company-details-name-form {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
@media (min-width: 768px) {
  .company-details-name-form {
    justify-content: flex-start;
    margin-top: -10px;
    margin-bottom: 1px;
    padding-right: 200px;
  }
}

.company-details-name-form-field {
  max-width: 300px;
}

.company-details-verified {
  display: inline;
  float: right;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  cursor: default;
}

.company-details-verified-text {
  position: relative;
  top: -1px;
  margin-left: 6px;
  font-weight: 600;
}

.company-details-editable {
  font-size: 14px;
  cursor: pointer;
}
.company-details-editable, .company-details-editable:focus, .company-details-editable:visited {
  color: var(--text-lightest);
}
.company-details-editable:hover, .company-details-editable:active {
  color: var(--text-lighter);
}
.company-details-editable i {
  position: relative;
  top: -3px;
  margin-left: 5px;
}

.company-details-subheader {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}
@media (min-width: 768px) {
  .company-details-subheader {
    font-size: 20px;
  }
}

.company-biography-edit-link {
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

.company-details-list-group {
  margin-bottom: 15px;
}
.company-details-list-group .display-label {
  text-transform: none;
  user-select: none;
}

.display-label .link-inline.company-details-list-edit-link, .display-label .company-details-list-edit-link.modal-payment-methods-item-edit-link {
  padding-left: 10px;
  font-weight: 600;
  user-select: none;
}

#company-details-client-address {
  white-space: pre-line;
}

.company-details-list-contact {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 20px 40px 20px 20px;
  margin-bottom: 30px;
  font-size: 14px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
}
.company-details-list-contact:hover {
  border-color: var(--border-content-alt);
}

.company-details-list-contact-content {
  min-width: 0;
}

.company-details-list-contact-default {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 600;
}

.company-details-list-contact-name {
  font-weight: 500;
}

.company-details-list-contact-job {
  position: relative;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 500;
  word-break: break-word;
}

.company-details-list-contact-email {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 15px;
  margin-top: 2px;
}

.company-details-list-contact-link {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.company-details-list-contact-link-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  width: 22px;
  transform: translateY(-50%);
}
.company-details-list-contact-link-icon path {
  fill: var(--border-darker);
}
.company-details-list-contact-link:hover .company-details-list-contact-link-icon path {
  fill: var(--text-lighter);
}

.company-details-tag-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  row-gap: 7px;
  padding: 5px;
  cursor: pointer;
  border-radius: 10px;
  transition: all var(--transition-normal) ease;
}
.company-details-tag-list:hover {
  background: var(--bg-grey-f8);
}

.company-details-tag-list-empty {
  display: inline-block;
  margin-top: 5px;
  height: 24px;
  margin-left: 5px;
  padding: 3px 13px 4px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-grey-f5);
  border-radius: 20px;
}
.company-details-tag-list-empty:hover {
  color: var(--text-default);
  background: var(--bg-grey-f5);
}
.ghost-input-wrapper.showing .company-details-tag-list-empty {
  display: none;
}

.ghost-input-wrapper.showing .company-details-tag-list {
  display: none;
}

.company-details-tag-select {
  position: relative;
  z-index: 20;
}

.company-details-edit-dropdown-wrapper {
  padding: 0;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 4px;
  transition: all var(--transition-normal) ease;
}
.company-details-edit-dropdown-wrapper .company-details-edit-dropdown {
  font-size: 18px;
  font-weight: 600;
  position: relative;
  display: block;
  height: 40px;
  padding: 9px 15px 8px 15px;
}
.company-details-edit-dropdown-wrapper .company-details-edit-dropdown, .company-details-edit-dropdown-wrapper .company-details-edit-dropdown:focus, .company-details-edit-dropdown-wrapper .company-details-edit-dropdown:active {
  color: var(--text-default);
}
.company-details-edit-dropdown-wrapper .company-details-edit-dropdown:hover, .company-details-edit-dropdown-wrapper .company-details-edit-dropdown:active {
  color: color-mix(in srgb, var(--text-default) 97%, transparent);
}
.company-details-edit-dropdown-wrapper:hover, .company-details-edit-dropdown-wrapper.open {
  border: 1px solid var(--border-content-alt);
}
@media (min-width: 768px) {
  .company-details-edit-dropdown-wrapper {
    margin-right: 10px;
  }
}
.company-details-edit-dropdown-wrapper .caret {
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -1px;
  color: var(--text-lightest);
}
.company-details-edit-dropdown-wrapper .dropdown-menu {
  top: 48px;
}

.company-details-rate-section {
  position: absolute;
  display: flex;
  right: 10px;
  top: 45px;
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .company-details-rate:not(:first-child) {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid var(--border-content);
  }
}

.company-open-address-link {
  white-space: pre-wrap;
}

.company-details-actions-container {
  display: flex;
}

.companies-hire-page {
  padding-bottom: 100px;
  background: var(--bg-content);
}

.companies-hire-share-bar {
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 6px color-mix(in srgb, var(--black) 2%, transparent), 0 1px 0 color-mix(in srgb, var(--black) 5%, transparent);
}

.companies-hire-share-link-container {
  position: relative;
  display: inline-block;
  float: left;
  height: 37px;
  margin: 14px 0;
  padding-right: 41px;
}
.companies-hire-share-link-container .tooltip {
  width: 120px;
}

.companies-hire-share-link-text {
  display: none;
  width: 310px;
  height: 37px;
  padding: 10px 10px 8px;
  border: 1px solid var(--border-content-alt);
  border-right: 0;
  border-radius: 4px 0 0 4px;
}
@media (min-width: 992px) {
  .companies-hire-share-link-text {
    display: block;
  }
}

.companies-hire-share-copy {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 2px 10px;
  font-size: 28px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-grey-e);
  border: none;
  border-radius: 4px;
  opacity: 0.7;
  transition: all var(--transition-normal) ease;
}
.companies-hire-share-copy:hover {
  opacity: 1;
}

.companies-hire-share-social-container {
  display: inline-block;
  float: left;
  padding: 13px 0;
}

.companies-hire-share-social {
  display: inline-block;
  float: left;
  margin-left: 5px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
  opacity: 0.7;
  transition: all var(--transition-normal) ease;
}
.companies-hire-share-social:hover {
  opacity: 1;
}

.companies-navigation-links {
  display: none;
  float: right;
  padding: 12px 10px;
}
@media (min-width: 992px) {
  .companies-navigation-links {
    display: inline-block;
  }
}

.companies-navigation-link {
  display: inline-block;
  float: right;
  padding: 9px 12px 8px;
  font-size: 16px;
}
.companies-navigation-link, .companies-navigation-link:focus, .companies-navigation-link:visited {
  color: var(--text-muted-alt);
}
.companies-navigation-link:hover, .companies-navigation-link:active {
  color: var(--text-muted);
}

.companies-hire-edit-btn {
  display: inline-block;
  float: right;
  padding: 12px 10px 12px 0;
}

.companies-hire-top-banner {
  position: relative;
  z-index: 1;
  height: 90px;
  background: var(--bg-grey-fa);
  transition: height var(--transition-slow) ease;
}
@media (min-width: 480px) {
  .companies-hire-top-banner {
    height: 170px;
  }
}
.companies-hire-top-banner.with-image {
  height: 140px;
}
@media (min-width: 768px) {
  .companies-hire-top-banner.with-image {
    height: 200px;
  }
}
.companies-hire-top-banner .header-background-image {
  height: 100%;
}

.companies-hire-top-logo {
  position: absolute;
  z-index: 2;
  display: inline-block;
  left: 50%;
  margin-left: -42px;
  bottom: -42px;
}
.companies-hire-top-logo .image-uploader-top-logo-img.cursor-default {
  cursor: default;
}

.companies-hire-about-section {
  max-width: 620px;
  margin: auto;
  padding: 80px 40px 50px;
  text-align: center;
}
@media (min-width: 480px) {
  .companies-hire-about-section {
    padding: 100px 40px 60px;
  }
}
.companies-hire-about-section h1 {
  font-size: 18px;
  font-weight: 600;
}
@media (min-width: 480px) {
  .companies-hire-about-section h1 {
    font-size: 24px;
  }
}

.companies-hire-about-text {
  font-size: 16px;
  color: var(--text-muted);
  word-break: break-word;
}
@media (min-width: 480px) {
  .companies-hire-about-text {
    font-size: 18px;
  }
}

.companies-hire-about-wysiwyg {
  min-height: 120px;
  padding: 15px;
  word-break: break-word;
  border: 1px solid var(--border-field);
  border-radius: 4px;
}
.companies-hire-about-wysiwyg:hover {
  border-color: var(--color-primary);
}
.companies-hire-about-wysiwyg .toolbar-wrapper.proposal-toolbar-wrapper {
  max-width: 500px;
}

.companies-hire-form-wrapper {
  max-width: 400px;
  margin: auto;
  padding: 0px 40px;
  text-align: center;
}

textarea.companies-hire-form-textarea {
  min-height: 100px;
}

.companies-hire-form-success-wrapper {
  perspective: 600px;
}

.companies-hire-form-success {
  max-width: 340px;
  margin: auto;
  padding: 50px 20px 60px;
  text-align: center;
  font-size: 20px;
  color: var(--text-muted-alt);
  border: 1px solid var(--border-content);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation: fade-in-rotate-up var(--transition-medium) 1 forwards;
}

.companies-hire-form-success-icon-container {
  margin-bottom: 20px;
}

.companies-hire-form-success-icon {
  line-height: 0;
  font-size: 95px;
  color: var(--color-primary);
}

.settings-company-personal-reasons {
  position: relative;
  margin: auto;
  margin-bottom: 20px;
  padding: 40px;
  background: var(--bg-content);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--black) 15%, transparent);
}

.settings-company-create-note {
  margin-bottom: 20px;
  text-align: left;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-muted-alt);
}

.member {
  position: relative;
  margin-bottom: 2px;
}
.member .avatar {
  position: absolute;
  left: 12px;
  top: 12px;
}

.member-inner {
  position: relative;
  display: block;
  padding: 12px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  cursor: pointer;
  box-shadow: 0 2px 4px color-mix(in srgb, var(--black) 2%, transparent);
}
.member-inner:hover, .member-inner:active {
  border: 1px solid var(--border-content);
  box-shadow: 0 4px 7px color-mix(in srgb, var(--black) 4%, transparent);
}

.member-info {
  min-height: 40px;
  padding-left: 55px;
  overflow: hidden;
  white-space: nowrap;
}

.member-name {
  display: inline-block;
  max-width: 100%;
  margin-bottom: -1px;
  font-size: 16px;
  line-height: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-default);
  user-select: none;
}

.member-info-subtitle {
  color: var(--text-lighter);
  font-size: 14px;
  font-weight: 400;
}

.permissions {
  position: relative;
  margin-top: 10px;
}

.permissions-disabled {
  padding: 10px 0 0;
  margin-bottom: -20px;
  text-align: center;
  font-weight: 600;
}

.permission-type {
  padding: 7.5px 10px;
  font-weight: 600;
  color: var(--text-lighter);
  background: var(--bg-content);
  box-shadow: 0 0 2px color-mix(in srgb, var(--black) 27%, transparent);
}

.permission-radio:last-child {
  margin-bottom: 0;
}

.permission-label {
  color: var(--text-lighter);
  font-weight: 400;
}

.permission-label-role-title {
  color: var(--text-lighter);
  font-weight: 600;
}

.edit-member-delete-link {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  font-size: 12px;
  display: inline-block;
  margin-top: 10px;
}

.profile-link-items {
  margin-top: -10px;
}

.profile-link-item {
  position: relative;
  padding: 12px 10px 8px 40px;
  display: block;
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
  transition: all var(--transition-normal) ease;
}
.profile-link-item, .profile-link-item:focus, .profile-link-item:visited {
  color: var(--text-lighter);
}
.profile-link-item:hover {
  color: var(--text-muted);
}

.profile-link-icon {
  position: absolute;
  left: 0;
  top: 10px;
  font-size: 22px;
  color: var(--color-primary);
}
.profile-link-icon.dribbble {
  line-height: 1;
  font-size: 26px;
}
.profile-link-icon.stackoverflow {
  top: 13px;
  width: 16px;
  height: auto;
}
.profile-link-icon.behance {
  top: 16px;
  width: 23px;
  height: auto;
}
.profile-link-item .profile-link-icon, .proposal-about-us-link-item .profile-link-icon, .proposal-about-us-link-item:focus .profile-link-icon, .proposal-about-us-link-item:visited .profile-link-icon, .profile-link-item:focus .profile-link-icon, .profile-link-item:visited .profile-link-icon {
  opacity: 0.8;
}
.profile-link-item .profile-link-icon path, .proposal-about-us-link-item .profile-link-icon path, .proposal-about-us-link-item:focus .profile-link-icon path, .proposal-about-us-link-item:visited .profile-link-icon path, .profile-link-item:focus .profile-link-icon path, .profile-link-item:visited .profile-link-icon path {
  fill: var(--color-primary);
}
.profile-link-item:hover .profile-link-icon, .proposal-about-us-link-item .profile-link-icon, .proposal-about-us-link-item:focus .profile-link-icon, .proposal-about-us-link-item:visited .profile-link-icon, .profile-link-item:active .profile-link-icon {
  opacity: 1;
}
.profile-link-item:hover .profile-link-icon path, .proposal-about-us-link-item .profile-link-icon path, .proposal-about-us-link-item:focus .profile-link-icon path, .proposal-about-us-link-item:visited .profile-link-icon path, .profile-link-item:active .profile-link-icon path {
  fill: var(--color-primary);
}

#modal-new-contact .category-tag {
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 5px 2px 0;
}

.client-list-item .category-tag {
  max-width: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.client-list-item .category-tag.client-list-item-tags-collapsed {
  display: none;
}
@media (min-width: 768px) {
  .client-list-item .category-tag {
    display: none;
  }
  .client-list-item .category-tag:nth-child(1), .client-list-item .category-tag:nth-child(2) {
    display: inline-block;
  }
  .client-list-item .category-tag.client-list-item-tags-collapsed {
    display: inline-block;
  }
}
.client-list-item .ghost-input-wrapper.showing {
  z-index: 10;
}
.client-list-item .ghost-input-wrapper.showing .client-list-item-tag-list {
  display: none;
}
.client-list-item .client-list-item-tag-select .Select__control {
  height: auto !important;
}

#clients-tag-tooltip {
  max-width: 250px;
}
#clients-tag-tooltip .category-tag {
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 5px 2px 0;
}

.client-list-item-tag-list {
  position: relative;
  margin-top: 20px;
}
.client-list-item-tag-list.client-list-item-tags-empty {
  display: none;
}
@media (min-width: 768px) {
  .client-list-item-tag-list {
    z-index: 2;
    margin-top: 0;
    top: 2px;
    overflow: hidden;
    white-space: nowrap;
  }
  .client-list-item-tag-list.client-list-item-tags-empty {
    display: block;
  }
}

.client-list-item-tag-empty {
  display: flex;
  height: 30px;
  padding-top: 3px;
  color: var(--text-lightest);
}

.client-list-item-tag-select.ghost-form-select {
  position: relative;
  z-index: 10;
  height: 30px;
}

.service-modal-form .new-form-control {
  min-height: 80px;
}
.service-modal-form .service-modal-form-rate-and-category {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 480px) {
  .service-modal-form .service-modal-form-rate-and-category {
    flex-direction: row;
  }
  .service-modal-form .service-modal-form-rate-and-category .service-modal-form-rate {
    max-width: 120px;
  }
  .service-modal-form .service-modal-form-rate-and-category .service-modal-form-category {
    flex-grow: 1;
  }
}

.services-index .category-tag {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .services-index .category-tag {
    margin-top: 0;
  }
}

.new-onboarding-page,
.edit-onboarding-page {
  padding-bottom: 120px;
}

.onboarding-new-template-section {
  padding: 20px;
  background: var(--bg-content);
  border-top: 2px solid var(--border-darker);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 4%, transparent);
}
@media (min-width: 480px) {
  .onboarding-new-template-section {
    padding: 40px;
  }
}
.onboarding-new-template-section .dropdown-div {
  width: 100% !important;
}
.onboarding-new-template-section .dropdown-item-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onboarding-existing-template-section {
  margin-bottom: 40px;
  padding: 20px;
  background: var(--bg-content);
  border-top: 2px solid var(--border-darker);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 4%, transparent);
}
@media (min-width: 480px) {
  .onboarding-existing-template-section {
    padding: 40px;
  }
}

.onboarding-new-emails-section {
  margin-top: 10px;
  padding: 20px;
}

.onboarding-new-emails-checkbox-text {
  position: relative;
  color: var(--text-lighter);
  font-size: 14px;
  text-align: center;
}

.onboarding-no-edit-section {
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 20px;
  background: var(--bg-content);
  border-top: 2px solid var(--border-darker);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 4%, transparent);
}
@media (min-width: 480px) {
  .onboarding-no-edit-section {
    padding: 40px;
  }
}

.onboarding-no-edit-text {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
}

.onboarding-no-edit-subtext {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-lighter);
}

.onboarding-new-todolist-title {
  margin-bottom: 10px;
  text-align: center;
}

.onboarding-new-add-todo {
  display: block;
  margin-top: 5px;
  padding: 20px 15px 19px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 6px;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--black) 3%, transparent);
}

.onboarding-new-todo {
  position: relative;
  z-index: 1;
  padding: 15px 50px 15px 55px;
  text-align: left;
  background: var(--bg-content);
  border-radius: 6px;
  transition: all var(--transition-fast) ease;
}
.onboarding-new-todo:hover {
  background: var(--bg-content);
}

.onboarding-new-todo-name {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--text-muted-alt);
  font-size: 18px;
  font-weight: 400;
  cursor: pointer;
  user-select: none;
}
.onboarding-new-todo-name:focus, .onboarding-new-todo-name:visited {
  color: var(--text-muted-alt);
}
.onboarding-new-todo:hover .onboarding-new-todo-name {
  color: var(--text-muted);
}
.onboarding-new-todo-name:hover, .onboarding-new-todo-name:active {
  color: var(--text-muted);
}

.onboarding-new-todo-delete {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 11px;
  width: 45px;
  height: 30px;
  font-size: 25px;
  text-align: center;
  color: var(--text-lightest);
  cursor: pointer;
  transform: scale(0.8);
  transition: all var(--transition-normal) ease;
  transform-origin: 50%;
}
.onboarding-new-todo:hover .onboarding-new-todo-delete {
  color: var(--text-lightest);
  transform: scale(1);
}
.onboarding-new-todo:hover .onboarding-new-todo-delete:hover {
  color: var(--text-lighter);
  transform: scale(1.1);
}

.onboarding-new-todo-reorder {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 39px;
  height: 100%;
  padding-top: 17px;
  font-size: 15px;
  text-align: center;
  color: var(--text-lightest);
  cursor: move;
  border-right: 1px solid color-mix(in srgb, var(--black) 3%, transparent);
  transition: all var(--transition-normal) ease;
}
.onboarding-new-todo-reorder:hover {
  color: var(--text-lighter);
}
.onboarding-new-todo-reorder:active {
  cursor: grabbing;
}

.onboarding-new-submit-section {
  text-align: center;
  margin-top: 60px;
}

.modal-todo-form-container .Select.is-focused {
  position: relative;
  z-index: 10;
}

.onboarding-new-todo-type-selection {
  margin-top: 40px;
  background: var(--bg-grey-fc);
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
  box-shadow: inset 0 0 2px color-mix(in srgb, var(--black) 6%, transparent);
}

.onboarding-new-todo-type-selection-dropdown.dropdown-wrap {
  display: block;
}

.onboarding-new-todo-form-in {
  padding: 20px;
}
@media (min-width: 768px) {
  .onboarding-new-todo-form-in {
    padding: 40px;
  }
}

.onboarding-new-todo-form-name {
  margin-bottom: 2px;
  color: var(--text-muted);
}
.onboarding-new-todo-form-name .ghost-form-control, .onboarding-new-todo-form-name .ghost-form-display {
  width: 100%;
}

.onboarding-new-todo-form-instructions {
  margin-bottom: 15px;
  color: var(--text-lighter);
}
.onboarding-new-todo-form-instructions .ghost-form-control, .onboarding-new-todo-form-instructions .ghost-form-display {
  width: 100%;
}

.onboarding-new-todo-form-attachment {
  width: 100%;
  margin-bottom: 40px;
}
.onboarding-new-todo-form-attachment .form-attachment-uploader-file-link {
  padding: 0;
}
.onboarding-new-todo-form-attachment .form-attachment-uploader-file-link svg {
  display: none;
}

.onboarding-new-todo-form-payment-label {
  font-size: 16px;
  font-weight: 600;
}

.onboarding-new-todo-form-payment-dd {
  max-width: 300px;
}
.onboarding-new-todo-form-payment-dd .dropdown-wrap {
  display: block;
}

.onboarding-new-todo-form-notice {
  padding: 30px;
  font-size: 16px;
}

.onboarding-new-todo-contact-profile-group {
  margin-bottom: 5px;
}
.onboarding-new-todo-contact-profile-group:last-child {
  margin-bottom: 0;
}

.onboarding-new-todo-contact-profile-dd {
  text-align: right;
}

.onboarding-new-todo-contact-profile-add-item {
  margin-top: 20px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.onboarding-edit-template-name {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
}

.onboarding-edit-template-note {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-lighter);
}

#onboarding-container {
  min-height: 600px;
}

.onboarding-show-page {
  padding-bottom: 120px;
}

.onboarding-show-title-section {
  text-align: center;
  padding: 60px 0 50px;
}

.onboarding-list-top-info {
  position: relative;
  padding: 15px 0 12px 0;
  text-align: center;
}
@media (min-width: 768px) {
  .onboarding-list-top-info {
    margin-bottom: 30px;
    border-top: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
    padding: 15px 0px 12px 0;
  }
}

.onboarding-list-template {
  position: relative;
  display: none;
  width: 100%;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-lighter);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .onboarding-list-template {
    display: block;
  }
}

.onboarding-top-labels {
  position: relative;
  padding-bottom: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: color-mix(in srgb, var(--black) 35%, transparent);
}

.onboarding-status-label {
  float: left;
}

.onboarding-assignee-label {
  display: none;
  float: right;
}
@media (min-width: 768px) {
  .onboarding-assignee-label {
    display: inline-block;
  }
}

.onboarding-contractor-finalized {
  padding: 40px;
  margin-bottom: 40px;
  text-align: center;
  background: var(--bg-content);
  border-radius: 3px;
  box-shadow: 0 1px 5px color-mix(in srgb, var(--black) 10%, transparent);
}

.onboarding-contractor-finalized-text {
  font-size: 18px;
  font-weight: normal;
  color: var(--text-muted-alt);
}

.onboarding-contractor-finalized-subtext {
  margin-top: 5px;
  font-weight: 400;
  color: var(--text-lighter);
}

.onboarding-finalize {
  padding: 20px;
  margin-bottom: 60px;
  text-align: center;
  background: var(--bg-content);
  border-radius: 3px;
  box-shadow: 0 1px 5px color-mix(in srgb, var(--black) 10%, transparent);
}
@media (min-width: 480px) {
  .onboarding-finalize {
    padding: 40px;
  }
}
@media (min-width: 768px) {
  .onboarding-finalize {
    padding: 60px 40px;
  }
}

.onboarding-finalize-title {
  margin-bottom: 10px;
}

.onboarding-finalize-info {
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-lighter);
}
@media (min-width: 768px) {
  .onboarding-finalize-info {
    margin-bottom: 30px;
    font-size: 16px;
  }
}

.onboarding-finalized {
  position: relative;
  padding: 55px 40px 40px;
  margin-top: 35px;
  margin-bottom: 60px;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  background: var(--bg-content);
  border-top: 1px solid var(--color-primary);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--black) 10%, transparent);
}
@media (min-width: 768px) {
  .onboarding-finalized {
    font-size: 22px;
  }
}

.onboarding-finalized-icon-wrapper {
  position: absolute;
  height: 60px;
  width: 60px;
  top: -36px;
  left: 50%;
  margin-left: -30px;
  padding: 10px 0;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 2px 4px color-mix(in srgb, var(--black) 10%, transparent);
}
.onboarding-finalized-icon-wrapper svg {
  width: 33px;
  height: 41px;
}
.onboarding-finalized-icon-wrapper path {
  stroke: var(--color-primary);
  stroke-width: 4;
}

.onboarding-finalized-view-profile {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

.onboarding-stripe-btn-container {
  position: relative;
  padding: 15px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-lighter);
  background: var(--bg-grey-fc);
}
.onboarding-stripe-btn-container .btn {
  width: 100%;
}
@media (min-width: 480px) {
  .onboarding-stripe-btn-container {
    text-align: right;
  }
  .onboarding-stripe-btn-container .btn {
    width: auto;
  }
}
@media (min-width: 768px) {
  .onboarding-stripe-btn-container {
    font-size: 16px;
  }
}

.onboarding-list-item-payment-btns-or {
  display: block;
  padding: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-lighter);
}
@media (min-width: 480px) {
  .onboarding-list-item-payment-btns-or {
    display: inline-block;
    padding: 0 10px;
  }
}

.onboarding-list-item-footer-container {
  position: relative;
  padding: 15px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-lighter);
  background: var(--bg-grey-fc);
}
@media (min-width: 480px) {
  .onboarding-list-item-footer-container {
    text-align: right;
  }
}
@media (min-width: 768px) {
  .onboarding-list-item-footer-container {
    font-size: 16px;
  }
}

.onboarding-list-item-footer-text {
  text-align: center;
  padding: 10px 15px 8px;
}
@media (min-width: 480px) {
  .onboarding-list-item-footer-text {
    display: inline-block;
    float: right;
  }
}

.onboarding-list-item-footer-btn {
  width: 100%;
}
@media (min-width: 480px) {
  .onboarding-list-item-footer-btn {
    display: inline-block;
    float: right;
    width: auto;
  }
}

.onboarding-list-item {
  position: relative;
  z-index: 1;
  min-height: 50px;
  margin-bottom: 3px;
  text-align: left;
  background: var(--bg-content);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--black) 8%, transparent);
  transition: all var(--transition-normal) ease;
  border-radius: 3px;
}
.onboarding-list-item:hover {
  background: var(--bg-content);
}
.onboarding-list-item.showing {
  position: relative;
  z-index: 2;
  background: var(--bg-content);
  margin-top: 17px;
  margin-bottom: 20px;
}
.onboarding-list-item.showing:first-child {
  margin-top: 0;
}

.onboarding-list-item-top-container {
  position: relative;
  z-index: 2;
  background: var(--bg-content);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 3%, transparent);
}

.onboarding-list-item-top {
  position: relative;
  z-index: 1;
}

.onboarding-list-item-completed {
  position: absolute;
  left: 21px;
  top: 22px;
  width: 13px;
  height: 13px;
  background: var(--bg-grey-e);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  pointer-events: none;
  box-shadow: inset 0 3px 5px color-mix(in srgb, var(--black) 5%, transparent);
  border-radius: 50%;
}
.onboarding-list-item-completed.completed {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.onboarding-list-item.user-todo .onboarding-list-item-completed {
  background: var(--color-accent-orange);
}

.onboarding-list-item-completed-spinner {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 21px;
  height: 21px;
}
.onboarding-list-item-completed-spinner .spinner-layer {
  border-color: color-mix(in srgb, var(--black) 15%, transparent);
}
.onboarding-list-item-completed-spinner .circle {
  border-width: 4px;
}

.onboarding-list-item-name {
  padding: 18px 20px 17px 50px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: all var(--transition-normal) ease;
}
@media (min-width: 768px) {
  .onboarding-list-item-name {
    padding: 18px 220px 17px 50px;
  }
  .onboarding-list-item-name:hover {
    color: var(--text-default);
  }
}
.onboarding-list-item-top.completed .onboarding-list-item-name {
  color: var(--text-lighter);
  text-decoration: line-through;
}
.onboarding-list-item-top.saving .onboarding-list-item-name {
  color: var(--text-lightest);
  text-decoration: none;
}
.onboarding-list-item.showing .onboarding-list-item-name {
  color: var(--text-lightest);
}

.onboarding-list-item-assignment {
  position: relative;
  margin-top: -15px;
  padding: 0 20px 17px 50px;
  color: var(--text-lighter);
  font-weight: normal;
  font-size: 14px;
}
@media (min-width: 768px) {
  .onboarding-list-item-assignment {
    position: absolute;
    top: 19px;
    right: 15px;
    margin-top: 0px;
    padding: 0;
    font-weight: 600;
  }
}

.onboarding-list-item-change-assignment {
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  font-weight: 400;
  user-select: none;
}
@media (min-width: 768px) {
  .onboarding-list-item-change-assignment {
    position: absolute;
    right: 0;
    top: -5px;
    margin-bottom: 0;
    padding: 5px 15px;
  }
}

.onboarding-list-item-content {
  position: relative;
  z-index: 2;
  min-height: 12px;
  margin-top: -12px;
  padding-left: 50px;
  padding-right: 20px;
  cursor: pointer;
  transition: all var(--transition-slow) ease;
}
@media (min-width: 768px) {
  .onboarding-list-item-content {
    padding-right: 200px;
  }
}
.onboarding-list-item.showing .onboarding-list-item-content {
  padding-bottom: 17px;
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .onboarding-list-item.showing .onboarding-list-item-content {
    min-height: 80px;
  }
}

.onboarding-list-item-instructions {
  font-size: 14px;
  color: var(--text-lighter);
  font-weight: 400;
  word-break: break-word;
}

.onboarding-list-item-instructions-attachment {
  position: relative;
  display: block;
  margin-top: 15px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-lighter);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px 5px 5px 26px;
}
.onboarding-list-item-instructions-attachment:focus, .onboarding-list-item-instructions-attachment:visited {
  color: var(--text-lighter);
}
.onboarding-list-item-instructions-attachment:hover, .onboarding-list-item-instructions-attachment:active {
  color: var(--text-muted);
}

.onboarding-list-item-instructions-attachment-icon {
  position: absolute;
  left: 0;
  top: 5px;
}
.onboarding-list-item-instructions-attachment-icon svg {
  width: 20px;
  height: 20px;
}
.onboarding-list-item-instructions-attachment-icon g,
.onboarding-list-item-instructions-attachment-icon path {
  color: var(--text-lighter);
}

.onboarding-list-item-instructions-attachment:hover g,
.onboarding-list-item-instructions-attachment:hover path,
.onboarding-list-item-instructions-attachment:active g,
.onboarding-list-item-instructions-attachment:active path {
  color: var(--text-muted);
}

.onboarding-list-item-complete-btn {
  position: relative;
  margin-top: 10px;
}
.onboarding-list-item-complete-btn .btn {
  width: 100%;
}
@media (min-width: 768px) {
  .onboarding-list-item-complete-btn {
    position: absolute;
    right: 15px;
    bottom: 17px;
    margin-top: 0;
  }
  .onboarding-list-item-complete-btn .btn {
    width: auto;
  }
}

.onboarding-comment-list {
  position: relative;
  z-index: 1;
  height: 260px;
  padding: 0;
  overflow-y: scroll;
  background: var(--bg-content);
  background-image: linear-gradient(to bottom, #fdfdfd 0%, #fff 100%);
}

.onboarding-comment-list-empty {
  padding: 40px 20px 35px;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-lightest);
}

.onboarding-comment-list-item {
  position: relative;
  padding: 0 40px 0 73px;
  margin: 20px 0;
  min-height: 40px;
}

.onboarding-comment-list-item-avatar {
  position: absolute;
  top: 2px;
  left: 20px;
}

.onboarding-comment-list-item-person {
  position: relative;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.onboarding-comment-list-item-person-name {
  padding-right: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-default);
}

.onboarding-comment-list-item-person-co {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-lighter);
}

.onboarding-comment-list-item-text {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted);
  word-break: break-word;
}

.onboarding-comment-list-item-date {
  margin-top: 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-lightest);
}

.onboarding-comment-form {
  position: relative;
  padding: 10px 10px 10px 70px;
  background: var(--bg-content);
  border-top: 1px solid var(--border-content);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 -2px 1px color-mix(in srgb, var(--black) 2%, transparent);
}

.onboarding-comment-form-field {
  font-weight: 400;
  resize: none;
}
.onboarding-comment-form-field.submitting {
  pointer-events: none;
  opacity: 0.5;
  user-select: none;
}

.onboarding-comment-form-attachment {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 50px;
}

.onboarding-comment-form-attachment-wrapper {
  position: relative;
  height: 40px;
  width: 100%;
  border: 1px solid var(--border-field);
  transition: all var(--transition-normal) ease;
  border-radius: 6px;
  background-image: linear-gradient(to bottom, #ffffff 0%, var(--bg-grey-fa) 100%);
}
.onboarding-comment-form-attachment-wrapper:hover {
  border: 1px solid var(--color-primary);
}
.onboarding-comment-form-attachment-wrapper .form-attachment-uploader-placeholder {
  text-align: center;
}
.onboarding-comment-form-attachment-wrapper .form-attachment-uploader-placeholder-icon {
  float: none;
  margin-right: -2px;
}
.onboarding-comment-form-attachment-wrapper .form-attachment-filename {
  display: none;
}

.onboarding-comment-form-attachment-icon path {
  stroke: var(--text-muted-alt);
  transition: all var(--transition-normal) ease;
}
.onboarding-comment-form-attachment-wrapper:hover .onboarding-comment-form-attachment-icon path {
  stroke: var(--color-primary);
}

.onboarding-comment-form-send-btn {
  position: absolute;
  display: none;
  right: 3px;
  top: 6px;
  width: 50px;
  height: 50px;
  padding: 0;
  text-align: center;
  line-height: 1;
  border: 6px solid var(--bg-content);
  box-shadow: -1px 0 0 var(--border-content-alt);
  border-radius: 50%;
  transition: all var(--transition-normal) ease;
}
.onboarding-comment-form-send-btn:focus, .onboarding-comment-form-send-btn:visited {
  border: 6px solid var(--bg-content);
  box-shadow: -1px 0 0 var(--border-content-alt);
}
.onboarding-comment-form-send-btn:hover, .onboarding-comment-form-send-btn:active {
  border: 6px solid var(--bg-content);
  box-shadow: -1px 0 0 var(--border-content-alt);
}

.onboarding-comment-form-field:hover + .onboarding-comment-form-send-btn,
.onboarding-comment-form-field:focus + .onboarding-comment-form-send-btn {
  box-shadow: -1px 0 0 var(--color-primary);
}

.onboarding-comment-form-send-btn-icon {
  position: relative;
  top: 3px;
  color: var(--color-primary-contrast);
  font-size: 33px;
}

.onboarding-sign-document-copy {
  padding: 10px;
  color: var(--color-danger);
}

.onboarding-signee-name {
  font-weight: 600;
}

.onboarding-content-spinner-wrapper .content-spinner {
  text-align: left;
  padding: 10px;
  display: inline-block;
}

.onboarding-document-processing {
  display: inline-block;
  padding: 10px;
}

.onboardings-dashboard-bottom {
  padding-bottom: 80px;
}

.onboardings-list-wrapper {
  position: relative;
  min-height: 400px;
}

.onboardings-list {
  transition: all var(--transition-normal) ease;
}
.onboardings-list.loading {
  pointer-events: none;
  opacity: 0.5;
}

.onboardings-list-loading {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  padding: 70px 0;
}

.onboardings-list-no-results {
  text-align: center;
  padding: 70px 40px;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-lighter);
  background: var(--bg-content-empty);
}

.onboarding-todolist-item {
  position: relative;
  margin-bottom: 5px;
  padding: 20px 20px 20px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 3px;
  transition: all var(--transition-normal) ease;
  transform-origin: 50% 50%;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--black) 4%, transparent);
}
@media (min-width: 768px) {
  .onboarding-todolist-item {
    padding: 10px 20px 10px;
  }
}
@media (min-width: 768px) {
  .onboarding-todolist-item:hover {
    background: var(--bg-content);
    box-shadow: 0 1px 6px color-mix(in srgb, var(--black) 4%, transparent);
  }
}
.onboarding-todolist-item:last-child {
  margin-bottom: 0;
}
.onboarding-todolist-item.animating-out {
  overflow: hidden;
  animation: fade-out-dashboard-item var(--transition-slow) ease forwards;
}
.onboarding-todolist-item.new {
  border-left: 4px solid var(--border-content);
}
.onboarding-todolist-item.incomplete {
  border-left: 4px solid var(--border-content);
}
.onboarding-todolist-item.completed {
  border-left: 4px solid var(--color-primary);
}
.onboarding-todolist-item.submitted {
  border-left: 4px solid var(--text-muted);
}

.onboarding-todolist-item-left {
  position: relative;
  padding-right: 30px;
}

.onboarding-todolist-item-contact-name {
  display: block;
  font-size: 20px;
  font-weight: normal;
  color: var(--text-muted);
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onboarding-todolist-item-contact-name:focus, .onboarding-todolist-item-contact-name:visited {
  color: var(--text-default);
}
.onboarding-todolist-item-contact-name:hover, .onboarding-todolist-item-contact-name:active {
  color: var(--text-muted);
}

.onboarding-todolist-item-info {
  margin-top: 2px;
}

.onboarding-todolist-item-status {
  position: relative;
  display: inline-block;
  float: left;
  margin-right: 20px;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--text-lighter);
  letter-spacing: 1px;
  font-weight: 500;
}

.onboarding-todolist-item-counters {
  display: block;
  margin-top: 10px;
  color: var(--text-muted);
  text-align: left;
  font-size: 14px;
  font-weight: 500;
}
@media (min-width: 600px) {
  .onboarding-todolist-item-counters {
    position: absolute;
    top: 14px;
    right: 50px;
    margin-top: 0px;
    padding-right: 15px;
    text-align: right;
    border-right: 1px solid var(--border-content);
  }
}

.onboarding-todolist-item-vendor-count {
  margin-top: 1px;
  font-size: 12px;
  color: var(--text-lighter);
}

.onboarding-todolist-item-dd-toggle {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  font-size: 26px;
  width: 50px;
  text-align: center;
}
.onboarding-todolist-item-dd-toggle .dropdown-menu {
  left: auto;
  right: 3px;
  top: 50px;
}

.onboarding-todolist-item-edit {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  text-align: center;
  padding-top: 15px;
  padding-right: 10px;
}

.onboarding-todolist-item-dd-toggle-link {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  padding: 20px 0;
  color: var(--text-lighter);
  cursor: pointer;
  font-size: 14px;
}
.onboarding-todolist-item-dd-toggle-link:focus, .onboarding-todolist-item-dd-toggle-link:visited {
  color: var(--text-lighter);
}
@media (min-width: 600px) {
  .onboarding-todolist-item-dd-toggle-link {
    padding: 27px 0;
    height: 100%;
  }
  .onboarding-todolist-item-dd-toggle-link:hover {
    color: var(--text-lighter);
  }
}
.onboarding-todolist-item-dd-toggle-link .ion-chevron-down:before {
  transition: all var(--transition-normal) ease;
}
.onboarding-todolist-item-dd-toggle.open .onboarding-todolist-item-dd-toggle-link .ion-chevron-down:before {
  transform: rotate(180deg);
}

.onboarding-template-item {
  position: relative;
  margin-bottom: 5px;
  padding: 17px 20px 14px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 3px;
  transition: all var(--transition-fast) ease;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--black) 4%, transparent);
}
@media (min-width: 768px) {
  .onboarding-template-item:hover {
    background: var(--bg-content);
    box-shadow: 0 2px 5px color-mix(in srgb, var(--black) 8%, transparent);
    transform: scale(1.002);
  }
}
.onboarding-template-item:last-child {
  margin-bottom: 0;
}

.onboarding-template-item-left {
  display: block;
  padding-right: 30px;
  font-size: 20px;
  font-weight: normal;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onboarding-template-item-left, .onboarding-template-item-left:focus, .onboarding-template-item-left:visited, .onboarding-template-item-left:hover, .onboarding-template-item-left:active {
  color: var(--text-muted);
}

.onboarding-template-todo-delete {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  font-size: 26px;
  padding-top: 13px;
  text-align: center;
  cursor: pointer;
  transform: scale(0.8);
  transition: all var(--transition-normal) ease;
  transform-origin: 50%;
}
.onboarding-template-todo-delete .ion-android-close {
  color: var(--text-lighter);
}
.onboarding-template-todo-delete .ion-android-close:hover {
  color: var(--text-lighter);
}

.onboarding-title-section {
  text-align: center;
  padding: 60px 0;
}

.onboarding-title {
  margin-bottom: 5px;
  color: var(--text-default);
}

.onboarding-subtitle {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-muted);
}

.onboarding-subtitle-status {
  text-transform: capitalize;
}

.onboarding-title-note {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-lighter);
}

.onboardings-overview {
  position: relative;
  z-index: 1;
  background: var(--bg-content);
  border-bottom: 1px solid var(--border-content-alt);
}

.onboardings-top-stats {
  text-align: center;
  overflow: hidden;
}

.onboardings-top-stat {
  display: inline-block;
  float: left;
  width: 33.3333%;
  padding: 17px 0px 12px;
  cursor: pointer;
  user-select: none;
}
@media (min-width: 768px) {
  .onboardings-top-stat {
    padding: 30px 20px 23px;
  }
}

.onboardings-top-stat-label {
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
  font-weight: normal;
  color: color-mix(in srgb, var(--black) 50%, transparent);
}
@media (min-width: 480px) {
  .onboardings-top-stat-label {
    font-size: 12px;
  }
}
@media (min-width: 768px) {
  .onboardings-top-stat-label {
    margin-bottom: 10px;
  }
}

.onboardings-top-stat-amount {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
}
.onboardings-top-stat-amount.incomplete {
  color: var(--text-muted);
}
.onboardings-top-stat-amount.completed {
  color: var(--color-primary);
}
.onboardings-top-stat-amount.zero {
  color: var(--text-lightest);
}
@media (min-width: 768px) {
  .onboardings-top-stat-amount {
    font-size: 20px;
  }
}

.onboardings-stats-content-wrapper {
  display: none;
  padding: 40px 20px;
  background: var(--bg-grey-fc);
  border-top: 1px solid var(--border-content);
  border-radius: 0 0 8px 8px;
}
@media (min-width: 768px) {
  .onboardings-stats-content-wrapper {
    padding: 40px;
  }
}

.onboardings-stats-content {
  display: none;
}

.onboardings-stats-content-empty {
  padding: 40px 20px;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-lightest);
  border-radius: 2px;
}

.onboardings-stats-content-list {
  transition: all var(--transition-normal) ease;
}
.onboardings-stats-content-list.loading {
  pointer-events: none;
  opacity: 0.5;
}

.onboardings-stats-content-paginate {
  margin-top: 22px;
  margin-bottom: -20px;
  padding-bottom: 0;
  text-align: center;
}

.onboardings-stats-content-paginate-page {
  position: relative;
  top: -5px;
  margin: 0 3px;
  color: var(--text-lightest);
  font-size: 15px;
  transition: all var(--transition-normal) ease;
}
.onboardings-stats-content-paginate-page:hover {
  color: var(--text-lighter);
}
.onboardings-stats-content-paginate-page.active {
  color: var(--text-muted);
}

.onboardings-stats-content-paginate-back,
.onboardings-stats-content-paginate-forwards {
  padding: 10px;
  font-size: 29px;
  color: var(--text-lighter);
  cursor: pointer;
  transition: all var(--transition-normal) ease;
}
.onboardings-stats-content-paginate-back:hover,
.onboardings-stats-content-paginate-forwards:hover {
  color: var(--text-muted);
}
.onboardings-stats-content-paginate-back.disabled,
.onboardings-stats-content-paginate-forwards.disabled {
  cursor: default;
  opacity: 0.3;
}

#new-onboarding-template-container {
  position: relative;
  display: inline-block;
  float: right;
}

.proposal-form-page {
  padding-bottom: 120px;
  background-color: var(--bg-content-alt);
}
@media (min-width: 768px) {
  .proposal-form-page.with-style-editor {
    padding-right: var(--document-editor-width);
  }
}
@media print {
  .proposal-form-page .proposal-wrapper-top-btns {
    display: none;
  }
}
.proposal-form-page hr {
  border-color: var(--grey-e);
}

#proposal-container {
  padding-top: 40px;
}

.proposal-wrapper {
  max-width: var(--proposal-wrapper-width);
  width: 100%;
  margin: auto;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 768px) {
  .proposal-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.proposal-wrapper .wysiwyg-editor p,
.proposal-wrapper .wysiwyg-editor ul,
.proposal-wrapper .wysiwyg-editor li {
  color: inherit;
  font-weight: 500;
}
.proposal-wrapper .wysiwyg-editor h1 {
  color: inherit;
}
.proposal-wrapper .wysiwyg-editor h2 {
  color: inherit;
}
.proposal-wrapper .wysiwyg-editor h3 {
  color: inherit;
}
.proposal-wrapper .wysiwyg-editor h4 {
  color: inherit;
}
.proposal-wrapper .ghost-input-toggle.ghost-input-toggle-placeholder {
  color: color-mix(in srgb, var(--black) 20%, transparent);
  font-weight: 500;
}
.proposal-wrapper .ghost-form-control, .proposal-wrapper .ghost-form-display {
  color: inherit;
  background: transparent;
  font-weight: 500;
}

.proposal-form {
  position: relative;
  padding-bottom: 200px;
  font-size: 16px;
  font-family: "Proxima Nova", "Helvetica Neue", "Helvetica", arial, sans-serif;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--border-content);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--black) 2%, transparent);
}
@media print {
  .proposal-form {
    border: none;
  }
}

.proposal-form-top {
  overflow: hidden;
}

.proposal-currency-total {
  display: inline-block;
}

.proposal-currency-select-wrapper {
  flex: 1;
  width: 60px;
  margin-right: -18px;
  cursor: pointer;
  vertical-align: middle;
}
.proposal-currency-select-wrapper div.Select__single-value {
  color: var(--black);
}

.proposal-currency-select {
  text-align: left;
}

.fr-wrapper {
  border: 0 !important;
}

.second-toolbar {
  display: none !important;
}

.proposal-section-editor-theming-title {
  padding-bottom: 19px;
  font-size: 16px;
  font-weight: 600;
}

.proposal-section-editor-top {
  margin-bottom: 20px;
}

.proposal-section-editor-label {
  position: relative;
  margin-bottom: 40px;
  font-size: 14px;
  font-weight: 600;
}

.proposal-section-editor-label-small {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-6);
}

.proposal-section-editor-options-title {
  margin-bottom: 20px;
  font-size: 16px;
}

.proposal-section-editor-option {
  display: block;
  margin-bottom: 10px;
  background: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 6px;
}
.proposal-section-editor-option:hover {
  border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}

.proposal-section-editor-option-image {
  width: 100%;
  height: 0;
  padding-bottom: 35%;
  background: var(--bg-content) top center no-repeat;
  background-size: cover;
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid var(--border-semi-transparent-alt);
}

.proposal-section-editor-option-label {
  padding: 7px 5px 5px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

.proposal-section-editor-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 4%;
  row-gap: 10px;
}

.proposal-header-editor-theme-item {
  display: block;
  flex: 48%;
  padding: 20px 10px 16px;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 6px;
}
.proposal-header-editor-theme-item:hover {
  border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}
.proposal-header-editor-theme-item.active {
  border-color: var(--color-primary);
}

.proposal-header-editor-theme-item-name {
  margin-top: 7px;
  font-weight: 500;
  font-size: 14px;
  color: var(--grey-6);
  user-select: none;
  text-transform: capitalize;
}
.proposal-header-editor-theme-item.active .proposal-header-editor-theme-item-name {
  color: var(--color-primary);
}

.proposal-header-editor-theme-icon {
  width: 40px;
  height: auto;
}

.update-template-title {
  margin: -15px 0 15px 0;
}

.proposal-section-deposit-notice {
  display: flex;
  justify-content: center;
  padding: 15px 15px 13px;
  margin-top: 30px;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid var(--grey-d);
  border-radius: 6px;
}

.proposal-section-deposit-notice-icon {
  position: relative;
  width: 12px;
  height: auto;
  margin-right: 10px;
}
.proposal-section-deposit-notice-icon path {
  fill: currentColor;
}

.proposal-show-page {
  padding-bottom: 120px;
}
@media (min-width: 768px) {
  .proposal-show-page.with-style-editor {
    padding-right: var(--document-editor-width);
  }
}
@media print {
  .proposal-show-page .proposal-wrapper-top-btns {
    display: none;
  }
}
.proposal-show-page h1,
.proposal-show-page h2,
.proposal-show-page h3,
.proposal-show-page h4 {
  font-family: inherit;
}

.proposal-wrapper-top-btns {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  padding: 0 20px 20px;
}
@media (min-width: 768px) {
  .proposal-wrapper-top-btns {
    flex-direction: row;
    padding: 0 0 20px;
  }
}

.modal-proposal-accepted-date {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-lighter);
}

.proposal-accepted-notice {
  position: relative;
  margin-bottom: 10px;
  padding: 16px 20px 12px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .proposal-accepted-notice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 15px;
    text-align: left;
    font-size: 14px;
    border-radius: 2px;
  }
}
@media print {
  .proposal-accepted-notice {
    display: none;
  }
}

.proposal-accepted-notice-pdf {
  position: relative;
  display: inline-block;
  margin-top: 3px;
}
@media (min-width: 768px) {
  .proposal-accepted-notice-pdf {
    margin-top: 0;
  }
}

.proposal-accepted-notice-pdf-icon {
  position: relative;
  font-size: 1.05em;
  margin-right: 4px;
}

.proposal-expiration-notice {
  position: relative;
  margin-bottom: 10px;
  padding: 16px 20px 12px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 2%, transparent);
}
@media (min-width: 768px) {
  .proposal-expiration-notice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 15px;
    text-align: left;
    font-size: 14px;
    border-radius: 4px;
  }
  .proposal-expiration-notice.has-expired {
    justify-content: center;
  }
}
@media print {
  .proposal-expiration-notice {
    display: none;
  }
}

.proposal-top-action-more-btn {
  display: block;
}
.proposal-top-action-more-btn .caret {
  position: relative;
  top: -2px;
  right: -2px;
}
@media (min-width: 480px) {
  .proposal-top-action-more-btn {
    display: inline-block;
  }
}

.proposal-top-action-saved {
  position: relative;
  display: none;
  top: 1px;
  padding: 0 16px;
  color: var(--text-lighter);
  transition: all 0.05s ease;
  opacity: 0;
}
.proposal-top-action-saved.showing {
  opacity: 1;
}
@media (min-width: 768px) {
  .proposal-top-action-saved {
    display: inline-block;
  }
}

.proposal-top-status-notice {
  position: relative;
  display: block;
  width: 100%;
  padding: 13px 20px 11px;
  text-align: center;
  color: var(--color-primary-contrast);
  font-size: 14px;
  font-weight: 600;
  user-select: none;
  background: var(--black);
  border-bottom: 1px solid color-mix(in srgb, var(--black) 4%, transparent);
}
.proposal-top-status-notice.deleted {
  background: color-mix(in srgb, var(--color-danger) 80%, transparent);
}
.proposal-top-status-notice.archived {
  background: color-mix(in srgb, var(--color-danger) 80%, transparent);
}
.proposal-top-status-notice.url {
  padding: 0;
  background: none;
  border: 0;
}
@media print {
  .proposal-top-status-notice {
    display: none;
  }
}

.proposal-top-status-send-url {
  display: block;
  padding: 14px 0;
  text-align: center;
  font-weight: 600;
  border-bottom: 1px solid var(--border-content);
}
.proposal-top-status-send-url, .proposal-top-status-send-url:hover, .proposal-top-status-send-url:visited, .proposal-top-status-send-url:focus {
  color: color-mix(in srgb, var(--black) 50%, transparent);
}

.proposal-top-status-send-url-icon {
  display: inline-block;
  margin-right: 10px;
  transform: scale(1.5);
}

.proposal-section-title {
  margin-bottom: 20px;
  padding: 0;
  font-size: 26px;
  font-weight: 600;
  font-family: inherit;
  color: inherit;
}
@media (max-width: 767px) {
  .proposal-section-title {
    font-size: 20px;
    margin-bottom: 26px;
  }
}

.proposal-item-packages-actions input[type=radio],
.proposal-item-packages-actions input[type=checkbox] {
  display: none;
}

.proposal-item-package.proposal-item-package-selected {
  border: 1px solid var(--color-primary);
}

.proposal-item-packages-items-hidden {
  display: none;
}

.deposit-payment-history {
  padding: 0;
  max-width: 100%;
}

.proposal-sections {
  padding: 0;
}

.proposal-form-section-container {
  position: relative;
  transition: box-shadow var(--transition-normal) ease;
  border-bottom: 1px solid var(--grey-e);
}
.proposal-form-section-container.editing {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.proposal-form-section-container,
.proposal-section-container {
  padding: 60px 20px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--grey-e);
}
@media (min-width: 768px) {
  .proposal-form-section-container,
  .proposal-section-container {
    padding: 60px;
  }
}

.proposal-section .wysiwyg-editor {
  font-size: 16px;
}
.proposal-section .wysiwyg-editor iframe {
  width: 100%;
}
.proposal-section .information-notice {
  color: var(--black);
  background: var(--grey-fc);
  border-left: 5px solid var(--black);
}
.proposal-section .information-notice .notice-banner-icon,
.proposal-section .information-notice .notice-banner-header {
  color: var(--black);
}
.proposal-section .btn-default,
.proposal-section .btn-default:focus,
.proposal-section .btn-default:visited {
  color: var(--black);
  background-color: var(--white);
  border: 1px solid var(--grey-e);
}
.proposal-section .btn-default:hover {
  color: var(--black);
  background-color: var(--white);
  border: 1px solid var(--grey-c);
}
.proposal-section .btn-default:active,
.proposal-section .btn-default:active:hover {
  color: var(--black);
  background-color: var(--white);
  border: 1px solid var(--grey-c);
}

.proposal-section-controls-wrapper {
  position: absolute;
  display: none;
  top: 0;
  left: 100%;
  opacity: 0;
  transition: all var(--transition-fast) ease;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
@media (min-width: 768px) {
  .proposal-section-controls-wrapper {
    display: block;
    margin-left: -15px;
  }
}
@media (min-width: 992px) {
  .proposal-section-controls-wrapper {
    margin-left: 0;
    padding-left: 5px;
    transform: translateX(-15px);
    transform: translate3d(-15px, 0, 0);
  }
  .proposal-form-section-container:hover .proposal-section-controls-wrapper, .proposal-form-section-container.editing .proposal-section-controls-wrapper, .proposal-section-new:hover + .proposal-form-section-container .proposal-section-controls-wrapper {
    opacity: 1;
    transform: translateX(0);
    transform: translate3d(0, 0, 0);
  }
}

.proposal-section-controls {
  width: 36px;
  text-align: center;
  background: var(--bg-content);
  font-family: var(--font-sans-serif);
  border: 1px solid var(--border-content);
  box-shadow: 0 1px 12px color-mix(in srgb, var(--black) 5%, transparent);
}
@media (min-width: 768px) {
  .proposal-section-controls {
    border-radius: 5px;
  }
}

.proposal-form-section-control-edit {
  display: block;
  padding: 7px 5px 5px;
  border-bottom: 1px solid var(--border-content);
}
.proposal-form-section-control-edit, .proposal-form-section-control-edit:focus, .proposal-form-section-control-edit:visited {
  color: var(--text-muted);
}
.proposal-form-section-control-edit:hover, .proposal-form-section-control-edit:active {
  color: var(--text-muted);
}

.proposal-form-section-control-close {
  display: block;
  padding: 9px 4px 8px;
  font-size: 16px;
  line-height: 1;
  border-bottom: 1px solid var(--border-content);
}
.proposal-form-section-control-close, .proposal-form-section-control-close:focus, .proposal-form-section-control-close:visited {
  color: var(--color-primary);
}
.proposal-form-section-control-close:hover, .proposal-form-section-control-close:active {
  color: var(--color-primary);
}

.proposal-form-section-control-up {
  display: block;
  padding: 8px 5px 1px;
}
.proposal-form-section-control-up, .proposal-form-section-control-up:focus, .proposal-form-section-control-up:visited {
  color: var(--text-muted);
}
.proposal-form-section-control-up:hover, .proposal-form-section-control-up:active {
  color: var(--text-muted);
}
.proposal-form-section-control-up.disabled {
  pointer-events: none;
  opacity: 0.3;
}

.proposal-form-section-control-down {
  display: block;
  padding: 1px 5px 8px;
}
.proposal-form-section-control-down, .proposal-form-section-control-down:focus, .proposal-form-section-control-down:visited {
  color: var(--text-muted);
}
.proposal-form-section-control-down:hover, .proposal-form-section-control-down:active {
  color: var(--text-muted);
}
.proposal-form-section-control-down.disabled {
  pointer-events: none;
  opacity: 0.3;
}

.proposal-form-section-control-delete {
  display: block;
  padding: 8px 5px 3px;
  border-top: 1px solid var(--border-content);
}

.proposal-form-section-control-delete-icon {
  width: 15px;
  height: auto;
}
.proposal-form-section-control-delete-icon path {
  fill: var(--text-muted);
}
.proposal-form-section-control-delete:hover .proposal-form-section-control-delete-icon path, .proposal-form-section-control-delete:active .proposal-form-section-control-delete-icon path {
  fill: var(--text-default);
}

.proposal-section-new {
  position: relative;
  display: none;
  z-index: 6;
  width: 100%;
  height: 0;
  font-family: var(--font-sans-serif);
  opacity: 0;
  transition: opacity 0.05s ease;
}
.proposal-section-new.active, .proposal-section-new:hover {
  opacity: 1;
}
@media (min-width: 768px) {
  .proposal-section-new {
    display: block;
  }
}

.proposal-section-new-border {
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 0;
  border-top: 2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
}
.proposal-section-new.active .proposal-section-new-border {
  border-color: color-mix(in srgb, var(--black) 10%, transparent);
}

.proposal-section-new-padding-1 {
  position: absolute;
  left: 2%;
  bottom: 0;
  height: 40px;
  width: 96%;
}

.proposal-section-new-padding-2 {
  position: absolute;
  left: 2%;
  top: 0;
  height: 40px;
  width: 96%;
}

.proposal-section-new-btn {
  position: absolute;
  display: inline-flex;
  justify-content: center;
  z-index: 2;
  left: 50%;
  width: 40px;
  height: 40px;
  text-align: center;
  transition: all var(--transition-normal) ease;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.proposal-section-new-btn.editing {
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.proposal-section-new-btn-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all var(--transition-normal) ease;
  border-radius: 7px;
}
.proposal-section-new-btn:hover .proposal-section-new-btn-bg {
  transform: scale(1.05);
}
.proposal-section-new-btn-bg.add {
  background: var(--color-primary);
  box-shadow: 0 2px 2px color-mix(in srgb, var(--black) 10%, transparent);
}
.proposal-section-new-btn-bg.cancel {
  background: var(--white);
  border-radius: 50px;
  transform: scale(1.05);
  box-shadow: 0 0 14px color-mix(in srgb, var(--black) 15%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 50%, transparent);
}

.proposal-section-new-btn-icon {
  position: relative;
  z-index: 2;
  width: 20px;
  height: auto;
}
.proposal-section-new-btn-icon path {
  fill: var(--white);
}
.proposal-section-new-btn.editing .proposal-section-new-btn-icon path {
  fill: var(--color-danger);
}

.proposal-fees-title-input {
  padding: 0;
  font-size: 26px;
  font-weight: 600;
  color: inherit;
  max-width: 70%;
}
@media (max-width: 767px) {
  .proposal-fees-title-input {
    font-size: 20px;
  }
}
.proposal-fees-title-input, .proposal-fees-title-input:focus, .proposal-fees-title-input:visited, .proposal-fees-title-input:hover {
  background: none;
  border: none;
}
.proposal-fees-title-input:active {
  background: none;
  border: none;
}

.proposal-fees-packages-instructions {
  margin-bottom: 20px;
  padding: 20px 20px 18px;
  font-size: 14px;
  color: var(--grey-8);
  background: var(--grey-f6);
  border: 1px solid var(--grey-d);
  border-radius: 4px;
}

.proposal-fees-package-item {
  position: relative;
  margin-bottom: 10px;
  border: 1px solid var(--grey-d);
  border-radius: 5px;
  transition: all var(--transition-normal) ease;
}
.proposal-fees-package-item:last-child {
  margin-bottom: 0;
}
.proposal-fees-package-item.selected {
  box-shadow: 0 1px 6px color-mix(in srgb, var(--bg-shadow) 4%, transparent);
  border-color: var(--color-primary);
}
.proposal-fees-package-item.not-selected {
  box-shadow: none;
}
.proposal-fees-package-item.not-selected:hover {
  box-shadow: none;
}
@media print {
  .proposal-fees-package-item {
    box-shadow: none;
    border-color: var(--grey-d);
  }
  .proposal-fees-package-item.selected {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 70%, transparent);
  }
}
@media (max-width: 767px) {
  .proposal-fees-package-item {
    border: none;
    border-top: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
    box-shadow: none;
    border-radius: 0;
  }
  .proposal-fees-package-item:hover {
    box-shadow: none;
  }
  .proposal-fees-package-item.selected {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-primary) 70%, transparent);
  }
}

.proposal-fees-package-arrow-up,
.proposal-fees-package-arrow-down {
  position: absolute;
  z-index: 2;
  right: 66px;
  top: 0;
  padding: 10px 10px 7px;
  font-size: 16px;
  opacity: 0;
}
.proposal-fees-package-item:hover .proposal-fees-package-arrow-up, .proposal-fees-package-item:hover .proposal-fees-package-arrow-up:focus, .proposal-fees-package-item:hover .proposal-fees-package-arrow-up:visited,
.proposal-fees-package-item:hover .proposal-fees-package-arrow-down,
.proposal-fees-package-item:hover .proposal-fees-package-arrow-down:focus,
.proposal-fees-package-item:hover .proposal-fees-package-arrow-down:visited {
  color: var(--black);
  opacity: 0.4;
}
.proposal-fees-package-item:hover .proposal-fees-package-arrow-up:hover, .proposal-fees-package-item:hover .proposal-fees-package-arrow-up:active,
.proposal-fees-package-item:hover .proposal-fees-package-arrow-down:hover,
.proposal-fees-package-item:hover .proposal-fees-package-arrow-down:active {
  color: var(--black);
  opacity: 1;
}

.proposal-fees-package-arrow-down {
  right: 36px;
}

.proposal-fees-package-delete {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  padding: 10px 12px 7px;
  font-size: 16px;
  opacity: 0;
}
.proposal-fees-package-item:hover .proposal-fees-package-delete, .proposal-fees-package-item:hover .proposal-fees-package-delete:focus, .proposal-fees-package-item:hover .proposal-fees-package-delete:visited {
  color: var(--color-danger);
  opacity: 0.7;
}
.proposal-fees-package-item:hover .proposal-fees-package-delete:hover, .proposal-fees-package-item:hover .proposal-fees-package-delete:active {
  color: var(--color-danger);
  opacity: 1;
}

.proposal-fees-package-add {
  font-family: var(--font-sans-serif);
  margin-top: 30px;
}

.proposal-fees-package-add-link {
  font-weight: 600;
}

.proposal-fees-change-structure-link {
  float: right;
  width: 223px;
  text-align: right;
  color: var(--color-primary);
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .proposal-fees-change-structure-link {
    font-size: 14px;
  }
}

.proposal-fees-package-item-top {
  position: relative;
  padding: 40px;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}
@media (max-width: 767px) {
  .proposal-fees-package-item-top {
    padding: 33px 0;
  }
}

.proposals-fees-package-selection-label {
  position: absolute;
  top: -13px;
  right: -9px;
  padding: 5px 9px 3px;
  font-size: 12px;
  color: var(--color-primary);
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 4px;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--black) 10%, transparent);
}
@media (min-width: 768px) {
  .proposals-fees-package-selection-label {
    top: -7px;
  }
}

.proposal-fees-package-item-bottom {
  padding: 40px;
  display: none;
  border-top: 1px solid var(--grey-e);
}
.proposal-fees-package-item-bottom:first-child {
  border-top: 0;
}
.proposal-fees-package-item-bottom.showing {
  display: block;
}
@media (max-width: 767px) {
  .proposal-fees-package-item-bottom {
    margin: 33px 0;
    padding: 33px 0 0 0;
  }
}

.proposal-fees-package-title-wrapper {
  position: relative;
}

.proposal-fees-package-title {
  margin-bottom: 5px;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  color: inherit;
}
.proposal-fees-package-title, .proposal-fees-package-title:focus, .proposal-fees-package-title:visited, .proposal-fees-package-title:hover {
  background: none;
  border: none;
}
.proposal-fees-package-title:active {
  background: none;
  border: none;
}

input[type=text].proposal-fees-package-title {
  margin-top: -8px;
}

.proposal-fees-package-title-display {
  padding-right: 110px;
  margin-bottom: 10px;
}

.proposal-fees-package-title-total {
  position: absolute;
  right: 0;
  top: 0;
}

.proposal-fees-package-description,
.proposal-fees-package-description p,
.proposal-fees-package-description li {
  min-height: 0;
  font-size: 14px;
  font-weight: 500;
  color: inherit;
  opacity: 0.9;
}

.proposal-fee-structure-selector-header {
  margin-bottom: 20px;
  font-weight: 500;
  cursor: default;
  text-align: center;
}
@media (min-width: 768px) {
  .proposal-fee-structure-selector-header {
    margin-bottom: 30px;
  }
}

.proposal-fee-structure-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.proposal-fee-structure-list-option {
  padding-bottom: 10px;
  text-align: center;
}
@media (min-width: 768px) {
  .proposal-fee-structure-list-option {
    float: left;
    width: 33.3333%;
    padding: 0 5px;
  }
}

.proposal-fee-structure-option-link {
  position: relative;
  display: block;
  background: var(--white);
  padding: 30px 20px 10px;
  border: 1px solid var(--grey-e);
  border-radius: 6px;
  box-shadow: 0 1px 8px color-mix(in srgb, var(--black) 5%, transparent);
  transition: all var(--transition-normal) ease;
}
.proposal-fee-structure-option-link:hover {
  border-color: var(--grey-d);
  box-shadow: 0 1px 8px color-mix(in srgb, var(--black) 8%, transparent);
  transform: scale(1.015);
}

.proposal-fee-structure-option-title {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
}
.proposal-fee-structure-option-title, .proposal-fee-structure-option-title:focus, .proposal-fee-structure-option-title:visited, .proposal-fee-structure-option-title:hover, .proposal-fee-structure-option-title:active {
  color: var(--text-default);
}

.proposal-fee-structure-option-img {
  display: block;
  width: 100%;
  max-width: 160px;
  height: 200px;
  margin: auto;
  background: no-repeat transparent top center;
  background-size: contain;
}
.proposal-fee-structure-option-img.single-option {
  background-image: url("proposals/fee-options-single-img.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .proposal-fee-structure-option-img.single-option {
    background-image: url("proposals/fee-options-single-img@2x.png");
  }
}
.proposal-fee-structure-option-img.packages {
  background-image: url("proposals/fee-options-packages-img.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .proposal-fee-structure-option-img.packages {
    background-image: url("proposals/fee-options-packages-img@2x.png");
  }
}
.proposal-fee-structure-option-img.multi-select {
  background-image: url("proposals/fee-options-multiple-img.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .proposal-fee-structure-option-img.multi-select {
    background-image: url("proposals/fee-options-multiple-img@2x.png");
  }
}

.proposal-item-packages-actions {
  margin-top: 20px;
}
.proposal-item-packages-actions .btn {
  width: 100%;
  font-family: inherit;
}
@media (min-width: 768px) {
  .proposal-item-packages-actions .btn {
    width: auto;
  }
}

.proposal-item-packages-select-btn-icon {
  position: relative;
  top: 1px;
  margin-right: 7px;
}

.proposal-form-item-labels {
  line-height: 1;
}
.proposal-form-item-labels label {
  margin-bottom: 0;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  color: inherit;
  text-transform: uppercase;
}

.proposal-item-package-items:first-child {
  padding-top: 0;
}

.proposal-form-item {
  position: relative;
  font-size: 14px;
  font-weight: 500;
}
.proposal-form-item.deleting {
  display: none;
}
.proposal-form-item:hover .proposal-form-item-delete {
  opacity: 1;
}

.proposal-form-item:last-child.proposal-form-item-animate-enter {
  position: relative;
  z-index: 0;
  opacity: 0.01;
}

.proposal-form-item:last-child.proposal-form-item-animate-enter.proposal-form-item-animate-enter-active {
  opacity: 1;
  transition: var(--transition-normal);
}

.proposal-form-item-drag-handler {
  position: absolute;
  right: 100%;
  height: 30px;
  padding: 4px 16px;
  font-size: 19px;
  cursor: pointer;
  opacity: 0.5;
}
.proposal-form-item-drag-handler:hover {
  opacity: 1;
}
@media (max-width: 767px) {
  .proposal-form-item-drag-handler {
    display: block;
    right: 0;
    left: -31px;
  }
}

.proposal-form-item-name {
  display: inline-block;
  width: 100%;
  margin-bottom: 6px;
}
@media (min-width: 768px) {
  .proposal-form-item-name {
    margin-bottom: 6px;
  }
}
@media print {
  .proposal-form-item-name {
    margin-bottom: 6px;
  }
}

textarea.form-field.proposal-form-item-name-input {
  resize: none;
}

.proposal-form-item-amount {
  display: inline-block;
  width: 15%;
  float: left;
}
@media (min-width: 768px) {
  .proposal-form-item-amount {
    text-align: center;
  }
}
@media print {
  .proposal-form-item-amount {
    text-align: center;
  }
}
.proposal-form-item-amount .ghost-form-control, .proposal-form-item-amount .ghost-form-display {
  text-align: left;
  font-weight: 500;
}
@media (min-width: 768px) {
  .proposal-form-item-amount .ghost-form-control, .proposal-form-item-amount .ghost-form-display {
    text-align: center;
  }
}

.proposal-form-items-row .proposal-form-item-rate {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
.proposal-form-items-row .proposal-form-item-rate .list-item-dd-toggle {
  top: -13px;
  right: -39px;
}

.proposal-form-item-rate {
  display: inline-block;
  width: 43%;
  float: left;
  text-align: right;
  padding-left: 10px;
}
.proposal-form-item-rate .ghost-form-control, .proposal-form-item-rate .ghost-form-display {
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.proposal-form-item-rate .form-label {
  padding-right: 7px;
}
.proposal-form-item-rate .items-list-item-col-text {
  margin-top: -2px;
  font-weight: 600;
  font-size: 14px;
}

.proposal-form-item-total {
  display: inline-block;
  float: left;
  width: 42%;
  text-align: right;
}

.proposal-form-item-total-val {
  min-height: 30px;
  padding: 4px 0 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: default;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proposal-form-item-delete {
  position: absolute;
  right: -30px;
  top: 1px;
  width: 24px;
  height: 24px;
  padding: 5px;
  opacity: 0;
  transform: scale(0.9);
  transition: all var(--transition-normal) ease;
}
.proposal-form-item-delete path, .proposal-form-item-delete:focus path, .proposal-form-item-delete:visited path {
  fill: var(--color-danger);
}
.proposal-form-item-delete:hover {
  opacity: 1;
  transform: scale(1);
}
.proposal-form-item-delete:hover path {
  fill: var(--color-danger);
}
.proposal-form-item-delete:active {
  transform: scale(0.9);
}
@media (max-width: 767px) {
  .proposal-form-item-delete {
    right: -15px;
  }
}

.proposal-form-item-texts {
  display: inline-block;
  width: 100%;
  float: left;
}
@media (min-width: 768px) {
  .proposal-form-item-texts {
    width: 45%;
  }
}
@media print {
  .proposal-form-item-texts {
    width: 45%;
  }
}

.proposal-form-item-numbers {
  width: 100%;
  float: none;
}
.proposal-form-item-numbers .form-label {
  display: none;
}
@media (min-width: 768px) {
  .proposal-form-item-numbers {
    float: right;
    width: 55%;
    margin-bottom: 0px;
    display: inline-block;
  }
  .proposal-form-item-numbers .form-label {
    display: inline-block;
  }
}
@media print {
  .proposal-form-item-numbers {
    width: 55%;
    margin-bottom: 0px;
    display: inline-block;
  }
  .proposal-form-item-numbers .form-label {
    display: inline-block;
  }
}

.proposal-form-item-description {
  width: 100%;
  margin-bottom: 25px;
  font-weight: 400;
}
.proposal-form-item-description textarea {
  font-weight: 400;
}
@media (min-width: 768px) {
  .proposal-form-item-description {
    width: 139%;
    margin-bottom: 0px;
  }
}
@media print {
  .proposal-form-item-description {
    width: 139%;
    margin-bottom: 0px;
  }
}

.proposal-form-item-rate textarea::placeholder, .proposal-form-item-rate input::placeholder,
.proposal-form-item-amount textarea::placeholder,
.proposal-form-item-amount input::placeholder,
.proposal-form-item-name textarea::placeholder,
.proposal-form-item-name input::placeholder,
.proposal-form-item-description textarea::placeholder,
.proposal-form-item-description input::placeholder {
  color: var(--grey-9) !important;
}
.proposal-form-item-rate .ghost-input-toggle-placeholder,
.proposal-form-item-amount .ghost-input-toggle-placeholder,
.proposal-form-item-name .ghost-input-toggle-placeholder,
.proposal-form-item-description .ghost-input-toggle-placeholder {
  color: var(--grey-9) !important;
}
.proposal-form-item-rate .ghost-form-control:hover, .proposal-form-item-rate .ghost-form-display:hover,
.proposal-form-item-amount .ghost-form-control:hover,
.proposal-form-item-amount .ghost-form-display:hover,
.proposal-form-item-name .ghost-form-control:hover,
.proposal-form-item-name .ghost-form-display:hover,
.proposal-form-item-description .ghost-form-control:hover,
.proposal-form-item-description .ghost-form-display:hover {
  background-color: var(--grey-fa);
}

.proposal-form-item-rate textarea,
.proposal-form-item-rate input,
.proposal-form-item-amount textarea,
.proposal-form-item-amount input,
.proposal-form-item-name textarea,
.proposal-form-item-name input {
  font-weight: 600;
  width: 100%;
}
.proposal-form-item-rate .ghost-input-toggle,
.proposal-form-item-amount .ghost-input-toggle,
.proposal-form-item-name .ghost-input-toggle {
  font-weight: 600;
}

.proposal-form-add-item {
  padding-top: 5px;
  font-size: 14px;
}
.proposal-form-add-item i {
  padding-right: 7px;
  position: relative;
  top: 1px;
}

@media (min-width: 768px) {
  .proposal-form-item-mobile-headers {
    display: none;
  }
}
@media print {
  .proposal-form-item-mobile-headers {
    display: none;
  }
}
.proposal-form-item-mobile-headers .form-label {
  color: var(--black);
  font-size: 12px;
  font-weight: 400;
}

.proposal-fee-item {
  position: relative;
  z-index: 1;
  padding: 20px 0;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid var(--border-content);
}
.proposal-fee-item .proposal-form-item-name p {
  margin-bottom: 0;
}
.proposal-fee-item .proposal-form-item-description {
  font-weight: 400;
  word-break: break-word;
  white-space: pre-line;
}
@media (min-width: 768px) {
  .proposal-fee-item .proposal-form-item-description {
    margin-top: 15px;
  }
}
@media print {
  .proposal-fee-item .proposal-form-item-description {
    margin-top: 15px;
  }
}
.proposal-fee-item .proposal-form-item-amount, .proposal-fee-item .proposal-form-item-rate {
  display: none;
}
@media (min-width: 768px) {
  .proposal-fee-item .proposal-form-item-amount, .proposal-fee-item .proposal-form-item-rate {
    display: block;
  }
}
@media print {
  .proposal-fee-item .proposal-form-item-amount, .proposal-fee-item .proposal-form-item-rate {
    display: block;
  }
}
.proposal-fee-item .proposal-fee-item-sum {
  display: block;
  font-size: 12px;
  color: var(--text-lighter);
  font-weight: 400;
}
@media (min-width: 768px) {
  .proposal-fee-item .proposal-fee-item-sum {
    display: none;
  }
}
@media print {
  .proposal-fee-item .proposal-fee-item-sum {
    display: none;
  }
}
.proposal-fee-item .proposal-form-item-name,
.proposal-fee-item .proposal-form-item-amount,
.proposal-fee-item .proposal-form-item-rate,
.proposal-fee-item .proposal-form-item-total {
  color: inherit;
  font-weight: 600;
}
.proposal-fee-item .proposal-form-item-total {
  float: right;
}
@media (min-width: 768px) {
  .proposal-fee-item .proposal-form-item-total {
    float: none;
  }
}

.proposal-form-total-section {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  font-size: 18px;
  font-weight: 600;
  padding: 0;
}

.proposal-form-total-section-values {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.proposal-form-attachments-section .form-attachment-uploader-wrapper {
  margin-top: 15px;
  border: 1px solid var(--grey-d);
}
.proposal-form-attachments-section .form-attachment-uploader-wrapper:hover {
  color: var(--text-default);
  border-color: var(--color-primary);
}
.proposal-form-attachments-section .form-attachment-uploader-wrapper.with-attachment {
  color: var(--text-default);
  border: 1px solid var(--grey-d);
}
.proposal-form-attachments-section .form-attachment-uploader-wrapper:first-child {
  margin-top: 0;
}

.proposal-attachments .form-attachment-uploader-wrapper {
  position: relative;
  height: 43px;
  width: 100%;
  border: 1px solid var(--grey-d);
  border-radius: 3px;
}
.proposal-attachments .form-attachment-uploader-placeholder {
  width: 100%;
  height: 100%;
  padding: 10px 12px 10px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-sans-serif);
  color: var(--grey-8);
  cursor: pointer;
  opacity: 1;
}
.proposal-attachments .form-attachment-uploader-placeholder:hover {
  color: var(--grey-8);
}
.proposal-attachments .form-attachment-uploader-placeholder-icon path {
  stroke: currentColor;
}

.proposal-attachment-enter {
  position: relative;
  z-index: 0;
  opacity: 0.01;
}

.proposal-attachment-enter.proposal-attachment-enter-active {
  opacity: 1;
  transition: var(--transition-normal);
}

.proposal-attachment-item {
  position: relative;
  height: 60px;
  margin-bottom: 15px;
  border: 1px solid var(--grey-e);
  border-radius: 6px;
}
.proposal-attachment-item:last-child {
  margin-bottom: 0;
}

.proposal-attachment-icon svg {
  position: absolute;
  left: 15px;
  top: 20px;
  height: auto;
  width: 20px;
}
.proposal-attachment-icon svg path {
  stoke: currentColor;
}

.proposal-attachment-item-link {
  position: relative;
  display: block;
  padding: 9px 50px 10px 48px;
}

.proposal-attachment-item-filename {
  margin: 0 0 -3px;
  font-weight: 600;
}

.proposal-attachment-item-download {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
}

.proposal-attachment-item-remove {
  position: absolute;
  right: 0;
  top: 14px;
  width: 30px;
  height: auto;
  padding: 8px 8px 8px 9px;
  background: none;
  outline: none;
  border: 1px solid var(--grey-e);
  border-right: 0;
  border-radius: 6px 0 0 6px;
  opacity: 0.8;
}
.proposal-attachment-item-remove:hover {
  opacity: 1;
}
.proposal-attachment-item-remove path {
  fill: var(--grey-8);
}

.proposal-about-us-icon-section {
  width: 140px;
  margin: 20px auto 40px;
}
@media (min-width: 768px) {
  .proposal-about-us-icon-section {
    width: auto;
    margin: 0;
  }
}
.proposal-about-us-icon-section .avatar-img.avatar-full-width {
  background-color: transparent;
  box-shadow: none;
}

.proposal-about-us-bio-header .proposal-about-us-title-input {
  margin-bottom: 15px;
}

.proposal-about-us-actions {
  margin-top: 30px;
  font-size: 16px;
  font-family: var(--font-sans-serif);
}

.proposal-about-us-action-link, .proposal-about-us-action-link:focus, .proposal-about-us-action-link:visited {
  color: color-mix(in srgb, var(--black) 70%, transparent);
}
.proposal-about-us-action-link:hover, .proposal-about-us-action-link:active {
  color: var(--black);
}
.proposal-about-us-action-link:first-child {
  margin-right: 30px;
}

.proposal-about-us-action-link-icon {
  position: relative;
  top: 1px;
  margin-right: 8px;
  font-size: 16px;
}

.proposal-about-us-bio-empty {
  display: block;
  text-align: center;
  font-size: 16px;
  color: var(--grey-9);
  padding: 40px;
  border: 1px solid var(--grey-d);
  background: var(--white);
  border-radius: 4px;
}

.proposal-about-us-links {
  margin-top: 20px;
}

.proposal-about-us-link-item {
  position: relative;
  display: inline-block;
  float: left;
  width: 30px;
  height: 30px;
  margin-right: 5px;
}
.proposal-about-us-link-item .profile-link-icon {
  top: 0;
}
.proposal-about-us-link-item .profile-link-icon.behance {
  top: 6px;
}
.proposal-about-us-link-item .profile-link-icon.stackoverflow {
  top: 3px;
}

.proposal-about-us-link-item-tooltip {
  font-weight: 600;
  text-transform: capitalize;
}

.proposal-deposit-percentage {
  width: 70px;
}

.proposal-deposit-fees-info {
  position: relative;
  top: 2px;
}

.proposal-setup-bonsai-payments-btn {
  width: 100px;
  text-decoration: none !important;
}

.proposal-setup-bonsai-payments-label {
  margin-right: 20px;
  font-weight: 600;
}

.proposal-gallery-top {
  padding: 40px 0 50px;
}
@media (min-width: 768px) {
  .proposal-gallery-top {
    padding: 60px 0;
  }
}

.proposal-gallery-top-text {
  margin-bottom: 20px;
  padding-top: 7px;
  font-weight: normal;
}
@media (min-width: 768px) {
  .proposal-gallery-top-text {
    margin-bottom: 0;
  }
}

.proposal-gallery-list {
  display: flex;
  flex-wrap: wrap;
  margin: -20px -20px 0;
  padding-bottom: 120px;
}

.proposal-gallery-list-item {
  width: 50%;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  transition: all var(--transition-fast) ease;
}
@media (min-width: 768px) {
  .proposal-gallery-list-item {
    width: 33.3333%;
  }
  .proposal-gallery-list-item:hover {
    box-shadow: 0 2px 14px color-mix(in srgb, var(--bg-shadow) 8%, transparent);
  }
}
@media (min-width: 840px) {
  .proposal-gallery-list-item {
    width: 25%;
  }
}

.proposal-gallery-list-item-in {
  width: 100%;
  cursor: default;
}

.proposal-gallery-list-item-in .new-feature-label {
  position: absolute;
  z-index: 2;
  right: 20px;
  top: 25px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 3px 0 0 3px;
  filter: grayscale(1);
}
.proposal-gallery-list-item:hover .proposal-gallery-list-item-in .new-feature-label {
  filter: grayscale(0);
}

.proposal-gallery-list-item-img-wrapper {
  position: relative;
  display: block;
  margin-bottom: 20px;
  overflow: hidden;
}

.proposal-gallery-list-item-locked {
  position: absolute;
  z-index: 2;
  right: 20px;
  top: 20px;
  padding: 4px 6px 2px;
  font-size: 12px;
  color: color-mix(in srgb, var(--black) 40%, transparent);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
}

.proposal-gallery-list-item-img {
  width: 100%;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  transition: all var(--transition-fast) ease;
}
.proposal-gallery-list-item-img.processing {
  padding-bottom: 140%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("proposals/no-thumbnail-available.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .proposal-gallery-list-item-img.processing {
    background-image: url("proposals/no-thumbnail-available@2x.png");
  }
}
@media (min-width: 768px) {
  .proposal-gallery-list-item-img-wrapper:hover .proposal-gallery-list-item-img:not(.processing) {
    filter: brightness(1.03);
    border: 1px solid color-mix(in srgb, var(--black) 15%, transparent);
  }
}

.proposal-gallery-list-item-preview {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  padding: 10px;
  text-align: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 0 0 6px 6px;
  transform: translateY(103%);
  transition: all var(--transition-fast) ease;
}
@media (min-width: 768px) {
  .proposal-gallery-list-item-img-wrapper:hover .proposal-gallery-list-item-preview {
    transform: translateY(0%);
  }
}

.proposal-gallery-list-item-label {
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proposal-gallery-list-item-selector {
  position: relative;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
}

.proposal-gallery-list-item-selector-icon {
  position: absolute;
  right: 100%;
  top: 0;
  margin-right: 7px;
  font-size: 0.9em;
  opacity: 0;
  transition: all var(--transition-fast) ease;
}
@media (min-width: 768px) {
  .proposal-gallery-list-item-selector:hover .proposal-gallery-list-item-selector-icon {
    opacity: 1;
  }
}

.proposal-gallery-preview-wrapper {
  max-width: 850px;
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 120px;
}
@media (min-width: 870px) {
  .proposal-gallery-preview-wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}

.proposal-gallery-preview-top {
  padding: 22px 0;
}
@media (min-width: 870px) {
  .proposal-gallery-preview-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px 0;
  }
}
.proposal-gallery-preview-top .new-feature-label {
  top: -1px;
  margin-right: 30px;
  margin-left: -12px;
}

.proposal-gallery-preview-top-right {
  display: none;
}
@media (min-width: 870px) {
  .proposal-gallery-preview-top-right {
    display: flex;
    align-items: center;
  }
}

.proposal-gallery-preview-label {
  display: block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proposal-gallery-preview-label {
  margin-right: 30px;
}

.proposal-gallery-preview-return {
  font-weight: 600;
}

.proposal-gallery-preview-return-icon {
  position: relative;
  margin-right: 5px;
  top: 1px;
  font-size: 1.1em;
}

.proposal-gallery-preview-iframe {
  margin: 0 0 60px;
  max-width: 100%;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
  background: transparent;
  box-shadow: 0 0 20px color-mix(in srgb, var(--bg-shadow) 5%, transparent);
  opacity: 0;
}

.proposal-cover-header {
  border-bottom: 1px solid var(--border-content);
}

.proposal-cover-header-top {
  padding: 60px 20px 53px;
  text-align: center;
  border-bottom: 1px solid color-mix(in srgb, var(--black) 7%, transparent);
}
.proposal-cover-header-top.with-background {
  padding-top: 250px;
}

.proposal-cover-header-bg.with-image {
  height: 200px;
}

.proposal-cover-header-logo-wrapper {
  position: relative;
  z-index: 2;
  margin-bottom: 30px;
}
.proposal-cover-header-top.with-background .proposal-cover-header-logo-wrapper {
  margin-top: -92px;
}

.proposal-cover-header-logo {
  position: relative;
  margin-bottom: 0;
  cursor: pointer;
  background-size: contain;
}

.proposal-cover-header-logo-display {
  width: 84px;
  height: 84px;
  background: var(--white) center center no-repeat;
  border: 2px solid var(--white);
  background-size: contain;
  box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 0 0px 0px 1px color-mix(in srgb, var(--black) 7%, transparent);
  border-radius: 4px;
}

.avatar-img.proposal-cover-header-logo-print {
  display: none;
}
@media print {
  .avatar-img.proposal-cover-header-logo-print {
    display: block;
    padding: 0;
    margin: 0 auto;
  }
}

.proposal-cover-title-input.input-lg, .input-group-lg > .proposal-cover-title-input.form-control,
.input-group-lg > .proposal-cover-title-input.input-group-addon,
.input-group-lg > .input-group-btn > .proposal-cover-title-input.btn,
textarea.proposal-cover-title-input.input-lg,
.proposal-cover-title-display {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  min-height: 40px;
  padding: 0;
  font-size: 26px;
  font-weight: 600;
  word-break: break-word;
  color: inherit;
  text-align: center;
  background: transparent;
  border: 0;
  resize: none;
}
@media (min-width: 768px) {
  .proposal-cover-title-input.input-lg, .input-group-lg > .proposal-cover-title-input.form-control,
  .input-group-lg > .proposal-cover-title-input.input-group-addon,
  .input-group-lg > .input-group-btn > .proposal-cover-title-input.btn,
  textarea.proposal-cover-title-input.input-lg,
  .proposal-cover-title-display {
    font-size: 32px;
  }
}

.proposal-cover-title-display {
  margin-bottom: 7px;
}

.proposal-cover-header-dates {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 10px;
  font-size: 12px;
  font-weight: normal;
  cursor: default;
  color: inherit;
  opacity: 0.65;
}

.proposal-cover-header-date {
  margin: 0 10px;
}

.proposal-cover-header-date-blank {
  margin-left: 5px;
  letter-spacing: 2px;
  color: inherit;
  opacity: 0.5;
}

.proposal-cover-header-bottom {
  padding: 40px 20px;
}
@media (min-width: 768px) {
  .proposal-cover-header-bottom {
    padding: 40px 60px;
  }
}
@media print {
  .proposal-cover-header-bottom {
    padding-bottom: 20px;
  }
}

.proposal-cover-header-bottom-section:first-child {
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .proposal-cover-header-bottom-section {
    float: left;
    width: 50%;
  }
  .proposal-cover-header-bottom-section:first-child {
    padding-right: 10px;
    margin: 0;
  }
}
@media print {
  .proposal-cover-header-bottom-section {
    float: left;
    width: 50%;
  }
}

.proposal-cover-header-label {
  margin-bottom: 10px;
  color: color-mix(in srgb, var(--black) 20%, transparent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  font-family: inherit;
}
@media print {
  .proposal-cover-header-label {
    letter-spacing: 0;
  }
}

.proposal-cover-header-lg-input {
  display: block;
  width: 100%;
  margin-bottom: 3px;
  font-size: 18px;
  font-weight: 600;
}

.proposal-cover-header-sm-input.ghost-form-control, .proposal-cover-header-sm-input.ghost-form-display {
  display: block;
  width: 100%;
  padding: 7px 7px 4px;
  margin-bottom: 3px;
  font-size: 14px;
}

.proposal-cover-header-info-line-header {
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 18px;
  word-break: break-word;
}

.proposal-cover-header-info-line {
  margin-bottom: 4px;
  font-size: 14px;
  color: inherit;
  opacity: 0.8;
  word-break: break-word;
}

.proposal-cover-header-info-line-address {
  white-space: pre-wrap;
}

.proposal-person-email-add-block {
  margin: 8px 0 10px 0;
  font-family: var(--font-sans-serif);
}

.proposal-person-email-add {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  text-align: left;
  letter-spacing: 0.075em;
}

.proposal-person-email-cc {
  position: relative;
  display: none;
}
.proposal-person-email-cc.showing {
  display: block;
}

.proposal-person-email-cc-delete {
  position: absolute;
  top: 6px;
  right: -18px;
  font-size: 15px;
  color: var(--bg-grey-e);
  cursor: pointer;
  transition: all var(--transition-normal) ease;
}
.proposal-person-email-cc-delete:hover {
  color: var(--text-lightest);
}

.proposal-splash-header {
  border-bottom: 1px solid var(--border-content);
}

.proposal-splash-header-logo-wrapper {
  position: absolute;
  z-index: 2;
  left: 30px;
  top: 30px;
}
@media (min-width: 768px), print {
  .proposal-splash-header-logo-wrapper {
    left: 60px;
    top: 60px;
  }
}
.proposal-splash-header-logo-wrapper .proposal-splash-header-logo {
  position: relative;
  margin-bottom: 0;
  cursor: pointer;
  border-radius: 4px;
  background-size: contain;
}

.proposal-splash-header-bottom {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  padding: 30px 30px 80px;
  background-color: var(--bg-content);
  border-radius: 10px;
}
@media (min-width: 768px), print {
  .proposal-splash-header-bottom {
    bottom: 60px;
    left: 60px;
    right: 60px;
    padding: 42px 45px 80px;
  }
}

.proposal-splash-header-bottom-section:first-child {
  margin-bottom: 40px;
}
@media (min-width: 768px), print {
  .proposal-splash-header-bottom-section {
    float: left;
    width: 50%;
  }
  .proposal-splash-header-bottom-section:first-child {
    padding-right: 10px;
    margin: 0;
  }
}

.proposal-splash-header-banner {
  position: relative;
  padding: 0;
}

.proposal-splash-header-bg {
  position: relative;
  background-color: var(--black);
}
.proposal-splash-header-bg, .proposal-splash-header-bg.with-image {
  height: 780px;
}
@media (min-width: 768px) {
  .proposal-splash-header-bg, .proposal-splash-header-bg.with-image {
    height: 1100px;
  }
}
@media print {
  .proposal-splash-header-bg, .proposal-splash-header-bg.with-image {
    height: 1200px;
    page-break-after: always;
  }
}

.proposal-splash-title {
  margin-bottom: 30px;
  padding-bottom: 15px;
  text-align: left;
  font-weight: 600;
  word-break: break-word;
  color: inherit;
  border-bottom: 2px solid;
}

.proposal-splash-title-input.form-field.input-lg, .input-group-lg > .proposal-splash-title-input.form-field.form-control,
.input-group-lg > .proposal-splash-title-input.form-field.input-group-addon,
.input-group-lg > .input-group-btn > .proposal-splash-title-input.form-field.btn,
.proposal-splash-title-display {
  min-height: 37px;
  margin-bottom: 0;
  padding: 0;
  font-size: 22px;
  font-weight: 600;
  color: inherit;
}
.proposal-splash-title-input.form-field.input-lg, .input-group-lg > .proposal-splash-title-input.form-field.form-control,
.input-group-lg > .proposal-splash-title-input.form-field.input-group-addon,
.input-group-lg > .input-group-btn > .proposal-splash-title-input.form-field.btn, .proposal-splash-title-input.form-field.input-lg:focus, .proposal-splash-title-input.form-field.input-lg:visited, .proposal-splash-title-input.form-field.input-lg:hover,
.proposal-splash-title-display,
.proposal-splash-title-display:focus,
.proposal-splash-title-display:visited,
.proposal-splash-title-display:hover {
  background: none;
  border: none;
}
.proposal-splash-title-input.form-field.input-lg:active, .input-group-lg > .proposal-splash-title-input.form-field.form-control:active,
.input-group-lg > .proposal-splash-title-input.form-field.input-group-addon:active,
.input-group-lg > .input-group-btn > .proposal-splash-title-input.form-field.btn:active,
.proposal-splash-title-display:active {
  background: none;
  border: none;
}
.proposal-splash-title-input.form-field.input-lg.proposal-splash-title-input, .input-group-lg > .proposal-splash-title-input.form-field.proposal-splash-title-input.form-control,
.input-group-lg > .proposal-splash-title-input.form-field.proposal-splash-title-input.input-group-addon,
.input-group-lg > .input-group-btn > .proposal-splash-title-input.form-field.proposal-splash-title-input.btn,
.proposal-splash-title-display.proposal-splash-title-input {
  margin-top: -10px;
  margin-bottom: -5px;
}
@media (min-width: 768px), print {
  .proposal-splash-title-input.form-field.input-lg, .input-group-lg > .proposal-splash-title-input.form-field.form-control,
  .input-group-lg > .proposal-splash-title-input.form-field.input-group-addon,
  .input-group-lg > .input-group-btn > .proposal-splash-title-input.form-field.btn,
  .proposal-splash-title-display {
    font-size: 26px;
  }
}

.proposal-splash-header-lg-input {
  display: block;
  width: 100%;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
}

.proposal-splash-header-lg-display {
  display: block;
  width: 100%;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
}

.proposal-splash-header-sm-input.ghost-form-control, .proposal-splash-header-sm-input.ghost-form-display {
  display: block;
  width: 100%;
  min-height: auto;
  padding: 7px 7px 4px;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 500;
}

.proposal-splash-header-sm-display {
  display: block;
  width: 100%;
  min-height: auto;
  padding: 7px 0 4px;
  font-size: 14px;
  font-weight: 500;
}

.proposal-splash-header-line-address {
  white-space: pre-wrap;
}

.proposal-splash-header-dates {
  font-size: 16px;
  font-weight: normal;
  color: var(--text-lightest);
  cursor: default;
}

.proposal-splash-header-label {
  margin-bottom: 10px;
  color: color-mix(in srgb, var(--black) 20%, transparent);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  font-family: inherit;
}
@media print {
  .proposal-splash-header-label {
    letter-spacing: 0;
  }
}

.proposal-splash-header-dates {
  position: absolute;
  bottom: 30px;
  text-align: left;
  font-size: 12px;
  cursor: default;
  color: inherit;
  opacity: 0.5;
}

.proposal-splash-header-date-blank {
  margin-left: 5px;
  letter-spacing: 2px;
  color: color-mix(in srgb, var(--black) 20%, transparent);
}

.proposal-splash-header-date {
  display: inline-block;
  float: left;
  margin-right: 30px;
}
.proposal-splash-header-date:last-child {
  margin-right: 0;
}

.proposal-aerial-header {
  position: relative;
  min-height: 800px;
  padding: 120px 20px 450px;
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px), print {
  .proposal-aerial-header {
    padding: 180px 120px 400px;
    min-height: 1100px;
    page-break-after: always;
  }
}
@media print {
  .proposal-aerial-header {
    height: 1200px;
    border-bottom: 0;
  }
}

.proposal-aerial-header-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-content);
}

.proposal-aerial-header-content {
  position: relative;
  padding: 40px 20px;
  text-align: center;
  color: var(--color-primary-contrast);
  background-color: transparent;
}
@media (min-width: 768px), print {
  .proposal-aerial-header-content {
    padding: 60px;
  }
}

.proposal-aerial-title {
  margin-bottom: 5px;
  font-weight: 600;
  word-break: break-word;
  color: inherit;
}

.proposal-aerial-title-input.input-lg, .input-group-lg > .proposal-aerial-title-input.form-control,
.input-group-lg > .proposal-aerial-title-input.input-group-addon,
.input-group-lg > .input-group-btn > .proposal-aerial-title-input.btn,
textarea.proposal-aerial-title-input.input-lg,
.proposal-aerial-title-display {
  min-height: 37px;
  margin-bottom: 0;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  color: inherit;
}
@media (min-width: 768px), print {
  .proposal-aerial-title-input.input-lg, .input-group-lg > .proposal-aerial-title-input.form-control,
  .input-group-lg > .proposal-aerial-title-input.input-group-addon,
  .input-group-lg > .input-group-btn > .proposal-aerial-title-input.btn,
  textarea.proposal-aerial-title-input.input-lg,
  .proposal-aerial-title-display {
    min-height: 62px;
    font-size: 36px;
  }
}

.proposal-aerial-header-persons {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  color: var(--color-primary-contrast);
  text-align: left;
  background: color-mix(in srgb, var(--black) 70%, transparent);
  border-radius: 14px;
  padding: 20px;
}
@media (min-width: 768px), print {
  .proposal-aerial-header-persons {
    display: flex;
    bottom: 60px;
    left: 90px;
    right: 90px;
    padding: 30px;
  }
}

.proposal-aerial-header-person {
  word-break: break-word;
}
.proposal-aerial-header-person:first-child {
  margin-bottom: 20px;
}
@media (min-width: 768px), print {
  .proposal-aerial-header-person:first-child {
    margin-bottom: 0;
    padding-right: 15px;
    min-width: 50%;
  }
}

.proposal-aerial-header-label {
  margin-bottom: 10px;
  color: inherit;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  font-family: inherit;
  opacity: 0.65;
}

.proposal-aerial-header-lg-input {
  display: block;
  width: 100%;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  color: inherit;
}
.proposal-aerial-header-lg-input.ghost-form-control.ghost-input-toggle-placeholder, .proposal-aerial-header-lg-input.ghost-input-toggle-placeholder.ghost-form-display {
  color: var(--text-lightest);
}

.proposal-aerial-header-lg-display {
  display: block;
  width: 100%;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
}

.proposal-aerial-header-sm-input.ghost-form-control, .proposal-aerial-header-sm-input.ghost-form-display {
  display: block;
  width: 100%;
  min-height: auto;
  padding: 7px 7px 4px;
  margin-bottom: 3px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: inherit;
}
.proposal-aerial-header-sm-input.ghost-form-control.ghost-input-toggle-placeholder, .proposal-aerial-header-sm-input.ghost-input-toggle-placeholder.ghost-form-display {
  color: var(--text-lightest);
}

.proposal-aerial-header-sm-display {
  display: block;
  width: 100%;
  min-height: auto;
  padding: 7px 0 4px;
  font-size: 14px;
  font-weight: 500;
}

.proposal-aerial-header-line-address {
  white-space: pre-wrap;
}

.proposal-aerial-header-dates {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 20px;
  font-size: 12px;
  font-weight: normal;
  cursor: default;
  color: inherit;
  opacity: 0.9;
}
@media (min-width: 768px), print {
  .proposal-aerial-header-dates {
    padding-top: 5px;
  }
}

.proposal-aerial-header-date-blank {
  margin-left: 5px;
  letter-spacing: 2px;
  color: inherit;
  opacity: 0.5;
}

.proposal-aerial-header-date {
  margin: 0 15px;
}
@media (min-width: 768px), print {
  .proposal-aerial-header-date {
    margin: 0 20px;
  }
}

.proposal-classic-header {
  position: relative;
  border-bottom: 1px solid var(--border-content);
}

.proposal-classic-header-bg-section {
  position: relative;
  width: 100%;
  padding-bottom: 23.3%;
}

.proposal-classic-header-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--color-info) no-repeat;
  background-size: cover;
  background-position: top center;
}

.proposal-classic-header-logo-wrapper {
  position: absolute;
  z-index: 2;
  left: 20px;
  bottom: 100%;
  transform: translateY(50%);
}
@media (min-width: 768px), print {
  .proposal-classic-header-logo-wrapper {
    left: 60px;
  }
}
.proposal-classic-header-logo-wrapper .proposal-classic-header-logo {
  position: relative;
  margin-bottom: 0;
  border-radius: 4px;
  background: var(--white) center center no-repeat;
  border: 2px solid var(--white);
  background-size: contain;
  box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 0 0px 0px 1px color-mix(in srgb, var(--black) 7%, transparent);
  border-radius: 4px;
}

.proposal-classic-title-section {
  position: relative;
  padding: 120px 20px;
}
@media (min-width: 768px), print {
  .proposal-classic-title-section {
    padding: 120px 60px;
  }
}

.proposal-classic-title {
  margin-bottom: 5px;
  font-weight: 600;
  word-break: break-word;
  color: inherit;
}

.proposal-classic-title-input.input-lg, .input-group-lg > .proposal-classic-title-input.form-control,
.input-group-lg > .proposal-classic-title-input.input-group-addon,
.input-group-lg > .input-group-btn > .proposal-classic-title-input.btn,
textarea.proposal-classic-title-input.ghost-form-control.input-lg,
.proposal-classic-title-display {
  min-height: 60px;
  margin-bottom: 5px;
  font-size: 40px;
  font-weight: 600;
  color: inherit;
}

.proposal-classic-names {
  padding: 60px 20px;
  font-size: 12px;
  border-top: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
}
@media (min-width: 768px), print {
  .proposal-classic-names {
    display: flex;
    padding: 60px;
  }
}

.proposal-classic-names-block:first-child {
  margin-bottom: 20px;
  padding-right: 20px;
}
@media (min-width: 768px), print {
  .proposal-classic-names-block {
    display: inline-block;
    max-width: 50%;
  }
  .proposal-classic-names-block:first-child {
    margin-bottom: 0;
  }
}

.proposal-classic-names-label {
  display: block;
  margin-bottom: 10px;
  color: inherit;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  font-family: inherit;
  opacity: 0.3;
}

.proposal-classic-name-input.ghost-form-control,
.proposal-classic-name-input.ghost-form-display {
  width: 100%;
  font-weight: 600;
  font-size: 14px;
}
@media (min-width: 768px), print {
  .proposal-classic-name-input.ghost-form-control,
  .proposal-classic-name-input.ghost-form-display {
    min-width: 250px;
  }
}

.proposal-classic-input-sm.ghost-form-control, .proposal-classic-input-sm.ghost-form-display {
  display: block;
  width: 100%;
  min-height: auto;
  padding: 7px 7px 4px;
  font-size: 12px;
  font-weight: 500;
}

.proposal-classic-header-dates {
  position: relative;
  display: flex;
  justify-content: flex-start;
  padding: 15px 0 0;
  font-size: 14px;
  font-weight: normal;
  cursor: default;
  color: inherit;
  opacity: 0.7;
}

.proposal-classic-header-date-blank {
  margin-left: 5px;
  letter-spacing: 2px;
  color: inherit;
  opacity: 0.5;
}

.proposal-classic-header-date {
  margin-right: 20px;
}

.proposal-misty-header {
  position: relative;
  min-height: 800px;
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px), print {
  .proposal-misty-header {
    min-height: 1100px;
    page-break-after: always;
  }
}
@media print {
  .proposal-misty-header {
    height: 1200px;
    border-bottom: 0;
  }
}

.proposal-misty-header-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-content);
}

.proposal-misty-header-content {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  color: var(--text-default);
  background-color: transparent;
}
@media (min-width: 768px), print {
  .proposal-misty-header-content {
    flex-direction: row;
  }
}

.proposal-misty-title {
  flex: 1;
  margin-bottom: 5px;
  padding-right: 20px;
  font-weight: 600;
  word-break: break-word;
  color: inherit;
}

.proposal-misty-title-input.input-lg, .input-group-lg > .proposal-misty-title-input.form-control,
.input-group-lg > .proposal-misty-title-input.input-group-addon,
.input-group-lg > .input-group-btn > .proposal-misty-title-input.btn,
textarea.proposal-misty-title-input.input-lg,
.proposal-misty-title-display {
  margin-bottom: 15px;
  text-align: left;
  font-weight: 600;
  font-size: 18px;
  color: inherit;
}
@media (min-width: 768px), print {
  .proposal-misty-title-input.input-lg, .input-group-lg > .proposal-misty-title-input.form-control,
  .input-group-lg > .proposal-misty-title-input.input-group-addon,
  .input-group-lg > .input-group-btn > .proposal-misty-title-input.btn,
  textarea.proposal-misty-title-input.input-lg,
  .proposal-misty-title-display {
    margin-bottom: 0;
  }
}

@media (min-width: 768px), print {
  .proposal-misty-title-display {
    padding-top: 6px;
    padding-left: 5px;
  }
}

.proposal-misty-header-persons {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  color: var(--color-primary-contrast);
  text-align: left;
  background: color-mix(in srgb, var(--black) 70%, transparent);
  border-radius: 5px;
  padding: 20px;
}
@media (min-width: 768px), print {
  .proposal-misty-header-persons {
    display: flex;
    bottom: 30px;
    left: 30px;
    right: 30px;
    padding: 30px;
  }
}

.proposal-misty-header-person {
  word-break: break-word;
}
.proposal-misty-header-person:first-child {
  margin-bottom: 20px;
}
@media (min-width: 768px), print {
  .proposal-misty-header-person:first-child {
    margin-bottom: 0;
    padding-right: 15px;
    min-width: 50%;
  }
}

.proposal-misty-header-label {
  margin-bottom: 10px;
  color: inherit;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  font-family: inherit;
  opacity: 0.65;
}

.proposal-misty-header-lg-input {
  display: block;
  width: 100%;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  color: inherit;
}
.proposal-misty-header-lg-input.ghost-form-control.ghost-input-toggle-placeholder, .proposal-misty-header-lg-input.ghost-input-toggle-placeholder.ghost-form-display {
  color: var(--text-lightest);
}

.proposal-misty-header-lg-display {
  display: block;
  width: 100%;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
}

.proposal-misty-header-sm-input.ghost-form-control, .proposal-misty-header-sm-input.ghost-form-display {
  display: block;
  width: 100%;
  min-height: auto;
  padding: 7px 7px 4px;
  margin-bottom: 3px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: inherit;
}
.proposal-misty-header-sm-input.ghost-form-control.ghost-input-toggle-placeholder, .proposal-misty-header-sm-input.ghost-input-toggle-placeholder.ghost-form-display {
  color: var(--text-lightest);
}

.proposal-misty-header-sm-display {
  display: block;
  width: 100%;
  min-height: auto;
  padding: 7px 0 4px;
  font-size: 14px;
  font-weight: 500;
}

.proposal-misty-header-line-address {
  white-space: pre-wrap;
}

.proposal-misty-header-dates {
  position: relative;
  display: flex;
  justify-content: center;
  padding-right: 5px;
  padding-top: 12px;
  font-size: 12px;
  font-weight: normal;
  cursor: default;
  color: inherit;
  opacity: 0.8;
}
.proposal-misty-header-dates.editing {
  opacity: 0.3;
}

.proposal-misty-header-date-blank {
  margin-left: 5px;
  letter-spacing: 2px;
  color: inherit;
  opacity: 0.5;
}

.proposal-misty-header-date:first-child {
  margin-right: 30px;
}
@media (min-width: 768px), print {
  .proposal-misty-header-date:first-child {
    margin-right: 45px;
  }
}

.proposal-auburn-header {
  display: flex;
  flex-direction: column;
  height: 1100px;
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px), print {
  .proposal-auburn-header {
    height: 1100px;
    page-break-after: always;
  }
}
@media print {
  .proposal-auburn-header {
    height: 1200px;
    border-bottom: 0;
  }
}

.proposal-auburn-header-banner {
  position: relative;
  flex: 1;
  width: 100%;
  padding: 60px;
}

.proposal-auburn-header-bg {
  position: absolute;
  top: 60px;
  bottom: 90px;
  left: 45px;
  right: 45px;
  height: auto;
  width: auto;
  background-color: var(--bg-content);
}
@media (min-width: 768px), print {
  .proposal-auburn-header-bg {
    left: 120px;
    right: 120px;
  }
}

.proposal-auburn-header-bg-panel {
  position: absolute;
  top: 39%;
  right: 50%;
  left: 20px;
  bottom: 75px;
  background-color: var(--color-info);
  opacity: 0.11;
}
@media (min-width: 768px), print {
  .proposal-auburn-header-bg-panel {
    left: 105px;
    bottom: 75px;
  }
}

.proposal-auburn-header-bg-panel2 {
  position: absolute;
  left: 39%;
  bottom: 33%;
  top: 45px;
  right: 20px;
  background-color: var(--color-info);
  opacity: 0.08;
}
@media (min-width: 768px), print {
  .proposal-auburn-header-bg-panel2 {
    top: 45px;
    right: 105px;
  }
}

.proposal-auburn-top-section {
  padding: 75px 60px 20px;
  text-align: center;
}
@media (min-width: 768px), print {
  .proposal-auburn-top-section {
    padding: 80px 60px 20px;
  }
}
@media print {
  .proposal-auburn-top-section {
    padding-top: 100px;
    padding-bottom: 80px;
  }
}

.proposal-auburn-title {
  margin-bottom: 40px;
  font-weight: 600;
  word-break: break-word;
  color: inherit;
}

.proposal-auburn-title-input.input-lg, .input-group-lg > .proposal-auburn-title-input.form-control,
.input-group-lg > .proposal-auburn-title-input.input-group-addon,
.input-group-lg > .input-group-btn > .proposal-auburn-title-input.btn,
textarea.proposal-auburn-title-input.input-lg,
.proposal-auburn-title-display {
  min-height: 37px;
  margin-bottom: 0;
  padding: 0;
  font-size: 26px;
  font-weight: 600;
  color: inherit;
  text-align: center;
}
.proposal-auburn-title-input.input-lg, .input-group-lg > .proposal-auburn-title-input.form-control,
.input-group-lg > .proposal-auburn-title-input.input-group-addon,
.input-group-lg > .input-group-btn > .proposal-auburn-title-input.btn, .proposal-auburn-title-input.input-lg:focus, .proposal-auburn-title-input.input-lg:visited, .proposal-auburn-title-input.input-lg:hover,
textarea.proposal-auburn-title-input.input-lg,
textarea.proposal-auburn-title-input.input-lg:focus,
textarea.proposal-auburn-title-input.input-lg:visited,
textarea.proposal-auburn-title-input.input-lg:hover,
.proposal-auburn-title-display,
.proposal-auburn-title-display:focus,
.proposal-auburn-title-display:visited,
.proposal-auburn-title-display:hover {
  background: none;
  border: none;
}
.proposal-auburn-title-input.input-lg:active, .input-group-lg > .proposal-auburn-title-input.form-control:active,
.input-group-lg > .proposal-auburn-title-input.input-group-addon:active,
.input-group-lg > .input-group-btn > .proposal-auburn-title-input.btn:active,
textarea.proposal-auburn-title-input.input-lg:active,
.proposal-auburn-title-display:active {
  background: none;
  border: none;
}
.proposal-auburn-title-input.input-lg.proposal-auburn-title-input, .input-group-lg > .proposal-auburn-title-input.proposal-auburn-title-input.form-control,
.input-group-lg > .proposal-auburn-title-input.proposal-auburn-title-input.input-group-addon,
.input-group-lg > .input-group-btn > .proposal-auburn-title-input.proposal-auburn-title-input.btn,
textarea.proposal-auburn-title-input.input-lg.proposal-auburn-title-input,
.proposal-auburn-title-display.proposal-auburn-title-input {
  margin-top: -10px;
  margin-bottom: -5px;
}
@media (min-width: 768px), print {
  .proposal-auburn-title-input.input-lg, .input-group-lg > .proposal-auburn-title-input.form-control,
  .input-group-lg > .proposal-auburn-title-input.input-group-addon,
  .input-group-lg > .input-group-btn > .proposal-auburn-title-input.btn,
  textarea.proposal-auburn-title-input.input-lg,
  .proposal-auburn-title-display {
    font-size: 30px;
  }
}

.proposal-auburn-header-persons {
  max-width: 600px;
  margin: auto;
  opacity: 0.9;
}

.proposal-auburn-header-person-section {
  word-break: break-word;
}
.proposal-auburn-header-person-section:first-child {
  margin-bottom: 40px;
}
@media (min-width: 768px), print {
  .proposal-auburn-header-person-section {
    float: left;
    width: 50%;
  }
  .proposal-auburn-header-person-section:first-child {
    margin-bottom: 0;
  }
}

.proposal-auburn-header-lg-input {
  display: block;
  width: 100%;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.proposal-auburn-header-lg-display {
  display: block;
  width: 100%;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
}

.proposal-auburn-header-sm-input.ghost-form-control, .proposal-auburn-header-sm-input.ghost-form-display {
  display: block;
  width: 100%;
  min-height: auto;
  padding: 7px 7px 4px;
  margin-bottom: 3px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}

.proposal-auburn-header-sm-display {
  display: block;
  width: 100%;
  min-height: auto;
  padding: 7px 0 4px;
  font-size: 14px;
  font-weight: 500;
}

.proposal-auburn-header-line-address {
  white-space: pre-wrap;
}

.proposal-auburn-header-label {
  margin-bottom: 10px;
  color: color-mix(in srgb, var(--black) 20%, transparent);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  font-family: inherit;
}
@media print {
  .proposal-auburn-header-label {
    letter-spacing: 0;
  }
}

.proposal-auburn-header-dates {
  position: absolute;
  display: flex;
  bottom: 30px;
  left: 30px;
  right: 30px;
  justify-content: center;
  font-size: 12px;
  font-weight: normal;
  cursor: default;
  color: inherit;
  opacity: 0.5;
}

.proposal-auburn-header-date-blank {
  margin-left: 5px;
  letter-spacing: 2px;
  color: inherit;
  opacity: 0.5;
}

.proposal-auburn-header-date {
  margin: 0 15px;
}

.proposal-alpine-header {
  position: relative;
  min-height: 800px;
  padding: 60px 20px;
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px), print {
  .proposal-alpine-header {
    padding: 260px 120px;
    min-height: 1100px;
    page-break-after: always;
  }
}
@media print {
  .proposal-alpine-header {
    height: 1200px;
    border-bottom: 0;
  }
}

.proposal-alpine-header-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-content);
}

.proposal-alpine-header-content {
  position: relative;
  padding: 60px 30px 0;
  text-align: center;
  background-color: var(--bg-content);
}
@media (min-width: 768px), print {
  .proposal-alpine-header-content {
    padding: 70px 45px 0;
  }
}

.proposal-alpine-header-content-border {
  position: absolute;
  left: 7px;
  top: 7px;
  bottom: 7px;
  right: 7px;
  pointer-events: none;
  border: 3px solid var(--border-darker);
  opacity: 0.2;
}

.proposal-alpine-title {
  margin-bottom: 45px;
  font-weight: 600;
  word-break: break-word;
  color: inherit;
}

.proposal-alpine-title-input.input-lg, .input-group-lg > .proposal-alpine-title-input.form-control,
.input-group-lg > .proposal-alpine-title-input.input-group-addon,
.input-group-lg > .input-group-btn > .proposal-alpine-title-input.btn,
textarea.proposal-alpine-title-input.input-lg,
.proposal-alpine-title-display {
  min-height: 37px;
  margin-bottom: 0;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  color: inherit;
}
@media (min-width: 768px), print {
  .proposal-alpine-title-input.input-lg, .input-group-lg > .proposal-alpine-title-input.form-control,
  .input-group-lg > .proposal-alpine-title-input.input-group-addon,
  .input-group-lg > .input-group-btn > .proposal-alpine-title-input.btn,
  textarea.proposal-alpine-title-input.input-lg,
  .proposal-alpine-title-display {
    min-height: 62px;
    font-size: 36px;
  }
}

.proposal-alpine-header-persons {
  max-width: 600px;
  margin: auto;
}

.proposal-alpine-header-person {
  word-break: break-word;
}
.proposal-alpine-header-person:first-child {
  margin-bottom: 40px;
}
@media (min-width: 768px), print {
  .proposal-alpine-header-person {
    float: left;
    width: 50%;
  }
  .proposal-alpine-header-person:first-child {
    margin-bottom: 0;
  }
}

.proposal-alpine-header-label {
  margin-bottom: 10px;
  color: color-mix(in srgb, var(--black) 20%, transparent);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  font-family: inherit;
}
@media print {
  .proposal-alpine-header-label {
    letter-spacing: 0;
  }
}

.proposal-alpine-header-lg-input {
  display: block;
  width: 100%;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.proposal-alpine-header-lg-display {
  display: block;
  width: 100%;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
}

.proposal-alpine-header-sm-input.ghost-form-control, .proposal-alpine-header-sm-input.ghost-form-display {
  display: block;
  width: 100%;
  min-height: auto;
  padding: 7px 7px 4px;
  margin-bottom: 3px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}

.proposal-alpine-header-sm-display {
  display: block;
  width: 100%;
  min-height: auto;
  padding: 7px 0 4px;
  font-size: 14px;
  font-weight: 500;
}

.proposal-alpine-header-line-address {
  white-space: pre-wrap;
}

.proposal-alpine-header-dates {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 65px;
  padding: 16px 20px 24px;
  font-size: 12px;
  font-weight: normal;
  cursor: default;
  color: inherit;
  opacity: 0.5;
}

.proposal-alpine-header-date-blank {
  margin-left: 5px;
  letter-spacing: 2px;
  color: inherit;
  opacity: 0.5;
}

.proposal-alpine-header-date {
  margin: 0 15px;
}
@media (min-width: 768px), print {
  .proposal-alpine-header-date {
    margin: 0 30px;
  }
}

.proposal-pastel-header {
  border-bottom: 1px solid var(--border-content);
}
@media print {
  .proposal-pastel-header {
    border-bottom: 0;
  }
}

.proposal-pastel-header-banner {
  position: relative;
  height: 800px;
  padding: 15px;
}
@media (min-width: 768px), print {
  .proposal-pastel-header-banner {
    padding: 60px;
    height: 1100px;
    page-break-after: always;
  }
}
@media print {
  .proposal-pastel-header-banner {
    height: 1200px;
  }
}

.proposal-pastel-header-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-content);
}

.proposal-pastel-header-content {
  position: relative;
  padding: 20px 20px 20px;
  background-color: var(--bg-content);
  border-radius: 10px;
}
@media (min-width: 768px), print {
  .proposal-pastel-header-content {
    padding: 45px 45px 45px;
  }
}

@media (min-width: 768px), print {
  .proposal-pastel-header-persons {
    display: flex;
  }
}

.proposal-pastel-header-person {
  word-break: break-word;
  flex: 1;
}
.proposal-pastel-header-person:first-child {
  margin-bottom: 40px;
}
@media (min-width: 768px), print {
  .proposal-pastel-header-person:first-child {
    margin: 0;
    padding-right: 15px;
    min-width: 50%;
  }
}

.proposal-pastel-title-section {
  margin-bottom: 45px;
  text-align: left;
  font-weight: 600;
  word-break: break-word;
  color: inherit;
}

.proposal-pastel-title-input.input-lg, .input-group-lg > .proposal-pastel-title-input.form-control,
.input-group-lg > .proposal-pastel-title-input.input-group-addon,
.input-group-lg > .input-group-btn > .proposal-pastel-title-input.btn,
textarea.proposal-pastel-title-input.input-lg,
.proposal-pastel-title-display {
  min-height: 37px;
  margin-bottom: 0;
  font-size: 30px;
  font-weight: 600;
  color: inherit;
}
@media (min-width: 768px), print {
  .proposal-pastel-title-input.input-lg, .input-group-lg > .proposal-pastel-title-input.form-control,
  .input-group-lg > .proposal-pastel-title-input.input-group-addon,
  .input-group-lg > .input-group-btn > .proposal-pastel-title-input.btn,
  textarea.proposal-pastel-title-input.input-lg,
  .proposal-pastel-title-display {
    min-height: 62px;
    font-size: 36px;
  }
}

.proposal-pastel-header-lg-input {
  display: block;
  width: 100%;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
}

.proposal-pastel-header-lg-display {
  display: block;
  width: 100%;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
}

.proposal-pastel-header-sm-input.ghost-form-control, .proposal-pastel-header-sm-input.ghost-form-display {
  display: block;
  width: 100%;
  min-height: auto;
  padding: 7px 7px 4px;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 500;
}

.proposal-pastel-header-sm-display {
  display: block;
  width: 100%;
  min-height: auto;
  padding: 7px 0 4px;
  font-size: 14px;
  font-weight: 500;
}

.proposal-pastel-header-line-address {
  white-space: pre-wrap;
}

.proposal-pastel-header-dates {
  font-size: 16px;
  font-weight: normal;
  cursor: default;
}

.proposal-pastel-header-label {
  margin-bottom: 10px;
  color: color-mix(in srgb, var(--black) 20%, transparent);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  font-family: inherit;
}
@media print {
  .proposal-pastel-header-label {
    letter-spacing: 0;
  }
}

.proposal-pastel-header-dates {
  margin-top: 12px;
  text-align: left;
  font-size: 12px;
  cursor: default;
  color: inherit;
  opacity: 0.5;
}

.proposal-pastel-header-date-blank {
  margin-left: 5px;
  letter-spacing: 2px;
  color: color-mix(in srgb, var(--black) 20%, transparent);
}

.proposal-pastel-header-date {
  display: inline-block;
  float: left;
  margin-right: 30px;
}
.proposal-pastel-header-date:last-child {
  margin-right: 0;
}

.rate-card-drawer {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  height: 100%;
}
@media (min-width: 768px) {
  .rate-card-drawer {
    padding-bottom: 60px;
  }
}

.rate-card-drawer-header {
  display: flex;
  align-items: flex-start;
  padding: 30px 40px 0;
}

.rate-card-drawer-mobile-cta {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 40px;
  background: var(--bg-content);
  border-top: 1px solid var(--border-content);
}

.rate-card-drawer-rate-list {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 0;
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}

.rate-card-drawer-rate-list-header {
  margin-bottom: 20px;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4em;
  text-transform: uppercase;
  color: var(--text-lighter);
  text-align: left;
  cursor: default;
}

.rate-card-drawer-rate-empty {
  padding: 20px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-lighter);
  border-top: 1px solid var(--border-content);
  border-bottom: 1px solid var(--border-content);
}

.rate-card-drawer-rate {
  padding: 14px 0;
  border-top: 1px solid var(--border-content);
}
.rate-card-drawer-rate:last-child {
  border-bottom: 1px solid var(--border-content);
}

.rate-card-drawer-rate-title-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 7px;
  color: var(--text-default);
  font-weight: 400;
  margin-left: -7px;
  border-radius: 6px;
  transition: all var(--transition-slower) ease;
}
.rate-card-drawer-rate-title-select:hover {
  cursor: pointer;
  background: var(--bg-grey-f8);
}
.ghost-input-wrapper.showing .rate-card-drawer-rate-title-select {
  display: none;
}

.rate-card-drawer-rate-delete {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.rate-card-drawer-rate-delete-icon {
  height: 30px;
  width: auto;
  padding: 8px;
  opacity: 1;
  transition: all var(--transition-slower) ease;
}
.rate-card-drawer-rate-delete-icon path {
  fill: var(--text-muted);
}
@media (min-width: 768px) {
  .rate-card-drawer-rate-delete-icon {
    opacity: 0;
  }
}
.rate-card-drawer-rate:hover .rate-card-drawer-rate-delete-icon {
  opacity: 1;
}
.rate-card-drawer-rate-delete-icon:hover {
  cursor: pointer;
}
.rate-card-drawer-rate-delete-icon:hover path {
  fill: var(--text-default);
}

.note-drawer-title {
  padding: 50px 40px 0px;
  user-select: none;
}
@media (min-width: 768px) {
  .note-drawer-title {
    padding: 50px 60px 0px;
  }
}

.note-drawer-title-input {
  font-size: 22px;
  font-weight: 600;
  word-break: break-word;
  word-wrap: break-word;
  cursor: text;
}

.note-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding-left: 25px;
  padding-right: 50px;
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .note-drawer-header {
    height: 60px;
    padding-left: 25px;
    padding-right: 15px;
  }
}

.note-drawer-header-dropdown {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}

.note-drawer-header-copy {
  display: flex;
  align-self: center;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-lighter);
  cursor: default;
}

.note-drawer-header-visible {
  display: none;
  align-self: center;
  margin-right: 20px;
}
@media (min-width: 768px) {
  .note-drawer-header-visible {
    display: flex;
  }
}

.note-drawer-header-visible-icon {
  width: 13px;
  height: auto;
  margin-right: 7px;
}
.note-drawer-header-visible-icon path {
  fill: currentColor;
}

.note-drawer-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-lighter);
  cursor: default;
}

.note-drawer-body {
  min-height: 100px;
  padding: 20px 40px 90px;
  font-size: 16px;
  color: var(--text-default);
  word-break: break-word;
  white-space: pre-line;
}
@media (min-width: 768px) {
  .note-drawer-body {
    padding: 20px 60px 90px;
  }
}

.bonsai-balance-show {
  position: relative;
  padding-top: 20px;
}
@media (min-width: 992px) {
  .bonsai-balance-show {
    padding-top: 40px;
  }
}

.bonsai-balance-content {
  position: relative;
}

.bonsai-balance-header {
  display: block;
}
@media (min-width: 992px) {
  .bonsai-balance-header {
    position: absolute;
    z-index: 2;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: row-reverse;
  }
}

.bonsai-balance-bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 159px;
  background: var(--bg-grey-fd);
  border-bottom: 1px solid var(--border-content);
}

.bonsai-balance-promo-modal {
  padding: 60px 30px;
}
@media (min-width: 768px) {
  .bonsai-balance-promo-modal {
    padding: 60px;
  }
}
@media (min-width: 992px) {
  .bonsai-balance-promo-modal {
    padding: 90px 90px;
  }
}

.bonsai-balance-promo-modal-img {
  position: relative;
  width: 80%;
  max-width: 400px;
  height: 300px;
  margin: 0 auto 60px;
  right: -25px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("bonsai-cash/balance-promo-modal.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .bonsai-balance-promo-modal-img {
    background-image: url("bonsai-cash/balance-promo-modal@2x.png");
  }
}
@media (min-width: 992px) {
  .bonsai-balance-promo-modal-img {
    position: absolute;
    left: 60px;
    right: auto;
    top: 40px;
    bottom: 40px;
    width: 40%;
    max-width: auto;
    margin: 0;
    height: auto;
  }
}

.bonsai-balance-promo-modal-content {
  max-width: 500px;
  margin: auto;
  text-align: center;
}
@media (min-width: 992px) {
  .bonsai-balance-promo-modal-content {
    max-width: none;
    padding-left: 48%;
    text-align: left;
  }
}

.bonsai-balance-promo-modal-title {
  margin-bottom: 30px;
}

.bonsai-balance-promo-modal-features {
  position: relative;
  margin-bottom: 30px;
  font-size: 16px;
  color: var(--text-muted);
}

.bonsai-balance-promo-modal-feature {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  text-align: left;
}

.bonsai-balance-promo-modal-check {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 6px;
  width: 18px;
  height: auto;
}
.bonsai-balance-promo-modal-check path {
  stroke: var(--color-primary);
}

.bonsai-balance-promo-modal-bank-fdic {
  margin-top: 20px;
  color: var(--text-lighter);
  font-style: italic;
  font-size: 12px;
}

.bonsai-balance-enable-payments-section {
  background-color: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
  box-shadow: 0 2px 14px color-mix(in srgb, var(--black) 2%, transparent);
}
.bonsai-balance-enable-payments-card {
  position: relative;
  padding: 26px 30px 30px;
}

.bonsai-balance-enable-payments-card-top {
  min-height: 66px;
}
@media (min-width: 992px) {
  .bonsai-balance-enable-payments-card-top {
    min-height: 76px;
  }
}

.bonsai-balance-enable-payments-copy {
  font-size: 16px;
  font-weight: normal;
  color: var(--text-muted);
  cursor: default;
}

.bonsai-balance-totals-section {
  background-color: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
  box-shadow: 0 2px 14px color-mix(in srgb, var(--black) 2%, transparent);
}
.bonsai-balance-total-card {
  position: relative;
  padding: 26px 30px 30px;
}

.bonsai-balance-total-header,
.bonsai-balance-enable-payments-header {
  margin-bottom: 3px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-default);
  cursor: default;
}

.bonsai-balance-enable-payments-header {
  margin-bottom: 10px;
}

.bonsai-balance-total-amount {
  font-size: 32px;
  font-weight: 600;
}

.bonsai-balance-available-soon {
  padding: 0 0 22px;
  margin-top: -20px;
}

.bonsai-balance-available-soon-icon {
  padding-top: 8px;
  width: 15px;
}
.bonsai-balance-available-soon-icon path {
  fill: var(--text-lighter);
}
.bonsai-balance-available-soon-icon:hover path {
  fill: var(--text-muted);
}

.bonsai-balance-available-soon-amount {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-default);
}

.bonsai-balance-totals-list {
  padding: 13px 0 22px;
}

.bonsai-balance-amount-card {
  position: relative;
  display: block;
  padding: 10px 30px 0;
}

.bonsai-balance-amount-header {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-default);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bonsai-balance-amount {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-default);
}

.bonsai-balance-amount-label-icon {
  margin-left: 7px;
  width: 12px;
  height: auto;
  opacity: 0.9;
}
.bonsai-balance-amount-label-icon:hover {
  opacity: 1;
}

.bonsai-balance-next-payout-header {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-lighter);
  white-space: nowrap;
}

.bonsai-balance-next-payout-amount {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-lighter);
}

.bonsai-balance-upgrade-promo {
  position: relative;
  margin-top: 20px;
  padding: 25px 40px 22px;
  font-size: 14px;
  font-weight: 500;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
  box-shadow: 0 1px 15px color-mix(in srgb, var(--black) 2%, transparent);
}
@media (min-width: 1400px) {
  .bonsai-balance-upgrade-promo {
    margin-top: 40px;
  }
}

.bonsai-balance-upgrade-promo-close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 15px;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 5px;
  cursor: pointer;
}

.bonsai-balance-upgrade-promo-close-icon {
  width: 12px;
  height: auto;
}
.bonsai-balance-upgrade-promo-close-icon path {
  fill: var(--text-muted);
}
.bonsai-balance-upgrade-promo-close:hover .bonsai-balance-upgrade-promo-close-icon path {
  fill: var(--text-default);
}

.bonsai-balance-upgrade-promo-graphic-section {
  margin-bottom: 40px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-content);
}

.bonsai-balance-upgrade-promo-graphic {
  width: 100%;
  height: 110px;
  margin: 0 auto 0;
  background-position: bottom center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("bonsai-cash/balance-promo-img.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .bonsai-balance-upgrade-promo-graphic {
    background-image: url("bonsai-cash/balance-promo-img@2x.png");
  }
}
@media (min-width: 1650px) {
  .bonsai-balance-upgrade-promo-graphic {
    margin: 0 auto 0;
  }
}

.bonsai-balance-upgrade-promo-title {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
}

.bonsai-balance-upgrade-promo-features {
  position: relative;
  margin-bottom: 40px;
  font-size: 14px;
  color: var(--text-muted);
}

.bonsai-balance-upgrade-promo-feature {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  text-align: left;
}

.bonsai-balance-upgrade-promo-check {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 6px;
  width: 18px;
  height: auto;
}
.bonsai-balance-upgrade-promo-check path {
  stroke: var(--color-primary);
}

.bonsai-balance-control-actions {
  margin-top: 40px;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
}

.bonsai-balance-control-action {
  display: block;
  text-align: left;
  color: var(--text-default);
  border-top: 1px solid var(--border-content);
}
.bonsai-balance-control-action:first-child {
  border-top: none;
}

.bonsai-balance-control-action-in,
.bonsai-balance-control-action-in-button {
  font-weight: 600;
  font-size: 14px;
}
.bonsai-balance-control-action-in, .bonsai-balance-control-action-in:focus, .bonsai-balance-control-action-in:visited,
.bonsai-balance-control-action-in-button,
.bonsai-balance-control-action-in-button:focus,
.bonsai-balance-control-action-in-button:visited {
  color: var(--text-muted);
}
.bonsai-balance-control-action-in path, .bonsai-balance-control-action-in:focus path, .bonsai-balance-control-action-in:visited path,
.bonsai-balance-control-action-in-button path,
.bonsai-balance-control-action-in-button:focus path,
.bonsai-balance-control-action-in-button:visited path {
  fill: var(--text-muted);
}
.bonsai-balance-control-action-in:hover, .bonsai-balance-control-action-in:active,
.bonsai-balance-control-action-in-button:hover,
.bonsai-balance-control-action-in-button:active {
  color: var(--text-default);
}
.bonsai-balance-control-action-in:hover path, .bonsai-balance-control-action-in:active path,
.bonsai-balance-control-action-in-button:hover path,
.bonsai-balance-control-action-in-button:active path {
  fill: var(--text-default);
}

.bonsai-balance-control-action-in {
  position: relative;
  display: block;
  padding: 16px 15px 14px 50px;
}

.bonsai-balance-control-accounting-promo {
  position: relative;
  display: block;
  padding: 250px 40px 40px;
  text-align: center;
  color: var(--text-default);
}

.bonsai-balance-control-accounting-promo-img {
  position: absolute;
  left: 0;
  right: 20px;
  top: 30px;
  height: 190px;
  background-position: top center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("bonsai-cash/accounting-promo.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .bonsai-balance-control-accounting-promo-img {
    background-image: url("bonsai-cash/accounting-promo@2x.png");
  }
}

.bonsai-balance-control-accounting-promo-copy {
  font-size: 14px;
  font-weight: 500;
}

.bonsai-balance-main-content {
  margin-top: 40px;
}
@media (min-width: 992px) {
  .bonsai-balance-main-content {
    margin-top: 119px;
  }
}

.bonsai-balance-main-content-inside {
  padding-top: 40px;
}
@media (min-width: 992px) {
  .bonsai-balance-main-content-inside {
    padding-left: 60px;
  }
}
.bonsai-balance-main-content-inside .bonsai-payments-verification-pending,
.bonsai-balance-main-content-inside .bonsai-payments-verification-warning {
  margin-top: 10px;
  margin-bottom: 30px;
}

.bonsai-balance-beta-warning {
  padding: 10px 0;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 10px;
}
@media (min-width: 992px) {
  .bonsai-balance-beta-warning {
    margin-left: 60px;
    border: 1px solid var(--border-content);
    border-top: 0;
    border-radius: 0 0 10px 10px;
  }
}

.bonsai-balance-beta-warning-button {
  display: inline;
  border: none;
  background-color: transparent;
  padding: 0px;
  color: var(--color-primary);
}

.bonsai-balance-empty-img {
  position: absolute;
  display: none;
  left: 60px;
  top: 30px;
  bottom: 30px;
  width: 270px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("bonsai-cash/balance-empty-graphic.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .bonsai-balance-empty-img {
    background-image: url("bonsai-cash/balance-empty-graphic@2x.png");
  }
}
@media (min-width: 1200px) {
  .bonsai-balance-empty-img {
    display: block;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .bonsai-balance-empty-img {
    filter: brightness(0.75) contrast(1.5);
  }
}
:root[data-theme=dark] .bonsai-balance-empty-img {
  filter: brightness(0.75) contrast(1.5);
}

.bonsai-balance-empty-section {
  position: relative;
  margin-bottom: 60px;
  text-align: left;
  overflow: hidden;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  box-shadow: 0 1px 15px color-mix(in srgb, var(--bg-shadow) 2%, transparent);
  border-radius: 4px;
}

.bonsai-balance-empty-bg {
  position: absolute;
  top: -25%;
  left: -25%;
  width: 150%;
  height: auto;
  min-height: 150%;
}
@media (min-width: 768px) {
  .bonsai-balance-empty-bg {
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
  }
}

.bonsai-balance-empty-content {
  position: relative;
  z-index: 2;
  padding: 90px 40px;
}
@media (min-width: 1200px) {
  .bonsai-balance-empty-content {
    padding: 120px 60px 120px 340px;
  }
}

.bonsai-balance-empty-header {
  position: relative;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 500;
}
@media (min-width: 768px) {
  .bonsai-balance-empty-header {
    font-size: 20px;
  }
}

.bonsai-balance-empty-copy {
  max-width: 500px;
  font-size: 12px;
  color: var(--text-muted);
}
@media (min-width: 768px) {
  .bonsai-balance-empty-copy {
    font-size: 16px;
  }
}

.bonsai-balance-transaction-date {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  color: var(--text-muted);
  font-weight: 500;
  cursor: default;
  border-bottom: 1px solid var(--border-content);
}

.bonsai-balance-transaction-item {
  position: relative;
  cursor: pointer;
  border-bottom: 1px solid var(--border-content);
  transition: all var(--transition-normal) ease;
}
.bonsai-balance-transaction-item:hover {
  color: var(--text-default);
}

.bonsai-balance-transaction-item-in {
  width: 100%;
  padding: 18px 20px 20px 50px;
}
@media (min-width: 768px) {
  .bonsai-balance-transaction-item-in {
    display: flex;
    align-items: center;
  }
}
.bonsai-balance-transaction-item-in, .bonsai-balance-transaction-item-in:focus, .bonsai-balance-transaction-item-in:visited {
  color: var(--text-default);
}
.bonsai-balance-transaction-item-in:hover, .bonsai-balance-transaction-item-in:active {
  color: var(--text-default);
}

.bonsai-balance-transaction-item-name {
  padding-right: 80px;
  font-size: 14px;
  font-weight: 500;
}
@media (min-width: 768px) {
  .bonsai-balance-transaction-item-name {
    padding-right: 10px;
  }
}
.bonsai-balance-transaction-item.pending-transaction .bonsai-balance-transaction-item-name, .bonsai-balance-transaction-item.pending .bonsai-balance-transaction-item-name, .bonsai-balance-transaction-item.in_transit .bonsai-balance-transaction-item-name, .bonsai-balance-transaction-item.failed .bonsai-balance-transaction-item-name, .bonsai-balance-transaction-item.canceled .bonsai-balance-transaction-item-name {
  color: var(--text-lighter);
}

.bonsai-balance-transaction-item-detail {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
}

.bonsai-balance-transaction-item-amount {
  position: absolute;
  display: inline-block;
  right: 20px;
  top: 18px;
  font-weight: 600;
  text-align: right;
}
@media (min-width: 768px) {
  .bonsai-balance-transaction-item-amount {
    position: relative;
    right: 0;
    top: 0;
    margin-left: auto;
    width: 25%;
  }
}
.bonsai-balance-transaction-item.pending-transaction .bonsai-balance-transaction-item-amount, .bonsai-balance-transaction-item.pending .bonsai-balance-transaction-item-amount, .bonsai-balance-transaction-item.in_transit .bonsai-balance-transaction-item-amount, .bonsai-balance-transaction-item.failed .bonsai-balance-transaction-item-amount, .bonsai-balance-transaction-item.canceled .bonsai-balance-transaction-item-amount {
  color: var(--text-lighter);
}
.bonsai-balance-transaction-item.positive-transaction .bonsai-balance-transaction-item-amount, .bonsai-balance-transaction-item.disbursed .bonsai-balance-transaction-item-amount, .bonsai-balance-transaction-item.refunded .bonsai-balance-transaction-item-amount {
  color: var(--color-primary);
}

.bonsai-balance-transaction-item-refund {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 10px 50px;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  border-top: 1px solid var(--border-content);
  border-radius: 0 0 4px 4px;
}

.bonsai-balance-transaction-item-refund-date {
  margin-top: 2px;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-muted);
}

.bonsai-balance-transaction-item-failure {
  padding: 10px 20px 10px 50px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted-alt);
  text-align: left;
  background: var(--bg-grey-fc);
  border-top: 1px solid var(--border-content);
  border-radius: 0 0 4px 4px;
}

.bonsai-balance-transaction-item-detail {
  display: flex;
  overflow: hidden;
}

.bonsai-balance-transaction-item-copy:hover .bonsai-balance-transaction-item-status {
  display: none;
}

.bonsai-balance-transaction-item-id {
  display: none;
}
.bonsai-balance-transaction-item-copy:hover .bonsai-balance-transaction-item-id {
  display: inline;
}

.bonsai-balance-info-icon-link, .bonsai-balance-info-icon-link:focus, .bonsai-balance-info-icon-link:visited {
  color: var(--text-muted);
}
.bonsai-balance-info-icon-link:hover, .bonsai-balance-info-icon-link:active {
  color: var(--text-muted);
}

.bonsai-balance-info-icon-link-large {
  font-size: 18px;
}

.bonsai-balance-control-share-feedback-button {
  font-size: 14px;
  text-align: left;
  background-color: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  transition: all var(--transition-normal) ease;
}
.bonsai-balance-control-share-feedback-button, .bonsai-balance-control-share-feedback-button:focus, .bonsai-balance-control-share-feedback-button:visited {
  color: var(--color-primary);
  border: none;
  box-shadow: none;
}
.bonsai-balance-control-share-feedback-button:hover, .bonsai-balance-control-share-feedback-button:active {
  color: color-mix(in srgb, var(--color-primary) 95%, var(--black));
  border: none;
  box-shadow: none;
}

.bonsai-balance-loading-modal {
  position: relative;
  padding: 90px 60px 90px;
  text-align: center;
}

.bonsai-balance-loading-modal-text {
  font-size: 16px;
  font-weight: 600;
}

.bonsai-balance-schedule-section {
  margin-bottom: 40px;
}

.bonsai-balance-payout-header {
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 600;
}

.bonsai-balance-schedule-options {
  border: 1px solid var(--border-content);
  border-radius: 10px;
}
.bonsai-balance-schedule-options .radio-label {
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border-content);
}
.bonsai-balance-schedule-options .radio-label:first-child {
  border-top: none;
}

.bonsai-balance-schedule-option {
  position: relative;
  padding: 15px 20px 15px 50px;
  font-size: 16px;
}
.bonsai-balance-schedule-option:hover {
  border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.bonsai-balance-schedule-option.unavailable {
  cursor: not-allowed;
  opacity: 0.8;
}
.bonsai-balance-schedule-option .radio-fill {
  position: absolute;
  left: 20px;
  top: 20px;
}

.bonsai-balance-schedule-option-name {
  display: flex;
  align-items: center;
  font-weight: 500;
  color: var(--text-muted);
}
.bonsai-balance-schedule-option:hover .bonsai-balance-schedule-option-name {
  color: var(--text-muted);
}
.bonsai-balance-schedule-option.active .bonsai-balance-schedule-option-name {
  color: var(--text-default);
}
.bonsai-balance-schedule-option.unavailable .bonsai-balance-schedule-option-name {
  color: var(--text-muted);
}

.bonsai-balance-schedule-option-info-icon {
  width: 14px;
  height: auto;
  margin-left: 7px;
}

.bonsai-balance-schedule-option-speed {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-muted);
}
@media (min-width: 768px) {
  .bonsai-balance-schedule-option-speed {
    font-size: 14px;
  }
}

.bonsai-balance-schedule-option-instant-icon {
  position: relative;
  top: 3px;
  margin-left: 8px;
}

.bonsai-balance-schedule-frozen {
  position: relative;
  padding: 15px 15px 15px 40px;
  color: var(--color-danger-dark);
  background: var(--color-danger-light);
  border: 1px solid color-mix(in srgb, var(--black) 10%, transparent);
  border-radius: 4px;
}
.bonsai-balance-schedule-frozen a,
.bonsai-balance-schedule-frozen a:visited,
.bonsai-balance-schedule-frozen a:focus,
.bonsai-balance-schedule-frozen a:hover,
.bonsai-balance-schedule-frozen a:active {
  color: var(--color-danger-dark);
  text-decoration: underline;
}

.bonsai-balance-schedule-frozen-icon {
  position: absolute;
  left: 15px;
}

.bonsai-balance-payout-accounts {
  position: relative;
  border: 1px solid var(--border-content);
  border-radius: 10px;
}
.bonsai-balance-payout-accounts .react-tooltip {
  width: 260px;
  left: auto !important;
  right: 40px;
}

.bonsai-balance-payout-accounts-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px 0;
}

.bonsai-balance-payout-accounts-new {
  padding: 5px 10px 12px;
  font-size: 14px;
  font-weight: 600;
}

.bonsai-balance-payout-accounts-edit {
  padding: 5px 10px 12px;
  font-size: 14px;
  font-weight: 600;
}

.bonsai-balance-payout-empty {
  padding: 40px;
  text-align: center;
  background: var(--bg-content);
  border-radius: 10px;
  border: 1px solid var(--border-content);
}

.bonsai-balance-payout-empty-copy {
  margin-bottom: 20px;
  color: var(--text-lighter);
  font-weight: 500;
}

.bonsai-balance-add-account-header {
  position: relative;
  padding: 40px 0 0;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.bonsai-balance-add-account-back {
  position: absolute;
  left: 40px;
  top: 40px;
}

.bonsai-balance-add-account-option {
  position: relative;
  padding: 30px;
  cursor: pointer;
  border: 2px solid var(--border-content);
  border-radius: 10px;
  transition: all var(--transition-slower) ease;
}
.bonsai-balance-add-account-option.banking-option {
  padding: 30px 30px 45px;
  background: var(--bg-content);
  border-top-width: 7px;
  border-top-color: color-mix(in srgb, var(--color-primary) 75%, transparent);
}
.bonsai-balance-add-account-option:active {
  border-color: var(--color-primary);
}
@media (min-width: 768px) {
  .bonsai-balance-add-account-option:hover {
    border-color: var(--color-primary);
  }
}

.bonsai-balance-add-account-option-name {
  position: relative;
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 18px;
}

.bonsai-balance-add-account-option-desc {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-muted);
}

.bonsai-balance-add-account-option-icon {
  position: absolute;
  right: 25px;
  top: 39px;
  width: 25px;
  filter: saturate(0);
}
.bonsai-balance-add-account-option:hover .bonsai-balance-add-account-option-icon {
  filter: saturate(1);
}

.bonsai-balance-business-banking-account-item {
  position: relative;
  padding: 15px 20px 15px 20px;
  cursor: default;
  transition: all var(--transition-normal) ease;
}
.bonsai-balance-business-banking-account-item:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.bonsai-balance-business-banking-account-item:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.bonsai-balance-business-banking-account-item-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--text-default);
}

.bonsai-balance-business-banking-account-item-sublabel {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-muted);
}

.bonsai-balance-business-banking-account-item-default {
  display: flex;
  align-items: center;
  color: var(--color-primary);
}

.bonsai-balance-business-banking-account-item-default-icon {
  position: relative;
  top: 1px;
  width: 12px;
  height: auto;
  margin-left: 7px;
}

.bonsai-balance-add-account-checklist-item {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding-left: 26px;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-muted);
}
.bonsai-balance-add-account-checklist-item:last-child {
  margin-bottom: 0;
}

.bonsai-balance-add-account-checklist-item-icon {
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: auto;
}
.bonsai-balance-add-account-checklist-item-icon path {
  stroke: var(--color-primary);
}

.bonsai-payments-cash-payouts-promo-screenshot {
  position: absolute;
  display: none;
  right: 0;
  bottom: 0;
  width: 162px;
  height: 126px;
  background-position: right bottom;
  background-size: cover;
  background-image: url("bonsai-cash/balance-promo-bg.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .bonsai-payments-cash-payouts-promo-screenshot {
    background-image: url("bonsai-cash/balance-promo-bg@2x.png");
  }
}
@media (min-width: 768px) {
  .bonsai-payments-cash-payouts-promo-screenshot {
    display: block;
  }
}

.bonsai-balance-banking-promo-checklist {
  margin-top: 20px;
}

.bonsai-balance-banking-promo-checklist-item {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding-left: 26px;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-muted);
}
.bonsai-balance-banking-promo-checklist-item:last-child {
  margin-bottom: 0;
}

.bonsai-balance-add-account-checklist-item-icon {
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: auto;
}
.bonsai-balance-add-account-checklist-item-icon path {
  stroke: var(--color-primary);
}

#modal-getting-started-details .modal-getting-started-details-action-bar {
  line-height: 60px;
}
#modal-getting-started-details .modal-getting-started-details-header {
  max-width: 100%;
  padding: 0 80px 0 20px;
  margin: 0;
  font-size: 16px;
  line-height: inherit;
  color: var(--color-primary-contrast);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
@media (min-width: 768px) {
  #modal-getting-started-details .modal-getting-started-details-header {
    max-width: 1400px;
    padding: 0 80px;
    margin: 0 auto;
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
}
#modal-getting-started-details .modal-getting-started-details-figure {
  display: none;
}
#modal-getting-started-details .modal-getting-started-details-caption-description {
  font-size: 16px;
}
@media (min-width: 768px) {
  #modal-getting-started-details .modal-getting-started-details-caption-description {
    font-size: 18px;
  }
}

.modal-getting-started-details-header {
  margin: 0;
  font-size: 28px;
}

.modal-company-details-logo-text {
  text-align: center;
  font-size: 16px;
  color: var(--text-lighter);
}
@media (min-width: 768px) {
  .modal-company-details-logo-text {
    text-align: left;
  }
}

.getting-started-page-wrapper #timetracker-container {
  display: none;
}
.getting-started-page-wrapper.show-timetracker #timetracker-container {
  display: inline-block;
}

.getting-started-page {
  position: fixed;
  height: 100%;
  width: 100%;
}

.getting-started-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow-x: hidden;
}
@media (min-width: 768px) {
  .getting-started-content {
    flex-wrap: nowrap;
    justify-content: center;
  }
}

.getting-started-content-main {
  position: relative;
  flex-grow: 1;
  width: 100%;
  padding-top: 20px;
  flex-basis: 60%;
  padding-bottom: 90px;
}
@media (min-width: 768px) {
  .getting-started-content-main {
    padding-top: 40px;
    padding-bottom: 0;
  }
}
@media (min-width: 1367px) {
  .getting-started-content-main {
    padding-top: 80px;
  }
}

.getting-started-content-main-wrapper {
  margin: 0 20px;
}
@media (min-width: 768px) {
  .getting-started-content-main-wrapper {
    width: 569px;
    margin: 0 auto;
  }
}

.getting-started-bonsai-logo {
  height: 30px;
  width: 120px;
  margin-bottom: 60px;
}
@media (min-width: 768px) {
  .getting-started-bonsai-logo {
    width: 150px;
  }
}

.getting-started-content-aside {
  width: 100%;
  max-width: 768px;
  min-height: 862px;
  background: var(--bg-grey-f5);
  border-left: 1px solid var(--border-content);
  padding-top: 40px;
  display: none;
  flex-basis: 40%;
}
@media (min-width: 1024px) {
  .getting-started-content-aside {
    display: block;
  }
}
@media (min-width: 1367px) {
  .getting-started-content-aside {
    padding-top: 80px;
  }
}

.getting-started-content-aside-content-wrapper {
  margin: 0 auto;
  width: 371px;
}

.getting-started-content-aside-img {
  height: 443px;
  border-radius: 0 50px;
  width: 371px;
}

.getting-started-content-aside-copy {
  font-weight: 600;
  font-size: 24px;
  color: var(--text-default);
  margin-top: 49px;
}
.getting-started-content-aside-copy.green {
  color: var(--color-primary);
}

.getting-started-content-aside-rating {
  height: 32px;
  margin-top: 40px;
}

.getting-started-content-aside-testimonial-copy::before {
  content: "”";
  position: absolute;
  margin-left: -15px;
}

.getting-started-content-aside-customer {
  margin-top: 40px;
  font-weight: 600;
  font-size: 21.2218px;
}

.getting-started-content-aside-customer-data {
  font-weight: 400;
  font-size: 17px;
  color: var(--text-muted);
}
.getting-started-content-aside-customer-data hr {
  width: 37px;
  border-top: 1px var(--text-muted) solid;
  margin: 16px 0 10px;
}

.getting-started-content-aside-document-text-wrapper {
  position: relative;
}

.getting-started-content-aside-document-text-copy {
  position: absolute;
  top: 96px;
  left: 36px;
  max-width: 300px;
  font-weight: 600;
  font-size: 20px;
}

.getting-started-title {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .getting-started-title {
    font-size: 24px;
  }
}

.getting-started-skip-link {
  position: absolute;
  right: 20px;
  top: 20px;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  font-size: 12px;
}
.getting-started-skip-link, .getting-started-skip-link:focus, .getting-started-skip-link:visited {
  color: var(--text-lighter);
}
.getting-started-skip-link:hover, .getting-started-skip-link:active {
  color: var(--text-muted-alt);
}
@media (min-width: 992px) {
  .getting-started-skip-link {
    font-size: 16px;
  }
}

.getting-started-questions {
  text-align: left;
  opacity: 1;
  transition: opacity var(--transition-medium) ease;
}
.getting-started-questions.transitioning {
  opacity: 0;
}
.getting-started-questions.first-page {
  height: 700px;
}
@media (min-width: 768px) {
  .getting-started-questions.first-page {
    height: auto;
  }
}

.getting-started-question-title-wrapper {
  padding-bottom: 40px;
}

.getting-started-question-title {
  margin-bottom: 15px;
  font-weight: 500;
  font-size: 16px;
}

.getting-started-question-title-optional {
  color: var(--text-muted);
}

.getting-started-question-subtitle {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
}

.getting-started-secondary-question-title-wrapper {
  padding-top: 30px;
  padding-bottom: 20px;
}

.getting-started-secondary-question-title {
  font-size: 14px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .getting-started-secondary-question-title {
    font-size: 16px;
  }
}

.getting-started-question {
  margin-bottom: 30px;
}
.getting-started-question .input-lg, .getting-started-question .input-group-lg > .form-control,
.getting-started-question .input-group-lg > .input-group-addon,
.getting-started-question .input-group-lg > .input-group-btn > .btn {
  font-size: 16px;
}

.getting-started-question-info {
  display: flex;
  align-items: flex-start;
  margin-top: 15px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted-alt);
}

.getting-started-question-info-icon {
  margin-top: 2px;
  margin-right: 7px;
  width: 14px;
  min-width: 14px;
  height: auto;
}

.getting-started-question-option-container {
  padding: 0 5px;
}

.getting-started-question-options {
  flex-wrap: wrap;
  transition: opacity var(--transition-fast) ease;
}
.getting-started-question-options.submitting {
  opacity: 0.4;
}
.getting-started-question-options.options-natural-size .getting-started-question-option {
  width: auto;
}
.getting-started-question-options.options-medium-size .getting-started-question-option {
  width: 140px;
}
.getting-started-question-options.options-small-size .getting-started-question-option {
  width: 88.33px;
}

.getting-started-question-option {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 5px;
  padding: 12px 5px 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  transition: all var(--transition-fast) ease;
  border-radius: 4px;
  white-space: nowrap;
}
.getting-started-question-option.with-icon {
  padding: 16px 20px 16px 20px;
}
.getting-started-question-option svg {
  width: 20px;
  height: 20px;
  margin-right: 15px;
}
.getting-started-question-option svg.forms-icon {
  margin-top: -4px;
}
.getting-started-question-option b {
  text-decoration: underline;
}
.getting-started-question-option:hover, .getting-started-question-option:focus {
  color: var(--text-default);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--black) 3%, transparent);
  transform: scale(1.005);
}
.getting-started-question-option:active {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--black) 5%, transparent);
  transform: scale(0.997);
}
.getting-started-question-option.active {
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 75%, transparent);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--color-primary) 10%, transparent);
  transform: scale(1);
}
.getting-started-question-option.active:hover, .getting-started-question-option.active:focus {
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 10%, transparent);
  transform: scale(1.005);
}
.getting-started-question-option.start-trial-option {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
@media (min-width: 768px) {
  .getting-started-question-option {
    margin-bottom: 10px;
    padding: 12px 16px;
  }
}
.single-column .getting-started-question-option {
  margin-bottom: 6px;
  padding: 16px 20px 16px 20px;
}
@media (min-width: 992px) {
  .single-column .getting-started-question-option {
    padding-left: 25px;
    padding-right: 25px;
  }
}
.single-column .getting-started-question-option.with-icon {
  padding: 16px 20px 16px 60px;
}

.getting-started-work-frequency-team-size-question .getting-started-question-options {
  display: flex;
}
.getting-started-work-frequency-team-size-question .getting-started-question-option {
  padding-top: 14px;
  margin-right: 10px;
  align-content: center;
  display: flex;
  justify-content: center;
}
.getting-started-work-frequency-team-size-question .getting-started-question-option:last-child {
  margin-right: 0;
}

.getting-started-question-option-icon {
  position: absolute;
  top: 8px;
  left: 18px;
}
.getting-started-question-option-icon.ion-compose {
  top: 6px;
  font-size: 19px;
}
.getting-started-question-option-icon.ion-ios-camera {
  top: 5px;
  font-size: 21px;
}
.getting-started-question-option-icon.ion-ios-videocam {
  top: 6px;
  font-size: 20px;
}
.getting-started-question-option-icon.ion-asterisk {
  top: 9px;
  left: 18px;
  font-size: 15px;
}
.single-column .getting-started-question-option-icon {
  top: 8px;
  left: 20px;
  font-size: 27px;
}
.single-column .getting-started-question-option-icon.ion-asterisk {
  font-size: 15px;
  top: 15px;
}
.single-column .getting-started-question-option-icon.ion-ios-person {
  left: 22px;
}
.single-column .getting-started-question-option-icon.ion-minus-round {
  top: 11px;
  left: 22px;
  font-size: 23px;
}
.single-column .getting-started-question-option-icon.ion-android-time {
  top: 10px;
  font-size: 24px;
}
.single-column .getting-started-question-option-icon.ion-ios-moon {
  top: 0;
  left: 23px;
  font-size: 37px;
}
.single-column .getting-started-question-option-icon.ion-ios-paperplane-outline {
  top: 3px;
  left: 19px;
  font-size: 34px;
}
.single-column .getting-started-question-option-icon.ion-ios-list-outline {
  top: 8px;
  left: 21px;
  font-size: 26px;
}
.single-column .getting-started-question-option-icon.ion-social-usd-outline {
  left: 22px;
}

.getting-started-question-option-all {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  padding: 10px 10px 7px;
  cursor: pointer;
  border-radius: 4px;
  background: var(--bg-content);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--black) 15%, transparent);
  border-radius: 4px;
  transition: color var(--transition-normal) ease, box-shadow var(--transition-normal) ease, transform var(--transition-normal) ease;
}
.getting-started-question-option-all, .getting-started-question-option-all:focus, .getting-started-question-option-all:visited {
  color: var(--text-default);
}
.getting-started-question-option-all:hover {
  color: var(--text-default);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--black) 10%, transparent);
  transform: scale(1.01);
}
.getting-started-question-option-all:active {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--black) 10%, transparent);
  transform: scale(0.99);
}

.getting-started-question-other-type {
  position: relative;
  padding: 20px 20px 20px;
  margin: 15px 0 0;
  font-size: 16px;
  font-weight: 600;
  background: var(--bg-grey-fa);
  border: 1px solid var(--border-content);
  border-radius: 4px;
}

.getting-started-question-other-fields {
  display: flex;
  align-items: center;
}

.getting-started-question-other-cta {
  width: 110px;
  margin-left: 15px;
}
@media (min-width: 768px) {
  .getting-started-question-other-cta {
    width: 170px;
  }
}

.getting-started-index-buttons {
  text-align: center;
}
.getting-started-index-buttons.skip-to-dashboard {
  padding: 20px 0 20px;
}
@media (max-width: 768px) {
  .getting-started-index-buttons {
    position: fixed;
    bottom: 20px;
    left: 20px;
    max-width: 60px;
  }
  .getting-started-index-buttons .btn-outline-primary {
    padding: 9px 18px;
    background: var(--bg-content);
  }
  .getting-started-index-buttons.skip-to-dashboard {
    max-width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid var(--border-content);
    padding: 20px;
  }
}

.getting-started-back-link {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
}
.getting-started-back-link:focus {
  color: color-mix(in srgb, var(--color-primary) 96%, var(--black));
}

.getting-started-next-button button {
  margin-top: 40px;
}
@media (max-width: 768px) {
  .getting-started-next-button {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--bg-content);
    border-top: 1px solid var(--border-content);
    padding: 20px 20px 20px 100px;
  }
  .getting-started-next-button.first-page {
    padding-left: 20px;
  }
  .getting-started-next-button button {
    margin-top: 0 !important;
  }
}

.getting-started-progress-dots {
  position: relative;
  display: flex;
  top: 11px;
  align-items: center;
  z-index: 3;
  float: right;
}
@media (min-width: 768px) {
  .getting-started-progress-dots {
    top: 13px;
    transform: none;
  }
}
.invoice-form-content-top-bar .getting-started-progress-dots {
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -5px;
}

.getting-started-progress-dot {
  width: 10px;
  height: 5px;
  margin: 0 10px 0 0;
  background: var(--border-content-alt);
  border-radius: 10px;
  transition: all var(--transition-normal) ease;
  position: relative;
}
@media (min-width: 768px) {
  .getting-started-progress-dot {
    width: 12px;
    height: 5px;
    margin: 0 12px 0 0;
  }
}
.getting-started-progress-dot:last-child:before {
  display: none;
}
.getting-started-progress-dot:last-child {
  margin: 0;
}
.getting-started-progress-dot.active {
  width: 20px;
  background: var(--color-primary-dark);
  border-radius: 10px;
}
@media (min-width: 768px) {
  .getting-started-progress-dot.active {
    width: 20px;
  }
}

.getting-started-questions-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.getting-started-feature-sets {
  margin: 55px -10px 0;
}

.getting-started-feature-set {
  display: inline-block;
  float: left;
  width: 100%;
  padding: 10px;
}
@media (min-width: 480px) {
  .getting-started-feature-set {
    width: 50%;
  }
}
@media (min-width: 992px) {
  .getting-started-feature-set {
    width: 20%;
  }
}

.getting-started-feature-set-in {
  min-height: 200px;
  padding: 40px 30px;
  text-align: center;
  cursor: pointer;
  background: var(--bg-content);
  transition: all var(--transition-normal) ease;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--black) 10%, transparent);
}
@media (min-width: 768px) {
  .getting-started-feature-set-in {
    min-height: 200px;
  }
  .getting-started-feature-set-in:hover {
    background: var(--bg-content);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--black) 14%, transparent);
    transform: scale(1.01);
  }
}
.getting-started-feature-set-in.active {
  background: var(--bg-content);
  box-shadow: 0 0 5px color-mix(in srgb, var(--black) 10%, transparent), inset 0 0 0 4px color-mix(in srgb, var(--color-primary) 70%, transparent);
  transform: scale(1);
}

.getting-started-feature-set-img {
  margin-bottom: 20px;
  width: 100%;
  max-width: 100px;
}
@media (min-width: 768px) {
  .getting-started-feature-set-img {
    filter: grayscale(0.2);
    transition: all var(--transition-normal) ease;
  }
  .getting-started-feature-set-in:hover .getting-started-feature-set-img {
    filter: grayscale(0);
  }
}
.getting-started-feature-set-in.active .getting-started-feature-set-img {
  filter: grayscale(1);
  opacity: 0.15;
  transform: scale(0.9);
}

.getting-started-feature-set-icon {
  position: absolute;
  left: 0;
  top: 5%;
  width: 100%;
  font-size: 88px;
  line-height: 88px;
  color: var(--color-primary);
  transform: scale(0);
}
.getting-started-feature-set-in.active .getting-started-feature-set-icon {
  animation: scale-up var(--transition-normal) forwards;
}

.getting-started-feature-set-name {
  font-size: 18px;
  color: var(--text-muted);
  user-select: none;
}
@media (min-width: 768px) {
  .getting-started-feature-set-name {
    color: var(--text-muted);
    transition: all var(--transition-normal) ease;
  }
  .getting-started-feature-set-in:hover .getting-started-feature-set-name {
    color: var(--text-muted);
  }
}
.getting-started-feature-set-in.active .getting-started-feature-set-name {
  color: var(--text-default);
}

.getting-started-btns {
  text-align: center;
  padding-top: 30px;
}
@media (min-width: 768px) {
  .getting-started-btns {
    padding-top: 50px;
  }
}

.getting-started-feature-demo {
  padding-top: 20px;
  text-align: center;
}

.getting-started-feature-demo-link {
  font-size: 14px;
}
.getting-started-feature-demo-link, .getting-started-feature-demo-link:focus, .getting-started-feature-demo-link:visited {
  color: var(--text-lighter);
}
.getting-started-feature-demo-link:hover, .getting-started-feature-demo-link:active {
  color: var(--text-muted-alt);
}

.getting-started-page-tiles {
  margin-top: 100px;
}

.getting-started-actions {
  display: flex;
  align-content: stretch;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.getting-started-action {
  display: inline-block;
  width: 50%;
  padding: 10px;
}
@media (min-width: 768px) {
  .getting-started-action {
    width: 25%;
  }
}

.getting-started-action-in {
  display: block;
  padding: 30px 15px 25px;
  text-align: center;
  cursor: pointer;
  background: var(--bg-content);
  transition: all var(--transition-normal) ease;
  box-shadow: 0 1px 12px color-mix(in srgb, var(--bg-shadow) 10%, transparent);
  border-radius: 4px;
}
@media (min-width: 480px) {
  .getting-started-action-in {
    height: 100%;
    padding: 40px 30px 35px;
  }
}
@media (min-width: 768px) {
  .getting-started-action-in {
    height: 100%;
  }
  .getting-started-action-in:hover {
    background: var(--bg-content);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--bg-shadow) 14%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 75%, transparent);
    transform: scale(1.02);
  }
}

.getting-started-action-img {
  margin-bottom: 20px;
  width: 100%;
  max-width: 100px;
}

.getting-started-action-name {
  font-size: 14px;
  font-weight: normal;
  color: var(--text-muted);
  user-select: none;
}
@media (min-width: 480px) {
  .getting-started-action-name {
    font-size: 16px;
  }
}
@media (min-width: 600px) {
  .getting-started-action-name {
    color: var(--text-muted);
    font-size: 16px;
    transition: all var(--transition-fast) ease;
  }
  .getting-started-action-in:hover .getting-started-action-name {
    color: var(--text-muted);
  }
}
@media (min-width: 1300px) {
  .getting-started-action-name {
    font-size: 18px;
  }
}

.getting-started-action-sample {
  text-align: center;
  margin-top: 15px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}
@media (min-width: 768px) {
  .getting-started-action-sample {
    font-size: 16px;
  }
}

.getting-started-action-sample-link, .getting-started-action-sample-link:focus, .getting-started-action-sample-link:visited {
  color: var(--text-muted);
  text-decoration: underline;
}
.getting-started-action-sample-link:hover, .getting-started-action-sample-link:active {
  color: var(--text-muted);
  text-decoration: underline;
}

.getting-started-actions-faq-section {
  margin-top: 40px;
  text-align: center;
  font-size: 16px;
}

.getting-started-actions-faq-link {
  position: relative;
  padding-left: 30px;
}
.getting-started-actions-faq-link, .getting-started-actions-faq-link:focus, .getting-started-actions-faq-link:visited {
  color: var(--text-lighter);
}
.getting-started-actions-faq-link:hover, .getting-started-actions-faq-link:active {
  color: var(--text-muted-alt);
}

.getting-started-actions-faq-icon {
  position: absolute;
  top: -7px;
  left: 0;
  font-size: 1.5em;
}

.getting-started-question.start-trial-question .getting-started-question-title-wrapper {
  margin-top: 20px;
  padding-bottom: 0;
}
.getting-started-question.start-trial-question .getting-started-question-title {
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  color: var(--text-default);
  margin-bottom: 20px;
}
.getting-started-question.start-trial-question .subscription-plan-chooser-total-coupon-toggle {
  font-size: 12px;
}
.getting-started-question.start-trial-question .subscription-plan-trialing-referral-banner {
  margin-top: 15px;
}
.getting-started-question.start-trial-question .credit-card-security-notice {
  font-size: 12px;
}

.start-trial-question-payment-form {
  background: var(--bg-grey-fa);
  border-radius: 5px;
  padding: 5px 0;
  margin-top: 15px;
}
@media (min-width: 768px) {
  .start-trial-question-payment-form {
    padding: 20px 60px;
  }
}
.start-trial-question-payment-form .start-trial-question-included-title {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin: 20px 0 20px;
}
.start-trial-question-payment-form .subscription-plan-chooser-includes {
  display: flex;
  flex-flow: row wrap;
  padding: 0 20px;
  margin-bottom: -10px;
  border-top: none;
}
.start-trial-question-payment-form .subscription-plan-chooser-includes.with-columns {
  padding: 0;
  flex-flow: row;
  justify-content: space-between;
}
.start-trial-question-payment-form .subscription-plan-chooser-includes-item {
  width: 50%;
  padding-left: 15px;
  font-size: 12px;
}
@media (min-width: 768px) {
  .start-trial-question-payment-form .subscription-plan-chooser-includes-item {
    padding-left: 25px;
    font-size: 14px;
  }
}
.start-trial-question-payment-form .with-columns .subscription-plan-chooser-includes-item {
  width: 100%;
}
.start-trial-question-payment-form.variant_b .start-trial-question-included-title {
  margin-top: 15px;
}
@media (min-width: 768px) {
  .start-trial-question-payment-form.variant_b .credit-card-inner-form {
    margin-top: 20px;
  }
}

@media (min-width: 768px) {
  .getting-started-country-state-question {
    display: flex;
    gap: 15px;
  }
}

.getting-started-country-question {
  flex-grow: 3;
}

.getting-started-state-question {
  margin-top: 15px;
  width: 210px;
}
@media (min-width: 768px) {
  .getting-started-state-question {
    margin-top: 0;
  }
}

.getting-started-start-trial-question-option {
  border-radius: 7px;
  width: 100%;
}

.getting-started-starting-point-option {
  color: var(--text-default) !important;
  padding: 12px 10px;
}
.getting-started-starting-point-option svg {
  width: 16px;
  height: 16px;
  margin-right: 15px;
}
@media (min-width: 768px) {
  .getting-started-starting-point-option {
    padding: 12px 16px;
  }
}

.getting-started-book-demo {
  padding-top: 50px;
}
.getting-started-book-demo h1 {
  font-size: 24px;
  font-weight: 500;
  color: var(--text-default);
}
.getting-started-book-demo p {
  max-width: 520px;
  font-size: 16px;
  color: var(--text-muted);
}

.getting-started-book-demo-skip {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding-bottom: 120px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
}
.getting-started-book-demo-skip a,
.getting-started-book-demo-skip a:focus,
.getting-started-book-demo-skip a:visited {
  color: var(--text-muted);
  text-decoration: underline;
}
.getting-started-book-demo-skip a:hover,
.getting-started-book-demo-skip a:active {
  color: var(--text-default);
  text-decoration: underline;
}

.getting-started-book-demo-skip-icon {
  position: relative;
  top: 2px;
  width: 8px;
  height: auto;
  margin-left: 10px;
}
.getting-started-book-demo-skip-icon path {
  fill: var(--text-muted);
}
a:hover + .getting-started-book-demo-skip-icon path {
  fill: var(--text-default);
}

.getting-started-annual-revenue-question {
  width: 100%;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}
.board {
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  min-height: 300px;
}
.tasks-board-wrapper .board {
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 768px) {
  .tasks-board-wrapper .board {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.board:hover::-webkit-scrollbar-thumb {
  visibility: visible;
}

.board::-webkit-scrollbar {
  height: 8px;
}

.board::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: transparent;
  margin: 0 60px;
}

.board::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: var(--text-lightest);
  visibility: hidden;
}

.board-groups {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}

.board-group {
  display: inline-block;
  vertical-align: top;
  width: 300px;
  margin-right: 40px;
}
.board-group:last-child {
  margin-right: 0;
}
.board-group.board-group--deals {
  width: 340px;
  margin-right: 0;
}

.board-group-cards {
  position: relative;
  height: 90%;
}
.board-group-cards > div {
  scrollbar-width: none;
}
.board-group-cards > div::-webkit-scrollbar {
  display: none;
}
.board-group-cards::-webkit-scrollbar {
  display: none;
}
.board-group-cards.board-group-cards--dragging-over::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0px;
  right: 40px;
  bottom: 0;
  background: var(--bg-grey-fc);
}

.board-group-cards-item {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 20px;
  border: 1px solid var(--border-content);
  border-radius: 8px;
  margin-bottom: 10px;
  background-color: var(--bg-content);
  min-height: 100px;
}
.board-group-cards-item:hover {
  border-color: var(--border-content-alt);
  box-shadow: 0px 2px 14px color-mix(in srgb, var(--black) 4%, transparent);
}
.board-group-cards-item.project-card.with-budget {
  min-height: 108px;
}

.board-group-cards-item-name {
  color: var(--text-default);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
  max-width: calc(100% - 20px);
  word-break: normal;
  overflow-wrap: anywhere;
}

.board-group-cards-item-color {
  position: absolute;
  left: -1px;
  top: 24px;
  height: 15px;
  width: 3px;
  pointer-events: none;
  border-radius: 0 1px 1px 0;
}

.board-group-cards-item-description {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}
.board-group-cards-item-description.with-budget {
  max-width: calc(100% - 30px);
}

.board-group-cards-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 15px;
}
.board-group-cards-item-tags.with-budget {
  padding-right: 40px;
}

.board-group-cards-item-budget {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
}

.board-group-cards-item-budget-circle {
  position: relative;
  text-align: center;
  width: 36px;
  height: 36px;
}

.board-group-cards-item-budget-circle-bg {
  fill: none;
  stroke: var(--bg-grey-e);
  stroke-width: 3.8;
}

.board-group-cards-item-budget-circle-path {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress var(--transition-slower) ease-out forwards;
  stroke: var(--color-primary);
}
.board-group-cards-item-budget-circle-path.near-budget {
  stroke: var(--color-accent-yellow-dark);
}
.board-group-cards-item-budget-circle-path.over-budget {
  stroke: var(--color-danger);
}

.board-group-cards-item-budget-percentage {
  font-size: 10px;
  font-weight: 500;
  fill: var(--text-lighter);
  text-anchor: middle;
}

.board-group-title-counter {
  position: relative;
  padding: 0 10px 0 12px;
  color: var(--text-muted-alt);
  font-size: 14px;
  font-weight: 400;
}

.board-group-title {
  position: relative;
  margin-bottom: 20px;
}

.board-group:hover .board-group-title-actions {
  opacity: 1;
  visibility: visible;
}

.board-group-title-actions {
  position: relative;
  right: -10px;
  display: flex;
  flex-direction: row;
  gap: 0;
  float: right;
  visibility: visible;
  opacity: 1;
}
@media (min-width: 768px) {
  .board-group-title-actions {
    visibility: hidden;
    opacity: 0;
  }
}

.board-group-title-dropdown.list-item-dd-toggle {
  position: relative;
  top: 0;
  width: 40px !important;
  height: 30px;
  display: flex;
  align-items: center;
}
.board-group-title-dropdown.list-item-dd-toggle .list-item-dd-toggle-link {
  padding: 0 !important;
}
.board-group-title-dropdown.list-item-dd-toggle .list-item-dd-toggle-dots {
  opacity: 1;
}

.new-board-group-modal-color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0px 18px;
}

.new-board-group-modal-color-option {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
}
.new-board-group-modal-color-option.selected {
  border: 3px solid;
  box-shadow: inset 0 0 0 2px white;
}

.board-card-item-dropdown {
  visibility: visible;
  top: 5px !important;
  right: 20px;
  height: 40px;
}
@media (min-width: 768px) {
  .board-card-item-dropdown {
    visibility: hidden;
  }
}
.board-group-cards-item:hover .board-card-item-dropdown, .board-card-item-dropdown.board-card-item-dropdown--showing {
  visibility: visible;
}
.board-card-item-dropdown.open {
  visibility: visible;
}
.board-card-item-dropdown:has(.dropdown-menu:empty) {
  display: none;
}

.board-group-delete-modal-copy {
  padding: 40px;
  font-size: 18px;
  text-align: center;
}

.height-preserving-container:empty {
  min-height: calc(var(--child-height));
  box-sizing: border-box;
}

@media (max-width: 766px) {
  .team-members .table-list-actions {
    padding: 0;
  }
  .team-members .list-item-in .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .team-members .list-item-in .row:before, .team-members .list-item-in .row:after {
    display: none;
  }
  .team-members .list-item-in .list-item-title {
    margin: 0;
  }
  .team-members .list-item-in .table-list-column {
    flex-basis: 100%;
    margin-bottom: 10px;
  }
  .team-members .list-item-in .table-list-column-name {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    order: 0;
  }
  .team-members .list-item-in .table-list-column-email {
    color: var(--text-muted);
    font-weight: 400;
    order: 2;
  }
  .team-members .list-item-in .table-list-column-role,
  .team-members .list-item-in .table-list-column-projects {
    flex-basis: auto;
    order: 2;
    margin-bottom: 0;
  }
  .team-members .list-item-in .table-list-column-projects .list-item-title {
    font-size: 14px;
    padding: 7px 40px 7px 15px;
  }
  .team-members .list-item-in .table-list-column-joined {
    color: #292a2d;
    font-weight: 400;
    order: 1;
  }
  .team-members .list-item-in .table-list-column-category {
    margin: -1px 0 -4px;
  }
  .team-members .list-item-in .team-member-role {
    min-width: 100px;
  }
}

.table-list-column-role,
.table-list-column-permission_profile,
.table-list-column-projects,
.table-list-column-teams {
  position: relative;
  padding-right: 15px;
}

.team-member-seats-settings-link {
  color: var(--text-default);
  text-decoration: none;
}
.team-member-seats-settings-link:hover, .team-member-seats-settings-link:visited, .team-member-seats-settings-link:active, .team-member-seats-settings-link:focus {
  color: var(--text-default);
  text-decoration: underline;
}

.team-member-projects .dropdown-contained,
.team-member-teams .dropdown-contained {
  position: absolute;
  z-index: 10;
  top: -4px;
  left: calc(var(--ghost-input-side-width) * -1);
  width: 200px;
}
@media (min-width: 768px) {
  .team-member-projects .dropdown-contained,
  .team-member-teams .dropdown-contained {
    width: 100%;
    min-width: 200px;
  }
}

#team-member-invite-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

#team-member-tooltip {
  z-index: calc(var(--z-drawer) + 1);
}

.role-drawer > div {
  scrollbar-width: none;
}
.role-drawer > div::-webkit-scrollbar {
  display: none;
}

.role-drawer-header {
  padding: 60px 20px 30px 20px;
  user-select: none;
}
@media (min-width: 768px) {
  .role-drawer-header {
    padding: 40px 120px 30px 40px;
  }
}

.role-drawer-body {
  padding: 0 20px 90px;
}
@media (min-width: 768px) {
  .role-drawer-body {
    padding: 0 40px 90px;
  }
}

.role-drawer-categories {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.role-drawer-category {
  width: calc(100% + 30px);
  margin-left: -15px;
}

.role-drawer-category-header {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  padding: 15px;
  user-select: none;
  cursor: pointer;
  border-radius: 6px;
}
@media (min-width: 768px) {
  .role-drawer-category-header:hover {
    background: var(--bg-grey-fc);
  }
}

.role-drawer-category-header-chevron {
  position: relative;
  top: 1px;
  width: 16px;
  height: auto;
  margin-left: 15px;
  color: var(--color-primary);
}
.role-drawer-category.expanded .role-drawer-category-header-chevron {
  transform: rotate(180deg);
}

.role-drawer-category-header-title {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1em;
  margin: 0;
}

.role-drawer-category-header-count {
  display: none;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-lighter);
  margin-left: auto;
}
@media (min-width: 768px) {
  .role-drawer-category-header-count {
    display: block;
  }
}

.role-drawer-category-sections {
  display: none;
  flex-direction: column;
}
.role-drawer-category.expanded .role-drawer-category-sections {
  display: flex;
}

.role-drawer-category-section {
  margin: 10px 15px;
  padding: 15px 10px;
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}

.team-member-edit-header {
  position: relative;
  display: flex;
  align-items: center;
  padding: 40px 110px 40px 40px;
}

.team-member-edit-dropdown {
  position: absolute;
  right: 50px;
  top: 3px;
}
@media (min-width: 768px) {
  .team-member-edit-dropdown {
    right: 40px;
    top: 40px;
  }
}

.team-member-edit-header-avatar {
  margin-right: 20px;
}

.team-member-edit-header-name {
  position: relative;
  top: -2px;
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.team-member-edit-header-email {
  font-size: 14px;
  font-weight: 400;
}

.team-member-edit-content {
  padding: 0 40px 40px;
}

.team-member-edit-field-title {
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: 600;
}

.team-member-edit-field-subtitle {
  margin-top: 7px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}

.team-member-edit-section {
  padding: 30px;
  background: var(--bg-grey-fd);
  border: 1px solid var(--border-content-alt);
  border-radius: 10px;
}

.team-member-edit-rates-label {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
}

.team-member-edit-rates-sublabel {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}

.team-member-confirm-rate-modal-options {
  border: 1px solid var(--border-content);
  border-radius: 10px;
}

.team-member-confirm-rate-modal-option {
  border-bottom: 1px solid var(--border-content);
}
.team-member-confirm-rate-modal-option:last-child {
  border-bottom: none;
}
.team-member-confirm-rate-modal-option .radio-label {
  padding: 20px 20px 20px 50px;
}
.team-member-confirm-rate-modal-option .radio-fill {
  left: 20px;
  top: 23px;
}

.team-member-confirm-rate-modal-option-label {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 500;
}

.team-member-confirm-rate-modal-option-sublabel {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}

.team-member-edit-daily-capacity {
  display: flex;
  gap: 15px;
}

.team-member-edit-daily-capacity-option {
  flex: 1;
  text-align: center;
}

.team-member-edit-daily-capacity-option-header {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 21px;
}
.team-member-edit-daily-capacity-option-header.black {
  color: var(--text-default);
}

.team-member-edit-daily-capacity-option-total {
  color: var(--text-muted);
  padding: 5px 0;
}

.reports-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 768px) {
  .reports-list {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.report-item {
  position: relative;
  width: 100%;
  padding: 20px;
  cursor: pointer;
  background: var(--bg-content);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}
.report-item, .report-item:focus, .report-item:visited {
  text-decoration: none;
  outline: none;
}
.report-item:focus {
  border-color: var(--border-content-alt);
}
@media (min-width: 768px) {
  .report-item:hover {
    border: 1px solid var(--border-content-alt);
    box-shadow: 0 2px 14px color-mix(in srgb, var(--bg-shadow) 3%, transparent);
  }
}

.report-item-title {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
  color: var(--text-default);
  margin: 0 0 10px;
}

.report-new-badge {
  display: inline-block;
  padding: 4px 6px 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1em;
  color: var(--color-primary-contrast);
  background-color: var(--color-primary);
  border-radius: 4px;
  text-transform: uppercase;
  vertical-align: middle;
}

.report-item-description {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}

.request-report-footer {
  margin: 20px 0 0;
  padding: 15px;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 160%;
  background: var(--bg-grey-fc);
  border: 1px solid var(--border-content);
  border-radius: 6px;
}
.request-report-footer p {
  margin: 0;
}
.request-report-footer a {
  color: var(--color-primary);
}

.report-preview-image {
  width: 340px;
  height: 188px;
  background: none right bottom no-repeat;
  background-size: contain;
}
.report-preview-image.activity_report {
  background-image: url("reports/feature_preview/activity_report.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .report-preview-image.activity_report {
    background-image: url("reports/feature_preview/activity_report@2x.png");
  }
}
.report-preview-image.utilization_report {
  background-image: url("reports/feature_preview/utilization_report.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .report-preview-image.utilization_report {
    background-image: url("reports/feature_preview/utilization_report@2x.png");
  }
}
.report-preview-image.team_profitability_report {
  background-image: url("reports/feature_preview/team_profitability_report.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .report-preview-image.team_profitability_report {
    background-image: url("reports/feature_preview/team_profitability_report@2x.png");
  }
}
.report-preview-image.client_profitability_report {
  background-image: url("reports/feature_preview/client_profitability_report.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .report-preview-image.client_profitability_report {
    background-image: url("reports/feature_preview/client_profitability_report@2x.png");
  }
}
.report-preview-image.project_profitability_report {
  background-image: url("reports/feature_preview/project_profitability_report.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .report-preview-image.project_profitability_report {
    background-image: url("reports/feature_preview/project_profitability_report@2x.png");
  }
}
.report-preview-image.project_profitability_forecast_report {
  background-image: url("reports/feature_preview/project_profitability_forecast_report.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .report-preview-image.project_profitability_forecast_report {
    background-image: url("reports/feature_preview/project_profitability_forecast_report@2x.png");
  }
}
.report-preview-image.project_health_report {
  background-image: url("reports/feature_preview/project_health_report.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .report-preview-image.project_health_report {
    background-image: url("reports/feature_preview/project_health_report@2x.png");
  }
}
.report-preview-image.project_billing_report {
  background-image: url("reports/feature_preview/project_billing_report.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .report-preview-image.project_billing_report {
    background-image: url("reports/feature_preview/project_billing_report@2x.png");
  }
}
.report-preview-image.estimated_vs_actual_tasks_report {
  background-image: url("reports/feature_preview/estimated_vs_actual_tasks_report.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .report-preview-image.estimated_vs_actual_tasks_report {
    background-image: url("reports/feature_preview/estimated_vs_actual_tasks_report@2x.png");
  }
}
.report-preview-image.service_report {
  background-image: url("reports/feature_preview/service_report.png");
}
@media only screen and (min-resolution: 1.5dppx) {
  .report-preview-image.service_report {
    background-image: url("reports/feature_preview/service_report@2x.png");
  }
}
.report-preview-image.time_profitability_report, .report-preview-image.utilization_forecast_report, .report-preview-image.capacity_forecast_report, .report-preview-image.deals_revenue_forecast_report {
  display: none;
}

.reports-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 28px;
}
.reports-header-container.reports-header-container--with-chart {
  margin-bottom: 40px;
}

.reports-header-container-date-display {
  display: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted-alt);
  margin-right: 20px;
}
@media (min-width: 768px) {
  .reports-header-container-date-display {
    display: block;
  }
}

.report-export-csv-btn {
  display: flex;
  align-items: center;
  width: 46px;
  padding-left: 0;
}
@media (min-width: 768px) {
  .report-export-csv-btn {
    width: auto;
    padding-left: 40px;
  }
  .report-export-csv-btn:hover path.fill-none {
    stroke: var(--text-default);
  }
  .report-export-csv-btn:hover path:not(.fill-none) {
    fill: var(--text-default);
  }
}

.time-capacity-page .list-grid-col-headers:has(+ .list-grid-col-headers) .list-grid-col-header-title .list-grid-col-header-label {
  display: none;
}
.time-capacity-page .list-grid-col-headers:has(+ .list-grid-col-headers) .list-grid-col-header + .list-grid-col-header {
  border-left: 1px solid var(--border-semi-transparent-alt);
}
.time-capacity-page .list-grid-col-footer + .list-grid-col-footer {
  display: none;
}

.data-source-toggle-header {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-default);
  padding: 3px 12px;
}

.data-source-toggle-option {
  padding: 2px 12px;
}

.custom-fields-modal-new-field-options-menu {
  top: 40px;
  width: 136px;
}

.custom-fields-modal-new-field-option {
  color: var(--text-default);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
  cursor: pointer;
}
.custom-fields-modal-new-field-option:last-child {
  margin-bottom: 0;
}
.custom-fields-modal-new-field-option:hover {
  color: var(--color-primary);
}

.custom-fields-modal-form-field {
  position: relative;
  margin-bottom: 20px;
  max-width: 100%;
}
.custom-fields-modal .custom-fields-modal-form-field {
  max-width: 320px;
}
.custom-fields-modal-form-field .form-field-with-icon.icon-left .form-field {
  padding-right: 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}
.custom-fields-modal-form-field .form-field-with-icon.icon-left .form-field:focus, .custom-fields-modal-form-field .form-field-with-icon.icon-left .form-field:hover {
  color: var(--text-default);
}
.custom-fields-modal-form-field:hover .custom-fields-modal-form-delete-icon {
  display: block;
}

.custom-fields-modal-form-delete-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  display: none;
}
.custom-fields-modal-form-delete-icon svg {
  width: 15px;
  height: auto;
}
.custom-fields-modal-form-delete-icon path {
  fill: var(--color-danger);
}
.custom-fields-modal-form-field.custom-fields-modal-form-field--editing .custom-fields-modal-form-delete-icon {
  display: none;
}

.custom-fields-modal-form-options-dropdown {
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
}
.custom-fields-modal-form-options-dropdown .list-item-dd-toggle-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.custom-fields-modal-form-options-dropdown svg {
  width: 15px;
  height: auto;
}

.custom-fields-modal-form-field--select .form-field-with-icon.icon-left .form-field {
  background-color: var(--bg-content);
  border: 1px solid var(--border-darker);
}

.custom-fields-modal-form-done {
  position: absolute;
  top: 9px;
  right: 12px;
  display: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  cursor: pointer;
}
.custom-fields-modal-form-field.custom-fields-modal-form-field--editing .custom-fields-modal-form-done {
  display: block;
}

.custom-fields-modal-form-field-icon {
  position: absolute;
  top: 11px;
  left: 11px;
  right: auto;
  color: var(--text-lighter);
  font-size: 24px;
  width: 17px;
  height: 17px;
  text-align: center;
}
.custom-fields-modal-form-field-icon.custom-fields-modal-form-field-icon--text {
  width: 15px;
  height: auto;
  top: 13px;
  left: 12px;
}
.custom-fields-modal-form-field-icon.custom-fields-modal-form-field-icon--members {
  width: 16px;
  height: auto;
  top: 13px;
  left: 12px;
}
.custom-fields-modal-form-field-icon.custom-fields-modal-form-field-icon--select {
  width: 14px;
  height: auto;
  top: 14px;
  left: 12px;
}

.custom-fields-modal-delete-confirmation {
  position: absolute;
  top: 50px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 20px;
  max-width: 320px;
  font-size: 16px;
  background: var(--bg-content);
  box-shadow: 0px 2px 12px 0px color-mix(in srgb, var(--black) 12%, transparent);
  border-radius: 8px;
}
.custom-fields-modal-delete-confirmation hr {
  width: 320px;
  margin: 20px 0;
}

.custom-fields-modal-delete-confirmation-icon {
  position: absolute;
  right: 5px;
  top: 5px;
  height: 30px;
  width: 30px;
  padding: 10px;
  opacity: 0.5;
}
.custom-fields-modal-delete-confirmation-icon:hover {
  opacity: 0.7;
}

.custom-field-value-wrapper {
  position: relative;
  padding-left: 20px;
}
.list-grid-item-cell .custom-field-value-wrapper {
  flex-grow: 1;
  flex-shrink: 0;
  padding-left: 0;
  max-width: 100%;
}
.custom-field-value-wrapper .ghost-form-control:focus, .custom-field-value-wrapper .ghost-form-display:focus {
  background-color: var(--bg-content);
}

.custom-field-value-icon {
  position: absolute;
  top: 7px;
  left: 0;
  color: var(--text-lighter);
  font-size: 24px;
  width: 16px;
  height: 16px;
}
.custom-field-value-icon.custom-field-value-icon--number {
  top: 7px;
  left: -1px;
}
.custom-field-value-icon.custom-field-value-icon--text {
  width: 14px;
  height: auto;
  top: 8.5px;
}
.custom-field-value-icon.custom-field-value-icon--select {
  width: 14px;
  height: auto;
  top: 8px;
  left: 1px;
}

.custom-field-value-text,
.custom-field-value-text-display {
  height: auto;
  min-height: 30px;
  font-size: 14px;
  resize: none;
}
.list-grid-item-cell .custom-field-value-text:focus,
.list-grid-item-cell .custom-field-value-text-display:focus {
  background-color: var(--bg-content);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.custom-field-value-text.ghost-input-toggle-placeholder,
.custom-field-value-text-display.ghost-input-toggle-placeholder {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

textarea.custom-field-value-text.ghost-form-control, textarea.custom-field-value-text.ghost-form-display {
  white-space: pre-wrap;
}

.custom-field-value-url {
  width: calc(100% - 35px) !important;
}

.custom-field-value-url-open-link {
  position: absolute;
  z-index: 10;
  display: none;
  align-items: center;
  right: 1px;
  top: 1px;
  height: 28px;
  padding: 0 6px 0 7px;
  cursor: pointer;
  background: var(--bg-panel);
  border: 1px solid var(--border-content);
  border-radius: 6px;
  box-shadow: 0 1px 6px color-mix(in srgb, var(--black) 5%, transparent);
}
.task-item.task-list-compact .custom-field-value-url-open-link {
  top: 4px;
  right: 10px;
}
.list-grid-item-cell .custom-field-value-url-open-link {
  z-index: 4;
  top: 50%;
  transform: translateY(-50%);
  right: 5px;
}
.list-grid-item-cell:hover .custom-field-value-url-open-link {
  display: flex;
}
.page-properties-section-item-editable .custom-field-value-url-open-link {
  top: -4px;
}
.custom-field-value-url-open-link:hover {
  border: 1px solid var(--border-content-alt);
}
.custom-field-value-wrapper:hover .custom-field-value-url-open-link, .page-properties-section-item-editable:hover .custom-field-value-url-open-link, .drawer-side-field-item:hover .custom-field-value-url-open-link {
  display: flex;
}

.custom-field-value-url-open-link-icon {
  position: relative;
  height: 15px;
  width: auto;
}
.custom-field-value-url-open-link-icon path {
  fill: var(--text-default);
}

.custom-field-draggable-list [data-rfd-droppable-context-id] {
  user-select: none;
  margin-bottom: 20px;
}
.custom-field-draggable-list [data-rfd-droppable-context-id] [data-rfd-draggable-id] {
  position: relative;
}
.custom-field-draggable-list [data-rfd-droppable-context-id] [data-rfd-draggable-id]:hover .custom-field-drag-handle {
  display: block;
}

.custom-field-draggable-list-item {
  margin-bottom: 15px;
}
.custom-field-draggable-list-item .custom-fields-modal-form-field {
  margin-bottom: 0;
}

.custom-field-drag-handle {
  position: absolute;
  left: -15px;
  top: 12px;
  width: 15px;
  cursor: grab;
  opacity: 0.15;
}
.custom-field-drag-handle svg {
  width: 9px;
  height: auto;
}
.custom-field-drag-handle path {
  fill: var(--text-default);
}
.custom-field-settings .custom-field-drag-handle {
  display: block;
}
.custom-field-draggable-list-item:hover .custom-field-drag-handle {
  opacity: 0.5;
}
.custom-field-drag-handle:hover, .custom-field-draggable-list-item:hover .custom-field-drag-handle:hover {
  opacity: 1;
}
@media (min-width: 768px) {
  .custom-field-drag-handle {
    left: -20px;
    width: 20px;
  }
}

.select-custom-field-modal .modal-body-content {
  padding-left: 60px;
  padding-right: 60px;
  position: relative;
}
.select-custom-field-modal .form-group-spacing {
  margin-bottom: 30px;
}
.select-custom-field-modal .options-container {
  position: relative;
  margin-bottom: 12px;
}
.select-custom-field-modal .options-container .form-field {
  width: 100%;
  display: block;
}
.select-custom-field-modal .options-container:hover .custom-fields-modal-form-delete-icon {
  display: block;
}
.select-custom-field-modal .options-container .custom-fields-modal-form-delete-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  display: none;
  z-index: 10;
}
.select-custom-field-modal .options-container .custom-fields-modal-form-delete-icon svg {
  width: 15px;
  height: auto;
}
.select-custom-field-modal .options-container .custom-fields-modal-form-delete-icon path {
  fill: var(--color-danger);
}
.select-custom-field-modal .add-option-container {
  margin-top: 12px;
}
.select-custom-field-modal .add-option-link {
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}
.select-custom-field-modal .add-option-link.disabled {
  color: var(--text-lighter);
  cursor: not-allowed;
}
.select-custom-field-modal .add-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  font-size: 16px;
  font-weight: 600;
}
.select-custom-field-modal .error-message {
  margin-top: 10px;
}
.select-custom-field-modal .button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
}

.custom-field-select-editing {
  position: relative;
  z-index: 999;
}

.custom-field-inline-select .Select__control {
  border: 1px solid #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.custom-field-inline-display {
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  min-height: 36px;
  display: flex;
  align-items: center;
  transition: all var(--transition-normal) ease;
}
.custom-field-inline-display:hover {
  background-color: #f8f9fa;
  border-color: #e9ecef;
}
.custom-field-inline-display--empty {
  color: var(--text-lighter);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-field-inline-display--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.custom-field-inline-display--disabled:hover {
  background-color: transparent;
  border-color: transparent;
}

.custom-field-select-toggle {
  color: inherit;
  cursor: pointer;
}
.custom-field-select-toggle.ghost-input-toggle-placeholder {
  cursor: pointer;
}

.custom-field-member-avatar-list {
  display: flex;
  align-items: center;
}
.custom-field-member-avatar-list.custom-field-member-avatar-list--full-size {
  height: 20px;
}

.custom-field-select-disabled {
  cursor: default;
}

.select-custom-field-modal.select-custom-field-modal--hidden {
  display: none;
}

.purchase-order-editor-page {
  padding-top: 40px;
  padding-bottom: 120px;
}
.purchase-order-editor-page.with-side-panel {
  min-height: 100vh;
}
@media (min-width: 1200px) {
  .purchase-order-editor-page.with-side-panel {
    padding-right: var(--document-editor-width);
  }
}

.purchase-order-editor-wrapper {
  max-width: var(--invoice-wrapper-width);
  width: 100%;
  margin: auto;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 768px) {
  .purchase-order-editor-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.purchase-order-editor-wrapper .purchase-order-top-action-button.disabled {
  pointer-events: all;
}
.purchase-order-editor-wrapper a:not(.btn) {
  font-family: var(--font-sans-serif);
  color: var(--color-primary);
}

.purchase-order-project-info a:not(.btn), .purchase-order-project-info a:not(.btn):focus, .purchase-order-project-info a:not(.btn):visited {
  color: var(--text-default);
}
.purchase-order-project-info a:not(.btn):hover, .purchase-order-project-info a:not(.btn):active {
  color: var(--text-default);
  text-decoration: underline;
}

.purchase-order-editor-wrapper label,
.purchase-order-client-wrapper label {
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: 0.075em;
  color: var(--text-lighter);
  text-transform: uppercase;
}

.purchase-order-label-tooltip-icon {
  margin-left: 1px;
  font-size: 12px;
  color: var(--text-muted-alt);
}

@media print {
  .purchase-order-top-actions {
    display: none;
  }
}

.purchase-order-editor {
  position: relative;
  z-index: 1;
  padding-bottom: 80px;
  font-size: 14px;
  color: var(--text-default);
  background-color: var(--bg-content);
  border: 1px solid var(--border-content);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--black) 2%, transparent);
  border-radius: 4px;
}
@media print {
  .purchase-order-editor {
    border: none;
  }
}
.purchase-order-editor .ghost-form-control,
.purchase-order-editor .ghost-form-display {
  font-size: 14px;
}
.purchase-order-editor .SingleDatePicker .DateInput_input,
.purchase-order-editor .DateRangePicker .DateInput_input {
  font-size: 14px;
}
.purchase-order-editor .purchase-order-bottom-section {
  font-size: 14px;
  font-family: var(--font-sans-serif);
  border-top: 1px solid var(--border-content);
}
.purchase-order-editor .SingleDatePicker .DateInput_input:hover,
.purchase-order-editor .purchase-order-editor-dates-due-date-input-wrapper:hover {
  background: var(--bg-input-hover);
}

.purchase-order-editor-saving-bg {
  position: absolute;
  display: none;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
}

.purchase-order-editor-stamp {
  position: absolute;
  z-index: 10;
  right: 4%;
  top: 15px;
  width: 80px;
  max-width: 40%;
  height: auto;
}
@media (min-width: 768px) {
  .purchase-order-editor-stamp {
    right: 5%;
    width: 120px;
  }
}
.purchase-order-editor-stamp.classic-stamp {
  top: -20px;
  right: -20px;
}

.purchase-order-top-logo-wrapper {
  position: absolute;
  z-index: 2;
  text-align: center;
  top: 60px;
  right: 60px;
  transform: scale(1);
}

.purchase-order-top-logo-img-display {
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.purchase-order-top-logo-img-display.logo-small_square {
  width: 80px;
  height: 80px;
}
.purchase-order-top-logo-img-display.logo-big_square {
  width: 110px;
  height: 110px;
}
.purchase-order-top-logo-img-display.logo-small_rectangle {
  width: 120px;
  height: 60px;
}
.purchase-order-top-logo-img-display.logo-big_rectangle {
  width: 180px;
  height: 90px;
}

.purchase-order-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.purchase-order-editor-top {
  position: relative;
  padding: 60px 20px 48px;
}
@media (min-width: 768px) {
  .purchase-order-editor-top {
    padding-left: 60px;
    padding-right: 60px;
  }
}
.purchase-order-editor-top.without-logo {
  padding: 60px 40px 40px;
}
.purchase-order-editor-top.without-title {
  padding: 60px 20px 40px;
}
.purchase-order-editor-top.without-logo.without-title {
  height: 48px;
  padding: 0;
}
.purchase-order-editor-top.with-logo {
  padding-top: 40px;
}
.purchase-order-editor-top.without-logo {
  padding-top: 60px;
}
.purchase-order-editor-top .image-uploader-top-logo-img {
  background-size: contain;
}
.purchase-order-editor-top.with-background-image {
  padding-top: 200px;
}
.purchase-order-editor-top.with-background-image .purchase-order-top-logo-wrapper.logo-small_square {
  margin-top: -92px;
}
.purchase-order-editor-top.with-background-image .purchase-order-top-logo-wrapper.logo-big_square {
  margin-top: -105px;
}
.purchase-order-editor-top.with-background-image .purchase-order-top-logo-wrapper.logo-small_rectangle {
  margin-top: -90px;
}
.purchase-order-editor-top.with-background-image .purchase-order-top-logo-wrapper.logo-big_rectangle {
  margin-top: -100px;
}
.purchase-order-editor-top.with-background-image .purchase-order-top-logo-img-display {
  background: var(--white) center center no-repeat;
  border: 2px solid var(--white);
  background-size: contain;
  box-shadow: 0 1px 1px color-mix(in srgb, var(--black) 12%, transparent), 0 0px 0px 1px color-mix(in srgb, var(--black) 7%, transparent);
  border-radius: 4px;
}
.purchase-order-editor-top.with-background-image.without-logo {
  padding-top: 190px;
}

.purchase-order-editor-cover-header-bg.with-image {
  height: 150px;
  border-radius: 4px 4px 0 0;
}
.purchase-order-editor-cover-header-bg .header-background-image-delete,
.purchase-order-editor-cover-header-bg .header-background-image-add,
.purchase-order-editor-cover-header-bg .header-background-image-loading {
  left: 10px;
  right: auto;
}
.purchase-order-editor-cover-header-bg .header-background-image-edit {
  left: 46px;
  right: auto;
}

.purchase-order-relative-header-bg {
  position: relative;
  height: auto;
}
.purchase-order-relative-header-bg.with-image {
  height: auto;
  padding-bottom: 17.5%;
}

.purchase-order-title-form-group {
  text-align: center;
}

.purchase-order-title-input,
.purchase-order-title-display {
  width: 100%;
  padding: 15px 0 10px;
  min-height: 32px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  text-align: inherit;
}

.purchase-order-title-input {
  border-radius: 6px;
}
.purchase-order-title-input:hover {
  background-color: var(--bg-input-hover);
}
.purchase-order-editor .purchase-order-title-input {
  min-height: 62px;
}

.purchase-order-title-project {
  text-align: center;
}

.purchase-order-title-project-link {
  font-size: 14px;
  font-weight: 500;
}
.purchase-order-title-project-link, .purchase-order-title-project-link:focus, .purchase-order-title-project-link:visited {
  color: var(--text-muted-alt);
}
.purchase-order-title-project-link:hover, .purchase-order-title-project-link:active {
  color: var(--text-muted);
}
.purchase-order-title-project-link.blank {
  pointer-events: none;
  color: var(--text-muted);
}

.purchase-order-title-project-link-icon {
  position: relative;
  top: 1px;
  margin-right: 5px;
  margin-left: -5px;
  font-size: 1.1em;
  opacity: 0.4;
}

.purchase-order-po-number-group {
  position: absolute;
  top: 15px;
  left: 17px;
  max-width: 200px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted-alt);
  word-break: break-word;
}

.purchase-order-po-number-group-label {
  margin-right: 5px;
  color: var(--text-lighter);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  vertical-align: middle;
}

.purchase-order-number-form-group {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 30px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 3px;
}
.purchase-order-number-form-group .purchase-order-number-label {
  position: absolute;
  left: 9px;
  top: 6px;
  margin: 0;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-muted);
}

.purchase-order-number-content-editable {
  min-width: 28px;
  min-height: 20px;
}

.purchase-order-number-header-input {
  right: 0;
  max-width: 190px;
  min-height: 28px;
  padding-left: 80px;
  padding-right: 8px;
  text-align: right;
  font-weight: 600;
}
.purchase-order-number-header-input.purchase-order-number-header-input--classic {
  min-width: 122px;
}
.purchase-order-number-header-input.purchase-order-number-header-input--classic::before {
  display: none;
}

.purchase-order-po-number-input {
  position: absolute;
  top: 10px;
  left: 10px;
}

.purchase-order-editor-people {
  padding: 50px 20px 0px;
  border-top: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .purchase-order-editor-people {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media print {
  .purchase-order-editor-people .col-sm-6 {
    display: inline-block;
    float: left;
    width: 50%;
    margin-top: 0;
  }
}

.purchase-order-person-input {
  width: 100%;
  color: var(--text-default);
}
.purchase-order-person-input.purchase-order-person-autofilled-item {
  margin-bottom: 3px;
}

.purchase-order-person-email-display {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted-alt);
  word-break: break-word;
}

textarea.purchase-order-person-address-input,
.purchase-order-person-address-input {
  width: 100%;
  min-height: 34px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  resize: none;
}
textarea.purchase-order-person-address-input:focus,
.purchase-order-person-address-input:focus {
  resize: none;
}

.purchase-order-person-address-link,
.purchase-order-editor-item-header a {
  cursor: pointer;
}
.purchase-order-person-address-link:hover,
.purchase-order-editor-item-header a:hover {
  background: var(--bg-input-hover);
}
.purchase-order-person-address-link:focus,
.purchase-order-editor-item-header a:focus {
  background: var(--bg-input-hover);
  box-shadow: none;
}

.purchase-order-person-address-text {
  white-space: pre-wrap;
}

.purchase-order-person-add-address {
  color: var(--color-primary);
  text-align: left;
  font-weight: 600;
}

.purchase-order-person-company-input {
  width: 100%;
  font-weight: 400;
  color: var(--text-muted);
}

.purchase-order-person-company-display {
  padding-right: 7px;
  word-break: break-word;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.purchase-order-person-address-display {
  width: 100%;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  word-break: break-word;
  white-space: pre-line;
}

.purchase-order-person-autofilled-item {
  min-height: 30px;
  line-height: 1.41;
  padding: 4px 0 4px;
}

.purchase-order-editor-new-client-link {
  position: relative;
  display: block;
  margin-top: 5px;
  padding: 30px 20px 30px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  border: 1px dashed;
  border-radius: 5px;
}

.purchase-order-editor-dates {
  padding: 20px 20px 52px;
  border-bottom: 1px solid var(--border-content);
}
@media (min-width: 768px) {
  .purchase-order-editor-dates {
    padding-left: 60px;
    padding-right: 60px;
  }
}

.purchase-order-date-input.ghost-form-control, .purchase-order-date-input.ghost-form-display {
  position: relative;
  z-index: 3;
  margin-left: -8px;
  padding: 0;
  font-size: 14px;
}
.purchase-order-date-input.ghost-form-control:has(.DateInput_input__focused), .purchase-order-date-input.ghost-form-display:has(.DateInput_input__focused) {
  z-index: 100;
}
@media (min-width: 768px) {
  .purchase-order-date-input.ghost-form-control.ghost-form-pull-right, .purchase-order-date-input.ghost-form-pull-right.ghost-form-display {
    margin-left: 8px;
  }
  .purchase-order-date-input.ghost-form-control.ghost-form-pull-right .SingleDatePicker .DateInput_input, .purchase-order-date-input.ghost-form-pull-right.ghost-form-display .SingleDatePicker .DateInput_input {
    text-align: right;
  }
}
.purchase-order-date-input.ghost-form-control .SingleDatePickerInput, .purchase-order-date-input.ghost-form-display .SingleDatePickerInput {
  border: none;
}
.purchase-order-date-input.ghost-form-control .SingleDatePicker .DateInput_input, .purchase-order-date-input.ghost-form-display .SingleDatePicker .DateInput_input {
  height: 30px;
  padding: 8px 8px 6px;
  text-align: left;
  border-radius: 4px;
}
.purchase-order-date-input.ghost-form-control .SingleDatePicker .DateInput__display-text, .purchase-order-date-input.ghost-form-display .SingleDatePicker .DateInput__display-text {
  text-align: left;
}
.purchase-order-date-input.ghost-form-control .DateInput_input.DateInput_input__focused, .purchase-order-date-input.ghost-form-display .DateInput_input.DateInput_input__focused {
  background: var(--bg-input-hover);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.purchase-order-date-input.ghost-form-control .SingleDatePicker_picker, .purchase-order-date-input.ghost-form-display .SingleDatePicker_picker {
  z-index: 10;
}

.purchase-order-editor-amounts {
  padding: 0 20px 80px;
}
@media (min-width: 768px) {
  .purchase-order-editor-amounts {
    padding-left: 60px;
    padding-right: 60px;
  }
}

.purchase-order-editor-item-group {
  margin: 0;
}

.purchase-order-editor-line-items {
  padding: 40px 0 25px;
  overflow-x: scroll;
}
@media (min-width: 768px) {
  .purchase-order-editor-line-items {
    overflow-x: visible;
  }
}
.purchase-order-editor-line-items .ghost-input-wrapper.has-error .ghost-form-control, .purchase-order-editor-line-items .ghost-input-wrapper.has-error .ghost-form-display {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 70%, transparent);
}
.purchase-order-editor-line-items .with-hidden-rates .items-list-item-rate,
.purchase-order-editor-line-items .with-hidden-rates .items-list-item-amount,
.purchase-order-editor-line-items .with-hidden-rates .items-list-item-tax-rate {
  visibility: hidden;
  display: none;
}

.purchase-order-editor-line-item-labels {
  padding: 0 20px 0 20px;
}
@media (min-width: 768px) {
  .purchase-order-editor-line-item-labels {
    padding: 0 60px 0 60px;
  }
}
.purchase-order-editor-line-item-labels label {
  margin-bottom: 0;
  color: var(--text-lighter);
}

.purchase-order-editor-item-error {
  position: absolute;
  top: 12px;
  left: -12px;
  color: var(--color-danger);
  height: 23px;
  width: 23px;
  text-align: center;
  background: var(--bg-content);
  border: 1px solid var(--color-danger);
  border-radius: 50%;
}
.purchase-order-editor-item-error svg {
  width: 10px;
  height: auto;
}

.purchase-order-editor-line-item {
  position: relative;
  padding: 8px 20px;
  font-size: 14px;
}
@media (min-width: 768px) {
  .purchase-order-editor-line-item {
    padding: 8px 60px;
  }
}
.purchase-order-editor-line-item.focused-inputs .ghost-form-control, .purchase-order-editor-line-item.focused-inputs .ghost-form-display {
  background: color-mix(in srgb, var(--black) 3%, transparent);
  border: none;
  box-shadow: inset 0 0 1px color-mix(in srgb, var(--black) 10%, transparent);
}
.purchase-order-editor-line-item .ghost-input-toggle,
.purchase-order-editor-line-item .ghost-form-control,
.purchase-order-editor-line-item .ghost-form-display {
  font-weight: 400;
}
.purchase-order-editor-line-item .ghost-form-control, .purchase-order-editor-line-item .ghost-form-display {
  display: block;
  width: 100%;
}
.purchase-order-editor-line-item .ghost-form-control:focus, .purchase-order-editor-line-item .ghost-form-display:focus {
  border: none;
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.purchase-order-editor-line-item .ghost-form-display {
  box-shadow: none;
}
.purchase-order-editor-line-item .line-item-unit-type {
  font-weight: 400;
}

.purchase-order-editor-line-item-columns {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.purchase-order-editor-line-item .item-remove,
.purchase-order-editor-discount-section .item-remove,
.purchase-order-editor-expense-item .item-remove {
  width: 21px;
  height: auto;
  padding: 5px;
  opacity: 1;
  transition: all var(--transition-fast) ease;
  backface-visibility: hidden;
  text-align: right;
}
.purchase-order-editor-line-item .item-remove path,
.purchase-order-editor-discount-section .item-remove path,
.purchase-order-editor-expense-item .item-remove path {
  fill: var(--color-danger);
}
@media (min-width: 768px) {
  .purchase-order-editor-line-item .item-remove,
  .purchase-order-editor-discount-section .item-remove,
  .purchase-order-editor-expense-item .item-remove {
    opacity: 0;
    transform: translateX(-15px);
    transform: translate3d(-15px, 0, 0);
  }
}
.purchase-order-editor-line-item:hover .item-remove,
.purchase-order-editor-discount-section:hover .item-remove,
.purchase-order-editor-expense-item:hover .item-remove {
  opacity: 1;
  transform: translateX(0);
  transform: translate3d(0, 0, 0);
}

.purchase-order-editor-line-item-remove {
  display: inline-block;
  font-weight: 500;
  font-size: 12px;
  color: var(--color-danger);
}
@media (min-width: 768px) {
  .purchase-order-editor-line-item-remove {
    display: none;
  }
}

.purchase-order-editor-line-item-drag-handler {
  position: absolute;
  display: none;
  left: 10px;
  height: 30px;
  font-size: 19px;
  top: 7px;
  padding: 4px 15px;
  cursor: pointer;
  opacity: 0.5;
  transition: all var(--transition-normal) ease;
}
@media (min-width: 768px) {
  .purchase-order-editor-line-item:hover .purchase-order-editor-line-item-drag-handler, .purchase-order-editor-line-item.focused-inputs .purchase-order-editor-line-item-drag-handler {
    display: block;
  }
}

.purchase-order-editor-item-total {
  position: relative;
  z-index: 1;
  min-height: 30px;
  padding: 7px 0 4px;
  line-height: 1.41;
  font-size: 14px;
  font-weight: 400;
  cursor: default;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.purchase-order-editor-item-total.placeholder {
  color: var(--text-lightest);
}

.purchase-order-editor-item-total-val {
  min-height: 30px;
  padding: 5px 0 4px;
  font-size: 14px;
  font-weight: 400;
  cursor: default;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-order-editor-subtotal-section {
  position: relative;
  padding: 35px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.purchase-order-editor-subtotal-label {
  position: relative;
  display: inline-block;
  float: left;
  width: 50%;
}

.purchase-order-editor-subtotal-value {
  position: relative;
  display: inline-block;
  float: left;
  width: 50%;
  text-align: right;
}

.purchase-order-editor-total-section {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  margin-top: 30px;
  padding: 30px 0 0;
  font-size: 14px;
  font-weight: 500;
  border-top: 1px solid var(--border-content);
}

.purchase-order-editor-total-label {
  position: relative;
  display: inline-block;
  float: left;
  width: 25%;
}

.purchase-order-editor-total-value {
  position: relative;
  display: flex;
  flex: 1;
  text-align: right;
  justify-content: flex-end;
  align-items: center;
}

.purchase-order-bottom-section {
  position: relative;
  padding: 50px 20px 40px;
  color: var(--text-default);
}
.purchase-order-bottom-section .dropdown-contained .Select__value-container {
  font-size: 16px;
}
.purchase-order-bottom-section .dropdown-contained .Select__single-value {
  max-width: 100% !important;
}
@media print {
  .purchase-order-bottom-section {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}
@media (min-width: 768px) {
  .purchase-order-bottom-section {
    padding-left: 60px;
    padding-right: 60px;
  }
}
.purchase-order-bottom-section.purchase-order-notes .purchase-order-notes-input {
  font-weight: 400;
}
.purchase-order-bottom-section label {
  display: block;
}
.purchase-order-bottom-section .new-form-input {
  vertical-align: middle;
}
.purchase-order-bottom-section .form-attachment-uploader-placeholder {
  font-size: 14px;
}

.purchase-order-label-icon {
  margin-left: 7px;
  opacity: 0.7;
}

.purchase-order-label-icon-tooltip {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.purchase-order-notes textarea.ghost-textarea {
  min-height: 54px !important;
}

.purchase-order-notes-label {
  margin-bottom: 10px;
}

.purchase-order-bottom-actions {
  position: relative;
  padding: 20px 0 0;
  text-align: center;
}

.purchase-order-item-uneditable .ghost-form-control:hover, .purchase-order-item-uneditable .ghost-form-display:hover, .purchase-order-item-uneditable .ghost-form-control:focus, .purchase-order-item-uneditable .ghost-form-display:focus, .purchase-order-item-uneditable .ghost-form-control:active, .purchase-order-item-uneditable .ghost-form-display:active {
  background: none;
  border: none;
  box-shadow: none;
}

.purchase-order-editor-item-group-controls-wrapper {
  position: absolute;
  display: none;
  top: 35px;
  left: 100%;
  opacity: 0;
  transition: all var(--transition-fast) ease;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
@media (min-width: 768px) {
  .purchase-order-editor-item-group-controls-wrapper {
    display: block;
    margin-left: -15px;
  }
}
@media (min-width: 992px) {
  .purchase-order-editor-item-group-controls-wrapper {
    margin-left: 0;
    padding-left: 5px;
    transform: translateX(-15px);
    transform: translate3d(-15px, 0, 0);
  }
  .purchase-order-editor-item-group:hover .purchase-order-editor-item-group-controls-wrapper {
    opacity: 1;
    transform: translateX(0);
    transform: translate3d(0, 0, 0);
  }
}

.purchase-order-editor-item-group-controls {
  width: 36px;
  text-align: center;
  background: var(--bg-content);
  font-family: var(--font-sans-serif);
  border: 1px solid var(--border-content);
  box-shadow: 0 1px 12px color-mix(in srgb, var(--black) 5%, transparent);
}
@media (min-width: 768px) {
  .purchase-order-editor-item-group-controls {
    border-radius: 5px;
  }
}

.purchase-order-editor-item-group-actions {
  position: sticky;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 17px;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 768px) {
  .purchase-order-editor-item-group-actions {
    position: relative;
    padding-left: 60px;
    padding-right: 60px;
  }
}

.purchase-order-item-add-item {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}
.purchase-order-item-add-item a {
  display: block;
}
.purchase-order-item-add-item i {
  padding-right: 7px;
  position: relative;
  top: 1px;
}
@media (min-width: 478px) {
  .purchase-order-item-add-item a {
    display: inline;
  }
}

.purchase-order-editor-item-group-delete-button {
  display: block;
  padding: 9px 7px 8px;
  line-height: 0;
}
.purchase-order-editor-item-group-delete-button, .purchase-order-editor-item-group-delete-button:focus, .purchase-order-editor-item-group-delete-button:visited {
  color: var(--color-danger);
}
.purchase-order-editor-item-group-delete-button:hover, .purchase-order-editor-item-group-delete-button:active {
  color: color-mix(in srgb, var(--color-danger) 95%, var(--black));
}

.purchase-order-items-subtotal {
  margin-top: 35px;
  color: var(--text-default);
  font-size: 14px;
}

.purchase-order-editor-top {
  position: relative;
  padding: 60px 20px 40px;
}
@media (min-width: 768px), print {
  .purchase-order-editor-top {
    padding: 70px 60px 40px;
  }
}

.purchase-order-editor-title {
  color: var(--text-default);
  font-size: 26px;
  font-weight: 500;
  padding-right: 90px;
}

.purchase-order-editor-title-company {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 400;
}

.purchase-order-editor-header-col {
  width: 100%;
  line-break: anywhere;
  padding-right: 10px;
}
@media (min-width: 768px), print {
  .purchase-order-editor-header-col {
    width: 33.3333%;
  }
}
.purchase-order-editor-header-col .mt20.relative:has(.DateInput_input__focused),
.purchase-order-editor-header-col .mt20.relative:focus-within {
  z-index: 100;
}

.purchase-order-member-field {
  position: relative;
  right: 8.5px;
  padding: 5px 13.5px 5px 8.5px;
  border-radius: 6px;
  height: 30px;
}
.purchase-order-member-field:hover {
  background-color: var(--bg-input-hover);
  color: var(--text-muted);
  text-decoration: none;
}

.purchase-order-member-field-selected {
  position: relative;
  right: 8.5px;
  padding: 5px 13.5px 5px 8.5px;
  border-radius: 6px;
}
.purchase-order-member-field-selected:hover {
  background-color: var(--bg-input-hover);
  color: var(--text-muted);
  text-decoration: none;
}

.purchase-order-member-field-dropdown {
  height: 30px;
}

.document-status-label.purchase-order-status.sent .document-status-bg {
  background: var(--bg-grey-e);
  opacity: 1;
}
.document-status-label.purchase-order-status.sent .document-status-dot {
  background: var(--bg-grey-8);
}
.document-status-label.purchase-order-status.approved .document-status-bg {
  background: var(--bg-info-light);
  opacity: 1;
}
.document-status-label.purchase-order-status.approved .document-status-dot {
  background: var(--color-accent-blue);
}