/* Copyright 2013-present Software Response LLC */
/* @font-face { font-family: 'Garamond'; src: url('fonts/garamond/EBGaramond-Medium.ttf') format('ttf'); } */
/* @font-face { font-family: 'OpenSans'; src: url('fonts/opensans/OpenSans-Regular.ttf') format('ttf'); } */
/* @font-face { font-family: 'SinkinSans'; src: url('fonts/sinkinsans/SinkinSans-400Regular.otf') format('otf'); }  */
/* @font-face { font-family: 'Gotham'; src: url('fonts/gotham/Gotham-Medium.otf') format('otf'); } */
/* @font-face { font-family: 'Montserrat-Medium'; src: url('fonts/montserrat/Montserrat-Medium.ttf') format('ttf'); }  */
@font-face {
     font-family: "SegoeUI";
     src: url("../fonts/Segoe_UI.ttf") format("truetype");
}
@font-face {
     font-family: "Orbitron";
     src: url("../fonts/Orbitron-Regular.ttf") format("truetype");
}
@font-face {
     font-family: "Titillium";
     src: url("../fonts/TitilliumWeb-Regular.ttf") format("truetype");
}

/* @font-face { font-family: 'Lato'; src: url('fonts/Lato/Lato-Regular.ttf') format('ttf'); }  */

