.kutu {  margin:10px; border:solid 1px #e1e1e1; padding:10px; }
@media only screen and (max-width: 700px) { .kutu {  margin:0px; border:solid 1px #fff; } }

#uyari {
display: none;
background-color: #0d98e9 !important;
margin: 0;
padding: 0 20px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
text-align: center;
color: #fff;
overflow: hidden;
width: auto;
height: 50px;
line-height: 50px;
z-index: 99999999;
border-radius:5px;
}
.quantity-input {
width: 45px;
height: 36px;
text-align: center;
float: left;
font-size: 18px;
border: 1px solid gray;
border-left: none;
border-right: none;
color: gray;
}
.quantity-minus, .quantity-plus {
color: #fff;
border: none;
width: 36px;
height: 36px;
font-size: 20px;
float: left;
}
.quantity-minus {
background-color: #535454;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.quantity-plus {
background-color: #535454;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}


section.content {
font-family: Candara, Calibri, Corbel, Trebuchet MS, Tahoma, Verdana, Arial, Times New Roman;
width: 100%;
margin: 0 auto;
min-height: 200px;
display: block;
}
section.content > article {
font-family: Candara, Calibri, Corbel, Trebuchet MS, Tahoma, Verdana, Arial, Times New Roman;
display: inline-block;
width: 100%;
background: #fff;
}
section.content > article a:hover {
text-decoration: underline;
}
.column1 {
width: 80%;
float: left;
position: relative;
display: inline-block;
border: 1px solid #eee;
}
.column1 > .page-content {
display: inline-block;
width: 98%;
padding: 9px;
}
.loader {
text-align: center;
}
.loader span {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
margin: 20px auto;
background: black;
border-radius: 50px;
-webkit-animation: loader 0.9s infinite alternate;
-moz-animation: loader 0.9s infinite alternate;
}
.loader span:nth-of-type(2) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
}
.loader span:nth-of-type(3) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
}
@-webkit-keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-webkit-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-webkit-transform: translateY(-21px);
}
}
@-moz-keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-moz-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-moz-transform: translateY(-21px);
}
}
/*-----------------------------
SEPET
------------------------------------*/
.item:nth-child(odd) {
border-bottom: 1px solid #eee;
}
.item > button {
border: none;
background: none;
cursor: pointer;
color: #000;
font-weight: 400;
font-size: 1.0em;
position: absolute;
z-index: 9999;
right: 0px;
top: 13px;
}
.item > button:hover {
text-decoration: underline;
}
.dt1,
.dt2,
.dt3,
.dt4,
.dt5 {
display: block;
margin: 0 0 10px 0;
padding: 5px;
font-weight: bold;
width: 100%;
font-size: 1.0em;
}
.ct1 > a{
color:#181818;
font-weight: bold;
}
.ct1,
.ct2,
.ct3,
.ct4,
.ct5 {
display: inline-block;
float: left;
}
.ct1 {
width: 60%;
}
.ct1 img {
margin: 0 10px 0 0;
border: 1px solid #eee;
float: left;
width: 50px;
height: 50px;
}
.ct2 {
width: 150px;
text-align: center;
font-weight: bold;
}
.ct3 {
width: 80px;
text-align: center;
font-weight: bold;
}
.ct4 {
width: 99px;
text-align: center
}
.ct4 > input[type="text"] {
width: 30px;
text-align: center;
display: block;
margin: 0 auto;
}
.ct4 > button,
.ct4 > input[type="submit"] {
border: none;
background: none;
color: #5e9e20;
margin: 10px 0 0 -6px;
cursor: pointer;
font-size: 12px;
}
.ct4 > button:hover {
text-decoration: underline;
}
.ct4 > span:before {
font-family: 'ElegantIcons';
content: "\e02a";
margin: 0 5px 0 0;
color: #5e9e20;
position: relative;
top: 1px;
}
.ct5 {
width: 75px;
text-align: right;
font-weight: bold;
}
/*-----------------------------
ADRES
------------------------------------*/
.address {
padding: 10px;
font-size: 14px;
}
.address a.add-address {
display: inline-block;
width: auto;
padding: 10px 20px 10px 10px;
margin: 0px 0 0 0;
font-size: 16px;
color: #111;
border: 1px solid #eee;

}
.address a.add-address:hover {
background: linear-gradient(#eee, #eee, #eee);
background: -webkit-linear-gradient(#eee, #eee, #eee);
}
.address a.add-address:before {
display:none;
font-family: 'ElegantIcons';
content: "\50";
margin: 0 15px 0 0;
font-size: 1.2em;
float: left;
color: #5e9e20;
text-decoration: none;
cursor: pointer;
}
table#addressList {
width: 100%;
margin: 30px 0 30px 0;
}
table#addressList thead {
font-size: 14px;
}
table#addressList thead th {
padding: 10px 0;
text-align: left;
border-bottom: 1px solid #e9e9e9;
}
table#addressList thead th:nth-child(2),
table#addressList thead th:nth-child(3) {
text-align: center;
}
table#addressList tbody {}
table#addressList tbody tr td {
padding: 20px 0;
border-bottom: 1px dotted #eee;
}
table#addressList tbody tr td:nth-child(1) {
font-size: 14px;
}
table#addressList tbody tr td:nth-child(2),
table#addressList tbody tr td:nth-child(3) {
text-align: center;
}
table#addressList tbody tr td strong {
padding: 0 20px 0 0;
display: block;
}
form#addrform {
font-size: 14px;
width: 100%;
margin: 20px 0px;
}
form#addrform .form-title {
font-size: 1.4em;
display: block;
border-bottom: 1px dotted #ccc;
margin: 20px 0;
}
form#addrform .stcol1,
form#addrform .stcol2 {
width: 100%;
float: left;
}
form#addrform .stcol2 {
float: right;
}
form#addrform span {
position: relative;
top: 0px;
margin: 0 10px 0 0;
}
.sahis,
.sirket {
display: none;
}
form#addrform input[type="radio"][value="sahis"],
form#addrform input[type="radio"][value="sirket"] {
margin: 0 40px 0 0;
display: inline-block;
}
form#addrform input[type="radio"][value="sahis"]:checked ~ .sahis,
form#addrform input[type="radio"][value="sirket"]:checked ~ .sirket {
display: block;
}
.invoice {
display: none;
padding: 10px;
}
input[type="checkbox"][value="invoice"]:checked ~ .invoice {
display: block;
}
.yeniFatura,
.ayniFatura {
display: none;
}
form#addrform input[type="checkbox"][value="yeniFatura"],
form#addrform input[type="checkbox"][value="ayniFatura"] {
margin: 0 40px 0 0;
display: inline-block;
}
form#addrform input[type="checkbox"][value="yeniFatura"]:checked ~ .yeniFatura,
form#addrform input[type="checkbox"][value="ayniFatura"]:checked ~ .ayniFatura {
display: block;
}
input[type="checkbox"][value="ayniFatura"]:checked ~ .ayniFatura {
display: block;
}
form#addrform label {
display: block;
margin: 5px 0;
}
form#addrform input,
form#addrform textarea,
form#addrform select {
width: 100%;
padding: 10px;
font-size: 14px;
margin: 0 0 10px 0;
background: #fff;
box-shadow: inset 0 0 5px #e2e2e2;
border: 1px solid #ccc;
}
form#addrform input[type="radio"],
form#addrform input[type="checkbox"] {
background: #fff;
-webkit-backface-visibility: hidden;
width: 20px;
height: 20px;
margin: 0 10px 0 0;
box-shadow: none;
border: none;
}
form#addrform input[type="submit"] {
width: 250px;
padding: 13px 0;
background-color: #000;
border-radius: 2px;
margin: 20px 0;
font-size: 1.4em;
opacity: 1.0;
display: block;
color: #fff;
cursor: pointer;
border: none;
box-shadow: none;
}
form#addrform input[type="submit"]:hover {
background-color:
#446332;
transition: 0.3s;
}
form#addrform select {
width: 300px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
form#addrform select option {
padding: 0 10px;
}
form#addrform div#select {
position: relative;
width: 300px;
}

