/****************************************/
/* This style is from FscStaticResource */
:root{
    /*Grey*/
    --color-gray-1:#ffff;
    --color-gray-2:#fafaf9;
    --color-gray-3:#f3f2f2;
    --color-gray-4:#ecebea;
    --color-gray-5:#dddbda;
    --color-gray-6:#c9c7c5;
    --color-gray-7:#b0adab;
    --color-gray-8:#969492;
    --color-gray-9:#706e6b;
    --color-gray-10:#514f4d;
    --color-gray-11:#3e3e3c;
    --color-gray-12:#2b2826;
    --color-gray-13:#080707;

    /*Black Transparent*/
    --color-background-image-overlay:rgb(0,0,0,0.60);
    --shadow-drag:rgb(0,0,0,0.16);
    --shadow-drop-down:rgb(0,0,0,0.16);

    /*White Transparent*/
    --color-background-backdrop:rgb(255,255,255,0.75);
    --color-text-link-inverse-active:rgb(255,255,255,0.50);
    --color-text-link-inverse-disabled:rgba(134, 134, 134, 0);

    /*Brand Primary*/
   --brand-primary:#62c618;
   --brand-primary-active:#4e9e13;
   --brand-primary-transparent:rgb(98,198,24,0.01);
   --brand-primary-transparent-10:rgb(98,198,24,0.10);
   --brand-primary-transparent-40:rgb(98,198,24,0.40);

   --brand-secondary:rgb(77,171,233,1);
   --brand-secondary-light:rgb(163,222,255,1);
   --button-blue:rgb(3,155,229,1);

   /*Brand Accessible Primary*/
   --brand-accessible:#379b37;
   --brand-accessible-active:#2c7c2c;

   /*Brand Dark*/
   --brand-dark:#15603d;
   --brand-dark-active:#0d492d;

   /*Blue*/
   --color-background-selection:#d8edff;
   --color-text-link:#006dcc;
   --color-border-separator-inverse:#16325c;
   --color-background-inverse:#061c3f;
   --color-background-alt-inverse:#16325c;

   /*Green*/
   --color-background-row-new:#d9ffdf;
   --color-background-success:#4bcab1;
   --color-background-success-dark:#04844b;
   --color-text-success:#027E46;
   --color-text-success-darker:#004A29;

   /*Orange*/
   --color-background-warning:#ffb75d;
   --color-background-warning-dark:#ff9e2c;
   --color-background-customer:#ff9a3c;
   --color-text-warning-alt:#844800;

   /*Red*/
   --color-background-error:#d4504c;
   --color-background-error-dark:#c23934;
   --color-background-destructive-hover:#a61a14;
   --color-background-destructive-active:#870500;

   /*Yellow*/
   --color-background-highlight:#faffbd;
   --color-background-highlight-search:#fff03f;

   /* 04 - Card/Default */
   --card-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);

   --bs-border-width: 1.75px !important;
}


/*Background Color*/
.fs-bg-primary{color:var(--color-gray-1);background-color:var(--brand-primary);}
.fs-bg-success{color:var(--color-gray-1);background-color:var(--color-background-success);}
.fs-bg-error{color:var(--color-gray-1);background-color:var(--color-background-error);}
.fs-bg-warning{color:var(--color-gray-1);background-color: var(--color-background-warning);}
.fs-snowy-mint{background-color:var(--color-background-row-new);}
.fs-bg-white{background-color:var(--color-gray-1);}

/*Text Color*/
.fs-text-primary{color:var(--brand-primary);}
.fs-text-success{color:var(--color-background-success);}
.fs-text-error{color:var(--color-background-error);}
.fs-text-warning{color: var(--color-background-warning);}
.fs-text-brand-accesible{color:var(--brand-accessible);}
.fs-text-link{color: var(--color-text-link);}

/*Heading Text*/
h1,h2,h3,h4,h5,h6,.sub-title,.overline,body,label,.foot-note{
    font-family: 'Kievit Pro' !important;
}
h1, h2, h3, h4, h5, h6 {
    --lwc-fontFamilyHeader: 'Kievit Pro' !important;
}
h1{
    font-weight: 700 !important;
}

