/*----- common css -----*/

    * {
        margin:0;
        padding:0;
        font-family: Source Sans Pro;
        box-sizing: border-box;
    }

    div {
        position:relative;
    }

    body {
        background-color: #eef4f4;
        padding: 45px 15px;
    }

    ul {
        list-style: none;
    }

/*--Pluguns & Add-ons css start--*/

    .plugins-addons-section {
        background-color: #fff;
        padding: 30px 30px 0;
        box-shadow: -1px 0 1px #CCD1D1;
    }

    .plugins-content-inner,
    .addons-content-inner {
        padding: 5px 0 0 0;
        display: flex;
        flex-wrap: wrap;
    }

    .plugins-block + .plugins-block,
    .addons-block + .addons-block {
        margin-left: 22px;
    }

    .plugins-block:nth-child(5n+1),
    .addons-block:nth-child(7n+1) {
        margin-left: 0;
    }

    .icon-status.plugins-inslatted {
        position: relative;
        display: block;
    }

    .icon-status.plugins-inslatted:after {
        content: '';
        position: absolute;
        right: -9px;
        top: -7px;
        height: 22px;
        width: 22px;
        background: url(../images/tick-mark-1.png) no-repeat;
    }

    .addons-content-header,
    .plugins-content-header,
    .block-header {
        display: flex;
    }

    .content-title {
        font-size: 18px;
        color: #404040;
        font-weight: 600;
        flex: auto;
    }

    .browse-all {
        color: #1197C4;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
    }

    .plugins-block,
    .addons-block {
        border: 1px solid #D4D4D4;
        border-radius: 4px;
        box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
    }

    .plugins-block {
        padding: 20px;
    }

    .addons-block {
        padding: 10px;
    }

    .plugins-block {
        flex-basis: 345px;
        max-width: 345px;
        margin-bottom: 20px;
    }

    .plugins-block:Hover,
    .addons-block:Hover {
        border: 1px solid #1197C4;
    }

    .addons-block {
        flex-basis: 240px;
        max-width: 240px;
        margin-bottom: 26px;
    }

    .block-inner {
        padding: 15px 0;
        border-top: 1px solid #E6E6E6;
        border-bottom: 1px solid #E6E6E6;
        margin: 15px 0;
    }

    .icon-status {
        flex-basis: 60px;
        max-width: 60px;
    }

    .title-status {
        flex-basis: auto;
        margin-left: 12px;
    }

    span.icon {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
    }

    img.plugins-icon {
        position: relative;
    }

    .title-status h2 {
        color: #1197C4;
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
        margin-bottom: 5px;
    }

    .status-desc {
        color: #707070;
        font-size: 14px;
        font-weight: 600;
    }

    .addons-block .icon {
        margin-left: 10px;
    }

    .block-inner p {
        color: #707070;
        font-size: 15px;
        font-weight: 600;
        line-height: 20px;
        margin-bottom: 10px;
    }

    .block-footer {
        display: flex;
    }

    .footer-title {
        flex: auto;
        font-size: 16px;
        font-weight: 600;
        color: #1197C4;
        text-decoration: none;
    }

    .footer-price {
        font-size: 16px;
        font-weight: 600;
        color: #707070;
    }

    .plugins-block .footer-price.free {
        color: #9C9B9B;
    }

    .addons-block .icon-status {
        flex-basis: 41px;
        max-width: 41px;
    }

    .addons-block .block-footer {
        padding-top: 10px;
        border-top: 1px solid #E6E6E6;
        margin-top: 15px;
        text-align: center;
    }

    .addons-block .footer-title {
        font-size: 14px;
    }

    .addons-block .title-status h2 {
        margin-bottom: 0;
    }

    .installed {
        color: #9C9B9B;
    }

    .install {
        color: #48C17E;
    }






    /*..........     2-plugin-details     ..........*/

    .plugin-details-header-top {
        display: flex;
        padding: 15px 0;
    }

    .plugin-details-header-top h2 {
        font-size: 16px;
        color: #000000;
        font-weight: 600;
        flex: auto;
    }

    .plugin-details-header-top .close-button a {
        color: #707070;
        font-size: 15px;
        font-weight: 400;
        padding: 5px 25px;
        background: #fff;
        border: 1px solid #E1E2E2;
        border-radius: 3px;
        text-decoration: none;
    }

    .plugin-details-header-top .close-button a:hover {
        color: #fff;
        background: #1197C4;
        border-color: #1197C4;
    }

    .plugin-details-header-bottom {
        display: flex;
        background: #fff;
        padding: 20px;
        align-items: center;
    }

    .details-header-product-desc {
        display: flex;
        flex: auto;
    }

    .product-image img {
        flex-basis: 112px;
        max-width: 112px;
        margin-right: 18px;
    }

    .product-desc {
        flex: auto;
    }

    .product-desc .product-name {
        color: #1197C4;
        font-size: 20px;
        font-weight: 600;
    }

    .product-desc .short-desc {
        color: #707070;
        margin-top: 5px;
        font-size: 18px;
        line-height: 20px;
    }

    .product-desc .developer-name {
        color: #707070;
        font-size: 16px;
        margin: 5px 0;
        display: inline-block;
    }

    .product-desc .product-rating {
        color: #707070;
        font-size: 19px;
    }

    .details-header-bottom-upgrade .upgrade-button {
        background: #1197C4;
        padding: 10px 30px;
        color: #fff;
        border-radius: 4px;
        margin-left: 25px;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
    }

    .details-header-bottom-upgrade .trial-text {
        color: #000;
        font-size: 15px;
    }

    .plugin-details-content-inner {
        display: flex;
        padding: 20px 20px 20px 40px;
    }

    .inner-details {
        flex: auto;
        margin-right: 10%;
    }
    .share-support {
        flex: none;
        min-width: 332px;
        max-width: 332px;
        background: red;
    }

    .inner-details .tab-menu ul {
        border-bottom: 2px solid #E1E2E2;
    }

    .tab-menu ul li {
        display: inline-block;
        padding-bottom: 10px;
    }

    .tab-menu ul li a {
        text-decoration: none;
        color: #707070;
        font-size: 16px;
        font-weight: 600;
        padding: 0 27px 10px;
    }

    .tab-menu ul li a.active,
    .tab-menu ul li a:hover {
        color: #1197C4;
        position: relative;
    }
    .tab-menu ul li a:hover::after,
    .tab-menu ul li a.active::after {
        content: " ";
        position: absolute;
        width: 100%;
        height: 2px;
        left: 0;
        bottom: -1px;
        background: #1197C4;
    }


    .inner-details .description p {
        color: #515151;
        font-size: 16px;
        line-height: 29px;
        margin-bottom: 20px;
    }

    .content-inner-title {
        font-size: 20px;
        padding: 20px 0;
        color: #404040;
        font-weight: 600;
    }

    .content-inner-subtitle {
        font-size: 18px;
        color: #404040;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .key-features-list li {
        font-size: 16px;
        color: #515151;
        line-height: 32px;
        position: relative;
        margin-left: 20px;
    }

    .key-features-list {
        margin-bottom: 15px;
    }

    .key-features-list li:before {
        content: '';
        position: absolute;
        left: -20px;
        top: 13px;
        height: 9px;
        width: 9px;
        background: #9C9B9B;
        border-radius: 9px;
    }

    .description .button-show-less {
        color: #1197C4;
        font-size: 16px;
        font-weight: 600;
    }

    .description .button-show-less:hover {
       text-decoration: none;
    }

    .screenshort-list-items {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
    }

    .list-images {
        flex-basis: 274px;
        max-width: 274px;
    }

    .list-images:nth-child(5n+1) {
        margin-left: 0;
    }

    .list-images + .list-images {
        margin-left: 15px;
    }