.main {width: 100%;;min-height: 100vh;color: var(--color-text);padding-bottom: 50px;max-width: 1200px;}
.main h2 {font-size: 40px;}
.top-main {width: 100%;padding: 120px 0;}

.cart-div {width: 69%;display: inline-table;border: 1px solid var(--roy-opt) ; padding: 10px 20px;
position: relative;
}
.total {width: 28%;display: inline-table;float: right;padding: 10px 20px;
    border: 1px solid var(--roy-opt);position: relative;}
.total h3 {font-size: 18px;margin-bottom: 20px;}

.up-cart {padding:5px 20px;background-color: var(--roy);color: white;border-radius: 20px;
position: absolute;top: 0px ;border: 0;opacity: 0.9;
visibility: hidden;opacity: 0;z-index: 10;
top: 0%;
left: 50%; transform: translateX(-50%) translateY(-50%);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
display: flex;align-items: center;
}
.up-cart i {margin-right: 5px;}
.act-up-cart {
    top: 38% ;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   visibility: visible;
}
.up-cart:hover , .up-cart:active {box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;opacity: 1;
    background-color:  var(--roy-hover)
}

table img {width: 80px;}
table h4  {display: inline-block;color: var(--color-text);margin-left: 6px;}
table h4 {font-size: 20px;}
table h4 span {font-size: 17px;text-align: left;}

td i:hover {color: var(--roy);cursor: pointer;}
.qu-cart {display: inline-flex;}
.qu-cart div {color: var(--color-text);text-align: center;}
.qu-bt {width: 30px;height: 30px;line-height: 30px;border-radius: 100%;position: relative;
    background-color: rgba(221, 216, 216, 0.4);margin: 0 3px;cursor: pointer;}
.qu-bt:hover {background-color: rgba(221, 216, 216, 0.8);}
.qu-bt i {font-size: 16px;position: absolute; top: 50%;
    left: 50%; transform: translateX(-50%) translateY(-50%);}
.qu {width: 45px;height: 30px;line-height: 30px;border: 0;text-align: center;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield; 
}

.lig {width: 100%;height: 1px;background-color: var(--roy-opt);}
.cr-txt {width: 50%;display: inline-table;text-align: left;padding: 10px 0;font-weight: 600;}
.cr-pr {width: 50%;display: inline-table;float: right;text-align: right;padding: 10px 0;font-size: 16px;}


.check , .addtocart {width: 95%;padding: 10px 20px;background-color: var(--roy);color: white;border: 0;
border-radius: 5px;margin-bottom: 8px;max-width: 300px;
}
.check:hover , .addtocart:hover { background-color:  var(--roy-hover);}
.bot-tot span {font-size: 15px;color: rgba(109, 98, 98, 0.85);}

@media only screen and (max-width: 850px ) {
    .total , .cart-div {width: 95%;float: none;margin: 20px 0;}
}
@media only screen and (max-width: 500px ) {
.qu-bt {width: 25px;height: 25px;line-height: 25px;margin: 0 2px;font-size: 14px;}
.qu {width: 30px;height: 25px;line-height: 25px;border: 0;text-align: center;}
table img {width: 65px;margin: auto;display: block;}
table h4 {font-size: 17px;display: block;text-align: center;}
table h4 span {font-size: 15px;}
}