h3.default{
    font-weight: 700;
}
*{font-variant-numeric: lining-nums;}

.fw-900{font-weight: 900 !important;}
.fw-800{font-weight: 800 !important;}
.fw-700{font-weight: 700 !important;}
.fw-500{font-weight: 500 !important;}
.fw-400{font-weight: 400 !important;}

.label{
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    color: var(--color-gray-13) !important;
    padding: unset !important;
    white-space: unset !important;
}
.overline{
    font-weight: 500;
    font-size: 16px;
    line-height: 21px;
}
.sub-title{
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
}

h1{font-size: 42px !important;line-height: 42px !important;}
h2{font-size: 32px !important;line-height: 32px !important;}
h3{font-size: 28px !important;line-height: 28px !important;}
h4{font-size: 24px !important;line-height: 24px !important;}
h5{font-size: 22px !important;line-height: 30px !important;}
h6{font-size: 20px !important;line-height: 27px !important;}
h1, .h1 {font-size: calc(24px + 1.5vw) !important;}
@media (min-width: 1200px) {
    h1, .h1 {
      font-size: 42px !important;
    }
}
h2, .h2 {font-size: calc(21.2px + 0.9vw) !important;}
@media (min-width: 1200px) {
    h2, .h2 {
        font-size: 32px !important;
    }
}
h3, .h3 {
    font-size: calc(20.8px + 0.6vw) !important;
  }
@media (min-width: 1200px) {
    h3, .h3 {
        font-size: 28px !important;
    }
}
h4, .h4 {
    font-size: calc(20.4px + 0.3vw) !important;
  }
  @media (min-width: 1200px) {
    h4, .h4 {
      font-size: 24px !important;
    }
  }
h5, .h5 {
    font-size: 22px !important;
  }
  
h6, .h6 {
    font-size:20px !important;
}

/*Longform*/
.sub-title.longform{
    line-height: 27px;
}

