img[src*="monespacemt_png-png"] { content: url("/site/documents/d/iam-portal/icon-png-2-c76b766e.png"); width: 58px; height: 58px; }
img[src*="logo-injoy-fond-1-jpg"] { content: url("/site/documents/d/iam-portal/logoinjoyapp-png-c76b766e.png"); width: 58px; height: 58px; }
img[src*="mttv-png-3"] { content: url("/site/documents/d/iam-portal/icon-majeure-png-c76b766e.png"); width: 58px; height: 58px; }

#p_p_id_com_liferay_layout_content_page_editor_web_internal_portlet_ContentPageEditorPortlet_ .portlet-content { }
#p_p_id_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_footermenua_ .portlet-content { }
#p_p_id_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_footermenuentreprises_ .portlet-content { }
#p_p_id_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_footermenugroupemaroctelecom_ .portlet-content { }
#p_p_id_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_footermenuprofessionnels_ .portlet-content { }

:root { --container-max-sm: 540px; --h4-font-size: 1rem; --font-weight-bold: 700; --rounded-pill: 50rem; --display4-weight: 300; --danger: #da1414; --display2-size: 5.5rem; --body-bg: #fff; --display2-weight: 300; --display1-weight: 300; --display3-weight: 300; --box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075); --font-weight-lighter: lighter; --h3-font-size: 1.1875rem; --btn-outline-primary-hover-border-color: #0b5fff; --transition-collapse: height .35s ease; --blockquote-small-color: #6b6c7e; --gray-200: #f1f2f5; --btn-secondary-hover-background-color: #f7f8f9; --gray-600: #6b6c7e; --secondary: #6b6c7e; --btn-outline-primary-color: #0b5fff; --btn-link-hover-color: #004ad7; --hr-border-color: rgba(0, 0, 0, .1); --hr-border-margin-y: 1rem; --light: #f1f2f5; --btn-outline-primary-hover-color: #0b5fff; --btn-secondary-background-color: #fff; --btn-outline-secondary-hover-border-color: transparent; --display3-size: 4.5rem; --primary: #0b5fff; --container-max-md: 720px; --border-radius-sm: 0.1875rem; --display-line-height: 1.2; --h6-font-size: 0.8125rem; --h2-font-size: 1.375rem; --aspect-ratio-4-to-3: 75%; --spacer-10: 10rem; --font-weight-semi-bold: 600; --font-weight-normal: 400; --dark: #272833; --blockquote-small-font-size: 80%; --h5-font-size: 0.875rem; --blockquote-font-size: 1.25rem; --brand-color-3: #2e5aac; --brand-color-2: #6b6c7e; --brand-color-1: #0b5fff; --transition-fade: opacity .15s linear; --display4-size: 3.5rem; --border-radius-lg: 0.375rem; --btn-primary-hover-color: #fff; --display1-size: 6rem; --brand-color-4: #30313f; --black: #000; --lighter: #f7f8f9; --gray-300: #e7e7ed; --gray-700: #495057; --btn-secondary-border-color: #cdced9; --btn-outline-secondary-hover-color: #272833; --body-color: #1c1c24; --btn-outline-secondary-hover-background-color: rgba(39, 40, 51, 0.03); --btn-primary-color: #fff; --btn-secondary-color: #6b6c7e; --btn-secondary-hover-border-color: #cdced9; --box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175); --container-max-lg: 960px; --btn-outline-primary-border-color: #0b5fff; --aspect-ratio: 100%; --gray-dark: #393a4a; --aspect-ratio-16-to-9: 56.25%; --box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); --white: #fff; --warning: #b95000; --info: #2e5aac; --hr-border-width: 1px; --btn-link-color: #0b5fff; --gray-400: #cdced9; --gray-800: #393a4a; --btn-outline-primary-hover-background-color: #f0f5ff; --btn-primary-hover-background-color: #0053f0; --btn-primary-background-color: #0b5fff; --success: #287d3c; --font-size-sm: 0.875rem; --btn-primary-border-color: #0b5fff; --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; --spacer-0: 0; --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --lead-font-size: 1.25rem; --border-radius: 0.25rem; --spacer-9: 9rem; --font-weight-light: 300; --btn-secondary-hover-color: #272833; --spacer-2: 0.5rem; --spacer-1: 0.25rem; --spacer-4: 1.5rem; --spacer-3: 1rem; --spacer-6: 4.5rem; --spacer-5: 3rem; --spacer-8: 7.5rem; --border-radius-circle: 50%; --spacer-7: 6rem; --font-size-lg: 1.125rem; --aspect-ratio-8-to-3: 37.5%; --font-family-sans-serif: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; --gray-100: #f7f8f9; --font-weight-bolder: 900; --container-max-xl: 1248px; --btn-outline-secondary-color: #6b6c7e; --gray-500: #a7a9bc; --h1-font-size: 1.625rem; --gray-900: #272833; --text-muted: #a7a9bc; --btn-primary-hover-border-color: transparent; --btn-outline-secondary-border-color: #cdced9; --lead-font-weight: 300; --font-size-base: 0.875rem; }

@keyframes shift-rightwards { 
  0% { transform: translateX(-100%); }
  40% { transform: translateX(0%); }
  60% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}
.lfr-spa-loading-bar { background: var(--primary); display: none; height: 2px; left: 0px; position: fixed; right: 0px; top: 0px; transform: translateX(100%); z-index: 2000; }
.lfr-spa-loading .lfr-spa-loading-bar { animation: 1s ease-in-out 0.4s infinite normal none running shift-rightwards; display: block; }

body.modal-open { overflow: hidden; }
.wp-modal { z-index: 10000; position: fixed; inset: 0px; background-color: rgba(0, 0, 0, 0.75); overflow: auto; }
.wp-modal > .wp-modal-wrapper-outer { display: flex; height: 100%; }
.wp-modal > .wp-modal-wrapper-outer > .wp-modal-wrapper-inner { margin: auto; max-height: 100%; display: flex; flex-direction: column; }
.wp-modal > .wp-modal-wrapper-outer > .wp-modal-wrapper-inner > .wp-modal-block { display: flex; flex-direction: column; max-width: 30em; max-height: 50em; border: 1px solid rgb(224, 224, 224); border-radius: 2px; box-shadow: black 0px 0.2em 2em; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); margin: 1em; }
.wp-modal-block > .wp-modal-title { border-bottom: 2px solid rgb(16, 172, 255); color: rgb(16, 172, 255); padding: 0.7em 0.6em; line-height: 1.2em; font-size: 125%; flex-shrink: 0; display: flex; flex-direction: row; align-items: center; }
.wp-modal-title > .wp-modal-title-icon { background-size: 2em 2em; background-position: 50% 50%; background-repeat: no-repeat; width: 2em; height: 2em; flex-shrink: 0; flex-grow: 0; margin-right: 0.7em; }
.wp-modal-title > .wp-modal-title-text { flex-grow: 1; }
wp-modal-block > .wp-modal-content { overflow: auto; }
.wp-modal-content > .wp-modal-text { padding: 0.7em 0.6em; }
.wp-modal-block > .wp-modal-buttons { flex-shrink: 0; display: flex; flex-direction: row; border-top: 1px solid rgb(224, 224, 224); }
.wp-modal-buttons > .wp-modal-button { flex: 1 1 0%; border-right: 1px solid rgb(224, 224, 224); cursor: pointer; font-weight: normal; line-height: 1.2em; padding: 0.7em 0.6em; text-align: center; vertical-align: middle; white-space: nowrap; }
.wp-modal-buttons > .wp-modal-button:hover { background-color: rgb(240, 240, 240); }
.wp-modal-buttons > .wp-modal-button:last-child { border-right: 0px; }
.wp-popup { position: absolute; inset: 0px; font-family: arial; text-align: center; padding-left: 10px; padding-right: 10px; }
.wp-popup .wp-popup-content { display: flex; flex-flow: column; justify-content: center; align-items: center; height: 100%; margin: 0px auto; max-width: 350px; min-width: 231px; }
.wp-popup .wp-popup-title { font: bold 18px arial; margin-bottom: 12px; }
.wp-popup .wp-popup-message { font: 15px arial; color: rgb(119, 119, 119); margin-bottom: 25px; }
.wp-popup .wp-popup-example { background-color: rgb(255, 255, 255); height: 80px; box-shadow: rgb(136, 136, 136) 0px 0px 20px; margin-bottom: 20px; flex-flow: row; display: flex; align-self: stretch; }
.wp-popup .wp-popup-example .wp-popup-icon { flex: 0 0 80px; width: 80px; height: 80px; background-color: rgb(239, 239, 239); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; }
.wp-popup #logo.wp-popup-icon { background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; }
.wp-popup .wp-popup-example-text { text-align: left; flex: 1 1 auto; padding: 10px 17px 8px; display: flex; flex-flow: column; }
.wp-popup .wp-popup-example-text > div { flex: 0 1 auto; }
.wp-popup .wp-popup-example-text .wp-popup-example-title { font: 13px arial; color: rgb(60, 60, 60); margin-bottom: 5px; }
.wp-popup .wp-popup-example-text .wp-popup-example-message { flex-grow: 1; font: 12px arial; color: rgb(60, 60, 60); }
.wp-popup .wp-popup-example-text .wp-popup-example-url { font: 10px arial; color: rgb(157, 157, 157); }
.wp-popup .wp-popup-disclaimer { font: italic 10px arial; color: rgb(176, 176, 176); }
.wp-popup .wp-popup-buttons { padding: 20px; }
.wp-popup .wp-popup-buttons .wp-popup-negative-button { border: none; background: none; color: rgb(119, 119, 119); text-decoration: underline; padding: 15px; font-size: 12px; cursor: pointer; }
.wp-popup .wp-popup-buttons .wp-popup-positive-button { border: none; background: rgb(26, 115, 232); color: white; font-weight: bold; text-decoration: none; border-radius: 5px; padding: 15px; cursor: pointer; font-size: 20px; }

