html {
    /* position: relative;
    min-height: 100%;*/
    font-size: 14px;
    height: 100%;
}

body {
    /*margin-bottom: 60px;*/
    font-family: Arial;
    height: 100%;
    /*overflow: hidden;*/
}


#scrollleftmenu::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #08446C;
}

#scrollleftmenu::-webkit-scrollbar {
    width: 5px;
    background-color: #08446C;
}

#scrollleftmenu::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #4fd6ff;
}


.page_item > a {
    color: white
}

a {
    text-decoration: none;
}

.float-right {
    float: right
}


.float-left {
    float: left
}

header {
    -webkit-box-shadow: -2px 8px 15px -5px rgb(0 0 0 / 20%);
    box-shadow: -2px 8px 15px -5px rgb(0 0 0 / 20%);
    position: fixed;
    width: 100%;
    z-index: 101
}

main {
    margin-top: 50px
}

.container1 {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px 0 15px;
}

.accordion {
    float: left;
    background: #08446C;
    color: white !important;
    min-height: 130vh;
    z-index: 10;
    position: fixed;
    top: 50px
}

    .accordion ul {
        /*        background: #E2E2E2;
*/ margin: 0;
        padding: 0;
        padding-top: 4px
    }

    .accordion .pagenav {
        position: relative;
        /*margin-bottom: 10px;*/
        list-style: none;
    }


.current_page_item1 a {
    /*color: #fffa00;*/
}


.accordion .pagenav a {
    text-decoration: none;
    /*color: #323232;*/
    font-size: 13px;
}

    .accordion .pagenav a h4:hover {
        /*color: #b6ff00*/
    }

.accordion .open a h4 {
    /*color: #b6ff00*/
}

.accordion .open a h4 {
    /*color: #b6ff00*/
}

.accordion .pagenav ul {
    display: none;
    padding: 15px;
    margin: 0;
}

.accordion .pagenav li {
    margin-bottom: 1px;
    list-style: none;
    padding-left: 10px
}

.accordion .pagenav h4 {
    text-transform: uppercase;
    padding: 5px 15px 5px 15px;
    /*            background: #f2f2f2;
*/ margin: 0;
    cursor: pointer;
    font-size: 14px;
    color: white;
}

    .accordion .pagenav h4 i {
        font-size: 20px;
        position: absolute;
        right: 30px;
        line-height: 20px;
        transition: .2s;
        -webkit-transition: .2s;
    }

.accordion .pagenav.open h4 i {
    transform: rotate(90deg);
}

.accordion a:hover, .accordion .pagenav li.current_page_item a {
    /*color: #fffa00;*/
}

.pertop {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-size: cover !important;
    float: left;
    margin-right: 5px;
}

.alerttop {
    width: 17px;
    margin-left: 30px;
    margin-top: 6px;
}

.pertoptxt {
    float: left;
    font-size: 13px;
    font-weight: bold
}

.arrowT {
    float: left;
    width: 8px;
    margin-top: 9px;
    margin-left: 5px;
    cursor: pointer
}

.arrowS {
    float: right;
    width: 14px;
    margin-top: 9px;
    margin-left: 5px;
    cursor: pointer
}

.navbar {
    display: block
}
/*
#button, #button2 {
    display: none;
}*/

.label1 {
    overflow: hidden;
    display: inline-block;
    height: 30px;
    padding-top: 5px;
    cursor: pointer;
    float: right;
    margin-left: 30px;
    min-width: 150px;
    width: auto;
    overflow: hidden
}



.ul1 {
    position: absolute;
    top: 50px;
    right: 15px;
    /* height: 200px;*/
    width: 170px;
    text-align: left;
    background: #fff;
    padding: 10px 0 15px;
    border-radius: 10px;
    display: none;
    transition: all .3s ease;
    -webkit-box-shadow: -2px 8px 12px -4px rgb(0 0 0 / 17%);
    box-shadow: -2px 8px 12px -4px rgb(0 0 0 / 17%);
    z-index: 10;
}

.ul2 {
    position: absolute;
    top: 50px;
    right: 160px;
    height: auto;
    overflow: hidden;
    width: 170px;
    text-align: left;
    background: #fff;
    padding: 10px 0 15px;
    border-radius: 10px;
    display: none;
    transition: all .3s ease;
    -webkit-box-shadow: -2px 8px 12px -4px rgb(0 0 0 / 17%);
    box-shadow: -2px 8px 12px -4px rgb(0 0 0 / 17%);
    z-index: 10
}

.dashboardAlert {
    position: absolute;
    top: 50px;
    right: 160px;
    height: auto;
    overflow: hidden;
    width: auto;
    text-align: left;
    background: #fff;
    padding: 20px 25px;
    border-radius: 10px;
    display: none;
    transition: all .3s ease;
    -webkit-box-shadow: -2px 8px 12px -4px rgb(0 0 0 / 17%);
    box-shadow: -2px 8px 12px -4px rgb(0 0 0 / 17%);
    z-index: 10;
}







