/*
Coex Blue: #4A83F7
Rich Black: #010B13
Soft White: #FDFDFD

Deep Violet: #33007A
Sapphire Blue: #0033CC
Teal Blue: #007FFF
Emerald Green: #00B300
Lime Green: #AAFF00
Sunshine Yellow: #FFFF00
Golden Yellow: #FFD700
Orange: #FF7F00
Fire Orange: #FF6347
Red Orange: #FF4500
Crimson Red: #DC143C
Burgundy Red: #800000
Maroon Red: #990000
Deep Red: #C00000

Compund palette
#4A84F7
#9FE612
#3D12E6
#E6D012
#4D3C91

https://www.tints.dev/?blue=4A84F7&green=9FE612&purple=3D12E6&tan=E6D012&violet=4D3C91&maroonred=990000

*/

:root {

    --bs-body-font-family: 'Roboto', sans-serif;
    --footer-background: #f5f5f7;

    --coex-blue: #4A84F7;
    --coex-blue-50: #f1f3fe;
    --coex-blue-100: #DDE8FD;
    --coex-blue-200: #B6CDFC;
    --coex-blue-300: #94B6FA;
    --coex-blue-500: #4A84F7;
    --coex-blue-700: #0843BA;

    --coex-green: #9FE612;
    --coex-green-100: #EDFBD0;
    --coex-green-300: #C6F46C;
    --coex-green-500: #9FE612;
    --coex-green-700: #5F890B;

    --coex-purple: #3D12E6;
    --coex-purple-100: #D8D0FB;
    --coex-purple-300: #876CF4;
    --coex-purple-500: #3D12E6;
    --coex-purple-700: #240B89;

    --coex-tan: #E6D012;
    --coex-tan-100: #FBF7D0;
    --coex-tan-300: #F4E66C;
    --coex-tan-500: #E6D012;
    --coex-tan-700: #897D0B;

    --coex-violet: #4D3C91;
    --coex-violet-100: #D9D4ED;
    --coex-violet-300: #8C7DC9;
    --coex-violet-500: #4D3C91;
    --coex-violet-700: #2E2457;

    --dark-gray-50: #E5E5E5;
    --dark-gray-100: #CCCCCC;
    --dark-gray-300: #6D6D6D;
    --dark-gray-500: #1A1A1A;
    --dark-gray-700: #131313;

    --inferno-alpha-50: #FFFFFF;
    --inferno-alpha-100: #FFFFFF;
    --inferno-alpha-300: #FDFFD8;
    --inferno-alpha-500: #FCFFA4;
    --inferno-alpha-600: #C4C800;
    --inferno-alpha-700: #919400;

    --inferno-bravo-50: #FFF8F2;
    --inferno-bravo-100: #FFF1E4;
    --inferno-bravo-300: #FED39C;
    --inferno-bravo-500: #FBB61A;
    --inferno-bravo-700: #92680A;

    --inferno-charlie-50: #FEF1EE;
    --inferno-charlie-100: #FDE2DD;
    --inferno-charlie-300: #FBA690;
    --inferno-charlie-500: #ED6925;
    --inferno-charlie-700: #8E3C12;

    --inferno-delta-50: #FAEAEC;
    --inferno-delta-100: #F7D8DC;
    --inferno-delta-300: #EA8595;
    --inferno-delta-500: #BC3754;
    --inferno-delta-700: #761F32;

    --inferno-echo-50: #FCE4F7;
    --inferno-echo-100: #F9C8F0;
    --inferno-echo-300: #EA40D6;
    --inferno-echo-500: #781C6D;
    --inferno-echo-700: #500F48;

    --inferno-foxtrot-50: #E9E1FD;
    --inferno-foxtrot-100: #D6C7FB;
    --inferno-foxtrot-300: #9048F0;
    --inferno-foxtrot-500: #320A5E;
    --inferno-foxtrot-700: #230544;

    --blue: #4A83F7;
    --rich-black: #010B13;
    --soft-white: #FDFDFD;

    --medium-purple: #9370DB;

    --deep-violet: #33007A;
    --sapphire-blue: #0033CC;
    --teal-blue: #007FFF;
    --emerald-green: #00B300;
    --lime-green: #AAFF00;
    --sunshine-yellow: #FFFF00;
    --golden-yellow: #FFD700;
    --orange: #FF7F00;
    --orange-100: #fff4d3;
    --orange-200: #ffe5a5;
    --orange-300: #ffd16d;
    --fire-orange: #FF6347;
    --red-orange: #FF4500;
    --crimson-red: #DC143C;
    --burgundy-red: #800000;
    --maroon-red: #990000;
    --deep-red: #C00000;

    --sunshine-yellow-100: #FFFFCC;
    --sunshine-yellow-300: #FFFF66;
    --sunshine-yellow-500: #FFFF00;
    --sunshine-yellow-700: #999900;
    --sunshine-yellow-900: #333300;

    --maroon-red-100: #ffcaca;
    --maroon-red-300: #ff4c4c;
    --maroon-red-500: #990000;
    --maroon-red-700: #650000;
    --maroon-red-900: #310000;

    --canal-verde: rgb(130,192,108);
    --canal-rojo: rgb(210,73,77);
    --canal-naranja: rgb(221,94,8);
    --canal-na: rgb(29,29,29);

    --bs-border-radius-xs: 0.125rem;
}

