/**
 * All of the CSS for your public-facing functionality should be included in this file.
 */

/* switch-buttons */

.tablinks {
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 6px;
    padding: 0 12px;
    cursor: pointer;
    text-decoration: none;
    border-radius: 4px;
}

/************/
.tablinks_grey-red {
    color: #ac2525eb;
    border: 1px solid #014965;
    background-color: #3633312e;
}

.tablinks_grey-red:hover {
    background-color: #b1a39a2e;
    color: #010407;
    border: 1px solid #e31616;
}

.tablinks_grey-red.active {
    color: #cdeaff;
    border-color: #fc4a1a;
    background-color: #fc4a1a;
}

/************/
.tablinks_dark-blue {
    color: #0f1a20;
    border: 1px solid #003c53;
    background-color: #eff8f8;
}

.tablinks_dark-blue:hover {
    background-color: #eff8f8;
    color: #061f08;
    border: 1px solid #fc871a;
}

.tablinks_dark-blue.active {
    color: #fff;
    border-color: #fc4a1a;
    background-color: #fc4a1a;
}

.tablinks_orange{
    color: #495358;
    border: 1px solid #e4e9eb;
    background-color: #fff;
    font-family: sf pro display;
}

.tablinks_orange.active{
    color: #fff;
    border-color: #fc4a1a;
    background-color: #fc4a1a;
}

.tablinks_green-grey{
   
    color: #495358;
    border: 1px solid #e4e9eb;
    background-color: #fff;
}
.tablinks_green-grey:hover{
    background-color: #ddd;
    color: #495358;
}

.tablinks_green-grey.active{
    border-color: #83b735;
    background-color: #83b735;
    color: #fff;
}

/******************/


/*  */
/* buy-buttons */
.buy-btn {
    display: inline-block;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
    max-width: 106px;
    min-width: 106px;
    font-weight: bold;
}

.buy-btn:hover {
    text-decoration: none;
    box-shadow: 0 0 0 0;
}

.buy-btn:active {
    text-decoration: none;
    box-shadow: 0 0 0 0;
}
.buy-btn:focus{
    text-decoration: none;
    box-shadow: 0 0 0 0;
}