/*H ---------------------------*/
.Htitle1 {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    text-transform: uppercase;
    color: #373737;
}

.Hbox1 {
    background: #D8D8D8;
    border-radius: 13px;
    height: 134px
}

.dangerA {
    border: 4px solid #dc3545;
    padding: 0px;
}

.dangerFilter {
    border: 4px solid #339DD1;
    padding: 0px;
    background: #339DD1;
}

.dangerFilterHUB {
    border: 4px solid #339DD1;
    padding: 0px;
    background: #339DD1;
    margin-left: 10px;
    width: 120px;
    height: 30px;
    border-radius: 8px;
}


.dangerA:hover {
    border: 4px solid #bb2d3b;
}

.Hbox2 {
    border-radius: 13px;
    height: 90px;
    width: 15.32%;
    margin-right: 1.6%;
}

.Hbox2box {
    padding-right: 20px
}

.x1A {
    background: #EFC7FF;
}

.x2A {
    background: #C7C9FF;
}

.x3A {
    background: #C7E1FF;
}

.x4A {
    background: #C1F9AD;
}

.x5A {
    background: #EFC7FF;
}

.x6A {
    background: #FFF9C7;
}



.Hbox2Rb {
    height: 38px
}

.arrowA1 {
    width: 15px;
    float: right;
    margin-top: 10px;
}

.Hbox2text {
    font-size: 12px;
    text-align: left
}

.Hbox2box {
    padding-right: 20px
}


.mainD {
    width: 84%
}

.accordion {
    width: 16%
}

.alertread {
    padding: 7px;
    font-size: 11px;
    opacity: 0.7
}

.alertUnread {
    padding: 7px;
    font-size: 11px;
}

@media (max-width: 991px) {
    .Hbox2box {
        padding-right: 0px
    }

    .accordion .pagenav h4 {
        font-size: 13px;
    }

    .mainD {
        width: 70%;
    }

    .accordion {
        width: 30%;
        position: absolute
    }
}



/*login-------------------------------
*/


.login {
    width: 450px;
    padding: 5% 0 0;
    margin: auto;
    font-family: 'Arial', cursive;
}

.formA {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    border-radius: 10px;
    max-width: 450px;
    margin: 0 auto 100px;
    padding: 45px;
    text-align: center;
    -webkit-box-shadow: 5px 5px 15px -3px rgba(0,0,0,0.2);
    box-shadow: 5px 5px 15px -3px rgba(0,0,0,0.2);
}

    .formA input {
        outline: 0;
        background: #f2f2f2;
        width: 100%;
        border: 0;
        border-radius: 5px;
        margin: 0 0 15px;
        padding: 15px;
        box-sizing: border-box;
        font-size: 14px;
        /*        font-family: 'Comfortaa', cursive;
*/
    }

        .formA input:focus {
            background: #dbdbdb;
        }

    .formA button {
        /*font-family: 'Comfortaa', cursive;*/
        text-transform: uppercase;
        outline: 0;
        background: #4b6cb7;
        width: 100%;
        border: 0;
        border-radius: 5px;
        padding: 15px;
        color: #FFFFFF;
        font-size: 14px;
        -webkit-transition: all 0.3 ease;
        transition: all 0.3 ease;
        cursor: pointer;
    }

        .formA button:active {
            background: #395591;
        }

.text-danger {
    font-size: 11px;
}

.LpassFP {
    text-align: left;
    font-size: 12px;
    margin-top: 12px
}

.Llogo {
    width: 54%;
    margin-left: 23%;
    margin-right: 23%;
    margin-bottom: 30px;
}

.noline {
    text-decoration: none !important
}




/*boxS1 ------------------------------------------------------------------*/


.Boxs1 {
    height: 290px;
    padding: 15px;
    border: 1px solid #08446C;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
    border-radius: 10px;
    float: left;
    width: 95%
}

.Hauto {
    height: auto;
    overflow: hidden;
    padding: 0 10px 20px 0;
}

.HautoN {
    border-bottom: 1px solid #686767;
    height: 155px
}

.Boxs1B {
    height: 55px;
    background: #FFFFFF;
    box-shadow: 0px 9.92926px 9.92926px rgba(0, 0, 0, 0.07);
    border-radius: 24.8232px;
    font-style: normal;
    font-weight: 500;
    /*font-size: 23px;*/
    line-height: 65px;
    text-align: center;
    color: #08446C;
}

.Boxs1B1 {
    margin: 0px auto;
    color: #08446C;
    height: 30px
}

.Boxs1bicon > a {
    margin: 0 5px
}

    .Boxs1bicon > a > img {
        width: 18px;
        margin: 0 2%
    }

.Boxs1bicon {
    margin: 0px auto;
    padding: 5px 0 5px 0;
}



:root {
    --height: 20px;
    --track-color: #D54525;
    --knob-color: white;
    --active-track-color: #00bcb5;
    --active-knob-color: white;
}