.wp-switch { position: relative; display: inline-block; vertical-align: middle; width: auto; height: auto; padding: 0.2em; border-radius: 1.25em; box-shadow: rgba(0, 0, 0, 0.05) 0px -1px inset, rgba(0, 0, 0, 0.05) 0px 1px 1px inset; cursor: pointer; background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.3) 1.5em); }
.wp-switch-input { display: none; }
.wp-switch-label { position: relative; display: block; height: 2em; font-size: 60%; text-transform: uppercase; background: rgb(236, 238, 239); border-radius: inherit; box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 2px inset, rgba(0, 0, 0, 0.15) 0px 0px 2px inset; transition: opacity 0.15s ease-out 0s, background; }
.wp-switch-label::after, .wp-switch-label::before { line-height: 0; clear: both; transition: inherit; white-space: nowrap; display: inline-block; }
.wp-switch-label::before { content: attr(data-off); right: 1em; color: rgb(170, 170, 170); text-shadow: rgba(255, 255, 255, 0.5) 0px 1px; float: right; margin-top: 1em; margin-right: 1em; margin-left: 2.5em; }
.wp-switch-label::after { content: attr(data-on); left: 1em; color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.2) 0px 1px; opacity: 0; float: left; margin-top: 0px; margin-left: 1em; margin-right: 2.5em; }
.wp-switch-input:checked ~ .wp-switch-label { background: rgb(71, 168, 216); box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 2px inset, rgba(0, 0, 0, 0.2) 0px 0px 3px inset; }
.wp-switch-input:checked ~ .wp-switch-label::before { opacity: 0; }
.wp-switch-input:checked ~ .wp-switch-label::after { opacity: 1; }
.wp-switch-handle { position: absolute; top: 0.24em; left: 0.24em; width: 1.125em; height: 1.125em; background: linear-gradient(rgb(255, 255, 255) 40%, rgb(240, 240, 240)) rgb(255, 255, 255); border-radius: 100%; box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 5px; transition: left 0.15s ease-out 0s, margin-left; }
.wp-switch-handle::before { content: ""; position: absolute; top: 0px; left: 0px; margin: 0.1875em 0px 0px 0.1875em; width: 0.75em; height: 0.75em; background: linear-gradient(rgb(238, 238, 238), rgb(255, 255, 255)) rgb(249, 249, 249); border-radius: 100%; box-shadow: rgba(0, 0, 0, 0.02) 0px 1px inset; }
.wp-switch-input:checked ~ .wp-switch-handle { left: 100%; margin-left: -1.365em; box-shadow: rgba(0, 0, 0, 0.2) -1px 1px 5px; }
.wp-switch-input:disabled ~ .wp-switch-handle { background-image: linear-gradient(silver 40%, grey); }
.wp-switch-input:disabled ~ .wp-switch-handle::before { background: rgb(176, 176, 176); }
.wp-switch-input:disabled ~ .wp-switch-label { background: silver; }
.wp-switch-input:disabled ~ .wp-switch-label::before { color: rgb(238, 238, 238); }
.wp-switch-off-gray > .wp-switch-label { background: rgb(236, 238, 239); }
.wp-switch-off-gray > .wp-switch-label::before { color: rgb(170, 170, 170); text-shadow: rgba(255, 255, 255, 0.5) 0px 1px; }
.wp-switch-off-grey > .wp-switch-label { background: rgb(236, 238, 239); }
.wp-switch-off-grey > .wp-switch-label::before { color: rgb(170, 170, 170); text-shadow: rgba(255, 255, 255, 0.5) 0px 1px; }
.wp-switch-off-red > .wp-switch-label { background: rgb(237, 33, 33); }
.wp-switch-off-red > .wp-switch-label::before { color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.2) 0px 1px; }
.wp-switch-on-green > .wp-switch-input:checked ~ .wp-switch-label { background: rgb(79, 184, 69); text-shadow: rgba(0, 0, 0, 0.2) 0px 1px; }
.wp-switch-on-blue > .wp-switch-input:checked ~ .wp-switch-label { background: rgb(71, 168, 216); text-shadow: rgba(0, 0, 0, 0.2) 0px 1px; }

.wp-tag-switch { position: relative; display: inline-block; vertical-align: middle; width: auto; height: auto; padding: 0.2em; border-radius: 1.25em; box-shadow: rgba(0, 0, 0, 0.05) 0px -1px inset, rgba(0, 0, 0, 0.05) 0px 1px 1px inset; cursor: pointer; background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.3) 1.5em); }
.wp-tag-switch-input { display: none !important; }
.wp-tag-switch-label { position: relative; display: block; height: 2em; font-size: 60%; text-transform: uppercase; background: rgb(236, 238, 239); border-radius: inherit; box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 2px inset, rgba(0, 0, 0, 0.15) 0px 0px 2px inset; transition: opacity 0.15s ease-out 0s, background; }
.wp-tag-switch-label::after, .wp-tag-switch-label::before { line-height: 0; clear: both; transition: inherit; white-space: nowrap; display: inline-block; }
.wp-tag-switch-label::before { content: attr(data-off); right: 1em; color: rgb(170, 170, 170); text-shadow: rgba(255, 255, 255, 0.5) 0px 1px; float: right; margin-top: 1em; margin-right: 1em; margin-left: 2.5em; }
.wp-tag-switch-label::after { content: attr(data-on); left: 1em; color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.2) 0px 1px; opacity: 0; float: left; margin-top: 0px; margin-left: 1em; margin-right: 2.5em; }
.wp-tag-switch-input:checked ~ .wp-tag-switch-label { background: rgb(71, 168, 216); box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 2px inset, rgba(0, 0, 0, 0.2) 0px 0px 3px inset; }
.wp-tag-switch-input:checked ~ .wp-tag-switch-label::before { opacity: 0; }
.wp-tag-switch-input:checked ~ .wp-tag-switch-label::after { opacity: 1; }
.wp-tag-switch-handle { position: absolute; top: 0.24em; left: 0.24em; width: 1.125em; height: 1.125em; background: linear-gradient(rgb(255, 255, 255) 40%, rgb(240, 240, 240)) rgb(255, 255, 255); border-radius: 100%; box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 5px; transition: left 0.15s ease-out 0s, margin-left; }
.wp-tag-switch-handle::before { content: ""; position: absolute; top: 0px; left: 0px; margin: 0.1875em 0px 0px 0.1875em; width: 0.75em; height: 0.75em; background: linear-gradient(rgb(238, 238, 238), rgb(255, 255, 255)) rgb(249, 249, 249); border-radius: 100%; box-shadow: rgba(0, 0, 0, 0.02) 0px 1px inset; }
.wp-tag-switch-input:checked ~ .wp-tag-switch-handle { left: 100%; margin-left: -1.365em; box-shadow: rgba(0, 0, 0, 0.2) -1px 1px 5px; }
.wp-tag-switch-input:disabled ~ .wp-tag-switch-handle { background-image: linear-gradient(silver 40%, grey); }
.wp-tag-switch-input:disabled ~ .wp-tag-switch-handle::before { background: rgb(176, 176, 176); }
.wp-tag-switch-input:disabled ~ .wp-tag-switch-label { background: silver; }
.wp-tag-switch-input:disabled ~ .wp-tag-switch-label::before { color: rgb(238, 238, 238); }
.wp-tag-switch-off-gray > .wp-tag-switch-label { background: rgb(236, 238, 239); }
.wp-tag-switch-off-gray > .wp-tag-switch-label::before { color: rgb(170, 170, 170); text-shadow: rgba(255, 255, 255, 0.5) 0px 1px; }
.wp-tag-switch-off-grey > .wp-tag-switch-label { background: rgb(236, 238, 239); }
.wp-tag-switch-off-grey > .wp-tag-switch-label::before { color: rgb(170, 170, 170); text-shadow: rgba(255, 255, 255, 0.5) 0px 1px; }
.wp-tag-switch-off-red > .wp-tag-switch-label { background: rgb(237, 33, 33); }
.wp-tag-switch-off-red > .wp-tag-switch-label::before { color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.2) 0px 1px; }
.wp-tag-switch-on-green > .wp-tag-switch-input:checked ~ .wp-tag-switch-label { background: rgb(79, 184, 69); text-shadow: rgba(0, 0, 0, 0.2) 0px 1px; }
.wp-tag-switch-on-blue > .wp-tag-switch-input:checked ~ .wp-tag-switch-label { background: rgb(71, 168, 216); text-shadow: rgba(0, 0, 0, 0.2) 0px 1px; }

