@charset "UTF-8";

/** Author: Sterlo
* Copyright 2023-2024 Sterlo
Website: https://www.sterlo.io/
Contact: hello@tactive.io
File Purpose : Add Custom css
**/
:root[lang="ta"] .tac-previewer-design-inner,
:root[lang="ta"] .ost-dynamic-view-container {
    --ost-fs-13: 12px;

}

:root {
    --ost-main-theme-font-family: "Rubik", sans-serif;
    --ost-font-family: "Rubik", sans-serif;
    --ost-grid-font-family: "Rubik", sans-serif;
   
}

:root[data-theme=dark] {
    --ost-theme-page-backcolor-primary: #151521;
    --ost-theme-backcolor-primary: #1e1e2d;
    --ost-theme-backcolor-secondary: #009ef7;
    --ost-theme-backcolor-c1: #1e1e2d;
    --ost-theme-backcolor-c2: #000000;
    --ost-theme-backcolor-c3: #1e1e2d;
    --ost-theme-backcolor-c4: #252536;
    --ost-theme-backcolor-c5: #252536;
    --ost-theme-backcolor-c6: #151521;
    --ost-theme-backcolor-c7: #1e1e2d;
    --ost-theme-backcolor-c8: #252536;
    --ost-theme-backcolor-c9: #2B2B40;
    --ost-theme-backcolor-c10: #2B2B40;
    --ost-theme-backcolor-c11: #2B2B40;
    --ost-theme-backcolor-c12: #262638;
    --ost-theme-backcolor-c13: #28283a;
    --ost-theme-forecolor-primary: #ffffff;
    --ost-theme-forecolor-secondary: #212529;
    --ost-theme-forecolor-border: #444444;
    --ost-theme-forecolor-border-secondary: #333333;
    --ost-theme-forecolor-label: #9D9DA6;
    --ost-theme-forecolor-input-text: #ffffff;
    --ost-theme-forecolor-icon: #a1a5b7;
    --ost-theme-forecolor-headtext: #fafafa;
    --ost-theme-alert-back-color-primary: #0d6efd;
    --ost-theme-alert-back-color-secondary: #5a6268;
    --ost-theme-alert-back-color-success: #03a81b;
    --ost-theme-alert-back-color-danger: #ef3737;
    --ost-theme-alert-back-color-warning: #f06c2e;
    --ost-theme-alert-back-color-info: #0dcaf0;
    --ost-theme-alert-back-color-light: #2B2B40;
    --ost-theme-alert-back-color-dark: #212529;
    --ost-theme-alert-fore-color-primary: #ffffff;
    --ost-theme-alert-fore-color-secondary: #ffffff;
    --ost-theme-alert-fore-color-success: #ffffff;
    --ost-theme-alert-fore-color-danger: #ffffff;
    --ost-theme-alert-fore-color-warning: #212529;
    --ost-theme-alert-fore-color-info: #212529;
    --ost-theme-alert-fore-color-light: #ffffff;
    --ost-theme-alert-fore-color-dark: #ffffff;
    --ost-theme-font-family-primary: var(--ost-main-theme-font-family);
    --ost-theme-font-family-secondary: "";
    --ost-theme-font-size-standard: 14px;
    --ost-theme-font-size-label: 13px;
    --ost-theme-font-size-small: 8px;
    --ost-theme-font-size-10px: 10px;
    --ost-theme-font-size-11px: 11px;
    --ost-theme-font-size-12px: 12px;
    --ost-theme-font-weight-Standard: 400;
    --ost-theme-font-weight-normal: normal;
    --ost-theme-font-weight-light: 100;
    --ost-theme-font-weight-Bold: 500;
    --ost-theme-font-weight-Ultra-Bold: 800;
    --ost-theme-font-weight-semi-Bold: 500;

    --ost-theme-border-style-standard: 1px solid;
    --ost-theme-border-style-none: 0px;
    --ost-theme-border-style-c1: 1px dashed;
    --ost-theme-border-style-c2: 1px dotted;
    --ost-theme-border-radius-standard: 3px;
    --ost-theme-border-radius-rounded: 100%;
    --ost-theme-border-radius-card: 10px;
    --ost-theme-border-radius-none: 0px;
    --ost-theme-box-shadow-standard: 0 0.25rem 1rem rgba(26, 26, 26, 0.45);
    --ost-theme-box-shadow-small: 1px 2px 3px 0px rgb(25, 25, 30);
    --ost-theme-box-shadow-medium: -2px 3px 6px 1px rgba(0, 0, 0, 0.36);
    --ost-theme-box-shadow-high: -3px 4px 9px 0px rgba(0, 0, 0, 0.36);
    --ost-theme-box-shadow-card: none;
    --ost-theme-letter-spacing-standard: normal;
    --ost-theme-letter-spacing-small: -1px;
    --ost-theme-letter-spacing-medium: 1px;
    --ost-theme-letter-spacing-high: 2px;
    --ost-theme-line-spacing-standard: 1.5;
    --ost-theme-line-spacing-small: 1;
    --ost-theme-line-spacing-medium: 1.2;
    --ost-theme-line-spacing-high: 1.8;
    --ost-theme-gradient-standard: linear-gradient(to bottom, var(--ost-theme-backcolor-primary) 0%, var(--ost-theme-backcolor-secondary) 100%);
    --ost-theme-gradient-button: linear-gradient(to bottom, var(--ost-theme-backcolor-primary) 0%, var(--ost-theme-backcolor-secondary) 100%);
    --ost-theme-gradient-page: linear-gradient(to bottom, var(--ost-theme-backcolor-primary) 0%, var(--ost-theme-backcolor-secondary) 100%);
    --ost-theme-gradient-card: linear-gradient(to bottom, var(--ost-theme-backcolor-primary) 0%, var(--ost-theme-backcolor-secondary) 100%);
    --ost-theme-form-control-height: 33px;
    --ost-theme-form-control-feild-font-size: 14px;
    --ost-theme-form-control-width: 100%;
    --ost-theme-form-control-minWidth: 80px;

    /***************************Custom Dark ******************/
    --ost-input-focus-border-color: #474761;
    --ost-table-highlight-bg-color: #27273e;
    --ost-list-bg-active-parent-color: #252536;
    --ost-list-bg-active-child-color: #1e1e2d;
    --ost-dropdown-bg-color: var(--ost-theme-backcolor-c9);
    --maskbg: rgb(0 0 0 / 65%);
    --ost-data-table-bg-highlight-border-color: #0d6efd;
    --ost-data-table-hover-bg--color: #2b2b38;
    --ost-tac-disabled-bg-color: #252536;
    --ost-tac-disabled-border-color: #36363c;
    --ost-secondary-table-header-color: #2B2B40;
    --ost-secondary-table-hover-color: #2b2b38;
    --ost-e-holder-bg-color: #2B2B40;
    --ost-e-holder-border-color: #0d6efd;
    --ost-mb-list-bg-color: #252536;
    --ost-nav-hover-bg-color: #333333;
    --ost-frame-border-color: #fff;
    --ost-frame-notch-border-color: #ccc;
    --ost-frame-bg-color: transparent;

}

