/*
	Variables
 */

*{
    --508_green: hsl(90,57%,41%);
    --508_green_accent: hsl(90,57%,31%);
    --508_green_textColor: white;
    
    --botbordercolor: var(--508_green);
	--botnamecolor: #000;
    --bottextcolor: #000;
    --botbgcolor: #ffffff;
    
    /*Base64 Encoded icons using https://base64.guru/converter/encode/image/svg so we don't need to do an image call*/
    --sageProfilePic: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQ1IDQ1Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjYzJkOWI3OwogICAgICB9CgogICAgICAuY2xzLTIgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KCiAgICAgIC5jbHMtMyB7CiAgICAgICAgZmlsbDogbm9uZTsKICAgICAgfQoKICAgICAgLmNscy00IHsKICAgICAgICBmaWxsOiAjNTU1OwogICAgICB9CgogICAgICAuY2xzLTUgewogICAgICAgIGZpbGw6ICMwOTgwNDA7CiAgICAgIH0KCiAgICAgIC5jbHMtNiB7CiAgICAgICAgZmlsbDogIzY5YTQ0MzsKICAgICAgfQoKICAgICAgLmNscy03IHsKICAgICAgICBmaWxsOiAjZjFiZjJlOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjguNy4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMS4yLjAgQnVpbGQgMTQyKSAgLS0+CiAgPGc+CiAgICA8ZyBpZD0iTGF5ZXJfMSI+CiAgICAgIDxnPgogICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTQ0LjUsNDAuN3MwLDAsMCwwYzAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwWiIvPgogICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtNCIgZD0iTTIyLjQsMTYuOXYtLjVzMCwwLDAsMHYtLjVjLS4xLDAtLjEsMS4xLS4xLDEuMSwwLDAsMCwwLDAsMCwwLDAsMCwwLC4xLDBaIi8+CiAgICAgICAgPHBhdGggY2xhc3M9ImNscy00IiBkPSJNMTYuMSwxNC40YzMuNS43LDQuOSwxLjUsNi4xLDIuNXYtMS4xcy4xLjUuMS41YzAsMCwwLDAsMCwwdi41YzEuMi0xLDIuNi0xLjgsNi0yLjUsMS4xLS4yLDItLjMsMi44LS4ydi0zLjNzLTIuNC0yLjctOC45LTIuN2gwczAsMCwwLDBjMCwwLDAsMCwwLDBoMGMtNi41LDAtOC45LDIuNy04LjksMi43djMuM2MuOCwwLDEuOCwwLDIuOS4yWiIvPgogICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtNiIgZD0iTTEzLDM0LjZjLjEtLjMuMy0uNS40LS43LjItLjMuNC0uNi42LS45LDAsMCwwLDAsMCwwLDAsMCwuMSwwLC4yLDAsMCwwLDAsMCwwLDAsLjQtLjUsMS0xLjEsMS4zLTEsMCwwLDAsMCwwLDAsMC0uMi4zLS4yLjMsMCwuMiwxLjMsMS4xLDIuMywyLjEsM2wuNS4zaDBzMCwwLDAsMGMwLS43LjItMS4zLjYtMS44LDAsMCwuMiwwLC4yLDAsMCwxLjIuMywyLjIsMSwzLjEuNi44LDEuNCwxLjQsMi4xLDIuMWwuOS0uOGMuMy0uNC41LS45LjctMS4zLjMtLjguMy0xLjcuMy0yLjUsMCwwLDAtLjIsMC0uMywwLDAsMCwwLDAsMC0uNC0xLDEtMS42LDEuNS0uNy4zLjUuNSwxLjIuNSwxLjgsMCwwLDAsMCwwLDAsLjQtLjIuNy0uNSwxLS44LjItLjMuNC0uNS42LS44LjItLjQuNC0uOS41LTEuMywwLS4yLjMtLjIuMywwLDAsMCwwLDAsMCwwLC40LDAsLjkuNywxLjMsMS4xLDAtLjEuMi0uMi4zLS4xLDAsMCwwLDAsMCwwLC4zLjMuNS43LjcsMSwxLjEsMS45LDEuNSw0LjEsMS4zLDYuMiwwLC44LS4zLDEuNi0uNSwyLjQsMS4yLS45LDIuNS0xLjQsNC0xLjcsMC0uMSwwLS4yLDAtLjMsMS45LTUuOC0yLTkuOS0zLjEtMTAuOC0xLjYuOS0zLjMsMS4zLTQuNiwxLjMtMi42LDAtNC4xLTEuNS00LjEtMS41LDAsMC0uMSwxLjctMiwzLjEtMS45LTEuNC0yLTMuMS0yLTMuMSwwLDAtMS41LDEuNS00LjEsMS41cy0zLS40LTQuNS0xLjNjLTEuMSwxLTQuOSw1LjEtMywxMC44LDAsLjEsMCwuMiwwLC4zLDEuNC4zLDIuOC45LDQsMS43LS44LTIuNy0uOC01LjUuNC04LjFaIi8+CiAgICAgICAgPHBhdGggY2xhc3M9ImNscy01IiBkPSJNMTYuOSwzNi4xYy0uMy0uNC0uNS0uNy0uNy0xLjEtLjUtLjktLjgtMi0uNi0zLS4zLS4xLS45LjUtMS4zLDEsMCwwLDAsLjEsMCwuMiwwLDAsMCwwLDAsMC0uOCwxLjMtLjgsMy0uMSw0LjQuNiwxLjMsMS43LDIuMywyLjgsMy4yLS4yLTEuNCwwLTIuOC42LTQtLjMtLjItLjQtLjUtLjYtLjdaIi8+CiAgICAgICAgPHBhdGggY2xhc3M9ImNscy01IiBkPSJNMTkuMiwzNy45Yy0uMi0uMy0uMy0uNi0uNC0uOS0uNiwxLjQtLjksMy0uMiw0LjQuNiwxLjIsMS43LDIsMi45LDIuNiwwLTEuMS4yLTIuNi4zLTMuNi0xLjEtLjQtMi0xLjMtMi41LTIuNFoiLz4KICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Ik0xNy41LDQyLjRzMCwwLDAsLjFjLS40LjYtMS4yLjYtMS43LjEtMS4xLTEuMi0yLjItMi42LTIuNy00LjIsMCwuNi4xLDEuMS4yLDEuNi41LDIuMywxLjgsNC4zLDMuNCw2LjEsMCwwLC4xLjIuMi4zbDQuMS0uOWMtMS40LS43LTIuNy0xLjctMy40LTMuMVoiLz4KICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Ik0yMy40LDM3LjlsLS45LjhjMCwwLC4xLjEuMi4yLjItLjMuNS0uNy43LTFaIi8+CiAgICAgICAgPHBhdGggY2xhc3M9ImNscy01IiBkPSJNMjguMSwzMy4yYy0uMi4zLS40LjUtLjYuOCwwLDAsLjEtLjEuMi0uMi4yLS4yLjMtLjQuNC0uNloiLz4KICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Ik0yMy4zLDM5LjNjLS4xLDAtLjIsMC0uMy4xLDAsLjIsMCwuMy0uMS41bC4zLDMuOWMuNC0uMi45LS40LDEuMy0uNywyLjItMS41LDIuNC0zLjksMS40LTYuMS0uNiwxLTEuNSwxLjctMi41LDIuMloiLz4KICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Ik0zMC41LDM3LjZjLjctMS4zLjctMywwLTQuMywwLDAsMCwwLDAtLjEsMCwwLDAsMCwwLDAtLjQtLjQtLjktMS4xLTEuMy0xLjEuMywxLjctLjYsMy40LTEuNyw0LjYsMCwwLS4xLjEtLjIuMiwwLC4xLjEuMi4yLjQuNSwxLjMuNywyLjYuNSwzLjcsMS4xLS45LDIuMi0xLjksMi44LTMuMloiLz4KICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Ik0zMC44LDQxLjdjLjQtMSwuNy0yLjIuOC0zLjMtLjIuNy0uNiwxLjUtMSwyLjEtLjUuOC0xLjEsMS41LTEuNywyLjEtLjQuNC0xLjEuNS0xLjUsMCwwLDAtLjItLjItLjItLjMtLjcsMS4zLTEuOSwyLjMtMy40LDMuMWw0LC45YzAsMCwwLS4yLjItLjMsMS4yLTEuMywyLjItMi44LDIuOC00LjRaIi8+CiAgICAgICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMiw0MWMtLjYsMC0xLjMtLjItMS45LS4zLjksMS4yLDEuNywyLjMsMi43LDMuMy43LjcsMS41LDEuNCwyLjQsMS44LjMuMS41LjIuOC4zLjcuMiwxLjQuNCwyLjEuNSwxLjYuMywzLjUuNiw1LS4yLTEuNS00LjMtNy4xLTQuOC0xMS4xLTUuNFpNMTEsNDUuN2MtLjUsMC0xLDAtMS40LDAtMi43LS4xLTUuNS0xLjEtNy41LTMtLjQtLjQtLjktLjktMS4yLTEuNCwwLDAsMC0uMi4xLS4xLDIuOCwxLjYsNS43LDIuOCw4LjcsMy44LjQuMi45LjMsMS4zLjUsMCwwLDAsLjIsMCwuMloiLz4KICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00MC41LDQxLjNjLTMuNS41LTcuOCwxLjUtOSw1LjEuNi4zLDEuMi40LDEuOS41LDEuOC4xLDMuNS0uNCw1LjItLjguNi0uMSwxLjEtLjQsMS43LS43LDEuNy0xLjIsMy0yLjksNC4yLTQuNiwwLDAsMCwwLDAsMC0xLjMuMi0yLjYuNC0zLjkuNlpNMzUsNDUuN2MtLjUsMC0xLDAtMS40LDAsMCwwLS4xLS4xLDAtLjIsMS4xLS40LDIuMi0uOCwzLjMtMS4xLDEuNS0uNSwyLjktMS4xLDQuMy0xLjguOC0uNCwxLjYtLjgsMi40LTEuMywwLDAsLjIsMCwuMS4xLTEuNywyLjctNS42LDQuMi04LjcsNC4zWiIvPgogICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTI5LDI3YzIuNSwwLDQuNi0yLjEsNC42LTQuNnMtMi4xLTQuNi00LjYtNC42LTQuNiwyLjEtNC42LDQuNiwyLjEsNC42LDQuNiw0LjZaTTI4LjksMTkuM2MxLjcsMCwzLDEuMywzLDNzLTEuMywzLTMsMy0zLTEuMy0zLTMsMS4zLTMsMy0zWiIvPgogICAgICAgIDxjaXJjbGUgY2xhc3M9ImNscy0yIiBjeD0iMjkuNCIgY3k9IjIxLjkiIHI9IjEiLz4KICAgICAgICA8cG9seWdvbiBjbGFzcz0iY2xzLTYiIHBvaW50cz0iMTkuOCAyNS4yIDE5LjggMjUuMiAxOS44IDI1LjIgMTkuOCAyNS4yIi8+CiAgICAgICAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTUuNiwxNy44Yy0yLjUsMC00LjYsMi4xLTQuNiw0LjZzMi4xLDQuNiw0LjYsNC42LDQuNi0yLjEsNC42LTQuNi0yLjEtNC42LTQuNi00LjZaTTE1LjYsMjUuM2MtMS43LDAtMy0xLjMtMy0zczEuMy0zLDMtMywzLDEuMywzLDMtMS4zLDMtMywzWiIvPgogICAgICAgIDxjaXJjbGUgY2xhc3M9ImNscy0yIiBjeD0iMTUuMSIgY3k9IjIxLjkiIHI9IjEiLz4KICAgICAgICA8cGF0aCBjbGFzcz0iY2xzLTYiIGQ9Ik0zMi44LDE3LjlzMi0uNiwyLjgtMS4zaC0uMmMwLDAtMi4yLS43LTMuMS0uOS0uOS0uMi0yLjItLjYtNS41LjQtMy4zLDEtNC41LDMuOC00LjUsMy44LDAsMC0xLjMtMi44LTQuNS0zLjgtMy4zLTEtNC42LS42LTUuNS0uNC0uOS4yLTMuMSwxLTMuMSwxaC0uMmMuOC41LDIuOCwxLjIsMi44LDEuMiwwLDAtMi43LjQtMi43LDQuOHM0LjUsNiw0LjUsNmMwLDAsMy44LDEuNSw2LjQtMS41aDBzLjItLjMuMi0uM2MwLS40LS4xLS45LS4xLTEuNXYtLjJjMCwwLDAtLjEsMC0uMmgwczAsMCwwLDBjMCwwLDAtLjIsMC0uMywwLS41LjEtLjkuMy0xLC43LS40LDItLjUsMi0uNSwwLDAsMS4zLDAsMiwuNS4yLjEuMy44LjMsMS41di4yczAsLjEsMCwuMWMwLC41LDAsMS0uMSwxLjRoLjFjMi42LDMuMyw2LjUsMS44LDYuNSwxLjgsMCwwLDQuNS0xLjcsNC41LTZzLTIuNy00LjgtMi43LTQuOFpNMTUuNiwyN2MtMi41LDAtNC42LTIuMS00LjYtNC42czIuMS00LjYsNC42LTQuNiw0LjYsMi4xLDQuNiw0LjYtMi4xLDQuNi00LjYsNC42Wk0yOSwyN2MtMi41LDAtNC42LTIuMS00LjYtNC42czIuMS00LjYsNC42LTQuNiw0LjYsMi4xLDQuNiw0LjYtMi4xLDQuNi00LjYsNC42WiIvPgogICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtNyIgZD0iTTIzLjQsMjQuMmMtLjQtLjItLjgtLjMtMS4xLS4zLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwaDBjLS4zLDAtMS40LDAtMS42LjgsMCwwLDAsLjEsMCwuMiwwLC40LDAsLjcsMCwxLC4yLDEuOS41LDMsLjksMy42LjIuNC40LjYuNS43LjIuMi4zLjIuMy4yLDAsMCwwLDAsLjItLjEuMi0uMS40LS40LjctMSwwLDAsMCwwLDAsMCwuMS0uMy4zLS43LjQtMS4yLjItLjYuMy0xLjQuNC0yLjQsMCwwLDAsMCwwLDAsMC0uMywwLS41LDAtLjgsMC0uNC0uMi0uNi0uNS0uOFoiLz4KICAgICAgICA8Zz4KICAgICAgICAgIDxwYXRoIGQ9Ik0xMSw0NS41Yy0uNC0uMi0uOS0uMy0xLjMtLjUtMy0xLTUuOS0yLjItOC43LTMuOCwwLDAtLjIsMC0uMS4xLjMuNS43LDEsMS4yLDEuNCwyLjEsMS44LDQuOCwyLjgsNy41LDMsLjUsMCwxLDAsMS40LDAsMCwwLC4xLS4xLDAtLjJaIi8+CiAgICAgICAgICA8cGF0aCBkPSJNNDQuOCw0MC42czAsMCwwLDBjLTEuNCwwLTIuOCwwLTQuMiwwLS44LDAtMS43LDAtMi41LjEuOS0zLC41LTYuMS0xLjEtOS0uOC0xLjQtMS43LTIuNC0yLjMtMywxLS44LDEuOC0xLjksMi4yLTMuMywxLTMsMC01LjgtLjYtNy4xaDBzMi44LTEuNywyLjgtMy43YzAsMC0xLjkuOC0zLjcuNi0uNy0uMS0xLjQtLjMtMi4zLS41bDUuNy0yLjVjLjEsMCwuMS0uMywwLS4zTDIyLjMsMy40aDBMNS45LDExLjdjLS4xLDAtLjEuMywwLC4zbDUuNywyLjRjLS44LjItMS42LjQtMi4zLjUtMS44LjMtMy43LS42LTMuNy0uNiwwLDIuMSwyLjgsMy43LDIuOCwzLjdoMGMtLjYsMS4zLTEuNiw0LjItLjYsNy4xLjUsMS40LDEuMywyLjUsMi4zLDMuMy0uNi42LTEuNSwxLjYtMi4zLDMtMS42LDIuOC0yLDUuOS0xLjEsOS0uOCwwLTEuNywwLTIuNS0uMS0xLjQsMC0yLjgsMC00LjIsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwuMi43LjQsMS41LjcsMi4yLjgsMS44LDEuOSwzLjYsMy42LDQuNy40LjIuOS40LDEuMi41LDEuNS40LDMsLjYsNC42LjcuOCwwLDEuNiwwLDIuNS0uMS4xLjguNSwyLDEuNCwzLjUsMCwwLC4yLTEuOC45LTIuMSwwLDAsLjQsMi44LDMuNiw0LjgsMCwwLC4zLTEuOS40LTIuMSwwLDAsLjQsMi42LDMuNSw0LjYsMy4xLTEuOSwzLjUtNC42LDMuNS00LjYuMi4yLjQsMi4xLjQsMi4xLDMuMi0yLDMuNi00LjgsMy42LTQuOC43LjMuOSwyLjEuOSwyLjEsMS0xLjUsMS4zLTIuNywxLjQtMy41LDIuNS40LDUuOCwwLDcuNy0uOCwyLjYtMS4yLDQuMy00LjUsNS03LjIsMCwwLDAsMCwwLDBaTTQ0LjUsNDAuN3MwLDAsMCwwYy0xLjMsMS43LTIuNiwzLjQtNC4yLDQuNi0uNS40LTEsLjYtMS43LjctMS43LjQtMy40LjktNS4yLjgtLjcsMC0xLjMtLjItMS45LS41LDEuMi0zLjYsNS41LTQuNiw5LTUuMSwxLjMtLjIsMi42LS40LDMuOS0uNiwwLDAsMCwwLDAsMFpNOCw0Ni42Yy0uNy0uMi0xLjQtLjMtMi4xLS41LS4zLDAtLjUtLjEtLjgtLjMtLjktLjQtMS42LTEuMS0yLjQtMS44LTEtMS0xLjgtMi4xLTIuNy0zLjMuNiwwLDEuMy4yLDEuOS4zLDQsLjYsOS42LDEuMSwxMS4xLDUuNC0xLjUuOC0zLjQuNi01LC4yWk0xMS43LDE3LjlzLTItLjYtMi44LTEuM2guMmMwLDAsMi4yLS43LDMuMS0uOS45LS4yLDIuMi0uNiw1LjUuNCwzLjMsMSw0LjUsMy44LDQuNSwzLjhoMHMwLDAsMCwwaDBzMS4zLTIuOCw0LjUtMy44YzMuMy0xLDQuNi0uNiw1LjUtLjQuOS4yLDMuMSwxLDMuMSwxaC4yYy0uOC41LTIuOCwxLjItMi44LDEuMmgwczIuNy40LDIuNyw0LjgtNC41LDYtNC41LDZjMCwwLTQsMS41LTYuNS0xLjdoLS4xYzAtLjUuMS0xLC4xLTEuNXYtLjNjMC0uOCwwLTEuNC0uMy0xLjUtLjctLjQtMi0uNS0yLS41LDAsMC0xLjMsMC0yLC41LS4yLjEtLjMuNS0uMywxLDAsMCwwLC4yLDAsLjNoMHMwLDAsMCwwYzAsMCwwLC4xLDAsLjJ2LjJjMCwuNSwwLDEsLjIsMS41bC0uMi4zaDBjLTIuNiwzLTYuNCwxLjUtNi40LDEuNSwwLDAtNC41LTEuNy00LjUtNnMyLjctNC44LDIuNy00LjhaTTIwLjYsMjVoMGMwLDAsMC0uMSwwLS4yLjItLjgsMS4zLS44LDEuNi0uOCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwuMiwwLC43LDAsMS4xLjMuMy4yLjUuNC41LjgsMCwuMywwLC41LDAsLjgsMCwwLDAsMCwwLDAsMCwxLS4yLDEuOC0uNCwyLjQtLjEuNS0uMi45LS40LDEuMiwwLDAsMCwwLDAsMC0uMi42LS41LjktLjcsMSwwLDAtLjIuMS0uMi4xLDAsMC0uMSwwLS4zLS4yLS4xLS4xLS4zLS40LS41LS43LS4zLS43LS43LTEuOC0uOS0zLjYsMC0uMywwLS42LDAtMVpNMTEuNiwyOS43YzEuNi45LDMuMywxLjMsNC41LDEuMywyLjYsMCw0LjEtMS41LDQuMS0xLjUsMCwwLC4xLDEuNywyLDMuMSwxLjktMS40LDItMy4xLDItMy4xLDAsMCwxLjUsMS41LDQuMSwxLjVzMy0uNCw0LjYtMS4zYzEsLjksNSw1LDMuMSwxMC44LDAsLjEsMCwuMiwwLC4zLTEuNC4zLTIuOC45LTQsMS43LjItLjguNC0xLjYuNS0yLjQuMi0yLjEtLjItNC40LTEuMy02LjItLjItLjQtLjQtLjctLjctMSwwLDAsMCwwLDAsMC0uMS0uMS0uMywwLS4zLjEsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLC4xLjcsMS4zLjcsMywwLDQuMy0uNiwxLjMtMS43LDIuMy0yLjgsMy4yLjItMS4xLDAtMi4zLS41LTMuNywwLS4xLS4xLS4zLS4yLS40LDAsMCwuMS0uMS4yLS4yLDEuMS0xLjMsMi0yLjksMS43LTQuNiwwLDAsMCwwLDAsMCwwLS4yLS4zLS4yLS4zLDAsMCwuNS0uMi45LS41LDEuMy0uMS4yLS4zLjQtLjQuNiwwLDAtLjEuMS0uMi4yLS4zLjMtLjcuNi0xLC44LDAsMCwwLDAsMCwwLDAtLjYtLjEtMS4zLS41LTEuOC0uNS0xLTEuOS0uMy0xLjUuNywwLDAsMCwwLDAsMCwwLDAsMCwuMiwwLC4zLDAsLjgsMCwxLjctLjMsMi41LS4yLjUtLjQuOS0uNywxLjMtLjIuMy0uNS43LS43LDEsMCwwLS4xLS4yLS4yLS4yLS43LS44LTEuNS0xLjMtMi4xLTIuMS0uNy0uOS0xLjEtMS45LTEtMy4xLDAsMC0uMS0uMS0uMiwwLS40LjUtLjYsMS4yLS42LDEuOCwwLDAsMCwwLDAsMGgwcy0uNS0uMy0uNS0uM2MtMS0uNy0yLTEuNy0yLjEtMywwLS4yLS4zLS4yLS4zLDAsMCwwLDAsMCwwLDAtLjIsMSwuMSwyLjEuNiwzLC4yLjQuNS43LjcsMS4xLjIuMi40LjUuNi43LS42LDEuMy0uOSwyLjctLjYsNC0xLjItLjktMi4yLTEuOS0yLjgtMy4yLS43LTEuNC0uNy0zLjEuMS00LjQsMCwwLDAsMCwwLDAsMCwwLDAtLjEsMC0uMiwwLDAsMCwwLDAsMCwwLDAtLjIsMC0uMiwwLDAsMCwwLDAsMCwwLS4zLjMtLjUuNi0uNi45LS4xLjItLjMuNS0uNC43LTEuMywyLjYtMS4yLDUuNC0uNCw4LjEtMS4yLS45LTIuNS0xLjUtNC0xLjcsMC0uMSwwLS4yLDAtLjMtMS45LTUuOCwyLTkuOCwzLTEwLjhaTTE4LjksMzYuOWMwLC4zLjIuNi40LjkuNiwxLDEuNCwxLjksMi41LDIuNCwwLDEtLjIsMi41LS4zLDMuNi0xLjItLjYtMi4zLTEuNC0yLjktMi42LS42LTEuMy0uNC0zLC4yLTQuNFpNMjMuMSw0My45bC0uMy0zLjljMC0uMS4xLS4zLjEtLjUuMSwwLC4yLDAsLjMtLjEsMS0uNSwxLjktMS4zLDIuNS0yLjIsMSwyLjIuOCw0LjYtMS40LDYuMS0uNC4zLS44LjUtMS4zLjdaTTE2LjgsNDYuNGMwLDAsMC0uMi0uMi0uMy0xLjUtMS44LTIuOC0zLjgtMy40LTYuMS0uMS0uNS0uMi0xLjEtLjItMS42LjUsMS42LDEuNSwzLDIuNyw0LjIuNS41LDEuMy40LDEuNy0uMSwwLDAsMCwwLDAtLjEuNywxLjQsMiwyLjQsMy40LDMuMWwtNC4xLjlaTTI3LjEsNDIuNGMwLC4xLjEuMi4yLjMuNC40LDEuMS40LDEuNSwwLC42LS42LDEuMi0xLjMsMS43LTIuMS40LS42LjgtMS40LDEtMi4xLDAsMS4xLS4zLDIuMy0uOCwzLjMtLjcsMS42LTEuNywzLjEtMi44LDQuNCwwLDAtLjEuMi0uMi4zbC00LS45YzEuNS0uOCwyLjctMS44LDMuNC0zLjFaTTEzLjIsMTFzMi40LTIuNyw4LjktMi43aDBzMCwwLDAsMGMwLDAsMCwwLDAsMGgwYzYuNSwwLDguOSwyLjcsOC45LDIuN3YzLjNjLS44LDAtMS43LDAtMi44LjItMy40LjYtNC44LDEuNS02LDIuNSwwLDAsMCwwLS4xLDAsMCwwLDAsMCwwLDAtMS4zLTEuMS0yLjYtMS45LTYuMS0yLjUtMS4yLS4yLTIuMS0uMy0yLjktLjJ2LTMuM1oiLz4KICAgICAgICAgIDxwYXRoIGQ9Ik0zMy41LDQ1LjVjMCwwLDAsLjIsMCwuMi41LDAsMSwwLDEuNCwwLDMuMS0uMSw2LjktMS42LDguNy00LjMsMCwwLDAtLjItLjEtLjEtLjguNS0xLjYuOS0yLjQsMS4zLTEuNC43LTIuOSwxLjMtNC4zLDEuOC0xLjEuNC0yLjIuNy0zLjMsMS4xWiIvPgogICAgICAgICAgPHBhdGggZD0iTTI4LjksMjUuM2MxLjcsMCwzLTEuMywzLTNzLTEuMy0zLTMtMy0zLDEuMy0zLDMsMS4zLDMsMywzWk0yOS40LDIwLjljLjUsMCwxLC40LDEsMXMtLjQsMS0xLDEtMS0uNC0xLTEsLjQtMSwxLTFaIi8+CiAgICAgICAgICA8cGF0aCBkPSJNMTUuNiwyNS4zYzEuNywwLDMtMS4zLDMtM3MtMS4zLTMtMy0zLTMsMS4zLTMsMywxLjMsMywzLDNaTTE1LjEsMjAuOWMuNSwwLDEsLjQsMSwxcy0uNCwxLTEsMS0xLS40LTEtMSwuNC0xLDEtMVoiLz4KICAgICAgICA8L2c+CiAgICAgIDwvZz4KICAgICAgPHBhdGggY2xhc3M9ImNscy02IiBkPSJNMjQuNiwyNS41Ii8+CiAgICAgIDxwYXRoIGQ9Ik0yNC44LDI1LjgiLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==");
    --speechBubbleIcon : url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMDAgODYuMzkiPgogIDwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOS4yLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiAyLjEuMCBCdWlsZCAxMTYpICAtLT4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLnN0MCB7CiAgICAgICAgZmlsbDogI2ZmZjsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTk5Ljg1LDMxLjk2YzAtLjA3LDAtLjE1LS4wMS0uMjItLjU0LTkuMzQtMi41MS0xNS45MS01Ljk5LTIwLjU0LS43Ni0xLjA4LTEuNTktMi4wOC0yLjUyLTIuOTUtLjk5LS45NC0yLjIyLTEuNzctMy42My0yLjUxLTUuNzctMy40Mi0xMy42NC00Ljc3LTIzLjc1LTUuMzVDNjAuNjEuMjEsNTYuMDUuMDIsNTAuOTUsMGMtLjMyLDAtLjYzLDAtLjk1LDBzLS42MywwLS45NSwwYy01LjEuMDItOS42Ni4yMS0xMy4wMS40LTEwLjExLjU4LTE3Ljk4LDEuOTMtMjMuNzUsNS4zNS0xLjQxLjc0LTIuNjMsMS41OC0zLjYzLDIuNTEtLjkyLjg3LTEuNzYsMS44Ny0yLjUyLDIuOTVDMi42NywxNS44NC43LDIyLjQxLjE2LDMxLjc1YzAsLjA3LDAsLjE1LS4wMS4yMi0uMSwxLjU2LS4xNCwzLjEyLS4xNSw0LjY2LDAsMS41NC4wNSwzLjEuMTUsNC42NiwwLC4wNywwLC4xNS4wMS4yMi41NCw5LjM0LDIuNTEsMTUuOTEsNS45OSwyMC41NC43NiwxLjA4LDEuNTksMi4wOCwyLjUyLDIuOTUuOTkuOTQsMi4yMiwxLjc3LDMuNjMsMi41MSw1LjYsMy4zMiwxMy4xNyw0LjY4LDIyLjgzLDUuMjktMS4xNSwzLjg1LTQuMTksNy45My0xMS41NSw5LjczLTE0LjE3LDMuNDYsMjIuODMsOS45LDM2LjcxLTkuNDksMS4zNC0uMDYsMi41OC0uMTIsMy42OC0uMTgsMTAuMTEtLjU4LDE3Ljk4LTEuOTMsMjMuNzUtNS4zNSwxLjQxLS43NCwyLjYzLTEuNTgsMy42My0yLjUxLjkyLS44OCwxLjc2LTEuODcsMi41Mi0yLjk1LDMuNDgtNC42Myw1LjQ1LTExLjIsNS45OS0yMC41NCwwLS4wNywwLS4xNS4wMS0uMjIuMS0xLjU2LjE0LTMuMTIuMTUtNC42NiwwLTEuNTQtLjA1LTMuMS0uMTUtNC42NloiLz4KPC9zdmc+")
 }
 
