// src/assets/css/variable.scss
$primary-color: #23468B;
$secondary-color: #131313;
$font-size-base: 14px;
// add more variables as needed


:root {

    // --icon-color: invert(52%) sepia(44%) saturate(4144%) hue-rotate(63deg) brightness(97%) contrast(101%);
    --icon-color-blue: invert(18%) sepia(58%) saturate(2295%) hue-rotate(207deg) brightness(96%) contrast(86%);


    // colors//
    --primary-color: #23468B;
    --primary-color_400: #7C9AD4;
    --secondary-color: #131313;
    --body-bg: #f8f8fa;
    --body-color: #595959;
    --color-grey: #747474;
    --color-grey5: #121212;
    --color-grey6: #929292;
    --color-grey7: #F8F8FA;
    --color-dark-grey: #A3A3A3;
    --color-red: #ed1e24;
    --color-red2: #F07D7B;
    --color-grey2: #D4D4D4; 
    --color-grey3: #717171;
    --color-grey4: #DBDBE1;
    --color-grey7: #eeeeee;
    --color-white: #fff;
    --color-purple-secondary: #7B68EE;
    --color-purple2-secondary: #F0F2FF;
    --color-blue-secondary: #4A34CD;
    --color-green-secondary: #75C9B2;
    --color-pink-secondary: #E2B1CD;
    --color-blue2-secondary: #2F5AB1;
    --color-blue3-secondary: #009FE0;
    --color-blue4-secondary: #275eab;
    --color-blue5-secondary: #527BCD;
    --color-blue6-secondary: #273279;
    --border-color: #E3E3E3;
    --border-color-dark-grey: #e7e7e7;
    --error: #ff676c;
    --error-red: #ff0000;
    --error_bg: rgba(255, 0, 0, 0.05);
    --status_new: #3B82F6;
    --status_pending: #14B8A6;
    --status_pending2: #FFC330;
    --status_submitted: #FACC15;
    --status_legal_approval: #FA8315;
    --status_npci_pending: #FA8315;
    --status_npci_approval: #15C3FA;
    --status_risk_application_approval: #FF73BF;
    --status_finance_pricing_approval: #747474;
    --rejected_status: #FF676C;
    --blue_hover: rgba(39, 50, 121, 0.3);
    --green: #54CCB1;
    --blue-gredient: linear-gradient(180deg, #203F8C 0%, #0983C8 100%);
    --blue-bg: #BBCBE9;



    // width//
    --width_10: 10%;
    --width_20: 20%;
    --width_30: 30%;
    --width_40: 40%;
    --width_50: 50%;
    --width_60: 60%;
    --width_70: 70%;
    --width_80: 80%;
    --width_90: 90%;
    --width_100: 100%;
    --max-width: 96%;
    --max_width_10: 10%;
    --max_width_20: 20%;
    --max_width_30: 30%;
    --max_width_40: 40%;
    --max_width_50: 50%;
    --max_width_60: 60%;
    --max_width_70: 70%;
    --max_width_80: 80%;
    --max_width_90: 90%;
    --max_width_100: 100%;
    --width_182: 182px;

    //Height//

    --height_100: 100%;
    --height_32: 32px;


    // fonts//
    --main-font: "Inter", sans-serif;
    --main-font2: "Manrope", sans-serif;
    --body-font: 14px;
    --font-10: 10px;
    --font-11: 11px;
    --font-12: 12px;
    --font-13: 13px;
    --font-14: 14px;
    --font-15: 15px;
    --font-16: 16px;
    --font-18: 18px;
    --font-20: 20px;
    --font-21: 21px;
    --font-22: 22px;
    --font-23: 23px;
    --font-24: 24px;
    --lineheight: 1.3;
    --lineheight_13: 13px;
    --lineheight_16: 16px;
    --lineheight_17: 17px;
    --lineheight_19: 19px;
    --lineheight_21: 21px;
    --lineheight_24: 24px;
    --lineheight_25: 25px;
    --lineheight_28: 28px;
    --lineheight_32: 32px;



    //border//
    --radius_10: 10px;
    --radius_2: 2px;
    --radius_3: 3px;
    --radius_4: 4px;
    --radius_4_0: 4px 4px 0 0;
    --radius_5: 5px;
    --radius_6: 6px;
    --radius_7: 7px;
    --radius_8: 8px;
    --radius_10: 10px;
    --radius_12: 12px;
    --radius_50: 50%;


    //padding
    --padding1: 8px 16px;
    --padding2: 20px;
    --padding3: 10px 15px;
    --padding4: 30px 20px 0 20px;
    --padding5: 30px 0 0 0;
    --padding6: 50px 85px;
    --padding7: 45px;
    --padding8: 15px 0;
    --padding9: 30px 0;
    --padding10: 8px 27px;
    --padding12:12px;
    --padding_25: 20px 25px;


    //margin

    --margin_top_10: 10px;
    --margin_top_15: 15px;
    --margin_top_20: 20px;
    --margin_top_25: 25px;
    --margin_top_30: 30px;
    --margin_top_40: 40px;
    --margin_bottom_30: 30px;
    --margin_left_22: 22px;
    --mrbtm_32: 32px;
    --mrbtm_45: 45px;

    //shadow
    --shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.46);
    --shadow2: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
    --shadow3: 5px 5px 5px -5px rgba(0, 0, 0, 0.15);
    --shadow4: 0px 2px 4px 0px #00000005;


    // common//
    --center-align: center;
    --left-align: left;
    --right-align: right;

    // icons//
    --search: url(../images/search.svg);
    --bullet: url(../images/bullet1.svg);
    --bulletunselected: url(../images/bullet-2.svg);
    --search_arrow: url(../images/arrow.svg);
    --calendar: url(../images/calendar2.svg);
    --steps_tick: url(../images/tick-w.svg);
    --close_btn: url(../images/close.svg);
    --download: url(../images/download-w.svg);
    --download-lg: url(../images/download-lg.svg);
    --send: url(../images/send.svg);
    --delete: url(../images/delete.svg);
    --edit: url(../images/edit.svg);
    --body_bg_img: url(../images/bg.svg) no-repeat right bottom;
    --login_bg: url(../images/login-bg.jpg) no-repeat 0 center;
    --view: url(../images/eye.svg);
    --check-icon: url(../images/tick-l.svg);
    --left_arrow: url(../images/left2.svg);
    --right_arrow: url(../images/right2.svg);
    --wip :url(../images/wip-icon.svg);
    --download-icon :url(../images/download-icon.svg);

}