header .first-nav > .user-personal-bar > .align-items-center { height: 38px; }
header .first-nav { height: 38px; box-sizing: content-box; }
#navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_principalmenu li.active a::after { left: 0px !important; width: 100%; }
#navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_principalmenu li a::after { content: " "; position: absolute; bottom: -17px; height: 3px; border-radius: 4px 4px 0px 0px; background-color: rgb(224, 8, 0); z-index: 99; width: 0px; left: 50%; transition: width 0.3s ease 0s, left 0.3s ease 0s; }
#navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_principalmenu li a:hover::after { width: 100%; left: 0px; }
#navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_principalmenu li a { overflow: inherit; position: relative !important; }
#navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_principalmenu .dropdown-item.label { font-size: 12px; padding: 6px 9px; }
@media (max-width: 768px) {
  #navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_principalmenu .dropdown-toggle { padding: 0.5rem 1rem; color: inherit; text-decoration: none; background: none; border: none; max-width: 90px; }
  #navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_principalmenu .dropdown-toggle:lang(ar) { font-size: 13px; padding: 0.5rem !important; }
  #navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_principalmenu .dropdown-menu { width: 100%; border: none; box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 6px; }
  #navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_principalmenu .dropdown-toggle::after { display: none; }
}

header .first-nav > .user-personal-bar > .align-items-center { height: 38px; }
header .first-nav { height: 38px; box-sizing: content-box; }
#navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_principalmenu li.active a::after { left: 0px !important; width: 100%; }
#navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_principalmenu li a::after { content: " "; position: absolute; bottom: -17px; height: 3px; border-radius: 4px 4px 0px 0px; background-color: rgb(224, 8, 0); z-index: 99; width: 0px; left: 50%; transition: width 0.3s ease 0s, left 0.3s ease 0s; }
#navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_principalmenu li a:hover::after { width: 100%; left: 0px; }
#navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_principalmenu li a { overflow: inherit; position: relative !important; }
#navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_principalmenu .dropdown-item.label { font-size: 12px; padding: 6px 9px; }
@media (max-width: 768px) {
  #navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_principalmenu .dropdown-toggle { padding: 0.5rem 1rem; color: inherit; text-decoration: none; background: none; border: none; max-width: 90px; }
  #navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_principalmenu .dropdown-toggle:lang(ar) { font-size: 13px; padding: 0.5rem !important; }
  #navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_principalmenu .dropdown-menu { width: 100%; border: none; box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 6px; }
  #navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_principalmenu .dropdown-toggle::after { display: none; }
}

.minium-main-navigation.secondary-navigation .mega-dropdown.active > a { padding-left: 0.5rem; padding-right: 0.5rem; color: rgb(224, 8, 0) !important; }
.secondary-navigation .mega-dropdown.show a.nav-link.dropdown-toggle { color: rgb(224, 8, 0) !important; }
.secondary-navigation .show a.nav-link.dropdown-toggle svg { rotate: 180deg; }
.secondary-navigation .show a.nav-link.dropdown-toggle svg path { fill: rgb(224, 8, 0); }
.secondary-navigation a.nav-link.dropdown-toggle { color: rgb(224, 8, 0) !important; font-size: 16px; }
.secondary-navigation .dropdown-menu.show a { position: relative; width: auto; display: inline-block; text-decoration: none; }
.secondary-navigation .dropdown-menu.show a::after { bottom: 0px; content: ""; display: block; height: 2px; left: 50%; background: rgb(198, 12, 48); transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0px; position: relative; }
.secondary-navigation .dropdown-menu.show a:hover::after { width: 100%; left: 0px; }
.secondary-navigation .navbar-nav .nav-item { font-size: 14px; }
.secondary-navigation .dropdown-menu .nav-col { min-width: 300px !important; }
.secondary-navigation .secondary-nav-container .col { padding-left: 0px; padding-right: 0px; }
@media screen and (min-width: 992px) {
  .secondary-navigation .dropdown-menu .row > div:not(:last-child) { border-right: 1px solid rgb(234, 234, 234); }
  .secondary-navigation .mega-dropdown .menu-banner { border-left: unset !important; }
}
@media screen and (max-width: 991px) {
  .secondary-navigation .dropdown-menu .row > div:first-child { border-right: 1px solid rgb(234, 234, 234); }
  #portlet_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_secondarymenuparticulier:lang(ar) .collapse.navbar-collapse ul li:last-child a::before { right: 31%; left: auto; }
}
@media screen and (min-width: 1440px) {
  .secondary-navigation .secondary-nav-container { width: 1360px; padding: 0px 69px; justify-content: flex-start; gap: 15px; }
  .secondary-navigation .dropdown-menu.show { display: flex; justify-content: center; }
  .secondary-navigation .dropdown-menu .nav-col { color-scheme: unset; forced-color-adjust: unset; mask: unset; math-depth: unset; position: unset; position-anchor: unset; appearance: unset; color: unset; font: unset; font-palette: unset; font-synthesis: unset; inset-area: unset; text-orientation: unset; text-rendering: unset; text-spacing-trim: unset; -webkit-font-smoothing: unset; -webkit-locale: unset; -webkit-text-orientation: unset; -webkit-writing-mode: unset; writing-mode: unset; zoom: unset; accent-color: unset; place-content: unset; place-items: unset; place-self: unset; alignment-baseline: unset; anchor-name: unset; animation-composition: unset; animation: unset; app-region: unset; aspect-ratio: unset; backdrop-filter: unset; backface-visibility: unset; background: unset; background-blend-mode: unset; baseline-shift: unset; baseline-source: unset; block-size: unset; border-block: unset; border: unset; border-radius: unset; border-collapse: unset; border-end-end-radius: unset; border-end-start-radius: unset; border-inline: unset; border-start-end-radius: unset; border-start-start-radius: unset; inset: unset; box-shadow: unset; box-sizing: unset; break-after: unset; break-before: unset; break-inside: unset; buffered-rendering: unset; caption-side: unset; caret-color: unset; clear: unset; clip: unset; clip-path: unset; clip-rule: unset; color-interpolation: unset; color-interpolation-filters: unset; color-rendering: unset; columns: unset; column-fill: unset; gap: unset; column-rule: unset; column-span: unset; contain: unset; contain-intrinsic-block-size: unset; contain-intrinsic-size: unset; contain-intrinsic-inline-size: unset; container: unset; content: unset; content-visibility: unset; counter-increment: unset; counter-reset: unset; counter-set: unset; cursor: unset; cx: unset; cy: unset; d: unset; display: unset; dominant-baseline: unset; empty-cells: unset; field-sizing: unset; fill: unset; fill-opacity: unset; fill-rule: unset; filter: unset; flex: 1 1 0px; flex-flow: unset; float: unset; flood-color: unset; flood-opacity: unset; grid: unset; grid-area: unset; height: unset; hyphenate-character: unset; hyphenate-limit-chars: unset; hyphens: unset; image-orientation: unset; image-rendering: unset; initial-letter: unset; inline-size: unset; inset-block: unset; inset-inline: unset; isolation: unset; letter-spacing: unset; lighting-color: unset; line-break: unset; list-style: unset; margin-block: unset; margin: unset; margin-inline: unset; marker: unset; mask-type: unset; math-shift: unset; math-style: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; min-width: auto !important; mix-blend-mode: unset; object-fit: unset; object-position: unset; object-view-box: unset; offset: unset; opacity: unset; order: unset; orphans: unset; outline: unset; outline-offset: unset; overflow-anchor: unset; overflow-clip-margin: unset; overflow-wrap: unset; overflow: unset; overlay: unset; overscroll-behavior-block: unset; overscroll-behavior-inline: unset; overscroll-behavior: unset; padding-block: unset; padding-bottom: unset; padding-inline: unset; padding-left: unset; padding-right: 15px; padding-top: unset; page: unset; page-orientation: unset; paint-order: unset; perspective: unset; perspective-origin: unset; pointer-events: unset; position-try: unset; position-visibility: unset; quotes: unset; r: unset; resize: unset; rotate: unset; ruby-position: unset; rx: unset; ry: unset; scale: unset; scroll-behavior: unset; scroll-margin-block: unset; scroll-margin: unset; scroll-margin-inline: unset; scroll-padding-block: unset; scroll-padding: unset; scroll-padding-inline: unset; scroll-snap-align: unset; scroll-snap-stop: unset; scroll-snap-type: unset; scroll-timeline: unset; scrollbar-color: unset; scrollbar-gutter: unset; scrollbar-width: unset; shape-image-threshold: unset; shape-margin: unset; shape-outside: unset; shape-rendering: unset; size: unset; speak: unset; stop-color: unset; stop-opacity: unset; stroke: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; tab-size: unset; table-layout: unset; text-align: unset; text-align-last: unset; text-anchor: unset; text-combine-upright: unset; text-decoration: unset; text-decoration-skip-ink: unset; text-emphasis: unset; text-emphasis-position: unset; text-indent: unset; text-overflow: unset; text-shadow: unset; text-size-adjust: unset; text-transform: unset; text-underline-offset: unset; text-underline-position: unset; white-space: unset; timeline-scope: unset; touch-action: unset; transform: unset; transform-box: unset; transform-origin: unset; transform-style: unset; transition: unset; translate: unset; user-select: unset; vector-effect: unset; vertical-align: unset; view-timeline: unset; view-transition-class: unset; view-transition-name: unset; visibility: unset; border-spacing: unset; -webkit-box-align: unset; -webkit-box-decoration-break: unset; -webkit-box-direction: unset; -webkit-box-flex: unset; -webkit-box-ordinal-group: unset; -webkit-box-orient: unset; -webkit-box-pack: unset; -webkit-box-reflect: unset; -webkit-line-break: unset; -webkit-line-clamp: unset; -webkit-mask-box-image: unset; -webkit-print-color-adjust: unset; -webkit-rtl-ordering: unset; -webkit-ruby-position: unset; -webkit-tap-highlight-color: unset; -webkit-text-combine: unset; -webkit-text-decorations-in-effect: unset; -webkit-text-fill-color: unset; -webkit-text-security: unset; -webkit-text-stroke: unset; -webkit-user-drag: unset; widows: unset; width: 0px; will-change: unset; word-break: unset; word-spacing: unset; x: unset; y: unset; z-index: unset; }
  .secondary-navigation .mega-dropdown .menu-banner { padding-left: 0px !important; }
  .secondary-navigation .mega-dropdown .menu-banner img { max-width: 350px; }
}
.secondary-navigation .dropdown-menu.show .row.secondary-nav-container a[href$="#"]::after { display: none; }
.secondary-navigation .dropdown-menu.show .row.secondary-nav-container a[href$="#"] { cursor: default; }
#portlet_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_secondarymenugroupemaroctelecom .navbar-nav .nav-item:last-child .nav-link { color: rgb(224, 8, 0) !important; }

