@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
/* ----------------------------------------
    animation scale-up-hor-left
---------------------------------------- */
.scale-up-hor-left {
    -webkit-animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes scale-up-hor-left {
    0% {
        -webkit-transform: translateX(-100%) translateY(-50%);
                transform: translateX(-100%) translateY(-50%);
        -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
    }

    100% {
        -webkit-transform: translateX(0) translateY(-50%);
                transform: translateX(0) translateY(-50%);
        -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
    }
}

@keyframes scale-up-hor-left {
    0% {
        -webkit-transform: translateX(-100%) translateY(-50%);
                transform: translateX(-100%) translateY(-50%);
        -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
    }

    100% {
        -webkit-transform: translateX(0) translateY(-50%);
                transform: translateX(0) translateY(-50%);
        -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
    }
}

/* ------------------------------------------ */

.cdgk__notification {
    position: fixed;
    top: 50%;
    left: 0;
    overflow: hidden;
    width: 150px;
    padding: 15px 0;
    transition: 0.3s;
    transition: all 0.3s ease 0s;
    transform: translateY(-50%);
    z-index: 9999;
}
.cdgk__notification ul {
    margin: 0 15px 0 0;
    padding: 0;
}
.cdgk__notification ul li {
    font-size: 16px;
    display: block;
    list-style: none;
    color: #FFF;
}
.cdgk__notification ul li + li {
    padding-top: 10px;
}
.cdgk__notification ul li a {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: center;
    padding: 10px 15px 7px;
    transition: all 0.3s ease 0s;
    text-decoration: none;
    box-shadow: 0 4px 12px 1px rgba(0, 0, 0, 0.12);
}
.cdgk__icon {
}

.cdgk__text {
    margin-left: 10px; /*10*/
}
.cdgk__text span {
    margin-left: 30px; /*10*/
}
.cdgk__text svg {
    transition: all 0.3s ease 0s;
    white-space: nowrap;
    opacity: 1;
}.cdgk__text span {
    transition: all 0.3s ease 0s;
    white-space: nowrap;
    opacity: 1;
}
.cdgk__notification-close {
    width: 70px;
}
.cdgk__notification-close .cdgk__text svg {
    opacity: 0;
}
.cdgk__notification-close .cdgk__text span {
    opacity: 0;

    margin-left: 30px;
    transform:translate(0 10); font-size:7; font-family:Roboto-Regular, Roboto; letter-spacing:0.05em;
}
.cdgk__notification:hover {
    width: 150px;
}
.cdgk__notification:hover .cdgk__text svg {
    opacity: 1;
}.cdgk__notification:hover .cdgk__text span {
    opacity: 1;
}
.cdgk__notification li svg {
    overflow: inherit;
    vertical-align: inherit;
}.cdgk__notification li img {
    overflow: inherit;
    vertical-align: inherit;
}