/***********************************************Start Theme root ***************/

:root {

    --ost-theme-page-backcolor-primary: #ebeff8
        /* #f5f6fa*/
    ;
    --ost-theme-backcolor-primary: #14274e;
    /* --ost-theme-backcolor-secondary: #0370c0; */
    --ost-theme-backcolor-secondary: #0d6efd;
    --ost-theme-backcolor-c1: #ffffff;
    --ost-theme-backcolor-c2: #000000;
    --ost-theme-backcolor-c3: #f5f5f5;
    --ost-theme-backcolor-c4: #e2e2e2;
    --ost-theme-backcolor-c5: #f9fbfc;
    --ost-theme-backcolor-c6: #a9b2c5;
    --ost-theme-backcolor-c7: #ffffff;
    --ost-theme-backcolor-c8: #f1f1f1;
    --ost-theme-backcolor-c9: #eeeeee;
    --ost-theme-backcolor-c10: #edf4ff;
    /* --ost-theme-backcolor-c10: #d4dae5; */
    --ost-theme-backcolor-c11: #edf2f6;
    --ost-theme-backcolor-c12: #f4f8fb;
    --ost-theme-backcolor-c13: #f9f9f9;
    --ost-theme-forecolor-primary: #212529;
    --ost-theme-forecolor-secondary: #ffffff;
    --ost-theme-forecolor-border: #c2cad8;
    --ost-theme-forecolor-border-secondary: #E6E6E6;
    --ost-theme-forecolor-label: #000000;
    --ost-theme-forecolor-input-text: #333333;
    --ost-theme-forecolor-icon: #212529;
    --ost-theme-forecolor-headtext: #212529;
    --ost-theme-alert-back-color-primary: #14274e;
    --ost-theme-alert-back-color-secondary: #5a6268;
    --ost-theme-alert-back-color-success: #03a81b;
    --ost-theme-alert-back-color-danger: #ef3737;
    --ost-theme-alert-back-color-warning: #f06c2e;
    --ost-theme-alert-back-color-info: #0dcaf0;
    --ost-theme-alert-back-color-light: #f8f9fa;
    --ost-theme-alert-back-color-dark: #212529;
    --ost-theme-alert-fore-color-primary: #ffffff;
    --ost-theme-alert-fore-color-secondary: #ffffff;
    --ost-theme-alert-fore-color-success: #ffffff;
    --ost-theme-alert-fore-color-danger: #ffffff;
    --ost-theme-alert-fore-color-warning: #212529;
    --ost-theme-alert-fore-color-info: #212529;
    --ost-theme-alert-fore-color-light: #212529;
    --ost-theme-alert-fore-color-dark: #ffffff;
    --ost-theme-font-family-primary: var(--ost-main-theme-font-family);
    --ost-theme-font-family-secondary: "";
    --ost-theme-font-size-standard: 14px;
    --ost-theme-font-size-label: 13px;
    --ost-theme-font-size-small: 8px;
    --ost-theme-font-size-10px: 10px;
    --ost-theme-font-size-11px: 11px;
    --ost-theme-font-size-12px: 12px;
    --ost-theme-font-weight-Standard: 400;
    --ost-theme-font-weight-normal: normal;
    --ost-theme-font-weight-light: 100;
    --ost-theme-font-weight-Bold: 600;
    --ost-theme-font-weight-Ultra-Bold: 800;
    --ost-theme-font-weight-semi-Bold: 500;
    --ost-theme-border-style-standard: 1px solid;
    --ost-theme-border-style-none: 0px;
    --ost-theme-border-style-c1: 1px dashed;
    --ost-theme-border-style-c2: 1px dotted;
    --ost-theme-border-radius-standard: 3px;
    --ost-theme-border-radius-rounded: 100%;
    --ost-theme-border-radius-card: 10px;
    --ost-theme-border-radius-none: 0px;
    --ost-theme-box-shadow-standard: 0 0.25rem 1rem rgba(161, 172, 184, 0.45);
    --ost-theme-box-shadow-small: 0 0.125rem 0.25rem 0 rgba(20, 39, 78, 0.4);
    --ost-theme-box-shadow-medium: -2px 3px 6px 1px rgba(10, 10, 10, 0.36);
    --ost-theme-box-shadow-high: -3px 4px 9px 0px rgba(0, 0, 0, 0.36);
    --ost-theme-box-shadow-card: none;
    --ost-theme-letter-spacing-standard: normal;
    --ost-theme-letter-spacing-small: -1px;
    --ost-theme-letter-spacing-medium: 1px;
    --ost-theme-letter-spacing-high: 2px;
    --ost-theme-line-spacing-standard: 1.5;
    --ost-theme-line-spacing-small: 1;
    --ost-theme-line-spacing-medium: 1.2;
    --ost-theme-line-spacing-high: 1.8;
    --ost-theme-gradient-standard: linear-gradient(to bottom, var(--ost-theme-backcolor-primary) 0%, var(--ost-theme-backcolor-secondary) 100%);
    --ost-theme-gradient-button: linear-gradient(to bottom, var(--ost-theme-backcolor-primary) 0%, var(--ost-theme-backcolor-secondary) 100%);
    --ost-theme-gradient-page: linear-gradient(to bottom, var(--ost-theme-backcolor-primary) 0%, var(--ost-theme-backcolor-secondary) 100%);
    --ost-theme-gradient-card: linear-gradient(to bottom, var(--ost-theme-backcolor-primary) 0%, var(--ost-theme-backcolor-secondary) 100%);
    --ost-theme-form-control-height: 33px;
    --ost-theme-form-control-feild-font-size: 14px;
    --ost-theme-form-control-width: 100%;
    --ost-theme-form-control-minWidth: 80px;
    --ost-frame-border-color: #222;
    --ost-frame-notch-border-color: #444;
    --ost-frame-bg-color: #fff;
}

