@font-face {
    font-family: 'icomoon';
    src:  url('./icomoon.eot?xbsn4s');
    src:  url('./icomoon.eot?xbsn4s#iefix') format('embedded-opentype'),
    url('./icomoon.ttf?xbsn4s') format('truetype'),
    url('./icomoon.woff?xbsn4s') format('woff'),
    url('./icomoon.svg?xbsn4s#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  scale: 1.1;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-error:before {
  content: "\e900";
}

.icon-error_outline:before {
  content: "\e901";
}

.icon-warning:before {
  content: "\e902";
}

.icon-notification_important:before {
  content: "\e903";
}

.icon-album:before {
  content: "\e904";
}

.icon-av_timer:before {
  content: "\e905";
}

.icon-equalizer:before {
  content: "\e906";
}

.icon-fast_forward:before {
  content: "\eb7a";
}

.icon-fast_rewind:before {
  content: "\eb7b";
}

.icon-loop:before {
  content: "\e907";
}

.icon-library_add:before {
  content: "\e908";
}

.icon-library_books:before {
  content: "\e909";
}

.icon-new_releases:before {
  content: "\e90a";
}

.icon-not_interested:before {
  content: "\e90b";
}

.icon-pause:before {
  content: "\eb7c";
}

.icon-pause_circle_outline:before {
  content: "\eb7d";
}

.icon-play_arrow:before {
  content: "\eb7e";
}

.icon-play_circle_filled:before {
  content: "\eb7f";
}

.icon-play_circle_outline:before {
  content: "\eb80";
}

.icon-playlist_add:before {
  content: "\e90c";
}

.icon-recent_actors:before {
  content: "\e90d";
}

.icon-repeat:before {
  content: "\e90e";
}

.icon-repeat_one:before {
  content: "\e90f";
}

.icon-replay:before {
  content: "\e910";
}

.icon-shuffle:before {
  content: "\e911";
}

.icon-skip_next:before {
  content: "\e912";
}

.icon-skip_previous:before {
  content: "\e913";
}

.icon-stop:before {
  content: "\e914";
}

.icon-subtitles:before {
  content: "\e915";
}

.icon-surround_sound:before {
  content: "\e916";
}

.icon-video_library:before {
  content: "\e917";
}

.icon-web:before {
  content: "\e918";
}

.icon-sort_by_alpha:before {
  content: "\e919";
}

.icon-airplay:before {
  content: "\e91a";
}

.icon-add_to_queue:before {
  content: "\e91b";
}

.icon-fiber_new:before {
  content: "\e91c";
}

.icon-playlist_play:before {
  content: "\e91d";
}

.icon-art_track:before {
  content: "\e91e";
}

.icon-fiber_manual_record:before {
  content: "\e91f";
}

.icon-fiber_smart_record:before {
  content: "\e920";
}

.icon-subscriptions:before {
  content: "\e921";
}

.icon-playlist_add_check:before {
  content: "\e922";
}

.icon-slow_motion_video:before {
  content: "\e923";
}

.icon-web_asset:before {
  content: "\e924";
}

.icon-branding_watermark:before {
  content: "\e925";
}

.icon-call_to_action:before {
  content: "\e926";
}

.icon-featured_play_list:before {
  content: "\e927";
}

.icon-featured_video:before {
  content: "\e928";
}

.icon-note:before {
  content: "\e929";
}

.icon-video_label:before {
  content: "\e92a";
}

.icon-business:before {
  content: "\e92b";
}

.icon-call:before {
  content: "\e92c";
}

.icon-call_made:before {
  content: "\e92d";
}

.icon-call_merge:before {
  content: "\e92e";
}

.icon-call_missed:before {
  content: "\e92f";
}

.icon-call_received:before {
  content: "\e930";
}

.icon-call_split:before {
  content: "\e931";
}

.icon-chat:before {
  content: "\e932";
}

.icon-clear_all:before {
  content: "\e933";
}

.icon-comment:before {
  content: "\e934";
}

.icon-contacts:before {
  content: "\e935";
}

.icon-dialpad:before {
  content: "\e936";
}

.icon-email:before {
  content: "\e937";
}

.icon-forum:before {
  content: "\e938";
}

.icon-live_help:before {
  content: "\e939";
}

.icon-location_off:before {
  content: "\e93a";
}

.icon-location_on:before {
  content: "\e93b";
}

.icon-message:before {
  content: "\e93c";
}

.icon-chat_bubble_outline:before {
  content: "\e93d";
}

.icon-phone:before {
  content: "\e93e";
}

.icon-contact_phone:before {
  content: "\e93f";
}

.icon-contact_mail:before {
  content: "\e940";
}

.icon-vpn_key:before {
  content: "\e941";
}

.icon-present_to_all:before {
  content: "\e942";
}

.icon-import_contacts:before {
  content: "\e943";
}

.icon-mail_outline:before {
  content: "\e944";
}

.icon-screen_share:before {
  content: "\e945";
}

.icon-call_missed_outgoing:before {
  content: "\e947";
}

.icon-rss_feed:before {
  content: "\e948";
}

.icon-alternate_email:before {
  content: "\e949";
}

.icon-mobile_screen_share:before {
  content: "\e94a";
}

.icon-add_call:before {
  content: "\e94b";
}

.icon-cancel_presentation:before {
  content: "\e94c";
}

.icon-pause_presentation:before {
  content: "\e94d";
}

.icon-sentiment_satisfied_alt:before {
  content: "\e94e";
}

.icon-list_alt:before {
  content: "\e94f";
}

.icon-add:before {
  content: "\e950";
}

.icon-add_box:before {
  content: "\e951";
}

.icon-add_circle:before {
  content: "\e952";
}

.icon-add_circle_outline:before {
  content: "\e953";
}

.icon-archive:before {
  content: "\e954";
}

.icon-backspace:before {
  content: "\e955";
}

.icon-block:before {
  content: "\e956";
}

.icon-clear:before {
  content: "\e957";
}

.icon-content_copy:before {
  content: "\e958";
}

.icon-content_paste:before {
  content: "\e959";
}

.icon-create:before {
  content: "\e95a";
}

.icon-drafts:before {
  content: "\e95b";
}

.icon-filter_list:before {
  content: "\e95c";
}

.icon-flag:before {
  content: "\e95d";
}

.icon-forward:before {
  content: "\e95e";
}

.icon-gesture:before {
  content: "\e95f";
}

.icon-inbox:before {
  content: "\e960";
}

.icon-link:before {
  content: "\e961";
}

.icon-remove:before {
  content: "\eb81";
}

.icon-remove_circle:before {
  content: "\eb82";
}

.icon-remove_circle_outline:before {
  content: "\e962";
}

.icon-reply:before {
  content: "\e963";
}

.icon-reply_all:before {
  content: "\e964";
}

.icon-report:before {
  content: "\eb83";
}

.icon-save:before {
  content: "\e965";
}

.icon-select_all:before {
  content: "\eb84";
}

.icon-send:before {
  content: "\e966";
}

.icon-sort:before {
  content: "\e967";
}

.icon-text_format:before {
  content: "\e968";
}

.icon-undo:before {
  content: "\e969";
}

.icon-font_download:before {
  content: "\e96a";
}

.icon-move_to_inbox:before {
  content: "\eb85";
}

.icon-unarchive:before {
  content: "\eb86";
}

.icon-next_week:before {
  content: "\e96b";
}

.icon-weekend:before {
  content: "\e96c";
}

.icon-delete_sweep:before {
  content: "\e96d";
}

.icon-low_priority:before {
  content: "\e96e";
}

.icon-outlined_flag:before {
  content: "\e96f";
}

.icon-save_alt:before {
  content: "\e970";
}

.icon-ballot:before {
  content: "\e971";
}

.icon-file_copy:before {
  content: "\e972";
}

.icon-how_to_reg:before {
  content: "\e973";
}

.icon-how_to_vote:before {
  content: "\e974";
}

.icon-where_to_vote:before {
  content: "\eb87";
}

.icon-add_link:before {
  content: "\e975";
}

.icon-inventory:before {
  content: "\e976";
}

.icon-access_alarm:before {
  content: "\e977";
}

.icon-access_time:before {
  content: "\e978";
}

.icon-brightness_auto:before {
  content: "\e979";
}

.icon-brightness_high:before {
  content: "\e97a";
}

.icon-brightness_low:before {
  content: "\e97b";
}

.icon-data_usage:before {
  content: "\e97c";
}

.icon-devices:before {
  content: "\e97d";
}

.icon-dvr:before {
  content: "\e97e";
}

.icon-gps_fixed:before {
  content: "\e97f";
}

.icon-gps_not_fixed:before {
  content: "\e980";
}

.icon-graphic_eq:before {
  content: "\e981";
}

.icon-network_cell:before {
  content: "\e982";
}

.icon-network_wifi:before {
  content: "\eb88";
}

.icon-nfc:before {
  content: "\e983";
}

.icon-now_wallpaper:before {
  content: "\eb89";
}

.icon-now_widgets:before {
  content: "\e984";
}

.icon-settings_system_daydream:before {
  content: "\e985";
}

.icon-signal_cellular_4_bar:before {
  content: "\eb8a";
}

.icon-signal_cellular_null:before {
  content: "\e986";
}

.icon-signal_wifi_4_bar:before {
  content: "\e987";
}

.icon-signal_wifi_off:before {
  content: "\eb8b";
}

.icon-storage:before {
  content: "\e988";
}

.icon-usb:before {
  content: "\e989";
}

.icon-wifi_tethering:before {
  content: "\e98a";
}

.icon-signal_cellular_alt:before {
  content: "\e98b";
}

.icon-attach_file:before {
  content: "\e98c";
}

.icon-attach_money:before {
  content: "\e98d";
}

.icon-border_all:before {
  content: "\e98e";
}

.icon-format_align_center:before {
  content: "\e98f";
}

.icon-format_align_justify:before {
  content: "\e990";
}

.icon-format_align_left:before {
  content: "\e991";
}

.icon-format_align_right:before {
  content: "\e992";
}

.icon-format_bold:before {
  content: "\e993";
}

.icon-format_clear:before {
  content: "\e994";
}

.icon-format_color_fill:before {
  content: "\e995";
}

.icon-format_color_reset:before {
  content: "\e996";
}

.icon-format_color_text:before {
  content: "\e997";
}

.icon-format_indent_decrease:before {
  content: "\e998";
}

.icon-format_indent_increase:before {
  content: "\e999";
}

.icon-format_italic:before {
  content: "\e99a";
}

.icon-format_line_spacing:before {
  content: "\e99b";
}

.icon-format_list_bulleted:before {
  content: "\e99c";
}

.icon-format_list_numbered:before {
  content: "\e99d";
}

.icon-format_quote:before {
  content: "\e99e";
}

.icon-format_size:before {
  content: "\e99f";
}

.icon-format_underlined:before {
  content: "\e9a0";
}

.icon-insert_chart:before {
  content: "\e9a1";
}

.icon-insert_comment:before {
  content: "\e9a2";
}

.icon-insert_drive_file:before {
  content: "\e9a3";
}

.icon-insert_emoticon:before {
  content: "\e9a4";
}

.icon-insert_invitation:before {
  content: "\e9a5";
}

.icon-insert_photo:before {
  content: "\e9a6";
}

.icon-mode_comment:before {
  content: "\e9a7";
}

.icon-publish:before {
  content: "\e9a8";
}

.icon-space_bar:before {
  content: "\e9a9";
}

.icon-vertical_align_bottom:before {
  content: "\e9aa";
}

.icon-vertical_align_center:before {
  content: "\e9ab";
}

.icon-vertical_align_top:before {
  content: "\e9ac";
}

.icon-wrap_text:before {
  content: "\e9ad";
}

.icon-drag_handle:before {
  content: "\eb8c";
}

.icon-format_shapes:before {
  content: "\e9ae";
}

.icon-linear_scale:before {
  content: "\e9af";
}

.icon-short_text:before {
  content: "\e9b0";
}

.icon-text_fields:before {
  content: "\eb8d";
}

.icon-monetization_on:before {
  content: "\e9b1";
}

.icon-title:before {
  content: "\eb8e";
}

.icon-table_chart:before {
  content: "\e9b2";
}

.icon-add_comment:before {
  content: "\e9b3";
}

.icon-scatter_plot:before {
  content: "\e9b4";
}

.icon-insert_chart_outlined:before {
  content: "\e9b5";
}

.icon-bar_chart:before {
  content: "\e9b6";
}

.icon-notes:before {
  content: "\e9b7";
}

.icon-attachment:before {
  content: "\e9b8";
}

.icon-cloud:before {
  content: "\e9b9";
}

.icon-cloud_circle:before {
  content: "\e9ba";
}

.icon-cloud_done:before {
  content: "\e9bb";
}

.icon-cloud_download:before {
  content: "\e9bc";
}

.icon-cloud_queue:before {
  content: "\e9bd";
}

.icon-cloud_upload:before {
  content: "\eb57";
}

.icon-file_download:before {
  content: "\e9be";
}

.icon-file_upload:before {
  content: "\e9bf";
}

.icon-folder:before {
  content: "\eb6e";
}

.icon-folder_open:before {
  content: "\e9c0";
}

.icon-folder_shared:before {
  content: "\eb74";
}

.icon-cast:before {
  content: "\e9c1";
}

.icon-computer:before {
  content: "\e9c2";
}

.icon-desktop_mac:before {
  content: "\e9c3";
}

.icon-desktop_windows:before {
  content: "\e9c4";
}

.icon-developer_board:before {
  content: "\e9c5";
}

.icon-keyboard:before {
  content: "\e9c6";
}

.icon-keyboard_arrow_down:before {
  content: "\e9c7";
}

.icon-keyboard_arrow_left:before {
  content: "\e9c8";
}

.icon-keyboard_arrow_right:before {
  content: "\e9c9";
}

.icon-keyboard_arrow_up:before {
  content: "\e9ca";
}

.icon-keyboard_backspace:before {
  content: "\e9cb";
}

.icon-keyboard_capslock:before {
  content: "\e9cc";
}

.icon-keyboard_return:before {
  content: "\e9cd";
}

.icon-keyboard_tab:before {
  content: "\e9ce";
}

.icon-laptop_chromebook:before {
  content: "\e9cf";
}

.icon-laptop_mac:before {
  content: "\eb75";
}

.icon-laptop_windows:before {
  content: "\ebb6";
}

.icon-memory:before {
  content: "\e9d0";
}

.icon-phone_android:before {
  content: "\e9d1";
}

.icon-security:before {
  content: "\e9d2";
}

.icon-sim_card:before {
  content: "\e9d3";
}

.icon-tv:before {
  content: "\ebbf";
}

.icon-device_hub:before {
  content: "\e9d4";
}

.icon-power_input:before {
  content: "\eb8f";
}

.icon-devices_other:before {
  content: "\e9d5";
}

.icon-adjust:before {
  content: "\e9d6";
}

.icon-assistant:before {
  content: "\eb90";
}

.icon-blur_circular:before {
  content: "\eb91";
}

.icon-blur_on:before {
  content: "\e9d7";
}

.icon-brightness_1:before {
  content: "\e946";
}

.icon-brightness_2:before {
  content: "\ebdd";
}

.icon-brightness_4:before {
  content: "\eaa2";
}

.icon-broken_image:before {
  content: "\eab5";
}

.icon-camera:before {
  content: "\e9d8";
}

.icon-camera_alt:before {
  content: "\e9d9";
}

.icon-center_focus_strong:before {
  content: "\eb92";
}

.icon-center_focus_weak:before {
  content: "\eb93";
}

.icon-collections:before {
  content: "\e9da";
}

.icon-control_point_duplicate:before {
  content: "\e9db";
}

.icon-crop_16_9:before {
  content: "\e9dc";
}

.icon-crop_3_2:before {
  content: "\e9dd";
}

.icon-crop:before {
  content: "\e9de";
}

.icon-crop_5_4:before {
  content: "\e9df";
}

.icon-crop_7_5:before {
  content: "\e9e0";
}

.icon-crop_din:before {
  content: "\e9e1";
}

.icon-crop_free:before {
  content: "\e9e2";
}

.icon-crop_original:before {
  content: "\e9e3";
}

.icon-crop_portrait:before {
  content: "\e9e4";
}

.icon-crop_square:before {
  content: "\e9e5";
}

.icon-dehaze:before {
  content: "\e9e6";
}

.icon-details:before {
  content: "\e9e7";
}

.icon-filter_center_focus:before {
  content: "\e9e8";
}

.icon-filter_drama:before {
  content: "\e9e9";
}

.icon-filter_none:before {
  content: "\e9ea";
}

.icon-filter_tilt_shift:before {
  content: "\e9eb";
}

.icon-filter_vintage:before {
  content: "\e9ec";
}

.icon-flare:before {
  content: "\e9ed";
}

.icon-flash_on:before {
  content: "\e9ee";
}

.icon-flip:before {
  content: "\eac9";
}

.icon-gradient:before {
  content: "\eaea";
}

.icon-grain:before {
  content: "\e9ef";
}

.icon-grid_on:before {
  content: "\e9f0";
}

.icon-hdr_strong:before {
  content: "\e9f1";
}

.icon-hdr_weak:before {
  content: "\e9f2";
}

.icon-healing:before {
  content: "\e9f3";
}

.icon-iso:before {
  content: "\eaef";
}

.icon-leak_add:before {
  content: "\e9f4";
}

.icon-loupe:before {
  content: "\eb00";
}

.icon-navigate_before:before {
  content: "\e9f5";
}

.icon-navigate_next:before {
  content: "\e9f6";
}

.icon-panorama:before {
  content: "\eb02";
}

.icon-panorama_fisheye:before {
  content: "\e9f7";
}

.icon-picture_as_pdf:before {
  content: "\e9f8";
}

.icon-portrait:before {
  content: "\eb15";
}

.icon-remove_red_eye:before {
  content: "\eb32";
}

.icon-rotate_left:before {
  content: "\e9f9";
}

.icon-rotate_right:before {
  content: "\e9fa";
}

.icon-slideshow:before {
  content: "\e9fb";
}

.icon-style:before {
  content: "\e9fc";
}

.icon-texture:before {
  content: "\eb94";
}

.icon-timelapse:before {
  content: "\e9fd";
}

.icon-tonality:before {
  content: "\e9fe";
}

.icon-tune:before {
  content: "\e9ff";
}

.icon-view_comfy:before {
  content: "\ea00";
}

.icon-view_compact:before {
  content: "\ea01";
}

.icon-wb_sunny:before {
  content: "\ebed";
}

.icon-vignette:before {
  content: "\ea02";
}

.icon-photo_filter:before {
  content: "\ea03";
}

.icon-beenhere:before {
  content: "\ea04";
}

.icon-directions:before {
  content: "\eb95";
}

.icon-layers:before {
  content: "\ea05";
}

.icon-local_attraction:before {
  content: "\ea06";
}

.icon-local_cafe:before {
  content: "\ea07";
}

.icon-local_florist:before {
  content: "\ea08";
}

.icon-local_grocery_store:before {
  content: "\ea09";
}

.icon-local_hospital:before {
  content: "\ea0a";
}

.icon-local_library:before {
  content: "\ea0b";
}

.icon-local_mall:before {
  content: "\ea0c";
}

.icon-local_offer:before {
  content: "\ea0d";
}

.icon-local_printshop:before {
  content: "\eb35";
}

.icon-location_history:before {
  content: "\ea0e";
}

.icon-map:before {
  content: "\ea0f";
}

.icon-navigation:before {
  content: "\ea10";
}

.icon-pin_drop:before {
  content: "\ea11";
}

.icon-rate_review:before {
  content: "\ea12";
}

.icon-directions_run:before {
  content: "\eb42";
}

.icon-add_location:before {
  content: "\eb96";
}

.icon-near_me:before {
  content: "\ea13";
}

.icon-person_pin_circle:before {
  content: "\eb43";
}

.icon-zoom_out_map:before {
  content: "\ea14";
}

.icon-category:before {
  content: "\ea15";
}

.icon-not_listed_location:before {
  content: "\ea16";
}

.icon-edit_attributes:before {
  content: "\ea17";
}

.icon-transit_enterexit:before {
  content: "\eb56";
}

.icon-trip_origin:before {
  content: "\eb97";
}

.icon-compass_calibration:before {
  content: "\ea18";
}

.icon-money:before {
  content: "\ea19";
}

.icon-apps:before {
  content: "\ea1a";
}

.icon-arrow_back:before {
  content: "\eb98";
}

.icon-arrow_drop_down:before {
  content: "\ea1b";
}

.icon-arrow_drop_down_circle:before {
  content: "\ea1c";
}

.icon-arrow_drop_up:before {
  content: "\ea1d";
}

.icon-arrow_forward:before {
  content: "\eb99";
}

.icon-cancel:before {
  content: "\eb9a";
}

.icon-check:before {
  content: "\ea1e";
}

.icon-expand_less:before {
  content: "\eb9b";
}

.icon-expand_more:before {
  content: "\eb9c";
}

.icon-fullscreen:before {
  content: "\ea1f";
}

.icon-fullscreen_exit:before {
  content: "\ea20";
}

.icon-menu:before {
  content: "\ea21";
}

.icon-keyboard_control:before {
  content: "\ea22";
}

.icon-more_vert:before {
  content: "\ea23";
}

.icon-refresh:before {
  content: "\ea24";
}

.icon-unfold_less:before {
  content: "\ea25";
}

.icon-unfold_more:before {
  content: "\ea26";
}

.icon-arrow_upward:before {
  content: "\ea27";
}

.icon-subdirectory_arrow_left:before {
  content: "\ea28";
}

.icon-subdirectory_arrow_right:before {
  content: "\ea29";
}

.icon-arrow_downward:before {
  content: "\ea2a";
}

.icon-first_page:before {
  content: "\ea2b";
}

.icon-last_page:before {
  content: "\ea2c";
}

.icon-arrow_left:before {
  content: "\ea2d";
}

.icon-arrow_right:before {
  content: "\ea2e";
}

.icon-arrow_back_ios:before {
  content: "\eb9d";
}

.icon-arrow_forward_ios:before {
  content: "\eb9e";
}

.icon-disc_full:before {
  content: "\ea2f";
}

.icon-do_not_disturb_alt:before {
  content: "\eb9f";
}

.icon-drive_eta:before {
  content: "\eba0";
}

.icon-event_available:before {
  content: "\ea30";
}

.icon-event_busy:before {
  content: "\ea31";
}

.icon-event_note:before {
  content: "\ea32";
}

.icon-folder_special:before {
  content: "\ea33";
}

.icon-mms:before {
  content: "\ea34";
}

.icon-more:before {
  content: "\ea35";
}

.icon-sms_failed:before {
  content: "\ea36";
}

.icon-vibration:before {
  content: "\eba1";
}

.icon-personal_video:before {
  content: "\eba2";
}

.icon-power:before {
  content: "\ea37";
}

.icon-wifi:before {
  content: "\ea38";
}

.icon-network_check:before {
  content: "\ea39";
}

.icon-priority_high:before {
  content: "\ea3a";
}

.icon-power_off:before {
  content: "\eba3";
}

.icon-pie_chart:before {
  content: "\ea3b";
}

.icon-pie_chart_outlined:before {
  content: "\ea3c";
}

.icon-bubble_chart:before {
  content: "\ea3d";
}

.icon-show_chart:before {
  content: "\ea3e";
}

.icon-group:before {
  content: "\ea3f";
}

.icon-group_add:before {
  content: "\ea40";
}

.icon-location_city:before {
  content: "\ea41";
}

.icon-notifications:before {
  content: "\eba4";
}

.icon-notifications_none:before {
  content: "\ea42";
}

.icon-people_outline:before {
  content: "\ea43";
}

.icon-person:before {
  content: "\ea44";
}

.icon-person_add:before {
  content: "\ea45";
}

.icon-person_outline:before {
  content: "\ea46";
}

.icon-plus_one:before {
  content: "\ea47";
}

.icon-public:before {
  content: "\ea48";
}

.icon-school:before {
  content: "\ea49";
}

.icon-share:before {
  content: "\ea4a";
}

.icon-sentiment_dissatisfied:before {
  content: "\ea4b";
}

.icon-sentiment_neutral:before {
  content: "\ea4c";
}

.icon-sentiment_satisfied:before {
  content: "\ea4d";
}

.icon-sentiment_very_dissatisfied:before {
  content: "\ea4e";
}

.icon-sentiment_very_satisfied:before {
  content: "\ea4f";
}

.icon-check_box:before {
  content: "\ea50";
}

.icon-check_box_outline_blank:before {
  content: "\ea51";
}

.icon-star:before {
  content: "\ea52";
}

.icon-star_half:before {
  content: "\ea53";
}

.icon-star_outline:before {
  content: "\ea54";
}

.icon-account_balance:before {
  content: "\ea55";
}

.icon-account_balance_wallet:before {
  content: "\ea56";
}

.icon-account_box:before {
  content: "\ea57";
}

.icon-account_circle:before {
  content: "\ea58";
}

.icon-aspect_ratio:before {
  content: "\ea59";
}

.icon-autorenew:before {
  content: "\ea5a";
}

.icon-bookmark:before {
  content: "\ea5b";
}

.icon-bookmark_outline:before {
  content: "\ea5c";
}

.icon-build:before {
  content: "\ea5d";
}

.icon-cached:before {
  content: "\eba5";
}

.icon-change_history:before {
  content: "\ea5e";
}

.icon-check_circle:before {
  content: "\eba6";
}

.icon-chrome_reader_mode:before {
  content: "\eba7";
}

.icon-code:before {
  content: "\eba8";
}

.icon-credit_card:before {
  content: "\ea5f";
}

.icon-dashboard:before {
  content: "\ea60";
}

.icon-delete:before {
  content: "\ea61";
}

.icon-description:before {
  content: "\ea62";
}

.icon-dns:before {
  content: "\ea63";
}

.icon-done:before {
  content: "\ea64";
}

.icon-done_all:before {
  content: "\ea65";
}

.icon-exit_to_app:before {
  content: "\ea66";
}

.icon-explore:before {
  content: "\ea67";
}

.icon-extension:before {
  content: "\ea68";
}

.icon-face:before {
  content: "\ea69";
}

.icon-favorite:before {
  content: "\ea6a";
}

.icon-favorite_outline:before {
  content: "\ea6b";
}

.icon-group_work:before {
  content: "\ea6c";
}

.icon-help:before {
  content: "\eba9";
}

.icon-highlight_remove:before {
  content: "\ebaa";
}

.icon-history:before {
  content: "\ebab";
}

.icon-home:before {
  content: "\ea6d";
}

.icon-hourglass_empty:before {
  content: "\ea6e";
}

.icon-https:before {
  content: "\ebac";
}

.icon-info:before {
  content: "\ea6f";
}

.icon-info_outline:before {
  content: "\ea70";
}

.icon-input:before {
  content: "\ea71";
}

.icon-label:before {
  content: "\ea72";
}

.icon-label_outline:before {
  content: "\ea73";
}

.icon-language:before {
  content: "\ea74";
}

.icon-launch:before {
  content: "\ea75";
}

.icon-list:before {
  content: "\ea76";
}

.icon-lock_open:before {
  content: "\ea77";
}

.icon-lock_outline:before {
  content: "\ea78";
}

.icon-loyalty:before {
  content: "\ea79";
}

.icon-markunread_mailbox:before {
  content: "\ea7a";
}

.icon-open_in_browser:before {
  content: "\ea7b";
}

.icon-pageview:before {
  content: "\ebad";
}

.icon-perm_contact_calendar:before {
  content: "\ebae";
}

.icon-perm_data_setting:before {
  content: "\ebaf";
}

.icon-perm_media:before {
  content: "\ebb0";
}

.icon-perm_phone_msg:before {
  content: "\ea7c";
}

.icon-picture_in_picture:before {
  content: "\ea7d";
}

.icon-power_settings_new:before {
  content: "\ea7e";
}

.icon-receipt:before {
  content: "\ea7f";
}

.icon-redeem:before {
  content: "\ea80";
}

.icon-search:before {
  content: "\ea81";
}

.icon-settings:before {
  content: "\ea82";
}

.icon-settings_square:before {
  content: "\ea83";
}

.icon-settings_backup_restore:before {
  content: "\ea84";
}

.icon-settings_more:before {
  content: "\ea85";
}

.icon-connectors:before {
  content: "\ea86";
}

.icon-fullscreeen:before {
  content: "\ea87";
}

.icon-shopping_basket:before {
  content: "\ea88";
}

.icon-message_notes:before {
  content: "\ea89";
}

.icon-spellcheck:before {
  content: "\ea8a";
}

.icon-star_circle:before {
  content: "\ea8b";
}

.icon-content_text:before {
  content: "\ea8c";
}

.icon-users:before {
  content: "\ea8d";
}

.icon-swap_horiz:before {
  content: "\ea8e";
}

.icon-swap_vert:before {
  content: "\ea8f";
}

.icon-update:before {
  content: "\ea90";
}

.icon-toll:before {
  content: "\ea91";
}

.icon-trending_down:before {
  content: "\ea92";
}

.icon-trending_neutral:before {
  content: "\ea93";
}

.icon-trending_up:before {
  content: "\ea94";
}

.icon-shield_check:before {
  content: "\ea95";
}

.icon-rows_4:before {
  content: "\ea96";
}

.icon-columns_center:before {
  content: "\ea97";
}

.icon-carousel:before {
  content: "\ea98";
}

.icon-columns:before {
  content: "\ea99";
}

.icon-rows:before {
  content: "\ea9a";
}

.icon-view_headline:before {
  content: "\ea9b";
}

.icon-view_list:before {
  content: "\ea9c";
}

.icon-grid:before {
  content: "\ea9d";
}

.icon-grid_2:before {
  content: "\ea9e";
}

.icon-rows_split:before {
  content: "\ea9f";
}

.icon-columns_2:before {
  content: "\eaa0";
}

.icon-card_membership:before {
  content: "\eaa1";
}

.icon-work:before {
  content: "\eaa3";
}

.icon-help_outline:before {
  content: "\eaa4";
}

.icon-lines:before {
  content: "\eaa5";
}

.icon-zoom_in:before {
  content: "\eaa6";
}

.icon-zoom_out:before {
  content: "\eaa7";
}

.icon-click:before {
  content: "\eaa8";
}

.icon-minus_square:before {
  content: "\ebb1";
}

.icon-check_underline:before {
  content: "\ebb2";
}

.icon-all_out:before {
  content: "\eaa9";
}

.icon-copyright:before {
  content: "\eaaa";
}

.icon-fingerprint:before {
  content: "\eaab";
}

.icon-gavel:before {
  content: "\eaac";
}

.icon-lightbulb:before {
  content: "\eaad";
}

.icon-picture_in_picture_alt:before {
  content: "\eaae";
}

.icon-arrows_compare:before {
  content: "\eaaf";
}

.icon-calendar:before {
  content: "\eab0";
}

.icon-donut_large:before {
  content: "\eab1";
}

.icon-donut_full:before {
  content: "\eab2";
}

.icon-lines_grid:before {
  content: "\eab3";
}

.icon-lines_size:before {
  content: "\eab4";
}

.icon-user_speak:before {
  content: "\ebb3";
}

.icon-timeline:before {
  content: "\eab6";
}

.icon-clock:before {
  content: "\ebb4";
}

.icon-hand:before {
  content: "\ebb5";
}

.icon-file_restore:before {
  content: "\eab7";
}

.icon-notes_off:before {
  content: "\ebb7";
}

.icon-delete_forever:before {
  content: "\ebb8";
}

.icon-accessibility:before {
  content: "\ebb9";
}

.icon-check_circle_outline:before {
  content: "\eab8";
}

.icon-delete_outline:before {
  content: "\eab9";
}

.icon-done_outline:before {
  content: "\eaba";
}

.icon-maximize:before {
  content: "\ebba";
}

.icon-minimize:before {
  content: "\ebbb";
}

.icon-bolt_circle:before {
  content: "\eabb";
}

.icon-swap_circle:before {
  content: "\eabc";
}

.icon-calendar_2:before {
  content: "\eabd";
}

.icon-rows_3:before {
  content: "\eabe";
}

.icon-label_important:before {
  content: "\eabf";
}

.icon-trash_restore:before {
  content: "\ebbc";
}

.icon-users_circle:before {
  content: "\ebbd";
}

.icon-vehicles:before {
  content: "\eac0";
}

.icon-arrow_right_alt:before {
  content: "\eac1";
}

.icon-suitcase_off:before {
  content: "\eac2";
}

.icon-suitcase_outline:before {
  content: "\eac3";
}

.icon-drag_handler:before {
  content: "\eac4";
}

.icon-rows_2:before {
  content: "\ebbe";
}

.icon-label_outline_2:before {
  content: "\eac5";
}

.icon-article_2:before {
  content: "\eac6";
}

.icon-segment:before {
  content: "\eac7";
}

.icon-compress:before {
  content: "\eac8";
}

.icon-chart_plus:before {
  content: "\eaca";
}

.icon-shield_plus:before {
  content: "\eacb";
}

.icon-all_inbox:before {
  content: "\eacc";
}

.icon-approval:before {
  content: "\eacd";
}

.icon-navigation_circle:before {
  content: "\eace";
}

.icon-bookmarks:before {
  content: "\eacf";
}

.icon-cases:before {
  content: "\ead0";
}

.icon-bell_circle:before {
  content: "\ead1";
}

.icon-cc:before {
  content: "\ead2";
}

.icon-dashboard_customize:before {
  content: "\ead3";
}

.icon-folder_arrow:before {
  content: "\ead4";
}

.icon-drive_file_rename_outline:before {
  content: "\ead5";
}

.icon-drive_folder_upload:before {
  content: "\ebc0";
}

.icon-file_download_done:before {
  content: "\ead6";
}

.icon-grid_view:before {
  content: "\ead7";
}

.icon-hail:before {
  content: "\ead8";
}

.icon-home_filled:before {
  content: "\ead9";
}

.icon-label_off:before {
  content: "\ebc1";
}

.icon-checkbox_multiple:before {
  content: "\ebc2";
}

.icon-logout:before {
  content: "\eada";
}

.icon-margin:before {
  content: "\eadb";
}

.icon-email_unread:before {
  content: "\eadc";
}

.icon-menu_open:before {
  content: "\eadd";
}

.icon-padding:before {
  content: "\ebc3";
}

.icon-panorama_photosphere:before {
  content: "\eade";
}

.icon-recommend:before {
  content: "\ebc4";
}

.icon-shield:before {
  content: "\eadf";
}

.icon-speed:before {
  content: "\eae0";
}

.icon-chart_bars:before {
  content: "\eae1";
}

.icon-switch_account:before {
  content: "\ebc5";
}

.icon-tag:before {
  content: "\eae2";
}

.icon-thumb_down_off_alt:before {
  content: "\ebc6";
}

.icon-thumb_up_off_alt:before {
  content: "\ebc7";
}

.icon-toggle_off:before {
  content: "\ebc8";
}

.icon-toggle_on:before {
  content: "\ebc9";
}

.icon-upload_file:before {
  content: "\eae3";
}

.icon-view_in_ar:before {
  content: "\eae4";
}

.icon-waterfall_chart:before {
  content: "\ebca";
}

.icon-send_schedule:before {
  content: "\ebcb";
}

.icon-bolt:before {
  content: "\eae5";
}

.icon-send_archive:before {
  content: "\ebcc";
}

.icon-workspaces:before {
  content: "\eae6";
}

.icon-attachment_2:before {
  content: "\eae7";
}

.icon-workspaces_outline:before {
  content: "\eae8";
}

.icon-fit_screen:before {
  content: "\ebcd";
}

.icon-saved_search:before {
  content: "\eae9";
}

.icon-slideshow_2:before {
  content: "\ebce";
}

.icon-dynamic_feed:before {
  content: "\ebcf";
}

.icon-euro:before {
  content: "\eaeb";
}

.icon-height:before {
  content: "\ebd0";
}

.icon-policy:before {
  content: "\eaec";
}

.icon-sync_alt:before {
  content: "\ebd1";
}

.icon-menu_book:before {
  content: "\eaed";
}

.icon-flag_3:before {
  content: "\eaee";
}

.icon-symbols:before {
  content: "\ebd2";
}

.icon-transportation:before {
  content: "\eaf0";
}

.icon-file_add:before {
  content: "\eaf1";
}

.icon-users_alt:before {
  content: "\eaf2";
}

.icon-emoji_events:before {
  content: "\eaf3";
}

.icon-emoji_objects:before {
  content: "\ebd3";
}

.icon-eco:before {
  content: "\eaf4";
}

.icon-museum:before {
  content: "\eaf5";
}

.icon-celebration:before {
  content: "\eaf6";
}

.icon-hand_heart:before {
  content: "\eaf7";
}

.icon-contactless:before {
  content: "\eaf8";
}

.icon-infinity:before {
  content: "\eaf9";
}

.icon-suitcase_2:before {
  content: "\eafa";
}

.icon-bell:before {
  content: "\eafb";
}

.icon-spa:before {
  content: "\eafc";
}

.icon-meeting_room:before {
  content: "\ebd4";
}

.icon-addchart:before {
  content: "\eafd";
}

.icon-shield_user:before {
  content: "\eafe";
}

.icon-chart_analytics:before {
  content: "\eaff";
}

.icon-apps_edit:before {
  content: "\eb01";
}

.icon-arrow_circle_down:before {
  content: "\eb03";
}

.icon-arrow_circle_up:before {
  content: "\eb04";
}

.icon-article_square:before {
  content: "\eb05";
}

.icon-email_attachment:before {
  content: "\eb06";
}

.icon-ai:before {
  content: "\eb07";
}

.icon-grid_3:before {
  content: "\eb08";
}

.icon-pages:before {
  content: "\eb09";
}

.icon-book:before {
  content: "\eb0a";
}

.icon-tables:before {
  content: "\eb0b";
}

.icon-batch:before {
  content: "\eb0c";
}

.icon-moon_2:before {
  content: "\ebd5";
}

.icon-bento:before {
  content: "\eb0d";
}

.icon-block_2:before {
  content: "\eb0e";
}

.icon-unsupported:before {
  content: "\eb0f";
}

.icon-build_circle:before {
  content: "\eb10";
}

.icon-calculator:before {
  content: "\eb11";
}

.icon-cast_edu:before {
  content: "\ebd6";
}

.icon-circle:before {
  content: "\ebd7";
}

.icon-close_fullscreen:before {
  content: "\eb12";
}

.icon-comment_bookmark:before {
  content: "\ebd8";
}

.icon-construction:before {
  content: "\eb13";
}

.icon-building:before {
  content: "\eb14";
}

.icon-verification:before {
  content: "\eb16";
}

.icon-folder_move:before {
  content: "\eb17";
}

.icon-server:before {
  content: "\eb18";
}

.icon-east:before {
  content: "\eb19";
}

.icon-electric_cable:before {
  content: "\eb1a";
}

.icon-engineering:before {
  content: "\eb1b";
}

.icon-escalator:before {
  content: "\eb1c";
}

.icon-document_check:before {
  content: "\eb1d";
}

.icon-filter:before {
  content: "\ebd9";
}

.icon-email_forward:before {
  content: "\eb1e";
}

.icon-document_check_2:before {
  content: "\ebda";
}

.icon-help_square:before {
  content: "\eb1f";
}

.icon-highlight_alt:before {
  content: "\eb20";
}

.icon-history_toggle_off:before {
  content: "\ebdb";
}

.icon-suitcase_3:before {
  content: "\eb21";
}

.icon-horizontal_rule:before {
  content: "\eb22";
}

.icon-hourglass_bottom:before {
  content: "\eb23";
}

.icon-hourglass_top:before {
  content: "\eb24";
}

.icon-house_siding:before {
  content: "\ebdc";
}

.icon-insights:before {
  content: "\eb25";
}

.icon-instructions_code:before {
  content: "\eb26";
}

.icon-ios_share:before {
  content: "\eb27";
}

.icon-legend_toggle:before {
  content: "\eb28";
}

.icon-fire:before {
  content: "\eb29";
}

.icon-shield_star:before {
  content: "\eb2a";
}

.icon-marker:before {
  content: "\eb2b";
}

.icon-login:before {
  content: "\eb2c";
}

.icon-marker_plus:before {
  content: "\eb2d";
}

.icon-suitcase_medical:before {
  content: "\eb2e";
}

.icon-graph_app_microwave:before {
  content: "\eb2f";
}

.icon-star_badge:before {
  content: "\eb30";
}

.icon-settings_2:before {
  content: "\eb31";
}

.icon-training:before {
  content: "\ebde";
}

.icon-display_monitor:before {
  content: "\ebdf";
}

.icon-clock_plus:before {
  content: "\ebe0";
}

.icon-motion_photos_on:before {
  content: "\eb33";
}

.icon-multiple_stop:before {
  content: "\eb34";
}

.icon-next_circle:before {
  content: "\eb36";
}

.icon-moon:before {
  content: "\eb37";
}

.icon-arrow_n:before {
  content: "\ebe1";
}

.icon-arrow_ne:before {
  content: "\ebe2";
}

.icon-arrow_nw:before {
  content: "\ebe3";
}

.icon-not_started:before {
  content: "\eb38";
}

.icon-online_prediction:before {
  content: "\eb39";
}

.icon-expand:before {
  content: "\ebe4";
}

.icon-outbox:before {
  content: "\ebe5";
}

.icon-email_arrow:before {
  content: "\ebe6";
}

.icon-display:before {
  content: "\eb3a";
}

.icon-money_2:before {
  content: "\eb3b";
}

.icon-pending_circle:before {
  content: "\eb3c";
}

.icon-pending_actions:before {
  content: "\eb3d";
}

.icon-user_add_outline:before {
  content: "\eb3e";
}

.icon-user_plus:before {
  content: "\eb3f";
}

.icon-user_remove:before {
  content: "\eb40";
}

.icon-user_search:before {
  content: "\eb41";
}

.icon-file_search:before {
  content: "\ebe7";
}

.icon-pos:before {
  content: "\eb44";
}

.icon-preview:before {
  content: "\eb45";
}

.icon-shield_info:before {
  content: "\eb46";
}

.icon-psychology:before {
  content: "\eb47";
}

.icon-pin:before {
  content: "\eb48";
}

.icon-qr_code:before {
  content: "\eb49";
}

.icon-qr_code_scanner:before {
  content: "\eb4a";
}

.icon-comment_bolt:before {
  content: "\eb4b";
}

.icon-read_more:before {
  content: "\eb4c";
}

.icon-receipt_long:before {
  content: "\eb4d";
}

.icon-file_dollar:before {
  content: "\eb4e";
}

.icon-roof:before {
  content: "\eb4f";
}

.icon-room_preferences:before {
  content: "\eb50";
}

.icon-rule:before {
  content: "\eb51";
}

.icon-rule_folder:before {
  content: "\eb52";
}

.icon-science:before {
  content: "\eb53";
}

.icon-door:before {
  content: "\eb54";
}

.icon-shopping_bag:before {
  content: "\eb55";
}

.icon-folder_content:before {
  content: "\eb58";
}

.icon-source:before {
  content: "\eb59";
}

.icon-arrow_s:before {
  content: "\eb5a";
}

.icon-arrow_se:before {
  content: "\eb5b";
}

.icon-arrow_sw:before {
  content: "\eb5c";
}

.icon-beer:before {
  content: "\ebe8";
}

.icon-stairs:before {
  content: "\eb5d";
}

.icon-star_outline_1:before {
  content: "\eb5e";
}

.icon-star_rate:before {
  content: "\eb5f";
}

.icon-sticky_note_2:before {
  content: "\eb60";
}

.icon-stop_circle:before {
  content: "\eb61";
}

.icon-support:before {
  content: "\eb62";
}

.icon-agent:before {
  content: "\eb63";
}

.icon-switch_left:before {
  content: "\ebe9";
}

.icon-switch_right:before {
  content: "\ebea";
}

.icon-table_rows:before {
  content: "\eb64";
}

.icon-table_view:before {
  content: "\eb65";
}

.icon-file_text:before {
  content: "\eb66";
}

.icon-flag_2:before {
  content: "\eb67";
}

.icon-telephone_tty:before {
  content: "\eb68";
}

.icon-upgrade:before {
  content: "\ebeb";
}

.icon-verified_check:before {
  content: "\eb69";
}

.icon-video_settings:before {
  content: "\ebec";
}

.icon-view_sidebar:before {
  content: "\eb6a";
}

.icon-west:before {
  content: "\ebee";
}

.icon-wifi_protected_setup:before {
  content: "\ebf0";
}

.icon-marker_x:before {
  content: "\eb6b";
}

.icon-box_text:before {
  content: "\eb6c";
}

.icon-graph:before {
  content: "\eb6d";
}

.icon-calendar_select:before {
  content: "\ebef";
}

.icon-add_task_check:before {
  content: "\eb6f";
}

.icon-contact_page:before {
  content: "\eb70";
}

.icon-x_square:before {
  content: "\eb71";
}

.icon-facebook:before {
  content: "\eb72";
}

.icon-groups:before {
  content: "\eb73";
}

.icon-outbond:before {
  content: "\eb76";
}

.icon-published_with_changes:before {
  content: "\ebf1";
}

.icon-file_expenses:before {
  content: "\eb77";
}

.icon-line_chart:before {
  content: "\eb78";
}

.icon-qr_code_2:before {
  content: "\eb79";
}

/* TYPOGRAPHY */

.anchor,
a,
a:visited {
    color: light-dark(var(--color-primary), var(--color-fg));
    text-decoration: none !important; /* Bootfight */
    font-weight: 500;

    &:hover {
        color: var(--color-secondary);
    }

    &:focus-visible {
        outline: 0.15rem solid var(--color-secondary) !important;
        outline-offset: -0.15rem;
    }
}

/* Style button as anchor */

.anchor {
    border: none;
    box-shadow: none;
    all: unset;
    color: light-dark(var(--color-primary), var(--color-fg));
    font-weight: 500;

    &:hover {
        filter: none;
    }
}

p > a {
    text-decoration: underline !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
    padding: 0.5em 0;
    margin: 0;
    opacity: 0.9;
    zoom: 0.85;

    @media (width >= 768px) {
        zoom: 1;
    }

    [class*="icon-"] {
        margin-right: 0.25em;
    }
}

h1 {
    padding-bottom: 0.5em;
}

h3,
h4,
h5,
h6 {
    font-weight: 500;
}

h2 img {
    display: inline-block;
    max-height: 1lh;
}

p {
    overflow-wrap: break-word;
    padding: 0.5em 0;
    line-height: 1.7;
}

img {
    display: block;
    max-width: 100%;
}

hr {
    background-color: light-dark(var(--color-bg), var(--color-fg-2));
}

code {
    padding: 0.25em 0.5em;
    border-radius: var(--border-radius);
    color: var(--color-fg);
    background: var(--color-bg);
}

blockquote {
    position: relative;
    padding: 0;
    display: block;
    flex-wrap: wrap;
    padding: 0 1.5rem 0 2rem;
    gap: 0 1.5rem;
    max-width: 45rem;
    margin-bottom: 2rem;

    @media (width >= 576px) {
        display: flex;
    }

    &.right {
        flex-direction: row-reverse;
        text-align: right;
        margin-left: auto;
        padding: 0 2rem 0 1.5rem;

        &::before {
            left: unset;
            right: -1rem;
        }
    }

    p {
        flex: 1;
        z-index: 1;
    }

    cite {
        margin-top: 0.5rem;
        flex-basis: 100%;
    }

    &::before {
        content: "\e99e";
        font-family: icomoon;
        position: absolute;
        left: -1rem;
        top: -1.2rem;
        font-size: 4rem;
        color: var(--color-fg-3);
        opacity: 0.4;
    }

    &:has(img)::before {
        z-index: 1;
    }
}

cite {
    color: var(--color-fg-3);
    &::before {
        content: "— ";
    }
}

.avatar {
    position: relative;
    display: inline-block;
    align-self: center;
    width: 3.6rem;
    aspect-ratio: 1;
    display: inline-block;
    border-radius: 4rem;
    object-fit: cover;
    transition: border-radius 0.24s, scale 0.24s, rotate 0.24s;

    &.lg {
        width: 7.5rem;
    }

    &:hover {
        border-radius: var(--radius);
        rotate: -4deg;
        scale: 1.1;
    }
}

figure {
    img {
        border-radius: var(--radius);
        box-shadow: var(--shadow-2);
    }
}

* {
    margin: 0;
    box-sizing: border-box;

    /* outline-offset: -1px;
    outline: 1px solid #f008; */

    /* &::before {
        content: attr(class);
        position: absolute;
        top: 0;
        left: 0;
        font-size: 0.7rem;
        background: rgba(255, 0, 0, 0.6);
        color: #fff;
        z-index: 10000;
    } */
}

/* Turn cross-document view-transitions on */

/* Note that this at-rule is all that is needed to create the default cross-fade animation  */

@view-transition {
    navigation: auto;
}

/* Customize the default animation behavior */

::view-transition-group(app-main) {
    animation-duration: 0.5s;
}

/* Create a custom animation */

@keyframes move-out {
    from {
        opacity: 1;
        scale: 1;
    }

    to {
        opacity: 0;
        scale: 0.9;
    }
}

@keyframes move-in {
    from {
        opacity: 0;
        scale: 0.9;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

/* Apply the custom animation to the old and new page states */

::view-transition-old(app-main) {
    animation: 0.4s ease-out both move-out;
}

::view-transition-new(app-main) {
    animation: 0.4s ease-out both move-in;
}

:root {
    /* Define as set in --scheme property or default to OS preference (Apps) */
    color-scheme: var(--scheme, light dark);

    /* STATIC PALETTE COLORS */

    --palette-black: hsl(204, 20%, 0%);
    --palette-white: hsl(204, 6%, 100%);

    --palette-light: hsl(204, 5%, 94%);
    --palette-dark: hsl(204, 20%, 9%);
    --palette-primary: hsl(204, 96%, 35%);
    --palette-secondary: hsl(178, 96%, 35%);

    --palette-success: hsl(178, 96%, 35%);
    --palette-info: hsl(204, 96%, 35%);
    --palette-warn: hsl(41, 96%, 48%);
    --palette-error: hsl(350, 96%, 43%);
    --palette-yellow: hsl(57, 98%, 64%);

    /* ADAPTIVE THEME COLORS */
    --color-primary: var(--palette-primary);
    --color-secondary: var(--palette-secondary);

    --color-fg: light-dark(var(--palette-dark), var(--palette-light));
    --color-fg-1: color-mix(in oklab, var(--color-fg), var(--color-bg) 20%);
    --color-fg-2: color-mix(in oklab, var(--color-fg), var(--color-bg) 32%);
    --color-fg-3: color-mix(in oklab, var(--color-fg), var(--color-bg) 44%);

    /* BG colors go for this template by elevation, .bg being the deepest and .bg-2 the most elevated */
    --color-bg: light-dark(var(--palette-light), var(--palette-dark));
    --color-bg-1: oklab(from var(--color-bg) calc(l + 0.05) a b);
    --color-bg-2: oklab(from var(--color-bg) calc(l + 0.1) a b);

    --color-bg-gradient: linear-gradient(
        45deg in oklab,
        var(--color-primary),
        var(--color-secondary)
    );

    --shadow: 0 0.1rem 0.5rem -0.1rem light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
    --shadow-2: 0 0.25rem 1rem 0rem
        light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.3));
    --shadow-3: 0 0.5rem 1.5rem 0rem
        light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.25));

    --radius: 1rem;
    --border-radius: 0.3rem;

    --spacer: 0.5rem; /* for i.e: elements padding etc */

    scrollbar-color: var(--color-primary) #0000;
    scrollbar-width: normal;

    @media (width >= 992px) {
        --spacer: 1rem;
    }
}

