templates/public_iframe/_style.css.twig line 1

Open in your IDE?
  1. :root {
  2.   --primary: #2b2d40;
  3.   --primary-10: #2b2d4010;
  4.   --primary-15: #2b2d4015;
  5.   --primary-20: #2b2d4020;
  6.   --primary-30: #2b2d4030;
  7.   --primary-40: #2b2d4040;
  8.   --primary-50: #2b2d4050;
  9.   --primary-60: #2b2d4060;
  10.   --primary-70: #2b2d4070;
  11.   --primary-80: #2b2d4080;
  12.   --primary-90: #2b2d4090;
  13.   --secondary: #2b2d40;
  14.   --secondary-10: #2b2d4010;
  15.   --secondary-15: #2b2d4015;
  16.   --secondary-20: #2b2d4020;
  17.   --secondary-30: #2b2d4030;
  18.   --secondary-40: #2b2d4040;
  19.   --secondary-50: #2b2d4050;
  20.   --secondary-60: #2b2d4060;
  21.   --secondary-70: #2b2d4070;
  22.   --secondary-80: #2b2d4080;
  23.   --secondary-90: #2b2d4090;
  24.   --danger: #ff4365;
  25.   --success: #00a79dff;
  26.   --info: #00a79d6b;
  28.   --default-overview-background-color: #f7f3f5;
  30.   --primary-button-background-color: #00a79dff;
  31.   --primary-button-text-color: #ffffff;
  32.   --primary-button-border-color: #ffffff;
  33.   --primary-button-background-color--active: #00a79dff;
  34.   --primary-button-text-color--active: #ffffff;
  35.   --primary-button-border-color--active: #ffffff;
  36.   --primary-button-background-color--hover: #06857dff;
  37.   --primary-button-text-color--hover: #ffffff;
  38.   --primary-button-border-color--hover: #ffffff;
  39.   --primary-button-background-color--disable: #444444;
  40.   --primary-button-text-color--disable: #ffffff;
  41.   --primary-button-border-color--disable: #ffffff;
  42.   --primary-button-box-shadow-color: #44444430;
  43.   --primary-button-border-width: 1px;
  44.   --primary-button-border-radius: 8px;
  46.   --secondary-button-background-color: #ffffffff;
  47.   --secondary-button-text-color: #444444;
  48.   --secondary-button-border-color: #ffffff;
  49.   --secondary-button-background-color--active: #ffffff;
  50.   --secondary-button-text-color--active: #444444;
  51.   --secondary-button-border-color--active: #ffffff;
  52.   --secondary-button-background-color--hover: #ffffff;
  53.   --secondary-button-text-color--hover: #444444;
  54.   --secondary-button-border-color--hover: #ffffff;
  55.   --secondary-button-background-color--disable: #444444;
  56.   --secondary-button-text-color--disable: #ffffff;
  57.   --secondary-button-border-color--disable: #ffffff;
  58.   --secondary-button-box-shadow-color: #44444430;
  60.   --secondary-button-border-width: 1px;
  61.   --secondary-button-border-radius: 5px;
  63.   --event-category-background-color: var(--primary);
  64.   --course-category-background-color: var(--primary);
  65.   --container-category-background-color: var(--primary);
  67.   --card-compact-heading-color: #444444;
  68.   --card-background-color: #fafafaff;
  69.   --card-text-color: #444444;
  70.   --card-second-text-color: #44444470;
  71.   --card-box-shadow-color: #44444430;
  72.   --card-divider-color: #44444420;
  73.   --card-border-radius: 8px;
  75.   --scrollbar-background: #44444410;
  76.   --scrollbar-thumb: var(--primary);
  77.   --scrollbar-body-thumb: var(--secondary-50);
  78.   --scrollbar-widget-thumb: var(--primary);
  80.   --light-clr: #fff;
  82.   /* New added */
  83.   --circle-border-radius: 50%;
  85.   --online-indicator-bg-clr: #2cda9d;
  86.   --offline-indicator-bg-clr: #cdcdcd;
  88.   --status-indicator-border-clr: #fff;
  89.   --status-indicator-border-width: 4px;
  90.   --status-indicator-small-border-width: 2px;
  92.   --secondary-button-background-color: #fff;
  94.   --badge-size: 156px;
  95.   --tag-border-radius: 17px;
  96.   --iframe-body-background-color: #ffffff;
  98.   {# general #}
  99.   {% if data.genColorPrimary is defined and data.genColorPrimary is not empty %}
  100.   --primary: {{ data.genColorPrimary|raw }};
  101.   --primary-10: {{ data.genColorPrimary|raw }}10;
  102.   --primary-15: {{ data.genColorPrimary|raw }}15;
  103.   --primary-20: {{ data.genColorPrimary|raw }}20;
  104.   --primary-30: {{ data.genColorPrimary|raw }}30;
  105.   --primary-40: {{ data.genColorPrimary|raw }}40;
  106.   --primary-50: {{ data.genColorPrimary|raw }}50;
  107.   --primary-60: {{ data.genColorPrimary|raw }}60;
  108.   --primary-70: {{ data.genColorPrimary|raw }}70;
  109.   --primary-80: {{ data.genColorPrimary|raw }}80;
  110.   --primary-90: {{ data.genColorPrimary|raw }}90;
  111.   {% endif %}
  112.   {% if data.genColorSecondary is defined and data.genColorSecondary is not empty %}
  113.   --secondary: {{ data.genColorSecondary|raw }};
  114.   --secondary-10: {{ data.genColorSecondary|raw }}10;
  115.   --secondary-15: {{ data.genColorSecondary|raw }}15;
  116.   --secondary-20: {{ data.genColorSecondary|raw }}20;
  117.   --secondary-30: {{ data.genColorSecondary|raw }}30;
  118.   --secondary-40: {{ data.genColorSecondary|raw }}40;
  119.   --secondary-50: {{ data.genColorSecondary|raw }}50;
  120.   --secondary-60: {{ data.genColorSecondary|raw }}60;
  121.   --secondary-70: {{ data.genColorSecondary|raw }}70;
  122.   --secondary-80: {{ data.genColorSecondary|raw }}80;
  123.   --secondary-90: {{ data.genColorSecondary|raw }}90;
  124.   {% endif %}
  125.   {% if data.genColorDanger is defined and data.genColorDanger is not empty %}--danger: {{ data.genColorDanger|raw }};{% endif %}
  126.   {% if data.genColorSuccess is defined and data.genColorSuccess is not empty %}--success: {{ data.genColorSuccess|raw }};{% endif %}
  127.   {% if data.genColorInfo is defined and data.genColorInfo is not empty %}--info: {{ data.genColorInfo|raw }};{% endif %}
  129.   {% if data.genColorBodyBgColor is defined and data.genColorBodyBgColor is not empty %}--body-background-color: {{ data.genColorBodyBgColor|raw }};{% endif %}
  130.   {% if data.genColorBodyBgIframe is defined and data.genColorBodyBgIframe is not empty %}--iframe-body-background-color: {{ data.genColorBodyBgIframe|raw }};{% endif %}
  132.   {% if data.genFontTitle is defined and data.genFontTitle is not empty %}--font-family-title: {{ data.genFontTitle|raw }};{% endif %}
  133.   {% if data.genFontBody is defined and data.genFontBody is not empty %}--font-family-body: {{ data.genFontBody|raw }};{% endif %}
  134.   {% if data.genFontButton is defined and data.genFontButton is not empty %}--font-family-button: {{ data.genFontButton|raw }};{% endif %}
  136.   {# navigation #}
  137.   {% if data.navBgColor is defined and data.navBgColor is not empty %}--navigation-background-color: {{ data.navBgColor|raw }};{% endif %}
  138.   {% if data.navItemBgColor is defined and data.navItemBgColor is not empty %}--navigation-item-background-color: {{ data.navItemBgColor|raw }};{% endif %}
  139.   {% if data.navItemTextColor is defined and data.navItemTextColor is not empty %}--navigation-item-text-color: {{ data.navItemTextColor|raw }};{% endif %}
  140.   {% if data.navItemIconColor is defined and data.navItemIconColor is not empty %}--navigation-item-icon-color: {{ data.navItemIconColor|raw }};{% endif %}
  141.   {% if data.navItemBgColorActive is defined and data.navItemBgColorActive is not empty %}--navigation-item-background-color--active: {{ data.navItemBgColorActive|raw }};{% endif %}
  142.   {% if data.navItemTextColorActive is defined and data.navItemTextColorActive is not empty %}--navigation-item-text-color--active: {{ data.navItemTextColorActive|raw }};{% endif %}
  143.   {% if data.navItemIconColorActive is defined and data.navItemIconColorActive is not empty %}--navigation-item-icon-color--active: {{ data.navItemIconColorActive|raw }};{% endif %}
  144.   {% if data.navItemBgColorHover is defined and data.navItemBgColorHover is not empty %}--navigation-item-background-color--hover: {{ data.navItemBgColorHover|raw }};{% endif %}
  145.   {% if data.navItemTextColorHover is defined and data.navItemTextColorHover is not empty %}--navigation-item-text-color--hover: {{ data.navItemTextColorHover|raw }};{% endif %}
  146.   {% if data.navItemIconColorHover is defined and data.navItemIconColorHover is not empty %}--navigation-item-icon-color--hover: {{ data.navItemIconColorHover|raw }};{% endif %}
  147.   {% if data.navItemDividerColor is defined and data.navItemDividerColor is not empty %}--navigation-item-divider-color: {{ data.navItemDividerColor|raw }};{% endif %}
  149.   {# form #}
  150.   {% if data.frmBtnPrimaryBgColor is defined and data.frmBtnPrimaryBgColor is not empty %}--primary-button-background-color: {{ data.frmBtnPrimaryBgColor|raw }};{% endif %}
  151.   {% if data.frmBtnPrimaryTextColor is defined and data.frmBtnPrimaryTextColor is not empty %}--primary-button-text-color: {{ data.frmBtnPrimaryTextColor|raw }};{% endif %}
  152.   {% if data.frmBtnPrimaryBorderColor is defined and data.frmBtnPrimaryBorderColor is not empty %}--primary-button-border-color: {{ data.frmBtnPrimaryBorderColor|raw }};{% endif %}
  153.   {% if data.frmBtnPrimaryBgColorActive is defined and data.frmBtnPrimaryBgColorActive is not empty %}--primary-button-background-color--active: {{ data.frmBtnPrimaryBgColorActive|raw }};{% endif %}
  154.   {% if data.frmBtnPrimaryTextColorActive is defined and data.frmBtnPrimaryTextColorActive is not empty %}--primary-button-text-color--active: {{ data.frmBtnPrimaryTextColorActive|raw }};{% endif %}
  155.   {% if data.frmBtnPrimaryBorderColorActive is defined and data.frmBtnPrimaryBorderColorActive is not empty %}--primary-button-border-color--active: {{ data.frmBtnPrimaryBorderColorActive|raw }};{% endif %}
  156.   {% if data.frmBtnPrimaryBgColorHover is defined and data.frmBtnPrimaryBgColorHover is not empty %}--primary-button-background-color--hover: {{ data.frmBtnPrimaryBgColorHover|raw }};{% endif %}
  157.   {% if data.frmBtnPrimaryTextColorHover is defined and data.frmBtnPrimaryTextColorHover is not empty %}--primary-button-text-color--hover: {{ data.frmBtnPrimaryTextColorHover|raw }};{% endif %}
  158.   {% if data.frmBtnPrimaryBorderColorHover is defined and data.frmBtnPrimaryBorderColorHover is not empty %}--primary-button-border-color--hover: {{ data.frmBtnPrimaryBorderColorHover|raw }};{% endif %}
  159.   {% if data.frmBtnPrimaryBgColorDisable is defined and data.frmBtnPrimaryBgColorDisable is not empty %}--primary-button-background-color--disable: {{ data.frmBtnPrimaryBgColorDisable|raw }};{% endif %}
  160.   {% if data.frmBtnPrimaryTextColorDisable is defined and data.frmBtnPrimaryTextColorDisable is not empty %}--primary-button-text-color--disable: {{ data.frmBtnPrimaryTextColorDisable|raw }};{% endif %}
  161.   {% if data.frmBtnPrimaryBorderColorDisable is defined and data.frmBtnPrimaryBorderColorDisable is not empty %}--primary-button-border-color--disable: {{ data.frmBtnPrimaryBorderColorDisable|raw }};{% endif %}
  162.   {% if data.frmBtnPrimaryBorderWidth is defined and data.frmBtnPrimaryBorderWidth is not empty %}--primary-button-border-width: {{ data.frmBtnPrimaryBorderWidth|raw }};{% endif %}
  163.   {% if data.frmBtnPrimaryBorderRadius is defined and data.frmBtnPrimaryBorderRadius is not empty %}--primary-button-border-radius: {{ data.frmBtnPrimaryBorderRadius|raw }};{% endif %}
  164.   {% if data.frmBtnPrimaryBoxShadowColor is defined and data.frmBtnPrimaryBoxShadowColor is not empty %}--primary-button-box-shadow-color: {{ data.frmBtnPrimaryBoxShadowColor|raw }};{% endif %}
  166.   {% if data.frmBtnSecondaryBgColor is defined and data.frmBtnSecondaryBgColor is not empty %}--secondary-button-background-color: {{ data.frmBtnSecondaryBgColor|raw }};{% endif %}
  167.   {% if data.frmBtnSecondaryTextColor is defined and data.frmBtnSecondaryTextColor is not empty %}--secondary-button-text-color: {{ data.frmBtnSecondaryTextColor|raw }};{% endif %}
  168.   {% if data.frmBtnSecondaryBorderColor is defined and data.frmBtnSecondaryBorderColor is not empty %}--secondary-button-border-color: {{ data.frmBtnSecondaryBorderColor|raw }};{% endif %}
  169.   {% if data.frmBtnSecondaryBgColorActive is defined and data.frmBtnSecondaryBgColorActive is not empty %}--secondary-button-background-color--active: {{ data.frmBtnSecondaryBgColorActive|raw }};{% endif %}
  170.   {% if data.frmBtnSecondaryTextColorActive is defined and data.frmBtnSecondaryTextColorActive is not empty %}--secondary-button-text-color--active: {{ data.frmBtnSecondaryTextColorActive|raw }};{% endif %}
  171.   {% if data.frmBtnSecondaryBorderColorActive is defined and data.frmBtnSecondaryBorderColorActive is not empty %}--secondary-button-border-color--active: {{ data.frmBtnSecondaryBorderColorActive|raw }};{% endif %}
  172.   {% if data.frmBtnSecondaryBgColorHover is defined and data.frmBtnSecondaryBgColorHover is not empty %}--secondary-button-background-color--hover: {{ data.frmBtnSecondaryBgColorHover|raw }};{% endif %}
  173.   {% if data.frmBtnSecondaryTextColorHover is defined and data.frmBtnSecondaryTextColorHover is not empty %}--secondary-button-text-color--hover: {{ data.frmBtnSecondaryTextColorHover|raw }};{% endif %}
  174.   {% if data.frmBtnSecondaryBorderColorHover is defined and data.frmBtnSecondaryBorderColorHover is not empty %}--secondary-button-border-color--hover: {{ data.frmBtnSecondaryBorderColorHover|raw }};{% endif %}
  175.   {% if data.frmBtnSecondaryBgColorDisable is defined and data.frmBtnSecondaryBgColorDisable is not empty %}--secondary-button-background-color--disable: {{ data.frmBtnSecondaryBgColorDisable|raw }};{% endif %}
  176.   {% if data.frmBtnSecondaryTextColorDisable is defined and data.frmBtnSecondaryTextColorDisable is not empty %}--secondary-button-text-color--disable: {{ data.frmBtnSecondaryTextColorDisable|raw }};{% endif %}
  177.   {% if data.frmBtnSecondaryBorderColorDisable is defined and data.frmBtnSecondaryBorderColorDisable is not empty %}--secondary-button-border-color--disable: {{ data.frmBtnSecondaryBorderColorDisable|raw }};{% endif %}
  178.   {% if data.frmBtnSecondaryBorderWidth is defined and data.frmBtnSecondaryBorderWidth is not empty %}--secondary-button-border-width: {{ data.frmBtnSecondaryBorderWidth|raw }};{% endif %}
  179.   {% if data.frmBtnSecondaryBorderRadius is defined and data.frmBtnSecondaryBorderRadius is not empty %}--secondary-button-border-radius: {{ data.frmBtnSecondaryBorderRadius|raw }};{% endif %}
  180.   {% if data.frmBtnSecondaryBoxShadowColor is defined and data.frmBtnSecondaryBoxShadowColor is not empty %}--secondary-button-box-shadow-color: {{ data.frmBtnSecondaryBoxShadowColor|raw }};{% endif %}
  182.   {% if data.frmBtnDangerBgColor is defined and data.frmBtnDangerBgColor is not empty %}--danger-button-background-color: {{ data.frmBtnDangerBgColor|raw }};{% endif %}
  183.   {% if data.frmBtnDangerTextColor is defined and data.frmBtnDangerTextColor is not empty %}--danger-button-text-color: {{ data.frmBtnDangerTextColor|raw }};{% endif %}
  184.   {% if data.frmBtnDangerBorderColor is defined and data.frmBtnDangerBorderColor is not empty %}--danger-button-border-color: {{ data.frmBtnDangerBorderColor|raw }};{% endif %}
  185.   {% if data.frmBtnDangerBgColorActive is defined and data.frmBtnDangerBgColorActive is not empty %}--danger-button-background-color--active: {{ data.frmBtnDangerBgColorActive|raw }};{% endif %}
  186.   {% if data.frmBtnDangerTextColorActive is defined and data.frmBtnDangerTextColorActive is not empty %}--danger-button-text-color--active: {{ data.frmBtnDangerTextColorActive|raw }};{% endif %}
  187.   {% if data.frmBtnDangerBorderColorActive is defined and data.frmBtnDangerBorderColorActive is not empty %}--danger-button-border-color--active: {{ data.frmBtnDangerBorderColorActive|raw }};{% endif %}
  188.   {% if data.frmBtnDangerBgColorHover is defined and data.frmBtnDangerBgColorHover is not empty %}--danger-button-background-color--hover: {{ data.frmBtnDangerBgColorHover|raw }};{% endif %}
  189.   {% if data.frmBtnDangerTextColorHover is defined and data.frmBtnDangerTextColorHover is not empty %}--danger-button-text-color--hover: {{ data.frmBtnDangerTextColorHover|raw }};{% endif %}
  190.   {% if data.frmBtnDangerBorderColorHover is defined and data.frmBtnDangerBorderColorHover is not empty %}--danger-button-border-color--hover: {{ data.frmBtnDangerBorderColorHover|raw }};{% endif %}
  191.   {% if data.frmBtnDangerBgColorDisable is defined and data.frmBtnDangerBgColorDisable is not empty %}--danger-button-background-color--disable: {{ data.frmBtnDangerBgColorDisable|raw }};{% endif %}
  192.   {% if data.frmBtnDangerTextColorDisable is defined and data.frmBtnDangerTextColorDisable is not empty %}--danger-button-text-color--disable: {{ data.frmBtnDangerTextColorDisable|raw }};{% endif %}
  193.   {% if data.frmBtnDangerBorderColorDisable is defined and data.frmBtnDangerBorderColorDisable is not empty %}--danger-button-border-color--disable: {{ data.frmBtnDangerBorderColorDisable|raw }};{% endif %}
  194.   {% if data.frmBtnDangerBorderWidth is defined and data.frmBtnDangerBorderWidth is not empty %}--danger-button-border-width: {{ data.frmBtnDangerBorderWidth|raw }};{% endif %}
  195.   {% if data.frmBtnDangerBorderRadius is defined and data.frmBtnDangerBorderRadius is not empty %}--danger-button-border-radius: {{ data.frmBtnDangerBorderRadius|raw }};{% endif %}
  196.   {% if data.frmBtnDangerBoxShadowColor is defined and data.frmBtnDangerBoxShadowColor is not empty %}--danger-button-box-shadow-color: {{ data.frmBtnDangerBoxShadowColor|raw }};{% endif %}
  197.   
  198.   {% if data.frmInpBgColor is defined and data.frmInpBgColor is not empty %}--input-background-color: {{ data.frmInpBgColor|raw }};{% endif %}
  199.   {% if data.frmInpTextColor is defined and data.frmInpTextColor is not empty %}--input-text-color: {{ data.frmInpTextColor|raw }};{% endif %}
  200.   {% if data.frmInpPlaceholderTextColor is defined and data.frmInpPlaceholderTextColor is not empty %}--input-placeholder-text-color: {{ data.frmInpPlaceholderTextColor|raw }};{% endif %}
  201.   {% if data.frmInpBorderColor is defined and data.frmInpBorderColor is not empty %}--input-border-color: {{ data.frmInpBorderColor|raw }};{% endif %}
  202.   {% if data.frmInpBorderWidth is defined and data.frmInpBorderWidth is not empty %}--input-border-width: {{ data.frmInpBorderWidth|raw }};{% endif %}
  203.   {% if data.frmInpBorderRadius is defined and data.frmInpBorderRadius is not empty %}--input-border-radius: {{ data.frmInpBorderRadius|raw }};{% endif %}
  204.   {% if data.frmInpBgColorFocus is defined and data.frmInpBgColorFocus is not empty %}--input-background-color--focus: {{ data.frmInpBgColorFocus|raw }};{% endif %}
  205.   {% if data.frmInpTextColorFocus is defined and data.frmInpTextColorFocus is not empty %}--input-text-color--focus: {{ data.frmInpTextColorFocus|raw }};{% endif %}
  206.   {% if data.frmInpBorderColorFocus is defined and data.frmInpBorderColorFocus is not empty %}--input-border-color--focus: {{ data.frmInpBorderColorFocus|raw }};{% endif %}
  207.   {% if data.frmInpBorderWidthFocus is defined and data.frmInpBorderWidthFocus is not empty %}--input-border-width--focus: {{ data.frmInpBorderWidthFocus|raw }};{% endif %}
  208.   {% if data.frmInpBgColorDisable is defined and data.frmInpBgColorDisable is not empty %}--input-background-color--disable: {{ data.frmInpBgColorDisable|raw }};{% endif %}
  209.   {% if data.frmInpTextColorDisable is defined and data.frmInpTextColorDisable is not empty %}--input-text-color--disable: {{ data.frmInpTextColorDisable|raw }};{% endif %}
  210.   {% if data.frmInpBorderColorDisable is defined and data.frmInpBorderColorDisable is not empty %}--input-border-color--disable: {{ data.frmInpBorderColorDisable|raw }};{% endif %}
  212.   {% if data.frmSelBgColor is defined and data.frmSelBgColor is not empty %}--select-background-color: {{ data.frmSelBgColor|raw }};{% endif %}
  213.   {% if data.frmSelTextColor is defined and data.frmSelTextColor is not empty %}--select-text-color: {{ data.frmSelTextColor|raw }};{% endif %}
  214.   {% if data.frmSelBorderColor is defined and data.frmSelBorderColor is not empty %}--select-border-color: {{ data.frmSelBorderColor|raw }};{% endif %}
  215.   {% if data.frmSelBorderWidth is defined and data.frmSelBorderWidth is not empty %}--select-border-width: {{ data.frmSelBorderWidth|raw }};{% endif %}
  216.   {% if data.frmSelBorderRadius is defined and data.frmSelBorderRadius is not empty %}--select-border-radius: {{ data.frmSelBorderRadius|raw }};{% endif %}
  217.   {% if data.frmSelOptBgColor is defined and data.frmSelOptBgColor is not empty %}--select-option-background-color: {{ data.frmSelOptBgColor|raw }};{% endif %}
  218.   {% if data.frmSelOptTextColor is defined and data.frmSelOptTextColor is not empty %}--select-option-text-color: {{ data.frmSelOptTextColor|raw }};{% endif %}
  219.   {% if data.frmSelOptBgColorHover is defined and data.frmSelOptBgColorHover is not empty %}--select-option-background-color--hover: {{ data.frmSelOptBgColorHover|raw }};{% endif %}
  220.   {% if data.frmSelOptTextColorHover is defined and data.frmSelOptTextColorHover is not empty %}--select-option-text-color--hover: {{ data.frmSelOptTextColorHover|raw }};{% endif %}
  222.   {# widget #}
  223.   {% if data.widCardBgColor is defined and data.widCardBgColor is not empty %}--card-background-color: {{ data.widCardBgColor|raw }};{% endif %}
  224.   {% if data.widCardTextColor is defined and data.widCardTextColor is not empty %}--card-text-color: {{ data.widCardTextColor|raw }};{% endif %}
  225.   {% if data.widCardSecondTextColor is defined and data.widCardSecondTextColor is not empty %}--card-second-text-color: {{ data.widCardSecondTextColor|raw }};{% endif %}
  226.   {% if data.widCardBoxShadowColor is defined and data.widCardBoxShadowColor is not empty %}--card-box-shadow-color: {{ data.widCardBoxShadowColor|raw }};{% endif %}
  227.   {% if data.widCardDividerColor is defined and data.widCardDividerColor is not empty %}--card-divider-color: {{ data.widCardDividerColor|raw }};{% endif %}
  228.   {% if data.widCardBorderRadius is defined and data.widCardBorderRadius is not empty %}--card-border-radius: {{ data.widCardBorderRadius|raw }};{% endif %}
  230.   {% if data.widTabBgColor is defined and data.widTabBgColor is not empty %}--tab-background-color: {{ data.widTabBgColor|raw }};{% endif %}
  231.   {% if data.widTabTextColor is defined and data.widTabTextColor is not empty %}--tab-text-color: {{ data.widTabTextColor|raw }};{% endif %}
  232.   {% if data.widTabBoxShadowColor is defined and data.widTabBoxShadowColor is not empty %}--tab-box-shadow-color: {{ data.widTabBoxShadowColor|raw }};{% endif %}
  233.   {% if data.widTabBgColorActive is defined and data.widTabBgColorActive is not empty %}--tab-background-color--active: {{ data.widTabBgColorActive|raw }};{% endif %}
  234.   {% if data.widTabTextColorActive is defined and data.widTabTextColorActive is not empty %}--tab-text-color--active: {{ data.widTabTextColorActive|raw }};{% endif %}
  235.   {% if data.widTabBoxShadowColorActive is defined and data.widTabBoxShadowColorActive is not empty %}--tab-box-shadow-color--active: {{ data.widTabBoxShadowColorActive|raw }};{% endif %}
  236.   {% if data.widTabBorderRadius is defined and data.widTabBorderRadius is not empty %}--tab-border-radius: {{ data.widTabBorderRadius|raw }};{% endif %}
  238.   {% if data.widModalBgColor is defined and data.widModalBgColor is not empty %}--modal-background-color: {{ data.widModalBgColor|raw }};{% endif %}
  239.   {% if data.widModalTextColor is defined and data.widModalTextColor is not empty %}--modal-text-color: {{ data.widModalTextColor|raw }};{% endif %}
  240.   {% if data.widModalBackdropBgColor is defined and data.widModalBackdropBgColor is not empty %}--modal-backdrop-background-color: {{ data.widModalBackdropBgColor|raw }};{% endif %}
  241.   {% if data.widModalBorderRadius is defined and data.widModalBorderRadius is not empty %}--modal-border-radius: {{ data.widModalBorderRadius|raw }};{% endif %}
  243.   {% if data.widAgHeaderBgColor is defined and data.widAgHeaderBgColor is not empty %}--table-header-background-color: {{ data.widAgHeaderBgColor|raw }};{% endif %}
  244.   {% if data.widAgHeaderBgColorHover is defined and data.widAgHeaderBgColorHover is not empty %}--table-header-background-color--hover: {{ data.widAgHeaderBgColorHover|raw }};{% endif %}
  245.   {% if data.widAgRowOddBgColor is defined and data.widAgRowOddBgColor is not empty %}--table-row-odd-background-color: {{ data.widAgRowOddBgColor|raw }};{% endif %}
  246.   {% if data.widAgRowEvenBgColor is defined and data.widAgRowEvenBgColor is not empty %}--table-row-even-background-color: {{ data.widAgRowEvenBgColor|raw }};{% endif %}
  247.   {% if data.widAgRowTextColor is defined and data.widAgRowTextColor is not empty %}--table-row-text-color: {{ data.widAgRowTextColor|raw }};{% endif %}
  248.   {% if data.widAgRowSecondTextColor is defined and data.widAgRowSecondTextColor is not empty %}--table-row-second-text-color: {{ data.widAgRowSecondTextColor|raw }};{% endif %}
  249.   {% if data.widAgDividerColor is defined and data.widAgDividerColor is not empty %}--table-divider-color: {{ data.widAgDividerColor|raw }};{% endif %}
  251.   {% if data.widTagBorderRadius is defined and data.widTagBorderRadius is not empty %}--tag-border-radius: {{ data.widTagBorderRadius|raw }};{% endif %}
  253.   {% if data.widPipBorderRadius is defined and data.widPipBorderRadius is not empty %}--pip-player-border-radius: {{ data.widPipBorderRadius|raw }};{% endif %}
  255.   {% if data.widSponsorBgColor is defined and data.widSponsorBgColor is not empty %}--widget-sponsor-background-color: {{ data.widSponsorBgColor|raw }};{% endif %}
  257.   {% if data.widMusicBgColor is defined and data.widMusicBgColor is not empty %}--background-music-player-background-color: {{ data.widMusicBgColor|raw }};{% endif %}
  258.   {% if data.widMusicBarColor is defined and data.widMusicBarColor is not empty %}--background-music-player-bar-color: {{ data.widMusicBarColor|raw }};{% endif %}
  259.   {% if data.widMusicVolBarColor is defined and data.widMusicVolBarColor is not empty %}--background-music-player-volume-bar-color: {{ data.widMusicVolBarColor|raw }};{% endif %}
  260.   
  261.   {# toast [pending] #}
  262.   --toast-background-color: #FFF;
  263.   --toast-border-radius: 5px;
  265.   {# default images [pending] #}
  266.   --default-container-card-background: "";
  267.   --default-event-card-background: "";
  268.   --default-session-card-background: "";
  269.   --default-avatar: "";
  271.   {# Image Drop Area [pending] #}
  272.   --image-drop-area-border-style: "solid";
  273.   --image-drop-area-border-width: 1px;
  274. }
  276. /* Font Awesome Css */
  277. .fak {
  278.   -moz-osx-font-smoothing: grayscale;
  279.   -webkit-font-smoothing: antialiased;
  280.   display: inline-block;
  281.   font-style: normal;
  282.   font-variant: normal;
  283.   text-rendering: auto;
  284.   line-height: 1;
  285.   font-family: "Font Awesome Kit";
  286. }
  288. .fa-live:before {
  289.   content: "\e00b";
  290. }
  291. .fa-speakers:before {
  292.   content: "\e000";
  293. }
  294. .fa-handshake-alt-light:before {
  295.   content: "\e033";
  296. }
  297. .fa-hourglass:before {
  298.   content: "\e0ee";
  299. }
  300. .fa-elearning-hat:before {
  301.   content: "\e095";
  302. }
  303. .fa-check-circle-regular:before {
  304.   content: "\e041";
  305. }
  306. .fa-description:before {
  307.   content: "\e012";
  308. }
  309. .fa-es-facebook:before {
  310.   content: "\e0df";
  311. }
  312. .fa-es-linkedin:before {
  313.   content: "\e0e0";
  314. }
  315. .fa-es-instagram:before {
  316.   content: "\e0e1";
  317. }
  318. .fa-es-twitter:before {
  319.   content: "\e0e2";
  320. }
  322. @font-face {
  323.   font-family: "Font Awesome Kit";
  324.   font-style: normal;
  325.   src: url(https://kit.fontawesome.com/5a850a28be/12734495/kit-upload.woff2)
  326.     format("woff2");
  327. }
  329. body {
  330.   font-family: "DM Sans", Helvetica, Arial, Lucida, sans-serif;
  331.   background-color: unset !important;
  332. }
  334. .public-container .event-overview {
  335.   position: relative;
  336.   background-color: var(--iframe-body-background-color);
  337.   z-index: 2;
  338. }
  340. .public-container .course-overview {
  341.   background-color: var(--primary);
  342. }
  344. /* Event Css */
  346. .event-overview {
  347.   background-color: var(--iframe-body-background-color);
  348. }
  349. .event-overview .p-container {
  350.   padding: 10px;
  351. }
  352. .event-overview--items {
  353.   padding: 20px 0;
  354. }
  355. @media only screen and (max-width: 1500px) {
  356.   .event-overview--items {
  357.     padding: 20px 20px;
  358.   }
  359. }
  360. .event-overview--items > .row {
  361.   justify-content: center;
  362. }
  364. .p-container {
  365.   width: 100%;
  366.   padding-right: 15px;
  367.   padding-left: 15px;
  368.   margin-right: auto;
  369.   margin-left: auto;
  370. }
  371. @media (min-width: 1500px) and (max-width: 1700px) {
  372.   .p-container {
  373.     padding-left: 15px;
  374.     padding-right: 15px;
  375.     max-width: 1450px;
  376.   }
  377. }
  378. @media (min-width: 1701px) {
  379.   .p-container {
  380.     padding-left: 15px;
  381.     padding-right: 15px;
  382.     max-width: 1600px;
  383.   }
  384. }
  386. .showMore a {
  387.   text-decoration: none;
  388.   color: var(--primary);
  389. }
  391. .event-item {
  392.   margin-bottom: 30px;
  393. }
  394. .event-item--card {
  395.   cursor: pointer;
  396.   border: initial !important;
  397.   background-color: var(--card-background-color);
  398.   border-radius: var(--card-border-radius);
  399.   box-shadow: 0 3px 9px var(--card-box-shadow-color);
  400.   color: var(--card-text-color);
  401. }
  402. .event-item--card .banner--content {
  403.   position: relative;
  404.   overflow: hidden;
  405.   content: "";
  406.   aspect-ratio: 16/9;
  407.   border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
  408.   background-position: center;
  409.   background-repeat: no-repeat;
  410.   background-size: cover;
  411.   background-image: url("https://neuronews-expertshare-live.s3.eu-central-1.amazonaws.com/conference/20220927085009-berner-therapienetzwerk-parkinson-63329d21a64fc445271765.jpg");
  412. }
  413. .event-item--card .banner--content .liveRibbon {
  414.   position: absolute;
  415.   top: 0px;
  416.   left: -40px;
  417.   transform: rotate(-43deg);
  418. }
  419. .event-item--card .banner--content .liveRibbon .content {
  420.   display: flex;
  421.   align-items: center;
  422.   justify-content: center;
  423.   width: 140px;
  424.   height: 28px;
  425.   padding: 12px 6px 10px 6px;
  426.   font-size: 14px;
  427.   font-weight: 500;
  428.   color: var(--light-clr);
  429.   background-color: var(--danger);
  430.   box-shadow: 0px 3px 9px #9ba7ba;
  431. }
  432. .event-item--card .banner--content .liveRibbon .content:hover {
  433.   text-decoration: none;
  434. }
  435. .event-item--card .banner--content .liveRibbon .content span {
  436.   display: -webkit-box;
  437.   overflow: hidden;
  438.   width: 50px;
  439.   -webkit-box-orient: vertical;
  440.   -webkit-line-clamp: 1;
  441. }
  442. .event-item--card .banner--content .liveRibbon .content i {
  443.   margin-right: 2px;
  444.   margin-bottom: 2px;
  445.   font-size: 18px;
  446. }
  447. .event-item--card .banner--content .dateBadge {
  448.   position: absolute;
  449.   top: 10px;
  450.   right: 10px;
  451. }
  452. .event-item--card .banner--content .dateBadge .content {
  453.   display: flex;
  454.   align-items: center;
  455.   overflow: hidden;
  456.   height: 55px;
  457.   background-color: var(--light-clr);
  458.   border-radius: 3px;
  459.   box-shadow: 0 3px 9px var(--card-box-shadow-color);
  460. }
  461. .event-item--card .banner--content .dateBadge .content .day {
  462.   display: flex;
  463.   align-items: center;
  464.   padding: 5px 10px;
  465.   line-height: normal;
  466. }
  467. .event-item--card .banner--content .dateBadge .content .day span {
  468.   padding-top: 3px;
  469.   font-size: 2.3rem;
  470.   font-weight: 900;
  471.   color: var(--primary);
  472. }
  473. .event-item--card .banner--content .dateBadge .content .time {
  474.   position: relative;
  475.   display: flex;
  476.   flex-direction: column;
  477.   justify-content: center;
  478.   height: inherit;
  479.   padding: 0 10px;
  480. }
  481. .event-item--card .banner--content .dateBadge .content .time .month {
  482.   display: -webkit-box;
  483.   overflow: hidden;
  484.   -webkit-box-orient: vertical;
  485.   -webkit-line-clamp: 1;
  486.   max-width: 120px;
  487.   padding-top: 3px;
  488.   font-size: 1rem;
  489.   font-weight: 700;
  490.   color: var(--primary);
  491.   line-height: normal;
  492.   border-bottom: 2px solid var(--primary);
  493. }
  494. .event-item--card .banner--content .dateBadge .content .time .clock {
  495.   padding-top: 2px;
  496.   font-size: 0.7rem;
  497.   font-weight: 700;
  498.   color: var(--primary);
  499. }
  500. .event-item--card .banner--content .dateBadge .content .time::before {
  501.   content: "";
  502.   position: absolute;
  503.   left: 0;
  504.   top: 0;
  505.   width: 100%;
  506.   height: 100%;
  507.   background-color: var(--primary);
  508.   opacity: 0.2;
  509. }
  510. .event-item--card .banner--content .dateBadge .content .year {
  511.   display: flex;
  512.   align-items: center;
  513.   justify-content: center;
  514.   height: inherit;
  515.   background-color: var(--primary);
  516. }
  517. .event-item--card .banner--content .dateBadge .content .year span {
  518.   font-size: 1rem;
  519.   font-weight: 700;
  520.   padding-right: 2px;
  521.   writing-mode: vertical-rl;
  522.   text-orientation: mixed;
  523.   transform: rotate(180deg);
  524.   color: var(--light-clr);
  525. }
  526. .event-item--card .banner--content .sponsors {
  527.   position: absolute;
  528.   width: 100%;
  529.   bottom: 28px;
  530.   left: 20px;
  531. }
  532. .event-item--card .banner .category {
  533.   position: absolute;
  534.   top: 69px;
  535.   left: -10px;
  536. }
  537. .event-item--card .banner .category .content {
  538.   display: flex;
  539.   align-items: center;
  540.   margin-right: 10px;
  541.   height: 28px;
  542.   padding: 0 10px;
  543.   background-color: var(--event-category-background-color);
  544.   border-radius: 3px;
  545. }
  546. .event-item--card .banner .category .content span {
  547.   display: -webkit-box;
  548.   min-width: fit-content;
  549.   max-width: inherit;
  550.   overflow: hidden;
  551.   padding-top: 2px;
  552.   -webkit-box-orient: vertical;
  553.   -webkit-line-clamp: 1;
  554.   font-size: 0.8rem;
  555.   font-weight: 700;
  556.   color: var(--light-clr);
  557.   word-break: break-all;
  558. }
  559. .event-item--card .banner .category .content:after {
  560.   content: "\e04a";
  561.   font-family: "Font Awesome Kit";
  562.   transform: rotate(180deg);
  563.   font-size: 11px;
  564.   position: absolute;
  565.   left: 0.8px;
  566.   top: -7.5px;
  567.   color: var(--event-category-background-color);
  568. }
  569. .event-item--card .context {
  570.   z-index: 0;
  571.   margin-top: -20px;
  572.   margin-left: 20px;
  573.   margin-right: 20px;
  574. }
  575. .event-item--card .context--inner {
  576.   padding: 15px;
  577.   background-color: var(--card-background-color);
  578.   border-radius: var(--card-border-radius);
  579. }
  580. .event-item--card .context--inner .header {
  581.   display: flex;
  582.   height: 45px;
  583. }
  584. .event-item--card .context--inner .header .title h3 {
  585.   display: -webkit-box;
  586.   width: fit-content;
  587.   font-size: 1.1rem;
  588.   font-weight: 700;
  589.   color: var(--card-text-color);
  590.   margin-bottom: 0;
  591.   text-overflow: ellipsis;
  592.   -webkit-box-orient: vertical;
  593.   -webkit-line-clamp: 2;
  594.   overflow: hidden;
  595.   cursor: pointer;
  596. }
  597. .event-item--card .context--inner .header .actions {
  598.   padding-left: 5px;
  599. }
  600. .event-item--card .context--inner .header .actions .shareBtn {
  601.   width: 25px;
  602.   height: 25px;
  603.   padding: 0 !important;
  604. }
  605. .event-item--card .context--inner .header .actions .shareBtn i {
  606.   font-weight: 500;
  607. }
  608. .event-item--card .context--inner .desc {
  609.   height: 105px;
  610. }
  611. .event-item--card .context--inner .desc .text {
  612.   display: -webkit-box;
  613.   width: fit-content;
  614.   font-size: 0.9rem;
  615.   font-weight: 400;
  616.   line-height: 1.2rem;
  617.   color: var(--card-text-color);
  618.   text-overflow: ellipsis;
  619.   -webkit-box-orient: vertical;
  620.   -webkit-line-clamp: 5;
  621.   overflow: hidden;
  622. }
  623. .event-item--card .context--inner .actions {
  624.   display: flex;
  625.   height: 40px;
  626. }
  627. .event-item--card .context--inner .actions .showMore a {
  628.   font-size: 0.8rem;
  629.   font-weight: 700;
  630.   line-height: normal;
  631.   color: var(--primary);
  632.   text-decoration: none;
  633. }
  634. .event-item--card .context--inner .actions .registerBtn {
  635.   margin-right: -5px;
  636.   margin-left: auto;
  637.   padding-left: 8px;
  638. }
  639. .event-item--card .context--inner .actions .registerBtn .btn {
  640.   height: 34px;
  641.   padding: 0 35px !important;
  642.   font-size: 0.8rem !important;
  643. }
  644. .event-item--card .additional-info--inner {
  645.   padding: 15px;
  646. }
  647. .event-item--card .additional-info--inner .users .users-list {
  648.   margin-bottom: 10px;
  649. }
  650. .event-item--card .additional-info--inner .presenters--inner .title h4 {
  651.   display: flex;
  652.   align-items: center;
  653.   margin-bottom: 0;
  654. }
  655. .event-item--card .additional-info--inner .presenters--inner .title h4 i {
  656.   padding-bottom: 3px;
  657.   padding-right: 5px;
  658.   font-size: 1.1rem;
  659. }
  660. .event-item--card
  661.   .additional-info--inner
  662.   .presenters--inner
  663.   .title
  664.   h4
  665.   span {
  666.   display: -webkit-box;
  667.   overflow: hidden;
  668.   -webkit-box-orient: vertical;
  669.   -webkit-line-clamp: 1;
  670.   word-break: break-word;
  671.   font-size: 0.9rem;
  672.   font-weight: 700;
  673.   color: var(--card-text-color);
  674. }
  675. .event-item--card
  676.   .additional-info--inner
  677.   .presenters--inner
  678.   .content
  679.   .presenterItem
  680.   .picture
  681.   img {
  682.   width: 90px;
  683.   aspect-ratio: 16/9;
  684.   background-color: var(--light-clr);
  685.   border-radius: var(--card-border-radius);
  686. }
  687. @media only screen and (max-width: 1200px) {
  688.   .event-item--card
  689.     .additional-info--inner
  690.     .presenters--inner
  691.     .content
  692.     .presenterItem
  693.     .picture
  694.     img {
  695.     width: 60px;
  696.     height: 40px;
  697.   }
  698. }
  699. .event-item--card
  700.   .additional-info--inner
  701.   .presenters--inner
  702.   .content
  703.   .presenterItem
  704.   .details
  705.   .name
  706.   h5 {
  707.   display: -webkit-box;
  708.   overflow: hidden;
  709.   margin-bottom: 0px;
  710.   -webkit-box-orient: vertical;
  711.   -webkit-line-clamp: 1;
  712.   word-break: break-all;
  713.   font-size: 0.9rem;
  714.   font-weight: 700;
  715.   color: var(--card-text-color);
  716. }
  717. .event-item--card
  718.   .additional-info--inner
  719.   .presenters--inner
  720.   .content
  721.   .presenterItem
  722.   .details
  723.   .desc
  724.   p {
  725.   display: -webkit-box;
  726.   overflow: hidden;
  727.   margin-bottom: 0;
  728.   -webkit-box-orient: vertical;
  729.   -webkit-line-clamp: 2;
  730.   word-break: break-word;
  731.   font-size: 0.8rem;
  732.   font-weight: 400;
  733.   color: var(--card-text-color);
  734. }
  735. .event-item--card
  736.   .additional-info--inner
  737.   .presenters--inner
  738.   .content
  739.   .presenterItem
  740.   .details
  741.   .desc
  742.   .showMore
  743.   a {
  744.   font-size: 0.8rem;
  745.   font-weight: 700;
  746.   line-height: normal;
  747.   color: var(--primary);
  748.   text-decoration: none;
  749. }
  750. .event-item--card .registerBtnEnd {
  751.   width: 100%;
  752.   height: 45px;
  753.   border: none !important;
  754.   border-radius: 0 0 var(--card-border-radius) var(--card-border-radius) !important;
  755.   font-size: 0.9rem !important;
  756. }
  757. .event-item--card .registerBtnEnd:hover {
  758.   border: none !important;
  759. }
  760. .event-item--card::before {
  761.   pointer-events: none;
  762. }
  763. .event-item.hoverView .additional-info {
  764.   position: absolute;
  765.   top: 0;
  766.   left: 100%;
  767.   width: 0;
  768.   height: 0;
  769.   background-color: var(--card-background-color);
  770.   z-index: 1;
  771.   box-shadow: 0 3px 9px var(--card-box-shadow-color);
  772.   visibility: hidden;
  773.   opacity: 0;
  774.   transition: display 0s, opacity 0.1s linear;
  775.   overflow: auto;
  776.   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-background);
  777.   scrollbar-width: auto;
  778. }
  779. .event-item.hoverView .additional-info::-webkit-scrollbar {
  780.   width: 5px;
  781. }
  782. .event-item.hoverView .additional-info::-webkit-scrollbar-track {
  783.   background: var(--scrollbar-background);
  784. }
  785. .event-item.hoverView .additional-info::-webkit-scrollbar-thumb {
  786.   background: var(--scrollbar-widget-thumb);
  787. }
  788. .event-item.hoverView .additional-info::-webkit-scrollbar-thumb:hover {
  789.   opacity: 100%;
  790. }
  791. .event-item.hoverView:hover .event-item--card {
  792.   border-radius: 0 !important;
  793. }
  794. .event-item.hoverView:hover .event-item--card:before {
  795.   content: "";
  796.   position: absolute;
  797.   left: 0;
  798.   top: 0;
  799.   z-index: 1;
  800.   width: 100%;
  801.   height: 100%;
  802.   border-color: var(--primary) !important;
  803.   border-bottom: 3px;
  804.   border-top: 3px;
  805.   border-right: 0;
  806.   border-left: 3px;
  807.   border-style: solid !important;
  808. }
  809. .event-item.hoverView:hover .event-item--card .banner--content {
  810.   border-radius: 0;
  811. }
  812. .event-item.hoverView:hover .event-item--card .banner .category {
  813.   z-index: 2;
  814. }
  815. .event-item.hoverView:hover .event-item--card .additional-info {
  816.   visibility: visible;
  817.   opacity: 1;
  818.   height: 100%;
  819.   width: 90%;
  820.   transition: width 0.2s ease-in;
  821.   border-color: var(--primary) !important;
  822.   border-bottom: 3px;
  823.   border-top: 3px;
  824.   border-left: 0;
  825.   border-right: 3px;
  826.   border-style: solid !important;
  827. }
  828. @media (max-width: 687px) {
  829.   .event-item.hoverView .event-item--card:before {
  830.     border-bottom: 0 !important;
  831.     border-right: 3px !important;
  832.     border-left: 3px !important;
  833.     border-style: solid !important;
  834.   }
  835.   .event-item.hoverView .event-item--card .banner--content {
  836.     border-radius: 0;
  837.   }
  838.   .event-item.hoverView .event-item--card .additional-info {
  839.     left: auto;
  840.     right: auto;
  841.     top: 100%;
  842.     width: 100% !important;
  843.     height: 90% !important;
  844.     border-bottom: 3px !important;
  845.     border-top: 0 !important;
  846.     border-left: 3px !important;
  847.     border-right: 3px !important;
  848.   }
  849. }
  850. @media (min-width: 687px) and (max-width: 991px) {
  851.   .event-item.hoverView:nth-child(2) .event-item--card:hover,
  852.   .event-item.hoverView:nth-child(4) .event-item--card:hover {
  853.     border-radius: 0 !important;
  854.   }
  855.   .event-item.hoverView:nth-child(2) .event-item--card:hover:before,
  856.   .event-item.hoverView:nth-child(4) .event-item--card:hover:before {
  857.     border-bottom: 3px;
  858.     border-right: 3px;
  859.     border-left: 0;
  860.     border-style: solid !important;
  861.   }
  862.   .event-item.hoverView:nth-child(2)
  863.     .event-item--card:hover
  864.     .banner--content,
  865.   .event-item.hoverView:nth-child(4)
  866.     .event-item--card:hover
  867.     .banner--content {
  868.     border-radius: 0;
  869.   }
  870.   .event-item.hoverView:nth-child(2)
  871.     .event-item--card:hover
  872.     .banner
  873.     .category,
  874.   .event-item.hoverView:nth-child(4)
  875.     .event-item--card:hover
  876.     .banner
  877.     .category {
  878.     z-index: 2;
  879.   }
  880.   .event-item.hoverView:nth-child(2)
  881.     .event-item--card:hover
  882.     .additional-info,
  883.   .event-item.hoverView:nth-child(4)
  884.     .event-item--card:hover
  885.     .additional-info {
  886.     left: auto !important;
  887.     right: 100%;
  888.     border-color: var(--primary) !important;
  889.     border-bottom: 3px;
  890.     border-top: 3px;
  891.     border-left: 3px;
  892.     border-right: 0;
  893.   }
  894.   .event-item.hoverView:nth-child(2) .event-item--card .additional-info,
  895.   .event-item.hoverView:nth-child(4) .event-item--card .additional-info {
  896.     left: auto !important;
  897.     right: 100%;
  898.   }
  899. }
  900. @media (min-width: 992px) and (max-width: 1498px) {
  901.   .event-item.hoverView:nth-child(3) .event-item--card:hover,
  902.   .event-item.hoverView:nth-child(6) .event-item--card:hover {
  903.     border-radius: 0 !important;
  904.   }
  905.   .event-item.hoverView:nth-child(3) .event-item--card:hover:before,
  906.   .event-item.hoverView:nth-child(6) .event-item--card:hover:before {
  907.     border-bottom: 3px;
  908.     border-right: 3px;
  909.     border-left: 0;
  910.     border-style: solid !important;
  911.   }
  912.   .event-item.hoverView:nth-child(3)
  913.     .event-item--card:hover
  914.     .banner--content,
  915.   .event-item.hoverView:nth-child(6)
  916.     .event-item--card:hover
  917.     .banner--content {
  918.     border-radius: 0;
  919.   }
  920.   .event-item.hoverView:nth-child(3)
  921.     .event-item--card:hover
  922.     .banner
  923.     .category,
  924.   .event-item.hoverView:nth-child(6)
  925.     .event-item--card:hover
  926.     .banner
  927.     .category {
  928.     z-index: 2;
  929.   }
  930.   .event-item.hoverView:nth-child(3)
  931.     .event-item--card:hover
  932.     .additional-info,
  933.   .event-item.hoverView:nth-child(6)
  934.     .event-item--card:hover
  935.     .additional-info {
  936.     left: auto !important;
  937.     right: 100%;
  938.     border-color: var(--primary) !important;
  939.     border-bottom: 3px;
  940.     border-top: 3px;
  941.     border-left: 3px;
  942.     border-right: 0;
  943.   }
  944.   .event-item.hoverView:nth-child(3) .event-item--card .additional-info,
  945.   .event-item.hoverView:nth-child(6) .event-item--card .additional-info {
  946.     left: auto !important;
  947.     right: 100%;
  948.   }
  949. }
  950. @media (min-width: 1499px) {
  951.   .event-item.hoverView:nth-child(4) .event-item--card:hover,
  952.   .event-item.hoverView:nth-child(8) .event-item--card:hover {
  953.     border-radius: 0 !important;
  954.   }
  955.   .event-item.hoverView:nth-child(4) .event-item--card:hover:before,
  956.   .event-item.hoverView:nth-child(8) .event-item--card:hover:before {
  957.     border-bottom: 3px;
  958.     border-right: 3px;
  959.     border-left: 0;
  960.   }
  961.   .event-item.hoverView:nth-child(4)
  962.     .event-item--card:hover
  963.     .banner--content,
  964.   .event-item.hoverView:nth-child(8)
  965.     .event-item--card:hover
  966.     .banner--content {
  967.     border-radius: 0;
  968.   }
  969.   .event-item.hoverView:nth-child(4)
  970.     .event-item--card:hover
  971.     .banner
  972.     .category,
  973.   .event-item.hoverView:nth-child(8)
  974.     .event-item--card:hover
  975.     .banner
  976.     .category {
  977.     z-index: 2;
  978.   }
  979.   .event-item.hoverView:nth-child(4)
  980.     .event-item--card:hover
  981.     .additional-info,
  982.   .event-item.hoverView:nth-child(8)
  983.     .event-item--card:hover
  984.     .additional-info {
  985.     left: auto !important;
  986.     right: 100%;
  987.     border-color: var(--primary) !important;
  988.     border-bottom: 3px;
  989.     border-top: 3px;
  990.     border-left: 3px;
  991.     border-right: 0;
  992.     border-style: solid !important;
  993.   }
  994.   .event-item.hoverView:nth-child(4) .event-item--card .additional-info,
  995.   .event-item.hoverView:nth-child(8) .event-item--card .additional-info {
  996.     left: auto !important;
  997.     right: 100%;
  998.   }
  999. }
  1000. .event-item.listView .event-item--card .context {
  1001.   margin-top: -15px;
  1002.   margin-left: 10px;
  1003.   margin-right: 10px;
  1004. }
  1005. .event-item.listView .event-item--card .context--inner {
  1006.   height: 160px;
  1007. }
  1008. .event-item.listView .event-item--card .context--inner .desc {
  1009.   height: 70px;
  1010. }
  1011. .event-item.listView .event-item--card .context--inner .desc .text {
  1012.   -webkit-line-clamp: 3;
  1013. }
  1014. .event-item.listView .event-item--card .context--inner .actions {
  1015.   height: auto;
  1016. }
  1017. .event-item.listView .event-item--card .additional-info {
  1018.   height: 340px;
  1019. }
  1020. .event-item.listView
  1021.   .event-item--card
  1022.   .additional-info
  1023.   .users
  1024.   .user-item--inner {
  1025.   min-height: 45px;
  1026. }
  1027. @media (min-width: 576px) and (max-width: 687px) {
  1028.   .event-item {
  1029.     max-width: 100% !important;
  1030.     flex: 100% !important;
  1031.   }
  1032. }
  1033. @media (min-width: 1200px) and (max-width: 1499px) {
  1034.   .event-item {
  1035.     max-width: 33.33% !important;
  1036.     flex: 33.33% !important;
  1037.   }
  1038. }
  1040. /* User List Css */
  1042. .users-list--inner .title h4 {
  1043.   display: flex;
  1044.   align-items: center;
  1045.   margin-bottom: 0;
  1046. }
  1047. .users-list--inner .title h4 i {
  1048.   padding-bottom: 3px;
  1049.   padding-right: 5px;
  1050.   font-size: 1.1rem;
  1051. }
  1052. .users-list--inner .title h4 span {
  1053.   display: -webkit-box;
  1054.   overflow: hidden;
  1055.   -webkit-box-orient: vertical;
  1056.   -webkit-line-clamp: 1;
  1057.   word-break: break-word;
  1058.   font-size: 0.9rem;
  1059.   font-weight: 700;
  1060.   color: var(--card-text-color);
  1061. }
  1062. .users-list--inner .showMore {
  1063.   padding-left: 55px;
  1064. }
  1065. .users-list--inner .showMore a {
  1066.   font-size: 0.8rem;
  1067.   font-weight: 700;
  1068.   line-height: normal;
  1069.   color: var(--primary);
  1070.   text-decoration: none;
  1071. }
  1073. .user-item--inner {
  1074.   display: flex;
  1075.   align-items: center;
  1076.   min-height: 55px;
  1077. }
  1078. .user-item--inner a {
  1079.   display: flex;
  1080.   width: 100%;
  1081.   margin: auto 0;
  1082. }
  1083. .user-item--inner a .profile {
  1084.   display: flex;
  1085.   align-items: center;
  1086.   padding-right: 7px;
  1087. }
  1088. .user-item--inner a .profile i {
  1089.   display: block;
  1090.   width: 36px;
  1091.   height: 36px;
  1092.   background-repeat: no-repeat;
  1093.   background-size: cover;
  1094.   border-radius: 50%;
  1095. }
  1096. .user-item--inner a .details {
  1097.   display: grid;
  1098.   width: 100%;
  1099.   margin: auto 0;
  1100. }
  1101. .user-item--inner a .details h4 {
  1102.   display: flex;
  1103.   align-items: center;
  1104.   margin-bottom: 1px;
  1105.   overflow: hidden;
  1106.   font-size: 0.9rem;
  1107.   font-weight: 500;
  1108.   color: var(--card-text-color);
  1109. }
  1110. .user-item--inner a .details h4 p {
  1111.   display: -webkit-box;
  1112.   margin-bottom: 0;
  1113.   -webkit-line-clamp: 1;
  1114.   -webkit-box-orient: vertical;
  1115.   overflow: hidden;
  1116.   text-overflow: ellipsis;
  1117.   word-break: break-all;
  1118. }
  1119. .user-item--inner a .details .job-company {
  1120.   display: -webkit-box;
  1121.   -webkit-box-orient: vertical;
  1122.   -webkit-line-clamp: 1;
  1123.   overflow: hidden;
  1124.   font-size: 0.7rem;
  1125.   font-weight: 600;
  1126.   color: var(--card-second-text-color);
  1127.   line-height: normal;
  1128. }
  1130. /* Button Css */
  1132. .btn {
  1133.   display: flex !important;
  1134.   align-items: center;
  1135.   justify-content: center;
  1136.   height: 36px;
  1137.   padding: 0 20px !important;
  1138.   font-size: 1rem !important;
  1139.   font-weight: 500 !important;
  1140. }
  1142. .btn.btn-primary {
  1143.   color: var(--primary-button-text-color) !important;
  1144.   background-color: var(--primary-button-background-color) !important;
  1145.   border: var(--primary-button-border-width) solid
  1146.     var(--primary-button-border-color) !important;
  1147.   border-radius: var(--primary-button-border-radius) !important;
  1148.   box-shadow: 0 3px 9px var(--primary-button-box-shadow-color) !important;
  1149. }
  1150. .btn.btn-primary:hover {
  1151.   color: var(--primary-button-text-color--hover) !important;
  1152.   background-color: var(
  1153.     --primary-button-background-color--hover
  1154.   ) !important;
  1155.   border: var(--primary-button-border-width) solid
  1156.     var(--primary-button-border-color--hover) !important;
  1157. }
  1158. .btn.btn-primary.active {
  1159.   color: var(--primary-button-text-color--active) !important;
  1160.   background-color: var(
  1161.     --primary-button-background-color--active
  1162.   ) !important;
  1163.   border: var(--primary-button-border-width) solid
  1164.     var(--primary-button-border-color--active) !important;
  1165. }
  1167. .btn-secondary {
  1168.   color: var(--secondary-button-text-color) !important;
  1169.   background-color: var(--secondary-button-background-color) !important;
  1170.   border: var(--secondary-button-border-width) solid
  1171.     var(--secondary-button-border-color) !important;
  1172.   border-radius: var(--secondary-button-border-radius) !important;
  1173.   box-shadow: 0 3px 9px var(--secondary-button-box-shadow-color) !important;
  1174. }
  1175. .btn-secondary:hover {
  1176.   color: var(--secondary-button-text-color--hover) !important;
  1177.   background-color: var(
  1178.     --secondary-button-background-color--hover
  1179.   ) !important;
  1180.   border: var(--secondary-button-border-width) solid
  1181.     var(--secondary-button-border-color--hover) !important;
  1182.   box-shadow: 0 3px 9px var(--secondary-button-box-shadow-color);
  1183. }
  1184. .btn-secondary.active {
  1185.   color: var(--secondary-button-text-color--active) !important;
  1186.   background-color: var(
  1187.     --secondary-button-background-color--active
  1188.   ) !important;
  1189.   border: var(--secondary-button-border-width) solid
  1190.     var(--secondary-button-border-color--active) !important;
  1191.   box-shadow: 0 3px 9px var(--secondary-button-box-shadow-color);
  1192. }
  1194. /* Course Css */
  1196. .course-overview {
  1197.   background-color: var(--iframe-body-background-color);
  1198. }
  1199. .course-overview .p-container {
  1200.   padding: 10px;
  1201. }
  1202. .course-overview--items {
  1203.   padding: 20px 0;
  1204. }
  1205. @media only screen and (max-width: 1500px) {
  1206.   .course-overview--items {
  1207.     padding: 20px 20px;
  1208.   }
  1209. }
  1210. .course-overview--items > .row {
  1211.   justify-content: center;
  1212. }
  1214. .course-item {
  1215.   margin-bottom: 30px;
  1216. }
  1217. .course-item--card {
  1218.   cursor: pointer;
  1219.   border: initial !important;
  1220.   background-color: var(--card-background-color);
  1221.   border-radius: var(--card-border-radius);
  1222.   box-shadow: 0 3px 9px var(--card-box-shadow-color);
  1223.   color: var(--card-text-color);
  1224. }
  1225. .course-item--card .banner--content {
  1226.   position: relative;
  1227.   overflow: hidden;
  1228.   content: "";
  1229.   aspect-ratio: 16/9;
  1230.   border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
  1231.   background-position: center;
  1232.   background-repeat: no-repeat;
  1233.   background-size: cover;
  1234. }
  1235. .course-item--card .banner--content .new-ribbon {
  1236.   position: absolute;
  1237.   top: 0px;
  1238.   left: -40px;
  1239.   transform: rotate(-43deg);
  1240. }
  1241. .course-item--card .banner--content .new-ribbon .content {
  1242.   display: flex;
  1243.   align-items: center;
  1244.   justify-content: center;
  1245.   width: 140px;
  1246.   height: 28px;
  1247.   padding: 12px 6px 10px 6px;
  1248.   font-size: 14px;
  1249.   font-weight: 500;
  1250.   color: var(--light-clr);
  1251.   background-color: var(--danger);
  1252.   box-shadow: 0px 3px 9px #9ba7ba;
  1253. }
  1254. .course-item--card .banner--content .new-ribbon .content:hover {
  1255.   text-decoration: none;
  1256. }
  1257. .course-item--card .banner--content .new-ribbon .content span {
  1258.   display: -webkit-box;
  1259.   overflow: hidden;
  1260.   width: 50px;
  1261.   -webkit-box-orient: vertical;
  1262.   -webkit-line-clamp: 1;
  1263. }
  1264. .course-item--card .banner--content .new-ribbon .content i {
  1265.   margin-right: 2px;
  1266.   margin-bottom: 2px;
  1267.   font-size: 18px;
  1268. }
  1269. .course-item--card .banner--content .dateBadge {
  1270.   position: absolute;
  1271.   top: 10px;
  1272.   right: 10px;
  1273. }
  1274. .course-item--card .banner--content .dateBadge .content {
  1275.   display: flex;
  1276.   align-items: center;
  1277.   overflow: hidden;
  1278.   height: 55px;
  1279.   background-color: var(--light-clr);
  1280.   border-radius: 3px;
  1281.   box-shadow: 0 3px 9px var(--card-box-shadow-color);
  1282. }
  1283. .course-item--card .banner--content .dateBadge .content .day {
  1284.   display: flex;
  1285.   align-items: center;
  1286.   padding: 5px 10px;
  1287.   line-height: normal;
  1288. }
  1289. .course-item--card .banner--content .dateBadge .content .day span {
  1290.   padding-top: 3px;
  1291.   font-size: 2.3rem;
  1292.   font-weight: 900;
  1293.   color: var(--primary);
  1294. }
  1295. .course-item--card .banner--content .dateBadge .content .time {
  1296.   position: relative;
  1297.   display: flex;
  1298.   flex-direction: column;
  1299.   justify-content: center;
  1300.   height: inherit;
  1301.   padding: 0 10px;
  1302. }
  1303. .course-item--card .banner--content .dateBadge .content .time .month {
  1304.   display: -webkit-box;
  1305.   overflow: hidden;
  1306.   -webkit-box-orient: vertical;
  1307.   -webkit-line-clamp: 1;
  1308.   max-width: 120px;
  1309.   padding-top: 3px;
  1310.   font-size: 1rem;
  1311.   font-weight: 700;
  1312.   color: var(--primary);
  1313.   line-height: normal;
  1314.   border-bottom: 2px solid var(--primary);
  1315. }
  1316. .course-item--card .banner--content .dateBadge .content .time .clock {
  1317.   padding-top: 2px;
  1318.   font-size: 0.7rem;
  1319.   font-weight: 700;
  1320.   color: var(--primary);
  1321. }
  1322. .course-item--card .banner--content .dateBadge .content .time::before {
  1323.   content: "";
  1324.   position: absolute;
  1325.   left: 0;
  1326.   top: 0;
  1327.   width: 100%;
  1328.   height: 100%;
  1329.   background-color: var(--primary);
  1330.   opacity: 0.2;
  1331. }
  1332. .course-item--card .banner--content .dateBadge .content .year {
  1333.   display: flex;
  1334.   align-items: center;
  1335.   justify-content: center;
  1336.   height: inherit;
  1337.   background-color: var(--primary);
  1338. }
  1339. .course-item--card .banner--content .dateBadge .content .year span {
  1340.   font-size: 1rem;
  1341.   font-weight: 700;
  1342.   padding-right: 2px;
  1343.   writing-mode: vertical-rl;
  1344.   text-orientation: mixed;
  1345.   transform: rotate(180deg);
  1346.   color: var(--light-clr);
  1347. }
  1348. .course-item--card .banner .category {
  1349.   position: absolute;
  1350.   top: 69px;
  1351.   left: -10.5px;
  1352. }
  1353. .course-item--card .banner .category .content {
  1354.   display: flex;
  1355.   align-items: center;
  1356.   margin-right: 10px;
  1357.   height: 28px;
  1358.   padding: 0 10px;
  1359.   background-color: var(--course-category-background-color);
  1360.   border-radius: 3px;
  1361. }
  1362. .course-item--card .banner .category .content span {
  1363.   display: -webkit-box;
  1364.   min-width: fit-content;
  1365.   max-width: inherit;
  1366.   overflow: hidden;
  1367.   padding-top: 2px;
  1368.   -webkit-box-orient: vertical;
  1369.   -webkit-line-clamp: 1;
  1370.   font-size: 0.8rem;
  1371.   font-weight: 700;
  1372.   color: var(--light-clr);
  1373.   word-break: break-all;
  1374. }
  1375. .course-item--card .banner .category .content:after {
  1376.   content: "\e04a";
  1377.   font-family: "Font Awesome Kit";
  1378.   transform: rotate(180deg);
  1379.   font-size: 11.5px;
  1380.   position: absolute;
  1381.   left: 0.5px;
  1382.   top: -7.5px;
  1383.   color: var(--course-category-background-color);
  1384. }
  1385. .course-item--card .context {
  1386.   z-index: 0;
  1387.   margin-top: -20px;
  1388.   margin-left: 20px;
  1389.   margin-right: 20px;
  1390. }
  1391. .course-item--card .context--inner {
  1392.   padding: 15px;
  1393.   background-color: var(--card-background-color);
  1394.   border-radius: var(--card-border-radius);
  1395. }
  1396. .course-item--card .context--inner .header {
  1397.   display: flex;
  1398.   height: 45px;
  1399. }
  1400. .course-item--card .context--inner .header .title h3 {
  1401.   display: -webkit-box;
  1402.   width: fit-content;
  1403.   font-size: 1.1rem;
  1404.   font-weight: 700;
  1405.   color: var(--card-text-color);
  1406.   margin-bottom: 0;
  1407.   text-overflow: ellipsis;
  1408.   -webkit-box-orient: vertical;
  1409.   -webkit-line-clamp: 2;
  1410.   overflow: hidden;
  1411.   cursor: pointer;
  1412. }
  1413. .course-item--card .context--inner .header .actions {
  1414.   padding-left: 5px;
  1415. }
  1416. .course-item--card .context--inner .header .actions .shareBtn {
  1417.   width: 25px;
  1418.   height: 25px;
  1419.   padding: 0 !important;
  1420. }
  1421. .course-item--card .context--inner .header .actions .shareBtn i {
  1422.   font-weight: 500;
  1423. }
  1424. .course-item--card .context--inner .desc {
  1425.   height: 85px;
  1426. }
  1427. .course-item--card .context--inner .desc .text {
  1428.   display: -webkit-box;
  1429.   width: fit-content;
  1430.   margin-bottom: 0;
  1431.   font-size: 0.9rem;
  1432.   font-weight: 400;
  1433.   line-height: 1.2rem;
  1434.   color: var(--card-text-color);
  1435.   text-overflow: ellipsis;
  1436.   -webkit-box-orient: vertical;
  1437.   -webkit-line-clamp: 3;
  1438.   overflow: hidden;
  1439. }
  1440. .course-item--card .context--inner .desc .showMore a {
  1441.   font-size: 0.7rem;
  1442.   font-weight: 900;
  1443.   line-height: normal;
  1444.   color: var(--primary);
  1445.   text-decoration: none;
  1446. }
  1447. .course-item--card .context--inner .info {
  1448.   height: 50px;
  1449. }
  1450. .course-item--card
  1451.   .context--inner
  1452.   .info
  1453.   > .row
  1454.   .info--item
  1455.   .content--icon {
  1456.   padding-right: 8px;
  1457. }
  1458. .course-item--card
  1459.   .context--inner
  1460.   .info
  1461.   > .row
  1462.   .info--item
  1463.   .content--icon
  1464.   i {
  1465.   font-size: 1.3rem;
  1466.   font-weight: 500;
  1467. }
  1468. .course-item--card
  1469.   .context--inner
  1470.   .info
  1471.   > .row
  1472.   .info--item
  1473.   .content--desc {
  1474.   display: inline-grid;
  1475.   padding-top: 3px;
  1476. }
  1477. .course-item--card
  1478.   .context--inner
  1479.   .info
  1480.   > .row
  1481.   .info--item
  1482.   .content--desc
  1483.   span {
  1484.   line-height: normal;
  1485. }
  1486. .course-item--card
  1487.   .context--inner
  1488.   .info
  1489.   > .row
  1490.   .info--item
  1491.   .content--desc
  1492.   .count {
  1493.   font-size: 0.9rem;
  1494.   font-weight: 700;
  1495.   color: var(--card-text-color);
  1496. }
  1497. .course-item--card
  1498.   .context--inner
  1499.   .info
  1500.   > .row
  1501.   .info--item
  1502.   .content--desc
  1503.   .field {
  1504.   font-size: 0.7rem;
  1505.   font-weight: 900;
  1506.   color: var(--card-second-text-color);
  1507. }
  1508. .course-item--card .context--inner .actions {
  1509.   display: flex;
  1510.   height: 40px;
  1511. }
  1512. .course-item--card .context--inner .actions .registerBtn {
  1513.   margin-right: -5px;
  1514.   margin-left: auto;
  1515.   padding-left: 8px;
  1516. }
  1517. .course-item--card .context--inner .actions .registerBtn .btn {
  1518.   height: 34px;
  1519.   padding: 0 35px !important;
  1520.   font-size: 0.8rem !important;
  1521. }
  1522. .course-item--card .additional-info--inner {
  1523.   padding: 15px;
  1524. }
  1525. .course-item--card .additional-info--inner .users .users-list {
  1526.   margin-bottom: 10px;
  1527. }
  1528. .course-item--card .additional-info--inner .presenters--inner .title h4 {
  1529.   display: flex;
  1530.   align-items: center;
  1531.   margin-bottom: 0;
  1532. }
  1533. .course-item--card
  1534.   .additional-info--inner
  1535.   .presenters--inner
  1536.   .title
  1537.   h4
  1538.   i {
  1539.   padding-bottom: 3px;
  1540.   padding-right: 5px;
  1541.   font-size: 1.1rem;
  1542. }
  1543. .course-item--card
  1544.   .additional-info--inner
  1545.   .presenters--inner
  1546.   .title
  1547.   h4
  1548.   span {
  1549.   display: -webkit-box;
  1550.   overflow: hidden;
  1551.   -webkit-box-orient: vertical;
  1552.   -webkit-line-clamp: 1;
  1553.   word-break: break-all;
  1554.   font-size: 0.9rem;
  1555.   font-weight: 700;
  1556.   color: var(--card-text-color);
  1557. }
  1558. .course-item--card
  1559.   .additional-info--inner
  1560.   .presenters--inner
  1561.   .content
  1562.   .presenterItem
  1563.   .picture
  1564.   img {
  1565.   width: 90px;
  1566.   height: 60px;
  1567.   aspect-ratio: 16/9;
  1568.   background-color: var(--light-clr);
  1569.   border-radius: var(--card-border-radius);
  1570. }
  1571. @media only screen and (max-width: 1200px) {
  1572.   .course-item--card
  1573.     .additional-info--inner
  1574.     .presenters--inner
  1575.     .content
  1576.     .presenterItem
  1577.     .picture
  1578.     img {
  1579.     width: 60px;
  1580.     height: 40px;
  1581.   }
  1582. }
  1583. .course-item--card
  1584.   .additional-info--inner
  1585.   .presenters--inner
  1586.   .content
  1587.   .presenterItem
  1588.   .details
  1589.   .name
  1590.   h5 {
  1591.   display: -webkit-box;
  1592.   overflow: hidden;
  1593.   margin-bottom: 3px;
  1594.   -webkit-box-orient: vertical;
  1595.   -webkit-line-clamp: 1;
  1596.   word-break: break-word;
  1597.   font-size: 1rem;
  1598.   font-weight: 700;
  1599.   color: var(--card-text-color);
  1600. }
  1601. .course-item--card
  1602.   .additional-info--inner
  1603.   .presenters--inner
  1604.   .content
  1605.   .presenterItem
  1606.   .details
  1607.   .desc
  1608.   p {
  1609.   display: -webkit-box;
  1610.   overflow: hidden;
  1611.   margin-bottom: 0;
  1612.   -webkit-box-orient: vertical;
  1613.   -webkit-line-clamp: 2;
  1614.   word-break: break-word;
  1615.   font-size: 0.8rem;
  1616.   font-weight: 400;
  1617.   color: var(--card-text-color);
  1618. }
  1619. .course-item--card
  1620.   .additional-info--inner
  1621.   .presenters--inner
  1622.   .content
  1623.   .presenterItem
  1624.   .details
  1625.   .desc
  1626.   .showMore
  1627.   a {
  1628.   font-size: 0.8rem;
  1629.   font-weight: 700;
  1630.   line-height: normal;
  1631.   color: var(--primary);
  1632.   text-decoration: none;
  1633. }
  1634. .course-item--card .registerBtnEnd {
  1635.   width: 100%;
  1636.   height: 45px;
  1637.   border: none !important;
  1638.   border-radius: 0 0 var(--card-border-radius) var(--card-border-radius) !important;
  1639.   font-size: 0.9rem !important;
  1640. }
  1641. .course-item--card .registerBtnEnd:hover {
  1642.   border: none !important;
  1643. }
  1644. .course-item--card::before {
  1645.   pointer-events: none;
  1646. }
  1647. .course-item.hoverView .additional-info {
  1648.   position: absolute;
  1649.   top: 0;
  1650.   left: 100%;
  1651.   width: 0;
  1652.   height: 0;
  1653.   background-color: var(--card-background-color);
  1654.   z-index: 1;
  1655.   box-shadow: 0 3px 9px var(--card-box-shadow-color);
  1656.   visibility: hidden;
  1657.   opacity: 0;
  1658.   transition: display 0s, opacity 0.1s linear;
  1659.   overflow: auto;
  1660.   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-background);
  1661.   scrollbar-width: auto;
  1662. }
  1663. .course-item.hoverView .additional-info::-webkit-scrollbar {
  1664.   width: 5px;
  1665. }
  1666. .course-item.hoverView .additional-info::-webkit-scrollbar-track {
  1667.   background: var(--scrollbar-background);
  1668. }
  1669. .course-item.hoverView .additional-info::-webkit-scrollbar-thumb {
  1670.   background: var(--scrollbar-widget-thumb);
  1671. }
  1672. .course-item.hoverView .additional-info::-webkit-scrollbar-thumb:hover {
  1673.   opacity: 100%;
  1674. }
  1675. .course-item.hoverView:hover .course-item--card {
  1676.   border-radius: 0 !important;
  1677. }
  1678. .course-item.hoverView:hover .course-item--card:before {
  1679.   content: "";
  1680.   position: absolute;
  1681.   left: 0;
  1682.   top: 0;
  1683.   z-index: 1;
  1684.   width: 100%;
  1685.   height: 100%;
  1686.   border-color: var(--primary) !important;
  1687.   border-bottom: 3px;
  1688.   border-top: 3px;
  1689.   border-right: 0;
  1690.   border-left: 3px;
  1691.   border-style: solid !important;
  1692. }
  1693. .course-item.hoverView:hover .course-item--card .banner--content {
  1694.   border-radius: 0;
  1695. }
  1696. .course-item.hoverView:hover .course-item--card .banner .category {
  1697.   z-index: 2;
  1698. }
  1699. .course-item.hoverView:hover .course-item--card .additional-info {
  1700.   visibility: visible;
  1701.   opacity: 1;
  1702.   height: 100%;
  1703.   width: 90%;
  1704.   transition: width 0.2s ease-in;
  1705.   border-color: var(--primary) !important;
  1706.   border-bottom: 3px;
  1707.   border-top: 3px;
  1708.   border-left: 0;
  1709.   border-right: 3px;
  1710.   border-style: solid !important;
  1711. }
  1712. @media (max-width: 687px) {
  1713.   .course-item.hoverView .course-item--card:before {
  1714.     border-bottom: 0 !important;
  1715.     border-right: 3px !important;
  1716.     border-left: 3px !important;
  1717.     border-style: solid !important;
  1718.   }
  1719.   .course-item.hoverView .course-item--card .banner--content {
  1720.     border-radius: 0;
  1721.   }
  1722.   .course-item.hoverView .course-item--card .additional-info {
  1723.     left: auto;
  1724.     right: auto;
  1725.     top: 100%;
  1726.     width: 100% !important;
  1727.     height: 90% !important;
  1728.     border-bottom: 3px !important;
  1729.     border-top: 0 !important;
  1730.     border-left: 3px !important;
  1731.     border-right: 3px !important;
  1732.   }
  1733. }
  1734. @media (min-width: 687px) and (max-width: 991px) {
  1735.   .course-item.hoverView:nth-child(2) .course-item--card:hover,
  1736.   .course-item.hoverView:nth-child(4) .course-item--card:hover {
  1737.     border-radius: 0 !important;
  1738.   }
  1739.   .course-item.hoverView:nth-child(2) .course-item--card:hover:before,
  1740.   .course-item.hoverView:nth-child(4) .course-item--card:hover:before {
  1741.     border-bottom: 3px;
  1742.     border-right: 3px;
  1743.     border-left: 0;
  1744.     border-style: solid !important;
  1745.   }
  1746.   .course-item.hoverView:nth-child(2)
  1747.     .course-item--card:hover
  1748.     .banner--content,
  1749.   .course-item.hoverView:nth-child(4)
  1750.     .course-item--card:hover
  1751.     .banner--content {
  1752.     border-radius: 0;
  1753.   }
  1754.   .course-item.hoverView:nth-child(2)
  1755.     .course-item--card:hove4
  1756.     .banner
  1757.     .category,
  1758.   .course-item.hoverView:nth-child(6)
  1759.     .course-item--card:hover
  1760.     .banner
  1761.     .category {
  1762.     z-index: 2;
  1763.   }
  1764.   .course-item.hoverView:nth-child(2)
  1765.     .course-item--card:hover
  1766.     .additional-info,
  1767.   .course-item.hoverView:nth-child(4)
  1768.     .course-item--card:hover
  1769.     .additional-info {
  1770.     left: auto !important;
  1771.     right: 100%;
  1772.     border-color: var(--primary) !important;
  1773.     border-bottom: 3px;
  1774.     border-top: 3px;
  1775.     border-left: 3px;
  1776.     border-right: 0;
  1777.   }
  1778.   .course-item.hoverView:nth-child(2) .course-item--card .additional-info,
  1779.   .course-item.hoverView:nth-child(4)
  1780.     .course-item--card
  1781.     .additional-info {
  1782.     left: auto !important;
  1783.     right: 100%;
  1784.   }
  1785. }
  1786. @media (min-width: 992px) and (max-width: 1498px) {
  1787.   .course-item.hoverView:nth-child(3) .course-item--card:hover,
  1788.   .course-item.hoverView:nth-child(6) .course-item--card:hover {
  1789.     border-radius: 0 !important;
  1790.   }
  1791.   .course-item.hoverView:nth-child(3) .course-item--card:hover:before,
  1792.   .course-item.hoverView:nth-child(6) .course-item--card:hover:before {
  1793.     border-bottom: 3px;
  1794.     border-right: 3px;
  1795.     border-left: 0;
  1796.     border-style: solid !important;
  1797.   }
  1798.   .course-item.hoverView:nth-child(3)
  1799.     .course-item--card:hover
  1800.     .banner--content,
  1801.   .course-item.hoverView:nth-child(6)
  1802.     .course-item--card:hover
  1803.     .banner--content {
  1804.     border-radius: 0;
  1805.   }
  1806.   .course-item.hoverView:nth-child(3)
  1807.     .course-item--card:hover
  1808.     .banner
  1809.     .category,
  1810.   .course-item.hoverView:nth-child(6)
  1811.     .course-item--card:hover
  1812.     .banner
  1813.     .category {
  1814.     z-index: 2;
  1815.   }
  1816.   .course-item.hoverView:nth-child(3)
  1817.     .course-item--card:hover
  1818.     .additional-info,
  1819.   .course-item.hoverView:nth-child(6)
  1820.     .course-item--card:hover
  1821.     .additional-info {
  1822.     left: auto !important;
  1823.     right: 100%;
  1824.     border-color: var(--primary) !important;
  1825.     border-bottom: 3px;
  1826.     border-top: 3px;
  1827.     border-left: 3px;
  1828.     border-right: 0;
  1829.   }
  1830.   .course-item.hoverView:nth-child(3) .course-item--card .additional-info,
  1831.   .course-item.hoverView:nth-child(6)
  1832.     .course-item--card
  1833.     .additional-info {
  1834.     left: auto !important;
  1835.     right: 100%;
  1836.   }
  1837. }
  1838. @media (min-width: 1499px) {
  1839.   .course-item.hoverView:nth-child(4) .course-item--card:hover,
  1840.   .course-item.hoverView:nth-child(8) .course-item--card:hover {
  1841.     border-radius: 0 !important;
  1842.   }
  1843.   .course-item.hoverView:nth-child(4) .course-item--card:hover:before,
  1844.   .course-item.hoverView:nth-child(8) .course-item--card:hover:before {
  1845.     border-bottom: 3px;
  1846.     border-right: 3px;
  1847.     border-left: 0;
  1848.   }
  1849.   .course-item.hoverView:nth-child(4)
  1850.     .course-item--card:hover
  1851.     .banner--content,
  1852.   .course-item.hoverView:nth-child(8)
  1853.     .course-item--card:hover
  1854.     .banner--content {
  1855.     border-radius: 0;
  1856.   }
  1857.   .course-item.hoverView:nth-child(4)
  1858.     .course-item--card:hover
  1859.     .banner
  1860.     .category,
  1861.   .course-item.hoverView:nth-child(8)
  1862.     .course-item--card:hover
  1863.     .banner
  1864.     .category {
  1865.     z-index: 2;
  1866.   }
  1867.   .course-item.hoverView:nth-child(4)
  1868.     .course-item--card:hover
  1869.     .additional-info,
  1870.   .course-item.hoverView:nth-child(8)
  1871.     .course-item--card:hover
  1872.     .additional-info {
  1873.     left: auto !important;
  1874.     right: 100%;
  1875.     border-color: var(--primary) !important;
  1876.     border-bottom: 3px;
  1877.     border-top: 3px;
  1878.     border-left: 3px;
  1879.     border-right: 0;
  1880.     border-style: solid !important;
  1881.   }
  1882.   .course-item.hoverView:nth-child(4) .course-item--card .additional-info,
  1883.   .course-item.hoverView:nth-child(8)
  1884.     .course-item--card
  1885.     .additional-info {
  1886.     left: auto !important;
  1887.     right: 100%;
  1888.   }
  1889. }
  1890. .course-item.listView .course-item--card .context {
  1891.   margin-top: -15px;
  1892.   margin-left: 10px;
  1893.   margin-right: 10px;
  1894. }
  1895. .course-item.listView .course-item--card .context--inner {
  1896.   height: 260px;
  1897.   padding-bottom: 0;
  1898. }
  1899. .course-item.listView .course-item--card .context--inner .info {
  1900.   height: 90px;
  1901.   padding-top: 0 !important;
  1902.   overflow-x: hidden;
  1903.   overflow-y: auto;
  1904.   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-background);
  1905.   scrollbar-width: auto;
  1906. }
  1907. .course-item.listView .course-item--card .context--inner .info > .row {
  1908.   margin-left: auto !important;
  1909.   margin-right: auto !important;
  1910. }
  1911. .course-item.listView
  1912.   .course-item--card
  1913.   .context--inner
  1914.   .info
  1915.   > .row
  1916.   .info--item {
  1917.   padding-left: 0px !important;
  1918. }
  1919. .course-item.listView
  1920.   .course-item--card
  1921.   .context--inner
  1922.   .info
  1923.   > .row
  1924.   .info--item.tasls {
  1925.   padding-bottom: 0 !important;
  1926. }
  1927. .course-item.listView
  1928.   .course-item--card
  1929.   .context--inner
  1930.   .info::-webkit-scrollbar {
  1931.   width: 3px;
  1932. }
  1933. .course-item.listView
  1934.   .course-item--card
  1935.   .context--inner
  1936.   .info::-webkit-scrollbar-track {
  1937.   background: var(--scrollbar-background);
  1938. }
  1939. .course-item.listView
  1940.   .course-item--card
  1941.   .context--inner
  1942.   .info::-webkit-scrollbar-thumb {
  1943.   background: var(--scrollbar-widget-thumb);
  1944. }
  1945. .course-item.listView
  1946.   .course-item--card
  1947.   .context--inner
  1948.   .info::-webkit-scrollbar-thumb:hover {
  1949.   opacity: 100%;
  1950. }
  1951. .course-item.listView .course-item--card .context--inner .desc {
  1952.   height: 90px;
  1953. }
  1954. .course-item.listView .course-item--card .context--inner .desc .text {
  1955.   -webkit-line-clamp: 3;
  1956. }
  1957. .course-item.listView .course-item--card .context--inner .actions {
  1958.   height: auto;
  1959. }
  1960. .course-item.listView .course-item--card .additional-info {
  1961.   height: 340px;
  1962. }
  1963. .course-item.listView
  1964.   .course-item--card
  1965.   .additional-info
  1966.   .users
  1967.   .user-item--inner {
  1968.   min-height: 45px;
  1969. }
  1970. @media (min-width: 576px) and (max-width: 687px) {
  1971.   .course-item {
  1972.     max-width: 100% !important;
  1973.     flex: 100% !important;
  1974.   }
  1975. }
  1976. @media (min-width: 1200px) and (max-width: 1499px) {
  1977.   .course-item {
  1978.     max-width: 33.33% !important;
  1979.     flex: 33.33% !important;
  1980.   }
  1981. }
  1983. /* Modal Css */
  1985. .modal {
  1986.   display: none; /* Hidden by default */
  1987.   position: fixed; /* Stay in place */
  1988.   z-index: 1; /* Sit on top */
  1989.   padding-top: 100px; /* Location of the box */
  1990.   left: 0;
  1991.   top: 0;
  1992.   width: 100%; /* Full width */
  1993.   height: 100%; /* Full height */
  1994.   overflow: auto; /* Enable scroll if needed */
  1995.   background-color: rgb(0, 0, 0); /* Fallback color */
  1996.   background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  1997. }
  1999. /* Modal Content */
  2000. .modal-content {
  2001.   background-color: #fefefe;
  2002.   margin: auto;
  2003.   padding: 20px;
  2004.   border: 1px solid #888;
  2005.   width: 80%;
  2006. }
  2008. /* Modal Close Button */
  2009. .close {
  2010.   color: #aaaaaa;
  2011.   float: right;
  2012.   font-size: 28px;
  2013.   font-weight: bold;
  2014.   float: right !important;
  2015. }
  2017. .close:hover,
  2018. .close:focus {
  2019.   color: #000;
  2020.   text-decoration: none;
  2021.   cursor: pointer;
  2022. }
  2024. /* Attendee Css */
  2026. .attendee-overview {
  2027.   background-color: var(--iframe-body-background-color);
  2028. }
  2029. .attendee-overview .p-container {
  2030.   padding: 10px;
  2031. }
  2032. .attendee-overview--items {
  2033.   padding: 20px 0;
  2034. }
  2035. @media only screen and (max-width: 1500px) {
  2036.   .attendee-overview--items {
  2037.     padding: 20px 20px;
  2038.   }
  2039. }
  2040. .attendee-overview--items > .row {
  2041.   justify-content: center;
  2042. }
  2044. @media (max-width: 1400px) and (min-width: 1200px) {
  2045.   .attendee-item {
  2046.     max-width: 25% !important;
  2047.     flex: 25% !important;
  2048.   }
  2049. }
  2050. .attendee-item--inner {
  2051.   margin-bottom: 30px;
  2052.   background-color: var(--card-background-color) !important;
  2053.   border: initial !important;
  2054.   border-radius: var(--card-border-radius) !important;
  2055.   box-shadow: 0 3px 9px var(--card-box-shadow-color);
  2056.   color: var(--card-text-color);
  2057. }
  2058. .attendee-item--inner:hover {
  2059.   box-shadow: 0px 3px 9px var(--primary-80);
  2060. }
  2061. .attendee-item--inner .avatar .profile-avatar {
  2062.   position: relative;
  2063. }
  2064. .attendee-item--inner .avatar .profile-avatar i {
  2065.   position: relative;
  2066.   display: block;
  2067.   width: 156px;
  2068.   height: 156px;
  2069.   margin: auto;
  2070.   background-repeat: no-repeat;
  2071.   background-position: center;
  2072.   background-size: contain;
  2073.   border-radius: var(--circle-border-radius);
  2074.   border-radius: 50%;
  2075. }
  2076. /*
  2077. .attendee-item--inner .avatar .profile-avatar i::after {
  2078.   position: absolute;
  2079.   top: 5px;
  2080.   right: 20px;
  2081.   display: block;
  2082.   width: 27px;
  2083.   height: 27px;
  2084.   content: "";
  2085.   border-radius: var(--circle-border-radius);
  2086.   border: var(--status-indicator-border-width) solid
  2087.     var(--status-indicator-border-clr);
  2088.   background-color: var(--offline-indicator-bg-clr);
  2089. }
  2090. .attendee-item--inner .avatar .profile-avatar i.online::after {
  2091.   background-color: var(--online-indicator-bg-clr);
  2092. }
  2093. */
  2094. .attendee-item--inner .avatar::before {
  2095.   content: "";
  2096.   display: block;
  2097.   position: absolute;
  2098.   width: 100%;
  2099.   background-color: var(--primary);
  2100.   height: 24%;
  2101.   top: 0;
  2102.   left: 0;
  2103.   border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
  2104.   z-index: 0;
  2105.   opacity: 0.1;
  2106. }
  2107. .attendee-item--inner .title {
  2108.   margin-top: 7px;
  2109. }
  2110. .attendee-item--inner .title .salutation {
  2111.   display: -webkit-box;
  2112.   overflow: hidden;
  2113.   text-overflow: ellipsis;
  2114.   height: 16px;
  2115.   display: -webkit-box;
  2116.   margin-bottom: 4px;
  2117.   -webkit-line-clamp: 1; /* number of lines to show */
  2118.   line-clamp: 1;
  2119.   -webkit-box-orient: vertical;
  2120.   font-weight: 700;
  2121.   font-size: 0.8rem;
  2122. }
  2123. .attendee-item--inner .title--name {
  2124.   display: block;
  2125.   height: 25px;
  2126.   text-decoration: none;
  2127. }
  2128. .attendee-item--inner .title--name h2 {
  2129.   display: -webkit-box;
  2130.   overflow: hidden;
  2131.   text-overflow: ellipsis;
  2132.   display: -webkit-box;
  2133.   -webkit-line-clamp: 1; /* number of lines to show */
  2134.   line-clamp: 1;
  2135.   -webkit-box-orient: vertical;
  2136.   font-size: 1.1rem;
  2137.   font-weight: 700;
  2138.   color: var(--card-text-color);
  2139.   word-break: break-all;
  2140.   cursor: pointer;
  2141. }
  2142. .attendee-item--inner .title--name .flag {
  2143.   border-radius: 3px;
  2144. }
  2145. .attendee-item--inner .title--bio {
  2146.   display: -webkit-box;
  2147.   height: 40px;
  2148.   overflow: hidden;
  2149.   font-size: 0.8rem;
  2150.   font-weight: 400;
  2151.   color: var(--card-second-text-color);
  2152.   overflow: hidden;
  2153.   text-overflow: ellipsis;
  2154.   display: -webkit-box;
  2155.   -webkit-line-clamp: 2;
  2156.   -webkit-box-orient: vertical;
  2157. }
  2158. .attendee-item--inner .title--bio p {
  2159.   color: var(--card-second-text-color);
  2160. }
  2161. .attendee-item--inner .social {
  2162.   height: 36px;
  2163. }
  2164. .attendee-item--inner .social--wrapper {
  2165.   justify-content: center;
  2166. }
  2167. .attendee-item--inner .social a {
  2168.   width: 33px;
  2169.   height: 33px;
  2170.   padding: 8px !important;
  2171. }
  2172. .attendee-item--inner .social i {
  2173.   padding-top: 3px;
  2174.   font-size: 19px;
  2175.   font-weight: 500;
  2176.   color: var(--primary);
  2177. }
  2178. .attendee-item--inner .tags {
  2179.   height: 60px;
  2180. }
  2181. .attendee-item--inner .tags .row {
  2182.   justify-content: center;
  2183. }
  2184. .attendee-item--inner .tags .row .showMore {
  2185.   display: flex;
  2186.   align-items: center;
  2187.   height: 26px;
  2188.   text-decoration: none;
  2189.   color: var(--primary);
  2190.   font-weight: 700;
  2191.   font-size: 13px;
  2192. }
  2193. .attendee-item--inner .tags .row .showMore i {
  2194.   padding-right: 2px;
  2195.   font-style: normal;
  2196. }
  2197. .attendee-item--inner .tags--item {
  2198.   text-align: center;
  2199.   max-width: 50%;
  2200. }
  2201. .attendee-item--inner .tags--item span {
  2202.   display: -webkit-box;
  2203.   overflow: hidden;
  2204.   width: inherit;
  2205.   height: 26px;
  2206.   line-height: 26px;
  2207.   text-overflow: ellipsis;
  2208.   -webkit-box-orient: vertical;
  2209.   -webkit-line-clamp: 1;
  2210.   align-content: center;
  2211.   min-height: 26px;
  2212.   padding: 0 12px;
  2213.   margin: 0 3px;
  2214.   font-size: 12px;
  2215.   font-weight: 900;
  2216.   color: var(--primary) !important;
  2217.   cursor: initial !important;
  2218.   user-select: none;
  2219.   background-color: var(--primary-20);
  2220.   border-radius: var(--tag-border-radius);
  2221.   word-break: break-all;
  2222. }
  2223. .attendee-item--inner .tags--item.show-more a {
  2224.   background-color: var(--secondary-button-background-color);
  2225.   border: none;
  2226. }
  2227. .attendee-item--inner .tags.lth2 .tags--item {
  2228.   max-width: 95%;
  2229. }
  2230. .attendee-item--inner .buttons {
  2231.   display: flex;
  2232.   justify-content: center;
  2233. }
  2234. .attendee-item--inner .buttons button {
  2235.   min-width: 150px;
  2236.   height: max-content;
  2237.   min-height: 36px;
  2238.   padding: 0 10px !important;
  2239. }
  2241. .badge-avatar {
  2242.   width: var(--badge-size);
  2243.   height: var(--badge-size);
  2244.   position: absolute;
  2245.   top: 50%;
  2246.   left: 50%;
  2247.   transform: translate(-50%, -50%);
  2248.   z-index: 0;
  2249. }
  2250. .badge-avatar .badge-rotate {
  2251.   position: absolute;
  2252.   top: 50%;
  2253.   left: 50%;
  2254.   width: var(--badge-size);
  2255.   height: var(--badge-size);
  2256.   transform: translate(-50%, -50%);
  2257.   z-index: 2;
  2258. }
  2259. .badge-avatar--container {
  2260.   position: absolute;
  2261.   top: 50%;
  2262.   left: 50%;
  2263.   transform: translate(-50%, -50%);
  2264.   width: 100%;
  2265.   height: 100%;
  2266. }
  2267. .badge-avatar--container > div span {
  2268.   font-style: normal !important;
  2269.   color: white;
  2270.   font-weight: 700;
  2271.   font-size: 15px;
  2272. }
  2273. .badge-avatar--background {
  2274.   position: absolute;
  2275.   width: var(--badge-size);
  2276.   height: var(--badge-size);
  2277.   border-radius: 50%;
  2278.   background-color: transparent;
  2279.   display: flex;
  2280.   justify-content: center;
  2281.   align-items: center;
  2282.   top: 0;
  2283.   left: 0;
  2284. }
  2286. /* Container Css */
  2287. .container-overview {
  2288.   background-color: var(--iframe-body-background-color);
  2289. }
  2291. .container-overview .p-container {
  2292.   padding: 10px;
  2293. }
  2294. .container-overview--items {
  2295.   padding: 20px 0;
  2296. }
  2297. @media only screen and (max-width: 1500px) {
  2298.   .container-overview--items {
  2299.     padding: 20px 20px;
  2300.   }
  2301. }
  2302. .container-overview--items > .row {
  2303.   justify-content: center;
  2304. }
  2306. .container-item {
  2307.   margin-bottom: 30px;
  2308. }
  2309. .container-item--card {
  2310.   cursor: pointer;
  2311.   border: initial !important;
  2312.   background-color: var(--card-background-color);
  2313.   border-radius: var(--card-border-radius);
  2314.   box-shadow: 0 3px 9px var(--card-box-shadow-color);
  2315.   color: var(--card-text-color);
  2316. }
  2317. .container-item--card .banner--content {
  2318.   position: relative;
  2319.   overflow: hidden;
  2320.   content: "";
  2321.   aspect-ratio: 16/9;
  2322.   border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
  2323.   background-position: center;
  2324.   background-repeat: no-repeat;
  2325.   background-size: cover;
  2326. }
  2327. .container-item--card .banner--content .presenter {
  2328.   position: absolute;
  2329.   top: 15px;
  2330.   left: 15px;
  2331.   width: 100px;
  2332.   aspect-ratio: 16/9;
  2333.   background-color: var(--light-clr);
  2334.   border-radius: var(--card-border-radius);
  2335. }
  2336. .container-item--card .banner--content .presenter i {
  2337.   width: 100%;
  2338.   aspect-ratio: 16/9;
  2339.   content: "";
  2340.   display: block;
  2341.   background-position: center;
  2342.   background-size: contain;
  2343.   background-repeat: no-repeat;
  2344. }
  2345. .container-item--card .banner .category {
  2346.   position: absolute;
  2347.   top: 90px;
  2348.   left: -10px;
  2349. }
  2350. .container-item--card .banner .category .content {
  2351.   display: flex;
  2352.   align-items: center;
  2353.   margin-right: 10px;
  2354.   height: 28px;
  2355.   padding: 0 10px;
  2356.   background-color: var(--container-category-background-color);
  2357.   border-radius: 3px;
  2358. }
  2359. .container-item--card .banner .category .content span {
  2360.   display: -webkit-box;
  2361.   min-width: fit-content;
  2362.   max-width: inherit;
  2363.   overflow: hidden;
  2364.   padding-top: 2px;
  2365.   -webkit-box-orient: vertical;
  2366.   -webkit-line-clamp: 1;
  2367.   font-size: 0.8rem;
  2368.   font-weight: 700;
  2369.   color: var(--light-clr);
  2370.   word-break: break-all;
  2371. }
  2372. .container-item--card .banner .category .content:after {
  2373.   content: "\e04a";
  2374.   font-family: "Font Awesome Kit";
  2375.   transform: rotate(180deg);
  2376.   font-size: 11px;
  2377.   position: absolute;
  2378.   left: 0.5px;
  2379.   top: -7.5px;
  2380.   color: var(--container-category-background-color);
  2381. }
  2382. .container-item--card .context {
  2383.   z-index: 0;
  2384.   margin-top: -20px;
  2385.   margin-left: 20px;
  2386.   margin-right: 20px;
  2387. }
  2388. .container-item--card .context--inner {
  2389.   padding: 15px;
  2390.   background-color: var(--card-background-color);
  2391.   border-radius: var(--card-border-radius);
  2392. }
  2393. .container-item--card .context--inner .header {
  2394.   display: flex;
  2395.   height: 45px;
  2396. }
  2397. .container-item--card .context--inner .header .title h3 {
  2398.   display: -webkit-box;
  2399.   width: fit-content;
  2400.   font-size: 1.1rem;
  2401.   font-weight: 700;
  2402.   color: var(--card-text-color);
  2403.   margin-bottom: 0;
  2404.   text-overflow: ellipsis;
  2405.   -webkit-box-orient: vertical;
  2406.   -webkit-line-clamp: 2;
  2407.   overflow: hidden;
  2408.   cursor: pointer;
  2409. }
  2410. .container-item--card .context--inner .desc {
  2411.   height: 120px;
  2412. }
  2413. .container-item--card .context--inner .desc .text {
  2414.   display: -webkit-box;
  2415.   width: fit-content;
  2416.   margin-bottom: 0;
  2417.   font-size: 0.9rem;
  2418.   font-weight: 400;
  2419.   line-height: 1.2rem;
  2420.   color: var(--card-text-color);
  2421.   text-overflow: ellipsis;
  2422.   -webkit-box-orient: vertical;
  2423.   -webkit-line-clamp: 6;
  2424.   overflow: hidden;
  2425. }
  2426. .container-item--card .context--inner .actions {
  2427.   display: flex;
  2428.   height: 40px;
  2429. }
  2430. .container-item--card .context--inner .actions .showMore a {
  2431.   font-size: 0.8rem;
  2432.   font-weight: 700;
  2433.   line-height: normal;
  2434.   color: var(--primary);
  2435.   text-decoration: none;
  2436. }
  2437. .container-item--card .context--inner .actions .registerBtn {
  2438.   margin-right: -5px;
  2439.   margin-left: auto;
  2440.   padding-left: 8px;
  2441. }
  2442. .container-item--card .context--inner .actions .registerBtn .btn {
  2443.   height: 34px;
  2444.   padding: 0 35px !important;
  2445.   font-size: 0.8rem !important;
  2446. }
  2447. .container-item--card .category-border {
  2448.   position: absolute;
  2449.   bottom: 0;
  2450.   left: 0;
  2451.   width: 100%;
  2452.   height: 8px;
  2453.   border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
  2454. }
  2455. @media (min-width: 576px) and (max-width: 687px) {
  2456.   .container-item {
  2457.     max-width: 100% !important;
  2458.     flex: 100% !important;
  2459.   }
  2460. }
  2461. @media (min-width: 1200px) and (max-width: 1499px) {
  2462.   .container-item {
  2463.     max-width: 33.33% !important;
  2464.     flex: 33.33% !important;
  2465.   }
  2466. }