﻿.navbar-horizontal .navbar-brand img {
    height: 50px !important;
}

.navbar-vertical .navbar-brand-img, .navbar-vertical .navbar-brand > img {
    max-height: 4rem !important;
}

.main-content {
    background-color: #f4f3ef;
}

.navbar-vertical {
    border-right: 2px solid #ddd !important;
}

.badge {
    display: inline-block !important;
    min-width: 10px !important;
    padding: 3px 6px !important;
    font-size: 13px !important;
    font-weight: normal !important;
    color: #ffffff !important;
    line-height: 1 !important;
    vertical-align: baseline !important;
    white-space: nowrap !important;
    text-align: center !important;
    background-color: #93c54b !important;
    border-radius: 10px !important;
    margin-left: 3px;
}

.bakiye {
    color: #fff;
}



::selection {
    background: #ff5e99;
    color: #FFFFFF;
    text-shadow: 0;
}

::-moz-selection {
    background: #ff5e99;
    color: #FFFFFF;
}
/* Global */


img {
    max-width: 100%;
}

a {
    -webkit-transition: all 150ms ease;
    -moz-transition: all 150ms ease;
    -ms-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
}

    a:hover {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
        filter: alpha(opacity=50); /* IE7 */
        opacity: 0.6;
        text-decoration: none;
    }



.thumbnails li > .fff .caption {
    background: #fff !important;
    padding: 10px;
    margin: 10px;
    min-height: 175px;
}

.sidenav-toggler-inner, .sidenav-toggler-line {
    width: 22px !important;
    padding-left: 13px;
}

li {
    list-style-type: none;
}

.secim label {
    margin-right: 10px;
}

