/*
	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:1.2em;
    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;
	font-size:1.5em;
	text-align:center;
	line-height:1.25em;
	position:relative;
	width: 100%;
	color:#000;
	border-top:0px solid #FFF;
	background: repeating-linear-gradient(
	    -45deg,
	    #DDD,
	    #DDD 10px,
	    #FFF 10px,
		#FFF 20px
	  );
	background-size: 200% 200%;
	animation: fadeInWaitTime 2s ease-in-out forwards,
		stripeAnimation 25s cubic-bezier(0.73, 0.48, 0.21, 0.43) infinite;
	opacity:0;

	
	#chatWaitStatus{background: #FFF;padding: 2rem;}	
	
	.position{
		font-weight:bold;
		font-size:1em;
		color:#69a42d
	}
	
	.waitmessage{
		font-size:.5em;
		font-style:italic;
		display:block;
	}	
	
	#chatWaitStatus>span:not(.position){
		font-size:.75em;
		font-style:italic;
		display:block;
	}
	
	#chatWaitStatus .messagewrapper{margin-bottom:.75em;}
	#chatWaitStatus .waitwrapper{margin-top:.75em;}
}
@keyframes fadeInWaitTime {
	0%{opacity:0}
	75%{opacity:0}
	100% {opacity:1}
}
@keyframes stripeAnimation {
	0%{background-position:100% 100%}
	100% {background-position: 0% 0%;}
}
#chatPanel #chatWaitStatus.updateFlash{
}
#chatPanel #chatWaitStatus:before{
	z-index:-1;
	content:" ";
	display:block;
	opacity:0;
	transition: opacity .1s;
	position:absolute;
	display:block;
	bottom: 2.1em;
	left: 12.5%;
	font-size:.5em;
	line-height: 1em;
	width: 75%;
	padding: .5em;
	color: #000;
	font-weight: bold;
	border-radius: 2em;
	background: linear-gradient(-45deg, #69a42d, #FFF, #69a42d, #FFF);
	background-size: 400% 400%;
}
#chatPanel #chatWaitStatus[updateFlash="true"]:before{
	z-index:1;
	opacity:1;	
	color:#FFF;
	content:"Checking wait time...";
	animation: gradient 2s ease-in-out forwards;
}
@keyframes gradient {
	0%{
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	95%{opacity:1}
	100% {
		background-position: 0% 50%;
		opacity:0
	}
}
/**
 *  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 2rem;
	color: #FFF;
	cursor:grab;
	font-size: 16pt;
	font-weight: bold;
	align-items: baseline;
	font-family: sans-serif;
}

#chatPanel #chatHeader h2{flex-grow:1;font-size: 2rem;padding:0em;margin: 0em;color: #FFF;font-family: sans-serif;}
#chatPanel #chatHeader button, #chatPanel #chatHeader div{color:#FFF;background:none;border:none;font-size: 2.5rem;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: .5em;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    color:#000;
    padding: 1em 1.5em 1.5em;
}

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

#chatPanel p.whisper,
#chatPanel p.date:has(+p.whisper){display:none}

#chatPanel p.agentDate,
#chatPanel p.response,
#chatPanel p.chatbot{
	background:#FFF;
	margin-right: 20% !important;
	grid-column: 1/3;
	border-left:5px solid var(--508_green);
}

/*
	BOT SETTINGS
*/

#chatPanel p.agentDate:has(+ p.chatbot){
	color:var(--botnamecolor) !important;
	padding: 1.6rem 2rem 1rem 55px !important;	
}
#chatPanel p.agentDate:has(+ p.chatbot),
#chatPanel p.chatbot{
	color:var(--bottextcolor) !important;
	border-color:var(--botbordercolor);
	background:var(--botbgcolor);
}

	/*underline name/date*/
	#chatPanel p.agentDate:has(+ p.chatbot)::after {background: var(--botbordercolor)}

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

#chatPanel p.agentDate,
#chatPanel p.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 p.agentDate:has(+.whisper){
	display:none
}

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

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

#chatPanel p.response,
#chatPanel p.sent,
#chatPanel p.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 p.date+p.date{display:none !important;}

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

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

	#chatPanel p.response:has(+ p.agentDate),
	#chatPanel p.sent:has(+ p.date){
		margin-bottom: -1px;
		border-bottom-left-radius:0 !important;
		border-bottom-right-radius:0 !important;
	}
	
	#chatPanel p.response+p.date,
	#chatPanel p.sent+p.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 p.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: .5em;
	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: .35em;
	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}
 
/*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;
			position:relative;
			width:100%;
			max-width:100%;
			height: 100% !important;
			overflow: auto !important;

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

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

}

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

.userchoice{
	background: #FFF;
	border:1px solid #F2C031;
	box-shadow: 0em 0em 2em inset #F2C03133;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	border-radius:1rem;
	margin-top: 1rem;
	margin-bottom: 0rem;
	padding:2rem !important;
	
	>*{flex-grow:1}
	
	.question{font-weight:bold; display:block; margin-bottom:1rem}	
	
	button{
		background:#008000;
		color:#FFF;
		border:1px solid #0003;
		border-bottom-width:5px;
		border-radius:3px;
		margin:1rem;
		padding:.5rem 1rem !important;
		font-size:2rem; 
		font-weight:bold;
	}
	
	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(+ p.chatbot){
	position:relative;
	padding-left:45px !important;
}
.agentDate:has(+ p.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;}
	}	
}