:root {
     --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

     --favicon: url("../images/favicon.png");
     --favicon-white: url("../images/favicon-white.png");
     --favicon-black: url("../images/favicon-black.png");
     --favicon-colored: url("../images/favicon-colored.png");

     --headericon: url("../images/optim-header4.png"); 

     --font-size: 1rem; /* 16px */
     --font-size-8: 0.5rem;
     --font-size-10: 0.625rem;
     --font-size-12: 0.75rem;
     --font-size-14: 0.875rem;
     --font-size-16: 1rem;
     --font-size-18: 1.125rem;
     --font-size-20: 1.25rem;
     --font-size-22: 1.375rem;
     --font-size-24: 1.5rem;
     --font-size-26: 1.625rem;
     --font-size-28: 1.75rem;
     --font-size-30: 1.875rem;
     --font-size-40: 2.5rem;

     --font-title: 1.1rem; /* Slightly larger than base font size for titles */

     --line-height: 1.4rem; /* 22px */
     --line-height-2: 1.875rem; /* 30px */

     --color-dark: #212529;
     --color-light: #f8f9fa;
     --color-active: #0a3ea6;
     --color-highlight: #ff8f23;
     --color-hover: #fbb778;
     --color-neutral: #ffffff;

     --color-active: #4CAF50;
     --color-inactive: #d9c73e;
     --color-locked:#e1952a;
     --color-deleted: #F44336;
     --color-link: #0066cc;

     --color-priority-low: #3fb950;
     --color-priority-medium: #58a6ff;
     --color-priority-high: #ffa657;
     --color-priority-critical: #f85149;

     --color-good: #3ca866;
     --color-caution: #f8bb86;
     --color-warning: #f27474;
     --color-edited: #ff8b00;
     --color-text: var(--color-dark);

     --color-level1-back:#0b2559;
     --color-level1-color: var(--color-light);
     --color-level1-border-color:#0b2559;
     --color-level1-border: 1px solid #0b2559;

     --color-level2-back:#195aba;
     --color-level2-color: var(--color-light);

     --color-level3-back:#415a77;
     --color-level3-color: var(--color-light);

     --secondary-back: transparent;
     --secondary-color: inherit;

     --body-back:#f5f9fa; /* #f4f2ee;     */
     --body-color:var(--color-dark);

     --header-back:var(--color-level1-back); 
     --header-color:var(--color-level1-color);

     --title-back:var(--color-level2-back);     
     --title-color:var(--color-level2-color);

     --subtitle-back:var(--color-level3-back);
     --subtitle-color:var(--color-light);

     /* Box */
     --box-back: #ffffff;
     --box-color: #212529;
     --box-faded: #dcdcdc;

     --box-border: 1px solid var(--color-dark);
     --box-border-bold: 1px solid #989898;
     --box-title-back:#e5e5e5;
     --box-title-color:var(--color-dark);
     --box-shadow:none;
     --box-shadow-inset: inset 0 2px 6px rgba(0,0,0,0.25);
     --box-padding: var(--padding-x2);

     /* Primary */
     --primary-back: #f7f9fc;
     --primary-back-faded: #eaecef;

     --primary-light-back: #6c7a99;
     --primary-light-color: var(--color-dark);

     --primary-text: var(--color-dark);
     --primary-text-faded: #41464b;

     --primary-back-highlight: #ff8f23;     
     --primary-back-hover: var(--color-hover);
     
     --primary-back-sub: #e0e1dd;

     --primary-border: 1px solid #989898;
     --primary-border-color: #989898;

     /* Secondary */
     
     --secondary-border: 1px solid #c7c7c7;
     --secondary-border-color: #c7c7c7;

     /* Container */
     --container-header-back: #0b2559;
     --container-header-color: var(--color-light);

     --container-title-back: #195aba;
     --container-title-color: var(--color-light);

     --container-controls-back: #e9ecf2;
     --container-controls-color: var(--color-dark);

     --message-back: #0b2559;
     --message-color: var(--color-light);

     --row-subback: rgba(0, 0, 0, 0.05);

     --submenu-back: #616264;
     --submenu-color: var(--color-light);

     --page-back: #616264;
     --page-color: var(--color-light);

     /* Menu */
     --menu-back:var(--color-level1-back);
     --menu-color:var(--color-level1-color);   
     --menu-border: var(--border);  
     --menu-border-color: var(--border-color);

     --menu-group-active: #0c2e6e;
     --menu-group-fontsize: 1rem; /* 16px */
     --menu-element-fontsize: 0.875rem; /* 14px */

     --menu-width: 0px; 
     --menu-width-full: 240px;
     --menu-width-partial: 40px;

     /* Menu Button */
     --menu-button-back: transparent;
     --menu-button-color: var(--color-light);
     --menu-button-back-hover:var(--color-hover);
     --menu-button-color-hover:var(--color-dark);
     --menu-button-back-active: var(--color-highlight);
     --menu-button-color-active: var(--color-dark);

     /* Context */
     --context-back: white;
     --context-color: var(--color-dark);
     --context-highlight: #ebeef2;
     --context-border: 1px solid #212529;
     --context-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

     /* Content */
     --content-back: transparent;
     --content-color: inherit;
     --content-left: 42px;
     --content-left-full: 188px;

     /* Loader */
     --loader-back: rgba(18, 29, 96, 0.75);
     --loader-color: var(--color-light);

     /* Backdrop */
     --backdrop-back: rgba(18, 29, 96, 0.25);
     --backdrop-color: var(--color-light);

     /* Transition */
     --transition: all 0.3s ease-in-out;
     --transition-fast: all 0.15s ease-in-out;
     --transition-speed: 0.3s;

     /* Border Main */
     --border-main: 1px solid #0b2559;
     --border-main-color: #0b2559;     
     --radius: 4px;

     /* Padding */
     --padding-desktop: 8px;
     --padding-mobile: 4px;
     --padding: 4px;
     --padding-x2: 8px;
     
     /* Margin */
     --margin-desktop: 8px;
     --margin-mobile: 4px;
     --margin: 4px;
     --margin-x2: 8px;

     /* Mobile */
     --mobile-width: calc(100vw - 50px);
     --mobile-width-full: calc(100vw - 180px);
     --mobile-width-max: 100%;
     --mobile-width-max-full: 100%;

     /* Folder */
     --folder-back: var(--box-faded);
     --folder-color: var(--color-dark);

     /* Table Header */
     --table-header-back: var(--box-faded);
     --table-header-color: var(--color-dark);

     /* Grid */
     --grid-title-back: var(--box-title-back); /*#195aba;*/
     --grid-title-color: var(--box-title-color);
     --grid-highlight-back: #cbe0ff;
     --grid-highlight-color: var(--color-dark);
     --grid-row-height: 1.5rem; /* 24px */
     --grid-button-height: 1.5rem; /* 24px */

     /* Stack */
     --stack-title-back: var(--box-title-back);
     --stack-title-color: var(--box-title-color);

     /* Scroll */
     --scroll-handle-back: #0b2559;
     --scroll-handle-hover: #195aba;
     --scroll-track-back: #eee;
     --scroll-track-hover: #eee;
     --scroll-track-active: #eee;

     --contrast-back: orange;
     --contrast-color: white;

     --row-offset-back: #f5f5f5;
     --row-offset-color: #212529;   

     /* Standard Button */
     --button-standard-back: #0052A3;
     --button-standard-color: var(--color-neutral);
     --button-standard-border: 1px solid #0b2559;
     --button-standard-hover-back: var(--color-hover);
     --button-standard-hover-color: var(--color-dark);
     --button-standard-hover-border: #0052A3;
     --button-standard-active-back: #081d45;
     --button-standard-active-color: var(--color-neutral);
     --button-standard-active-border: #0b2559;
     --button-standard-inactive-back: #E8EDF3;
     --button-standard-inactive-color: #212529;
     --button-standard-inactive-border: #0b2559;

     /* Tool Button */
     --button-tool-back: var(--color-neutral);
     --button-tool-color: #333333;
     --button-tool-border: 1px solid #989898;
     --box-button-border: 1px solid #989898;
     --box-button-border-color: #989898;

     --button-neutral-back: var(--color-neutral);
     --button-neutral-color: var(--color-dark); 
     
     --button-neutral-border: 1px solid #333333;
     --button-neutral-hover-back: var(--color-hover);
     --button-neutral-hover-color: var(--color-dark);
     --button-neutral-hover-border: 1px solid #333333;

     /* Inverted Button */
     --button-inverted-back: #ffffff;
     --button-inverted-color: #0b2559;
     --button-inverted-border: 1px solid #ffffff;

     --button-inverted-hover-back: #ffffff;
     --button-inverted-hover-color: #1660c4;
     --button-inverted-hover-border: #0b2559;

     --button-inverted-active-back: #ffffff;
     --button-inverted-active-color: #114c9a;
     --button-inverted-active-border: #0b2559;

     /* Positive Button */
     --button-positive-back: #28A745;  
     --button-positive-color: #ffffff;
     --button-positive-border: 1px solid #0b2559;

     --button-positive-hover-back: #0d2e6f;
     --button-positive-hover-color: #ffffff;
     --button-positive-hover-border: #0d2e6f;

     --button-positive-active-back: #081d45;
     --button-positive-active-color: #ffffff;
     --button-positive-active-border: 1px solid #0b2559;

     /* Negative Button */
     --button-negative-back: #C82333;
     
     --button-negative-color: #ffffff;
     --button-negative-border: 1px solid #0b2559;

     --button-negative-hover-back: #b82828;
     --button-negative-hover-color: #ffffff;
     --button-negative-hover-border: #0b2559;

     --button-negative-active-back: #a01f1f;
     --button-negative-active-color: #ffffff;
     --button-negative-active-border: 1px solid #7a1818;

     /* Caution Button */
     --button-caution-back: #FFC107;
     --button-caution-color: #ffffff;
     --button-caution-border: 1px solid #0b2559;

     --button-caution-hover-back: #baaf19;
     --button-caution-hover-color: #ffffff;
     --button-caution-hover-border: #0b2559;

     --button-caution-active-back: #baaf19;
     --button-caution-active-color: #ffffff;
     --button-caution-active-border: 1px solid #0b2559;

     /* Soft Button */
     --button-soft-back: #ededed;
     --button-soft-color: #212529;
     --button-soft-border: 1px solid #ededed;

     --button-soft-hover-back: #dedede;
     --button-soft-hover-color: #212529;
     --button-soft-hover-border: #dedede;

     --button-soft-active-back: #dedede;
     --button-soft-active-color: #212529;
     --button-soft-active-border: 1px solid #dedede;

     /* Button Info */
     --button-box-shadow: 0 0 2px 2px rgba(0,0,0,0.025);
     --button-height: 26px;
     --button-height-small: 20px;
     --button-height-large: 1.875rem;
     --button-border-radius: 8px;
     
     /* Tabs */
     --tabbar-back: #0b2559;
     --tabbar-color: white;
     --tabbar-back-hover: #fbb778;
     --tabbar-color-hover: var(--color-dark);
     --tabbar-back-active: #ff8f23;     
     --tabbar-color-active: var(--color-dark);
     --tabbar-border: transparent;
     
     /* Tab Wrapper */
     --tab-wrapper-back: transparent;
     --tab-wrapper-color: inherit;
     --tab-height:1.875rem;

     /* Tab */
     --tab-back:var(--color-neutral);
     --tab-color:var(--color-dark);
     --tab-border:1px solid var(--color-dark);
     --tab-hover-back: var(--color-hover);
     --tab-hover-color:var(--color-dark);
     --tab-hover-border:1px solid var(--color-dark);
     --tab-active-back:#ff8f23;
     --tab-active-color:var(--color-dark);
     --tab-active-border:1px solid var(--color-dark);

     --tab-active-height:1.875rem;
     --tab-border-radius: 8px;      

     /* Input */
     --input-back: #f3f3f3;
     --input-color: var(--color-dark);
     --input-border: 1px solid #b5b5b5;
     --input-active: #efefef;
     --input-border-hover: 1px solid #999999;

     --input-disabled-back: #e6e6e6;
     --input-disabled-color: var(--color-dark);
     
     --input-border-radius: var(--radius);

     --input-height: 1.875rem; /* rem */
     --input-height-disabled: 1.875rem;
     --input-height-x2: 2.5rem;

     /* Input Check */
     --input-check-back: var(--input-back);
     --input-check-color: var(--color-dark);

     --input-check-slider: 22px;

     --input-check-hover-back: var(--color-hover);
     --input-check-hover-color: var(--color-dark);
     --input-check-hover-border: var(--color-dark);

     --input-check-checked-back: #195aba;
     --input-check-checked-color: var(--color-light);
     --input-check-disabled: #b3b3b3;

     --input-check-width: 48px;
     --input-check-height: 24px;

     /* Input Toggle */
     --input-toggle-switch-height: 1.5em;
     --input-toggle-switch-width: 3em;
     --input-toggle-switch-size: 1.28em;

     --input-toggle-switch-height-small: 1.25em;
     --input-toggle-switch-width-small: 2.5em;
     --input-toggle-switch-size-small: 1em;

     /* Input Colors */
     --input-color-blue: #195aba;
     --input-color-red: #ba1919;
     --input-color-green: #19ba3c;
     --input-color-yellow: #d1ce0c;
     --input-color-cyan: #19b5ba;
     --input-color-orange:#ff8f23;

     --input-color-caution: #ff8f23;
     --input-border-caution: 1px solid #ff8f23;
     --input-color-error: #d93030;
     --input-border-error: 1px solid #d93030;

     --input-button-height: 24px;
     --textarea-min-height: 60px;
     --textarea-line-height: 20px;

     /* Percent */
     --percent-back: var(--context-back);
     --percent-color: var(--context-color);
     --percent-track: #989898; 
     --percent-progress: var(--color-level2-back);

     --width-min: 320px;
     --width-max: 1200px;  
}