html {
  font-size: 16px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px; /* use this for rem responsive calc, while body tag for default size */
  }
}
html {
  position: relative;
  min-height: 100%;
}

/*$mulberry: #53354A;*/
/*CSS variables*/
:root, [data-mode=light] {
  /*main settings*/
  --font-family-default: var(--font-family-poppins);
  --theme-color: var(--crimson-blaze);
  --text-color-main: var(--black);
  --text-color-subdued: var(--grey-dark);
  --background-color-body: var(--cotton-cloud);
  --menu-selected-color: var(--whispering-blush);
  --menu-selected-color-hover: var(--whispering-blush-hover);
  --primary-color: var(--black);
  --primary-color-hover: var(--black-hover);
  --primary-color-rgb: var(--rgb-black);
  --secondary-color: var(--crimson-blaze);
  --secondary-color-hover: var(--crimson-blaze-hover);
  --secondary-color-rgb: var(--rgb-crimson-blaze);
  --danger-color: var(--crimson-blaze);
  --danger-color-hover: var(--crimson-blaze-hover);
  --color-grey-dark: var(--grey-dark);
  --color-grey-medium: var(--grey-medium);
  --color-grey-light: var(--grey-light);
  /*font families*/
  --font-family-poppins: "Poppins", sans-serif;
  --font-family-urbanist: "Urbanist", sans-serif;
  --font-family-helvetica: "Helvetica", sans-serif;
  /*font sizes*/
  --font-size-medium: 14px;
  --font-size-small: 12px;
  --font-size-smaller: 11px;
  --font-size-large: 16px;
  /*line heights*/
  --line-height-default: 20px;
  --line-height-small: 16px;
  --line-height-large: 24px;
  /*font weights*/
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  /*colors*/
  --black: #212121;
  --black-hover: #373737;
  --crimson-blaze: #EF3340;
  --crimson-blaze-hover: #dc2f3b;
  --whispering-blush: #FFF0F0; /* HSV: 0, 6%, 100% */
  --whispering-blush-hover: #F5E7E7; /* HSV: 0, 6%, 96% */
  --cotton-cloud: #F8F5F5;
  --success-blue: #525DFF; /* HSV: 236, 68%, 100% */
  --success-blue-hover: #4C56EB; /* HSV: 236, 68%, 92% */
  --success-blue-light: #E9EBFF; /* HSV: 235, 9%, 100% */
  --success-blue-light-hover: #dfe1f5; /* HSV: 235, 9%, 96% */
  --success-blue-light-gradient: linear-gradient(251.02deg, #F6F7FF 56.81%, #E9EBFF 119.93%);
  --olive-green: #A4B465; /* HSV: 72, 44%, 71% */
  --olive-green-hover: #93a15a; /* HSV: 72, 44%, 63% */
  --olive-green-light: #f4f9db; /* HSV: 70, 12%, 98% */
  --olive-green-light-hover: #ebf0d3; /* HSV: 70, 12%, 94% */
  --olive-green-lighter: #fafcf2; /* HSV: 72, 4%, 99% */
  --plum-purple: #53354A;
  /*--plum-purple: #53354A;*/
  /*--midnight-onyx: #212121;*/
  --midnight-charcoal: #121A37;
  --charcoal-blue: #132050;
  --white: #FFFFFF;
  --grey-dark: #717171;
  --grey-medium: #CECECE;
  --grey-light: #EBEBEB;
  --grey-dark-bluish: #7D85AB;
  --grey-medium-bluish: #BEC4D5;
  --grey-light-bluish: #DDE0E9;
  --cotton-ball: #F0F3FF;
  --red-bud: #AB2E56;
  --red-bud-hover: #b44367;
  --crown-jewels: #966BAA;
  --tanzine: #7580E0;
  --magenta-crayon: #FF55A3;
  --jade-green: #75AEA0;
  --green-tea: #92AA6B;
  --sea-serpant: #4CC5CD;
  --exotic-intense: #B87171;
  --buttery-salmon: #FFAF9E;
  --chanterelles: #FFC56F;
  --queen-blue: #436995;
  --ayame-iris: #763A6C;
  --magenta-crayon-v2: #FF77B5;
  --sea-serpant-v2: #67CED5;
  --chanterelles-v2: #FFD18C;
  --avatar-basic: #F0F3FF;
  --rgba-hover-light: rgba(0, 0, 0, 0.08);
  --rgba-hover-lighter: rgba(0, 0, 0, 0.04);
  --rgb-black: 33, 33, 33;
  --rgb-crimson-blaze: 239, 51, 64;
  --rgb-success-blue: 82, 93, 255;
  --rgb-olive-green: 164, 180, 101;
  --rgb-grey-light-bluish: 221, 224, 233;
  --rgb-os-bg: 0,0,0;
  --vibrant-purple: #9A62F7;
  --vibrant-purple-light: #DDCCF9;
  --vibrant-purple-lighter: #ECE1FE;
  --horizon-blue-light: #A6E0F8;
  --horizon-blue-lighter: #D2F0FD;
  --aqua-ambition-light: #AFF4F4;
  --emerald-green: #18DE7E;
  --emerald-green-light: #B6EED3;
  --emerald-green-dark: #1B8C55;
  --rose-pink: #FF80C9;
  --rose-pink-light: #FAD8EC;
  --rose-pink-dark: #E653A8;
  --rose-pink-dark-hover: #E864B1;
  --mustard-yellow: #FFD455;
  --mustard-yellow-light: #FFEBAF;
  --mustard-yellow-dark: #F5B702;
  --link-color: #1E90FF;
  --link-color-hover: #1871c7;
  /*Fleet deals*/
  --midnight-blue: #28293D;
  --midnight-blue-hover: #191a26;
  --yellow-color: #E8DD00;
  /*Text code color variable*/
  --token-tag: #990055;
  --attribute-value: #0077aa;
  --token-funtion: #dd4a68;
  /*borders*/
  --border-radius-default: 8px;
  --border-radius-medium: 6px;
  --border-radius-small: 4px;
  --border-radius-smaller: 2px;
  --border-radius-round: 80px;
  /*shadows*/
  --shadow-button: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
  --shadow-button-hover: 0px 2px 16px 0px rgba(33, 43, 54, 0.08), 0px 0px 0px 1px rgba(6, 44, 82, 0.10);
  --shadow-button-pressed: 0px 2px 0px 0px rgba(0, 0, 0, 0.05) inset;
  --shadow-dropdown: 0px 0px 1px 0px rgba(0, 0, 0, 0.20), 0px 26px 80px 0px rgba(0, 0, 0, 0.20);
  --shadow-modal: 0px 0px 1px 0px rgba(0, 0, 0, 0.20), 0px 26px 80px 0px rgba(0, 0, 0, 0.20);
  --shadow-stage-header: 0px 0px 1px 0px rgba(0, 0, 0, 0.25), 0px 2px 1px 0px rgba(0, 0, 0, 0.05);
  --chart-tooltip-box-shadow: 0px 2px 16px 0px rgba(33, 43, 54, 0.08);
  --shadow-profile: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-profile-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --chat-panel-right-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.1);
  --chat-panel-double-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.1), 4px 0 8px -4px rgba(0, 0, 0, 0.1);
  /*spacing*/
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  /*others*/
  --breakpoint-md: 768px;
  --animation-spring-gentle: cubic-bezier(0.47, 0, 0.23, 1.38);
  --animation-spring-gentler: cubic-bezier(0.47, 0, 0.33, 1.22);
}