.switch {
    height: var(--height);
    border-radius: var(--height);
    position: relative;
    aspect-ratio: 2;
    margin-top: 10px;
    z-index: 2;
}

    .switch input[type="checkbox"] {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        cursor: pointer;
    }

    .switch div:before,
    .switch div:after {
        content: "";
        display: block;
        position: absolute;
        border-radius: var(--height);
        pointer-events: none;
        transition: all 0.5s ease;
    }

    .switch div:before {
        top: 0;
        min-height: 100%;
        min-width: 100%;
        background-color: var(--track-color);
        transition-delay: 0.2s;
    }

    .switch div:after {
        top: 50%;
        left: 3px;
        transform: translateY(-50%);
        background-color: var(--knob-color);
        min-height: calc(100% - 6px);
        aspect-ratio: 1;
    }

    .switch input[type="checkbox"]:checked ~ div:after {
        left: calc(100% - var(--height) + 3px);
        background-color: var(--active-knob-color);
    }

    .switch input[type="checkbox"]:checked ~ div:before {
        background-color: var(--active-track-color);
    }

.Mobicon1 {
    margin: 10px 0 0 20px;
    cursor: pointer;
    display: none;
}

.Mobicon2 {
    padding: 15px;
    text-align: right;
    display: none
}

@media (max-width: 700px) {


    .menusideul {
        display: none;
    }

    .Mobicon1 {
        display: block
    }

    .mainD {
        width: 90%
    }



    .accordion {
        width: 10%
    }

    .Hbox2 {
        width: 31.7%;
        margin-bottom: 10px
    }
}


.displayB {
    display: block
}

.displayN {
    display: none
}

/* Switch styling ends */



/*table --------------------------------------------------*/
.k-button-solid-base {
    border-color: #e4e7eb;
    color: #FFFFFF !important;
    background-color: #339DD1 !important;
}


.k-grid {
    border-width: 0px !important;
}

.k-toolbar {
    background-color: #ffffff !important;
}

.k-grid-pager {
    background-color: #ffffff !important;
}

.k-grid-toolbar {
    padding-left: 0 !important;
    align-items: baseline !important;
}

.k-column-title {
    font-weight: 700
}

.k-grid-content {
    height: auto !important;
    padding-bottom: 50px !important;
    /*overflow: hidden !important;*/
    overflow-x: scroll;
}

.k-grid-toolbar {
    padding-bottom: 20px !important;
    border: none !important;
}

.k-spacer {
    display: contents !important;
}

.k-grid-footer-wrap, .k-grid-header-wrap {
    border-width: 0 0px 0 0 !important;
}

.k-grid td {
    border-width: 0 0 0.8px 0px !important;
    font-size: 14px;
    color: #011624;
}

.k-grid th {
    border-width: 0 0 0.8px 0px !important;
    font-weight: 400;
    color: #101F4B;
}

.k-input {
    margin: 4px 0 10px 5px !important;
    border-width: 0 !important;
    background-color: #f5f8fa !important;
    border-style: none !important;
}

.k-picker {
    background-color: #f5f8fa !important;
}

.k-dialog-buttongroup.k-actions.k-hstack.k-justify-content-stretch {
    /*display: grid;*/
    justify-content: center !important;
}

.k-window-titlebar {
    background: #339DD1 !important;
    color: white !important;
}

.k-window-titlebar {
    padding: 0.3rem 1rem !important;
}

.k-window {
    border: 0px !important;
}

.k-grid .k-alt {
    background-color: rgb(255 255 255 / 0%) !important;
}

.k-grid-header .k-header {
    padding: 20px 4px 20px;
    background: white;
    color: #08446C;
}

.k-grid-header {
    background-color: #ffffff !important;
}



/*pagination ----------------------------------------------*/
.contentA1 {
    margin-top: 6px
}

.contentA3 {
    margin-top: 0px;
    margin-bottom: 3px !important;
}


.Bluebtn {
    background: #339DD1;
    border: 0px;
    float: right;
    margin-right: 5px;
}

    .Bluebtn:hover, .Bluebtn:focus {
        background: #176084;
    }

.fontbtn {
    font-family: Arial
}

.pagination2 {
    display: flex;
    padding-left: 0;
    list-style: none;
}



/*tabs----------------------------------------*/

.toggle {
    font-family: arial, sans-serif;
}

    .toggle .tabs {
        width: 100%;
        overflow: hidden;
        /* height: 36px;*/
        line-height: 36px;
    }

        .toggle .tabs .tab {
            float: left;
            background: white;
            color: #08446C;
            height: 31px;
            margin: 2px 8px 0;
            padding: 0 8px;
            cursor: pointer;
            /*border: 0.5px solid #08446C;
            box-sizing: border-box;
            border-radius: 5px;
            margin:10px 0;
            */
        }

            .toggle .tabs .tab.active {
                color: #08446C;
                border-bottom: 3px solid #08446C;
                /*background: #08446C;
                color:#fff;*/
            }

    .toggle .panels .panel {
        padding: 20px 0px;
        display: none;
    }

        .toggle .panels .panel:first-child {
            display: block;
        }