::-webkit-scrollbar {
    width: 12px; /* Width of the entire navigation element */
}

::-webkit-scrollbar-track {
    background: #fff0; /* Color of the track */
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: var(--radius);
}

::selection {
    background: var(--color-primary);
    color: var(--palette-light);
}

html,
body {
    height: 100dvh;
}

body {
    font: 0.92rem/1.4 system-ui, sans-serif;
    background: var(--color-bg);
    color: var(--color-fg-1);

    @media screen and (width >= 768px) {
        font-size: 1rem;
    }
}

.qm-grid {
    display: grid;
}

[data-toggle-list] {
    i::before {
        content: "\ea9c"; /* icon-view_list */
    }
    &.is-list {
        i::before {
            content: "\ead7"; /* icon-grid_view */
        }
    }
}

/* CUSTOM STYLES */

#app {
    display: grid;
    grid-template-areas:
        "aside head"
        "aside main"
        "aside foot";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: auto 1fr;
}

#app-menu {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 99;
    background-color: var(--color-bg);
    transition: translate 0.3s;
    translate: -100% 0;

    .is-menu-open & {
        translate: 0% 0;
    }

    @media (width >= 992px) {
        grid-area: aside;
        position: sticky;
        top: 0;
        translate: 0 0;
        max-height: 100dvh;
    }

    .version {
        color: var(--color-fg-2);
        font-size: 0.8rem;
        line-height: 1.2;
        text-align: center;
        padding-top: var(--spacer);
    }

    & > * {
        padding: var(--spacer);
    }
}