/*
 	Visiblility States
 	We use these instead of classes because of React.
*/
	/*
		Show or hide miscellaneous divs and content based on whether agents are available 
	*/

	.avayaShowIfAvailable{display:none;}
	
	body[data-avayaexternalwidgetstate="available"]{
		.avayaShowIfAvailable{display:block; opacity:1; animation-name: fadeIn; animation-duration: 1s;}
	}

	 
	 /*
	 	Is the chat panel hidden (closed), visible, or minimized?
	 */
	body[data-avayapanelstate="hidden"]{
		#chatPanel{display:none}
	}
	body[data-avayapanelstate="visible"]{
		#chatPanel{display: grid;overflow: hidden;border: 1px solid #FFF;border-width: 1px 0px 0px 1px;}
	}
	body[data-avayapanelstate="minimized"]{
		#chatPanel{width:auto;transition: .15s;display: block;overflow: visible;}
		#chatHeader{padding: .75em 1em !important;font-size: 1.25em !important;}
		#chatHeader:hover{cursor:pointer !important; background:var(--508_green_accent)}
		#chatHeader button{display:none}
		#chatBody, 
		#chatSubHeader,
		#chatFooter{display:none !important}	
	}
	
	body[data-avayapanelstate="minimized"][data-avayabuttonstate="visible"]{
		#liveChatLink{display:none !important}
	}	

	/*
		Header alert shows a "!" when messages are waiting and the panel is minimized
	*/
	body[data-avayaheaderstate="alert"]{
		#chatHeader:before{
		content: "!";
		width:1.5em;
		height:1.5em;
		display:block;
		position:absolute;
		top:-1em;
		left:-1em;
		background:#C00;
		display:flex;
		font-size:1.5em;
		font-weight:bold;
		justify-content:Center;
		align-items:center;
		padding: .05em 0em 0em 0em;
		border-radius:100%;
		line-height: 1em;
		border:3px solid #FFF;
		animation-name: messagesWaitingAlert;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		}
		@keyframes messagesWaitingAlert {
			0% {background-color: #FFF; transform:rotate(-60deg)}
			25%{transform:rotate(20deg)}
			50%{background-color: #C00;transform:rotate(0deg)}
			100% {background-color: #C00;}
		}
	}

	/*
		What state is the chat in (pre-chat form, queued, live, waiting to close, etc.)
	*/	
	body[data-avayabodystate="offline"]{
	
	}
	body[data-avayabodystate="form"]{
		#chatBody{
			>*{display:none}
			#chatForm{display:grid;/* min-height: 50vh; *//* max-height: 90vh; */}
			#messages,
			#areyousure{display:none}
		}
	}
	
	body[data-avayabodystate="queued"]{
		#chatPanel #chatQueued{display:grid;color: #000;}
		#chatPanel #chatBody,
		#chatPanel #chatForm{display:none}
	}
	
	body[data-avayabodystate="chat"]{
		#chatPanel #chatBody {
			display:block;
			overflow-y: hidden;
			position: relative;
		}
		#chatPanel #chatForm,
		#chatPanel #chatQueued{display:none}
		
		@-moz-document url-prefix() {			
			#chatPanel {max-height:100dvh;}
			#chatPanel #chatBody{}
			#chatPanel #messages{
				max-height:calc(100dvh - 15rem);
			}
			#chatPanel:has(#chatWaitTime) #messages{
				max-height:calc(100dvh - 27rem);
			}
		}	
		#chatPanel #chatFooter{display:block}
		#chatPanel #chatBody #messages{display: flex;flex-direction: column;height: 100%;grid-area: messages;}
		#chatPanel #chatBody #controls{display:flex;grid-area: controls;}
		#chatPanel #chatBody #controls:has(#chatWaitTime)>*:not(#chatWaitTime){
			display:none;
		}
		#chatPanel #chatBody #controls #chatWaitTime{}
		a.saveChatTranscript{display:block}
	}
	
	body[data-avayabodystate="confirmclose"]{
		#chatPanel #chatForm,
		#chatPanel #chatQueued{display:none}
		#chatPanel #chatBody{display: block;}	
		#chatPanel #chatBody #messages,
		#chatPanel #chatBody #controls{display:none;}	
		#chatPanel #chatBody #areyousure{display: grid;grid-template-rows: 1fr auto auto auto 1fr;justify-content: center;align-items: center;}
		a.saveChatTranscript{display:block}
		
		#chatPanel{overflow: visible;}
		#chatPanel #closeChat,
		#chatPanel #minimizeChat,
		#chatPanel #chatSubHeader{opacity:0; transition:.25s; pointer-events:none;}
		#chatPanel #chatSubHeader,
		#chatPanel #messages,
		#chatPanel #controls{transition:.25s}
		#chatPanel #messages,
		#chatPanel #controls{transform: translateX(100%);}
		#chatPanel #areyousure{
			pointer-events:auto;
			opacity:1;
			padding-top:0em;
		}
	} 
	
	/*
		User is or has dragged the panel around the window
	*/
 
	body[data-avayadragstate="dragging"],
	body[data-avayadragstate="dragged"]{
		#chatPanel{border-top-right-radius:.75em;box-shadow: 0em 0em .25em #000, 0em 0em 2em #0002, 0em 0em 10em 0em #0002;overflow: visible;border-width: 1px;}
		#chatHeader{border-top-right-radius: .6em;}	
		#chatHeader #closeChat{border-top-right-radius:.5em}
	}
	body[data-avayadragstate="dragging"]{
		#chatHeader{cursor:grabbing !important};
		#chatHeader::before{content:""; background:#0000; width:1000%; height:1000%; position:absolute; top:-500%; left:-500%; z-index:9999999}
	} 