[data-theme=blue] {
  /*main settings*/
  --theme-color: var(--success-blue);
  --text-color-main: var(--midnight-charcoal);
  --text-color-subdued: var(--grey-dark-bluish);
  --background-color-body: var(--success-blue-light-gradient);
  --menu-selected-color: var(--success-blue-light);
  --menu-selected-color-hover: var(--success-blue-light-hover);
  --primary-color: var(--success-blue);
  --primary-color-hover: var(--success-blue-hover);
  --primary-color-rgb: var(--rgb-success-blue);
  --secondary-color: var(--crimson-blaze);
  --secondary-color-hover: var(--crimson-blaze-hover);
  --secondary-color-rgb: var(--rgb-crimson-blaze);
  --danger-color: var(--rose-pink-dark);
  --danger-color-hover: var(--rose-pink-dark-hover);
  --color-grey-dark: var(--grey-dark-bluish);
  --color-grey-medium: var(--grey-medium-bluish);
  --color-grey-light: var(--grey-light-bluish);
}

[data-theme=green] {
  /*main settings*/
  --theme-color: #A4B465;
  --primary-color: #A4B465;
  --primary-color-hover: #93a15a;
  --primary-color-rgb: 164, 180, 101;
  --menu-selected-color: #f4f9db;
  --menu-selected-color-hover: #ebf0d3;
  --background-color-body: #f7f9ed;
}

