/*!
 *  G-growl v1  
 *  Copyright 2017 by ablack.
 *	https://codecanyon.net/item/ggrowl-notification-messages-with-icons-plugin/20436595
 */

#growlcontainer-left {
    position: fixed;
    z-index: 10000;
    font-size: 12px;
    width: 300px
}

#growlcontainer-right {
    position: fixed;
    z-index: 10000;
    font-size: 12px;
    width: 330px
}

.box {
    list-style: none;
    padding-left: 0;
    height: auto;
    margin: 5px;
    min-height: 50px
}

.box>li {
    line-height: -moz-block-height;
    line-height: -o-block-height;
    line-height: -webkit-block-height;
    line-height: -ms-block-height;
    margin-left: 10px;
    height: 100%
}

.box>li>p {
    margin: 0
}

.box>li>p:nth-child(2) {
    font-size: 12px
}

.growlstatusStyleButton {
    width: 70px;
    background: red;
    text-align: center;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
    display: inline-block;
    margin-left: 5px
}

.growlstatusHelp {
    cursor: help
}

.growlstatus {
    display: none;
    min-height: 50px;
    line-height: 20px;
    padding: 0;
    position: relative;
    background-color: #000;
    color: #fff;
    margin-bottom: 5px;
    overflow: hidden;
    font-size: 14px;
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif
}

.growlstatus>div:nth-child(1) {
    height: 100%;
    width: 20px;
    position: absolute;
    right: 0;
    transform: skewX(10deg);
    transition-duration: 1s;
    z-index: 222
}

.growlstatus>div:nth-child(2) {
    height: 100%;
    width: 10px;
    position: absolute;
    right: 0;
    transform: skewX(10deg);
    transition-duration: 3s;
    z-index: 2222
}

.growlstatus .growltitle {
    font-weight: 700;
    position: relative;
    top: -3px;
    margin: 10px
}

.growlstatusclose {
    position: absolute;
    top: 0;
    right: -15px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: none;
    font-size: 20px;
    z-index: 222222
}

.growlstatus:hover .growlstatusclose {
    display: block
}

.growlmessage {
    padding-left: 44px;
    margin: 0
}

.growlicon {
    margin-right: 15px;
    float: left;
    color: #fff
}

.growlwithicon {
    padding-left: 50px;
    background-position: 5px 10px;
    background-repeat: no-repeat
}

.top-right {
    top: 20px;
    right: 20px
}

.bottom-right {
    bottom: 20px;
    right: 20px
}

.top-left {
    top: 20px;
    left: 20px
}

.bottom-left {
    bottom: 20px;
    left: 20px
}

.growlImag {
    position: absolute;
    right: 5px;
    z-index: -1;
    transform: translateY(-50%);
    top: 50%
}

.themeSuccess {
    background-color: rgba(22, 189, 14, 0.8);
    color: #fbfbfb;
    border-radius: 3px
}

.themeWarning {
    background: rgba(242, 123, 8, 0.82);
    color: #fbfbfb;
    border-radius: 3px
}

.themeError {
    background-color: rgba(225, 8, 8, 0.8);
    color: #fbfbfb;
    border-radius: 3px
}

.themeDefault {
    background: #423f3f;
    color: #fff;
    box-shadow: 1px 1px 4px 0 #7e7777;
    text-shadow: 0 0 1px #0c0c0c;
    margin: 5px;
    border-radius: 2px
}

.theme01 {
    background: #fc4444b3;
    border: solid 1px red;
    color: #000
}

.theme02 {
    background: #00fff666;
    border: solid 1px #005cea;
    color: #0d33d7;
    border-radius: 10px
}

.theme03 {
    background: #000000b3;
    border: solid 1px #000;
    color: #c3c3c3
}

.theme04 {
    background: #1e1c1c;
    border: solid 1px #000;
    color: #fff;
    border-radius: 5px
}

.theme05 {
    background: #a80000;
    border: solid 1px #470000;
    color: #000;
    border-radius: 3px
}

.theme06 {
    background: #0079a8;
    border: solid 1px #03ffff;
    color: #11e3fc;
    border-radius: 3px
}

.theme07 {
    background: #75d4f9;
    border: solid 1px #003e3e;
    color: #003e3e;
    border-radius: 3px
}

.theme08 {
    background: #9e0fdd;
    border: solid 1px #c864c6;
    color: #fff;
    border-radius: 3px
}

.theme09 {
    background: #2f0044;
    border: solid 1px #be42f5;
    color: #c76eef;
    border-radius: 3px
}

.theme10 {
    background: #f2006f;
    border: solid 1px #be42f5;
    color: #d1bcdb;
    border-radius: 3px
}

.theme11 {
    background: #10e6ff;
    border: solid 1px #0e99bf;
    color: #3d3c3e;
    border-radius: 3px
}

.theme12 {
    background: #111;
    border: solid 1px #f6f6f6;
    color: #3d3c3e;
    border-radius: 3px
}

.theme13 {
    background: #28ff60;
    border: solid 1px #f6f6f6;
    color: #fbfbfb;
    border-radius: 3px
}

.theme14 {
    background: #61b978;
    border: solid 1px #f6f6f6;
    color: #fbfbfb;
    border-radius: 3px
}

.growlhover>div:nth-child(1) {
    background: #fff;
    right: 110%;
    box-shadow: 0 0 10px 4px whate;
    transition-property: right, background;
    transition-duration: 1s
}

.growlhover>div:nth-child(2) {
    background: #fff;
    right: 110%;
    box-shadow: 0 0 10px 4px whate;
    transition-property: right, background;
    transition-duration: 1.5s
}

#growlcontainer-right>div>img {
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    right: 15px;
    border: solid
}

.anme-timer {
    height: 2px;
    width: 100%;
    background: red;
    position: absolute;
    bottom: 0
}

@-webkit-keyframes Atimer {
    from {
        width: 0
    }
    to {
        width: 100%
    }
}

@keyframes Atimer {
    from {
        width: 0
    }
    to {
        width: 100%
    }
}

.themeInfo {
    background-color: rgba(11, 136, 204, 0.8);
    color: #fbfbfb;
    border-radius: 3px;
    margin-bottom: 3px
}