@keyframes moveLeftActive { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(100%); }
}
@keyframes moveLeft { 
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0px); }
}
@keyframes moveRightActive { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-100%); }
}
@keyframes moveRight { 
  0% { transform: translateX(100%); }
  100% { transform: translateX(0px); }
}
:lang(ar) .component-slider .slider-text { width: 94%; }
.component-slider {
  --footer-gap: 8px; --item-button-height: 3px; --toggle-button-width: 24px;
  @media (max-width: 575.98px) {
  & { margin-left: 20px !important; margin-right: 20px !important; }
}
}
.component-slider .carousel { position: relative; }
.component-slider .carousel-navigation {
  position: absolute; bottom: -5px;
  @media (max-width: 575.98px) {
  & { bottom: -15px; }
}
}
.component-slider .carousel-navigation li { float: left; padding: 0px 5px; }
.component-slider .carousel-navigation li::marker { display: none; content: ""; }
.component-slider .carousel-navigation li button { position: relative; background-color: rgb(187, 205, 225); border-radius: 50%; border: 0px; padding: 3px; }
.component-slider .carousel-navigation li button.active { background-color: rgb(255, 255, 255); }
.component-slider .carousel-caption { left: 20px; text-align: left; position: relative; bottom: 0px; top: 0px; padding-top: 30px; }
.component-slider .carousel-item { opacity: 0; transition: transform 0.3s ease 0s; will-change: transform; }
.component-slider .carousel-item .card { background: linear-gradient(0deg, rgb(9, 71, 122) 0%, rgb(1, 89, 187) 100%); }
.component-slider .carousel-item.move-right, .component-slider .carousel-item.move-left { animation-duration: 0.6s; animation-iteration-count: 1; display: block; }
.component-slider .carousel-item.active, .component-slider .carousel-item.move-left, .component-slider .carousel-item.move-right { opacity: 1; }
.component-slider .carousel-item.active { transform: translateX(0px); }
.component-slider .carousel-item.active.move-left { animation-name: moveLeftActive; }
.component-slider .carousel-item.move-left { animation-name: moveLeft; }
.component-slider .carousel-item.active.move-right { animation-name: moveRightActive; }
.component-slider .carousel-item.move-right { animation-name: moveRight; }
.component-slider .carousel-control-next, .component-slider .carousel-control-prev { background-color: transparent; border: 0px; }
.component-slider .carousel-item .current-slide {
  padding: 8px; bottom: 32px; transform: translateY(-50%); width: auto; height: 30px; display: inline-block; top: inherit; right: inherit; left: 125px; position: absolute; font-family: Montserrat-Bold; font-size: 18px; font-weight: 700; color: rgb(255, 255, 255);
  @media (max-width: 575.98px) {
  & { left: 44%; }
}
}
.component-slider .carousel-control { padding: 8px; bottom: 16px; transform: translateY(-50%); width: auto; height: 30px; display: inline-block; top: inherit; right: inherit; }
.component-slider .carousel-control-next {
  left: 200px;
  @media (max-width: 575.98px) {
  & { left: 85%; }
}
}
.component-slider .carousel-control-prev {
  left: 60px;
  @media (max-width: 575.98px) {
  & { left: 5%; }
}
}
.component-slider .carousel-control:focus-visible { border-radius: 4px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px, rgb(82, 142, 255) 0px 0px 0px 4px; outline: none; }
.component-slider .carousel-footer { bottom: 10px; display: flex; gap: var(--footer-gap); justify-content: center; left: 0px; padding-left: 0px; position: absolute; right: 0px; width: calc(100% - var(--toggle-button-width) - var(--footer-gap)); z-index: 15; }
.component-slider .carousel-toggle-button { aspect-ratio: 1 / 1; background: transparent; border: none; color: rgb(255, 255, 255); display: block; height: var(--toggle-button-width); opacity: 0; transition: opacity 0.6s ease 0s; width: var(--toggle-button-width); }
.component-slider .carousel-toggle-button--always-visible, .component-slider .carousel-toggle-button.stopped, .component-slider .carousel-toggle-button:focus-visible, .component-slider:hover .carousel-toggle-button { opacity: 1; }
.component-slider .carousel-toggle-button:focus-visible { border-radius: 4px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px, rgb(82, 142, 255) 0px 0px 0px 4px; opacity: 1; outline: none; }
.rtl .component-slider .carousel-item .card { text-align: right !important; direction: ltr; }
.component-slider button.carousel-control {
  border-radius: 100%; width: 40px; height: 40px; border: 2px solid rgb(255, 255, 255);
  @media (max-width: 575.98px) {
  & { border: none; top: 54%; }
}
}
.component-slider .current-slide.arabic { display: none !important; }
.component-slider:lang(ar) .current-slide.arabic {
  display: block !important;
  @media (max-width: 575.98px) {
  & { display: none !important; }
}
}
.component-slider:lang(ar) .current-slide.latin { display: none !important; }
.component-slider .current-slide .total { color: rgba(255, 255, 255, 0.5); font-family: Montserrat-Bold; font-size: 16px; font-weight: 700; }
.component-slider img { border-radius: 20px; }
.component-slider {
  & .img-mobile { }
  & .img-desktop { max-height: 453px; max-width: 1360px; }
}
.component-slider .slider-text {
  position: absolute; left: 4%; top: 23%; width: 40%;
  @media (max-width: 991.98px) {
  & { top: 13%; }
}
  @media (max-width: 575.98px) {
  & { width: 97%; text-align: center; top: 80%; left: 50%; transform: translate(-50%, -50%); }
}
}
.component-slider .slider-text h3 {
  font-size: 28px; margin-bottom: 20px; font-family: Montserrat-Medium;
  @media (max-width: 991.98px) {
  & { font-size: 16px; margin-bottom: 7px; }
}
  @media (max-width: 575px) {
  & { font-family: Montserrat-SemiBold; text-align: center !important; }
}
}
#wrapper:lang(ar) .component-slider .slider-text h1:lang(ar) { font-family: Tajawal-Bold, sans-serif; }
.component-slider .slider-text h1 {
  font-size: 29px; width: 430px; font-family: Montserrat-Bold; margin-bottom: 34px; line-height: 36px;
  @media (max-width: 1199.98px) {
  & { font-size: 24px; }
}
  @media (max-width: 991.98px) {
  & { width: auto; font-size: 12px; margin-bottom: 10px; line-height: 17px; }
}
  @media (max-width: 575px) {
  & { font-family: Montserrat-Medium; font-size: 12px; }
}
}
.component-slider .slider-text .btn-secondary.rounded-pill {
  padding: 14px 40px; font-family: Montserrat-Bold; height: 60px; font-size: 20px; background-color: rgb(255, 255, 255); color: rgb(224, 8, 0); border: none;
  @media (max-width: 991.98px) {
  & { padding: 3px 15px; height: 30px; font-size: 14px; font-family: Montserrat-Medium; }
}
}
@media (max-width: 575.98px) {
  .component-slider .gradient { background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); position: absolute; width: 100%; height: 70%; bottom: 0px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; }
}
.carousel .calls-numbers { position: absolute; right: 52%; bottom: 5%; }
.carousel .calls-numbers .call-contanier { display: flex; flex-direction: row; gap: 13px; }
.carousel .calls-numbers .call-contanier .call-text { font-family: Montserrat-medium; color: rgb(255, 255, 255); font-size: 16px; }
.carousel .calls-numbers .call-contanier .call-text a { color: rgb(255, 255, 255); }
.carousel .calls-numbers .call-contanier .icon { width: 50px; }
@media (max-width: 575px) {
  .carousel-navigation { margin-bottom: 7px; }
}
.component-slider .carousel-inner { touch-action: pan-y; user-select: none; }
.component-slider .carousel-item { pointer-events: none; }
.component-slider .carousel-item.active { pointer-events: auto; }
.has-edit-mode-menu .component-slider .slider-text .mobile-version h3 { font-size: 16px; margin-bottom: 5px; }
.has-edit-mode-menu .slider-text .mobile-version h1 { font-size: 16px; margin-bottom: 0px; }
.component-slider .mobile-version-indicator { font-size: 10px; padding: 2px 5px; margin-bottom: 5px; display: inline-block; }
.has-edit-mode-menu .component-slider .slider-text .mobile-version { margin-top: -31px; }
.component-slider:lang(ar) .carousel-item .current-slide { right: 124px; }
.component-slider:lang(ar) .carousel-control-next {
  right: 60px;
  @media (max-width: 575.98px) {
  & { right: auto; }
}
}
.component-slider:lang(ar) .carousel-control-prev {
  right: 200px;
  @media (max-width: 575.98px) {
  & { right: auto; }
}
}

