/**********************************************************
    GLOBAL CSS - Color
  **********************************************************/

  .Air_France_Digital_Blue{
    color: #0800b9;
}

.KLM_Blue{
    color:#009EE3;
}

.DarkBlue{
    color: var(--dark-blue);
}

.Raspberry_Red{
    color: #D2204C;
}

.Light_Blue{
    color: #00A1DE;
}

.Grey{
    color: var(--grey);
}

.Green{
    color: var(--green);
}

.Orange{
    color: #E5882E;
}

.Red{
    color: #FF0000;
    color : red
}

  /**********************************************************
    GLOBAL CSS - Background
  **********************************************************/

.Back_Grey{
    background-color:#96AFBE;
}

.Back_Purple{
    background-color:#E1CFFF;
}

.Back_Light_Grey{
    background-color:#E4E5EA;
}

.Back_Blue{
    background-color:#C7E9FA;
}

.Back_Green{
    background-color:#C7F2DB;
}

.Back_Brown{
    background-color:#EDE2DB;
}

.Back_Yellow{
    background-color:#F8EAB6;
}

.Back_Pink{
    background-color:#FFC9E4;
}

.Back_Lightest{
    background-color:#F6F5F5;
}

  /**********************************************************
    GLOBAL CSS - Typography
  **********************************************************/

H1{
    font-family: 'Montserrat', sans-serif;  
    color: #0800b9;
    font-size: 2em !important;;  
    font-weight:var(--lwc-fontWeightBold,700) !important;;
}

.H1-notDetailPage{
  line-height:3em;
}

H2{
    font-family: 'Montserrat', sans-serif; 
    color: #0800b9;
    font-size: 1.5em !important;; 
    font-weight:var(--lwc-fontWeightBold,700) !important;;
}

.H2-notDetailPage{
  line-height:2.25em;
}

H3{
    font-family: 'Montserrat', sans-serif;  
    color: #0800b9;
    font-size: 1.25em !important;;
    font-weight:var(--lwc-fontWeightBold,700) !important;;
}

.H3-notDetailPage{
  line-height:1.875em;
}

H4{
    font-family: 'Montserrat', sans-serif;  
    color: #0800b9;
    font-size: 1.125em !important;; 
    font-weight:var(--lwc-fontWeightBold,700) !important;;
}

.H4-notDetailPage{
  line-height:1.5em;
}

H5{
    font-family: 'Montserrat', sans-serif;  
    color: #0800b9;
    font-size: 1em !important;; 
    font-weight:var(--lwc-fontWeightBold,700) !important;;
}

.H5-notDetailPage{
  line-height:1.5em;
}

.slds-text-heading_medium, .slds-text-heading_large, .slds-text-heading_small{
  color : var(--afkl-primary);
  font-weight:var(--lwc-fontWeightBold,700) !important;
}

.slds-text-heading_large{
  --lwc-fontSize9: 2.25em;
  --lwc-lineHeightHeading: 1.25em;
}

.slds-text-heading_medium{
 --lwc-fontSize7: 1.25em;
  --lwc-lineHeightHeading: 1.25em;
}

.slds-text-heading_small{
   --lwc-fontSize5: 1.125em;
  --lwc-lineHeightHeading: 1.25em;
}

  /**********************************************************
    GLOBAL CSS - Hyperlinks
  **********************************************************/
a{
    font-family: 'Montserrat', sans-serif;  
    color: var(--afkl-primary);
    font-size: 1em;
    text-decoration: underline!important; 
}

a:link{
  font-family: 'Montserrat', sans-serif;  
    color: var(--afkl-primary);
    font-size: 1em;
    text-decoration: underline!important; 
}

a:visited{
  color: var(--dark-blue)!important;
  text-decoration: underline!important;
}

lightning-formatted-rich-text>span>a:visited{
  color: var(--afkl-primary);
  text-decoration: underline;
}

a:hover{
    text-decoration: underline;
    color: var(--afkl-primary);
}

a:active{
  color: var(--afkl-primary);
  font-size: 1em;
  text-decoration: underline; 
}

a:disabled{
    color: var(--grey);
    text-decoration: underline;
}

/* used to remove links properties from anchor texts ex: <a id="" name=""></a> */
.THIS .slds-rich-text-editor__output a:not([href]):not([onclick]) {
  color: unset !important;
  text-decoration: unset !important;
  pointer-events: none !important;
}

/*********************************************************** 
                        Buttons 
**********************************************************/


  /**********************************************************
    GLOBAL CSS - Call To action Button Type
  **********************************************************/
.Calltoaction{
    font-family: 'Montserrat', sans-serif;  
    color: #D2204C;
    font-size: 1em;   
    font-weight: var(--lwc-fontWeightBold,700) !important;;

}

  /**********************************************************
    GLOBAL CSS - Regular Button
  **********************************************************/
.RegularButton{
    font-family: 'Montserrat', sans-serif;  
    font-size: 1em; 
    font-weight: var(--lwc-fontWeightBold,700) !important;;
    --slds-c-button-brand-color-background: var(--afkl-primary) !important;
    --slds-c-button-brand-color-background-hover: var(--back-grey) !important;
    --slds-c-button-brand-color-border-hover: var(--back-grey) !important;
    --lwc-brandDisabled:var(--grey);
    --slds-c-button-brand-color-background-active: var(--dark-blue) !important;
    --slds-c-button-color-border-active:var(--dark-blue) !important;
}