.sr-only{display:none}

@keyframes fadeIn {
  from {opacity:0}
  to {opacity:1}
}

.newChatRow h2{color:var(--linkColor); text-decoration:underline;}

#avayaOverlay{z-index:99999999999999999999999999999; position: fixed; border:none; top: 0em;bottom: 0em; display:none; flex-direction:column;align-items:flex-start;background:#FFF;padding:2em;width:60%;max-width:500px;max-height:80%;box-shadow:0em .5em 5em .5em #0005;}
#avayaOverlay[open]{display:flex;}
#avayaOverlay::backdrop {background-color: rgb(0 0 0 / 25%);}
#avayaOverlay svg{width:50px; height:50px; margin-right:.5em; }
#avayaOverlay h2{width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:flex-end; margin:0em; padding-bottom:.5em; margin-bottom:.5em; border-bottom:3px solid #72b431;}
#avayaOverlay h2 button.close{align-self:flex-start; color:#000 !important; margin-left:1em; position:relative; top:-.5em; right:-.5em; border:none; background:none; padding:0em;}
#avayaOverlay p{font-size:1.25em;}
#avayaOverlay button{align-self:center;}
#avayaOverlay button.launchChat{font-size:2em;margin-bottom:.75em;background:none;background:#69a42d;color:#FFF;padding: .33em 1em .25em;border-radius:5px;border:none;font-weight:bold;}
#avayaOverlay button.launchChat:hover{background:#006400}
#avayaOverlay button.close{opacity:.75;font-family:sans-serif;background: #EEE;border: 1px solid #AAA;padding: .33em .75em;border-radius: 3px;}
#avayaOverlay button.dontask{opacity: .75;font-family: sans-serif;font-size: .9em;border: none;background: none;margin-top: 1.25em;text-decoration: underline;font-style: italic;}
#avayaOverlay button:hover{opacity:1}

 .fixedPosition {
    position:fixed!important;
}

