.back-col {
    background-color: #fdfdfd;
    margin: 2px;
    max-width: 32% !important;
}

.ContactSnackBar {
    opacity: 1;
    margin-bottom: 0;
    position: fixed;
    right: 0;
    top: 50%;
    bottom: auto;
    width: 140px;
    height: auto;
    text-align: left;
}

    .ContactSnackBar.active,
    .ContactSnackBar.detail.active {
        margin-bottom: 0;
        opacity: 1;
        z-index: 99999;
    }

    .ContactSnackBar.detail > ul > li {
        transform: rotate(-90deg);
        width: 100%;
        margin-left: 46px;
        -webkit-transition: margin-left ease-in-out .3s;
        -moz-transition: margin-left ease-in-out .3s;
        -o-transition: margin-left ease-in-out .3s;
        transition: margin-left ease-in-out .3s;
        list-style: none;
    }

    .ContactSnackBar > ul > li:last-child {
        border-right: none;
    }

    .ContactSnackBar.detail > ul > li:hover {
        transform: rotate(-90deg);
        width: 100%;
        margin-left: 46px;
        -webkit-transition: margin-left ease-in-out .3s;
        -moz-transition: margin-left ease-in-out .3s;
        -o-transition: margin-left ease-in-out .3s;
        transition: margin-left ease-in-out .3s;
        list-style: none;
    }

    .ContactSnackBar > ul > li > a {
        color: #fff;
        cursor: pointer;
        display: block;
        font-size: 15px;
        text-decoration: none;
        padding: 12px;
        width: 154px;
        background: #63ab45;
        border-color: #63ab45;
    }

    .ContactSnackBar > ul > li:hover a {
        background-color: var(--dark);
    }

    .ContactSnackBar.detail > ul > li > a {
        padding: 12px;
    }

.ui-dialog .ui-dialog-titlebar-close {
    background-image: url(../../../../themes/bootstrap_subtheme/images/ex.svg) !important;
    border: 0;
    position: absolute;
    right: 0.3em;
    top: 50%;
    width: 17px;
    margin: -8px 0 0 0;
    padding: 0px;
    height: 17px;
}

ul .sub-menu.s-active {
    display: block !important;
    visibility: visible !important;
}

#ccavenue-pay-myform .container {
    font-size: 18px;
    position: relative;
}

#ccavenue-pay-myform .loader {
    height: 10px;
    width: 33%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#ccavenue-pay-myform .loader--dot {
    animation-name: loader;
    animation-timing-function: ease-in-out;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    background-color: black;
    position: absolute;
    border: 2px solid white;
}

    #ccavenue-pay-myform .loader--dot:first-child {
        background-color: #8cc759;
        animation-delay: 0.5s;
    }

    #ccavenue-pay-myform .loader--dot:nth-child(2) {
        background-color: #8c6daf;
        animation-delay: 0.4s;
    }

    #ccavenue-pay-myform .loader--dot:nth-child(3) {
        background-color: #ef5d74;
        animation-delay: 0.3s;
    }

    #ccavenue-pay-myform .loader--dot:nth-child(4) {
        background-color: #f9a74b;
        animation-delay: 0.2s;
    }

    #ccavenue-pay-myform .loader--dot:nth-child(5) {
        background-color: #60beeb;
        animation-delay: 0.1s;
    }

    #ccavenue-pay-myform .loader--dot:nth-child(6) {
        background-color: #fbef5a;
        animation-delay: 0s;
    }

#ccavenue-pay-myform .loader--text {
    position: absolute;
    top: 200%;
    left: 0;
    right: 0;
    width: 4rem;
    margin: auto;
}

@keyframes loader {
    15% {
        transform: translateX(0);
    }

    45% {
        transform: translateX(230px);
    }

    65% {
        transform: translateX(230px);
    }

    95% {
        transform: translateX(0);
    }
}

#whole-payment-form {
    background: #f9fcff;
    display: inline-block;
    padding: 10px;
}

    #whole-payment-form input {
        display: inherit;
        width: 100%;
    }