html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

table.dataTable thead .sorting.hide-ico:after, table.dataTable thead .sorting_asc.hide-ico:after, table.dataTable thead .sorting_desc.hide-ico:after, table.dataTable thead .sorting_asc_disabled.hide-ico:after, table.dataTable thead .sorting_desc_disabled.hide-ico:after {
    right: 0.5rem;
    content: "";
    display: none !important;
}

table.dataTable thead .sorting.hide-ico:before, table.dataTable thead .sorting_asc.hide-ico:before, table.dataTable thead .sorting_desc.hide-ico:before, table.dataTable thead .sorting_asc_disabled.hide-ico:before, table.dataTable thead .sorting_desc_disabled.hide-ico:before {
    right: 1.3rem;
    content: "";
    display: none !important;
}


@media only screen and (max-width: 767px) {
    .ui.selection.dropdown .menu {
        /*      max-height: 8.01428571rem; /* + 1.335714285 to 9.349999995rem */
        /*      max-height: 9.349999995rem; /* Adds a half */
        max-height: 16.02857142rem; /* Double size */
    }
}

@media only screen and (min-width: 768px) {
    .ui.selection.dropdown .menu {
        /*         max-height: 10.68571429rem; /* + 1.3357142863 to 12.0214285763rem */
        max-height: 12.0214285763rem;
    }
}

@media only screen and (min-width: 992px) {
    .ui.selection.dropdown .menu {
        max-height: 16.02857143rem; /* + 1.3357142858 to 17.3642857158rem */
    }
}

@media only screen and (min-width: 1920px) {
    .ui.selection.dropdown .menu {
        max-height: 21.37142857rem; /* + 1.3357142856 to 22.7071428556rem */
    }
}


#TooltipDemo {
    display: none !important;
}

canvas {
    max-width: 600px;
    margin: 0 auto;
}

/*.show, .show.blockOverlay {
    opacity: 1 !important;
}*/


.modal-dialog {
    box-shadow: none !important;
    border-radius: 0.25rem;
}

/*
I wanted to go with a mobile first approach, but it actually lead to more verbose CSS in this case, so I've gone web first. Can't always force things...

Side note: I know that this style of nesting in SASS doesn't result in the most performance efficient CSS code... but on the OCD/organizational side, I like it. So for CodePen purposes, CSS selector performance be damned.
*/
/* Global settings */
/* Global "table" column settings */

.product-ktgr {
    float: left;
    width: 15%;
}

.product-image {
    float: left;
    width: 15%;
}

.product-details {
    float: left;
    width: 15%;
}

.product-price {
    float: left;
    width: 15%;
}

.product-quantity {
    float: left;
    width: 10%;
}

.product-quantity2 {
    float: left;
    width: 10%;
}

.product-removal {
    float: left;
    width: 8%;
}

.product-line-price {
    float: left;
    width: 12%;
    text-align: right;
}

/* This is used as the traditional .clearfix class */
.group:before, .shopping-cart:before,
.column-labels:before,
.product:before,
.totals-item:before,
.group:after,
.shopping-cart:after,
.column-labels:after,
.product:after,
.totals-item:after {
    content: "";
    display: table;
}

.group:after, .shopping-cart:after,
.column-labels:after,
.product:after,
.totals-item:after {
    clear: both;
}

.group, .shopping-cart,
.column-labels,
.product,
.totals-item {
    zoom: 1;
}

    /* Apply clearfix in a few places */
    /* Apply dollar signs */
    .product .product-price:before,
    .product .product-line-price:before,
    .totals-value:before {
        content: "";
    }

/* Body/Header stuff */
body {
    padding: 0px 30px 30px 20px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 100;
}

h1 {
    font-weight: 100;
}

label {
    color: #000;
}

.shopping-cart {
    margin-top: -45px;
}

/* Column headers */
.column-labels label {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    font-weight: bold;
}

.column-labels .product-image,
.column-labels .product-details,
.column-labels .product-removal {
    text-indent: -9999px;
}