#chatPanel {
    display: none;
    background-color: #eee;
    padding-bottom: 0em;
    position: fixed;
    width: 475px;
    max-height: 100vh;
    z-index: 99999999999999999999999999999999999999999999;
    border-top-left-radius: .75em;
    /* border: 1px solid #fff; */
    /* border-left:1px solid #fff; */
    box-shadow: 0px 0px 0.25em inset #0002, 0px 0px 0.25em 0.01em #0005;
    transition:height .1s;
    max-width: 90%;
    grid-template-rows:1fr auto;
    overflow-y:auto;
    font-size:18px;
    font-family:sans-serif;
    bottom:0px;
    right:0px;
    transform: translate(0,0);
    flex-direction:column;
    
    *{padding:0em;text-wrap: balance;}
}
#chatPanel[data-visiblestate="visible"]{display:flex;}
#chatPanel 

#chatPanel #messages br~br{display:none}
#chatPanel #messages br:has(~br){display:none}

#chatPanel #chatWaitTime{
	padding: 0px;
	text-align:center;
	position:relative;
	width: 100%;
	color:#000;
	border-top:0px solid #FFF;
	background:#FFF;
	animation: fadeInWaitTime 2s ease-in-out forwards !important;
	opacity:0;

	
	#chatWaitStatus{
		margin:0rem;
		padding: 2.5rem;
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		gap:1.5rem;
		font-style:italic;
		font-size: 18px;
		background:#FFF;

		.spinner{margin:2rem 0rem 0rem 0rem}
		
		.longwaitwrapper{
			background:#f2c03111;
			box-shadow: 0rem 0rem 1rem #f2c031 inset;
			border:1px solid #f2c031;
			border-radius:1rem;
			padding:2rem;
			text-wrap:pretty;
			text-align:left;
			align-items:center;
			justify-content:center;
			display:flex;
			flex-direction:column;
			gap:1rem;
			font-style:normal;
			font-size: 1.75rem;
			
			a{
				display:inline-block;
				background:#69a42d;
				border-bottom:5px solid #0003;
				font-size:18pt;
				font-weight:bold;
				border-radius:2px;
				color:#FFF;
				padding: .5rem 1.5rem;
			}
		}
		
		@media screen and (max-height: 500px) {
			.longwaitwrapper{display:none;}
		}
		
		.positionwrapper{
			font-style:normal;
			font-weight:bold;
			line-height: 26px;
			
			.position{
				color:#69a42d
			}
		}

		.waitwrapper{
			font-size:16px;
			margin-top:-.5rem;
		}
	}
}
@keyframes fadeInWaitTime {
	0%{opacity:0}
	75%{opacity:0}
	100% {opacity:1}
}