[data-theme=purple] {
  /*main settings*/
  --font-family-default: var(--font-family-helvetica);
  /*--font-family-default: var(--font-family-urbanist);*/
  --theme-color: #53354A;
  --primary-color: #53354A;
  --primary-color-hover: #402939;
  --primary-color-rgb: 83, 53, 74;
  --menu-selected-color: #dbd0d8;
  --menu-selected-color-hover: #d1c7ce;
  --background-color-body: #f2e9ef;
}

[data-theme=yellow] {
  /*main settings*/
  /*--font-family-default: var(--font-family-urbanist);*/
  --theme-color: #E8DD00;
  --primary-color: #E8DD00;
  --primary-color-hover: #d4c900;
  --primary-color-rgb: 232, 221, 0;
  --menu-selected-color: #fffdba;
  --menu-selected-color-hover: #f5f3b3;
  --background-color-body: linear-gradient(to bottom, #F8F8F8 0%, #FFFFFF 40%, #FFFFFF 60%, #FFFFE7 100%);
}

[data-theme=purple][data-mode=dark] {
  --theme-color: #c17cac;
  --primary-color: #c17cac;
  --primary-color-hover: #ad6f9b;
  --primary-color-rgb: 193, 124, 172;
}

[data-theme=yellow][data-mode=dark] {
  --theme-color: #f0e740;
  --primary-color: #f0e740;
  --primary-color-hover: #dbd33b;
  --primary-color-rgb: 240, 231, 64;
}

/*Fleet Deals Temporary*/
/*[data-theme=purple] {
    --secondary-color: var(--midnight-blue);
    --secondary-color-hover: var(--midnight-blue-hover);
}*/
/*[data-mode=dark][data-theme=purple] {
    $theme-color: #a87f98;
}*/
/* Converted Colors for Dark Mode */
[data-mode=dark] {
  color-scheme: dark;
  /*$mulberry: #a87f98;*/
  /*main setting variables*/
  --menu-selected-color: #212121;
  --menu-selected-color-hover: #212121;
  --background-color-body: #444444;
  /*other variables*/
  --black: #FFFFFF;
  --black-hover: #E0e0e0;
  --success-blue: #4da6ff;
  --success-blue-hover: #1a8cff;
  /*--success-blue-light: #221EB5;*/
  --success-blue-light: #212121;
  /*--midnight-onyx: #C7C7C7;*/ /*figma*/
  --midnight-charcoal: #ECECEC; /*figma*/
  --charcoal-blue: #D1D9FF;
  --white: #303030; /*figma*/
  /*--grey-dark: #5C5C5C;*/ /*figma - border variant*/
  /*--grey-light: #DFDFDF;*/ /*figma - border variant*/
  --grey-light: #717171;
  /*--grey-dark: #EBEBEB;*/
  --grey-dark: #BDBDBD; /*figma*/
  /*--grey-dark-bluish: #AAB3D1;*/
  --grey-dark-bluish: #CED4E6;
  --grey-light-bluish: #858FB2;
  /*--grey-dark-bluish: #DDE0E9;*/
  /*--grey-light-bluish: #7D85AB;*/
  --cotton-cloud: #444444; /*figma*/
  /*--cotton-cloud: #F8F5F5;*/
  --whispering-blush: #212121; /*figma*/ /* root -> midnight onyx and black*/
  /*--whispering-blush: #4D2121;*/
  --cotton-ball: #444444; /*figma*/
  /*--cotton-ball: #1A1E33;*/
  --crown-jewels: #BB7ED7;
  --ayame-iris: #975092;
  --sea-serpant-v2: #81E2E7;
  --avatar-basic: #20283D;
  --rgba-hover-light: rgba(255, 255, 255, 0.08);
  --rgba-hover-lighter: rgba(255, 255, 255, 0.04);
  --rgb-black: 255, 255, 255;
  --rgb-success-blue: 77, 166, 255;
  --rgb-grey-light-bluish: 133, 143, 178;
  --rgb-os-bg: 225,225,225;
  --vibrant-purple: #C08EFF;
  --vibrant-purple-light: #A575F9;
  --vibrant-purple-lighter: #8D5EF0;
  --horizon-blue-light: #74C2E8;
  --horizon-blue-lighter: #4EA3D6;
  --aqua-ambition-light: #70DFDF;
  --emerald-green: #30E398;
  --emerald-green-light: #94E6C3;
  --emerald-green-dark: #208D60;
  --rose-pink: #FF9ECF;
  --rose-pink-light: #F6B2D9;
  --rose-pink-dark: #D658A3;
  --rose-pink-dark-hover: #E06DB1;
  --mustard-yellow: #FFDD7A;
  --mustard-yellow-dark: #F5C702;
  --link-color: #87CEEB;
  --link-color-hover: #ADD8E6;
  /*Fleet deals colors*/
  /*--plum-purple: #53354A;*/
  /*--midnight-blue:#28293D;*/
  --token-tag: #c49fb4;
  --attribute-value: #9fc0cf;
  --token-funtion: #f593a7;
  --plum-purple: #c17cac;
  /*shadows*/
  --chart-tooltip-box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.5);
  --shadow-dropdown: 0px 0px 1px 0px rgba(255, 255, 255, 0.10), 0px 26px 80px 0px rgba(255, 255, 255, 0.08);
  --shadow-button: 0px 1px 0px 0px rgba(255, 255, 255, 0.05);
  --shadow-button-hover: 0px 2px 16px 0px rgba(255, 255, 255, 0.10), 0px 0px 0px 1px rgba(173, 216, 230, 0.15);
  --shadow-profile: 0 0.5rem 1rem rgba(255, 255, 255, 0.16);
  --shadow-profile-sm: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.075);
  --chat-panel-right-shadow: 4px 0 8px -4px rgba(255, 255, 255, 0.1);
  --chat-panel-double-shadow: -4px 0 8px -4px rgba(255, 255, 255, 0.1), 4px 0 8px -4px rgba(255, 255, 255, 0.1);
}