/* Product entries */
.product {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

    .product .product-image {
        text-align: center;
    }

        .product .product-image img {
            width: 100px;
        }

    .product .product-details .product-title {
        margin-right: 20px;
        font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium";
    }

    .product .product-details .product-description {
        margin: 5px 20px 5px 0;
        line-height: 1.4em;
    }

    .product .product-quantity input {
        width: 40px;
    }

    .product .product-quantity2 input {
        width: 40px;
    }

    .product .remove-product {
        border: 0;
        padding: 4px 8px;
        background-color: crimson;
        color: #fff;
        font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium";
        font-size: 12px;
        border-radius: 3px;
    }

        .product .remove-product:hover {
            background-color: #a44;
        }

/* Totals section */

.totals {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #ededed;
    float: left;
    margin-bottom: 10px;
}

    .totals .totals-item {
        float: right;
        clear: both;
        width: 100%;
    }

        .totals .totals-item label {
            float: left;
            clear: both;
            width: 79%;
            text-align: right;
        }

        .totals .totals-item .totals-value {
            float: right;
            width: 21%;
            text-align: right;
        }

    .totals .totals-item-total {
        color: red;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
    }

.checkout {
    float: right;
    border: 0;
    margin-top: 20px;
    padding: 6px 25px;
    background-color: #6D1;
    color: #fff;
    font-size: 20px;
    border-radius: 3px;
}

    .checkout:hover {
        background-color: #494;
    }

/* Make adjustments for tablet */
@media screen and (max-width: 650px) {
    .shopping-cart {
        margin: 0;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }

    .column-labels {
        display: none;
    }

    .product-image {
        float: right;
        width: auto;
    }

        .product-image img {
            margin: 0 0 10px 10px;
        }

    .product-details {
        float: none;
        margin-bottom: 10px;
        width: auto;
    }

    .product-price {
        clear: both;
        width: 70px;
    }

    .product-quantity {
        width: 100px;
    }

        .product-quantity input {
            margin-left: 20px;
        }

        .product-quantity:before {
            content: "x";
        }

    .product-removal {
        width: auto;
    }

    .product-line-price {
        float: right;
        width: 70px;
    }
}
/* Make more adjustments for phone */
@media screen and (max-width: 350px) {
    .product-removal {
        float: right;
    }

    .product-line-price {
        float: right;
        clear: left;
        width: auto;
        margin-top: 10px;
    }

    .product .product-line-price:before {
        content: "Item Total: ";
    }

    .totals .totals-item label {
        width: 60%;
    }

    .totals .totals-item .totals-value {
        width: 40%;
    }
}


/*Order CSS*/

.tablo-yeni {
    border-radius: 4px;
    width: 100%;
    max-height: 100%;
    display: flex;
    overflow: hidden;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    margin: 0 auto;
}


    .tablo-yeni .mode-switch {
        background-color: transparent;
        border: none;
        padding: 0;
        color: #1f1c2e;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: auto;
        margin-right: 8px;
        cursor: pointer;
    }

        .tablo-yeni .mode-switch .moon {
            fill: #1f1c2e;
        }

        .tablo-yeni .mode-switch.active .moon {
            fill: none;
        }

    .tablo-yeni .account-info {
        display: flex;
        align-items: center;
        padding: 16px;
        margin-top: auto;
    }

    .tablo-yeni .account-info-picture {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
    }

        .tablo-yeni .account-info-picture img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
        }

    .tablo-yeni .account-info-name {
        font-size: 14px;
        color: var(--sidebar-main-color);
        margin: 0 8px;
        overflow: hidden;
        max-width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tablo-yeni .account-info-more {
        color: var(--sidebar-main-color);
        padding: 0;
        border: none;
        background-color: transparent;
        margin-left: auto;
    }

    .tablo-yeni .app-icon {
        color: var(--sidebar-main-color);
    }

        .tablo-yeni .app-icon svg {
            width: 24px;
            height: 24px;
        }

    .tablo-yeni .app-content {
        padding: 16px;
        background-color: #fff;
        height: 100%;
        flex: 1;
        max-height: 100%;
        display: flex;
        flex-direction: column;
    }

    .tablo-yeni .app-content-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 4px;
    }

    .tablo-yeni .app-content-headerText {
        color: #1f1c2e;
        font-size: 24px;
        line-height: 32px;
        margin: 0;
    }

    .tablo-yeni .app-content-headerButton {
        color: #fff;
        font-size: 16px;
        border: none;
        border-radius: 4px;
        padding: 7px 28px;
        transition: 0.2s;
        cursor: pointer;
        background-color: #3ac47d;
    }


    .tablo-yeni .app-content-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 4px;
    }

    .tablo-yeni .app-content-actions-wrapper {
        display: flex;
        align-items: center;
        margin-left: auto;
    }

    .tablo-yeni .search-bar {
        background-color: #f3f6fd;
        border: 1px solid #f3f6fd;
        color: #1f1c2e;
        font-size: 14px;
        line-height: 24px;
        border-radius: 4px;
        padding: 0px 10px 0px 32px;
        height: 32px;
        background-size: 16px;
        background-repeat: no-repeat;
        background-position: left 10px center;
        width: 100%;
        max-width: 320px;
        transition: 0.2s;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231f1c2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    }

        .tablo-yeni .search-bar:placeholder {
            color: #1f1c2e;
        }

        .tablo-yeni .search-bar:hover {
            border-color: var(--action-color-hover);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236291fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
        }

        .tablo-yeni .search-bar:focus {
            outline: none;
            border-color: var(--action-color);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232869ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
        }

    .tablo-yeni .action-button {
        border-radius: 4px;
        padding: 10px;
        background-color: #f3f6fd;
        border: 1px solid #f3f6fd;
        display: flex;
        align-items: center;
        color: #1f1c2e;
        font-size: 14px;
        margin-left: 8px;
        cursor: pointer;
    }

        .tablo-yeni .action-button span {
            margin-right: 4px;
        }

        .tablo-yeni .action-button:hover {
            border-color: var(--action-color-hover);
        }

        .tablo-yeni .action-button:focus, .tablo-yeni .action-button.active {
            outline: none;
            color: var(--action-color);
            border-color: var(--action-color);
        }

    .tablo-yeni .filter-button-wrapper {
        position: relative;
    }

    .tablo-yeni .filter-menu {
        background-color: #f3f6fd;
        position: absolute;
        top: calc(100% + 16px);
        right: -74px;
        border-radius: 4px;
        padding: 8px;
        width: 220px;
        z-index: 2;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        visibility: hidden;
        opacity: 0;
        transition: 0.2s;
    }

        .tablo-yeni .filter-menu:before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid #f3f6fd;
            bottom: 100%;
            left: 50%;
            transform: translatex(-50%);
        }

        .tablo-yeni .filter-menu.active {
            visibility: visible;
            opacity: 1;
            top: calc(100% + 8px);
        }

        .tablo-yeni .filter-menu label {
            display: block;
            font-size: 14px;
            color: #1f1c2e;
            margin-bottom: 8px;
        }

        .tablo-yeni .filter-menu select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            padding: 8px 24px 8px 8px;
            background-position: right 4px center;
            border: 1px solid #1f1c2e;
            border-radius: 4px;
            color: #1f1c2e;
            font-size: 12px;
            background-color: transparent;
            margin-bottom: 16px;
            width: 100%;
        }

            .tablo-yeni .filter-menu select option {
                font-size: 14px;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231f1c2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
            }

            .tablo-yeni .filter-menu select:hover {
                border-color: var(--action-color-hover);
            }

            .tablo-yeni .filter-menu select:focus, .tablo-yeni .filter-menu select.active {
                outline: none;
                color: var(--action-color);
                border-color: var(--action-color);
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232869ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
            }

    .tablo-yeni .filter-menu-buttons {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .tablo-yeni .filter-button {
        border-radius: 2px;
        font-size: 12px;
        padding: 4px 8px;
        cursor: pointer;
        border: none;
        color: #000;
    }

        .tablo-yeni .filter-button.apply {
            background-color: var(--action-color);
        }

        .tablo-yeni .filter-button.reset {
            background-color: var(--filter-reset);
        }

    .tablo-yeni .products-area-wrapper {
        width: 100%;
        max-height: 100%;
        overflow: auto;
        padding: 0 4px;
    }

    .tablo-yeni .tableView .products-header {
        display: flex;
        align-items: center;
        border-radius: 4px;
        background-color: #f3f6fd;
        position: sticky;
        top: 0;
        font-weight: bold;
    }

    .tablo-yeni .tableView .products-row {
        display: flex;
        align-items: center;
        border-radius: 4px;
    }

        .tablo-yeni .tableView .products-row:hover {
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            background-color: #f3f6fd;
        }

        .tablo-yeni .tableView .products-row .cell-more-button {
            display: none;
        }

    .tablo-yeni .tableView .product-cell {
        flex: 1;
        padding: 8px 16px;
        color: #1f1c2e;
        font-size: 15px;
        display: flex;
        align-items: center;
    }

        .tablo-yeni .tableView .product-cell img {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            margin-right: 6px;
        }

    .tablo-yeni .tableView .sort-button {
        padding: 0;
        background-color: transparent;
        border: none;
        cursor: pointer;
        color: #1f1c2e;
        margin-left: 4px;
        display: flex;
        align-items: center;
    }

        .tablo-yeni .tableView .sort-button:hover {
            color: var(--action-color);
        }

        .tablo-yeni .tableView .sort-button svg {
            width: 12px;
        }

    .tablo-yeni .tableView .cell-label {
        display: none;
    }

    .tablo-yeni .status {
        border-radius: 4px;
        display: flex;
        align-items: center;
        padding: 4px 8px;
        font-size: 12px;
    }

        .tablo-yeni .status:before {
            content: "";
            width: 4px;
            height: 4px;
            border-radius: 50%;
            margin-right: 4px;
        }

        .tablo-yeni .status.active {
            color: #2ba972;
            background-color: rgba(43, 169, 114, 0.2);
        }

            .tablo-yeni .status.active:before {
                background-color: #2ba972;
            }

        .tablo-yeni .status.disabled {
            color: #59719d;
            background-color: rgba(89, 113, 157, 0.2);
        }

            .tablo-yeni .status.disabled:before {
                background-color: #59719d;
            }

        .tablo-yeni .status.cancel {
            color: #ff0015;
            background-color: rgb(255 0 21 / 20%);
        }

            .tablo-yeni .status.cancel:before {
                background-color: #ff0015;
            }

        .tablo-yeni .status.kargo {
            color: #2196f3;
            background-color: rgb(33 150 243 / 20%);
        }

            .tablo-yeni .status.kargo:before {
                background-color: #2196f3;
            }

    .tablo-yeni .gridView {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -8px;
    }

        .tablo-yeni .gridView .products-header {
            display: none;
        }

        .tablo-yeni .gridView .products-row {
            margin: 8px;
            width: calc(25% - 16px);
            background-color: #f3f6fd;
            padding: 8px;
            border-radius: 4px;
            cursor: pointer;
            transition: transform 0.2s;
            position: relative;
        }

            .tablo-yeni .gridView .products-row:hover {
                transform: scale(1.01);
                box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            }

                .tablo-yeni .gridView .products-row:hover .cell-more-button {
                    display: flex;
                }

            .tablo-yeni .gridView .products-row .cell-more-button {
                border: none;
                padding: 0;
                border-radius: 4px;
                position: absolute;
                top: 16px;
                right: 16px;
                z-index: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 24px;
                height: 24px;
                background-color: rgba(16, 24, 39, 0.7);
                color: #fff;
                cursor: pointer;
                display: none;
            }

        .tablo-yeni .gridView .product-cell {
            color: #1f1c2e;
            font-size: 14px;
            margin-bottom: 8px;
        }

            .tablo-yeni .gridView .product-cell:not(.image) {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .tablo-yeni .gridView .product-cell.image span {
                font-size: 18px;
                line-height: 24px;
            }

            .tablo-yeni .gridView .product-cell img {
                width: 100%;
                height: 140px;
                object-fit: contain;
                border-radius: 4px;
                margin-bottom: 16px;
            }

        .tablo-yeni .gridView .cell-label {
            opacity: 0.6;
        }


.product-button {
    margin: 2% 0;
}

    .product-button button {
        width: 100%;
        padding: 0.4rem;
        font-size: 22px;
        border: 0;
        background-color: #f3f6fd;
        color: #3f6ad8;
    }

        .product-button button:hover {
            background-color: #3f6ad8;
            color: #ffff;
        }


/*USERS CSS*/

.guncelleme-button {
    border-radius: 5px;
    border: 0;
    background-color: #3f6ad8;
    margin-left: 5px;
}

    .guncelleme-button i {
        padding: 10px;
        color: #fff;
    }

.sayfa-baslik {
    font-size: 20px;
    font-weight: bold;
}

    .sayfa-baslik span {
        color: #3f6ad8;
    }

.kamyon-numbers {
    font-weight: 700;
    font-size: 4.8rem;
    color: #f04925;
    text-align: end;
}

.kamyon-info {
    margin: 1rem;
}

.kilo-baslik {
    font-weight: bold;
}

.urun-basliklari {
    font-weight: bold;
}

.son-tutar-basklik {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #3f6ad8;
    margin-bottom: 1rem;
}

.son-tutar {
    display: flex;
    justify-content: space-between;
    margin: 5% 0;
}

.son-tutar-kart {
    box-shadow: 0px 0px 4px 0px #3f6ad8;
    margin: 0 20%;
    padding: 2rem;
    border-radius: 7px;
}

.son-tutar-kart-baslik {
    font-size: 20px;
    margin-bottom: 25px;
    color: #3f6ad8;
    font-weight: bold;
}

.kart-bilgisi-baslik {
    font-size: 22px;
    color: #000;
    margin-bottom: 3%;
}

.kart-bilgisi {
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.05);
    border: solid 1px #e6e6e6;
    box-sizing: border-box;
    border-radius: 6px;
    width: 100%;
    padding: 1rem;
    margin-top: 3%;
}

.kart-num input {
    border-radius: 6px;
    height: 42px;
    outline: none;
    appearance: none;
    padding: 3px 10px;
    width: 100%;
    background-color: #f6f6f6;
    border: 1px solid #e5e5e5;
    box-shadow: inset 20px 0px 0px -15px #3F51B5;
}


.kart-bilgisi-ic {
    padding: 0 5%;
}

.kart-tarih {
    width: 100%;
}


    .kart-tarih select {
        border-radius: 6px;
        height: 42px;
        outline: none;
        appearance: none;
        padding: 4px 10px;
        width: 100%;
        background-color: #f6f6f6;
        border: 1px solid #e5e5e5;
        box-shadow: inset 20px 0px 0px -15px #3F51B5;
    }


.kart-cvv input {
    border-radius: 6px;
    height: 42px;
    outline: none;
    appearance: none;
    width: 100%;
    background-color: #f6f6f6;
    border: 1px solid #e5e5e5;
    padding: 3px 10px;
}

.kart-tarih {
    width: 100%;
}

.kart-ic-baslik {
    font-size: 16px;
    margin: 8px 0;
}

.kart-gonder {
    background-color: #3F51B5 !important;
    color: #fff !important;
    margin-top: 7%;
}

.adres-tamamla {
    display: flex;
    justify-content: center;
    margin: 2% 20%;
}