@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i');

/*html, body{
  height:100%;
  width:100%;
  font-family: 'Raleway', sans-serif;
  background-color:#efefef;
  display: table;
  text-align: center;

}*/

.toast__container {
    display: table-cell;
    vertical-align: middle;
}

.toast__cell{
  display:inline-block;
}

.add-margin{
  margin-top:20px;
}

.toast__svg{
  fill:#fff;
}

.toast {
  text-align:left;
    padding: 21px 0;
    background-color:#fff;
    border-radius:4px;
    max-width: 500px;
    top: 0px;
    position:relative;
    /*box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.2);*/
    box-shadow:14px -3px 14px -5px rgb(8, 139, 243);
}


.toast:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
  border-top-left-radius:4px;
  border-bottom-left-radius: 4px;

}

.toast__icon{
  position:absolute;
  top:50%;
  left:22px;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  padding: 7px;
  border-radius:50%;
  display:inline-block;
}

.toast__type {
  color: #3e3e3e;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 8px;
}

.toast__message {
    font-size: 14px;
    margin-top: 0;
  margin-bottom: 0;
    color: #878787;
} 

.toast__submitted {
    text-align:right !important;
    font:italic 10px arial;
    font-size: 10px;
    margin-top: 0;
    margin-bottom: 0;
    color: #1D72F3;
           margin-right: -46px;
}

.toast__content{
  padding-left:70px;
  padding-right:60px;
}

.toast__close {
    position: absolute;
    right: 22px;
    top: 50%;
    width: 14px;
    cursor:pointer;
    height: 14px;
  fill:#878787;
    transform: translateY(-50%);
}

.toast--green .toast__icon{
  background-color:#2BDE3F;
}

.toast--green:before{
  background-color:#2BDE3F;
}

.toast--blue .toast__icon{
  background-color:#1D72F3;
}

.toast--blue:before{
  background-color:#1D72F3;
}

.toast--yellow .toast__icon{
  background-color:#FFC007;
}

.toast--yellow:before{
  background-color:#FFC007;
} 


#note
        {
            position: absolute;
            z-index: 101;
            top: 18px;
            /*left: 43%;*/
            right: 1.3%;
            width: 201px;
            background: whitesmoke;
            color: black;
            text-align: center;
            line-height: 3.5;
            overflow: hidden;
            -webkit-box-shadow: 0 0 5px chartreuse;
            -moz-box-shadow: 0 0 5px chartreuse;
            box-shadow: 0 0 5px lightslategrey;
            cursor: pointer;
            font-size: 14px;
            border-radius: 10px;
            opacity: 0.8;
        }

         #note > #a :hover
            {
                color: white !important;
                font: bold;
            }

        @-webkit-keyframes swing
        {
            20%, 40%, 60%, 80%, 100%
            {
                -webkit-transform-origin: top center;
            }

            20%
            {
                -webkit-transform: rotate(15deg);
            }

            40%
            {
                -webkit-transform: rotate(-10deg);
            }

            60%
            {
                -webkit-transform: rotate(5deg);
            }

            80%
            {
                -webkit-transform: rotate(-5deg);
            }

            100%
            {
                -webkit-transform: rotate(0deg);
            }
        }

        @keyframes swing
        {
            20%
            {
                transform: rotate(15deg);
            }

            40%
            {
                transform: rotate(-10deg);
            }

            60%
            {
                transform: rotate(5deg);
            }

            80%
            {
                transform: rotate(-5deg);
            }

            100%
            {
                transform: rotate(0deg);
            }
        }

        .swing
        {
            -webkit-transform-origin: top center;
            transform-origin: top center;
            -webkit-animation-name: swing;
            animation-name: swing;
        }

        .cssanimations.csstransforms #note
        {
            -webkit-transform: translateY(-50px);
            -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
            -moz-transform: translateY(-50px);
            -moz-animation: slideDown 2.5s 1.0s 1 ease forwards;
        }

        @-webkit-keyframes slideDown
        {
            0%, 100%
            {
                -webkit-transform: translateY(-50px);
            }

            10%, 90%
            {
                -webkit-transform: translateY(0px);
            }
        }

        @-moz-keyframes slideDown
        {
            0%, 100%
            {
                -moz-transform: translateY(-50px);
            }

            10%, 90%
            {
                -moz-transform: translateY(0px);
            }
        } 


        /* Popup box BEGIN */
        .hover_bkgr_fricc
        {
            background: rgba(0,0,0,.4);
            cursor: pointer;
            display: none;
            height: 100%;
            position: fixed;
            text-align: center;
            top: 0;
            width: 100%;
            z-index: 10000;
            /*margin-left: -22%;*/
        }

            .hover_bkgr_fricc .helper
            {
                display: inline-block;
                height: 100%;
                vertical-align: middle;
            }

            .hover_bkgr_fricc > div
            {
                background-color: #fff;
                box-shadow: 10px 10px 60px #555;
                display: inline-block;
                height: auto;
                max-width: 551px;
                min-height: 100px;
                vertical-align: middle;
                width: auto;
                position: relative;
                border-radius: 8px;
                padding: 6px 3%;
            }

        .popupCloseButton
        {
            background-color: red;
            border: 0px solid #999;
            border-radius: 50px;
            cursor: pointer;
            display: inline-block;
            font-family: arial;
            font-weight: bold;
            position: absolute;
            top: 0px;
            right: 0px;
            font-size: 22px;
            line-height: 30px;
            width: 30px;
            height: 30px;
            text-align: center;
            color: whitesmoke;
        }

            .popupCloseButton:hover
            {
                background-color: #ccc;
            }

        .trigger_popup_fricc
        {
            cursor: pointer;
            font-size: 20px;
            /*margin: 20px;*/
            display: inline-block;
            font-weight: bold;
        }
        /* Popup box BEGIN */