@font-face {
    font-family                 : "Orbitron";
    src                         : url("../font/orbitron/Orbitron.woff2") format("woff2");
    font-weight                 : 400 500;
    font-style                  : normal;
    font-display                : swap;
    unicode-range               : U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family                 : "Roboto";
    src                         : local(Roboto Regular), url("../font/roboto/Roboto-Regular.ttf") format("truetype");
    font-weight                 : 200 700;
    font-display                : swap;
}
@font-face {
    font-family                 : "Comfortaa";
    src                         : url("../font/comfortaa/Comfortaa-Regular.ttf") format("truetype"), url("../font/comfortaa/Comfortaa-Regular.woff2") format("woff2"), url("../font/comfortaa/Comfortaa-Regular.woff") format("woff");
    font-weight                 : 200 700;
    font-style                  : normal;
    font-display                : swap;
}
@font-face {
    font-family                 : 'Material Symbols Outlined';
    font-style                  : normal;
    font-weight                 : 200 700;
    font-display                : block;
    src                         : url("../font/google/material-symbols.ttf") format('truetype');
}
@font-face {
    font-family                 : 'Material Symbols Filled';
    font-style                  : normal;
    font-weight                 : 200 700;
    font-display                : block;
    src                         : url("../font/google/material-symbols-filled.ttf") format('truetype');
}

.material-symbols-outlined {
  font-family                       : 'Material Symbols Outlined';
  font-weight                       : normal;
  font-style                        : normal;
  font-size                         : 24px;
  line-height                       : 1;
  letter-spacing                    : normal;
  text-transform                    : none;
  display                           : inline-block;
  white-space                       : nowrap;
  word-wrap                         : normal;
  direction                         : ltr;
  -webkit-font-feature-settings     : 'liga';
  -webkit-font-smoothing            : antialiased;
  font-variation-settings           :  'FILL' 0,  'wght' 400,  'GRAD' 0,  'opsz' 24;
}
.material-symbols-filled {
  font-family                       : 'Material Symbols Filled';
  font-weight                       : normal;
  font-style                        : normal;
  font-size                         : 24px;
  line-height                       : 1;
  letter-spacing                    : normal;
  text-transform                    : none;
  display                           : inline-block;
  white-space                       : nowrap;
  word-wrap                         : normal;
  direction                         : ltr;
  -webkit-font-feature-settings     : 'liga';
  -webkit-font-smoothing            : antialiased;
  font-variation-settings           :  'FILL' 1,  'wght' 400,  'GRAD' 0,  'opsz' 24;
}

/*Plotly.js override*/
.js-plotly-plot .main-svg {
    background: transparent !important;
}

.js-plotly-plot .xgrid,
.js-plotly-plot .ygrid {
    stroke: var(--main-disabled-color) !important;
}

.js-plotly-plot .legend rect.bg {
    fill: transparent !important;
    stroke: var(--main-text-color) !important;
}

.modebar-group {
    background: transparent !important;
    box-shadow: none !important;
}

/* Plotly tooltip text color override - Tüm Plotly grafikleri için */
.js-plotly-plot .hovertext,
.js-plotly-plot .hoverlayer .hovertext,
.js-plotly-plot .hoverlayer text,
.js-plotly-plot .hoverlayer .hovertext text,
.js-plotly-plot .hoverlayer .hovertext tspan,
.plotly .hovertext,
.plotly .hoverlayer .hovertext,
.plotly .hoverlayer text,
.plotly .hoverlayer .hovertext text,
.plotly .hoverlayer .hovertext tspan {
    fill: var(--main-text-color) !important;
    color: var(--main-text-color) !important;
}

/* Plotly tooltip background ve border */
.js-plotly-plot .hoverlayer .hovertext,
.plotly .hoverlayer .hovertext {
    background-color: var(--tooltip-bg) !important;
    border: 1px solid var(--main-border-color) !important;
}


/* Tarayici Autofill Stilleri */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
.dx-texteditor-input:-webkit-autofill,
.dx-texteditor-input:-webkit-autofill:hover,
.dx-texteditor-input:-webkit-autofill:focus,
.dx-texteditor-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: var(--main-text-color) !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    caret-color: var(--main-text-color) !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Firefox için Autofill Stilleri */
input:autofill,
.dx-texteditor-input:autofill {
  background-color: transparent !important;
  color: var(--main-text-color) !important;
}

html
{
    height                  : 100%;
    width                   : 100%;
    padding                 : 0;
    margin                  : 0;
    text-rendering          : optimizeLegibility !important;
    -webkit-font-smoothing  : antialiased !important;
    overflow                : hidden;
    font-family: 'Roboto', sans-serif;
    color                   : var(--main-text-color);
    background-color        : var(--main-bg-color);
}
body
{
    width                   : 100%;
    height                  : 100%;
    overflow                : hidden;
    padding                 : 0;
    margin                  : 0;
    color                   : var(--main-text-color);
    background-color        : var(--main-bg-color);
}
.application {
    width                   : 100%;
    height                  : 100%;
    background-color        : var(--primary-workspace-color);
}

.fullSize
{
    width                   : 100%;
    height                  : 100%;
}
.file-list-page
{
    width                   : 100%;
    height                  : 100%;
}
.centeredContents
{
    display                 : grid;
    place-items             : center;
}
.rounded
{
    border-radius               : 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
}
.rounded-6
{
    border-radius               : 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px;
}
.rounded-8
{
    border-radius               : 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;
}
.card
{
    box-shadow                  : 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); -moz-box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
    border-radius               : 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
    /*background-color            : var(--main-bg-color);*/
}
.card-4
{
    box-shadow                  : var(--glass-shadow-card); -webkit-box-shadow: var(--glass-shadow-card); -moz-box-shadow: var(--glass-shadow-card);
    border-radius               : 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
    background-color            : var(--glass-bg-card);
    backdrop-filter             : blur(var(--glass-blur-card));
    -webkit-backdrop-filter     : blur(var(--glass-blur-card));
    border                      : 1px solid var(--glass-border);
}
.card-6
{
    box-shadow                  : var(--glass-shadow-card); -webkit-box-shadow: var(--glass-shadow-card); -moz-box-shadow: var(--glass-shadow-card);
    border-radius               : 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px;
    background-color            : var(--glass-bg-card);
    backdrop-filter             : blur(var(--glass-blur-card));
    -webkit-backdrop-filter     : blur(var(--glass-blur-card));
    border                      : 1px solid var(--glass-border);
}

.card-8
{
    box-shadow                  : var(--glass-shadow-card); -webkit-box-shadow: var(--glass-shadow-card); -moz-box-shadow: var(--glass-shadow-card);
    border-radius               : 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;
    background-color            : var(--glass-bg-card);
    backdrop-filter             : blur(var(--glass-blur-card));
    -webkit-backdrop-filter     : blur(var(--glass-blur-card));
    border                      : 1px solid var(--glass-border);
}

*,
*::before,
*::after {
    box-sizing : border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
}