.tableA10 {
    color: #08446C;
    height: 35px;
    font-size: 11px;
    border: 1px solid #d6d6d6;
    margin-bottom: 5px;
    padding: 2px;
    cursor: move;
    padding-top: 6px
}


.tableA10Title {
    height: 40px;
    font-size: 11px;
    font-weight: bold;
    padding: 3px;
}


.tableA46 td {
    border: 1px solid rgb(0 0 0 / 15%);
    padding: 5px;
}

.tableA46 input {
    border: 0px;
    text-align: center;
    color: #08446C;
    font-weight: 600;
    pointer-events: none;
}

.tableA46 label {
    text-align: center;
    display: block;
    color: #08446C;
    font-size: 13px
}


.HUBPicon {
    width: 25px;
    margin: 10px 10px 0 0
}


.tableA10 input[type=text] {
    width: 100%;
    border: 0px;
    pointer-events: none;
}

.TRtd1 {
    width: 35px !important;
}

.TRtd2 {
    width: 200px !important
}

.TRtd3 {
    width: 110px !important
}

.TRtd4 {
    width: 80px !important
}

.TRtd5 {
    width: 130px !important
}



/*shipments -----------------------------------------*/

.shipmentMbox {
    height: auto;
    overflow: hidden;
    padding: 35px;
}

.shipInsidBox {
    height: 190px;
    background: #DEEFFC;
    border: 1.24319px solid #50A0CD;
    box-sizing: border-box;
    border-radius: 12.4319px;
}

.ship1 {
    padding-left: 190px;
}

.ship2 {
    padding-right: 190px;
}

.shiph3 {
    /*    text-align: center;
    margin-top: 30%;*/

    color: #08446C;
}

/*@media (max-width: 992px) {
    .shiph3 {
        margin-top: 15%;
        font-size: 32px !important;
    }

    .ship2 {
        padding-right: 35px !important;
    }

    .ship1 {
        padding-left: 35px !important;
    }
}

@media (max-width: 500px) {
    .shiph3 {
        margin-top: 23%;
        font-size: 32px !important;
    }
}

*/
.shipInsidBox {
    display: flex;
    align-items: center;
    justify-content: center;
}
/*HUB planlama -----------------------------------------------------*/
.searchdrag1 {
    width: 200px !important;
    margin-bottom: 15px;
}

.searchdraginput {
    border-radius: 10px;
    font-size: 12px;
}

#div1Drop {
    width: 22%;
    min-height: 80vh;
    float: right;
}

.div1DropM {
    padding: 10px;
    border: 1px solid #aaaaaa;
    height: auto;
    overflow: hidden;
    min-height: 80vh;
}

#div2Drop {
    height: auto;
    overflow: hidden;
    min-height: 200px;
    width: 100%;
   /* ffloatleft;*/
    margin-top: 0px;
    /*padding-bottom: 300px;*/
}

#div3Drop {
    height: auto;
    overflow: hidden;
    min-height: 200px;
    width: 100%;
    margin-top: 0px;
    /*padding-bottom: 300px;*/
}
#div3DropX {
    height: auto;
    overflow: hidden;
    min-height: 200px;
    width: 100%;
    margin-top: 0px;
    /*padding-bottom: 300px;*/
}

.drag1 {
    width: 100% !important;
    height: auto;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0px 3.59288px 3.59288px rgb(0 0 0 / 25%);
    border-radius: 8.98219px;
    border: 0px;
    padding: 5px;
    font-size: 9.5px;
}

.TitleRbox {
    display: none;
    float: left;
    font-weight: bold
}

.tableA10 > div {
    float: left
}

.tableA10Title > div {
    float: left
}

.tableA10cell {
    width: 100% !important
}

.tableA11cell {
    width: 49% !important
}

.draginputcheck {
    width: 4%;
    height: 100%;
    background: url('/img/dragicon.svg');
    background-repeat: no-repeat;
    background-position-x: right;
}

.RemoveFilterHUB {
    background: #339dd1;
    color: white;
    width: 120px;
    border-radius: 8px;
    height: 30px;
}


    .RemoveFilterHUB:hover {
        background: #339dd1;
        color: white;
        width: 120px;
        border-radius: 8px;
        height: 30px;
        box-shadow: 1px 1px 1px 1px grey;
    }

.draginputcheckHUB {
    height: 100%;
    background-repeat: no-repeat;
    background-position-x: right;
}

.draginputcheck1 {
    background: url('/img/dragicon.svg');
    background-repeat: no-repeat;
    background-position-x: right;
}

.has-search .form-control {
    padding-left: 2.375rem;
    width: 120px;
    margin-right: 10px;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}






/*
accordiandropdown -----------------------------------------------*/

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


ul {
    list-style-type: none;
}



