.elementor-1618 .elementor-element.elementor-element-9e21038{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1618 .elementor-element.elementor-element-55822e57{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-1618 .elementor-element.elementor-element-6baf84e5{--display:flex;}.elementor-1618 .elementor-element.elementor-element-69babde7{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-1618 .elementor-element.elementor-element-1c54acbc .elementor-icon-wrapper{text-align:center;}.elementor-1618 .elementor-element.elementor-element-1c54acbc .elementor-icon{font-size:10px;}.elementor-1618 .elementor-element.elementor-element-1c54acbc .elementor-icon svg{height:10px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1618 .elementor-element.elementor-element-3a0f9d2d .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:11px;font-weight:500;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1618 .elementor-element.elementor-element-7d28e5f6 .elementor-button-content-wrapper{flex-direction:row;}.elementor-1618 .elementor-element.elementor-element-7d28e5f6 .elementor-button span{gap:9px;}.elementor-1618 .elementor-element.elementor-element-7d28e5f6 .elementor-field-group{padding-right:calc( 9px/2 );padding-left:calc( 9px/2 );margin-bottom:13px;}.elementor-1618 .elementor-element.elementor-element-7d28e5f6 .elementor-form-fields-wrapper{margin-left:calc( -9px/2 );margin-right:calc( -9px/2 );margin-bottom:-13px;}.elementor-1618 .elementor-element.elementor-element-7d28e5f6 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-1618 .elementor-element.elementor-element-7d28e5f6 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-1618 .elementor-element.elementor-element-7d28e5f6 .elementor-labels-inline .elementor-field-group > label{padding-left:8px;}body:not(.rtl) .elementor-1618 .elementor-element.elementor-element-7d28e5f6 .elementor-labels-inline .elementor-field-group > label{padding-right:8px;}body .elementor-1618 .elementor-element.elementor-element-7d28e5f6 .elementor-labels-above .elementor-field-group > label{padding-bottom:8px;}.elementor-1618 .elementor-element.elementor-element-7d28e5f6 .elementor-field-group > label{font-family:"Roboto", Sans-serif;font-size:10px;font-weight:400;}.elementor-1618 .elementor-element.elementor-element-7d28e5f6 .elementor-field-type-html{padding-bottom:0px;font-family:"Roboto", Sans-serif;font-size:10px;font-weight:400;}.elementor-1618 .elementor-element.elementor-element-7d28e5f6 .elementor-field-group .elementor-field, .elementor-1618 .elementor-element.elementor-element-7d28e5f6 .elementor-field-subgroup label{font-family:"Roboto", Sans-serif;font-size:12px;font-weight:400;}.elementor-1618 .elementor-element.elementor-element-7d28e5f6 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-1618 .elementor-element.elementor-element-7d28e5f6 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-1618 .elementor-element.elementor-element-7d28e5f6 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-1618 .elementor-element.elementor-element-7d28e5f6 .elementor-button[type="submit"]{color:#ffffff;}.elementor-1618 .elementor-element.elementor-element-7d28e5f6 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-1618 .elementor-element.elementor-element-7d28e5f6 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-1618 .elementor-element.elementor-element-7d28e5f6 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-1618 .elementor-element.elementor-element-7d28e5f6 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-1618 .elementor-element.elementor-element-7d28e5f6 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-1618 .elementor-element.elementor-element-7d28e5f6 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-1618 .elementor-element.elementor-element-7d28e5f6{--e-form-steps-indicators-spacing:29px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}/* Start custom CSS for form, class: .elementor-element-7d28e5f6 *//* =========================================================
   HIKANOTES — PROCUREMENT FORM SYSTEM
   Common styling for all procurement category forms
   CSS Class: procurement-form
   ========================================================= */


/* ---------------------------------------------------------
   VARIABLES
   --------------------------------------------------------- */

.procurement-form {
    --hk-blue: #064fc4;
    --hk-dark-blue: #06358f;
    --hk-light-blue: #f8fbff;
    --hk-selected-blue: #f1f7ff;
    --hk-border: #dce7f5;
    --hk-text: #243b64;
    --hk-muted: #71809a;

    width: 100%;
    font-family: inherit;
}


/* ---------------------------------------------------------
   MAIN FORM GRID
   --------------------------------------------------------- */

.procurement-form .elementor-form-fields-wrapper {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    column-gap: 24px;
    row-gap: 18px;

    align-items: start;
}


/* ---------------------------------------------------------
   RESET ELEMENTOR FIELD WIDTHS
   --------------------------------------------------------- */

.procurement-form .elementor-field-group {
    width: 100% !important;
    max-width: none !important;

    padding: 0 !important;
    margin: 0 !important;
}


/* =========================================================
   LEFT COLUMN
   ITEM SELECTION
   ========================================================= */

.procurement-form .elementor-field-group-name {
    grid-column: 1;
    grid-row: 1 / span 2;

    padding: 22px !important;

    background: var(--hk-light-blue);

    border: 1px solid var(--hk-border);
    border-radius: 10px;
}


/* Item selection heading */

.procurement-form .elementor-field-group-name
.elementor-field-label {

    display: block;

    margin: 0 0 5px;

    color: var(--hk-dark-blue);

    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}


/* Description under heading */

.procurement-form .elementor-field-group-name::after {

    content:
        "Choose one or more items from the list below. You can also specify your requirements.";

    display: block;

    margin-bottom: 16px;

    color: var(--hk-muted);

    font-size: 12px;
    line-height: 1.5;
}


/* Checkbox grid */

.procurement-form .elementor-field-group-name
.elementor-field-subgroup {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 9px;
}


/* Individual checkbox card */

.procurement-form .elementor-field-group-name
.elementor-field-option {

    position: relative;

    display: flex;
    align-items: center;

    min-height: 47px;

    margin: 0 !important;
    padding: 9px 10px;

    background: #fff;

    border: 1px solid #e1eaf5;
    border-radius: 6px;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


/* Hide native checkbox */

.procurement-form .elementor-field-group-name
input[type="checkbox"] {

    position: absolute;

    opacity: 0;

    pointer-events: none;
}


/* Checkbox label */

.procurement-form .elementor-field-group-name
.elementor-field-option label {

    position: relative;

    display: flex;
    align-items: center;

    width: 100%;

    padding-left: 28px;

    color: #34496d;

    font-size: 12px;
    line-height: 1.35;

    cursor: pointer;
}


/* Custom checkbox */

.procurement-form .elementor-field-group-name
.elementor-field-option label::before {

    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 17px;
    height: 17px;

    transform: translateY(-50%);

    background: #fff;

    border: 1.5px solid #b8c7da;
    border-radius: 4px;

    transition: all .2s ease;
}


/* Checked checkbox */

.procurement-form .elementor-field-group-name
input[type="checkbox"]:checked + label::before {

    background: var(--hk-blue);

    border-color: var(--hk-blue);
}


/* Checkmark */

.procurement-form .elementor-field-group-name
input[type="checkbox"]:checked + label::after {

    content: "✓";

    position: absolute;

    left: 4px;
    top: 50%;

    transform: translateY(-55%);

    color: #fff;

    font-size: 12px;
    font-weight: 700;
}


/* Selected card */

.procurement-form .elementor-field-group-name
.elementor-field-option:has(input:checked) {

    background: var(--hk-selected-blue);

    border-color: #77aef0;

    box-shadow:
        0 2px 8px rgba(6, 79, 196, .06);
}


/* =========================================================
   LEFT COLUMN
   FILE UPLOAD
   ========================================================= */

.procurement-form .elementor-field-group-field_cac3b90 {

    grid-column: 1;
    grid-row: 3;

    padding: 18px !important;

    background: var(--hk-light-blue);

    border: 1px solid var(--hk-border);
    border-radius: 10px;
}


/* Upload heading */

.procurement-form .elementor-field-group-field_cac3b90
.elementor-field-label {

    display: block;

    margin-bottom: 7px;

    color: var(--hk-dark-blue);

    font-size: 14px;
    font-weight: 700;
}


/* Upload description */

.procurement-form .elementor-field-group-field_cac3b90::after {

    content:
        "PDF, DOC, JPG or PNG • Maximum 10MB";

    display: block;

    margin-top: 8px;

    color: #8a98ad;

    font-size: 11px;
}


/* File input */

.procurement-form .elementor-field-group-field_cac3b90
input[type="file"] {

    width: 100%;

    min-height: 48px;

    padding: 6px;

    background: #fff;

    border: 1px dashed #9db9dc;

    border-radius: 7px;

    color: #71809a;

    font-size: 12px;

    cursor: pointer;

    transition: all .2s ease;
}


.procurement-form .elementor-field-group-field_cac3b90
input[type="file"]:hover {

    background: #f5f9ff;

    border-color: var(--hk-blue);
}


/* File .elementor-1618 .elementor-element.elementor-element-7d28e5f6 button */

.procurement-form .elementor-field-group-field_cac3b90
input[type="file"]::file-.elementor-1618 .elementor-element.elementor-element-7d28e5f6-button {

    margin-right: 12px;

    padding: 9px 14px;

    background: var(--hk-blue);

    border: 0;
    border-radius: 5px;

    color: #fff;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    transition: background .2s ease;
}


.procurement-form .elementor-field-group-field_cac3b90
input[type="file"]::file-.elementor-1618 .elementor-element.elementor-element-7d28e5f6-button:hover {

    background: var(--hk-dark-blue);
}


/* =========================================================
   RIGHT COLUMN
   REQUEST DETAILS
   ========================================================= */


/* Quantity */

.procurement-form .elementor-field-group-email {

    grid-column: 2;
    grid-row: 1;
}


/* Specifications */

.procurement-form .elementor-field-group-message {

    grid-column: 2;
    grid-row: 2;
}


/* Preferred Brand */

.procurement-form .elementor-field-group-field_3bf1bd3 {

    grid-column: 2;
    grid-row: 3;

    width: calc(50% - 8px) !important;
}


/* Budget */

.procurement-form .elementor-field-group-field_35cb171 {

    grid-column: 2;
    grid-row: 3;

    width: calc(50% - 8px) !important;

    margin-left: calc(50% + 8px) !important;
}


/* Delivery */

.procurement-form .elementor-field-group-field_6a759b7 {

    grid-column: 2;
    grid-row: 4;
}


/* Request type */

.procurement-form .elementor-field-group-field_c860c45 {

    grid-column: 2;
    grid-row: 5;
}


/* =========================================================
   REQUEST DETAILS HEADING
   ========================================================= */

.procurement-form .elementor-field-group-email::before {

    content: "Your Request Details";

    display: block;
    width: 100%;

    margin-bottom: 18px;

    color: var(--hk-dark-blue);

    font-size: 17px;
    font-weight: 700;
}


/* =========================================================
   STANDARD LABELS
   ========================================================= */

.procurement-form .elementor-field-label {

    display: block;

    margin-bottom: 8px;

    color: var(--hk-text);

    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   INPUTS
   ========================================================= */

.procurement-form .elementor-field {

    width: 100%;

    min-height: 46px;

    padding: 12px 14px;

    background: #fff;

    border: 1px solid var(--hk-border);
    border-radius: 7px;

    color: var(--hk-text);

    font-size: 13px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.procurement-form .elementor-field::placeholder {

    color: #a5afbf;

    opacity: 1;
}


.procurement-form .elementor-field:focus {

    border-color: var(--hk-blue);

    box-shadow:
        0 0 0 3px rgba(6, 79, 196, .08);
}


.procurement-form textarea.elementor-field {

    min-height: 120px;

    resize: vertical;
}


/* =========================================================
   RADIO OPTIONS
   ========================================================= */

.procurement-form .elementor-field-group-field_c860c45
.elementor-field-subgroup {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;
}


.procurement-form .elementor-field-group-field_c860c45
.elementor-field-option {

    position: relative;

    display: flex;
    align-items: center;

    min-height: 52px;

    padding: 10px 12px;

    background: #fff;

    border: 1px solid var(--hk-border);
    border-radius: 7px;

    transition: all .2s ease;
}


/* Hide radio */

.procurement-form .elementor-field-group-field_c860c45
input[type="radio"] {

    position: absolute;

    opacity: 0;

    pointer-events: none;
}


/* Radio label */

.procurement-form .elementor-field-group-field_c860c45
label {

    position: relative;

    display: flex;
    align-items: center;

    width: 100%;

    padding-left: 25px;

    color: #34496d;

    font-size: 12px;

    cursor: pointer;
}


/* Radio circle */

.procurement-form .elementor-field-group-field_c860c45
label::before {

    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 15px;
    height: 15px;

    transform: translateY(-50%);

    background: #fff;

    border: 1.5px solid #aebed2;
    border-radius: 50%;
}


/* Selected radio */

.procurement-form .elementor-field-group-field_c860c45
input[type="radio"]:checked + label::before {

    background: var(--hk-blue);

    border-color: var(--hk-blue);

    box-shadow:
        inset 0 0 0 4px #fff;
}


/* Selected radio card */

.procurement-form .elementor-field-group-field_c860c45
.elementor-field-option:has(input:checked) {

    background: var(--hk-selected-blue);

    border-color: #6ba4ef;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.procurement-form .e-form__buttons {

    grid-column: 2;
    grid-row: 6;

    margin-top: 2px !important;
}


.procurement-form .elementor-button {

    width: 100%;

    min-height: 52px;

    background: var(--hk-blue);

    border: none;
    border-radius: 6px;

    color: #fff;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition: all .2s ease;
}


.procurement-form .elementor-button:hover {

    background: var(--hk-dark-blue);

    box-shadow:
        0 5px 15px rgba(6, 79, 196, .18);

    transform: translateY(-1px);
}


.procurement-form .elementor-button-icon {

    display: flex;
    align-items: center;
}


.procurement-form .elementor-button-icon svg {

    width: 15px;
    height: 15px;

    fill: currentColor;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .procurement-form .elementor-form-fields-wrapper {

        grid-template-columns: 1fr;

        gap: 20px;
    }


    .procurement-form .elementor-field-group-name,
    .procurement-form .elementor-field-group-field_cac3b90,
    .procurement-form .elementor-field-group-email,
    .procurement-form .elementor-field-group-message,
    .procurement-form .elementor-field-group-field_3bf1bd3,
    .procurement-form .elementor-field-group-field_35cb171,
    .procurement-form .elementor-field-group-field_6a759b7,
    .procurement-form .elementor-field-group-field_c860c45,
    .procurement-form .e-form__buttons {

        grid-column: 1;

        grid-row: auto;
    }


    .procurement-form .elementor-field-group-field_3bf1bd3,
    .procurement-form .elementor-field-group-field_35cb171 {

        width: 100% !important;

        margin-left: 0 !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .procurement-form .elementor-form-fields-wrapper {

        gap: 16px;
    }


    .procurement-form .elementor-field-group-name {

        padding: 16px !important;
    }


    .procurement-form .elementor-field-group-name
    .elementor-field-subgroup {

        grid-template-columns: 1fr 1fr;

        gap: 8px;
    }


    .procurement-form .elementor-field-group-name
    .elementor-field-option {

        min-height: 44px;

        padding: 7px 8px;
    }


    .procurement-form .elementor-field-group-name
    .elementor-field-option label {

        font-size: 11px;

        padding-left: 25px;
    }


    .procurement-form .elementor-field-group-field_c860c45
    .elementor-field-subgroup {

        grid-template-columns: 1fr;
    }


    .procurement-form .elementor-field {

        min-height: 44px;
    }


    .procurement-form textarea.elementor-field {

        min-height: 110px;
    }


    .procurement-form .elementor-field-group-field_cac3b90 {

        padding: 15px !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .procurement-form .elementor-field-group-name
    .elementor-field-subgroup {

        grid-template-columns: 1fr;
    }
}/* End custom CSS */