#app-menu-toggle {
    font-size: 1.8rem;
    line-height: 0;
    margin: -1rem;
    box-shadow: none;
    background-color: #0000;
    color: light-dark(var(--palette-primary), var(--palette-light));
    .icon-menu {
        transition: rotate 0.3s ease-in-out;
    }
    .is-menu-open & {
        .icon-menu {
            rotate: 180deg;
            &::before {
                content: "\e957"; /* icon-clear */
            }
        }
    }
}

#app-head {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-bg);
    padding: calc(var(--spacer) * 0.9) calc(var(--spacer) * 1);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    grid-area: head;

    @media (width >= 992px) {
        grid-area: head;
    }
}

#app-main {
    view-transition-name: app-main;
    grid-area: main;
    position: relative;
    overflow: auto;
    scrollbar-gutter: stable;
    display: flex;
    flex-direction: column;

    @media (width >= 992px) {
        container-type: inline-size;
    }
}

#app-foot {
    position: relative;
    z-index: 11;
    display: flex;
    flex-direction: row;
    padding: 2rem 2rem;
    font-size: 0.9rem;
    color: var(--color-fg-2);
    background-color: var(--color-bg);

    > * {
        gap: 1rem;
    }

    @media (width >= 992px) {
        padding: 0.6rem 2rem;
        position: sticky;
        bottom: 0;
    }
}