body {
    background-color: var(--soft-white);
}

.custom-tooltip {
    --bs-tooltip-bg: var(--coex-blue);
    --bs-tooltip-color: var(--bs-white);
}

.bg-black {
    --bs-bg-opacity: 1;
    background-color: var(--rich-black)!important;
}

.bg-white {
    --bs-bg-opacity: 1;
    background-color: var(--soft-white)!important;
}

.text-bg-black {
    color: var(--soft-white)!important;
    background-color: var(--rich-black)!important;
}

.text-blue {
    --bs-text-opacity: 1;
    color: rgba(var(--coex-blue),var(--bs-text-opacity))!important
}

.text-blue-700 {
    --bs-text-opacity: 1;
    color: var(--coex-blue-700)!important
}

.text-violet {
    --bs-text-opacity: 1;
    color: var(--coex-violet)!important
}

.text-bg-blue {
    color: var(--soft-white)!important;
    background-color: var(--coex-blue)!important;
}
.text-bg-blue-100 {
    color: var(--soft-white)!important;
    background-color: var(--coex-blue-100)!important;
}
.text-bg-blue-300 {
    color: var(--soft-white)!important;
    background-color: var(--coex-blue-300)!important;
}
.text-bg-green-100 {
    color: var(--soft-white)!important;
    background-color: var(--coex-green-100)!important;
}
.text-bg-green-300 {
    color: var(--soft-white)!important;
    background-color: var(--coex-green-300)!important;
}
.text-bg-green {
    color: var(--soft-white)!important;
    background-color: var(--coex-green)!important;
}
.text-bg-green-700 {
    color: var(--soft-white)!important;
    background-color: var(--coex-green-700)!important;
}
.text-bg-maroon-red-500 {
    color: var(--soft-white)!important;
    background-color: var(--maroon-red-500)!important;
}
.text-bg-purple-300 {
    color: var(--soft-white)!important;
    background-color: var(--coex-purple-300)!important;
}
.text-bg-violet-300 {
    color: var(--soft-white)!important;
    background-color: var(--coex-violet-300)!important;
}

.border-blue, .border-blue-500 {
    --bs-border-opacity: 1;
    border-color: var(--coex-blue)!important;
}

.border-blue-100 {
    --bs-border-opacity: 1;
    border-color: var(--coex-blue-100)!important;
}

.border-blue-300 {
    --bs-border-opacity: 1;
    border-color: var(--coex-blue-300)!important;
}

.border-green {
    --bs-border-opacity: 1;
    border-color: var(--coex-green)!important;
}
.border-green-100 {
    --bs-border-opacity: 1;
    border-color: var(--coex-green-100)!important;
}
.border-green-300 {
    --bs-border-opacity: 1;
    border-color: var(--coex-green-300)!important;
}

.border-gray {
    --bs-border-opacity: 1;
    border-color: var(--bs-gray-500)!important;
}

.border-violet {
    --bs-border-opacity: 1;
    border-color: var(--coex-violet-500)!important;
}

.border-violet-300 {
    --bs-border-opacity: 1;
    border-color: var(--coex-violet-300)!important;
}

