/* normalization styles */
*,
*:before,
*:after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

*:before,
*:after {
     content: '';
     display: block;
     position: absolute;
}

html,
body {
     margin: 0;
     padding: 0;
     width: 100%;
     height: 100%;
}

/* theme styles */
html {
     /* Primary */
     --p-color: #344955;
     --pd-color: #232F34;
     --pdd-color: rgb(22, 29, 32);
     --pl-color: #4A6572;
     --pll-color: rgb(110, 140, 155);
     --on-p-color: #e8eef1;
     --on-pd-color: rgb(202, 213, 218);
     --on-pdd-color: rgb(202, 213, 218);
     --on-pl-color: rgb(187, 187, 187);
     --on-pll-color: rgb(255, 255, 255);

     /* Accent */
     --a-color: #F9AA33;
     --ad-color: #E89313;
     --add-color: rgb(194, 123, 18);
     --al-color: #FFCA55;
     --all-color : rgb(253, 215, 133);
     --on-a-color: rgb(32, 31, 30);
     --on-ad-color: rgb(2, 2, 2);
     --on-add-color: rgb(0, 0, 0);
     --on-al-color: rgb(37, 34, 27);
     --on-al-color: rgb(58, 54, 47);

     /* Semantic */
     --success-color:rgb(92, 216, 133);
     --warning-color:rgb(238, 133, 91);
     --error-color:rgb(250, 52, 26);
     --on-success-color:rgb(28, 29, 28);
     --on-warning-color:rgb(53, 48, 46);
     --on-error-color:rgb(248, 240, 239);

     /* Neutral */
     --n-color:rgb(105, 109, 110);
     --nd-color:rgb(71, 74, 75);
     --nl-color:rgb(173, 179, 180);

     /* Background */
     --b-color:rgb(255, 255, 255);
     --s-color:rgb(248, 240, 239);


     /* Data */
     --cat-1-color:#2F8DFA;
     --cat-2-color:#1FD0BF;
     --cat-3-color:#EB648B;
     --cat-4-color:#F8C753;
     --cat-5-color:#EB7E30;
     --cat-6-color:#A93790;
     --cat-7-color:#049587;
     --cat-8-color:#1553B6;
     --cat-9-color:#55008C;
     --cat-10-color:#8B572A;

     --seq-1-color:#DCEDC8;
     --seq-2-color:#B2DDCC;
     --seq-3-color:#75C6D1;
     --seq-4-color:#42B3D5;
     --seq-5-color:#3993C2;
     --seq-6-color:#3073AE;
     --seq-7-color:#27539B;
     --seq-8-color:#1E3388;
     --seq-9-color:#171E6D;
     --seq-10-color:#10154C;

     --pol-1-color:#D5001A;
     --pol-2-color:#FF6A00;
     --pol-3-color:#B30949;
     --pol-4-color:#FFD972;
     --pol-5-color:#FFF5DA;
     --pol-6-color:#74135B;
     --pol-7-color:#B2DDCC;
     --pol-8-color:#42B3D5;
     --pol-9-color:#27539B;
     --pol-10-color:#182276;

    /* Typography */
    /* Font families */
    --font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    /* Font sizes */
    --font-size-xxs: .75rem;
    --font-size-xs: .8125rem;
    --font-size-s: .875rem;
    --font-size-m: 1rem;
    --font-size-l: 1.125rem;
    --font-size-xl: 1.375rem;
    --font-size-xxl: 1.75rem;
    --font-size-xxxl: 2.5rem;
    /* Line heights */
    --line-height-xs: 1.25;
    --line-height-s: 1.375;
    --line-height-m: 1.625;

    /* light */
    /* background */
    --light-1-background: #FFFFFF;
    --light-2-background: #F5F6FA;
    --light-3-background: #EDEDED;
    --light-4-background: #F0FFF0;
    --light-5-background: #B0B3B6;
    --light-6-background: #F3F3F3;
    --light-7-background: #CCCCCC;
    --light-8-background: #007ADF;
    --light-9-background: #EAEBF0;
    --light-10-background: #1E87F0;
    --light-11-background: #1D9BC9;
    --light-12-background: #0792C5;
    /* text */
    --light-1-text: #FFFFFF;
    --light-2-text: #00D8FF;
    --light-3-text: #999999;
    /* border */
    --light-1-border: #99D2E7;
    --light-2-border: #1D9BC9;
    --light-3-border: #FFFFFF;

    /* dark */
    /* background */
    --dark-1-background: #4E686D;
    --dark-2-background: #23404C;
    --dark-3-background: #373E48;
    --dark-4-background: #3F4753;
    --dark-5-background: #344955;
    --dark-6-background: #353F4D;
    --dark-7-background: #898C91;
    --dark-8-background: #39404B;
    --dark-9-background: #1E3843;
    --dark-10-background: #363F4C;
    --dark-11-background: #656C75;
    /* text */
    --dark-1-text: #80828C;
    --dark-2-text: #000000;
    --dark-3-text: #B0B3B6;
    --dark-4-text: #363F4C;
    --dark-5-text: #4E686D;
    --dark-6-text: #4F4F4F;
    --dark-7-text: #B8CCE0;
    --dark-8-text: #818181;
    --dark-9-text: #C8C6C6;
    /* border */
    --dark-1-border: #4E686D;

    /* mv-header */
    --mv-header-height: 66px;
    --mv-header-shadow: 0 2px 15px 0 rgba(0,0,0,0.2);
    --mv-header-margin-left: 0;
    --mv-header-margin-right: 0;
    --mv-header-margin-bottom: 1px;
    --mv-header-item-padding: 10px;
    --mv-header-light-background: var(--light-6-background);
    --mv-header-item-light-color: var(--dark-3-text);
    --mv-header-dark-background: var(--dark-3-background);
    --mv-header-item-dark-color: var(--dark-3-text);

    /* mv-footer */
    --mv-footer-height: 40px;
    --mv-footer-shadow: 0 5px 10px 0 rgba(7,17,26,0.2);
    --mv-footer-margin-top: 1px;
    --mv-footer-margin-left: 0;
    --mv-footer-margin-right: 0;
    --mv-footer-item-padding: 10px;
    --mv-footer-light-background: var(--light-6-background);
    --mv-footer-item-light-color: var(--dark-3-text);
    --mv-footer-dark-background: var(--dark-3-background);
    --mv-footer-item-dark-color: var(--dark-3-text);

    /* mv-menu */
    --mv-menu-light-background: var(--light-1-background);
    --mv-menu-hover-light-background: var(--light-4-background);
    --mv-dropdown-level-width: 265px;
    --mv-dropdown-level-height: 95px;
    --mv-dropdown-sublevel-width: 198px;
    --mv-dropdown-sublevel-height: 41px;
    --mv-dropdown-sublevel-position-top: 100px;
    --mv-dropdown-sublevel-position-left: 0px;
    --mv-menu-dropdown-dark-background: var(--dark-4-background);
    --mv-menu-dropdown-hover-dark-background: var(--dark-6-background);
    --mv-menu-dropdown-light-background: var(--light-1-background);
    --mv-menu-dropdown-hover-light-background: var(--light-4-background);
    --mv-notification-sublevel-height: 400px;
    --mv-notification-sublevel-width: 756px;
    --mv-notification-level-size: 48px;
    --mv-notification-sublevel-position-top: 80px;
    --mv-notification-sublevel-position-left: -355px;
    --mv-menu-notification-dark-background: var(--dark-4-background);
    --mv-menu-notification-button-dark-background: var(--dark-4-background);
    --mv-menu-notification-button-hover-dark-background: var(--dark-6-background);
    --mv-menu-notification-menu-dark-background: var(--dark-4-background);
    --mv-menu-notification-light-background: var(--light-1-background);
    --mv-menu-notification-button-light-background: var(--light-1-background);
    --mv-menu-notification-button-hover-light-background: var(--light-4-background);
    --mv-menu-notification-menu-light-background: var(--light-1-background);

    /* mv-menu-panel */
    --mv-menu-panel-width: 330px;
    --mv-menu-panel-header-height: 66px;
    --mv-menu-panel-item-height: 40px;
    --mv-menu-panel-item-padding: 20px;
    --mv-menu-panel-shadow: 0 0 16px 1px rgba(151, 156, 163, 0.35);
    --mv-menu-panel-header-dark-color: var(--light-1-text);
    --mv-menu-panel-header-dark-background: linear-gradient(45deg, rgba(232, 179, 56, 1) 0%, rgba(255, 150, 0, 1) 100%);
    --mv-menu-panel-item-dark-color: var(--light-1-text);
    --mv-menu-panel-dark-background: linear-gradient(180deg, rgba(63, 71, 83, 1) 0%, rgba(26, 30, 35, 1) 100%);
    --mv-menu-panel-selected-dark-highlight: rgba(26, 30, 35, 0.6);
    --mv-menu-panel-disabled-dark-color: var(--dark-7-background);
    --mv-menu-panel-hover-dark-color: var(--light-2-text);
    --mv-menu-panel-hover-dark-background: rgba(26, 30, 35, 0.4);
    --mv-menu-panel-header-light-color: var(--dark-1-text);
    --mv-menu-panel-header-light-background: var(--light-4-background);
    --mv-menu-panel-item-light-color: var(--light-1-text);
    --mv-menu-panel-light-background: var(--light-7-background);
    --mv-menu-panel-selected-light-highlight: var(--pl-color);
    --mv-menu-panel-disabled-light-color: #898C91;
    --mv-menu-panel-hover-light-color: var(--light-2-text);
    --mv-menu-panel-hover-light-background: rgba(26, 30, 35, 0.4);

    /* mv-button */
    --mv-button-circle-button-size: 55px;
    --mv-button-margin: 5px;
    --mv-button-padding: 16px 59px;
    --mv-button-min-width: 120px;
    --mv-button-rounded-radius: 50px;
    --mv-button-dark-background: var(--dark-1-background);
    --mv-button-hover-dark-background: var(--dark-2-background);

    /* mv-table */
    --table-row-height: 66px;
    --header-font-family: Arial;
    --mv-table-head-light-background: var(--light-2-background);
    --mv-table-body-light-background: var(--light-1-background);
    --mv-table-hover-light-background: var(--light-3-background);
    --mv-table-head-dark-background: var(--dark-2-background);
    --mv-table-body-dark-background: var(--dark-3-background);
    --mv-table-hover-dark-background: var(--dark-1-background);

    /* mv-pagination */
    --pagination-group-top-margin: 10px;
    --pagination-button-font-weight: normal;
    --pagination-button-font-weight-large: bold;
    --mv-pagination-light-background: var(--light-9-background);
    --mv-pagination-dark-background: #3999C1;
    --mv-pagination-selected-light-background: #008FC3;
    --mv-pagination-selected-dark-background: var(--dark-2-background);
    --mv-pagination-light-color: var(--dark-1-text);
    --mv-pagination-dark-color: var(--light-1-text);
    --mv-pagination-hover-light-background: var(--light-1-background);
    --mv-pagination-hover-dark-background: #007FAD;

    /* mv-toggle */
    --mv-toggle-label-font-family: var(--font-family);
    --mv-toggle-custom-size: 100px;
    --mv-toggle-not-checked-light-background: var(--light-7-background);
    --mv-toggle-checked-light-background: #2196F3;
    --mv-toggle-slider-light-background: var(--light-1-background);
    --mv-toggle-not-checked-dark-background: var(--light-7-background);
    --mv-toggle-checked-dark-background: #48c9c4;
    --mv-toggle-slider-dark-background: var(--dark-4-background);

    /* mv-tooltip */
    --mv-tooltip-font-family: var(--font-family);
    --mv-tooltip-height: 29px;
    --mv-tooltip-border-radius: 5px;
    --mv-tooltip-background: var(--dark-10-background);
    --mv-tooltip-color: var(--light-1-text);
    --mv-tooltip-light-background: var(--light-1-background);
    --mv-tooltip-light-color: var(--dark-4-text);

    /* mv-tab */
    --mv-tab-header-height: 71px;
    --mv-tab-header-border-radius: 5px;
    --mv-tab-header-dark-background: #DFE7EE;
    --mv-tab-header-active-dark-background: radial-gradient(circle , #4E686D 0%, #00ec76 180%);
    --mv-tab-header-first-active-dark-background: linear-gradient(to right, #4E686D 0%, #00ec76 180%);
    --mv-tab-header-last-active-dark-background: linear-gradient(to left, #4E686D 0%, #00ec76 180%);
    --mv-tab-header-border-dark-color: #99D2E7;
    --mv-tab-header-dark-color: #67AFD3;
    --mv-tab-header-active-dark-color: #FFFFFF;
    --mv-tab-header-light-background: #DFE7EE;
    --mv-tab-header-active-light-background: radial-gradient(circle , var(--light-8-background) 0%, #00ec76 180%);
    --mv-tab-header-first-active-light-background: linear-gradient(to right, var(--light-8-background) 0%, #00ec76 180%);
    --mv-tab-header-last-active-light-background: linear-gradient(to left, var(--light-8-background) 0%, #00ec76 180%);
    --mv-tab-header-border-light-color: var(--light-1-border);
    --mv-tab-header-light-color: #67AFD3;
    --mv-tab-header-active-light-color: var(--light-1-background);
    --mv-tab-rounded-height: 51px;
    --mv-tab-rounded-border-radius: 25px;
    --mv-tab-rounded-dark-background: #FFFFFF;
    --mv-tab-rounded-active-dark-background: var(--dark-1-background);
    --mv-tab-rounded-dark-color: var(--dark-1-background);
    --mv-tab-rounded-active-dark-color: var(--light-1-text);
    --mv-tab-rounded-light-background: var(--light-1-background);
    --mv-tab-rounded-active-light-background: #007ADF;
    --mv-tab-rounded-light-color: var(--dark-5-text);
    --mv-tab-rounded-active-light-color: var(--light-1-background);
    --mv-tab-icon-size: 29px;
    --mv-tab-icon-border-radius: 5px;
    --mv-tab-icon-dark-background: #FFFFFF;
    --mv-tab-icon-active-dark-background: var(--dark-1-background);
    --mv-tab-icon-dark-color: var(--dark-1-background);
    --mv-tab-icon-active-dark-color: var(--light-1-text);
    --mv-tab-icon-light-background: var(--light-1-background);
    --mv-tab-icon-active-light-background: var(--light-8-background);
    --mv-tab-icon-light-color: var(--light-8-background);
    --mv-tab-icon-active-light-color: var(--light-1-background);

    /* mv-select */
    --mv-select-font-family: var(--font-family);
    --mv-select-color: #777;
    --mv-select-width: 200px;
    --mv-select-input-padding: 4px;
    --mv-select-border: 1px solid #4e686d;
    --mv-select-border-radius: 5px;
    --mv-select-dropdown-icon-size: calc(var(--font-size-m) * 0.75);
    --mv-select-dropdown-icon-button-color: var(--mv-select-color);
    --mv-select-option-color: var(--mv-select-color);
    --mv-select-option-background: #FFFFFF;
    --mv-select-option-hover-background: #1D9BC9;
    --mv-select-option-hover-color: #FFFFFF;

    /* mv-dialog */
    --mv-dialog-max-height: 528px;
    --mv-dialog-width: 756px;
    --mv-dialog-border-radius: 5px;
    --mv-dialog-background-color: var(--light-1-background);
    --mv-dialog-dark-background: var(--dark-3-background);
    --mv-dialog-color-close-icon: #48C5B9;
    --mv-dialog-color: var(--dark-1-text);
    --mv-dialog-dark-color: var(--light-1-text);

    /* mv-breadcrumbs */
    --mv-breadcrumbs-link-decoration: underline;
    --mv-breadcrumbs-separator-margin: 0 10px;
    --mv-breadcrumbs-color: var(--dark-6-text);
    --mv-breadcrumbs-hover-color: var(--dark-7-text);
    --mv-breadcrumbs-dark-color: var(--light-1-text);
    --mv-breadcrumbs-hover-dark-color: var(--dark-7-text);

    /* mv-container */
    --mv-container-min-width: 300px;
    --mv-container-max-width: 500px;
    --mv-container-margin: 20px auto;
    --mv-container-padding: 20px;
    --mv-container-border: 1px solid #BFBFBF;
    --mv-container-background: #FFFFFF;
    --mv-container-shadow: 0 0 13px 0 rgba(42, 42, 42, 0.65);

    /* mv-calendar */
    --mv-calendar-select-max-width: 200px;
    --mv-calendar-input-width: 100%;
    --mv-calendar-input-border-input: solid 1px var(--dark-1-border);
    --mv-calendar-hover-background-color: #666;
    --mv-calendar-active-background-color: linear-gradient(to right, #007ADF 0%, #00ECBC 180%);
    --mv-calendar-input-light-background: var(--light-1-background);
    --mv-calendar-input-light-color: var(--dark-2-text);
    --mv-calendar-input-dark-background: var(--dark-4-background);
    --mv-calendar-input-dark-color: var(--light-1-text);
    --mv-calendar-single-light-background: var(--light-1-background);
    --mv-calendar-single-button-light-background: var(--light-5-background);
    --mv-calendar-single-light-color: var(--dark-2-text);
    --mv-calendar-single-dark-background: var(--dark-4-background);
    --mv-calendar-single-button-dark-background: var(--dark-8-background);
    --mv-calendar-single-dark-color: var(--light-1-text);

    /* mv-radio */
    --mv-radio-padding-left: 35px;
    --mv-radio-margin-bottom: 12px;
    --mv-radio-radio-height: 18px;
    --mv-radio-radio-width: 18px;
    --mv-radio-light-background-color: var(--light-1-background);
    --mv-radio-light-border: 1px solid var(--dark-1-border);
    --mv-radio-light-color: var(--dark-8-text);
    --mv-radio-light-hover-background-color: var(--light-1-background);
    --mv-radio-light-hover-border: 1px solid var(--light-2-border);
    --mv-radio-light-checked-background-color: var(--light-1-background);
    --mv-radio-light-checkmark-background-color: var(--light-11-background);
    --mv-radio-dark-color: var(--light-1-text);
    --mv-radio-dark-background-color: var(--dark-4-background);
    --mv-radio-dark-border: 1px solid var(--light-3-border);
    --mv-radio-dark-hover-background-color: var(--dark-11-background);
    --mv-radio-dark-hover-border: 1px solid var(--light-3-border);
    --mv-radio-dark-checked-background-color: var(--dark-4-background);
    --mv-radio-dark-checkmark-background-color: var(--light-1-background);

    /* mv-toast */
    --mv-toast-dark-background: var(--dark-1-background);
    --mv-toast-hover-dark-color: var(--dark-2-background);

    /* mv-dropdown */
    --mv-dropdown-trigger-height: 26px;
    --mv-dropdown-trigger-padding: 5px;
    --mv-dropdown-min-width: 188px;
    --mv-dropdown-max-width: 300px;
    --mv-dropdown-border: 1px solid var(--dark-9-background);
    --mv-dropdown-background: var(--dark-4-background);
    --mv-dropdown-color: var(--light-3-text);
    --mv-dropdown-header-color: var(--light-1-text);
    --mv-dropdown-light-border: 1px solid var(--dark-1-border);
    --mv-dropdown-light-background: var(--light-1-background);
    --mv-dropdown-light-color: var(--dark-1-text);
    --mv-dropdown-header-light-color: var(--dark-2-text);

    /* mv-tags */
    --mv-tags-color: var(--dark-8-text);
    --mv-tags-min-width: auto;
    --mv-tags-max-width: auto;
    --mv-tags-margin: 0;
    --mv-tags-border: 1px solid var(--dark-1-border);
    --mv-tags-active-border: 1px solid var(--light-2-border);
    --mv-tags-placeholder-color: var(--dark-9-text);
    --mv-tags-active-box-shadow: inset 0 0 9px 0 rgba(29, 155, 201, 0.3);
    --mv-tags-error-border: 1px solid rgba(247, 112, 98, 1);
    --mv-tags-error-box-shadow: inset 0 0 9px 0 rgba(229, 47, 47, 0.3);
    --mv-tags-light-background: var(--light-10-background);
    --mv-tags-dark-background: var(--dark-3-background);

    /* mv-textarea */
    --mv-textarea-color: var(--dark-8-text);
    --mv-textarea-width: 620px;
    --mv-textarea-height: 153px;
    --mv-textarea-margin: 0;
    --mv-textarea-border: 1px solid var(--dark-1-border);
    --mv-textarea-active-border: 1px solid var(--light-2-border);
    --mv-textarea-placeholder-color: var(--dark-1-text);
    --mv-textarea-active-box-shadow: inset 0 0 9px 0 rgba(29, 155, 201, 0.3);
    --mv-textarea-error-border: 1px solid rgba(247, 112, 98, 1);
    --mv-textarea-error-box-shadow: inset 0 0 9px 0 rgba(229, 47, 47, 0.3);

    /* mv-slider */
    --mv-slider-track-light-background: linear-gradient(to left, #F01F14, #00F2FE);
    --mv-slider-light-color: var(--dark-8-text);
    --mv-slider-thumb-light-background: var(--light-1-background);
    --mv-slider-tooltip-dark-border: #00F2FE;

    /* mv-input */
    --mv-input-color: var(--dark-8-text);
    --mv-input-min-width: auto;
    --mv-input-max-width: auto;
    --mv-input-margin: 0;
    --mv-input-border: 1px solid var(--dark-1-border);
    --mv-input-active-border: 1px solid var(--light-2-border);
    --mv-input-placeholder-color: var(--dark-9-text);
    --mv-input-active-box-shadow: inset 0 0 9px 0 rgba(29, 155, 201, 0.3);
    --mv-input-error-border: 1px solid rgba(247, 112, 98, 1);
    --mv-input-error-box-shadow: inset 0 0 9px 0 rgba(229, 47, 47, 0.3);

    /* mv-checkbox */
    --mv-checkbox-border-color: var(--dark-1-border);
    --mv-checkbox-label-color: var(--dark-8-text);
    --mv-checkbox-checked-background: var(--light-12-background);
    --mv-checkbox-hover-border-color: var(--light-2-border);
    --mv-checkbox-border-dark-color: var(--light-3-border);
    --mv-checkbox-label-dark-color: var(--light-1-text);
    --mv-checkbox-checked-dark-background: var(--light-1-background);
    --mv-checkbox-hover-border-dark-color: var(--light-3-border);
}