/*fs btn*/
.fs-btn-primary svg{fill:var(--color-gray-1);}
.fs-btn-secondary svg{fill:var(--color-gray-13);}
.fs-btn-tertiary svg{fill:var(--color-gray-13);}
.fs-btn-destructive svg{fill:var(--color-gray-1);}
.fs-btn-destructive-outline svg{fill:var(--color-background-error-dark);}
.fs-btn-base svg{fill:var(--color-gray-13);}
.fs-btn.disabled svg{fill:var(--color-gray-8);}
.fs-btn{
    --fs-btn-focus-box-shadow: 0 0 0 0.1rem rgba(0,0,0,0.16);
    margin: 0.2rem .5rem 0.2rem .5rem;
    font-family: 'Kievit Pro' !important;
}
.fs-btn{
    --fs-btn-padding-x: 24px;
    --fs-btn-padding-y: 10px;
    --fs-btn-font-family: Kievit Pro;
    --fs-btn-font-size: 18px;
    --fs-btn-font-weight: 500;
    --fs-btn-line-height: normal;
    --fs-btn-color: #212529;
    --fs-btn-bg: transparent;
    --fs-btn-border-width: 1px;
    --fs-btn-border-color: transparent;
    --fs-btn-border-radius: 25px;
    --fs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --fs-btn-disabled-opacity: 0.65;
    --fs-btn-focus-box-shadow: var(--fs-btn-focus-shadow-rgb);
    display: inline-block;
    padding: var(--fs-btn-padding-y) var(--fs-btn-padding-x);
    font-family: var(--fs-btn-font-family);
    font-size: var(--fs-btn-font-size);
    font-weight: var(--fs-btn-font-weight);
    line-height: var(--fs-btn-line-height);
    color: var(--fs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--fs-btn-border-width) solid var(--fs-btn-border-color);
    border-radius: var(--fs-btn-border-radius);
    background-color: var(--fs-btn-bg);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.fs-btn:hover {
    color: var(--fs-btn-hover-color);
    background-color: var(--fs-btn-hover-bg);
    border-color: var(--fs-btn-hover-border-color);
}
.fs-btn:hover svg{fill:var(--fs-btn-hover-color) !important;}
.fs-btn:active {
    color: var(--fs-btn-hover-color);
    background-color: var(--fs-btn-hover-bg);
    border-color: var(--fs-btn-hover-border-color);
    outline: 0;
    box-shadow: var(--fs-btn-focus-box-shadow);
    -webkit-box-shadow: var(--fs-btn-focus-box-shadow);
    -moz-box-shadow:var(--fs-btn-focus-box-shadow);
}
.fs-btn:disabled, .fs-btn.disabled {
    color: var(--fs-btn-disabled-color);
    pointer-events: none;
    background-color: var(--fs-btn-disabled-bg);
    border-color: var(--fs-btn-disabled-border-color) !important;
    opacity: var(--fs-btn-disabled-opacity);
}
.fs-btn-primary{
    --fs-btn-color: var(--color-gray-1);
    --fs-btn-bg: var(--button-blue);
    --fs-btn-border-color: var(--button-blue);
    --fs-btn-hover-color: var(--color-gray-1);
    --fs-btn-hover-bg: var(--brand-secondary);
    --fs-btn-hover-border-color: var(--brand-secondary);
    --fs-btn-active-color: var(--color-gray-1);
    --fs-btn-active-bg: var(--brand-secondary);
    --fs-btn-active-border-color: var(--brand-secondary);
    --fs-btn-disabled-color:var(--color-gray-1);
    --fs-btn-disabled-bg:var(--color-gray-8);
    --fs-btn-disabled-border-color:var(--color-gray-8);
    --lwc-colorTextIconDefault: var(--color-gray-1);
    --fs-btn-focus-box-shadow:0px 0px 3px 1px var(--button-blue);
}
.fs-btn-primary-accessible{
    --fs-btn-color: var(--color-gray-1);
    --fs-btn-bg: var(--brand-accessible);
    --fs-btn-border-color: var(--brand-accessible);
    --fs-btn-hover-color: var(--color-gray-1);
    --fs-btn-hover-bg: var(--brand-accessible-active);
    --fs-btn-hover-border-color: var(--brand-accessible-active);
    --fs-btn-active-color: var(--color-gray-1);
    --fs-btn-active-bg: var(--brand-accessible-active);
    --fs-btn-active-border-color: var(--brand-accessible-active);
    --fs-btn-disabled-color:var(--color-gray-1);
    --fs-btn-disabled-bg:var(--color-gray-8);
    --lwc-colorTextIconDefault: var(--color-gray-1);
}
.fs-btn-secondary{
    --fs-btn-color: var(--color-gray-13);
    --fs-btn-bg: #fff0;
    --fs-btn-border-color: var(--color-gray-13);
    --fs-btn-hover-color: var(--button-blue);
    --fs-btn-hover-bg: var(--color-gray-1);
    --fs-btn-hover-border-color: var(--button-blue);
    --fs-btn-active-color: var(--brand-secondary);
    --fs-btn-active-bg: var(--color-gray-1);
    --fs-btn-active-border-color: var(--brand-secondary);
    --fs-btn-disabled-color:var(--color-gray-8);
    --fs-btn-disabled-border-color:var(--color-gray-8);
    --fs-btn-focus-box-shadow:0px 0px 3px 1px var(--button-blue);
}
.fs-btn-tertiary{
    --fs-btn-color: var(--color-gray-13);
    --fs-btn-bg: var(--color-gray-1);
    --fs-btn-border-color: var(--color-gray-13) !important;
    --fs-btn-hover-color: var(--color-gray-13);
    --fs-btn-hover-bg: var(--color-gray-4);
    --fs-btn-hover-border-color: var(--color-gray-13);
    --fs-btn-active-color: var(--color-gray-13);
    --fs-btn-active-bg: var(--color-gray-4);
    --fs-btn-active-border-color: var(--color-gray-13);
    --fs-btn-disabled-color:var(--color-gray-8);
    --fs-btn-disabled-border-color:var(--color-gray-8);
}
.fs-btn-destructive{
    --fs-btn-color: var(--color-gray-1);
    --fs-btn-bg: var(--color-background-error-dark);
    --fs-btn-border-color: var(--color-background-error-dark);
    --fs-btn-hover-color: var(--color-gray-1);
    --fs-btn-hover-bg: var(--color-background-destructive-hover);
    --fs-btn-hover-border-color: var(--color-background-destructive-hover);
    --fs-btn-active-color: var(--color-gray-1);
    --fs-btn-active-bg: var(--color-background-destructive-active);
    --fs-btn-active-border-color: var(--color-background-destructive-active);
    --fs-btn-disabled-color:var(--color-gray-1);
    --fs-btn-disabled-bg:var(--color-gray-8);
}
.fs-btn-destructive-outline{
    --fs-btn-color: var(--color-background-error-dark);
    --fs-btn-bg: var(--color-gray-1);
    --fs-btn-border-color: var(--color-gray-13);
    --fs-btn-hover-color: var(--color-background-error-dark);
    --fs-btn-hover-bg: var(--color-gray-4);
    --fs-btn-hover-border-color: var(--color-gray-13);
    --fs-btn-active-color: var(--color-background-error-dark);
    --fs-btn-active-bg: var(--color-gray-4);
    --fs-btn-active-border-color: var(--color-gray-13);
    --fs-btn-disabled-color:var(--color-gray-8);
    --fs-btn-disabled-border-color:var(--color-gray-8);
}
.fs-btn-base{
    --fs-btn-color: var(--color-gray-13);
    --fs-btn-bg: var(--color-gray-1);
    --fs-btn-hover-color: var(--brand-primary);
    --fs-btn-hover-bg: var(--color-gray-1);
    --fs-btn-active-color: var(--brand-primary-active);
    --fs-btn-active-bg: var(--color-gray-1);
    --fs-btn-active-border-color: var(--brand-primary-active);
    --fs-btn-disabled-color:var(--color-gray-8);
    --fs-btn-disabled-border-color:unset;
}

/****************** Tooltip *******************/
.fs-tooltip {
    position: relative;
    display: inline-block;
}
.fs-tooltip .fs-tooltiptext {
    visibility: hidden;
    width: auto;
    height: auto;
    background-color: var(--color-background-alt-inverse);
    color: var(--color-gray-1);
    text-align: center;
    border-radius: 0.3rem;
    padding: 1rem;
    position: absolute;
    z-index: 9999;
    transition: opacity .6s;
    font-size: 16px;
    line-height: 21px;
    /*font-size: 16pt;
    line-height: 21pt;*/
}
.fs-tooltip:hover .fs-tooltiptext {
    visibility: visible;
}
.fs-tooltip-top{
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
}
.fs-tooltip .fs-tooltip-top::after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -7px;
    border-width: 0.7rem;
    border-style: solid;
    border-color: var(--color-background-alt-inverse) transparent transparent transparent;
}
/****************** Tooltip End*******************/