#chatPanel .spinWrapper{
	display: flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	position: relative;

	.updateFlash{
		opacity:0;
		white-space:nowrap;
		transition: opacity .1s;
		position:absolute;
		top:1rem;
		font-size:18px;
		line-height: 1em;
		padding: .5em 1em;
		color: #FFF;
		font-weight: bold;
		border-radius: 2em;
		background: linear-gradient(-45deg, #69a42d, #FFF, #69a42d, #FFF);
		background-size: 400% 400%;		
	}
}

#chatPanel #chatWaitStatus[updateFlash="true"]{
	animation: gradient 3s;		
	animation-iteration-count:infinite;
}
#chatPanel #chatWaitStatus[updateFlash="true"] .spinWrapper .updateFlash{
	opacity:0 !important;	
	z-index:100;
	animation: gradient 4s ease-in-out forwards;
}

@keyframes gradient {
	0% {box-shadow:0px -2rem 1rem -1rem #FFF inset;}
	5% {box-shadow:0px -2rem 1rem -1rem #F2C031 inset;}
	10% {box-shadow:0px -2rem 1rem -1rem #FFF inset;}
	15% {box-shadow:0px -2rem 1rem -1rem #F2C031 inset;}	
	20% {box-shadow:0px -2rem 1rem -1rem #FFF inset;}
	100% {box-shadow:0px -2rem 1rem -1rem #FFF inset;}
}

/**
 *  This is the element the user will click to show the chat panel.
 */
 
	#liveChatLink {
		display:none;
	    --buttonSize: 1.56em;
	    --paddingSize: 1em;
	    --buttonColor: var(
		--508_green);
		position: fixed;
		right: 1em;
		bottom: 1em;
		background: var(--buttonColor);
		font-size: var(--buttonSize);
		font-family: sans-serif;
		font-weight: bold;
		padding: calc(var(--paddingSize)*.85) var(--paddingSize) calc(var(--paddingSize)*.5);
		border-radius:.75em;
		border:1px solid #fff;
		box-shadow: 0px 0px 0.25em inset #0002, 0px 0px 0.25em 0.01em #0005;
		z-index:1000;
		color: #FFF;
		text-decoration:none;
		
		span.icon{
			display: inline-block;
			width: 30px;
			height: 30px;
			margin: -1.5rem 1rem -.5rem -.5rem;
			background-repeat:no-repeat;
			background-position:center;
			background-image: var(--speechBubbleIcon);
		}	
	}
	
		#liveChatLink:hover, #liveChatLink:active{
			color:white;
			text-decoration:none !important;
			background:var(--508_green_accent)
		}
	
		body[data-avayabuttonstate="hidden"]{
			#liveChatLink{display:none}
		}
		
		body[data-avayabuttonstate="visible"]{
			#liveChatLink{display:block; animation-name: fadeIn; animation-duration: .5s;}
			#liveChatLink::after{content:"Chat Now!"}
		}
		
		/*Bot mode*/
		body[data-avayaexternalwidgetstate="botavailable"][data-avayabuttonstate="visible"]{
			#liveChatLink{
				span.icon{
			        width: 40px;
			        height: 40px;
			        margin: -1rem 1rem -1rem -.5rem;
			        border-radius: 100%;
			        background-color: #FFF;
			        background-image: var(--sageProfilePic) !important;;
				}
			}
			#liveChatLink::after{content:"Chat with Sage!"}
		}



#chatPanel #chatHeader{
	background: var(--508_green);
	display: flex;
	margin: 0rem 0rem 0rem 0rem;
	align-items: center;
	border-top-left-radius: .6em;
	padding: 0em 0em 0em 18px;
	color: #FFF;
	cursor:grab;
	font-weight: bold;
	align-items: baseline;
	font-family: sans-serif;
}

#chatPanel #chatHeader h2{flex-grow:1;font-size: 20px;padding:0em;margin: 0em;color: #FFF;font-family: sans-serif;border: none;box-shadow: none;}
#chatPanel #chatHeader button, #chatPanel #chatHeader div{color:#FFF;background:none;border:none;font-size: 20px;padding: .25em .5em;font-family:sans-serif;}
#chatPanel #chatHeader button:hover, #chatPanel #chatHeader div:hover{background:#0003}

#chatPanel #chatBody{
	/* min-height: 50vh; */
	/* max-height: calc(100vh - 20rem); */
	padding-bottom:0em;
	overflow-y: auto;
	display: block;
	}
#chatPanel #chatBody:has(#chatBody[style*=block]){overflow-y:hidden}

#chatPanel #chatSubHeader{background:var(--508_green_accent);padding:0em;margin:0em;text-align:right;display: flex;justify-content: space-between;padding-left: .3em;/* border-bottom: 2px solid var(--508_green_accent); */}
#chatPanel #chatSubHeader a{padding: .5em .75em;font-family:sans-serif;font-weight:bold;color: #FFF;font-size: 12pt;}

/*
 *  The messages in the chat are posted inside this div.
 *  The overflow setting, when combined with a maximum height,
 *  gives the div a scrollbar.
 */

#chatPanel #messages {
	display:none;
    border: 1px solid #cccccc;
    border-bottom-width:0px;
    border-left: 0px;
    border-right: 0px;
    padding: 1.5em;
    word-wrap: break-word;
    overflow-y: scroll;
    white-space: pre-wrap;
    font-size: 1em;
    grid-template-columns: 4em 1fr 4em;
    grid-template-rows: repeat(100,auto);
}

