/* @import url("https://cdn.datatables.net/2.1.3/css/dataTables.dataTables.min.css"rel="stylesheet"); */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css");
/* @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700&display=swap"); */
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css");
/*@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");*/

@import "../jquery-ui.css";
@import "css/style-jquery-ui.css";
@import "../jquery.fileupload-ui.css";
@import "../ck-editor.css";
@import "../glyphicons.css";
@import "../bootstrap.iconpro.css";
@import "css/style-bootstrap.css";
@import "css/style-content.css";
@import "css/style-wizard.css";
@import "css/style-button.css";
@import "css/style-dropdown.css";
@import "css/style-form.css";
@import "css/style-payment.css";
@import "css/style-login.css";
@import "css/style-header.css";
@import "css/style-global.css";
@import "css/style-glyphicon.css";
@import "css/style-menu.css";
@import "css/style-panel.css";
@import "css/style-footer.css";

/* Inter */
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {

    /* ============================================================
       QUICK START — RESKIN THE WHOLE UI FROM HERE
       Change these values first. Everything else is derived from them.
    ============================================================ */

    --primary-color:            #063393;   /* Main brand color — buttons, links,  */
    --primary-color-dark:       #063393;   /* Darker shade — hovers, borders */
    --primary-color-light:      #063393; /* Tinted shade — subtle backgrounds */
	--primary-accent-color:		#008c8d; /* Accents */

	--bs-link-color-rgb:        54, 106, 236;  /* Hyperlink color (RGB of --primary-color) */
	--bs-link-hover-color-rgb:  54, 106, 236;  /* Hyperlink hover color */

	--color-white: #ffffff;
	--text-warning:#c3940d;

    --header-bg-color:          var(--color-white);   /* Top header background */
    --nav-bg-color:             #F7F7F7;   /* Sidebar / navbar background */
	--nav-border-color:			#EFEFEF;
	
    /* ============================================================
       IMAGES
    ============================================================ */

    --header-image: url("../images/NYMHCA-logo-ho-p-rgb.svg");
	--header-image-width:min(90vw, 300px);
	--header-image-height:300px;
	--header-image-href-url:"https://nymhca.org";
	
    --home-image: url("images/company-logo.svg");

    /* ============================================================
       TYPOGRAPHY
    ============================================================ */



    font-size: 16px;
    --bs-body-font-family:      "Inter", sans-serif;
    --bs-btn-font-family:       "Inter", sans-serif;
    --bs-body-font-size:        1rem;
	
	/* Font Awesome Fonts */
    --fa-style-family: "Inter", sans-serif, "FontAwesome";


    /* ============================================================
       NAVIGATION MENUS
    ============================================================ */

    --nav-text-bg-color:        var(--primary-color-light);  /* Active link background */
    --nav-text-color:           #1A1A1A;                     /* Link text color */
    --nav-hover-bg-color:       var(--primary-color-light);  /* Link hover background */
    --nav-hover-text-color:     var(--color-white);                     /* Link hover text */
    --nav-icon-color:           #6C7684;                     /* Nav icon color */
    --nav-mobile-text-color:	#6C7684;
	--nav-font-family:"Inter";

    /* ============================================================
       FLYOUT SUBMENUS
    ============================================================ */

    --submenu-bg-color:         var(--color-white);
    --submenu-text-color:       #666666;
    --submenu-hover-bg-color:   var(--primary-color-light);
    --submenu-hover-text-color: var(--color-white);


    /* ============================================================
       PROFILE BUBBLES
    ============================================================ */

    --profile-bubble-bg-color:  darkgrey;
    --profile-bubble-text-color:var(--color-white);


    /* ============================================================
       BUTTONS
       Each variant has: bg, text, border, hover-bg, hover-text,
       hover-border, disabled-bg, disabled-text, disabled-border.
       Active states use color-mix() to auto-darken.
    ============================================================ */

    /* Primary */
    --btn-primary-bg-color:             var(--primary-color);
    --btn-primary-text-color:           var(--color-white);
    --btn-primary-border-color:         var(--primary-color-dark);
    --btn-primary-hover-bg-color:       var(--primary-color-dark);
    --btn-primary-hover-text-color:     var(--color-white);
    --btn-primary-hover-border-color:   var(--primary-color-dark);
    --btn-primary-disabled-bg-color:    #cccccc;
    --btn-primary-disabled-text-color:  var(--color-white);
    --btn-primary-disabled-border-color:#cccccc;

    /* Secondary (outlined style) */
    --btn-secondary-bg-color:           var(--color-white);
    --btn-secondary-text-color:         var(--primary-color);
    --btn-secondary-border-color:       var(--primary-color-dark);
    --btn-secondary-hover-bg-color:     var(--primary-color);
    --btn-secondary-hover-text-color:   var(--color-white);
    --btn-secondary-hover-border-color: var(--primary-color-dark);
    --btn-secondary-disabled-bg-color:  var(--color-white);
    --btn-secondary-disabled-text-color:#cccccc;
    --btn-secondary-disabled-border-color:#cccccc;
	
	    /* Accent */
    --btn-accent-bg-color:           var(--primary-accent-color);
    --btn-accent-text-color:         var(--color-white);
    --btn-accent-border-color:       var(--primary-accent-color);
    --btn-accent-hover-bg-color:     var(--primary-accent-color);
    --btn-accent-hover-text-color:   var(--color-white);
    --btn-accent-hover-border-color: var(--primary-color-dark);
    --btn-accent-disabled-bg-color:  var(--color-white);
    --btn-accent-disabled-text-color:#cccccc;
    --btn-accent-disabled-border-color:#cccccc;

    /* Default (alias of Secondary — override separately if needed) */
    --btn-default-bg-color:             var(--btn-secondary-bg-color);
    --btn-default-text-color:           var(--btn-secondary-text-color);
    --btn-default-border-color:         var(--btn-secondary-border-color);
    --btn-default-hover-bg-color:       var(--btn-secondary-hover-bg-color);
    --btn-default-hover-text-color:     var(--btn-secondary-hover-text-color);
    --btn-default-hover-border-color:   var(--btn-secondary-hover-border-color);
    --btn-default-disabled-bg-color:    var(--btn-secondary-disabled-bg-color);
    --btn-default-disabled-text-color:  var(--btn-secondary-disabled-text-color);
    --btn-default-disabled-border-color:var(--btn-secondary-disabled-border-color);

    /* Success */
    --btn-success-bg-color:             #28a745;
    --btn-success-text-color:           var(--color-white);
    --btn-success-border-color:         #28a745;
    --btn-success-hover-bg-color:       color-mix(in srgb, #28a745 85%, black);
    --btn-success-hover-text-color:     var(--color-white);
    --btn-success-hover-border-color:   color-mix(in srgb, #28a745 85%, black);
    --btn-success-active-bg-color:      color-mix(in srgb, #28a745 75%, black);
    --btn-success-active-text-color:    var(--color-white);
    --btn-success-active-border-color:  color-mix(in srgb, #28a745 75%, black);
    --btn-success-disabled-bg-color:    #cccccc;
    --btn-success-disabled-text-color:  var(--color-white);
    --btn-success-disabled-border-color:#cccccc;

    /* Danger */
    --btn-danger-bg-color:              #dc3545;
    --btn-danger-text-color:            var(--color-white);
    --btn-danger-border-color:          #dc3545;
    --btn-danger-hover-bg-color:        color-mix(in srgb, #dc3545 85%, black);
    --btn-danger-hover-text-color:      var(--color-white);
    --btn-danger-hover-border-color:    color-mix(in srgb, #dc3545 85%, black);
    --btn-danger-active-bg-color:       color-mix(in srgb, #dc3545 75%, black);
    --btn-danger-active-text-color:     var(--color-white);
    --btn-danger-active-border-color:   color-mix(in srgb, #dc3545 75%, black);
    --btn-danger-disabled-bg-color:     #cccccc;
    --btn-danger-disabled-text-color:   var(--color-white);
    --btn-danger-disabled-border-color: #cccccc;


    /* ============================================================
       DROPDOWNS
    ============================================================ */

    --dropdown-bg-color:            var(--color-white);
    --dropdown-text-color:          black;
    --dropdown-border-color:        black;
    --dropdown-hover-bg-color:      black;
    --dropdown-hover-text-color:    var(--color-white);
    --dropdown-focus-bg-color:      var(--color-white);
    --dropdown-focus-text-color:    black;
    --dropdown-focus-border-color:  black;
    --dropdown-disabled-bg-color:   #f7f7f7;
    --dropdown-disabled-text-color: #999999;
    --dropdown-disabled-border-color:#cccccc;

    /* ============================================================
       TOP UI HYPERLINKS
    ============================================================ */

    --topui-hyperlink-bg-color:                     var(--nav-bg-color);
    --topui-hyperlink-hover-bg-color:               var(--nav-hover-bg-color);
    --topui-hyperlink-active-bg-color:              var(--nav-text-bg-color);
    --topui-hyperlink-text-color:                   var(--nav-text-color);
    --topui-hyperlink-hover-text-color:             var(--nav-hover-text-color);
    --topui-hyperlink-active-text-color:            var(--nav-hover-text-color);
    --topui-hyperlink-active-border-bottom-color:   var(--primary-accent-color);

    /* Submenu Top UI Hyperlinks */
    --submenu-topui-hyperlink-bg-color:             var(--submenu-bg-color);
    --submenu-topui-hyperlink-hover-bg-color:       var(--submenu-hover-bg-color);
    --submenu-topui-hyperlink-text-color:           var(--submenu-text-color);
    --submenu-topui-hyperlink-hover-text-color:     var(--submenu-hover-text-color);

    /* Left Top UI Hyperlinks */
    --left-topui-hyperlink-bg-color:                    transparent;
    --left-topui-hyperlink-hover-bg-color:              var(--nav-hover-bg-color);
    --left-topui-hyperlink-active-bg-color:             var(--nav-text-bg-color);
    --left-topui-hyperlink-text-color:                  var(--nav-text-color);
    --left-topui-hyperlink-hover-text-color:            var(--nav-hover-text-color);
    --left-topui-hyperlink-active-text-color:           var(--nav-hover-text-color);
    --left-topui-hyperlink-icon-color:                  var(--nav-icon-color);
    --left-topui-hyperlink-active-border-bottom-color:  var(--primary-accent-color);

}

@media (max-width: 400px) { :root { font-size: 0.85rem; } }
@media (max-width: 350px) { :root { font-size: 0.75rem; } }

/* @import "css/style-dropdown.css"; */