/***********************************************End Theme root ***************/
/***********************************************common root ***************/
:root {

    /* color */

    --ost-font-family: var(--ost-theme-font-family-primary);
    --ost-primary: var(--ost-theme-backcolor-primary);
    --ost-primary-second: var(--ost-theme-backcolor-secondary);
    --ost-success: var(--ost-theme-alert-back-color-success);
    --ost-warning: var(--ost-theme-alert-back-color-warning);
    --ost-danger: var(--ost-theme-alert-back-color-danger);
    --ost-bg-signinpage: var(--ost-theme-backcolor-c6);
    --ost-bg-signinpage-card-color: var(--ost-theme-backcolor-c1);
    --ost-bg-light-white: var(--ost-theme-backcolor-c6);
    --ost-bg-white: var(--ost-theme-backcolor-c1);
    --ost-light-border: var(--ost-theme-forecolor-border);
    --ost-lable-color: var(--ost-theme-forecolor-label);
    --ost-nav-icon-color: var(--ost-theme-forecolor-icon);
    --ost-footer-text-color: #fff;
    --ost-border-color: var(--ost-theme-forecolor-border);
    --ost-pagination-bg-color: var(--ost-theme-backcolor-c3);
    --ost-pagination-color: var(--ost-theme-forecolor-primary);
    --ost-pagination-active-color: var(--ost-theme-backcolor-secondary);
    --ost-text-alt-color: var(--ost-theme-forecolor-headtext);
    --ost-head-color: var(--ost-theme-forecolor-headtext);
    --ost-text-color: var(--ost-theme-forecolor-primary);
    --ost-text-dark: var(--ost-theme-forecolor-primary);
    --ost-bg-alt-success: var(--ost-theme-alert-back-color-success);
    --ost-bg-alt-warning: var(--ost-theme-alert-back-color-warning);
    --ost-bg-alt-info: var(--ost-theme-alert-back-color-info);
    --ost-bg-alt-danger: var(--ost-theme-alert-back-color-danger);
    --ost-icon-bg-color: var(--ost-theme-backcolor-c8);

    --ost-input-checkbox-bg-color: var(--ost-theme-backcolor-secondary);

    /*sidemenu */
    --ost-side-menu-bg-color: var(--ost-theme-backcolor-c1);

    /* Theme card  and modal*/

    --ost-card-bg-alt-white: var(--ost-theme-backcolor-c1);
    --ost-card-bg: var(--ost-theme-backcolor-c1);
    --ost-side-panel-page-link: var(--ost-common-white-color);
    --ost-side-panel-page-active-color: var(--ost-theme-backcolor-primary);
    --ost-side-panel-list-icon-text-color: var(--ost-theme-forecolor-headtext);
    /* width height */
    --tav-min-width-btn: var(--ost-theme-form-control-minWidth);
    --ost-height-30: 30px;
    /* size */
    --ost-fs-14: var(--ost-theme-font-size-standard);
    --ost-fs-13: var(--ost-theme-font-size-label);
    --ost-fs-8: var(--ost-theme-font-size-small);
    /* border radius */
    --ost-border-radius-025rem: var(--ost-theme-border-radius-standard);
    --ost-border-radius-0: var(--ost-theme-border-radius-none);
    --ost-border-radius-10: var(--ost-theme-border-radius-card);


    /* --ost-pagination-bg-color: var(--ost-theme-backcolor-c4); */
    --ost-pagination-bg-color: transparent;
    --ost-pagination-border-color: var(--ost-theme-forecolor-border);
    --ost-data-table-footer-bg-color: var(--ost-theme-backcolor-c5);
    --ost-data-table-bg-color: var(--ost-theme-backcolor-c5);
    --ost-data-table-form-control-border-color: var(--ost-theme-forecolor-border);
    --ost-data-table-form-control-text-color: var(--ost-theme-forecolor-primary);
    --ost-data-table-row-highlight-bg-color: #fff8dd;
    --ost-data-table-row-highlight-text-color: var(--ost-theme-forecolor-primary);
    /* commmon bg and border colors  */
    --ost-dropdown-bg-color: var(--ost-theme-backcolor-c1);
    --ost-card-alt-bg-color: var(--ost-theme-backcolor-c5);

    --ost-common-text-color333: var(--ost-theme-forecolor-primary);
    --ost-common-dadada-color: var(--ost-theme-forecolor-border);
    --ost-common-white-color: var(--ost-theme-forecolor-secondary);
    --ost-common-text-black-color: var(--ost-theme-forecolor-primary);
    --ost-common-border-tac-color: var(--ost-theme-forecolor-border);
    /* input  */
    --ost-input-group-border-color: var(--ost-theme-forecolor-border);
    --ost-input-group-text-color: var(--ost-theme-forecolor-label);
    --ost-form-control-margin-spacing: 4px;

    /* font weight  */
    --ost-font-weight-600: var(--ost-theme-font-weight-Bold);
    --ost-font-weight-500: var(--ost-theme-font-weight-semi-Bold);
    --ost-font-weight-400: var(--ost-theme-font-weight-Standard);
    --ost-font-weight-normal: var(--ost-theme-font-weight-normal);

    --ost-font-weight-Standard: var(--ost-theme-font-weight-Standard);
    --ost-font-weight-normal: var(--ost-theme-font-weight-normal);
    --ost-font-weight-light: var(--ost-theme-font-weight-light);
    --ost-font-weight-Bold: var(--ost-theme-font-weight-Bold);
    --ost-font-weight-Ultra-Bold: var(--ost-theme-font-weight-Ultra-Bold);
    --ost-font-weight-semi-Bold: var(--ost-theme-font-weight-semi-Bold);

    /* input  */
    --ost-input-feild-font-size: var(--ost-theme-form-control-feild-font-size);
    --ost-input-bg-color: var(--ost-theme-backcolor-c7);
    --ost-input-border-color: var(--ost-theme-forecolor-border);
    --ost-input-text-color: var(--ost-theme-forecolor-input-text);
    --ost-input-focus-bg-color: var(--ost-theme-backcolor-c7);
    --ost-input-focus-text-color: var(--ost-theme-forecolor-primary);
    --ost-bg-primary: var(--ost-theme-alert-back-color-primary);
    --ost-color-primary-alt: #0d6efd;
    --ost-bg-primary-alt: #0d6efd;
    --ost-bg-secondary: var(--ost-theme-alert-back-color-secondary);
    --ost-bg-success: var(--ost-theme-alert-back-color-success);
    --ost-bg-info: var(--ost-theme-alert-back-color-info);
    --ost-bg-warning: var(--ost-theme-alert-back-color-warning);
    --ost-bg-danger: var(--ost-theme-alert-back-color-danger);
    --ost-bg-light: var(--ost-theme-alert-back-color-light);
    --ost-bg-light-text-color: var(--ost-theme-alert-fore-color-light);
    --ost-bg-dark: var(--ost-theme-alert-back-color-dark);
    --ost-tac-disabled: var(--ost-theme-backcolor-c8);
    --ost-tac-disabled-bg-color: #eee;
    --ost-tac-disabled-border-color: #c2cad8;
    /* button */
    --ost-btn-primary: var(--ost-theme-alert-back-color-primary);
    --ost-btn-secondary: var(--ost-theme-alert-back-color-secondary);
    --ost-btn-success: var(--ost-theme-alert-back-color-success);
    --ost-btn-info: var(--ost-theme-alert-back-color-info);
    --ost-btn-warning: var(--ost-theme-alert-back-color-warning);
    --ost-btn-danger: var(--ost-theme-alert-back-color-danger);
    --ost-btn-light: var(--ost-theme-alert-back-color-light);
    --ost-btn-light-text-color: var(--ost-theme-alert-fore-color-light);
    --ost-btn-dark: var(--ost-theme-alert-back-color-dark);
    /* navbar and footer */
    --ost-navbar-bg-color: var(--ost-theme-backcolor-primary);
    --ost-navbar-border-color: var(--ost-theme-backcolor-primary);
    --ost-footer-border-color: var(--ost-theme-backcolor-primary);
    --ost-footer-bg-color: var(--ost-theme-backcolor-primary);
    /* badge  */

    --ost-label-text-primary: var(--ost-theme-alert-back-color-primary);
    --ost-label-text-secondary: var(--ost-theme-alert-back-color-secondary);
    --ost-label-text-success: var(--ost-theme-alert-back-color-success);
    --ost-label-text-info: var(--ost-theme-alert-back-color-info);
    --ost-label-text-warning: var(--ost-theme-alert-back-color-warning);
    --ost-label-text-danger: var(--ost-theme-alert-back-color-danger);
    --ost-label-text-light: var(--ost-theme-alert-back-color-light);
    --ost-label-text-dark: var(--ost-theme-alert-back-color-dark);
    --ost-label-text-gray: var(--ost-theme-alert-back-color-dark);
    /**********************custom******************************/
    /****************Dropdown*****************/
    --ost-dropdown-bx-bg-color: var(--ost-theme-backcolor-c9);
    --ost-dropdown-bx-bg-color-alt: var(--ost-theme-backcolor-c1);
    --ost-dropdown-bx-text-color: var(--ost-text-color);
    --ost-dropdown-bx-hover-and-active-text-color: var(--ost-primary-second);
    --ost-dropdown-bx-hover-bg-color: var(--ost-theme-backcolor-c8);
    /* modal  */
    --ost-boxmodal-header-bg-color: var(--ost-theme-backcolor-c5);
    --ost-boxmodal-header-text-color: var(--ost-theme-forecolor-primary);
    --ost-boxmodal-footer-bg-color: var(--ost-theme-backcolor-c5);
    --ost-boxmodal-footer-text-color: var(--ost-theme-forecolor-primary);
    --ost-boxmodal-body-bg-color: var(--ost-theme-backcolor-c1);
    --ost-boxmodal-border-color: var(--ost-theme-forecolor-border);
    --ost-modal-bg: var(--ost-theme-forecolor-secondary);
    --ost-modal-background-color: var(--ost-theme-backcolor-c1);
    /* common color  */
    --ost-list-bg-active-parent-color: #e9ecef;
    --ost-list-bg-active-child-color: #fafafa;
    --ost-table-highlight-bg-color: #EEF2FF;
    --ost-sidebar-nav-item-nav-bg-color: rgb(233 233 233 / 17%);
    --ost-sidebar-nav-item-nav-link-color: #999999;
    --ost-data-table-selected-row-bg-color: #EEF2FF;
    --ost-data-table-selected-row-text-color: #4338CA;
    --ost-ui-droppable-color: #b5e1ff;
    --ost-tooltip-arrow-border-color: #ebf0f4;
    --ost-tooltip-border-color: rgba(27, 31, 36, .15);
    --ost-tooltip-bg-color: #ebf0f4;
    --ost-tooltip-text-color: #24292f;
    --ost-input-focus-border-color: #86b7fe;
    --ost-dropdown-link-color: #697a8d;
    --ost-dropdown-link-hover-bg: rgba(67, 89, 113, 0.04);
    --ost-tab-bg-light: #f4f5fa;
    --ost-tab-link-color: #a1a5b7;
    --ost-primary-hover: #2b3f6a;
    --ost-primary-second-hover: #e8f0fe;
    --ost-success-hover: #049b1a;
    --ost-light-blue: #024d87;
    --ost-light-gray: #979797;
    --ost-bg-label-primary: transparent;
    --ost-bg-label-secondary: transparent;
    --ost-bg-label-success: transparent;
    --ost-bg-label-info: transparent;
    --ost-bg-label-warning: transparent;
    --ost-bg-label-danger: transparent;
    --ost-bg-label-light: transparent;
    --ost-bg-label-dark: transparent;
    --ost-bg-label-gray: transparent;

    /* padding  */
    --ost-tree-padding: 3px 5px;
    /* radius */
    --ost-border-radius-10: 10px;
    --ost-border-radius-5: 5px;
    /* width height */
    --ost-width-30: 30px;
    --ost-dropdown-min-width: 12rem;
    /* size */
    --ost-fs-40: 40px;
    --ost-fs-39: 39px;
    --ost-fs-38: 38px;
    --ost-fs-37: 37px;
    --ost-fs-36: 36px;
    --ost-fs-35: 35px;
    --ost-fs-34: 34px;
    --ost-fs-33: 33px;
    --ost-fs-32: 32px;
    --ost-fs-31: 31px;
    --ost-fs-30: 30px;
    --ost-fs-29: 29px;
    --ost-fs-28: 28px;
    --ost-fs-27: 27px;
    --ost-fs-26: 26px;
    --ost-fs-25: 25px;
    --ost-fs-24: 24px;
    --ost-fs-23: 23px;
    --ost-fs-22: 22px;
    --ost-fs-21: 21px;
    --ost-fs-20: 20px;
    --ost-fs-19: 19px;
    --ost-fs-18: 18px;
    --ost-fs-17: 17px;
    --ost-fs-16: 16px;
    --ost-fs-15: 15px;
    --ost-fs-12: 13px;
    --ost-fs-11: 11px;
    --ost-fs-10: 10px;
    --ost-fs-9: 9px;
    --ost-fs-8: 8px;
    --ost-fs-7: 7px;
    --ost-fs-6: 6px;
    --ost-fs-5: 5px;
    --ost-fs-4: 4px;
    --ost-fs-3: 3px;
    --ost-fs-2: 2px;
    --ost-fs-1: 1px;
    --ost-fs-0875: 0.875rem;
    /* button  */
    --ost-btn-icon-active-bg-color: #e8f0fe;
    --ost-btn-light-bg-color: #f9fafb;
    --ost-btn-light-bg-hover-color: #f8f9fa;

    /* avatar  */
    --ost-avatar-initial-bg-color: #9da8b5;
    /* border radius */
    --ost-border-radius-1: 1px;
    --ost-border-radius-2: 2px;
    --ost-border-radius-3: 3px;
    --ost-border-radius-4: 4px;
    --ost-border-radius-5: 5px;
    --ost-border-radius-6: 6px;
    --ost-border-radius-7: 7px;
    --ost-border-radius-8: 8px;
    --ost-border-radius-9: 9px;

    /* tag common  */
    --tag-bs-white: #ffffff;
    --tag-bs-primary: #0168fa;
    --tag-bs-secondary: #E1E3EA;
    --tag-bs-light: #F9F9F9;
    --tag-bs-success: #50cd89;
    --tag-bs-info: #0dcaf0;
    --tag-bs-warning: #ffc700;
    --tag-bs-danger: #f1416c;
    --tag-bs-dark: #181C32;
    --tag-bs-primary-active: #0095e8;
    --tag-bs-secondary-active: #B5B5C3;
    --tag-bs-light-active: #F4F4F4;
    --tag-bs-success-active: #47be7d;
    --tag-bs-info-active: #03c0e6;
    --tag-bs-warning-active: #f1bc00;
    --tag-bs-danger-active: #d9214e;
    --tag-bs-dark-active: #131628;
    --tag-bs-primary-light: #f1faff;
    --tag-bs-secondary-light: #F9F9F9;
    --tag-bs-success-light: #e8fff3;
    --tag-bs-info-light: #f8f5ff;
    --tag-bs-warning-light: #fff8dd;
    --tag-bs-danger-light: #ffe8ea;
    --tag-bs-dark-light: #F4F4F4;
    --tag-bs-primary-inverse: #ffffff;
    --tag-bs-secondary-inverse: #3F4254;
    --tag-bs-light-inverse: #7E8299;

    /* ost New design    */
    /* sidebar  */
    --ost-new-sidebar-bg-color: var(--ost-theme-backcolor-c1);
    --ost-new-sidebar-border-color: var(--ost-theme-forecolor-border);
    --ost-new-sidebar-header-bg-color: var(--ost-theme-backcolor-c1);
    --ost-new-sidebar-header-text-color: var(--ost-theme-forecolor-primary);
    --ost-new-sidebar-header-border-color: var(--ost-theme-forecolor-border);


    --ost-new-sidebar-content-bg-color: '';
    --ost-new-sidebar-content-text-color: var(--ost-theme-forecolor-primary);
    --ost-new-sidebar-content-text-hover-color: '';
    --ost-new-sidebar-content-text-highlight-color: '';
    --ost-new-sidebar-footer-bg-color: '';
    --ost-new-sidebar-footer-border-color: var(--ost-theme-forecolor-border);
    --ost-new-sidebar-footer-text-color: '';
    /* header  */
    --ost-new-nav-header-bg-color: var(--ost-theme-backcolor-c1);
    --ost-new-nav-header-border-color: var(--ost-theme-forecolor-border);
    --ost-new-nav-header-text-color: var(--ost-theme-forecolor-primary);
    --ost-new-nav-header-hover-color: '';
    --ost-new-nav-header-highlight-color: '';
    --ost-new-nav-header-dropdown-bg-color: '';
    --ost-new-nav-header-dropdown-border-color: '';
    --ost-new-nav-header-dropdown-text-color: var(--ost-theme-forecolor-primary);
    --ost-new-nav-header-dropdown-text-hover-color: '';
    --ost-nav-hover-bg-color: rgba(60, 64, 67, 0.078);
    /* body  */
    --ost-new-main-layout-bg-color: var(--ost-theme-page-backcolor-primary);
    --ost-new-main-layout-border-color: var(--ost-theme-forecolor-border);
    --ost-new-main-layout-text-color: var(--ost-theme-forecolor-primary);

    --ost-border-primary: var(--ost-bg-primary-alt);
    --ost-border-secondary: var(--ost-bg-danger);
    --ost-border-success: var(--ost-bg-success);
    --ost-border-warning: var(--ost-bg-warning);
    --ost-border-danger: var(--ost-bg-danger);
    --ost-border-light: var(--ost-theme-forecolor-border-secondary);

}