.text-blue {
    --bs-text-opacity: 1;
    color: var(--coex-blue)!important;
}

.text-blue-300 {
    --bs-text-opacity: 1;
    color: var(--coex-blue-300)!important;
}

.text-crimson-red {
    --bs-text-opacity: 1;
    color: var(--crimson-red)!important;
}

.text-emerald-green {
    --bs-text-opacity: 1;
    color: var(--emerald-green)!important;
}

.text-golden-yellow {
    --bs-text-opacity: 1;
    color: var(--golden-yellow)!important;
}

.text-sunshine-yellow {
    --bs-text-opacity: 1;
    color: var(--sunshine-yellow)!important;
}

.fs-7 {
    font-size: 0.8rem!important
}

.fs-8 {
    font-size: 0.7rem!important
}


.btn-blue, .btn-blue-500 {
    --bs-btn-color: var(--soft-white);
    --bs-btn-bg: var(--coex-blue-500);
    --bs-btn-border-color: var(--coex-blue-500);
    --bs-btn-hover-color: var(--soft-white);
    --bs-btn-hover-bg: var(--coex-blue-300);
    --bs-btn-hover-border-color: var(--coex-blue-100);
    --bs-btn-focus-shadow-rgb: 11,172,204;
    --bs-btn-active-color: var(--soft-white);
    --bs-btn-active-bg: var(--coex-blue-300);
    --bs-btn-active-border-color: var(--coex-blue-100);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--soft-white);
    --bs-btn-disabled-bg: var(--coex-blue-500);
    --bs-btn-disabled-border-color: var(--coex-blue-500);
}

.btn-blue-300 {
    --bs-btn-color: var(--soft-white);
    --bs-btn-bg: var(--coex-blue-300);
    --bs-btn-border-color: var(--coex-blue-300);
    --bs-btn-hover-color: var(--coex-blue-200);
    --bs-btn-hover-bg: var(--coex-blue-100);
    --bs-btn-hover-border-color: var(--coex-blue-200);
    --bs-btn-focus-shadow-rgb: 11,172,204;
    --bs-btn-active-color: var(--soft-white);
    --bs-btn-active-bg: var(--coex-blue-200);
    --bs-btn-active-border-color: var(--coex-blue-100);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--soft-white);
    --bs-btn-disabled-bg: var(--coex-blue-300);
    --bs-btn-disabled-border-color: var(--coex-blue-300);
}

.btn-green, .btn-green-500 {
    --bs-btn-color: var(--rich-black);
    --bs-btn-bg: var(--coex-green-500);
    --bs-btn-border-color: var(--coex-green-500);
    --bs-btn-hover-color: var(--rich-black);
    --bs-btn-hover-bg: var(--coex-green-300);
    --bs-btn-hover-border-color: var(--coex-green-100);
    --bs-btn-focus-shadow-rgb: 11,172,204;
    --bs-btn-active-color: var(--rich-black);
    --bs-btn-active-bg: var(--coex-green-300);
    --bs-btn-active-border-color: var(--coex-green-100);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--rich-black);
    --bs-btn-disabled-bg: var(--coex-green-500);
    --bs-btn-disabled-border-color: var(--coex-green-500);
}

.btn-green-300 {
    --bs-btn-color: var(--rich-black);
    --bs-btn-bg: var(--coex-green-300);
    --bs-btn-border-color: var(--coex-green-300);
    --bs-btn-hover-color: var(--rich-black);
    --bs-btn-hover-bg: var(--coex-green-200);
    --bs-btn-hover-border-color: var(--coex-green-100);
    --bs-btn-focus-shadow-rgb: 11,172,204;
    --bs-btn-active-color: var(--rich-black);
    --bs-btn-active-bg: var(--coex-green-200);
    --bs-btn-active-border-color: var(--coex-green-100);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--rich-black);
    --bs-btn-disabled-bg: var(--coex-green-300);
    --bs-btn-disabled-border-color: var(--coex-green-300);
}