#news {
    flex: 2;
}

#logo {
    padding: 0.5rem 0;
    width: 7rem;
    margin-top: -0.55rem;

    :root[data-scheme="dark"] & {
        filter: saturate(0) brightness(0) invert(1);
    }
}

#login {
    padding-block: 2rem;

    @media (width >= 992px) {
        display: flex;
        height: max-content;
        position: sticky;
        top: 0;
        min-height: 80cqh;
    }

    & > * {
        margin: auto 0;
    }
}

[data-scheme-picker] {
    :root[data-scheme="dark"] & {
        [class^="icon-"]::before {
            content: "\ebd5"; /* moon icon - dark mode */
        }
    }
}

[data-scheme-current] {
    :root[data-scheme="dark"] &::before {
        content: "Dark";
    }
    :root[data-scheme="light"] &::before {
        content: "Light";
    }
}

.collapsible-sortable {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#menu {
    padding-top: 1rem;
    flex: 1;
    overflow: auto;
    scrollbar-gutter: stable;

    @media (width >= 992px) {
        width: 10rem;
    }

    .divider {
        text-transform: uppercase;
        font-size: 0.6em;
        display: flex;
        flex-direction: row;
        opacity: 0.5;
        margin: 0.2rem 0;
        grid-column: 1 / -1;

        @media (width >= 992px) {
            flex: 1 0 100%;
        }

        &::before,
        &::after {
            content: " ";
            flex: 1 1;
            border-bottom: 1px solid currentColor;
            margin: auto;
        }
        &::before {
            margin-right: 0.5em;
        }
        &::after {
            margin-left: 0.5em;
        }
    }

    ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
        gap: 0.1rem;
        padding: 0;
        list-style-type: none;
    }

    li {
        position: relative;
        text-align: center;
        flex: 0 1 min(10rem);
        border-radius: 0.5rem;

        @media (width >= 992px) {
            flex: 1 0 100%;
        }

        [class^="icon-"] {
            display: block;
            font-size: 2em;
        }
    }

    a {
        position: relative;
        display: block;
        text-transform: uppercase;
        color: light-dark(var(--color-primary), var(--color-fg-2));
        font-size: 0.72em;
        padding: 1.5em 1em;
        border-radius: 0.5em;
        transition: color 0.2s, opacity 0.2s;
        opacity: 0.8;

        &:hover {
            color: var(--color-secondary);
            opacity: 1;
        }

        &:focus-visible,
        &:has(+ ul a:focus-visible) {
            color: var(--color-secondary);
        }

        &.is-active,
        &:has(+.submenu .is-active) {
            background-image: var(--color-bg-gradient);
            color: var(--color-bg);
            opacity: 1;
        }

        &:has(+.submenu .is-active) {
            background-image: initial;
            color: var(--color-secondary);
        }

        span {
            position: relative;
        }

        .badge {
            position: absolute;
            right: -1em;
            top: -1em;
        }

        &:has(+ .submenu) {
            &::after {
                font-family: icomoon;
                content: "\e9c7";
                position: absolute;
                bottom: 0.7rem;
                left: 50%;
                translate: -50% 0;
                font-size: 2em;
                line-height: 0;
                transition: rotate 0.2s;
            }

            &:focus,
            &:has(+ .submenu:focus-within) {
                &::after {
                    rotate: 180deg;
                }

                & + .submenu {
                    transition: height 0.3s, opacity 0s;
                    height: auto;
                    opacity: 1;
                }
            }
        }
    }

    .submenu {
        position: absolute;
        width: 100%;
        height: 0;
        opacity: 0;
        z-index: 1;
        background: var(--color-bg-1);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-2);
        interpolate-size: allow-keywords;
        overflow: hidden;
        transition: height 0.3s, opacity 0s 0.3s;

        @media (width >= 992px) {
            position: relative;

            &:has(.is-active) {
                height: auto;
                opacity: 1;
            }
        }
    }
}