*,
::after,
::before {
    box-sizing: border-box
}

@media (prefers-reduced-motion:no-preference) {
    :root {
        scroll-behavior: smooth
    }
}

body {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

/*********************************************** Bootstrap Grid System  **********************************************/
/*********************************************** Bootstrap Grid System  **********************************************/
/*********************************************** Bootstrap Grid System  **********************************************/
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {

    .container-sm,
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {

    .container-md,
    .container-sm,
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {

    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {

    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {

    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1320px;
    }
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

.col {
    flex: 1 0 0%;
}

.row-cols-auto>* {
    flex: 0 0 auto;
    width: auto;
}

.row-cols-1>* {
    flex: 0 0 auto;
    width: 100%;
}

.row-cols-2>* {
    flex: 0 0 auto;
    width: 50%;
}

.row-cols-3>* {
    flex: 0 0 auto;
    width: 33.3333333333%;
}

.row-cols-4>* {
    flex: 0 0 auto;
    width: 25%;
}

.row-cols-5>* {
    flex: 0 0 auto;
    width: 20%;
}

.row-cols-6>* {
    flex: 0 0 auto;
    width: 16.6666666667%;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
}

.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
}

.col-3 {
    flex: 0 0 auto;
    width: 25%;
}

.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}

.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
}

.col-6 {
    flex: 0 0 auto;
    width: 50%;
}

.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
}

.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}