.btn-purple, .btn-purple-500 {
    --bs-btn-color: var(--soft-white);
    --bs-btn-bg: var(--coex-purple-500);
    --bs-btn-border-color: var(--coex-purple-500);
    --bs-btn-hover-color: var(--soft-white);
    --bs-btn-hover-bg: var(--coex-purple-300);
    --bs-btn-hover-border-color: var(--coex-purple-100);
    --bs-btn-focus-shadow-rgb: 11,172,204;
    --bs-btn-active-color: var(--soft-white);
    --bs-btn-active-bg: var(--coex-purple-300);
    --bs-btn-active-border-color: var(--coex-purple-100);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--soft-white);
    --bs-btn-disabled-bg: var(--coex-purple-500);
    --bs-btn-disabled-border-color: var(--coex-purple-500);
}

.btn-purple-300 {
    --bs-btn-color: var(--soft-white);
    --bs-btn-bg: var(--coex-purple-300);
    --bs-btn-border-color: var(--coex-purple-300);
    --bs-btn-hover-color: var(--soft-white);
    --bs-btn-hover-bg: var(--coex-purple-200);
    --bs-btn-hover-border-color: var(--coex-purple-100);
    --bs-btn-focus-shadow-rgb: 11,172,204;
    --bs-btn-active-color: var(--soft-white);
    --bs-btn-active-bg: var(--coex-purple-200);
    --bs-btn-active-border-color: var(--coex-purple-100);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--soft-white);
    --bs-btn-disabled-bg: var(--coex-purple-300);
    --bs-btn-disabled-border-color: var(--coex-purple-300);
}

.btn-tan, .btn-tan-500 {
    --bs-btn-color: var(--rich-black);
    --bs-btn-bg: var(--coex-tan-500);
    --bs-btn-border-color: var(--coex-tan-500);
    --bs-btn-hover-color: var(--rich-black);
    --bs-btn-hover-bg: var(--coex-tan-300);
    --bs-btn-hover-border-color: var(--coex-tan-100);
    --bs-btn-focus-shadow-rgb: 11,172,204;
    --bs-btn-active-color: var(--rich-black);
    --bs-btn-active-bg: var(--coex-tan-300);
    --bs-btn-active-border-color: var(--coex-tan-100);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--rich-black);
    --bs-btn-disabled-bg: var(--coex-tan-500);
    --bs-btn-disabled-border-color: var(--coex-tan-500);
}

.btn-tan-300 {
    --bs-btn-color: var(--rich-black);
    --bs-btn-bg: var(--coex-tan-300);
    --bs-btn-border-color: var(--coex-tan-300);
    --bs-btn-hover-color: var(--rich-black);
    --bs-btn-hover-bg: var(--coex-tan-200);
    --bs-btn-hover-border-color: var(--coex-tan-100);
    --bs-btn-focus-shadow-rgb: 11,172,204;
    --bs-btn-active-color: var(--rich-black);
    --bs-btn-active-bg: var(--coex-tan-200);
    --bs-btn-active-border-color: var(--coex-tan-100);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--rich-black);
    --bs-btn-disabled-bg: var(--coex-tan-300);
    --bs-btn-disabled-border-color: var(--coex-tan-300);
}

.btn-violet, .btn-violet-500 {
    --bs-btn-color: var(--soft-white);
    --bs-btn-bg: var(--coex-violet-500);
    --bs-btn-border-color: var(--coex-violet-500);
    --bs-btn-hover-color: var(--rich-black);
    --bs-btn-hover-bg: var(--coex-violet-300);
    --bs-btn-hover-border-color: var(--coex-violet-100);
    --bs-btn-focus-shadow-rgb: 11,172,204;
    --bs-btn-active-color: var(--rich-black);
    --bs-btn-active-bg: var(--coex-violet-300);
    --bs-btn-active-border-color: var(--coex-violet-100);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--rich-black);
    --bs-btn-disabled-bg: var(--coex-violet-500);
    --bs-btn-disabled-border-color: var(--coex-violet-500);
}

.btn-violet-300 {
    --bs-btn-color: var(--soft-white);
    --bs-btn-bg: var(--coex-violet-300);
    --bs-btn-border-color: var(--coex-violet-300);
    --bs-btn-hover-color: var(--rich-black);
    --bs-btn-hover-bg: var(--coex-violet-200);
    --bs-btn-hover-border-color: var(--coex-violet-100);
    --bs-btn-focus-shadow-rgb: 11,172,204;
    --bs-btn-active-color: var(--rich-black);
    --bs-btn-active-bg: var(--coex-violet-200);
    --bs-btn-active-border-color: var(--coex-violet-100);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--rich-black);
    --bs-btn-disabled-bg: var(--coex-violet-300);
    --bs-btn-disabled-border-color: var(--coex-violet-300);
}