form#addrform div#select:before {
content: '';
right: 6px;
top: 0px;
width: 20px;
height: 20px;
position: absolute;
pointer-events: none;
display: block;
}

.column2 {
font-family: Candara, Calibri, Corbel, Trebuchet MS, Tahoma, Verdana, Arial, Times New Roman;
width: 19%;
padding: 0px;
height: auto;
border: 1px solid #eee;
display: inline-table;
float: right;
}
.column2 input[title="buy"] {
width: 93%;
padding: 14px 15px;
margin: 10px;
background-color: #000000;
color: #fff;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 2px;
}
.column2 input[title="buy"]:hover {
background-color: #000000;
transition: 0.3s;
}
.delivery,
.price {
display: inline-block;


}
.column2 .price p { padding-left:10px; }
.delivery {
border-top: 1px solid #eee;
}
.price p {
margin: 10px 0;
}
.price p span {
float: right;
font-weight: 600;
}
.price p.piece {
font-weight: 600;
}
.price p.subtotal {}
.price p.cargo {}
.price p.cargo span {
text-decoration: line-through;
}
.price p.cargo i {
float: right;
clear: both;
}
.price p.total {
margin: 40px 0 0 0;
font-weight: 600;
font-size: 16px;
}

.column2 .efree {
width: 92%;
padding: 14px 15px;
margin: 10px;
background: #000;
color: #fff;
font-size: 18px;
border: none;
cursor: pointer;
border-radius: 2px;
}
.col_innput input { width:300px; padding:10px; }
.sup_btn{ width: auto;
padding: 8px 15px;
margin: 10px;
background: #000;
color: #fff;
font-size: 18px;
border: none;
cursor: pointer;
border-radius: 2px; } 
.column2 .efree:hover {
background: #000;
transition: 0.3s;
}

