/*
This file is used to contain all component imports.
Files inside this folder should contain all styles relating to a reusable component.
*/
@font-face {
    font-family: "erply-iconfont";
    src: url("https://cdn.erply.com/files/533252/erply-iconfont-eotbm9age");
    src: url("https://cdn.erply.com/files/533252/erply-iconfont-eotbm9ageiefix") format("embedded-opentype"), url("https://cdn.erply.com/files/533252/erply-iconfont-woff2bm9age.woff2") format("woff2"), url("https://cdn.erply.com/files/533252/erply-iconfont-ttfbm9age.ttf") format("truetype"), url("https://cdn.erply.com/files/533252/erply-iconfont-woffbm9age.woff") format("woff"), url("https://cdn.erply.com/files/533252/erply-iconfont-svgbm9ageerply-iconfont.svg") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  [class^=icon-], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "erply-iconfont", serif !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: large;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-Action:before {
    content: "\ea6a";
  }
  
  .icon-Calculator:before {
    content: "\ea6b";
  }
  
  .icon-Calendar-Today:before {
    content: "\ea6c";
  }
  
  .icon-Chevron-Fold-Small:before {
    content: "\ea6d";
  }
  
  .icon-Chevron-Unfold-Small:before {
    content: "\ea6e";
  }
  
  .icon-Color:before {
    content: "\ea6f";
  }
  
  .icon-Contrast:before {
    content: "\ea70";
  }
  
  .icon-Document-Csv:before {
    content: "\ea71";
  }
  
  .icon-Document-Dollar-Plus:before {
    content: "\ea72";
  }
  
  .icon-Document-Quote-Plus:before {
    content: "\ea73";
  }
  
  .icon-Document-Text-Plus:before {
    content: "\ea74";
  }
  
  .icon-Document-To-Do-Plus:before {
    content: "\ea75";
  }
  
  .icon-Document-Upload:before {
    content: "\ea76";
  }
  
  .icon-E:before {
    content: "\ea77";
  }
  
  .icon-Filter-Off-3-Lines:before {
    content: "\ea78";
  }
  
  .icon-Filter-Off-4-Lines:before {
    content: "\ea79";
  }
  
  .icon-Filter-On-3-Lines:before {
    content: "\ea7a";
  }
  
  .icon-Filter-On-4-Lines:before {
    content: "\ea7b";
  }
  
  .icon-Layout:before {
    content: "\ea7c";
  }
  
  .icon-Logo:before {
    content: "\ea7d";
  }
  
  .icon-Percentage:before {
    content: "\ea7e";
  }
  
  .icon-Person-1-Card:before {
    content: "\ea7f";
  }
  
  .icon-Person-2-Card:before {
    content: "\ea80";
  }
  
  .icon-Person-3-Card:before {
    content: "\ea81";
  }
  
  .icon-Phone-Invoice:before {
    content: "\ea82";
  }
  
  .icon-Print-Ok:before {
    content: "\ea83";
  }
  
  .icon-Progress:before {
    content: "\ea84";
  }
  
  .icon-QR:before {
    content: "\ea85";
  }
  
  .icon-Resize-Larger:before {
    content: "\ea86";
  }
  
  .icon-Resize-Smaller:before {
    content: "\ea87";
  }
  
  .icon-Text-Size:before {
    content: "\ea88";
  }
  
  .icon-Vehicle-Car-Front-2:before {
    content: "\ea89";
  }
  
  .icon-Vehicle-Truck-Front-2:before {
    content: "\ea8a";
  }
  
  .icon-Drawer-in:before {
    content: "\ea67";
  }
  
  .icon-Drawer-out:before {
    content: "\ea68";
  }
  
  .icon-Drawer:before {
    content: "\ea69";
  }
  
  .icon-Box-Filled:before {
    content: "\ea61";
  }
  
  .icon-Calendar-Day:before {
    content: "\ea62";
  }
  
  .icon-Document-Dollar-Filled:before {
    content: "\ea63";
  }
  
  .icon-Calendar-Month:before {
    content: "\ea64";
  }
  
  .icon-Person-3-Default-Filled:before {
    content: "\ea65";
  }
  
  .icon-Calendar-Week:before {
    content: "\ea66";
  }
  
  .icon-Wrench:before {
    content: "\ea60";
  }
  
  .icon-Edit-Clipboard:before {
    content: "\ea5f";
  }
  
  .icon-Puzzle:before {
    content: "\ea4e";
  }
  
  .icon-Theme-Light:before {
    content: "\ea4f";
  }
  
  .icon-Edit-Vehicle:before {
    content: "\ea50";
  }
  
  .icon-Edit-Code:before {
    content: "\ea51";
  }
  
  .icon-Edit-Invoice:before {
    content: "\ea52";
  }
  
  .icon-Edit-Todo:before {
    content: "\ea53";
  }
  
  .icon-Edit-Sheet:before {
    content: "\ea54";
  }
  
  .icon-Edit-Text:before {
    content: "\ea55";
  }
  
  .icon-Edit-MenuGrid:before {
    content: "\ea56";
  }
  
  .icon-Edit-Stopwatch:before {
    content: "\ea57";
  }
  
  .icon-Edit-MenuList:before {
    content: "\ea58";
  }
  
  .icon-Theme-Dark:before {
    content: "\ea59";
  }
  
  .icon-Signature:before {
    content: "\ea5a";
  }
  
  .icon-Edit-Cheque:before {
    content: "\ea5b";
  }
  
  .icon-Edit-Person:before {
    content: "\ea5c";
  }
  
  .icon-Edit-Calendar:before {
    content: "\ea5d";
  }
  
  .icon-Edit-List:before {
    content: "\ea5e";
  }
  
  .icon-Edit-Coupon:before {
    content: "\ea4d";
  }
  
  .icon-Clipboard:before {
    content: "\ea4c";
  }
  
  .icon-Alert-Circle-Filled:before {
    content: "\e900";
  }
  
  .icon-Alert-Circle:before {
    content: "\e901";
  }
  
  .icon-Alert-Octagon-Filled:before {
    content: "\e902";
  }
  
  .icon-Alert-Octagon:before {
    content: "\e903";
  }
  
  .icon-Alert-Triangle-Filled:before {
    content: "\e904";
  }
  
  .icon-Alert-Triangle:before {
    content: "\e905";
  }
  
  .icon-Anchor:before {
    content: "\e906";
  }
  
  .icon-Arrow-Down-Circle-Filled:before {
    content: "\e907";
  }
  
  .icon-Arrow-Down-Circle:before {
    content: "\e908";
  }
  
  .icon-Arrow-Down:before {
    content: "\e909";
  }
  
  .icon-Arrow-Forward:before {
    content: "\e90a";
  }
  
  .icon-Arrow-Left-Circle-Filled:before {
    content: "\e90b";
  }
  
  .icon-Arrow-Left-Circle:before {
    content: "\e90c";
  }
  
  .icon-Arrow-Left:before {
    content: "\e90d";
  }
  
  .icon-Arrow-Move-Horizontal:before {
    content: "\e90e";
  }
  
  .icon-Arrow-Move-Vertical:before {
    content: "\e90f";
  }
  
  .icon-Arrow-Move:before {
    content: "\e910";
  }
  
  .icon-Arrow-Refresh:before {
    content: "\e911";
  }
  
  .icon-Arrow-Reload:before {
    content: "\e912";
  }
  
  .icon-Arrow-Reply-All:before {
    content: "\e913";
  }
  
  .icon-Arrow-Reply:before {
    content: "\e914";
  }
  
  .icon-Arrow-Reverse:before {
    content: "\e915";
  }
  
  .icon-Arrow-Right-Circle-Filled:before {
    content: "\e916";
  }
  
  .icon-Arrow-Right-Circle:before {
    content: "\e917";
  }
  
  .icon-Arrow-Right:before {
    content: "\e918";
  }
  
  .icon-Arrow-Swap:before {
    content: "\e919";
  }
  
  .icon-Arrow-Trending:before {
    content: "\e91a";
  }
  
  .icon-Arrow-Undo:before {
    content: "\e91b";
  }
  
  .icon-Arrow-Up-Circle-Filled:before {
    content: "\e91c";
  }
  
  .icon-Arrow-Up-Circle:before {
    content: "\e91d";
  }
  
  .icon-Arrow-Up:before {
    content: "\e91e";
  }
  
  .icon-Attachment:before {
    content: "\e91f";
  }
  
  .icon-Badge-Discount-Filled:before {
    content: "\e920";
  }
  
  .icon-Badge-Discount:before {
    content: "\e921";
  }
  
  .icon-Bag-Plus:before {
    content: "\e922";
  }
  
  .icon-Bag:before {
    content: "\e923";
  }
  
  .icon-Bell-Off:before {
    content: "\e924";
  }
  
  .icon-Bell:before {
    content: "\e925";
  }
  
  .icon-Block:before {
    content: "\e926";
  }
  
  .icon-Book:before {
    content: "\e927";
  }
  
  .icon-Box-Closed:before {
    content: "\e928";
  }
  
  .icon-Box:before {
    content: "\e929";
  }
  
  .icon-Boxes:before {
    content: "\e92a";
  }
  
  .icon-Calendar:before {
    content: "\e92b";
  }
  
  .icon-Call:before {
    content: "\e92c";
  }
  
  .icon-Camera-Plus:before {
    content: "\e92d";
  }
  
  .icon-Camera:before {
    content: "\e92e";
  }
  
  .icon-Cart-Bag:before {
    content: "\e92f";
  }
  
  .icon-Cart-Buggy:before {
    content: "\e930";
  }
  
  .icon-Cart-Trolley:before {
    content: "\e931";
  }
  
  .icon-Cash-Arrow-Down-Coin:before {
    content: "\e932";
  }
  
  .icon-Cash-Arrow-Down-Paper:before {
    content: "\e933";
  }
  
  .icon-Cash-Arrow-Down:before {
    content: "\e934";
  }
  
  .icon-Cash-Paper:before {
    content: "\e935";
  }
  
  .icon-Cash:before {
    content: "\e936";
  }
  
  .icon-Catalogue-No-Text:before {
    content: "\e937";
  }
  
  .icon-Catalogue-With-Text:before {
    content: "\e938";
  }
  
  .icon-Chart-Bar:before {
    content: "\e939";
  }
  
  .icon-Chart-Dashboard:before {
    content: "\e93a";
  }
  
  .icon-Chart-Line:before {
    content: "\e93b";
  }
  
  .icon-Chart-Mixed:before {
    content: "\e93c";
  }
  
  .icon-Chart-Pie:before {
    content: "\e93d";
  }
  
  .icon-Chat-Left-Questionmark:before {
    content: "\e93e";
  }
  
  .icon-Chat-Left:before {
    content: "\e93f";
  }
  
  .icon-Chat-Right-Questionmark:before {
    content: "\e940";
  }
  
  .icon-Chat-Right:before {
    content: "\e941";
  }
  
  .icon-Chat-Thread-On:before {
    content: "\e942";
  }
  
  .icon-Chat-Thread:before {
    content: "\e943";
  }
  
  .icon-Checkmark-Calendar:before {
    content: "\e944";
  }
  
  .icon-Checkmark-Document:before {
    content: "\e945";
  }
  
  .icon-Checkmark-Folder:before {
    content: "\e946";
  }
  
  .icon-Checkmark-Person:before {
    content: "\e947";
  }
  
  .icon-Checkmark-Round:before {
    content: "\e948";
  }
  
  .icon-Checkmark-Square:before {
    content: "\e949";
  }
  
  .icon-Checkmark:before {
    content: "\e94a";
  }
  
  .icon-Chevron-Contract:before {
    content: "\e94b";
  }
  
  .icon-Chevron-Double-Down:before {
    content: "\e94c";
  }
  
  .icon-Chevron-Double-Left:before {
    content: "\e94d";
  }
  
  .icon-Chevron-Double-Right:before {
    content: "\e94e";
  }
  
  .icon-Chevron-Double-Up:before {
    content: "\e94f";
  }
  
  .icon-Chevron-Down-Closed:before {
    content: "\e950";
  }
  
  .icon-Chevron-Down-Small-Circle-Filled:before {
    content: "\e951";
  }
  
  .icon-Chevron-Down-Small-Circle:before {
    content: "\e952";
  }
  
  .icon-Chevron-Down-Small-Closed:before {
    content: "\e953";
  }
  
  .icon-Chevron-Down-Small:before {
    content: "\e954";
  }
  
  .icon-Chevron-Down:before {
    content: "\e955";
  }
  
  .icon-Chevron-Expand:before {
    content: "\e956";
  }
  
  .icon-Chevron-Fold:before {
    content: "\e957";
  }
  
  .icon-Chevron-Left-Closed:before {
    content: "\e958";
  }
  
  .icon-Chevron-Left-Small-Circle-Filled:before {
    content: "\e959";
  }
  
  .icon-Chevron-Left-Small-Circle:before {
    content: "\e95a";
  }
  
  .icon-Chevron-Left-Small-Closed:before {
    content: "\e95b";
  }
  
  .icon-Chevron-Left-Small:before {
    content: "\e95c";
  }
  
  .icon-Chevron-Left:before {
    content: "\e95d";
  }
  
  .icon-Chevron-Leftmost-Small:before {
    content: "\e95e";
  }
  
  .icon-Chevron-Leftmost:before {
    content: "\e95f";
  }
  
  .icon-Chevron-Right-Closed:before {
    content: "\e960";
  }
  
  .icon-Chevron-Right-Small-Circle-Filled:before {
    content: "\e961";
  }
  
  .icon-Chevron-Right-Small-Circle:before {
    content: "\e962";
  }
  
  .icon-Chevron-Right-Small-Closed:before {
    content: "\e963";
  }
  
  .icon-Chevron-Right-Small:before {
    content: "\e964";
  }
  
  .icon-Chevron-Right:before {
    content: "\e965";
  }
  
  .icon-Chevron-Rightmost-Small:before {
    content: "\e966";
  }
  
  .icon-Chevron-Rightmost:before {
    content: "\e967";
  }
  
  .icon-Chevron-Unfold:before {
    content: "\e968";
  }
  
  .icon-Chevron-Up-Closed:before {
    content: "\e969";
  }
  
  .icon-Chevron-Up-Small-Circle-Filled:before {
    content: "\e96a";
  }
  
  .icon-Chevron-Up-Small-Circle:before {
    content: "\e96b";
  }
  
  .icon-Chevron-Up-Small-Closed:before {
    content: "\e96c";
  }
  
  .icon-Chevron-Up-Small:before {
    content: "\e96d";
  }
  
  .icon-Chevron-Up:before {
    content: "\e96e";
  }
  
  .icon-Clock-Filled:before {
    content: "\e96f";
  }
  
  .icon-Clock:before {
    content: "\e970";
  }
  
  .icon-Close:before {
    content: "\e971";
  }
  
  .icon-Cloud-Download:before {
    content: "\e972";
  }
  
  .icon-Cloud-Filled:before {
    content: "\e973";
  }
  
  .icon-Cloud-Upload:before {
    content: "\e974";
  }
  
  .icon-Cloud:before {
    content: "\e975";
  }
  
  .icon-Code:before {
    content: "\e976";
  }
  
  .icon-Copy:before {
    content: "\e977";
  }
  
  .icon-Coupon:before {
    content: "\e978";
  }
  
  .icon-Delete:before {
    content: "\e979";
  }
  
  .icon-Document-Dollar:before {
    content: "\e97a";
  }
  
  .icon-Document-Empty:before {
    content: "\e97b";
  }
  
  .icon-Document-Pdf:before {
    content: "\e97c";
  }
  
  .icon-Document-Sheet:before {
    content: "\e97d";
  }
  
  .icon-Document-Text:before {
    content: "\e97e";
  }
  
  .icon-Document-To-Do:before {
    content: "\e97f";
  }
  
  .icon-Documents:before {
    content: "\e980";
  }
  
  .icon-Drag-Horizontal:before {
    content: "\e981";
  }
  
  .icon-Drag:before {
    content: "\e982";
  }
  
  .icon-Edit-Box:before {
    content: "\e983";
  }
  
  .icon-Edit-Line:before {
    content: "\e984";
  }
  
  .icon-Edit-Paper:before {
    content: "\e985";
  }
  
  .icon-Email:before {
    content: "\e986";
  }
  
  .icon-Eye-Off:before {
    content: "\e987";
  }
  
  .icon-Eye-On:before {
    content: "\e988";
  }
  
  .icon-Filter-Off-Filled:before {
    content: "\e989";
  }
  
  .icon-Filter-Off:before {
    content: "\e98a";
  }
  
  .icon-Filter-On-Filled:before {
    content: "\e98b";
  }
  
  .icon-Filter-On:before {
    content: "\e98c";
  }
  
  .icon-Flag-Filled:before {
    content: "\e98d";
  }
  
  .icon-Flag:before {
    content: "\e98e";
  }
  
  .icon-Gift:before {
    content: "\e98f";
  }
  
  .icon-Globe:before {
    content: "\e990";
  }
  
  .icon-Grid-11-Horizontal:before {
    content: "\e991";
  }
  
  .icon-Grid-11-Vertical:before {
    content: "\e992";
  }
  
  .icon-Grid-12-Horizontal:before {
    content: "\e993";
  }
  
  .icon-Grid-12-Vertical:before {
    content: "\e994";
  }
  
  .icon-Grid-21-Horizontal:before {
    content: "\e995";
  }
  
  .icon-Grid-21-Vertical:before {
    content: "\e996";
  }
  
  .icon-Grid-22:before {
    content: "\e997";
  }
  
  .icon-Grid-3x3:before {
    content: "\e998";
  }
  
  .icon-Heading-H:before {
    content: "\e999";
  }
  
  .icon-Heading-H1:before {
    content: "\e99a";
  }
  
  .icon-Heading-H2:before {
    content: "\e99b";
  }
  
  .icon-Heading-H3:before {
    content: "\e99c";
  }
  
  .icon-Heading-H4:before {
    content: "\e99d";
  }
  
  .icon-Heading-H5:before {
    content: "\e99e";
  }
  
  .icon-Heading-H6:before {
    content: "\e99f";
  }
  
  .icon-Home:before {
    content: "\e9a0";
  }
  
  .icon-Important-Filled:before {
    content: "\e9a1";
  }
  
  .icon-Important:before {
    content: "\e9a2";
  }
  
  .icon-Inbox-:before {
    content: "\e9a3";
  }
  
  .icon-Inbox-Add:before {
    content: "\e9a4";
  }
  
  .icon-Inbox-Checked:before {
    content: "\e9a5";
  }
  
  .icon-Inbox-Default:before {
    content: "\e9a6";
  }
  
  .icon-Inbox-In:before {
    content: "\e9a7";
  }
  
  .icon-Inbox-Out:before {
    content: "\e9a8";
  }
  
  .icon-Inbox-Pending:before {
    content: "\e9a9";
  }
  
  .icon-Info-Boxes:before {
    content: "\e9aa";
  }
  
  .icon-Info-Catalogue:before {
    content: "\e9ab";
  }
  
  .icon-Info-Circle:before {
    content: "\e9ac";
  }
  
  .icon-Info-Filled-Circle:before {
    content: "\e9ad";
  }
  
  .icon-Info-Filled:before {
    content: "\e9ae";
  }
  
  .icon-Info-Status-Filled:before {
    content: "\e9af";
  }
  
  .icon-Info-Status:before {
    content: "\e9b0";
  }
  
  .icon-Info-Trolley:before {
    content: "\e9b1";
  }
  
  .icon-Info:before {
    content: "\e9b2";
  }
  
  .icon-Key:before {
    content: "\e9b3";
  }
  
  .icon-Knife-Fork-Crossed:before {
    content: "\e9b4";
  }
  
  .icon-Knife-Fork-Side-By-Side:before {
    content: "\e9b5";
  }
  
  .icon-Language:before {
    content: "\e9b6";
  }
  
  .icon-Leaf:before {
    content: "\e9b7";
  }
  
  .icon-Link:before {
    content: "\e9b8";
  }
  
  .icon-List-Bulleted:before {
    content: "\e9b9";
  }
  
  .icon-List-Numbered:before {
    content: "\e9ba";
  }
  
  .icon-Location:before {
    content: "\e9bb";
  }
  
  .icon-Lock-Locked:before {
    content: "\e9bc";
  }
  
  .icon-Lock-Unlocked:before {
    content: "\e9bd";
  }
  
  .icon-Mail:before {
    content: "\e9be";
  }
  
  .icon-Mall:before {
    content: "\e9bf";
  }
  
  .icon-Menu-Erply:before {
    content: "\e9c0";
  }
  
  .icon-Menu-Hamburger:before {
    content: "\e9c1";
  }
  
  .icon-Menu-List:before {
    content: "\e9c2";
  }
  
  .icon-Minus-Calendar:before {
    content: "\e9c3";
  }
  
  .icon-Minus-Document:before {
    content: "\e9c4";
  }
  
  .icon-Minus-Folder:before {
    content: "\e9c5";
  }
  
  .icon-Minus-Person:before {
    content: "\e9c6";
  }
  
  .icon-Minus-Round:before {
    content: "\e9c7";
  }
  
  .icon-Minus-Square:before {
    content: "\e9c8";
  }
  
  .icon-Minus:before {
    content: "\e9c9";
  }
  
  .icon-More-Horizontal:before {
    content: "\e9ca";
  }
  
  .icon-More-Vertical:before {
    content: "\e9cb";
  }
  
  .icon-Number-1:before {
    content: "\e9cc";
  }
  
  .icon-Number:before {
    content: "\e9cd";
  }
  
  .icon-Numbers-123:before {
    content: "\e9ce";
  }
  
  .icon-Office-Plus:before {
    content: "\e9cf";
  }
  
  .icon-Office:before {
    content: "\e9d0";
  }
  
  .icon-Payment-Card-Filled:before {
    content: "\e9d1";
  }
  
  .icon-Payment-Card:before {
    content: "\e9d2";
  }
  
  .icon-Person-1-Group:before {
    content: "\e9d3";
  }
  
  .icon-Person-1-Ok:before {
    content: "\e9d4";
  }
  
  .icon-Person-1-Plus:before {
    content: "\e9d5";
  }
  
  .icon-Person-1:before {
    content: "\e9d6";
  }
  
  .icon-Person-2-Group:before {
    content: "\e9d7";
  }
  
  .icon-Person-2-Ok:before {
    content: "\e9d8";
  }
  
  .icon-Person-2-Plus:before {
    content: "\e9d9";
  }
  
  .icon-Person-2:before {
    content: "\e9da";
  }
  
  .icon-Person-3-Default:before {
    content: "\e9db";
  }
  
  .icon-Person-3-Group:before {
    content: "\e9dc";
  }
  
  .icon-Person-3-Ok:before {
    content: "\e9dd";
  }
  
  .icon-Person-3-Plus:before {
    content: "\e9de";
  }
  
  .icon-Person-Checkin:before {
    content: "\e9df";
  }
  
  .icon-Person-Communication:before {
    content: "\e9e0";
  }
  
  .icon-Person-CRM:before {
    content: "\e9e1";
  }
  
  .icon-Person-Framed:before {
    content: "\e9e2";
  }
  
  .icon-Phone:before {
    content: "\e9e3";
  }
  
  .icon-Picture:before {
    content: "\e9e4";
  }
  
  .icon-Picture-Filled:before {
    content: "\e9e5";
  }
  
  .icon-Picture1:before {
    content: "\e9e6";
  }
  
  .icon-Plate-Cover:before {
    content: "\e9e7";
  }
  
  .icon-Plus-Calendar:before {
    content: "\e9e8";
  }
  
  .icon-Plus-Cart:before {
    content: "\e9e9";
  }
  
  .icon-Plus-Circle:before {
    content: "\e9ea";
  }
  
  .icon-Plus-Default:before {
    content: "\e9eb";
  }
  
  .icon-Plus-Document:before {
    content: "\e9ec";
  }
  
  .icon-Plus-Folder:before {
    content: "\e9ed";
  }
  
  .icon-Plus-Person:before {
    content: "\e9ee";
  }
  
  .icon-Plus-Product:before {
    content: "\e9ef";
  }
  
  .icon-Plus-Round:before {
    content: "\e9f0";
  }
  
  .icon-Plus-Square:before {
    content: "\e9f1";
  }
  
  .icon-Plus:before {
    content: "\e9f2";
  }
  
  .icon-Pointer:before {
    content: "\e9f3";
  }
  
  .icon-POS-Printer:before {
    content: "\e9f4";
  }
  
  .icon-POS-Terminal-Filled:before {
    content: "\e9f5";
  }
  
  .icon-POS-Terminal:before {
    content: "\e9f6";
  }
  
  .icon-POS:before {
    content: "\e9f7";
  }
  
  .icon-Print:before {
    content: "\e9f8";
  }
  
  .icon-Progress-Focused:before {
    content: "\e9f9";
  }
  
  .icon-Progress-Not-Focused:before {
    content: "\e9fa";
  }
  
  .icon-Questionmark:before {
    content: "\e9fb";
  }
  
  .icon-Quotation-Finish-Double-1:before {
    content: "\e9fc";
  }
  
  .icon-Quotation-Finish-Double:before {
    content: "\e9fd";
  }
  
  .icon-Quotation-Finish-Single:before {
    content: "\e9fe";
  }
  
  .icon-Quotation-Start-Double:before {
    content: "\e9ff";
  }
  
  .icon-Quotation-Start-Single:before {
    content: "\ea00";
  }
  
  .icon-Radiobutton-Off-2:before {
    content: "\ea01";
  }
  
  .icon-Radiobutton-Off:before {
    content: "\ea02";
  }
  
  .icon-Radiobutton-On:before {
    content: "\ea03";
  }
  
  .icon-Receipt-Number-1:before {
    content: "\ea04";
  }
  
  .icon-Receipt-Number-2:before {
    content: "\ea05";
  }
  
  .icon-Receipt-Number-3:before {
    content: "\ea06";
  }
  
  .icon-Receipt-Number-4:before {
    content: "\ea07";
  }
  
  .icon-Receipt-Number-5:before {
    content: "\ea08";
  }
  
  .icon-Receipt-Number-6:before {
    content: "\ea09";
  }
  
  .icon-Receipt-Number-7:before {
    content: "\ea0a";
  }
  
  .icon-Receipt-Number-8:before {
    content: "\ea0b";
  }
  
  .icon-Receipt-Ok:before {
    content: "\ea0c";
  }
  
  .icon-Receipt-Plus:before {
    content: "\ea0d";
  }
  
  .icon-Receipt-Problem:before {
    content: "\ea0e";
  }
  
  .icon-Receipt-Question:before {
    content: "\ea0f";
  }
  
  .icon-Receipt-Roll:before {
    content: "\ea10";
  }
  
  .icon-Receipt:before {
    content: "\ea11";
  }
  
  .icon-Save:before {
    content: "\ea12";
  }
  
  .icon-Scale:before {
    content: "\ea13";
  }
  
  .icon-Scanner:before {
    content: "\ea14";
  }
  
  .icon-Scisors:before {
    content: "\ea15";
  }
  
  .icon-Search:before {
    content: "\ea16";
  }
  
  .icon-Settings-1:before {
    content: "\ea17";
  }
  
  .icon-Settings-2:before {
    content: "\ea18";
  }
  
  .icon-Settings:before {
    content: "\ea19";
  }
  
  .icon-Shop:before {
    content: "\ea1a";
  }
  
  .icon-Sign-In:before {
    content: "\ea1b";
  }
  
  .icon-Sign-Out:before {
    content: "\ea1c";
  }
  
  .icon-Split:before {
    content: "\ea1d";
  }
  
  .icon-Star-Filled:before {
    content: "\ea1e";
  }
  
  .icon-Star:before {
    content: "\ea1f";
  }
  
  .icon-Stopwatch:before {
    content: "\ea20";
  }
  
  .icon-Suitcase:before {
    content: "\ea21";
  }
  
  .icon-Sum-Epsilon:before {
    content: "\ea22";
  }
  
  .icon-Sum-Oldschool:before {
    content: "\ea23";
  }
  
  .icon-Swap-Horizontal:before {
    content: "\ea24";
  }
  
  .icon-Swap-Vertical:before {
    content: "\ea25";
  }
  
  .icon-Tag-Filled:before {
    content: "\ea26";
  }
  
  .icon-Tag:before {
    content: "\ea27";
  }
  
  .icon-Text-Align-Center:before {
    content: "\ea28";
  }
  
  .icon-Text-Align-Justified:before {
    content: "\ea29";
  }
  
  .icon-Text-Align-Left:before {
    content: "\ea2a";
  }
  
  .icon-Text-Align-Right:before {
    content: "\ea2b";
  }
  
  .icon-Text-Bold:before {
    content: "\ea2c";
  }
  
  .icon-Text-Italic:before {
    content: "\ea2d";
  }
  
  .icon-Text-Pillcorw:before {
    content: "\ea2e";
  }
  
  .icon-Text-Strikethrough:before {
    content: "\ea2f";
  }
  
  .icon-Text-Underline:before {
    content: "\ea30";
  }
  
  .icon-Tips:before {
    content: "\ea31";
  }
  
  .icon-Toque-Hat-Off:before {
    content: "\ea32";
  }
  
  .icon-Toque-Hat:before {
    content: "\ea33";
  }
  
  .icon-Trash-Empty-Filled:before {
    content: "\ea34";
  }
  
  .icon-Trash-Empty-NotFilled-blue:before {
    content: "\ea35";
  }
  
  .icon-Trash-Empty-NotFilled:before {
    content: "\ea35";
  }
  
  .icon-Trash-Full-Filled:before {
    content: "\ea36";
  }
  
  .icon-Trash-Full-NotFilled:before {
    content: "\ea37";
  }
  
  .icon-Truck:before {
    content: "\ea38";
  }
  
  .icon-Vehicle-Car-Front:before {
    content: "\ea39";
  }
  
  .icon-Vehicle-Truck-Cyber:before {
    content: "\ea3a";
  }
  
  .icon-Vehicle-Truck-Front:before {
    content: "\ea3b";
  }
  
  .icon-Vehicle-Truck-Side:before {
    content: "\ea3c";
  }
  
  .icon-Wallet-Exclamation:before {
    content: "\ea3d";
  }
  
  .icon-Wallet-Ok:before {
    content: "\ea3e";
  }
  
  .icon-Wallet:before {
    content: "\ea3f";
  }
  
  .icon-Warehouse:before {
    content: "\ea40";
  }
  
  .icon-Wifi-Good:before {
    content: "\ea41";
  }
  
  .icon-Wifi-Offline:before {
    content: "\ea42";
  }
  
  .icon-Window-Bar-Left:before {
    content: "\ea43";
  }
  
  .icon-Window-Bar-Off:before {
    content: "\ea44";
  }
  
  .icon-Window-Bar-Right:before {
    content: "\ea45";
  }
  
  .icon-Window-Pane-Bar-Bottom:before {
    content: "\ea46";
  }
  
  .icon-Window-Pane-Bar-Left:before {
    content: "\ea47";
  }
  
  .icon-Window-Pane-Bar-Right:before {
    content: "\ea48";
  }
  
  .icon-Window-Pane-Bar-Top:before {
    content: "\ea49";
  }
  
  .icon-Window-Pane-Horizontal:before {
    content: "\ea4a";
  }
  
  .icon-Window-Pane-Vertical:before {
    content: "\ea4b";
  }
  
  .icon-Link-External:before {
    content: "\ea8b";
  }
  
  /*
  This file is used to contain all component imports.
  Files inside this folder should contain all styles relating to a reusable component.
  */
  /*
  utils
  */
  .sidebar-nav {
    background: #303947;
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 250px;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  .sidebar-nav a {
    display: inline-flex;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
  }
  .sidebar-nav a:hover, .sidebar-nav a:focus {
    color: white;
  }
  .sidebar-nav a.active {
    color: #3D8AF6;
  }
  .sidebar-nav [role=off-canvas], .sidebar-nav [role=main] {
    display: block;
    position: relative;
    z-index: 1;
    -webkit-transition: 0.08s all;
    -moz-transition: 0.08s all;
    -o-transition: 0.8s all;
    transition: 0.08s all;
  }
  .sidebar-nav [role=off-canvas] {
    margin-left: -85%;
    width: 85%;
    float: left;
    z-index: 2;
  }
  @media all and (min-width: 550px) {
    .sidebar-nav [role=off-canvas] {
      margin-left: -45%;
      width: 45%;
    }
  }
  @media all and (min-width: 1000px) {
    .sidebar-nav [role=off-canvas] {
      margin-left: -25%;
      width: 25%;
    }
  }
  @media all and (min-width: 1260px) {
    .sidebar-nav [role=off-canvas] {
      margin-left: -15%;
      width: 15%;
    }
  }
  .sidebar-nav [role=main] {
    margin-left: 0;
    float: right;
    z-index: 1;
    position: relative;
  }
  .sidebar-nav .main-container, .sidebar-nav [role=navigation], .sidebar-nav .footer-container {
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
    overflow: hidden;
  }
  .sidebar-nav .main-container {
    padding-top: 19px;
    padding-bottom: 19px;
  }
  .sidebar-nav .breadcrumb {
    margin-top: 0px;
    margin: 0 auto 20px auto;
    padding: 19px;
    background-color: lightgreen;
  }
  .sidebar-nav .body-content {
    margin: 0 auto;
    margin-bottom: 75px;
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: lightblue;
  }
  .sidebar-nav .navopen [role=off-canvas] {
    margin-left: 0;
    position: absolute;
    max-width: none;
  }
  .sidebar-nav .navopen [role=main] {
    margin-right: -85%;
  }
  @media all and (min-width: 550px) {
    .sidebar-nav .navopen [role=main] {
      margin-right: -45%;
    }
  }
  @media all and (min-width: 1000px) {
    .sidebar-nav .navopen [role=main] {
      margin-right: -25%;
    }
  }
  @media all and (min-width: 1260px) {
    .sidebar-nav .navopen [role=main] {
      margin-right: -15%;
    }
  }
  .sidebar-nav .hide-for-large-down {
    display: none;
  }
  .sidebar-nav .show-for-large-down,
  .sidebar-nav .hide-for-large-up {
    display: inherit;
  }
  @media screen and (min-width: 1260px) {
    .sidebar-nav .hide-for-large-down {
      display: inherit;
    }
    .sidebar-nav .show-for-large-down,
    .sidebar-nav .hide-for-large-up {
      display: none;
    }
  }
  
  #content {
    max-width: 80em;
    margin-left: 330px;
    width: 1150px;
  }
  
  .option {
    border-radius: 4px;
    margin: 4px 0px;
    padding: 10px;
  }
  .option:hover, .option.selected {
    background-color: #3D8AF6;
  }
  .option h1 {
    color: #6788a7;
    font-size: 0.9em;
    font-weight: 700;
    margin: 0px;
    text-align: left;
  }
  
  .margin-0 {
    margin: 0px;
  }
  
  .margin-right-0 {
    margin-right: 0px;
  }
  
  .margin-left-0 {
    margin-left: 0px;
  }
  
  .margin-top-0 {
    margin-top: 0px;
  }
  
  .margin-bottom-0 {
    margin-bottom: 0px;
  }
  
  .padding-0 {
    padding: 0px;
  }
  
  .padding-right-0 {
    padding-right: 0px;
  }
  
  .padding-left-0 {
    padding-left: 0px;
  }
  
  .padding-top-0 {
    padding-top: 0px;
  }
  
  .padding-bottom-0 {
    padding-bottom: 0px;
  }
  
  .margin-2 {
    margin: 2px;
  }
  
  .margin-right-2 {
    margin-right: 2px;
  }
  
  .margin-left-2 {
    margin-left: 2px;
  }
  
  .margin-top-2 {
    margin-top: 2px;
  }
  
  .margin-bottom-2 {
    margin-bottom: 2px;
  }
  
  .padding-2 {
    padding: 2px;
  }
  
  .padding-right-2 {
    padding-right: 2px;
  }
  
  .padding-left-2 {
    padding-left: 2px;
  }
  
  .padding-top-2 {
    padding-top: 2px;
  }
  
  .padding-bottom-2 {
    padding-bottom: 2px;
  }
  
  .margin-4 {
    margin: 4px;
  }
  
  .margin-right-4 {
    margin-right: 4px;
  }
  
  .margin-left-4 {
    margin-left: 4px;
  }
  
  .margin-top-4 {
    margin-top: 4px;
  }
  
  .margin-bottom-4 {
    margin-bottom: 4px;
  }
  
  .padding-4 {
    padding: 4px;
  }
  
  .padding-right-4 {
    padding-right: 4px;
  }
  
  .padding-left-4 {
    padding-left: 4px;
  }
  
  .padding-top-4 {
    padding-top: 4px;
  }
  
  .padding-bottom-4 {
    padding-bottom: 4px;
  }
  
  .margin-6 {
    margin: 6px;
  }
  
  .margin-right-6 {
    margin-right: 6px;
  }
  
  .margin-left-6 {
    margin-left: 6px;
  }
  
  .margin-top-6 {
    margin-top: 6px;
  }
  
  .margin-bottom-6 {
    margin-bottom: 6px;
  }
  
  .padding-6 {
    padding: 6px;
  }
  
  .padding-right-6 {
    padding-right: 6px;
  }
  
  .padding-left-6 {
    padding-left: 6px;
  }
  
  .padding-top-6 {
    padding-top: 6px;
  }
  
  .padding-bottom-6 {
    padding-bottom: 6px;
  }
  
  .margin-8 {
    margin: 8px;
  }
  
  .margin-right-8 {
    margin-right: 8px;
  }
  
  .margin-left-8 {
    margin-left: 8px;
  }
  
  .margin-top-8 {
    margin-top: 8px;
  }
  
  .margin-bottom-8 {
    margin-bottom: 8px;
  }
  
  .padding-8 {
    padding: 8px;
  }
  
  .padding-right-8 {
    padding-right: 8px;
  }
  
  .padding-left-8 {
    padding-left: 8px;
  }
  
  .padding-top-8 {
    padding-top: 8px;
  }
  
  .padding-bottom-8 {
    padding-bottom: 8px;
  }
  
  .margin-12 {
    margin: 12px;
  }
  
  .margin-right-12 {
    margin-right: 12px;
  }
  
  .margin-left-12 {
    margin-left: 12px;
  }
  
  .margin-top-12 {
    margin-top: 12px;
  }
  
  .margin-bottom-12 {
    margin-bottom: 12px;
  }
  
  .padding-12 {
    padding: 12px;
  }
  
  .padding-right-12 {
    padding-right: 12px;
  }
  
  .padding-left-12 {
    padding-left: 12px;
  }
  
  .padding-top-12 {
    padding-top: 12px;
  }
  
  .padding-bottom-12 {
    padding-bottom: 12px;
  }
  
  .margin-16 {
    margin: 16px;
  }
  
  .margin-right-16 {
    margin-right: 16px;
  }
  
  .margin-left-16 {
    margin-left: 16px;
  }
  
  .margin-top-16 {
    margin-top: 16px;
  }
  
  .margin-bottom-16 {
    margin-bottom: 16px;
  }
  
  .padding-16 {
    padding: 16px;
  }
  
  .padding-right-16 {
    padding-right: 16px;
  }
  
  .padding-left-16 {
    padding-left: 16px;
  }
  
  .padding-top-16 {
    padding-top: 16px;
  }
  
  .padding-bottom-16 {
    padding-bottom: 16px;
  }
  
  .margin-18 {
    margin: 18px;
  }
  
  .margin-right-18 {
    margin-right: 18px;
  }
  
  .margin-left-18 {
    margin-left: 18px;
  }
  
  .margin-top-18 {
    margin-top: 18px;
  }
  
  .margin-bottom-18 {
    margin-bottom: 18px;
  }
  
  .padding-18 {
    padding: 18px;
  }
  
  .padding-right-18 {
    padding-right: 18px;
  }
  
  .padding-left-18 {
    padding-left: 18px;
  }
  
  .padding-top-18 {
    padding-top: 18px;
  }
  
  .padding-bottom-18 {
    padding-bottom: 18px;
  }
  
  .margin-20 {
    margin: 20px;
  }
  
  .margin-right-20 {
    margin-right: 20px;
  }
  
  .margin-left-20 {
    margin-left: 20px;
  }
  
  .margin-top-20 {
    margin-top: 20px;
  }
  
  .margin-bottom-20 {
    margin-bottom: 20px;
  }
  
  .padding-20 {
    padding: 20px;
  }
  
  .padding-right-20 {
    padding-right: 20px;
  }
  
  .padding-left-20 {
    padding-left: 20px;
  }
  
  .padding-top-20 {
    padding-top: 20px;
  }
  
  .padding-bottom-20 {
    padding-bottom: 20px;
  }
  
  .margin-24 {
    margin: 24px;
  }
  
  .margin-right-24 {
    margin-right: 24px;
  }
  
  .margin-left-24 {
    margin-left: 24px;
  }
  
  .margin-top-24 {
    margin-top: 24px;
  }
  
  .margin-bottom-24 {
    margin-bottom: 24px;
  }
  
  .padding-24 {
    padding: 24px;
  }
  
  .padding-right-24 {
    padding-right: 24px;
  }
  
  .padding-left-24 {
    padding-left: 24px;
  }
  
  .padding-top-24 {
    padding-top: 24px;
  }
  
  .padding-bottom-24 {
    padding-bottom: 24px;
  }
  
  .margin-32 {
    margin: 32px;
  }
  
  .margin-right-32 {
    margin-right: 32px;
  }
  
  .margin-left-32 {
    margin-left: 32px;
  }
  
  .margin-top-32 {
    margin-top: 32px;
  }
  
  .margin-bottom-32 {
    margin-bottom: 32px;
  }
  
  .padding-32 {
    padding: 32px;
  }
  
  .padding-right-32 {
    padding-right: 32px;
  }
  
  .padding-left-32 {
    padding-left: 32px;
  }
  
  .padding-top-32 {
    padding-top: 32px;
  }
  
  .padding-bottom-32 {
    padding-bottom: 32px;
  }
  
  .margin-36 {
    margin: 36px;
  }
  
  .margin-right-36 {
    margin-right: 36px;
  }
  
  .margin-left-36 {
    margin-left: 36px;
  }
  
  .margin-top-36 {
    margin-top: 36px;
  }
  
  .margin-bottom-36 {
    margin-bottom: 36px;
  }
  
  .padding-36 {
    padding: 36px;
  }
  
  .padding-right-36 {
    padding-right: 36px;
  }
  
  .padding-left-36 {
    padding-left: 36px;
  }
  
  .padding-top-36 {
    padding-top: 36px;
  }
  
  .padding-bottom-36 {
    padding-bottom: 36px;
  }
  
  .margin-48 {
    margin: 48px;
  }
  
  .margin-right-48 {
    margin-right: 48px;
  }
  
  .margin-left-48 {
    margin-left: 48px;
  }
  
  .margin-top-48 {
    margin-top: 48px;
  }
  
  .margin-bottom-48 {
    margin-bottom: 48px;
  }
  
  .padding-48 {
    padding: 48px;
  }
  
  .padding-right-48 {
    padding-right: 48px;
  }
  
  .padding-left-48 {
    padding-left: 48px;
  }
  
  .padding-top-48 {
    padding-top: 48px;
  }
  
  .padding-bottom-48 {
    padding-bottom: 48px;
  }
  
  .margin-64 {
    margin: 64px;
  }
  
  .margin-right-64 {
    margin-right: 64px;
  }
  
  .margin-left-64 {
    margin-left: 64px;
  }
  
  .margin-top-64 {
    margin-top: 64px;
  }
  
  .margin-bottom-64 {
    margin-bottom: 64px;
  }
  
  .padding-64 {
    padding: 64px;
  }
  
  .padding-right-64 {
    padding-right: 64px;
  }
  
  .padding-left-64 {
    padding-left: 64px;
  }
  
  .padding-top-64 {
    padding-top: 64px;
  }
  
  .padding-bottom-64 {
    padding-bottom: 64px;
  }
  
  .margin-right {
    margin-right: 24px;
  }
  
  .margin-left {
    margin-left: 24px;
  }
  
  .margin-top {
    margin-top: 24px;
  }
  
  .margin-bottom {
    margin-bottom: 24px;
  }
  
  .padding {
    padding: 24px;
  }
  
  .padding-left {
    padding-left: 24px;
  }
  
  .padding-right {
    padding-right: 24px;
  }
  
  .padding-top {
    padding-top: 24px;
  }
  
  .padding-bottom {
    padding-bottom: 24px;
  }
  
  /**
   *  SETTINGS
   */
  .color-dark {
    color: #1D2433;
  }
  
  .color-gray {
    color: #555B66;
  }
  
  .color-white {
    color: #FFFFFF;
  }
  
  .color-light {
    color: #C2C3C4;
  }
  
  .color-lighter {
    color: #8C8D90;
  }
  
  /**
   *  COMPONENTS
   */
  label {
    font-size: 14px;
  }
  
  h3 {
    font-size: 16px;
    font-weight: 125;
  }
  
  a {
    font-size: 15px;
    color: rgba(29, 36, 51, 0.8);
    text-decoration: none;
    cursor: pointer;
  }
  
  .flex-block-pagination a {
    color: #333333;
    display: flex;
    align-items: center;
    margin-left: 5px;
    margin-right: 5px;
    background: #E8F1FE;
  }
  
  .text-huge, .text-big, .text-medium, .text-label {
    margin-bottom: 1em;
  }
  .text-huge {
    font-size: 36px;
    line-height: 0;
  }
  .text-big {
    font-size: 24px;
    line-height: 1.3em;
  }
  .text-medium {
    font-size: 16px;
    line-height: 1.5em;
  }
  .text-label {
    font-size: 20px;
    line-height: 1.5em;
  }
  .text-small {
    font-size: 12px;
    line-height: 1.5em;
  }
  .text-body {
    font-size: 16px;
    line-height: 1.5em;
  }
  
  .text-primary {
    color: #3D8AF6;
  }
  .text-dark {
    color: #0A253C;
  }
  .text-secondary {
    color: #5221B5;
  }
  .text-white {
    color: #fff;
  }
  .text-success {
    color: #5ABB7A;
  }
  .text-info {
    color: #5bc0de;
  }
  .text-warning {
    color: #F7BC45;
  }
  .text-error {
    color: #CE3010;
  }
  .text-error-bg {
    color: #FFEFEC;
  }
  .text-error-default {
    color: #E0593E;
  }
  .text-error-pressed {
    color: #A4250C;
  }
  .text-gray {
    color: #969da6;
  }
  .text-gray-light {
    color: #eceff1;
  }
  .text-danger-background-100 {
    color: #FFEFEC;
  }
  .text-danger-default-700 {
    color: #E0593E;
  }
  .text-danger-hover-800 {
    color: #CE3010;
  }
  .text-danger-pressed-900 {
    color: #A4250C;
  }
  .text-warning-background-100 {
    color: #FFF7E8;
  }
  .text-warning-default-700 {
    color: #F7BC45;
  }
  .text-warning-hover-800 {
    color: #ED8C05;
  }
  .text-warning-pressed-900 {
    color: #C57505;
  }
  .text-success-background-100 {
    color: #F0FFF5;
  }
  .text-success-default-700 {
    color: #5ABB7A;
  }
  .text-success-hover-800 {
    color: #35A95C;
  }
  .text-success-pressed-900 {
    color: #298246;
  }
  .text-secondary-background-100 {
    color: #F8F5FF;
  }
  .text-secondary-default-700 {
    color: #8B54F7;
  }
  .text-secondary-hover-800 {
    color: #6D35DE;
  }
  .text-secondary-pressed-900 {
    color: #5221B5;
  }
  .text-primary-background-100 {
    color: #E8F2FE;
  }
  .text-primary-default-700 {
    color: #3D94F6;
  }
  .text-primary-hover-800 {
    color: #166EE8;
  }
  .text-primary-pressed-900 {
    color: #1562CE;
  }
  .text-primary-1100 {
    color: #1D2433;
  }
  
  a .text {
    color: rgba(29, 36, 51, 0.8);
  }
  
  .text-light {
    font-weight: 300;
  }
  
  .text-normal {
    font-weight: 400;
  }
  
  .text-lineThrough {
    text-decoration: line-through;
  }
  
  .text-italic {
    font-style: italic;
  }
  
  .text-underline {
    text-decoration: underline;
  }
  
  .text-uppercase {
    text-transform: uppercase;
  }
  
  .text-withSubtitle {
    margin-bottom: 0;
  }
  .text-withSubtitle + .text-huge,
  .text-withSubtitle + .text-big,
  .text-withSubtitle + .text-medium,
  .text-withSubtitle + .text-small {
    margin-top: 0.5em;
  }
  
  h1,
  h2,
  h3,
  h4 {
    font-weight: 300;
  }
  
  .text-center {
    text-align: center;
  }
  
  .text-right {
    text-align: right;
  }
  
  .text-left {
    text-align: left;
  }
  
  /**
   *  ALIGNERS
   */
  .aligner {
    display: flex;
  }
  .aligner--spaceBetween {
    justify-content: space-between;
    width: 100%;
  }
  .aligner--spaceAround {
    justify-content: space-around;
    width: 100%;
  }
  .aligner--centerVertical {
    align-items: center;
  }
  .aligner--centerHoritzontal {
    justify-content: center;
    width: 100%;
  }
  .aligner--contentStart {
    justify-content: flex-start;
  }
  .aligner--contentEnd {
    justify-content: flex-end;
  }
  
  .aligner--itemTop {
    align-self: flex-start;
  }
  
  .aligner--itemBottom {
    align-self: flex-end;
  }
  
  .flex-grow,
  .aligner--grow {
    flex-grow: 1;
  }
  
  /**
   *  BACKGROUND
   */
  .bg-primary {
    background-color: #3D8AF6;
    border-radius: 5px;
  }
  .bg-dark {
    background-color: #0A253C;
    border-radius: 5px;
  }
  .bg-secondary {
    background-color: #5221B5;
    border-radius: 5px;
  }
  .bg-white {
    background-color: #fff;
    border-radius: 5px;
  }
  .bg-success {
    background-color: #5ABB7A;
    border-radius: 5px;
  }
  .bg-info {
    background-color: #5bc0de;
    border-radius: 5px;
  }
  .bg-warning {
    background-color: #F7BC45;
    border-radius: 5px;
  }
  .bg-error {
    background-color: #CE3010;
    border-radius: 5px;
  }
  .bg-error-bg {
    background-color: #FFEFEC;
    border-radius: 5px;
  }
  .bg-error-default {
    background-color: #E0593E;
    border-radius: 5px;
  }
  .bg-error-pressed {
    background-color: #A4250C;
    border-radius: 5px;
  }
  .bg-gray {
    background-color: #969da6;
    border-radius: 5px;
  }
  .bg-gray-light {
    background-color: #eceff1;
    border-radius: 5px;
  }
  .bg-danger-background-100 {
    background-color: #FFEFEC;
    border-radius: 5px;
  }
  .bg-danger-default-700 {
    background-color: #E0593E;
    border-radius: 5px;
  }
  .bg-danger-hover-800 {
    background-color: #CE3010;
    border-radius: 5px;
  }
  .bg-danger-pressed-900 {
    background-color: #A4250C;
    border-radius: 5px;
  }
  .bg-warning-background-100 {
    background-color: #FFF7E8;
    border-radius: 5px;
  }
  .bg-warning-default-700 {
    background-color: #F7BC45;
    border-radius: 5px;
  }
  .bg-warning-hover-800 {
    background-color: #ED8C05;
    border-radius: 5px;
  }
  .bg-warning-pressed-900 {
    background-color: #C57505;
    border-radius: 5px;
  }
  .bg-success-background-100 {
    background-color: #F0FFF5;
    border-radius: 5px;
  }
  .bg-success-default-700 {
    background-color: #5ABB7A;
    border-radius: 5px;
  }
  .bg-success-hover-800 {
    background-color: #35A95C;
    border-radius: 5px;
  }
  .bg-success-pressed-900 {
    background-color: #298246;
    border-radius: 5px;
  }
  .bg-secondary-background-100 {
    background-color: #F8F5FF;
    border-radius: 5px;
  }
  .bg-secondary-default-700 {
    background-color: #8B54F7;
    border-radius: 5px;
  }
  .bg-secondary-hover-800 {
    background-color: #6D35DE;
    border-radius: 5px;
  }
  .bg-secondary-pressed-900 {
    background-color: #5221B5;
    border-radius: 5px;
  }
  .bg-primary-background-100 {
    background-color: #E8F2FE;
    border-radius: 5px;
  }
  .bg-primary-default-700 {
    background-color: #3D94F6;
    border-radius: 5px;
  }
  .bg-primary-hover-800 {
    background-color: #166EE8;
    border-radius: 5px;
  }
  .bg-primary-pressed-900 {
    background-color: #1562CE;
    border-radius: 5px;
  }
  .bg-primary-1100 {
    background-color: #1D2433;
    border-radius: 5px;
  }
  
  .container {
    width: 100%;
    padding-right: 0px, 2;
    padding-left: 0px, 2;
    margin-right: auto;
    margin-left: auto;
  }
  @media (min-width: 576px) {
    .container {
      max-width: 540px;
    }
  }
  @media (min-width: 768px) {
    .container {
      max-width: 720px;
    }
  }
  @media (min-width: 992px) {
    .container {
      max-width: 960px;
    }
  }
  @media (min-width: 1200px) {
    .container {
      max-width: 1140px;
    }
  }
  
  .container-fluid {
    width: 100%;
    padding-right: 0px, 2;
    padding-left: 0px, 2;
    margin-right: auto;
    margin-left: auto;
  }
  
  .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: 0px, -2;
    margin-left: 0px, -2;
  }
  
  .no-gutters {
    margin-left: 0;
    margin-right: 0;
  }
  .no-gutters > .col,
  .no-gutters > [class*=col-] {
    padding-left: 0;
    padding-right: 0;
  }
  
  .col-xl,
  .col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg,
  .col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md,
  .col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm,
  .col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col,
  .col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 0px;
    padding-left: 0px;
  }
  
  .col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  
  .col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  
  .col-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  
  .col-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  
  .col-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  
  .col-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  
  .col-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  
  .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  .col-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  
  .col-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  
  .col-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  
  .col-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  
  .col-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  
  .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .order-first {
    order: -1;
  }
  
  .order-1 {
    order: 1;
  }
  
  .order-2 {
    order: 2;
  }
  
  .order-3 {
    order: 3;
  }
  
  .order-4 {
    order: 4;
  }
  
  .order-5 {
    order: 5;
  }
  
  .order-6 {
    order: 6;
  }
  
  .order-7 {
    order: 7;
  }
  
  .order-8 {
    order: 8;
  }
  
  .order-9 {
    order: 9;
  }
  
  .order-10 {
    order: 10;
  }
  
  .order-11 {
    order: 11;
  }
  
  .order-12 {
    order: 12;
  }
  
  .offset-1 {
    margin-left: 8.3333333333%;
  }
  
  .offset-2 {
    margin-left: 16.6666666667%;
  }
  
  .offset-3 {
    margin-left: 25%;
  }
  
  .offset-4 {
    margin-left: 33.3333333333%;
  }
  
  .offset-5 {
    margin-left: 41.6666666667%;
  }
  
  .offset-6 {
    margin-left: 50%;
  }
  
  .offset-7 {
    margin-left: 58.3333333333%;
  }
  
  .offset-8 {
    margin-left: 66.6666666667%;
  }
  
  .offset-9 {
    margin-left: 75%;
  }
  
  .offset-10 {
    margin-left: 83.3333333333%;
  }
  
  .offset-11 {
    margin-left: 91.6666666667%;
  }
  
  @media (min-width: 576px) {
    .col-sm {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%;
    }
    .col-sm-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }
    .col-sm-1 {
      flex: 0 0 8.3333333333%;
      max-width: 8.3333333333%;
    }
    .col-sm-2 {
      flex: 0 0 16.6666666667%;
      max-width: 16.6666666667%;
    }
    .col-sm-3 {
      flex: 0 0 25%;
      max-width: 25%;
    }
    .col-sm-4 {
      flex: 0 0 33.3333333333%;
      max-width: 33.3333333333%;
    }
    .col-sm-5 {
      flex: 0 0 41.6666666667%;
      max-width: 41.6666666667%;
    }
    .col-sm-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }
    .col-sm-7 {
      flex: 0 0 58.3333333333%;
      max-width: 58.3333333333%;
    }
    .col-sm-8 {
      flex: 0 0 66.6666666667%;
      max-width: 66.6666666667%;
    }
    .col-sm-9 {
      flex: 0 0 75%;
      max-width: 75%;
    }
    .col-sm-10 {
      flex: 0 0 83.3333333333%;
      max-width: 83.3333333333%;
    }
    .col-sm-11 {
      flex: 0 0 91.6666666667%;
      max-width: 91.6666666667%;
    }
    .col-sm-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .order-sm-first {
      order: -1;
    }
    .order-sm-1 {
      order: 1;
    }
    .order-sm-2 {
      order: 2;
    }
    .order-sm-3 {
      order: 3;
    }
    .order-sm-4 {
      order: 4;
    }
    .order-sm-5 {
      order: 5;
    }
    .order-sm-6 {
      order: 6;
    }
    .order-sm-7 {
      order: 7;
    }
    .order-sm-8 {
      order: 8;
    }
    .order-sm-9 {
      order: 9;
    }
    .order-sm-10 {
      order: 10;
    }
    .order-sm-11 {
      order: 11;
    }
    .order-sm-12 {
      order: 12;
    }
    .offset-sm-0 {
      margin-left: 0;
    }
    .offset-sm-1 {
      margin-left: 8.3333333333%;
    }
    .offset-sm-2 {
      margin-left: 16.6666666667%;
    }
    .offset-sm-3 {
      margin-left: 25%;
    }
    .offset-sm-4 {
      margin-left: 33.3333333333%;
    }
    .offset-sm-5 {
      margin-left: 41.6666666667%;
    }
    .offset-sm-6 {
      margin-left: 50%;
    }
    .offset-sm-7 {
      margin-left: 58.3333333333%;
    }
    .offset-sm-8 {
      margin-left: 66.6666666667%;
    }
    .offset-sm-9 {
      margin-left: 75%;
    }
    .offset-sm-10 {
      margin-left: 83.3333333333%;
    }
    .offset-sm-11 {
      margin-left: 91.6666666667%;
    }
  }
  @media (min-width: 768px) {
    .col-md {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%;
    }
    .col-md-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }
    .col-md-1 {
      flex: 0 0 8.3333333333%;
      max-width: 8.3333333333%;
    }
    .col-md-2 {
      flex: 0 0 16.6666666667%;
      max-width: 16.6666666667%;
    }
    .col-md-3 {
      flex: 0 0 25%;
      max-width: 25%;
    }
    .col-md-4 {
      flex: 0 0 33.3333333333%;
      max-width: 33.3333333333%;
    }
    .col-md-5 {
      flex: 0 0 41.6666666667%;
      max-width: 41.6666666667%;
    }
    .col-md-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }
    .col-md-7 {
      flex: 0 0 58.3333333333%;
      max-width: 58.3333333333%;
    }
    .col-md-8 {
      flex: 0 0 66.6666666667%;
      max-width: 66.6666666667%;
    }
    .col-md-9 {
      flex: 0 0 75%;
      max-width: 75%;
    }
    .col-md-10 {
      flex: 0 0 83.3333333333%;
      max-width: 83.3333333333%;
    }
    .col-md-11 {
      flex: 0 0 91.6666666667%;
      max-width: 91.6666666667%;
    }
    .col-md-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .order-md-first {
      order: -1;
    }
    .order-md-1 {
      order: 1;
    }
    .order-md-2 {
      order: 2;
    }
    .order-md-3 {
      order: 3;
    }
    .order-md-4 {
      order: 4;
    }
    .order-md-5 {
      order: 5;
    }
    .order-md-6 {
      order: 6;
    }
    .order-md-7 {
      order: 7;
    }
    .order-md-8 {
      order: 8;
    }
    .order-md-9 {
      order: 9;
    }
    .order-md-10 {
      order: 10;
    }
    .order-md-11 {
      order: 11;
    }
    .order-md-12 {
      order: 12;
    }
    .offset-md-0 {
      margin-left: 0;
    }
    .offset-md-1 {
      margin-left: 8.3333333333%;
    }
    .offset-md-2 {
      margin-left: 16.6666666667%;
    }
    .offset-md-3 {
      margin-left: 25%;
    }
    .offset-md-4 {
      margin-left: 33.3333333333%;
    }
    .offset-md-5 {
      margin-left: 41.6666666667%;
    }
    .offset-md-6 {
      margin-left: 50%;
    }
    .offset-md-7 {
      margin-left: 58.3333333333%;
    }
    .offset-md-8 {
      margin-left: 66.6666666667%;
    }
    .offset-md-9 {
      margin-left: 75%;
    }
    .offset-md-10 {
      margin-left: 83.3333333333%;
    }
    .offset-md-11 {
      margin-left: 91.6666666667%;
    }
  }
  @media (min-width: 992px) {
    .col-lg {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%;
    }
    .col-lg-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }
    .col-lg-1 {
      flex: 0 0 8.3333333333%;
      max-width: 8.3333333333%;
    }
    .col-lg-2 {
      flex: 0 0 16.6666666667%;
      max-width: 16.6666666667%;
    }
    .col-lg-3 {
      flex: 0 0 25%;
      max-width: 25%;
    }
    .col-lg-4 {
      flex: 0 0 33.3333333333%;
      max-width: 33.3333333333%;
    }
    .col-lg-5 {
      flex: 0 0 41.6666666667%;
      max-width: 41.6666666667%;
    }
    .col-lg-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }
    .col-lg-7 {
      flex: 0 0 58.3333333333%;
      max-width: 58.3333333333%;
    }
    .col-lg-8 {
      flex: 0 0 66.6666666667%;
      max-width: 66.6666666667%;
    }
    .col-lg-9 {
      flex: 0 0 75%;
      max-width: 75%;
    }
    .col-lg-10 {
      flex: 0 0 83.3333333333%;
      max-width: 83.3333333333%;
    }
    .col-lg-11 {
      flex: 0 0 91.6666666667%;
      max-width: 91.6666666667%;
    }
    .col-lg-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .order-lg-first {
      order: -1;
    }
    .order-lg-1 {
      order: 1;
    }
    .order-lg-2 {
      order: 2;
    }
    .order-lg-3 {
      order: 3;
    }
    .order-lg-4 {
      order: 4;
    }
    .order-lg-5 {
      order: 5;
    }
    .order-lg-6 {
      order: 6;
    }
    .order-lg-7 {
      order: 7;
    }
    .order-lg-8 {
      order: 8;
    }
    .order-lg-9 {
      order: 9;
    }
    .order-lg-10 {
      order: 10;
    }
    .order-lg-11 {
      order: 11;
    }
    .order-lg-12 {
      order: 12;
    }
    .offset-lg-0 {
      margin-left: 0;
    }
    .offset-lg-1 {
      margin-left: 8.3333333333%;
    }
    .offset-lg-2 {
      margin-left: 16.6666666667%;
    }
    .offset-lg-3 {
      margin-left: 25%;
    }
    .offset-lg-4 {
      margin-left: 33.3333333333%;
    }
    .offset-lg-5 {
      margin-left: 41.6666666667%;
    }
    .offset-lg-6 {
      margin-left: 50%;
    }
    .offset-lg-7 {
      margin-left: 58.3333333333%;
    }
    .offset-lg-8 {
      margin-left: 66.6666666667%;
    }
    .offset-lg-9 {
      margin-left: 75%;
    }
    .offset-lg-10 {
      margin-left: 83.3333333333%;
    }
    .offset-lg-11 {
      margin-left: 91.6666666667%;
    }
  }
  @media (min-width: 1200px) {
    .col-xl {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%;
    }
    .col-xl-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }
    .col-xl-1 {
      flex: 0 0 8.3333333333%;
      max-width: 8.3333333333%;
    }
    .col-xl-2 {
      flex: 0 0 16.6666666667%;
      max-width: 16.6666666667%;
    }
    .col-xl-3 {
      flex: 0 0 25%;
      max-width: 25%;
    }
    .col-xl-4 {
      flex: 0 0 33.3333333333%;
      max-width: 33.3333333333%;
    }
    .col-xl-5 {
      flex: 0 0 41.6666666667%;
      max-width: 41.6666666667%;
    }
    .col-xl-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }
    .col-xl-7 {
      flex: 0 0 58.3333333333%;
      max-width: 58.3333333333%;
    }
    .col-xl-8 {
      flex: 0 0 66.6666666667%;
      max-width: 66.6666666667%;
    }
    .col-xl-9 {
      flex: 0 0 75%;
      max-width: 75%;
    }
    .col-xl-10 {
      flex: 0 0 83.3333333333%;
      max-width: 83.3333333333%;
    }
    .col-xl-11 {
      flex: 0 0 91.6666666667%;
      max-width: 91.6666666667%;
    }
    .col-xl-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .order-xl-first {
      order: -1;
    }
    .order-xl-1 {
      order: 1;
    }
    .order-xl-2 {
      order: 2;
    }
    .order-xl-3 {
      order: 3;
    }
    .order-xl-4 {
      order: 4;
    }
    .order-xl-5 {
      order: 5;
    }
    .order-xl-6 {
      order: 6;
    }
    .order-xl-7 {
      order: 7;
    }
    .order-xl-8 {
      order: 8;
    }
    .order-xl-9 {
      order: 9;
    }
    .order-xl-10 {
      order: 10;
    }
    .order-xl-11 {
      order: 11;
    }
    .order-xl-12 {
      order: 12;
    }
    .offset-xl-0 {
      margin-left: 0;
    }
    .offset-xl-1 {
      margin-left: 8.3333333333%;
    }
    .offset-xl-2 {
      margin-left: 16.6666666667%;
    }
    .offset-xl-3 {
      margin-left: 25%;
    }
    .offset-xl-4 {
      margin-left: 33.3333333333%;
    }
    .offset-xl-5 {
      margin-left: 41.6666666667%;
    }
    .offset-xl-6 {
      margin-left: 50%;
    }
    .offset-xl-7 {
      margin-left: 58.3333333333%;
    }
    .offset-xl-8 {
      margin-left: 66.6666666667%;
    }
    .offset-xl-9 {
      margin-left: 75%;
    }
    .offset-xl-10 {
      margin-left: 83.3333333333%;
    }
    .offset-xl-11 {
      margin-left: 91.6666666667%;
    }
  }
  .alert-container {
    position: fixed;
    width: 100%;
    height: auto;
    top: 55px;
    left: 0;
    z-index: 9999;
  }
  .alert-base {
    position: relative;
    text-align: center;
    width: 70%;
    padding: 16px;
    margin: auto auto 5px;
    transition: opacity 0.3s;
  }
  .alert-close-btn {
    margin-left: 14px;
    color: #1D2433;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
  }
  .alert-close-btn:hover {
    color: #1D2433;
  }
  .alert-error {
    color: #1D2433;
    background-color: #FFEFEC;
  }
  .alert-success {
    color: #1D2433;
    background-color: #F0FFF5;
  }
  
  html {
    box-sizing: border-box;
    font-size: 16px;
  }
  
  *::before, *::after {
    box-sizing: inherit;
    white-space: nowrap;
  }
  
  br {
    display: block;
    content: "";
    margin-top: 5px;
  }
  
  ol, ul {
    margin-left: 30px;
    padding: 0;
    font-weight: normal;
    font-family: "Erply Ladna", sans-serif;
  }
  
  body, h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-family: "Erply Ladna", sans-serif;
  }
  
  input, textarea, button {
    font-family: inherit;
  }
  
  input[type=text]:focus {
    border: 2px solid #555;
  }
  
  body {
    background-color: #FFFFFF;
    margin: 0;
    padding: 0;
  }
  
  /* Style to make iframe borderless */
  iframe {
    border: none;
    background-color: transparent;
    width: 100%;
  }
  
  .layout-row-start-1 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
  
  hr {
    border-top: 1px solid #E1E6EF;
  }
  
  .clear-icon {
    position: absolute;
    right: 10px;
    cursor: pointer;
    padding: 5px 0.2em;
    color: #3D94F6;
  }
  
  .clear-icon > input::-ms-clear {
    display: none;
  }
  
  /* Modal Alert General Styles */
  .modal-alert {
    padding: 16px;
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    /* display: none; */
    transition: box-shadow 150ms ease-in-out;
  }
  
  .modal-alert:hover {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
  }
  
  /* Just to show modal */
  .modal-alert.show-modal {
    display: block;
  }
  
  /* Close Button */
  .modal-alert .close-button {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 12px;
    height: 12px;
    text-indent: -9999px;
    font-size: 0;
    opacity: 1;
    z-index: 1;
    transition: hover 350ms ease-in-out;
  }
  
  .modal-alert .close-button:hover {
    opacity: 0.8;
  }
  
  .modal-alert .close-button:before,
  .modal-alert .close-button:after {
    content: "";
    position: absolute;
    top: 0;
    left: 6px;
    height: 12px;
    width: 2px;
    background-color: #333;
  }
  
  .modal-alert .close-button:before {
    transform: rotate(45deg);
  }
  
  .modal-alert .close-button:after {
    transform: rotate(-45deg);
  }
  
  /* Modal Inner Content */
  .modal-alert .inner-content {
    padding-left: 30px;
  }
  
  .modal-alert .inner-content h4 {
    font-size: 16px;
    line-height: 1.5;
    padding-bottom: 5px;
    position: relative;
    display: flex;
    align-items: center;
    font-weight: bold;
  }
  
  .modal-alert .inner-content p {
    font-size: 14px;
    line-height: 1.5;
    color: #1d2433;
  }
  
  .modal-alert-footer {
    text-align: right;
    padding-top: 10px;
  }
  
  /* Alert Icon - General styles for all alert icons icons */
  .alert-icon {
    font-size: 1.5rem;
    position: absolute;
    left: -30px;
  }
  
  /* blue */
  .view-info {
    background-color: #e8f1fe;
  }
  
  .view-info .icon-Alert-Circle {
    color: #3d8af6;
  }
  
  .view-info .modal-alert-footer {
    background-color: #e8f1fe;
  }
  
  /* green */
  .view-success {
    background-color: #f0fff5;
  }
  
  .view-success .icon-Checkmark-Round {
    color: #5abb7a;
  }
  
  .view-success .modal-alert-footer {
    background-color: #f0fff5;
  }
  
  /* yellow */
  .view-alert {
    background-color: #fff7e8;
  }
  
  .view-alert .icon-Alert-Triangle {
    color: #f7bc45;
  }
  
  /* orange */
  .view-error {
    background-color: #ffefec;
  }
  
  .view-error .icon-Alert-Octagon {
    color: #e0593e;
  }
  
  /* Dialogue Window - General Styles */
  .dialogue-window {
    padding: 16px;
    position: relative;
    background-color: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    max-width: 500px;
    transition: box-shadow 150ms ease-in-out;
  }
  
  .dialogue-window:hover {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
  }
  
  /* Just to show dialogue */
  .dialogue-window.show-modal {
    display: block;
  }
  
  /* Close Button */
  .dialogue-window .close-button {
    position: absolute;
    right: 20px;
    top: 25px;
    width: 12px;
    height: 12px;
    text-indent: -9999px;
    font-size: 0;
    opacity: 1;
    z-index: 1;
    transition: opacity 350ms;
  }
  
  .dialogue-window .close-button:hover {
    opacity: 0.8;
  }
  
  .dialogue-window .close-button:before,
  .dialogue-window .close-button:after {
    content: "";
    position: absolute;
    top: 0;
    left: 6px;
    height: 12px;
    width: 2px;
    background-color: #333;
  }
  
  .dialogue-window .close-button:before {
    transform: rotate(45deg);
  }
  
  .dialogue-window .close-button:after {
    transform: rotate(-45deg);
  }
  
  /* Modal Inner Content */
  .dialogue-window .inner-content h4 {
    font-size: 24px;
    line-height: 1.5;
    padding: 0 20px 20px 30px;
    padding-left: 40px;
    position: relative;
    display: flex;
    align-items: center;
    font-weight: bold;
  }
  
  .dialogue-window .inner-content p {
    font-size: 16px;
    line-height: 1.5;
    color: #1d2433;
  }
  
  .dialogue-controls {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
  }
  
  .dialogue-controls a.text-link {
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #e0593e;
    position: relative;
    padding-bottom: 3px;
  }
  
  .dialogue-controls a.text-link:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background-color: #e0593e;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
  }
  
  .dialogue-controls a.text-link:hover:after {
    width: 0;
  }
  
  .dialogue-controls .button:last-child {
    margin-right: 0;
  }
  
  .dialogue-controls .button {
    transition: all 350ms;
  }
  
  /* Alert Icon - General styles for all alert icons icons */
  .dialogue-window .alert-icon {
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    z-index: 2;
  }
  
  .dialogue-window .alert-icon:after {
    content: "";
    width: 32px;
    height: 32px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background-color: #e8f1fe;
    z-index: -1;
    transform: translate(-50%, -50%);
  }
  
  /* blue */
  .view-info .icon-Alert-Circle {
    color: #3d8af6;
  }
  
  .view-info .alert-icon:after {
    background-color: #e8f1fe;
  }
  
  /* green */
  .view-success .icon-Checkmark-Round {
    color: #5abb7a;
  }
  
  .view-success .alert-icon:after {
    background-color: #f0fff5;
  }
  
  /* yellow */
  .view-alert .icon-Alert-Triangle {
    color: #f7bc45;
  }
  
  .view-alert .alert-icon:after {
    background-color: #fff7e8;
  }
  
  /* orange */
  .view-error .icon-Alert-Octagon {
    color: #e0593e;
  }
  
  .view-error .alert-icon:after {
    background-color: #ffefec;
  }
  
  /* MEDIA QUERY - RESPONSIVE */
  @media only screen and (max-width: 600px) {
    .dialogue-window .inner-content h4 {
      font-size: 20px;
      line-height: 1;
      padding: 0 20px 15px 30px;
    }
    .dialogue-window .inner-content p {
      font-size: 14px;
    }
    .dialogue-controls {
      padding-top: 15px;
    }
    .dialogue-controls a.text-link {
      font-size: 12px;
    }
    .dialogue-controls .button {
      height: 32px;
      line-height: 32px;
      font-size: 12px;
      padding: 0 10px;
    }
    .dialogue-window .alert-icon {
      font-size: 1.1rem;
    }
    .dialogue-window .alert-icon:after {
      width: 24px;
      height: 24px;
    }
  }
  /**
   *  FLOATS
   */
  .fleft {
    float: left;
  }
  
  .fright {
    float: right;
  }
  
  .clearfix ::after {
    clear: both;
    content: "";
    display: table;
  }
  
  /**
   *  MARGINS
   */
  .m-xsmall {
    margin: 4px;
  }
  
  .mb-xsmall {
    margin-bottom: 4px;
  }
  
  .m-small {
    margin: 8px;
  }
  
  .mb-small {
    margin-bottom: 8px;
  }
  
  .m-medium {
    margin: 16px;
  }
  
  .mb-medium {
    margin-bottom: 16px;
  }
  
  .m-big {
    margin: 36px;
  }
  
  .mb-big {
    margin-bottom: 36px;
  }
  
  .m-huge {
    margin: 48px;
  }
  
  .mb-huge {
    margin-bottom: 48px;
  }
  
  .m-none {
    margin: 0 !important;
  }
  
  /**
   *  PADDINGS
   */
  .p-small {
    padding: 4px;
  }
  
  .pb-small {
    padding-bottom: 4px;
  }
  
  .p-medium {
    padding: 8px;
  }
  
  .pb-medium {
    padding-bottom: 8px;
  }
  
  .p-big {
    padding: 16px;
  }
  
  .pb-big {
    padding-bottom: 16px;
  }
  
  .p-huge {
    padding: 36px;
  }
  
  .pb-huge {
    padding-bottom: 36px;
  }
  
  /**
   *  OTHERS
   */
  .no-wrap {
    white-space: nowrap;
  }
  
  .overflow-hidden {
    overflow: hidden;
  }
  
  .opacity-low {
    opacity: 0.5;
  }
  
  .rounded-corners {
    border-radius: 5px;
  }
  
  .rounded {
    border-radius: 100%;
  }
  
  /* Accordion Block */
  .accordion-block {
    display: block;
    color: black;
  }
  
  .accordion-row h3,
  .accordion-row .button {
    background: #f8f9fc;
    color: #1d2433;
    font-size: 16px;
    line-height: 1.2;
    padding: 10px;
  }
  
  .accordion-trigger {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  
  .accordion-row h3.active .icon-Chevron-Down {
    transform: rotate(180deg);
  }
  
  .accordion-block .accordion-content {
    display: none;
    font-size: 14px;
    line-height: 1.2;
    color: black;
    padding: 20px 0px 20px 0px;
  }
  
  .accordion-block .accordion-content.active {
    display: block;
  }
  
  .charts-css {
    --color-1: rgba(240, 50, 50, 0.75);
    --color-2: rgba(255, 180, 50, 0.75);
    --color-3: rgba(255, 220, 90, 0.75);
    --color-4: rgba(100, 210, 80, 0.75);
    --color-5: #1B9BDE;
    --color-6: rgba(170, 90, 240, 0.75);
    --color-7: rgba(180, 180, 180, 0.75);
    --color-8: rgba(110, 110, 110, 0.75);
    --color-9: rgba(170, 150, 110, 0.75);
    --color-10: rgba(130, 50, 20, 0.75);
    --chart-bg-color: #f5f5f5;
    --heading-size: 0px;
    --primary-axis-color: rgba(0, 0, 0, 1);
    --primary-axis-style: solid;
    --primary-axis-width: 1px;
    --secondary-axes-color: rgba(0, 0, 0, .15);
    --secondary-axes-style: solid;
    --secondary-axes-width: 1px;
    --data-axes-color: rgba(0, 0, 0, .15);
    --data-axes-style: solid;
    --data-axes-width: 1px;
    --legend-border-color: rgb(200, 200, 200);
    --legend-border-style: solid;
    --legend-border-width: 1px;
  }
  
  @property --color,
  @property --color-1,
  @property --color-2,
  @property --color-3,
  @property --color-4,
  @property --color-5,
  @property --color-6,
  @property --color-7,
  @property --color-8,
  @property --color-9,
  @property --color-10,
  @property --chart-bg-color {
    syntax: "<color>";
    initial-value: transparent;
    inherits: true;
  }
  @property --heading-size {
    syntax: "<length>";
    initial-value: 0;
    inherits: true;
  }
  @property --labels-size {
    syntax: "<length>";
    initial-value: 0;
    inherits: true;
  }
  @property --labels-align {
    syntax: "<string>";
    initial-value: center;
    inherits: true;
  }
  @property --primary-axis-width,
  @property --secondary-axes-width,
  @property --data-axes-width,
  @property --legend-border-width {
    syntax: "<length>";
    initial-value: 1px;
    inherits: true;
  }
  @property --primary-axis-style,
  @property --secondary-axes-style,
  @property --data-axes-style,
  @property --legend-border-style {
    syntax: "<line-style>";
    initial-value: solid;
    inherits: true;
  }
  @property --primary-axis-color,
  @property --secondary-axes-color,
  @property --data-axes-color,
  @property --legend-border-color {
    syntax: "<color>";
    initial-value: transparent;
    inherits: true;
  }
  @property --start,
  @property --end,
  @property --size,
  @property --line-size {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
  }
  /*
   * Chart wrapper element
   */
  .charts-css {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    border: 0;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }
  .charts-css, .charts-css::after, .charts-css::before, .charts-css *, .charts-css *::after, .charts-css *::before {
    box-sizing: border-box;
  }
  
  /*
   * Reset table element
   */
  table.charts-css {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    overflow: initial;
    background-color: transparent;
  }
  table.charts-css caption,
  table.charts-css colgroup,
  table.charts-css thead,
  table.charts-css tbody,
  table.charts-css tr,
  table.charts-css th,
  table.charts-css td {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
  }
  table.charts-css colgroup,
  table.charts-css thead,
  table.charts-css tfoot {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  table.charts-css tbody {
    position: relative;
  }
  
  /*
   * Reset list elements
   */
  ul.charts-css,
  ol.charts-css {
    list-style-type: none;
  }
  ul.charts-css li,
  ol.charts-css li {
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  /*
   * Chart heading
   */
  .charts-css:not(.show-heading) caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .charts-css.show-heading {
    --heading-size: 1.5rem;
  }
  .charts-css.show-heading caption {
    display: block;
    width: 100%;
    height: var(--heading-size);
  }
  
  /*
   * Chart colors
   */
  .charts-css.bar tbody tr:nth-of-type(10n + 1) td, .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 1), .charts-css.column tbody tr:nth-of-type(10n + 1) td, .charts-css.column.multiple tbody tr td:nth-of-type(10n + 1), .charts-css.area tbody tr td:nth-of-type(10n + 1)::before, .charts-css.line tbody tr td:nth-of-type(10n + 1)::before {
    background: var(--color, var(--color-1));
  }
  .charts-css.pie tbody tr:nth-of-type(10n + 1) td, .charts-css.pie.multiple tbody tr td:nth-of-type(10n + 1) {
    --c: var(--color, var(--color-1, transparent) );
  }
  .charts-css.bar tbody tr:nth-of-type(10n + 2) td, .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 2), .charts-css.column tbody tr:nth-of-type(10n + 2) td, .charts-css.column.multiple tbody tr td:nth-of-type(10n + 2), .charts-css.area tbody tr td:nth-of-type(10n + 2)::before, .charts-css.line tbody tr td:nth-of-type(10n + 2)::before {
    background: var(--color, var(--color-2));
  }
  .charts-css.pie tbody tr:nth-of-type(10n + 2) td, .charts-css.pie.multiple tbody tr td:nth-of-type(10n + 2) {
    --c: var(--color, var(--color-2, transparent) );
  }
  .charts-css.bar tbody tr:nth-of-type(10n + 3) td, .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 3), .charts-css.column tbody tr:nth-of-type(10n + 3) td, .charts-css.column.multiple tbody tr td:nth-of-type(10n + 3), .charts-css.area tbody tr td:nth-of-type(10n + 3)::before, .charts-css.line tbody tr td:nth-of-type(10n + 3)::before {
    background: var(--color, var(--color-3));
  }
  .charts-css.pie tbody tr:nth-of-type(10n + 3) td, .charts-css.pie.multiple tbody tr td:nth-of-type(10n + 3) {
    --c: var(--color, var(--color-3, transparent) );
  }
  .charts-css.bar tbody tr:nth-of-type(10n + 4) td, .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 4), .charts-css.column tbody tr:nth-of-type(10n + 4) td, .charts-css.column.multiple tbody tr td:nth-of-type(10n + 4), .charts-css.area tbody tr td:nth-of-type(10n + 4)::before, .charts-css.line tbody tr td:nth-of-type(10n + 4)::before {
    background: var(--color, var(--color-4));
  }
  .charts-css.pie tbody tr:nth-of-type(10n + 4) td, .charts-css.pie.multiple tbody tr td:nth-of-type(10n + 4) {
    --c: var(--color, var(--color-4, transparent) );
  }
  .charts-css.bar tbody tr:nth-of-type(10n + 5) td, .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 5), .charts-css.column tbody tr:nth-of-type(10n + 5) td, .charts-css.column.multiple tbody tr td:nth-of-type(10n + 5), .charts-css.area tbody tr td:nth-of-type(10n + 5)::before, .charts-css.line tbody tr td:nth-of-type(10n + 5)::before {
    background: var(--color, var(--color-5));
  }
  .charts-css.pie tbody tr:nth-of-type(10n + 5) td, .charts-css.pie.multiple tbody tr td:nth-of-type(10n + 5) {
    --c: var(--color, var(--color-5, transparent) );
  }
  .charts-css.bar tbody tr:nth-of-type(10n + 6) td, .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 6), .charts-css.column tbody tr:nth-of-type(10n + 6) td, .charts-css.column.multiple tbody tr td:nth-of-type(10n + 6), .charts-css.area tbody tr td:nth-of-type(10n + 6)::before, .charts-css.line tbody tr td:nth-of-type(10n + 6)::before {
    background: var(--color, var(--color-6));
  }
  .charts-css.pie tbody tr:nth-of-type(10n + 6) td, .charts-css.pie.multiple tbody tr td:nth-of-type(10n + 6) {
    --c: var(--color, var(--color-6, transparent) );
  }
  .charts-css.bar tbody tr:nth-of-type(10n + 7) td, .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 7), .charts-css.column tbody tr:nth-of-type(10n + 7) td, .charts-css.column.multiple tbody tr td:nth-of-type(10n + 7), .charts-css.area tbody tr td:nth-of-type(10n + 7)::before, .charts-css.line tbody tr td:nth-of-type(10n + 7)::before {
    background: var(--color, var(--color-7));
  }
  .charts-css.pie tbody tr:nth-of-type(10n + 7) td, .charts-css.pie.multiple tbody tr td:nth-of-type(10n + 7) {
    --c: var(--color, var(--color-7, transparent) );
  }
  .charts-css.bar tbody tr:nth-of-type(10n + 8) td, .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 8), .charts-css.column tbody tr:nth-of-type(10n + 8) td, .charts-css.column.multiple tbody tr td:nth-of-type(10n + 8), .charts-css.area tbody tr td:nth-of-type(10n + 8)::before, .charts-css.line tbody tr td:nth-of-type(10n + 8)::before {
    background: var(--color, var(--color-8));
  }
  .charts-css.pie tbody tr:nth-of-type(10n + 8) td, .charts-css.pie.multiple tbody tr td:nth-of-type(10n + 8) {
    --c: var(--color, var(--color-8, transparent) );
  }
  .charts-css.bar tbody tr:nth-of-type(10n + 9) td, .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 9), .charts-css.column tbody tr:nth-of-type(10n + 9) td, .charts-css.column.multiple tbody tr td:nth-of-type(10n + 9), .charts-css.area tbody tr td:nth-of-type(10n + 9)::before, .charts-css.line tbody tr td:nth-of-type(10n + 9)::before {
    background: var(--color, var(--color-9));
  }
  .charts-css.pie tbody tr:nth-of-type(10n + 9) td, .charts-css.pie.multiple tbody tr td:nth-of-type(10n + 9) {
    --c: var(--color, var(--color-9, transparent) );
  }
  .charts-css.bar tbody tr:nth-of-type(10n + 10) td, .charts-css.bar.multiple tbody tr td:nth-of-type(10n + 10), .charts-css.column tbody tr:nth-of-type(10n + 10) td, .charts-css.column.multiple tbody tr td:nth-of-type(10n + 10), .charts-css.area tbody tr td:nth-of-type(10n + 10)::before, .charts-css.line tbody tr td:nth-of-type(10n + 10)::before {
    background: var(--color, var(--color-10));
  }
  .charts-css.pie tbody tr:nth-of-type(10n + 10) td, .charts-css.pie.multiple tbody tr td:nth-of-type(10n + 10) {
    --c: var(--color, var(--color-10, transparent) );
  }
  
  /*
   * Chart data
   */
  .charts-css.hide-data .data,
  .charts-css.hide-data .data:not(:focus):not(:focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .charts-css.show-data-on-hover .data {
    transition-duration: 0.3s;
    opacity: 0;
  }
  .charts-css.show-data-on-hover tr:hover .data {
    transition-duration: 0.3s;
    opacity: 1;
  }
  .charts-css.radial.show-data-on-hover tbody:hover .data, .charts-css.pie.show-data-on-hover tbody:hover .data, .charts-css.polar.show-data-on-hover tbody:hover .data, .charts-css.radar.show-data-on-hover tbody:hover .data {
    transition-duration: 0.3s;
    opacity: 1;
  }
  
  /*
   * Chart labels
   */
  .charts-css.bar:not(.show-labels) {
    --labels-size: 0;
  }
  .charts-css.bar:not(.show-labels) tbody tr th {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .charts-css.bar.show-labels {
    --labels-size: 80px;
  }
  .charts-css.bar.show-labels tbody tr th {
    display: flex;
    justify-content: center;
    align-items: var(--labels-align, center);
    flex-direction: column;
  }
  .charts-css.bar.show-labels tr.hide-label th,
  .charts-css.bar.show-labels th.hide-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .charts-css.column:not(.show-labels), .charts-css.area:not(.show-labels), .charts-css.line:not(.show-labels) {
    --labels-size: 0;
  }
  .charts-css.column:not(.show-labels) tbody tr th, .charts-css.area:not(.show-labels) tbody tr th, .charts-css.line:not(.show-labels) tbody tr th {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .charts-css.column.show-labels, .charts-css.area.show-labels, .charts-css.line.show-labels {
    --labels-size: 1.5rem;
  }
  .charts-css.column.show-labels tbody tr th, .charts-css.area.show-labels tbody tr th, .charts-css.line.show-labels tbody tr th {
    display: flex;
    justify-content: center;
    align-items: var(--labels-align, center);
    flex-direction: column;
  }
  .charts-css.column.show-labels tr.hide-label th,
  .charts-css.column.show-labels th.hide-label, .charts-css.area.show-labels tr.hide-label th,
  .charts-css.area.show-labels th.hide-label, .charts-css.line.show-labels tr.hide-label th,
  .charts-css.line.show-labels th.hide-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .charts-css.bar.labels-align-start tbody tr th, .charts-css.column.labels-align-start tbody tr th, .charts-css.area.labels-align-start tbody tr th, .charts-css.line.labels-align-start tbody tr th {
    align-items: var(--labels-align, flex-start);
  }
  .charts-css.bar.labels-align-end tbody tr th, .charts-css.column.labels-align-end tbody tr th, .charts-css.area.labels-align-end tbody tr th, .charts-css.line.labels-align-end tbody tr th {
    align-items: var(--labels-align, flex-end);
  }
  .charts-css.bar.labels-align-center tbody tr th, .charts-css.column.labels-align-center tbody tr th, .charts-css.area.labels-align-center tbody tr th, .charts-css.line.labels-align-center tbody tr th {
    align-items: var(--labels-align, center);
  }
  
  /*
   * Chart axes
   */
  .charts-css.column.show-primary-axis:not(.reverse) tbody tr, .charts-css.area.show-primary-axis:not(.reverse) tbody tr, .charts-css.line.show-primary-axis:not(.reverse) tbody tr {
    border-block-end: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
  }
  .charts-css.column.show-primary-axis.reverse tbody tr, .charts-css.area.show-primary-axis.reverse tbody tr, .charts-css.line.show-primary-axis.reverse tbody tr {
    border-block-start: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
  }
  .charts-css.column.show-1-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-1-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-1-secondary-axes:not(.reverse) tbody tr {
    background-size: 100% 100%;
    background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-1-secondary-axes.reverse tbody tr, .charts-css.area.show-1-secondary-axes.reverse tbody tr, .charts-css.line.show-1-secondary-axes.reverse tbody tr {
    background-size: 100% 100%;
    background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-2-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-2-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-2-secondary-axes:not(.reverse) tbody tr {
    background-size: 100% 50%;
    background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-2-secondary-axes.reverse tbody tr, .charts-css.area.show-2-secondary-axes.reverse tbody tr, .charts-css.line.show-2-secondary-axes.reverse tbody tr {
    background-size: 100% 50%;
    background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-3-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-3-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-3-secondary-axes:not(.reverse) tbody tr {
    background-size: 100% 33.3333333333%;
    background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-3-secondary-axes.reverse tbody tr, .charts-css.area.show-3-secondary-axes.reverse tbody tr, .charts-css.line.show-3-secondary-axes.reverse tbody tr {
    background-size: 100% 33.3333333333%;
    background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-4-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-4-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-4-secondary-axes:not(.reverse) tbody tr {
    background-size: 100% 25%;
    background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-4-secondary-axes.reverse tbody tr, .charts-css.area.show-4-secondary-axes.reverse tbody tr, .charts-css.line.show-4-secondary-axes.reverse tbody tr {
    background-size: 100% 25%;
    background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-5-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-5-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-5-secondary-axes:not(.reverse) tbody tr {
    background-size: 100% 20%;
    background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-5-secondary-axes.reverse tbody tr, .charts-css.area.show-5-secondary-axes.reverse tbody tr, .charts-css.line.show-5-secondary-axes.reverse tbody tr {
    background-size: 100% 20%;
    background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-6-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-6-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-6-secondary-axes:not(.reverse) tbody tr {
    background-size: 100% 16.6666666667%;
    background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-6-secondary-axes.reverse tbody tr, .charts-css.area.show-6-secondary-axes.reverse tbody tr, .charts-css.line.show-6-secondary-axes.reverse tbody tr {
    background-size: 100% 16.6666666667%;
    background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-7-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-7-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-7-secondary-axes:not(.reverse) tbody tr {
    background-size: 100% 14.2857142857%;
    background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-7-secondary-axes.reverse tbody tr, .charts-css.area.show-7-secondary-axes.reverse tbody tr, .charts-css.line.show-7-secondary-axes.reverse tbody tr {
    background-size: 100% 14.2857142857%;
    background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-8-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-8-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-8-secondary-axes:not(.reverse) tbody tr {
    background-size: 100% 12.5%;
    background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-8-secondary-axes.reverse tbody tr, .charts-css.area.show-8-secondary-axes.reverse tbody tr, .charts-css.line.show-8-secondary-axes.reverse tbody tr {
    background-size: 100% 12.5%;
    background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-9-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-9-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-9-secondary-axes:not(.reverse) tbody tr {
    background-size: 100% 11.1111111111%;
    background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-9-secondary-axes.reverse tbody tr, .charts-css.area.show-9-secondary-axes.reverse tbody tr, .charts-css.line.show-9-secondary-axes.reverse tbody tr {
    background-size: 100% 11.1111111111%;
    background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-10-secondary-axes:not(.reverse) tbody tr, .charts-css.area.show-10-secondary-axes:not(.reverse) tbody tr, .charts-css.line.show-10-secondary-axes:not(.reverse) tbody tr {
    background-size: 100% 10%;
    background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-10-secondary-axes.reverse tbody tr, .charts-css.area.show-10-secondary-axes.reverse tbody tr, .charts-css.line.show-10-secondary-axes.reverse tbody tr {
    background-size: 100% 10%;
    background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.column.show-data-axes tbody tr, .charts-css.area.show-data-axes tbody tr, .charts-css.line.show-data-axes tbody tr {
    border-inline-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
  }
  .charts-css.column.show-data-axes:not(.reverse-data) tbody tr:first-of-type, .charts-css.area.show-data-axes:not(.reverse-data) tbody tr:first-of-type, .charts-css.line.show-data-axes:not(.reverse-data) tbody tr:first-of-type {
    border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
  }
  .charts-css.column.show-data-axes.reverse-data tbody tr:last-of-type, .charts-css.area.show-data-axes.reverse-data tbody tr:last-of-type, .charts-css.line.show-data-axes.reverse-data tbody tr:last-of-type {
    border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
  }
  .charts-css.column.show-dataset-axes tbody tr td, .charts-css.area.show-dataset-axes tbody tr td, .charts-css.line.show-dataset-axes tbody tr td {
    border-inline-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
  }
  .charts-css.column.show-dataset-axes:not(.reverse-data) tbody tr:first-of-type td, .charts-css.area.show-dataset-axes:not(.reverse-data) tbody tr:first-of-type td, .charts-css.line.show-dataset-axes:not(.reverse-data) tbody tr:first-of-type td {
    border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
  }
  .charts-css.column.show-dataset-axes.reverse-data tbody tr:last-of-type td, .charts-css.area.show-dataset-axes.reverse-data tbody tr:last-of-type td, .charts-css.line.show-dataset-axes.reverse-data tbody tr:last-of-type td {
    border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
  }
  .charts-css.bar.show-primary-axis:not(.reverse) tbody tr {
    border-inline-start: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
  }
  .charts-css.bar.show-primary-axis.reverse tbody tr {
    border-inline-end: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
  }
  .charts-css.bar.show-1-secondary-axes:not(.reverse) tbody tr {
    background-size: 100% 100%;
    background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-1-secondary-axes.reverse tbody tr {
    background-size: 100% 100%;
    background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-2-secondary-axes:not(.reverse) tbody tr {
    background-size: 50% 100%;
    background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-2-secondary-axes.reverse tbody tr {
    background-size: 50% 100%;
    background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-3-secondary-axes:not(.reverse) tbody tr {
    background-size: 33.3333333333% 100%;
    background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-3-secondary-axes.reverse tbody tr {
    background-size: 33.3333333333% 100%;
    background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-4-secondary-axes:not(.reverse) tbody tr {
    background-size: 25% 100%;
    background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-4-secondary-axes.reverse tbody tr {
    background-size: 25% 100%;
    background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-5-secondary-axes:not(.reverse) tbody tr {
    background-size: 20% 100%;
    background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-5-secondary-axes.reverse tbody tr {
    background-size: 20% 100%;
    background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-6-secondary-axes:not(.reverse) tbody tr {
    background-size: 16.6666666667% 100%;
    background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-6-secondary-axes.reverse tbody tr {
    background-size: 16.6666666667% 100%;
    background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-7-secondary-axes:not(.reverse) tbody tr {
    background-size: 14.2857142857% 100%;
    background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-7-secondary-axes.reverse tbody tr {
    background-size: 14.2857142857% 100%;
    background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-8-secondary-axes:not(.reverse) tbody tr {
    background-size: 12.5% 100%;
    background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-8-secondary-axes.reverse tbody tr {
    background-size: 12.5% 100%;
    background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-9-secondary-axes:not(.reverse) tbody tr {
    background-size: 11.1111111111% 100%;
    background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-9-secondary-axes.reverse tbody tr {
    background-size: 11.1111111111% 100%;
    background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-10-secondary-axes:not(.reverse) tbody tr {
    background-size: 10% 100%;
    background-image: linear-gradient(-90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-10-secondary-axes.reverse tbody tr {
    background-size: 10% 100%;
    background-image: linear-gradient(90deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
  }
  .charts-css.bar.show-data-axes tbody tr {
    border-block-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
  }
  .charts-css.bar.show-data-axes:not(.reverse-data) tbody tr:first-of-type {
    border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
  }
  .charts-css.bar.show-data-axes.reverse-data tbody tr:last-of-type {
    border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
  }
  .charts-css.bar.show-dataset-axes tbody tr td {
    border-block-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
  }
  .charts-css.bar.show-dataset-axes:not(.reverse-data) tbody tr:first-of-type td {
    border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
  }
  .charts-css.bar.show-dataset-axes.reverse-data tbody tr:last-of-type td {
    border-block-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
  }
  .charts-css.radial.show-primary-axis tbody, .charts-css.pie.show-primary-axis tbody, .charts-css.polar.show-primary-axis tbody, .charts-css.radar.show-primary-axis tbody {
    border: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
  }
  .charts-css.radial.show-1-secondary-axes tbody::after, .charts-css.pie.show-1-secondary-axes tbody::after, .charts-css.polar.show-1-secondary-axes tbody::after, .charts-css.radar.show-1-secondary-axes tbody::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: repeating-radial-gradient(closest-side, transparent 0, transparent calc(100% / 2 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 2 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 2), transparent calc(100% / 2 + var(--secondary-axes-width)), transparent calc(100% / 2 + var(--secondary-axes-width)));
    z-index: 2;
  }
  .charts-css.radial.show-2-secondary-axes tbody::after, .charts-css.pie.show-2-secondary-axes tbody::after, .charts-css.polar.show-2-secondary-axes tbody::after, .charts-css.radar.show-2-secondary-axes tbody::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: repeating-radial-gradient(closest-side, transparent 0, transparent calc(100% / 3 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 3 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 3), transparent calc(100% / 3 + var(--secondary-axes-width)), transparent calc(100% / 3 + var(--secondary-axes-width)));
    z-index: 2;
  }
  .charts-css.radial.show-3-secondary-axes tbody::after, .charts-css.pie.show-3-secondary-axes tbody::after, .charts-css.polar.show-3-secondary-axes tbody::after, .charts-css.radar.show-3-secondary-axes tbody::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: repeating-radial-gradient(closest-side, transparent 0, transparent calc(100% / 4 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 4 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 4), transparent calc(100% / 4 + var(--secondary-axes-width)), transparent calc(100% / 4 + var(--secondary-axes-width)));
    z-index: 2;
  }
  .charts-css.radial.show-4-secondary-axes tbody::after, .charts-css.pie.show-4-secondary-axes tbody::after, .charts-css.polar.show-4-secondary-axes tbody::after, .charts-css.radar.show-4-secondary-axes tbody::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: repeating-radial-gradient(closest-side, transparent 0, transparent calc(100% / 5 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 5 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 5), transparent calc(100% / 5 + var(--secondary-axes-width)), transparent calc(100% / 5 + var(--secondary-axes-width)));
    z-index: 2;
  }
  .charts-css.radial.show-5-secondary-axes tbody::after, .charts-css.pie.show-5-secondary-axes tbody::after, .charts-css.polar.show-5-secondary-axes tbody::after, .charts-css.radar.show-5-secondary-axes tbody::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: repeating-radial-gradient(closest-side, transparent 0, transparent calc(100% / 6 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 6 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 6), transparent calc(100% / 6 + var(--secondary-axes-width)), transparent calc(100% / 6 + var(--secondary-axes-width)));
    z-index: 2;
  }
  .charts-css.radial.show-6-secondary-axes tbody::after, .charts-css.pie.show-6-secondary-axes tbody::after, .charts-css.polar.show-6-secondary-axes tbody::after, .charts-css.radar.show-6-secondary-axes tbody::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: repeating-radial-gradient(closest-side, transparent 0, transparent calc(100% / 7 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 7 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 7), transparent calc(100% / 7 + var(--secondary-axes-width)), transparent calc(100% / 7 + var(--secondary-axes-width)));
    z-index: 2;
  }
  .charts-css.radial.show-7-secondary-axes tbody::after, .charts-css.pie.show-7-secondary-axes tbody::after, .charts-css.polar.show-7-secondary-axes tbody::after, .charts-css.radar.show-7-secondary-axes tbody::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: repeating-radial-gradient(closest-side, transparent 0, transparent calc(100% / 8 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 8 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 8), transparent calc(100% / 8 + var(--secondary-axes-width)), transparent calc(100% / 8 + var(--secondary-axes-width)));
    z-index: 2;
  }
  .charts-css.radial.show-8-secondary-axes tbody::after, .charts-css.pie.show-8-secondary-axes tbody::after, .charts-css.polar.show-8-secondary-axes tbody::after, .charts-css.radar.show-8-secondary-axes tbody::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: repeating-radial-gradient(closest-side, transparent 0, transparent calc(100% / 9 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 9 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 9), transparent calc(100% / 9 + var(--secondary-axes-width)), transparent calc(100% / 9 + var(--secondary-axes-width)));
    z-index: 2;
  }
  .charts-css.radial.show-9-secondary-axes tbody::after, .charts-css.pie.show-9-secondary-axes tbody::after, .charts-css.polar.show-9-secondary-axes tbody::after, .charts-css.radar.show-9-secondary-axes tbody::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: repeating-radial-gradient(closest-side, transparent 0, transparent calc(100% / 10 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 10 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 10), transparent calc(100% / 10 + var(--secondary-axes-width)), transparent calc(100% / 10 + var(--secondary-axes-width)));
    z-index: 2;
  }
  .charts-css.radial.show-10-secondary-axes tbody::after, .charts-css.pie.show-10-secondary-axes tbody::after, .charts-css.polar.show-10-secondary-axes tbody::after, .charts-css.radar.show-10-secondary-axes tbody::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: repeating-radial-gradient(closest-side, transparent 0, transparent calc(100% / 11 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 11 - var(--secondary-axes-width)), var(--secondary-axes-color) calc(100% / 11), transparent calc(100% / 11 + var(--secondary-axes-width)), transparent calc(100% / 11 + var(--secondary-axes-width)));
    z-index: 2;
  }
  
  /*
   * Chart legend
   */
  .charts-css.legend {
    padding: 1rem;
    border: var(--legend-border-width) var(--legend-border-style) var(--legend-border-color);
    list-style: none;
    font-size: 1rem;
  }
  .charts-css.legend li {
    line-height: 2;
    display: flex;
    align-items: center;
  }
  .charts-css.legend li::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-inline-end: 0.5rem;
    border-width: 2px;
    border-style: solid;
  }
  .charts-css.legend li:nth-child(1)::before {
    background-color: var(--color-1, transparent);
    border-color: var(--border-color-1, var(--border-color, #000));
  }
  .charts-css.legend li:nth-child(2)::before {
    background-color: var(--color-2, transparent);
    border-color: var(--border-color-2, var(--border-color, #000));
  }
  .charts-css.legend li:nth-child(3)::before {
    background-color: var(--color-3, transparent);
    border-color: var(--border-color-3, var(--border-color, #000));
  }
  .charts-css.legend li:nth-child(4)::before {
    background-color: var(--color-4, transparent);
    border-color: var(--border-color-4, var(--border-color, #000));
  }
  .charts-css.legend li:nth-child(5)::before {
    background-color: var(--color-5, transparent);
    border-color: var(--border-color-5, var(--border-color, #000));
  }
  .charts-css.legend li:nth-child(6)::before {
    background-color: var(--color-6, transparent);
    border-color: var(--border-color-6, var(--border-color, #000));
  }
  .charts-css.legend li:nth-child(7)::before {
    background-color: var(--color-7, transparent);
    border-color: var(--border-color-7, var(--border-color, #000));
  }
  .charts-css.legend li:nth-child(8)::before {
    background-color: var(--color-8, transparent);
    border-color: var(--border-color-8, var(--border-color, #000));
  }
  .charts-css.legend li:nth-child(9)::before {
    background-color: var(--color-9, transparent);
    border-color: var(--border-color-9, var(--border-color, #000));
  }
  .charts-css.legend li:nth-child(10)::before {
    background-color: var(--color-10, transparent);
    border-color: var(--border-color-10, var(--border-color, #000));
  }
  .charts-css:not(.legend-inline) {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .charts-css.legend-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .charts-css.legend-inline li {
    margin-inline-end: 1rem;
  }
  .charts-css.legend-circle li::before {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
  }
  .charts-css.legend-ellipse li::before {
    width: 2rem;
    height: 1rem;
    border-radius: 50%;
  }
  .charts-css.legend-square li::before {
    width: 1rem;
    height: 1rem;
    border-radius: 3px;
  }
  .charts-css.legend-rhombus li::before {
    width: 1rem;
    height: 1rem;
    border-radius: 3px;
    transform: rotate(45deg) scale(0.85);
  }
  .charts-css.legend-rectangle li::before {
    width: 2rem;
    height: 1rem;
    border-radius: 3px;
  }
  .charts-css.legend-line li::before {
    width: 2rem;
    height: 3px;
    border-radius: 2px;
    box-sizing: content-box;
  }
  
  /*
   * Chart tooltips
   */
  .charts-css .tooltip {
    position: absolute;
    z-index: 1;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    padding: 5px 10px;
    border-radius: 6px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
    background-color: #555;
    color: #fff;
    text-align: center;
    font-size: 0.9rem;
  }
  .charts-css .tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent;
  }
  .charts-css td:hover .tooltip {
    visibility: visible;
    opacity: 1;
  }
  
  /*
   * Bar Chart
   */
  .charts-css.bar tbody {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    height: calc(100% - var(--heading-size));
  }
  .charts-css.bar tbody tr {
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    overflow-wrap: anywhere;
    display: flex;
    justify-content: flex-start;
  }
  .charts-css.bar tbody tr th {
    position: absolute;
    top: 0;
    bottom: 0;
  }
  .charts-css.bar tbody tr td {
    display: flex;
    align-items: center;
    width: calc(100% * var(--end, var(--size, 1)));
    height: 100%;
    position: relative;
  }
  .charts-css.bar:not(.reverse) tbody tr {
    align-items: flex-start;
    margin-inline-start: var(--labels-size);
  }
  .charts-css.bar:not(.reverse) tbody tr th {
    left: calc(-1 * var(--labels-size) - var(--primary-axis-width));
    width: var(--labels-size);
  }
  .charts-css.bar:not(.reverse) tbody tr td {
    justify-content: flex-end;
  }
  .charts-css.bar.reverse tbody tr {
    align-items: flex-end;
    margin-inline-end: var(--labels-size);
  }
  .charts-css.bar.reverse tbody tr th {
    right: calc(-1 * var(--labels-size) - var(--primary-axis-width));
    width: var(--labels-size);
  }
  .charts-css.bar.reverse tbody tr td {
    justify-content: flex-start;
  }
  .charts-css.bar:not(.stacked) tbody tr td {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
  }
  .charts-css.bar.stacked tbody tr td {
    flex-grow: unset;
    flex-shrink: unset;
    flex-basis: unset;
  }
  .charts-css.bar.stacked.reverse-datasets tbody tr {
    justify-content: flex-end;
  }
  .charts-css.bar:not(.reverse-data) tbody {
    flex-direction: column;
  }
  .charts-css.bar.reverse-data tbody {
    flex-direction: column-reverse;
  }
  .charts-css.bar:not(.reverse-datasets):not(.stacked) tbody tr {
    flex-direction: column;
  }
  .charts-css.bar:not(.reverse-datasets).stacked:not(.reverse) tbody tr {
    flex-direction: row;
  }
  .charts-css.bar:not(.reverse-datasets).stacked.reverse tbody tr {
    flex-direction: row-reverse;
  }
  .charts-css.bar.reverse-datasets:not(.stacked) tbody tr {
    flex-direction: column-reverse;
  }
  .charts-css.bar.reverse-datasets.stacked:not(.reverse) tbody tr {
    flex-direction: row-reverse;
  }
  .charts-css.bar.reverse-datasets.stacked.reverse tbody tr {
    flex-direction: row;
  }
  .charts-css.bar.data-spacing-1 tbody tr {
    padding-block-start: 1px;
    padding-block-end: 1px;
  }
  .charts-css.bar.data-spacing-2 tbody tr {
    padding-block-start: 2px;
    padding-block-end: 2px;
  }
  .charts-css.bar.data-spacing-3 tbody tr {
    padding-block-start: 3px;
    padding-block-end: 3px;
  }
  .charts-css.bar.data-spacing-4 tbody tr {
    padding-block-start: 4px;
    padding-block-end: 4px;
  }
  .charts-css.bar.data-spacing-5 tbody tr {
    padding-block-start: 5px;
    padding-block-end: 5px;
  }
  .charts-css.bar.data-spacing-6 tbody tr {
    padding-block-start: 6px;
    padding-block-end: 6px;
  }
  .charts-css.bar.data-spacing-7 tbody tr {
    padding-block-start: 7px;
    padding-block-end: 7px;
  }
  .charts-css.bar.data-spacing-8 tbody tr {
    padding-block-start: 8px;
    padding-block-end: 8px;
  }
  .charts-css.bar.data-spacing-9 tbody tr {
    padding-block-start: 9px;
    padding-block-end: 9px;
  }
  .charts-css.bar.data-spacing-10 tbody tr {
    padding-block-start: 10px;
    padding-block-end: 10px;
  }
  .charts-css.bar.data-spacing-11 tbody tr {
    padding-block-start: 11px;
    padding-block-end: 11px;
  }
  .charts-css.bar.data-spacing-12 tbody tr {
    padding-block-start: 12px;
    padding-block-end: 12px;
  }
  .charts-css.bar.data-spacing-13 tbody tr {
    padding-block-start: 13px;
    padding-block-end: 13px;
  }
  .charts-css.bar.data-spacing-14 tbody tr {
    padding-block-start: 14px;
    padding-block-end: 14px;
  }
  .charts-css.bar.data-spacing-15 tbody tr {
    padding-block-start: 15px;
    padding-block-end: 15px;
  }
  .charts-css.bar.data-spacing-16 tbody tr {
    padding-block-start: 16px;
    padding-block-end: 16px;
  }
  .charts-css.bar.data-spacing-17 tbody tr {
    padding-block-start: 17px;
    padding-block-end: 17px;
  }
  .charts-css.bar.data-spacing-18 tbody tr {
    padding-block-start: 18px;
    padding-block-end: 18px;
  }
  .charts-css.bar.data-spacing-19 tbody tr {
    padding-block-start: 19px;
    padding-block-end: 19px;
  }
  .charts-css.bar.data-spacing-20 tbody tr {
    padding-block-start: 20px;
    padding-block-end: 20px;
  }
  .charts-css.bar.datasets-spacing-1 tbody tr td {
    margin-block-start: 1px;
    margin-block-end: 1px;
  }
  .charts-css.bar.datasets-spacing-2 tbody tr td {
    margin-block-start: 2px;
    margin-block-end: 2px;
  }
  .charts-css.bar.datasets-spacing-3 tbody tr td {
    margin-block-start: 3px;
    margin-block-end: 3px;
  }
  .charts-css.bar.datasets-spacing-4 tbody tr td {
    margin-block-start: 4px;
    margin-block-end: 4px;
  }
  .charts-css.bar.datasets-spacing-5 tbody tr td {
    margin-block-start: 5px;
    margin-block-end: 5px;
  }
  .charts-css.bar.datasets-spacing-6 tbody tr td {
    margin-block-start: 6px;
    margin-block-end: 6px;
  }
  .charts-css.bar.datasets-spacing-7 tbody tr td {
    margin-block-start: 7px;
    margin-block-end: 7px;
  }
  .charts-css.bar.datasets-spacing-8 tbody tr td {
    margin-block-start: 8px;
    margin-block-end: 8px;
  }
  .charts-css.bar.datasets-spacing-9 tbody tr td {
    margin-block-start: 9px;
    margin-block-end: 9px;
  }
  .charts-css.bar.datasets-spacing-10 tbody tr td {
    margin-block-start: 10px;
    margin-block-end: 10px;
  }
  .charts-css.bar.datasets-spacing-11 tbody tr td {
    margin-block-start: 11px;
    margin-block-end: 11px;
  }
  .charts-css.bar.datasets-spacing-12 tbody tr td {
    margin-block-start: 12px;
    margin-block-end: 12px;
  }
  .charts-css.bar.datasets-spacing-13 tbody tr td {
    margin-block-start: 13px;
    margin-block-end: 13px;
  }
  .charts-css.bar.datasets-spacing-14 tbody tr td {
    margin-block-start: 14px;
    margin-block-end: 14px;
  }
  .charts-css.bar.datasets-spacing-15 tbody tr td {
    margin-block-start: 15px;
    margin-block-end: 15px;
  }
  .charts-css.bar.datasets-spacing-16 tbody tr td {
    margin-block-start: 16px;
    margin-block-end: 16px;
  }
  .charts-css.bar.datasets-spacing-17 tbody tr td {
    margin-block-start: 17px;
    margin-block-end: 17px;
  }
  .charts-css.bar.datasets-spacing-18 tbody tr td {
    margin-block-start: 18px;
    margin-block-end: 18px;
  }
  .charts-css.bar.datasets-spacing-19 tbody tr td {
    margin-block-start: 19px;
    margin-block-end: 19px;
  }
  .charts-css.bar.datasets-spacing-20 tbody tr td {
    margin-block-start: 20px;
    margin-block-end: 20px;
  }
  
  /*
   * Column Chart
   */
  .charts-css.column tbody {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    height: calc(100% - var(--heading-size));
  }
  .charts-css.column tbody tr {
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    overflow-wrap: anywhere;
    display: flex;
    justify-content: flex-start;
  }
  .charts-css.column tbody tr th {
    position: absolute;
    right: 0;
    left: 0;
  }
  .charts-css.column tbody tr td {
    display: flex;
    justify-content: center;
    width: 100%;
    height: calc(100% * var(--end, var(--size, 1)));
    position: relative;
  }
  .charts-css.column:not(.reverse) tbody tr {
    align-items: flex-end;
    margin-block-end: var(--labels-size);
  }
  .charts-css.column:not(.reverse) tbody tr th {
    bottom: calc(-1 * var(--labels-size) - var(--primary-axis-width));
    height: var(--labels-size);
  }
  .charts-css.column:not(.reverse) tbody tr td {
    align-items: flex-start;
  }
  .charts-css.column.reverse tbody tr {
    align-items: flex-start;
    margin-block-start: var(--labels-size);
  }
  .charts-css.column.reverse tbody tr th {
    top: calc(-1 * var(--labels-size) - var(--primary-axis-width));
    height: var(--labels-size);
  }
  .charts-css.column.reverse tbody tr td {
    align-items: flex-end;
  }
  .charts-css.column:not(.stacked) tbody tr td {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
  }
  .charts-css.column.stacked tbody tr td {
    flex-grow: unset;
    flex-shrink: unset;
    flex-basis: unset;
  }
  .charts-css.column.stacked.reverse-datasets tbody tr {
    justify-content: flex-end;
  }
  .charts-css.column:not(.reverse-data) tbody {
    flex-direction: row;
  }
  .charts-css.column.reverse-data tbody {
    flex-direction: row-reverse;
  }
  .charts-css.column:not(.reverse-datasets):not(.stacked) tbody tr {
    flex-direction: row;
  }
  .charts-css.column:not(.reverse-datasets).stacked:not(.reverse) tbody tr {
    flex-direction: column-reverse;
  }
  .charts-css.column:not(.reverse-datasets).stacked.reverse tbody tr {
    flex-direction: column;
  }
  .charts-css.column.reverse-datasets:not(.stacked) tbody tr {
    flex-direction: row-reverse;
  }
  .charts-css.column.reverse-datasets.stacked:not(.reverse) tbody tr {
    flex-direction: column;
  }
  .charts-css.column.reverse-datasets.stacked.reverse tbody tr {
    flex-direction: column-reverse;
  }
  .charts-css.column.data-spacing-1 tbody tr {
    padding-inline-start: 1px;
    padding-inline-end: 1px;
  }
  .charts-css.column.data-spacing-2 tbody tr {
    padding-inline-start: 2px;
    padding-inline-end: 2px;
  }
  .charts-css.column.data-spacing-3 tbody tr {
    padding-inline-start: 3px;
    padding-inline-end: 3px;
  }
  .charts-css.column.data-spacing-4 tbody tr {
    padding-inline-start: 4px;
    padding-inline-end: 4px;
  }
  .charts-css.column.data-spacing-5 tbody tr {
    padding-inline-start: 5px;
    padding-inline-end: 5px;
  }
  .charts-css.column.data-spacing-6 tbody tr {
    padding-inline-start: 6px;
    padding-inline-end: 6px;
  }
  .charts-css.column.data-spacing-7 tbody tr {
    padding-inline-start: 7px;
    padding-inline-end: 7px;
  }
  .charts-css.column.data-spacing-8 tbody tr {
    padding-inline-start: 8px;
    padding-inline-end: 8px;
  }
  .charts-css.column.data-spacing-9 tbody tr {
    padding-inline-start: 9px;
    padding-inline-end: 9px;
  }
  .charts-css.column.data-spacing-10 tbody tr {
    padding-inline-start: 10px;
    padding-inline-end: 10px;
  }
  .charts-css.column.data-spacing-11 tbody tr {
    padding-inline-start: 11px;
    padding-inline-end: 11px;
  }
  .charts-css.column.data-spacing-12 tbody tr {
    padding-inline-start: 12px;
    padding-inline-end: 12px;
  }
  .charts-css.column.data-spacing-13 tbody tr {
    padding-inline-start: 13px;
    padding-inline-end: 13px;
  }
  .charts-css.column.data-spacing-14 tbody tr {
    padding-inline-start: 14px;
    padding-inline-end: 14px;
  }
  .charts-css.column.data-spacing-15 tbody tr {
    padding-inline-start: 15px;
    padding-inline-end: 15px;
  }
  .charts-css.column.data-spacing-16 tbody tr {
    padding-inline-start: 16px;
    padding-inline-end: 16px;
  }
  .charts-css.column.data-spacing-17 tbody tr {
    padding-inline-start: 17px;
    padding-inline-end: 17px;
  }
  .charts-css.column.data-spacing-18 tbody tr {
    padding-inline-start: 18px;
    padding-inline-end: 18px;
  }
  .charts-css.column.data-spacing-19 tbody tr {
    padding-inline-start: 19px;
    padding-inline-end: 19px;
  }
  .charts-css.column.data-spacing-20 tbody tr {
    padding-inline-start: 20px;
    padding-inline-end: 20px;
  }
  .charts-css.column.datasets-spacing-1 tbody tr td {
    margin-inline-start: 1px;
    margin-inline-end: 1px;
  }
  .charts-css.column.datasets-spacing-2 tbody tr td {
    margin-inline-start: 2px;
    margin-inline-end: 2px;
  }
  .charts-css.column.datasets-spacing-3 tbody tr td {
    margin-inline-start: 3px;
    margin-inline-end: 3px;
  }
  .charts-css.column.datasets-spacing-4 tbody tr td {
    margin-inline-start: 4px;
    margin-inline-end: 4px;
  }
  .charts-css.column.datasets-spacing-5 tbody tr td {
    margin-inline-start: 5px;
    margin-inline-end: 5px;
  }
  .charts-css.column.datasets-spacing-6 tbody tr td {
    margin-inline-start: 6px;
    margin-inline-end: 6px;
  }
  .charts-css.column.datasets-spacing-7 tbody tr td {
    margin-inline-start: 7px;
    margin-inline-end: 7px;
  }
  .charts-css.column.datasets-spacing-8 tbody tr td {
    margin-inline-start: 8px;
    margin-inline-end: 8px;
  }
  .charts-css.column.datasets-spacing-9 tbody tr td {
    margin-inline-start: 9px;
    margin-inline-end: 9px;
  }
  .charts-css.column.datasets-spacing-10 tbody tr td {
    margin-inline-start: 10px;
    margin-inline-end: 10px;
  }
  .charts-css.column.datasets-spacing-11 tbody tr td {
    margin-inline-start: 11px;
    margin-inline-end: 11px;
  }
  .charts-css.column.datasets-spacing-12 tbody tr td {
    margin-inline-start: 12px;
    margin-inline-end: 12px;
  }
  .charts-css.column.datasets-spacing-13 tbody tr td {
    margin-inline-start: 13px;
    margin-inline-end: 13px;
  }
  .charts-css.column.datasets-spacing-14 tbody tr td {
    margin-inline-start: 14px;
    margin-inline-end: 14px;
  }
  .charts-css.column.datasets-spacing-15 tbody tr td {
    margin-inline-start: 15px;
    margin-inline-end: 15px;
  }
  .charts-css.column.datasets-spacing-16 tbody tr td {
    margin-inline-start: 16px;
    margin-inline-end: 16px;
  }
  .charts-css.column.datasets-spacing-17 tbody tr td {
    margin-inline-start: 17px;
    margin-inline-end: 17px;
  }
  .charts-css.column.datasets-spacing-18 tbody tr td {
    margin-inline-start: 18px;
    margin-inline-end: 18px;
  }
  .charts-css.column.datasets-spacing-19 tbody tr td {
    margin-inline-start: 19px;
    margin-inline-end: 19px;
  }
  .charts-css.column.datasets-spacing-20 tbody tr td {
    margin-inline-start: 20px;
    margin-inline-end: 20px;
  }
  
  /*
   * Line Chart
   */
  .charts-css.line {
    --line-size: 3px;
  }
  .charts-css.line tbody {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    height: calc(100% - var(--heading-size));
  }
  .charts-css.line tbody tr {
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    overflow-wrap: anywhere;
    display: flex;
    justify-content: flex-start;
  }
  .charts-css.line tbody tr th {
    position: absolute;
    right: 0;
    left: 0;
  }
  .charts-css.line tbody tr td {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
  }
  .charts-css.line tbody tr td::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
  .charts-css.line tbody tr td::after {
    content: "";
    width: 100%;
  }
  .charts-css.line:not(.reverse) tbody tr {
    align-items: flex-end;
    margin-block-end: var(--labels-size);
  }
  .charts-css.line:not(.reverse) tbody tr th {
    bottom: calc(-1 * var(--labels-size) - var(--primary-axis-width));
    height: var(--labels-size);
  }
  .charts-css.line:not(.reverse) tbody tr td {
    align-items: flex-start;
  }
  .charts-css.line.reverse tbody tr {
    align-items: flex-start;
    margin-block-start: var(--labels-size);
  }
  .charts-css.line.reverse tbody tr th {
    top: calc(-1 * var(--labels-size) - var(--primary-axis-width));
    height: var(--labels-size);
  }
  .charts-css.line.reverse tbody tr td {
    align-items: flex-end;
  }
  .charts-css.line:not(.reverse-data) tbody {
    flex-direction: row;
  }
  .charts-css.line.reverse-data tbody {
    flex-direction: row-reverse;
  }
  .charts-css.line:not(.reverse-datasets) tbody tr {
    flex-direction: row;
  }
  .charts-css.line.reverse-datasets tbody tr {
    flex-direction: row-reverse;
  }
  .charts-css.line:not(.reverse):not(.reverse-data) tbody tr td {
    justify-content: flex-end;
    align-items: flex-end;
  }
  .charts-css.line:not(.reverse):not(.reverse-data) tbody tr td::before {
    clip-path: polygon(0% calc(100% * (1 - var(--start, var(--end, var(--size))))), 100% calc(100% * (1 - var(--end, var(--size)))), 100% calc(100% * (1 - var(--end, var(--size))) - var(--line-size)), 0% calc(100% * (1 - var(--start, var(--end, var(--size)))) - var(--line-size)));
  }
  .charts-css.line:not(.reverse):not(.reverse-data) tbody tr td .data {
    transform: translateX(50%);
  }
  .charts-css.line:not(.reverse):not(.reverse-data) tbody tr td::after {
    height: calc(100% * var(--end, var(--size)));
  }
  .charts-css.line:not(.reverse).reverse-data tbody tr td {
    justify-content: flex-end;
    align-items: flex-start;
  }
  .charts-css.line:not(.reverse).reverse-data tbody tr td::before {
    clip-path: polygon(0% calc(100% * (1 - var(--end, var(--size)))), 100% calc(100% * (1 - var(--start, var(--end, var(--size))))), 100% calc(100% * (1 - var(--start, var(--end, var(--size)))) - var(--line-size)), 0% calc(100% * (1 - var(--end, var(--size))) - var(--line-size)));
  }
  .charts-css.line:not(.reverse).reverse-data tbody tr td .data {
    transform: translateX(-50%);
  }
  .charts-css.line:not(.reverse).reverse-data tbody tr td::after {
    height: calc(100% * var(--end, var(--size)));
  }
  .charts-css.line.reverse:not(.reverse-data) tbody tr td {
    justify-content: flex-end;
    align-items: flex-end;
  }
  .charts-css.line.reverse:not(.reverse-data) tbody tr td::before {
    clip-path: polygon(0% calc(100% * var(--start, var(--end, var(--size))) - var(--line-size)), 100% calc(100% * var(--end, var(--size)) - var(--line-size)), 100% calc(100% * var(--end, var(--size))), 0% calc(100% * var(--start, var(--end, var(--size)))));
  }
  .charts-css.line.reverse:not(.reverse-data) tbody tr td .data {
    transform: translateX(50%);
  }
  .charts-css.line.reverse:not(.reverse-data) tbody tr td::after {
    height: calc(100% * (1 - var(--end, var(--size))));
  }
  .charts-css.line.reverse.reverse-data tbody tr td {
    justify-content: flex-end;
    align-items: flex-start;
  }
  .charts-css.line.reverse.reverse-data tbody tr td::before {
    clip-path: polygon(0% calc(100% * var(--end, var(--size)) - var(--line-size)), 100% calc(100% * var(--start, var(--end, var(--size))) - var(--line-size)), 100% calc(100% * var(--start, var(--end, var(--size)))), 0% calc(100% * var(--end, var(--size))));
  }
  .charts-css.line.reverse.reverse-data tbody tr td .data {
    transform: translateX(-50%);
  }
  .charts-css.line.reverse.reverse-data tbody tr td::after {
    height: calc(100% * (1 - var(--end, var(--size))));
  }
  .charts-css.line.data-spacing-1 tbody tr td::before, .charts-css.line.datasets-spacing-1 tbody tr td::before {
    margin-inline-start: 1px;
    margin-inline-end: 1px;
  }
  .charts-css.line.data-spacing-2 tbody tr td::before, .charts-css.line.datasets-spacing-2 tbody tr td::before {
    margin-inline-start: 2px;
    margin-inline-end: 2px;
  }
  .charts-css.line.data-spacing-3 tbody tr td::before, .charts-css.line.datasets-spacing-3 tbody tr td::before {
    margin-inline-start: 3px;
    margin-inline-end: 3px;
  }
  .charts-css.line.data-spacing-4 tbody tr td::before, .charts-css.line.datasets-spacing-4 tbody tr td::before {
    margin-inline-start: 4px;
    margin-inline-end: 4px;
  }
  .charts-css.line.data-spacing-5 tbody tr td::before, .charts-css.line.datasets-spacing-5 tbody tr td::before {
    margin-inline-start: 5px;
    margin-inline-end: 5px;
  }
  .charts-css.line.data-spacing-6 tbody tr td::before, .charts-css.line.datasets-spacing-6 tbody tr td::before {
    margin-inline-start: 6px;
    margin-inline-end: 6px;
  }
  .charts-css.line.data-spacing-7 tbody tr td::before, .charts-css.line.datasets-spacing-7 tbody tr td::before {
    margin-inline-start: 7px;
    margin-inline-end: 7px;
  }
  .charts-css.line.data-spacing-8 tbody tr td::before, .charts-css.line.datasets-spacing-8 tbody tr td::before {
    margin-inline-start: 8px;
    margin-inline-end: 8px;
  }
  .charts-css.line.data-spacing-9 tbody tr td::before, .charts-css.line.datasets-spacing-9 tbody tr td::before {
    margin-inline-start: 9px;
    margin-inline-end: 9px;
  }
  .charts-css.line.data-spacing-10 tbody tr td::before, .charts-css.line.datasets-spacing-10 tbody tr td::before {
    margin-inline-start: 10px;
    margin-inline-end: 10px;
  }
  .charts-css.line.data-spacing-11 tbody tr td::before, .charts-css.line.datasets-spacing-11 tbody tr td::before {
    margin-inline-start: 11px;
    margin-inline-end: 11px;
  }
  .charts-css.line.data-spacing-12 tbody tr td::before, .charts-css.line.datasets-spacing-12 tbody tr td::before {
    margin-inline-start: 12px;
    margin-inline-end: 12px;
  }
  .charts-css.line.data-spacing-13 tbody tr td::before, .charts-css.line.datasets-spacing-13 tbody tr td::before {
    margin-inline-start: 13px;
    margin-inline-end: 13px;
  }
  .charts-css.line.data-spacing-14 tbody tr td::before, .charts-css.line.datasets-spacing-14 tbody tr td::before {
    margin-inline-start: 14px;
    margin-inline-end: 14px;
  }
  .charts-css.line.data-spacing-15 tbody tr td::before, .charts-css.line.datasets-spacing-15 tbody tr td::before {
    margin-inline-start: 15px;
    margin-inline-end: 15px;
  }
  .charts-css.line.data-spacing-16 tbody tr td::before, .charts-css.line.datasets-spacing-16 tbody tr td::before {
    margin-inline-start: 16px;
    margin-inline-end: 16px;
  }
  .charts-css.line.data-spacing-17 tbody tr td::before, .charts-css.line.datasets-spacing-17 tbody tr td::before {
    margin-inline-start: 17px;
    margin-inline-end: 17px;
  }
  .charts-css.line.data-spacing-18 tbody tr td::before, .charts-css.line.datasets-spacing-18 tbody tr td::before {
    margin-inline-start: 18px;
    margin-inline-end: 18px;
  }
  .charts-css.line.data-spacing-19 tbody tr td::before, .charts-css.line.datasets-spacing-19 tbody tr td::before {
    margin-inline-start: 19px;
    margin-inline-end: 19px;
  }
  .charts-css.line.data-spacing-20 tbody tr td::before, .charts-css.line.datasets-spacing-20 tbody tr td::before {
    margin-inline-start: 20px;
    margin-inline-end: 20px;
  }
  
  /* Modal */
  .datepicker-modal {
    max-width: 325px;
    min-width: 300px;
    max-height: none;
  }
  
  .datepicker-container.modal-content {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  
  .datepicker-controls {
    display: flex;
    justify-content: space-between;
    width: 280px;
    margin: 0 auto;
  }
  .datepicker-controls .selects-container {
    display: flex;
  }
  .datepicker-controls .select-wrapper input {
    border-bottom: none;
    text-align: center;
    margin: 0;
  }
  .datepicker-controls .select-wrapper input:focus {
    border-bottom: none;
  }
  .datepicker-controls .select-wrapper .caret {
    display: none;
  }
  .datepicker-controls .select-year input {
    width: 50px;
  }
  .datepicker-controls .select-month input {
    width: 80px;
  }
  
  .month-prev, .month-next {
    margin-top: 4px;
    cursor: pointer;
    background-color: transparent;
    border: none;
  }
  
  /* Date Display */
  .datepicker-date-display {
    flex: 1 auto;
    color: gray;
    padding: 20px 22px;
    font-weight: 500;
  }
  .datepicker-date-display .year-text {
    display: block;
    font-size: 1.5rem;
    line-height: 25px;
    color: gray;
  }
  .datepicker-date-display .date-text {
    display: block;
    font-size: 2.8rem;
    line-height: 47px;
    font-weight: 500;
  }
  
  /* Calendar */
  .datepicker-calendar-container {
    flex: 2.5 auto;
  }
  
  .datepicker-table {
    width: 280px;
    font-size: 1rem;
    margin: 0 auto;
  }
  .datepicker-table thead {
    border-bottom: none;
  }
  .datepicker-table th {
    padding: 10px 5px;
    text-align: center;
  }
  .datepicker-table tr {
    border: none;
  }
  .datepicker-table abbr {
    text-decoration: none;
    color: gray;
  }
  .datepicker-table td {
    border-radius: 50%;
    padding: 0;
  }
  .datepicker-table td.is-today {
    color: gray;
  }
  .datepicker-table td.is-selected {
    color: gray;
    color: #fff;
  }
  .datepicker-table td.is-outside-current-month, .datepicker-table td.is-disabled {
    color: gray;
    pointer-events: none;
  }
  
  .datepicker-day-button {
    background-color: transparent;
    border: none;
    line-height: 38px;
    display: block;
    width: 100%;
    border-radius: 50%;
    padding: 0 5px;
    cursor: pointer;
    color: inherit;
  }
  .datepicker-day-button:focus {
    color: gray;
  }
  
  /* Footer */
  .datepicker-footer {
    width: 280px;
    margin: 0 auto;
    padding-bottom: 5px;
    display: flex;
    justify-content: space-between;
  }
  
  .datepicker-cancel,
  .datepicker-clear,
  .datepicker-today,
  .datepicker-done {
    color: gray;
    padding: 0 1rem;
  }
  
  .modal-table button {
    background: #E8F1FE;
    border: 1px solid #ACCBF6;
    color: #03a9f4;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-block;
    margin: 5px;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.2s ease-in-out;
    white-space: nowrap;
  }
  
  .modal-table button:active, .modal-table button:hover, .modal-table button:focus {
    background: #C2D8F6;
    color: rgba(3, 169, 244, 0.8);
    border: 1px solid #ACCBF6;
    cursor: pointer;
    border-radius: 4px;
    display: inline-block;
    margin: 5px;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.2s ease-in-out;
    white-space: nowrap;
  }
  
  .scale-transition {
    transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
  }
  .scale-transition.scale-out {
    transform: scale(0);
    transition: transform 0.2s;
  }
  .scale-transition.scale-in {
    transform: scale(1);
  }
  
  .modal {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    background-color: #fafafa;
    padding: 0;
    max-height: 70%;
    width: 55%;
    margin: auto;
    overflow-y: auto;
    border-radius: 2px;
    will-change: top, opacity;
  }
  .modal:focus {
    outline: none;
  }
  .modal h1, .modal h2, .modal h3, .modal h4 {
    margin-top: 0;
  }
  .modal .modal-content {
    padding: 24px;
  }
  .modal .modal-close {
    cursor: pointer;
  }
  .modal .modal-footer {
    border-radius: 0 0 2px 2px;
    background-color: #fafafa;
    padding: 4px 6px;
    height: 56px;
    width: 100%;
    text-align: right;
  }
  .modal .modal-footer .btn, .modal .modal-footer .btn-flat {
    margin: 6px 0;
  }
  
  .modal-overlay {
    position: fixed;
    z-index: 999;
    top: -25%;
    left: 0;
    bottom: 0;
    right: 0;
    height: 125%;
    width: 100%;
    background: #000;
    display: none;
    will-change: opacity;
  }
  
  .modal.modal-fixed-footer {
    padding: 0;
    height: 70%;
  }
  .modal.modal-fixed-footer .modal-content {
    position: absolute;
    height: calc(100% - 56px);
    max-height: 100%;
    width: 100%;
    overflow-y: auto;
  }
  .modal.modal-fixed-footer .modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
  }
  
  .modal.bottom-sheet {
    top: auto;
    bottom: -100%;
    margin: 0;
    width: 100%;
    max-height: 45%;
    border-radius: 0;
    will-change: bottom, opacity;
  }
  
  .scale-transition {
    transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
  }
  .scale-transition.scale-out {
    transform: scale(0);
    transition: transform 0.2s !important;
  }
  .scale-transition.scale-in {
    transform: scale(1);
  }
  
  .scale-collapsible {
    transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
  }
  .scale-collapsible.scale-out {
    display: none;
    transition: transform 0.2s !important;
  }
  .scale-collapsible.scale-in {
    transform: scale(1);
  }
  
  .waves-effect {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    z-index: 1;
    transition: 0.3s ease-out;
  }
  .waves-effect .waves-ripple {
    position: absolute;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    opacity: 0;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.7s ease-out;
    transition-property: transform, opacity;
    transform: scale(0);
    pointer-events: none;
  }
  .waves-effect.waves-light .waves-ripple {
    background-color: rgba(255, 255, 255, 0.45);
  }
  .waves-effect.waves-red .waves-ripple {
    background-color: rgba(244, 67, 54, 0.7);
  }
  .waves-effect.waves-yellow .waves-ripple {
    background-color: rgba(255, 235, 59, 0.7);
  }
  .waves-effect.waves-orange .waves-ripple {
    background-color: rgba(255, 152, 0, 0.7);
  }
  .waves-effect.waves-purple .waves-ripple {
    background-color: rgba(156, 39, 176, 0.7);
  }
  .waves-effect.waves-green .waves-ripple {
    background-color: rgba(76, 175, 80, 0.7);
  }
  .waves-effect.waves-teal .waves-ripple {
    background-color: rgba(0, 150, 136, 0.7);
  }
  .waves-effect input[type=button], .waves-effect input[type=reset], .waves-effect input[type=submit] {
    border: 0;
    font-style: normal;
    font-size: inherit;
    text-transform: inherit;
    background: none;
  }
  .waves-effect img {
    position: relative;
    z-index: -1;
  }
  
  .waves-notransition {
    transition: none !important;
  }
  
  .waves-input-wrapper {
    border-radius: 0.2em;
    vertical-align: bottom;
  }
  .waves-input-wrapper .waves-button-input {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
  }
  
  .waves-circle {
    text-align: center;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    border-radius: 50%;
    -webkit-mask-image: none;
  }
  
  .waves-block {
    display: block;
  }
  
  /* Firefox Bug: link not triggered */
  .waves-effect .waves-ripple {
    z-index: -1;
  }
  
  /**
   *  LOADING BAR
   *
   *  Markup:
   *  ---------
   *  <div class="loadingBar"></div>
   *
   */
  .loadingBar {
    height: 6px;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1000;
  }
  .loadingBar::before {
    animation: loading 2s linear infinite;
    background-color: #3D8AF6;
    content: "";
    display: block;
    height: 6px;
    left: -300px;
    position: absolute;
    width: 300px;
  }
  
  @keyframes loading {
    from {
      left: -300px;
      width: 30%;
    }
    50% {
      width: 30%;
    }
    70% {
      width: 70%;
    }
    80% {
      left: 50%;
    }
    95% {
      left: 120%;
    }
    to {
      left: 100%;
    }
  }
  .general-contaiter {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 16px;
    gap: 16px;
    margin: 20px;
    height: 432px;
    /* Neutral/200 */
    background: #F1F3F9;
    border-radius: 5px;
  }
  
  .container-gift {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 16px;
    gap: 16px;
    width: 100%;
    background: #FFFFFF;
    border-radius: 3px;
  }
  
  /**
   * LAYOUT
   */
  .section {
    padding-bottom: 36px;
    padding-top: 36px;
  }
  @media (min-width: 768px) {
    .section {
      padding-bottom: 72px;
      padding-top: 72px;
    }
  }
  .section + .section {
    padding-top: 0;
  }
  
  .container {
    background-color: transparent;
    margin: 0 auto;
    max-width: 1380px;
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
  }
  @media (min-width: 768px) {
    .container {
      padding-left: 0px;
      padding-right: 0px;
    }
  }
  
  .container-medium {
    margin: 0 auto;
    max-width: 944px;
    padding-left: 0px;
    padding-right: 0px;
  }
  @media (min-width: 768px) {
    .container-medium {
      padding-left: 0px;
      padding-right: 0px;
    }
  }
  
  .container-small {
    margin: 0 auto;
    max-width: 400px;
    padding-left: 0px;
    padding-right: 0px;
  }
  @media (min-width: 768px) {
    .container-small {
      padding-left: 0px;
      padding-right: 0px;
    }
  }
  
  .content-area {
    display: flex;
  }
  
  .site-main {
    width: 100%;
  }
  
  /* Base Styles */
  body {
    margin: auto;
  }
  
  /* Header Information */
  .info {
    display: flex;
    flex-direction: row;
  }
  
  dt {
    margin-top: 5px;
    margin-left: 10px;
  }
  
  /* Menu Styles */
  .menu, .flex-item-nav {
    display: flex;
    flex-direction: column;
    width: 250px;
    background: #1E2833;
    margin-left: 20px;
    gap: 8px;
  }
  
  .menu > a, .flex-item-nav {
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.2);
  }
  
  /* Main Content Block */
  .item-block-base {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100%;
  }
  
  .item-block-content {
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    height: 70%;
    width: 100%;
  }
  
  .item-block-menu {
    height: 50px;
    background-color: #1E2833;
  }
  
  /* Contact Sub Menu */
  .contact-sub-menu {
    margin-top: 180%;
  }
  
  /* Profile and Contact Styles */
  .profile, .contact, .profile-name {
    padding-bottom: 15px;
    padding-top: 15px;
  }
  
  /* Small Flex Block */
  .flex-block-small {
    display: flex;
    flex-direction: column-reverse;
    height: 60px;
    width: 100%;
    background-color: #CBD7E5;
  }
  
  .main-name {
    margin-left: 25px;
    margin-right: 25px;
  }
  
  /* Table Flex Block */
  .flex-block-table {
    width: 100%;
    background-color: white;
  }
  
  /* Register Flex Block */
  .flex-block-register {
    display: flex;
    justify-content: flex-start;
  }
  
  /* Forms Styles */
  .forms, .forms-edit {
    display: flex;
    flex-wrap: wrap;
    color: #3D94F6;
    box-sizing: border-box;
    margin-top: 10px;
  }
  
  .forms {
    flex-direction: column;
    align-items: start;
    margin-left: 20px;
    margin-right: 20px;
  }
  
  .forms-edit {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-evenly;
    width: 560px;
  }
  
  /* Subtitle Flex Container */
  .flex-subtitle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  /* Label Styles */
  label {
    font-size: 14px;
    color: rgba(29, 36, 51, 0.8);
  }
  
  /* Button Flex Container */
  .button-flex {
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
  }
  
  /**
   *  FORMS
   *
   *  Markup:
   *  ---------
   *  <div class="input input-fullWidth">
   *    <input id="#" placeholder="#" type="text">
   *  </div>
   *
   *  <div class="select select-fullWidth">
   *    <select name="#" id="#">
   *      <option>Option 1</option>
   *      <option>Option 2</option>
   *    </select>
   *  </div>
   *
   *  <div class="textarea">
   *    <textarea id="#"></textarea>
   *  </div>
   *
   *  <div class="radio">
   *    <input id="#" name="#" type="radio" value="">
   *    <label for="#">Radio button</label>
   *  </div>
   *
   *  <div class="checkbox">
   *    <input id="#" name="#" type="checkbox" value="">
   *    <label for="#">Checkbox</label>
   *  </div>
   */
  select {
    box-sizing: border-box;
    border: none;
    background: #FFFFFF;
    padding: 6px;
    color: #333;
    appearance: textfield;
    transition: 0.3s;
    height: 40px;
    cursor: pointer;
  }
  
  input,
  textarea {
    box-sizing: border-box;
    border: 1px solid #BFCBD9;
    border-radius: 5px;
    background: #FFFFFF;
    padding: 0.5em;
    color: #333;
    appearance: textfield;
    transition: 0.3s;
    height: 40px;
    cursor: text;
  }
  input :focus,
  textarea :focus {
    outline: none;
    border: 1px solid #3D8AF6;
  }
  input :focus :invalid,
  textarea :focus :invalid {
    outline: none;
    border: 1px solid #3D8AF6;
  }
  
  input[type=checkbox] {
    height: 14px;
    cursor: pointer;
  }
  
  label {
    display: block;
    font-weight: normal;
    cursor: pointer;
  }
  
  .textarea,
  .input,
  .select {
    border: 1px solid #BFCBD9;
    border-radius: 5px;
    box-shadow: none;
    font-weight: normal;
    overflow: hidden;
    background: #FFFFFF;
    display: inline-block;
  }
  .textarea :focus,
  .input :focus,
  .select :focus {
    outline: none;
    border: 1px solid #3D8AF6;
  }
  .textarea.has-error,
  .input.has-error,
  .select.has-error {
    background: #FFFFFF;
    border: 1px solid #E0593E;
    margin-bottom: 0;
    height: 35px;
  }
  .textarea.has-success,
  .input.has-success,
  .select.has-success {
    background: #FFFFFF;
    border: 1px solid #5ABB7A;
    margin-bottom: 0;
    height: 35px;
  }
  
  .select {
    background: #FFFFFF;
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-right: 20px;
  }
  .select:last-child {
    margin-right: 0;
  }
  .select-withIcon input {
    padding-right: 18px;
  }
  .select-fullWidth {
    display: block;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  .select :focus {
    outline: none;
    border: 1px solid #3D8AF6;
  }
  .select select {
    appearance: none;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: #3F444D;
    display: block;
    font-size: 14px;
    padding: 6px;
    transition: background-color 0.2s ease-in-out;
    width: 100%;
    cursor: pointer;
    margin-right: 20px;
  }
  .select select:active, .select select:focus {
    background: #FFFFFF;
    border: 1px solid #3D8AF6;
    outline: none;
  }
  .select select::-ms-expand {
    display: none;
  }
  .select::after, .select::before {
    content: "";
    position: absolute;
    right: 15px;
    top: 40%;
    border-left: 5px solid transparent;
    border-top: 5px solid #333;
    border-right: 5px solid transparent;
    z-index: 9;
  }
  .textarea {
    background: #FFFFFF;
    cursor: text;
  }
  .textarea-fullWidth {
    display: block;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  .textarea-shortWidth {
    display: block;
    margin-left: 0;
    margin-right: 0;
    width: 150px;
  }
  .textarea textarea {
    background: transparent;
    border: 0;
    color: rgba(29, 36, 51, 0.8);
    display: block;
    font-size: 14px;
    line-height: 1.5em;
    margin: 0;
    min-height: 120px;
    padding: 8px 16px;
    transition: background-color 0.2s ease-in-out;
    width: 100%;
    height: 35px;
    cursor: text;
  }
  .textarea textarea::placeholder {
    color: #969da6;
  }
  .textarea textarea:focus, .textarea textarea:active {
    background: #FFFFFF;
    border: 0;
    outline: none;
  }
  
  .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: transparent;
    border-bottom-style: dashed;
  }
  
  .checkbox {
    margin-bottom: 8px;
    position: relative;
    cursor: pointer;
  }
  .checkbox input[type=checkbox] {
    display: none;
    cursor: pointer;
  }
  .checkbox input[type=checkbox]:checked + label::after {
    animation: checkboxAndRadioAnimation 0.25s;
    content: "";
    transform: scale(1) rotate(45deg);
  }
  .checkbox input[type=checkbox] + label {
    display: block;
    overflow: hidden;
    padding-left: 30px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .checkbox input[type=checkbox] + label::before {
    background-color: #FFFFFF;
    border: 1px solid #BFCBD9;
    border-radius: 4px;
    content: "";
    height: 18px;
    width: 18px;
    display: inline-block;
    left: 0;
    margin-top: -6px;
    position: absolute;
    top: 40%;
  }
  .checkbox input[type=checkbox] + label::after {
    border-bottom: 3px solid #3D8AF6;
    border-right: 3px solid #3D8AF6;
    display: block;
    height: 12px;
    left: 11px;
    margin-left: -4px;
    margin-top: -7px;
    position: absolute;
    top: 50%;
    width: 7px;
    z-index: 1;
  }
  
  .radio {
    margin-bottom: 8px;
    position: relative;
    cursor: pointer;
  }
  .radio input[type=radio] {
    display: none;
  }
  .radio input[type=radio]:checked + label::after {
    animation: checkboxAndRadioAnimation 0.25s;
    content: "";
    transform: scale(1) rotate(45deg);
  }
  .radio input[type=radio] + label {
    display: block;
    overflow: hidden;
    padding-left: 30px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .radio input[type=radio] + label::before {
    background-color: #eceff1;
    border: 3px solid #eceff1;
    border-radius: 20px;
    content: "";
    display: inline-block;
    height: 20px;
    left: 0;
    margin-top: -7px;
    position: absolute;
    top: 50%;
    width: 20px;
  }
  .radio input[type=radio] + label::after {
    background-color: #3D8AF6;
    border: 3px solid #3D8AF6;
    border-radius: 20px;
    display: block;
    height: 10px;
    left: 11px;
    margin-left: -6px;
    margin-top: -6px;
    position: absolute;
    top: 13px;
    width: 10px;
    z-index: 1;
  }
  
  @keyframes checkboxAndRadioAnimation {
    0% {
      transform: scale(0) rotate(45deg);
    }
    50% {
      transform: scale(1.5) rotate(45deg);
    }
    100% {
      transform: scale(1) rotate(45deg);
    }
  }
  .input {
    background-color: #fff;
    margin-right: 10px;
    width: 100%;
    cursor: text;
    position: relative;
  }
  .input :focus,
  .input :active {
    background-color: #fbfbfc;
    border-radius: 5px;
  }
  .input input[type=text],
  .input input[type=number] {
    background: #fff;
    border: 0;
    box-shadow: none;
    font-size: 16px;
    margin: 0;
    outline: none;
    padding: 8px;
    width: 100%;
    cursor: text;
  }
  .input input[type=text]::placeholder,
  .input input[type=number]::placeholder {
    color: #969da6;
  }
  .input-withIcon input {
    padding-right: 18px;
  }
  .input-icon {
    fill: #969da6;
    height: 9px;
    position: absolute;
    right: 16px;
    top: 50%;
    width: 9px;
  }
  .input-fullWidth {
    display: block;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  
  /**
   *  FORM COLLAPSED (items in row without gap between them)
   *
   *  Markup:
   *  -------
   *
   *  <div class="formCollapsed">
   *    <div class="input formCollapsed-item formCollapsed-itemPrimary">
   *      <input id="name" placeholder="Klingon search" type="text" />
   *    </div>
   *    <div class="select formCollapsed-item">
   *      <select name="country-code" id="country-code">
   *        <option value="AO"> Angola</option>
   *      </select>
   *    </div>
   *    <button class="formCollapsed-item button button-primary">
   *      Search
   *    </button>
   *  </div>
   **/
  *:disabled {
    background-color: rgba(162, 162, 162, 0.1);
    color: #b0b0b0;
    opacity: 1;
  }
  
  .readonly {
    background-color: #f9f9f9;
    color: #b0b0b0;
  }
  
  input:read-only,
  textarea:read-only {
    background-color: rgba(162, 162, 162, 0.1);
  }
  
  .formjoined {
    display: flex;
    cursor: text;
    width: max-content;
  }
  .formjoined-item {
    border-radius: 0;
    margin: 0;
  }
  .formjoined-item:first-child {
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
  }
  .formjoined-item:last-child {
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
  }
  .formjoined-item:not(:last-child) {
    border-right: 0;
  }
  .formjoined-itemPrimary {
    flex: 1;
  }
  
  .autocomplete {
    position: absolute;
  }
  
  i.icon {
    text-align: center;
    width: 26px;
    height: 100%;
    line-height: 26px;
    margin-left: 15px;
    position: relative;
    z-index: 1;
    float: left;
    margin-top: 5px;
  }
  
  i.icon + input {
    padding-left: 26px;
  }
  
  #myUL {
    list-style: none;
  }
  
  .gap-12px {
    gap: 0.75rem;
  }
  
  .gap-14px {
    gap: 0.875rem;
  }
  
  .gap-16px {
    gap: 1rem;
  }
  
  .gap-18px {
    gap: 1.125rem;
  }
  
  .gap-20px {
    gap: 1.25rem;
  }
  
  .gap-24px {
    gap: 1.5rem;
  }
  
  .gap-30px {
    gap: 1.875rem;
  }
  
  .gap-32px {
    gap: 2rem;
  }
  
  @font-face {
    font-display: swap;
    font-family: Erply Ladna;
    font-weight: 400;
    src: url(https://cdn.erply.com/files/533252/ErplyLadna-Regular.woff) format("woff");
  }
  @font-face {
    font-display: swap;
    font-family: Erply Ladna;
    font-weight: 500;
    src: url(https://cdn.erply.com/files/533252/ErplyLadna-Medium.woff) format("woff");
  }
  @font-face {
    font-display: swap;
    font-family: Erply Ladna;
    font-weight: 600;
    src: url(https://cdn.erply.com/files/533252/ErplyLadna-SemiBold.woff) format("woff");
  }
  @font-face {
    font-display: swap;
    font-family: Erply Ladna;
    font-weight: 700;
    src: url(https://cdn.erply.com/files/533252/ErplyLadna-Bold.woff) format("woff");
  }
  /**
   *  TABS
   *
   *  Markup:
   *  -------
   *
   *  <div class="tabs">
   *    <a href="#" title="#" class="tabs-item">[...]</a>
   *    <a href="#" title="#" class="tabs-item is-selected">[...]</a>
   *  </div>
   *
   */
  .tabs-item a:link {
    color: #3D94F6;
  }
  
  .tabs {
    border-bottom: 1px solid #E1E6EF;
    text-align: left;
    cursor: pointer;
  }
  
  .tabs-item {
    border-bottom: 4px solid transparent;
    color: #3D94F6;
    display: inline-block;
    padding-top: 16px;
    padding-bottom: 16px;
    position: relative;
    margin-left: 48px;
  }
  
  .tabs-item:hover {
    color: #03a9f4;
    text-decoration: none;
  }
  
  .tabs-item.is-selected {
    border-bottom: 4px solid #62707E;
    color: #3D94F6;
  }
  
  .pagination {
    margin: 24px;
    margin-left: 15px;
  }
  
  .hidden {
    display: none;
  }
  
  .pagination-number,
  .pagination-button {
    font-size: 1.1rem;
    background-color: transparent;
    border: none;
    margin: 0.25rem 0.25rem;
    cursor: pointer;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 0.2rem;
  }
  
  .pagination-number:hover,
  .pagination-button:not(.disabled):hover {
    background: #fff;
  }
  
  .pagination-number.active {
    color: #fff;
    background: #0085b6;
  }
  
  h2.title {
    margin: 0px;
    background-color: #F1F3F9;
    padding-left: 24px;
    font-weight: 70;
    font-size: 30px;
    line-height: 40px;
    color: #1D2433;
  }
  
  .general-title {
    background-color: #F1F3F9;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
  }
  
  .title-main {
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -1px;
  }
  
  .subtitle-main {
    font-size: 20px;
    margin-top: 2px;
    margin-bottom: 4px;
    color: #8C8D90;
    margin-left: 24px;
  }
  
  .subtitle-icon {
    display: flex;
    justify-content: space-between;
    margin-right: 24px;
  }
  
  * {
    -webkit-tap-highlight-color: transparent;
  }
  
  .button-cover:before {
    counter-increment: button-counter;
    content: counter(button-counter);
    position: absolute;
    right: 0;
    bottom: 0;
    color: #d7e3e3;
    font-size: 12px;
    line-height: 1;
    padding: 5px;
  }
  
  .button-cover,
  .knobs,
  .layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  
  .switches-main {
    position: relative;
    top: 50%;
    width: 24px;
    height: 24px;
    overflow: hidden;
  }
  
  .switches-main.b2 {
    border-radius: 2px;
  }
  
  .switches {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
  }
  
  .knobs {
    z-index: 2;
    border-radius: 2px;
  }
  
  .layer {
    width: 100%;
    background-color: #ADBBCA;
    transition: 0.3s ease all;
    z-index: 1;
  }
  
  /* Button 15 */
  #button-15 .knobs:before,
  #button-15 .knobs:after {
    position: absolute;
    top: 3px;
    width: 0.2px;
    height: 1px;
    text-align: center;
    line-height: 1;
    padding: 9px 1px 9px 4px;
    opacity: 1;
    transform: scale(1);
  }
  
  #button-15 .knobs:before {
    content: "";
    left: 4px;
    background-color: #FFFFFF;
    border-radius: 100px;
  }
  
  #button-15 .knobs:after {
    content: "";
    right: 4px;
    opacity: 0;
    transform: scale(4);
    background-color: #FFFFFF;
    border-radius: 100px;
  }
  
  #button-15 .switches:checked + .knobs:before {
    opacity: 0;
    transform: scale(4);
  }
  
  #button-15 .switches:checked + .knobs:after {
    opacity: 1;
    transform: scale(1);
  }
  
  #button-15 .switches:checked ~ .layer {
    background-color: #3D8AF6;
  }
  
  .table {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    border-collapse: collapse;
    color: rgba(29, 36, 51, 0.8);
    max-width: 100%;
    width: 100%;
    border: 1px solid #E1E6EF;
    border-radius: 8px;
  }
  
  thead {
    border-bottom: 1px solid #d5d9db;
    border-radius: 8px;
  }
  
  .table tbody {
    overflow-y: scroll;
  }
  
  .table thead {
    position: sticky;
    top: -2px;
    border: 2px solid #E1E6EF;
    border-radius: 8px;
  }
  
  .nowrap {
    white-space: nowrap;
  }
  
  .tabular-nums {
    font-variant-numeric: tabular-nums;
  }
  
  .scrollable {
    overflow-x: scroll;
  }
  
  .scrollable-y {
    overflow-y: scroll;
  }
  
  @media screen and (max-width: 580px) {
    body {
      font-size: 16px;
      line-height: 22px;
    }
  }
  @media screen and (max-width: 1024px) {
    body {
      font-size: 16px;
      line-height: 22px;
    }
  }
  .wrapper {
    margin: 0 auto;
    padding: 40px;
    max-width: 800px;
  }
  
  .table {
    display: table;
    width: 100%;
  }
  
  @media screen and (max-width: 580px) {
    .table {
      display: block;
    }
  }
  .row-table:nth-of-type(even) {
    background: #F8F9FC;
    /* Neutral/400 */
    border-bottom: 1px solid #CBD7E5;
  }
  
  .row-table:nth-of-type(odd) {
    background: white;
    /* Neutral/400 */
    border-bottom: 1px solid #CBD7E5;
  }
  
  .row-table.header {
    font-weight: 900;
    color: #8E9199;
    background: #E8F1FE;
    border: 1px solid #BFCBD9;
    border-radius: 5px;
  }
  
  @media screen and (max-width: 580px) {
    .row {
      display: block;
    }
    .row.header {
      padding: 0;
      height: 6px;
    }
    .row.header td {
      display: none;
    }
    .row td {
      margin-bottom: 10px;
    }
    .row td:before {
      margin-bottom: 3px;
      content: attr(data-title);
      min-width: 98px;
      font-size: 10px;
      line-height: 10px;
      font-weight: bold;
      text-transform: uppercase;
      color: #969696;
      display: block;
    }
  }
  td {
    height: 32px;
    display: table-cell;
    color: #1D2433;
    text-align: left;
    border-bottom: 1px solid #BFCBD9;
  }
  
  td.fixed {
    width: 4em;
    text-align: center;
    border-bottom: 1px solid #BFCBD9;
  }
  
  .cell-icon {
    display: table-cell;
    border-bottom: 1px solid #BFCBD9;
  }
  
  .cell-icon > div {
    display: inline;
  }
  
  @media screen and (max-width: 580px) {
    td {
      padding: 2px 16px;
    }
  }
  .table th, td {
    padding: 5px 12px 5px 15px;
  }
  
  .table tr {
    text-align: left;
  }
  
  tr:not(.clickable):hover td {
    background: #E3E9F6;
  }
  
  .block-code {
    white-space: initial;
    overflow-wrap: break-word;
    background: #0A253C;
    color: #E3E9F6;
    padding: 24px;
  }
  
  .accordion {
    display: flex;
    background-color: #FFFFFF;
    height: 100%;
    flex-direction: column;
  }
  
  .accordion-row {
    color: white;
    overflow: hidden;
  }
  .accordion-row-label {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    padding: 1em;
    background: #E1E6EF;
  }
  .accordion-row-label:hover {
    background-color: white;
  }
  .accordion-row-label::after {
    transition: all 0.35s;
  }
  .accordion-row-content {
    max-height: 0;
    background: white;
    transition: all 0.35s;
  }
  .accordion-row-close {
    display: flex;
    justify-content: flex-end;
    background: #FFFFFF;
    cursor: pointer;
  }
  .accordion-row-close:hover {
    background: white;
  }
  
  .accordion-row-checkbox {
    position: absolute;
    opacity: 0;
    z-index: -1;
  }
  .accordion-row-checkbox:checked + .accordion-row-label {
    background: #F1F3F9;
  }
  .accordion-row-checkbox:checked + .accordion-row-label::after {
    transform: rotate(90deg);
  }
  .accordion-row-checkbox:checked ~ .accordion-row-content {
    max-height: 100vh;
    margin: 16px;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown > input[type=checkbox] {
    position: absolute;
    left: -100vw;
  }
  
  .dropdown > label,
  .dropdown > a[role=button] {
    display: inline-block;
    line-height: 1.5em;
    text-decoration: none;
    border: 1px solid #BFCBD9;
    cursor: pointer;
    border-radius: 3px;
    padding: 6px 15px 3px;
  }
  
  .dropdown > label:hover,
  .dropdown > a[role=button]:hover,
  .dropdown > a[role=button]:focus {
    border-color: #333;
  }
  
  .dropdown > label:after,
  .dropdown > a[role=button]:after {
    content: "\f0d7";
    display: inline-block;
    margin-left: 6px;
  }
  
  .dropdown > ul {
    position: absolute;
    z-index: 999;
    display: block;
    left: -100vw;
    top: calc(1.5em + 14px);
    border: 1px solid #BFCBD9;
    background: #fff;
    padding: 6px 0;
    margin: 0;
    list-style: none;
    width: 100%;
    border-radius: 3px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  }
  
  .dropdown > ul a {
    display: block;
    padding: 6px 15px;
    text-decoration: none;
    color: #333;
  }
  
  .dropdown > ul a:hover,
  .dropdown > ul a:focus {
    background: #ececec;
  }
  
  .dropdown > input[type=checkbox]:checked ~ ul,
  .dropdown > ul:target {
    left: 0;
  }
  
  .dropdown > [type=checkbox]:checked + label:after,
  .dropdown > ul:target ~ a:after {
    content: "\f0d8";
  }
  
  .dropdown a.close {
    display: none;
  }
  
  .dropdown > ul:target ~ a.close {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    text-indent: -100vw;
    z-index: 1000;
  }
  
  /*
   Demo purposes only
  */
  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }
  
  .dropdown + h2 {
    margin-top: 60px;
  }
  
  .button-download {
    padding: 10px 10px;
    margin-right: 100px;
    /* Primary/100 */
    background: #E8F1FE;
    /* Primary/300 */
    border: 1px solid #ACCBF6;
    border-radius: 5px;
  }
  
  .text-button {
    color: #1562CE;
    text-decoration: none;
    margin-left: 5px;
  }
  
  .button-save {
    display: flex;
    justify-content: end;
    margin-right: 100px;
  }
  
  .button-save-gift {
    display: flex;
    justify-content: start;
    margin-right: 100px;
  }
  
  li a {
    font-size: 15px;
    color: #166EE8;
    text-decoration: underline;
    cursor: pointer;
  }
  
  a {
    font-size: 15px;
    color: #166EE8;
    text-decoration: none;
    cursor: pointer;
  }
  
  table a {
    color: rgba(29, 36, 51, 0.8);
    text-decoration: none;
  }
  
  button a {
    text-decoration: none;
  }
  
  .links {
    display: flex;
    background-color: #F1F3F9;
  }
  
  .link-matches {
    display: flex;
    flex-direction: row;
    margin-right: 16px;
    margin-left: 24px;
  }
  
  .link-locations {
    display: flex;
    flex-direction: row;
    margin-right: 16px;
  }
  
  .link-date {
    display: flex;
    flex-direction: row;
    margin-right: 16px;
  }
  
  .link-matches a {
    color: #166EE8;
  }
  
  .link-locations a {
    color: #166EE8;
  }
  
  .link-date a {
    color: #166EE8;
  }
  
  .links p {
    color: #3F444D;
  }
  
  .box {
    background-color: #FFFFFF;
    padding: 16px;
    border-radius: 5px;
    margin: 24px;
    height: 150px;
    /*.button-defaut .text-button-defaut {
      color: $primary-hover-800;
    }*/
  }
  .box .icon-Alert-Circle {
    color: #0052cc;
    margin-right: 4px;
  }
  .box .alert-notification {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 2px 2px;
  }
  .box .text {
    color: #6b6b6b;
    font-size: 14px;
    margin: 2px 2px;
  }
  .box .icon-Close {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  .box .alert-title {
    display: flex;
    justify-content: flex-end;
  }
  .box .button-allert {
    display: flex;
    justify-content: end;
  }
  
  /**
   *  BUTTON
   *
   *  Markup:
   *  -------
   *
   *  <button class="button">Default</button>
   *  <button class="button button--big">Button big</button>
   *  <button class="button button--secondary">Button secondary</button>
   *
   */
  .full-size {
    background-color: transparent;
    cursor: pointer;
    border: 0;
    color: #fff;
    display: inline-block;
    margin-right: 8px;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.2s ease-in-out;
    white-space: nowrap;
    font-size: 14px;
  }
  
  .button, .full-size {
    background-color: transparent;
    cursor: pointer;
    border: 0;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    margin-right: 8px;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.2s ease-in-out;
    white-space: nowrap;
    font-size: 14px;
  }
  
  button:disabled,
  button[disabled] {
    background: #B4BCC7;
    border: 1px solid #E1E6EF;
    color: #E1E6EF;
    font-size: 14px;
    pointer-events: none;
  }
  
  button[disabled]:hover {
    background: #E8F1FE;
    border: 1px solid #E1E6EF;
    color: #23272F;
    font-size: 14px;
    pointer-events: none;
  }
  
  button[disabled]:active {
    background: #E8F1FE;
    border: 1px solid #E1E6EF;
    color: #23272F;
    font-size: 14px;
    pointer-events: none;
  }
  
  .button--icon {
    background-color: transparent;
    cursor: pointer;
    border: 0;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    margin: 0 8px 0px 8px;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.2s ease-in-out;
    white-space: nowrap;
    font-size: 14px;
  }
  
  .button:focus, .button:hover, .button:active {
    color: #fff;
  }
  
  .button:hover {
    color: #fff;
    cursor: pointer;
    text-decoration: none;
  }
  
  .button:active {
    opacity: 1;
  }
  
  .button--big {
    font-size: 16px;
    padding: 16px 36px;
  }
  
  .button--small {
    font-size: 12px;
    padding: 4px 16px;
  }
  
  @media (max-width: 991px) {
    .button--mobileFull {
      margin-left: 0;
      margin-right: 0;
      width: 100%;
    }
  }
  /***Button--primary Blue***/
  .button--primary--defaut {
    background-color: #E8F2FE;
    color: #3D94F6;
  }
  
  .button--primary {
    background-color: #3D94F6;
    color: #fff;
    font-size: 14px;
  }
  
  .button--primary:hover {
    background-color: #1562CE;
    color: #fff;
  }
  
  .button--transparent:active {
    background-color: #1562CE;
    color: #fff;
  }
  
  .button--transparent:focus {
    background-color: #166EE8;
    color: #fff;
  }
  
  /***Button--secondary***/
  .button--secondary--defaut {
    background-color: #244C6E;
    color: #fff;
  }
  
  .button--secondary {
    background-color: #244C6E;
    color: #fff;
  }
  
  .button--secondary:hover {
    background-color: #0A253C;
    color: #fff;
  }
  
  .button--secondary:active {
    background-color: #0A253C;
    color: #fff;
  }
  
  /***Button--delete Red***/
  .button--delete {
    background-color: #E0593E;
    color: #fff;
  }
  
  .button--delete--defaut {
    background-color: #fff;
    color: #E0593E;
  }
  
  .button--delete:hover {
    background-color: #CE3010;
    color: #fff;
  }
  
  .button--delete:active {
    background-color: #A4250C;
    color: #fff;
  }
  
  .button--white:hover {
    background-color: #E0593E;
    color: #fff;
  }
  
  /***Button--green  Green ***/
  .button--green {
    background-color: #5ABB7A;
    color: #fff;
    font-size: 14px;
  }
  .button--green.active {
    margin-bottom: 0;
    font-weight: 500;
    background-color: #fff;
    border-radius: 5px 5px 0 0;
  }
  
  .button--green--defaut {
    background-color: #F0FFF5;
    color: #5ABB7A;
    font-size: 14px;
  }
  
  .button--green:hover {
    background-color: #35A95C;
    color: #fff;
  }
  
  .button--green:active {
    background-color: #298246;
    color: #fff;
  }
  
  .button--navigation {
    background-color: #F1F3F9;
    color: #23272F;
    transition: all 0.2s;
    white-space: nowrap;
    cursor: pointer;
    margin-right: 4px;
    margin-bottom: 5px;
    padding: 10px 25px;
    border-radius: 5px;
  }
  .button--navigation.active {
    margin-bottom: 0;
    font-weight: 500;
    background-color: #fff;
    border-radius: 5px 5px 0 0;
  }
  
  .button--callAction {
    background-color: #F1F3F9;
    color: #23272F;
    border: 0;
    border-radius: 5px;
    display: inline-block;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
    cursor: pointer;
    margin-right: 4px;
    padding: 10px 15px 5px;
  }
  
  .button--navigation--border {
    background-color: #FFFFFF;
    color: #1D2433;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
    display: flex;
    font-size: 14px;
    padding: 8px 14px;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.2s ease-in-out;
    white-space: nowrap;
    border: 1px solid #BFCBD9;
    cursor: pointer;
  }
  
  .container {
    width: 300px;
    height: 50px;
    background-color: #D3D3D3;
  }
  
  .progress-bar {
    width: 0%;
    height: 50px;
    background-color: #90EE90;
  }
  
  .button--navigation--border:active, .button--navigation--border:hover, .button--navigation--border:focus {
    background-color: #FFFFFF;
    color: #1D2433;
  }
  
  .button--navigation--outlined {
    background-color: #F1F3F9;
    color: #23272F;
    border-radius: 5px;
    font-size: 14px;
    padding: 8px 20px;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.2s ease-in-out;
    white-space: nowrap;
    border: 1px solid #BFCBD9;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .button--navigation--outlined:hover {
    background-color: #BAC0C8;
    color: #23272F;
    cursor: pointer;
  }
  
  .button--transparent:active {
    background-color: #03a9f4;
    color: #BAC0C8;
  }
  
  .button--regular {
    background-color: #0A253C;
    color: #fff;
    font-size: 14px;
  }
  
  .button--transparent {
    background-color: transparent;
    color: #333333;
    font-size: 14px;
    padding: 0;
  }
  
  .button--transparent:active, .button--transparent:hover, .button--transparent:focus {
    background-color: transparent;
    color: #333333;
    opacity: 0.8;
  }
  
  .button--outlined {
    background: #E8F1FE;
    border: 1px solid #ACCBF6;
    color: #03a9f4;
    font-size: 14px;
  }
  
  .button--outlined:active, .button--outlined:hover, .button--outlined:focus {
    background: #C2D8F6;
    color: rgba(3, 169, 244, 0.8);
  }
  
  .search {
    display: flex;
    justify-content: flex-end;
    margin-right: 50px;
    margin-bottom: 10px;
  }
  
  .button-search-form {
    display: flex;
    align-items: center;
    padding-right: 5px;
    padding-left: 5px;
    /* Primary/100 */
    background: #E8F1FE;
    /* Primary/300 */
    border: 1px solid #ACCBF6;
    border-radius: 5px;
  }
  
  .text-button {
    padding-right: 5px;
  }
  
  .search input {
    width: 227px;
  }
  
  .button-icons .icon-Plus {
    color: #0052cc;
  }
  
  .button-icons .icon-Edit-Line {
    color: #0052cc;
  }
  
  .button-icons .icon-More-Vertical {
    color: #0052cc;
  }
  
  .overlap {
    background-color: #d9d9d9;
    border-radius: 2.32px;
    height: 53px;
    width: 500px;
  }
  
  .button-wrapper {
    height: 35px;
    left: 196px;
    position: absolute;
    top: 0;
    width: 190px;
  }
  
  .button-text {
    color: #2a2a37;
    font-size: 18.6px;
    font-weight: 600;
    height: 14px;
    letter-spacing: 0.37px;
    line-height: 7.4px;
    text-align: center;
  }
  
  .button-group-1 {
    background-color: #ffffff;
    border-radius: 2.32px;
    height: 40px;
    position: relative;
    width: 240px;
    margin: 2px;
    white-space: nowrap;
    border: 0;
  }
  
  .button-group-2 {
    margin: 2px;
    border-radius: 2.32px;
    height: 40px;
    position: relative;
    width: 240px;
    white-space: nowrap;
    background-color: transparent;
    text-decoration: none;
    border: 0;
  }
  
  .layout-row-start {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
  
  .layout-row-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: end;
  }
  
  .layout-row-end {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  
  .layout-row-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .layout-row-evenly {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
  }
  
  .layout-row-around {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  
  .layout-row-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: center;
  }
  
  .layout-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  
  .grid-flex-2 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 2;
  }
  
  .layout-column-wrap-start {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: center;
  }
  
  .layout-column-around {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  
  .layout-column-evenly {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }
  
  .layout-column-wrap {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
  }
  
  .container-fixed {
    max-width: 800px;
    margin: 0 auto;
  }
  
  /**
   * LAYOUT
   */
  .section {
    padding-bottom: 36px;
    padding-top: 36px;
  }
  @media (min-width: 768px) {
    .section {
      padding-bottom: 72px;
      padding-top: 72px;
    }
  }
  .section + .section {
    padding-top: 0;
  }
  
  .container {
    background-color: transparent;
    margin: 0 auto;
    max-width: 1380px;
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
  }
  @media (min-width: 768px) {
    .container {
      padding-left: 0px;
      padding-right: 0px;
    }
  }
  
  .container-medium {
    margin: 0 auto;
    max-width: 944px;
    padding-left: 0px;
    padding-right: 0px;
  }
  @media (min-width: 768px) {
    .container-medium {
      padding-left: 0px;
      padding-right: 0px;
    }
  }
  
  .container-small {
    margin: 0 auto;
    max-width: 400px;
    padding-left: 0px;
    padding-right: 0px;
  }
  @media (min-width: 768px) {
    .container-small {
      padding-left: 0px;
      padding-right: 0px;
    }
  }
  
  .flex-row {
    /* @include display("flex"); */
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    /* @include flex-direction(row); */
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -ms-flex-direction: row;
    /* @include flex-wrap(wrap) */
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  
  .card {
    /*flex-grow: 1;*/
    flex-basis: 200px;
    margin: 20px;
    height: 200px;
    min-width: 200px;
    /* To account for odd number of children. 50% minus sum of margin*/
    /*max-width: calc(50% - 40px);*/
    background: #FFFFFF;
    /* Neutral/500 */
    border: 2px solid #ADBBCA;
  }
  
  .info-name {
    font-size: 14px;
    color: #62707E;
  }
  
  .info-value {
    font-size: 14px;
  }
  
  .label-default {
    background-color: #8C8D90;
    color: #FFFFFF;
    width: 45px;
  }
  
  .label-primary {
    background-color: #3D94F6;
    color: #FFFFFF;
    width: 45px;
  }
  
  .label-success {
    background-color: #5ABB7A;
    color: #FFFFFF;
    width: 45px;
    text-align: center;
  }
  
  .label-info {
    background-color: #3D94F6;
    color: #FFFFFF;
    width: 45px;
    text-align: center;
  }
  
  .label-warning {
    background-color: #F7BC45;
    color: #FFFFFF;
    width: 45px;
    text-align: center;
  }
  
  .label-danger {
    background-color: #E0593E;
    color: #FFFFFF;
    width: 45px;
    text-align: center;
  }
  
  .default-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: #FFFFFF;
    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    float: left;
    overflow: hidden;
    border: 0.5px solid #FFFFFF;
    z-index: 5000;
    animation: pop-in 0.15s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .default-modal .modal-header {
    top: 0;
    position: sticky;
    background-color: #FFFFFF;
    color: white;
    padding: 0.25em;
  }
  .default-modal .modal-header button {
    height: 40px;
    min-width: 80px;
    margin: 0.25em;
    border: none;
    border-radius: 4px;
    color: #FFFFFF;
    cursor: pointer;
    display: grid;
    text-align: center;
    align-items: center;
  }
  .default-modal .modal-header button:hover {
    background-color: #cccccc;
  }
  .default-modal .loader-container {
    height: 0.25em;
  }
  .default-modal .content-container {
    display: block;
    max-height: 425px;
    padding: 0.5em;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .default-modal .content-container .modal-table {
    border-collapse: collapse;
    width: 100%;
  }
  .default-modal .content-container .modal-table thead {
    background-color: #FFFFFF;
    position: sticky;
    font-size: 13px;
    top: -0.25em;
  }
  .default-modal .content-container .modal-table th, .default-modal .content-container .modal-table td {
    text-align: center;
    padding: 0.3em;
  }
  
  .modal-closed {
    display: none;
  }
  
  .size-large {
    width: 800px;
    height: 500px;
  }
  
  .size-small {
    width: 400px;
    height: 200px;
  }
  
  @keyframes pop-in {
    from {
      opacity: 0;
      box-shadow: lightslategray 0 10px 1px 1px;
      transform: scale(0.9) translate(-50%, -50%);
    }
    to {
      opacity: 1;
      transform: scale(1) translate(-50%, -50%);
    }
  }
  /**
   *  TABS
   *
   *  Markup:
   *  -------
   *
  <nav class="breadcrumbs">
      <div class="aligner aligner--centerVertical">
              <a href="#!" class="crumb-active">Example 1</a>
              <span class="icon-Chevron-Right-Small"></span>
              <a href="#!" class="crumb-active">Example 2</a>
              <span class="icon-Chevron-Right-Small"></span>
              <a href="#!" class="crumb-active">Example 3</a>
              <span class="icon-Chevron-Right-Small"></span>
              <a href="#!" class="crumb text">Example Active</a>
      </div>
  </nav>
   *
   */
  .breadcrumbs {
    display: inline-block;
    position: relative;
  }
  
  .crumb {
    color: #555B66;
    text-decoration: none;
    margin-right: 10px;
  }
  
  .breadcrumbs span {
    text-decoration: none;
  }
  
  .crumb-active {
    color: #3D94F6;
    margin-left: 10px;
    margin-right: 10px;
  }
  
  .navigation {
    background-color: #E1E6EF;
  }
  
  .tab__head {
    padding: 0;
    float: left;
    list-style: none;
    width: 100%;
    margin-top: 16px;
    margin-left: 24px;
  }
  .tab__head li {
    float: left;
    margin: 0 4px 4px 0;
    cursor: pointer;
    padding: 0px 20px;
    height: 32px;
    line-height: 31px;
    border-bottom: 4px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    background-color: #F1F3F9;
    color: #0A253C;
  }
  .tab__head li:hover {
    color: #F8F5FF;
  }
  .tab__head li.active {
    background-color: #FFFFFF;
    color: #333;
    display: flex;
    border-radius: 0px 4px 0px 0px;
    margin-bottom: 0;
    border: 4px solid #FFFFFF;
  }
  
  .progressBar {
    width: 180px;
    height: 40px;
    background-color: #3D8AF6;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 5px;
    display: none;
  }
  
  .progressBody {
    height: 100%;
    background-color: #1A65CE;
    border-radius: 10px;
    width: 0%;
    transition: width 0.5s ease-in-out;
  }
  
  .button i {
    width: 20px;
    height: 20px;
    align-items: center;
    margin-right: 5px;
    font-size: 15px;
  }
  
  .button a {
    text-align: center;
    letter-spacing: 0.02em;
    margin-right: 5px;
    font-size: 15px;
    color: #fff;
  }
  
  .button p {
    text-align: center;
    letter-spacing: 0.02em;
    margin-right: 5px;
    font-size: 15px;
    color: #fff;
  }
  
  .progressText {
    display: flex;
    position: absolute;
    padding-right: 10px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    top: 0;
    bottom: 0;
    font-size: 16px;
    padding: 10px;
  }
  
  .readyButton {
    background-color: #4CAF50;
    color: #fff;
    cursor: not-allowed;
    opacity: 0.7;
  }
  
  /**
   *  NOTIFICATION
   *
   *  Markup:
   *  -------
   *
   *  <div class="notification notification--sucess">Success notification</div>
   *  <div class="notification notification--info">Success info</div>
   *  <div class="notification notification--error">Success error</div>
   *  <div class="notification notification--warning">Success warning</div>
   *
   */
  .notification {
    color: #fff;
    padding: 16px;
  }
  .notification p:last-child {
    margin-bottom: 0;
  }
  .notification--primary {
    background-color: #3D8AF6;
  }
  .notification--dark {
    background-color: #0A253C;
  }
  .notification--secondary {
    background-color: #5221B5;
  }
  .notification--white {
    background-color: #fff;
  }
  .notification--success {
    background-color: #5ABB7A;
  }
  .notification--info {
    background-color: #5bc0de;
  }
  .notification--warning {
    background-color: #F7BC45;
  }
  .notification--error {
    background-color: #CE3010;
  }
  .notification--error-bg {
    background-color: #FFEFEC;
  }
  .notification--error-default {
    background-color: #E0593E;
  }
  .notification--error-pressed {
    background-color: #A4250C;
  }
  .notification--gray {
    background-color: #969da6;
  }
  .notification--gray-light {
    background-color: #eceff1;
  }
  .notification--danger-background-100 {
    background-color: #FFEFEC;
  }
  .notification--danger-default-700 {
    background-color: #E0593E;
  }
  .notification--danger-hover-800 {
    background-color: #CE3010;
  }
  .notification--danger-pressed-900 {
    background-color: #A4250C;
  }
  .notification--warning-background-100 {
    background-color: #FFF7E8;
  }
  .notification--warning-default-700 {
    background-color: #F7BC45;
  }
  .notification--warning-hover-800 {
    background-color: #ED8C05;
  }
  .notification--warning-pressed-900 {
    background-color: #C57505;
  }
  .notification--success-background-100 {
    background-color: #F0FFF5;
  }
  .notification--success-default-700 {
    background-color: #5ABB7A;
  }
  .notification--success-hover-800 {
    background-color: #35A95C;
  }
  .notification--success-pressed-900 {
    background-color: #298246;
  }
  .notification--secondary-background-100 {
    background-color: #F8F5FF;
  }
  .notification--secondary-default-700 {
    background-color: #8B54F7;
  }
  .notification--secondary-hover-800 {
    background-color: #6D35DE;
  }
  .notification--secondary-pressed-900 {
    background-color: #5221B5;
  }
  .notification--primary-background-100 {
    background-color: #E8F2FE;
  }
  .notification--primary-default-700 {
    background-color: #3D94F6;
  }
  .notification--primary-hover-800 {
    background-color: #166EE8;
  }
  .notification--primary-pressed-900 {
    background-color: #1562CE;
  }
  .notification--primary-1100 {
    background-color: #1D2433;
  }
  
  .block-grey {
    background-color: #F8F9FC;
    border-radius: 5px;
    padding: 24px;
    margin: 16px 24px;
  }
  
  .block-overlay {
    position: relative;
  }
  
  .block-overlay-color {
    position: absolute;
    background-color: #000000;
    opacity: 0.5;
    width: 100%;
    height: 100vh;
  }
  
  /**
   *  BORDER
   */
  .border-bottom {
    border-bottom: 1px solid #d5d9db;
    padding: 10px;
  }
  
  .border-left {
    border-left: 1px solid #d5d9db;
  }
  
  .border-right {
    border-right: 1px solid #d5d9db;
  }
  
  .border-top {
    border-top: 1px solid #d5d9db;
  }
  
  /**
   *  BADGE
   *
   *  Markup:
   *  -------
   *
   *  <ul>
   *    <li class="badge badge--primary">Badge 1</li>
   *    <li class="badge badge--secondary badge--big">Badge 1</li>
   *  </ul>
   *
   */
  .badge {
    background-color: #eceff1;
    border-radius: 5px;
    color: rgba(29, 36, 51, 0.8);
    display: inline-block;
    line-height: 1.2em;
    padding: 8px 16px;
  }
  .badge--big {
    font-size: 1.3em;
  }
  .badge--small {
    font-size: 0.7em;
  }
  .badge--primary {
    background-color: #3D8AF6;
    color: #fff;
  }
  .badge--secondary {
    background-color: #5221B5;
    color: #fff;
  }
  .badge--dark {
    background-color: #0A253C;
    color: #fff;
  }
  .badge--light {
    background-color: #969da6;
    color: #fff;
  }
  .badge--success {
    background-color: #5ABB7A;
    color: #fff;
  }
  .badge--error {
    background-color: #CE3010;
    color: #fff;
  }
  .badge--warning {
    background-color: #F7BC45;
    color: #fff;
  }
  
  .badge-small {
    flex-direction: row;
    align-items: center;
    padding: 2px 4px;
    gap: 2px;
    width: 90px;
    height: 19px;
  }
  
  .bg-opacity-complete {
    background: #F8F9FC;
  }
  
  .bg-opacity-error {
    background: #FFEFEC;
  }
  
  .bg-opacity-progress {
    background: #E8F1FE;
  }
  
  .bg-opacity-success {
    background: #F0FFF5;
  }
  
  .bg-opacity-warning {
    background: #FFF7E8;
  }
  
  .bg-error {
    background: #E0593E;
  }
  
  .bg-progress {
    background: #3D8AF6;
  }
  
  .bg-success {
    background: #5ABB7A;
  }
  
  .bg-warning {
    background: #F7BC45;
  }
  
  .text-op {
    color: #494F5B;
  }
  
  .text-error {
    color: #E0593E;
  }
  
  .text-progress {
    color: #3D8AF6;
  }
  
  .text-success {
    color: #5ABB7A;
  }
  
  .text-warning {
    color: #F7BC45;
  }
  
  .text-op-status:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #494F5B;
    display: inline-block;
    margin: 0px 5px 0px 5px;
  }
  
  .text-error-status:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #E0593E;
    display: inline-block;
    margin: 0px 5px 0px 5px;
  }
  
  .text-progress-status:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #3D8AF6;
    display: inline-block;
    margin: 0px 5px 0px 5px;
  }
  
  .text-success-status:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #5ABB7A;
    display: inline-block;
    margin: 0px 5px 0px 5px;
  }
  
  .text-warning-status:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #F7BC45;
    display: inline-block;
    margin: 0px 5px 0px 5px;
  }
  
  .block-card__list {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1rem;
  }
  
  .block-card__item {
    margin-bottom: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 33%;
  }
  
  .block-card__content {
    border: 1px solid #e6e6e6;
    border-radius: 0.5rem;
    height: 100%;
    text-align: center;
    margin-left: 25px;
  }
  
  .block-card__link {
    display: block;
    height: 100%;
    padding: 1rem;
  }
  
  .block-card__name {
    color: #000;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1rem 0;
  }
  
  .sidebar {
    width: 300px;
    background-color: #f8f9fc;
  }
  
  .accordion-block {
    display: block;
    color: black;
    margin-bottom: 20px;
    width: 100%;
  }
  
  .accordion-trigger {
    display: flex;
    width: 100%;
    justify-content: space-between;
    background-color: transparent;
    color: #1d2433;
    font-size: 16px;
    line-height: 1.2;
    padding: 10px;
    border: none;
    cursor: pointer;
    height: 100%;
  }
  
  .accordion-trigger:hover {
    background-color: #e1e6ef;
    border-radius: 5px;
  }
  
  .accordion-trigger:active {
    background-color: #e1e6ef;
    border-radius: 5px;
  }
  
  .accordion-trigger:focus {
    background-color: #e1e6ef;
    outline: none;
  }
  
  .accordion-trigger-none {
    display: flex;
    height: 100%;
    justify-content: space-between;
    background-color: transparent;
    color: #1d2433;
    font-size: 16px;
    line-height: 1.2;
    padding: 10px;
    border: none;
    cursor: pointer;
    width: 100%;
  }
  
  .accordion-trigger-none:hover {
    background-color: #e1e6ef;
    border-radius: 5px;
  }
  
  .accordion-trigger-none:active {
    background-color: #e1e6ef;
    border-radius: 5px;
  }
  
  .accordion-trigger-none:focus {
    background-color: #e1e6ef;
    outline: none;
  }
  
  .accordion-row button:focus .icon-Chevron-Down {
    transform: rotate(180deg);
  }
  
  .icon-Chevron-Down {
    transition: transform 0.3s ease;
  }
  
  .accordion-block .accordion-content {
    display: none;
    font-size: 14px;
    line-height: 1.2;
    color: black;
    padding-top: 0px;
    padding-left: 20px;
    height: 100%;
  }
  
  .accordion-block .accordion-content.active {
    display: block;
    height: 100%;
  }
  
  /* Nav */
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px 0;
    background-color: #151515;
    box-shadow: 0 0 10px 0 #000;
    z-index: 999;
  }
  
  /* Nav mobile. nav hamburger */
  .nav-mobile, .nav__hamburger {
    display: none;
  }
  
  .hamburger-icon {
    cursor: pointer;
  }
  
  .hamburgerCloseIcon {
    display: none;
  }
  
  @media screen and (max-width: 1024px) {
    /* Nav desktop */
    .nav-desktop {
      display: none;
    }
    /* Nav mobile, nav hamburger */
    .nav-mobile, .nav__hamburger {
      display: block;
    }
    .tab__head {
      margin-bottom: 16px;
    }
    /* Nav list */
    .nav__list {
      width: 100%;
      height: 100vh;
      position: fixed;
      top: 0px;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 40px;
      flex-direction: column;
      background-color: #1E2833;
      text-align: center;
      transform: translateX(100%);
      transition: 0.3s ease;
      visibility: hidden;
      z-index: 999;
    }
    /* Nav list active */
    .nav__hamburger.active {
      position: fixed;
      right: 20px;
      z-index: 999;
    }
    .nav__hamburger.active i::before {
      color: #fff;
    }
    /* Nav list item */
    .tab__head li {
      height: auto;
      margin: 0;
      padding: 0;
      float: none;
      list-style: none;
      cursor: pointer;
      line-height: normal;
      border-bottom: none;
      border-radius: 0;
      overflow: auto;
      position: static;
      background-color: transparent;
    }
    /* Nav list item link */
    .tab__head li a {
      font-size: 24px;
      text-transform: uppercase;
      color: #fff;
    }
    /* Nav list active */
    .nav__list.active {
      transform: translateX(0);
      transition-duration: 0.3s;
      visibility: visible;
    }
    /* Nav hamburger */
    .nav__hamburger {
      position: relative;
      width: 30px;
      height: 30px;
      cursor: pointer;
    }
    /* Nav hamburger icons */
    .icon-Close::before, .icon-Menu-Hamburger::before {
      font-size: 30px !important;
    }
  }
  
  /*# sourceMappingURL=_style.css.map */