.accordionA {
    width: 100%;
    max-width: 360px;
    /* margin: 30px auto 20px;*/
    background: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

    .accordionA .link {
        cursor: pointer;
        display: block;
        padding: 15px 15px 15px 12px;
        color: #4D4D4D;
        font-size: 11px;
        font-weight: 700;
        border-bottom: 1px solid #CCC;
        position: relative;
        -webkit-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }

    .accordionA li:last-child .link {
        border-bottom: 0;
    }

    .accordionA li i {
        position: absolute;
        top: 16px;
        left: 12px;
        font-size: 18px;
        color: #595959;
        -webkit-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }

        .accordionA li i.fa-chevron-down {
            right: 12px;
            left: auto;
            font-size: 16px;
        }

    .accordionA li.open .link {
        color: #b63b4d;
    }

    .accordionA li.open i {
        color: #b63b4d;
    }

        .accordionA li.open i.fa-chevron-down {
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            transform: rotate(180deg);
        }

/**
 * Submenu
 -----------------------------*/


.submenuA {
    display: none;
    /* background: #444359;*/
    font-size: 12px;
    padding: 7px;
}

}

.submenuA li {
    /*border-bottom: 1px solid #4b4a5e;*/
}

.submenuA a {
    display: block;
    text-decoration: none;
    color: #6f6f6f;
    padding: 8px;
    font-size: 11px;
    /*padding-left: 42px;*/
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}



    .submenuA a:hover {
        background: #339DD1;
        color: #FFF;
    }

.submenuA > div {
    margin-bottom: 8px
}


.dropdown-menu {
    width: 100%;
}

ol, ul {
    padding-left: 0.5rem;
}

.btnTHUBp {
    background: #08446C;
    border-radius: 4.49109px 4.49109px 0px 0px;
    border: 0px;
    padding: 3px 0 3px 0;
    color: white;
    font-size: 11px;
}





/*userspage ---------------------------------------------------*/



.userGbox1 {
    width: 200px;
    color: #08446C;
    background: #F5FAFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    height: 150px;
    margin: 5px;
    text-align: center;
    padding: 65px;
}

    .userGbox1 a {
        color: #08446C
    }

.userGbox1m {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding-bottom: 15px;
}

.userGbox2 {
    width: 200px;
    height: 180px;
    background-color: white;
    /*height: auto;*/
    overflow: hidden;
    margin: 5px;
    text-align: center;
    border: 0.4px solid rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 7px;
}

    .userGbox2 a {
        color: #08446C;
        font-weight: bold
    }

    .userGbox2 p {
        color: #08446C;
        text-align: left;
        font-size: 12px;
        font-weight: bold;
    }





/* taletlistesi -----------------------------------------------*/

#grid .k-auto-scrollable {
    overflow-x: scroll !important;
}

#ShipmentsInProcessgrid .k-auto-scrollable {
    overflow-x: scroll !important;
    overflow-y: hidden !important;
}

.dialogA23 {
    margin: 0px auto;
    margin-top: 30px;
    padding: 30px;
    border: 0px;
}





.a253A {
    position: absolute;
    width: 300px;
    height: 100px;
    outline: none;
    opacity: 0;
}

.p253A {
    width: 300px;
    height: 100px;
    background: #F1FAFF;
    border: 1px dashed #009EF7;
    box-sizing: border-box;
    border-radius: 5px;
    text-align: center;
    padding-top: 3vh;
}

.p253B {
    width: 200px !important;
    float: left;
}

.dragbrowsclose {
    background: #FFFFFF;
    border: 0.2px solid #08446C;
    box-sizing: border-box;
    border-radius: 5px;
}

.dragbrowssubmit {
    background: #339DD1;
    border-radius: 5px;
    color: white;
}


.k-grid td {
    overflow: visible;
}

.bgColorbtn1 {
    background-color: #F5F8FA;
    color: #7F839A;
    margin-right: 5px;
}

.bgColorbtn2 {
    background-color: #339DD1;
    color: #fff;
    margin-right: 5px;
}

.bgColorbtn4 {
    background-color: #339DD1;
    color: #fff;
}

.bgColorbtn3 {
    background-color: #5CB85C;
    color: #fff;
    margin-right: 5px;
}

.btnDolasim {
    width: 120px;
    font-size: 10px;
    padding: 2px !important
}




/*shipments tables ------------------------------------*/


.tableB323 {
    width: 90%;
    margin: 0px auto;
    margin-top: 20px;
    color: #08446C;
}

    .tableB323 th, td {
        padding: 6px 0 6px 0;
        font-size: 11px
    }

.TtableB323 {
    background: #FFFFFF;
    border: 0.5px solid rgba(0,0,0,0.14);
    box-sizing: border-box;
    padding: 12px 3px 12px 23px;
}

.tableB324 {
    background: #FFFFFF;
    box-sizing: border-box;
    width: 100%;
    color: #08446C;
    font-size: 15px;
}