/**********FS Radio Button*********/
.fs-radio-button{
    width: 20px;
}
.fs-radio-label{
    line-height: 2.5;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--brand-accessible);
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
/**********FS Radio Button End*********/

/********Notif************/
.fs-notif{
    font-family: 'Kievit Pro';
    display: flex;
    flex-direction: row;
    border-color:var(--alert-border-color);
    border-width: 1px 1px 1px 4px;
    box-shadow: var(--card-shadow);
    border-radius: 4px;
    border-style: solid;
    padding: 8px;
    background-color: var(--color-gray-1)
}
.fs-notif-success{--alert-border-color: var(--color-text-success);}
.fs-notif-error{--alert-border-color: var(--color-background-error-dark);}
.fs-notif-default{border-width: 1px;--alert-border-color: var(--color-gray-9);}
.fs-notif .fs-notif-icon{
    width: 2rem;
    padding-top: 2px;
    /* margin: 0 16.2px 0 16.2px; */
    margin: 0 15px 0 0px;
    text-align: right;
    padding: 0;
}
.fs-notif .notif-icon{
    height: 22px;
    margin-right: 12.92px;
}
.notif-btn-close{background-color:unset;border:unset;margin:unset;padding: 0;}
.fs-notif-body{width: 100%;}
.fs-notif-close{background-color: unset;border: unset;margin: 0;width: 21px;}
/*.fs-notif svg{fill:var(--color-text-success) !important;}*/
.fs-notif-header{font-size: 18px;line-height:22px;font-weight: 500;overflow-wrap: anywhere;}
.fs-notif-text{color:var(--color-gray-11);font-size: 16px;line-height:21px;font-weight: 450;overflow-wrap: anywhere;}
.fs-notif-error svg,.fs-notif-success svg,.fs-notif-default svg{margin: 0px 9px 0 4px;}