/*
 * URLs inside the message are black and underlined to stand out against the background.
 */
#chatPanel #messages a {
    color: #337ab7;
    text-decoration: underline;
}
#chatPanel #participants {
    padding-top: 4px;
}
#chatPanel #participants div {
    display: inline-block;
    width: 145px;
    border: 1px dotted #cccccc;
}
#chatPanel #chatFooter{
	display:none;
	#controls {
		border-top:1px solid #CCCCCC;
	    padding: 0em;
	    display: flex;
	    justify-content: stretch;
	    align-items: stretch;
	}
	#controls:has(#chatWaitTime){
		border-top:none;
		>*:not(#chatWaitTime){display:none}
	}
}

#chatPanel #usersDiv {
    height: 45px;
    display: none;
}

#chatPanel .bigtext {
    font-size: 19px;
}
#chatPanel .smalltext {
    font-size: 13px;
}

#chatPanel .sectionBorder {
    display: block;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 5px;
}

/**
 * Login form
 */
#chatPanel #chatForm{min-height:50vh;max-height: calc(100vh - 10em);}
#chatPanel #chatForm>*{padding: 0em 0em 0em 0em;}
#chatPanel #chatForm,
#chatPanel #chatForm .subForm{
    display: grid;
    max-width: 100%;
    grid-gap: 1em;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto 1fr;
    align-items: baseline;
    color:#000;
    padding: 1em 1.5em 1.5em;
    align-items: flex-start;
}

#chatPanel #chatForm .subForm{
	display: none;
	border-radius: 1em;
	text-wrap: balance;
	padding: 0em;
	grid-gap: 0em;
}

#chatPanel #chatForm .fieldgroup{display:flex;justify-content: stretch;grid-gap: 0em;align-items: baseline;grid-column: 2/3;padding: 0em;margin: 0em;}

#chatPanel #chatForm label{
	grid-column:1/2;
	padding-top: 5px;
	font-weight: bold;
	padding: 0em;
	margin: 0em;
	line-height: 1.33rem;
	}
#chatPanel #chatForm .wide label{grid-column:1/-1}

#chatForm label[required]::after{content:"*"; margin-left:.25em; display:inline-block; color:#C00}
#chatPanel #chatForm .wide label:not(:first-child){
	margin-top: .5em;
}

#chatPanel #chatBody {
    margin-bottom: 0em;
    padding-bottom: 0em;
}

#chatPanel #chatForm .formTitle{
	grid-column:1/-1;
	font-size:1.25em;
	font-weight:
	bold;
	padding-bottom: 0em;
}
#chatPanel #chatForm .formInstructions{
	font-size: 1em;
	line-height: 1.25em;
	grid-column:1/-1;
	/* padding: 0em 0em .5em 0em !important; */
	margin: 0em;
	font-style:italic;
	/* margin-top: 1em; */
}

#chatPanel #chatForm>.formInstructions p{margin-top:0em}
#chatPanel #chatForm>.formInstructions p:last-child{margin-bottom:0em}
#chatPanel #chatForm .formTitle:not(:first-child){margin-top:1em;}

#chatPanel #chatForm .fieldgroup input,#chatPanel #chatForm .fieldgroup select{margin: 0em .1em;}
#chatPanel #chatForm .fieldgroup select:first-child, 
#chatPanel #chatForm .fieldgroup input:first-child{margin-left:0em}
#chatPanel #chatForm .fieldgroup select:last-child, 
#chatPanel #chatForm .fieldgroup input:last-child{margin-right:0em}
#chatPanel #chatForm .fieldgroup select:has(option:checked[disabled]){
	color:#777;
	option:not([disabled]){
		color:#000
	}
}
#chatPanel #chatForm select[invalid],
#chatPanel #chatForm input[invalid],
#chatPanel #chatForm input[invalid]::placeholder,
#chatPanel #chatForm input:not(:focus):not(:placeholder-shown):invalid{
    background: #FDD;
    border-color:#C00;
    color: #000;
    font-weight: bold;
}
#chatPanel #chatForm input,
#chatPanel #chatForm select {
    width: 100%;
    font-size: 1em;
    text-align: left;
    display: flex;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    border: 1px solid #cccccc;
    padding: .33em .5em;
    flex-grow: 1;
    margin: 0em;
    border-radius: 3px;
    background: #FFF;
}
#chatPanel #chatForm select{height: 37px}
#chatPanel #chatForm .fieldgroup select{position: relative;top: 1px;}

#chatPanel #chatForm .fieldgroup.phoneGroup{
	input[type="text"]{width:1px !important; text-align:center;}
	span{margin:0 2px}
	#phone-area-code-chat,
	#phone-exchange-chat{flex-grow:3}
	#phone-line-chat{flex-grow:4}
	#phone-extension-chat{flex-grow:10; text-align:left}
}

#chatPanel .formCheckbox {
    padding-right: 172px;
    text-align: right;
}

/*
 *  The address inputs are hidden by default. To display them, set the value of "display" to "block".
 */
#chatPanel .addressClass {
    display:none;
}

#chatPanel #chatForm #openbutton-chat {
    width: 100%;
    grid-column: 1/-1;
    margin-top: .5em;
    padding: .5em 0em .4em;
    color:#FFF !important;
    background:#69a42d;
    box-shadow:0em -.5em 1em inset #0004;
    border:3px solid #69a42d;
    border-radius:3px;
    font-weight:bold;
    font-size:1.5em;
    margin:0em;
    display: block;
    text-align: center;
}

a.saveChatTranscript{color:#FFF !important; display:none;}
body[data-avayadidyouknowpaused="true"],
body[data-avayadidyouknowpaused="true~temp"]{
	#chatPanel #didyouknowheader button{
		background:#72b43155;
		border-color:#72b431 !important;
	}
}
#chatPanel #chatQueued{
	padding:2em;
	
	#didyouknowheader{
		margin: 1.5em 0em .25em;
		display: flex;
		justify-content: space-between;
		button{border:1px solid #333;
		padding:0em .5em;
		border-radius:3px;
		opacity: .8;
		font-size: .6em;
		font-weight:normal;
		font-family: sans-serif;}
	}

	
	#chatComfortMessages{
		display:grid;
		grid-template-columns: 100%;
		grid-template-rows:1fr;
		grid-template-areas:
			"target";
		list-style:none;
		/* padding:0em 1em 3em; */
		overflow:hidden;
	}
	#chatComfortMessages li{
		align-self: stretch;
		width: 100%;
		transform:translateX(-100%);
		grid-area:target;
		opacity:0;
		transition:.5s;
		display: flex;
		justify-content: space-around;
		align-items:center;
		background: #FFF;
		padding: 2em;
		font-size: 1.1em;
	}
	#chatComfortMessages li span{display: inline-block;justify-self: center;align-self: center;width: auto;}
	#chatComfortMessages a{text-decoration:underline}
	#chatComfortMessages[data-sequence="0"] li:nth-child(1),
	#chatComfortMessages[data-sequence="1"] li:nth-child(2),
	#chatComfortMessages[data-sequence="2"] li:nth-child(3),
	#chatComfortMessages[data-sequence="3"] li:nth-child(4),
	#chatComfortMessages[data-sequence="4"] li:nth-child(5),
	#chatComfortMessages[data-sequence="5"] li:nth-child(6),
	#chatComfortMessages[data-sequence="6"] li:nth-child(7),
	#chatComfortMessages[data-sequence="7"] li:nth-child(8),
	#chatComfortMessages[data-sequence="8"] li:nth-child(9),
	#chatComfortMessages[data-sequence="9"] li:nth-child(10){
		opacity:1; 
		transform:translateX(0%);
	}
}