/**********************************************************
  SLDS CONFIGURATION
**********************************************************/
html   {
    /* COLORS */
    --af-primary: #051039;
    --afkl-primary: #0800b9;
    --back-blue: #C7E9FA;
    --back-lightest: #F6F5F5;
    --back-light-grey: #E4E5EA;
    --afkl-accent: #d2204c;
    --back-grey: #96AFBE;
    --dark-blue: #091C62;
    --grey : #E9E5E6;
    --green:#7CBE33;

    --fontWeightBold: bold;
    font-family: 'Montserrat', sans-serif;
  	
    /* BUTTON */
    --sds-c-button-brand-color-background: var(--afkl-primary);
    --sds-c-button-destructive-color-background: var(--afkl-accent);
    --sds-c-button-radius-border: 0;
    --sds-c-button-line-height: 2.750;
  
    /* TABS */
    --sds-c-tabs-item-text-color: white;
    --sds-c-tabs-item-text-color-active: white;
    --sds-c-tabs-item-sizing-height: 2.8rem;
    --sds-c-tabs-list-sizing-border: 0.25em;
    --sds-c-tabs-item-color-border-active: var(--afkl-accent);
    --sds-c-tabs-item-color-border-hover: var(--afkl-accent);
    --sds-c-tabs-list-color-border: transparent;
  
    /* INPUT */
    --sds-c-input-color-border: var(--afkl-primary);
  
    /* ALERT */
    --sds-c-alert-color-background: var(--afkl-accent);
    --sds-c-alert-image-background: none;
                                                                                                                                                                                                                                    
    font-size: 15px !important;
  }

  body{
    font-size: 15px !important;
    line-height: 24px !important;
    color:var(--dark-blue) !important;
  }
  
  /* BUTTONS EXCEPT BASE*/
  .slds-button_neutral, .slds-button_brand, .slds-button_outline-brand, .slds-button_destructive, .slds-button_text-destructive, .slds-button_success{
    text-transform: capitalize;
  }

  /* RADIO BUTTON */
  .slds-radio { 
     /* must be used as static resource to override the component css */ 
      display: inline !important; 
      --lwc-squareIconMediumContent: 1.4rem;
  }
  .slds-radio .slds-form-element__label {
    font-size: 16px !important;
  }
  .slds-radio_faux {
    --slds-c-radio-mark-color-foreground: var(--afkl-primary);
    --slds-c-radio-color-border-checked: var(--afkl-primary);
  }
  .slds-radio [type=radio]:checked+.slds-radio__label .slds-radio_faux:after{
    width: 0.9rem !important;
    height: 0.9rem !important; 
  }

  /* INPUTS */
  input,lightning-input,lightning-combobox,lightning-textarea,lightning-radio-group{
    --lwc-heightInput:3rem;
    --sds-c-input-color-border:#96AFBF;
    --lwc-colorBorderInput:#96AFBF;
    color:#091C62 !important;
  }

  /* DROPDOWNLIST */
  .slds-dropdown-trigger .slds-dropdown{
    font-size:1em;
    line-height: 1.5em;
  }

  /* -- SEARCH Highlight --  */ 
  lightning-formatted-rich-text>span>mark {
    background-color: transparent;
    font-weight: bolder;
  }
  
  /**********************************************************
  GLOBAL CSS - UTILITIES INSPIRED FROM TAILWINDCSS
  **********************************************************/
  .uppercase {
    text-transform: uppercase;
  }
  
  .flex {
    display: flex;
  }
  
  .flex-col {
    flex-direction: column;
  }
  
  .justify-start {
    justify-content: start;
  }
  
  .justify-center {
    justify-content: center;
  }
  
  .justify-around {
    justify-content: space-around;
  }
  
  .justify-evenly {
    justify-content: space-evenly;
  }
  
  .justify-between {
    justify-content: space-between;
  }
  
  .items-center {
    align-items: center;
  }
  
  .w-6 {
    width: 1.5rem;
  }
  
  .h-6 {
    height: 1.5rem;
  }
  
  .w-full {
    width: 100%;
  }
  
  .h-full {
    height: 100%;
  }
  
  .ml-auto {
    margin-left: auto;
  }
  
  .mr-auto {
    margin-right: auto;
  }
  
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  
  .underline {
    text-decoration: underline;
  }

  @media screen and (max-width: 1024px) {
    .h-margin{
      margin-left:3%;
      margin-right:3%;
    }
/* when you click on the anchor and go to the correct place on the site, the actual anchor is behind the header/menu */
   .slds-rich-text-editor__output a{
  scroll-margin-top: 80px;
}
  
  }
  
  @media screen and (min-width: 1024px) {
  .h-margin{
    margin-left:8.3%;
    margin-right:8.3%;
  }
 
/* when you click on the anchor and go to the correct place on the site, the actual anchor is behind the header/menu */
  .slds-rich-text-editor__output a{
  scroll-margin-top: 170px;
}
  
  }