FORM + ACTION ELEMENTS ::placeholder {
    font-style: italic;
}

.button,
button {
    all: unset;
    font: inherit;
}

textarea,
select,
input,
button,
.button {
    padding: 0.5em 0.9em !important;
    border-radius: var(--border-radius);
    max-width: 100%;
    display: inline-block;
    accent-color: var(--color-secondary);
    line-height: inherit !important;
    vertical-align: middle;;

    &:focus {
        outline: 0.15rem solid var(--color-secondary);
        outline-offset: -0.15rem;
    }

    [class^="icon-"],
    [class*=" icon-"] {
        line-height: inherit;
    }
}

.form-control, /* bootfight */
textarea,
select,
input:read-only[readonly],
input {
    color: var(--color-fg);
    background-color: var(--color-bg);
    border: none;
    background: var(--color-bg);
}

.form-control:focus {
    background: var(--color-bg);
    color: var(--color-fg);
    box-shadow: none;
}

input[type="search"]::-webkit-search-cancel-button {
    filter: saturate(0) brightness(0) invert(1);
}

textarea {
    min-height: 4lh;
}

textarea:not([cols]) {
    width: 100%;
}

label {
    margin-bottom: 0; /* bootfight */

    /* The actual label */
    & > span {
        white-space: nowrap;
        display: inline-flex;
        align-items: center;

        [class^="icon-"] {
            margin: 0 0.5rem;
        }
    }

    form & {
        span {
            align-self: flex-start;
        }
    }
}

/* Buttons */

button:not(.anchor),
.button,
a.button, /* extra specificity to override a */
input[type="submit"],
input[type="reset"],
input[type="button"] {
    font: inherit;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: var(--color-bg-2);
    color: light-dark(var(--color-primary), var(--color-secondary));
    text-decoration: none;
    font-weight: 500;
    gap: 0.5em;
    box-shadow: var(--shadow);
    transition: color 0.24s, background 0.24s, box-shadow 0.24s, filter 0.24s;

    &.bg-gradient,
    &.accent {
        color: var(--palette-light) !important;
    }

    &.bg-gradient {
        background-image: var(--color-bg-gradient);
    }

    &.square {
        width: 1lh;
        aspect-ratio: 1 / 1;
        padding: 0.5em !important;
    }

    &.circle {
        width: 1lh;
        aspect-ratio: 1 / 1;
        padding: 0.5em !important;
        border-radius: 5em;
    }

    &.round {
        padding: 0.5rem;
        border-radius: 5em;
    }

    &.outline {
        background-image: var(--color-bg-gradient);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
    }
}

.button {
    input {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }

    &:has(input:focus) {
        outline: 0.15rem solid var(--color-secondary);
        outline-offset: -0.15rem;
    }

    &:has(input:checked) {
        background: var(--color-secondary);
        color: var(--color-bg);
    }
}

/* DISABLED */

.button[aria-disabled="true"],
input:disabled,
textarea:disabled,
select:disabled,
button[disabled] {
    cursor: not-allowed;
    background-color: var(--color-bg-2);
    color: var(--color-fg-3);
    box-shadow: none;
}

/* HOVER */

button:not(.anchor):enabled:hover,
.button:not([aria-disabled="true"]):hover,
input[type="submit"]:enabled:hover,
input[type="reset"]:enabled:hover,
input[type="button"]:enabled:hover {
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-2);
    filter: brightness(1.16);
    color: light-dark(var(--color-primary), var(--color-secondary));

    &.bg-success {
        background-color: var(--palette-success) !important; /* Bootfight */
    }

    &.bg-info {
        background-color: var(--palette-info) !important; /* Bootfight */
    }
}

/* FOCUS */

.button:focus-visible,
button:focus-visible:where(:enabled),
input:enabled:focus-visible:where(
        [type="submit"],
        [type="reset"],
        [type="button"]
    ) {
    outline: 0.15rem solid var(--color-secondary);
    outline-offset: -0.15rem;
}

input[type="checkbox"],
input[type="radio"] {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.5rem;
    vertical-align: middle;
    accent-color: var(--color-primary);
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="color"] {
    height: 2.5rem;
    padding: 0.2rem;
}

input[type="file"] {
    border: 0;
}

input[type="range"] {
    padding: 0 !important;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--color-bg);
    width: 100%;
    height: 1rem;
    border-radius: calc(var(--radius) / 4);

    &::after {
        content: attr(data-value) " " attr(data-value);
    }
}

.qm-form {
    display: grid;
    gap: 1rem;

    @media (width > 576px) {
        grid-template-columns: [label] auto [right] 1fr;
    }

    label:not(.right) {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        align-items: center;
        gap: 0.5rem;

        @media (width > 576px) {
            gap: 1rem;

            span {
                padding: 0.5rem 0;
            }
        }
    }

    /* Span (label text) goes in first column */
    label > span {
        @media (width > 576px) {
            grid-column: label;
        }
    }

    .right,
    label > input {
        @media (width > 576px) {
            grid-column: right;
        }
    }

    .full {
        grid-column: 1 / -1;
    }

    .right {
        display: flex;
        gap: 0.5rem;

        label {
            display: flex;
            gap: 0;
        }
    }
}