/********Notif End************/
input[type=text]:focus, input[type=number]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus{
    border: 1px solid var(--brand-accessible) !important;
    box-shadow: 0 0 2px var(--brand-accessible) !important;
}
input[type=text].search-input:focus, input[type=number].search-input:focus, input[type=email].search-input:focus, input[type=password].search-input:focus, textarea:focus{
    border: unset !important;
    box-shadow: unset !important;
}


.fs-help-text-error{
    color: var(--color-background-error-dark);
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
}

.fs-input{
    border: 1px solid var(--color-gray-7) !important;
    border-radius: 4px !important;
    padding: 9px !important;
    height: 42px !important;
    border-radius: 4px !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 22px !important;
}

.fs-card{
    background: var(--color-gray-1);
    border: 0.75px solid var(--color-gray-7);
    box-shadow: var(--card-shadow);
    border-radius: 4px !important;
}

input[type=checkbox]{
    accent-color: #379b37 !important;
    width: 20px !important;
    height: 20px !important;
}

label.label-nonbold{
    top: -4px !important;
    font-weight: 450 !important;
    font-size: 16px !important;
    line-height: 21px !important;
    position: relative !important;
}

.w-100{width: 100%;}
.m-0{margin: 0 !important;}


.fp-text a{
    text-decoration: underline !important;
    color:var(--color-text-link);
}

.register-col{
    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center center; 
}

@media (min-width: 1400px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        width: 1180px !important;
    }
}



.modal > .modal-dialog > .modal-content > .modal-header{
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 16px 14px !important;
    border-bottom: 1px solid #DDDBDA !important;
    background: #FFFFFF !important;
}

.fs-modal-content{
    border-radius: 4px !important;
}
.fs-modal-title{
    font-family: 'Kievit Pro';
    padding: 16px;
    font-weight: 700;
    font-size: 20px;
    line-height: 27px;
    color: var(--color-gray-13);
    border-bottom: 1px solid var(--color-gray-5);
    border-radius: 4px 4px 0px 0px;
    position: relative;
}
.fs-modal-close{
    position: absolute;
    right: 11px;
    top: 4px;
    opacity: unset !important;
    font-weight: 100 !important;
}

.fs-modal-footer{
    background: var(--color-gray-3);
    border-top: 1px solid var(--color-gray-5);
    padding: 13px 20px;
}

.contact-detail-container a:hover,.contact-detail-container a:focus {
    color: unset !important;
    text-decoration: none;
    outline: none;
}
.contact-detail-container a{
    color: unset !important;
}


input[type=text], input[type=number], input[type=email], input[type=password], textarea{
    font-family: 'Kievit Pro' !important;
}

/* OLC login page style  */ 
.application-login__container .mb-3 .fs-notif-title{
    color: #3e3e3c;
    font-size: 16px;
    line-height: 21px;
    font-weight: 450;
    overflow-wrap: anywhere;
}