#aA1A input {
    border: 0px;
    border: 0px;
    width: 100%;
    text-align: center;
    color: #1F2448;
}

.btnactive {
    background: #339DD1;
    color: white
}

.tabbtnbox {
    border-right: 1px solid rgb(0 0 0 / 25%);
    height: 70vh;
    width: 24%
}

.aA1A div {
    margin-top: 10px;
}

.row323 {
    padding-left: 8px;
}

.vehicleA44 {
    width: 23%;
    border: 1.62971px solid #2D4279;
    padding: 10px;
    border-radius: 6px;
    margin-right: 2%;
    text-align: center;
    font-weight: bold;
    color: #1F2448
}

#aA1A {
    padding-left: 1%
}

.vehicleMt {
    background: #339DD1;
    height: 40px;
    margin: -14px -225px 10px -8px !important;
    width: 109.3%;
    border-radius: 0 3px 0 0;
    padding: 8px;
    color: white;
    font-size: 15px;
}

.vehicleMt2 {
    background: #339DD1;
    height: 40px;
    margin: -14px -225px 10px -16px !important;
    width: 107.9%;
    border-radius: 0 3px 0 0;
    padding: 8px;
    color: white;
    font-size: 15px;
}

.botborderA1 {
    border-bottom: 1px solid #9b9b9b;
    padding-bottom: 5px;
}

.boxshipmentsA40 {
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    padding: 5px;
    min-height: 280px;
    margin-right: 10px;
}

.bshipcol1 {
    width: 22%;
}

.bshipcol2 {
    width: 19%;
}

.bshipcol3 {
    width: 12%;
}

.sevkiayticonA1 {
    width: 16px;
    margin-right: 5px;
}


.toggle .tabs .tab1.active {
    color: white;
    background: #08446C;
}

.toggle .tabs .tab1 {
    background: #e8e8e8;
}



/*keyword input ---------------------------*/



.inputtab2shimp {
    min-width: 360px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.inputtab3shimp {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 3px
}

.borderN {
    border: 0px !important
}

.boxAB34 {
    width: 100%;
    height: auto;
    overflow: hidden;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
}

.tableZ23 {
    width: 100%
}

    .tableZ23 td, th {
        border-color: inherit;
        border-style: solid;
        border: 1px solid #ccc !important;
        padding: 3px;
        text-align: center
    }

    .tableZ23 thead tr {
        background: #656BFB;
        color: white
    }


#showModalBtn.dragbrowssubmit {
    /*position: absolute;*/
    top: 84px;
    z-index: 1000;
    margin-right: 5px
}




/*new pagination -----------------------------*/



.list-wrapperB1 {
    padding: 15px;
    overflow: hidden;
}

.list-itemB1 {
    border: 1px solid #EEE;
    background: #FFF;
    margin-bottom: 10px;
    padding: 10px;
    box-shadow: 0px 0px 10px 0px #EEE;
}



.simple-pagination ul {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    text-align: center;
}

.simple-pagination li {
    display: inline-block;
    margin-right: 5px;
}

    .simple-pagination li a,
    .simple-pagination li span {
        color: #666;
        padding: 5px 10px;
        text-decoration: none;
        border: 1px solid #EEE;
        background-color: #FFF;
        box-shadow: 0px 0px 10px 0px #EEE;
    }

.simple-pagination .current {
    color: #FFF;
    background-color: #FF7182;
    border-color: #FF7182;
}

.simple-pagination .prev.current,
.simple-pagination .next.current {
    background: #e04e60;
}


/*tbody > tr:nth-of-type(1) > td:last-child > .btnsevkiyatA {
    background: #FFF2CC;
}
tbody > tr:nth-of-type(2) > td:last-child > .btnsevkiyatA {
    background: #FFE699;
}
tbody > tr:nth-of-type(3) > td:last-child > .btnsevkiyatA {
    background: #FFD966;
}
tbody > tr:nth-of-type(4) > td:last-child > .btnsevkiyatA {
    background: #E2EFDA;
}
tbody > tr:nth-of-type(5) > td:last-child > .btnsevkiyatA {
    background: #C6E0B4;
}
tbody > tr:nth-of-type(6) > td:last-child > .btnsevkiyatA {
    background: #A9D08E;
}
tbody > tr:nth-of-type(7) > td:last-child > .btnsevkiyatA {
    background: #70B640;
}
tbody > tr:nth-of-type(8) > td:last-child > .btnsevkiyatA {
    background: #acead5;
}
tbody > tr:nth-of-type(9) > td:last-child > .btnsevkiyatA {
    background: #90e8ca;
}
tbody > tr:nth-of-type(10) > td:last-child > .btnsevkiyatA {
    background: #63ceaa;
}*/


.backbtnS1 {
    background: #FFF2CC;
}

    .backbtnS1:after {
        content: 'Araç Bekleniyor'
    }

.backbtnS2 {
    background: #FFE699;
}

    .backbtnS2:after {
        content: 'Evraklar Bekleniyor'
    }