.qm-range {
    --x: 0;
    --size: 1rem;

    position: relative;
    touch-action: none;
    padding: 0.6rem 0;

    input {
        appearance: none;
        background: var(--color-bg);
        width: 100%;
        border-radius: 1rem;
        height: var(--size);
        border: 0;
        transition: transform 0.24s, box-shadow 0.24s, background 0.24s,
            color 0.24s;

        &::before,
        &::after {
            position: absolute;
            top: calc(50% + 0.1em);
            bottom: 50%;
            z-index: 2;
            margin: 0 0.5rem;
            opacity: 0.5;
            font-size: 0.7rem;
            line-height: 0;
        }

        &::before {
            content: attr(min);
            left: 0;
        }

        &::after {
            content: attr(max);
            right: 0;
        }

        &:not(disabled) {
            cursor: pointer;
        }

        /* Webkit */
        &::-webkit-slider-thumb {
            appearance: none;
            height: var(--size);
            width: var(--size);
            aspect-ratio: 1;
            background: var(--color-primary);
            border-radius: 1rem;
            box-shadow: none;
            border: none;
            position: relative;
            z-index: 1;
        }

        /* Firefox */
        &::-moz-range-thumb {
            appearance: none;
            height: var(--size);
            width: var(--size);
            background: var(--color-primary);
            border-radius: 1rem;
            box-shadow: none;
            border: none;
            position: relative;
            z-index: 1;
        }

        &:hover {
            background: var(--color-bg);
        }

        &:focus {
            + output {
                background-color: var(--color-primary);
                box-shadow: 0 0.1rem 0.3rem #0008;

                .elevate & {
                    transform: translateY(-1.8rem);
                }
            }
        }
    }

    output {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 3;
        min-width: 2rem;
        top: calc(50% + 0.1em);
        left: calc(var(--x) * 1% + 2px);
        translate: calc(var(--x) * -1%) -50%;
        padding: 0.7rem 0.5rem;
        height: var(--size);
        background: var(--color-primary);
        color: #fff;
        border-radius: 0.5rem;
        pointer-events: none;
        font-size: 0.9rem;
        white-space: nowrap;
        transition: transform 0.24s, box-shadow 0.24s, background 0.24s,
            color 0.24s;

        &::before {
            content: attr(data-value) attr(data-suffix);
        }
    }
}

.qm-tags {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
    gap: 0.5rem;
    padding: 0;
    position: relative;

    .qm-tags-source {
        position: absolute;
        width: 1px;
        height: 1px;
        clip-path: rect(0 0 0 0);
    }

    > * {
        padding: 0.4rem 0.6rem;
    }

    .qm-tag {
        color: var(--color-fg);
        background: var(--color-bg);
        border-radius: 0.5rem;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .qm-tag-delete {
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 0 !important;
            width: 1.5em;
            aspect-ratio: 1;
            padding: 0 !important;
            border-radius: 50%;
            background: #fff2;
            font-size: 0.8rem;
            border: 0;
            transition: background 0.2s, opacity 0.2s;
            font-family: icomoon;
            opacity: 0.8;
            &:hover {
                background: var(--palette-error);
                color: #fff;
                opacity: 1;
            }
        }
    }
}

.datepicker {
    padding: 0.8rem;

    /* Dropdown arrows */
    &::before,
    &::after {
        display: none;
    }

    .dropdown {
        border-radius: var(--radius);
    }

    th,
    td {
        padding: 0.3rem 0.4rem;

        &.dow {
            padding: 0.8rem 0.3rem;
            opacity: 0.5;
            font-weight: 200;
        }

        .focused,
        .focused:hover,
        &.datepicker-switch:hover,
        &.day.active.active:hover,
        &.prev:hover,
        &.next:hover,
        &.day:hover {
            color: var(--color-secondary);
        }

        .focused,
        .selected,
        &.range-start,
        &.range-end,
        &.day.active,
        &.day.active.active {
            background: var(--color-primary) !important;
        }

        &.next,
        &.prev {
            font-size: 0;
        }
        &.prev::before {
            font-family: icomoon;
            font-size: 1rem;
            content: "\e9f5"; /* icon-chevron_left */
        }
        &.next::before {
            font-family: icomoon;
            font-size: 1rem;
            content: "\e9f6"; /* icon-chevron_right */
        }
    }
}

.input-group-addon {
    padding: 0.5rem;
}

/* Fixing lousy select2 CSS */

.select2-dropdown {
    background-color: var(--color-bg-2) !important;
    border: none;
    box-shadow: var(--shadow-2);
    border-radius: var(--border-radius);
    padding: 0.5rem;
}

.select2-selection {
    border-radius: var(--border-radius);
    background-color: var(--color-bg) !important;
    border: none !important;
    height: auto !important; /* select2fight */
    padding: 0.3rem; /* select2fight */

    &:focus {
        border: none !important;
        outline: 0.15rem solid var(--color-secondary) !important;
        outline-offset: -0.15rem !important;
    }
}

.select2-selection__arrow {
    height: 100% !important; /* select2fight */
    padding: 0.3rem 0; /* select2fight */
}

/* Select color */

.select2-selection__rendered {
    color: var(--color-fg) !important;
}

.select2-results__option {
    color: light-dark(var(--color-primary), var(--color-fg)) !important;
    &[aria-selected="true"] {
        background-color: var(--color-bg) !important;
        color: var(--color-secondary) !important;
    }

    &.select2-results__option--highlighted {
        background-color: var(--color-bg-1) !important;
        color: var(--color-secondary) !important;
    }

}

.select2-results__option--selected {
    background-color: var(--color-bg-1) !important;
    color: var(--color-secondary) !important;
}

.select2-container {
    .select2-selection--multiple {
        background-color: var(--color-bg-1) !important;
        display: flex;
        flex-wrap: wrap;
        margin: 0 !important;
        padding: 0;
        gap: 0.5rem;

        & > * {
            align-self: flex-start;
        }

        .select2-search {
            flex: 1 0 auto;
        }

        .select2-selection__choice {
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
            background: var(--color-bg);
            border-radius: 0.5rem;
            margin: 0;
            padding: 0;
            padding-left: 0.5rem;
            border: none;
            min-height: 2.4rem;

            .select2-selection__choice__remove {
                all: unset;
                order: 2;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 1.2rem;
                height: 1.2rem;
                padding: 0 !important;
                border-radius: 50%;
                background: #fff2;
                border: 0;
                transition: background 0.2s, opacity 0.2s;
                margin: 0 0.5rem;
                box-shadow: var(--shadow);
                color: light-dark(var(--color-primary), var(--color-secondary));
                opacity: 0.8;
                font-size: 0;

                /* icon-close */
                &::before {
                    content: "\e957";
                    font-family: icomoon;
                    font-size: 0.9rem;
                }

                &:hover {
                    opacity: 1;
                    background: var(--palette-error);
                    color: #fff;
                }
            }
        }

        ul.select2-selection__rendered {
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            overflow: hidden;
            &:empty {
                display: none;
            }
            &:not(:empty) {
            //margin-right: 0.5rem;
            }
        }

        .select2-selection__choice__display {
            display: flex;
            align-items: center;
            margin: 0;
            padding: 0;
            min-height: 2.4rem;
        }

        .select2-search__field {
            min-width: 14rem;
            height: 2.4rem;
            margin: 0;
            vertical-align: middle;
            min-height: 1rem;
            font: inherit;
            background: var(--color-bg);
        }

        /* .select2-search__field:placeholder-shown {
            width: 100% !important;
        } */
    }
}

/* BOOTFIGHT */

/* .form-group {
    > * {
        padding-left: 0;
        padding-right: 0;

        &:has(+ *):first-child {
            padding-right: 1rem;
        }
    }
} */

.progress {
    background-color: var(--color-bg);
}

.dropzone {
    border-radius: var(--radius);
    border: 0.2rem dashed var(--color-bg-2);
    padding: 0.5rem;
    background: var(--color-bg);

    .dz-preview {
        background: inherit !important;
        margin: 0.5rem;

        &:not(.dz-processing) .dz-progress {
            opacity: 0;
        }
    }

    .dz-button {
        box-shadow: none;
        padding: 0.5rem 1rem !important;
    }

    .dz-message {
        margin: 3rem auto;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 1rem;
        opacity: 0.6;

        i {
            font-size: 2rem;
            opacity: 0.3;
        }
    }
}

.breadcrumb {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0;
    overflow: auto;
    max-width: 100%;
    white-space: nowrap;
    background: transparent;
    border-radius: 0;
    margin-bottom: 0; /* bootstrap override */

    > * {
        display: flex;
        align-items: center;
        text-decoration: none;
        min-height: 1.8em;
        padding: 0.5rem 0 0.5rem 0.3rem;

        &:last-child {
            opacity: 0.8;
        }

        &:not(:first-of-type) {
            &::before {
                font-family: icomoon;
                content: "\e9c9"; /* icon-arrow-right */
                display: inline-block;
                font-size: 1.5em;
                line-height: 0;
                margin-right: 0.1rem;
            }
        }

        &:hover {
            color: var(--color-secondary);
        }
    }
}

.qm-dropdown {
    position: relative;
    display: inline-flex;
    height: max-content;
    margin: auto 0;

    & > button {
        all: unset;
        display: inline-block;
        position: relative;
        padding: 0.5em 1em;
        transition: color 0.24s, background 0.24s, box-shadow 0.24s;
        color: light-dark(var(--color-primary), var(--color-fg));
        font-weight: 500;
        border-radius: 2rem;
        white-space: nowrap;
        cursor: pointer;

        &:hover {
            color: var(--color-secondary);
        }

        /* Arrow */
        &::after {
            font-family: icomoon;
            content: "\e9c7";
            display: inline-flex;
            margin-left: 0.5rem;
            scale: 1.5;
            transition: rotate 0.24s;
        }
    }

    & > .qm-dropdown-content {
        position: absolute;
        overflow: hidden;
        display: flex;
        background-color: var(--color-bg-2);
        box-shadow: var(--shadow-2);
        border-radius: var(--radius);
        z-index: 12;
        top: calc(100% + 0.3rem);
        left: 0em;
        padding: 0;
        list-style: none;
        flex-direction: column;
        interpolate-size: allow-keywords;
        height: 0;
        transition: height 0.2s;

        @starting-style {
            height: 0;
            transition: 0;
        }

        li {
            display: flex;
            align-items: center;
            background: inherit;

            &:first-child {
                padding-top: 0.5em;
            }
            &:has(+ .is-jsort-ghost),
            &:last-child {
                padding-bottom: 0.5em;
            }

            .label,
            button,
            a {
                box-shadow: none;
                width: 100%;
                justify-content: flex-start;
                border-radius: 0;
                padding: 0.3rem 1rem;

                [class^="icon-"],
                [class*=" icon-"] {
                    margin-right: 0.8rem;
                }
            }

            button,
            a {
                /* If you need to keep an active link inside a dropdown */
                &.is-active {
                    color: var(--color-secondary);
                }

                &:hover {
                    background-color: var(--color-bg) !important;
                    filter: none;
                }
            }

            &.is-jsort-target {
                outline-offset: -0.2rem;
            }

            &.is-jsort-ghost {
                padding-bottom: 0;
            }
        }
    }

    &.anchor-right .qm-dropdown-content {
        left: auto;
        right: 0;
    }

    &:has(:focus),
    &.is-open {
        & > button {
            color: var(--color-secondary);
            outline: 0.15rem solid var(--color-secondary);
            outline-offset: -0.15rem;
            background: var(--color-bg-2);
            &::after {
                rotate: 180deg;
            }
        }
        .qm-dropdown-content {
            height: auto;
        }
    }

    li > * {
        white-space: nowrap;
        transition: background 0.25s;
        padding: 0.3rem 1rem;
    }

    .label {
        opacity: 0.7;
    }

    .divider {
        border-bottom: 1px solid var(--color-bg);
        margin: 0.5em 0;
    }
}

/* BOOTFIGHT for bootstrap default dropdown-menus*/

.dropdown-toggle {
    &::after {
        font-family: icomoon;
        content: "\e9c7";
        display: inline-flex;
        border: none;
        margin: 0;
        transition: rotate 0.24s;
    }

    &[aria-expanded="true"] {
        &::after {
            rotate: 180deg;
        }
    }
}

.dropdown-menu {
    background-color: var(--color-bg-2);
    box-shadow: var(--shadow-2);
    color: var(--color-fg);
    border: none;

    button.dropdown-item,
    a.dropdown-item {
        display: block;
        width: 100%;
        box-sizing: border-box;
        box-shadow: none;
        padding: 0.5em 1em;
        border-radius: 0;
        color: light-dark(var(--color-primary), var(--color-fg));
        font-weight: 500;
        transition: color 0.24s, background 0.24s;
        filter: brightness(1) !important;

        /* If you need to keep an active link inside a dropdown */
        &.is-active {
            color: var(--color-secondary);
        }

        &:focus {
            background-color: color-mix(
                in srgb,
                var(--color-bg),
                #0000 50%
            ) !important;
            color: var(--color-secondary) !important;
        }
        &:hover {
            box-shadow: none !important;
            background-color: var(--color-bg) !important;
            color: var(--color-secondary) !important;
        }
    }
}

