/*
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://assets.erply.com/global/fonts/erply-iconfont/erply-iconfont.eot?bm9age");
    src: url("https://assets.erply.com/global/fonts/erply-iconfont/erply-iconfont.eot?bm9age#iefix") format("embedded-opentype"), url("https://assets.erply.com/global/fonts/erply-iconfont/erply-iconfont.woff2?bm9age") format("woff2"), url("https://assets.erply.com/global/fonts/erply-iconfont/erply-iconfont.ttf?bm9age") format("truetype"), url("https://assets.erply.com/global/fonts/erply-iconfont/erply-iconfont.woff?bm9age") format("woff"), url("https://assets.erply.com/global/fonts/erply-iconfont/erply-iconfont.svg?bm9age#erply-iconfont") 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;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-family: "Erply Ladna", sans-serif;
}

input,
textarea,
button {
    font-family: inherit;
}

body {
    background-color: #FFFFFF;
    overflow-y: scroll;
    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: 0.5em;
    color: #333;
    appearance: textfield;
    transition: 0.3s;
    height: 33px;
    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: 33px;
    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-icon {
    fill: #969da6;
    height: 9px;
    position: absolute;
    right: 16px;
    top: 50%;
    width: 9px;
}

.select-fullWidth {
    display: block;
    margin-left: 0;
    margin-right: 0;
    height: 35px;
    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: 8px;
    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: 50%;
    cursor: text;
    position: relative;
}

.input :focus,
.input :active {
    background-color: #fbfbfc;
    border-radius: 5px;
}

.input input[type=text],
.input input[type=number] {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: rgba(29, 36, 51, 0.8);
    font-size: 16px;
    margin: 0;
    outline: none;
    padding: 8px;
    width: 90%;
    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: linen;
    color: dimgrey;
    opacity: 1;
}

.formjoined {
    display: flex;
    margin-bottom: 12px;
    cursor: text;
}

.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://assets.erply.com/global/fonts/erply-ladna/WOFF/ErplyLadna-Regular.woff) format("woff");
}

@font-face {
    font-display: swap;
    font-family: Erply Ladna;
    font-weight: 500;
    src: url(https://assets.erply.com/global/fonts/erply-ladna/WOFF/ErplyLadna-Medium.woff) format("woff");
}

@font-face {
    font-display: swap;
    font-family: Erply Ladna;
    font-weight: 600;
    src: url(https://assets.erply.com/global/fonts/erply-ladna/WOFF/ErplyLadna-SemiBold.woff) format("woff");
}

@font-face {
    font-display: swap;
    font-family: Erply Ladna;
    font-weight: 700;
    src: url(https://assets.erply.com/global/fonts/erply-ladna/WOFF/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: 0;
    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;
        display: block;
    }
}

.table th,
td {
    padding: 5px 12px 5px 15px;
}

.table tr {
    background: #E8F1FE;
    text-align: left;
}

.block-code {
    white-space: initial;
    overflow-wrap: break-word !important;
}

.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;
}

.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: #0A253C;
    color: #fff;
}

.button--secondary {
    background-color: #0A253C;
    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;
}

.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 */