.widget-title-link { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; margin-bottom: 15px; gap: 20px; }
.widget-title-link .title { font-size: 32px; font-family: Montserrat-Bold; }
#wrapper:lang(ar) .widget-title-link .title { font-family: Tajawal-Bold, sans-serif; }
.widget-title-link .see-all { text-align: end; font-size: 16px; font-family: Montserrat-SemiBold; cursor: pointer; color: rgb(224, 8, 0); text-decoration: underline !important; }
@media screen and (max-width: 767px) {
  .widget-title-link { align-items: flex-start; gap: 10px; margin-top: 20px; }
  .widget-title-link { margin-top: 20px; margin-bottom: 10px; }
  .widget-title-link .title { font-size: 14px; }
  .widget-title-link .see-all { font-size: 14px; }
}

.widget-offres-wrapper a.text-dark { font-size: 18px; font-family: Montserrat-SemiBold; text-align: center; padding: 0px; transition: all 0.3s ease 0s; }
.widget-offres-wrapper a.text-dark:hover { text-decoration: none; }
.card .text-dark { font-size: 13px !important; }
.widget-offres-wrapper { display: flex; flex-wrap: nowrap; overflow: auto; scrollbar-width: none; gap: 20px !important; }
.widget-offres-wrapper::-webkit-scrollbar { display: none; }
.widget-offres-wrapper .widget-offer-card { min-width: 204px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; padding: 25px; height: 150px; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; background: rgb(255, 255, 255); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px; position: relative; overflow: hidden; }
.widget-offres-wrapper .widget-offer-card:hover { box-shadow: rgba(0, 0, 0, 0.1) 0px 12px 24px; }
.widget-offres-wrapper .widget-offer-card::before { content: ""; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 3px; background: linear-gradient(90deg, rgb(198, 12, 48), rgb(25, 19, 41)); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s ease 0s; }
.widget-offres-wrapper .widget-offer-card:hover::before { transform: scaleX(1); }
.widget-offres-wrapper .widget-offer-card img { transition: all 0.4s ease 0s; }
.widget-offres-wrapper .widget-offer-card:hover img { transform: scale(1.1); filter: grayscale(0%); }
@keyframes cardReveal { 
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.widget-offres-wrapper.animated .widget-offer-card { animation: 0.6s ease 0s 1 normal forwards running cardReveal; }
.widget-offres-wrapper .widget-offer-card:nth-child(1) { animation-delay: 0.1s; }
.widget-offres-wrapper .widget-offer-card:nth-child(2) { animation-delay: 0.2s; }
.widget-offres-wrapper .widget-offer-card:nth-child(3) { animation-delay: 0.3s; }
.widget-offres-wrapper .widget-offer-card:nth-child(4) { animation-delay: 0.4s; }
.widget-offres-wrapper .widget-offer-card:nth-child(5) { animation-delay: 0.5s; }
@media screen and (max-width: 1200px) {
  .row.widget-offres-wrapper { justify-content: normal; }
}
@media screen and (max-width: 575px) {
  .widget-offres-wrapper img { width: 33px; height: 33px; }
  .row.widget-offres-wrapper { justify-content: normal; gap: 10px !important; }
  .widget-offres-wrapper .widget-offer-card { min-width: 38%; padding: 10px; height: 113px; gap: 10px; }
  .widget-offres-wrapper a.text-dark { font-size: 13px !important; }
  .widget-offres-wrapper .widget-offer-card:hover img { transform: scale(1.05); }
}
.modal-dialog.modal-dialog-centered .btn-close { border: 0px; background: unset; }

.info-fibre-container span, .info-fibre-container span a { color: rgb(224, 8, 0); text-decoration: underline; }
.p-container {
  display: flex; justify-content: flex-start;
  & p { text-align: left; font-family: Montserrat-Medium; font-size: 10px; line-height: 20px; color: rgb(40, 49, 58); margin-bottom: 0px; }
}

.component-html img { max-width: 100%; }

.widget-promo-jawal { display: flex; background: rgb(244, 243, 245); padding: 50px 0px; }
.pass-container { display: flex; align-items: center; gap: 23px; overflow: auto; }
.pass-cards-wrapper { display: flex; gap: 20px; scroll-behavior: smooth; scrollbar-width: none; }
.pass-cards-wrapper::-webkit-scrollbar { display: none; }
.promo-card {
  width: 210px; height: 210px; border-radius: 12px;
  @media screen and (max-width: 575px) {
  & { width: 130px; height: 130px; }
}
}
.widget-promo-jawal .hidden { display: none !important; }
.promo-img {
  position: relative; width: 210px; height: 210px; border-radius: 12px;
  @media screen and (max-width: 575px) {
  & { width: 130px; height: 130px; }
}
}
.widget-promo-jawal .promo-card-body {
  position: absolute; bottom: 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; padding: 18px;
  @media screen and (max-width: 575px) {
  & { padding: 10px; }
}
}
.widget-promo-jawal .pass-name { text-align: center; color: rgb(25, 19, 41); }
.widget-promo-jawal .pass-name a { font-family: Montserrat-Bold; font-size: 22px; color: rgb(25, 19, 41); text-align: center; }
.widget-promo-jawal .pass-description { color: rgb(25, 19, 41); display: flex; flex-direction: column; gap: 14px; }
.pass-cards-wrapper {
  max-width: 900px; overflow: auto;
  @media screen and (max-width: 575px) {
  & { gap: 10px; }
}
}
.widget-promo-jawal .pass-title {
  font-family: Montserrat-Bold; font-size: 32px; line-height: 36px;
  @media screen and (max-width: 575px) {
  & { font-size: 24px; }
}
}
.widget-promo-jawal .pass-subtitle { font-family: Montserrat-Medium; font-size: 20px; line-height: 24px; }
.widget-promo-jawal .pass-link { font-family: Montserrat-SemiBold; font-size: 16px; line-height: 28px; text-decoration: underline; cursor: pointer; }
.widget-promo-jawal .pass-link:hover { color: rgb(224, 8, 0); }
.widget-promo-jawal .pass-detail { font-family: Montserrat-Medium; font-size: 14px; line-height: 20px; color: rgb(25, 19, 41); cursor: pointer; display: flex; gap: 8px; align-items: center; }
.widget-promo-jawal .carousel-btn { min-width: 56px; height: 56px; border-radius: 50%; background: rgb(53, 55, 56); display: flex; justify-content: center; align-items: center; cursor: pointer; }
.widget-promo-jawal .carousel-btn:hover { background: rgb(224, 8, 0); }
.widget-promo-jawal .jawal-content-wrapper { display: flex; }
.widget-promo-jawal .carousel-btn:lang(ar) { transform: rotate(180deg); }
.widget-promo-jawal .card-link img:lang(ar) { transform: rotate(180deg); }
.widget-promo-jawal .card-link { align-items: center; }
@media screen and (max-width: 767px) {
  .widget-promo-jawal .jawal-content-wrapper { flex-direction: column; gap: 0px; }
  .widget-promo-jawal .carousel-btn { display: none; }
  .widget-promo-jawal { padding: 20px; }
  .widget-promo-jawal .pass-subtitle br { display: none; }
  .widget-promo-jawal .pass-subtitle { line-height: 20px; margin-bottom: 10px; }
  .widget-promo-jawal .pass-subtitle { font-size: 15px; line-height: 17px; }
}

.widget-help .row.animated .card { transition: transform 0.3s ease 0s; }
.widget-help .row.animated:hover .card { transition: transform 0.2s ease 0s; }
.widget-help .card.scale-up { transform: scale(1.05); box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px; }
.widget-help .card.scale-normal { transform: scale(1); }
.widget-help .card-title:hover { text-decoration: none; }
.widget-help .card-type-template .aspect-ratio { padding-bottom: calc(30%); }
.widget-help .card-title { font-size: 17px; font-family: Montserrat-SemiBold; text-align: center; color: rgb(10, 10, 10); }
.widget-help .col-md-3 { padding: 0px; }
.widget-help .row {
  display: flex; flex-wrap: nowrap; overflow: auto; margin-top: 40px; background: rgb(244, 243, 245); padding: 40px 20px; justify-content: center; border-radius: 24px; gap: 20px !important;
  @media screen and (max-width: 768px) {
  & { justify-content: flex-start; }
}
}
.widget-help .card-icon { max-width: 70px; max-height: 70px; }
.widget-help .card { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: 30px; min-width: 300px; height: 180px; transition: transform 0.3s ease 0s, box-shadow 0.3s ease 0s; transform-origin: center bottom; transform: scale(0.95); }
#wrapper:lang(ar) .widget-help .title { font-family: Tajawal-Bold, sans-serif; }
.widget-help .title { font-family: Montserrat-Bold; font-size: 30px; line-height: 33px; }
@media screen and (max-width: 767px) {
  .widget-help .card { min-width: 44%; height: 120px; padding: 5px; gap: 5px; }
  .widget-help .card-title { text-align: center; font-size: 10px; }
  .widget-help .row { margin-top: 20px; gap: 10px !important; }
  .widget-help .title { font-size: 20px; }
  .widget-help .card-icon { max-width: 50px; max-height: 50px; }
}

.clients-center-popup {
  position: fixed; display: flex; top: 0px; left: 0px; width: 100%; height: 100vh; z-index: 1050;
  & .clients-center-popup-content {
  display: flex; flex-direction: column; gap: 20px; padding: 0px 60px 50px; max-width: 764px; margin: auto; border-radius: 15px; background: rgb(255, 255, 255); position: relative; align-items: center; max-height: 90vh; overflow: auto;
  & .content-section { display: flex; flex-direction: column; gap: 20px; width: 100%; }
  & .section-seperator { width: 80%; min-height: 1px; background-color: rgb(208, 214, 219); border-radius: 12px; }
  & .popup-icon { display: block; margin: auto; }
  & h1.popup-title { font-family: Montserrat-Bold; font-size: 18px; text-align: center; }
  & .phone-numbers-wrapper {
  display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap;
  & .phone-number-item { display: flex; justify-content: center; align-items: center; gap: 10px; background: rgb(244, 243, 245); padding: 14px 15px; border-radius: 8px; font-family: Montserrat-Medium; font-size: 14px; line-height: 17px; text-align: center; flex-grow: 1; width: 0px; min-width: 215px; color: rgb(39, 39, 46); text-decoration: none; }
  & .phone-numbers-seperator {
  @media screen and (max-width: 622px) {
  & { display: none; }
}
}
}
  & .tarif { font-family: Montserrat-Medium; color: rgb(39, 39, 46); font-size: 14px; line-height: 17px; }
  @media screen and (max-width: 575px) {
  & { width: 100%; margin-left: 5px; margin-right: 5px; padding: 0px 30px 30px; gap: 12px; overflow: auto; max-height: 90vh; }
  & .tarifs-wrapper { flex-wrap: wrap; gap: 12px; }
  & .phone-numbers-wrapper {
  flex-wrap: wrap; gap: 12px;
  & .phone-number-item { width: 100%; }
}
  & .popup-close-btn {
  margin-right: -30px; top: 10px;
  & img { width: 28px; }
}
}
}
}
.popup-close-btn { position: sticky; top: 10px; border: none; background: none; align-self: flex-end; margin-right: -47px; }

.card-divertissement { min-width: 310px; max-width: 310px; opacity: 0; transform: translateY(30px); transition: all 0.6s ease 0s; border: 0px !important; }
.card-divertissement.animate-in { opacity: 1; transform: translateY(0px); }
.card-divertissement .card-body { display: flex; flex-direction: column; justify-content: space-between; position: absolute; height: 210px; bottom: -1px; width: 100%; backdrop-filter: blur(60px); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding-top: 14px; padding-bottom: 20px; }
.card-divertissement .card-divertissement-title { font-family: Montserrat-SemiBold; color: rgb(255, 255, 255); font-size: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.card-divertissement .card-divertissement-title:lang(ar) { font-family: Tajawal-ExtraBold, sans-serif !important; }
.card-divertissement .card-divertissement-description { font-family: Montserrat-Medium; color: rgb(255, 255, 255); font-size: 12px; line-height: 17px; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; height: 34px; }
.card-divertissement .card-divertissement-description p { margin-bottom: 6px; }
.card-divertissement .card-divertissement-starts { font-family: Montserrat-Medium; color: rgb(255, 255, 255); font-size: 14px; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.card-divertissement .discover-btn { background: transparent; color: rgb(255, 255, 255); border: 1px solid rgb(255, 255, 255); font-family: Montserrat-SemiBold; font-size: 16px; }
.card-divertissement .card-divertissement-subtitle { font-family: Montserrat-Medium; color: rgb(255, 255, 255); font-size: 16px; line-height: 20px; padding-bottom: 6px; }
.card-divertissement .divertissement-img { height: 397px; object-fit: cover; }
.card-divertissement .divertissement-card-footer { display: flex; justify-content: space-between; align-items: end; width: 100%; }
.card-divertissement .divertissement-card-footer img { object-fit: contain; max-height: 37px; max-width: 75px; }
[data-analytics-asset-title="Manhaj"] .divertissement-card-footer img, [data-analytics-asset-title="Maktabati"] .divertissement-card-footer img { background-color: rgb(255, 255, 255); border-radius: 7px; }
[data-analytics-asset-title="Maktabati"] .divertissement-card-footer img { max-width: 94px; max-height: 74px; height: 48px; padding: 6px; }
@media screen and (max-width: 767px) {
  .card-divertissement { min-width: 260px; max-width: 260px; }
  .card-divertissement .card-body { height: 220px; }
}
@media screen and (min-width: 360px) and (max-width: 767px) {
  .card-divertissement { min-width: 260px; }
  .card-divertissement .divertissement-img { max-height: 358px; }
}
@media screen and (max-width: 359px) {
  .card-divertissement { min-width: 230px; max-width: 230px; }
  .card-divertissement .divertissement-img { max-height: 318px; }
  .divertissement-container .row { gap: 20px; }
}

.card-divertissement { min-width: 310px; max-width: 310px; opacity: 0; transform: translateY(30px); transition: all 0.6s ease 0s; border: 0px !important; }
.card-divertissement.animate-in { opacity: 1; transform: translateY(0px); }
.card-divertissement .card-body { display: flex; flex-direction: column; justify-content: space-between; position: absolute; height: 210px; bottom: -1px; width: 100%; backdrop-filter: blur(60px); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding-top: 14px; padding-bottom: 20px; }
.card-divertissement .card-divertissement-title { font-family: Montserrat-SemiBold; color: rgb(255, 255, 255); font-size: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.card-divertissement .card-divertissement-title:lang(ar) { font-family: Tajawal-ExtraBold, sans-serif !important; }
.card-divertissement .card-divertissement-description { font-family: Montserrat-Medium; color: rgb(255, 255, 255); font-size: 12px; line-height: 17px; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; height: 34px; }
.card-divertissement .card-divertissement-description p { margin-bottom: 6px; }
.card-divertissement .card-divertissement-starts { font-family: Montserrat-Medium; color: rgb(255, 255, 255); font-size: 14px; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.card-divertissement .discover-btn { background: transparent; color: rgb(255, 255, 255); border: 1px solid rgb(255, 255, 255); font-family: Montserrat-SemiBold; font-size: 16px; }
.card-divertissement .card-divertissement-subtitle { font-family: Montserrat-Medium; color: rgb(255, 255, 255); font-size: 16px; line-height: 20px; padding-bottom: 6px; }
.card-divertissement .divertissement-img { height: 397px; object-fit: cover; }
.card-divertissement .divertissement-card-footer { display: flex; justify-content: space-between; align-items: end; width: 100%; }
.card-divertissement .divertissement-card-footer img { object-fit: contain; max-height: 37px; max-width: 75px; }
[data-analytics-asset-title="Manhaj"] .divertissement-card-footer img, [data-analytics-asset-title="Maktabati"] .divertissement-card-footer img { background-color: rgb(255, 255, 255); border-radius: 7px; }
[data-analytics-asset-title="Maktabati"] .divertissement-card-footer img { max-width: 94px; max-height: 74px; height: 48px; padding: 6px; }
@media screen and (max-width: 767px) {
  .card-divertissement { min-width: 260px; max-width: 260px; }
  .card-divertissement .card-body { height: 220px; }
}
@media screen and (min-width: 360px) and (max-width: 767px) {
  .card-divertissement { min-width: 260px; }
  .card-divertissement .divertissement-img { max-height: 358px; }
}
@media screen and (max-width: 359px) {
  .card-divertissement { min-width: 230px; max-width: 230px; }
  .card-divertissement .divertissement-img { max-height: 318px; }
  .divertissement-container .row { gap: 20px; }
}

.card-divertissement { min-width: 310px; max-width: 310px; opacity: 0; transform: translateY(30px); transition: all 0.6s ease 0s; border: 0px !important; }
.card-divertissement.animate-in { opacity: 1; transform: translateY(0px); }
.card-divertissement .card-body { display: flex; flex-direction: column; justify-content: space-between; position: absolute; height: 210px; bottom: -1px; width: 100%; backdrop-filter: blur(60px); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding-top: 14px; padding-bottom: 20px; }
.card-divertissement .card-divertissement-title { font-family: Montserrat-SemiBold; color: rgb(255, 255, 255); font-size: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.card-divertissement .card-divertissement-title:lang(ar) { font-family: Tajawal-ExtraBold, sans-serif !important; }
.card-divertissement .card-divertissement-description { font-family: Montserrat-Medium; color: rgb(255, 255, 255); font-size: 12px; line-height: 17px; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; height: 34px; }
.card-divertissement .card-divertissement-description p { margin-bottom: 6px; }
.card-divertissement .card-divertissement-starts { font-family: Montserrat-Medium; color: rgb(255, 255, 255); font-size: 14px; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.card-divertissement .discover-btn { background: transparent; color: rgb(255, 255, 255); border: 1px solid rgb(255, 255, 255); font-family: Montserrat-SemiBold; font-size: 16px; }
.card-divertissement .card-divertissement-subtitle { font-family: Montserrat-Medium; color: rgb(255, 255, 255); font-size: 16px; line-height: 20px; padding-bottom: 6px; }
.card-divertissement .divertissement-img { height: 397px; object-fit: cover; }
.card-divertissement .divertissement-card-footer { display: flex; justify-content: space-between; align-items: end; width: 100%; }
.card-divertissement .divertissement-card-footer img { object-fit: contain; max-height: 37px; max-width: 75px; }
[data-analytics-asset-title="Manhaj"] .divertissement-card-footer img, [data-analytics-asset-title="Maktabati"] .divertissement-card-footer img { background-color: rgb(255, 255, 255); border-radius: 7px; }
[data-analytics-asset-title="Maktabati"] .divertissement-card-footer img { max-width: 94px; max-height: 74px; height: 48px; padding: 6px; }
@media screen and (max-width: 767px) {
  .card-divertissement { min-width: 260px; max-width: 260px; }
  .card-divertissement .card-body { height: 220px; }
}
@media screen and (min-width: 360px) and (max-width: 767px) {
  .card-divertissement { min-width: 260px; }
  .card-divertissement .divertissement-img { max-height: 358px; }
}
@media screen and (max-width: 359px) {
  .card-divertissement { min-width: 230px; max-width: 230px; }
  .card-divertissement .divertissement-img { max-height: 318px; }
  .divertissement-container .row { gap: 20px; }
}

.card-divertissement { min-width: 310px; max-width: 310px; opacity: 0; transform: translateY(30px); transition: all 0.6s ease 0s; border: 0px !important; }
.card-divertissement.animate-in { opacity: 1; transform: translateY(0px); }
.card-divertissement .card-body { display: flex; flex-direction: column; justify-content: space-between; position: absolute; height: 210px; bottom: -1px; width: 100%; backdrop-filter: blur(60px); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding-top: 14px; padding-bottom: 20px; }
.card-divertissement .card-divertissement-title { font-family: Montserrat-SemiBold; color: rgb(255, 255, 255); font-size: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.card-divertissement .card-divertissement-title:lang(ar) { font-family: Tajawal-ExtraBold, sans-serif !important; }
.card-divertissement .card-divertissement-description { font-family: Montserrat-Medium; color: rgb(255, 255, 255); font-size: 12px; line-height: 17px; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; height: 34px; }
.card-divertissement .card-divertissement-description p { margin-bottom: 6px; }
.card-divertissement .card-divertissement-starts { font-family: Montserrat-Medium; color: rgb(255, 255, 255); font-size: 14px; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.card-divertissement .discover-btn { background: transparent; color: rgb(255, 255, 255); border: 1px solid rgb(255, 255, 255); font-family: Montserrat-SemiBold; font-size: 16px; }
.card-divertissement .card-divertissement-subtitle { font-family: Montserrat-Medium; color: rgb(255, 255, 255); font-size: 16px; line-height: 20px; padding-bottom: 6px; }
.card-divertissement .divertissement-img { height: 397px; object-fit: cover; }
.card-divertissement .divertissement-card-footer { display: flex; justify-content: space-between; align-items: end; width: 100%; }
.card-divertissement .divertissement-card-footer img { object-fit: contain; max-height: 37px; max-width: 75px; }
[data-analytics-asset-title="Manhaj"] .divertissement-card-footer img, [data-analytics-asset-title="Maktabati"] .divertissement-card-footer img { background-color: rgb(255, 255, 255); border-radius: 7px; }
[data-analytics-asset-title="Maktabati"] .divertissement-card-footer img { max-width: 94px; max-height: 74px; height: 48px; padding: 6px; }
@media screen and (max-width: 767px) {
  .card-divertissement { min-width: 260px; max-width: 260px; }
  .card-divertissement .card-body { height: 220px; }
}
@media screen and (min-width: 360px) and (max-width: 767px) {
  .card-divertissement { min-width: 260px; }
  .card-divertissement .divertissement-img { max-height: 358px; }
}
@media screen and (max-width: 359px) {
  .card-divertissement { min-width: 230px; max-width: 230px; }
  .card-divertissement .divertissement-img { max-height: 318px; }
  .divertissement-container .row { gap: 20px; }
}

.widget-app-mobile .top-link { position: relative; top: -30px; }
.widget-app-mobile .card-text { font-size: 12px; color: rgb(122, 137, 153); }
.widget-app-mobile .icon-card { border-radius: 10px; }
.widget-app-mobile .card { min-width: 314px; display: flex; flex-direction: column; }
.widget-app-mobile-wrapper .row .col-md-3 { color-scheme: unset; forced-color-adjust: unset; mask: unset; math-depth: unset; position: unset; position-anchor: unset; appearance: unset; color: unset; font: unset; font-palette: unset; font-synthesis: unset; inset-area: unset; text-orientation: unset; text-rendering: unset; text-spacing-trim: unset; -webkit-font-smoothing: unset; -webkit-locale: unset; -webkit-text-orientation: unset; -webkit-writing-mode: unset; writing-mode: unset; zoom: unset; accent-color: unset; place-content: unset; place-items: unset; place-self: unset; alignment-baseline: unset; anchor-name: unset; animation-composition: unset; animation: unset; app-region: unset; aspect-ratio: unset; backdrop-filter: unset; backface-visibility: unset; background: unset; background-blend-mode: unset; baseline-shift: unset; baseline-source: unset; block-size: unset; border-block: unset; border: unset; border-radius: unset; border-collapse: unset; border-end-end-radius: unset; border-end-start-radius: unset; border-inline: unset; border-start-end-radius: unset; border-start-start-radius: unset; inset: unset; box-shadow: unset; box-sizing: unset; break-after: unset; break-before: unset; break-inside: unset; buffered-rendering: unset; caption-side: unset; caret-color: unset; clear: unset; clip: unset; clip-path: unset; clip-rule: unset; color-interpolation: unset; color-interpolation-filters: unset; color-rendering: unset; columns: unset; column-fill: unset; gap: unset; column-rule: unset; column-span: unset; contain: unset; contain-intrinsic-block-size: unset; contain-intrinsic-size: unset; contain-intrinsic-inline-size: unset; container: unset; content: unset; content-visibility: unset; counter-increment: unset; counter-reset: unset; counter-set: unset; cursor: unset; cx: unset; cy: unset; d: unset; display: flex; dominant-baseline: unset; empty-cells: unset; field-sizing: unset; fill: unset; fill-opacity: unset; fill-rule: unset; filter: unset; flex: unset; flex-flow: unset; float: unset; flood-color: unset; flood-opacity: unset; grid: unset; grid-area: unset; height: unset; hyphenate-character: unset; hyphenate-limit-chars: unset; hyphens: unset; image-orientation: unset; image-rendering: unset; initial-letter: unset; inline-size: unset; inset-block: unset; inset-inline: unset; isolation: unset; letter-spacing: unset; lighting-color: unset; line-break: unset; list-style: unset; margin-block: unset; margin: unset; margin-inline: unset; marker: unset; mask-type: unset; math-shift: unset; math-style: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; min-width: unset; mix-blend-mode: unset; object-fit: unset; object-position: unset; object-view-box: unset; offset: unset; opacity: unset; order: unset; orphans: unset; outline: unset; outline-offset: unset; overflow-anchor: unset; overflow-clip-margin: unset; overflow-wrap: unset; overflow: unset; overlay: unset; overscroll-behavior-block: unset; overscroll-behavior-inline: unset; overscroll-behavior: unset; padding-block: unset; padding: unset; padding-inline: unset; page: unset; page-orientation: unset; paint-order: unset; perspective: unset; perspective-origin: unset; pointer-events: unset; position-try: unset; position-visibility: unset; quotes: unset; r: unset; resize: unset; rotate: unset; ruby-position: unset; rx: unset; ry: unset; scale: unset; scroll-behavior: unset; scroll-margin-block: unset; scroll-margin: unset; scroll-margin-inline: unset; scroll-padding-block: unset; scroll-padding: unset; scroll-padding-inline: unset; scroll-snap-align: unset; scroll-snap-stop: unset; scroll-snap-type: unset; scroll-timeline: unset; scrollbar-color: unset; scrollbar-gutter: unset; scrollbar-width: unset; shape-image-threshold: unset; shape-margin: unset; shape-outside: unset; shape-rendering: unset; size: unset; speak: unset; stop-color: unset; stop-opacity: unset; stroke: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; tab-size: unset; table-layout: unset; text-align: unset; text-align-last: unset; text-anchor: unset; text-combine-upright: unset; text-decoration: unset; text-decoration-skip-ink: unset; text-emphasis: unset; text-emphasis-position: unset; text-indent: unset; text-overflow: unset; text-shadow: unset; text-size-adjust: unset; text-transform: unset; text-underline-offset: unset; text-underline-position: unset; white-space: unset; timeline-scope: unset; touch-action: unset; transform: unset; transform-box: unset; transform-origin: unset; transform-style: unset; transition: unset; translate: unset; user-select: unset; vector-effect: unset; vertical-align: unset; view-timeline: unset; view-transition-class: unset; view-transition-name: unset; visibility: unset; border-spacing: unset; -webkit-box-align: unset; -webkit-box-decoration-break: unset; -webkit-box-direction: unset; -webkit-box-flex: unset; -webkit-box-ordinal-group: unset; -webkit-box-orient: unset; -webkit-box-pack: unset; -webkit-box-reflect: unset; -webkit-line-break: unset; -webkit-line-clamp: unset; -webkit-mask-box-image: unset; -webkit-print-color-adjust: unset; -webkit-rtl-ordering: unset; -webkit-ruby-position: unset; -webkit-tap-highlight-color: unset; -webkit-text-combine: unset; -webkit-text-decorations-in-effect: unset; -webkit-text-fill-color: unset; -webkit-text-security: unset; -webkit-text-stroke: unset; -webkit-user-drag: unset; widows: unset; width: unset; will-change: unset; word-break: unset; word-spacing: unset; x: unset; y: unset; z-index: unset; }
.widget-app-mobile { display: flex; flex-wrap: nowrap; overflow: auto; gap: 20px; }
.widget-app-mobile .icon-description-wrapper { display: flex; gap: 16px; }
.widget-app-mobile .description-wrapper { display: flex; flex-direction: column; gap: 4px; }
.widget-app-mobile .card-body { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.widget-app-mobile .card-body .btn.mobile-app-link { font-family: Montserrat-Medium; font-size: 16px; color: rgb(25, 19, 41); border: 1px solid rgb(25, 19, 41); }
.widget-app-mobile .card-body .btn.mobile-app-link:hover { background-color: rgba(0, 0, 0, 0.11); }
.widget-app-mobile .img-container:lang(ar) { padding-right: 0px !important; padding-left: 1rem !important; }
@media screen and (max-width: 575px) {
  .widget-app-mobile { gap: 10px; }
  .widget-app-mobile .card { min-width: 270px; }
}

#footer .last-section { opacity: 1; padding-bottom: 50px; }
.tabbar-footer { position: fixed; bottom: 0px; z-index: 999; width: 100%; left: 0px; opacity: 1; justify-content: center; transform: translateY(100px); transition: opacity 0.3s ease 0s, transform 0.3s ease 0s; display: flex !important; }
.tabbar-footer.fixedTabBar { transform: translateY(0px); }
.tabbar-footer .list { display: flex; max-width: 1000px; width: 100%; justify-content: space-between; background-color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.17) 0px -7px 17px; border-radius: 20px 20px 0px 0px; }
.tabbar-footer a.li { flex: 1 1 0%; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; height: auto; padding: 5px 20px; font-size: 14px; font-family: Montserrat-SemiBold; position: relative; margin: 0px auto; }
.tabbar-footer a:hover.li { text-decoration: none; }
.tabbar-footer a.li:focus { outline: white solid 0px; }
.tabbar-footer a.li div.name::before { bottom: 0px; content: ""; display: block; height: 3px; left: 50%; position: absolute; background: rgb(224, 8, 0); transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0px; }
.tabbar-footer a.li:hover div.name::before { width: 100%; left: 0px; }
.tabbar-footer a.li div.name { flex-grow: 1; }
@media screen and (max-width: 480px) {
  .tabbar-footer a.li { padding: 1px; font-size: 10px; }
  .tabbar-footer a.li img { vertical-align: middle; width: 34px; }
  .tabbar-footer a.li:hover div.name::before { display: none; }
  .tabbar-footer .list { padding-top: 5px; }
}