/*
 * This is the customer's typing box.
 */
#chatPanel .chatField {
    border: 1px solid #cccccc;
    padding: 10px;
    font-size: 16px;
    flex-grow: 1;
    color: #000;
}

#chatPanel .poweredBy {
    display: block;
    border-top: 1px solid #cccccc;
    padding-top: 10px;
    text-align: right;
    position: relative;
    left: -20px;
    padding-right: 40px;
    font-size: 10px;
    top: 5px;
    display: none;
}

#chatPanel label[for="outmessage"]{display:none}
#chatPanel #outmessage{flex-grow:2;font-size:1em;padding: 1em;border: none;}
#chatPanel #sendbutton-chat {padding: 0em 1em;font-size: 1em;background:var(--508_green);border:none;color:var(--508_green_textColor)}
#chatPanel #sendbutton-chat:hover{background:var(--508_green_accent)}
#chatPanel #sendbutton-chat[disabled="true"]{background: #eee;border-left: 1px solid #CCC;color: #777;}

#chatPanel #closebutton-chat{
    display:none;
}


#chatPanel{
	.system{
	    text-wrap: balance;
	    color: #555;
	    font-size: 1em;
	    font-style: italic;
	    line-height: 1.5em;
	    text-align: center;
	    grid-column: 1/-1;
	    margin: 1em;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    overflow-wrap: break-word;
	    word-break: break-word;
	}	
	
	.whisper,
	.date:has(+.whisper){display:none}

	.agentDate,
	.response,
	.chatbot{
		background:#FFF;
		margin-right: 20% !important;
		grid-column: 1/3;
		border-left:5px solid var(--508_green);
	}
	
	.agentDate:has(+ .chatbot){
		color:var(--botnamecolor) !important;
		padding: 1.6rem 2rem 1rem 55px !important;	
	}
	,
	.agentDate:has(+ .chatbot),
	.chatbot{
		color:var(--bottextcolor) !important;
		border-color:var(--botbordercolor);
		background:var(--botbgcolor);
	}
	
	/*underline name/date*/
	.agentDate:has(+ .chatbot)::after{background: var(--botbordercolor)}	
}



#chatPanel .date,
#chatPanel .sent{
	background:#FFF;
	margin-left: 20% !important;	
	grid-column: 2/4;
	border-right:5px solid var(--508_green);
}

#chatPanel .agentDate,
#chatPanel .date{
	font-weight: bold;
	text-align: left;
	font-style: italic;
	margin: 2em 0em 0em;
	padding: 1.25em 1.3em .5em 1.3em;
	border-radius: 2rem 2rem 0em 0em;
	font-size: .75em;
	color:var(--508_green);
	font-family: sans-serif;
	text-transform: uppercase;
}
#chatPanel .agentDate:has(+.whisper){
	display:none
}

#chatPanel .agentDate[data-newagent="true"]{
	display: block !important;
}

	/*underline name/date*/
	#chatPanel .agentDate::after, 
	#chatPanel .date::after{content:"";display: block;width:100%;background: var(--508_green); height:1px;margin-top: .25em;}

#chatPanel .response,
#chatPanel .sent,
#chatPanel .chatbot {
    color: #000;
    text-align: left;
    padding: 0em 1em .75em 1em;
    border-radius: 0em 0em 2rem 2rem;
    margin-top: 0em;
    line-height: 1.5em;
}

#chatPanel .date+.date{display:none !important;}

	/*
	 * Group repeat messages from the same person for that slick text message look
	 */

	#chatPanel .response+.agentDate,
	#chatPanel .sent+.date{
	    display:none;
	}

	#chatPanel .response:has(+ .agentDate),
	#chatPanel .sent:has(+ .date){
		margin-bottom: -1px;
		border-bottom-left-radius:0 !important;
		border-bottom-right-radius:0 !important;
	}
	
	#chatPanel .response+.date,
	#chatPanel .sent+.agentDate{margin-top:1.5em;}


#chatPanel #loginErrorsDiv {
    border-top: 1px #C00 solid;
    display: none;
    padding: 0em;
    grid-column: 1/-1;
    padding: 1em 0em;
    color: #C00;
}
#chatPAnel #loginErrorsDiv p:first-child{font-weight:bold; margin:0em}
#chatPanel #loginErrorsDiv p:not(:first-child){
	padding-bottom:.1em;
	margin: 0em 0em 0em .75em;
	margin-left:.75em;
	position:relative;
}
#chatPanel #loginErrorsDiv p:not(:first-child)::before{
	content:"- ";
	position:absolute;
	top:0em;
	left:-.5em;
}
		

/*
 * For those who want chatbot messages to be separate to normal agent messages.
 */
#chatPanel .chatbot {

}

#chatPanel .center {
    text-align: center;
}

#chatPanel .user {
    display: inline;
    width: 170px;
}

#chatPanel .hidden {
    display: none;
}

#chatPanel .typing {
    background: yellow;
    color: black;
}

#chatPanel #user-chat {
}

#chatPanel #user-chat-last {
}

#chatPanel #phone-country {margin-left:.5em; flex-grow: 3;}

#chatPanel #phone-area {flex-grow: 3;}

#chatPanel #phone-chat {flex-grow: 8;}

/**
*Widget elements
*/


#chatPanel .button-widget {
    background-color: red; /* Green */
    border: none;
    color: white;
    padding: 4px 6px;
    text-align: center;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    font-style: italic;
    margin: 4px 2px;
    cursor: pointer;
}

#chatPanel .radio-widget {
   background-color: red; /* Green */
    border: none;
    color: white;
    padding: 4px 6px;
    text-align: center;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    
}


/*Close Confirmation*/
#chatPanel #areyousure{
	display:none;
	background:#EEE;
	opacity:0;
	pointer-events:none;
	top: 0;
	left: 0em;
	text-align: center;
	width: 100%;
	color: #000;
	flex-direction: column;
	justify-content: center;
	padding-bottom: 0;
	margin-top: 2.5em;
	padding-top:3em;
	transition:.25s;
	grid-area: messages / controls;
	}

#chatPanel #areyousure h3{
	font-size: 1.5em !important;
	color: #000 !important;
	margin: 1em;
}
#chatPanel #areyousure a{	
	display: block;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1.5em;
    color: #FFF;
    margin: .5em 2em;
    padding: 0.5em 0.5em 0.3em;
    border-radius: 3px;
    background: var(--508_green);
    border-bottom: 5px solid var(--508_green_accent);
 }
 #chatPanel #areyousure a:hover{background: var(--508_green_accent); text-decoration:none;}
 #chatPanel #areyousure #confirmclose{
 	background:#C00;
 	border-bottom-color:#900
 }
 #chatPanel #areyousure #confirmclose:hover{background: #900; text-decoration:none;}
 #chatPanel #areyousure #saveandclose{font-size:1.25em; background:none; border:none; color:#004357; text-decoration:underline}
 #chatPanel #areyousure #saveandclose:hover{background:#0001; text-decoration:none;}
 
/*Offer Survey After close*/
#postChatSurvey{
	position:fixed;
	bottom:0em;
	right:0em;
    z-index: 1000000000;
    padding: 1em;
    background: #69a42d;
    color: #FFF;
    font-size: 1.5em;
    box-shadow: -2em -2em 5em -2em inset #0004;
	border-top-left-radius: 1em;
    border: 3px double #FFF;
    border-right: none;
    border-bottom: none;    
}
#postChatSurvey p{
	max-width:250px;
	line-height: 1.25em;
	font-size: .9em;
	margin: 0em 0em 1em 0em;
}
#postChatSurvey a{	
    font-family: sans-serif;
	background:#FFF;
	color:#69a42d;
	font-weight:bold;
	padding:.25em .5em;
	border-radius:3px
}
#postChatSurvey a.reject{
	background:none;
	color: #FFF;
    text-decoration: underline;
    margin-right: 1em;	
    font-size: .9em;    
	padding-left:0em
}

.formBlocks{
	grid-column: 1/-1;
	display:grid;
	grid-gap: 1rem;
	/* margin-right: -1em; */
}

