.fdc-toast {
  position: fixed;
  padding: 20px;
  max-width: 80%;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  box-sizing: border-box;
  text-align: center;
  z-index: 1000;
  -webkit-transition: opacity .3s linear;
  transition: opacity .3s linear;
}
.fdc-toast.has-icon {
    width: 367px;
    height: 200px;
    padding: 16px 0 20px 0;
}
.fdc-toast-icon {
    display: inline-block;
    background-size: contain;
    width: 100px;
    height: 100px;
}
.fdc-toast-icon-success {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ0LjEgKDQxNDU1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4NCiAgICA8dGl0bGU+QXJ0Ym9hcmQ8L3RpdGxlPg0KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPg0KICAgIDxkZWZzPjwvZGVmcz4NCiAgICA8ZyBpZD0i5Y+R5biWIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgaWQ9IkFydGJvYXJkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTAuMDAwMDAwLCAtMzU3LjAwMDAwMCkiIHN0cm9rZT0iIzdFRUE1MyIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSIjN0VFQTUzIj4NCiAgICAgICAgICAgIDxwYXRoIGQ9Ik01OS4xODMyMzY1LDM3NC4xMjEzNzEgTDcyLjkwMDkyNzEsNDAxLjkxOTc4MSBMNzIuOTAwOTI3MSw0MDEuOTE5NzgxIEM3My45ODc5MzE0LDQwNC4xMjI1NTYgNzYuMzA3ODE4OSw0MDUuNDQwMjggNzguNzU2NDg3Niw0MDUuMjQ1ODEgTDE1NC42MTQxMDUsMzk5LjIyMTI4MSBMMTU0LjYxNDEwNSwzOTkuMjIxMjgxIEMxNTUuMTY0NjU3LDM5OS4xNzc1NTcgMTU1LjY0NjQxMiwzOTkuNTg4NDIxIDE1NS42OTAxMzYsNDAwLjEzODk3MiBDMTU1LjcyOTA3Niw0MDAuNjI5Mjg0IDE1NS40MDU2OCw0MDEuMDc1MTE0IDE1NC45Mjc1MDcsNDAxLjE5MDMyMyBMNjkuMTE0ODk5NSw0MjEuODY1NTkzIEw2OS4xMTQ4OTk1LDQyMS44NjU1OTMgQzY1Ljg5MzM3NjMsNDIyLjY0MTc3MSA2Mi42NTI1OTkxLDQyMC42NTk0MjcgNjEuODc2NDIxMSw0MTcuNDM3OTA0IEM2MS44MTUxMDU4LDQxNy4xODM0MTUgNjEuNzcwNTEwNyw0MTYuOTI1MTg3IDYxLjc0MjkyMTYsNDE2LjY2NDg3MyBMNTcuMjkyMDQ4OSwzNzQuNjY5Mjg4IEw1Ny4yOTIwNDg5LDM3NC42NjkyODggQzU3LjIzMzg0MTQsMzc0LjEyMDA3OSA1Ny42MzE4NzY2LDM3My42Mjc2NzEgNTguMTgxMDg1NCwzNzMuNTY5NDY0IEM1OC41OTc3NzQ2LDM3My41MjUzMDEgNTguOTk3ODA5MiwzNzMuNzQ1NjA5IDU5LjE4MzIzNjUsMzc0LjEyMTM3MSBaIiBpZD0iVHJpYW5nbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwNi40ODk4NTMsIDM5Ny43OTg4NzgpIHJvdGF0ZSgtMzkuMDAwMDAwKSB0cmFuc2xhdGUoLTEwNi40ODk4NTMsIC0zOTcuNzk4ODc4KSAiPjwvcGF0aD4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg==);
}
.fdc-toast-icon-fail {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ0LjEgKDQxNDU1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4NCiAgICA8dGl0bGU+R3JvdXAgMzwvdGl0bGU+DQogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQogICAgPGRlZnM+PC9kZWZzPg0KICAgIDxnIGlkPSLlj5HluJYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPg0KICAgICAgICA8ZyBpZD0iQXJ0Ym9hcmQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMTcuMDAwMDAwLCAtMzU3LjAwMDAwMCkiPjwvZz4NCiAgICAgICAgPGcgaWQ9Ikdyb3VwLTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUuMDAwMDAwLCA1LjAwMDAwMCkiPg0KICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMyIgZmlsbD0iI0ZGN0U3RSIgY3g9IjI4LjQyMTA1MjYiIGN5PSIzNi4xMzUxMTM5IiByeD0iNy4xMDUyNjMxNiIgcnk9IjcuMDY5OTEzNTkiPjwvZWxsaXBzZT4NCiAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTMtQ29weSIgZmlsbD0iI0ZGN0U3RSIgY3g9IjYxLjU3ODk0NzQiIGN5PSIzNi4xMzUxMTM5IiByeD0iNy4xMDUyNjMxNiIgcnk9IjcuMDY5OTEzNTkiPjwvZWxsaXBzZT4NCiAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsIiBzdHJva2U9IiNGRjdFN0UiIHN0cm9rZS13aWR0aD0iNiIgY3g9IjQ1IiBjeT0iNDQuNzc2MTE5NCIgcng9IjQ1IiByeT0iNDQuNzc2MTE5NCI+PC9lbGxpcHNlPg0KICAgICAgICAgICAgPHBhdGggZD0iTTU3LjE3MDYxOTksNjMuNjY5MDMxNCBDNTUuMTI4NjE0MSw1OS40NjE3NjE1IDUwLjc5OTY5MDcsNTYuNTU5MzA4NyA0NS43ODk0NzM3LDU2LjU1OTMwODcgQzQwLjc3MTA3NzgsNTYuNTU5MzA4NyAzNi40MzYyMDE4LDU5LjQ3MTI0NTMgMzQuMzk4MzQ1NSw2My42ODk2NDU5IiBpZD0iT3ZhbC02IiBzdHJva2U9IiNGRjdFN0UiIHN0cm9rZS13aWR0aD0iNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=);
}
.fdc-toast-icon-warn {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ0LjEgKDQxNDU1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4NCiAgICA8dGl0bGU+6K2m5ZGKPC90aXRsZT4NCiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4NCiAgICA8ZGVmcz48L2RlZnM+DQogICAgPGcgaWQ9IuWPkeW4liIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIGlkPSJBcnRib2FyZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM2NS4wMDAwMDAsIC0zNjMuMDAwMDAwKSI+DQogICAgICAgICAgICA8cGF0aCBkPSJNNDA4LjM5MDQxMSw0MDAuOTUwNjY0IEM0MDkuODg3NDE4LDM5OC45ODM1NTUgNDExLjkyMzk0OCwzOTggNDE0LjUsMzk4IEM0MTcuMDc2MDUyLDM5OCA0MTkuMTEyNTgyLDM5OC45ODM1NTUgNDIwLjYwOTU4OSw0MDAuOTUwNjY0IEw0MjAuNjA5NTg5LDQwMC45NTA2NjQgQzQyMS43Mjk0MDEsNDAyLjQyMjEyNyA0MjIuMjAxNjg1LDQwNC4yODYxNyA0MjEuOTE3NjMsNDA2LjExMzMyNSBMNDE4LjYwMzA4NSw0MjcuNDMzNzgyIEw0MTguNjAzMDg1LDQyNy40MzM3ODIgQzQxOC4yODg2MjksNDI5LjQ1NjQ5IDQxNi41NDcwMDYsNDMwLjk0ODI3NiA0MTQuNSw0MzAuOTQ4Mjc2IEM0MTIuNDUyOTk0LDQzMC45NDgyNzYgNDEwLjcxMTM3MSw0MjkuNDU2NDkgNDEwLjM5NjkxNSw0MjcuNDMzNzgyIEw0MDcuMDgyMzcsNDA2LjExMzMyNSBMNDA3LjA4MjM3LDQwNi4xMTMzMjUgQzQwNi43OTgzMTUsNDA0LjI4NjE3IDQwNy4yNzA1OTksNDAyLjQyMjEyNyA0MDguMzkwNDExLDQwMC45NTA2NjQgTDQwOC4zOTA0MTEsNDAwLjk1MDY2NCBaIE00MTQuNTI0MzM2LDQ0NyBDNDExLjI2NDUxMSw0NDcgNDA4LjYyMTkwMSw0NDQuMzUyMzA1IDQwOC42MjE5MDEsNDQxLjA4NjIwNyBDNDA4LjYyMTkwMSw0MzcuODIwMTA5IDQxMS4yNjQ1MTEsNDM1LjE3MjQxNCA0MTQuNTI0MzM2LDQzNS4xNzI0MTQgQzQxNy43ODQxNjEsNDM1LjE3MjQxNCA0MjAuNDI2NzcxLDQzNy44MjAxMDkgNDIwLjQyNjc3MSw0NDEuMDg2MjA3IEM0MjAuNDI2NzcxLDQ0NC4zNTIzMDUgNDE3Ljc4NDE2MSw0NDcgNDE0LjUyNDMzNiw0NDcgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjRkZFQTA3Ij48L3BhdGg+DQogICAgICAgICAgICA8cGF0aCBkPSJNNDIzLjA0OTE5NSwzNzIuMDYzNDk1IEw0NjAuMDA0OTg2LDQ0NS45NzUwNzggQzQ2Mi4yMjc4OSw0NTAuNDIwODg0IDQ2MC40MjU4NzEsNDU1LjgyNjk0MSA0NTUuOTgwMDY0LDQ1OC4wNDk4NDUgQzQ1NC43MzAzNjUsNDU4LjY3NDY5NCA0NTMuMzUyMzQ4LDQ1OSA0NTEuOTU1MTQyLDQ1OSBMMzc4LjA0MzU1OSw0NTkgQzM3My4wNzI5OTcsNDU5IDM2OS4wNDM1NTksNDU0Ljk3MDU2MyAzNjkuMDQzNTU5LDQ1MCBDMzY5LjA0MzU1OSw0NDguNjAyNzk0IDM2OS4zNjg4NjUsNDQ3LjIyNDc3NyAzNjkuOTkzNzE1LDQ0NS45NzUwNzggTDQwNi45NDk1MDYsMzcyLjA2MzQ5NSBDNDA5LjE3MjQwOSwzNjcuNjE3Njg5IDQxNC41Nzg0NjYsMzY1LjgxNTY3IDQxOS4wMjQyNzMsMzY4LjAzODU3MyBDNDIwLjc2NjAyLDM2OC45MDk0NDYgNDIyLjE3ODMyMiwzNzAuMzIxNzQ5IDQyMy4wNDkxOTUsMzcyLjA2MzQ5NSBaIiBpZD0iVHJpYW5nbGUtMiIgc3Ryb2tlPSIjRkZFQTA3IiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+);
}
.fdc-toast-text {
    font-size: 28px;
    /*px*/
    display: block;
    text-align: center;
}
.fdc-toast-text.has-icon {
      padding-top: 16px;
      font-size: 48px;
      line-height: 48px;
}
.fdc-toast.is-placetop {
    top: 50px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
}
.fdc-toast.is-placemiddle {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.fdc-toast.is-placebottom {
    bottom: 50px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
}
.fdc-toast-pop-enter, .fdc-toast pop-leave-active {
    opacity: 0;
}