/* Theme Name: hhsppp Theme URI: https://hhsppp.app Description: Main Theme Author: hhsppp Author URI: https://hhsppp.app Version: 5.0.0.14 */ body, body div#ssqbp_member, body .ssqbp_myprofile { --primary: #9480d7; --secondary: #4311e1; --body: #f8f7fa; --text: #404250; --border: #e5e5e5; --highlight: #ffffff; --dark: #2f2b3d80; --light: #e5e5e580; --shadow: #2f2b3d40; --transparency: #ffffff80; --transparencydark: #00000040; --gradientlight: #9480d7; --gradientmedium: #65529f; --gradientdark: #4311e1; --highlightbg: #ffffff66; --ssqmessagesbg: #5b629029; --ssqmessagesareabg: #4311e108; --ssqpink: #E03E89; --ssqred: #FA4F49; --ssqorange: #FF9933; --ssqyellow: #FFCC00; --ssqgreen: #20AC66; --ssqfirst: #FFCC0050; --ssqsecond: #e5e5e550; --ssqthird: #ff730050; --ssqhovgray: #40425040; --ssqgreenhov: #20AC6650; --ssqlightblue: #9480d7; --ssqblue: #2196F3; --ssqdarkblue: #4311e1; --ssqpurple: #7366EF; --ssqdarkgray: #404250; --ssqgray: #e5e5e5; --ssqwhite: #ffffff; --activity: #00E4F5; --assessment: #4311e1; --intmulti: #E03E89; --intpara: #FF9933; --intsort: #FFCC00; --intfill: #20AC66; --intques: #9480d7; --intpair: #7366EF; --intint: #4311e1; --beginner: #FA4F49; --preinermediate: #FF9933; --inermediate: #FFCC00; --upinermediate: #20AC66; --advanced: #9480d7; --proficient: #4311e1; --gradientlightbg: #9480d750; --gradientmediumbg: #37598A50; --gradientdarkbg: #4311e150; --ssqpinkbg: #E03E8940; --ssqredbg: #FA4F4940; --ssqorangebg: #FF993340; --ssqyellowbg: #FFCC0040; --ssqgreenbg: #20AC6640; --ssqbluebg: #2196F340; --ssqlightbluebg: #9480d740; --ssqdarkbluebg: #4311e140; --ssqpurplebg: #7366EF40; --ssqdarkgraybg: #40425040; --ssqgraybg: #e5e5e540; --ssqwhitebg: #ffffff40; --activitybg: #00E4F540; --assessmentbg: #4311e140; --intmultibg: #E03E8940; --intparabg: #FF993340; --intsortbg: #FFCC0040; --intfillbg: #20AC6640; --intquesbg: #9480d740; --intpairbg: #7366EF40; --intintbg: #4311e140; --beginnerbg: #FA4F4940; --preinermediatebg: #FF993340; --inermediatebg: #FFCC0040; --upinermediatebg: #20AC6640; --advancedbg: #9480d740; --proficientbg: #4311e140; } body .ssqbp_myprofile.dark_theme { --primary: #9480d7; --secondary: #9480d7; --highlightbg: #19243066; --gradientlight: #598dee; --gradientmedium: #9480d7; --gradientdark: #78c8ce; --shadow: #0a0a0a40; --gradientmediumbg: #00E4F520; --intint: #b8b8ff; --intintbg: #b8b8ff20; --ssqmessagesareabg: #323c47b3; --ssqmessagesbg: #e5e5e540; --ssqhovgray: #e5e5e540; --light: #2f2b3d80; } #manage_activities_table, #manage_assessments_table { thead>tr>th:nth-of-type(6), tbody>tr>td:nth-of-type(6) { display: none; } } .ssq_editor_modal.react_portal_modal { position: fixed; z-index: 999; display: flex; justify-content: center; align-items: center; background: var(--dark); left: 0; top: 0; width: 100vw; height: 100vh; >span { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; z-index: -1; } .ve_modal-content { border-radius: 5px; background-color: var(--highlight); box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; .ve_modal-header { display: flex; justify-content: space-between; span.vicon.vicon-close { padding: 12px; } } .ve_modal-body { padding: 12px; } } } .ssqpink { background-color: var(--ssqpinkbg); color: var(--ssqpink); } .ssqred { background-color: var(--ssqredbg); color: var(--ssqred); } .ssqorange { background-color: var(--ssqorangebg); color: var(--ssqorange); } .ssqyellow { background-color: var(--ssqyellowbg); color: var(--ssqyellow); } .ssqgreen { background-color: var(--ssqgreenbg); color: var(--ssqgreen); } .ssqlightblue { background-color: var(--ssqlightbluebg); color: var(--ssqlightblue); } .ssqdarkblue { background-color: var(--ssqdarkbluebg); color: var(--ssqdarkblue); } .ssqblue { background-color: var(--ssqbluebg); color: var(--ssqblue); } .ssqpurple { background-color: var(--ssqpurplebg); color: var(--ssqpurple); } h1.component_title { font-size: 32px; display: flex; flex-direction: column; line-height: normal; >span { font-size: 14px; font-family: 'Roboto'; font-weight: 400; opacity: .8; } } a:hover { color: var(--text) !important; } .vicon.vicon-groups:before { content: url('data:image/svg+xml;utf8,'); } .ssqbp_myprofile .profile_menu:hover { z-index: 2; } .page .ssqbp_myprofile.slick .profile_menu.show_loggedin_menu { z-index: 99 !important; } .select:not(.is-multiple):not(.is-loading)::after { right: .75em !important; top: 55%; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background-color: #00000005; } ::-webkit-scrollbar-thumb { background-color: #00000020; } .ssqbp_my_profile, p { font-weight: 400; font-family: 'Roboto'; font-size: 14px; } th { font-weight: 400; } .audwrap { display: block; width: 60px; height: 60px; overflow:hidden; background-color: var(--primary); border-radius: 5px; audio::-webkit-media-controls-volume-control-container, audio::-webkit-media-controls-timeline, audio::-webkit-media-controls-current-time-display, audio::-webkit-media-controls-time-remaining-display { display:none !important; } audio::-webkit-media-controls { height: 60px; width: 60px; } audio::-webkit-media-controls-panel{ background-color: #ffffff00; height: 60px; width: 60px; margin-left: -10px; } audio::-webkit-media-controls-enclosure { padding: 0; min-height: 60px; border-radius: 0px; background-color: #ffffff00; } audio { height: 60px; width: 300px; max-width: unset; } audio::-webkit-media-controls-play-button { background-color: var(--primary); border-radius: 0; height: 60px; width: 60px; min-width: 60px; color: var(--text); line-height: 60px; } } :root { overflow: auto; } h1, h2, h3, h4, h5, h6 { font-family: 'Roboto Slab'; } h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 22px; } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 14px; } h1, h2, h3 { font-weight: 500; } h4, h5, h6 { font-weight: 400; } .dashboard_widget_wrapper[data-widget-id="myssq_course_progress"] { ul.dash-courses-progress { margin-top: .5rem; li label a{ pointer-events: none; color: var(--text); } } } .dashboard_widget_wrapper[data-widget-id="myssq_student_stats"] { .myssq_student_stats.myssq_student_stats-2 { >div { padding: 0; .dash-widget .widget.myssq_student_stats { >h2.widgettitle { display: none; } .myssq_dashboard_student_stats .myssq_dashboard_student_stats_wrapper { h3.widget_title { margin-bottom: 0; border: none; font-size: 24px; text-transform: capitalize; padding: 0; } .dashboard_tabs { ul.dash-tabs-wrapper { display: none; } } } } } } } .dashboard_widget.dash_myssq_dash_news.dash_myssq_dash_news { height: 100%; } .myssq_dash_activity.myssq_dash_activity-2 .vbp_message { margin: 1rem 0; } .dashboard_widget.dash_myssq_dash_news.dash_myssq_dash_news .myssq_dash_news.myssq_dash_news-2 { height: 100%; } div#analytics_component .content_imgname { display: flex; align-items: center; gap: .5rem; } .squareinsights .content_imgname { display: flex; align-items: center; gap: .5rem; } .dashboard_widget.dash_myssq_dash_news.dash_myssq_dash_news .myssq_dash_news.myssq_dash_news-2 .myssq_dashboard_news_widget .vbp_message { margin: 1rem 0; } .dashboard_widget.dash_myssq_dash_news.dash_myssq_dash_news .myssq_dash_news.myssq_dash_news-2 .myssq_dashboard_news_widget { height: calc(100% - 2rem); } .ssqbp_myprofile .profile_menu .site_logo img { max-width: 38px; } .ssqbp_myprofile .profile_menu .site_logo { display: flex; justify-content: center; padding-bottom: 12px !important; min-height: 45px; padding-top: 1rem !important; cursor: pointer; position: relative; span { display: none; } } .ssqbp_myprofile .profile_menu .site_logo:hover { img { padding: 2px; box-shadow: none; } span { font-size: 14px; margin: 0; background: var(--primary); box-shadow: 0 2px 8px var(--shadow), 0 0 transparent, 0 0 transparent; left: 5rem; display: inline-block; position: absolute; color: var(--white); z-index: 9; padding: 5px 10px; border-radius: 5px; } } .page .ssqbp_myprofile .profile_menu { justify-content: flex-start; width: 70px; background: var(--highlight); box-shadow: 0 2px 8px var(--shadow), 0 0 transparent, 0 0 transparent; z-index: 2; } .page .ssqbp_myprofile .profile_menu .menu_items>div span.icon { transform: scale(0.8); } .page .ssqbp_myprofile.slick .profile_menu .menu_bottom .ssqbp_current_user .ssqbp_member { margin: 0; } .page .ssqbp_myprofile.slick .profile_menu .menu_bottom .ssqbp_current_user .ssqbp_member span { display: none; } .page .ssqbp_myprofile.slick .profile_menu .menu_bottom .ssqbp_current_user .ssqbp_member img { margin: 0; border: 0; pointer-events: none; max-width: 38px; object-fit: cover; aspect-ratio: 1; width: 38px; height: 38px; } .page .ssqbp_myprofile.slick .profile_menu .menu_bottom .ssqbp_current_user:after { content: ""; width: 14px; height: 14px; background: var(--ssqgreen); position: absolute; display: block; top: unset; bottom: 0; left: 25px; border-radius: 50%; z-index: 1; border: 2px solid var(--highlight); } .ssqbp_myprofile .profile_menu .menu_bottom { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; margin-bottom: .5rem; } .page .ssqbp_myprofile .profile_menu .menu_bottom>.menu_item { padding: 8px; margin: 0; } .ssqbp_myprofile.slick .profile_menu>.menu_items { display: flex; flex-direction: column; overflow: hidden; gap: .5rem; padding: 0 13px 12px; } body>div#searchdiv { display: none; } .page .ssqbp_myprofile.slick .profile_menu>.menu_items>div.is_active:after { display: none; } .page .ssqbp_myprofile.slick .profile_menu>.menu_items>div.is_active { background: linear-gradient(45deg, var(--gradientlight), var(--gradientmedium), var(--gradientdark))!important; border-radius: 5px; opacity: 1; } .page .ssqbp_myprofile.slick .profile_menu>.menu_items>div.is_active>span path { fill: var(--highlight); } .page .ssqbp_myprofile .profile_grid .profile_grid_header { display: none; } .page .ssqbp_myprofile .profile_grid { z-index: 1; } .page .ssqbp_myprofile .profile_menu .menu_bottom>.menu_item:first-of-type { cursor: pointer; svg { fill: var(--text); width: 19px; height: 19; } } .page .ssqbp_myprofile .profile_menu .menu_bottom>.menu_item:first-of-type:hover .hovspan { font-size: 14px; margin: 0; background: var(--primary); box-shadow: 0 2px 8px var(--shadow), 0 0 transparent, 0 0 transparent; left: 5rem; display: inline-block; position: absolute; color: var(--white); z-index: 9; padding: 8px 10px; border-radius: 5px; text-wrap-mode: nowrap; } .page.ssqbp-component-dashboard { .dashboard_intro { display: flex; justify-content: space-between; align-items: center; padding: 0 12px; flex-wrap: wrap; color: var(--text); >div { padding: 12px; } >div:last-of-type { display: none; } h3 { font-size: 32px; color: var(--text); line-height: 2.5rem; text-transform: capitalize; margin-bottom: .5rem; .welcome { font-size: 24px; } } .quote { opacity: .8; max-inline-size: 500px; line-height: 1.5; font-size: 14px; } .usr_langs { gap: .5rem; .user_lang { .langdiv:before { height: 42px; width: 42px; } .lvldiv { width: 24px; height: 24px; font-size: 14px; pointer-events: none; } } } } } .page .ssqbp_myprofile.slick .profile_menu>.menu_items>div:hover { opacity: 1; background: var(--ssqhovgray); border-radius: 5px; } .page .message_left_right .message_list_left .messages .message_block.active:after { display: none; } .page .ssqbp_myprofile.slick .profile_menu .ssqbp_member_menu .ssqbp_loggedin_usermenu_content>span.bp-menu:hover { opacity: 1; background: var(--shadow); border-radius: 5px; } .page .ssqbp_myprofile.slick .profile_menu>.menu_items>div.is_active:hover { background: var(--highlight); } .page .ssqbp_sidebars .ssqbp_left_sidebar h3, .page .ssqbp_sidebars .ssqbp_left_sidebar .menu-child.current-menu-item, .page .ssqbp_sidebars .ssqbp_left_sidebar .menu-child { color: var(--text); } .page .ssqbp_sidebars .ssqbp_left_sidebar h3 { height: 38px; display: flex; flex-direction: column; justify-content: center; margin-bottom: 12px; } .page .ssqbp_sidebars .ssqbp_left_sidebar .menu-child { margin-bottom: 12px; flex-direction: row-reverse; justify-content: flex-end; padding: 6px 12px; border-radius: 25px; font-size: 14px; } .page .ssqbp_sidebars .ssqbp_left_sidebar_wrapper { margin: 0 0 0 -1.5rem; padding: 1rem 24px; background: none; min-width: 280px; flex: unset; width: unset; } .ssq_pop_wrapper #existingusers { display: flex; flex-direction: column-reverse; gap: .5rem; a.button.is-primary.new_mail.existing_add { margin: 0; width: fit-content; margin-left: auto; } .userrow { cursor: pointer; } .dt-wrapper { gap: .5rem; position: unset; .dt-top { gap: .5rem; flex-direction: row-reverse; width: 100%; .dt-search { width: 100%; } .dt-dropdown { display: none; } } .dt-bottom { .dt-info { font-size: x-small; position: absolute; bottom: 1rem; height: 36px; display: flex; align-items: center; } } } } .page.ssqbp-component-community .media_popup .right_side { height: auto; padding: 0; overflow: hidden; padding-left: 1rem; padding-top: 1rem; .ssqbp_main { display: flex; flex-direction: column; padding: 0; overflow: hidden; gap: 1rem; .portal.activity_post { order: 1; margin: 0; gap: .5rem; .portal_body { display: flex; gap: .5rem; padding: 0; img { height: 32px; width: 32px; border-radius: 50%; } textarea { padding: .25rem; } } .portal_footer { padding: 0; justify-content: end; .footer_links { a.button.is-primary { margin: 0 0 0 .5rem; } a:not(.button) { display: none; } } } } .portal.commentss { margin: 0; .portal_body { padding: 0; .activity_list { display: flex; flex-direction: column; gap: .5rem; .activity_item:hover { .activity_avatar_wrap a.vicon.vicon-trash { opacity: 1 !important; } } .activity_item { margin-top: 0; gap: .25rem; flex-direction: column; border: 1px solid var(--border); padding: .5rem; border-radius: 5px; .activity_avatar { margin: 0; line-height: unset; flex-basis: unset; display: flex; flex-direction: column; position: relative; .activity_avatar_wrap { display: flex; gap: .5rem; justify-content: space-between; align-items: center; .ssqbp_user_avatar { .ssqbp_member { display: flex; gap: .25rem; font-family: 'Roboto Slab'; text-transform: capitalize; color: var(--text); align-items: start; line-height: 1; img { height: 32px; width: 32px; } } } a.vicon.vicon-trash { height: fit-content; opacity: 0; } } .datetime { font-size: x-small; display: flex; gap: 3px; margin-left: calc(32px + .25rem); margin-top: -.9rem; opacity: .6; } } .activity_body { z-index: 3; display: flex; flex-direction: column; justify-content: space-between; padding: 0 !important; border-left: 0 !important; .activity_list { margin: 0; } .activity_actions { margin: .5rem 0 0; border-top: 1px solid var(--border); img.ssqbp_avatar { display: none; } .reactions-container { gap: 0 !important; padding: .5rem; font-size: 0; .vicon-thumb-up { font-size: initial; } } a.commenting, a.delit { gap: 0 !important; font-size: 0; i { font-size: initial; } } } .reactions-overview { display: none; } .portal.activity_post { gap: .5rem; margin-top: 1.5rem; .portal_body { padding: 0; display: flex; gap: .5rem; >img { height: 32px; width: 32px; border-radius: 50%; } } .portal_footer { padding: 0; .footer_links { a.button { margin: 0 0 0 .5rem; } a:not(.button) { display: none; } a.link { font-size: small !important; } a.link:hover { background: none; border: 0; } a.link:hover:after { display: none !important; } } } } } } } } } } } .ssq_pop_content_wrap { display: flex; flex-direction: column; z-index: 1; padding: 24px; } .ssq_pop_content_wrap video { max-height: -webkit-fill-available; } .page.ssqbp_my_profile.logged-in #ssqbp_member { overflow-y: auto; background: var(--body); } .ssq_pop_wrapper_inner { max-height: 90%; max-width: 80%; display: flex; margin: auto; background: var(--highlight); flex-direction: column; position: relative; border-radius: 5px; overflow: hidden; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } .ssq_pop_wrapper_inner a { color: var(--text); } .ssqbp_myprofile .lvldiv:after { white-space: nowrap; } .page .select2-container--default .select2-selection--multiple .select2-selection__choice { padding: .25rem; display: flex; border-color: var(--border); } .page .select2-container--default .select2-selection--multiple .select2-selection__choice>span { justify-content: center; color: var(--text); font-size: 12px; } .page .select2-container--default .select2-selection--multiple .select2-selection__choice>button { border: none; border-radius: 50%; margin-right: .5rem; color: var(--highlight); height: 18px; width: 18px; padding: 0 4px; } .page .select2-container--default .select2-selection--multiple .select2-selection__choice>button span { font-weight: 400; display: flex; line-height: 1; margin-top: -2px; justify-content: center; flex-direction: column; } .ssq_pop_wrapper_inner>a.vicon.vicon-close { width: fit-content; padding: 12px; z-index: 2; position: absolute; top: 12px; right: 12px; } .add_bulk_user_form .user_form_content label { color: var(--text); } #bulkuserscheck>.vicon-arrow-left { position: absolute; top: 1rem; left: 1rem; } #bulkuserscheck table.userbulk_table tr>td:nth-of-type(4), #bulkuserscheck table.userbulk_table tr>td:nth-of-type(5), #bulkuserscheck table.userbulk_table tr>th:nth-of-type(4), #bulkuserscheck table.userbulk_table tr>th:nth-of-type(5) { text-align: center; } #bulkuserscheck table.userbulk_table { width: -webkit-fill-available; font-size: 90%; margin: 0 .5rem 1rem .5rem; } #bulkuserscheck a.bulkusers_confirm { width: fit-content; float: right; margin: 0; } #bulkuserscheck>.vbp_message { display: flex; background: var(--body); padding: 12px 16px; font-size: .9rem; border-radius: 5px; color: var(--text); margin-bottom: 1rem; align-items: center; } #bulkuserscheck>.vbp_message:before { content: ""; margin-right: 8px; font-family: vicon; } .add_bulk_user_form .user_form_content>div.vbp_message { display: flex; background: var(--body); padding: 12px 16px; font-size: .9rem; border-radius: 5px; color: var(--text); margin-bottom: 1rem; align-items: center; } .add_bulk_user_form .user_form_content>div.vbp_message p { display: flex; gap: .5rem; margin: 0; } .add_bulk_user_form .user_form_content>div.vbp_message a { color: var(--primary); } .add_bulk_user_form .user_form_content>div.instadmin span { flex-direction: row; gap: .5rem; } .add_bulk_user_form .user_form_content>div.instadmin span>* { margin: 0; width: fit-content; } .add_bulk_user_form .user_form_content>div.instadmin { width: fit-content; margin-left: auto; } .add_bulk_user_form .user_form_content>div.wrap_row1g { justify-content: end; margin-top: 1rem; } .add_bulk_user_form .user_form_content>div.instadmin span { flex-direction: row; gap: .5rem; } .add_bulk_user_form .user_form_content>div.vbp_message:before { content: ""; margin-right: 8px; font-family: vicon; } .add_bulk_user_form .user_form_content>div.wrap_row1g>* { margin: 0; width: fit-content; } #upload_users_csv { display: none; } .add_bulk_user_form .user_form_content { display: flex; flex-direction: column; gap: 1rem; } .add_bulk_user_form .user_form_content>span, .add_bulk_user_form .user_form_content>div>span { flex-direction: column; gap: 0; display: flex; width: 100%; } .add_bulk_user_form .user_form_content>div { display: flex; gap: 1rem; } #existingusers>.vicon-arrow-left { position: absolute; top: 1rem; left: 1rem; } .add_bulk_user_form>.vicon-arrow-left { position: absolute; top: 1rem; left: 1rem; } .wrap_row1g { display: flex; gap: 1rem; } .bulkusers_options { display: grid; grid-template-columns: calc(50% - .5rem) calc(50% - .5rem); gap: 1rem; #bulk_users_existing i:after { content: "✓"; font-size: 14px; } #bulk_users_new i:after { content: "+"; font-size: 22px; } a { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; width: 100%; padding: 1rem; border: 1px solid var(--border); border-radius: 5px; justify-content: center; aspect-ratio: 1; i { font-size: 32px; position: relative; } i:after { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; right: -10px; } } a:hover { color: var(--primary); border-color: var(--primary); } } .minimal #headertop, header, footer, .minimal #footerbottom { display: none !important; } .page .ssqbp_myprofile .edit_profile { gap: 1rem; margin-top: 2.75rem; .portal { margin-bottom: 0; } } .page .ssqbp_myprofile .settings_tabs .setting_tab:first-child { margin-left: 0; } .page .ssqbp_myprofile .profile_avatar_wrapper { flex-direction: column; margin-top: 2.75rem; .profile_avatar { width: 300px; height: 300px; label.upload_file { cursor: pointer; } } .profile_avatar_actions.buttons { margin-left: 0; a.button.is-info { margin: .5rem; } } } .ssqbp-component-friends .portal.friends { margin-top: 2.75rem; } .profile-content { display: none; } .ssqbp-component-profile .ssqbp_sidebars .ssqbp_left_sidebar .menu-child:last-of-type { display: none; } .ssqbp-component-profile .profile-content { display: block; margin: 2.75rem auto 0; } .ssqbp-component-profile .profile-content .ssqviewprofile, .ssqeditprofile .manage_user_wrap { border-radius: 5px; background: var(--highlight); padding: 1rem; max-width: 1200px; } .ssqbp-component-profile .profile-loader { display: none; } .ssqeditprofile .manage_user_wrap { display: flex; flex-direction: column; max-width: 1200px; .bottom_opts { display: flex; gap: 1rem; align-items: center; a.change_password { font-size: small; } a.change_password:hover { color: var(--primary); } } .edit_passreset { display: none; } .edit_passreset.showit { display: flex; flex-direction: column; gap: .5rem; padding: 0.5rem 1rem 1rem; border: 1px solid var(--border); margin-top: .5rem; span { display: flex; flex-direction: column; } .vbp_message { background: var(--body); margin: 0; } } >span { margin: .25rem 0 0; } .manage_user_profile { display: flex; gap: 1rem; .usr_img .area { img { width: 250px; min-width: 250px; height: 250px; } form { display: none; } } .usr_img .area:hover { opacity: .5; cursor: pointer; } .sidedeets { display: flex; flex-direction: column; gap: 1rem; width: 100%; justify-content: center; span { display: flex; flex-direction: column; select { width: 100%; max-width: unset; } } } } a.button.is-primary.new_mail.saveusrdeets { opacity: .5; pointer-events: none; margin: 0; width: fit-content; margin-left: auto; } } .page .ssqbp_groups .ssqbp_group .group_name strong { color: var(--text); } .ssqviewprofile .user_card { >img { border: 1px solid var(--border); } >div { width: 100%; padding: 0; p.aboutt { padding: 1rem 0 0; margin-top: 1rem; border-top: 1px solid var(--border); } } } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .menu-divider { height: 1px; background: var(--primary); margin-bottom: .75rem; } .page .ssqbp_myprofile.slick .profile_menu .ssqbp_member_menu { width: fit-content; background: var(--highlight); color: var(--text); border-radius: 5px; min-width: 240px; box-shadow: 0 4px 18px var(--shadow), 0 0 transparent, 0 0 transparent; padding: 8px 0; } .ssqbp_myprofile.slick .profile_menu .menu_bottom .ssqbp_current_user { cursor: pointer; } .page .ssqbp_myprofile.slick .profile_menu .ssqbp_member_menu .ssqbp_member_card_wrapper { gap: .5rem; font-family: 'Roboto'; padding: .5rem 1rem 1rem; margin: 0 0px 8px; border-bottom: 1px solid var(--border); font-size: 0.95rem; } .page .ssqbp_myprofile.slick .profile_menu .ssqbp_member_menu .ssqbp_loggedin_usermenu_content>span.bp-menu { position: relative; padding: .5rem 1rem; margin: 2px 8px; min-height: 38px; align-items: center; font-size: 15px; gap: .5rem; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper .switch input:checked+.slider { z-index: -1; border: 1px solid var(--highlight); } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper .switch input { display: none; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_group { gap: 0; width: 100%; justify-content: space-evenly; position: relative; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper label { justify-content: center; background: transparent; margin: 0; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper label:before { display: none; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper .switch { max-width: unset; position: absolute; left: 0; top: 0; height: 30px; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper:nth-of-type(1) { z-index: 6; label { border-left: none; } } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper:nth-of-type(2) { z-index: 5; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper:nth-of-type(3) { z-index: 4; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper:nth-of-type(4) { z-index: 3; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper:nth-of-type(5) { z-index: 2; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper:nth-of-type(6) { z-index: 1; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper:nth-of-type(1) .switch { width: 16.66%; input:checked+.slider { background: var(--beginner); } } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper:nth-of-type(2) .switch { width: 33.33%; input:checked+.slider { background: var(--preinermediate); } } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper:nth-of-type(3) .switch { width: 50%; input:checked+.slider { background: var(--inermediate); } } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper:nth-of-type(4) .switch { width: 66.66%; input:checked+.slider { background: var(--upinermediate); } } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper:nth-of-type(5) .switch { width: 83.33%; input:checked+.slider { background: var(--advanced); } } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper:nth-of-type(6) .switch { width: 100%; background: var(--shadow); border-radius: 25px; input:checked+.slider { background: var(--proficient); } } .page .ssqbp_create_group .group_creation_steps .group_step.ssqbp_form { gap: 0; flex-direction: column; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper:nth-of-type(6)>label { border-right: 1px dashed; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper:nth-of-type(6) .switch>label { background: var(--transparency); border-radius: 25px; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper>label { border-left: 1px dashed; font-size: 10px; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_level .radio_wrapper { flex-direction: column; width: 16.6%; font-size: 12px; gap: 0.25rem; height: 48px; justify-content: end; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_lang .field_value .radio_wrapper .switch input { display: none; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_lang .switch { height: 48px; width: 48px; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_lang .switch .slider:before { transition: unset; left: 0; right: 0; top: 0; bottom: 0; transform: none; height: 48px; width: 48px; background: none; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_lang .field_value .radio_wrapper>label { margin: 0; font-size: small; font-weight: 400; color: transparent; display: none; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_lang .field_value .radio_wrapper:hover>label { color: var(--text); } .ssqbp_create_group .group_creation_steps .group_step>div label.slider.en-GB { background: url("/wp-content/themes/hhsppp/assets/images/en-GB.png"); } .ssqbp_create_group .group_creation_steps .group_step>div label.slider.en-US { background: url("/wp-content/themes/hhsppp/assets/images/en-US.png"); } .ssqbp_create_group .group_creation_steps .group_step>div label.slider.de-DE { background: url("/wp-content/themes/hhsppp/assets/images/de-DE.png"); } .ssqbp_create_group .group_creation_steps .group_step>div label.slider.es-ES { background: url("/wp-content/themes/hhsppp/assets/images/es-ES.png"); } .ssqbp_create_group .group_creation_steps .group_step>div label.slider.fr-FR { background: url("/wp-content/themes/hhsppp/assets/images/fr-FR.png"); } .ssqbp_create_group .group_creation_steps .group_step>div label.slider.ko-KR { background: url("/wp-content/themes/hhsppp/assets/images/ko-KR.png"); } .ssqbp_create_group .group_creation_steps .group_step>div label.slider.cmn-Hans-CN { background: url("/wp-content/themes/hhsppp/assets/images/cmn-Hans-CN.png"); } .ssqbp_create_group .group_creation_steps .group_step>div label.slider.ja-JP { background: url("/wp-content/themes/hhsppp/assets/images/ja-JP.png"); } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_lang .field_value .radio_wrapper .switch label { height: 48px; width: 48px; position: relative; margin: 0; background-repeat: no-repeat; opacity: .5; background-size: 48px; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_lang .field_value .radio_wrapper .switch label:hover { opacity: 1; } .content_to_html_pdf:before { font-family: 'vicon'; content: "\e6b7"; } .content_to_html_document:before { font-family: 'vicon'; content: "\e6a4"; } .content_to_html_spreadsheet:before { font-family: 'vicon'; content: "\e6ba"; } .content_to_html_presentation:before { font-family: 'vicon'; content: "\e654"; } .content_to_html_archive:before { font-family: 'vicon'; content: "\e664"; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_lang .field_value .radio_wrapper { flex-direction: column; align-items: center; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_lang .field_value .radio_group { align-items: center; gap: 24px; padding: 0 12px; } .page .ssqbp_myprofile.slick .profile_menu .ssqbp_member_menu .ssqbp_loggedin_usermenu_content { margin: 0; padding: .5rem; gap: .25rem; } .page .ssqbp_myprofile.slick .profile_menu .ssqbp_member_menu .logoutbutton { gap: .5rem; margin: .5rem auto; max-width: calc(100% - 2rem); font-size: 14px; border: 2px solid; border-radius: 5px; border-color: var(--ssqred); justify-content: center; color: var(--ssqwhite) !important; background: var(--ssqred); box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; height: 38px; i svg { fill: var(--ssqwhite); } } .page .ssqbp_myprofile.slick .profile_menu .ssqbp_member_menu .logoutbutton:hover { background: var(--ssqred) !important; border-color: var(--ssqred) !important; } .page .ssqbp_myprofile.slick .profile_menu .ssqbp_member_menu button svg { height: 16px; } .page .ssqbp_myprofile.slick .profile_menu .ssqbp_member_menu button i { width: 22px; margin: 0; } .ssqbp_myprofile.slick .profile_menu .ssqbp_member_menu .ssqbp_loggedin_usermenu_content>span.bp-menu:before { width: 22px; font-family: vicon; display: flex; align-items: center; font-size: 18px; opacity: .8; justify-content: center; } .ssqbp_myprofile.slick .profile_menu .ssqbp_member_menu .ssqbp_loggedin_usermenu_content>span.bp-menu.bp-messages-nav:before { content: "\e75a"; } .ssqbp_myprofile.slick .profile_menu .ssqbp_member_menu .ssqbp_loggedin_usermenu_content>span.bp-menu.bp-friends-nav:before { content: url('data:image/svg+xml;utf8,'); } .ssqbp_myprofile.slick .profile_menu .ssqbp_member_menu .ssqbp_loggedin_usermenu_content>span.bp-menu.bp-profile-nav:before { content: "\e602"; } .page .ssqbp_myprofile .profile_settings .portal { box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; border-radius: 5px; } .page.ssqbp-component-settings .ssqbp_myprofile .profile_settings { flex-direction: column; margin: 0; inline-size: 100%; max-inline-size: 1440px; flex-grow: 1; padding-top: 1rem !important; margin-inline: auto; padding-block: 1.5rem; padding-inline: 1.5rem; .profile_settings_btm { flex-direction: row-reverse; display: flex; .portal { padding: 24px; gap: 12px; .portal_header { padding: 0; margin: 0; strong { margin: 0; font-size: 16px; font-family: 'Roboto Slab'; } } .portal_body { padding: 0; } } .portal.password .ssqbp_form.tab_content { display: flex; flex-direction: column; gap: 12px; a.button.is-primary { width: fit-content; } } .ssqbp_form_fieldwrap { display: flex; flex-direction: column; } } .sq_profile_user_card.editing { flex-direction: row; gap: 24px; display: flex; position: relative; margin: 0.5rem; span.usr_img { display: flex; flex-direction: column; max-width: 300px; margin: 0; padding: 0; .area { border-radius: 5px; overflow: hidden; background: var(--body); cursor: pointer; position: relative; img { object-fit: cover; height: 300px; width: 300px; } form { display: none; } .vicon { position: absolute; top: 6px; right: 6px; background: var(--primary); padding: 11px; border-radius: 5px; opacity: .8; cursor: pointer; font-size: 16px; } .vicon:hover { opacity: 1; } label.upload_file { font-size: 0.9rem; justify-content: center; display: flex; gap: 1rem; align-items: center; min-width: auto; height: 300px; width: 300px; margin: 0; cursor: pointer; } } } .sq_user_card_top { display: flex; flex-direction: column; flex: 1; gap: 12px; span.changename { display: flex; flex-direction: column; } .sq_profile_user_menu { display: flex; gap: 12px; } label>b { color: var(--ssqred); } .sq_edit_userwrap { display: grid; grid-template-columns: calc(50% - 6px) calc(50% - 6px); gap: 12px; >span { display: flex; flex-direction: column; select { max-width: unset; } } } >span { label { font-weight: 600; } textarea#changeabout { resize: vertical; } } span.sq_langs_wrap { display: flex; flex-direction: column; .sq_languages_wrap { display: flex; flex-wrap: wrap; gap: 24px; padding: 12px 0; >div { display: flex; gap: 12px; align-items: center; width: calc(25% - 18px); select { flex: 1; } } } } a.button.is_primary.saveuserdeets { width: fit-content; } } } } #ssqbp_member .vbp_message { background: transparent; padding: 0; font-size: .9rem; border-radius: 5px; color: var(--text); display: flex; align-items: center; margin-bottom: .5rem; height: fit-content; width: 100%; } #ssqbp_member .vbp_message:before { content: ""; margin-right: 8px; font-family: vicon; } .page .ssqbp_sidebars .ssqbp_left_sidebar { top: .5rem; } .ssqbp_myprofile.slick .profile_menu .ssqbp_member_menu .ssqbp_loggedin_usermenu_content>span.bp-menu.bp-settings-nav:before { content: "\e602"; } .ssqbp_myprofile.slick .profile_menu .ssqbp_member_menu .ssqbp_loggedin_usermenu_content>span.bp-menu.bp-notifications-nav:before { content: "\e6b8"; } .page .ssqbp_myprofile.slick .profile_menu .ssqbp_member_menu button span { width: auto; } .page .ssqbp_myprofile.slick .profile_menu .ssqbp_member_menu .ssqbp_member_card_wrapper img.ssqbp_avatar { width: 40px; height: 40px; object-fit: cover; background: var(--primary); padding: 0; } .page .ssqbp_myprofile.slick .profile_menu .ssqbp_member_menu .ssqbp_member_card_wrapper .member_menu_buttons span { padding: 0; flex: unset; } .page .ssqbp_myprofile .profile_menu .menu_items>div { font-size: 22px; padding: 0; color: var(--text); } .page .ssqbp_myprofile .profile_menu .menu_items>div path { fill: var(--text); } .page .ssqbp_myprofile .profile_menu .menu_items>div.is_active { font-size: 18px; } .ssqbp_myprofile .profile_menu .menu_items>div>span>span { padding: 10px 18px; } .page .ssqbp_myprofile.slick .profile_menu>.menu_items>div:hover>span>span>span+span { font-size: 14px; margin: 0; background: var(--primary); box-shadow: 0 2px 8px var(--shadow), 0 0 transparent, 0 0 transparent; left: 5rem; text-wrap-mode: nowrap; } .page .ssqbp_myprofile .profile_menu .menu_items>div#community path { fill: none; } .ssqbp_myprofile.slick .profile_menu>.menu_items #content { padding-bottom: unset; } .langdiv:before { content: ""; background-size: contain !important; height: 36px; display: block; background-repeat: no-repeat !important; border-radius: 50%; width: 36px; } .langdiv.fr-FR:before { background: url('/wp-content/themes/hhsppp/assets/images/fr-FR.png'); } .langdiv.de-DE:before { background: url('/wp-content/themes/hhsppp/assets/images/de-DE.png'); } .langdiv.cmn-Hans-CN:before { background: url('/wp-content/themes/hhsppp/assets/images/cmn-Hans-CN.png'); } .langdiv.en-US:before { background: url('/wp-content/themes/hhsppp/assets/images/en-US.png'); } .langdiv.en-GB:before { background: url('/wp-content/themes/hhsppp/assets/images/en-GB.png'); } .langdiv.es-ES:before { background: url('/wp-content/themes/hhsppp/assets/images/es-ES.png'); } .langdiv.ko-KR:before { background: url('/wp-content/themes/hhsppp/assets/images/ko-KR.png'); } .langdiv.ja-JP:before { background: url('/wp-content/themes/hhsppp/assets/images/ja-JP.png'); } .lvldiv { width: 22px; height: 22px; display: flex; justify-content: center; align-items: center; border-radius: 50%; margin-left: -15px; color: var(--ssqwhite); font-family: 'Roboto'; font-size: 14px; font-weight: 400; text-transform: uppercase; } .lvldiv.b{ background: var(--beginner); } .lvldiv.pi{ background: var(--preinermediate); } .lvldiv.i{ background: var(--inermediate); } .lvldiv.ui{ background: var(--upinermediate); } .lvldiv.a{ background: var(--advanced); } .lvldiv.p{ background: var(--proficient); } .page .ssqbp_myprofile.slick .profile_menu>.menu_items>div.is_active .icon { color: var(--highlight); } .page .ssqbp_sidebars .ssqbp_left_sidebar .menu-child.current-menu-item { font-weight: 400; background: var(--ssqmessagesbg); } .page .ssqbp_sidebars .ssqbp_left_sidebar .menu-child:hover { background: var(--ssqhovgray); } .ssqbp_myprofile .square_optsside.alt { padding-left: 0rem; } .ssqbp_myprofile .square_optsside { a.menu-child { margin-bottom: 0 !important; } } .ssqbp_myprofile .square_optsside { display: flex; flex-direction: column; font-size: 14px; padding-left: 1rem; margin-bottom: 1rem; a, a:hover { color: var(--highlight); } a.active { font-weight: 700; } } .page.ssqbp-component-squares { #squares_component { inline-size: 100%; max-inline-size: 1440px; margin-inline: auto; flex-grow: 1; padding-block: 1.5rem; padding-inline: 1.5rem; padding-top: 1rem; .ssqbp_sidebars { .ssqbp_main { padding: 0; margin: 0; .mycourses { .mycourselist { border-radius: 5px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; padding: 24px; background-color: var(--highlight); .sq_mycourses_header { margin-bottom: 24px; display: flex; gap: 24px; justify-content: space-between; align-items: center; min-height: 50px; .header-heading { h3 { color: var(--text); font-size: 18px; } p { margin-top: 0; color: var(--text); opacity: .8; font-size: 12px; } } } } .course_above { display: flex; flex-wrap: wrap; margin: -12px; margin-bottom: 12px; >div { padding: 12px; } .myspeechbox { flex: 1; position: relative; .sqcardd { background-image: url(/wp-content/themes/hhsppp/assets/images/sbbak.png); min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; background-repeat: no-repeat; background-position-x: right; background-position-y: bottom; background-size: auto calc(100% - 24px); p { color: var(--text); opacity: .8; margin-top: 0; font-size: 12px; } h3 { color: var(--text); font-size: 18px; } .speechbox-header { display: flex; flex-direction: column; gap: 12px; justify-content: space-between; margin-bottom: 48px; .speechbox-wap { display: flex; gap: 8px; text-align: left; color: var(--text); align-items: center; .myspeechbox-title-wrap { display: flex; flex-direction: column; justify-content: space-between; } } .button.is_primary { margin: 0; width: fit-content; } } .speechbox-stats { display: flex; gap: 24px; flex-wrap: wrap; .sbox-stat { display: flex; gap: 8px; text-align: left; color: var(--text); align-items: center; padding: 0 !important; .stat-icon { width: 52px; height: 52px; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 22px; color: var(--ssqgreen); background: var(--ssqgreenbg); } .stat-info { display: flex; flex-direction: column; justify-content: space-between; h4, p { color: var(--text); margin-top: 0; } h4 { font-size: 16px; } p { font-size: 14px; } } } .sbox-stat.current .stat-icon { color: var(--intques); background: var(--intquesbg); } .sbox-stat.completed .stat-icon { color: var(--intpara); background: var(--intparabg); } .sbox-stat.deleted .stat-icon { color: var(--ssqred); background: var(--ssqredbg); } } } } @media (min-width: 768px) { .myspeechbox { padding-right: 12px; } .myspeechbox:after { display: none; } .clarity_check { padding-left: 12px; } } @media (min-width: 992px) { .clarity_check { padding-left: 24px; } .myspeechbox { padding-right: 24px; } .myspeechbox:after { display: flex; position: absolute; right: 0px; top: 12px; bottom: 12px; content: ""; border-right: 1px solid var(--border); } } .sqcardd { height: 250px; } .clarity_check { display: flex; flex-direction: column; .sqcardd { overflow: hidden; max-height: 250px; height: 100%; .clarity-title-wrap { display: flex; flex-direction: column; height: 68px; h3 { color: var(--text); font-size: 18px; } p { color: var(--text); opacity: .8; margin-top: 0; font-size: 12px; } a { margin-top: 8px; font-size: 12px; } } .clarity-chart { height: calc(100% - 68px); overflow: hidden; position: relative; .clarity-chart-container { height: 134px; canvas { width: 100% !important; } } .clarity-status { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; color: var(--text); p { opacity: .8; font-size: 12px; } h4 { font-size: 18px; } } } } } } } } } } } .sqcardd { border-radius: 5px; padding: 24px; background-color: var(--highlight); } .bshad { box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } table#staff_table { thead .dt-sorter:nth-of-type(7), tbody tr td:nth-of-type(7) { display: none; } } table#archived_table { thead .dt-sorter:nth-of-type(8), tbody tr td:nth-of-type(8), thead .dt-sorter:nth-of-type(9), tbody tr td:nth-of-type(9) { display: none; } } .member-type-instructor.ssqbp-component-community .ssqbp_left_sidebar, .member-type-student.ssqbp-component-community .ssqbp_left_sidebar { display: none; } .course_submissions_tab_conetnt>.vbp_message { padding: 24px !important; } .page.ssqbp-component-community { .ssqbp_sidebars { .ssqbp_main { margin: 0; inline-size: 100%; max-inline-size: 1440px; flex-grow: 1; padding-top: 1rem !important; margin-inline: auto; padding-block: 1.5rem; padding-inline: 1.5rem; .ssqbp_group_report { display: flex; flex-direction: column; .group_report_head { display: flex; flex-direction: column; .group_head_top { display: flex; i.vicon.vicon-arrow-left { padding: 6px; cursor: pointer; } } .ssqbp_full_group_info { display: flex; gap: 12px; padding: 12px; .group_info_left { display: flex; flex-direction: column; gap: 48px; width: 60%; margin-right: 22px; border-right: 1px solid var(--border); padding-right: 22px; .group_left_top { display: flex; gap: 1rem; align-items: center; img { max-width: 100px; border-radius: 5px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } .group_left_deetswrap { display: flex; flex-direction: column; line-height: normal; h1 { font-size: 32px; } .langlevelwrap { display: flex; align-items: center; gap: 12px; span.lvldiv { width: fit-content; border-radius: 5px; padding: 3px 12px; text-transform: capitalize; margin-left: 0; font-size: 14px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; height: fit-content; } } } .group_top_pts { gap: 6px; padding: 8px; border-radius: 5px; border: 1px solid var(--ssqorange); box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; text-align: center; margin-left: auto; h4 { color: var(--ssqorange); } span { display: flex; align-items: center; gap: 6px; img { height: 28px; border-radius: 50% !important; } } } } .group_left_bottom { display: flex; flex-direction: column; .user_quickstats { display: flex; gap: 1rem; justify-content: space-between; .user_quickstat { display: flex; flex: 1; gap: 1rem; align-items: center; .icon { height: 52px; width: 52px; border-radius: 5px; font-size: 22px; background-color: var(--ssqpurplebg); color: var(--ssqpurple); } .statinfo { display: flex; flex-direction: column; justify-content: space-between; >span { opacity: .8; font-size: 14px; margin-left: 2px; } h4 { color: var(--ssqpurple); font-size: 22px; line-height: normal; } } } .user_quickstat.clarity { .icon { background-color: var(--ssqyellowbg); color: var(--ssqyellow); } .statinfo { h4 { color: var(--ssqyellow); } } } .user_quickstat.proficiency { .icon { background-color: var(--ssqlightbluebg); color: var(--ssqlightblue); } .statinfo { h4 { color: var(--ssqlightblue); } } } .user_quickstat.confidence { .icon { background-color: var(--ssqgreenbg); color: var(--ssqgreen); } .statinfo { h4 { color: var(--ssqgreen); } } } } } } } } } .sq_groupusers_insights_wrap { padding: 0 12px 24px; margin: 0; display: flex; gap: 1rem; align-items: center; .insights_wrap { display: flex; gap: 1rem; flex: 1; justify-content: space-around; .sq_user_insight:nth-of-type(1) { .insight-icon { background-color: var(--ssqlightbluebg); color: var(--ssqlightblue); } .insight-wrap { >h2 { color: var(--ssqlightblue); } } } .sq_user_insight:nth-of-type(2) { .insight-icon { background-color: var(--ssqgreenbg); color: var(--ssqgreen); } .insight-wrap { >h2 { color: var(--ssqgreen); } } } .sq_user_insight:nth-of-type(3) { .insight-icon { background-color: var(--ssqredbg); color: var(--ssqred); } .insight-wrap { >h2 { color: var(--ssqred); } } } .sq_user_insight:nth-of-type(4) { .insight-icon { background-color: var(--ssqpurplebg); color: var(--ssqpurple); } .insight-wrap { >h2 { color: var(--ssqpurple); } } } .sq_user_insight, .sq_group_insight { display: flex; gap: 1rem; align-items: center; .insight-icon { height: 52px; width: 52px; border-radius: 5px; font-size: 22px; align-items: center; display: inline-flex; justify-content: center; } .insight-wrap { display: flex; flex-direction: column; justify-content: space-between; line-height: normal; >span { opacity: .8; font-size: 14px; margin-left: 2px; } >h2 { font-size: 22px; line-height: normal; } } .sqcardd { height: 100%; display: flex; font-size: 14px; gap: 8px; justify-content: space-between; .insight-wrap { display: flex; flex-direction: column; gap: .25rem; h4 { color: var(--text); opacity: .8; } h2 { color: var(--text); font-weight: 500px; font-size: 22px; span { margin-left: 5px; font-size: 14px; } } p { font-size: 12px; color: var(--text); opacity: .8; } } .insight-icon { width: 42px; height: 42px; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 26px; } } } .sq_user_insight:nth-of-type(1) { .sqcardd { .insight-wrap { h2 span { opacity: .8; } } .insight-icon { color: var(--intques); background: var(--intquesbg); } } } .sq_user_insight:nth-of-type(2) { .sqcardd { .insight-wrap { h2 span { color: var(--intfill); } } .insight-icon { color: var(--intfill); background: var(--intfillbg); } } } .sq_user_insight:nth-of-type(3) { .sqcardd { .insight-wrap { h2 span { color: var(--ssqred); } } .insight-icon { color: var(--ssqred); background: var(--ssqredbg); } } } .sq_user_insight:nth-of-type(4) { .sqcardd { .insight-icon { color: var(--intint); background: var(--intintbg); } } } } } .ssqbp_create_group.create_form { display: flex; flex-direction: column; gap: 1rem; .vicon-arrow-left { cursor: pointer; } .group_creation_steps>.group_step { gap: 24px; .group_avatar { flex: 0 0 300px; height: 300px; max-width: 300px; .uploader .uploaded_src { position: relative; height: 100%; width: 100%; .uploaded_image { overflow: hidden; img { height: 300px; width: 300px; object-fit: cover; aspect-ratio: 1; } } } } .group_creation_step.ssqbp_form { flex: unset; width: calc(100% - 324px); display: flex; flex-direction: column; >.button { margin: 12px 0 0; width: fit-content; margin-left: auto; } .group_name.ssqbp_form_field { gap: 0; margin-bottom: 12px; label { font-size: 14px; font-weight: 400; color: var(--text); display: inline-block; margin-bottom: 5px; opacity: 1; font-family: 'Roboto'; } input[type=text] { color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: .5rem; } input[type=text]:focus { border: 2px solid var(--primary); box-shadow: 0 2px 6px var(--gradientlight); } } .group_step.ssqbp_form { .field_group_lang { flex: unset; display: flex; flex-direction: column; margin-bottom: 12px; span>label { font-size: 14px; font-weight: 400; color: var(--text); display: inline-block; margin-bottom: 5px; opacity: 1; font-family: 'Roboto'; } } .field_group_level { flex: unset; display: flex; flex-direction: column; margin-bottom: 12px; span>label { font-size: 14px; font-weight: 400; color: var(--text); display: inline-block; margin-bottom: 5px; opacity: 1; font-family: 'Roboto'; } } } } } } .course_above.row { .mycontent { padding-right: 24px; padding-bottom: 12px; .sqcardd { background-image: url(/wp-content/themes/hhsppp/assets/images/sqbg3.png); min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; background-repeat: no-repeat; background-position-x: 100%; background-size: contain; background-color: var(--highlightbg); background-blend-mode: lighten; .mycontent-header { display: flex; flex-direction: column; gap: 12px; justify-content: space-between; flex: 1; .button.is_primary { width: fit-content; gap: .5rem; } } .mycontent-stats { display: flex; flex-direction: column; } } } .content_stats { padding-left: 24px; border-left: 1px solid var(--border); .sqcardd { min-height: 200px; display: flex; flex-direction: column; gap: 1rem; justify-content: space-between; .sq_content_stats { display: flex; gap: 1rem; justify-content: space-between; .sq_user_insight { display: flex; gap: 1rem; align-items: center; .insight-icon { height: 52px; width: 52px; border-radius: 5px; font-size: 22px; align-items: center; display: inline-flex; justify-content: center; background-color: var(--ssqpurplebg); color: var(--ssqpurple); } .insight-wrap { display: flex; flex-direction: column-reverse; justify-content: space-between; line-height: normal; >span { opacity: .8; font-size: 14px; } >h2 { font-size: 18px; line-height: normal; font-weight: 400; } } } .sq_user_insight:nth-of-type(1) .insight-icon { background-color: var(--ssqbluebg); color: var(--ssqblue); span { height: 22px; } } .sq_user_insight:nth-of-type(2) .insight-icon { background-color: var(--ssqorangebg); color: var(--ssqorange); } .sq_user_insight:nth-of-type(3) .insight-icon { background-color: var(--ssqgreenbg); color: var(--ssqgreen); } } } } } .myfriends.sqcardd.bshad { display: flex; flex-wrap: wrap; .myfriends_header { display: flex; align-items: center; gap: 24px; padding-right: 24px; .myfriends_nav { display: flex; align-items: center; gap: 12px; a.menu-child.current-menu-item { border-radius: 5px; background: linear-gradient(45deg, var(--gradientlight), var(--gradientmedium), var(--gradientdark)) !important; letter-spacing: normal; font-weight: unset; border: none !important; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; color: var(--highlight) !important; font-size: 14px; margin: 0; display: flex; cursor: pointer; justify-content: center; padding-bottom: calc(0.375em - 1px); padding-left: 0.75em; padding-right: 0.75em; padding-top: calc(0.375em - 1px); text-align: center; white-space: nowrap; } } } .portal_header { display: flex; align-items: center; gap: 24px; flex: 1; justify-content: space-between; .header_links { flex: 1; .sq_searchbox { padding: 0; .vicon-search { left: 12px; } } } } .portal_body { display: flex; flex-direction: column; width: calc(100% + 48px); padding: 24px; margin: 24px -24px -24px; border-top: 1px solid var(--border); } .friend_requests { display: flex; flex-direction: column; width: calc(100% + 48px); padding: 12px 24px 24px; margin: 24px -24px -24px; border-top: 1px solid var(--border); gap: 12px; .requests_header { display: flex; flex-direction: column; .header_acts { display: flex; gap: 12px; margin-left: -.5rem; >a { padding: .5rem; color: var(--text); } >a.active { color: var(--primary); } >a:hover { color: var(--primary) !important; } } } } } .sq_groupusers_wrap { padding: 0; position: relative; margin-top: 12px; .grouplist { padding: 25px; } } .sq_group_head { display: flex; gap: 24px; justify-content: space-between; align-items: center; padding: 24px; border-bottom: 1px solid var(--border); position: relative; .sq_searchbox { padding: 0; .vicon-search { left: 12px; } } .ssqbp_create_group.create_form { gap: 0; display: flex; flex-direction: column; position: absolute; background: var(--highlight); border-radius: 5px; z-index: 99; box-shadow: 0 0 25px var(--dark), 0 0 transparent, 0 0 transparent; top: -140px; left: 24px; .create_form_head { display: flex; flex-direction: row-reverse; .left_side { display: flex; i.vicon.vicon-arrow-left { margin: 0; padding: 24px 24px 0; } i.vicon.vicon-arrow-left:before { content: "\e646"; } } } .group_creation_steps.sqcardd.bshad { box-shadow: none; padding-top: 0; .group_avatar { border: 1px solid var(--border); border-radius: 5px; overflow: hidden; flex: unset; height: 300px; width: 300px; } .group_creation_step.ssqbp_form { min-width: 600px; justify-content: center; gap: 12px; .group_name.ssqbp_form_field { margin-bottom: 0; } a.button.is-fullwidth.is-primary.is-rounded { margin-left: auto !important; } } } } .button.is_primary { margin: 0; display: flex; gap: 8px; i { font-size: 14px; } } .mycourses_access_tabs { display: flex; align-items: center; gap: 12px; a { margin: 0; } } .userfilters { display: flex; gap: 24px; } .group.opts { display: flex; gap: 24px; align-items: center; .button.is_primary { margin: 0; display: flex; gap: 8px; i { font-size: 14px; } } } } .users_list { .members_table_wrap { padding: 0; color: var(--text); .members_table_filters { padding: 24px; border-bottom: 1px solid var(--border); display: flex; gap: 24px; justify-content: space-between; .userfilters { display: flex; gap: 24px; } .button.is_primary { margin: 0; display: flex; gap: 8px; align-items: center; i { font-size: 14px; } } span { display: flex; gap: 8px; font-size: 14px; align-items: center; } } .members_table_inner { display: flex; flex-direction: column; table { tbody>tr>th, thead>tr>th, tfoot>tr>th { height: 56px; -webkit-user-select: none; user-select: none; text-align: start; } tbody>tr>td, tbody>tr>th, thead>tr>td, thead>tr>th, tfoot>tr>td, tfoot>tr>th { padding: 0 16px; align-content: center; text-transform: capitalize; } thead>tr>th { border-bottom: 1px solid var(--border); align-content: center; >span { display: flex; width: 100%; gap: 8px; justify-content: space-between; align-items: center; >p { font-family: 'Roboto Slab'; } >div { display: flex; margin-right: -16px; flex-direction: column; font-size: 8px; span.vicon.vicon-angle-up, span.vicon.vicon-angle-down { border: none; opacity: 0; cursor: pointer; padding: 8px } span.vicon.vicon-angle-up.active, span.vicon.vicon-angle-down.active { opacity: 1; background: none; color: var(--text); } } } } thead>tr>th:hover { >span { >div { span.vicon.vicon-angle-up, span.vicon.vicon-angle-down { opacity: .5; } span.vicon.vicon-angle-up:hover, span.vicon.vicon-angle-down:hover { opacity: 1; } span.vicon.vicon-angle-up.active, span.vicon.vicon-angle-down.active { opacity: 1; } } } } th { color: var(--text); } tbody>tr { border-bottom: 1px solid var(--border); } tbody>tr>td:first-of-type, thead>tr>th:first-of-type { padding-left: 24px; } tbody>tr>td:last-of-type, thead>tr>th:last-of-type { padding-right: 24px; } tbody>tr>td { height: 56px; font-size: 14px; } tbody>tr>td.userstatus { span.user_status { font-size: 14px; height: 24px; display: flex; width: fit-content; padding: 0 10px; border-radius: 5px; } span.user_status.inactive { color: var(--ssqred); background: var(--ssqredbg); } span.user_status.active { background-color: var(--ssqgreenbg); color: var(--ssqgreen); } span.user_status.archived { background-color: var(--ssqdarkbluebg); color: var(--ssqdarkblue); } } tbody>tr>td.user_details { div { display: flex; gap: 1rem; img { height: 38px; border-radius: 50%; } span { display: flex; flex-direction: column; text-transform: lowercase; font-size: 12px; justify-content: center; a { color: var(--text); text-transform: capitalize; font-size: 15px; font-family: 'Roboto Slab'; } a:hover { color: var(--primary) !important; } } } } tbody>tr>td { span.tableaction { display: inline-flex; height: 38px; width: 38px; justify-content: center; align-items: center; font-size: 18px; border-radius: 50%; cursor: pointer; } span.tableaction:hover { background: var(--body); } span.tableaction.faded { opacity: .25; pointer-events: none; } } } } .members_table_bottom { padding: 24px; display: flex; gap: 1rem; .bulkoptions { display: none; align-items: center; gap: .5rem; span.button.is_primary { margin: 0; display: none; } } span.perpageopts { display: flex; align-items: center; gap: 12px; margin-left: auto; } .pagebuttons { >div { display: flex; gap: 8px; align-items: center; .ssq_pageingbutton { height: 38px; width: 38px; display: flex; justify-content: center; align-items: center; background: var(--border); color: var(--text); border-radius: 5px; cursor: pointer; } .ssq_pageingbutton.faded { cursor: not-allowed; } } } } } } .grouplist>.ssqbp_groups { grid-gap: unset; margin: -8px; width: unset; grid-template-columns: repeat(auto-fill, minmax(316px, 1fr)); .ssqbp_groups { padding: 8px; cursor: pointer; } .ssqbp_group { padding: 8px; .group_wrap { padding: 0; position: relative; border: 1px solid var(--border); border-radius: 5px; .group_avatar { width: 100%; padding: 8px 8px 0; img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; cursor: pointer; } } .group_info { padding: 8px 16px 16px; border: none; width: 100%; display: flex; flex-direction: column; gap: 12px; .group_info_wrap { display: flex; flex-direction: column; line-height: normal; p { font-size: 12px; opacity: .8; } .group_name { font-size: 18px; color: var(--text); text-align: start; position: unset; font-family: "Roboto Slab"; flex: unset; background: unset; border-radius: unset; padding: 0; margin-bottom: 12px; } .group_info_deets { display: flex; line-height: normal; align-items: center; gap: 6px; .lvldiv { width: fit-content; border-radius: 5px; padding: 6px 12px; text-transform: capitalize; margin-left: 0; font-size: 12px; } span.langdiv:before { height: 22px; width: 22px; } } } .gotogroup_btn { display: flex; align-items: center; gap: 8px; padding: 6px 12px; justify-content: center; border-radius: 5px; background: var(--intquesbg); color: var(--text); cursor: pointer; } .gotogroup_btn:hover { background: var(--gradientlight); } } } } .ssqbp_group:hover { box-shadow: none; transform: none; perspective: unset; img { transform: none; } } } .userlist { display: none; flex-direction: column; padding-top: 8px; .members_table_wrap, .staff_table_wrap, .archived_table_wrap { display: none; flex-direction: column; gap: 1rem; .table_options { display: none; gap: 1rem; justify-content: space-between; a { margin-bottom: 0; width: auto; } } } } } } } .ssqbp_full_group .group_content .leftright_wrapper .right_side .portal.groupmembers .portal_footer .actions { display: none; } .ssqbp_full_group .group_content .leftright_wrapper .right_side .portal.groupmembers .portal_footer { padding: 0; } .ssqbp_full_group .group_content .leftright_wrapper .right_side .portal.groupmembers .header_extras select option { display: none; } .ssqbp_full_group .group_content .leftright_wrapper .right_side .portal.groupmembers .header_extras select option.added { display: block; } .ssq_pop_wrapper { position: fixed; height: 100vh; max-height: 100vh; width: 100vw; background: var(--dark); z-index: 9999; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 1rem; align-items: center; justify-content: flex-start; } .add_single_user_form { display: flex; position: absolute; z-index: 2; top: -140px; left: 24px; box-shadow: 0 0 25px var(--dark), 0 0 transparent, 0 0 transparent; .user_form { background: var(--highlight); display: flex; flex-direction: column; border-radius: 5px; .user_form_header { display: flex; align-items: center; gap: 1rem; justify-content: space-between; h3 { font-size: 16px; padding-left: 24px; } .vicon-close { cursor: pointer; font-size: 14px; padding: 24px; } } .user_form_content { display: flex; flex-direction: column; padding: 0 24px 24px; min-width: 360px; span.select2-selection.select2-selection--multiple { min-height: 38px; border-radius: 5px; border-color: var(--border); } .select2-container .select2-search--inline { float: unset; width: 100%; display: flex; justify-content: right; } .user_form_group { padding: 12px 0; display: flex; flex-direction: column; label { font-size: 14px; font-weight: 400; color: var(--text); b { font-weight: 400; color: var(--ssqred); } } p.emailreq { color: var(--ssqred); opacity: .8; font-size: 14px; padding: 5px 0 0; } select { max-width: unset; } input[type=text] { height: 38px; } } .user_form_group:first-of-type { padding-top: 0; } .user_form_group.buttonss { flex-direction: row-reverse; gap: 16px; align-items: center; a.button { margin: 0; width: fit-content; opacity: .5; pointer-events: none; } a.link { display: none; } } } } } .add_single_user_form .vbp_message.endmsg { color: var(--primary); flex-direction: row; justify-content: center; } h3.corousel_poptitle { color: var(--text); font-size: 24px; } .page .button { border-radius: 5px; background: linear-gradient(45deg, var(--gradientlight), var(--gradientmedium), var(--gradientdark)) !important; letter-spacing: normal; font-weight: unset; border: none !important; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; color: var(--highlight) !important; font-size: 14px; margin: 0; } .rec-overviews .users .ssqbp_member img, .ve_modal-header .vicon-close { cursor: pointer; } .ssq_pop_wrapper #manageusers { display: flex; flex-direction: column; gap: 1rem; min-width: 720px; .mngusrhdr { gap: 1rem; display: flex; a { padding: .25rem .75rem; border: 2px solid var(--primary); border-radius: 25px; } a.active { background: var(--primary); font-weight: 600; } a.mngusrtab.create { margin-left: auto; } } .dt-wrapper { .userrow { cursor: pointer; } .dt-top { .dt-search { width: 100%; } .dt-dropdown { display: none; } } .dt-bottom { .dt-info { display: none; } } } .current_table_wrap { display: flex; flex-direction: column-reverse; gap: 1rem; a.button.is-primary.new_mail { margin: 0; width: fit-content; margin-left: auto; } } .available_table_wrap { display: none; flex-direction: column-reverse; gap: 1rem; a.button.is-primary.new_mail { margin: 0; width: fit-content; margin-left: auto; } } .add_users_form_wrap { display: none; flex-direction: column; } } .ssq_pop_wrapper_inner h3 { color: var(--text); } .page .ssq_editor_modal .modal-content { border-radius: 5px; box-shadow: none; margin-top: 0; max-width: 600px; background: var(--white); max-height: calc(100vh - 2rem); padding: 1rem; display: flex; flex-direction: column; overflow: hidden; gap: 1rem; >a.vicon { color: var(--text) !important; padding: .5rem; margin: -.5rem; width: fit-content; margin-left: auto; margin-bottom: .5rem; } .modal-header:after, .modal-header:before { display: none; } .modal-header { display: flex; justify-content: space-between; padding: 0 0 1rem; align-items: flex-start; border: var(--border); gap: 1rem; >a.vicon { color: var(--text) !important; padding: .5rem; margin: -.5rem; width: fit-content; margin-left: auto; } >div { display: flex; border-radius: 11rem; overflow: hidden; >a { color: var(--text) !important; padding: .5rem 1rem; background: var(--border); display: flex; margin: 0 !important; } >a.active { color: var(--highlight) !important; background: var(--primary); color: var(--highlight); } } } .modal-body { padding: 0; display: flex; flex-direction: column; gap: 1rem; max-height: 100%; overflow: hidden; .ssqbp_form { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: unset; .ssqbp_form_field { display: flex; flex-direction: column; gap: 10px; } .ssqbp_form_field:first-of-type { width: 100%; input { width: 100%; border: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 25px; padding: .5rem 1rem; } } } .upload_media { label { margin: 0; cursor: pointer; min-height: 300px; min-width: 300px; border: 2px dashed var(--border); display: flex; justify-content: center; align-items: center; } input { display: none; } } .allMedia { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 1rem; overflow-x: hidden; overflow-y: auto; .single_media:hover { .media_linkk { opacity: 0; } span.title { opacity: 1; } } .single_media { cursor: pointer; display: flex; justify-content: center; align-items: center; border: 1px solid var(--border); border-radius: 5px; aspect-ratio: 1; flex-direction: column; position: relative; >span { display: contents; } span.title { font-size: x-small; position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; opacity: 0; } .media_linkk { font-size: 32px; font-weight: lighter; color: var(--text); } } } } } .portal.activity_post .footer_links { gap: 1rem; .post_upload_wrap { position: relative; display: flex; max-width: calc(50% - .5rem); max-height: 150px; img { max-height: 150px; width: 100%; } >.vicon-close { position: absolute; right: .5rem; top: .5rem; font-size: 10px; padding: 4px; background: var(--ssqred); border-radius: 50%; color: var(--highlight); } a.vicon.vicon-close.current { display: none; } .uploader.current { border: none; } } .activity_post_buttons { display: flex; gap: .5rem; width: 100%; justify-content: end; .pin { margin-right: auto !important; display: flex; align-items: center; gap: 6px; background: var(--ssqorangebg); font-size: 12px !important; border-radius: 5px; padding: 6px 12px; opacity: .8; cursor: pointer; } .pin.pinned { background: var(--ssqorange); color: var(--ssqwhite); opacity: 1; } } } .portal .portal_body > textarea { resize: vertical; } .ssqbp_create_group .group_creation_steps .group_step .group_avatar .vicon { position: absolute; top: 6px; right: 6px; background: var(--primary); padding: 11px; border-radius: 5px; opacity: .8; cursor: pointer; font-size: 16px; } #MathJax_Message { display: none !important; opacity: 0; } .page .ssqbp_full_group { display: flex; flex-direction: column; .group_head { margin: 0 12px 12px; gap: 1rem; padding: 0; background: linear-gradient(rgba(0, 0, 0, 0.05), rgb(0 0 0)), url('/wp-content/themes/hhsppp/assets/images/defcover.jpg'); border-radius: 5px; background-attachment: fixed !important; background-repeat: no-repeat !important; background-size: 100%, 100% !important; min-height: 300px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; .group_head_top { display: flex; align-items: center; justify-content: space-between; .vicon-arrow-left { cursor: pointer; padding: .5rem; width: fit-content; background: var(--highlight); border-radius: 50%; margin: 24px; } .ssq_group_adminopts { margin-right: 24px; a { margin: 0 !important; } .ssqbp_create_group.create_form { gap: 0; display: flex; flex-direction: column; position: absolute; right: 60px; top: 84px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; background: var(--highlight); border-radius: 5px; .create_form_head { display: flex; flex-direction: row-reverse; .left_side { display: flex; i.vicon.vicon-arrow-left { margin: 0; padding: 24px 24px 0; } i.vicon.vicon-arrow-left:before { content: "\e646"; } } } .group_creation_steps.sqcardd.bshad { box-shadow: none; padding-top: 0; .group_avatar { border: 1px solid var(--border); border-radius: 5px; overflow: hidden; flex: unset; height: 300px; width: 300px; } .group_creation_step.ssqbp_form { min-width: 600px; justify-content: space-between; gap: 12px; .group_name.ssqbp_form_field { margin-bottom: 0; } a.button.is-fullwidth.is-primary.is-rounded { margin-left: auto !important; } } } } .adminopts_wrap { position: absolute; right: 60px; display: flex; border-radius: 5px; background: var(--highlight); top: 84px; flex-direction: column; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; a { text-transform: capitalize; } .adminopts_wrap_top { margin: 0; padding: 12px; } .sq_grup_opt { display: flex; cursor: pointer; position: relative; padding: .5rem 1rem; margin: 6px 0; min-height: 38px; align-items: center; font-size: 14px; gap: .5rem; font-weight: 400; i { width: 22px; display: flex; align-items: center; font-size: 18px; opacity: .8; justify-content: center; } } .sq_grup_opt:hover { opacity: 1; background: var(--body); border-radius: 5px; } a.delgroup { display: flex; gap: .5rem; font-size: 14px; border: 2px solid; border-radius: 5px; border-color: var(--ssqred); justify-content: center; color: var(--highlight) !important; background: var(--ssqred); box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; height: 38px; align-items: center; margin-top: .5rem !important; i { width: 22px; display: flex; align-items: center; font-size: 18px; opacity: .8; justify-content: center; } } a.delgroup:hover { background: var(--ssqred) !important; border-color: var(--ssqred) !important; } } .ssqbp_group_manageusers { display: flex; flex-direction: column; position: absolute; right: 60px; top: 84px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; background: var(--highlight); border-radius: 5px; .group_manageusers_header { display: flex; align-items: center; gap: 1rem; justify-content: space-between; padding-left: 24px; i.vicon.vicon-close { padding: 24px; cursor: pointer; } } .add_users_form_wrap { padding: 0 24px 24px; .bulkuser_review_wrap { display: flex; flex-direction: column; table#current_table { margin: 0 -24px 24px; } } .add_bulk_user_form { display: flex; flex-direction: column; gap: 24px; .bulkupload_content_wrap { padding: 12px; background: var(--body); border: 1px solid var(--border); border-radius: 5px; display: flex; flex-direction: column; gap: 6px; >span { display: flex; flex-direction: column; font-size: 12px; >span { display: flex; gap: 6px; align-items: center; a { font-size: 14px; } } } .bulkupload_content { display: flex; flex-direction: column; .vbp_message { background: none !important; font-size: 12px !important; opacity: .8; } label.button.is-primary.new_mail { margin: 0; font-size: 14px; } } } .user_form_content { .wrap_row1g { margin-top: 0; a.button.is-primary.new_mail.add_single_user { opacity: .5; pointer-events: none; font-size: 14px; } } label>b { color: var(--ssqred); } span.vbp_message.endmsg { flex-direction: row; align-items: center; line-height: normal; font-weight: 400; justify-content: center; margin-bottom: 0 !important; background: var(--ssqorangebg) !important; padding: .5rem !important; } span.vbp_message.endmsg.success { background: var(--ssqgreenbg) !important; } } } } .group_manageusers_body { display: flex; padding: 0 24px 24px; flex-direction: column; position: relative; .group_addusers_head { display: flex; gap: 12px; .sq_searchbox { padding: 0; width: 360px; span.vicon.vicon-search { left: 12px; } } span.button.is_primary { margin: 0; font-size: 14px; gap: .5rem; align-items: center; } } .current_table_wrap { display: flex; flex-direction: column; margin: 12px -24px -24px; max-height: 400px; overflow-x: hidden; overflow-y: auto; thead>tr>th { font-family: 'Roboto Slab'; } span.remuser { display: flex; align-items: center; background: var(--ssqred); width: 18px; height: 18px; justify-content: center; color: var(--ssqwhite); border-radius: 50%; cursor: pointer; } } .group_srchusers_results { display: flex; flex-direction: column; gap: 12px; padding: 12px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; background: var(--highlight); border-radius: 5px; position: absolute; z-index: 2; top: 42px; left: 24px; right: -12px; >span{ display: flex; align-items: center; gap: 1rem; justify-content: space-between; div { display: flex; flex-direction: column; } i.vicon.vicon-close { padding: 24px; cursor: pointer; } } .group_addusers_results { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; span.user_result { width: calc(33.33% - 8px); padding: 6px; border: 1px solid var(--border); border-radius: 5px; display: flex; flex-direction: column; cursor: pointer; .usrrimgtable { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 11px; text-transform: capitalize; gap: 6px; img { height: 36px; border-radius: 50%; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } h5 { font-size: 14px; font-weight: 500; } } } span.user_result:hover { border: 1px solid var(--primary); } } } } } } } .ssqbp_full_group_info { display: flex; padding: 24px; .group_info_left { display: flex; flex-direction: column; flex: 1; gap: 24px; .group_left_top { display: flex; gap: 24px; align-items: center; img { height: 125px; width: 125px; object-fit: cover; border-radius: 5px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } .group_left_deetswrap { display: flex; gap: 12px; flex-direction: column; h1 { color: var(--ssqwhite); } .langlevelwrap { display: flex; gap: 12px; align-items: center; } span.langdiv:before { height: 42px; width: 42px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } .lvldiv { width: fit-content; border-radius: 5px; padding: 3px 12px; text-transform: capitalize; margin-left: 0; font-size: 14px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; height: fit-content; } } .group_quickedit { display: flex; flex: 1; height: 100%; padding: 12px 0; opacity: .5; span.tableaction.vicon.vicon-pencil { display: flex; height: fit-content; padding: .5rem; cursor: pointer; margin-top: -3px; background: var(--shadow); border-radius: 50%; } } .group_quickedit:hover { opacity: 1; } .topsubmission { display: flex; flex-direction: column; line-height: normal; align-items: center; gap: 12px; padding: 24px; background: var(--highlight); border-radius: 5px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; border: 1px solid var(--ssqgreen); h4 { font-size: 16px; font-weight: 600; } div { display: flex; align-items: center; gap: 1rem; font-family: 'Roboto Slab'; font-weight: 500; img { height: 36px; width: 36px; border-radius: 50%; } h2 { font-size: 16px; color: var(--ssqgreen); } } } } .group_left_btm { display: flex; gap: 1rem; justify-content: space-between; .sq_content_stat { display: flex; gap: .5rem; align-items: center; .insight-icon { width: 42px; height: 42px; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 22px; color: var(--secondary); background: var(--intquesbg); aspect-ratio: 1; } .insight-wrap { display: flex; flex-direction: column; line-height: normal; h2 { font-size: 18px; } span { font-size: 12px; opacity: .8; } } } .sq_content_stat.clarity { .insight-icon { color: var(--ssqyellow); background: var(--ssqyellowbg); } .insight-wrap { h2 { color: var(--ssqyellow); } } } .sq_content_stat.fluency { .insight-icon { color: var(--ssqpurple); background: var(--ssqpurplebg); } .insight-wrap { h2 { color: var(--ssqpurple); } } } .sq_content_stat.proficiency { .insight-icon { background: var(--ssqlightbluebg); color: var(--ssqlightblue); } .insight-wrap { h2 { color: var(--ssqlightblue); } } } .sq_content_stat.confidence { .insight-icon { background-color: var(--highlight); color: var(--ssqred); box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; border: 1px solid var(--primary); } } } } .group_info_right { display: flex; flex-direction: column; gap: 12px; width: 40%; >h5 { font-weight: 600; } .sq_group_list { display: grid; gap: 1rem; grid-template-columns: calc(50% - .5rem) calc(50% - .5rem); .sq_group_single { font-family: 'Roboto Slab'; font-weight: 600; font-size: 16px; display: flex; gap: 1rem; height: fit-content; align-items: center; width: fit-content; img { width: 52px; height: 52px; border-radius: 5px; object-fit: cover; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } .insight-wrap { display: flex; flex-direction: column; line-height: normal; span { opacity: .8; font-size: 11px; font-weight: 400; } h2 { font-size: 14px; } } } } } } } .group_deets_actions { display: none; gap: 24px; justify-content: space-between; padding: 24px 24px 12px; margin: 0 12px; align-items: center; .small_deetswrap { display: flex; gap: 1rem; opacity: .8; } .group_deets_actions_right { display: flex; a.button.is_primary { margin: 0; } } } .portal .portal_body .activity_list .activity_item .activity_body>.activity_list .activity_list>.activity_item>.activity_body .activity_list .activity_item .activity_avatar { .ssqbp_member{ gap: 0 !important; img { display: none !important; } } .datetime { left: 0 !important; } } .group_content.home { display: flex; flex-direction: column; .ssq_group_wrap { display: flex; flex-wrap: wrap; .ssq_group_lrg .ssqbp_sidebars .ssqbp_main { flex-grow: unset; min-height: unset; z-index: unset; position: relative; margin: 0; padding: 0 !important; display: flex; flex-direction: column; gap: 24px; } .ssq_group_lrg { padding: 12px; display: flex; flex-direction: column; .ssqbp_sidebars { flex-direction: column; } } .ssq_group_smll { padding: 12px; display: flex; flex-direction: column; gap: 24px; } .group_info_side { display: flex; position: relative; padding: 24px; background: var(--highlight); border-radius: 5px; flex-direction: column; gap: 12px; margin: 0; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; h5 { font-weight: 600; >span { font-size: 14px; font-weight: 400; font-family: 'Roboto'; opacity: .8; } } .sq_group_list { gap: 12px; display: grid; grid-template-columns: calc(50% - 6px) calc(50% - 6px); .sq_group_single { display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--border); border-radius: 5px; gap: 6px; aspect-ratio: 1 / 1; h5 { text-align: center; font-size: 14px; font-weight: 500; } img { flex: 1; object-fit: cover; border-radius: 5px; } } } } .group_info_side.mods { gap: 24px; .sq_mods_list { display: flex; flex-wrap: wrap; gap: 5%; .sq_single_mod { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 11px; text-transform: capitalize; cursor: pointer; gap: 6px; width: 30%; padding-bottom: 5%; img { height: 36px; width: 36px; border-radius: 50%; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; object-fit: cover; } h5 { font-size: 12px; } } } } .group_info_side.leaderb { >h5 { display: flex; flex-direction: column; } .sq_leaderboard_list { display: flex; flex-direction: column; gap: 6px; .sq_leaderboard_head { display: grid; grid-template-columns: 20% 50% 30%; font-size: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); span { padding: 0 12px; } } .sq_single_member { display: grid; grid-template-columns: 20% 50% 30%; align-items: center; padding: 6px 12px; border-radius: 5px; span.userdeets { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 12px; img { height: 28px; width: 28px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } } span.points { padding-left: 18px; font-family: 'Roboto Slab'; font-size: 14px; } } .sq_single_member:nth-of-type(2), .sq_single_member:nth-of-type(3), .sq_single_member:nth-of-type(4) { padding: 12px; span.userdeets { font-size: 14px; img { height: 36px; width: 36px; } } span.points { padding-left: 18px; font-weight: 500; } } .sq_single_member:nth-of-type(2) { background: var(--ssqfirst); } .sq_single_member:nth-of-type(3) { background: var(--ssqsecond); } .sq_single_member:nth-of-type(4) { background: var(--ssqthird); } } } .ssq_group_smll.deets { .ssq_group_head { position: relative; display: flex; flex-direction: column; padding: 0; align-items: center; margin-bottom: 24px; .group_avatar { display: flex; flex-direction: column; position: relative; width: 100%; padding: 12px; img { max-width: 300px; aspect-ratio: 1; object-fit: cover; border-radius: 5px; } } h1 { border-radius: 0 0 4px 4px; display: flex; align-items: center; gap: .5rem; justify-content: space-between; padding: 0 12px 12px; a.vicon.vicon-more-alt { margin-left: auto; background: var(--primary); color: var(--text); padding: 5px; border-radius: 50%; height: 36px; width: 36px; display: flex; justify-content: center; align-items: center; opacity: .75; } .langdiv { position: absolute; top: 28px; left: 28px; } p { font-size: 18px; font-weight: 600; color: var(--text); } .lvldiv { display: none; } } .adminopts_wrap_btm { display: flex; width: 100%; border-top: 1px solid var(--border); a.link { padding: 12px; flex: 1; display: flex; gap: 8px; justify-content: center; align-items: center; color: var(--text); font-size: 14px !important; i { color: var(--primary); } } } } .folders-wrap { display: flex; flex-direction: column; h3.component_title { display: flex; align-items: center; cursor: pointer; gap: .5rem; justify-content: space-between; i { font-weight: bolder; } } .folders-list { margin: 0 -12px; } } .group_side_bar_component.hiding { display: none; } .announcements_wrapper.creating { background: var(--transparency); box-shadow: var(--shadow) 0px 5px 15px; .component_title { color: transparent; a { display: flex !important; margin-bottom: -.25rem; border: 0; padding: .25rem; height: auto; width: fit-content; } a:hover { background: none; color: var(--primary); } } .portal_body { display: none; } .portal_header.add_announce button { width: fit-content; margin-left: auto; } } .galleries_wrapper.group_side_bar_component { background: var(--transparency); box-shadow: var(--shadow) 0px 5px 15px; .component_title { display: none !important; } .portal_header { .input_field_wrapper { border: 0; padding: 0; width: 100%; input { height: 42px; padding: 0 .5rem; } } #ssq_confirm_workspace { width: fit-content; margin-left: auto; } .vicon.vicon-close { order: -1; color: var(--primary); margin-left: auto; } } } .__single_gallery.showing:hover { .folder_optts { opacity: 1 !important; } } .__single_gallery.compact { padding: 12px; background: none; position: relative; cursor: pointer; width: 50%; display: inline-flex; .single_gallery_title { padding: 0; margin: 0; border-bottom: 0; gap: 0; .gallery_title { background: var(--ssqyellow); border-radius: 0 15px 0 0; padding: .25rem .5rem; width: 40%; flex: unset; font-size: 0; height: 12px; } .folder_optts { display: none !important; } } .item_count { font-size: 12px; padding: 5px; text-wrap: nowrap; text-align: center; overflow: hidden; } .item_uploader_viewer { margin-top: 0; background: var(--ssqyellow); border-radius: 0 5px 5px 5px; padding: 1rem .5rem; z-index: 1; box-shadow: var(--shadow) -3px -2px 8px 0px; aspect-ratio: 16 / 9; width: 100%; .item_view { display: none; a.save_folder { display: none; } } } } .__single_gallery.showing { padding: 0; background: none; position: relative; margin: 12px; width: calc(100% - 24px); flex-wrap: unset; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; .single_gallery_title { cursor: pointer; padding: 0; margin: 0; border-bottom: 0; gap: 0; .__create_form { flex-direction: row; gap: .25rem; .input_field_wrapper { border: none; display: flex; align-items: center; padding: 0; border-radius: 0 5px 0 0; overflow: hidden; background: var(--highlight); flex: 1; input { margin: .5rem; background: var(--border); padding: 0 .5rem; } } .__create_form_actions { gap: .25rem; a.vicon { padding: .5rem .5rem; } } } .gallery_title { background: var(--highlight); border-radius: 0 5px 0 0; padding: .25rem .5rem; } .folder_optts { display: flex; gap: .25rem; padding: 0 .25rem; opacity: 0; a.vicon { padding: .5rem; color: var(--text); opacity: .8; } a.vicon:hover { opacity: 1; } } } .item_count { display: none; } .item_uploader_viewer { margin-top: 0; min-height: 240px; background: var(--highlight); border-radius: 0 5px 0 0; padding: 1rem .5rem; .item_view { display: flex; flex-direction: column; .corousel_items { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); grid-gap: .5rem; margin: 0; .corousel_item:hover { >span { opacity: 1 !important; } .corousel_link { opacity: 0 !important; } } .corousel_item { aspect-ratio: 1; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; >span { font-size: x-small; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; z-index: 0; border: 1px solid var(--border); border-radius: 5px; opacity: 0; } a.vicon.vicon-close { display: none; margin: -.25rem; font-size: 10px; padding: 3px; background: var(--ssqred); border-radius: 50%; color: var(--highlight); z-index: 1; } .corousel_link { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; object-fit: scale-down; border: 1px solid var(--border); border-radius: 5px; cursor: pointer; z-index: 1; i { font-size: 32px; font-weight: lighter; } } } } a.save_folder { display: none; } } } } .announcements_wrapper { background: none; margin-bottom: 12px; .component_title { padding: 0 0 12px; a { display: none !important; } } .portal_body { padding: .25rem 0 0; .announcement_dots_wrapper label { cursor: pointer; } .announcement_dots_wrapper label.active { background: var(--primary); } .all_announcements_wrapper { display: flex; background: var(--ssqyellow); overflow: hidden; box-shadow: var(--shadow) 0px 13px 27px -5px, var(--shadow) 0px 8px 16px -8px; .announcement_wrapper:hover { .announce_optts { opacity: 1 !important; } } .announcement_wrapper { height: 100%; .__single { flex-direction: column-reverse; align-items: normal; border: 0; background: none; padding: .5rem .5rem 1rem; .announce_optts { display: flex; gap: .25rem; justify-content: end; opacity: 0; a.vicon { padding: .25rem; color: var(--text); } } .__desc { flex: unset; height: 100%; display: flex; flex-direction: column; text-align: center; justify-content: center; font-family: 'Roboto'; font-weight: 600; cursor: pointer; } .__create_form { flex-direction: column-reverse; justify-content: start; textarea { margin-top: .5rem; } .__create_form_actions { justify-content: end; gap: .25rem; a.vicon { padding: .25rem; } } } } } } } } } .portal.groupmembers { width: 100%; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; .portal_header { a.ssq_group_manageusers { width: 100%; margin: 0 .5rem !important; display: flex; gap: .5rem; font-size: 14px; color: var(--primary); } .header_extras select { flex: 1; } } .portal_body { padding: 0; .members { display: flex; flex-direction: column; gap: 0; overflow-x: hidden; overflow-y: auto; >div { width: 100%; } .membercard { flex-direction: row; max-height: 64px; gap: .25rem; align-items: center; cursor: pointer; padding: .75rem 1rem; border-top: 1px solid var(--border); width: 100%; position: relative; img { width: 32px; border: 1px solid var(--border); } .member_details { .request_actions { display: none; } strong { font-family: 'Roboto'; font-size: small; text-wrap: nowrap; } font-size: initial; padding: 0; display: flex; flex-direction: row; width: 100%; .is-highlight { top: unset; right: 1rem; } } } } } } .ssq_group_lrg .ssqbp_sidebars .ssqbp_main>.portal.activity_post { box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; flex-wrap: unset; .portal_body { display: flex; flex-direction: row; gap: 12px; padding: 24px; img.ssqbp_avatar { height: 48px; border: 1px solid var(--border); width: 48px; object-fit: cover; border-radius: 50%; } } .portal_footer { padding: 0 24px 24px; } .portal_footer a.button{ margin: 0; width: fit-content; } .portal_footer a:not(.button) { margin: 0; } .portal_footer a:not(.button):hover { background: none; } } .portal.group_posts { border-radius: unset; overflow: unset; gap: 24px; background: none; .portal_header { padding: 0; margin: 0; .header_links { flex: 1; margin: 0; .searchbox.active { border-radius: 25px; padding: 0; background-color: var(--highlight); border: none; position: relative; input[type="text"] { padding: 6px 8px 6px 32px; width: 100%; z-index: 2; background: none; border-radius: 25px; border: 1px solid var(--border); box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } input[type="text"]:focus { border: 2px solid var(--primary); box-shadow: 0 2px 6px var(--gradientlight); } .vicon-search { position: absolute; left: 12px; color: var(--text); font-size: 14px; padding: 0; } } } } >.portal_body { padding: 0; >.activity_list.main{ .activity_item.pinned { order: -1; } } >.activity_list { border-left: none; margin-left: inherit; display: flex; flex-direction: column; gap: 24px; .activity_item:before, .activity_item:after { display: none; } .activity_item:hover .activity_avatar_wrap a.vicon-trash{ opacity: 1 !important; } .activity_item.activity_comment { position: relative; gap: .5rem; padding: .5rem 0 0 !important; margin-top: 0; flex: 1; justify-content: flex-start; overflow: hidden; >.outeravatar { cursor: pointer; height: fit-content; img.ssqbp_avatar { height: 42px; border: 1px solid var(--border); width: 42px; object-fit: cover; border-radius: 50%; } } .activity_body { z-index: 3; .activity_content.subcomment { background-color: var(--body); padding: 12px; border-radius: 5px; .activity_avatar_wrap_inn { display: flex; flex-direction: row; gap: 1rem; justify-content: space-between; margin-bottom: 12px; >span { .ssqbp_user_avatar { cursor: pointer; .ssqbp_member { display: flex; align-items: center; gap: .5rem; font-family: 'Roboto Slab'; text-transform: capitalize; font-size: 14px; img.ssqbp_avatar { display: none; } } } .datetime { display: flex; font-size: xx-small; width: fit-content; flex-wrap: wrap; justify-content: center; position: unset; } } a.vicon-trash { height: fit-content; opacity: 0; } } } .activity_actions { border: none !important; margin-top: 0 !important; img.ssqbp_avatar { display: none; } .reactions-container { gap: 0 !important; font-size: 0; .vicon-thumb-up { font-size: initial; } } a.commenting, a.delit { gap: 0 !important; font-size: 0; i { font-size: initial; } } } } } .activity_item.activity_comment:hover .activity_avatar_wrap_inn a.vicon-trash{ opacity: 1 !important; } .activity_item.activity_update { position: relative; padding: 0; background: var(--highlight); border-radius: 5px; flex-direction: column; gap: 12px; margin: 0; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; .activity_body { z-index: 3; display: flex; flex-direction: column; justify-content: space-between; padding: 0 !important; border-left: 0 !important; .activity_content { padding: 12px 24px 0; } .reactions-overview { margin: .5rem 0 0; border-top: 1px solid var(--border); padding: .5rem 0 0; font-size: x-small; img { height: 32px; width: 32px; } } .activity_list { margin: 0; display: flex; flex-direction: column; gap: 12px; border-left: none; padding: 0 24px; } .portal.activity_post { gap: .5rem; padding: 1.5rem; a.vicon.vicon-pin-alt { display: none; } .portal_body { padding: 0; display: flex; gap: .5rem; >img { height: 48px; border-radius: 50%; } } .portal_footer { padding: 0; .footer_links { a.button { margin: 0 0 0 .5rem; } a:not(.button) { margin: 0; } a.link { font-size: small !important; } a.link:hover { background: none; border: 0; } a.link:hover:after { display: none !important; } } } } .activity_actions { margin-top: 12px; border-top: 1px solid var(--border); gap: .5rem; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding: 0 24px; img.ssqbp_avatar { height: 32px; width: 32px; object-fit: cover; margin: .5rem 0; border-radius: 50%; border: 1px solid var(--border); } a.commenting, a.delit, .reactions-container { display: flex; gap: .5rem; align-items: center; padding: .5rem; } a.delit { margin-left: auto; } .reactions-container { cursor: pointer; .my-reaction { img { margin: 0; } .vicon-thumb-up { padding: 0; } } } } } >.activity_avatar { margin: 0; line-height: normal; flex-basis: unset; display: flex; flex-direction: column; min-height: 72px; padding: 24px 24px 0; i.vicon.vicon-pin2 { position: absolute; z-index: 2; background: var(--ssqorange); color: var(--ssqwhite); padding: 6px 6px 5px 5px; border-radius: 50%; top: 12px; left: 12px; font-size: 11px; } >a { height: fit-content; } .activity_avatar_wrap { display: flex; flex-direction: row; gap: 1rem; justify-content: space-between; z-index: 2; a.vicon-trash { height: fit-content; opacity: 0; } } .ssqbp_user_avatar { cursor: pointer; .ssqbp_member { display: flex; align-items: center; gap: .5rem; font-family: 'Roboto Slab'; text-transform: capitalize; img.ssqbp_avatar { height: 48px; width: 48px; object-fit: cover; border: 1px solid var(--border); } span { margin-bottom: 0.75rem; } } } .datetime { font-size: x-small; margin-left: calc(48px + .5rem); margin-top: -1.25rem; z-index: 1; } } } } } } .portal { margin-bottom: 0; border-radius: 5px; overflow: hidden; } } } } .user_card_wrap { display: flex; flex-direction: column; min-width: 460px; gap: 24px; align-items: center; text-align: center; .user_card_top { display: flex; flex-direction: column; gap: 12px; align-items: center; img { height: 150px; width: 150px; border-radius: 50%; object-fit: cover; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } .usr_deets_wrap { display: flex; flex-direction: column; line-height: normal; h5 { text-transform: capitalize; font-size: 22px; font-weight: 500; } .usr_minideets { display: flex; justify-content: center; gap: 6px; font-size: 12px; opacity: .8; span:first-of-type { text-transform: capitalize; } } >span { padding: 6px 0 0; } } } .user_card_btm { display: flex; flex-direction: column; gap: 24px; .user_card_stats { display: none; gap: 48px; .user_card_stat { display: flex; flex-direction: column; gap: 3px; min-width: 120px; h5 { font-weight: 500; span { font-size: 12px; } } span { font-size: 12px; opacity: .8; } } } .user_card_opts { display: flex; justify-content: center; gap: 12px; >span { padding: 10px 16px; font-size: 16px; border-radius: 5px; cursor: pointer; line-height: normal; display: flex; gap: 8px; position: relative; } span.friend_usercard { color: var(--highlight); background: var(--secondary); >i:first-of-type { margin-right: -10px; font-size: 10px; display: flex; justify-content: center; align-items: center; } } span.friend_usercard.is_friend { background: var(--ssqgreen); pointer-events: none; } span.friend_usercard.pending { pointer-events: none; } span.message_user_card { background: var(--border); } } } .user_card_msg { display: flex; gap: 12px; width: 100%; img { height: 36px; width: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } >div { display: flex; flex-direction: column; flex: 1; align-items: end; gap: 12px; textarea#usercard_msg { resize: vertical; min-height: 100px; padding: .5rem; } >span { display: flex; align-items: center; gap: 12px; } } } span.vbp_message { align-items: baseline; font-weight: 400; justify-content: center; color: var(--ssqred); } span.vbp_message.success { color: var(--ssqgreen); } } .user_card_opts .vicon-user.rem:before, .user_card_opts .vicon-settings:before { color: var(--highlight); background: coral; } .user_card_opts .vicon-user.rem:after { content: "-"; position: absolute; top: 12px; left: 10px; width: 42px; color: var(--highlight); display: flex; } .user_card_opts .vicon-user.add:after { content: "+"; position: absolute; top: 12px; left: 10px; width: 42px; color: var(--highlight); display: flex; } .user_card_opts .vicon-user.add:before { color: var(--highlight); background: var(--ssqgreen); } textarea#messageincard { padding: .5rem; resize: vertical; } a.button.is-primary.send_mgs { margin: .75rem 0 0; float: right; } .ssqbp_full_group .group_content .leftright_wrapper .right_side .portal.groupmembers .header_extras, .ssqbp_full_group .group_content .leftright_wrapper .right_side .portal.groupmembers .header_extras select { max-width: unset; width: 100%; flex: unset; } .dt-wrapper { display: flex; flex-direction: column; max-height: 100%; position: relative; overflow: hidden; gap: 1rem; .dt-top { display: flex; justify-content: space-between; flex-direction: column-reverse; gap: 1rem; .dt-dropdown label { font-size: 14px; font-weight: 400; text-transform: capitalize; } .dt-search { display: flex; width: 75%; border: 1px solid var(--border); border-radius: 25px; background: var(--highlight); margin: auto; input.dt-input { border-radius: 25px; border: none; background: transparent; width: 100%; padding: .5rem 1rem; } } } .dt-container table { table-layout: auto; width: 100%; background: var(--highlight); border-radius: 5px; thead { border-bottom: 1px solid var(--border); >tr{ >th{ vertical-align: middle; padding: .5rem 1rem; white-space: nowrap } .dt-sorter { position: relative; cursor: pointer; padding-right: 20px; } .dt-sorter:before, .dt-sorter:after { content: ""; height: 0; width: 0; position: absolute; right: 6px; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: 0.2; } .dt-sorter:before { border-top: 4px solid var(--shadow); top: 22px; } .dt-sorter:after { border-bottom: 4px solid var(--primary); border-top: 4px solid transparent; bottom: 22px; } .dt-sorter.asc:after, .dt-sorter.desc:before { opacity: 1; } } } tbody { font-size: 14px; text-transform: capitalize; >tr { border-bottom: 1px solid var(--border); >td { vertical-align: middle; padding: .5rem 1rem; white-space: nowrap; } } >tr:last-of-type { border-bottom: none; } } } .dt-bottom { display: flex; flex-direction: row; justify-content: space-between; align-items: center; .dt-info { font-size: 14px; } .dt-pagination ul { display: flex; justify-content: center; gap: .5rem; align-items: center; li a { color: var(--text); } } } } #ssqbp_member .user_groups_list_inner .vbp_message { background: none; } .user_card_wrap .edit_user { max-height: 100%; overflow: hidden; .edit_user_content { display: flex; flex-direction: column; max-height: 100%; overflow: hidden; } a.vicon.vicon-arrow-left { position: absolute; top: 1rem; } .edit_user_content .manage_user_wrap { display: flex; gap: 1rem; max-height: 100%; max-width: 650px; .manage_user_profile { display: flex; flex-direction: column; max-width: 300px; width: 300px; >span { display: flex; flex-direction: column; } .usr_img .area { border: 1px solid var(--border); border-radius: 5px; overflow: hidden; input { display: none; } } .usr_img .area:hover { cursor: pointer; opacity: .5; } .editdeetawap { display: flex; flex-direction: column; gap: .25rem; margin: .5rem 0; font-size: 14px; >span { display: flex; flex-direction: column; } textarea#changeabout { resize: none; padding: 5px; height: 54px; } .isadinst { display: flex; gap: 1rem; justify-content: end; span { display: flex; align-items: center; gap: .5rem; label { margin: 0; } } } } .account_opts { display: flex; gap: 1rem; justify-content: space-between; a.button { margin: 0; width: fit-content; } } } .manage_user_groups { display: flex; flex-direction: column; width: 100%; max-width: 650px; label { font-size: 14px; } .langlvlopts { display: grid; grid-template-columns: calc(50% - .25rem) calc(50% - .25rem); gap: .5rem; margin: 0 0 .5rem; font-size: 10px; justify-content: space-between; .langopt span { display: flex; gap: .25rem; align-items: center; width: 100%; select { height: auto; padding: .5rem; width: 100%; } .langdiv:before { height: 28px; width: 28px; } } } .user_groups_list { display: flex; flex-direction: column; height: 100%; .user_groups_list_inner { display: flex; gap: .25rem; overflow-x: hidden; overflow-y: auto; flex-direction: column; .manage_usr_groups { display: flex; position: relative; border-radius: 5px; overflow: hidden; height: 38px; border: 1px solid var(--border); img { height: 38px; width: 38px; border-right: 1px solid var(--border); } .vicon-close { position: absolute; top: 0; right: 0; padding: .5rem; background: var(--primary); color: var(--highlight); } .vicon-close { padding: .5rem; background: var(--highlight); color: var(--border); order: 1; display: flex; line-height: 1.4; } .vicon-close:hover { color: var(--primary); } .usr_groups_deets { display: flex; align-items: center; width: 100%; padding: .5rem; font-size: 12px; gap: .5rem; font-family: 'Roboto'; background: var(--highlight); line-height: 1; .langdiv:before { height: 22px; width: 22px; } } } } } .addtogroups { margin: .25rem 0 calc(21px + .75rem); display: flex; flex-direction: column; >.select2 { width: 100% !important; display: flex; align-items: end; ul { padding: 0 !important; } } .select2-container--default .select2-selection--multiple { border: none !important; padding: 0 !important; width: 100%; display: flex; flex-direction: column; justify-content: space-between; li.select2-selection__choice { display: inline-flex; margin-top: 0; margin-bottom: 5px; } } .select2-container .select2-search--inline { width: 100%; height: 54px; border: 1px solid var(--border); padding: 0 .5rem; } .select2-container span.selection { height: 100%; display: flex; width: 100%; align-items: end; } textarea { resize: none; } } a.button.is-primary.new_mail.saveusrdeets { margin: auto 0 0 auto; width: fit-content; opacity: .5; pointer-events: none; } } } } .ssq_mymedia_wrapper { z-index: 9999; position: fixed; } table .usrrimgtable { display: flex; gap: .5rem; width: 100%; align-items: center; overflow: hidden; >div { display: none; } img { height: 32px; border-radius: 50%; border: 1px solid var(--border); } } .usr_langs { display: flex; gap: 5px; .user_lang { display: inline-flex; align-items: center; .langdiv:before { height: 32px; width: 32px; } .lvldiv { width: 18px; height: 18px; font-size: 12px; } } } .ssq_pop_wrapper #managegroups { display: flex; flex-direction: column; gap: 1rem; min-width: 720px; td:not(.chks){ cursor: pointer; } td.group_details>div { display: flex; gap: .5rem; align-items: center; img { width: 32px; height: 32px; border-radius: 50%; } } .mnggrpshdr { display: flex; a { padding: .5rem; border: 1px solid var(--border); background: var(--border); border-radius: 5px 5px 0 0; } a.active { background: var(--highlight); color: var(--primary); border-bottom: 0; } } .dt-wrapper { .userrow { cursor: pointer; } .dt-top { .dt-search { width: 100%; } .dt-dropdown { display: none; } } .dt-bottom { .dt-info { display: none; } } } .current_table_wrap { display: flex; flex-direction: column-reverse; gap: 1rem; a.button.is-primary.new_mail { margin: 0; width: fit-content; margin-left: auto; } } .available_table_wrap { display: none; flex-direction: column-reverse; gap: 1rem; a.button.is-primary.new_mail { margin: 0; width: fit-content; margin-left: auto; } } } .ssq_pop_wrapper .ssq_create_content { display: flex; flex-direction: column; .form_wrap { display: flex; flex-direction: column; gap: 1rem; max-width: 720px; margin: auto; width: 100%; a.content_image { margin: auto; position: relative; border-radius: 5px; overflow: hidden; height: 300px; width: 300px; img { position: absolute; top: 0; left: 0; max-width: unset; height: 300px; width: 300px; object-fit: cover; } >p { text-align: center; font-size: x-small; position: absolute; left: 0; right: 0; top: 4rem; bottom: 0; align-content: center; opacity: 0; color: var(--text) !important; background: var(--body); width: fit-content; height: fit-content; margin: auto; padding: 2px 4px; border-radius: 5px; } .vicon-pencil:before { font-size: 18px; padding: 8px; background: var(--highlight); border-radius: 50%; } .vicon-pencil { position: absolute; display: flex; top: 0; bottom: 0; left: 0; right: 0; justify-content: center; align-items: center; } } a.content_image>p:hover { opacity: 1; } .content_name { display: flex; flex-direction: column; gap: .25rem; label { text-transform: capitalize; } } .content_language { display: flex; flex-direction: column; gap: .5rem; .langs_wrap { display: flex; gap: .5rem; justify-content: space-between; .lang_wrap { display: flex; position: relative; flex-direction: column; gap: 1rem; font-size: x-small; text-align: center; align-items: center; input { display: none; } input:checked+.lang_selector { border-radius: 50%; opacity: 1; img { height: 38px; width: 38px; } } .lang_selector { opacity: .5; display: flex; flex-direction: column; gap: .5rem; margin: 0; font-size: small; align-items: center; cursor: pointer; width: 42px; img { height: 42px; width: 42px; } } span { font-weight: 400; margin: 0; opacity: 0; } } .lang_wrap:hover { span { opacity: 1; } } } } a.button.is-primary.is-rounded { margin: 0; width: fit-content; opacity: .5; text-transform: capitalize; } a.save_details { background: var(--primary); color: var(--text); } } } a.img_ocr span { font-size: x-small; opacity: .6; } #ssq_loadedfiles { #editupload { display: flex; flex-direction: column; flex: 1; overflow: hidden; .vbp_message { margin: 0; border-radius: 0; border-top: 1px solid var(--border); } .CodeMirror{ height: 100%; } .CodeMirror_rem { font-size: 14px; flex: 1; pre.CodeMirror-line, pre.CodeMirror-line-like { max-width: calc(500px - 45px); } .CodeMirror-sizer { margin-left: 0 !important; } .CodeMirror-gutters { display: none; } div.CodeMirror-cursors { margin-left: 29px; } .CodeMirror-code>div { display: flex; .CodeMirror-gutter-elt, .CodeMirror-gutter-wrapper { position: unset; max-width: 28px !important; } } } .attachments_div { display: flex; flex-direction: column; padding: .5rem; gap: .5em; #up_attachments { font-size: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .5rem; max-height: 300px; overflow-x: hidden; overflow-y: auto; >a.selectedd { border: 3px dashed var(--primary) !important; border-radius: 0; padding: 1rem; } >a:hover { background: none; border-color: var(--border); } } .attached_options { display: flex; justify-content: space-between; gap: 1rem; a { padding: .5rem 1rem; border: 2px solid var(--primary); border-radius: 25px; line-height: 1; font-weight: 600; } } } } } table td.chks input { cursor: pointer; } .page .ssqbp_myprofile.slick .profile_menu .ssqbp_member_menu .member_menu_buttons .completeProgress { display: none; } #ssqbp_member .create_content_pop.insquare { .content_pop_header .langdiv { display: none; } } .loader { display: flex; flex-direction: column; height: 100%; justify-content: center; align-items: center; gap: 1rem; >img { height: 42px; width: 42px; -webkit-animation: rotate-center 2s ease-in-out infinite both; animation: rotate-center 2s ease-in-out infinite both; } .status { font-size: 14px; font-family: 'Roboto'; } } @-webkit-keyframes rotate-center { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate-center { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } td span.post_tag { display: inline-flex; font-size: smaller; padding: 3px 5px; border-radius: 3px; margin: 0 3px 3px 0; color: var(--text)bf; background: var(--border); } .page .ssqbp_myprofile .radio input[type=radio]:checked+label:before { border: 4px solid var(--primary); } @-webkit-keyframes pulsate-fwd { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulsate-fwd { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } div#highlighertmp { display: none !important; } .page .course_status .incourse .incoursequiz_details .quiz_timeline .timeline_wrapper.question_numbers ul>li>span { display: none; } .page .course_status .incourse .question_incorrect, .page .course_status .incourse .question_correct { border: 2px solid var(--secondary) !important; padding: 0; border-radius: 5px; } .page .course_status .incourse .que_multi_opts_wrap .question_option.question_incorrect { border: 2px solid var(--secondary) !important; } .page .course_status .incourse .incoursequiz_details .quiz_timeline .timeline_wrapper>ul li.done.incorrect { color: var(--highlight); background: var(--secondary); } .page .course_status .incourse .incoursequiz_details .quiz_timeline .timeline_wrapper>ul li.done { background: var(--secondary); } span.countconfidence { display: none !important; } .page .course_progress_wrapper .course_progress { background: var(--shadow); } .page .course_status .incourse .quiztimer .circle_timer .react-progress-circle { transform: rotate(-90deg); } .page .course_status_fullscreen .course_status { overflow-y: auto; } .page.ssqbp-component-squares { #speechdiffoutput { .word { padding: 4px; display: inline-flex; flex-direction: column; height: fit-content; } .word.notsaid { p { opacity: .5; } } .word.good, .word.check { p { opacity: 1; .notsaid { opacity: .5; } } } .word.check { cursor: pointer; p { border-bottom: 1px dashed var(--ssqred); } .ipa { display: flex; font-size: 16px; justify-content: center; font-family: 'Roboto Slab'; >span { display: inline-flex; } >span.notsaid { opacity: .5; } } } .word.check:hover { border-radius: 5px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; padding: 8px !important; margin: -4px; } } .question.int .que_sentence_wrap div#quesrom, .question.fill .que_sentence_wrap div#quesrom { max-width: 100%; display: none; opacity: .5; margin-top: .5rem; font-size: small; justify-content: center; text-align: center; } .course_status { .ssq_btm_love>a { color: var(--secondary); } .course_timeline { border-right: none !important; background: none !important; border-radius: 0; display: flex; flex-direction: column; height: 100%; overflow: hidden; padding-bottom: 0; position: sticky; top: 0; .course_top { display: flex; flex-direction: column; .course_action_points { padding: 0; border: none; box-shadow: none; display: flex; flex-direction: column; position: relative; background: none; .action_points { width: 100%; >a { color: var(--text); padding: 1rem; } >a:hover { color: var(--primary); } } } .course_heading { background: none; padding: 0; display: flex; flex-direction: column; img.course_heading_img { aspect-ratio: 16 / 9; object-fit: cover; max-width: calc(100% - 2rem); width: 100%; margin: auto; border-radius: 5px; } .course_heading_wrapp { display: flex; flex-direction: column; padding: 1rem; text-align: center; h2 { color: var(--text); margin: auto 0; font-size: 28px; text-align: left; } span { p { color: var(--text); text-align: left; margin-bottom: 1rem; } } .course_progress_wrapper { color: var(--text); } } } } ul { position: relative; top: 0; padding: 0 1rem 1rem; display: flex; flex-direction: column; height: 100%; gap: 1rem; li { .lesson_title { gap: .5rem; margin: 0; } } li.section { align-items: center; padding: 1rem; background: var(--highlight); border-radius: 5px; border: 1px solid transparent; box-shadow: 0 2px 6px var(--shadow), 0 0 transparent, 0 0 transparent; .lesson_title { align-items: baseline; font-size: 16px; font-weight: 400; span.section_title_wrap { display: flex; flex-direction: column; line-height: normal; } } .vicon.vicon-menu-alt { font-size: 14px; } } li.section:hover { border-color: var(--primary); } li.section.open { border-color: var(--primary); } li.quiz { cursor: pointer; border-bottom: 0; background: none; align-items: center; padding: 0 .5rem 0 1rem; p { padding: 1rem; background: var(--highlight); border-radius: 5px; display: flex; gap: .5rem; box-shadow: 0 2px 6px var(--shadow), 0 0 transparent, 0 0 transparent; border: 1px solid transparent; .lesson_title { font-size: 14px; align-items: baseline; .section_title_wrap { display: flex; flex-direction: column; .quiz_data { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12px; opacity: .8; span { display: flex; align-items: center; gap: 4px; } } } } span.lesson_duration { display: none; } span.confidenceside { margin: 0; font-size: 12px; border: 1px solid var(--ssqgreen); border-radius: 50%; padding: 3px; width: 32px; height: 32px; display: flex; justify-content: center; } span.confidenceside:after { content: "%"; font-size: 8px; } } .unit_progress_wrapper { height: 20px; } } li.quiz.active.open_lesson { border-left: none; p { color: var(--text); border-color: var(--primary); box-shadow: 0 2px 6px var(--gradientlight); font-weight: 500; span.lesson_duration { display: flex; } span.confidenceside { display: none; } } } li.quiz:hover p { border-color: var(--primary); } } } .course_content { padding: 0 1rem 1rem; align-items: center; .course_content_header { background: none; border-bottom: none; box-shadow: none; color: var(--text); position: unset; margin: 0; padding: 0; margin-right: auto; span.toggle_timeline_wrapper { padding: .5rem .5rem; margin-top: .5rem; background: var(--primary); border-radius: 5px; display: flex; gap: .5rem; color: var(--highlight); box-shadow: 0 2px 6px var(--shadow), 0 0 transparent, 0 0 transparent; margin-bottom: .5rem; cursor: pointer; } } .ssq_btm_love { margin-right: auto; margin-top: auto; } .course_content_content_wrapper { margin-top: 0; flex: 1; width: 100%; .course_content_content { position: relative; padding: 0; display: flex; flex-direction: column; flex: 1; .lesson_info { text-transform: capitalize; color: var(--text); font-weight: 400; font-size: 14px; margin-bottom: 0; } h2 { color: var(--text); margin: 0 !important; } .incourse { flex-direction: column; margin: 0; flex: 1; .quiz_questions_content { max-width: 1080px; width: 100%; margin: auto; height: 100%; flex-direction: column; flex: 1; display: flex; justify-content: center; padding-bottom: 3rem; z-index: 2; .quiz_stats_chart { display: flex; flex-direction: column; background: var(--highlight); border-radius: 5px; padding: 2rem; gap: 1rem; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; .quiz_results { width: 100%; .quiz_results_topwrap { width: 100%; display: flex; flex-direction: column; .results_overview { display: flex; gap: 1rem; align-items: center; .results_msg { display: flex; gap: .5rem; img { height: 32px; width: 32px; } h2 { display: flex; text-transform: capitalize; margin: 0 !important; justify-content: center; font-size: 28px; align-items: center; gap: .5rem; } } .results_stats { display: flex; gap: 1rem; margin-left: auto; .results_stat { display: flex; flex-direction: row-reverse; align-items: center; text-align: right; gap: 1rem; .staticon { height: 52px; width: 52px; border-radius: 5px; font-size: 22px; align-items: center; display: inline-flex; justify-content: center; background-color: var(--ssqorangebg); color: var( --ssqorange); } >span { line-height: normal; >span { font-size: 12px; opacity: .8; } h4 { font-size: 22px; } } } .results_stat.flue .staticon { background-color: var(--ssqpurplebg); color: var(--ssqpurple); } .results_stat.conf .staticon { background-color: var(--highlight); color: var(--ssqred); box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; border: 1px solid var(--primary); } } } span.student_encoragement { text-align: center; } .quiz_results_wrap { display: flex; gap: 1rem; width: 100%; margin-top: 1rem; .quiz_results_left { display: flex; flex-direction: column; width: 260px; .quiz_results_left_wrap { display: grid; grid-template-columns: calc(50% - .5rem) calc(50% - .5rem); gap: 1rem; margin-top: .5rem; } span.quiz_results_square { display: flex; flex-direction: column; align-items: center; padding: .5rem; border: 1px solid var(--border); border-radius: 5px; justify-content: center; gap: .5rem; width: 122px; height: 122px; span.res_main { font-size: x-large; font-weight: bold; } span.res_avg { display: grid; justify-content: center; width: 100%; align-items: center; gap: 5px; grid-template-columns: calc(33% - 5px) 34% calc(33% - 5px); span.avgtxt { text-align: end; } span.avgsym { font-size: 12px; } span.avgsym { display: flex; justify-content: center; align-items: center; span.daavgsym { height: 21px; width: 21px; text-align: center; line-height: 17px; background: var(--primary); border-radius: 5px; color: var(--highlight); } } span.avgsym.up { span.daavgsym { background: var(--ssqgreen); transform: rotate(-90deg); } } span.avgsym.down { span.daavgsym { background: var(--ssqred); transform: rotate(90deg); } } span { font-weight: bold; } span.avgscores { text-align: center; width: 42px; font-weight: 400; } } } label { margin-bottom: 0; } >span { text-transform: capitalize; } >h3 { text-transform: capitalize; color: var(--primary); } >ul { padding: .5rem 0 1rem; >li { list-style: none; display: grid; align-items: baseline; padding: .5rem; border-top: 1px solid var(--border); gap: .5rem; grid-template-columns: calc(120px + .5rem) auto; span { display: flex; flex-direction: column; text-transform: capitalize; font-size: 12px; color: var(--text); >p { font-size: 10px; text-transform: capitalize; opacity: .8; } } >p { font-size: 12px; text-align: end; } } } } .quiz_results_right { display: flex; width: 100%; flex-direction: column; text-align: center; padding: .5rem 1rem 0; border: 1px solid var(--border); border-radius: 5px; h3 { font-weight: 400; } canvas { max-height: 400px; max-width: 100%; } } .quiz_results_right.wpie { gap: .5rem; } } } } .quiz_stats_chart_pie { display: flex; gap: 1rem; justify-content: center; width: 100%; canvas { max-height: 250px !important; } } .question_stats_content_wrapper { margin-top: 1rem; width: 100%; margin-bottom: 0; flex: unset; .ssq_submitted_prevnext { display: flex; justify-content: center; gap: 2rem; a { margin: 0; min-width: 100px; } a.next_quiz { display: none; } } } } >div{ .question.ques a#que_sentence, .question.para a#que_sentence { pointer-events: none; i.vicon.vicon-control-play { display: none !important; } } .question.fill a#que_sentence { span.que_sentence { p { font-size: 22px; } span { word-spacing: -5px; } } } .question { display: flex; flex-direction: column; gap: 1rem; .checked_answer.incorrect { background: var(--ssqgreen); margin: 1rem 0 0; border-radius: 5px; font-size: large; text-align: center; } .question_wrapper, .question_wrapper.loaded { min-height: unset; height: 58px; display: flex; justify-content: center; align-items: center; background: var(--highlight); border-radius: 5px 5px 0 0; border-bottom: 1px solid var(--border); .result { transform: none; display: flex; height: 100%; border-radius: 5px; >.incorrect, .correct { margin-top: 0; padding: 0; display: flex; flex-direction: row; align-items: center; width: 100%; strong { line-height: 1; font-size: 32px; } strong:after { content: "%"; } span { height: 42px; width: 42px; transform: none; padding: .5rem; line-height: normal; display: flex; justify-content: center; align-items: center; } span:before { color: var(--highlight); font-weight: 900; position: unset; font-size: 1.5rem; top: unset; left: unset; transform: none; } } } } .question_actions { margin: 0; padding: 0; background: none; span.question_info { margin: 0; width: 100%; display: flex; gap: .5rem; font-size: initial; align-items: center; .question_help_wrap { display: flex; gap: .5rem; align-items: center; line-height: normal; span.question_help { font-size: 18px; font-weight: 400; } } .antsinmypants { height: 24px; cursor: pointer; margin-left: auto; } .antsinmypants:hover { color: var(--ssqred); } span.addtosb { flex-direction: row-reverse; font-size: 18px; display: flex; opacity: .8; align-items: center; cursor: pointer; i.vicon.vicon-plus { background: var(--ssqgreen); height: 14px; width: 14px; text-align: center; border-radius: 50%; font-size: 10px; margin-right: -5px; color: var(--highlight); z-index: 2; display: flex; justify-content: center; align-items: center; } } span.addtosb:hover .vicon-package { font-size: 22px; } } span.question_helper { width: 100%; font-size: 14px; display: flex; align-items: center; margin: .25rem 0 0; } span.question_helper:before { content: "\e717"; font-family: 'vicon'; margin-right: .5rem; } } .question_inner_wrap { display: flex; flex-direction: column; gap: 1rem; .question_content.ssq { display: flex; width: 100%; justify-content: start; padding: 24px; background: var(--highlight); border-radius: 5px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; flex-direction: column; #quesaudio { display: none; } img.question_image { width: 25%; max-width: 300px; min-width: 250px; border-radius: 5px; margin: auto; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } .que_content_wrap { display: flex; flex-direction: column; justify-content: center; flex: 1; padding: 1rem 0 0; #feedback { display: none; flex-direction: column; align-items: center; gap: .5rem; div#speechfinal { display: none; } >span { gap: .5rem; align-items: center; justify-content: center; flex-direction: column; #speechdiffoutput { text-align: center; position: relative; display: block; font-size: x-large; >a { font-size: large; padding: 1rem .5rem; } >a:hover { color: var(--primary); } strong { padding: .0rem .75rem .2rem 2rem; border-radius: 5px; cursor: pointer; position: relative; font-family: 'Roboto'; margin: 0 0 .5rem; text-wrap: nowrap; border: 1px solid var(--border); display: inline-flex; align-items: center; line-height: 1.5; color: var(--text); text-decoration-line: underline; text-underline-offset: 3px; >.syl { padding-right: 4px; z-index: 2; } >.syl:last-of-type { padding-right: 0; } >a{ padding: 0; position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 2rem; font-size: 14px; color: var(--text); } } } } } .que_sentence_wrap { display: flex; flex-direction: column; position: relative; #que_sentence { display: flex; gap: .5rem; align-items: center; font-size: 24px; color: var(--text); flex-direction: column; .vicon { height: 36px; display: flex; justify-content: center; align-items: center; min-width: 36px; } .vicon:before { top: 8px; left: 8px; } .que_sentence { display: flex; flex-direction: column; text-align: center; min-width: 60px; p { font-size: 22px; span { font-size: 16px; color: var(--primary); padding: 0 8px; } } } } #que_sentence:hover { .vicon { color: var(--primary); } } } } } .question_content.sort { display: flex; width: 100%; justify-content: start; padding: 24px; background: var(--highlight); border-radius: 5px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; flex-direction: column; img.question_image { width: 25%; max-width: 300px; min-width: 250px; border-radius: 5px; margin: auto; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } .que_content_wrap { flex: 1; padding: 1rem 0 0; display: flex; flex-direction: column; justify-content: center; #feedback { display: none; flex-direction: column; align-items: center; gap: .5rem; div#speechfinal { display: none; } >span { gap: .5rem; align-items: center; justify-content: center; flex-direction: column; #speechdiffoutput { text-align: center; position: relative; display: block; font-size: x-large; >a { font-size: large; padding: 1rem .5rem; } >a:hover { color: var(--primary); } strong { padding: .0rem .75rem .2rem 2rem; border-radius: 5px; cursor: pointer; position: relative; font-family: 'Roboto'; margin: 0 0 .5rem; text-wrap: nowrap; border: 1px solid var(--border); display: inline-flex; align-items: center; line-height: 1.5; color: var(--text); text-decoration-line: underline; text-underline-offset: 3px; >.syl { padding-right: 4px; z-index: 2; } >.syl:last-of-type { padding-right: 0; } >a{ padding: 0; position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 2rem; font-size: 14px; color: var(--text); } } } } } .que_sentence_wrap { display: flex; flex-direction: column; position: relative; flex: 1; justify-content: center; #que_sentence { display: flex; gap: .5rem; align-items: center; font-size: 24px; color: var(--text); flex-direction: column; .vicon { height: 36px; display: flex; justify-content: center; align-items: center; min-width: 36px; } .vicon:before { top: 8px; left: 8px; } .que_sentence { display: flex; flex-direction: column; text-align: center; min-width: 60px; p { font-size: 22px; span { font-size: 16px; color: var(--primary); padding: 0 8px; } } } } #que_sentence:hover { .vicon { color: var(--primary); } } .droppable { display: flex; padding: 1rem; overflow: hidden; justify-content: center; height: 100%; align-items: center; gap: .5rem; margin: -1rem; flex-direction: row; flex-wrap: wrap; flex-basis: min-content; >div { border: 1px solid var(--border); padding: 1rem; cursor: move; display: inline-block; padding: .5rem; font-size: large; border-radius: 5px; background: var(--highlight); } >div+div { border: 1px solid var(--border); } >div:hover, >div+div:hover { border-color: var(--primary); } .dragging { border: 1px solid var(--primary) !important; box-shadow: 0 0 6px var(--primary); } } .droppable:hover>div { border-color: var(--border); } } } } .question_content.sort.touch { padding: 1rem; align-items: center; img.question_image { width: 25%; max-width: 300px; min-width: 250px; border-radius: 5px; margin: auto; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } .que_content_wrap { width: 100%; .que_sentence_wrap.touch { .droppable { flex-direction: column; flex-wrap: nowrap; >div { width: 100%; text-align: center; } } } } } .question_content.multi { display: flex; width: 100%; justify-content: start; padding: 24px; background: var(--highlight); border-radius: 5px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; flex-direction: column; #quesaudio { display: none; } img.question_image { width: 25%; max-width: 300px; min-width: 250px; border-radius: 5px; margin: auto; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } .que_content_wrap { flex: 1; padding: 1rem; display: flex; flex-direction: column; justify-content: center; #feedback { display: none; flex-direction: column; align-items: center; gap: .5rem; div#speechfinal { display: none; } >span { gap: .5rem; align-items: center; justify-content: center; flex-direction: column; #speechdiffoutput { text-align: center; position: relative; display: block; font-size: x-large; >a { font-size: large; padding: 1rem .5rem; } >a:hover { color: var(--primary); } strong { padding: .0rem .75rem .2rem 2rem; border-radius: 5px; cursor: pointer; position: relative; font-family: 'Roboto'; margin: 0 0 .5rem; text-wrap: nowrap; border: 1px solid var(--border); display: inline-flex; align-items: center; line-height: 1.5; color: var(--text); text-decoration-line: underline; text-underline-offset: 3px; >.syl { padding-right: 4px; z-index: 2; } >.syl:last-of-type { padding-right: 0; } >a{ padding: 0; position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 2rem; font-size: 14px; color: var(--text); } } } } } .que_sentence_wrap { display: flex; flex-direction: column; gap: .5rem; position: relative; #que_sentence { display: flex; gap: .5rem; align-items: center; font-size: 24px; color: var(--text); flex-direction: column; .vicon { height: 36px; display: flex; justify-content: center; align-items: center; min-width: 36px; } .vicon:before { top: 8px; left: 8px; } .que_sentence { display: flex; flex-direction: column; text-align: center; min-width: 60px; p { font-size: 22px; span { font-size: 16px; color: var(--primary); padding: 0 8px; } } } } #que_sentence:hover { .vicon { color: var(--primary); } } .que_multi_opts_wrap { display: grid; gap: 1rem; grid-template-columns: calc(50% - .5rem) calc(50% - .5rem); margin-top: 1rem; .question_option { margin: 0; margin-bottom: 0; display: flex; width: 100%; height: 100%; line-height: normal; margin-top: 0 !important; flex-direction: column; label { display: flex; flex-direction: column; padding: .5rem; border: 1px solid var(--border); border-radius: 5px; .multi_sentence_wrap { display: flex; gap: 5px; .vicon-control-play { display: none; } .multi_sentence { text-align: center; } } } label:hover { border-color: var(--primary); .vicon-control-play { display: block; padding-top: 4px; } .multi_sentence { text-align: left; } } input[type=radio]:checked+label { border-color: var(--primary); .vicon-control-play { display: block; padding-top: 4px; } .multi_sentence { text-align: left; } } label:before { display: none; } } } } } } .question_content.pair { display: flex; width: 100%; justify-content: start; padding: 24px; background: var(--highlight); border-radius: 5px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; flex-direction: column; #quesaudio { display: none; } img.question_image { width: 25%; max-width: 300px; min-width: 250px; border-radius: 5px; margin: auto; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } .que_content_wrap { flex: 1; padding: 1rem; display: flex; flex-direction: column; justify-content: center; #feedback { display: none; flex-direction: column; align-items: center; gap: .5rem; div#speechfinal { display: none; } >span { gap: .5rem; align-items: center; justify-content: center; flex-direction: column; #speechdiffoutput { text-align: center; position: relative; display: block; font-size: x-large; >a { font-size: large; padding: 1rem .5rem; } >a:hover { color: var(--primary); } strong { padding: .0rem .75rem .2rem 2rem; border-radius: 5px; cursor: pointer; position: relative; font-family: 'Roboto'; margin: 0 0 .5rem; text-wrap: nowrap; border: 1px solid var(--border); display: inline-flex; align-items: center; line-height: 1.5; color: var(--text); text-decoration-line: underline; text-underline-offset: 3px; >.syl { padding-right: 4px; z-index: 2; } >.syl:last-of-type { padding-right: 0; } >a{ padding: 0; position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 2rem; font-size: 14px; color: var(--text); } } } } } .que_sentence_wrap { display: flex; flex-direction: column; gap: .5rem; position: relative; #que_sentence { display: flex; gap: .5rem; align-items: center; font-size: 24px; color: var(--text); flex-direction: column; .vicon { height: 36px; display: flex; justify-content: center; align-items: center; min-width: 36px; } .vicon:before { top: 8px; left: 8px; } .que_sentence { display: flex; flex-direction: column; text-align: center; min-width: 60px; p { font-size: 22px; span { font-size: 16px; color: var(--primary); padding: 0 8px; } } } } #que_sentence:hover { .vicon { color: var(--primary); } } .que_multi_opts_wrap { display: grid; gap: 1rem; grid-template-columns: calc(50% - .5rem) calc(50% - .5rem); margin-top: 1rem; .question_option { margin: 0; margin-bottom: 0; display: flex; width: 100%; height: 100%; line-height: normal; margin-top: 0 !important; flex-direction: column; label { display: flex; flex-direction: column; padding: .5rem; border: 1px solid var(--border); border-radius: 5px; .multi_sentence_wrap { display: flex; gap: 5px; .vicon-control-play { display: none; } .multi_sentence { text-align: center; } } } label:hover { border-color: var(--primary); .vicon-control-play { display: block; padding-top: 4px; } .multi_sentence { text-align: left; } } input[type=radio]:checked+label { border-color: var(--primary); .vicon-control-play { display: block; padding-top: 4px; } .multi_sentence { text-align: left; } } label:before { display: none; } } } } } } .question_content.fill { display: flex; padding: 0; width: 100%; justify-content: start; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; img.question_image { width: 25%; max-width: 300px; min-width: 250px; border-radius: 5px; margin: auto; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } .que_content_wrap { flex: 1; padding: 1rem; display: flex; flex-direction: column; justify-content: center; #feedback { display: none; flex-direction: column; align-items: center; gap: .5rem; div#speechfinal { display: none; } >span { gap: .5rem; align-items: center; justify-content: center; flex-direction: column; #speechdiffoutput { text-align: center; position: relative; display: block; font-size: x-large; >a { font-size: large; padding: 1rem .5rem; } >a:hover { color: var(--primary); } strong { padding: .0rem .75rem .2rem 2rem; border-radius: 5px; cursor: pointer; position: relative; font-family: 'Roboto'; margin: 0 0 .5rem; text-wrap: nowrap; border: 1px solid var(--border); display: inline-flex; align-items: center; line-height: 1.5; color: var(--text); text-decoration-line: underline; text-underline-offset: 3px; >.syl { padding-right: 4px; z-index: 2; } >.syl:last-of-type { padding-right: 0; } >a{ padding: 0; position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 2rem; font-size: 14px; color: var(--text); } } } } } .que_sentence_wrap { display: flex; flex-direction: column; position: relative; #que_sentence { display: flex; gap: .5rem; align-items: center; font-size: 24px; color: var(--text); font-weight: 600; flex-direction: column; .vicon { height: 36px; display: flex; justify-content: center; align-items: center; min-width: 36px; } .vicon:before { top: 8px; left: 8px; } .que_sentence { display: flex; p { font-size: 22px; } } } } } } #markanswerdivv { display: none; } span.ssq_quesbuttons_wrapwrap { display: flex; flex-direction: column; gap: .5rem; .question_help_wrap { display: flex; align-items: baseline; gap: .5rem; justify-content: center; } } .ssq_quesbuttons_wrap { display: flex; gap: .5rem; width: 100%; justify-content: center; align-items: center; .check_answer.ssq { display: none; } .paragraph_small { display: flex; padding: .5rem; border-radius: 50%; border: 2px solid var(--primary); opacity: 0; pointer-events: none; } .paragraph_small:hover { background: var(--primary); } a.ssq_quesprevnext { padding: .5rem; display: inline-flex; justify-content: center; text-align: center; color: var(--text); } a.ssq_quesprevnext:hover{ color: var(--primary); } a.ssq_quesprevnext.faded { pointer-events: none; opacity: 0.25; } .speechbutton { display: inline-flex; height: 64px; width: 64px; justify-content: center; align-items: center; font-size: x-large; border: 2px solid var(--ssqgreen); border-radius: 50%; cursor: pointer; background: var(--ssqgreen); color: var(--highlight); } .speechbutton.recording { background: var(--ssqred) !important; color: var(--highlight) !important; border-color: transparent; -webkit-animation: pulsate-fwd 2s ease-in-out infinite both; animation: pulsate-fwd 2s ease-in-out infinite both; i.vicon.vicon-microphone:before { content: "\e724"; } } .speechbutton.faded { pointer-events: none; opacity: 0.25; } .speechbutton:hover { color: var(--ssqgreen); background: var(--highlight); } } } } .question.para { .question_inner_wrap { .question_content.ssq { box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; .que_content_wrap { flex: 1; padding: 1rem; justify-content: start; gap: .5rem; .que_sentence_wrap { position: relative; #que_sentence { font-size: 24px; padding: .5rem; overflow-x: hidden; overflow-y: auto; } #quesrom { display: none; } } div#synedsaires { display: flex; flex-direction: column; max-height: 100%; .viewer { min-height: 150px; text-align: justify; padding: .5rem; font-size: large; background: var(--body); border-radius: 5px; .feedbacker { padding-right: 3px; .incorr, .intrimres .incorr { color: var(--ssqred); font-weight: 600; } .incorr:last-of-type { color: lightgrey !important; font-weight: 400 !important; } } .intrimres { color: gray; } .feedbacker.nored { .incorr, .intrimres .incorr { color: var(--text); font-weight: 400; } } } #speechfinal { display: none; } } } } } } } } .incoursequiz_details, .incoursequiz_details.show_controls { margin: 1rem 0; border-radius: 0; position: unset; gap: 1rem; top: 0; background: none; border: none; display: flex; .quiz_first_block.act { display: none; order: 2; margin: 1rem 0 0; strong { margin: 0; span.student_quiz_status { margin: 0; color: var(--highlight); font-size: 100%; opacity: 1; } } .buttons.has-addons.small { margin: 0; color: var(--highlight); } } .quiz_first_block.ass { order: 2; margin: 1rem 0 0; strong { margin: 0; span.student_quiz_status { margin: 0; color: var(--highlight); font-size: 100%; opacity: 1; } } .buttons.has-addons.small { margin: 0; color: var(--highlight); } } .incourse_quiz_button { width: fit-content; display: inline-flex; order: 3; margin: 1rem 0 0; margin-left: auto; a { flex: 0; margin: 0 !important; color: var(--highlight); background: var(--primary); border: 0; } a:hover { background: var(--highlight); color: var(--primary); } } .incourse_quiz_button.submitted { width: inherit; .quiz_retake { margin: 0; flex-wrap: unset; flex-direction: row-reverse; .quiz_retakewrapp { width: 100%; flex: unset; display: flex; align-items: center; gap: 1rem; justify-content: space-between; span.student_quiz_status { font-size: larger; } } .student_score { flex: unset; margin: 0; color: var(--highlight); font-family: 'Roboto'; width: 58px; aspect-ratio: 1; display: flex; flex-direction: row; justify-content: center; align-items: center; border-radius: 50%; background: var(--ssqgreen); font-size: 22px; } .student_score:after { content: "%"; font-size: 14px; margin-bottom: 5px; } a { display: none; } } } .quiz_timeline { border-radius: 25px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; >div{ margin: 0; width: 100%; display: flex; .timeline_wrapper.question_numbers, .timeline_wrapper { width: 100%; >ul{ margin: 0; width: 100%; justify-content: space-between; background: var(--highlight); border-radius: 25px; overflow: hidden; >li { margin: 0; padding: 0; height: 10px; border: none; flex: 1; color: transparent !important; border-radius: 0; span:before { display: none; } } } } } } } .incoursequiz_details { display: block; flex: unset; z-index: 1; } } } } } } .course_status.moveonside .course_timeline { display: none; } .course_blocks { grid-gap: unset; display: grid; margin: -12px; width: unset; grid-template-columns: repeat(auto-fill, minmax(316px, 1fr)); .course_block_wrap { padding: 8px; .course_block { display: flex; overflow: hidden; overflow-wrap: break-word; position: relative; border: 1px solid var(--border); border-radius: 5px; aspect-ratio: 1 / 1; flex-direction: column; cursor: auto; max-height: 100%; .user_lang_wrap { padding: 16px 16px 0; position: absolute; top: 0; .user_lang { position: relative; display: flex; align-items: center; justify-content: space-between; .lvldiv { width: auto; border-radius: 5px; padding: 0px 6px; margin-left: .5rem; font-size: x-small; text-transform: capitalize; } } } .course_featured_image { width: 100%; padding: 8px 8px 0; display: flex; flex-direction: column; height: 30%; flex: 1; img { height: -webkit-fill-available; width: 100%; object-fit: cover; object-position: center; border-radius: 5px; } } .course_block_content_wrapper { padding: 8px 16px 16px; border: none; width: 100%; flex: unset; background: var(--highlight); height: fit-content; h3 { font-size: 18px; color: var(--text); margin-bottom: 8px; } .course_confident { display: flex; gap: 8px; text-align: left; font-size: 12px; color: var(--text); align-items: center; margin: 8px 0 8px; .confident_icon { width: 28px; height: 28px; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 16px; color: var(--intpara); background: var(--intparabg); } .confident_wrap { display: flex; gap: 5px; justify-content: space-between; align-items: center; position: absolute; top: 1rem; left: 1rem; flex-direction: row-reverse; h3 { font-size: 16px; color: var(--intpara); margin: 0; } } } .course_progress_wrapper { .course_progress { overflow: hidden; height: 8px; border-radius: 5px; span { height: 8px; } } } .contstart_square { margin-top: 16px; display: flex; align-items: center; gap: 8px; padding: 6px 12px; justify-content: center; border-radius: 5px; background: var(--intintbg); color: var(--secondary); cursor: pointer; span { font-size: 14px; } } .contstart_square.startt { background: var(--intfillbg); } .contstart_square:hover { background: var(--gradientlight); } .contstart_square.startt:hover { background: var(--intfill); } } } } } } #ssqbp_member .create_content_pop { position: fixed; height: 100vh; width: 100vw; background: var(--dark); z-index: 999; display: flex; flex-direction: column; justify-content: center; .create_content_pop_wraper { max-height: 90%; max-width: 1200px; display: flex; margin: auto; padding: 1rem; background: var(--highlight); flex-direction: column; position: relative; border-radius: 5px; color: var(--text); width: 100%; height: 100%; .component_title.settings{ padding: .5rem .5rem 0; display: flex; gap: .5rem; align-items: center; } .component_title { color: var(--text); } .content_pop_header { color: var(--text); display: flex; gap: .5rem; padding: 0 0 1rem; margin: 0 0 .75rem; border-bottom: 1px solid var(--border); position: relative; align-items: center; a.vicon.vicon-close { color: var(--text); padding: .5rem; margin-right: -.5rem; margin-top: -1.5rem; } a.vicon.vicon-close:hover { color: var(--primary); } span.actass_slider_wrap { width: 252px; margin-left: auto; display: flex; } span.actass_slider { margin: auto; display: flex; border-radius: 25px; overflow: hidden; a { color: var(--text); padding: 5px 12px; background: var(--border); display: flex; width: 86px; justify-content: center; font-size: 12px; font-weight: 600; height: 27px; line-height: normal; } a.active { background: var(--primary); } } .top { display: flex; gap: 1rem; justify-content: space-between; span { display: flex; gap: .5rem; align-items: center; .langdiv:before { height: 28px; width: 28px; } i { font-size: 22px; font-weight: 600; } input { font-family: 'Roboto'; font-weight: 600; border-radius: 5px; background: var(--highlight); min-width: 250px; } a { color: var(--text); } } .vicon-close { color: var(--text); height: fit-content; padding: .5rem; margin: -.5rem; position: absolute; right: 0; } } .post_tags { display: flex; width: fit-content; gap: .5rem; align-items: center; a.small.button.is-primary.add_tags { margin: 0; color: var(--text); } .select2 { width: 100% !important; .dropdown-wrapper { display: none; } .selection .select2-selection{ border: 0; display: flex; gap: .25rem; flex-direction: row-reverse; align-items: center; padding: 0; ul#select2-add_post_tags-container { padding: 0; display: flex; gap: .5rem; align-items: center; li.select2-selection__choice { margin: 0; border-radius: 5px; button.select2-selection__choice__remove { color: var(--text); } } } span.select2-search { display: none; flex-direction: column; flex: 1; textarea.select2-search__field { width: 100% !important; height: 36px; min-width: 150px; resize: none; padding: 5px; display: flex; margin-top: 0; border: 1px solid var(--border); border-radius: 5px; padding: 0 .5rem; } } } } } } .content_pop_main_wrap { display: flex; flex: 1; gap: 1rem; height: calc(100% - 98px); .content_pop_sidebar { min-width: 300px; display: flex; flex-direction: column; gap: 1rem; height: 100%; justify-content: space-between; position: relative; .content_opts { display: flex; flex-direction: column; gap: .5rem; .search_ints_wrap { display: flex; flex-direction: column; gap: .5rem; .search_results { margin: 0; display: flex; padding: .5rem 0; flex-direction: column; gap: .5rem; border: 1px solid var(--border); border-radius: 5px; position: absolute; top: 105px; width: 400px; background: var(--highlight); z-index: 9; right: -3rem; box-shadow: var(--shadow) 0px 5px 15px; font-size: 14px; flex: 1; max-height: calc(100% - 75px); overflow: hidden; >span { display: flex; gap: .5rem; justify-content: space-between; align-items: center; font-family: 'Roboto'; >p { font-weight: 600; padding-left: .5rem; margin: 0; } >.vicon-close { cursor: pointer; padding: .5rem; } } >select { margin: 0 .5rem; min-height: 36px; } .int_results { display: flex; flex-direction: column; gap: .5rem; flex: 1; overflow-x: hidden; overflow-y: auto; padding: 0 .5rem; li { order: -2; cursor: pointer; list-style: none; display: flex; gap: .5rem; padding: .5rem; border: 1px solid var(--border); border-radius: 5px; padding-top: 1.75rem; position: relative; .intres_hdr { display: flex; flex-direction: column; gap: .5rem; align-items: center; .type_bef { padding: 1px 0; font-size: 12px; text-align: center; color: var(--highlight); background: var(--text); position: absolute; top: 0; width: 100%; left: 0; border-radius: 5px 5px 0 0; } img { width: 56px; height: 56px; border-radius: 5px; object-fit: cover; } .content_image { width: 56px; height: 56px; display: flex; justify-content: center; font-size: 18px; align-items: center; color: var(--border); border: 1px dashed var(--border); border-radius: 0; } } .intres_cont { display: flex; flex-direction: column; flex: 1; gap: .5rem; line-height: 1; justify-content: center; .intvalue { display: flex; font-size: 14px; } .multiwrap { display: none; } } } li.preload { order: unset; } li:hover { margin: .25rem; opacity: .75; } li.ques .intres_cont .intvalue.corr { color: var(--ssqgreen); } li.multi .intres_cont .multiwrap, li.pair .intres_cont .multiwrap { display: grid; grid-template-columns: calc(50% - 2px) calc(50% - 2px); gap: .25rem; margin: auto 0; span.intvalue:first-of-type { color: var(--ssqgreen); } } li.int .intres_hdr .type_bef { background: var(--intint); } li.sort .intres_hdr .type_bef { background: var(--intsort); } li.fill .intres_hdr .type_bef { background: var(--intfill); } li.para .intres_hdr .type_bef { background: var(--intpara); } li.ques .intres_hdr .type_bef { background: var(--intques); } li.multi .intres_hdr .type_bef { background: var(--intmulti); } li.pair .intres_hdr .type_bef { background: var(--intpair); } } } .searchbox.active { height: 39px; display: flex; align-items: center; flex-direction: row-reverse; justify-content: space-between; border: 1px solid var(--border); border-radius: 25px; overflow: hidden; input#search_ints { border: 0; flex: 1; padding: 9px; padding-left: .75rem; font-size: 14px; padding-right: 0; } i.search_ints { padding: 0.5rem; padding-right: .75rem; font-size: 12px; } } } a { padding: 8px 12px; font-size: 14px; border: 1px solid var(--border); border-radius: 5px; cursor: pointer; display: flex; align-items: center; gap: .5rem; position: relative; color: var(--text); p { margin-left: auto; font-family: 'Roboto'; font-weight: 800; font-size: smaller; color: var(--primary); } } a:hover { border-color: transparent; background: var(--primary); } a.ask_sqai { font-weight: 700; i { font-weight: 700; color: var(--primary); } } a.ask_sqai:hover { i { color: var(--highlight); } } .opts_option.add_files { display: flex; flex-direction: column; position: absolute; right: -3rem; width: 500px; top: 0; background: var(--highlight); z-index: 9; border-radius: 5px; box-shadow: var(--shadow) 0px 5px 15px; height: 100%; overflow: hidden; >span { height: 46px; display: flex; gap: .5rem; justify-content: space-between; align-items: center; padding: .5rem; h3 { display: flex; gap: .5rem; align-items: center; padding-left: .5rem; } a.vicon.vicon-close { padding: .5rem; border: 0; } a.vicon.vicon-close:hover { background: none; } } .file_menu { display: flex; margin-bottom: .5rem; padding: 0 .5rem; gap: .5rem; >a { padding: .25rem .75rem; border: 2px solid var(--primary); border-radius: 25px; } >a.active { background: var(--primary); font-weight: 600; } } .file_list { display: flex; flex-direction: column; flex: 1; overflow: hidden; .file_tables { display: flex; flex-direction: column; flex: 1; gap: .5rem; overflow: hidden; .headerfiles { padding: 0 .5rem; select { width: 100%; border-color: var(--border); } } .document_list { display: flex; flex-direction: column; flex: 1; justify-content: space-between; overflow: hidden; .dt-wrapper { justify-content: space-between; max-height: unset; flex: 1; gap: .5rem; .dt-top { .dt-dropdown { display: none; } .dt-search { width: calc(100% - 1rem); input.dt-input { padding: 6px 10px; } } } .dt-bottom { padding: 0 .5rem .5rem; .dt-info { font-size: 10px; } } .dt-container { display: flex; flex-direction: column; flex: 1; overflow-x: hidden; overflow-y: auto; table { thead { line-height: 0; font-size: 12px; background: var(--highlight); position: sticky; top: 0; >tr{ >th { padding: .5rem 0 .5rem; input { margin: 0; } } .dt-sorter { padding-right: 0; color: var(--text); } .dt-sorter:before, .dt-sorter:after { display: none; } >th:first-of-type{ padding-left: .5rem; padding-right: .5rem; } >th:last-of-type{ padding-right: .5rem; } } } tbody { font-size: 10px; >tr { >td{ padding: .5rem 0; >span { display: none; } } >td:not(.chks){ cursor: pointer; } >td:first-of-type{ padding-left: .5rem; padding-right: .5rem; } >td:last-of-type{ padding-right: .5rem; max-width: 82px; overflow: hidden; text-wrap: nowrap; } td.file_details .nameimg { display: flex; align-items: center; gap: .25rem; font-size: 14px; } } } } } } .table_options { gap: 1rem; justify-content: space-between; padding: 0 .5rem .5rem; >span { display: flex; gap: .5rem; } a.file_add, a.file_sqai { padding: .5rem 1rem; border: 2px solid var(--primary); border-radius: 25px; line-height: 1; font-weight: 600; } a.file_sqai { i { font-weight: 700; color: var(--primary); } } a.file_sqai:hover { i { color: var(--highlight); } } a.file_delete { border: 0; line-height: 1; padding: .5rem 1rem; } a.file_delete:hover { background: var(--red); color: var(--highlight); } } } .image_folder { display: flex; flex-direction: column; flex: 1; justify-content: space-between; overflow: hidden; .dt-wrapper { justify-content: space-between; max-height: unset; flex: 1; gap: .5rem; .dt-top { .dt-dropdown { display: none; } .dt-search { width: calc(100% - 1rem); input.dt-input { padding: 6px 10px; } } } .dt-bottom { padding: 0 .5rem .5rem; .dt-info { font-size: 10px; } } .dt-container { display: flex; flex-direction: column; flex: 1; overflow-x: hidden; overflow-y: auto; table { thead { display: none; line-height: 0; font-size: 12px; background: var(--highlight); position: sticky; top: 0; border: 0; z-index: 9; >tr{ >th { padding: .5rem 1rem 1rem; display: flex; align-items: center; gap: .25rem; input { margin: 0; cursor: pointer; } label { color: var(--text); margin: 0; cursor: pointer; } } .dt-sorter { padding-right: 1rem; } .dt-sorter:before, .dt-sorter:after { display: none; } } } tbody { font-size: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .5rem; padding: 0 .5rem; >tr { border-bottom: 0; display: flex; position: relative; justify-content: center; align-items: center; aspect-ratio: 1; height: 100%; width: 100%; >td{ padding: 0; height: 100%; width: 100%; justify-content: center; align-items: center; display: flex; flex: 1; aspect-ratio: 1; flex-direction: column; input { display: none; } input:checked+.imgsel { border: 3px dashed var(--primary); border-radius: 0; padding: 1rem; } label { overflow: hidden; margin: 0; cursor: pointer; border: 1px solid var(--border); border-radius: 5px; display: flex; height: 100%; width: 100%; flex-direction: column; align-items: center; justify-content: center; position: relative; .nameimg { display: flex; flex-direction: column; gap: .5rem; align-items: center; font-weight: 400; text-wrap: nowrap; width: 100%; height: 100%; justify-content: center; p { font-size: x-small; position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; opacity: 0; } } } } } >tr:hover { .nameimg { img { opacity: 0; } p { opacity: 1; } } } } } } } .table_options { gap: 1rem; justify-content: space-between; padding: 0 .5rem .5rem; a.img_ocr { padding: .5rem 1rem; border: 2px solid var(--primary); border-radius: 25px; line-height: 1; font-weight: 600; } a.file_delete_image { border: 0; line-height: 1; padding: .5rem 1rem; } a.file_delete_image:hover { background: var(--red); color: var(--highlight); } } } } .file_open { display: flex; flex-direction: column; position: absolute; width: 500px; top: 0; background: var(--highlight); z-index: 10; border-radius: 5px; height: 100%; overflow: hidden; iframe { flex: 1; } >span { display: flex; align-items: center; font-family: 'Roboto'; font-weight: 600; padding: .5rem 0 .5rem 0.5rem; font-size: 14px; } a.vicon.vicon-close { width: fit-content; padding: .5rem; border: 0; margin-left: auto; } a.vicon.vicon-close:hover { background: none; } .table_options { gap: 1rem; justify-content: space-between; padding: .5rem; display: flex; >span { display: flex; gap: .5rem; } a.sfile_add, a.sfile_sqai { padding: .5rem 1rem; border: 2px solid var(--primary); border-radius: 25px; line-height: 1; font-weight: 600; } a.sfile_sqai { i { font-weight: 700; color: var(--primary); } } a.sfile_sqai:hover { i { color: var(--highlight); } } a.sfile_delete { border: 0; line-height: 1; padding: .5rem 1rem; } a.sfile_delete:hover { background: var(--red); color: var(--highlight); } } } } .upload_media { margin-left: auto; input { display: none; } label { cursor: pointer; padding: .25rem .75rem; border: 2px solid var(--primary); border-radius: 25px; font-size: 14px; margin: 0; font-weight: 400; } label:hover { background: var(--primary); } } } .opts_option.sqai { display: flex; flex-direction: column; position: absolute; right: -3rem; width: 500px; top: 0; background: var(--highlight); z-index: 9; border-radius: 5px; box-shadow: var(--shadow) 0px 5px 15px; height: 100%; overflow: hidden; select.type_selection { line-height: normal; margin-left: .5rem; border-radius: 25px; font-size: 12px; height: 32px; background-color: var(--primary); background-image: none; border: none; font-family: 'Roboto'; color: var(--highlight); letter-spacing: 1px; padding: 0 12px; text-align: center !important; display: flex; cursor: pointer; text-align-last:center; option { background: var(--highlight); color: var(--text); font-family: 'Roboto'; line-height: 1.5; text-align: left; font-size: 14px; } } >span { height: 46px; display: flex; gap: .5rem; justify-content: space-between; align-items: center; padding: .5rem; h3 { display: flex; gap: .5rem; align-items: center; padding-left: .5rem; i { font-weight: 700; color: var(--primary); } } a.vicon.vicon-close { padding: .5rem; border: 0; border-radius: 50%; } a.vicon.vicon-close:hover { background: none; } } >.context_wrap { display: flex; flex-direction: column; flex: 1; justify-content: space-between; background: linear-gradient(45deg, var(--gradientlight), var(--gradientmedium), var(--gradientdark)); overflow: hidden; >.content_settings { h3.component_title { display: flex; gap: .5rem; align-items: center; color: var(--primary); } a.component_title.settings { border-radius: 0; } .sqai_content_types { display: grid; flex-direction: column; gap: .5rem; padding: .5rem; grid-template-columns: calc(33% - .25rem) calc(33% - .25rem) calc(33% - .25rem); overflow-x: hidden; overflow-y: auto; >div { display: flex; gap: 5px; font-size: 11px; padding: .5rem .75rem; justify-content: space-between; align-items: center; border: 1px solid var(--border); border-radius: 25px; line-height: 1; >div { display: flex; align-items: center; gap: 5px; font-family: 'Roboto'; FONT-WEIGHT: 600; color: var(--highlight); } >a { padding: 0; border: 0; font-size: inherit; opacity: 0; color: var(--highlight); } } > div.zeroed { opacity: .5; color: var(--text) !important; background: var(--highlight) !important; >div { color: var(--text) !important; } >a { color: var(--text) !important; } } > div:hover { >a { opacity: 1; background: none; } } >div.int { border-color: var(--intint); background-color: var(--intint); order: 1; } >div.sort { border-color: var(--intsort); background-color: var(--intsort); order: 2; } >div.fill { border-color: var(--intfill); background-color: var(--intfill); order: 3; } >div.para { border-color: var(--intpara); background-color: var(--intpara); order: 4; } >div.ques { border-color: var(--intques); background-color: var(--intques); order: 5; } >div.multi { border-color: var(--intmulti); background-color: var(--intmulti); order: 6; } >div.pair { border-color: var(--intpair); background-color: var(--intpair); order: 7; } .sqai_content_type { display: flex; justify-content: left; gap: .25rem; align-items: center; font-size: 14px; position: relative; .vicon-close { cursor: pointer; padding: .5rem; position: absolute; top: .75rem; right: .25rem; opacity: .5; } >div { padding: .5rem; flex: 1; border: 1px solid var(--border); border-radius: 5px; gap: .25rem; display: flex; flex-direction: column; >div{ display: flex; align-items: center; input { width: 48px; text-align: center; border-radius: 5px; height: 36px; } .vbp_message { margin: 0; background: none; padding: 0; font-size: 12px; width: fit-content; margin-left: .5rem; opacity: .5; } .vbp_message:before { content: "\e717"; } } } } .sqai_content_type.int>div>div select.type_selection { background-color: var(--intint); } .sqai_content_type.sort>div>div select.type_selection { background-color: var(--intsort); } .sqai_content_type.fill>div>div select.type_selection { background-color: var(--intfill); } .sqai_content_type.para>div>div select.type_selection { background-color: var(--intpara); } .sqai_content_type.ques>div>div select.type_selection { background-color: var(--intques); } .sqai_content_type.multi>div>div select.type_selection { background-color: var(--intmulti); } .sqai_content_type:first-of-type { .vicon-close { pointer-events: none; display: none; } } } } ul.askdot { flex: 1; display: flex; flex-direction: column; gap: .5rem; padding: .5rem; background: transparent; overflow-x: hidden; overflow-y: auto; position: relative; .dot_think { display: none; padding: .5rem; color: var(--highlight); font-size: x-small; position: absolute; bottom: 0; } >li { display: flex; gap: 1rem; max-width: calc(100% - 48px); font-size: 12px; margin-left: auto; >span { padding: 5px .5rem; background: var(--transparency); border-radius: 5px; color: var(--highlight); width: fit-content; position: relative; span.sqaiexample { display: block; margin: .5rem 0; padding: .5rem; text-align: center; background: var(--body); border-radius: 5px; } >img:not(.sqaiemoji) { display: inline-flex; max-width: calc(25% - 8px); margin: 4px; cursor: pointer; aspect-ratio: 1; object-fit: contain; overflow: hidden; border: 1px solid var(--border); } >img:not(.sqaiemoji):hover { padding: 2px; border-color: var(--primary); } >img.sqaiemoji { height: 22px; width: 22px; margin-top: -5px; margin-left: -3px; margin-right: -3px; } } >img:not(.sqaiemoji) { height: 32px; border-radius: 50%; } } li.sqai { font-size: 14px; margin-left: 0; >span { background: var(--highlight); color: var(--text); } >img { border-radius: 0; } } li.user span:before { content: ''; position: absolute; right: 0; top: 17px; width: 0; height: 0; border: 8px solid transparent; border-left-color: var(--border); border-right: 0; margin-top: -8px; margin-right: -8px; } li.sqai span:before { content: ''; position: absolute; left: -8px; top: 16px; width: 0; height: 0; border: 8px solid transparent; border-right-color: var(--highlight); border-left: 0; margin-top: -8px; } } .message_area { display: flex; position: relative; align-items: center; textarea { resize: vertical; border: none; padding: 1rem 6.5rem 1rem 1rem; height: 56px; max-height: 150px; min-height: 56px; font-size: 14px; } label { cursor: pointer; position: absolute; margin: 0; padding: 5px 12px; border-radius: 25px; right: .5rem; font-size: 14px; letter-spacing: normal; } label:hover { background: var(--primary); color: var(--highlight); } } .attachments_div { display: flex; flex-direction: column; a.component_title.attachments { border-radius: 0; border-bottom: 0; } .sqai_attachments { display: flex; flex-direction: column; padding: .5rem 0; border-top: 1px solid var(--border); .file_table { display: flex; flex-direction: column; .dt-wrapper { gap: 0; .dt-top { .dt-dropdown { display: none; } .dt-search { font-size: 12px; width: calc(100% - 1rem); } } .dt-bottom { .dt-info { display: none; } } .dt-container { font-size: 12px; table { thead{ tr { th.dt-sorter { padding: .5rem 0; padding-right: 0; } .dt-sorter:before, .dt-sorter:after { display: none; } th.dt-sorter:first-of-type { padding: .5rem; padding-right: .5rem; } th.dt-sorter:last-of-type { padding: .5rem; padding-right: .5rem; padding-left: 0; } } } tbody { font-size: 10px; tr { td { padding: .5rem 0; span { display: none; } .nameimg { display: flex; align-items: center; gap: .5rem; font-size: 14px; } } td:not(.chks){ cursor: pointer; } td:first-of-type { padding: .5rem; padding-right: .5rem; } td:last-of-type { padding: .5rem; padding-right: .5rem; padding-left: 0; } } } } } } } >input, #sqai_att_text, #sqai_att_images { display: none; } >label { margin: 0; width: fit-content; margin-left: auto; margin-right: 1rem; } } } } } .opts_option.sqai.over { right: 6px; top: 35px; height: calc(100% - 42px); width: 485px; select.type_selection { line-height: normal; border-radius: 25px; font-size: 10px; background-color: var(--primary); background-image: none; border: none; font-family: 'Roboto'; color: var(--highlight); letter-spacing: 0; padding: 0px 12px; text-align: center !important; display: flex; cursor: pointer; margin-left: .5rem; max-width: 120px; text-wrap: wrap; font-weight: 100; text-align-last:center; option { background: var(--highlight); color: var(--text); font-family: 'Roboto'; line-height: 1.5; text-align: left; font-size: 12px; } } .attachments_div { display: none; } .sqai_content_types { span.vbp_message { font-size: 10px !important; max-width: 100px; text-align: center; } span.vbp_message:before { display: none; } } } } .content_assist { display: none; flex-direction: column; gap: .5rem; margin-bottom: auto; span { font-family: 'Roboto'; font-size: 14px; padding: 0 1rem 0 12px; display: flex; gap: .5rem; align-items: center; justify-content: space-between; i { padding: .25rem; font-size: 12px; color: var(--highlight); border-radius: 50%; display: none; } } } .content_actions { display: flex; flex-direction: column; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--border); a { padding: 8px 12px; font-size: 14px; border: 1px solid var(--border); border-radius: 5px; cursor: pointer; display: flex; align-items: center; gap: .5rem; position: relative; color: var(--text); } a.remove_post:hover, a.delete_post:hover { border-color: transparent; background: var(--red); color: var(--highlight); } a.save_post:hover { border-color: transparent; background: var(--ssqgreen); color: var(--highlight); } } .content_settings { display: flex; flex-direction: column; margin-top: auto; h3.component_title { display: flex; gap: .5rem; align-items: center; i { color: var(--primary); } } .content_settings_wrap { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; padding: .5rem 1rem 1rem; border: 1px solid var(--primary); border-radius: 5px; label { margin: 0; font-weight: 400; font-size: 14px; } >div { display: flex; flex-direction: column; #retakes_cont { margin-top: .25rem; font-size: 14px; width: 70px; } >p { font-size: 12px; opacity: .75; } >span { display: flex; gap: .5rem; align-items: center; >label { cursor: pointer; } } .timed_cont, .retake_cont { margin-top: .25rem; font-size: 14px; display: none; } } div#record_settings { display: none !important; } } } } .content_pop_content { width: 100%; display: flex; flex-direction: column; gap: .5rem; height: 100%; overflow: hidden; justify-content: space-between; >span { display: flex; gap: 1rem; justify-content: space-between; align-items: baseline; >h3.component_title { display: flex; gap: .5rem; align-items: center; } #remallints { display: none; color: var(--text); font-size: small; opacity: .5; } } >span:hover { #remallints { opacity: 1; } } #assistinfo { display: none; flex-direction: column; gap: .25rem; padding-top: 1rem; border-top: 1px solid var(--border); } #content_list { background: var(--body); display: flex; flex-direction: column; flex: 1; overflow-x: hidden; overflow-y: auto; gap: 1rem; padding: 1rem; border: 1px dashed var(--border); >li { cursor: move; display: flex; flex-direction: column; background: var(--highlight); border-radius: 5px; padding: 1rem; border: 1px solid var(--border); position: relative; gap: 1rem; box-shadow: var(--shadow) 0px 5px 15px; >span { display: flex; justify-content: space-between; select { line-height: normal; border-radius: 25px; font-size: 12px; height: 32px; background-color: var(--primary); background-image: none; border: none; font-family: 'Roboto'; color: var(--highlight); letter-spacing: 1px; padding: 0 12px; text-align: center !important; display: flex; cursor: pointer; text-align-last:center; option { background: var(--highlight); color: var(--text); font-family: 'Roboto'; line-height: 1.5; text-align: left; font-size: 14px; } } a.vicon.vicon-close { height: fit-content; padding: .5rem; } .vbp_message { margin: 0; padding: 0; height: 32px; background: none; margin-left: 1rem; font-size: 10px; opacity: .5; } .vbp_message:before { content: "\e717"; } } >div { display: flex; gap: .5rem; .content_image { width: 100px; height: 100px; display: flex; justify-content: center; overflow: hidden; border-radius: 5px; img { max-width: unset; max-height: 100%; } } .content_image.empty { height: 42px; width: 42px; align-items: center; color: var(--border); border: 1px dashed var(--border); border-radius: 0; } .int_content_wrap { display: flex; flex: 1; flex-direction: column; gap: .5rem; textarea { padding: .5rem 1rem; font-size: 14px; border-radius: 5px; resize: vertical; min-height: 84px; } p.assist { display: none; .vbp_message { margin: .5rem 0 0; margin-bottom: 0; border-radius: 5px; padding: .5rem 1rem; font-size: 12px; background: var(--ssqred); color: var(--highlight); gap: .5rem; a.small.button.is-primary { margin: 0; margin-left: auto; } } .vbp_message.lang, .vbp_message.leng { background: var(--body); color: var(--text); } .vbp_message:before { margin-right: 0; } } } input { flex: 1; max-height: 42px; padding: .5rem 1rem; border-radius: 25px; margin: auto; font-size: 16px; height: 42px; min-height: 42px; width: 100%; } } } >li.int>span>select { background-color: var(--intint); } >li.sort>span>select { background-color: var(--intsort); } >li.fill>span>select { background-color: var(--intfill); } >li.para>span>select { background-color: var(--intpara); } >li.ques>span>select { background-color: var(--intques); } >li.multi>span>select { background-color: var(--intmulti); } li.ques .int_content_wrap { input.int_answer { border-color: var(--ssqgreen); } } li.ques .int_content_wrap, li.multi .int_content_wrap, li.pair .int_content_wrap { flex-direction: column; gap: .5rem; } li.multi .int_content_wrap span.multi_opts, li.pair .int_content_wrap span.multi_opts { display: grid; width: 100%; position: relative; grid-template-columns: calc(50% - .25rem) calc(50% - .25rem); gap: .5rem; a.vicon.vicon-plus { padding: .25rem; border-radius: 50%; color: var(--highlight); background: var(--primary); font-size: 14px; opacity: .25; width: fit-content; position: absolute; bottom: 10px; right: .5rem; } a.vicon.vicon-plus:hover { opacity: 1; } span.multi_opt { display: inline-flex; input { border-color: var(--ssqred); } input.correct { border-color: var(--ssqgreen); } input.alt_answer { padding-right: 2rem; } } span.multi_opt.extra { position: relative; align-items: center; input { padding-right: 3rem; } .vicon-close { position: absolute; right: 10px; padding: .5rem; } } } li.ques .int_content_wrap input, li.multi .int_content_wrap input, li.pair .int_content_wrap input { width: 100%; } } } } } } .ssqbp-component-content { .ssqbp_sidebars { .ssqbp_main { margin: 0; inline-size: 100%; max-inline-size: 1440px; flex-grow: 1; padding-top: 1rem !important; margin-inline: auto; padding-block: 1.5rem; padding-inline: 1.5rem; .course_above.row { .mycontent { padding-right: 24px; padding-bottom: 12px; .sqcardd { background-image: url(/wp-content/themes/hhsppp/assets/images/sqbg2.png); min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; background-repeat: no-repeat; background-position-x: 100%; background-size: contain; background-color: var(--highlightbg); background-blend-mode: lighten; .mycontent-header { display: flex; flex-direction: column; gap: 12px; justify-content: space-between; flex: 1; .button.is_primary { width: fit-content; gap: .5rem; } } .mycontent-stats { display: flex; flex-direction: column; } } } .content_stats { padding-left: 24px; border-left: 1px solid var(--border); .sqcardd { min-height: 200px; display: flex; flex-direction: column; gap: 1rem; justify-content: space-between; } } } .sq_profile_wrap.squares .sq_content_stats { .sq_content_stat:nth-of-type(1) { .insight-icon { background-color: var(--ssqpurplebg); color: var(--ssqpurple); } } .sq_content_stat:nth-of-type(2) { .insight-icon { background-color: var(--ssqbluebg); color: var(--ssqblue); } } .sq_content_stat:nth-of-type(3) { .insight-icon { background-color: var(--ssqlightbluebg); color: var(--ssqlightblue); } } } .sq_content_insights_wrap { padding: 12px 12px 36px; margin: 0; display: flex; gap: 1rem; align-items: center; } .sq_content_stats { display: flex; gap: 1rem; flex: 1; justify-content: space-between; .sq_content_stat { display: flex; gap: 1rem; align-items: center; .insight-icon { height: 52px; width: 52px; border-radius: 5px; font-size: 22px; align-items: center; display: inline-flex; justify-content: center; background-color: var(--ssqpurplebg); color: var(--ssqpurple); } .insight-wrap { display: flex; flex-direction: column-reverse; justify-content: space-between; line-height: normal; >span { opacity: .8; font-size: 14px; } >h2 { font-size: 18px; line-height: normal; font-weight: 400; } } } .sq_content_stat.published { .insight-icon { background-color: var(--ssqpurplebg); color: var(--ssqpurple); } } .sq_content_stat.assessment { .insight-icon { background-color: var(--assessmentbg); color: var(--assessment); } } .sq_content_stat.activity { .insight-icon { background-color: var(--activitybg); color: var(--activity); } } .sq_content_stat.interactions { .insight-icon { background-color: var(--ssqbluebg); color: var(--ssqblue); } } .sq_content_stat.variety { .insight-icon { background-color: var(--ssqbluebg); color: var(--ssqblue); } } .sq_content_stat.inttype { .insight-icon { background-color: var(--ssqorangebg); color: var(--ssqorange); } } .sq_content_stat.proficiency { .insight-icon { background-color: var(--ssqlightbluebg); color: var(--ssqlightblue); } } .sq_content_stat.confidence { .insight-icon { background-color: var(--highlight); color: var(--ssqred); box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; border: 1px solid var(--primary); } } } .sq_content_wrap { padding: 0; margin-top: 12px; .sq_content_head { display: flex; gap: 24px; justify-content: space-between; align-items: center; padding: 24px; border-bottom: 1px solid var(--border); .mycourses_access_tabs { display: flex; align-items: center; gap: 12px; a { margin: 0; text-transform: capitalize; } } .create_content.button.is_primary { margin: 0; display: flex; gap: 8px; text-transform: capitalize; i { font-size: 14px; } } } #sq_manage_content { .manage_table_wrap { .manage_table_filters { padding: 24px; border-bottom: 1px solid var(--border); display: flex; gap: 24px; justify-content: space-between; >div { display: flex; gap: 24px; } >span { display: flex; gap: 8px; font-size: 14px; align-items: center; } } .manage_table_inner { display: flex; flex-direction: column; table { tbody>tr>th, thead>tr>th, tfoot>tr>th { height: 56px; -webkit-user-select: none; user-select: none; text-align: start; } tbody>tr>td.content_details img, tbody>tr>td.author_details img { height: 38px; object-fit: cover; border-radius: 50%; margin-right: 12px; } tbody>tr>td, tbody>tr>th, thead>tr>td, thead>tr>th, tfoot>tr>td, tfoot>tr>th { padding: 0 16px; align-content: center; text-transform: capitalize; } thead>tr>th { border-bottom: 1px solid var(--border); align-content: center; >span { display: flex; width: 100%; gap: 8px; justify-content: space-between; align-items: center; >p { font-family: 'Roboto Slab'; font-weight: 400; } >div { display: flex; margin-right: -16px; flex-direction: column; font-size: 8px; span.vicon.vicon-angle-up, span.vicon.vicon-angle-down { border: none; opacity: 0; cursor: pointer; padding: 8px } span.vicon.vicon-angle-up.active, span.vicon.vicon-angle-down.active { opacity: 1; background: none; color: var(--text); } } } } thead>tr>th:hover { >span { >div { span.vicon.vicon-angle-up, span.vicon.vicon-angle-down { opacity: .5; } span.vicon.vicon-angle-up:hover, span.vicon.vicon-angle-down:hover { opacity: 1; } span.vicon.vicon-angle-up.active, span.vicon.vicon-angle-down.active { opacity: 1; } } } } th { color: var(--text); } tbody>tr { border-bottom: 1px solid var(--border); } tbody>tr>td:first-of-type, thead>tr>th:first-of-type { padding-left: 24px; } tbody>tr>td:last-of-type, thead>tr>th:last-of-type { padding-right: 24px; } tbody>tr>td { height: 56px; font-size: 14px; } tbody>tr>td { a { color: var(--text); text-transform: capitalize; font-size: 15px; font-family: 'Roboto Slab'; } a:hover { color: var(--primary) !important; } } tbody>tr>td { span.tableaction { display: inline-flex; height: 38px; width: 38px; justify-content: center; align-items: center; font-size: 18px; border-radius: 50%; cursor: pointer; } span.tableaction:hover { background: var(--body); } span.tableaction.faded { opacity: .25; pointer-events: none; } } } } .manage_table_bottom { padding: 24px; display: flex; gap: 1rem; span.perpageopt { display: flex; align-items: center; gap: 12px; margin-left: auto; } .sq_status_switch { display: flex; align-items: center; } .bulkoptions { display: none; align-items: center; gap: .5rem; span.button.is_primary { margin: 0; display: none; } } .pagebuttons { >div { display: flex; gap: 8px; align-items: center; .ssq_pageingbutton { height: 38px; width: 38px; display: flex; justify-content: center; align-items: center; background: var(--border); color: var(--text); border-radius: 5px; cursor: pointer; } .ssq_pageingbutton.faded { cursor: not-allowed; } } } } } } .content_table_filters { padding: 24px; border-bottom: 1px solid var(--border); display: flex; gap: 24px; justify-content: space-between; span { display: flex; gap: 8px; font-size: 14px; align-items: center; } } #sqcontent_tables { .dt-wrapper { gap: 0; .dt-top { display: none; } .dt-container { table { thead { border: none; tr { >th:first-of-type { padding-left: 24px; } >th:last-of-type { padding-right: 24px; } >th { vertical-align: unset; padding: 0 16px; white-space: nowrap; text-transform: capitalize; height: 56px; -webkit-user-select: none; user-select: none; text-align: start; color: var(--text); border-bottom: 1px solid var(--border); align-content: center; font-family: 'Roboto Slab'; input[type="checkbox"] { width: 100%; cursor: pointer; } } .dt-sorter { position: relative; padding-right: 16px; } .dt-sorter:before { border-top: none; bottom: 5px; font-family: 'vicon'; content: "\e64b"; border: none; opacity: .5; cursor: pointer; padding: 8px; font-size: 8px; height: 24px; width: 24px; right: 10px; } .dt-sorter:after { content: "\e648"; border-top: none; bottom: unset; border-bottom: none; top: 5px; font-family: 'vicon'; border: none; opacity: .5; cursor: pointer; padding: 8px; font-size: 8px; height: 24px; width: 24px; right: 10px; } } } tbody { >tr { border-bottom: 1px solid var(--border); >td { vertical-align: middle; white-space: nowrap; height: 56px; font-size: 14px; padding: 0 16px; align-content: center; text-transform: capitalize; input[type="checkbox"] { width: 100%; cursor: pointer; } } } >tr:last-of-type { border-bottom: 1px solid var(--border); } >tr:first-of-type { padding-left: 24px; } >tr:last-of-type { padding-right: 24px; } } } } .dt-bottom { padding: 24px; display: flex; gap: 1rem; } } } } } .ssqbp_main.sqwide { inline-size: unset; max-inline-size: unset; flex-grow: unset; padding-top: 0 !important; margin-inline: 0; padding-block: 0; padding-inline: 0; display: flex; flex-direction: column; height: 100vh; width: 100vw; position: fixed; top: 0; left: 0; bottom: 0; right: 0; min-height: unset; overflow: hidden; } } } .ssqbp-component-content .profile_grid>#squares_component>.ssqbp_sidebars { >.ssqbp_main { >.manage_wrapper, >.analytics_wrapper { display: none; } } } .ssqbp-component-content .profile_grid>#manage_component>.ssqbp_sidebars { >.ssqbp_left_sidebar_wrapper>.ssqbp_left_sidebar { display: none; } >.ssqbp_left_sidebar_wrapper>.ssqbp_left_sidebar.manage { display: flex; a.manage_squares { margin-bottom: .25rem; } } >.ssqbp_main { margin: 0; inline-size: 100%; max-inline-size: 1440px; flex-grow: 1; padding-top: 1rem !important; margin-inline: auto; padding-block: 1.5rem; padding-inline: 1.5rem; >div:not(.manage_wrapper) { display: none; } >.manage_wrapper { display: flex; flex-direction: column; } >div>.vbp_message { margin: .5rem 0 0; } table thead th:first-of-type:before, table thead th:first-of-type:after { display: none; } table td:not(.chks) { cursor: pointer; } .published_squares, .draft_squares, .trash_squares, .manage_activities, .manage_assessments { flex-direction: column; display: flex; } .published_squares_wrap, .draft_squares_wrap, .trash_squares_wrap, .manage_activities_wrap, .manage_assessments_wrap { display: flex; flex-direction: column; gap: 1rem; } .table_options { display: none; gap: 1rem; justify-content: space-between; a.button, a.button+button { margin: 0; width: fit-content; } a.button.content_bulk_delete { margin-left: auto; } } .ssq_create_content { display: flex; flex-direction: column; gap: 1rem; margin-top: .75rem; .vicon-arrow-left { width: fit-content; padding: .5rem; color: var(--text) !important; } .form_wrap { display: flex; flex-direction: column; gap: 1rem; max-width: 720px; margin: auto; width: 100%; a.content_image { margin: auto; position: relative; margin-bottom: 1rem; border-radius: 5px; overflow: hidden; height: 300px; width: 300px; img { position: absolute; top: 0; left: 0; max-width: unset; height: 300px; width: 300px; object-fit: cover; } .vicon-pencil:before { font-size: 18px; padding: 8px; background: var(--highlight); border-radius: 50%; } >p { text-align: center; font-size: x-small; position: absolute; left: 0; right: 0; top: 4rem; bottom: 0; align-content: center; opacity: 0; color: var(--text) !important; background: var(--body); width: fit-content; height: fit-content; margin: auto; padding: 2px 4px; border-radius: 5px; } .vicon-pencil { position: absolute; display: flex; top: 0; bottom: 0; left: 0; right: 0; justify-content: center; align-items: center; } } a.content_image>p:hover { opacity: 1; } .content_name { display: flex; flex-direction: column; gap: .25rem; label { text-transform: capitalize; } } .content_language { margin-top: .5rem; display: flex; flex-direction: column; gap: .5rem; .langs_wrap { display: flex; gap: .5rem; justify-content: space-between; .lang_wrap { display: flex; position: relative; flex-direction: column; gap: .5rem; font-size: small; text-align: center; align-items: center; input { display: none; } input:checked+.lang_selector { opacity: 1; border-radius: 50%; width: 58px; margin: 0 auto; img { height: 54px; width: 54px; } } .lang_selector { opacity: .5; display: flex; flex-direction: column; gap: .5rem; margin: 0; font-size: small; align-items: center; cursor: pointer; height: 58px; img { height: 58px; width: 58px; } } span { font-weight: 400; margin: 0; opacity: 0; } } .lang_wrap:hover { span { opacity: 1; } } } } a.button.is-primary.is-rounded { margin: 0; width: fit-content; margin-left: auto; pointer-events: none; opacity: .5; } } } .edit_content_wrap { display: flex; flex-direction: column; height: 100vh; overflow: auto; .edit_square_wrapper { display: flex; flex-direction: column; height: 100%; .editsquare_header { display: flex; justify-content: space-between; align-items: center; gap: 24px; a.edit_export { color: var(--text) !important; } .vicon-arrow-left { padding: 24px; color: var(--text) !important; } a.small.button.is-primary { margin: 0; } a.helper { color: var(--text) !important; display: none; } .square_actions { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; span { display: flex; flex-direction: column; gap: .5rem; align-items: center; >a { margin-bottom: 0; } a.draft_square { color: var(--text); } } } } .edit_square_inner { display: flex; gap: 1.5rem; width: 100%; flex: 1; .edit_square_sidebar { z-index: 2; max-width: 300px; min-width: 300px; width: 300px; display: flex; flex-direction: column; gap: 1rem; height: fit-content; min-height: calc(100vh - 64px); max-height: 100%; position: sticky; top: 1rem; h3.component_title { display: flex; justify-content: space-between; align-items: center; cursor: pointer; i { font-weight: bolder; } } .square_sidebar_head { display: flex; flex-direction: column; position: relative; border-radius: 5px; overflow: hidden; img { max-width: 300px; aspect-ratio: 1; object-fit: cover; } h1 { display: flex; align-items: center; gap: .5rem; justify-content: left; padding: 1rem; position: absolute; bottom: 0; font-family: 'Roboto'; font-weight: 700; background: var(--transparency); backdrop-filter: blur(2px); width: 100%; } a.vicon.vicon-pencil { position: absolute; top: .5rem; right: .5rem; width: fit-content !important; height: fit-content; padding: .5rem !important; background: var(--primary); color: var(--text); opacity: .5; border-radius: 50%; font-size: 14px; } } .square_sidebar_head:hover { a.vicon.vicon-pencil { opacity: 1; } } .square_sidebar_settings.hiding { .sidebar_settings_wrap { display: none; } } .square_sidebar_groups.hiding { .sidebar_groups_wrap>div:not(.selected) { display: none; } } .square_sidebar_settings { display: flex; flex-direction: column; gap: .5rem; label { margin: 0; font-weight: 600; } input { margin: 0; } p { font-size: small; } .sidebar_settings_wrap { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; background: var(--highlight); border-radius: 5px; input#sq_date { margin-left: 1.5rem; margin-top: .5rem; } >div { display: flex; flex-direction: column; >span { display: flex; align-items: center; gap: .5rem; >label { cursor: pointer; } } } div#dripdeets_settings { display: flex; gap: .5rem; margin-left: 1.5rem; margin-bottom: .5rem; >div { display: flex; flex-direction: column; } #dripdur_settings span { display: flex; gap: .5rem; width: 100%; margin-top: .5rem; input { width: calc(60% - .25rem); } } #dripstart_settings { gap: .5rem; margin-top: .25rem; span { display: flex; align-items: center; gap: .5rem; font-size: small; font-weight: 400; label { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } } } } } } .square_sidebar_groups { display: flex; flex-direction: column; gap: .5rem; .sidebar_groups_wrap { display: flex; flex-direction: column; gap: .5rem; >div { background: var(--highlight); display: flex; gap: .5rem; padding: .5rem; align-items: center; justify-content: space-between; opacity: .5; cursor: pointer; >span { font-size: 14px; display: flex; align-items: center; gap: .5rem; img { width: 42px; height: 42px; } } .lvldiv { font-size: 10px; } } >div.selected { border: 1px solid var(--primary); opacity: 1; border-radius: 5px; order: -1; } a.ssq_square_managegroups { font-size: 14px; color: var(--primary); width: fit-content; padding: 1rem; } a.ssq_square_managegroups:hover { color: var(--primary); } .square_groups { display: flex; flex-direction: column; .vbp_message { margin: 0rem 1rem 1rem; width: calc(100% - 2rem); } .square_group { flex-direction: row; max-height: 64px; gap: .25rem; align-items: center; cursor: pointer; padding: .75rem 1rem; border-top: 1px solid var(--border); width: 100%; position: relative; display: flex; img { height: 32px; width: 32px; border-radius: 50%; } .group_details { display: flex; gap: .25rem; justify-content: space-between; width: 100%; strong { font-size: small; text-wrap: nowrap; } span { display: flex; gap: .25rem; font-size: small; align-items: center; } } } } } } } .edit_square_main { z-index: 1; display: flex; flex-direction: column; flex: 1; gap: 1rem; justify-content: space-between; .vbp_message.new_square { margin: 0 !important; } .square_content { display: flex; flex-direction: column; flex: 1; .content_wrap { display: flex; flex-direction: column; flex: 1; .sq_sections { font-size: 14px; display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-auto-flow: dense; #section_add { display: flex; height: fit-content; order: 2; .section_start { padding: .5rem 1rem; border-radius: 25px; background: var(--highlight); color: var(--text) !important; } .section_start:hover { background: var(--primary) !important; } } .section { padding: 1rem; display: inline-flex; flex-direction: column; border-radius: 5px; cursor: all-scroll; position: relative; background: var(--transparency); box-shadow: var(--shadow) 0px 5px 15px; .section_head:before { content: "\e68f"; font-family: 'vicon'; padding-left: .5rem; } .section_head { display: flex; gap: .5rem; align-items: center; position: relative; .vicon-trash { color: var(--text); opacity: 0; height: fit-content; display: flex; padding: .5rem; position: absolute; right: 0; } input { background: none; border: none; color: var(--text); width: calc(100% - 3.5rem); } input:focus { background: var(--highlight) !important; border-radius: 5px; color: var(--text) !important; } } .section_footer { display: flex; flex-direction: column; .section_opts { display: flex; justify-content: space-between; a.button { margin: 0; color: var(--text); } } #content_details { cursor: default; padding: 1rem; background: var(--highlight); border-radius: 5px; display: flex; flex-direction: column; gap: 1rem; position: absolute; width: calc(100% - .5rem); z-index: 2; box-shadow: var(--shadow) 0px 5px 15px; a { color: var(--text); } >span { display: flex; justify-content: space-between; gap: 1rem; a { margin: 0; width: 100%; } } .vicon-close { width: fit-content; padding: .5rem; margin: -.5rem; margin-left: auto; } } #content_search { cursor: default; padding: 1rem; background: var(--highlight); border-radius: 5px; display: flex; flex-direction: column; position: absolute; width: calc(100% - .5rem); z-index: 2; box-shadow: var(--shadow) 0px 5px 15px; >span { display: flex; justify-content: space-between; a { color: var(--text); } .actass { display: flex; border-radius: 11rem; overflow: hidden; a { color: var(--text); padding: .5rem; background: var(--border); display: flex; width: 100px; justify-content: center; } a.active { color: var(--text); background: var(--primary); } } } .searchbox.active { border-radius: 25px; flex-direction: row; padding: 0 .5rem; margin: 1rem 0 0; input#search_actass:focus { background-color: var(--highlight)!important; } } #search_results { display: none; flex-direction: column; margin-top: 1rem; max-height: 400px; overflow-y: auto; >li { display: flex; position: relative; padding: .5rem 1rem; background: var(--highlight); border-radius: 5px; justify-content: space-between; align-items: center; gap: .5rem; cursor: pointer; border: 1px solid var(--border); margin-bottom: .25rem; >div { display: flex; align-items: center; gap: .5rem; width: 100%; i { font-size: large; } p { width: 100%; display: flex; justify-content: center; font-size: 14px; font-family: 'Roboto'; font-weight: 600; } } .vicon-pencil { padding: .5rem; } .vicon-pencil:before { content: "\e61a"; } } } } } >ul { overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; min-height: 50px; margin: .5rem 0 1rem; border: 1px dashed #ffffff29; flex: 1; padding: .5rem; >li { display: flex; position: relative; padding: .5rem .5rem .5rem 1rem; background: var(--highlight); border-radius: 5px; justify-content: space-between; align-items: center; gap: .5rem; cursor: move; >div { display: flex; align-items: center; gap: .5rem; width: 100%; i { font-size: large; } p { width: 100%; display: flex; justify-content: center; font-size: 14px; font-family: 'Roboto'; font-weight: 600; text-align: center; } } .vicon-pencil { padding: .5rem; opacity: 0; } } >li:hover{ .vicon-pencil{ opacity: .5; } .vicon-pencil:hover { opacity: 1; } } } } } } } .square_actions { display: flex; gap: 1rem; justify-content: space-between; a { margin: 0; width: fit-content; display: flex; align-items: center; color: var(--highlight); gap: .5rem; height: fit-content; } a:not(.button) { padding: .5rem; opacity: .8; } a:not(.button):hover { opacity: 1; color: var(--primary); } span { display: flex; gap: 1rem; } } } } } } } } .login_page_content ul.nav.nav-tabs, .page-template-login-page .pagesidebar, .login_page_content h1#logo img, .login_page_content div#btmloginwrap .checkbox { display: none; } .login_page_content h1#logo img:first-of-type { display: flex; margin: auto; } .login_page_content h1#logo { margin: 2rem auto 2rem; } .login_featured_wrap { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: var(--text) !important; } .login_page_content { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; background: var(--primary); width: 100%; height: 100vh; padding: 2.5rem; gap: 2rem; justify-content: center; .tab-content { width: 100%; form#vbp-login-form { display: flex; flex-direction: column; gap: 1rem; .list-group.list-group-sm { margin: 0; } } } } .login_page_content_inner form#vbp-login-form { display: flex; flex-direction: column; align-items: end; } a#forgot_password_trigger { color: var(--text); opacity: .8; font-size: 12px; padding: .5rem 1rem; } a#forgot_password_trigger:hover { opacity: 1; } h2.signin_title { font-size: 18px; margin-bottom: .25rem; color: var(--text); } div#btmloginwrap input#sidebar-wp-submit:hover { border-color: var(--highlight); background: var(--highlight); color: var(--primary); } div#btmloginwrap input#sidebar-wp-submit { padding: 5px 2rem !important; border-radius: 25px; line-height: 0; height: 36px; cursor: pointer; border: 2px solid var(--text); color: var(--highlight); margin-bottom: 0 !important; width: fit-content !important; float: right; background: var(--text); } @-webkit-keyframes slide-in-bottom { 0% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes slide-in-bottom { 0% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .login_page_content_inner .innerr { padding: 0 2rem 0; background: var(--transparency); border-radius: 0 20px 20px; aspect-ratio: 1; display: flex; min-height: 450px; flex-direction: column; justify-content: space-evenly; -webkit-animation: slide-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both; animation: slide-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both; } .login_page_content_inner form#vbp-login-form .list-group.list-group-sm .list-group-item>div i { color: var(--text); position: absolute; right: 0; bottom: 0; padding: 14px 13px; cursor: pointer; font-size: 14px; } .login_page_content_inner form#vbp-login-form .list-group.list-group-sm { width: 100%; display: flex; flex-direction: column; gap: .5rem; margin-bottom: 0; } .login_page_content_inner form#vbp-login-form .list-group.list-group-sm .list-group-item input:focus-visible { outline: none; } .login_page_content_inner form#vbp-login-form .list-group.list-group-sm .list-group-item input { border: 0 !important; padding: .5rem 1rem; height: 42px; font-size: 14px; } .login_page_content_inner form#vbp-login-form .list-group.list-group-sm .list-group-item>div { display: flex; justify-content: space-between; align-items: baseline; } .login_page_content_inner form#vbp-login-form .list-group.list-group-sm .list-group-item { display: flex; flex-direction: column; border: none; background: transparent; padding: 0; margin: 0; gap: .25rem; } .login_page_content_inner form#vbp-login-form .list-group.list-group-sm .list-group-item.pass input#loginpass { padding-right: 2.5rem; letter-spacing: normal; } .page-template-login-page div#searchdiv { display: none !important; } .login_page_content_inner form#vbp-login-form .list-group.list-group-sm .list-group-item.pass { position: relative; } .login_page_content_inner form#vbp-login-form .list-group.list-group-sm .list-group-item label { font-family: 'Roboto'; font-weight: 400; font-size: 14px; color: var(--text); letter-spacing: normal; margin-bottom: 0; } .page-template-login-page, .page-template-login-page #global, .page-template-login-page .pusher { display: flex; flex-direction: column; position: relative; width: 100vw; height: 100vh; overflow: hidden; } .login_page_content { .loginsqs{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .loginsqs li{ position: absolute; display: block; list-style: none; width: 20px; height: 20px; background: var(--light); animation: animateloginsqs 25s linear infinite; bottom: -150px; } .loginsqs li:nth-child(1){ left: 25%; width: 8vh; height: 8vh; animation-delay: 0s; } .loginsqs li:nth-child(2){ left: 10%; width: 2vh; height: 2vh; animation-delay: 2s; animation-duration: 12s; } .loginsqs li:nth-child(3){ left: 70%; width: 2vh; height: 2vh; animation-delay: 4s; } .loginsqs li:nth-child(4){ left: 40%; width: 6vh; height: 6vh; animation-delay: 0s; animation-duration: 18s; } .loginsqs li:nth-child(5){ left: 65%; width: 2vh; height: 2vh; animation-delay: 0s; } .loginsqs li:nth-child(6){ left: 75%; width: 11vh; height: 11vh; animation-delay: 3s; } .loginsqs li:nth-child(7){ left: 35%; width: 15vh; height: 15vh; animation-delay: 7s; } .loginsqs li:nth-child(8){ left: 50%; width: 2.5vh; height: 2.5vh; animation-delay: 15s; animation-duration: 45s; } .loginsqs li:nth-child(9){ left: 20%; width: 1.5vh; height: 1.5vh; animation-delay: 2s; animation-duration: 35s; } .loginsqs li:nth-child(10){ left: 85%; width: 15vh; height: 15vh; animation-delay: 0s; animation-duration: 11s; } @keyframes animateloginsqs { 0%{ transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; } 100%{ transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 0 25% 25%; } } } a.dashseemore { display: none; font-size: small; margin-top: auto; padding: .5rem; width: fit-content; text-transform: capitalize; } .myssq_notes_discussion.myssq_notes_discussion-3, .myssq_notes_discussion.myssq_notes_discussion-3>*, .myssq_notes_discussion.myssq_notes_discussion-3>*>*, .myssq_notes_discussion.myssq_notes_discussion-3>*>*>* .myssq_dashboard_notes_discussions, .myssq_notes_discussion.myssq_notes_discussion-3>*>*>* .myssq_dashboard_notes_widget { height: 100%; } .myssq_notes_discussion.myssq_notes_discussion-3>*>*>* { display: flex; flex-direction: column; height: 100%; } .create_content_pop.tables .content_pop_header span .vicon { display: none; } .ssqbp-component-messages .ssqbp_main { padding: 0; max-width: unset; margin: 0 -1.5rem 0 0; } .ssqbp-component-messages .ssqbp_main .message_left_right { margin: 0; height: 100vh; overflow: hidden; width: 100%; } .ssqbp-component-messages .ssqbp_main .message_left_right>.message_list_left { height: 100%; display: flex; flex-direction: column; overflow: hidden; max-width: 40%; background: var(--ssqmessagesareabg); width: 100%; } .ssqbp-component-messages .message_left_right .message_list_left .msginnerone { display: flex; flex-direction: column; width: 100%; overflow: hidden; } .ssqbp-component-messages .message_left_right .message_list_left .messages { display: flex; flex-direction: column; width: 100%; overflow-x: hidden; overflow-y: auto; height: 100%; } .ssqbp-component-messages .ssqbp_main .message_left_right>* { margin: 0; border: 0; flex: 1; } .ssqbp-component-messages .message_left_right .message_list_left .messages .message_block:not(.active):hover { background: var(--ssqhovgray); } .ssqbp-component-messages .message_left_right .message_list_left .message_list_head { padding: 1rem 24px 12px; gap: 12px; flex-direction: row-reverse; justify-content: start; border-bottom: 1px solid var(--border); } .ssqbp-component-messages .message_left_right .searchbox.active { background-color: var(--highlight); border-radius: 25px; padding-left: .5rem; flex-direction: row; margin: 0 !important; } .page .ssqbp_myprofile .checkbox > input[type="checkbox"]:checked + label:after { color: var(--primarycolor); content: "\e64c"; font-family: 'vicon'; } .ssqbp-component-messages .ssqbp-component-messages .checkbox>input[type=checkbox]+label:before { background: var(--highlight); border: 1px solid var(--border); border-radius: 0 2px 2px; } .ssqbp-component-messages .checkbox>input[type=checkbox]+label:before { background: var(--highlight); margin-right: 0; } .ssqbp-component-messages .checkbox { margin-top: 0; margin-bottom: 0; } .ssqbp-component-messages .message_left_right .message_list_left .messages .message_block { flex-wrap: nowrap; padding: 12px 24px; cursor: pointer; font-size: 14px; width: 100%; overflow: hidden; border-bottom: 1px solid var(--border); } .ssqbp-component-messages .message_left_right .message_list_left .messages .message_block.active { background: var(--ssqlightbluebg); } .ssqbp-component-messages .message_left_right .message_list_left .messages .message_block .message_avatars { margin: 0; min-height: 54px; display: flex; justify-content: center; align-items: center; } .ssqbp-component-messages .message_left_right .message_list_left .messages .message_block .message { display: flex; flex-direction: column; font-size: 14px; line-height: 20px; width: calc(100% - 68px); padding: 0 12px; overflow: hidden; text-overflow: ellipsis; } .ssqbp-component-messages .message_left_right .message_list_left .messages .message_block .message>div { font-weight: unset; width: unset; } .ssqbp-component-messages .message_left_right .message_list_left .messages .message_block .message>div span.ssqbp_member { text-transform: capitalize; } .ssqbp-component-messages .message_left_right .message_list_left .messages .message_block .message img { display: none; } .ssqbp-component-messages .message_left_right .message_list_left .messages .message_block .datetime { font-size: x-small; display: flex; gap: 5px; width: min-content; margin-left: auto; text-wrap-mode: nowrap; } .ssqbp-component-messages .message_left_right .message_list_left .messages .message_block .datetime>span { display: none; } .ssqbp-component-messages .message_left_right .message_list_left .messages .message_block .datetime>span:nth-of-type(1) { display: flex; text-wrap: nowrap; } .ssqbp-component-messages .ssqbp_main .message_left_right>.message_main { display: flex; flex-direction: column; background: var(--highlight); height: 100%; } .page .checkbox>input[type=checkbox]:checked+label:before { border-color: var(--primary); } .message_left_right .message_main .fullmessage { padding: 0; height: 100%; overflow: hidden; display: flex; flex-direction: column; } .message_left_right .message_main .fullmessage>.portal { background: none; border-radius: 0 !important; margin: 0; flex-wrap: unset; overflow: hidden; flex: 1; } .message_left_right .message_main .fullmessage>.portal .portal_message_header { display: flex; gap: 12px; align-items: center; width: 100%; .ssqbp_member { display: flex; gap: 12px; align-items: center; font-weight: 500; font-family: 'Roboto Slab'; img { height: 36px; width: 36px; border-radius: 50%; object-fit: cover; } } .datetime { margin-left: auto; font-size: 10px; } .vicon.vicon-back-left { display: flex; height: fit-content; padding: 12px; margin-right: -12px; cursor: pointer; font-size: 14px; } } .page .fullmessage .portal .portal_body > div { flex-direction: column; margin-bottom: 0; padding: 24px 0; border-top: 1px solid var(--border); } .page .fullmessage .portal .portal_body > div:last-of-type { border-top: none; padding-top: 0; } .page .fullmessage .portal .portal_body .portal_message_wrapper { flex-direction: column; align-items: flex-start; gap: 12px; } .ssqbp-component-messages .fullmessage .portal .portal_header { padding: 1rem 24px 12px 72px; gap: 12px; justify-content: start; border-bottom: 0; } .ssqbp-component-messages .fullmessage .portal .portal_header .header_top { margin: 0; font-size: 22px; display: flex; font-family: 'Roboto Slab'; justify-content: space-between; flex: 1; i.vicon.vicon-trash { display: flex; height: fit-content; padding: 12px; margin-right: -12px; cursor: pointer; font-size: 14px; margin-top: -6px; } } .ssqbp-component-messages .fullmessage .portal .portal_header .header_left { width: 100%; } .ssqbp-component-messages .fullmessage .portal .portal_header .header_right { margin: 0; height: 42px; width: 100%; display: flex; align-items: center; justify-content: space-between; } .ssqbp-component-messages .fullmessage .portal .portal_header .header_right>i { padding: .5rem; cursor: pointer; } .ssqbp-component-messages .fullmessage .portal .portal_header .header_right a.vicon.vicon-back-left { display: none; } .ssqbp-component-messages .fullmessage .portal .portal_header .header_right>i { padding: .5rem; cursor: pointer; } .message_left_right .message_main .fullmessage>.portal .portal_body { height: 100%; overflow-y: auto; overflow-x: hidden; padding: 0 24px; gap: 12px; display: flex; flex-direction: column; } .fullmessage .portal .portal_body .portal_message_wrapper .portal_message { display: flex; flex-direction: column; background: var(--body); padding: 24px; width: calc(100% - 48px); margin-left: 48px; } .fullmessage .portal .portal_body .portal_title { padding: 0 !important; } .fullmessage .portal .portal_body .portal_title .message_subject { display: none !important; } .page .fullmessage .portal .portal_body .portal_title .datetime { font-size: 10px; } .fullmessage .portal .portal_body .portal_title .datetime>span { display: none; } .fullmessage .portal .portal_body .portal_title .datetime>span:nth-of-type(1) { display: inline-block; } .fullmessage .portal .portal_body .portal_content { margin: 0 0 6px !important; } .page .recipients .search_results { overflow-x: hidden; } .page .recipients .search_results .search_result { cursor: pointer; } .page .recipients .recipients_list .recipient_items .ssqbp_member { cursor: pointer; } .ssqbp-component-messages .ssqbp_main .message_left_right>.message_main>.newmessage_form { label { font-size: 14px; margin: 0; opacity: 1; font-family: 'Roboto Slab'; } input[type="text"] { background: var(--body); padding: .5rem; font-size: 14px; } } .page .fullmessage .portal .portal_body .portal_message_wrapper .portal_message .message_attachments { display: flex; gap: 12px; } .ssqbp-component-messages .newmessage_form { padding: 24px 0 1rem; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--border); margin: 0 24px; } .ssqbp-component-messages .newmessage_form .message_body .ssq_message_editor { display: flex; gap: 12px; .ssqbp_member { display: flex; span { display: none; } img { height: 36px; width: 36px; border-radius: 50%; object-fit: cover; } } } .ssqbp-component-messages .fullmessage .ssq_message_editor textarea { width: 100%; resize: none; height: 125px; } .ssqbp-component-messages .newmessage_form .message_actions { justify-content: flex-end; gap: 12px; margin: 0; } .ssqbp-component-messages .message_left_right .message_list_left .message_list_head .bulk_actions { order: -1; gap: 12px; flex: 1; } .ssqbp-component-messages .message_left_right .message_list_left .message_list_head .bulk_actions select { flex: 1; max-width: unset; margin: 0; height: 38px; background-color: var(--highlight) !important; } .ssqbp-component-messages .newmessage_form .message_actions .message_actions_wrap { display: flex; flex-direction: row-reverse; gap: 1.5em; } .newmessage_form .message_actions .message_buttons a.button.is-primary { opacity: .5; pointer-events: none; } .ssqbp-component-messages .newmessage_form .message_Attachments_grp { display: flex; gap: 1.5rem; } .page.ssqbp-component-messages .ssqbp_left_sidebar a.button { font-size: 16px; margin-bottom: 12px; } .ssqbp-component-messages .ssqbp_main .message_left_right>.message_list_left .messages>.vbp_message { margin: 1rem; max-width: calc(100% - 2rem); justify-content: center; } .ssqbp_myprofile.elegance .profile_menu .menu_bottom span.ssqbp_current_user.allcounts .count { position: absolute; top: 0; right: 0; } .allcounts .count { display: none; position: absolute; bottom: 0; right: 0; padding: 2px; height: 18px; width: 18px; background: var(--ssqred); color: transparent; border-radius: 5px; flex-direction: column; font-size: 0; justify-content: center; align-items: center; z-index: 2; } .allcounts .count:before { content: "\e75a"; font-family: 'vicon'; font-size: 12px; color: var(--ssqwhite); } .messageslive .count, .friend-requestts .count { display: none; position: absolute; top: 0; right: 0; padding: 5px; height: 1rem; background: var(--ssqred); color: transparent; border-radius: 50%; aspect-ratio: 1; font-size: 0; } .ssqbp_myprofile .profile_menu .menu_bottom .menu_item .ssqbp_member_menu .ssqbp_loggedin_menu_wrapper .ssqbp_loggedin_usermenu_content>span .count { display: none; aspect-ratio: unset; font-size: unset; color: var(--highlight); border-radius: 5px; position: absolute; height: 75%; top: 0; bottom: 0; justify-content: center; align-items: center; margin: auto; } .ssqbp-component-messages .message_left_right .message_list_left .messages .message_block .message.unread { font-weight: 600 !important; } .ssqbp-component-profile .ssqeditprofile .langlvlopts { display: block; gap: 1rem; justify-content: space-between; margin: 1rem 0 0rem; .langopt { display: inline-flex; flex-direction: column; margin-right: 1rem; margin-bottom: 1rem; >span { display: flex; gap: .5rem; align-items: center; >span { width: 100%; select { width: 100%; } } } } } .ssqbp_myprofile>.profile_grid>div>div>.ssqbp_sidebars>.ssqbp_main>*, .ssqbp_myprofile>.profile_grid>div>.ssqbp_sidebars>.ssqbp_main>* { -webkit-animation: fade-in 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: fade-in 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; } .myssq_manage_quizzes_wrapper .ssqbp_quizzes, .myssq_manage_courses_wrapper .course_instructor_blocks { -webkit-animation: fade-in 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: fade-in 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; } @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .course_status .incourse .quiz_questions_content { -webkit-animation: fade-in 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: fade-in 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; } a.save_quiz.button.is-primary { display: none; } .hideSpeechbox .course_blocks .course_block_wrap.speechbox { display: none; } .showSpeechbox .course_blocks .course_block_wrap.speechbox { display: block !important; } .showSpeechbox .course_blocks .course_block_wrap:not(.speechbox) { display: none; } .incourse .question_wrapper .incorrect strong, .incourse .quiz_questions_content .question .explanation, .incourse .checked_answer { display: none; } .course_content_content.assessment { span.ssq_quesbuttons_wrap { a#speechbutton_clear { opacity: 0 !important; pointer-events: none !important; } } .quiz_questions_content { .question_actions { display: none !important; } .question_inner_wrap { border-radius: 5px !important; .question_content.ssq { border-radius: 5px !important; } .que_content_wrap { border-radius: 5px !important; } } } .incoursequiz_details, .incoursequiz_details.show_controls { .quiz_first_block { display: flex; margin-top: .5rem; width: fit-content; border-radius: 5px; margin-left: auto; .buttons.has-addons.small { display: none; } } } } .square_sidebar_head h1 a.vicon.vicon-more-alt { margin-left: auto; background: var(--primary); color: var(--text); padding: 5px; border-radius: 50%; min-height: 36px; min-width: 36px; display: flex; justify-content: center; align-items: center; opacity: .5; aspect-ratio: 1; } .square_sidebar_head h1 a.vicon.vicon-more-alt:hover { opacity: 1; } .ssq_pop_wrapper .ssq_create_content .form_wrap>span { display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .ssq_pop_wrapper .ssq_create_content .form_wrap>span>a { margin: 0; } section.profile-loader img { height: 64px; } a.button.is-primary.delsq { text-transform: capitalize; color: var(--text); } div#forgotwrap:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; background: var(--text); backdrop-filter: blur(3px); } div#forgotwrap { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0; background: var(--primary); height: 100vh; background-repeat: no-repeat; background-size: cover; } .page-template-forgot-password div#page-content { padding: 2rem; background: var(--primary); border-radius: 5px; display: flex; flex-direction: column; flex-grow: unset; min-width: 500px; z-index: 2; background-size: 400% 400%; .login-logo { width: 250px; margin: 0 auto 1rem; } } .page-template-forgot-password div#page-content>label { font-weight: 400; max-width: 50vw; text-align: justify; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--text)59; } .page-template-forgot-password h1#logo { display: flex; } .page-template-forgot-password div#page-content label h3 { font-weight: bold; font-size: 32px; color: var(--text); margin-bottom: .5rem; } .page-template-forgot-password div#page-content label p { font-size: 14px; margin: 0; color: var(--text); } .page-template-forgot-password div#page-content label p+p { margin-top: 1rem; padding: 1rem; background: var(--body); border-radius: 5px; text-align: left; font-size: 12px; } .page-template-forgot-password div#page-content form { display: flex; flex-direction: column; >label { font-family: 'Roboto'; font-weight: 400; font-size: 14px; color: var(--text); letter-spacing: normal; } } .page-template-forgot-password input#user_login { padding: 0.5rem 1rem; border-radius: 5px; border: 0; background-color: var(--highlight) !important; font-size: 16px; font-family: 'Roboto'; height: 42px; } .page-template-forgot-password div#page-content form #submit { margin-left: auto; padding: 5px 2rem !important; border-radius: 25px; line-height: 0; height: 36px; cursor: pointer; border: 2px solid var(--text); color: var(--highlight) !important; margin-bottom: 0 !important; width: fit-content !important; float: right; background: var(--text); margin-right: 0; margin-top: 1rem; text-transform: capitalize; font-family: BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif; font-size: 16px; font-weight: 600; letter-spacing: normal; word-spacing: normal; } .page-template-forgot-password div#page-content form #submit:hover { border-color: var(--highlight); background: var(--highlight); color: var(--primary) !important; } .page .course_status .incourse .quiz_pagination_wrapper { margin: .5rem 0; justify-content: center; } .ssqbp_create_group .group_creation_steps .group_step>div.field_wrapper.field_radio.field_group_lang .switch input:checked+.slider { opacity: 1; } .ssqbp-component-content .ssqbp_main .manage_media { display: flex; flex-direction: column; .manage_media_header { display: flex; flex-direction: column; .media_filters { padding: 24px; border-bottom: 1px solid var(--border); display: flex; gap: 24px; justify-content: space-between; .upload_media { display: none; } } } .manage_media_body { display: flex; flex-direction: column; .mymedia_table_wrap { display: flex; flex-direction: column; .dt-wrapper { .dt-top, .dt-bottom { display: none; } table#mymedia_table { td:not(.chks) { cursor: auto; } td.media_details { span.meddeets { display: flex; max-height: 48px; gap: .5rem; align-items: center; audio::-webkit-media-controls-mute-button { display: none; } >a { display: flex; height: 100%; gap: .5rem; color: var(--text); align-items: center; span.mymedia.vicon { height: 48px; width: 48px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--border); border-radius: 5px; font-size: x-large; } img { max-height: 48px; width: 48px; aspect-ratio: 1; object-fit: contain; border-radius: 5px; } .vidwrap { position: relative; border-radius: 5px; height: 48px; width: 48px; overflow: hidden; video { height: 48px; width: 48px; object-fit: cover; pointer-events: none; } } .vidwrap:before { content: "\e6ad"; font-family: 'vicon'; position: absolute; top: 0; bottom: 0; left: 0; right: 0; font-size: x-large; display: flex; align-items: center; justify-content: center; background: var(--text); backdrop-filter: blur(1px); color: var(--primary); } } } } } } span.simplenav { display: flex; gap: 1rem; justify-content: space-between; align-items: center; font-size: 14px; .simplenav-info { display: none; } .simplenav-nav { display: flex; gap: .5rem; align-items: center; margin-left: auto; a.simplenav-prevnxt { color: var(--text); padding: .5rem; font-size: 18px; } a.simplenav-prevnxt.faded { opacity: .3; pointer-events: none; } } } .table_options { a.button.is-primary.new_mail.mymedia_delete { color: var(--text); } } } } } #ssqbp_member .create_content_pop.activity .content_settings.actass { display: none !important; } .button { color: var(--text) !important; } .vbp_message.myfiless { margin: 1rem; width: calc(100% - 2rem); } .page.ssqbp-component-messages .ssqbp_sidebars .ssqbp_left_sidebar a.menu-child.notices { display: none; } .page .newmessage_form .message_actions .message_Attachments span { cursor: pointer; } .page .newmessage_form .message_actions .message_Attachments { align-items: center; gap: 12px; } .page .newmessage_form .message_actions .message_buttons a.button.is-primary { margin-right: 0; } .page .course_blocks .course_block_wrap.speechbox .course_block_content_wrapper .course_progress_wrapper { display: none; } .ssqbp-component-squares .course_status.speechbox { .course_timeline { .course_heading .course_heading_wrapp { padding-bottom: 0; .course_progress_wrapper { display: none; } } ul { gap: .5rem; padding-top: .5rem; li.quiz.active { padding: 0; } } } .sbox:hover { font-size: 0 !important; } .question_actions .sbox i.vicon.vicon-package:after { content: "-" !important; background: var(--ssqred) !important; } } .course_status .incourse .retakeprevnextt { display: flex; flex-direction: column; .retakeprevnextt_actions { display: flex; margin-top: 1rem; gap: 1rem; justify-content: space-around; >a { display: flex; flex-direction: column; justify-content: start; align-items: center; width: fit-content; color: var(--text); span.remainingretakes { font-size: small; } i.vicon-reload { background: var(--primary); } i.vicon-arrow-right { background: var(--ssqgreen); } i { font-size: 24px; padding: .5rem; border-radius: 50%; color: var(--highlight); height: 55px; aspect-ratio: 1; display: flex; justify-content: center; align-items: center; margin-top: .5rem; } } } } .course_status .incourse .start_message_wrap { display: flex; flex-direction: column; gap: 1rem; padding: 2rem; background: var(--highlight); border-radius: 5px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; background-image: url(/wp-content/themes/hhsppp/assets/images/readysteadygo.png); background-repeat: no-repeat; background-position-x: 1rem; background-position-y: 100%; background-size: auto 400px; min-height: 425px; padding-left: 278px; .intro_assessment { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; >h5 { font-size: 24px; } >div { font-size: 14px; color: var(--ssqred); display: flex; align-items: baseline; gap: .5rem; } >span { width: 100%; font-size: 12px; opacity: .9; } } .start_intro { font-size: 12px; display: flex; flex-direction: column; gap: .5rem; span { opacity: .9; } } .start_steps { display: flex; margin: auto; >span { display: flex; flex-direction: column; text-align: center; padding: 1rem; gap: .5rem; align-items: center; h3 { display: flex; justify-content: center; height: 32px; width: 32px; border: 1px solid var(--primary); border-radius: 50%; } p { font-size: 12px; opacity: .9; } } } .start_message { font-size: x-large; } } .course_status .incourse .retakeprevnextt h3 { text-align: center; text-transform: capitalize; color: var(--primary); font-size: 22px; } .userdeets_wrapper.resutlss { padding-left: 80px; } .userdeets_wrapper { position: fixed; z-index: 9999; width: 100vw; height: 100vh; background: var(--dark); display: flex; flex-direction: column; justify-content: center; } .userdeets_wrapper.resutlss .userdeets_wrapper_inner { max-width: 1280px; width: 100%; position: relative; } .userdeets_wrapper .userdeets_wrapper_inner { margin: auto; background: var(--highlight); display: flex; flex-direction: column; padding: 1rem; border-radius: 0 10px 10px; overflow: hidden; max-width: 720px; min-width: 500px; max-height: calc(100% - 4rem); gap: .5rem; } .userdeets_wrapper .userdeets_wrapper_inner .user_pop_actions { display: flex; justify-content: end; } .userdeets_wrapper #results .pop_submission_wrap, .userdeets_wrapper #results { display: flex; flex-direction: column; max-height: 100%; overflow: hidden; gap: 1rem; } .userdeets_wrapper .userdeets_wrapper_inner .user_pop_actions a { padding: .5rem; } .studentinsights table tbody tr { cursor: pointer; } #showresults { display: none; } .userdeets_wrapper.resutlss tbody tr.myssq_quiz_row { border-top: 1px solid var(--primary); cursor: pointer; } div#results table#usertable_two thead, div#results table#usertable_two tbody { height: 35px; } .userdeets_wrapper.resutlss tbody tr { border-top: 1px solid var(--primary); cursor: pointer; } .innerress table#ques_results { width: 100%; } .innerress table#ques_results b { color: var(--ssqorange); } .page input[type=number], .page input[type=search], .page input[type=time], .page input[type=text], .page input[type=password], .page input[type=email], .page input[type=url], .page input[type=image], .page textarea { border: 1px solid var(--border); border-radius: 5px; } .course_status .incourse .retakeprevnextt .last_actass, .course_status .incourse .retakeprevnextt .remaining_retakes { text-align: center; font-weight: bold; } .user_card_wrap.directedit { .edit_user{ >a.vicon.vicon-arrow-left { display: none; } } } #analytics_component .ssqbp_left_sidebar_wrapper { display: flex !important; flex-direction: column; height: 100vh; position: sticky; top: 0; .menu-child.current-menu-item { font-weight: 400; } .menu-child.curr-side, .menu-child.curr-top { font-weight: 700; } .ssqbp_left_sidebar { position: static !important; >a.menu-child.insights { margin-bottom: .25rem; } } .ssqbp_left_sidebar:not(.analytics) { order: 2; padding-left: 1rem; display: none; >a.menu-child, >strong { display: none; margin-bottom: 0; } >a.menu-child.manage_students { order: 1; display: flex !important; } >a.menu-child.manage_courses { order: 2; display: flex !important; } >a.menu-child.manage_quizzes { order: 3; display: flex !important; } >a.menu-child.manage_assignments { order: 4; display: flex !important; } } } .ssqbp-component-analytics { #analytics_component { .ssqbp_main>div:not(.analytics_wrapper) { display: none; flex-direction: column; } .ssqbp_main>div.analytics_wrapper { display: flex !important; flex-direction: column; padding-top: .75rem; >span { display: flex; gap: .5rem; margin-bottom: 1.5rem; >h3 { font-size: 1.4rem; font-weight: 600; margin-bottom: 0; display: flex; flex: unset; align-items: center; gap: .5rem; margin-right: auto; } select { border-radius: 20px; font-size: 14px; line-height: normal; cursor: pointer; } select#analytics_lvl { display: none; } } .analytics_members { display: flex; flex-direction: column; gap: 1rem; h4 { font-weight: 700; font-family: 'Roboto'; } .member_progress { display: flex; gap: 1rem; justify-content: space-between; .ai_leveling, .member_ranks { display: flex; flex-direction: column; gap: 1rem; width: 336px; background: var(--highlight); padding: 1rem; border-radius: 5px; border: 1px solid var(--border); } .ai_leveling { canvas#ai_leveling_data { min-height: 500px; max-width: 100%; } } .member_ranks { .member_leader_data { ul { display: flex; flex-direction: column; li { display: flex; gap: .5rem; overflow: hidden; align-items: center; padding: .5rem; border-top: 1px solid var(--border); img { height: 32px; border-radius: 50%; border: 1px solid var(--border); } .confirdence { font-size: 0.8rem; margin-left: auto; } .confirdence:after { content: 'pts'; font-size: x-small; } } li:last-of-type { border-bottom: 1px solid var(--border); } } } } .member_stats { display: flex; flex-direction: column; gap: 1rem; flex: 1; background: var(--highlight); padding: 1rem; border-radius: 5px; border: 1px solid var(--border); canvas#member_stats_data { min-height: 500px; max-width: 100%; } } } } .analytics_content { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; >h4 { font-weight: 700; font-family: 'Roboto'; } .performance_sqs { display: flex; gap: 1rem; height: 160px; .varietyscore { gap: 0 !important; label { margin-bottom: 0; } >span { position: relative; display: flex; height: 100px; width: 100px; align-items: center; justify-content: center; flex-direction: column; span.varietyinner { display: flex; position: absolute; font-weight: 700; } span.varietyinner:after { content: "%"; } >svg { transform: rotate(-90deg); } } } span.analytics_rank { display: flex; gap: 1rem; margin-left: auto; span.analytics_square { label { font-size: 12px; } span.res_main { font-size: 14px; text-align: center; line-height: 1.2; } span.rank_scores { font-size: 12px; height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--highlight); } span.rank_scores.high { background: var(--ssqgreen); } span.rank_scores.low { background: var(--ssqred); } } } span.analytics_square { display: flex; flex-direction: column; align-items: center; padding: .5rem; border: 1px solid var(--border); border-radius: 5px; justify-content: space-between; gap: .5rem; width: 160px; height: 160px; background: var(--highlight); label { margin-bottom: 0; text-align: center; } span.res_main { font-size: x-large; font-weight: bold; } span.res_avg { display: flex; justify-content: center; width: 100%; align-items: center; span:first-of-type { text-align: center; font-size: 10px; width: 50px; line-height: 1; } span.avgscores { text-align: center; width: 45px; font-weight: 400; } span:last-of-type { height: 22px; width: 22px; margin: 0 14px; text-align: center; border-radius: 5px; color: var(--highlight); font-size: 12px; } span.avgsym.up { background: var(--ssqgreen); transform: rotate(-90deg); } span.avgsym.dn { background: var(--ssqred); transform: rotate(90deg); } span.avgsym.av { background: var(--primary); } span.avgsym.up:before, span.avgsym.dn:before { content: ">"; } span.avgsym.av:before { content: "-"; } } } } } } } #analytics_component.tables { .ssqbp_main>div:not(.analytics_wrapper) { display: flex; flex-direction: column; } .ssqbp_main>.vicon.vicon-arrow-left { width: fit-content; padding: .5rem; margin: .75rem -.5rem; cursor: pointer; } .ssqbp_main>div.analytics_wrapper { display: none !important; } .myssq_manage_courses_wrapper { .myssq_courses_header { background: none; margin-bottom: 1rem; margin-top: .5rem; padding: 0; position: static; border: none; gap: 1rem; .ssqbp_form_field.no_border { display: none; } .ssqbp_form_field { margin: 0; padding: 0 .75rem 0 0.5rem; border-radius: 25px; background-color: var(--highlight); max-width: 75%; flex: 1; } .hdr_select { margin: 0; flex: unset; } } .course_instructor_blocks { .course_instructor_block { position: relative; aspect-ratio: 1; border-radius: 5px; overflow: hidden; border: none; >div{ height: 100%; } .course_featured_image { height: 100%; display: flex; flex-direction: column; img { height: 100%; object-fit: cover; width: 100%; } } .course_block_content_wrapper { padding: .5rem; border: none; text-align: justify; font-family: 'Roboto'; font-weight: 700; background: var(--transparency); backdrop-filter: blur(2px); position: absolute; bottom: 0; width: 100%; .title_lang { display: flex; gap: .5rem; margin-bottom: .5rem; align-items: center; .user_lang { position: relative; display: flex; align-items: center; } h3 { font-size: 18px; text-align: left; } } .course_meta { border-top: none; padding: 0; flex-direction: column; .course_meta_wrap { display: flex; gap: 5px; width: 100%; justify-content: space-between; align-items: center; .course_instructor { display: flex; align-items: center; gap: 5px; text-transform: unset; span { color: var(--text); font-size: 12px; } img { max-width: 28px; border-radius: 50%; border: 1px solid var(--border); } } } } } } } } .course_manage { background: var(--highlight); padding: 1rem; border-radius: 5px; gap: 1rem; position: relative; .course_information { img{ height: 100px; max-width: 100px; object-fit: cover; } >div:not(.course_topstats){ justify-content: space-around; >a.link { display: none; } span.course_meta { margin: 0; >span { gap: 5px; span.friendly_time { margin-right: 0; } } } } >div.course_topstats { padding: 0; flex-direction: row; gap: .5rem; margin-right: .5rem; width: fit-content; justify-content: end; flex: unset; span.course_topstat { display: flex; flex-direction: column; align-items: center; color: var(--text); justify-content: space-evenly; padding: .5rem; border: 1px solid var(--border); border-radius: 5px; width: 100px; height: 100px; font-size: 12px; gap: .5rem; text-align: center; span.valuet { font-size: large; font-weight: bold; } } span.course_topstat.variety { position: relative; padding: 0; gap: 0; span.valuet { svg { transform: rotate(-90deg); } } span.labelt { position: absolute; top: 1rem; bottom: 45%; left: 1rem; right: 1rem; display: flex; justify-content: center; align-items: end; } span.varietyinner { position: absolute; top: 55%; bottom: 12px; left: 1rem; right: 1rem; display: flex; justify-content: center; align-items: center; font-size: large; font-weight: bold; } } } a.generate_report { display: flex; flex-direction: column; align-items: center; color: var(--text); justify-content: center; padding: .5rem; border: 1px solid var(--border); border-radius: 5px; font-size: 12px; height: 100px; width: 100px; gap: .5rem; } a.generate_report i { font-size: 32px; font-weight: 400; } a.generate_report.active { border-color: var(--primary); } } .course_tab_content { display: flex; flex-direction: column; span.course_analyticss { display: flex; flex-direction: column-reverse; gap: 1rem; .course_stats_wrapper { display: flex; flex-direction: column; .course_stats { padding: .5rem; border: 1px solid var(--primary); border-radius: 5px; .download_stats_wrapper { border: none; padding: 0; } .course_stats_download { justify-content: space-evenly; } .course_stats_download_actions { margin: 0; select { display: none; } a.button.is-primary { margin: .5rem 0px .5rem auto; } } } } .course_submissions_tab_conetnt { display: flex; border-top: 1px solid var(--border); ul { display: flex; width: 300px; flex-direction: column; li.section { border-radius: 5px 5px 0 0; align-items: center; padding: .75rem; color: var(--text); border-bottom: none; border-top: none; display: flex; .lesson_title { align-items: center; font-size: 16px; font-weight: 400; gap: .5rem; margin: 0; display: flex; } } li.section:first-of-type { margin-top: 0; } li.activity, li.assessment { cursor: pointer; border-bottom: 0; align-items: center; display: flex; padding: .5rem; padding-top: 0; .lesson_title { font-family: 'Roboto'; font-size: 14px; gap: .5rem; margin: 0; display: flex; padding: .75rem .75rem; background: var(--highlight); flex: 1; align-items: baseline; border-radius: 5px; border: 1px solid var(--border); } } li.active { font-weight: 600; .lesson_title { border-left: 5px solid var(--primary); border-radius: 0 5px 5px 0; } } } >.course_submissions_wrapper { display: flex; flex-direction: column; flex: 1; border: 1px solid var(--border); border-top: 0; padding: .5rem; background: var(--body); >a.vicon.vicon-arrow-left { color: var(--text); display: inline-block; padding: 1rem; margin-left: -1rem; margin-right: 1rem; } >h3 { display: inline-block; } >.user_submission_wrap { >.question_list{ border: 0; background: var(--highlight); top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; display: flex; justify-content: space-between; margin-left: calc(-325px); margin-right: -25px; margin-bottom: -25px; margin-top: -245px; border-radius: 5px; z-index: 999; position: relative; .submission_header { display: flex; flex-direction: column; margin-bottom: 1rem; >a.vicon.vicon-close { color: var(--text); padding: 1rem; width: fit-content; margin: -1rem -1rem 0 auto; z-index: 2; } .submission_header_info { z-index: 1; display: flex; flex-direction: column; gap: 1rem; margin-top: -2rem; h3 { display: flex; gap: .5rem; align-items: center; font-size: x-large; img { max-width: 52px; border: 1px solid var(--border); border-radius: 50%; } i.vicon { font-weight: bold; } .lvldiv { width: unset; height: unset; margin-left: auto; border-radius: 5px; padding: .5rem 1rem; line-height: normal; min-width: 180px; } } h3:first-of-type { border-bottom: 1px solid var(--border); padding-bottom: 1rem; } } } .submission_data { display: flex; flex-direction: column; flex: 1; overflow-x: hidden; overflow-y: auto; padding: 0 1rem 1rem; margin: 0 -1rem; .overall_analytics { display: flex; flex-direction: column; .prev_results { display: flex; flex-direction: column; gap: 1rem; .quiz_results_boxes_wrap { display: flex; gap: 1rem; flex-wrap: wrap; span.quiz_results_square { display: flex; flex-direction: column; align-items: center; padding: .5rem; border: 1px solid var(--border); border-radius: 5px; justify-content: center; gap: .5rem; width: 122px; height: 122px; label { margin-bottom: 0; } span.res_main { font-size: x-large; font-weight: bold; } span.res_avg { display: grid; justify-content: center; width: 100%; align-items: center; gap: 5px; grid-template-columns: calc(33% - 5px) 34% calc(33% - 5px); span.avgsym { display: flex; justify-content: center; align-items: center; span.daavgsym { height: 21px; width: 21px; text-align: center; line-height: 17px; background: var(--primary); border-radius: 5px; color: var(--highlight); } } span.avgscores { text-align: center; width: 42px; font-weight: 400; } span.avgsym.down { span.daavgsym { background: var(--ssqred); transform: rotate(90deg); } } span.avgsym.up { span.daavgsym { background: var(--ssqgreen); transform: rotate(-90deg); } } } } span.quiz_results_square.proficiency { margin-left: auto; margin-right: 29px; border: 1px solid var(--primary); } } .quiz_results_charts { display: flex; gap: 1rem; flex-direction: row-reverse; padding: 1rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); .prev_conf { flex: 1; h3 { margin-bottom: 1rem; } canvas#quizlinee { min-width: 535px; max-height: 350px; width: 100%; } } .submission_breakdown { h3 { margin-bottom: 1rem; text-align: center; } canvas#quizpie { max-width: 400px; width: 100%; min-width: 400px; max-height: 350px; margin: auto; } } } } } .interactions_list { display: flex; flex-direction: column; max-width: 100%; overflow: hidden; margin-top: 1rem; gap: 1rem; .dt-wrapper { .dt-top { flex-direction: row-reverse; .dt-dropdown { label { margin: 0; font-size: 0; } } .dt-search { width: 100%; } } .dt-container { border: 1px solid var(--border); border-radius: 5px; thead tr th, tbody tr td { text-align: center; } thead tr th:nth-of-type(1), tbody tr td:nth-of-type(1) { text-align: left; text-transform: none; font-weight: 600; span.corr { color: var(--text); } span.incorr { color: var(--ssqred); } } } .dt-bottom { .dt-pagination { ul { flex-direction: row; justify-content: end; font-size: small; align-items: flex-end; line-height: .5; li { margin: 0; padding: .5rem; } li.pager { font-size: x-large; } li.active a { font-weight: bold; } } } } } } } .total_marks { display: none; } .remarks_wrapper { gap: 1rem; padding: 1rem 1rem 0; border-top: 1px solid var(--border); .remarks { gap: 1rem; } textarea { resize: vertical; } a.button.is-primary { margin: 0; margin-top: 0; width: fit-content; margin-left: auto; } } } } >.mycourses_header { z-index: 1; border: none; position: static; background: none; >div { padding: 0; align-items: center; justify-content: space-between; .ssqbp_form_field { max-width: 70%; flex: 1; .searchbox.active { flex-direction: row; border-radius: 25px; padding: 0 .5rem; background: var(--highlight); overflow: hidden; } } >div:not(.ssqbp_form_field){ display: flex; } } } .student_list { gap: .5rem; .student_item { margin-bottom: 0; padding: .5rem; background: var(--highlight); border-radius: 5px; border: 1px solid var(--border); cursor: pointer; img { border: 1px solid var(--border); } span.proficiency { height: 32px; width: 32px; font-size: 12px; display: flex; justify-content: center; align-items: center; border-radius: 50%; margin-left: auto; background: var(--primary); font-weight: 600; } span.proficiency:after { content: "%"; font-size: 10px; } } } } } } } .submissions_list { padding: 0; display: flex; flex-direction: column; flex: 1; } } } } .page.member-type-student.ssqbp-component-community .ssqbp_sidebars .ssqbp_left_sidebar_wrapper, .page.member-type-instructor.ssqbp-component-community .ssqbp_sidebars .ssqbp_left_sidebar_wrapper { display: none !important; } .ssqbp_myprofile .profile_menu .menu_items>div span.menu_item_groups svg#lni_lni-network { display: none; } .course_submissions_wrapper.square>h3 { font-size: 1.5rem; margin-bottom: 1rem; } @media print { .page .ssqbp_myprofile.slick, #printable>.vicon-close { display: none; } #printable { display: block; } } div#printable { background: var(--border); display: flex; flex-direction: column; color: var(--text); padding: .5rem .5rem 1rem; overflow-x: hidden; overflow-y: auto; align-items: center; a.vicon.vicon-save { display: flex; gap: .5rem; align-items: center; padding: .5rem 1rem; background: var(--ssqgreen); color: var(--text); border-radius: 25px; position: fixed; z-index: 999; bottom: 1rem; right: 1rem; letter-spacing: normal; } a.vicon.vicon-close { color: var(--text); width: fit-content; padding: .5rem; margin-left: auto; position: fixed; top: 0; right: .5rem; } span.content { max-width: 210mm; padding: 5mm; background: var(--highlight); box-shadow: 0 .5mm 2mm var(--shadow); margin: 0; display: flex; flex-direction: column; width: 100%; gap: .75rem; .sqheader { display: flex; max-width: 100%; gap: 1rem; align-items: center; color: var(--text); img { height: 100px; object-fit: cover; border-radius: 5px; aspect-ratio: 16 / 9; } input#sqname { height: fit-content; font-size: 32px; flex: 1; font-weight: 700; border: none; } } .squarecont { display: flex; flex-direction: column; color: var(--text); span.section { padding: .5rem 1rem; background: var(--body); border-radius: 5px 5px 0 0; margin-top: .75rem; span.section_head { display: flex; align-items: center; gap: .5rem; input{ font-weight: bold; width: 100%; border: none; background: none; } } .actassdeets { display: none; } } span.section:first-of-type { margin-top: 0; } span.activity, span.assessment { padding: .5rem; background: var(--body); display: flex; flex-direction: column; padding-top: 0; span.activity_head, span.assessment_head { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border: 1px solid var(--border); background: var(--highlight); border-bottom: 0; border-radius: 5px 5px 0 0; input { width: 100%; border: 0; } } span.activity_head .actassdeets{ display: none; } span.assessment_head .actassdeets{ display: flex; gap: .5rem; span { display: flex; text-wrap: nowrap; font-size: 12px; } } .actassints { display: flex; flex-direction: column; background: var(--highlight); border: 1px solid var(--border); border-top: none; .intswrap { display: flex; flex-direction: column; >span { border: 1px solid var(--border); border-radius: 5px; padding: .5rem; margin: 0 .5rem .5rem; display: flex; flex-direction: column; >.vbp_message { background: none; padding: 0; gap: .5rem; font-size: small; align-items: center; margin-bottom: .5rem; } >.vbp_message:before { content: "\e717"; font-family: 'vicon'; } >div { display: flex; gap: .5rem; >img { height: 84px; width: 84px; border-radius: 5px; } .int_content_wrap { display: flex; flex: 1; flex-direction: column; justify-content: center; >textarea { resize: vertical; padding: 5px; } input { width: 100%; border-radius: 25px; text-align: center; font-size: 14px; } p.assist { display: none; } a.vicon.vicon-close, a.vicon.vicon-plus { display: none; } span.multi_opts { display: grid; width: 100%; position: relative; grid-template-columns: calc(50% - .25rem) calc(50% - .25rem); margin-top: .5rem; gap: .5rem; input { width: 100%; } } } } } } } } } } } @page { size: A4; margin: 0; } @media print { html, body { width: 210mm; height: 297mm; } #printable>.vicon-close { display: none; } /* ... the rest of the rules ... */ } .page .ssq_editor_modal .modal-content .modal-body .upload_media label.button.is-primary.new_mail { min-height: unset; min-width: unset; border: 2px solid var(--primary); } .page-template-login_page { min-height: 100vh; overflow: auto; .global, .pusher { min-height: 100vh; overflow: auto; } .auth-layout { min-height: 100vh; max-width: 100%; position: relative; overflow: auto; .float-logo { position: absolute; z-index: 2; inset-block-start: 2rem; inset-inline-start: 2.3rem; p { color: var(--text); opacity: .8; text-align: center; } h1 { margin: 0; img { max-height: 28px; } } } .auth-wrap { display: flex; min-height: 100vh; max-width: 100%; flex-wrap: wrap; min-block-size: 100dvh; justify-content: center; .dispaywrap { padding: 0; background-repeat: no-repeat; background-size: cover; background-position: 0 48%; background-color: var(--body); } .dispaywrapssq { padding: 0; background-color: var(--body); padding-inline: 6.25rem; align-items: center; display: flex; justify-content: center; img { max-width: 613px; margin-bottom: 8px; margin-top: 64px; } } .loginwrap { padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; .login-area { max-width: 500px; color: var(--text); display: block; overflow: hidden; overflow-wrap: break-word; position: relative; line-height: 1.375rem; font-size: .95rem; font-weight: 400; letter-spacing: normal; padding: 24px; text-transform: none; .login-welcome { padding: 24px; h4 { font-size: 1.5rem; line-height: 2rem; color: var(--text); margin-bottom: .5rem; text-align: center; } p { opacity: .8; font-size: .85rem; text-align: center; } } .login-details { padding: 0 24px 24px; form#vbp-login-form { display: flex; flex-direction: column; gap: 24px; .list-group.list-group-sm { margin: 0; display: flex; flex-direction: column; gap: 24px; .list-group-item { padding: 0; border: 0; label { font-size: 13px; font-weight: 400; } .form-control { border-radius: 5px; } } .list-group-item.pass>div { display: flex; justify-content: space-between; align-items: center; } } div#btmloginwrap { font-size: 14px; display: flex; justify-content: space-between; align-items: center; .checkbox>input[type=checkbox]+label { display: flex; align-items: center; } a#forgot_password_trigger { color: var(--primary); font-size: 14px; padding: 0; } } input#sidebar-wp-submit { letter-spacing: normal; box-shadow: var(--shadow) 0px 3px 12px, transparent 0px 0px, transparent 0px 0px; color: var(--highlight) !important; border-radius: 5px; background: linear-gradient(45deg, var(--gradientlight), var(--gradientdark)) !important; border-width: initial !important; border-style: none !important; border-color: initial !important; border-image: initial !important; width: 100%; } } } } } } } } .uneditable- input:focus, button:focus, input[type=number]:focus, input[type=search]:focus, input[type=date]:focus, input[type=time]:focus, input[type=datetime-local]:focus, input[type=month]:focus, input[type=text]:focus, input[type=password]:focus, input[type=datetime]:focus, input[type=week]:focus, input[type=email]:focus, input[type=url]:focus, input[type=tel]:focus, input[type=color]:focus, textarea:focus { border: 2px solid var(--primary); box-shadow: 0 2px 6px var(--gradientlight); } .d-none { display: none !important; } .portal .portal_body .activity_list .activity_item .activity_body .activity_content .activity_attachments { .media_file { a { display: flex; gap: .5rem; align-items: baseline; font-size: 14px; padding: 6px 24px; border: 1px solid var(--primary); margin-top: 12px; width: fit-content; border-radius: 25px; } } } /* Dashboard */ .page.ssqbp-component-dashboard { .dashboard-wrapper { inline-size: 100%; max-inline-size: 1440px; margin-inline: auto; flex-grow: 1; padding-block: 1.5rem; padding-inline: 1.5rem; padding-top: 1rem; .ssqdashboard { .ssqdash_main { .ssq_dash_smll { display: flex; flex-direction: column; gap: 24px; .dash_topdeets { display: flex; flex-direction: column; gap: .5rem; align-items: center; text-align: center; span { font-size: 12px; opacity: .9; } img { border-radius: 50%; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } } .dash_quickactions { margin: 1rem 0 0; display: flex; flex-direction: column; gap: 1rem; align-items: center; text-align: center; .quickactions_btns { display: flex; flex-direction: column; gap: .5rem; width: 100%; .btns_content, .btns_community { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; >span { gap: .5rem; align-items: center; } } .btns_content>span { flex: 1; } .btns_community>span { flex: 1; } } } .langconf_wrap { margin-top: 1rem; display: flex; flex-direction: column; gap: 1.5rem; font-size: 12px; >h5 { text-align: center; font-size: 14px; text-decoration: underline; text-underline-offset: 12px; text-decoration-color: var(--primary); i { color: var(--ssqred); } } .langconfs_wrap { display: flex; flex-wrap: wrap; gap: .5rem; span.langconf { width: calc(50% - .25rem); display: flex; flex-direction: column; line-height: normal; align-items: center; text-align: center; gap: .5rem; margin: auto; } } } .dash_learnpts { display: flex; flex-direction: column; line-height: normal; align-items: center; text-align: center; gap: .5rem; margin: 0 0 24px; span.learnpts { font-size: 28px; font-family: 'Roboto Slab'; span { font-size: 12px; } } .learnpts_name { font-size: 12px; opacity: .9; } } .dash_abouttbl { display: flex; flex-direction: column; gap: 1.5rem; .langgrid { display: flex; flex-direction: column; gap: .5rem; .langspan { display: flex; gap: .5rem; justify-content: space-between; align-items: center; img { border-radius: 50%; height: 29px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } >span { display: flex; flex-direction: column; line-height: normal; font-size: 10px; gap: 1px; flex: 1; >span { opacity: .9; } } .lvldiv { height: unset; width: unset; margin-left: unset; border-radius: 3px; padding: 2px; text-transform: capitalize; font-size: 11px; } } } .abtgrid { display: flex; flex-direction: column; ul { display: flex; flex-wrap: wrap; border-top: 1px solid var(--border); li { padding: .5rem 0; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; width: 50%; font-size: 12px; flex-direction: column; align-items: center; span:first-of-type { font-weight: 500; } span:last-of-type { text-align: center; font-size: 16px; font-family: 'Roboto Slab'; } } } } } .user_friendss_header { display: flex; align-items: baseline; gap: .5rem; justify-content: space-between; h5 { display: flex; gap: .5rem; justify-content: space-between; flex: 1; span { font-size: 12px; margin-left: auto; opacity: .9; } } } .sq_leaderboard_head { display: grid; grid-template-columns: 15% 60% 25%; font-size: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); margin-top: 1rem; span { padding: 0 12px; } } ul.user_friendss_list { display: flex; flex-direction: column; gap: 6px; >li { display: grid; grid-template-columns: 15% 60% 25%; align-items: center; padding: 6px 12px; border-radius: 5px; >span:nth-of-type(2) { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 12px; img { height: 28px; width: 28px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } } >span:nth-of-type(3) { padding-left: 18px; font-family: 'Roboto Slab'; font-size: 14px; } } >li:nth-of-type(1), >li:nth-of-type(2), >li:nth-of-type(3) { padding: 12px; >span:nth-of-type(2) { font-size: 14px; img { height: 36px; width: 36px; } } >span:nth-of-type(3) { padding-left: 18px; font-weight: 500; } } >li:nth-of-type(1) { background: var(--ssqfirst); } >li:nth-of-type(2) { background: var(--ssqsecond); } >li:nth-of-type(3) { background: var(--ssqthird); } } .user_grps_header { display: flex; align-items: baseline; gap: .5rem; justify-content: space-between; h5 { display: flex; gap: .5rem; justify-content: space-between; flex: 1; span { font-size: 12px; margin-left: auto; opacity: .9; } } } ul.user_grps_list { display: flex; flex-wrap: wrap; margin-top: 1rem; gap: .5rem; li { display: flex; align-items: center; border: 1px solid var(--border); cursor: pointer; font-size: 12px; flex-direction: column; width: calc(50% - .25rem); border-radius: 5px; overflow: hidden; aspect-ratio: 1; img { width: 100%; height: 64px; flex: 1; object-fit: cover; } span { padding: 6px; width: 100%; text-align: center; height: fit-content; } } } } .dashform { display: flex; flex-direction: column; gap: 24px; span.saved_submission { display: flex; flex-direction: column; text-align: center; gap: 1rem; padding: 1rem; border-radius: 10px; background: var(--ssqgreen); color: var(--ssqwhite); box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } span.last.submission { display: flex; flex-direction: column; text-align: center; gap: 1rem; padding: 1rem; border-radius: 10px; background: var(--primary); color: var(--ssqwhite); box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; p { font-size: 18px; } span { font-family: 'Roboto Slab'; font-size: 22px; } } .dashform_input { p { font-size: 18px; font-family: 'Roboto Slab'; margin-bottom: 12px; } input { width: 100%; background-color: var(--highlight); border: 1px solid; } .emojilist { display: flex; gap: 12px; justify-content: space-between; >span { display: flex; flex-direction: column; gap: 12px; font-size: 12px; text-align: center; width: 128px; align-items: center; padding: 1rem; border-radius: 10px; border: 1px solid; cursor: pointer; img { width: 64px; } } >span.active { border: 2px solid var(--primary); box-shadow: 0 2px 6px var(--gradientlight); } } } } .dashwelcome { display: flex; flex-direction: column; gap: .5rem; .greeting_wrap { display: flex; gap: 24px; align-items: center; img { width: 100px; border-radius: 50%; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } .greeting { font-size: 22px; font-family: 'Roboto Slab'; span { font-size: 28px; font-weight: 500; } } .dash_actions { display: flex; gap: 24px; font-size: 22px; align-items: center; margin-right: 10px; >div { display: flex; position: relative; align-items: center; a.vicon { color: var(--text); opacity: .8; } a.vicon:hover { opacity: 1; color: var(--primary) !important; } span.count { display: none; position: absolute; bottom: 0; right: -10px; padding: 2px; height: 16px; width: 16px; background: var(--ssqred); color: var(--ssqwhite); border-radius: 50%; flex-direction: column; font-size: 12px; justify-content: center; align-items: center; z-index: 2; } } } } span.quote { font-style: italic; opacity: .9; max-width: 50%; } } .ssq_group_lrg { display: flex; flex-direction: column; gap: 24px; .ssq_dash_feed { .ssqbp_sidebars { flex-direction: column; .dash_ribbon { display: flex; align-items: center; gap: .5rem; padding: 24px; cursor: pointer; width: fit-content; position: absolute; z-index: 9; background: var(--highlight); right: 0; border-radius: 5px; img { width: 24px; height: 24px; object-fit: cover; border-radius: 50%; } } .ssqbp_main { flex-grow: unset; min-height: unset; z-index: unset; position: relative; margin: 0; padding: 0 !important; display: flex; flex-direction: column; gap: 24px; >.portal.activity_post { box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; flex-wrap: unset; .portal_body { display: flex; flex-direction: row; gap: 12px; padding: 24px; img.ssqbp_avatar { height: 48px; border: 1px solid var(--border); width: 48px; object-fit: cover; border-radius: 50%; } } .portal_footer { padding: 0 24px 24px; } .portal_footer a.button{ margin: 0; width: fit-content; } .portal_footer a:not(.button) { margin: 0; } .portal_footer a:not(.button):hover { background: none; } } .portal.group_posts { border-radius: unset; overflow: unset; gap: 24px; background: none; .portal_header { padding: 0; margin: 0; .header_links { flex: 1; margin: 0; .searchbox.active { border-radius: 25px; padding: 0; background-color: var(--highlight); border: none; position: relative; input[type="text"] { padding: 6px 8px 6px 32px; width: 100%; z-index: 2; background: none; border-radius: 25px; border: 1px solid var(--border); box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } input[type="text"]:focus { border: 2px solid var(--primary); box-shadow: 0 2px 6px var(--gradientlight); } .vicon-search { position: absolute; left: 12px; color: var(--text); font-size: 14px; padding: 0; } } } } >.portal_body { padding: 0; >.activity_list.main{ .activity_item.pinned { order: -1; } } >.activity_list { border-left: none; margin-left: inherit; display: flex; flex-direction: column; gap: 24px; .activity_item:before, .activity_item:after { display: none; } .activity_item:hover .activity_avatar_wrap a.vicon-trash{ opacity: 1 !important; } .activity_item.activity_comment { position: relative; gap: .5rem; padding: .5rem 0 0 !important; margin-top: 0; >.outeravatar { cursor: pointer; height: fit-content; img.ssqbp_avatar { height: 42px; border: 1px solid var(--border); width: 42px; object-fit: cover; border-radius: 50%; } } .activity_body { z-index: 3; .activity_content.subcomment { background-color: var(--body); padding: 12px; border-radius: 5px; .activity_avatar_wrap_inn { display: flex; flex-direction: row; gap: 1rem; justify-content: space-between; margin-bottom: 12px; >span { .ssqbp_user_avatar { cursor: pointer; .ssqbp_member { display: flex; align-items: center; gap: .5rem; font-family: 'Roboto Slab'; text-transform: capitalize; font-size: 14px; img.ssqbp_avatar { display: none; } } } .datetime { display: flex; font-size: xx-small; width: fit-content; flex-wrap: wrap; justify-content: center; position: unset; } } a.vicon-trash { height: fit-content; opacity: 0; } } } .activity_actions { border: none !important; margin-top: 0 !important; img.ssqbp_avatar { display: none; } .reactions-container { gap: 0 !important; font-size: 0; .vicon-thumb-up { font-size: initial; } } a.commenting, a.delit { gap: 0 !important; font-size: 0; i { font-size: initial; } } } } } .activity_item.activity_comment:hover .activity_avatar_wrap_inn a.vicon-trash{ opacity: 1 !important; } .activity_item.created_group { display: none; } .activity_item.activity_update { position: relative; padding: 0; background: var(--highlight); border-radius: 5px; flex-direction: column; margin: 0; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; .activity_body { z-index: 3; display: flex; flex-direction: column; justify-content: space-between; padding: 0 !important; border-left: 0 !important; .activity_content { padding: 12px 24px 0; } .reactions-overview { margin: .5rem 0 0; border-top: 1px solid var(--border); padding: .5rem 0 0; font-size: x-small; img { height: 32px; width: 32px; } } .activity_list { margin: 0; display: flex; flex-direction: column; gap: 12px; border-left: none; padding: 0 24px; } .portal.activity_post { gap: .5rem; padding: 1.5rem; a.vicon.vicon-pin-alt { display: none; } .portal_body { padding: 0; display: flex; gap: .5rem; >img { height: 48px; border-radius: 50%; } } .portal_footer { padding: 0; .footer_links { a.button { margin: 0 0 0 .5rem; } a:not(.button) { margin: 0; } a.link { font-size: small !important; } a.link:hover { background: none; border: 0; } a.link:hover:after { display: none !important; } } } } .activity_actions { margin-top: 12px; border-top: 1px solid var(--border); gap: .5rem; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding: 0 24px; img.ssqbp_avatar { height: 32px; width: 32px; object-fit: cover; margin: .5rem 0; border-radius: 50%; border: 1px solid var(--border); } a.commenting, a.delit, .reactions-container { display: flex; gap: .5rem; align-items: center; padding: .5rem; } a.delit { margin-left: auto; } .reactions-container { cursor: pointer; .my-reaction { img { margin: 0; } .vicon-thumb-up { padding: 0; } } } } } >.activity_avatar { margin: 0; line-height: normal; flex-basis: unset; display: flex; flex-direction: column; min-height: 72px; padding: 12px 24px 0; i.vicon.vicon-pin2 { position: absolute; z-index: 2; background: var(--ssqorange); color: var(--ssqwhite); padding: 6px 6px 5px 5px; border-radius: 50%; top: 12px; left: 12px; font-size: 11px; } >a { height: fit-content; } .activity_avatar_wrap { display: flex; flex-direction: row; gap: 1rem; justify-content: space-between; z-index: 2; a.vicon-trash { height: fit-content; opacity: 0; } } .ssqbp_user_avatar { cursor: pointer; .ssqbp_member { display: flex; align-items: center; gap: .5rem; font-family: 'Roboto Slab'; text-transform: capitalize; img.ssqbp_avatar { height: 48px; width: 48px; object-fit: cover; border: 1px solid var(--border); } span { margin-bottom: 0.75rem; } } } .datetime { font-size: x-small; margin-left: calc(48px + .5rem); margin-top: -1.25rem; z-index: 1; } } } } } } } } } } } .ssqdash_footer { .ssq_btm_love { padding: 27px 27px 0; } } } } } .page .ssqbp_myprofile select { border-radius: 5px; line-height: 1.5; height: 38px; border: 1px solid var(--border); font-size: 14px; color: var(--text); background-color: var(--body) !important; } .page .ssqbp_myprofile select:focus { border: 2px solid var(--primary); box-shadow: 0 2px 6px var(--gradientlight); } .sq_searchbox { position: relative; flex: 1; padding: 0 24px; display: flex; align-items: center; border-radius: 25px; input[type="text"] { padding: 6px 8px 6px 32px; width: 100%; z-index: 2; background: none; border-radius: 25px; } input[type="text"]::-webkit-input-placeholder { opacity: .5; } .vicon-search { position: absolute; left: 36px; color: var(--text); font-size: 14px; } } .ssq_btm_love { padding: 24px 0 0; display: flex; align-items: center; gap: 5px; i { color: var(--ssqred); } a { font-family: 'Roboto Slab'; font-weight: 600; color: var(--primary); } a:hover { color: var(--primary) !important; } } .ssqbp-component-content { .ssq_do_content_wrap { display: flex; flex-direction: column; .ssq_do_content_header { display: flex; gap: 1rem; justify-content: space-between; margin: 0 -12px 12px; .vicon-arrow-left { cursor: pointer; padding: 12px; } } .ssq_do_content_body { display: flex; flex-direction: column; .choose_lang { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1rem; background: var(--highlight); border-radius: 5px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; h3 { font-size: 22px; padding: 1rem; text-align: center; } .langs_wrap { display: flex; gap: 1rem; padding-bottom: 1rem; .lang_wrap { display: flex; flex-direction: column; align-items: center; min-width: 84px; font-size: 14px; gap: .5rem; input[type=radio] { display: none; } label.lang_selector { cursor: pointer; } label.lang_selector:hover { border: 2px solid var(--primary); border-radius: 50%; img { height: 56px; width: 56px; } } input:checked+.lang_selector { border: 2px solid var(--primary); border-radius: 50%; img { height: 56px; width: 56px; } } } } .choose_userdeets { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 600px; h3 { padding: 0; } .field_wrapper.field_radio.field_group_level { display: flex; flex-direction: column; .radio_group { display: flex; flex-wrap: wrap; width: 100%; justify-content: space-evenly; position: relative; .radio_wrapper { display: flex; flex-direction: column; width: 16.6%; font-size: 12px; gap: 0.25rem; height: 48px; justify-content: end; >label { display: flex; gap: 1rem; align-items: center; justify-content: center; background: transparent; margin: 0; border-left: 1px dashed; font-size: 10px; } .switch { display: inline-block; max-width: unset; position: absolute; left: 0; top: 0; height: 30px; input { display: none; } label { display: flex; gap: 1rem; align-items: center; justify-content: center; background: transparent; margin: 0; } input:checked+.slider { z-index: -1; border: 1px solid var(--highlight); } .slider:before { display: none; } } } .radio_wrapper:nth-of-type(1) { z-index: 6; label { border-left: none; } .switch { width: 16.66%; input:checked+.slider { background: var(--beginner); } } } .radio_wrapper:nth-of-type(2) { z-index: 5; .switch { width: 33.33%; input:checked+.slider { background: var(--preinermediate); } } } .radio_wrapper:nth-of-type(3) { z-index: 4; .switch { width: 50%; input:checked+.slider { background: var(--inermediate); } } } .radio_wrapper:nth-of-type(4) { z-index: 3; .switch { width: 66.66%; input:checked+.slider { background: var(--upinermediate); } } } .radio_wrapper:nth-of-type(5) { z-index: 2; .switch { width: 83.33%; input:checked+.slider { background: var(--advanced); } } } .radio_wrapper:nth-of-type(6) { z-index: 1; >label { border-right: 1px dashed; } .switch { width: 100%; background: var(--shadow); border-radius: 25px; input:checked+.slider { background: var(--proficient); } } } } } .userdeets_wrapp { display: flex!important; flex-direction: column; } .userdeets_wrapp:last-of-type { flex-direction: row; justify-content: center; gap: 1rem; padding: 1rem; .sqai_age { background: var(--border); border-radius: 25px; padding: 6px 24px; font-size: 14px; cursor: pointer; } .sqai_age:hover { background: var(--primary); } .sqai_age.active { background: var(--primary); } } } .create_content_next.button.is_primary { padding-left: 24px; padding-right: 24px; gap: .5rem; margin: 1rem; i { font-size: 10px; } } } .content_view { display: flex; flex-direction: column; padding: 0; gap: 24px; .course_information { display: flex; position: relative; gap: 12px; img { max-width: 350px; object-fit: cover; aspect-ratio: 16 / 9; border-radius: 5px; } .info_side { display: flex; flex-direction: column; flex: 1; .info_deets { display: flex; flex-direction: column; padding: 12px; gap: 12px; .langdiv { position: absolute; left: 36px; top: 36px; } h2 { font-size: 28px; } span { display: flex; align-items: center; gap: 12px; text-transform: capitalize; } svg { height: 17px; } .content_title { gap: 12px; } .content_meta { font-size: 14px; gap: 24px; } .content_author { font-family: 'Roboto Slab'; font-size: 18px; img { height: 38px; border-radius: 50%; aspect-ratio: 1; margin: 0; } } } } } .course_tab_content { display: flex; flex-direction: column; .ssq_submissions_wrapper { display: flex; gap: 24px; .course_submissions_tab_conetnt { display: flex; flex-direction: column; width: 374px; padding-bottom: 24px; h3 { font-size: 18px; padding: 0 0 16px; border-bottom: 1px solid var(--border); margin: 0 24px; } .lesson_selectors { display: flex; flex-direction: column; div { display: flex; flex-direction: column; gap: 12px; a { align-items: center; display: flex; gap: .5rem; padding: 24px; background: var(--highlight); color: inherit; font-size: 14px !important; border-radius: 5px; margin-left: 24px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } span { font-family: 'Roboto Slab'; align-items: center; display: flex; gap: .5rem; padding: 12px 24px 6px; } a:hover { color: var(--primary) !important; } a.active { border-left: 3px solid var(--primary); background: var(--highlight); border-radius: 0 5px 5px 0; } a.active.link:hover:after { display: none; } } } } .nosubs { display: flex; flex-direction: column; flex: 1; } } } } } } .ssq_do_content_wrap.edit { .ssq_do_content_body { .edit_content_wrap { display: flex; flex-direction: column; height: 100vh; .edit_square_wrapper { display: flex; flex-direction: column; height: 100%; .edit_sqcontent_wrap { position: fixed; height: 100vh; width: 100vw; z-index: 999; display: flex; justify-content: center; background: var(--light); overflow: hidden; .edit_sqcontent_inner { background: var(--highlight); border-radius: 5px; width: 1300px; font-size: 14px; max-height: calc(100vh - 2rem); overflow: hidden; margin-top: 1rem; position: relative; display: flex; flex-direction: column; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; .sqcontent_top { display: flex; justify-content: space-between; padding: 1rem; align-items: center; border-bottom: 1px solid var(--border); z-index: 2; gap: 1rem; position: relative; .sqcontenttop_left { display: flex; flex-direction: column; flex: 1; gap: .5rem; } .sqcontenttop_right { display: flex; flex-direction: column; height: 100%; .content_actions { display: flex; flex-direction: column; flex: 1; gap: .5rem; justify-content: space-between; a.button.is_primary { height: 32px; margin: 4px 0; } a.link { margin: 2.5px 0; } } } .sqcontent_header { display: flex; align-items: center; justify-content: space-between; span.actass_titlewrap { display: flex; align-items: center; gap: .5rem; font-size: 16px; flex: 1; input[type="text"] { background: none; border: none; padding: .5rem; font-family: 'Roboto Slab'; width: calc(100% - 48px); padding-left: 0; max-width: 300px; } input[type="text"]:focus { padding-left: .5rem; border: 2px solid var(--primary); box-shadow: 0 2px 6px var(--gradientlight); } } i.vicon.vicon-close { padding: .5rem; position: absolute; top: 1rem; right: .5rem; cursor: pointer; } } .sqcontent_options { display: flex; gap: 24px; align-items: center; .sqcontent_opt_type { display: flex; font-size: 12px; gap: 6px; align-items: center; .switch { height: 26px; width: 48px; max-width: 48px; label.slider { height: 26px; margin-bottom: 0; background-color: var(--activity); } label.slider:before { height: 22px; width: 22px; } input:checked+.slider { background-color: var(--assessment); } input:checked+.slider:before { transform: translateX(22px); } input:focus+.slider { box-shadow: none; } } } .sqcontent_opt_tags { display: flex; flex-direction: column; position: relative; .opt_tags_head { display: flex; gap: .5rem; >div { gap: .5rem; display: flex; text-transform: capitalize; font-size: 12px; font-weight: 600; } .currtags_wrap>span { padding: 3px 12px; border-radius: 5px; display: flex; align-items: center; position: relative; background: var(--light); i { position: absolute; padding: 6px; right: 0; top: 0; display: none; cursor: pointer; } } .currtags_wrap>span:hover { padding: 3px 24px 3px 12px; i { display: block; } } a.link { display: flex; gap: 4px; align-items: center; } } .opt_tags_add { display: flex; flex-direction: column; position: absolute; top: 1.5rem; left: -1px; background: var(--highlight); z-index: 2; border-radius: 5px; box-shadow: 0 4px 18px var(--shadow), 0 0 transparent, 0 0 transparent; font-size: 14px; min-width: 240px; .tagsadd_header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); h3 { font-size: 16px; display: flex; align-items: center; gap: 3px; padding-left: 12px; } i.vicon.vicon-close { padding: 12px; cursor: pointer; } } .tagsadd_body { padding: 12px; padding-right: 0; .tagsadd_wrap { display: flex; align-items: center; i.vicon.vicon-plus { padding: 12px; cursor: pointer; } input[type="text"] { flex: 1; } } } } } } } .edit_sqcontent_main { display: flex; position: relative; z-index: 1; overflow: hidden; border-radius: 0 0 5px 5px; flex: 1; .actass_content { display: flex; flex-direction: column; overflow: hidden; height: 100%; flex: 1; .actasscontent_header { padding: 1rem; display: flex; gap: .5rem; align-items: center; height: 56px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; z-index: 3; justify-content: space-between; span { display: flex; gap: .5rem; align-items: center; } } .actasscontent_footer { padding: 1rem; display: flex; gap: .5rem; align-items: center; height: 56px; box-shadow: 0 -3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; z-index: 2; justify-content: end; align-items: center; } ul.ints_wrap { display: flex; flex-direction: column; flex: 1; max-height: calc(100% - 112px); overflow-x: hidden; overflow-y: scroll; background: var(--body); padding: .5rem 0; span.noints_info { display: flex; flex-direction: column; flex: 1; padding: .5rem 1rem; } >li { display: flex; position: relative; padding: 12px 24px; flex-direction: column; gap: 1rem; min-width: 450px; max-width: 848px; margin: auto; width: 100%; .lidrag_zone { display: none; height: 1rem; background: var(--highlight); margin: 0 1rem; border-radius: 3px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; opacity: 0; } .intinnerwrapp { flex: 1; display: flex; flex-direction: column; padding: 1rem; background: var(--highlight); border-radius: 5px; justify-content: space-between; cursor: move; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; position: relative; border-left: 2px solid; >div { display: flex; gap: .5rem; cursor: auto; .int_content_wrap { display: flex; flex-direction: column; gap: .5rem; flex: 1; a.link { width: fit-content; margin-left: auto; } [contenteditable=true] { font-size: 14px; padding-left: 0; } [contenteditable=true]:hover { outline: 1px solid var(--border); padding-left: 8px; } [contenteditable=true]:focus { padding-left: 8px; } [contenteditable=true]:hover:focus { outline: 2px solid var(--primary); } .intassist { align-items: center; display: flex; gap: .5rem; flex: 1; padding: 8px; border-radius: 5px; background: var(--ssqyellowbg); color: var(--ssqorange); font-size: 12px; a { margin-left: auto; } } .intassist.warningg:before { content: "\e717"; font-family: 'vicon'; } .intassist.errorr { background: var(--ssqredbg); color: var(--ssqred); } .intassist.errorr:before { content: "\e6c5"; font-family: 'vicon'; } >span:not(.multi_opts) { display: flex; align-items: center; gap: .5rem; >.vicon-close { padding: 1rem; cursor: pointer; opacity: 0; margin: -12px -1rem -12px auto; } select { height: 24px; font-size: 11px; padding: 0 16px 0 8px; border-radius: 5px; border-color: transparent; cursor: pointer; background-position: calc(100% - 4px) 50%; background-size: auto 38%; } select.int { color: var(--intint); background-color: var(--intintbg) !important; } select.sort { color: var(--intsort); background-color: var(--intsortbg) !important; } select.fill { color: var(--intfill); background-color: var(--intfillbg) !important; } select.para { color: var(--intpara); background-color: var(--intparabg) !important; } select.ques { color: var(--intques); background-color: var(--intquesbg) !important; } select.multi { color: var(--intmulti); background-color: var(--intmultibg) !important; } select.pair { color: var(--intpair); background-color: var(--intpairbg) !important; } div { display: flex; align-items: center; font-size: 11px; opacity: .8; } } >span.multi_opts { flex-wrap: wrap; width: 100%; display: flex; gap: .5rem; align-items: flex-start; span.multi_opt { width: calc(50% - 4px); display: flex; align-items: center; position: relative; [contenteditable=true] { flex: 1; padding-right: 2rem; min-width: 240px; padding-left: 8px; outline: 1px solid var(--border); height: 100%; } .alt_answer:focus { outline: 2px solid var(--primary) !important; } .int_answer.correct { outline-color: var(--ssqgreen) !important; } .int_answer.correct:focus { outline: 2px solid var(--ssqgreen) !important; } i.vicon.vicon-close { position: absolute; padding: .5rem; right: 0; opacity: 0; cursor: pointer; } } span.multi_opt:hover { i.vicon.vicon-close { opacity: 0.5; } i.vicon.vicon-close:hover { opacity: 1; } } } } .int_img_wrap { display: flex; flex-direction: column; position: relative; height: 108px; width: 108px; cursor: pointer; .vicon-pencil { position: absolute; top: 6px; right: 6px; background: var(--primary); padding: 11px; border-radius: 5px; opacity: .8; font-size: 16px; display: none; } .vicon-trash { position: absolute; top: 6px; left: 6px; background: var(--primary); padding: 11px; border-radius: 5px; opacity: .8; font-size: 16px; display: none; z-index: 2; } img { height: 108px; width: 108px; border-radius: 5px; box-shadow: 0 3px 6px var(--shadow), 0 0 transparent, 0 0 transparent; object-fit: cover; } i.vicon.vicon-image { font-size: 84px; color: var(--secondary); display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; border: 2px dashed var(--border); border-radius: 5px; } .uploader { opacity: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; border: 0; >label { cursor: pointer; } } } .int_img_wrap:hover { .vicon-trash, .vicon-pencil { display: block; } i.vicon.vicon-image, .vicon-trash { opacity: .5; } .vicon-trash:hover, .vicon-pencil { opacity: 1; } } } } } >li:hover { .intinnerwrapp>div { .int_content_wrap>span { >.vicon-close { opacity: .5; } >.vicon-close:hover { opacity: 1; } } } } >li.int .intinnerwrapp { border-color: var(--intint); } >li.sort .intinnerwrapp { border-color: var(--intsort); } >li.fill .intinnerwrapp { border-color: var(--intfill); } >li.para .intinnerwrapp { border-color: var(--intpara); .int_content { height: 100%; } } >li.ques .intinnerwrapp { border-color: var(--intques); .int_content:before { content: "Q "; opacity: .5; } .int_answer.correct:before { content: "A "; opacity: .5; } .int_answer.correct:hover { outline-color: var(--ssqgreen) !important; } .int_answer.correct:focus { outline-color: var(--ssqgreen) !important; } } >li.multi .intinnerwrapp { border-color: var(--intmulti); } >li.pair .intinnerwrapp { border-color: var(--intpair); } >li.lidrag { margin: -70px 0; transition: 0.01s; transform: translateX(-9999px); } } } .actass_actions.sqai { .actions_header { border-bottom: 1px solid var(--border); } .actions_body { overflow: hidden; background: linear-gradient(45deg, var(--primary), var(--assessment), var(--intques), var(--activity)); background-size: 3000% 300%; animation: gradient 30s ease infinite; position: relative; ul.askdot { flex: 1; display: flex; flex-direction: column; gap: .5rem; padding: 1rem .5rem 92px 1rem; background: transparent; overflow-x: hidden; overflow-y: scroll; position: relative; width: 420px; >li { display: flex; gap: 1rem; max-width: calc(100% - 48px); font-size: 12px; margin-left: auto; .messae_wrap { display: flex; flex-direction: column; gap: .5rem; .sqai_option { border-left: 2px solid; display: flex; flex-direction: column; padding: .5rem; border-radius: 5px; background: var(--highlight); position: relative; line-height: 1.8; font-size: 12px; box-shadow: 0 3px 6px var(--shadow), 0 0 transparent, 0 0 transparent; cursor: pointer; >span.content { margin: 0; } >span.correct { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--ssqgreen); } } .sqai_option.int { border-color: var(--intint); } .sqai_option.sort { border-color: var(--intsort); } .sqai_option.fill { border-color: var(--intfill); } .sqai_option.para { border-color: var(--intpara); } .sqai_option.ques { border-color: var(--intques); } .sqai_option.multi { border-color: var(--intmulti); } .sqai_option.pair { border-color: var(--intpair); } .sqai_option:hover { opacity: .8; } >span { display: flex; padding: .5rem; border-radius: 5px; background: var(--highlight); width: fit-content; position: relative; line-height: 1.8; font-size: 12px; box-shadow: 0 3px 6px var(--shadow), 0 0 transparent, 0 0 transparent; min-height: 38px; min-width: 38px; } >span.sqaiaddcontent { box-shadow: none; padding: 0; min-height: unset; width: 100%; text-align: center; justify-content: end; background: none; padding-right: .5rem; } >span.sqaiaddcontent:before { display: none; } } >img { height: 38px; box-shadow: 0 3px 6px var(--shadow), 0 0 transparent, 0 0 transparent; } } >li.assistant { margin-left: 0; .messae_wrap>span:before { content: ''; position: absolute; left: -8px; top: 19px; width: 0; height: 0; border: 8px solid transparent; border-right-color: var(--highlight); border-left: 0; margin-top: -8px; } } >li.user { flex-direction: row-reverse; >img { border-radius: 50%; } .messae_wrap>span:before { content: ''; position: absolute; right: 0; top: 19px; width: 0; height: 0; border: 8px solid transparent; border-left-color: var(--highlight); border-right: 0; margin-top: -8px; margin-right: -8px; z-index: 1; } } } #dot_think { display: none; position: absolute; bottom: 63px; left: 1rem; } .message_area { display: flex; flex-direction: column; position: absolute; padding: .5rem 1rem 1rem; width: 100%; bottom: 0; z-index: 2; input#messagesqai { padding-right: 40px; } .vicon-control-play { position: absolute; font-size: 18px; padding: 11px; right: 1rem; cursor: pointer; } .vicon-control-play:hover { color: var(--primary); } } } } .actass_actions.files { .actions_body { overflow-x: hidden; overflow-y: auto; background: var(--body); } } .actass_actions.sqai, .actass_actions.files, .actass_actions.text, .actass_actions.search { gap: 0; padding: 0; .button.is_primary.splitline { gap: .5rem; width: fit-content; margin: 0 0 1.5rem; } .actions_header { display: flex; align-items: center; min-height: 56px; .sq_searchbox { padding: 0; .vicon-search { left: 12px; } } h3{ flex: 1; display: flex; align-items: center; gap: .5rem; font-size: 16px; i.vicon.vicon-comments { color: var(--primary); font-weight: 600; } } i.vicon.vicon-close { padding: 1rem; cursor: pointer; } } .actions_body { display: flex; height: calc(100% - 56px); flex-direction: column; .actass_results { display: flex; flex-direction: column; background: var(--body); padding: 1rem; border: 1px solid var(--border); border-radius: 5px; gap: 1rem; flex: 1; overflow: auto; position: relative; select { max-width: unset; option { text-transform: capitalize; } } .actass_results_info { font-size: 12px; } .actass_results_wrap { display: flex; flex-direction: column; gap: .5rem; .actassresults { display: flex; flex-direction: column; .actassresults_wrap { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0 0 8px; .actassresult { display: flex; cursor: pointer; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; background: var(--highlight); padding: 12px; border-radius: 5px; gap: 3px; align-items: center; font-size: 9px; border-left: 2px solid; flex-direction: column; text-align: center; flex: 1; >span { opacity: .8; display: flex; align-items: center; gap: 5px; } >p { font-size: 11px; display: flex; align-items: center; gap: 5px; } } } } span.actass_result { display: flex; cursor: pointer; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; background: var(--highlight); padding: 12px; border-radius: 5px; gap: 12px; align-items: start; font-size: 12px; border-left: 2px solid; i.vicon.vicon-image { font-size: 72px; color: var(--secondary); display: flex; margin: -4px; } img { height: 64px; width: 64px; border-radius: 5px; box-shadow: 0 3px 6px var(--shadow), 0 0 transparent, 0 0 transparent; } .intinfo { display: flex; flex-direction: column; gap: 3px; flex: 1; span.topp { display: flex; gap: 6px; justify-content: space-between; span.intid { font-size: 10px; opacity: .8; } span.titletag { padding: 3px 8px; line-height: 1; border-radius: 2px; } span.titletag.int { color: var(--intint); background-color: var(--intintbg) !important; } span.titletag.sort { color: var(--intsort); background-color: var(--intsortbg) !important; } span.titletag.fill { color: var(--intfill); background-color: var(--intfillbg) !important; } span.titletag.para { color: var(--intpara); background-color: var(--intparabg) !important; } span.titletag.ques { color: var(--intques); background-color: var(--intquesbg) !important; } span.titletag.multi { color: var(--intmulti); background-color: var(--intmultibg) !important; } span.titletag.pair { color: var(--intpair); background-color: var(--intpairbg) !important; } } } } span.actass_result.int { border-color: var(--intint); } span.actass_result.sort { border-color: var(--intsort); } span.actass_result.fill { border-color: var(--intfill); } span.actass_result.para { border-color: var(--intpara); } span.actass_result.ques { border-color: var(--intques); } span.actass_result.multi { border-color: var(--intmulti); } span.actass_result.pair { border-color: var(--intpair); } } } .converted_txt { background: var(--highlight); display: flex; flex-direction: column; height: 100%; .convert_message { border-bottom: 0; } textarea#ctxt_res { resize: none; border-radius: 0px; flex: 1; overflow-x: hidden; overflow-y: auto; padding: 1rem; } .CodeMirror { height: 100%; background: var(--body); border: 1px solid var(--border); color: var(--text); } .CodeMirror.CodeMirror-focused { border: 2px solid var(--primary); } .CodeMirror-gutters { background-color: var(--highlight); } .convert_actions { display: flex; justify-content: end; padding: 1rem; background: var(--highlight); a.button.is_primary { margin: 0; text-transform: capitalize; } } } .loader { background: var(--highlight); } .convert_message { display: flex; flex-direction: column; padding: 0 0 1rem; font-size: 12px; gap: 4px; background: var(--highlight); h3 { font-size: 14px; display: flex; gap: .5rem; align-items: center; text-transform: capitalize; } p { margin-top: 0; opacity: .8; } } .convert_area { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; flex: 1; border: 1px solid var(--border); span.accepted_filelist { display: flex; flex-direction: column; font-size: 12px; gap: .5rem; >p { text-align: center; } span.accepted_wrap { display: flex; gap: 1rem; flex-wrap: wrap; span.accepted_type { font-size: 10px; width: calc(50% - .5rem); text-align: center; i { font-size: 22px; } p { font-size: 12px; } } } } .uploader:hover { background: var(--highlight); } .uploader label { cursor: pointer; } } } } .actass_sidebar { min-width: 270px; display: flex; flex-direction: column; position: relative; height: 100%; >h3 { display: flex; gap: .5rem; justify-content: space-between; cursor: pointer; font-size: 16px; padding: 1rem; height: 56px; align-items: center; z-index: 2; background: var(--highlight); } .actass_sidebar_inner { display: flex; flex: 1; box-shadow: 0 0px 12px var(--shadow), 0 0 transparent, 0 0 transparent; z-index: 1; max-height: 100%; .content_opts_menu { flex: 1; padding: 0 1rem 1rem; z-index: 2; } .actass_actions { z-index: 1; height: 100%; overflow: hidden; display: flex; flex-direction: column; max-width: 420px; min-width: 280px; width: 420px; } } .actass_sidebar_footer { padding: 1rem; height: 56px; background: var(--highlight); z-index: 3; } .content_settings { display: flex; flex-direction: column; gap: .5rem; >h3 { display: flex; gap: .5rem; justify-content: space-between; cursor: pointer; font-size: 16px; padding: 1rem 0; align-items: center; } .content_settings_wrap { display: flex; flex-direction: column; gap: 1rem; input[type=checkbox], label { margin: 0; } p { font-size: 12px; opacity: .8; } >div { display: flex; flex-direction: column; >span { display: flex; gap: .5rem; align-items: center; } } } } .content_actions { display: flex; flex-direction: column-reverse; gap: 1rem; align-items: center; margin-top: auto; a.button.is_primary { margin: 0; flex: 1; width: 100%; } } .content_opts { display: flex; flex-direction: column; gap: .5rem; h3 { padding-bottom: .5rem; } .ints_search { display: flex; flex-direction: column; position: relative; gap: 1rem; overflow: hidden; .ints_search_wrap { display: flex; align-items: center; .sq_searchbox { padding: 0; .vicon-search { left: 12px; font-size: 12px; } } } } >a { display: flex; align-items: center; gap: 6px; padding: 12px; color: var(--text); border-radius: 5px; border: 1px solid var(--border); span.subtex { font-family: 'Roboto Slab'; margin-left: auto; font-size: 12px; } } >a:hover, >a.active { border-color: var(--primary); color: var(--primary) !important; box-shadow: 0 2px 6px var(--gradientlight); } a.ask_sqai>i { color: var(--primary); font-weight: 600; } } } .actass_sidebar.widee { max-width: 480px; min-width: 350px; } .actass_sidebar.smll { .content_opts_menu { padding-top: 1rem; .content_opts { >a { position: relative; width: fit-content; padding: 12px; span { display: none; } span.subtex { display: none; } } >a:hover { span { position: absolute; display: flex; left: calc(100% + 12px); text-wrap-mode: nowrap; background: var(--primary); box-shadow: 0 2px 8px var(--shadow), 0 0 transparent, 0 0 transparent; border-radius: 5px; color: var(--highlight); padding: 4px 8px; } span.subtex { display: none; } } } } } } } } .edit_square_inner { display: flex; width: 100%; flex: 1; overflow: hidden; .edit_square_sidebar { z-index: 2; display: flex; flex-direction: column; position: static; overflow-x: hidden; font-size: 14px; max-width: 324px; width: 324px; background: var(--highlight); box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; .editsquare_header { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; position: sticky; top: 0; z-index: 9; background: var(--highlight); a.button.is_primary { margin: 0; } } h3.component_title { display: flex; justify-content: space-between; align-items: center; font-size: 14px; cursor: pointer; i { font-weight: bolder; } } .edit_square_stats { margin-top: auto; padding: 1rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; opacity: .8; justify-content: space-between; span { display: flex; gap: .5rem; align-items: baseline; } } .square_sidebar_groups { display: flex; flex-direction: column; gap: 12px; padding: 0 1.5rem 1.5rem; .sidebar_groups_wrap { display: flex; flex-wrap: wrap; margin: 0 -6px; >div { padding: 6px; display: flex; aspect-ratio: 1; >div { position: relative; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--border); border-radius: 5px; opacity: .5; cursor: pointer; text-align: center; font-family: 'Roboto Slab'; font-size: 12px; gap: 6px; height: 100%; >span:first-of-type { display: flex; flex-direction: column; gap: 6px; height: 100%; } img { border-radius: 5px; width: 100%; height: unset; aspect-ratio: 16 / 9; object-fit: cover; flex: 1; } .lvldiv { font-size: 10px; margin: 0; width: fit-content; padding: 3px 6px; border-radius: 5px; position: absolute; top: -6px; left: -6px; } } >div:hover{ opacity: 1; } } >div.selected { order: -1; >div { border: 1px solid var(--primary); opacity: 1; } } a.ssq_square_managegroups { font-size: 14px; color: var(--primary); width: fit-content; padding: 1rem; } a.ssq_square_managegroups:hover { color: var(--primary); } .square_groups { display: flex; flex-direction: column; .vbp_message { margin: 0rem 1rem 1rem; width: calc(100% - 2rem); } .square_group { flex-direction: row; max-height: 64px; gap: .25rem; align-items: center; cursor: pointer; padding: .75rem 1rem; border-top: 1px solid var(--border); width: 100%; position: relative; display: flex; img { height: 32px; width: 32px; border-radius: 50%; } .group_details { display: flex; gap: .25rem; justify-content: space-between; width: 100%; strong { font-size: small; text-wrap: nowrap; } span { display: flex; gap: .25rem; font-size: small; align-items: center; } } } } } } .square_sidebar_groups.hiding { .sidebar_groups_wrap>div:not(.selected) { display: none; } } .square_sidebarinner { display: flex; flex-direction: column; gap: 18px; padding: 0 1.5rem; padding-bottom: 18px; .square_sidebar_head { display: flex; flex-direction: column; position: relative; gap: 12px; .square_img_wrap { display: flex; flex-direction: column; position: relative; img { max-width: 300px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; } .uploader { max-width: 300px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; } i { cursor: pointer; height: 38px; width: 38px; display: flex; justify-content: center; align-items: center; background: var(--primary); border-radius: 5px; position: absolute; top: 6px; right: 6px; opacity: 0; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } } .square_img_wrap:hover { i { opacity: .5; } i:hover { opacity: 1; } } .squarename_change, .squarestatus_change, .squaredesc_change { display: flex; flex-direction: column; gap: 6px; >p { font-family: 'Roboto Slab'; font-size: 14px; display: flex; align-items: center; justify-content: space-between; span { font-family: 'Roboto'; font-size: 12px; } } textarea { resize: vertical; max-height: 100px; min-height: 40px; } } } .square_sidebar_settings.hiding { .sidebar_settings_wrap { display: none; } } .square_sidebar_settings { display: flex; flex-direction: column; gap: .5rem; label { margin: 0; font-weight: 600; } input { margin: 0; } p { font-size: small; } .sidebar_settings_wrap { display: flex; flex-direction: column; gap: 12px; padding: 6px 6px 0; border-radius: 5px; input#sq_date { margin-left: 1.5rem; margin-top: .5rem; } >div { display: flex; flex-direction: column; >span { display: flex; align-items: center; gap: .5rem; >label { cursor: pointer; } } } div#dripdeets_settings { display: flex; gap: .5rem; margin-left: 1.5rem; margin-bottom: .5rem; >div { display: flex; flex-direction: column; } #dripdur_settings span { display: flex; gap: .5rem; width: 100%; margin-top: .5rem; input { width: calc(60% - .25rem); } } #dripstart_settings { gap: .5rem; margin-top: .25rem; span { display: flex; align-items: center; gap: .5rem; font-size: small; font-weight: 400; label { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } } } } } } } } .edit_square_main { z-index: 1; display: flex; flex-direction: column; flex: 1; gap: 1rem; justify-content: space-between; max-width: calc(100% - 324px); overflow: hidden; .vbp_message.new_square { margin: 0 !important; } .square_content { display: flex; flex-direction: column; max-height: 100%; max-width: 100%; overflow: hidden; flex: 1; li.lidrag { margin: -71px 0; transition: 0.01s; transform: translateX(-9999px); } div.sectiondrag { margin: 0 -160px; transition: 0.01s; transform: translateX(-9999px); } .content_wrap { display: flex; flex-direction: column; max-height: 100%; max-width: 100%; overflow: hidden; flex: 1; .sq_sections { font-size: 14px; display: flex; gap: 0; padding: 0 12px 12px; height: 100%; overflow: auto; max-width: 100%; position: relative; .sq_sectiondrag { z-index: 1; position: fixed; top: 0; bottom: 8px; left: 0; right: 10px; cursor: grab; display: flex; } #sections_wrap { display: contents; } #section_add { display: flex; height: fit-content; order: 2; min-width: 320px; padding: 1rem; z-index: 2; .section_start { color: var(--text); display: flex; align-items: center; height: 38px; gap: 6px; cursor: pointer; text-wrap-mode: nowrap; i { font-weight: 600; font-size: 12px; padding-top: 2px; } } .section_start:hover { color: var(--primary) !important; } } .section { padding: 1rem; cursor: all-scroll; position: relative; height: fit-content; z-index: 2; display: flex; .secdrag_zone { display: none; width: .5rem; background: var(--border); margin-top: 66px; margin-bottom: 44px; border-radius: 5px; opacity: 0; } .secdrag_zone.secdrag_left { margin-left: -1rem; margin-right: 1rem; } .secdrag_zone.secdrag_right { margin-left: 1rem; margin-right: -1rem; } .section_inner { display: flex; flex-direction: column; min-width: 300px; position: relative; .section_head { display: inline-flex; align-items: baseline; width: 100%; margin: 0 0 4px; min-height: 38px; .vicon-trash { color: var(--text); opacity: 0; display: none; padding: .5rem; justify-content: center; align-items: center; width: 38px; height: 38px; background: var(--primary); border-radius: 5px; } input { width: -webkit-fill-available; font-family: 'Roboto Slab'; border: none; height: 38px; font-size: 15px; } input:focus { background: var(--highlight) !important; border: 2px solid var(--primary); position: absolute; left: -2px; right: -2px; z-index: 99; } } .section_head:hover { .vicon-trash { opacity: .5; display: flex; } .vicon-trash:hover { opacity: 1; } } >ul.dashed { border: 2px dashed var(--border); margin: 2px; height: 100px; } >ul { overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; min-height: 50px; margin: 0 -12px; cursor: auto; z-index: 3; position: relative; >li { display: flex; position: relative; padding: .5rem 9px; flex-direction: column; gap: 1rem; .lidrag_zone { display: none; height: 1rem; background: var(--highlight); margin: 0 1rem; border-radius: 3px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; opacity: 0; } >div { flex: 1; display: flex; flex-direction: column; padding: 1rem; background: var(--highlight); border-radius: 5px; justify-content: space-between; cursor: move; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; .tiletags { display: flex; gap: 3px; text-transform: capitalize; font-size: 10px; font-weight: 600; padding-bottom: 8px; .tiletag { padding: 3px 8px; border-radius: 5px; } .tiletag.activity { background: var(--activity); color: var(--assessment); } .tiletag.assessment { color: var(--activity); background: var(--assessment); } .tileid { display: flex; font-weight: 400; align-items: center; font-size: 10px; opacity: .8; margin-left: auto; margin-right: 36px; p { font-size: 10px; } } } .tilehead { display: flex; flex-direction: column; .tiletitle { display: flex; gap: 6px; align-items: center; font-family: 'Roboto Slab'; p { font-size: 16px; } } .tiletags { display: flex; gap: 3px; text-transform: capitalize; font-size: 10px; font-weight: 600; padding-bottom: 8px; .tiletag { padding: 3px 8px; border-radius: 5px; background: var(--border); } } } .tilebooter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 8px; font-size: 12px; opacity: .8; justify-content: space-between; margin-right: 36px; span { display: flex; align-items: center; gap: 4px; >span { font-size: 10px; } } } } .vicon-pencil { display: none; padding: 12px; opacity: 0; position: absolute; bottom: 1rem; right: 1rem; color: var(--text); } .vicon-close { display: none; padding: 12px; opacity: 0; position: absolute; top: 1rem; right: 1rem; color: var(--text); } } >li:hover{ .vicon-pencil, .vicon-close { display: block; opacity: .5; } .vicon-pencil:hover { opacity: 1; background: var(--primary); border-radius: 5px; } .vicon-close:hover { opacity: 1; color: var(--primary); } } } .section_footer { display: flex; flex-direction: column; .actass_search { display: flex; flex-direction: column; padding-top: 6px; .actass_search_wrap { display: flex; align-items: center; .sq_searchbox { padding: 0; .vicon.vicon-search { left: 12px; font-size: 12px; } input[type="text"] { background-color: var(--highlight); z-index: auto; } } i.vicon.vicon-close { padding: 12px; cursor: pointer; } } .actass_results { display: flex; flex-direction: column; select { max-width: unset; option { text-transform: capitalize; } } .actass_results_info { padding: 6px 12px 8px; font-size: 12px; } .actass_results_wrap { display: flex; flex-direction: column; gap: .5rem; span.actass_result { display: flex; flex-direction: row-reverse; cursor: pointer; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; background: var(--highlight); padding: 12px; border-radius: 5px; gap: 6px; >div { display: flex; flex-direction: column; gap: 3px; justify-content: space-around; } >div:last-of-type { flex: 1; } div:first-of-type span:not(.titleid) { display: flex; align-items: center; gap: 6px; font-weight: 600; opacity: .8; justify-content: end; } p { display: flex; gap: 6px; align-items: center; font-family: 'Roboto Slab'; } .titleid { display: flex; gap: 6px; align-items: center; font-size: 10px; opacity: .8; height: 21px; justify-content: end; } .titletag { padding: 3px 8px; border-radius: 5px; color: var(--assessment); background: var(--assessmentbg); text-transform: capitalize; font-size: 10px; font-weight: 600; width: fit-content; } .titletag.activity { background: var(--activitybg); color: var(--activity); } } } } } .section_opts { display: flex; justify-content: space-between; opacity: .5; span.sectionadditems { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 9px 12px; i { font-size: 12px; font-weight: 600; } } span.sectionadditems:hover { color: var(--primary); } } #content_details { cursor: default; padding: 1rem; background: var(--highlight); border-radius: 5px; display: flex; flex-direction: column; gap: 1rem; position: absolute; width: calc(100% - .5rem); z-index: 2; box-shadow: var(--shadow) 0px 5px 15px; a { color: var(--text); } >span { display: flex; justify-content: space-between; gap: 1rem; a { margin: 0; width: 100%; } } .vicon-close { width: fit-content; padding: .5rem; margin: -.5rem; margin-left: auto; } } #content_search { cursor: default; padding: 1rem; background: var(--highlight); border-radius: 5px; display: flex; flex-direction: column; position: absolute; width: calc(100% - .5rem); z-index: 2; box-shadow: var(--shadow) 0px 5px 15px; >span { display: flex; justify-content: space-between; a { color: var(--text); } .actass { display: flex; border-radius: 11rem; overflow: hidden; a { color: var(--text); padding: .5rem; background: var(--border); display: flex; width: 100px; justify-content: center; } a.active { color: var(--text); background: var(--primary); } } } .searchbox.active { border-radius: 25px; flex-direction: row; padding: 0 .5rem; margin: 1rem 0 0; input#search_actass:focus { background-color: var(--highlight)!important; } } #search_results { display: none; flex-direction: column; margin-top: 1rem; max-height: 400px; overflow-y: auto; >li { display: flex; position: relative; padding: .5rem 1rem; background: var(--highlight); border-radius: 5px; justify-content: space-between; align-items: center; gap: .5rem; cursor: pointer; border: 1px solid var(--border); margin-bottom: .25rem; >div { display: flex; align-items: center; gap: .5rem; width: 100%; i { font-size: large; } p { width: 100%; display: flex; justify-content: center; font-size: 14px; font-family: 'Roboto'; font-weight: 600; } } .vicon-pencil { padding: .5rem; } .vicon-pencil:before { content: "\e61a"; } } } } } } } .section:before { font-family: vicon; font-size: 14px; position: absolute; left: 1rem; top: 1rem; height: 38px; display: flex; align-items: center; } .section:hover:before { content: "\e656"; } .section:hover { .section_inner { .section_head { width: calc(100% - 14px); margin-left: 14px; } .section_footer { span.section_opts { opacity: 1; } } } } } } } .square_actions { display: flex; gap: 1rem; justify-content: space-between; a { margin: 0; width: fit-content; display: flex; align-items: center; color: var(--highlight); gap: .5rem; height: fit-content; } a:not(.button) { padding: .5rem; opacity: .8; } a:not(.button):hover { opacity: 1; color: var(--primary); } span { display: flex; gap: 1rem; } } } } } } } } .ssq_do_content_wrap.edit.loading { background-color: var(--highlight); .ssq_do_content_body { background-color: var(--highlight); .edit_content_wrap { pointer-events: none; opacity: 0; } } .ssq_do_content_body:before { background-image: url(/wp-content/themes/hhsppp/assets/images/Sq-Logo-Light-250.png); position: fixed; background-size: 64px 64px; display: inline-block; background-repeat: no-repeat; width: 100%; height: 100%; content: ""; top: 0; bottom: 0; left: 0; right: 0; background-position: center; -webkit-animation: rotate-center 1s ease-out infinite both; animation: rotate-center 1s ease-out infinite both; } } } .sq_profile_wrap { display: flex; flex-direction: column; .sq_profile_header { display: flex; gap: 1rem; align-items: center; a.button.is_primary.saveuserdeets { margin-left: auto; } span.button.is_primary { margin: 0; } .sq_profile_user_menu { display: flex; gap: 1rem; align-items: center; margin-left: auto; } >span.button.is_primary { opacity: .5; pointer-events: none; } .vicon.vicon-arrow-left { padding: 6px; cursor: pointer; } } .sq_profile_body { display: flex; flex-direction: column; >div { padding: 12px; .sq_profile_user_card { display: flex; flex-direction: column; position: relative; span.usr_img { display: flex; flex-direction: column; max-width: 300px; margin: auto; padding: 12px; span.user_status { font-size: 14px; height: 24px; display: flex; width: fit-content; padding: 0 10px; border-radius: 5px; margin: 0 auto; } span.user_status.inactive { color: var(--ssqred); background: var(--ssqredbg); } span.user_status.active { color: var(--intfill); background: var(--intfillbg); } span.user_status.archived { color: var(--intint); background: var(--intintbg); } .area { border-radius: 5px; overflow: hidden; background: var(--body); cursor: pointer; position: relative; img { object-fit: cover; height: 300px; width: 300px; } form { display: none; } .vicon { position: absolute; top: 6px; right: 6px; background: var(--primary); padding: 11px; border-radius: 5px; opacity: .8; cursor: pointer; font-size: 16px; } .vicon:hover { opacity: 1; } label.upload_file { font-size: 0.9rem; justify-content: center; display: flex; gap: 1rem; align-items: center; min-width: auto; height: 300px; width: 300px; margin: 0; cursor: pointer; } } } .sq_user_card_top { display: flex; flex-direction: column; >span:not(.usr_img) { font-size: 14px; font-weight: 400; color: var(--text); display: flex; flex-direction: column; padding: 0 0 12px; label { font-size: 14px; font-weight: 400; color: var(--text); b { font-weight: 400; color: var(--ssqred); } } input[type=text] { height: 38px; color: var(--text); } select { max-width: unset; } } h5 { color: var(--text); padding: 0 0 12px; border-bottom: 1px solid var(--border); margin: 0 0 12px; } } } .sq_profile_user_card.editing { flex-direction: row; align-items: center; margin: 0 -12px; gap: 24px; span.usr_img { margin: 0; padding: 0; } .sq_user_card_top { flex: 1; gap: 12px; .sq_profile_user_menu { display: flex; gap: 12px; } label>b { color: var(--ssqred); } .sq_edit_userwrap { display: grid; grid-template-columns: calc(50% - 6px) calc(50% - 6px); gap: 12px; >span { display: flex; flex-direction: column; select { max-width: unset; } } } >span { label { font-weight: 600; } textarea#changeabout { resize: vertical; } } } } } .editprofile_btm { display: flex; gap: 24px; margin: 0 -12px; .sq_profile_user_languages { display: flex; flex-direction: column; width: 50%; h5 { color: var(--text); padding: 0 0 12px; border-bottom: 1px solid var(--border); margin: 0 0 18px; } .sq_languages_wrap { display: flex; gap: 24px; flex-wrap: wrap; >div { display: flex; gap: 6px; width: calc(50% - 12px); } } } .sq_profile_user_groups { width: 50%; h5 { color: var(--text); padding: 0 0 12px; border-bottom: 1px solid var(--border); margin: 0 0 18px; } .sq_user_groups_wrap { display: grid; gap: 1rem; overflow-x: hidden; overflow-y: auto; margin-bottom: 1rem; grid-template-columns: calc(50% - .5rem) calc(50% - .5rem); .group_filter_wrap { display: flex; position: relative; border-radius: 5px; overflow: hidden; height: 64px; border: 1px solid var(--border); padding: 6px; gap: 6px; align-items: center; >span { display: flex; align-items: center; gap: 6px; img { height: 48px; border-radius: 5px; } } a.remgroup { margin-left: auto; margin-right: 6px; display: flex; align-items: center; background: var(--ssqred); border-radius: 50%; width: 22px; height: 22px; justify-content: center; color: var(--ssqwhite) !important; } } } .sq_user_addgroups_wrap { display: flex; flex-direction: column; .select2-container { width: 100% !important; } span.select2-selection.select2-selection--multiple { min-height: 38px; border-radius: 5px; border-color: var(--border); } .select2-container .select2-search--inline { float: unset; width: 100%; display: flex; justify-content: right; } } } } } .sq_profile_body.editprofile { flex-direction: row; gap: 24px; .sq_profile_user_card.editing { flex-direction: column; span.usr_img { gap: 1.5rem; .sq_profile_user_menu { display: flex; gap: 1rem; justify-content: center; } } } .editprofile_btm { flex: 1; .sq_profile_user_groups { width: 100%; .sq_languages_wrap { display: grid; grid-template-columns: calc(50% - .5rem) calc(50% - .5rem); gap: 1rem; margin-bottom: 1rem; >div { display: flex; gap: 1rem; align-items: center; select { max-width: unset; flex: 1; } } } } } } } .sq_profile_wrap.view { .sq_profile_header { padding: 0; span.vicon.vicon-arrow-left { padding: .5rem; } } .sq_profile_body { gap: 36px; >div { display: flex; flex-direction: column; .sq_profile_user_card { flex-direction: row; .sq_user_card_top { flex: 1; gap: 48px; width: 60%; margin-right: 44px; border-right: 1px solid var(--border); .sq_card_top { display: flex; align-items: center; gap: 1rem; .user_quickedit { display: flex; flex: 1; height: 100%; padding: 12px 0; opacity: .5; span.tableaction.vicon.vicon-pencil { display: flex; height: fit-content; padding: .5rem; cursor: pointer; margin-top: -3px; background: var(--shadow); border-radius: 50%; } } .user_quickedit:hover { opacity: 1; } span.user_status { display: flex; width: fit-content; padding: 0 10px; border-radius: 5px; margin: 0 auto; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } span.user_status.inactive { color: var(--ssqred); background: var(--ssqredbg); } span.user_status.active { color: var(--intfill); background: var(--intfillbg); } span.user_status.archived { color: var(--intint); background: var(--intintbg); } img { max-width: 100px; border-radius: 5px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } .sq_card_info { display: flex; flex-direction: column; .sq_card_deets_wrap { display: flex; gap: .5rem; font-size: 11px; text-transform: capitalize; opacity: .8; } h2 { font-size: 32px; line-height: 1; padding-top: 2px; } span.useremail { font-size: 12px; opacity: .8; padding-bottom: 4px; } span.usraboutme { display: flex; flex-direction: column; line-height: normal; } } } .sq_card_bottom { display: flex; flex-direction: column; .user_quickstats { display: flex; gap: 1rem; justify-content: space-between; .user_quickstat { display: flex; flex: 1; gap: 1rem; align-items: center; .icon { height: 52px; width: 52px; border-radius: 5px; font-size: 22px; background-color: var(--ssqpurplebg); color: var(--ssqpurple); } .statinfo { display: flex; flex-direction: column; justify-content: space-between; h4 { color: var(--ssqpurple); font-size: 22px; line-height: normal; >span { font-size: 14px; } } >span { opacity: .8; font-size: 14px; margin-left: 2px; } } } .user_quickstat:nth-of-type(2) { .icon { background-color: var(--ssqbluebg); color: var(--ssqblue); } .statinfo h4 { color: var(--ssqblue); } } .user_quickstat:nth-of-type(3) { .icon { background-color: var(--ssqorangebg); color: var(--ssqorange); } .statinfo h4 { color: var(--ssqorange); } } } } } .sq_user_cardside { display: flex; width: 40%; gap: 24px; justify-content: space-between; .ai_leveling { display: flex; flex-direction: column; gap: .5rem; gap: 12px; h4 { font-size: 18px; font-weight: 500; } >span { font-size: 16px; >span:first-of-type { color: var(--ssqgreen); font-weight: 500; } >span:last-of-type { color: var(--ssqred); font-weight: 500; } } } .languages { margin-top: auto; height: 52px; display: flex; flex-direction: column; justify-content: center; .usr_langs { gap: .5rem; .user_lang { align-items: end; .lvldiv:first-of-type { margin-right: -1rem; margin-left: 0; display: none; } .langdiv:before { height: 38px; width: 38px; } .lvldiv:last-of-type { margin-right: 0; margin-left: -1rem; } } } } .curr_conf { display: flex; position: relative; max-height: 200px; margin-left: auto; .canvas_wrap { display: flex; flex-direction: column; flex: 1; width: 200px; height: 200px; canvas#quizpie_pie { height: 100%; width: 100%; } } >span { font-family: 'Roboto Slab'; font-size: 18px; font-weight: 600; display: flex; flex-direction: column; text-align: center; position: absolute; height: fit-content; width: fit-content; justify-self: anchor-center; align-self: anchor-center; p { font-size: 12px; width: 99%; line-height: normal; opacity: .8; } } } } .sq_user_cardside.mini { .curr_conf { max-height: 100px; .canvas_wrap { width: 100px; height: 100px; } >span { font-family: 'Roboto Slab'; font-size: 14px; font-weight: 600; display: flex; flex-direction: column; text-align: center; position: absolute; height: fit-content; width: fit-content; justify-self: anchor-center; align-self: anchor-center; p { font-size: 11px; width: 99%; line-height: normal; opacity: .8; } } } } } .sq_profile_user_card.small { .sq_user_card_top { width: unset; flex: unset; margin-right: 24px; padding-right: 24px; .sq_card_bottom { .square_card_below { display: flex; gap: 1rem; .lang_descs { display: flex; flex-direction: column; justify-content: space-between; p:first-of-type { opacity: .8; } p { font-size: 11px; margin: 0; line-height: normal; } span.lvldiv { width: unset; border-radius: 5px; margin-left: unset; font-size: 12px; text-transform: capitalize; padding: 6px 12px; } } .langdiv { display: flex; align-items: center; } .langdiv:before { width: 52px; height: 52px; } } } } .sq_user_cardside { flex-direction: column; flex: 1; .user_contentdeetsv { display: flex; flex-direction: column; gap: 48px; .square_card { display: flex; gap: 1rem; align-items: center; img { max-width: 100px; border-radius: 5px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } .square_card_infowrap { display: flex; flex-direction: column; div { display: flex; gap: .5rem; font-size: 11px; text-transform: capitalize; opacity: .8; } h6 { font-size: 32px; line-height: 1; padding-top: 2px; font-weight: 500; } >span { font-size: 12px; opacity: .8; padding-bottom: 4px; } } .confident_wrap_top { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 1rem; margin-left: auto; .confidence_score { justify-content: center; font-family: 'Roboto Slab'; font-size: 26px; font-weight: 600; height: 72px; width: 72px; color: var(--highlight); background: var(--ssqgreen); padding: .5rem; display: flex; align-items: center; border-radius: 50%; .confidence_score>span { font-size: 14px; margin-left: 3px; } >span { opacity: .8; font-size: 14px; text-align: center; line-height: normal; } } } } .user_quickstats { display: flex; gap: 1rem; justify-content: space-between; .user_quickstat { display: flex; flex: 1; gap: 1rem; align-items: center; .icon { height: 52px; width: 52px; border-radius: 5px; font-size: 22px; background-color: var(--ssqpurplebg); color: var(--ssqpurple); } .statinfo { display: flex; flex-direction: column; justify-content: space-between; h4 { color: var(--ssqpurple); font-size: 22px; line-height: normal; >span { font-size: 14px; } } >span { opacity: .8; font-size: 14px; margin-left: 2px; } } } .user_quickstat:nth-of-type(2) { .icon { background-color: var(--ssqbluebg); color: var(--ssqblue); } .statinfo h4 { color: var(--ssqblue); } } .user_quickstat:nth-of-type(3) { .icon { background-color: var(--ssqlightbluebg); color: var(--ssqlightblue); } .statinfo h4 { color: var(--ssqlightblue); } } } } } } .content_top_quickstats { display: flex; flex-direction: column; .sq_content_stats { gap: 24px; display: flex; .sq_content_stat { flex: 1; padding: 24px; display: flex; justify-content: space-between; .insight-wrap { gap: .25rem; display: flex; flex-direction: column; p { font-size: 12px; opacity: .8; } h2 { font-size: 24px; } } .insight-icon { width: 42px; height: 42px; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 22px; background-color: var(--ssqpurplebg); color: var(--ssqpurple); aspect-ratio: 1; } } .sq_content_stat:nth-of-type(2) { .insight-icon { background-color: var(--ssqbluebg); color: var(--ssqblue); } } .sq_content_stat:nth-of-type(3) { .insight-icon { background-color: var(--ssqlightbluebg); color: var(--ssqlightblue); } } .sq_content_stat:nth-of-type(4) { .insight-icon { background-color: var(--ssqgreenbg); color: var(--ssqgreen); } } } } } .learner_report { padding: 0; flex-direction: row; .groupsquares_main { display: flex; flex-direction: column; flex: 1; padding: 24px; gap: 24px; .gsquares_main_list { display: flex; flex-direction: column; .squares_titlee { display: flex; flex-direction: column; padding: 0 0 24px; h3 { font-size: 16px; font-weight: 600; } p { margin: 0; opacity: .8; } } } } .gsquares_main_stats { display: flex; flex-direction: column; .pastten { display: flex; flex-direction: column; gap: 24px; .pastten_title { display: flex; gap: 22px; justify-content: space-between; align-items: center; h5 { font-weight: 600; font-size: 28px; } p { opacity: .8; } } .main_stats_wrap { display: flex; align-items: center; .main_stats_side_wrap{ display: flex; flex-direction: column; gap: 12px; margin-left: 24px; } .stats_rank, .stats_completion { display: flex; flex-direction: column; gap: 24px; height: 100%; >h5 { font-weight: 600; text-align: center; } .ranking-wrap, .completion-wrap { width: 125px; height: 125px; padding: 8px; border-radius: 5px; border: 1px solid var(--ssqorange); box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; h5 { font-weight: 600; font-size: 36px; display: flex; position: relative; span { font-size: 16px; line-height: 2.5; position: absolute; left: -16px; } } p { text-align: center; line-height: normal; font-size: 12px; >span { font-weight: 600; font-family: 'Roboto Slab'; color: var(--intpara); } } } .completion-wrap { border-color: var(--ssqblue); h5 { font-weight: 600; font-size: 42px; display: flex; position: relative; span { font-size: 16px; line-height: 2.5; position: absolute; left: unset; right: -16px; } } } } .stats_submissions { display: flex; flex-direction: column; gap: 24px; flex: 1; h5 { font-weight: 600; } .canvas-wrap { max-height: 220px; height: 220px; canvas#pastten { max-width: 100%; } } } } } } .sq_groupsquares_filters { display: flex; flex-direction: column; min-width: 340px; padding: 24px; border-right: 1px solid var(--border); gap: 12px; .groupsquares_filters_title { display: flex; flex-direction: column; margin-bottom: 12px; h3 { font-size: 16px; font-weight: 600; } p { margin: 0; opacity: .8; } } .group_filter_wrap, .group_x_wrap { display: flex; gap: .5rem; height: fit-content; padding: 6px; background: var(--highlight); border: 1px solid var(--border); border-radius: 5px; align-items: center; cursor: pointer; span { display: flex; position: relative; gap: .5rem; img { max-height: 48px; border-radius: 5px; object-fit: cover; max-width: 48px; aspect-ratio: 1; } span.langdiv { align-items: anchor-center; } span.langdiv:before { height: 22px; width: 22px; } } p { font-family: 'Roboto Slab'; font-size: 16px; font-weight: 600; } } .group_filter_wrap:hover { border: 1px solid var(--primary); } .group_filter_wrap.selected { box-shadow: 0 0px 9px var(--gradientlight); border: 1px solid var(--primary); z-index: 2; } .group_x_wrap { cursor: auto !important; opacity: .5; order: 1; p>span { font-family: 'Roboto'; font-size: 12px; font-weight: 400; } } } .course_blocks { grid-gap: 12px; margin: 0; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); .course_block_wrap { aspect-ratio: 1 / 1; display: flex; flex-direction: column; overflow: hidden; .course_block { display: flex; overflow: hidden; overflow-wrap: break-word; position: relative; background: var(--highlight); border: 1px solid var(--border); border-radius: 5px; aspect-ratio: 1; background-repeat: no-repeat; background-size: cover; background-position: center; flex-direction: column; justify-content: space-between; cursor: auto; padding: 8px; gap: 8px; .course_featured_image { padding: 0; width: 100%; max-height: calc(100% - 72px); cursor: pointer; img { height: 100%; width: 100%; object-fit: cover; object-position: center; border-radius: 5px; } } .course_block_content_wrapper { padding: 0; border: none; width: 100%; flex: unset; background: var(--highlight); display: flex; flex-direction: column; h3 { font-size: 16px; margin: 0 0 8px; } .course_confident { display: flex; gap: 8px; text-align: left; font-size: 12px; color: var(--text); align-items: center; margin: 0; .confident_wrap { display: flex; gap: 5px; justify-content: space-between; align-items: center; position: absolute; top: 1rem; left: 1rem; flex-direction: row-reverse; .confidence_score { background: var(--ssqgreen); color: var(--highlight); font-family: 'Roboto Slab'; font-size: 12px; border-radius: 50%; height: 36px; width: 36px; display: flex; justify-content: center; align-items: center; font-weight: 500; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; >span { font-size: 10px; font-weight: 400; } } >span { font-family: 'Roboto Slab'; letter-spacing: .5px; font-weight: 600; } } } .view_stats_sq { margin-top: 0; display: flex; align-items: center; gap: 8px; padding: 6px 12px; justify-content: center; border-radius: 5px; background-color: var(--ssqgreenbg); color: var(--ssqgreen); cursor: pointer; } .view_stats_sq.faded { background-color: var(--ssqdarkbluebg); color: var(--ssqdarkblue); cursor: auto !important; } .view_stats_sq:not(faded):hover { background: var(--ssqgreenhov); } } } .course_block.faded { opacity: .75; pointer-events: none; } } } .course_submissions_tab_conetnt { >h3 { padding: 24px; border-bottom: 1px solid var(--border); } } table { width: 100%; tbody>tr>th, thead>tr>th, tfoot>tr>th { height: 56px; -webkit-user-select: none; user-select: none; text-align: start; } tbody>tr>td.content_details img, tbody>tr>td.author_details img { height: 38px; object-fit: cover; border-radius: 50%; margin-right: 12px; } tbody>tr>td, tbody>tr>th, thead>tr>td, thead>tr>th, tfoot>tr>td, tfoot>tr>th { padding: 0 8px; align-content: center; } thead>tr>th { border-bottom: 1px solid var(--border); align-content: center; >span { display: flex; width: 100%; gap: 8px; justify-content: space-between; align-items: center; >p { font-family: 'Roboto Slab'; } >div { display: flex; margin-right: -16px; flex-direction: column; font-size: 8px; span.vicon.vicon-angle-up, span.vicon.vicon-angle-down { border: none; opacity: 0; cursor: pointer; padding: 8px } span.vicon.vicon-angle-up.active, span.vicon.vicon-angle-down.active { opacity: 1; background: none; color: var(--text); } } } } thead>tr>th:hover { >span { >div { span.vicon.vicon-angle-up, span.vicon.vicon-angle-down { opacity: .5; } span.vicon.vicon-angle-up:hover, span.vicon.vicon-angle-down:hover { opacity: 1; } span.vicon.vicon-angle-up.active, span.vicon.vicon-angle-down.active { opacity: 1; } } } } th { color: var(--text); } tbody>tr { border-bottom: 1px solid var(--border); } tbody>tr>td:first-of-type, thead>tr>th:first-of-type { padding-left: 24px; } tbody>tr>td:last-of-type, thead>tr>th:last-of-type { padding-right: 24px; } tbody>tr>td { height: 56px; font-size: 12px; } tbody>tr>td { a { color: var(--text); font-size: 15px; font-family: 'Roboto Slab'; display: flex; align-items: center; gap: 8px; } a:hover { color: var(--primary) !important; } } tbody>tr>td { span.tableaction { display: inline-flex; height: 38px; width: 38px; justify-content: center; align-items: center; font-size: 18px; border-radius: 50%; cursor: pointer; } span.tableaction:hover { background: var(--body); } span.tableaction.faded { opacity: .25; pointer-events: none; } } } .actass_square_wrap { display: flex; flex-direction: column; .actass_square_header { display: flex; padding: 12px; i { padding: 12px; cursor: pointer; } } .actass_information { display: flex; flex-direction: column; .titlewrapp { display: flex; gap: 24px; justify-content: space-between; padding: 24px; align-items: center; >h3 { display: flex; align-items: center; gap: .75rem; font-size: 28px; } } .info_deetswrap { display: flex; padding: 0 24px; width: 100%; overflow: hidden; flex-direction: column; > h4 { font-size: 16px; font-weight: 600; } .submission-pastten{ max-height: 220px; height: 220px; canvas#pastten { max-width: 100%; } } .info_charts { display: flex; flex-direction: column; width: 100%; .submission_breakdown { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; h4 { font-size: 16px; font-weight: 600; } .canvas_wrap { position: relative; display: flex; flex-direction: column; max-height: 48px; margin: 0 0 2px -8px; canvas#quizpie { max-width: 100%; } } } } .info_deets { display: flex; gap: 1rem; margin: 24px 0; .sq_quiztop_stat { display: flex; flex-direction: column; width: 25%; .insight-wrap { display: flex; gap: .5rem; align-items: center; .insight-icon { width: 42px; height: 42px; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 22px; color: var(--secondary); background: var(--intquesbg); aspect-ratio: 1; } h2 { font-size: 18px; } h4 { font-size: 12px; } } } .sq_quiztop_stat:nth-of-type(1) { .insight-wrap { .insight-icon { background-color: var(--ssqbluebg); color: var(--ssqblue); } .insight-info h2 { color: var(--ssqblue); } } } .sq_quiztop_stat:nth-of-type(2) { .insight-wrap { .insight-icon { background-color: var(--ssqyellowbg); color: var(--ssqyellow); } .insight-info h2 { color: var(--ssqyellow); } } } .sq_quiztop_stat:nth-of-type(3) { .insight-wrap { .insight-icon { background-color: var(--ssqpurplebg); color: var(--ssqpurple); } .insight-info h2 { color: var(--ssqpurple); } } } .sq_quiztop_stat:nth-of-type(4) { .insight-wrap { .insight-icon { background-color: var(--ssqlightbluebg); color: var(--ssqlightblue); } .insight-info h2 { color: var(--ssqlightblue); } } } .sq_quiztop_stat:nth-of-type(5) { .insight-wrap { .insight-icon { background-color: var(--ssqgreenbg); color: var(--ssqgreen); } .insight-info h2 { color: var(--ssqgreen); } } } } } } } .actass_table_wrap.usersubs { padding-bottom: 24px; h3 { padding: 12px 24px 0; font-size: 16px; } .manage_table_inner { display: flex; flex-direction: column; .sq_searchbox { padding: 24px; border-bottom: 1px solid var(--border); } table#submissions_table { width: 100%; .info_wrapall { display: flex; gap: 6px; img { border-radius: 50%; } } .datewrapp { display: flex; flex-direction: column; } td:nth-of-type(5), td:nth-of-type(6), td:nth-of-type(7), td:nth-of-type(8) { font-family: 'Roboto Slab'; text-align: center; font-size: 14px; font-weight: 500; } th:nth-of-type(4) span, th:nth-of-type(5) span, th:nth-of-type(6) span, th:nth-of-type(7) span, th:nth-of-type(8) span { justify-content: center; } .lvldiv { width: fit-content; border-radius: 5px; font-size: 12px; text-transform: capitalize; padding: 6px 12px; margin-left: unset; margin: auto; } tbody>tr:nth-of-type(1) { background-color: var(--ssqorangebg); td:nth-of-type(2) { color: var(--ssqorange); } td:nth-of-type(5) { color: var(--ssqyellow); } td:nth-of-type(6) { color: var(--ssqpurple); } td:nth-of-type(7) { color: var(--ssqgreen); } td:nth-of-type(8) { color: var(--ssqlightblue); } } } } } .course_submissions_tab_conetnt { display: flex; flex-direction: column; flex: 1; >h3 { padding: 24px; border-bottom: 1px solid var(--border); } } .submissions_list { width: 100%; display: flex; flex-direction: column; .user_submission_wrap { display: flex; flex-direction: column; .submission_header_info { display: flex; flex-direction: column; padding: 0 24px 12px; border-bottom: 1px solid var(--border); .actasstitle { display: flex; gap: 24px; justify-content: space-between; >span { display: flex; align-items: center; gap: 12px; font-size: 18px; font-family: 'Roboto Slab'; } .userwrap { display: flex; font-family: 'Roboto Slab'; text-transform: capitalize; gap: 12px; align-items: center; img { height: 32px; border-radius: 50%; } } } } .submission_data { display: flex; flex-direction: column; .overall_analytics { display: flex; padding: 0 24px; gap: 12px; flex-direction: column; >h3 { font-size: 16px; } .results_side { display: flex; flex-direction: column; .submissionsdeets { display: flex; gap: 1rem; } .quiz_results_boxes_wrap { display: flex; flex-direction: column; gap: 12px; .quiz_results_square { display: flex; flex-direction: column; align-items: center; padding: .5rem; border: 1px solid var(--border); border-radius: 5px; justify-content: space-between; gap: .5rem; width: 122px; height: 122px; label { margin-bottom: 0; } span.res_main { font-size: x-large; font-weight: bold; } span.res_avg { display: flex; justify-content: space-between; width: 100%; align-items: center; gap: 6px; font-size: 12px; span.avgtxt { text-align: end; } span.avgsym { font-size: 12px; } span.avgsym { display: flex; justify-content: center; align-items: center; span.daavgsym { height: 21px; width: 21px; text-align: center; line-height: 17px; background: var(--primary); border-radius: 5px; color: var(--highlight); } } span.avgsym.up { span.daavgsym { background: var(--ssqgreen); transform: rotate(-90deg); } } span.avgsym.down { span.daavgsym { background: var(--ssqred); transform: rotate(90deg); } } span { font-weight: bold; } span.avgscores { text-align: center; width: 42px; font-weight: 400; } } } } } .results_charts { padding: 0; display: flex; flex: 1; gap: 24px; justify-content: space-between; .submission_stats { display: flex; flex-direction: column; max-width: calc(100% - 324px); width: 100%; .canvas_wrap { height: 250px; max-height: 250px; } } .submission_breakdown { display: flex; flex-direction: column; width: 300px; max-width: 300px; .canvas_wrap { display: flex; width: 300px; height: 250px; max-width: 300px; max-height: 250px; } } } } .prev_conf { display: flex; flex-direction: column; padding: 24px; gap: 12px; border-bottom: 1px solid var(--border); h3 { padding: 0 0 12px; } canvas#quizlinee { max-height: 200px; } } .interactions_list { display: flex; flex-direction: column; padding-bottom: 24px; h3 { padding: 12px 24px 0; font-size: 16px; } table>tbody>tr>td:nth-of-type(2), table>tbody>tr>td:nth-of-type(4) { text-transform: none; .incorr { color: var(--ssqred); } .none { color: var(--border); } } } } .remarks_wrapper { display: flex; flex-direction: column; padding: 0 24px 24px; .remarks { display: flex; flex-direction: column; gap: 12px; textarea { resize: vertical; } .button.is-primary { margin: 0; } } } } } } } .sq_profile_body.contentt { .learner_report { .lesson_selectors { display: flex; flex-direction: column; min-width: 340px; padding: 24px; border-right: 1px solid var(--border); gap: 12px; >h3 { display: flex; flex-direction: column; margin-bottom: 12px; font-size: 16px; p { margin: 0; opacity: .8; } } .user_submissions { display: flex; gap: .5rem; height: fit-content; padding: .75rem; background: var(--highlight); border: 1px solid var(--border); border-radius: 5px; align-items: center; cursor: pointer; >span{ display: flex; gap: .5rem; align-items: center; } >span:first-of-type { font-family: 'Roboto Slab'; } span.attempts { height: 28px; width: 28px; justify-content: center; margin-left: auto; border-radius: 50%; background-color: var(--ssqbluebg); color: var(--ssqblue); } } .user_submissions.faded { cursor: auto; opacity: .5; order: 1; pointer-events: none; flex-direction: column; line-height: normal; align-items: start; gap: 3px; padding: 7px .75rem; span.noattempts { font-size: 11px; } } .user_submissions:not(faded):hover, .user_submissions.selected { border: 1px solid var(--primary); } } } } } .sq_profile_wrap.squares { .sq_profile_body { .sq_content_wrap { .sq_contentview { .nosubs { display: none; } .submissions_list { box-shadow: none; width: 100%; padding: 0; .actass_square_wrap { display: flex; flex-direction: column; .actass_square_header { display: flex; padding: 12px; i { padding: 12px; cursor: pointer; } } .actass_information { display: flex; flex-direction: column; .titlewrapp { display: flex; gap: 24px; justify-content: space-between; padding: 0 24px 24px; h3 { display: flex; align-items: center; gap: 6px; font-size: 18px; } } .info_deetswrap { display: flex; padding: 24px; width: 100%; overflow: hidden; .info_charts { display: flex; flex-direction: column; width: calc(100% - 139px); .submission_breakdown { display: flex; flex-direction: column; .canvas_wrap { position: relative; display: flex; flex-direction: column; flex: 1; canvas#quizpie { height: calc(350px - 46px) !important; max-width: 100%; width: 100% !important; } .bottom_conf { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; display: flex; flex-direction: column-reverse; text-transform: capitalize; font-size: 18px; width: fit-content; margin: auto; span { font-size: 38px; font-weight: 700; color: var(--ssqgreen); } } } } } } } } } } } } } .sq_profile_wrap.squares, .sq_profile_wrap.activities, .sq_profile_wrap.assessments { .sq_profile_header { justify-content: space-between; padding-bottom: 0; .button_warning { display: flex; flex-wrap: wrap; padding: 5px 12px; border-radius: 5px; border-color: var(--ssqred); align-content: center; color: var(--highlight); background: var(--ssqred); box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; height: 38px; cursor: pointer; } .button_warning:hover { background: var(--ssqred); } } .sq_profile_body { .sq_content_top { padding: 12px; display: flex; .sq_profile_content_card { display: flex; flex-direction: column; gap: 48px; flex: 1; margin-right: 44px; border-right: 1px solid var(--border); padding-right: 44px; width: 60%; .sq_user_card_top { display: flex; align-items: center; gap: 1rem; >img { max-width: 100px; border-radius: 5px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } .sq_content_deets { .info_deets { display: flex; gap: .5rem; font-size: 11px; text-transform: capitalize; opacity: .8; } h2 { font-size: 32px; line-height: 1; padding-top: 2px; } >span { font-size: 12px; opacity: .8; padding-bottom: 4px; } } .content_quickedit { display: flex; flex: 1; height: 100%; padding: 12px 0; opacity: .5; >span { display: flex; height: fit-content; padding: .5rem; cursor: pointer; margin-top: -3px; background: var(--shadow); border-radius: 50%; } } .content_quickedit:hover { opacity: 1; } .curr_conf { display: flex; position: relative; max-height: 100px; margin-left: auto; .canvas_wrap { display: flex; flex-direction: column; flex: 1; width: 100px; height: 100px; canvas#quizpie_pie { height: 100%; width: 100%; } } >span { font-family: 'Roboto Slab'; font-size: 14px; font-weight: 600; display: flex; flex-direction: column; text-align: center; position: absolute; height: fit-content; width: fit-content; justify-self: anchor-center; align-self: anchor-center; p { font-size: 11px; width: 99%; line-height: normal; opacity: .8; } } } } .sq_content_stats { justify-content: space-between; } } .sq_squaregroups_card { display: flex; flex-direction: column; gap: 12px; width: 40%; h5 { font-size: 18px; font-weight: 600; } .sq_group_list { display: grid; gap: 1rem; grid-template-columns: calc(50% - .5rem) calc(50% - .5rem); .sq_group_single { display: flex; width: fit-content; .lvldiv { width: fit-content; border-radius: 5px; margin-left: 0; text-transform: capitalize; padding: 6px 12px; } >div { font-family: 'Roboto Slab'; font-weight: 600; font-size: 16px; display: flex; gap: 1rem; height: fit-content; align-items: center; width: fit-content; img { width: 64px; height: 64px; border-radius: 5px; object-fit: cover; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } } } } } } .sq_content_bdy { padding: 0px; .sq_content_wrap { position: relative; .sq_contentview { display: flex; .lesson_selectors { display: flex; flex-direction: column; min-width: 340px; padding: 24px; border-right: 1px solid var(--border); gap: 12px; >h3 { display: flex; flex-direction: column; margin-bottom: 12px; font-size: 16px; p { margin: 0; opacity: .8; } } .user_submissions { display: flex; gap: .5rem; height: fit-content; padding: .75rem; background: var(--highlight); border: 1px solid var(--border); border-radius: 5px; align-items: center; cursor: pointer; >span{ display: flex; gap: .5rem; align-items: center; } >span:first-of-type { font-family: 'Roboto Slab'; } span.attempts { height: 28px; width: 28px; justify-content: center; margin-left: auto; border-radius: 50%; background-color: var(--ssqbluebg); color: var(--ssqblue); } } .user_submissions.faded { cursor: auto; opacity: .5; order: 1; pointer-events: none; flex-direction: column; line-height: normal; align-items: start; gap: 3px; padding: 7px .75rem; span.noattempts { font-size: 11px; } } .user_submissions:not(faded):hover, .user_submissions.selected { border: 1px solid var(--primary); } } .course_submissions_tab_conetnt { display: flex; flex-direction: column; flex: 1; >h3 { padding: 24px; border-bottom: 1px solid var(--border); } .submissions_list { width: 100%; display: flex; flex-direction: column; .user_submission_wrap { display: flex; flex-direction: column; .submission_header_info { display: flex; flex-direction: column; padding: 0 24px 12px; border-bottom: 1px solid var(--border); .actasstitle { display: flex; gap: 24px; justify-content: space-between; >span { display: flex; align-items: center; gap: 12px; font-size: 18px; font-family: 'Roboto Slab'; } .userwrap { display: flex; font-family: 'Roboto Slab'; text-transform: capitalize; gap: 12px; align-items: center; img { height: 32px; border-radius: 50%; } } } } .submission_data { display: flex; flex-direction: column; .overall_analytics { display: flex; padding: 0 24px; gap: 12px; flex-direction: column; >h3 { font-size: 16px; } .results_side { display: flex; align-items: center; padding: 0 0 24px; gap: 1rem; .usercard { display: flex; align-items: center; gap: 1rem; line-height: normal; img { height: 48px; border-radius: 50%; } p { font-size: 12px; opacity: .8; } h5 { font-size: 18px; font-weight: 600; } } .submissionsdeets { display: flex; gap: 1rem; } .quiz_results_boxes_wrap { display: flex; flex-direction: column; gap: 12px; .quiz_results_square { display: flex; flex-direction: column; align-items: center; padding: .5rem; border: 1px solid var(--border); border-radius: 5px; justify-content: space-between; gap: .5rem; width: 122px; height: 122px; label { margin-bottom: 0; } span.res_main { font-size: x-large; font-weight: bold; } span.res_avg { display: flex; justify-content: space-between; width: 100%; align-items: center; gap: 6px; font-size: 12px; span.avgtxt { text-align: end; } span.avgsym { font-size: 12px; } span.avgsym { display: flex; justify-content: center; align-items: center; span.daavgsym { height: 21px; width: 21px; text-align: center; line-height: 17px; background: var(--primary); border-radius: 5px; color: var(--highlight); } } span.avgsym.up { span.daavgsym { background: var(--ssqgreen); transform: rotate(-90deg); } } span.avgsym.down { span.daavgsym { background: var(--ssqred); transform: rotate(90deg); } } span { font-weight: bold; } span.avgscores { text-align: center; width: 42px; font-weight: 400; } } } } } .results_charts { padding: 0; display: flex; flex: 1; gap: 24px; justify-content: space-between; .submission_stats { display: flex; flex-direction: column; max-width: calc(100% - 324px); width: 100%; .canvas_wrap { height: 250px; max-height: 250px; } } .submission_breakdown { display: flex; flex-direction: column; width: 300px; max-width: 300px; .canvas_wrap { display: flex; width: 300px; height: 250px; max-width: 300px; max-height: 250px; } } } } .prev_conf { display: flex; flex-direction: column; padding: 24px; gap: 12px; border-bottom: 1px solid var(--border); h3 { padding: 0 0 12px; } canvas#quizlinee { max-height: 200px; } } .interactions_list { display: flex; flex-direction: column; padding-bottom: 24px; h3 { padding: 12px 24px 0; font-size: 16px; } table>tbody>tr>td:nth-of-type(2), table>tbody>tr>td:nth-of-type(4) { text-transform: none; .incorr { color: var(--ssqred); } .none { color: var(--border); } } } } .remarks_wrapper { display: flex; flex-direction: column; padding: 0 24px 24px; .remarks { display: flex; flex-direction: column; gap: 12px; textarea { resize: vertical; } .button.is-primary { margin: 0; } } } } .actass_square_wrap { display: flex; flex-direction: column; .actass_square_header { display: flex; padding: 12px; i { padding: 12px; cursor: pointer; } } .actass_information { display: flex; flex-direction: column; .titlewrapp { display: flex; gap: 24px; justify-content: space-between; padding: 24px; align-items: center; >h3 { display: flex; align-items: center; gap: .75rem; font-size: 28px; } } .info_deetswrap { display: flex; padding: 0 24px; width: 100%; overflow: hidden; flex-direction: column; > h4 { font-size: 16px; font-weight: 600; } .submission-pastten{ max-height: 220px; height: 220px; canvas#pastten { max-width: 100%; } } .info_charts { display: flex; flex-direction: column; width: 100%; .submission_breakdown { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; h4 { font-size: 16px; font-weight: 600; } .canvas_wrap { position: relative; display: flex; flex-direction: column; max-height: 48px; margin: 0 0 2px -8px; canvas#quizpie { max-width: 100%; } } } } .info_deets { display: flex; gap: 1rem; margin: 24px 0; .sq_quiztop_stat { display: flex; flex-direction: column; width: 25%; .insight-wrap { display: flex; gap: .5rem; align-items: center; .insight-icon { width: 42px; height: 42px; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 22px; color: var(--secondary); background: var(--intquesbg); aspect-ratio: 1; } h2 { font-size: 18px; } h4 { font-size: 12px; } } } .sq_quiztop_stat:nth-of-type(1) { .insight-wrap { .insight-icon { background-color: var(--ssqbluebg); color: var(--ssqblue); } .insight-info h2 { color: var(--ssqblue); } } } .sq_quiztop_stat:nth-of-type(2) { .insight-wrap { .insight-icon { background-color: var(--ssqyellowbg); color: var(--ssqyellow); } .insight-info h2 { color: var(--ssqyellow); } } } .sq_quiztop_stat:nth-of-type(3) { .insight-wrap { .insight-icon { background-color: var(--ssqpurplebg); color: var(--ssqpurple); } .insight-info h2 { color: var(--ssqpurple); } } } .sq_quiztop_stat:nth-of-type(4) { .insight-wrap { .insight-icon { background-color: var(--ssqlightbluebg); color: var(--ssqlightblue); } .insight-info h2 { color: var(--ssqlightblue); } } } .sq_quiztop_stat:nth-of-type(5) { .insight-wrap { .insight-icon { background-color: var(--ssqgreenbg); color: var(--ssqgreen); } .insight-info h2 { color: var(--ssqgreen); } } } } } } } .actass_table_wrap.usersubs { padding-bottom: 24px; h3 { padding: 12px 24px 0; font-size: 16px; } .manage_table_inner { display: flex; flex-direction: column; .sq_searchbox { padding: 24px; border-bottom: 1px solid var(--border); } table#submissions_table { width: 100%; .info_wrapall { display: flex; gap: 6px; img { border-radius: 50%; } } .datewrapp { display: flex; flex-direction: column; } td:nth-of-type(5), td:nth-of-type(6), td:nth-of-type(7), td:nth-of-type(8) { font-family: 'Roboto Slab'; text-align: center; font-size: 14px; font-weight: 500; } th:nth-of-type(4) span, th:nth-of-type(5) span, th:nth-of-type(6) span, th:nth-of-type(7) span, th:nth-of-type(8) span { justify-content: center; } .lvldiv { width: fit-content; border-radius: 5px; font-size: 12px; text-transform: capitalize; padding: 6px 12px; margin-left: unset; margin: auto; } .userwrapp { display: flex; align-items: center; gap: 5px; cursor: pointer; img { max-height: 36px; border-radius: 50%; } } tbody>tr:nth-of-type(1) { background-color: var(--ssqorangebg); td:nth-of-type(5) { color: var(--ssqyellow); } td:nth-of-type(6) { color: var(--ssqpurple); } td:nth-of-type(7) { color: var(--ssqgreen); } td:nth-of-type(8) { color: var(--ssqlightblue); } } } } } } } table { width: 100%; tbody>tr>th, thead>tr>th, tfoot>tr>th { height: 56px; -webkit-user-select: none; user-select: none; text-align: start; } tbody>tr>td.content_details img, tbody>tr>td.author_details img { height: 38px; object-fit: cover; border-radius: 50%; margin-right: 12px; } tbody>tr>td, tbody>tr>th, thead>tr>td, thead>tr>th, tfoot>tr>td, tfoot>tr>th { padding: 0 8px; align-content: center; } thead>tr>th { border-bottom: 1px solid var(--border); align-content: center; >span { display: flex; width: 100%; gap: 8px; justify-content: space-between; align-items: center; >p { font-family: 'Roboto Slab'; } >div { display: flex; margin-right: -16px; flex-direction: column; font-size: 8px; span.vicon.vicon-angle-up, span.vicon.vicon-angle-down { border: none; opacity: 0; cursor: pointer; padding: 8px } span.vicon.vicon-angle-up.active, span.vicon.vicon-angle-down.active { opacity: 1; background: none; color: var(--text); } } } } thead>tr>th:hover { >span { >div { span.vicon.vicon-angle-up, span.vicon.vicon-angle-down { opacity: .5; } span.vicon.vicon-angle-up:hover, span.vicon.vicon-angle-down:hover { opacity: 1; } span.vicon.vicon-angle-up.active, span.vicon.vicon-angle-down.active { opacity: 1; } } } } th { color: var(--text); } tbody>tr { border-bottom: 1px solid var(--border); } tbody>tr>td:first-of-type, thead>tr>th:first-of-type { padding-left: 24px; } tbody>tr>td:last-of-type, thead>tr>th:last-of-type { padding-right: 24px; } tbody>tr>td { height: 56px; font-size: 12px; } tbody>tr>td { a { color: var(--text); font-size: 15px; font-family: 'Roboto Slab'; display: flex; align-items: center; gap: 8px; } a:hover { color: var(--primary) !important; } } tbody>tr>td { span.tableaction { display: inline-flex; height: 38px; width: 38px; justify-content: center; align-items: center; font-size: 18px; border-radius: 50%; cursor: pointer; } span.tableaction:hover { background: var(--body); } span.tableaction.faded { opacity: .25; pointer-events: none; } } } .actass_table_wrap { padding-bottom: 24px; h3 { padding: 24px 24px 0; } .manage_table_inner { display: flex; flex-direction: column; .sq_searchbox { padding: 24px; border-bottom: 1px solid var(--border); } table#submissions_table { width: 100%; .info_wrapall { display: flex; gap: 6px; img { border-radius: 50%; } } .datewrapp { display: flex; flex-direction: column; } tbody>tr>td:nth-of-type(5) { text-transform: uppercase; } tbody>tr>td:nth-of-type(6) { font-size: 15px; font-family: 'Roboto Slab'; } tbody>tr:nth-of-type(1) { background-color: var(--intsortbg); td:nth-of-type(1) { color: var(--intsort); } } tbody>tr:nth-of-type(2) { background-color: var(--transparency); td:nth-of-type(1) { color: var(--border); } } tbody>tr:nth-of-type(3) { background-color: var(--intparabg); td:nth-of-type(1) { color: var(--intpara); } } } } } .submissions_list { width: 100%; .user_submission_wrap { display: flex; flex-direction: column; .submission_header_info { display: flex; flex-direction: column; padding: 0 24px 12px; border-bottom: 1px solid var(--border); .actasstitle { display: flex; gap: 24px; justify-content: space-between; >span { display: flex; align-items: center; gap: 12px; font-size: 18px; font-family: 'Roboto Slab'; } .userwrap { display: flex; font-family: 'Roboto Slab'; text-transform: capitalize; gap: 12px; align-items: center; img { height: 32px; border-radius: 50%; } } } } .submission_data { display: flex; flex-direction: column; .overall_analytics { display: flex; padding: 24px; gap: 24px; .results_side { .submissionsdeets { display: flex; h5 { margin-bottom: 6px; } >span { display: flex; gap: 6px; font-size: 14px; padding: 3px 0; >p{ text-transform: capitalize; } } >span.dowwn { flex-direction: column; gap: 0; } >span.dividerr { background: var(--border); height: 1px; padding: 0 !important; margin: 12px 0; } .altstatwrap { display: flex; flex-direction: column; font-size: 12px; margin-bottom: 6px; >span.altstat { display: flex; gap: 6px; font-size: 14px; >p { text-transform: capitalize; } } >p{ opacity: .8; } } } .quiz_results_boxes_wrap { display: flex; flex-direction: column; gap: 12px; .quiz_results_square { display: flex; flex-direction: column; align-items: center; padding: .5rem; border: 1px solid var(--border); border-radius: 5px; justify-content: space-between; gap: .5rem; width: 122px; height: 122px; label { margin-bottom: 0; } span.res_main { font-size: x-large; font-weight: bold; } span.res_avg { display: flex; justify-content: space-between; width: 100%; align-items: center; gap: 6px; font-size: 12px; span.avgtxt { text-align: end; } span.avgsym { font-size: 12px; } span.avgsym { display: flex; justify-content: center; align-items: center; span.daavgsym { height: 21px; width: 21px; text-align: center; line-height: 17px; background: var(--primary); border-radius: 5px; color: var(--highlight); } } span.avgsym.up { span.daavgsym { background: var(--ssqgreen); transform: rotate(-90deg); } } span.avgsym.down { span.daavgsym { background: var(--ssqred); transform: rotate(90deg); } } span { font-weight: bold; } span.avgscores { text-align: center; width: 42px; font-weight: 400; } } } } } .results_charts { padding: 0; display: flex; flex: 1; .submission_breakdown { display: flex; flex-direction: column; gap: 12px; height: 100%; h3 { padding: 0 0 12px; } .canvas_wrap { position: relative; display: flex; flex-direction: column; flex: 1; canvas#quizpie { height: calc(350px - 46px) !important; max-width: 100%; width: 100% !important; } .bottom_conf { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; display: flex; flex-direction: column-reverse; text-transform: capitalize; font-size: 18px; width: fit-content; margin: auto; span { font-size: 38px; font-weight: 700; color: var(--ssqgreen); } } } } } } .prev_conf { display: flex; flex-direction: column; padding: 24px; gap: 12px; border-bottom: 1px solid var(--border); h3 { padding: 0 0 12px; } canvas#quizlinee { max-height: 200px; } } .interactions_list { display: flex; flex-direction: column; padding-bottom: 24px; h3 { padding: 24px 24px 6px; } table>tbody>tr>td:nth-of-type(2), table>tbody>tr>td:nth-of-type(4) { text-transform: none; .incorr { color: var(--ssqred); } .none { color: var(--border); } } } } .remarks_wrapper { display: flex; flex-direction: column; padding: 0 24px 24px; .remarks { display: flex; flex-direction: column; gap: 12px; textarea { resize: vertical; } .button.is-primary { margin: 0; } } } } } } } } } .sq_profile_body.viewsq { gap: 36px; } } [contenteditable=true] { padding: 8px; cursor: text; border-radius: 5px; } [contenteditable=true]:empty:before{ content: attr(placeholder); pointer-events: none; display: block; } [contenteditable=true]:focus { outline: 2px solid var(--primary); box-shadow: 0 2px 6px var(--gradientlight); border-radius: 5px; } @media (min-width: 992px) { .col-md-0 { display: flex !important; } } table { tbody>tr>th, thead>tr>th, tfoot>tr>th { height: 56px; -webkit-user-select: none; user-select: none; text-align: start; } tbody>tr>td.content_details img, tbody>tr>td.author_details img { height: 38px; object-fit: cover; border-radius: 50%; margin-right: 12px; } tbody>tr>td, tbody>tr>th, thead>tr>td, thead>tr>th, tfoot>tr>td, tfoot>tr>th { padding: 0 16px; align-content: center; text-transform: capitalize; } thead>tr>th { border-bottom: 1px solid var(--border); align-content: center; >span { display: flex; width: 100%; gap: 8px; justify-content: space-between; align-items: center; >p { font-family: 'Roboto Slab'; font-weight: 400; } >div { display: flex; margin-right: -16px; flex-direction: column; font-size: 8px; span.vicon.vicon-angle-up, span.vicon.vicon-angle-down { border: none; opacity: 0; cursor: pointer; padding: 8px } span.vicon.vicon-angle-up.active, span.vicon.vicon-angle-down.active { opacity: 1; background: none; color: var(--text); } } } } thead>tr>th:hover { >span { >div { span.vicon.vicon-angle-up, span.vicon.vicon-angle-down { opacity: .5; } span.vicon.vicon-angle-up:hover, span.vicon.vicon-angle-down:hover { opacity: 1; } span.vicon.vicon-angle-up.active, span.vicon.vicon-angle-down.active { opacity: 1; } } } } th { color: var(--text); } tbody>tr { border-bottom: 1px solid var(--border); } tbody>tr>td:first-of-type, thead>tr>th:first-of-type { padding-left: 24px; } tbody>tr>td:last-of-type, thead>tr>th:last-of-type { padding-right: 24px; } tbody>tr>td { height: 56px; font-size: 14px; } tbody>tr>td { a { color: var(--text); text-transform: capitalize; font-size: 15px; font-family: 'Roboto Slab'; } a:hover { color: var(--primary) !important; } } tbody>tr>td { span.tableaction { display: inline-flex; height: 38px; width: 38px; justify-content: center; align-items: center; font-size: 18px; border-radius: 50%; cursor: pointer; } span.tableaction:hover { background: var(--body); } span.tableaction.faded { opacity: .25; pointer-events: none; } } } #speechdiffoutput { .wr, .ph { width: fit-content; margin: auto; display: flex; flex-wrap: wrap; justify-content: center; >div { display: flex; padding: 4px 8px; gap: 1px; border: 1px solid transparent; position: relative; span.incorr { color: var(--ssqred); } span.notsaid { opacity: .25; } span.improve { color: var(--ssqorange); } } >div:not(.corr):hover { cursor: pointer; border-color: var(--primary); border-radius: 5px; } >div.active { cursor: auto !important; border-color: var(--primary); border-radius: 5px; box-shadow: 0 2px 6px var(--gradientlight); justify-content: center; } } .wr { font-size: 24px; } .ph { display: none; font-size: 20px; font-family: 'Noto Serif'; font-weight: 400; letter-spacing: 1px; } } #speechdiffoutput.greenify { .wr, .ph { >div { span.incorr { color: var(--text); } span.notsaid { opacity: 1 !important; } span.improve { color: var(--text) !important; } } >div:not(.corr):hover { cursor: auto !important; pointer-events: none !important; } >div.active { cursor: auto !important; pointer-events: none !important; } } } .page.ssqbp-component-speechbox #ssqbp_member { overflow: hidden; .ssqbp_myprofile .profile_grid{ padding: 0; .ssqbp_main { overflow: visible; margin: 0; padding: 0; } .lang-select.fixed { pointer-events: none; } .edit_content_wrap { display: flex; flex-direction: column; height: 100%; .speechbox_wrapper { display: flex; flex-direction: column; flex: 1; background: linear-gradient(45deg, var(--intquesbg), var(--assessmentbg), var(--intquesbg), var(--activitybg)); background-size: 300% 300%; animation: gradient 60s ease infinite; .edit_square_inner { display: flex; flex-direction: column; flex: 1; .speechbox_header { padding: 1rem 1.5rem 0; display: flex; gap: 1rem; justify-content: space-between; .header_left { display: flex; flex-direction: column; p { opacity: .8; } } .header_right { display: flex; flex-direction: column; } } .edit_square_main { z-index: 1; display: flex; flex-direction: column; flex: 1; gap: 1rem; justify-content: space-between; overflow: hidden; .vbp_message.new_square { margin: 0 !important; } .square_content { display: flex; flex-direction: column; max-height: 100%; max-width: 100%; overflow: hidden; flex: 1; li.lidrag { margin: -50px 0; transition: 0.01s; transform: translateX(-9999px); } div.sectiondrag { margin: 0 -160px; transition: 0.01s; transform: translateX(-9999px); } .content_wrap { display: flex; flex-direction: column; max-height: 100%; max-width: 100%; overflow: hidden; flex: 1; .sq_sections { font-size: 14px; display: flex; gap: 0; padding: 0 12px 12px; height: 100%; overflow: auto; max-width: calc(100vw - 70px); position: relative; .sq_sectiondrag { z-index: 1; position: fixed; top: 0; bottom: 8px; left: 0; right: 10px; cursor: grab; display: flex; } #sections_wrap { display: contents; } #section_add { display: flex; height: 38px; order: 2; min-width: 155px; margin: 1rem; z-index: 2; padding: 0 1rem; border-radius: 25px; justify-content: center; align-items: center; background: var(--primary); .section_start { display: flex; align-items: baseline; gap: 6px; cursor: pointer; color: var(--ssqwhite); i { font-weight: 600; font-size: 12px; padding-top: 2px; } } .section_start:hover { color: var(--primary) !important; } } #section_add:hover { background: var(--ssqwhite); } .section { padding: 1rem; cursor: all-scroll; position: relative; height: fit-content; z-index: 2; display: flex; .secdrag_zone { display: none; width: .5rem; background: var(--border); margin-top: 66px; margin-bottom: 44px; border-radius: 5px; opacity: 0; } .secdrag_zone.secdrag_left { margin-left: -1rem; margin-right: 1rem; } .secdrag_zone.secdrag_right { margin-left: 1rem; margin-right: -1rem; } .section_inner { display: flex; flex-direction: column; min-width: 300px; position: relative; .section_head { display: inline-flex; align-items: baseline; width: 100%; margin: 0 0 4px; min-height: 38px; .vicon-trash { color: var(--text); opacity: 0; display: none; padding: .5rem; justify-content: center; align-items: center; width: 38px; height: 38px; background: var(--primary); border-radius: 5px; } input { width: -webkit-fill-available; font-family: 'Roboto Slab'; border: none; height: 38px; font-size: 15px; background: transparent; } input:focus { background: var(--highlight) !important; border: 2px solid var(--primary); position: absolute; left: -2px; right: -2px; z-index: 99; padding: 0.5rem; } } .section_head:hover { .vicon-trash { opacity: .5; display: flex; margin-left: 12px; } .vicon-trash:hover { opacity: 1; } } >ul.dashed { border: 2px dashed var(--secondary); margin: 2px; height: 100px; opacity: .5; } >ul { overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; min-height: 50px; margin: 0 -12px; cursor: auto; z-index: 3; position: relative; >li { display: flex; position: relative; padding: .5rem 9px; flex-direction: column; gap: 1rem; min-width: 450px; max-width: 800px; .lidrag_zone { display: none; height: 1rem; background: var(--highlight); margin: 0 1rem; border-radius: 3px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; opacity: 0; } >div { flex: 1; display: flex; flex-direction: column; padding: 1rem; background: var(--highlight); border-radius: 5px; justify-content: space-between; cursor: move; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; .tilehead { display: flex; flex-direction: column; gap: .25rem; .tiletitle { display: flex; gap: 6px; flex-direction: column; font-family: 'Roboto Slab'; input { width: calc(100% + 1rem); margin: -.5rem -.5rem 0; border-color: transparent; background: transparent; font-size: 14px; } input:focus { width: calc(100% + 1rem) !important; z-index: 2; background: var(--highlight) !important; border: 2px solid var(--primary); margin-bottom: -2px; } } .intdeets { display: flex; align-items: end; justify-content: end; font-size: 12px; position: relative; gap: .5rem; >span { display: flex; align-items: center; gap: 3px; padding: 2px; i { color: var(--ssqpurple); font-size: 14px; } } >span:last-of-type i { color: var(--ssqred); } .langpicker { margin-right: auto; display: flex; flex-direction: column; .lang-select { display: flex; padding: 2px; border: 1px solid var(--border); cursor: pointer; border-radius: 3px; height: 22px; width: 22px; justify-content: center; align-items: center; img { width: 18px; } } .lang-select:hover { border-color: var(--primary); } ul.active { position: absolute; background: var(--highlight); display: flex; flex-direction: row; gap: .5rem; top: -2px; li { cursor: pointer; padding: 3px; border-radius: 3px; height: 22px; width: 22px; justify-content: center; align-items: center; img { width: 18px; } } li:hover { background-color: var(--ssqhovgray); } } } } } } .vicon-trash { display: none; padding: 12px; opacity: 0; position: absolute; top: 16px; right: 12px; color: var(--text); } } >li:hover{ >div .tilehead .tiletitle input { width: calc(100% - 1rem); } .vicon-trash { display: block; opacity: .5; } .vicon-trash:hover { opacity: 1; color: var(--primary); } } } .section_footer { display: flex; flex-direction: column; .actass_search { display: flex; flex-direction: column; padding-top: 6px; .actass_search_wrap { display: flex; align-items: center; .sq_searchbox { padding: 0; .vicon.vicon-search { left: 12px; font-size: 12px; } input[type="text"] { background-color: var(--highlight); z-index: auto; } } i.vicon.vicon-close { padding: 12px; cursor: pointer; } } .actass_results { display: flex; flex-direction: column; select { max-width: unset; option { text-transform: capitalize; } } .actass_results_info { padding: 6px 12px 8px; font-size: 12px; } .actass_results_wrap { display: flex; flex-direction: column; gap: .5rem; span.actass_result { display: flex; flex-direction: row-reverse; cursor: pointer; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; background: var(--highlight); padding: 12px; border-radius: 5px; gap: 6px; >div { display: flex; flex-direction: column; gap: 3px; justify-content: space-around; } >div:last-of-type { flex: 1; } div:first-of-type span:not(.titleid) { display: flex; align-items: center; gap: 6px; font-weight: 600; opacity: .8; justify-content: end; } p { display: flex; gap: 6px; align-items: center; font-family: 'Roboto Slab'; } .titleid { display: flex; gap: 6px; align-items: center; font-size: 10px; opacity: .8; height: 21px; justify-content: end; } .titletag { padding: 3px 8px; border-radius: 5px; color: var(--assessment); background: var(--assessmentbg); text-transform: capitalize; font-size: 10px; font-weight: 600; width: fit-content; } .titletag.activity { background: var(--activitybg); color: var(--activity); } } } } } .section_opts { display: flex; justify-content: space-between; span.sectionadditems { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 9px 0; opacity: .5; height: 38px; i { font-size: 12px; font-weight: 600; } } span.sectionadditems:hover { color: var(--secondary); opacity: 1; } span.sectionadditems.playy { padding: 0px 12px; background-color: var(--ssqgreen); color: var(--highlight); border-radius: 25px; line-height: normal; height: 28px; margin: 5px 0; } span.sectionadditems.playy:hover { color: var(--highlight); } } #content_details { cursor: default; padding: 1rem; background: var(--highlight); border-radius: 5px; display: flex; flex-direction: column; gap: 1rem; position: absolute; width: calc(100% - .5rem); z-index: 2; box-shadow: var(--shadow) 0px 5px 15px; a { color: var(--text); } >span { display: flex; justify-content: space-between; gap: 1rem; a { margin: 0; width: 100%; } } .vicon-close { width: fit-content; padding: .5rem; margin: -.5rem; margin-left: auto; } } } } } .section:before { font-family: vicon; font-size: 14px; position: absolute; left: 1rem; top: 1rem; height: 38px; display: flex; align-items: center; } .section:hover:before { content: "\e656"; } .section:hover { .section_inner { .section_head { width: calc(100% - 24px); margin-left: 24px; input { padding: 0.5rem; } } .section_footer { span.section_opts { opacity: 1; } } } } } } } .square_actions { display: flex; gap: 1rem; justify-content: space-between; a { margin: 0; width: fit-content; display: flex; align-items: center; color: var(--highlight); gap: .5rem; height: fit-content; } a:not(.button) { padding: .5rem; opacity: .8; } a:not(.button):hover { opacity: 1; color: var(--primary); } span { display: flex; gap: 1rem; } } } } .edit_square_inner.practiceset { margin: 0; inline-size: 100%; flex-grow: 1; padding-top: 1rem !important; margin-inline: auto; padding-block: 1.5rem; padding-inline: 1.5rem; .speechbox_header { flex-direction: column; gap: 0; padding: 0; .header_top { display: flex; a.link.backtosb { font-size: 16px !important; display: flex; align-items: center; padding: 6px 1rem; margin-left: -.5rem; background: var(--highlight); border-radius: 25px; margin-bottom: 1rem; .vicon.vicon-arrow-left { font-size: 14px !important; color: var(--text); padding: .5rem; margin-left: -.5rem; } .vicon.vicon-arrow-left:hover { color: var(--primary); } } a.link.backtosb:after { display: none; } } .header_bottom { display: flex; justify-content: space-between; gap: 1rem; align-items: center; .header_right { .sq_content_stat { display: flex; flex-direction: row-reverse; align-items: center; gap: 1rem; .insight-icon { height: 52px; width: 52px; border-radius: 5px; font-size: 22px; align-items: center; display: inline-flex; justify-content: center; background-color: var(--highlight); color: var(--ssqred); box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; border: 1px solid var(--primary); } .insight-wrap { display: flex; flex-direction: column; justify-content: space-between; line-height: normal; text-align: end; span { font-size: 12px; opacity: .8; } h2 { font-size: 24px; } } } } } } .edit_square_main { gap: 1.5rem; overflow: visible; .sb_prac_wrap { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; justify-content: center; gap: 1.5rem; .sb_prac_list { display: flex; flex-direction: column; gap: 1.5rem; min-height: 75px; .going { font-size: 18px; opacity: .3; } .goingg { font-size: 16px; opacity: .2; } } .sb_prac_list.top { justify-content: end; } } .int_wrap { padding: 1rem; border-radius: 5px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; background: var(--highlight); min-width: 60%; display: flex; flex-direction: column; .int_active { display: flex; flex-direction: column; gap: .5rem; align-items: center; .vicon-control-play { width: 36px; height: 36px; font-size: 24px; color: var(--primary); display: flex; justify-content: center; align-items: center; cursor: pointer; } .vicon-control-play:hover { color: var(--text); } div#quescontent { display: flex; flex-direction: column; .quesques { font-size: 22px; } #quesrom { display: none; opacity: .5; margin-top: .5rem; font-size: small; text-align: center; } } } #feedback { display: none; flex-direction: column; align-items: center; gap: .5rem; div#feedbackerspeech { color: var(--primary); } #speechfinal { display: none; } >span { gap: 1rem; align-items: center; justify-content: center; flex-direction: column; } } .int_deets_wrap { margin: 1rem -1rem 0; padding: 1rem 1rem 0; border-top: 1px solid var(--border); display: flex; gap: 1rem; justify-content: end; div.intlang { margin-right: auto; display: flex; align-items: center; gap: .5rem; img { height: 22px; } .lvldiv { width: auto; padding: 8px; border-radius: 5px; text-transform: capitalize; margin-left: unset; } } span { display: flex; align-items: center; gap: 6px; i { color: var(--ssqred); } } span:first-of-type i { color: var(--ssqpurple); } } } .sbcontrols { display: flex; flex-direction: column; align-items: center; gap: .5rem; .sbcontrols_btns { display: flex; gap: .5rem; width: 100%; justify-content: center; align-items: center; .vicon { cursor: pointer; } .vicon.faded { cursor: auto; opacity: .5; } .vicon:first-of-type, .vicon:last-of-type { padding: .5rem; font-size: 16px; } #speechbutton { display: inline-flex; height: 64px; width: 64px; justify-content: center; align-items: center; font-size: x-large; border: 2px solid var(--ssqgreen); border-radius: 50%; background: var(--ssqgreen); color: var(--highlight); } #speechbutton:hover { color: var(--ssqgreen); background: var(--highlight); } #speechbutton.recording { background: var(--ssqred) !important; color: var(--highlight) !important; border-color: transparent; -webkit-animation: pulsate-fwd 2s ease-in-out infinite both; animation: pulsate-fwd 2s ease-in-out infinite both; } } .sbcontrols_nav { font-size: 16px; } } } } } } } } .my_lang_card { display: flex; gap: .5rem; .mylang { display: flex; flex-direction: column; align-items: center; gap: 6px; img { width: 32px; } .lvldiv { width: unset; border-radius: 5px; padding: 3px 6px; font-size: 10px; margin-left: unset; text-transform: capitalize; height: unset; line-height: normal; } } } div#feedbackscorebar { gap: .5rem; display: flex; align-items: center; width: 100%; justify-content: center; .progress-bar { height: 14px; border-radius: 24px; overflow: hidden; position: relative; border: 1px solid var(--border); background: var(--body); min-width: 250px; .progress-bar--gradient { background: linear-gradient(to right, var(--ssqred) 0, var(--ssqorange) 25%, var(--ssqyellow) 50%, yellowgreen 75%, var(--ssqgreen) 100%); height: 14px; width: calc(100% - 1px); display: flex; .progress-bar--progress { min-width: 2%; display: flex; align-items: center; justify-content: flex-end; } .progress-bar--not-progress { flex-grow: 1; background: var(--body); border: 1px solid var(--border); border-left: 0; border-radius: 0 24px 24px 0; margin-right: -1px; } } } #scorebarsscore { font-size: 14px; opacity: .8; } } .feedbackmenu { position: absolute; bottom: calc(100% + 1rem); min-width: 250px; border-radius: 5px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; background: var(--highlight); display: flex; flex-direction: column; align-items: flex-start; font-size: 14px; .feedbackmenu_top { display: flex; width: 100%; align-items: center; padding: .5rem 1rem; border-bottom: 1px solid var(--border); a.vicon.vicon-close { padding: .5rem; margin: -.5rem; margin-left: auto; } .word_play_wrap { display: flex; align-items: center; gap: .5rem; font-size: 18px; >div { .improve { color: var(--text) !important; } .incorr { color: var(--text) !important; } .notsaid { opacity: 1 !important; } } } } .feedbackmenu_btm { display: flex; flex-direction: column; width: 100%; padding: .5rem 1rem; gap: .5rem; .phoneme_info { font-size: 24px; } .phoneme_info:after { font-family: 'vicon'; content: "\e601"; color: var(--primary); cursor: pointer; } .ipa_full { display: flex; gap: .5rem; font-size: 24px; flex-direction: column; >span { font-family: 'Roboto Slab'; font-size: 14px; height: fit-content; font-weight: 700; text-align: start; display: flex; align-items: baseline; line-height: normal; gap: .5rem; justify-content: space-between; p { font-size: 12px; opacity: .8; } } div { font-weight: 600; font-family: math; display: flex; line-height: normal; gap: 5px; span { padding: 1px 2px; border: 1px solid; border-radius: 3px; cursor: pointer; } span.incorr { color: var(--highlight) !important; background: var(--ssqred); } span:hover { border-color: var(--primary); } } div.selected { span { color: var(--primary) !important; background: none !important; border-color: var(--primary); opacity: 1 !important; } } } .phexamples { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; text-align: left; border-top: 1px solid var(--border); padding-top: 5px; .top { display: flex; flex-direction: column; width: 100%; .symbol { font-size: 22px; font-family: math; text-align: center; } .feedback { font-size: 12px; text-align: center; } } .btm { display: flex; flex-direction: column; align-items: center; gap: .5rem; line-height: normal; justify-content: center; margin: auto; width: 100%; p { font-size: 12px; } .examplewrap { display: flex; flex-wrap: wrap; align-items: center; font-size: 16px; gap: .5rem; line-height: normal; >span { padding: 3px 12px; border-radius: 3px; letter-spacing: 1px; >b { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--primary); text-decoration-thickness: 2px; } } >span:first-of-type { background: var(--ssqgreenhov); } >span:last-of-type { background: var(--ssqfirst); } } } } } } .button.is_primary.faded { opacity: .5; pointer-events: none !important; } .fullmessage .portal .portal_body > div.notmine .portal_message_wrapper { flex-direction: column; } .ssqbp-component-analytics, .ssqbp-component-results { .ssqbp_main { margin: 0; inline-size: 100%; max-inline-size: 1440px; flex-grow: 1; padding-top: 1rem !important; margin-inline: auto; padding-block: 1.5rem; padding-inline: 1.5rem; .analytics_wrap { display: flex; flex-direction: column; height: 100%; gap: 24px; .analytics_head { display: flex; z-index: 2; .analytics_actions { padding-right: 24px; border-right: 1px solid var(--border); >.sqcardd { display: flex; flex-direction: column; gap: 24px; .analytics_qatitle { display: flex; gap: 1rem; justify-content: space-between; a.link { height: fit-content; display: flex; align-items: baseline; gap: .5rem; i { font-size: 12px; color: var(--text); } } } .analytics_qafilters { display: flex; flex-wrap: wrap; >div { padding-left: 0; padding-right: 12px; } >div.userselect { padding-right: 0; position: relative; .sq_searchbox { padding: 0; background-color: var(--body); border-radius: 24px; input#usersearch { padding: 6px 8px 6px 32px; } .vicon-search { left: 12px; } } .searchres { position: absolute; top: 100%; padding: .5rem; min-width: 100%; gap: 0; li { padding: .5rem 1rem; display: flex; gap: .5rem; cursor: pointer; border-radius: 5px; align-items: center; img { width: 22px; height: 22px; object-fit: cover; border-radius: 50%; } } li:hover { background-color: var(--ssqhovgray); } } } >div.langpicker { display: flex; flex-direction: column; position: relative; .lang-select { display: flex; min-height: 35px; padding: 6px 2rem 6px 1rem; border-radius: 5px; border: 1px solid var(--border); cursor: pointer; background: url("data:image/svg+xml;utf8,") no-repeat; background-position: calc(100% - 0.5rem) 50%; background-repeat: no-repeat; background-size: auto 38%; background-color: var(--body); gap: .5rem; align-items: center; >span { display: flex; flex: 1; } img { width: 22px; height: 22px; object-fit: cover; border-radius: 50%; } } .lang-select.focusedd { border: 2px solid var(--primary); box-shadow: 0 2px 6px var(--gradientlight); } ul { position: absolute; top: 100%; padding: .5rem; min-width: 100%; gap: 0; li { padding: .5rem 1rem; display: flex; gap: .5rem; cursor: pointer; border-radius: 5px; align-items: center; img { width: 22px; height: 22px; object-fit: cover; border-radius: 50%; } } li:hover { background-color: var(--ssqhovgray); } } } } } } .analytics_info { padding-left: 24px; .sqcardd { min-height: 200px; .qatitle { display: flex; flex-direction: column; height: 100%; min-height: calc(200px - 48px); justify-content: space-between; } p { line-height: normal; font-size: 12px; } } } } .analytics_main { display: flex; flex-direction: column; flex: 1; .analyticsinner { display: flex; flex-direction: column; gap: 24px; .breadnav { display: flex; align-items: center; line-height: normal; gap: .5rem; padding: 0 24px; i { font-size: 12px; } a.clearme.link { margin-left: auto; display: flex; align-items: center; gap: .5rem; } } } .groups_analysis { .groups_analysis_wrap { display: flex; flex-wrap: wrap; .group_side { display: flex; flex-direction: column; gap: 24px; .group_phones { display: flex; flex-direction: column; table { margin: 0 -24px; tbody>tr>td, thead>tr>th { height: 44px; text-align: center; text-transform: unset; >span { justify-content: center; } } tbody>tr>td:first-of-type { font-size: 24px; font-family: math; } tbody>tr>td:nth-of-type(2) b { text-decoration: underline; text-underline-offset: 7px; text-decoration-color: var(--primary); text-decoration-thickness: 2px; } } } .group_squares { display: flex; flex-direction: column; gap: 12px; .sq_group_list { gap: 12px; display: grid; grid-template-columns: calc(50% - 6px) calc(50% - 6px); .sq_group_single { display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--border); border-radius: 5px; gap: 6px; aspect-ratio: 1 / 1; cursor: pointer; h5 { text-align: center; font-size: 14px; font-weight: 500; } img { flex: 1; object-fit: cover; border-radius: 5px; } } .sq_group_single:hover { border-color: var(--primary); } } } } .group_main { display: flex; flex-direction: column; gap: 24px; .group_topstats { display: flex; flex-direction: column; gap: 24px; .group_topstats_top { display: flex; gap: 1rem; img { max-width: 100px; border-radius: 5px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; } .group_left_deetswrap { display: flex; flex-direction: column; line-height: normal; h1 { font-size: 24px; } .langlevelwrap { display: flex; align-items: center; gap: 12px; span.langdiv:before { height: 28px; width: 28px; } span.lvldiv { width: fit-content; border-radius: 5px; padding: 3px 12px; text-transform: capitalize; margin-left: 0; font-size: 14px; box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; height: fit-content; } } } } .group_topstats_btm { display: flex; flex-direction: column; .group_quickstats { display: flex; gap: 1rem; justify-content: space-between; .grp_quickstat { display: flex; flex: 1; gap: 1rem; align-items: center; .icon { height: 52px; width: 52px; border-radius: 5px; font-size: 22px; background-color: var(--ssqpurplebg); color: var(--ssqpurple); } .statinfo { display: flex; flex-direction: column-reverse; justify-content: space-between; h4 { font-size: 16px; line-height: normal; } } } .grp_quickstat.clarity { .icon { background-color: var(--ssqorangebg); color: var(--ssqorange); } } .grp_quickstat.proficiency { .icon { background-color: var(--ssqlightbluebg); color: var(--ssqlightblue); } } .grp_quickstat.confidence { .icon { background-color: var(--highlight); color: var(--ssqred); box-shadow: 0 3px 12px var(--shadow), 0 0 transparent, 0 0 transparent; border: 1px solid var(--primary); } } } } } .group_words { display: flex; flex-direction: column; gap: 12px; } .group_words_wrap { max-height: 350px; } .group_leaderboard { display: flex; flex-direction: column; .qatitle { padding-bottom: 12px; display: flex; gap: 1rem; justify-content: space-between; align-items: center; } table { margin: 0 -24px; tbody tr { cursor: pointer; td { span { display: flex; gap: .5rem; align-items: center; img{ width: 36px; height: 36px; object-fit: cover; border-radius: 50%; } } } } tbody tr:hover { background: var(--ssqhovgray); } } } } } } .square_analysis_wrap { .user_submission_wrap { display: flex; flex-direction: column; gap: 24px; i.vicon.vicon-arrow-left { width: fit-content; padding: .5rem; cursor: pointer; margin: 0 -.5rem -.5rem; } i.vicon.vicon-arrow-left:hover { color: var(--primary); } .submission_data { display: flex; flex-direction: column; gap: 24px; .overall_analytics { display: flex; gap: 24px; flex-direction: column; >h3 { font-size: 16px; } .results_side { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 0 24px; .submissionsdeets { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: end; #asstime { width: 100%; text-align: right; font-weight: 500; } } .usercard { display: flex; align-items: center; gap: 12px; line-height: normal; img { height: 64px; width: 64px; object-fit: cover; border-radius: 50%; } p { font-size: 12px; opacity: .8; } h5 { font-size: 22px; font-weight: 500; } } } .results_charts_wrap { display: flex; flex-direction: column; gap: 12px; .results_charts { padding: 0; display: flex; flex: 1; gap: 24px; justify-content: space-between; .submission_stats { display: flex; flex-direction: column; max-width: calc(100% - 324px); width: 100%; .canvas_wrap { height: 250px; max-height: 250px; } } .submission_breakdown { display: flex; flex-direction: column; width: 300px; max-width: 300px; .canvas_wrap { display: flex; width: 300px; height: 250px; max-width: 300px; max-height: 250px; } } } } } .interactions_list { display: flex; flex-direction: column; .square_submissions_title { display: flex; gap: 1rem; justify-content: space-between; align-items: center; .submissions_key { display: flex; gap: 1rem; align-items: center; >div { display: flex; gap: 3px; align-items: center; p { font-size: 12px; } .subkey { height: 10px; width: 10px; border-radius: 50%; } .corr_key { background-color: var(--text); } .incorr_key { background-color: var(--ssqred); } .improve_key { background-color: var(--ssqorange); } .notsaid_key { background-color: var(--text); opacity: .5; } } } } .square_submissions_wrap { display: flex; flex-direction: column; table { font-size: 12px !important; margin: 0 -24px; tbody>tr>td { height: 42px; font-size: 12px; } tbody>tr>td, thead>tr>th { text-align: center; >span { justify-content: center; } img { height: 22px; max-width: 22px; } .lvldiv { margin-left: auto; margin-right: auto; } } tbody>tr>td.response, thead>tr>th.response { text-transform: unset; text-align: left; >span { justify-content: start; } span.response { display: flex; flex-wrap: wrap; gap: 4px; font-size: 14px; .incorr { color: var(--ssqred); } .notsaid { opacity: .5; } .improve { color: var(--ssqorange); } } } tbody>tr>td.response { font-size: 16px; } } } } } .remarks_wrapper { display: flex; flex-direction: column; .remarks { display: flex; flex-direction: column; gap: 12px; textarea { resize: vertical; } .button.is-primary { margin: 12px 0 0 auto; min-width: 64px; } } } } .square_side { display: flex; flex-direction: column; gap: 24px; .sqinfo { display: flex; flex-direction: column; gap: 12px; .sq_deetswrap_top { display: flex; flex-direction: column; gap: 12px; img { height: 180px; width: 100%; object-fit: cover; border-radius: 5px; } .sq_deetswrap { display: flex; align-items: center; gap: 1rem; } } .sq_deetswrap_btm { display: flex; flex-direction: column; .sq_quickstats { display: flex; gap: .5rem; justify-content: space-between; .grp_quickstat { display: flex; flex: 1; gap: .5rem; align-items: center; .icon { height: 38px; width: 38px; border-radius: 5px; font-size: 22px; background-color: var(--ssqpurplebg); color: var(--ssqpurple); } .statinfo { display: flex; flex-direction: column-reverse; justify-content: space-between; h4 { font-size: 14px; line-height: normal; } span { font-size: 12px; } } } .grp_quickstat.submissions { .icon { background-color: var(--ssqbluebg); color: var(--ssqblue); } } .grp_quickstat.proficiency { .icon { background-color: var(--ssqlightbluebg); color: var(--ssqlightblue); } } .grp_quickstat.confidence { .icon { background-color: var(--ssqgreenbg); color: var(--ssqgreen); } } } } } .sqvariety { display: flex; flex-direction: column; gap: 12px; h5 { display: flex; gap: .5rem; } } .sqassessments { display: flex; flex-direction: column; gap: 12px; h5 { display: flex; gap: .5rem; } .square_asses { display: flex; flex-direction: column; gap: .5rem; .sqassessment { display: flex; gap: .5rem; justify-content: space-between; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 5px; cursor: pointer; .tilehead { display: flex; flex-direction: column-reverse; flex: 1; .tiletitle { display: flex; align-items: baseline; gap: 5px; p { font-family: 'Roboto Slab'; font-weight: 500; } } .tileid { font-size: 10px; opacity: .9; } } .subs { display: flex; align-items: center; gap: 3px; } } .sqassessment:hover { border-color: var(--primary); } .sqassessment.faded { pointer-events: none; opacity: .8; } .sqassessment.faded:hover { border-color: var(--border); } .sqassessment.selected { border-color: var(--primary); } } } } .square_main { display: flex; flex-direction: column; gap: 24px; >i.vicon.vicon-arrow-left { display: flex; padding: .5rem; width: fit-content; margin-left: -.5rem; cursor: pointer; } >i.vicon.vicon-arrow-left:hover { color: var(--primary); } >.assessment_header { display: flex; flex-direction: column; .header_deetstop { display: flex; gap: .5rem; font-size: 12px; margin-bottom: 5px; >div { opacity: .9; } span.assessment_tag { color: var(--assessment); background: var(--assessmentbg); padding: 0px 8px; border-radius: 5px; } } >h2 { display: flex; align-items: baseline; gap: .5rem; } .assessment_header_deets { display: flex; gap: .5rem; font-size: 12px; .ass_recorded { color: var(--ssqred); } } } .info_deetswrap { display: flex; width: 100%; overflow: hidden; flex-direction: column; gap: 24px; > h4 { font-size: 16px; font-weight: 600; } .submission-pastten_wrap{ display: flex; width: 100%; overflow: hidden; flex-direction: column; gap: 1rem; .submission-pastten{ max-height: 220px; height: 220px; canvas#pastten { max-width: 100%; } } } .info_charts { display: flex; flex-direction: column; width: 100%; .submission_breakdown { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; h4 { font-size: 16px; font-weight: 600; } .canvas_wrap { position: relative; display: flex; flex-direction: column; max-height: 48px; margin: 0 0 2px -8px; canvas#quizpie { max-width: 100%; } } } } .info_deets { display: flex; gap: 1rem; .sq_quiztop_stat { display: flex; flex-direction: column; width: 25%; .insight-wrap { display: flex; gap: .5rem; align-items: center; .insight-icon { width: 42px; height: 42px; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 22px; color: var(--secondary); background: var(--intquesbg); aspect-ratio: 1; } h2 { font-size: 18px; } h4 { font-size: 12px; } } } .sq_quiztop_stat:nth-of-type(1) { .insight-wrap { .insight-icon { background-color: var(--ssqbluebg); color: var(--ssqblue); } .insight-info h2 { color: var(--ssqblue); } } } .sq_quiztop_stat:nth-of-type(2) { .insight-wrap { .insight-icon { background-color: var(--ssqyellowbg); color: var(--ssqyellow); } .insight-info h2 { color: var(--ssqyellow); } } } .sq_quiztop_stat:nth-of-type(3) { .insight-wrap { .insight-icon { background-color: var(--ssqpurplebg); color: var(--ssqpurple); } .insight-info h2 { color: var(--ssqpurple); } } } .sq_quiztop_stat:nth-of-type(4) { .insight-wrap { .insight-icon { background-color: var(--ssqlightbluebg); color: var(--ssqlightblue); } .insight-info h2 { color: var(--ssqlightblue); } } } .sq_quiztop_stat:nth-of-type(5) { .insight-wrap { .insight-icon { background-color: var(--ssqgreenbg); color: var(--ssqgreen); } .insight-info h2 { color: var(--ssqgreen); } } } } } .actass_table_wrap.usersubs { padding: 0 0 24px; h3 { padding: 24px 24px 0; font-size: 16px; } .manage_table_inner { display: flex; flex-direction: column; .sq_searchbox { padding: 24px; border-bottom: 1px solid var(--border); } table#submissions_table { width: 100%; thead>tr>th>span>p { font-size: 12px; } tbody>tr>td:nth-of-type(2), tbody>tr>td:nth-of-type(3) { font-size: 10px; } .userwrapp { display: flex; align-items: center; gap: 5px; img { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; } } .info_wrapall { display: flex; gap: 6px; img { border-radius: 50%; } } .datewrapp { display: flex; flex-direction: column; } .lvldiv { width: fit-content; border-radius: 5px; font-size: 12px; text-transform: capitalize; padding: 6px 12px; margin-left: unset; margin: auto; } } } } .sqliner { display: flex; flex-direction: column; gap: 12px; .square_chart_title { display: flex; align-items: center; gap: 1rem; justify-content: space-between; } .square_submissions_wrap { display: flex; flex-direction: column; table { margin: 0 -24px; tbody tr { cursor: pointer; td { span { display: flex; gap: .5rem; align-items: center; img{ width: 36px; height: 36px; object-fit: cover; border-radius: 50%; } } } } tbody tr:hover { background: var(--ssqhovgray); } } } } .sqliner.linecharrt { max-height: 325px; .square_chart_wrap { display: flex; flex-direction: column; max-height: 224px; } } } .square_main.assess { gap: 1rem; } } .user_analysis_wrap { .user_side { display: flex; flex-direction: column; gap: 24px; .profilecard { display: flex; gap: 12px; img { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; } .cardside { display: flex; flex-direction: column; line-height: normal; justify-content: center; p { margin: 0; opacity: .8; } span { font-size: 11px; opacity: .8; } } } .aboutprofilecard { display: flex; flex-direction: column; gap: 12px; ul { display: flex; flex-wrap: wrap; border-top: 1px solid var(--border); li { padding: .5rem 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 50% 50%; width: 50%; font-size: 12px; span:first-of-type { font-weight: 500; } span:last-of-type { text-align: center; } } } } .user_grps { display: flex; flex-direction: column; gap: 12px; ul.user_grps_list { display: flex; flex-direction: column; border-bottom: 1px solid var(--border); li { display: flex; align-items: center; gap: .5rem; padding: 12px 8px; border-top: 1px solid var(--border); cursor: pointer; font-size: 16px; img { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; } div { display: flex; gap: .5rem; margin-left: auto; img { width: 30px; height: 30px; } span { display: flex; flex-direction: column; font-size: 10px; line-height: normal; gap: 2px; p { font-size: 9px; } .lvldiv { width: unset; border-radius: 2px; margin-left: 0; text-transform: capitalize; padding: 2px 5px; height: unset; } } } } li:hover { background: var(--ssqhovgray); border-radius: 5px; } } } } .user_main { display: flex; flex-direction: column; gap: 24px; .lang_filters { display: flex; align-items: center; gap: .5rem; .langoptt { padding: 7px; height: 42px; gap: .5rem; display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; border-radius: 5px; border: 1px solid transparent; img { width: 30px; height: 30px; object-fit: contain; max-width: unset; } span { display: flex; flex-direction: column; font-size: 10px; line-height: normal; gap: 2px; p { font-size: 9px; } .lvldiv { width: unset; border-radius: 2px; margin-left: 0; text-transform: capitalize; padding: 2px 5px; height: unset; } } } .langoptt.selected { border-color: var(--primary); } .langoptt:hover { border-color: var(--primary); } } .user_maintop { display: flex; >div { display: flex; flex-direction: column; .sqcardd { flex: 1; } } } .group_words { display: flex; flex-direction: column; gap: 12px; .group_words_wrap { height: 254px; } } .group_phones { display: flex; flex-direction: column; table { margin: 0 -24px; tbody>tr>td, thead>tr>th { height: 44px; text-align: center; text-transform: unset; >span { justify-content: center; } } tbody>tr>td:first-of-type { font-size: 24px; font-family: math; } tbody>tr>td:nth-of-type(2) b { text-decoration: underline; text-underline-offset: 7px; text-decoration-color: var(--primary); text-decoration-thickness: 2px; } } } .sqliner { display: flex; flex-direction: column; .square_submissions_title { display: flex; gap: 1rem; justify-content: space-between; align-items: center; .submissions_key { display: flex; gap: 1rem; align-items: center; >div { display: flex; gap: 3px; align-items: center; p { font-size: 12px; } .subkey { height: 10px; width: 10px; border-radius: 50%; } .corr_key { background-color: var(--text); } .incorr_key { background-color: var(--ssqred); } .improve_key { background-color: var(--ssqorange); } .notsaid_key { background-color: var(--text); opacity: .5; } } } } .square_submissions_wrap { display: flex; flex-direction: column; table { font-size: 12px !important; margin: 0 -24px; tbody>tr>td { height: 42px; font-size: 12px; } tbody>tr>td, thead>tr>th { text-align: center; >span { justify-content: center; } img { height: 22px; max-width: 22px; } .lvldiv { margin-left: auto; margin-right: auto; } } tbody>tr>td.response, thead>tr>th.response { text-transform: unset; text-align: left; >span { justify-content: start; } span.response { display: flex; flex-wrap: wrap; gap: 4px; font-size: 14px; .incorr { color: var(--ssqred); } .notsaid { opacity: .5; } .improve { color: var(--ssqorange); } } } tbody>tr>td.response { font-size: 16px; } } } } } } .noanalysis.analyticsinner { display: flex; flex-direction: column; flex: 1; padding: 24px; border: 2px dashed var(--border); height: 100%; justify-content: center; align-items: center; text-align: center; font-size: 22px; font-family: 'Roboto Slab'; } } } } } .page .course_status .course_content .course_content_header .toggle_timeline_wrapper .vicon+span { opacity: 1; line-height: normal; } a.bp-suggestions-mention { pointer-events: none !important; cursor: text; } div#quiz_popup { .confirmpopup_content { .buttons_wrapper { display: flex; gap: 1rem; min-width: 350px; justify-content: end; margin-top: 1rem; } } } .minimal .profile_menu .menu_items #content { position: unset; } .minimal .profile_menu .menu_items #content.is_active { position: relative; } .page .portal .portal_body .activity_list .activity_item .activity_body .activity_content .activity_attachments img { max-height: 500px; } .ssqbp_myprofile .uploader .upload_file { cursor: pointer; } @import url("tablet.css"); @import url("phone.css");