.col-9 {
    flex: 0 0 auto;
    width: 75%;
}

.col-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
}

.col-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

.g-0,
.gx-0 {
    --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
    --bs-gutter-y: 0;
}

.g-1,
.gx-1 {
    --bs-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
    --bs-gutter-y: 0.25rem;
}

.g-2,
.gx-2 {
    --bs-gutter-x: 0.5rem;
}

.g-2,
.gy-2 {
    --bs-gutter-y: 0.5rem;
}

.g-3,
.gx-3 {
    --bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
    --bs-gutter-y: 1rem;
}

.g-4,
.gx-4 {
    --bs-gutter-x: 1.5rem;
}

.g-4,
.gy-4 {
    --bs-gutter-y: 1.5rem;
}

.g-5,
.gx-5 {
    --bs-gutter-x: 3rem;
}

.g-5,
.gy-5 {
    --bs-gutter-y: 3rem;
}

@media (min-width: 576px) {
    .col-sm {
        flex: 1 0 0%;
    }

    .row-cols-sm-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-sm-1>* {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-sm-2>* {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-sm-3>* {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .row-cols-sm-4>* {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-sm-5>* {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-sm-6>* {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }

    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .g-sm-0,
    .gx-sm-0 {
        --bs-gutter-x: 0;
    }

    .g-sm-0,
    .gy-sm-0 {
        --bs-gutter-y: 0;
    }

    .g-sm-1,
    .gx-sm-1 {
        --bs-gutter-x: 0.25rem;
    }

    .g-sm-1,
    .gy-sm-1 {
        --bs-gutter-y: 0.25rem;
    }

    .g-sm-2,
    .gx-sm-2 {
        --bs-gutter-x: 0.5rem;
    }

    .g-sm-2,
    .gy-sm-2 {
        --bs-gutter-y: 0.5rem;
    }

    .g-sm-3,
    .gx-sm-3 {
        --bs-gutter-x: 1rem;
    }

    .g-sm-3,
    .gy-sm-3 {
        --bs-gutter-y: 1rem;
    }

    .g-sm-4,
    .gx-sm-4 {
        --bs-gutter-x: 1.5rem;
    }

    .g-sm-4,
    .gy-sm-4 {
        --bs-gutter-y: 1.5rem;
    }

    .g-sm-5,
    .gx-sm-5 {
        --bs-gutter-x: 3rem;
    }

    .g-sm-5,
    .gy-sm-5 {
        --bs-gutter-y: 3rem;
    }
}

@media (min-width: 768px) {
    .col-md {
        flex: 1 0 0%;
    }

    .row-cols-md-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-md-1>* {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-md-2>* {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-md-3>* {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .row-cols-md-4>* {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-md-5>* {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-md-6>* {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }

    .col-md-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-md-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-md-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-md-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-md-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-md-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-md-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-md-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-md-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .g-md-0,
    .gx-md-0 {
        --bs-gutter-x: 0;
    }

    .g-md-0,
    .gy-md-0 {
        --bs-gutter-y: 0;
    }

    .g-md-1,
    .gx-md-1 {
        --bs-gutter-x: 0.25rem;
    }

    .g-md-1,
    .gy-md-1 {
        --bs-gutter-y: 0.25rem;
    }

    .g-md-2,
    .gx-md-2 {
        --bs-gutter-x: 0.5rem;
    }

    .g-md-2,
    .gy-md-2 {
        --bs-gutter-y: 0.5rem;
    }

    .g-md-3,
    .gx-md-3 {
        --bs-gutter-x: 1rem;
    }

    .g-md-3,
    .gy-md-3 {
        --bs-gutter-y: 1rem;
    }

    .g-md-4,
    .gx-md-4 {
        --bs-gutter-x: 1.5rem;
    }

    .g-md-4,
    .gy-md-4 {
        --bs-gutter-y: 1.5rem;
    }

    .g-md-5,
    .gx-md-5 {
        --bs-gutter-x: 3rem;
    }

    .g-md-5,
    .gy-md-5 {
        --bs-gutter-y: 3rem;
    }
}

@media (min-width: 992px) {
    .col-lg {
        flex: 1 0 0%;
    }

    .row-cols-lg-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-lg-1>* {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-lg-2>* {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-lg-3>* {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .row-cols-lg-4>* {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-lg-5>* {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-lg-6>* {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }

    .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .g-lg-0,
    .gx-lg-0 {
        --bs-gutter-x: 0;
    }

    .g-lg-0,
    .gy-lg-0 {
        --bs-gutter-y: 0;
    }

    .g-lg-1,
    .gx-lg-1 {
        --bs-gutter-x: 0.25rem;
    }

    .g-lg-1,
    .gy-lg-1 {
        --bs-gutter-y: 0.25rem;
    }

    .g-lg-2,
    .gx-lg-2 {
        --bs-gutter-x: 0.5rem;
    }

    .g-lg-2,
    .gy-lg-2 {
        --bs-gutter-y: 0.5rem;
    }

    .g-lg-3,
    .gx-lg-3 {
        --bs-gutter-x: 1rem;
    }

    .g-lg-3,
    .gy-lg-3 {
        --bs-gutter-y: 1rem;
    }

    .g-lg-4,
    .gx-lg-4 {
        --bs-gutter-x: 1.5rem;
    }

    .g-lg-4,
    .gy-lg-4 {
        --bs-gutter-y: 1.5rem;
    }

    .g-lg-5,
    .gx-lg-5 {
        --bs-gutter-x: 3rem;
    }

    .g-lg-5,
    .gy-lg-5 {
        --bs-gutter-y: 3rem;
    }
}

@media (min-width: 1200px) {
    .col-xl {
        flex: 1 0 0%;
    }

    .row-cols-xl-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-xl-1>* {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-xl-2>* {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-xl-3>* {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .row-cols-xl-4>* {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-xl-5>* {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-xl-6>* {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }

    .col-xl-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .g-xl-0,
    .gx-xl-0 {
        --bs-gutter-x: 0;
    }

    .g-xl-0,
    .gy-xl-0 {
        --bs-gutter-y: 0;
    }

    .g-xl-1,
    .gx-xl-1 {
        --bs-gutter-x: 0.25rem;
    }

    .g-xl-1,
    .gy-xl-1 {
        --bs-gutter-y: 0.25rem;
    }

    .g-xl-2,
    .gx-xl-2 {
        --bs-gutter-x: 0.5rem;
    }

    .g-xl-2,
    .gy-xl-2 {
        --bs-gutter-y: 0.5rem;
    }

    .g-xl-3,
    .gx-xl-3 {
        --bs-gutter-x: 1rem;
    }

    .g-xl-3,
    .gy-xl-3 {
        --bs-gutter-y: 1rem;
    }

    .g-xl-4,
    .gx-xl-4 {
        --bs-gutter-x: 1.5rem;
    }

    .g-xl-4,
    .gy-xl-4 {
        --bs-gutter-y: 1.5rem;
    }

    .g-xl-5,
    .gx-xl-5 {
        --bs-gutter-x: 3rem;
    }

    .g-xl-5,
    .gy-xl-5 {
        --bs-gutter-y: 3rem;
    }
}

@media (min-width: 1400px) {
    .col-xxl {
        flex: 1 0 0%;
    }

    .row-cols-xxl-auto>* {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-xxl-1>* {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-xxl-2>* {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-xxl-3>* {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .row-cols-xxl-4>* {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-xxl-5>* {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-xxl-6>* {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }

    .col-xxl-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-xxl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-xxl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-xxl-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xxl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-xxl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-xxl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xxl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-xxl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-xxl-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xxl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-xxl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-xxl-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .g-xxl-0,
    .gx-xxl-0 {
        --bs-gutter-x: 0;
    }

    .g-xxl-0,
    .gy-xxl-0 {
        --bs-gutter-y: 0;
    }

    .g-xxl-1,
    .gx-xxl-1 {
        --bs-gutter-x: 0.25rem;
    }

    .g-xxl-1,
    .gy-xxl-1 {
        --bs-gutter-y: 0.25rem;
    }

    .g-xxl-2,
    .gx-xxl-2 {
        --bs-gutter-x: 0.5rem;
    }

    .g-xxl-2,
    .gy-xxl-2 {
        --bs-gutter-y: 0.5rem;
    }

    .g-xxl-3,
    .gx-xxl-3 {
        --bs-gutter-x: 1rem;
    }

    .g-xxl-3,
    .gy-xxl-3 {
        --bs-gutter-y: 1rem;
    }

    .g-xxl-4,
    .gx-xxl-4 {
        --bs-gutter-x: 1.5rem;
    }

    .g-xxl-4,
    .gy-xxl-4 {
        --bs-gutter-y: 1.5rem;
    }

    .g-xxl-5,
    .gx-xxl-5 {
        --bs-gutter-x: 3rem;
    }

    .g-xxl-5,
    .gy-xxl-5 {
        --bs-gutter-y: 3rem;
    }
}

/*********************************************** Bootstrap Grid System  **********************************************/
/*********************************************** Bootstrap Grid System  **********************************************/
/*********************************************** Bootstrap Grid System  **********************************************/
.text-center {
    text-align: center !important;
}

.ost-form-signin {
    width: 100%;
    max-width: 360px;
    padding: 1.5rem !important;
    margin: auto;
    background-color: var(--ost-bg-signinpage-card-color) !important;
    border-radius: var(--ost-border-radius-5);
    box-shadow: rgba(50, 50, 93, 0.14) 0px 30px 60px -12px, rgba(0, 0, 0, 0.18) 0px 18px 36px -18px;
}

.ost-form-signin h1,
.text-dark {
    color: var(--ost-text-dark) !important;
}

.fs-5 {
    font-size: var(--ost-fs-16) !important;
}

.text-light-gray {
    color: var(--ost-light-gray);
}

.form-label {
    margin-bottom: 0.15rem;
}

.fs-13 {
    font-size: var(--ost-fs-13);
}

body label {
    font-size: var(--ost-fs-13);
    margin-bottom: 2px !important;
    margin-left: 0 !important;
    font-weight: var(--ost-font-weight-500);
}

@media (max-width: 767px) {
    .ost-d-none-on-mobile {
        display: none !important;
    }

    body .ost-login-pge.ost-login-pge-right {
        background-color: var(--ost-theme-backcolor-c1) !important;
		padding:0 !important;
    }

    body .ost-login-pge .ost-form-signin {
        box-shadow: none !important;
    }
}

*,
::after,
::before {
    box-sizing: border-box !important;
}

.ost-theme-portal-login-page-main .login_fleft {
    width: 100% !important;
    float: none !important;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ost-theme-portal-login-page-main .login_fright {
    width: 100%;
    float: none;
    margin-top: 0;
    padding: 0 !important;
}

#login_container {
    width: 100% !important;
    margin: 0 !important;
}

body,
html {
    height: 100%;
    margin: 0 !important;
}

.ost-login-pge-right {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.h-100 {
    height: 100% !important;
}

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

.p-0 {
    padding: 0 !important;
}

.m-0 {
    margin: 0 !important;
}

form#fromLogin,
div#updatepnl,
div#login_container {
    height: 100% !important;
}

.ost-login-pge.ost-login-pge-right {
    background-color: var(--ost-new-main-layout-bg-color) !important;
}

.login_fleft img {
    object-fit: contain;
    object-position: center;
}

.ost-theme-portal-login-page-main .ost-form-signin .form-group.form-md-line-input input.form-control {
    /* border: 1px solid var(--ost-footer-bg-color); */
    font-family: var(--ost-font-family) !important;
    font-weight: var(--ost-font-weight-400) !important;
    font-size: var(--ost-input-feild-font-size) !important;
    min-height: var(--ost-theme-form-control-height) !important;
    color: var(--ost-input-text-color) !important;
    background: var(--ost-input-bg-color) !important;
    border: 1px solid var(--ost-theme-forecolor-border) !important;
    border-radius: var(--ost-theme-border-radius-standard) !important;
    padding: 0 8px !important;
}

.ost-theme-portal-login-page-main .ost-form-signin .form-group.form-md-line-input.form-md-floating-label input.form-control~label {
    top: -3px !important;
    bottom: inherit;
    color: var(--ost-lable-color) !important;
    font-size: var(--ost-fs-13) !important;
    font-weight: var(--ost-font-weight-500);
    border-width: 0px !important;
}

.ost-theme-portal-login-page-main .ost-form-signin .form-group.form-md-line-input.form-md-floating-label input.form-control~label:after {
    content: none !important;
}

.ost-theme-portal-login-page-main .ost-form-signin .form-group.form-md-line-input input.form-control:hover,
.ost-theme-portal-login-page-main .ost-form-signin .form-group.form-md-line-input input.form-control:focus {
    border-color: var(--ost-primary-second) !important;
}

.ost-theme-portal-login-page-main .ost-form-signin .form-group.form-md-line-input input.form-control:focus {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: 0 0 0 0.2rem #009ef747 !important;
    border-color: var(--ost-primary-second) !important;
}

.ost-theme-portal-login-page-main .portlet-body.form .md-checkbox label:hover .box {
    border-color: var(--ost-primary-second) !important;
}

.ost-theme-portal-login-page-main .portlet-body.form .md-checkbox label>.box {
    width: 15px !important;
    height: 15px !important;
    border-width: 1px;
    border-color: var(--ost-input-border-color);
    border-radius: 3px;
    top: 0;
    position: relative;
    margin-right: 5px;
}

.ost-theme-portal-login-page-main .has-info .md-checkbox label>.box,
.ost-theme-portal-login-page-main .has-info .md-checkbox label>.check,
.ost-theme-portal-login-page-main .has-info.md-checkbox label>.box,
.ost-theme-portal-login-page-main .has-info.md-checkbox label>.check {
    border-color: var(--ost-border-primary);
}

.ost-theme-portal-login-page-main .md-checkbox label>.check {
    top: -3px;
    left: 6px;
    width: 8px;
    height: 15px;
    border: 2px solid var(--ost-border-primary);
    border-top: none;
    border-left: none;
}

.ost-theme-portal-login-page-main .portlet-body.form .md-checkbox label {
    padding-left: 0px !important;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--ost-common-text-black-color);
    font-weight: 500;
    line-height: normal;
}

#login_container .ost-theme-portal-login-page-main p {
    font-size: 13px !important;
    color: var(--ost-light-gray);
    padding: 5px 0 15px;
}

#login_container .ost-theme-portal-login-page-main h1 {
    font-weight: 600 !important;
    font-size: var(--ost-fs-23) !important;
    padding-bottom: 5px;
    padding-top: 5px;
    color: var(--ost-text-dark) !important;
}

.ost-theme-portal-login-page-main .login_fright span a {
    color: var(--ost-common-text-black-color);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 5px !important;
    display: block;
}

.ost-theme-portal-login-page-main .ost-fgt-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.k-rtl .ost-theme-portal-login-page-main .portlet-body.form .md-checkbox label>.box {

    margin-right: 0;
    margin-left: 5px;
}

body.k-rtl .k-dropdown-wrap .k-select,
body.k-rtl .k-numeric-wrap .k-select,
body.k-rtl .k-picker-wrap .k-select {

    right: inherit;
}

body.k-rtl .k-combobox>.k-dropdown-wrap>.k-i-close {
    left: 2.4em;
    right: inherit;
}

body.k-rtl span.k-dropdown-wrap.k-state-default,
body.k-rtl .k-numeric-wrap.k-state-default,
body.k-rtl .k-picker-wrap.k-state-default {

    padding-left: 1.9rem;
    padding-right: 4px;
}

.ost-theme-portal-login-page-main .login_fright .ladda-button .ladda-label {

    color: #fff;
}

.ost-theme-portal-login-page-main .login_fright .logo_div {
    text-align: center;
    margin-bottom: 10px;
}

.ost-theme-portal-login-page-main .cancel_btn,
.ost-theme-portal-login-page-main .cancel_btn:hover {
    padding: 9px 15px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid var(--ost-light-border) !important;
    background-color: var(--ost-btn-light) !important;
    color: var(--ost-btn-light-text-color) !important;
}

.ost-theme-portal-login-page-main .cancel_btn:hover {
    opacity: 0.9;
    box-shadow: 0 0.125rem 6px 0 rgb(20 39 78 / 8%);
}

.ost-theme-portal-login-page-main .sign_btn:hover {
    opacity: 0.9;
    box-shadow: 0 0.125rem 10px 0px rgb(20 39 78 / 15%);
}

.ost-theme-portal-login-page-main .sign_btn,
.ost-theme-portal-login-page-main .sign_btn:hover {
    background: var(--ost-primary-second);
    border-radius: 3px;
    color: #fff;
    padding: 9px 15px;
    border: 0;
    outline: 0;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid var(--ost-primary-second);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ost-theme-portal-login-page-main .login_ftr {
    border-top: var(--ost-border-light) 1px dashed;
    padding: 10px 0 0px 0px;
    margin: 10px 0 0;
    text-align: center;
}

.ost-theme-portal-login-page-main .login_ftr .small {
    color: var(--ost-common-text-black-color);
    display: block;
    margin: 0;
    padding: 0;
    font-size: 11px;
    opacity: 0.8;
}

.ost-theme-portal-login-page-main .login_fright form {
    padding: 0 0px;
}

.gap-2 {
    gap: 0.4rem;
}

.justify-content-center {
    justify-content: center;
}

.align-items-center {
    align-items: center !important;
}

.d-flex {
    display: flex !important;
}

.ost-lg-bt-ft {
    justify-content: center;
    grid-gap: 5px;
}

/* .bt-end { */
    /* border-right: 1px solid var(--ost-border-color); */
    /* padding: 0 8px !important; */
/* } */
.ost-theme-portal-login-page-main .projectversion.small {
    padding: 0 3px !important;
    border-left: 1px solid var(--ost-border-color);
}

.ost-theme-portal-login-page-main #ls_errormg:before,
.ost-theme-portal-login-page-main .lst_error:before {
    width: 0px;
    height: 0px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid var(--tag-bs-danger-light);
    content: '';
    position: absolute;
    top: -6px;
    right: 0;
    left: 0;
    margin: auto;
}

.ost-theme-portal-login-page-main .login_ftr .small:empty {
    display: none;
}

.ost-theme-portal-login-page-main .ost-form-signin .form-group.form-md-line-input.form-md-floating-label {
    margin-bottom: 0 !important;
}

.ost-theme-portal-login-page-main .login_fleft img {
    max-width: 100%;
    /* height: 100%; */
    /* width: 100%; */
    object-fit: cover;
}

body.k-rtl {
    direction: rtl;
}

.ost-theme-portal-login-page-main #ls_errormg,
.ost-theme-portal-login-page-main .lst_error {
    position: relative;
    background: var(--tag-bs-danger-light);
    text-align: center;
    padding: 10px 0px;
    margin-bottom: 15px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 400;
}
.ost-main-login-page .modal-dialog.modal-dialog-centered {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ost-main-login-page  .modal-content {
    width: 100%;
	    overflow: hidden;
}
.ost-main-login-page  .modal .modal-content .modal-header .modal-title {
    color: var(--ost-common-text-black-color);
    margin: 0;
    font-weight: var(--ost-font-weight-500) !important;
}
.ost-main-login-page  .modal .modal-content .modal-header {
    background: var(--ost-theme-backcolor-c5) !important;
    color: var(--ost-head-color) !important;
    font-weight: var(--ost-font-weight-600) !important;
    position: relative;
    border-bottom: 1px solid var(--ost-border-color) !important;
    min-height: 45px;
    display: flex;
    align-items: center;
    padding: 10px 15px !important
}
.ost-main-login-page  .modal .modal-content .modal-header .close span {
    color: var(--ost-common-text-black-color);
}
.ost-main-login-page  .modal .modal-content .modal-header .close {
    width: 25px;
    height: 25px;
    border: 1px solid var(--ost-border-color);
    color: var(--ost-common-text-black-color);
}
.ost-main-login-page  #cboTenantmodel .modal-content .modal-footer,.ost-main-login-page  .modal-footer {
    padding: 0 !important;
    display: flex;
    align-items: center;
    padding: 10px !important;
    border-top: 1px solid var(--ost-border-color) !important;
}
.ost-main-login-page  span.k-dropdown-wrap.k-state-default,
.ost-main-login-page  .k-numeric-wrap.k-state-default,
.ost-main-login-page  .k-picker-wrap.k-state-default {
    border: none !important;
    margin-left: 0;
    /* padding: 0 !important; */
    font-weight: var(--ost-font-weight-400) !important;
    font-size: var(--ost-input-feild-font-size) !important;
    min-height: var(--ost-theme-form-control-height) !important;
    color: var(--ost-input-text-color) !important;
    background: var(--ost-input-bg-color);
    border: 1px solid var(--ost-theme-forecolor-border) !important;
    border-radius: var(--ost-theme-border-radius-standard);
    overflow: hidden;
    /* padding: 0 50px 0 0px !important; */
}

.ost-main-login-page  span.k-widget.form-control .k-input {
    border-width: 0px !important
}

.ost-theme-portal-login-page-main  .form-group.form-md-line-input input.form-control {
    /* border: 1px solid var(--ost-footer-bg-color); */
    font-family: var(--ost-font-family) !important;
    font-weight: var(--ost-font-weight-400) !important;
    font-size: var(--ost-input-feild-font-size) !important;
    min-height: var(--ost-theme-form-control-height) !important;
    color: var(--ost-input-text-color) !important;
    background: var(--ost-input-bg-color) !important;
    border: 1px solid var(--ost-theme-forecolor-border) !important;
    border-radius: var(--ost-theme-border-radius-standard) !important;
    padding: 0 8px !important;
}

.ost-main-login-page  .form-group.form-md-line-input.form-md-floating-label .form-control~label {
    top: -3px !important;
    bottom: inherit;
    color: var(--ost-lable-color) !important;
    font-size: var(--ost-fs-13) !important;
    font-weight: var(--ost-font-weight-500);
    border-width: 0px !important;
}

.ost-main-login-page  .form-group.form-md-line-input.form-md-floating-label .form-control~label:after {
    content: none !important;
}

.ost-main-login-page .ost-form-signin .form-group.form-md-line-input input.form-control:hover,
.ost-main-login-page .ost-form-signin .form-group.form-md-line-input input.form-control:focus {
    border-color: var(--ost-primary-second) !important;
}

.ost-main-login-page .ost-form-signin .form-group.form-md-line-input input.form-control:focus {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: 0 0 0 0.2rem #009ef747 !important;
    border-color: var(--ost-primary-second) !important;
}
.ost-main-login-page  .k-popup {
   
    border-color: var(--ost-border-color);
    color: var(--ost-common-text-black-color);
    background-color: var(--ost-modal-background-color) !important;
}
.ost-main-login-page  .k-nodata {
    min-height: 138px;
    width: 100%;
    display: table;
    text-transform: uppercase;
    font-size: .85em;
    font-weight: 500;
}
.ost-login-pge-left, .ost-login-pge-right {
    height: 100% !important;
}
.ost-theme-portal-login-page-main {
    overflow: hidden;
}
.ost-theme-portal-login-page-main .ost-login-pge-right {
    overflow: auto;
    height: 100%;
}
.ost-theme-portal-login-page-main .ost-login-pge-right {
   
    padding: 20px;
}
.ost-main-login-page label , body.ost-main-login-page, .ost-main-login-page h1, .ost-main-login-page h2, .ost-main-login-page h3, .ost-main-login-page h4, .ost-main-login-page h5, .ost-main-login-page h6, .ost-main-login-page p, .ost-main-login-page li, .ost-main-login-page button, body.ost-main-login-page div, .ost-theme-portal-login-page-main .login_fright span, .ost-theme-portal-login-page-main .login_fright span a, .ost-theme-portal-login-page-main .portlet-body.form .md-checkbox label, #login_container .ost-theme-portal-login-page-main h1{
    font-family: var(--ost-font-family) !important;
}
div#divremember, .ost-theme-portal-login-page-main .login_fright span a {
    font-weight: 400;
}