/*temporary override for ATH*/
/*[data-theme=red][data-mode=dark] {
    --theme-color: var(--success-blue);
    --secondary-color: var(--success-blue);
    --secondary-color-hover: var(--success-blue-hover);
}*/
/*Theme deviations from Figma*/
/*1) Button secondary for Red theme: border color black used instead of dark grey for consistency in all themes keeping text and border color same.
     --btn-secondary-border: var(--color-grey-dark); using same border color as text for consistency among all themes
*/
/*2) Grey medium and dark shade issue in blue theme is affecting input hover states, avatar dark and light border, checkbox default and hover border,
     devider color etc.
    a) we will use grey dark bluish instead of charcoal blue for input hover state, thus we can use 3 grey variables instead of 6 by removing seperate
       border color variables. (but this will cause issue in avatar border colors)
       --border-dark: var(--charcoal-blue);
       --border-medium: var(--grey-dark-bluish);
       --border-light: var(--grey-light-bluish);
    b) to solve avatar and other grey issues we will determine a new color for medium in blue theme, instead of using same shade for medium and dark.
       This will cause deviations from figma such as a new grey shade for devider color instead of the grey light bluish
       --devider-color: var(--grey-medium); created new medium grey shade for blue theme so don't need this variable to assign it grey light bluish
*/
@media (max-width: 768px) {
  :root {
    /*font sizes*/
    --font-size-medium: 12px;
    --font-size-small: 11px;
    --font-size-smaller: 10px;
    --font-size-large: 14px;
    /*line heights*/
    --line-height-default: 16px;
    --line-height-small: 14px;
    --line-height-large: 20px;
  }
}
/*Fonts*/
/*@font-face{
    font-family: Poppins;
    src: url(../fonts/poppins/Poppins-Light.ttf);
    font-weight: 300;
}
@font-face {
    font-family: Poppins;
    src: url(../fonts/poppins/Poppins-Regular.ttf);
    font-weight: 400;
}
@font-face {
    font-family: Poppins;
    src: url(../fonts/poppins/Poppins-Medium.ttf);
    font-weight: 500;
}
@font-face {
    font-family: Poppins;
    src: url(../fonts/poppins/Poppins-SemiBold.ttf);
    font-weight: 600;
}*/
/*These are default typography and color properties*/
body {
  font-family: var(--font-family-default);
  font-size: var(--font-size-medium);
  line-height: var(--line-height-default);
  font-weight: var(--font-weight-light);
  color: var(--text-color-main);
  background: var(--background-color-body);
  margin: 0;
  --sidebar-width: 231px;
  --topnav-minheight: 56px;
  --topnav-sidebar-space: 16px;
  --right-sidebar-width: 50px;
  --right-sidebar-content-width:500px;
  --right-sidebar-content-width-sm:231px;
}

/*EXPERIMENT*/
/*@keyframes anim1{
    from{background-color: red}
    to{background-color: blue}
}

.btn-primary{
    animation-name: anim1;
    animation-duration: 10s;
    animation-delay: -3s;
}*/
/*.btn-primary{
    transition: color 1s;
}
.btn-primary:hover{
    color: red;
    transition: color 10s;
}*/

/*# sourceMappingURL=site.css.map */