.backbtnS3 {
    background: #FFD966;
}

    .backbtnS3:after {
        content: 'Yükleme Bekleniyor'
    }

.backbtnS4 {
    background: #E2EFDA;
}

    .backbtnS4:after {
        content: 'Gümrük Bildirimi Bekleniyor'
    }

.backbtnS5 {
    background: #C6E0B4;
}

    .backbtnS5:after {
        content: 'Beynanname Bekleniyor'
    }

.backbtnS6 {
    background: #A9D08E;
}

    .backbtnS6:after {
        content: 'Gümrük Çıkış Bekleniyor'
    }

.backbtnS7 {
    background: #70B640;
}

    .backbtnS7:after {
        content: 'Teslimat Bekleniyor'
    }

.element-without-after:after {
    content: none
}


/*shipments brows multiple files ---------------------------------------------*/

#files-area {
    width: 100%;
    margin: 0 auto;
}

.file-block {
    border-radius: 10px;
    background-color: rgba(144, 163, 203, 0.2);
    margin: 5px;
    color: initial;
    display: inline-flex;
}

    .file-block > span.name {
        padding-right: 10px;
        width: max-content;
        display: inline-flex;
    }

.file-delete {
    display: flex;
    width: 24px;
    color: initial;
    background-color: #6eb4ff00;
    font-size: large;
    justify-content: center;
    margin-right: 3px;
    cursor: pointer;
}

    .file-delete:hover {
        background-color: rgba(144, 163, 203, 0.2);
        border-radius: 10px;
    }

    .file-delete > span {
        transform: rotate(45deg);
    }

.shadowdashboard {
    background: #FFFFFF;
    box-shadow: 0px 3.43311px 10px rgba(0, 0, 0, 0.15);
    border-radius: 4.29138px;
}

.k-grid td, .k-grid th {
    overflow: inherit !important
}

.backbtnS {
    min-width: 180px;
    font-size: 11px;
    margin-right: 5px
}





/*shipmentsEdit --------------------------------------------------------------*/


.shipmentdragM {
    height: auto;
    overflow: hidden;
    padding: 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    margin-bottom: 10px;
}

.shipmentDMT {
    font-size: 14px;
    color: #08446C;
    border: 1px solid;
    padding: 18px 0 0 8px;
    height: 60px;
    margin-bottom: 8px
}

.shipmentDMT1 {
    height: 30px !important
}





/*add keyword ----------------------------------- */


.tags-input-wrapper {
    background: transparent;
    padding: 10px;
    border-radius: 4px;
    /*max-width: 400px;*/
    border: 1px solid #ccc;
}

    .tags-input-wrapper input {
        border: none;
        background: transparent;
        outline: none;
        width: 140px;
        margin-left: 8px;
    }

    .tags-input-wrapper .tag {
        display: inline-block;
        background-color: #5CB85C;
        color: white;
        border-radius: 40px;
        padding: 0px 3px 0px 7px;
        margin-right: 5px;
        margin-bottom: 5px;
    }

        .tags-input-wrapper .tag a {
            margin: 0 7px 3px;
            display: inline-block;
            cursor: pointer;
        }




.k-searchbox {
    width: 19em !important
}

.contentA3 > div {
    height: 100%
}

.rowN {
    --bs-gutter-x: 0rem !important;
    margin-top: 10px;
}

#SourceOfDamage {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 0 2px 0;
}


.k-grid-cancel {
    background-color: #F5F8FA !important;
    color: #121C4D !important;
    border: none !important
}

.k-i-cancel {
    display: none !important
}

.k-grid-update {
    background-color: #339DD1 !important;
    border: none !important
}

.k-i-check {
    display: none !important
}

.k-edit-buttons {
    justify-content: center
}

.k-edit-form-container > .k-edit-buttons {
    width: 150px;
    margin: 0px auto !important
}

.labelModal {
    color: #121c4d;
    font-weight: 600;
}

.inputModal {
    border: none;
    background-color: #f5f8fa;
    /*font-weight: 500;*/
    color: #838AA3;
    height: 35px;
    padding: 0 5px !important;
    /*border: 1px solid #d2d1d166 !important;*/
}

.k-prompt-container, .k-window-content {
    padding: 30px !important;
}



.tags-input-wrapper {
    border: 1px solid #d2d1d166 !important;
}



.modaldisplay {
    display: flex;
    justify-content: center;
    align-items: center;
}

.headerBtns {
    width: 50%;
    float: right;
    display: flex;
    justify-content: end;
    position: relative;
    top: 17px;
    z-index: 9;
}

.headerBtns2 {
    width: 50%;
    float: right;
    display: flex;
    justify-content: end;
    position: relative;
    top: 30px;
    z-index: 9;
}

.headerBtns3 {
    width: 50%;
    float: right;
    display: flex;
    justify-content: end;
    position: relative;
    top: 17px;
    z-index: 9;
}

/*.k-grid .k-grid-search {
    margin-left: 0 !important;*/
    /*margin-right: auto !important;*/