.article {
    border-radius: var(--radius);
    padding: 1.5rem;

    & + .article {
        margin-top: 2rem;
    }

    h1,
    h2 {
        max-width: 20em;
    }

    p {
        @media (width >= 768px) {
            padding-left: 1rem;
        }
    }

    figure {
        display: block;
        width: 100%;
        perspective: 1000px;
    }

    .article-info {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;
        font-size: 1rem;
        color: var(--color-fg-2);

        span {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 10em;
        }
    }

    .article-image {
        display: block;
        object-fit: cover;
        margin: 1rem 0 2rem;
        min-height: 14rem;
        width: calc(100% + 2rem);
        max-width: 27rem;
        border-radius: var(--radius);
        rotate: 0 1 -0.13 18deg;
        box-shadow: var(--shadow-2);
        border: var(--radius) solid var(--color-bg-2);

        @media (width >= 768px) {
            margin: 1rem 0 1.5rem 0.8rem;
        }
    }
}

.qm-card {
    background: var(--color-bg-1);
    border-radius: var(--radius);
    box-shadow: var(--shadow-3);
    border: none;
    padding: 1.5rem;

    .qm-card-top {
        display: flex;
        align-items: center;
        padding-bottom: 0.5rem;
    }

    .qm-card-title {
        margin-bottom: 0; /* bootfight */
        padding-bottom: 0.8rem;
    }

    @media (width >= 768px) {
        padding: 2rem;
    }
}

:has(> .modules) {
    margin-bottom: 2rem;
}

.modules {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(min(var(--grid-size-min, 12rem), 100%), 1fr)
    );
    gap: 1rem;
    border-radius: 1rem;

    &.is-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .module {
        position: relative;
        display: flex;
        flex-direction: column;
        background: var(--color-bg) none 50% / cover;
        border-radius: var(--radius);
        padding: 1rem;
        cursor: move;
        transition: border 0.4s, background-color 0.4s, rotate 0.4s, color 0.4s;
        box-shadow: var(--shadow);

        .is-list & {
            flex-direction: row;
            align-items: center;
            gap: 1rem;
            padding: 0.5rem 1rem;

            .drag-handler {
                align-self: auto;
            }
        }

        .module-content {
            flex: 1;
        }

        &:hover {
            background-color: light-dark(
                color-mix(in srgb, var(--color-secondary), #fff 80%),
                color-mix(in srgb, var(--color-secondary), #0000 90%)
            );
        }

        h3 {
            font-size: 1.3rem;
            flex: 1;
            min-height: 4em;

            .is-list & {
                min-height: auto;
                padding: 0;
            }
        }

        .favorite {
            background-color: color-mix(in srgb, var(--color-bg-2) 70%, #0000);
            box-shadow: none;
            border: none;
            cursor: pointer;
            color: light-dark(var(--color-secondary), var(--color-fg));

            .is-favorite & {
                background-color: var(--color-secondary);
                color: var(--color-bg);
            }
        }

        & > * {
            touch-action: manipulation;
        }

        .module-top {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.5rem;
        }

        .module-image {
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;

            :root[data-scheme="dark"] & {
                opacity: 0.04;
            }

            .is-list & {
                display: none;
            }
        }

        .module-footer {
            position: relative;
        }
    }
}

.qm-charts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(38rem, 100%), 1fr));
    gap: 1rem;
    border-radius: 1rem;

    .qm-card {
        display: flex;
        flex-direction: column;
        border-radius: var(--radius);
        padding: 1rem;

        &.is-hidden {
            display: none;
        }
    }

    .qm-card-title {
        font-size: 1.3rem;
        flex: 1;
    }

    .jsort-handler {
        cursor: grab;
        padding-right: 0.5rem;
    }
}

.qm-charts-wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    text-align: center;

    @media (width >= 768px) {
        flex-direction: row;
    }

    .chart-spline {
        flex-grow: 1;
    }
}

.badge {
    display: inline-flex;
    justify-content: center;
    min-width: 1.5em;
    border-radius: 3em;
    background-color: var(--color-secondary);
    color: var(--color-bg);
    outline: 0.2rem solid var(--color-bg);
    font-size: 1em; /* BootFight */

    &:empty {
        display: none;
    }
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    padding: 0.2rem 0;
    line-height: 1rem;

    .legend-item {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        padding-right: 0.5rem;
        color: var(--color-fg-3);
    }
}

.pill,
.legend-pill {
    display: inline-block;
    border-radius: 2rem;
    margin-right: 0.5rem;
    width: 0.78rem;
    aspect-ratio: 1;
    outline: 0.15rem solid var(--color-bg);
}

/* Animation styles */

details {
    interpolate-size: allow-keywords;
    &::details-content {
        transition: block-size 0.4s, content-visibility 0.4s allow-discrete;
        overflow: hidden;
        block-size: 0; /* Or also:  height:0; */
    }
    &[open]::details-content {
        block-size: auto; /* Or also:  height:auto; */
    }
}

/* Arrow styles */

details {
    display: flex;
    flex-direction: column;

    summary {
        position: relative;
        display: flex;
        align-items: center;
        transition: color 0.24s;
        padding: 0.5rem 1rem;
        color: light-dark(var(--color-primary), var(--color-fg));
        font-weight: 500;
        font-size: 1.2rem;
        border-radius: var(--radius);
        transition: box-shadow 0.3s;

        &:hover {
            box-shadow: var(--shadow-2);
        }

        &:hover {
            color: var(--color-secondary);
        }

        /* Arrow */
        &::after {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 0;
            width: 0;
            user-select: none;
            pointer-events: none;
            right: 1.5rem;
            content: "\e9c7";
            font-family: icomoon;
            scale: 1.3;
            transition: rotate 0.3s;
        }
        &::-webkit-details-marker {
            display: none;
        }
    }

    &[open] summary::after {
        rotate: 180deg;
    }

    &:has(+details) {
        margin-bottom: 1rem;
    }
}

/* Actual styles */

.item:has(details) {
    background: var(--color-bg);
    border-radius: 1rem;
}

.details {
    & > summary {
        .badge {
            position: absolute;
            right: 0;
            font-size: 0.7em;
            margin-top: -2.5rem;
            margin-right: 0.85rem;
        }
    }

    & > div {
        padding: 1rem;
    }

    &[open] summary {
        block-size: auto; /* Or also:  height:auto; */
    }

    .drag-handler {
        padding: 0.5rem 1rem 0.5rem 0.5rem;
        color: var(--color-fg);
        cursor: move;
        align-self: flex-start;
        font-size: 1rem;
        opacity: 0.7;
    }

    .details-title {
        flex: 1;
        padding: 0 1rem;
        padding-left: 0;
        border-right: 2rem solid #0000;
        border-left: 1px solid var(--color-bg);
    }
}

.events {
    display: grid;
    flex-direction: column;
    grid-template-columns: auto 1fr;

    .event {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        background: var(--color-bg);
        padding: 0.8rem 0;
        border-top: 1px solid var(--color-bg);
        gap: 1rem;
    }

    .event-date {
        .is-new-event & {
            font-weight: 700;
        }
    }
}

details:has(.events) .button {
    display: block;
    margin: 0 1rem 1.5rem 1rem;
    max-width: max-content;
}

.qm-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    overflow: clip;

    th {
        color: var(--color-fg-3);
        background-color: var(--color-bg-1);
    }

    &:has(tbody th) thead th:nth-child(1) {
        position: sticky;
        left: 0;
        z-index: 3;
    }

    th,
    td {
        padding: 0.5em;
        text-align: left;
        vertical-align: top;
    }

    thead {
        position: sticky;
        top: 0;
        z-index: 2;
        box-shadow: var(--shadow);

        th {
            padding-block: 1rem !important;
            z-index: 1;
            top: 0;

            i {
                margin-right: 0.7em;
            }
        }
    }

    tbody {
        th,
        td {
            border-bottom: 1px solid var(--color-bg);
        }

        th {
            position: sticky;
            left: 0;
        }
    }
}

.pagination {
    padding: 0;
    margin: 0;
    display: inline-flex;
    box-shadow: var(--shadow);
    .page-item {
        .page-link {
            line-height: inherit;
            background-color: var(--color-bg-2);
            color: light-dark(var(--color-primary), var(--color-fg));
            border: 0;
        }

        &:hover {
            filter: brightness(1.3);
        }

        &.active {
            .page-link {
                background-image: var(--color-bg-gradient);
                color: var(--palette-light) !important;
            }
        }
    }
}

.paginatable-table {
    th {
        white-space: nowrap;
        &.sorting {
            position: relative;
            cursor: pointer;
            padding-right: 1.5rem;
            &::after {
                position: absolute;
                right: 0.2rem;
                font-family: icomoon;
                margin-left: auto;
                font-weight: 800;
            }
            &[data-sorting_type=""] {
                &::after {
                    content: "\eb81";
                    opacity: 0.3;
                }
            }
            &[data-sorting_type="desc"] {
                color: var(--color-secondary);
                &::after {
                    content: "\e9ac";
                    opacity: 1;
                }
            }
            &[data-sorting_type="asc"] {
                color: var(--color-secondary);
                &::after {
                    content: "\e9aa";
                    opacity: 1;
                }
            }
        }
    }

    td:has(a, button) {
        white-space: nowrap;
        word-spacing: 0.5rem;
    }
}

.paginatable-limit {
    min-width: max-content;
    flex-basis: 0;
}

/* Bootfight */