.btn-sunshine-yellow, .btn-sunshine-yellow-500 {
    --bs-btn-color: var(--rich-black);
    --bs-btn-bg: var(--sunshine-yellow-500);
    --bs-btn-border-color: var(--sunshine-yellow-500);
    --bs-btn-hover-color: var(--rich-black);
    --bs-btn-hover-bg: var(--sunshine-yellow-300);
    --bs-btn-hover-border-color: var(--sunshine-yellow-100);
    --bs-btn-focus-shadow-rgb: 11,172,204;
    --bs-btn-active-color: var(--rich-black);
    --bs-btn-active-bg: var(--sunshine-yellow-300);
    --bs-btn-active-border-color: var(--sunshine-yellow-100);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--rich-black);
    --bs-btn-disabled-bg: var(--sunshine-yellow-500);
    --bs-btn-disabled-border-color: var(--sunshine-yellow-500);
}

.btn-orange-300 {
    --bs-btn-color: var(--rich-black);
    --bs-btn-bg: var(--orange-300);
    --bs-btn-border-color: var(--orange-300);
    --bs-btn-hover-color: var(--rich-black);
    --bs-btn-hover-bg: var(--orange-200);
    --bs-btn-hover-border-color: var(--orange-100);
    --bs-btn-focus-shadow-rgb: 11,172,204;
    --bs-btn-active-color: var(--rich-black);
    --bs-btn-active-bg: var(--orange-200);
    --bs-btn-active-border-color: var(--orange-100);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--rich-black);
    --bs-btn-disabled-bg: var(--coexange-300);
    --bs-btn-disabled-border-color: var(--orange-300);
}


.btn-group-xs>.btn,.btn-xs {
    --bs-btn-padding-y: 0.15rem;
    --bs-btn-padding-x: 0.3rem;
    --bs-btn-font-size: 0.54rem;
    --bs-btn-border-radius: var(--bs-border-radius-xs)
}

.vh-50 {
    height: 50vh!important
}

.max-vh-50 {
    max-height: 50vh!important
}

.max-vh-38 {
    max-height: 38vh!important
}

.hover-violet-100:hover {
    background-color: var(--coex-violet-100)!important;
}

.row-cols-md-7 > * {
    flex: 0 0 auto;
    width: 14.2%;
}

.row-cols-md-8 > * {
    flex: 0 0 auto;
    width: 12.5%;
}
.wh-6 {
  height: 1.5rem;
  width: 1.5rem;
}
.w-r-4 {
  width: 4rem;
}
.w-r-6 {
  width: 6rem;
}
.w-r-8 {
  width: 8rem;
}
.w-r-10 {
  width: 10rem;
}
.w-r-12 {
  width: 12rem;
}
.w-r-16 {
  width: 16rem;
}
.mw-r-6 {
  max-width: 6rem;
}
.mw-r-8 {
  max-width: 8rem;
}
.mw-r-10 {
  max-width: 10rem;
}
.mw-r-12 {
  max-width: 12rem;
}
.mw-r-16 {
  max-width: 16rem;
}
/*
copy to clipboard input with icon
https://codepen.io/iamaamir/pen/rJNLVX
*/
/* 
.input_copy_wrapper{
    width: 450px;
    padding: 50px;
    margin : 0 auto;
  }
  .input_copy {
      padding: 15px 25px;
      background: #eee;
      border: 2px solid #aaa;
      color: #aaa;
      font-size: .8em;
  } */
  
  .input_copy .icon {
      display: block;
      max-width: 25px;
      cursor: pointer;
      float: right;
  }
  
  .input_copy .icon img{
    max-width: 25px;
  }
  /* .input_copy .txt {
      width: 80%;
      display: inline-block;
      overflow: hidden;
  }
   */
  
  /* click animation */
  
  .flashBG {
      animation-name: flash;
      animation-timing-function: ease-out;
      animation-duration: 1s;
  }
  
  @keyframes flash {
      0% {
          background: #28a745;
      }
      100% {
          background: transparent;
      }
  }