/*}*/




/*loader -----------------------------------*/

.loader {
    margin: 100px auto;
    width: 150px;
    height: 150px;
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    animation: spin 2s linear infinite, heart-beat 2s linear infinite;
    background-color: #fff;
    text-align: center;
    line-height: 120px;
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 170px;
    display: none
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes heart-beat {
    55% {
        background-color: #fff;
    }

    60% {
        background-color: #3498db;
    }

    65% {
        background-color: #fff;
    }

    70% {
        background-color: #3498db;
    }

    100% {
        background-color: #fff;
    }
}


.k-grid-content.k-auto-scrollable {
    padding-bottom: 130px !important
}

.loading-wrapper {
    display: none;
    z-index: 1001;
    border: medium none;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgb(0, 0, 0);
    opacity: 0.6;
    cursor: wait;
    position: fixed;
}

.loading-text {
    z-index: 1011;
    position: fixed;
    padding: 0px;
    margin: 0px;
    width: 30%;
    top: 40%;
    left: 35%;
    text-align: center;
    color: #fff;
    cursor: wait;
}

.lds-dual-ring {
    display: inline-block;
    width: 80px;
    height: 80px;
}

    .lds-dual-ring:after {
        content: " ";
        display: block;
        width: 64px;
        height: 64px;
        margin: 8px;
        border-radius: 50%;
        border: 6px solid #fff;
        border-color: #fff transparent #fff transparent;
        animation: lds-dual-ring 1.2s linear infinite;
    }

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.k-overlay {
    background-color: #0000009e !important;
}
/* *******************style for scrolbaar *****************/
/* width */
::-webkit-scrollbar {
    width: 8px;
    /*height: 11px*/
}

/* Track */
::-webkit-scrollbar-track {
    background: #f8f8f8;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
/**************************************************/


.leftmenuul {
    height: auto;
}


@media (max-width: 1600px) {
    .leftmenuul {
        height: 390px;
        overflow-y: scroll
    }

    .accordion .pagenav a {
        font-size: 11px;
    }

    .accordion ul {
        padding-top: 1px;
    }

    .accordion .pagenav li {
        margin-bottom: 0px;
    }
}

@media (max-width: 1350px) {
    .accordion .pagenav h4 {
        font-size: 13px;
    }

    .accordion ul {
        padding-top: 2px;
    }

    .leftmenuul {
        height: 330px;
    }
}



@media (max-width: 1150px) {
    .accordion .pagenav li {
        margin-bottom: 0px;
    }

    .accordion .pagenav a {
        font-size: 11px;
    }

    .accordion .pagenav h4 {
        font-size: 12px;
    }

    .accordion ul {
        padding-top: 3px;
    }
}


.k-pager-nav.k-link, .k-pager-refresh {
    color: #08446c !important;
}

.k-pager-numbers .k-link.k-state-selected {
    border-color: #08446c !important;
    color: #fff !important;
    background-color: #08446c !important;
}

.k-pager-numbers .k-link {
    color: #08446c !important;
}
/******************************************************************/
.modal-header {
    background: #339DD1 !important;
}

}


.k-searchbox.k-input.k-input-md.k-rounded-md.k-input-solid {
    max-width: 100% !important;
}

.overflowx {
    overflow-x: scroll
}

.page-item.active .page-link {
    background-color: #08446c;
    border-color: #08446c;
}

.modal-body {
    max-height: 75vh !important;
    overflow: auto !important;
}


.btn.submitBtn {
    background: #319541;
    border-color: #319541
}

.k-grid-update.k-button.k-button-md.k-button-rectangle.k-rounded-md.k-button-solid.k-button-solid-primary {
    background: #319541 !important;
    border-color: #319541 !important;
}

.btn.cancelBtn {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
}

.k-grid-cancel.k-button.k-button-md.k-button-rectangle.k-rounded-md.k-button-solid.k-button-solid-base {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
}

.k-justify-content-stretch > .k-button.k-button-md.k-rounded-md.k-button-solid.k-button-solid-base {
    background: #319541 !important;
    border-color: #319541 !important;
}


.justify-content-center > .bgColorbtn1 {
    margin-right: 5px;
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
}

.justify-content-center > .bgColorbtn2 {
    margin-right: 5px;
    background: #319541 !important;
    border-color: #319541 !important;
    color: white !important;
}

.modal-footer > .bgColorbtn1 {
    margin-right: 5px;
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
}

.modal-footer > .bgColorbtn2 {
    margin-right: 5px;
    background: #319541 !important;
    border-color: #319541 !important;
    color: white !important;
}

#login-submit, #forget-submit {
    background: #08446C;
}



.floatRight.k-button.k-button-md.k-button-rectangle.k-rounded-md.k-button-solid.k-button-solid-base {
    top: -2px
}

#list-table {
    height: 75vh;
    width: 100%;
    overflow: scroll;
}

::-webkit-scrollbar {
    width: 17px;
}