.table-hover {
    tbody {
        tr {
            &:hover {
                background-color: light-dark(
                    color-mix(in srgb, var(--color-secondary), #0000 80%),
                    color-mix(in srgb, var(--color-secondary), #0000 92%)
                );
                color: currentColor;
            }
        }
    }
}

.view {
    --grow: 1;
    --splitter-size: 9px;

    display: flex;
    flex: var(--grow) 0 0;
    gap: 0.4rem;

    & > .splitter {
        /* Vertical splitters */
        position: relative;
        flex: 0 0 var(--splitter-size);
        touch-action: none;
        cursor: ew-resize;
        transition: background-color 0.24s;
        text-align: center;
        line-height: 0;
        border-radius: 2rem;
        background: 50% calc(50% - 5px) / 3px 3px no-repeat
                radial-gradient(var(--color-fg) 3px, transparent 0),
            50% 50% / 3px 3px no-repeat
                radial-gradient(var(--color-fg) 3px, transparent 0),
            50% calc(50% + 5px) / 3px 3px no-repeat
                radial-gradient(var(--color-fg) 3px, transparent 0),
            oklch(from #0000 calc(l - 0) c h);

        /* Remove splitter if not followed by a view */
        &:not(:has(+ .view)) {
            display: none;
        }

        &:hover {
            background-color: var(--color-primary);
        }
    }

    &.col {
        flex-direction: column;
        padding: 0;

        & > .splitter {
            /* Horizontal splitters */
            cursor: ns-resize;
            background: calc(50% - 5px) / 3px 3px no-repeat
                    radial-gradient(var(--color-fg) 3px, #0000 0),
                50% / 3px 3px no-repeat
                    radial-gradient(var(--color-fg) 3px, #0000 0),
                calc(50% + 5px) / 3px 3px no-repeat
                    radial-gradient(var(--color-fg) 3px, #0000 0),
                oklch(from #0000 calc(l - 0) c h);

            &:hover {
                background-color: var(--color-primary);
            }
        }
    }

    .qm-card {
        flex: 1;
    }
}

/* Bootfight */

.modal {
    backdrop-filter: blur(1.5px);

    .modal-header {
        border: 0;
        background-color: var(--color-bg-1);
        padding-left: 2rem;
    }
    .modal-content {
        border-radius: var(--radius);
        background-color: var(--color-bg-1);
    }
    .modal-body {
        padding: 1rem 2rem;
    }
    .modal-footer {
        border: 0;
        background-color: var(--color-bg-1);
    }
}

#toasts {
    position: fixed;
    bottom: 0;
    right: 0;
    gap: 0.5rem;
    margin: 1rem;
    z-index: 1050;
    overflow: clip;
    max-height: 90dvh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    touch-action: none;
    pointer-events: none;
    > .toast {
        pointer-events: auto;
    }
}

/* Bootfight */

.toast {
    border: 0;
    margin-left: auto;
    background-color: var(--color-bg-2);
    box-shadow: var(--shadow-3);
    border-radius: var(--radius);
    padding: 0.5rem;
    color: var(--palette-light) !important;
    flex-basis: 0; /* collapse flex children height */

    .toast-header {
        display: flex;
        gap: 0.8rem;
        background: #0000;
        opacity: 1;
        color: var(--palette-light);
        padding-right: 0.4rem;
        small {
            margin-left: auto;
            color: inherit !important;
            opacity: 0.7;
        }
        button {
            background-image: linear-gradient(45deg, #fff6, #fff6);
        }
    }

    .toast-body:blank,
    .toast-body:empty {
        display: none;
    }
}

.swal2-container {
    backdrop-filter: blur(2px);
    padding: 1rem;
}

.swal2-popup {
    background: var(--color-bg-1);
    color: var(--color-fg);
    box-shadow: var(--shadow-3);
    border-radius: var(--radius);
    text-align: left;
    padding: 0;
    overflow: hidden;

    & > * {
        margin: 0;
        text-align: left;
        align-items: flex-start;
    }

    .swal2-icon {
        margin: 2rem 2rem 0.5rem 2rem;
        zoom: 0.7;
    }

    .swal2-title {
        padding: 0.5rem 2rem 0;
    }

    .swal2-html-container {
        padding-bottom: 1rem;
    }

    .swal2-actions {
        border: none;
        padding: 0.5rem;
        justify-content: flex-end;
        background: var(--color-bg);
    }

    .swal2-footer {
        text-align: right;
        border: none;
        color: red;
        padding-bottom: 1rem;
        background: var(--color-bg-2);
    }

    .swal2-warning {
        border-color: var(--palette-warn);
        color: var(--palette-warn);
    }
    .swal2-error {
        border-color: var(--palette-error);
        color: var(--palette-error);
        span {
            background: var(--palette-error);
        }
    }
    .swal2-success,
    .swal2-success * {
        border-color: var(--palette-success) !important;
        color: var(--palette-success);
        span {
            background: var(--palette-success);
        }
    }
    .swal2-info,
    .swal2-info * {
        border-color: var(--palette-info) !important;
        color: var(--palette-info);
        span {
            background: var(--palette-info);
        }
    }
}

body.swal2-shown:not(.swal2-no-backdrop, .swal2-toast-shown) {
    overflow: hidden !important;
    padding-right: 0 !important;
}

.dropbox {
    position: relative;
    padding: 1rem;
    border-radius: 1rem;
    cursor: pointer;
    margin: 0 auto;
    border: 0.2rem dashed color-mix(in oklab, var(--color-fg), #0000 90%);
    background-color: var(--color-bg);

    & > * {
        cursor: auto;
    }

    &.is-dragover {
        border-color: var(--color-secondary);
    }

    .message {
        text-align: center;
        margin: 2rem;
        opacity: 0.5;
        pointer-events: none;

        i {
            font-size: 2rem;
            display: block;
        }
    }

    .stats {
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        font-size: 0.9rem;
        color: var(--color-fg-3);

        &.over-limit {
            color: var(--palette-error);
        }
    }

    .items:has(.file) + .message {
        margin: 1rem 0.5rem 0 0.5rem;
    }

    .items {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        overflow: auto;
    }

    .item {
        position: relative;
        display: flex;
        background-color: var(--color-bg);
        border-radius: 0.5rem;
        align-items: center;
        gap: 0.5rem;
        transition: 0.3s;
        opacity: 1;
        padding-right: 0.2rem;
        overflow: hidden;

        /* initial styles */
        @starting-style {
            opacity: 0;
        }

        .filename {
            flex: 1;
            display: flex;
            overflow: hidden;

            .name {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                color: inherit;
            }
            .ext {
                color: inherit;
            }
        }

        .icon {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 2.5rem;
            aspect-ratio: 1;
            background-color: var(--color-bg-1);
            border-radius: 0.5rem;
            overflow: hidden;
            margin: 0.15rem;

            &.icon-image {
                font-size: 0;
            }

            img {
                background: var(--color-bg-1);
                display: block;
                height: 100%;
                width: 100%;
                object-fit: contain;
            }
        }

        .size {
            white-space: nowrap;
            font-size: 0.8rem;
            opacity: 0.7;
        }

        .actions {
            margin-left: auto;
        }

        .delete {
            /* display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 1.8em;
            height: 1.8em;
            aspect-ratio: 1;
            background: #8883;
            color: inherit;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            transition: background 0.24s, color 0.24s; */

            background-color: var(--color-bg);

            &:hover {
                background: var(--palette-error);
                color: #fff;
            }
        }

        .progress {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            width: auto;
            height: 5px;
            accent-color: var(--palette-info);
        }

        /* MODIFIERS */

        &[data-status="error"] {
            color: var(--palette-error);
            .progress {
                accent-color: var(--palette-error);
            }
        }
        &[data-status="cancelled"] {
            .progress {
                accent-color: var(--palette-warn);
            }
        }
        &[data-status="complete"] {
            .progress {
                accent-color: var(--palette-success);
            }
        }
    }

    .dropbox-input {
        position: absolute;
        white-space: nowrap;
        width: 0px;
        height: 0px;
        padding: 0 !important;
        clip-path: rect(0 0 0 0);
    }
}

/* Bootfight */

.nav-tabs {
    display: inline-flex;
    border-bottom: none;
    /* overflow-y: hidden;
    overflow-x: auto;
    flex-wrap: nowrap; */
    max-width: 100%;
    scrollbar-width: thin;
    /* background-color: var(--color-bg); */

    .nav-link {
        white-space: nowrap;
        border: 0;
        border-radius: 1rem 1rem 0 0;
        color: light-dark(var(--color-primary), var(--color-fg));
        background-color: #0000;
        &.active {
            background-color: var(--color-bg-1);
            box-shadow: var(--shadow-2);
            color: var(--color-fg-1);
        }
    }
}

.tab-content {
    position: relative;
    z-index: 1;
    background-color: var(--color-bg-1);
}

.tab-pane {
    padding: 1rem 0;
    background-color: var(--color-bg-1);
}

.qm-plans {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 0rem;

    > .qm-card {
        position: relative;
        min-width: 20cqw;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 -0.15rem;
        padding: 2rem 0rem;
        overflow: hidden;

        .ribbon {
            box-sizing: content-box;
            position: absolute;
            overflow: hidden;
            top: 0;
            right: 0;
            font-size: 1rem;
            width: 8rem;
            padding: 0.3rem 10rem;
            transform: translate(50%, -50%) rotate(45deg);
            translate: -3rem 3rem;
            background: #fff;
            text-align: center;
            color: var(--color-secondary);
            font-weight: bold;
        }

        &.bg-gradient {
            z-index: 1;
            scale: 1.05;
        }

        > [class^="icon-"] {
            display: inline-block;
            font-size: 5rem;
            opacity: 0.7;
        }

        ul {
            width: max-content;
            list-style: none;
            padding: 0 3rem;
            margin: 2rem 0;
            text-align: left;

            li {
                i {
                    margin-right: 0.5rem;
                }
            }
        }

        h2 {
            text-transform: uppercase;
            font-weight: 600;
            margin: 0.5rem 0;

            i {
                opacity: 0.8;
            }
        }

        h4 {
            border-radius: 2rem 2rem 0 0;
            border-shape: squircle;
            padding-top: 1.5rem;
            box-shadow: 0 -2rem 2rem color-mix(in srgb, currentColor, #0000 93%);
            width: 100%;
            border-width: 1px 0 1px 0;
        }
    }
}

.card-datetime {
    --perc: calc(var(--sec) / 86400 * 100);
    --bg: hsl(220, 20%, calc(max(10, var(--pc2)) * 1%));
    container-type: size;
    position: relative;
    display: grid;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    aspect-ratio: 2 / 1;
    text-align: center;
    overflow: hidden;
    background: var(--bg);
    color: hsl(0, 0%, calc(var(--brightness) * 1%));

    * {
        position: relative;
    }

    .time,
    .date {
        position: absolute;
        top: 2cqi;
        opacity: 0.7;
        font-size: min(6cqi, 2.5rem);
    }

    .time {
        left: 4cqi;
    }

    .date {
        right: 4cqi;
    }

    .cont {
        font-size: min(6cqi, 2.5rem);
        opacity: 0.7;
    }

    .greet {
        font-size: 1.2em;
    }

    svg {
        position: absolute;
        width: 100%;
        bottom: 0;
        filter: brightness(calc(max(10, var(--pc2)) * 1%));
    }

    .planets {
        display: flex;
        width: 80%;
        margin: auto 10%;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        bottom: -2cqi;
        rotate: calc(var(--deg) * 1deg);
    }

    .extras {
        display: flex;
        white-space: nowrap;
        align-items: center;
        position: absolute;
        width: 100%;
        text-align: center;
        bottom: 0;
        padding: 3cqi;
        text-align: left;
        justify-content: space-between;
        input[type="range"] {
            display: none;
            width: 40cqi;

            .debug & {
                display: inline;
            }
        }
    }

    .sun,
    .moon {
        flex: 0 0 auto;
        border-radius: 50%;
        width: 20cqi;
        height: 20cqi;
        background: white;
        rotate: calc(var(--deg) * -1deg);

        &.sun {
            background: gold;
            box-shadow: 0 0 30cqi #ff8;
        }

        &.moon {
            background-color: color-mix(in srgb, var(--bg), #fff 5%);
            box-shadow: inset 8cqi 0cqi 0 -1cqi #dd4;
            opacity: calc(1 - var(--pc2) / 100);
        }
    }
}

/* JSort — Minimal suggested styles */

.is-jsort-active.is-jsort-touch {
    outline: 0.15rem solid var(--color-primary); /* Visual hint on touch devices */
}

.is-jsort-grab {
    opacity: 0;
}

.is-jsort-target {
    z-index: 1;
    outline: 0.15rem dashed var(--color-primary);
}

.is-jsort-invalid {
    outline: 0.15rem solid red;
}

.is-jsort-ghost {
    box-shadow: 0 0.4rem 2rem #0006;
}

.jsort-handler {
    cursor: move;
    opacity: 0.5;

    &:hover {
        opacity: 1;
    }
}

.theme-light {
    color-scheme: light;
}

.theme-dark {
    color-scheme: dark;
}

.container {
    padding: 0; /* BootFight */
    margin: 0 auto; /* BootFight */
}

.scroll {
    overflow: auto;
}

.rounded {
    border-radius: calc(var(--radius) * 10) !important;
}

.outline {
    position: relative;
    border: 0;

    &::before {
        content: "";
        position: absolute;
        inset: 0rem;
        border-radius: inherit;
        padding: 0.25rem;
        background: var(--color-bg-gradient);
        mask: linear-gradient(#000) content-box,
            linear-gradient(#000) border-box;
        mask-composite: exclude;
        pointer-events: none;
    }
}

.gap-05 {
    gap: 0.5rem;
}

.gap-1 {
    gap: 1rem;
}

.gap-2 {
    gap: 1.5rem;
}

.gap-3 {
    gap: 2rem;
}

.bg-gradient {
    background-image: var(--color-bg-gradient);
}

.bg {
    background-color: var(--color-bg);
}

.bg-1 {
    background-color: var(--color-bg-1);
}

.bg-2 {
    background-color: var(--color-bg-2);
}

.bg-primary {
    background-color: var(--palette-primary) !important;
}

.bg-secondary {
    background-color: var(--palette-secondary) !important;
}

.bg-error {
    background-color: var(--palette-error) !important;
}

.bg-warn {
    background-color: var(--palette-warn) !important;
}

.bg-info {
    background-color: var(--palette-info) !important;
}

.bg-success {
    background-color: var(--palette-success) !important;
}

.shadow {
    box-shadow: var(--shadow);
}

.shadow-2 {
    box-shadow: var(--shadow-2);
}

.shadow-3 {
    box-shadow: var(--shadow-3);
}

.text {
    color: var(--color-fg) !important;
}

.text-1 {
    color: var(--color-fg-1) !important;
}

.text-2 {
    color: var(--color-fg-2) !important;
}

.text-3 {
    color: var(--color-fg-3) !important;
}

.text-light  {
    color: var(--palette-light) !important;
}

.text-dark  {
    color: var(--palette-dark) !important;
}

.text-gradient {
    background-image: var(--color-bg-gradient);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-success {
    color: var(--palette-success) !important;
}

.text-warn {
    color: var(--palette-warn) !important;
}

.text-error {
    color: var(--palette-error) !important;
}

.text-info {
    color: var(--palette-info) !important;
}

.text-primary {
    color: var(--palette-primary) !important;
}

.text-secondary {
    color: var(--palette-secondary) !important;
}

.sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: -1;
}

.d-contents {
    display: contents;
}

#icons-preview {
    height: 20rem;
    resize: vertical;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    padding: 0.5rem 0;

    .iconBox {
        position: relative;
        display: inline-flex;
        align-self: flex-start;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 1rem;
        border-radius: 0.5rem;
        cursor: pointer;
        background-color: var(--color-bg-1);
        transition: color 0.24s, background-color 0.24s, box-shadow 0.24s;
        perspective: 1000px;

        &:hover {
            color: var(--color-secondary);
            background-color: var(--color-bg-2);
            box-shadow: var(--shadow-2);
            z-index: 1;
        }

        i {
            font-size: 1.8rem;
        }
    }
}