.card .table td, .card .table th {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

table {
    background-color: transparent !important;
}

.CariName {
    color: #fff;
    font-size: 12px;
}

.thead-light {
    color: #8898aa;
    background-color: #f6f9fc;
    vertical-align: middle;
    padding: .5rem;
}

.modal-dialog {
    max-width: 50% !important;
}

@media (max-width: 575.98px) {
    .CariName {
        color: #fff;
        font-size: 10px;
    }

    .btn {
        padding: 0.2rem !important;
    }

    table {
        background-color: transparent !important;
    }

    .navbar-top .navbar-nav {
        display: block;
        font-size: .875rem;
    }

    .card-header h3 {
        font-size: 0.875rem;
    }

    .DropDownFont {
        font-size: 10px !important;
        padding: 0.1rem !important;
    }
}
/* 
Genel Stiller
*/
table {
    width: 100%;
    border-collapse: collapse;
}
/* Zebra Çizgileri Stili */
tr:nth-of-type(odd) {
    background: #eee;
}

th {
    background: #333;
    color: white;
    font-weight: bold;
}

td, th {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: left;
}
/* 
Bu media query ile 760px genişlik altında tablomuzu responsive yaparız.
Aynı zamanda 768px ve 1024px çözünürlüğü arasında da çalışmasını sağlayarak,
Ipad gibi cihazlarda da görünümünü iyileştirmiş oluruz.
*/
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

    /*/* Force table to not be like tables anymore */
    .adrtable,
    .adrtable > tbody,
    .adrtable > tbody > tr > th,
    .adrtable > tbody > tr > td,
    .adrtable > tbody > tr {
        display: block;
    }

        /* Sütun başlıklarını gizle (display: none; ile değil ama) */
        .adrtable > tbody > tr > th {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        .adrtable > tbody > tr {
            border: 1px solid #ccc;
        }

            .adrtable > tbody > tr > td {
                /* Satır gibi davranmasını sağla */
                border: none;
                border-bottom: 1px solid #eee;
                position: relative;
            }

    td.siparis {
        /*padding-left: 100%;*/
        font-size: 11px;
    }

    td.adet {
        font-size: 12px;
        padding-left: 50%;
    }

    td.tarih {
        padding-left: 50%;
        font-size: 12px;
    }

    td.miktar {
        padding-left: 50%;
        font-size: 12px;
    }

    td.secim {
        font-size: 12px;
        padding-left: 50%;
    }
    td.durum {
        font-size: 12px;
        padding-left: 50%;
    } 
    td.aciklama {
        font-size: 12px;
    }
 
    td.sec {
        font-size: 12px;
        padding-left: 50%;
    }

    td.sepet {
        font-size: 12px;
        margin: 5px;
    }

    td:before {
        /* Sütun başlığı varmış gibi düzenle */
        position: absolute;
        /* Sol tarafında başlık için yer aç */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    /*
    Tablo Başlıkları
    Her bir <td> elementi için sütun başlıklarını ekle
    Her tablo için özelleştirmelisiniz.
    */
    .adrtable > tbody > tr > td:nth-of-type(1).siparis:before {
        content: none;
    }
    .adrtable > tbody > tr > td:nth-of-type(2).adet:before {
        content: "Koli Adedi";
    }

    .adrtable > tbody > tr > td:nth-of-type(3).tarih:before {
        content: "Teslim Tarihi";
    }

    .adrtable > tbody > tr > td:nth-of-type(4).miktar:before {
        content: "Miktar";
    }

    .adrtable > tbody > tr > td:nth-of-type(5).secim:before {
        content: "Seçim";
    }
    .adrtable > tbody > tr > td:nth-of-type(6).durum:before {
        content: "Durum";
    }
    .adrtable > tbody > tr > td:nth-of-type(7).aciklama:before {
        content: "none";
    }
    .adrtable > tbody > tr > td:nth-of-type(8).sec:before {
        content: "Seç";
    }
    .adrtable > tbody > tr > td:nth-of-type(9).sepet:before {
        content: none;
    }

    .p5 {
        padding: 5px !important;
    }

    .modal-dialog {
        max-width: 80% !important;
        margin: 2rem !important;
    }

    .modal-header {
        display: inline !important;
    }

    /*
    Tablo Başlıkları
    Her bir <td> elementi için sütun başlıklarını ekle
    Her tablo için özelleştirmelisiniz.
    */
    .adrtable > tbody > tr > td:nth-of-type(1).siparis:before {
        content: none;
        font-weight:700;
    }
    .adrtable > tbody > tr > td:nth-of-type(2).teslimtarih:before {
        content: "TESLIM TARIHI";
        font-weight:700;
    }

    .adrtable > tbody > tr > td:nth-of-type(3).sthar_tarih:before {
        content: "STHAR TARIH";
        font-weight:700;
    }

    .adrtable > tbody > tr > td:nth-of-type(4).kampanya:before {
        content: "KAMPANYA";
        font-weight:700;
    }

    .adrtable > tbody > tr > td:nth-of-type(5).bekleyen_miktar:before {
        content: "BEKLEYEN MIKTAR";
        font-weight:700;
    }
    .adrtable > tbody > tr > td:nth-of-type(6).bekleyen_tonaj:before {
        content: "BEKLEYEN TONAJ";
        font-weight:700;
    }
    .adrtable > tbody > tr > td:nth-of-type(7).net_tutar:before {
        content: "KDVLI BEKLEYEN NET TUTAR ";
        font-weight:700;
    }


     td.siparis {
        /*padding-left: 100%;*/
        font-size: 11px;
        font-weight:700;
    }

    td.teslimtarih {
        font-size: 12px;
        padding-left: 50%;
    }

    td.sthar_tarih {
        padding-left: 50%;
        font-size: 12px;
    }

    td.kampanya {
        padding-left: 50%;
        font-size: 12px;
    }

    td.bekleyen_miktar {
        font-size: 12px;
        padding-left: 50%;
    }
    td.bekleyen_tonaj {
        font-size: 12px;
        padding-left: 50%;
    } 
    td.net_tutar {
        font-size: 12px;
         padding-left: 70%;
         
    }
 
   
}