.tabs {
list-style: none;
padding: 0;
margin: 0;
list-style-type: none;
border-right: 1px solid #eee;
float: left;width:100%
}
.tabs li {
display: inline;
}
.tabs li a {
font-size: 12px;
text-align: left;
text-decoration: none;
position: relative;
padding: 35px 10px;
display: block;
line-height: 0;
width: 170px;
border-bottom: 1px solid #eee;
color: #555;
cursor: pointer;
outline: none;
width:100%;
border-left: 4px solid transparent;
}
.tabs li a:hover {
background: #ccc;
}
.tabs li:nth-child(3) a {
background: url(../images/payu.png) center left no-repeat;
}
.tabs li:nth-child(1) a:after {

}
.tabs li:nth-child(2) a:after {

}
.tabs li:nth-child(3) a:after {

padding: 0 0 0 41px;
}
.tabs li a:before {
font-size: 1.1em;
margin: 0 15px 0 0;
color: #ccc;
font-family: 'PaymentFont';
}
.tabs li:nth-child(1) a:before {

}
.tabs li:nth-child(2) a:before {

}
.tabs li.selected a,
.tabs li.selected a:hover,
.tabs li a:hover,
.tabs li a.active {
background: #f9f9f9;
color: #111;
text-decoration: none;
border-bottom: 4px solid #5e9e20;width: 100%;
}
.box-wrap {
height: inherit;
overflow: hidden;
display: inline-block;
float: left;
width:100%;
}
.box-wrap > div {
padding: 16px;
height: auto;
display: none;
background: #f9f9f9;
width: 100%;
}
form#kredikarti,
form#payu {
display: inline-block;
margin: 0;
padding: 0;
}
form#kredikarti label,
form#payu label {
font-size: 16px;
margin: 5px;
display: block;
width: 150px;
}
form#kredikarti input,
form#kredikarti input.cardno,
form#kredikarti select,
#payu input,
form#payu input.cardno,
form#payu select {
padding: 9px;
font-size: 14px;
margin: 0 0 10px 0;
background: #fff;
box-shadow: inset 0 0 6px #eee;
border: 1px solid #ccc;
}
form#kredikarti input,
form#payu input {
width: 228px;
}
form#kredikarti input[title="Kart Numarası"],
form#payu input[title="Kart Numarası"] {
width: 54px;
}
form#kredikarti input.cvc2,
form#payu input.cvc2 {
width: 45px;
}
form#kredikarti select,
form#payu select {
width: 95px;
}
form#kredikarti input[type="submit"],
form#payu input[type="submit"],
.havaleSubmi {
width: 250px;
background-color: #000;
border-radius: 2px;
margin: 20px 0;
font-size: 1.4em;
opacity: 1.0;
display: block;
color: #fff;
cursor: pointer;
border: none;
box-shadow: none;
}
.havaleSubmit form#kredikarti input[type="submit"]:hover,
form#payu input[type="submit"]:hover,
.havaleSubmi:hover {
background-color: #446332;
transition: 0.3s;
}
table#bank {
font-size: 12px;
width: 100%;
}
table#bank td {
border-bottom: 1px solid #CCC;
}
table#bank {}
.page-content .group { display:flex; }