#chatPanel #chatForm .formgroup{
	grid-column: 1/-1;
	box-shadow: 0em 0em .5em #0003, 0em 0em .05em #0002;
	padding: .9em;
	border-radius: .5em;
	text-wrap: balance;
	grid-template-columns: auto 1fr;
	grid-gap: .5em;
	/* margin: 0em -.5em 0em -.5em; */
	display: grid;
	align-items: baseline;
	background: #FFFA;
}
	#chatPanel #chatForm .formgroup.subForm,
	#chatPanel #chatForm .formBlocks>div.formgroup{display:none;/* margin-bottom: 1em; */}
	#chatPanel #chatForm div[name='logon']{display:none;/* margin: 0em -.5em; */padding:0em;box-shadow:none;margin-bottom: 2rem;}

    #chatPanel .formgroup .clearbtn{font-size: .75em;color: #006685;font-style: italic;padding: 0em;border: 0em;align-self: flex-start;text-decoration: underline;}

#chatPanel #chatForm .formgroupHeader{grid-column:1/-1;font-size: 1.2em;font-weight:bold;display:flex;justify-content:space-between}

#chatPanel *[data-animation="flashtovisible"]{display: grid !important;grid-column: 1/-1;width: 100%;opacity:1;animation-name: flash;animation-duration: .5s;}
#chatPanel *.subForm[data-animation="flashtovisible"]{grid-template-columns:1fr !important;}
@keyframes flash {
  0% {opacity:0; background:#FF0;}
  25% {background:#FF05;}
  100% {opacity:1; background:#FF00;}
}

#chatPanel #chatForm *.wide:not(.subForm){grid-column:1/-1;display: flex;flex-direction: column;grid-gap: .15em;grid-template-columns:1fr}
#chatPanel #chatForm .subform.wide{grid-column:1/-1 !important;grid-template-columns: 1fr;grid-gap: 0em;display: none;}
#chatPanel #chatForm .formBlocks>div.wide{grid-template-columns:1fr; grid-gap:0em}
#chatPanel #chatForm .formBlocks>div.wide>*{grid-column:1/-1}

#chatPanel #chatForm textarea{width:100%;max-width:100%;height:5em;font-family: sans-serif;font-size: 1rem;padding: .25rem;margin-top: .5rem;}
 
/*Resizeable*/

#chatPanel .resizer-right {
  width: 5px;
  height: 100%;
  background: transparent;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: e-resize;
}

#chatPanel .resizer-bottom {
  width: 100%;
  height: 5px;
  background: transparent;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: n-resize;
}

#chatPanel .resizer-both {
  width: 5px;
  height: 5px;
  background: transparent;
  z-index: 10;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: nw-resize;
}

#chatPanel[environment='eservices']{
	#chatHeader{padding:0em 0em 0em 1em}
	#chatHeader h2{font-size: 1em!important;}	
	#chatHeader button, #chatHeader div{font-size: 1.25em;padding: .25em .55em;}
}

@media print {

	/*Under normal circumstances we don't want to print any chat elements*/ 
	body:not([data-avayabodystate="printing"]){
		#chatPanel,
		#liveChatLink,
		#postChatSurvey{display:none !important}
	}
	
	/*Unless the avayabodystate is in 'printing'*/
	body[data-avayabodystate="printing"]{
	
		/*hide every element on the page that isn't #chatPanel*/
		>*{display:none !important;}
		
		#chatPanel{
			display:block !important;
			width:100%;
			overflow: visible !important;
			max-width: 100%;
			height: auto !important;
			position: relative;
			transform: none;
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			

			#chatHeader,
			#chatSubHeader,
			#controls,
			#chatForm,
			#areyousure{
				display:none !important;
			}

			#chatBody,
			#chatBody,
			#messages{
				display:block !important;
				transform:translate(0px);
				border:none;
				overflow: visible !important;
				height: auto !important;
			}
			p{margin:0em 0em 1em 0em !important;
				padding:0em !important;
				border:none;
				text-align:left;
				position:relative;
			}
			.agentDate~.response,
			.date~.sent,
			.sent~.sent,
			.response~.response{margin-top:-1em !important}
	}
	
}

}

.chatbot:not(:last-child) .userchoice button{
	display:none
}

.userchoice{
	background: #FFF;
	border: 2px solid #F2C031;
	box-shadow: 0em 0em 2em .25em inset #F2C03155;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	border-radius:1rem;
	margin-top: 1rem;
	margin-bottom: 0rem;
	padding: 1rem !important;
	
	>*{flex-grow:1}

	span, .question{margin:.25rem .5rem; font-weight:bold; display:block;}
		
	button{
		background:#008000;
		color:#FFF;
		border:1px solid #0003;
		border-bottom-width:5px;
		border-radius:3px;
		margin: .33rem .33rem;
		padding: .5rem .5rem !important;
		font-size: 1.1rem !important;
		line-height: 1.5rem;
		font-weight:bold;
		text-wrap:pretty;
	}
	
	button.option{
		background:#005A75 !important;
		color:#FFF;
	}
	
	
	button:hover{
		border-bottom-color:#0000;
	}	
}

#onHoldMessages{
	margin: 1em;
	font-size: .6em;
	line-height: 1.25em;
	text-wrap: balance;
	display: none;
}

#agentIsTyping{
	font-size: 1em;
    color: #555;
    font-style: italic;
    display: block;
    order: 99999999;
    margin: 0rem 0rem 1rem !important;
}
.botHello{
	border-left: 5px solid var(--botbordercolor);
	background: var(--botbgcolor);
	margin-right: 20%;
	padding: 1em 1em .75em 1em !important;
	border-radius: 2rem;
	position:relative;
}
.botHello:before{
	content:"Sage (Chatbot)";
	font-weight:bold;
	font-style:italic;
	border-bottom:1px solid var(--botbordercolor);
	font-size:.75em;
	display:block;
	text-transform:uppercase;
	padding-bottom:3px;
	margin-bottom:8px;
	margin-left: 35px;
}
.agentDate:has(+ .chatbot){
	position:relative;
	padding-left:45px !important;
}
.agentDate:has(+ .chatbot):before,
.botHello:after{
	content:"";
	position:absolute;
	top: -1px;
	left: -3px;
	display:block;
	width: 45px;
	height:45px;
	background:#FFF;
	border-radius: 2rem;
	border:3px solid var(--botbordercolor);
	overflow:hidden;
	background-color: #d9e8d1;	
	background-image:var(--sageProfilePic);
	
}

.formInstructions{
	.botHello{
		margin-right:0rem;
		font-style:normal;
		margin-left: -7px;
		margin-right: -7px;
	}	
	.botHello:before{content:"Sage (Chatbot) Says..."}
}

body[data-avayaexternalwidgetstate="botavailable"]{
	#avaya_attributeTopic,
	select[customfieldname="subtopic"]{
		option:not([usebot="true"]){display:none;}
	}	
}

#chatPanel .spinner{
	--size: 1.5rem;
	--animSpeed : 2.5s;
	display:block;
	width:var(--size);
	height:var(--size);
	position:relative;
	margin-top:2rem;
}
#chatPanel  .spinner>span{	
	width:var(--size); 
	height:var(--size);	
	border-radius:100%;	
	position:absolute;	
	background:#72b431;
	animation: spinner var(--animSpeed) ease-in-out infinite forwards;
	transform-origin:50% 50%;
}
#chatPanel .spinner>span:nth-child(1){left:-2rem; animation-delay:calc(-1 * var(--animSpeed));}
#chatPanel .spinner>span:nth-child(2){left:0rem; animation-delay:calc(-.75 * var(--animSpeed));}
#chatPanel .spinner>span:nth-child(3){left:2rem; animation-delay:calc(-.5 * var(--animSpeed));}
@keyframes spinner{
	0%{opacity:.75; transform:scale(.85) translateY(0px);}
	5%{opacity:1; transform:scale(1) translateY(calc(-1*var(--size)));}
	10%{opacity:1; transform:scale(.85) translateY(calc(var(--size)/4));}
	15%{opacity:.25; transform:scale(.85) translateY(0px);}	
	100%{opacity:.75; transform:scale(.85) translateY(0px);}	
}

#chatPanel #messages .chatbot:has(table){
	
/* overflow-x: scroll; */
	
	border-top-right-radius:2rem;	
	//margin-right:0rem !important;
	
	table{		
		border-collapse: collapse;
		font-size: 1;
		margin: 0rem 0rem 0rem 0rem !important;
		thead{border-bottom:2px solid #000}
		tr:nth-child(odd) td{background:#FFF}
		tr:nth-child(even) td{background:#e9e9e9}		
		tr:last-child td{border-bottom:1rem solid #FFF}		
		td,	th{padding:.25rem !important;}
		td:last-child, th:last-child{border-right:1rem solid #FFF}		
		th{vertical-align:bottom;line-height: 1.25rem; border-bottom:2px solid #333; background:#e9e9e9; border-top:1rem solid #FFF}	
	}
	
	table.claimSummaryFISS{		
		td:first-child{white-space:nowrap !important}
		td:not(:first-child),
		th:not(:first-child){text-align:right;}
	}

	table.claimSummaryMCS{
		td:not(:first-child),
		th:not(:first-child){text-align:right}
	}
}