/********/
.buy-btn_sea-blue {
    border: 1px solid #09232b;
    background-image: linear-gradient(45deg, #b0eafc, 20%, #1b8787);
    color: #fffcf4;
}

.buy-btn_sea-blue:hover {
    background-image: linear-gradient(45deg, #d5e7ec, 30%, #039e9e);
    color: #061f08;
    transition: color 1s ease;
    border: 1px solid #410714;
}

.buy-btn_sea-blue:active {
    background-image: linear-gradient(45deg, #d5e7ec, 30%, #09232b);
    color: #d0dad7;
    border: 1px solid #04090a;
}

/********/
.buy-btn_lime-green {
    color: rgb(232, 236, 236);
    background-image: linear-gradient(45deg, #33606d, 30%, #83b735);
    border: 1px solid #83b735;
}

.buy-btn_lime-green:hover {
    background-image: linear-gradient(300deg, #ffffff, 30%, #7fc714);
    border: 1px solid #0c4d2e;
    color: #010d11;
    transition: color 1s ease;
}

.buy-btn_lime-green:active {
    background-image: linear-gradient(135deg, #98e6fc, 30%, #387055);
    border: 1px solid #03131f;
    color: #ffffff;
}

/********/
.buy-btn_dark-blue {
    color: #fff;
    background-image: linear-gradient(45deg, #7bd9f3, 30%, #395693);
    margin: 1px;
}

.buy-btn_dark-blue:hover {
    background-image: linear-gradient(300deg, #1e6e85, 60%, #8090b3);
    color: #010d11;
    margin: 0;
    border: 1px solid #1a5268;
    transition: background-image 1s ease-in-out;
}

.buy-btn_dark-blue:active {
    background-image: linear-gradient(135deg, #3abee2, 30%, #4e32cc);
    border: 1px solid #03131f;
    margin: 0;
    color: #ffffff;
}
.buy-btn_orange{
    background-color: #f7b733;
    color: white;
    min-width: 75px;
}
.buy-btn_orange:hover{
    background-color: #fc4a1a;
    color: #ffffff;
    
}

.buy-btn_green{
    font-family: sf pro display;
    color: #ffffff;
    background-color: #74a32f;
    border: 1px solid #74a32f;
    min-width: 80px;
}
.buy-btn_green:hover{
    background-color: #83b735;
    border-color: #83b735;
    color: #ffffff;
}

.buy-btn_green:active{
    color: #ffffff;
    background-color: #4d6f1b;
    border-color: #111210;
}
.buy-btn_green:focus{
    color: #ffffff;
    background-color: #74a32f;
    border-color: #74a32f;
}

/******tick*****/
.tick.added::after {
    content: "✓";
    margin: 0.4rem;
    vertical-align: bottom;
}

/***********/

@media (max-width: 800px) {
    .buy-btn {
        min-width: 85%;
        font-size: 1rem;
    }

    .tick.loading::after {
        right: 35%;
    }
}

.added_to_cart.wc-forward {
    display: none !important;
}

.tick.loading {
    padding-right: 24px;
    position: relative;
}

.tick.loading::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    top: 25%;
    right: 5%;
    border: 2px solid transparent;
    border-top-color: #fff;
    border-radius: 50%;
    animation: loading-spinner 0.75s linear infinite;
}


/*******frames ***********/
@keyframes loading-spinner {
    from {
        transform: rotate(0turn);
    }

    to {
        transform: rotate(1turn);
    }
}


/* Product Tables START */


.crossed_out_price {
    position: relative;
    font-size: 100%;
}

.crossed_out_price:before {
    border-bottom: 1px solid red;
    position: absolute;
    content: "";
    width: 100%;
    height: 60%;
    transform: rotate(-7deg);
}



#shop-prod-table caption {
    caption-side: top;
    text-align: left;
    margin-top: 10px;
}

.table-title_fat-black{
    color: #242424;
    font-weight: 600;
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    line-height: 1.4;
    font-size: 24px;
}


#shop-prod-table table td {
    border: 0px;
    padding: 0.4rem;
    vertical-align: middle;
}

#shop-prod-table tr>td {
    border-bottom: 1px solid #eee;
    width: auto;
}

#shop-prod-table tr.bestseller {
    -moz-box-shadow: inset 0 0 10px #9ed6e7;
    -webkit-box-shadow: inset 0 0 10px #9ed6e7;
    box-shadow: inset 0 0 10px #9ed6e7;
    position: relative;
}
#shop-prod-table tr.bestseller:after{
    content: "bestseller";
    position: absolute;
    top: 2px;
    left: 2px;
    color: #bccccf;
    font-size: 0.67rem;
    display: inline-block;
    background-color: #f10e0e;
    border-radius: 2px;
}

#shop-prod-table table {
    border: 0px;
}


#shop-prod-table th {
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
    border: 0px;
}

.table-header_grey{
    color: #000;
    background-color: #eee;
    text-transform: uppercase;
}


.table-header_blue-green{
    color: #fff;
    background: #4abdac;
}

.table-header_lime-green{
    color: #dff6f5;
    background: #83b735;
}

.table-header_sea-blue {
    background-image: linear-gradient(360deg, #d0e8ef, 30%, #1b8787);
}

.table-header_dark-blue {
    background-image: linear-gradient(360deg, #7bd9f3, 30%, #395693);
    color: #f5f5f5;
}

#shop-prod-table th:first-child {
    border-radius: 5px 0 0 0;
}

#shop-prod-table th:last-child {
    border-radius: 0 5px 0 0;
}


#shop-prod-table td {
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
}


#shop-prod-table table.table tbody tr:hover {
    background-color: #00000013;
}


.table>tbody {
    vertical-align: middle;
}

.table>thead {
    vertical-align: middle;
}

.table-container {
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
}

.table_muddy{
    font-family: "Lato", Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: #777777;
    font-size: 14px;
    line-height: 1.4;
}

@media only screen and (max-width: 800px) {

    #shop-prod-table thead,
    #shop-prod-table tbody,
    #shop-prod-table th,
    #shop-prod-table td,
    #shop-prod-table tr {
        display: block;
    }

    #shop-prod-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }


    #shop-prod-table tr {
        background-color: #fafafa;
        margin-bottom: 15px;
    }



    #shop-prod-table tr>td:not(:last-child) {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 45%;
        white-space: normal;
        text-align: center;
        padding-top: 16px;
    }

    #shop-prod-table table.table tbody tr:hover {
        background-color: #fafafa;
    }

    #shop-prod-table tr>td:not(:last-child):hover {
        background-color: #00000013;
    }


    #shop-prod-table tr>td:last-child {
        border-bottom: 0px;
    }

    #shop-prod-table td:before {

        position: absolute;
        top: 16px;
        left: 10px;
        width: 40%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        border-right: 2px solid #eee;
    }

    /*
    Label the data
    */
    #shop-prod-table td:before {
        content: attr(data-title);
    }

}



/*************************/
/* Style the tab content */
.tab {
    display: flex;
    flex-wrap: wrap;
}

.tabcontent:not(.active) {
    display: none;
}


@media only screen and (max-width: 800px) {
    .tabcontent h2 {
        font-size: 1.4rem;
    }
}

/* */

/*********general******/
.text-green{
    color: #008000;
}

.text-lime-green{
   color: #74a32f;
}

.text-red{
    color: #ff0000;
}