.register {
display: block;
justify-content: space-between;
align-items: center;
}

.register .cols {
flex: 1;
margin-right: 20px; /* İhtiyaca göre ayarlayabilirsiniz */
}

.register .label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}

.register input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}

.security {
margin-top: 10px;
}

#guvenlikKodu, #kod {
width: 50%;
}

.clear {
clear: both;
}

.hello {
display: block;
width: 100%;
background-color: #000;
color: #fff;
border: none;
padding: 10px;
border-radius: 5px;
text-align: center;
cursor: pointer;
}
.forms {
display: flex;
flex-wrap: wrap;
}

.rows {
flex: 1;
margin: 0 10px;
}

.forms label {
display: block;
font-weight: bold;
margin-top: 10px;
}

.forms input[type="text"],
.forms input[type="email"],
.forms input[type="password"],
.forms textarea,
.forms select {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
}

.forms .select {
width: 100%;
position: relative;
}

.forms .select select {
display: none;
}

.forms .select .nice-select {
display: block;
width: 100%;
padding: -1px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
cursor: pointer;
}

.forms .select .nice-select .current {
font-weight: bold;
}

.orders {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

.orders th {
background-color: #000;
color: #fff;
text-align: left;
padding: 10px;
}

.orders th, .orders td {
border: 1px solid #ccc;
padding: 10px;
}

.orderModal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
}

.modalContent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.closeModal {
position: absolute;
top: 10px;
right: 10px;
color: #333;
font-size: 20px;
cursor: pointer;
}

.security {
margin-top: 10px;
font-weight: bold;
}

#guvenlikKodu, #kod {
width: 20%;
}

.clear {
clear: both;
}

.add_loca {
width: 100%;
background-color: #007BFF;
color: #fff;
border: none;
padding: 10px;
border-radius: 5px;
text-align: center;
cursor: pointer;
}
.yan { display:flex; }


aside {
width: 20%;
background-color: #fff;
padding-right: 20px;
}

#menu ul {
list-style: none;
padding: 0;
}

#menu ul li {
margin-bottom: 10px;
position: relative;
}

#menu ul li a {
text-decoration: none;
color: #333;
display: block;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
transition: background-color 0.3s;
}

#menu ul li a:hover {
background-color: #007BFF;
color: #fff;
}

#menu ul ul {
display: none;
position: absolute;
top: 0;
left: 100%;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
}

#menu ul li:hover > ul {
display: block;
}

#menu ul ul li {
margin: 0;
}

#menu ul ul li a {
padding: 10px 20px;
}

#menu ul ul li a:hover {
background-color: #007BFF;
color: #fff;
}
.yan main { width:100%;}
@media screen and (max-width: 600px) {
.yan { display:block; }
aside { width:100%;}
}

.modal-backdrop {z-index:1 !important;}

.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
	width:300px;
}
* html .ui-autocomplete {
    height: 300px;
}

.ui-autocomplete .ui-menu-item-wrapper {
    font-size: 15px;
    border-radius: 0;
    border-bottom: solid #eceff1 2px;
    padding: 10px;
    color: #000;
    background: #f9f9f9;
}
.ui-autocomplete .ui-menu-item {
    color: #000;
    background: #f9f9f9;
}

.ui-autocomplete .ui-menu-item:hover, .ui-menu-item-wrapper:hover {
    color: #fff;
    background: #a8a9d0;
}

.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
 color: #fff;
    background: #967cfc;
    background: #a8a9d0;
    border: 0;
}