%loading-skeleton {
    color: transparent;
    appearance: none;
    -webkit-appearance: none;
    background-color: #eee;
    border-color: #eee;
    &::placeholder;

{
    color: transparent;
}

}

@keyframes loading-skeleton {
    from {
        opacity: .4;
    }

    to {
        opacity: 1;
    }
}

.loading-skeleton {
    pointer-events: none;
    animation: loading-skeleton 1s infinite alternate;
    img;

{
    filter: grayscale(100) contrast(0%) brightness(1.8);
}

h1, h2, h3, h4, h5, h6,
p, li,
.btn,
label,
.form-control {
    @extend %loading-skeleton;
}

}

.colorGreen {
    color: green;
}

.priceBorder {
    border-color: #f1f8ea;
}

.bgColorSuccess {
    background-color: #f1f8ea;
}

.colorDeepgreen {
    color: darkgreen;
}

/*a:hover{
    background-color:honeydew;
}*/

/*a:hover .transparent{
    background-color:none;
}*/

/*Image Hover*/

.example {
    cursor: pointer;
    /*height: 300px;*/
    position: relative;
    overflow: hidden;
    /*width: 400px;*/
    text-align: center;
}

    .example .fadedbox {
        background-color: honeydew;
        position: absolute;
        top: 0;
        left: 0;
        color: #808080;
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
        opacity: 0;
        width: 448px;
        height: 100px;
        padding: 130px 20px;
    }

    .example:hover .fadedbox {
        opacity: 0.8;
    }

    .example .text {
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
        transform: translateY(30px);
        -webkit-transform: translateY(30px);
    }

    .example .title {
        font-size: 2rem;
        text-transform: uppercase;
        opacity: 0;
        transition-delay: 0.2s;
        transition-duration: 0.3s;
    }

    .example:hover .title,
    .example:focus .title {
        opacity: 1;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }

/*Card Loading Animation*/
.box {
    /*max-width: 300px;*/
    width: 100%;
    padding: 0 15px;
}

.skeleton {
    padding: 15px;
    /*max-width: 300px;*/
    width: 100%;
    background: #fff;
    margin-bottom: 20px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12);
}

    .skeleton .square {
        height: 200px;
        border-radius: 5px;
        background: rgba(130, 130, 130, 0.2);
        background: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(130, 130, 130, 0.2)), color-stop(18%, rgba(130, 130, 130, 0.3)), color-stop(33%, rgba(130, 130, 130, 0.2)));
        background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
        background-size: 800px 100px;
        animation: wave-squares 2s infinite ease-out;
    }

    .skeleton .line {
        height: 12px;
        margin-bottom: 6px;
        border-radius: 2px;
        background: rgba(130, 130, 130, 0.2);
        background: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(130, 130, 130, 0.2)), color-stop(18%, rgba(130, 130, 130, 0.3)), color-stop(33%, rgba(130, 130, 130, 0.2)));
        background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
        background-size: 800px 100px;
        animation: wave-lines 2s infinite ease-out;
    }

.skeleton-right {
    flex: 1;
}

.skeleton-left {
    flex: 2;
    padding-right: 15px;
}

.flex1 {
    flex: 1;
}

.flex2 {
    flex: 2;
}

.skeleton .line:last-child {
    margin-bottom: 0;
}

.h8 {
    height: 8px !important;
}

.h10 {
    height: 10px !important;
}

.h12 {
    height: 12px !important;
}

.h15 {
    height: 15px !important;
}

.h17 {
    height: 17px !important;
}

.h20 {
    height: 20px !important;
}

.h25 {
    height: 25px !important;
}

.w25 {
    width: 25% !important;
}

.w40 {
    width: 40% !important;
}

.w50 {
    width: 50% !important;
}

.w75 {
    width: 75% !important;
}

.m10 {
    margin-bottom: 10px !important;
}

.circle {
    border-radius: 50% !important;
    height: 80px !important;
    width: 80px;
}

@keyframes wave-lines {
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }
}

@keyframes wave-squares {
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }
}

/*.modal-content-Offer {
    background-color: transparent;
    color: white;
    border:none;
}*/

/*.modal-offer-close-button{
    color:lightcyan;
}*/

.text-underline-offer-date {
    text-decoration: underline;
}






/*----------------------- For Template Index.----------------------*/



body {
    font-family: Arial, sans-serif;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.popup-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 300px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    top: 100%;
    left: 0;
}

    .popup-content p {
        margin: 0;
    }

.input-group {
    display: flex;
    align-items: center;
    border-radius: 0;
}

    .input-group button {
        /*width: 50px;*/
        padding: 15px;
        margin: 0;
        border: 1px solid #ccc;
        background-color: #f8f9fa;
        cursor: pointer;
    }

    .input-group input {
        border: 1px solid #ccc;
        padding: 10px;
        flex: 1;
        outline: none;
    }