@import "navbar.css";
@import "sidebar.css";
@import "mobile.css";
@import "material.css";
@import "https://fonts.googleapis.com/css2?family=Chilanka&display=swap";
@import "navbar.css";
@import "sidebar.css";
@import "mobile.css";
@import "material.css";
@import "https://fonts.googleapis.com/css2?family=Chilanka&display=swap";

body {
    scrollbar-gutter: stable both-edges
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

body.dark-mode .main-menu, body.dark-mode .navigation {
    background-color: #2c2c2c !important
}

body.dark-mode .main-menu {
    box-shadow: 0 0 14px 1px #1f1f1f
}

body.dark-mode .main-menu .navigation > li > a button {
    color: #2c2c2c
}

body.dark-mode .main-menu.menu-dark .navigation > li.open {
    background: #232323 !important
}

body.dark-mode .main-menu.menu-dark .navigation > li > ul .open {
    background: #181818 !important
}

body.dark-mode .main-menu.menu-dark .navigation > li > ul > li > ul .open {
    background: #131313 !important
}

body.dark-mode .main-menu.menu-dark .navigation > li > a > svg g [fill], body.dark-mode .menu-footer-btn button svg g [fill] {
    fill: #777 !important
}

body.dark-mode .main-menu.menu-dark ul.menu-popout {
    background: #232323 !important
}

body.dark-mode .main-menu.menu-dark ul.menu-popout li:hover > a, body.dark-mode .main-menu.menu-dark ul.menu-popout li.open > a, body.dark-mode .main-menu.menu-dark ul.menu-popout li.open > a:active {
    background: #00000024 !important
}

body.dark-mode .main-menu.menu-dark ul.menu-popout .open {
    background: #181818 !important
}

body.dark-mode.menu-collapsed .main-menu .navigation > li.hover a, body.dark-mode.menu-collapsed .main-menu .navigation > li > a:hover {
    background: #232323 !important
}

body.dark-mode .main-menu.menu-dark .navigation > li > ul {
    background: #232323
}

@media screen and (min-width: 768px) {
    body.dark-mode .header-navbar.navbar-semi-dark .navbar-header {
        box-shadow: none !important
    }
}

.menu-hide-on-login, .menu-hide-on-login + .menu-footer-btn {
    display: none !important
}

.header-navbar.navbar-semi-dark {
    background: -webkit-linear-gradient(#F5F4F5, #f4f5f8);
    background: -moz-linear-gradient(#F5F4F5, #f4f5f8);
    background: -o-linear-gradient(#F5F4F5, #f4f5f8);
    background: linear-gradient(#F5F4F5, #f4f5f8)
}

.header-navbar.navbar-semi-dark .navbar-header {
    background: #313643;
    border: 0;
    border-bottom-style: none;
    transition: .3s ease all
}

.main-menu.menu-dark .main-menu-header .menu-search {
    background: #c6d0da url(../../../public/svg/search.svg) no-repeat 0 50%;
    background-size: 24px 24px;
    padding: 4px 4px 4px 22px;
    width: 100%;
    font-size: 12px;
    border: 0;
    border-radius: .18rem;
    box-shadow: none
}

.border-custom-color td {
    border-top: inherit;
    border-bottom: inherit
}

.menu-footer-btn {
    flex: 0 0 auto;
    z-index: 9999;
    left: 0;
    bottom: 0;
    height: 50px;
    border-top: 1px solid #68708833;
    width: 100%
}

.menu-hide .menu-footer-btn {
    display: none !important
}

.menu-footer-btn button {
    background: transparent;
    border: 0;
    height: 50px;
    width: 33.3333%;
    cursor: pointer
}

.menu-footer-btn button svg g [fill] {
    transition: fill .3s ease;
    fill: #687088
}

.menu-footer-btn button:hover svg g [fill] {
    fill: #0087ff
}

.menu-collapsed .menu-footer-btn button:first-child {
    width: 60px
}

.menu-collapsed .menu-footer-btn {
    width: auto
}

.menu-footer-btn button:first-child, .menu-footer-btn button:nth-child(2) {
    border-right: 1px solid #68708833
}

.menu-overflow {
    word-break: break-all;
    width: 60px;
    display: flex
}

@media (min-width: 768px) {
    .navbar-toggleable-sm {
        display: block !important;
        height: 2px
    }
}

[class*=" flaticon-"]:after, [class*=" flaticon-"]:before, [class^=flaticon-]:after, [class^=flaticon-]:before {
    display: inline-block
}

.open > .dropdown-menu {
    padding: 0
}

.login-left {
    min-height: 100vh;
    overflow: hidden;
    width: 66.66667%;
    background-color: #f7fafd;
    display: flex;
    align-items: center;
    justify-content: center
}

.login-right {
    width: 33.33333%;
    align-items: center;
    border: none
}

@media (max-width: 768px) {
    .wt-frame-top .nav.navbar-nav {
        opacity: 0
    }

    .login-right {
        width: 100%
    }
}

.security-div {
    position: relative;
    overflow: hidden
}

img#captcha_image {
    min-width: 80% !important;
    width: 100%;
    height: 46px !important;
    margin: 0 !important
}

.security-div ul li {
    display: unset
}

.lr-center {
    max-width: 500px;
    padding: 20px;
    overflow: auto
}

.login-slider {
    width: 70%
}

.login-slider .carousel-item {
    text-align: center
}

.login-slider .carousel-caption {
    position: unset;
    padding: 0 100px;
    height: 100px
}

@media (max-width: 1100px) {
    .login-slider .carousel-caption {
        padding: 0
    }
}

.login-slider .carousel-caption h5 {
    color: #4e5d6c;
    text-shadow: none;
    font-family: montserrat
}

.login-slider .carousel-caption p {
    color: #4e5d6c;
    text-shadow: none;
    font-family: montserrat;
    font-weight: 300
}

.login-slider .carousel-indicators {
    position: unset;
    margin: 0;
    width: 100%
}

.login-slider .carousel-indicators .active {
    width: 30px;
    height: 12px;
    background-color: #9bb1c8
}

.login-slider .carousel-indicators li {
    width: 12px;
    height: 12px;
    margin: 0 3px;
    background-color: #043d7533;
    -webkit-transition: all .3s;
    transition: all .3s
}

.login-slider .carousel-inner > .carousel-item > img {
    max-height: 70vh
}

.forget-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #00e3ae;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 3px;
    right: 4px;
    margin: 0
}

.forget-btn a {
    color: #fff;
    padding-left: 0;
    font-size: 24px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px
}

@media (max-width: 768px) {
    .wt-frame-top .nav.navbar-nav {
        display: none
    }
}

@media (max-width: 992px) {
    .scrollmenu .scrollmenu-container-end {
        float: none !important
    }
}

.text-input-wrapper {
    position: relative
}

.text-input-wrapper input {
    padding-right: 14px !important
}

.text-input-wrapper span {
    position: absolute;
    right: 4px;
    top: 3px;
    font-size: 10px;
    padding: 2px;
    line-height: 1;
    color: #616161;
    cursor: pointer;
    visibility: hidden
}

.nav-search .text-input-wrapper span {
    top: 11px;
    z-index: 11
}

@media (max-width: 767px) {
    .nav-search .text-input-wrapper span {
        top: 14px;
        z-index: 11
    }

    .nav-search-button i {
        font-size: 1.5rem
    }

    .bottom-inner-btn button {
        font-size: 1.7rem !important;
        color: #686e87
    }

    .nav-search-input {
        font-size: .95rem
    }

    .headerArama .listbox {
        height: 40px !important
    }

    .headerArama .textbox {
        height: 40px !important
    }

    .headerArama .aramaButon {
        height: 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        font-size: 1.7rem !important;
        padding: 10px !important
    }

    .headerArama .filtreButon {
        height: 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        font-size: 1.7rem !important;
        padding: 10px !important
    }
}

@media print {
    .navbar-header, .menu-container {
        display: none
    }

    .vertical-menu .content {
        margin: 0 !important
    }
}

.top-info-buttons {
    display: flex;
    align-items: center;
    position: relative;
    height: 50px
}

.top-info-buttons button {
    color: #fff;
    background-color: #0087ff;
    padding: 0 9px;
    height: 28px;
    font-size: 12px;
    text-align: left;
    max-width: 15ch;
    text-overflow: ellipsis;
    overflow: hidden;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: 0 4px 12px 0 #0087ff47
}

.fixed-top-btn {
    position: absolute;
    top: 2px;
    right: 5px
}

.top-info-buttons .fixed-top-btn:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #0087ff
}

.top-info-buttons .fixed-top-btn button:before {
    content: "";
    position: absolute;
    left: -20px;
    top: 0;
    width: 20px;
    height: 10px;
    border-radius: 0 6px 0 0;
    -webkit-box-shadow: 10px 0 0 0 #0087ff;
    box-shadow: 10px 0 0 0 #0087ff
}

.top-info-buttons .fixed-top-btn button:after {
    content: "";
    position: absolute;
    right: -20px;
    left: auto;
    top: 0;
    width: 20px;
    height: 10px;
    border-radius: 6px 0 0 0;
    -webkit-box-shadow: -10px 0 0 0 #0087ff;
    box-shadow: -10px 0 0 0 #0087ff
}

.custom-dropdown .custom-dropdown-body {
    position: relative;
    height: 100vh;
    flex: 1 1 auto;
    overflow: auto;
    padding: 1rem
}

.custom-dropdown .close-container {
    display: flex;
    position: absolute;
    right: 18px
}

.custom-dropdown .close-container a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    background-color: #ffffff80;
    transition: all .3s;
    border-radius: 4px;
    color: #fff;
    margin-left: 3px
}

.custom-dropdown .close-container a:hover {
    background-color: #fffc;
    opacity: 1
}

.custom-dropdown .close-container a i {
    transition: all .3s;
    font-size: 12px;
    color: #424242
}

body.switching * {
    transition: all .2s
}

.dark-mode-switch {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 40px;
    cursor: pointer;
    margin: inherit
}

.dark-mode-switch .inner {
    width: 100%;
    height: 100%;
    border-radius: 40px;
    overflow: hidden
}

.dark-mode-switch .bg {
    width: 100%;
    height: 100%;
    background-color: #8d91a4;
    border: 1px solid #fff;
    border-radius: 40px;
    transition: all .2s
}

body.dark-mode .dark-mode-switch .bg {
    border: 0;
    background-color: transparent
}

.dark-mode-switch .circle {
    margin-left: 6px;
    margin-top: -37px;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border: 2px solid transparent;
    border-radius: 40px;
    transition: all .2s
}

.header-button:hover .dark-mode-switch .circle {
    background-color: #ebecf2
}

body.dark-mode .header-button:hover .dark-mode-switch .circle {
    background-color: #fbc02d
}

.dark-mode-switch-cont .dark-text {
    display: none
}

body.dark-mode .dark-mode-switch-cont .dark-text {
    display: block
}

body.dark-mode .dark-mode-switch-cont .light-text {
    display: none
}

.dark-mode-switch .rays {
    position: absolute;
    left: 6px;
    top: 6px
}

.dark-mode-switch .rays .ray {
    position: absolute;
    left: 10px;
    top: 12px;
    width: 2px;
    height: 8px;
    border-radius: 4px;
    background-color: #fbc02d;
    transform-origin: 2px 0;
    opacity: 0
}

.dark-mode-switch .rays .ray:nth-child(1) {
    transform: rotate(-180deg) translateY(20px);
    transition: all .2s
}

.dark-mode-switch .rays .ray:nth-child(2) {
    transform: rotate(-225deg) translateY(20px);
    transition: all .2s
}

.dark-mode-switch .rays .ray:nth-child(3) {
    transform: rotate(-270deg) translateY(20px);
    transition: all .2s
}

.dark-mode-switch .rays .ray:nth-child(4) {
    transform: rotate(-315deg) translateY(20px);
    transition: all .2s
}

.dark-mode-switch .rays .ray:nth-child(5) {
    transform: rotate(-360deg) translateY(20px);
    transition: all .2s
}

.dark-mode-switch .rays .ray:nth-child(6) {
    transform: rotate(-405deg) translateY(20px);
    transition: all .2s
}

.dark-mode-switch .rays .ray:nth-child(7) {
    transform: rotate(-450deg) translateY(20px);
    transition: all .2s
}

.dark-mode-switch .rays .ray:nth-child(8) {
    transform: rotate(-495deg) translateY(20px);
    transition: all .2s
}

.dark-mode-switch.dark:hover .rays .ray:nth-child(1) {
    transform: rotate(-180deg) translateY(11px)
}

.dark-mode-switch.dark:hover .rays .ray:nth-child(2) {
    transform: rotate(-225deg) translateY(11px)
}

.dark-mode-switch.dark:hover .rays .ray:nth-child(3) {
    transform: rotate(-270deg) translateY(11px)
}

.dark-mode-switch.dark:hover .rays .ray:nth-child(4) {
    transform: rotate(-315deg) translateY(11px)
}

.dark-mode-switch.dark:hover .rays .ray:nth-child(5) {
    transform: rotate(-360deg) translateY(11px)
}

.dark-mode-switch.dark:hover .rays .ray:nth-child(6) {
    transform: rotate(-405deg) translateY(11px)
}

.dark-mode-switch.dark:hover .rays .ray:nth-child(7) {
    transform: rotate(-450deg) translateY(11px)
}

.dark-mode-switch.dark:hover .rays .ray:nth-child(8) {
    transform: rotate(-495deg) translateY(11px)
}

.dark-mode-switch.dark .circle {
    margin-left: 11px !important;
    margin-top: -25px !important;
    background-color: #fbc02d;
    border-color: #f9a825;
    width: 14px;
    height: 14px
}

.dark-mode-switch.dark .rays .ray {
    opacity: 1
}

.dark-mode-switch.dark .rays .ray:nth-child(1) {
    transform: rotate(-180deg) translateY(9px);
    transition: all .4s
}

.dark-mode-switch.dark .rays .ray:nth-child(2) {
    transform: rotate(-225deg) translateY(9px);
    transition: all .6s
}

.dark-mode-switch.dark .rays .ray:nth-child(3) {
    transform: rotate(-270deg) translateY(9px);
    transition: all .8s
}

.dark-mode-switch.dark .rays .ray:nth-child(4) {
    transform: rotate(-315deg) translateY(9px);
    transition: all 1s
}

.dark-mode-switch.dark .rays .ray:nth-child(5) {
    transform: rotate(-360deg) translateY(9px);
    transition: all 1.2s
}

.dark-mode-switch.dark .rays .ray:nth-child(6) {
    transform: rotate(-405deg) translateY(9px);
    transition: all 1.4s
}

.dark-mode-switch.dark .rays .ray:nth-child(7) {
    transform: rotate(-450deg) translateY(9px);
    transition: all 1.6s
}

.dark-mode-switch.dark .rays .ray:nth-child(8) {
    transform: rotate(-495deg) translateY(9px);
    transition: all 1.8s
}

html body {
    background: #FFF;
    -webkit-font-smoothing: antialiased;
    font-family: 'Nunito', sans-serif;
    color: #4e5d6c
}

.header-navbar {
    display: none;
    position: fixed;
    right: 0;
    left: 0;
    z-index: 9999
}

@media (max-width: 767px) {
    .header-navbar {
        display: block
    }

    .header-navbar .navbar-header {
        width: 100% !important;
        padding: .5rem 1rem
    }

    .header-navbar .navbar-header .nav-menu-main {
        position: absolute;
        top: -3px;
        width: 124px;
        left: calc(50% - 62px)
    }

    .hamburger-menu {
        display: block
    }
}

.header-navbar.navbar-semi-dark {
    background: -webkit-linear-gradient(#F5F4F5, #f4f5f8);
    background: -moz-linear-gradient(#F5F4F5, #f4f5f8);
    background: -o-linear-gradient(#F5F4F5, #f4f5f8);
    background: linear-gradient(#F5F4F5, #f4f5f8)
}

.header-navbar.navbar-semi-dark .navbar-header {
    background: #313643
}

.main-menu.menu-dark {
    color: #CCC;
    background: #313643
}

.main-menu.menu-dark .navigation {
    background: #313643
}

.header-navbar.navbar-semi-dark .navbar-header .nav.navbar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px
}

.border-custom-color td {
    border-top: inherit;
    border-bottom: inherit
}

.fixed-table .form-control {
    font-size: .75rem;
    height: 30px;
}

.form-control {
    color: #4e5d6c
}

.form-control.form-new {
    border: 1px solid #1192f6 !important
}

select.form-control {
    padding: 0 1.5rem 0 .3rem !important;
    vertical-align: middle;
    background: url(../../../public/svg/custom-select.svg) no-repeat center right 10px;
    background-size: 10px 12px !important;
    border: 1px solid #dee2ea;
    border-radius: .18rem;
    font-size: .8rem;
    font-weight: 400;
    box-shadow: inset 0 1px 1px #96c8fe13;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

select.form-control.form-new {
    border: 1px solid #1192f6 !important
}

head {
    clear: both
}

head title {
    font-family: "xs 0, sm 530px, md 768px, lg 992px, xl 1190px"
}

[data-usn-if], body:after {
    display: none
}

html, body {
    height: 100%
}

wt-header {
    flex: 0 0 auto;
    height: 50px;
    display: block
}

wt-tab-container {
    height: 100%;
    width: 100%
}

wt-tab-content {
    width: 100%
}

.tab-pane {
    height: 100%
}

.wt-frame-center > .row {
    height: 100%
}

.bg-none {
    background: transparent
}

.bg-blue {
    background: #0087FF !important
}

.bg-yellow {
    background: #fda424 !important
}

.bg-red {
    background: #fc566a !important
}

.bg-green {
    background: #62c26f !important
}

.bg-white {
    background: #FFF !important
}

.text-dark{
    color: #222222;
}

.bg-gray {
    background: #313643 !important;
    color: #FFF;
    font-weight: 700
}

.bg-softgray {
    background-color: #dee2ea !important
}

.bg-gecikme {
    background-color: #fde8e8 !important
}

body.dark-mode .bg-gecikme {
    background-color: #5c2a2a !important
}

.bg-light {
    background-color: #f4f5f8 !important
}

.bg-table-soft, .bg-table-input {
    background: #f4f6f8 !important
}

.bg-table-input select, .bg-table-input input {
    border: 1px solid #dee2ea !important;
    border-radius: .25rem !important
}

.co-blue {
    color: #0087FF !important
}

.co-deepblue {
    color: #2b3dff !important
}

.co-purple {
    color: #5d78ff !important
}

.co-yellow {
    color: #fda424 !important
}

.co-red {
    color: #fc566a !important
}

.co-green {
    color: #00bf0a !important
}

.co-white, .co-white td * {
    color: #FFF !important
}

.co-black {
    color: #000 !important
}

.co-gray {
    color: #4e5d6c !important
}

.co-softgray {
    color: #949eb7 !important
}

.modal-content {
    height: auto
}

.job-queue-detail-modal {
    padding: 10px 14px 16px
}

.job-queue-detail-meta {
    font-size: 12px;
    color: #6c757d;
    margin: 4px 0 8px
}

.job-queue-detail-card {
    background: #0b1020;
    color: #e4f0ff;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: inset 0 0 0 1px #0f1a33
}

.job-queue-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.job-queue-detail-item {
    padding: 8px 10px;
    background: #0f1a33;
    border-radius: 8px;
    line-height: 1.5;
    white-space: normal;
    word-break: break-word
}

.job-queue-detail-text {
    line-height: 1.6;
    white-space: normal;
    word-break: break-word
}

.job-queue-detail-empty {
    opacity: .7
}

.trm-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--trm-border, #dee2ea);
    border-radius: 6px
}

.trm-detail-item {
    padding: 12px 20px;
    border-bottom: 1px solid var(--trm-border, #dee2ea);
    font-size: .9rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff
}

.trm-detail-item:last-child {
    border-bottom: none;
    border-radius: 0 0 6px 6px
}

.trm-detail-item:first-child {
    border-radius: 6px 6px 0 0
}

.trm-detail-item span {
    line-height: 1.5;
    word-break: break-word
}

.trm-dot {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: #0087ff;
    flex: 0 0 auto
}

.trm-line-main {
    background: #f3f7ff
}

.trm-line-sub {
    background: #fff
}

.trm-line-error {
    background: #fff5f6
}

.trm-line-error .trm-dot {
    background: #fc566a
}

.trm-detail-report {
    margin-bottom: 12px
}

.trm-report-title {
    font-weight: 600;
    font-size: .9rem;
    margin: 2px 0 8px;
    color: #4e5d6c
}

.trm-mini-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1;
    color: #fff;
    font-weight: 600
}

.trm-mini-badge i {
    font-size: 12px;
    line-height: 1
}

.trm-mini-badge.success {
    background: #1ac87a
}

.trm-mini-badge.error {
    background: #fc566a
}

.wt-content .wizard {
    width: 100%
}

.wt .wizard .content {
    margin-left: 0 !important
}

.wt-form ul {
    list-style: none;
    margin: 0;
    padding: 0
}

div.wt-form ul li.tab-checkbox {
    left: 0;
    margin-top: 18px;
    margin-left: 3px
}

.loader-overlay {
    position: absolute;
    width: 100vw;
    height: 100vh;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #282537;
    background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
    z-index: 99999999
}

.loader {
    position: relative;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    right: 0;
    width: 100px;
    height: 100px;
    z-index: 9
}

.spinner {
    width: 100px;
    height: 100px;
    background: url(../../../public/ximages/preload.svg);
    background-size: 100px 100px;
    border-radius: 50%;
    position: relative;
    display: inline-block
}

.spinner2:after, .spinner2:before, .spinner:after, .spinner:before {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%
}

.spinner-1:after {
    position: absolute;
    top: -4px;
    left: -4px;
    border: 6px solid transparent;
    border-top-color: #fff;
    border-bottom-color: #fff;
    animation: spinny 1s linear infinite
}

@keyframes spinny {
    0% {
        transform: rotate(0deg) scale(1);
        -moz-transform: rotate(0deg) scale(1);
        -ms-transform: rotate(0deg) scale(1);
        -o-transform: rotate(0deg) scale(1)
    }
    50% {
        transform: rotate(140deg) scale(1.2);
        -moz-transform: rotate(140deg) scale(1.2);
        -ms-transform: rotate(140deg) scale(1.2);
        -o-transform: rotate(140deg) scale(1.2)
    }
    100% {
        transform: rotate(360deg) scale(1);
        -moz-transform: rotate(360deg) scale(1);
        -ms-transform: rotate(360deg) scale(1);
        -o-transform: rotate(360deg) scale(1)
    }
}

.spinner2 {
    width: 100px;
    height: 100px;
    background: url(../ximages/preload2.svg);
    background-size: 100px 100px;
    border-radius: 50%;
    position: relative;
    display: inline-block
}

.spinner-2:after {
    position: absolute;
    top: -4px;
    left: -4px;
    border: 6px solid transparent;
    border-top-color: #0300bf;
    border-bottom-color: #0087ff;
    animation: spinny-2 1s linear infinite
}

@keyframes spinny-2 {
    0% {
        transform: rotate(0deg) scale(1)
    }
    50% {
        transform: rotate(140deg) scale(1.2)
    }
    100% {
        transform: rotate(360deg) scale(1)
    }
}

.block-spinner {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    background: #00000008 !important
}

.block-spinner img {
    position: absolute;
    z-index: 999999;
    left: calc(50% - 22px);
    top: calc(50% - 22px)
}

.wt-loading-spinner {
    position: absolute;
    z-index: 9999;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden
}

.fixed-loading .wt-loading-spinner {
    position: fixed
}

.wt-loading-spinner img {
    position: absolute;
    left: calc(50% - 22px);
    top: calc(50% - 22px);
    width: 44px;
    height: 44px
}

.wt-loading-spinner .loading-text {
    position: absolute;
    left: calc(50% - 68px);
    top: calc(50% - 19px);
    padding: 10px 30px 10px 15px;
    background: #fff;
    z-index: 1;
    border-radius: 4px;
    box-shadow: 0 0 14px 2px #00000014
}

.wt-loading-spinner .loading-text:after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    right: 12px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid #0087ff;
    border-right: 2px solid transparent;
    -webkit-animation: rotating .5s linear infinite;
    animation: rotating .5s linear infinite
}

.wt-loading-spinner:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0000000d
}

.wt-loading-spinner.transparent:after {
    background: transparent
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #6e82961a
}

::-webkit-scrollbar-track:hover {
    border-radius: 10px;
    background: #6e829633
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #465a6e33
}

.body::-webkit-scrollbar-thumb:hover {
    background: #465a6e66
}

::-webkit-scrollbar-thumb:active {
    background: #05374166
}

.wt-container {
    display: flex;
    flex-direction: column;
    height: 100%
}

.wt-frame {
    background-color: #ebeef3;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0
}

@media (max-width: 767px) {
    wt-menu + wt-content .wt-frame {
        height: calc(100vh - 40px)
    }
}

.wt-frame-top {
    width: 100%;
    padding: 0;
    flex: 0 0 auto;
    height: 50px;
    box-shadow: 6px 6px 15px 1px #e2e7ef;
    border-bottom: 1px solid #dee2ea;
    background-color: #f4f5f8
}

@media (min-width: 767px) {
    .wt-frame-top .bottom-inner-btn {
        margin-left: 8px
    }
}

.wt-frame-tab {
    height: 38px;
    width: 100%
}

wt-tabs {
    width: 100%;
    display: flex
}

wt-tabs.m-0 .wt-frame-tab {
    margin: 0
}

.wt-frame-center {
    flex: 1 1 auto;
    height: 100%;
    margin-bottom: 7px;
    padding: 7px 14px 0;
    overflow: auto
}

.wt-frame-bottom {
    flex: 0 0 auto;
    height: 50px;
    padding: 0;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 14px 1px #45414e0a;
    box-shadow: 0 1px 14px 1px #45414e0a
}

.wt-frame-bottom .dropdown-menu {
    z-index: 10000
}

.centerla li, .centerla div, .centerla {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center
}

.nav-search-button {
    background: none;
    width: 36px;
    height: 36px;
    font-size: .9rem;
    padding: 0;
    margin-top: 0;
    border-radius: 3px;
    border: 1px solid #dee2ea
}

.nav-search-button.is-filter {
    position: relative
}

.remove-filter-button {
    padding: 8px;
    background: #ff4d3b;
    color: #fff;
    border-radius: 50%;
    width: 36px;
    min-width: 36px;
    margin-left: 8px;
    height: 36px
}

.remove-filter-button:hover {
    background: #e63c1b
}

.remove-filter-icon {
    position: absolute;
    top: 5px;
    background: #fff;
    right: 5px;
    border-radius: 50%;
    font-size: 14px;
    color: red !important
}

.remove-filter-icon2 {
    font-size: 18px !important
}

.nav-search-button.is-filter:before {
    content: "";
    width: 6px;
    height: 6px;
    background: #0087ff;
    border-radius: 50%;
    position: absolute;
    right: 3px;
    top: 4px
}

.nav-search-button.is-filter i {
    color: #0087ff
}

.nav-search-button i {
    font-size: 1.4rem;
    color: #686e87;
    padding-right: 0;
    padding-left: 0
}

.nav-search-l-button i {
    font-size: 1.22rem
}

.nav-search-input {
    height: 36px;
    line-height: 36px;
    padding-left: 7px;
    font-size: .9rem;
    background-color: #ffff;
    color: #686e87;
    border-radius: 0
}

.nav-search-input + .close {
    position: absolute;
    z-index: 5;
    right: 10px;
    top: 12px;
    font-size: 12px
}

.nav-search-r-button {
    border-left: none
}

.nav-search-l-button {
    color: #686e87;
    width: auto !important;
    padding: 0 6px;
    text-align: center;
    cursor: pointer;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.nav-search-r-button:hover, .nav-search-r-button:focus, .nav-search-l-button:hover, .nav-search-l-button:focus {
    background-color: #4d59950f
}

span#search_concept {
    color: #686e87;
    width: 100%;
    display: inline-block;
    line-height: 1
}

.search-detail {
    list-style: none;
    margin: 0;
    background-color: #FFF;
    border-bottom: 1px solid #dadada
}

.search-detail .search-detail-item {
    height: 36px;
    border-right: 1px solid #dee2ea;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0
}

.search-detail div.bg-modal {
    background-color: #f4f6f8 !important
}

.search-detail div select {
    vertical-align: middle;
    background: url(../SVG/custom-select.svg) no-repeat center right 10px;
    background-image: none \9;
    background-size: 12px 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none
}

@media (max-width: 1300px) {
    .search-detail .search-detail-item:nth-child(2) {
        padding: 0
    }
}

.search-detail div mat-select, .search-detail div input {
    margin: 0;
    border: none;
    font-size: .9rem;
    color: #8f9db9;
    font-weight: 400;
    border-radius: 0
}

.search-detail-item mat-select {
    padding: 0 .5rem !important
}

.search-detail p {
    text-align: center;
    font-weight: 700
}

.search-detail-bg {
    background-color: #dee3eb
}

div#filter-button {
    text-align: center;
    padding: 0;
    font-size: .875rem;
    color: #686e87;
    height: 40px;
    border-right: 1px solid #cbd3e1;
    width: 100%
}

#filter-button ul {
    padding: 0;
    list-style: none;
    position: relative;
    width: 100%;
    text-align: center;
    margin: 0
}

#filter-button ul li:hover {
    cursor: pointer
}

#filter-button ul li a {
    display: flex;
    padding: 0;
    color: #686e87;
    text-decoration: none;
    height: 40px;
    align-items: center;
    justify-content: center
}

#filter-button ul ul {
    display: none;
    background: #FFF;
    padding: 0;
    width: 150px;
    position: absolute;
    z-index: 999999;
    top: 39px;
    left: 0;
    border-radius: .25rem;
    border: 1px solid #cbd3e1;
    -webkit-box-shadow: -1px 1px 8px -1px #cbd3e1ff;
    -moz-box-shadow: -1px 1px 8px -1px #cbd3e1ff;
    box-shadow: -1px 1px 8px -1px #cbd3e1ff
}

#filter-button ul li:hover > ul {
    display: block
}

#filter-button ul ul li {
    float: none;
    text-align: left;
    position: relative;
    background: linear-gradient(0, #cbd3e1, #cbd3e1 51%, transparent 50%) bottom right / 100% 1px no-repeat;
    padding: 6px 14px;
    font-size: .75rem;
    height: 30px;
    width: 150px
}

#filter-button ul ul li:hover {
    background: #0087FF;
    color: #FFF
}

#filter-button ul ul ul {
    position: absolute;
    top: -10px;
    left: 99%;
    width: 195px;
    color: #686e87
}

#filter-button ul ul ul li {
    width: 195px;
    padding: 10px;
    text-align: left;
    height: auto
}

#filter-button ul ul ul li:hover {
    background: linear-gradient(0, #cbd3e1, #cbd3e1 51%, transparent 50%) bottom right / 100% 1px no-repeat;
    background-color: #ffd3e100;
    color: #686e87
}

.filter-body {
    overflow-y: auto;
    border: 1px solid #dee2ea;
    height: calc(100vh - 132px)
}

.tab-checkbox {
    z-index: 1;
    position: absolute;
    right: 0;
    display: flex;
    height: 40px;
    align-items: center;
    margin-right: 10px
}

@media (max-width: 544px) {
    .tab-checkbox {
        display: none
    }
}

.checkbox {
    display: flex;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    font-size: .825rem;
    line-height: 1.25;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-left: 7px
}

.checkbox input {
    display: none
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 14px;
    width: 14px;
    background-color: #ebeef3;
    border-radius: .18rem;
    border: 1px solid #dee2ea
}

.checkbox input:checked ~ .checkmark {
    background-color: #0087ff;
    border: 1px solid #0087ff
}

.checkbox input:checked ~ .checkmark:after {
    transform: scale(1);
    transition: all .2s ease;
    content: "\f122";
    font-family: "Ionicons";
    font-size: .8rem;
    color: #fff;
    opacity: 1;
    display: flex;
    justify-content: center
}

.checkbox .checkmark:after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 14px;
    height: 14px;
    border-radius: .18rem;
    background: #0087ff;
    transform: scale(0);
    transition: all .2s ease;
    opacity: .08;
    pointer-events: none
}

.checkbox:hover .checkmark:after {
    transform: scale(2.6)
}

.wt-col {
    height: 100%;
    overflow: hidden;
    border-radius: .25rem;
}

.height-wt-1 {
    height: calc(100dvh - 152px) !important
}

@media (max-width: 991px) {
    .height-wt-1 {
        height: calc(100dvh - 114px) !important
    }
}

@media (max-width: 768px) {
    .height-wt-1 {
        height: calc(100dvh - 194px) !important
    }
}

.height-wt-2, .pay-container, .pay-tab-menu-container {
    height: calc(100dvh - 152px) !important
}

@media (max-width: 991px) {
    .height-wt-2, .pay-container, .pay-tab-menu-container {
        height: calc(100dvh - 114px) !important
    }
}

@media (max-width: 768px) {
    .height-wt-2 {
        height: calc(100dvh - 154px) !important
    }

    .pay-tab-menu-container {
        height: 20dvh !important
    }

    .pay-container {
        padding-top: 7px !important;
        height: calc(80dvh - 154px) !important
    }
}

/* Yeni tahsilat/tediye formları: .tahsilat-form, .pay-container içinde
   parent yüksekliğini doldursun ki dahili scroll (.left-content-inner-center)
   parent'ın görünür alanı dışına taşmasın. Aksi halde sabit
   "calc(100vh - 115px)" yüksekliği nedeniyle son inputlar (textarea vb.)
   .wt-col overflow:hidden ile kırpılan alanın altında kalıyordu. */
.pay-container .forms-container {
    height: 100%;
}
.pay-container .forms-container > form.tahsilat-form {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.pay-container .forms-container > form.tahsilat-form > .left-content-inner-header,
.pay-container .forms-container > form.tahsilat-form > .left-content-inner-bottom {
    flex: 0 0 auto;
}
.pay-container .forms-container > form.tahsilat-form > .left-content-inner-center {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.height-wt-3 {
    height: calc(100dvh - 112px) !important
}

@media (max-width: 991px) {
    .height-wt-3 {
        height: calc(100dvh - 64px) !important
    }
}

@media (max-width: 768px) {
    .height-wt-3 {
        height: calc(100dvh - 104px) !important
    }
}

.height-wt-4 {
    height: calc(100dvh - 112px) !important
}

@media (max-width: 991px) {
    .height-wt-4 {
        height: calc(100dvh - 64px) !important
    }
}

@media (max-width: 768px) {
    .height-wt-4 {
        height: calc(100dvh - 104px) !important
    }
}

.height-wt-5 {
    height: calc(100dvh - 114px) !important
}

@media (max-width: 768px) {
    .height-wt-5 {
        height: calc(100dvh - 154px) !important
    }
}

.height-wt-6 {
    height: calc(100dvh - 64px) !important
}

@media (max-width: 768px) {
    .height-wt-6 {
        height: calc(100dvh - 104px) !important
    }
}

.height-wt-7 {
    height: calc(100dvh - 102px) !important
}

@media (max-width: 768px) {
    .height-wt-7 {
        height: calc(100dvh - 146px) !important
    }
}

.left-content-inner {
    background-color: #FFF;
    display: flex;
    flex-direction: column;
    border-radius: .25rem;
    overflow: hidden;
    min-height: 100%;
    height: 100%;
}

.left-content-inner2 {
    height: calc(100vh - 166px);
    background-color: #FFF;
    display: flex;
    flex-direction: column;
    border-radius: .25rem
}

.left-content-inner-header {
    padding: 0;
    flex: 0 0 auto;
    border-bottom: 1px solid #dee2ea;
    background-color: #f4f6f8;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem
}

.left-content-inner-header-sm > .tab-inner-profile {
    height: 40px
}

.left-content-inner-header-sm > .tab-inner-profile .scrollmenu {
    height: 45px
}

.left-content-inner-header-sm > .tab-inner-profile .scrollmenu a {
    height: 44px
}

.left-content-inner-header2 {
    padding: 0;
    background-color: #f4f6f8;
    border-top: 1px solid #dee2ea;
    border-bottom: 1px solid #dee2ea
}

@media (max-width: 767px) {
    .left-content-inner-header2 {
        min-width: 980px
    }
}

.left-content-inner-header .clist-content {
    border-bottom: 0
}

.left-content-inner-bottom2 {
    border-top: 1px solid #eaeef5;
    background-color: #f4f6f8;
    padding: 0;
    flex: 0 0 auto;
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem
}

.left-content-inner-bottom3 {
    max-height: 25%;
    overflow: auto;
    border-top: 1px solid #eaeef5;
    background-color: #f4f6f8;
    padding: 0;
    flex: 0 0 auto;
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem
}

.left-content-inner-bottom3 table {
    margin: .75rem;
    width: calc(100% - 1.5rem)
}

.left-content-inner-bottom3 .fixed-table td, .fixed-table th {
    height: 30px
}

.left-content-inner-center {
    flex: 1 1 auto;
    position: relative;
    overflow-y: auto;
    padding: 0;
    background: #FFF;
    height: 100%
}

.left-content-inner-bottom {
    display: flex;
    align-items: center;
    padding: 5px 0;
    flex: 0 0 auto;
    background-color: #f4f6f8;
    border-top: 1px solid #dde9fb;
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem
}

.left-content-inner-bottom textarea {
    padding: .5rem;
    height: 45px;
    line-height: 1
}

.modal-content-inner-center {
    flex: 1 1 auto;
    position: relative;
    overflow-y: auto;
    max-height: 50vh;
    min-height: 38px;
    background: #FFF
}

.wt-popover-content .left-content-inner-header {
    position: absolute;
    height: 3.75rem;
    width: 100%;
    z-index: 1
}

.wt-popover-content .left-content-inner-center {
    overflow-y: auto !important;
    padding-top: 3.75rem
}

.right-content-crm {
    height: calc(100vh - 234px);
    display: flex;
    flex-direction: column
}

.right-contsip-al-center {
    flex: 1 1 auto;
    position: relative;
    overflow-y: auto;
    padding: 0
}

.right-contsip-al-bottom {
    padding: 5px 0;
    flex: 0 0 auto;
    background-image: linear-gradient(to top, #f4f6f8 0%, #eef4fd 100%);
    border-top: 1px solid #dee2ea
}

.sales-table {
    overflow-x: auto;
    padding: 0 1px;
    font-size: .8rem
}

.sales-list {
    margin: 0;
    width: 100%
}

.sales-list tr {
    height: 36px
}

.sales-list tr td input, .sales-list tr td mat-select, .sales-list tr th input {
    background: #ffffff80;
    height: 30px;
    width: 100%;
    color: #616161;
    font-size: .75rem;
    border: 1px solid #dee2ea;
    padding: 0 5px;
    border-radius: .25rem;
    min-width: 70px;
    margin: 0
}

.sales-list tr td select {
    height: 30px;
    width: 100%;
    color: #616161;
    font-size: .75rem;
    border: 1px solid #dee2ea;
    padding: 0 5px;
    border-radius: .25rem;
    min-width: 70px;
    margin: 0
}

.sales-list tr td mat-select .mat-select-trigger, .sales-list tr td mat-select .mat-select-trigger .mat-select-value {
    height: 30px !important
}

.sales-list tbody tr:hover, .sales-list tr:hover .fixed-col {
    background: #f7fbff !important
}

.sales-list tbody tr.cancel, .sales-list tbody tr.cancel:hover > td {
    background: #f4516c14 !important;
    color: #4e5d6c80 !important
}

.sales-list tbody tr.cancel input, .sales-list tbody tr.cancel select {
    color: #4e5d6c80 !important
}

.sales-list tbody tr.cancel button {
    opacity: .5
}

.sales-list tbody tr:hover td input, .sales-list tbody tr:hover td select {
    color: #263038;
    cursor: pointer;
    border-color: #dee2ea
}

.sales-list tbody tr td input:focus {
    border: 1px solid #0087ff;
    background: #f4fafe;
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: 0;
    border-radius: .25rem
}

.sales-list tbody tr td select:focus {
    border: 1px solid #0087ff;
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: 0;
    border-radius: .25rem
}

.sales-list-search {
    position: sticky;
    left: 0;
    bottom: 0;
    padding: 12px 14px;
    background: #fff
}

.sales-list-search.behind-search {
    position: static
}

.sales-list-search div {
    float: left
}

@media (min-width: 768px) {
    .row-hover-btn button {
        opacity: 0
    }

    .row-hover-btn:hover button {
        opacity: 1
    }
}

.bg-stock-search {
    position: relative
}

.bg-stock-search input {
    background-color: #f4fafe;
    font-weight: 400;
    color: #7a869e;
    outline: 0;
    border: 1px solid #0087FF;
    padding: 3px 4px 3px 26px;
    border-radius: .25rem;
    margin: 0;
    width: 100%;
    height: 36px
}

.bg-stock-search.border-0 input {
    border: none
}

.bg-stock-search i {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    font-size: 18px;
    color: #616161;
    width: 30px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

td.bg-stock-search i {
    top: 7px;
    right: 10px
}

.simge {
    height: 12px;
    width: 12px;
    cursor: pointer;
    vertical-align: middle;
    margin-top: -1px;
    background-color: transparent;
    border: 0;
    display: inline-block;
    background-repeat: no-repeat
}

.simge:hover {
    opacity: .8
}

.sirala_yukari {
    background-image: url(../SVG/yukari-sirala.svg) !important;
    background-size: 80%;
    background-position: center
}

.sirala_yukari:hover {
    background-image: url(../SVG/asagi-sirala.svg) !important
}

.sirala_asagi {
    background-image: url(../SVG/asagi-sirala.svg) !important;
    background-size: 80%;
    background-position: center
}

.sirala_asagi:hover {
    background-image: url(../SVG/yukari-sirala.svg) !important
}

.sirala_sirasiz {
    background-image: url(../SVG/sirasiz.svg) !important
}

.sirala_sirasiz:hover {
    background-image: url(../SVG/asagi-sirala.svg) !important;
    background-size: 80%;
    background-position: center
}

#topstokTablo th{
    background-size: 16px;
    background-position: 90%;
    background-repeat: no-repeat;
}

.yukari {
    background-image: url(../SVG/yukari.svg) !important
}

.asagi {
    background-image: url(../SVG/asagi.svg) !important
}

.invoice-header {
    line-height: 22px;
    font-size: .75rem
}

.invoice-header button, .invoice-header select, .invoice-header input {
    background: transparent;
    outline: 0;
    border-color: transparent !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    border-radius: 0;
    height: 22px;
    line-height: 1;
    color: #4e5d6c;
    padding: 2px 4px
}

.invoice-header select.currency {
    border: .5px solid #0087ff;
    appearance: auto;
    border-radius: .18rem;
    margin-right: 5px
}

.invoice-header select:hover, .invoice-header input:hover, .invoice-header select:focus, .invoice-header input:focus {
    cursor: pointer
}

.invoice-header label {
    padding: 0;
    line-height: 18px
}

.invoice-header wt-datepicker span.input-group-addon {
    display: none
}

.fixed-table {
    height: auto;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    table-layout: fixed
}

.fixed-table table {
    border-collapse: collapse;
    width: 100%
}

.fixed-table .fixed-col {
    position: sticky;
    left: 0;
    text-align: center;
    z-index: 1
}

.fixed-table .fixed-col input {
    text-align: center
}

.fixed-table tr th {
    position: sticky;
    position: -webkit-sticky;
    background-color: #d9dfe4;
    color: #263038;
    top: 0;
    margin: 0;
    font-size: .75rem;
    line-height: 1;
    z-index: 1;
    transition: .3s all
}

.fixed-table.not-fixed tr th {
    position: unset
}

.fixed-table .fixed-edge {
    left: 0;
    z-index: 2;
    text-align: center;
    width: 50px
}

.fixed-table td, .fixed-table th {
    position: relative;
    height: 36px;
    font-size: .75rem;
    padding: 0 8px;
    border: 1px solid #f4f5f8;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

#divfilter .fixed-table td, #divfilter .fixed-table th {
    text-overflow: unset !important;
    overflow: unset !important;
    white-space: unset !important;
    padding: 5px !important;
}

.fixed-table th:has(label.wt-checkbox,button.btn-icon) {
    text-align: center !important
}

.fixed-table td .wt-popover p {
    bottom: 38px
}

.fixed-table td .wt-popover.below p {
    bottom: -26px
}

.left-content-inner-header + .left-content-inner-center .fixed-table thead tr th {
    border-top: 0
}

.fixed-table > tbody > tr:nth-child(even) {
    background-color: #f8f9fc
}

.fixed-table > tbody > tr:nth-child(odd) {
    background-color: #fff
}

.fixed-table tr.cancel {
    background: #f4516c14 !important;
    color: #4e5d6c80 !important
}

.fixed-table tr.satiriptal,
.fixed-table tr.satiriptal:hover {
    background: rgba(244, 81, 108, 0.35) !important;
    color: rgba(78, 93, 108, 0.5) !important;
}

.fixed-table tr.satiriptal:nth-child(even),
.fixed-table tr.satiriptal:nth-child(even):hover {
    background: rgba(244, 81, 108, 0.27) !important;
}

.fixed-table tr.incomplete {
    background: #ffb82214;
    color: #4e5d6c80
}

.fixed-table tr.passive {
    color: #4e5d6c80 !important;
    text-decoration: line-through
}

.fixed-table th:not(:last-child):after {
    border: .5px solid #dee2ea
}

.fixed-table th > .checkbox {
    margin-top: 10px
}

.fixed-table tr:hover > td {
    background: #d9dfe45c
}

.fixed-table tbody tr .wt-checkbox > span {
    width: 16px !important;
    height: 16px !important;
    top: -1px
}

.fixed-table tbody:nth-child(1) tr:nth-child(1):hover {
    background: none !important
}

.fixed-table tbody tr:nth-child(even) .fixed-col {
    background: #fff
}

.fixed-table tbody tr.open .fixed-col {
    background: #f7fbff !important
}

.fixed-table tbody tr.borclu .fixed-col {
    background: #fff
}

.fixed-table thead tr th button:not(.btn,.btn-icon), .th-sort-button, .table-action-btn {
    border: none;
    background: none;
    color: #6d7a97;
    font-size: 1rem;
    cursor: pointer;
    padding: 0 2px
}

.fixed-table thead tr th button i, .fixed-table tr td button i {
    vertical-align: middle;
    font-size: 16px
}

.fixed-table tbody tr.search-row:hover, .search-row {
    background-color: #ebeff3 !important
}

tr.search-row td {
    padding: 1px 1px 2px !important
}

.search-row input {
    border-radius: .25rem;
    border: 1px solid #dee2ea;
    padding: 0 .25rem;
    width: 100%;
    outline: 0;
    height: 30px;
    background: #fdfdfd
}

.search-row select {
    background-color: #fdfdfd
}

.fixed-table tr td img.img-free-cari {
    max-width: 24px
}

.fixed-table.soft-bg tr th {
    background-color: #f4f6f8
}

.bulk-entry input {
    min-width: 120px
}

.bulk-entry tr td:nth-child(2) input {
    min-width: 150px
}

.bulk-entry tr:hover i {
    color: #4e5d6c
}

.fixed-table tfoot tr td {
    position: sticky;
    bottom: 0;
    font-weight: 600;
    background: #ebedef;
    border-top: 0;
    border-bottom: 0
}

.fixed-table tfoot tr td:hover {
    background: #ebedef !important;
}

.fixed-table.reports-table tfoot tr:nth-child(1) td {
    bottom: 26px;
    border-bottom: 1px solid #f4f5f8;
}

.fixed-table tfoot tr:only-child td {
    bottom: 0 !important;
    border-bottom: 0 !important;
}

.fixed-table tr:hover > .nohovbac {
    background: #ebedef
}

.invoice-gear {
    position: absolute;
    right: 11px;
    margin-top: -38px
}

.invoice-gear button {
    background: transparent;
    border: 0;
    color: #4e5d6c;
    cursor: pointer
}

#show-invoice {
    display: none
}

.clist-invoice {
    height: 4rem;
    align-items: center
}

.kdv-label label {
    display: flex
}

.invoice-bottom-box {
    display: flex
}

.invoice-footer {
    width: 50%
}

.invoice-footer ul {
    position: relative;
    padding: 0;
    background: linear-gradient(90deg, #dee2ea, #dee2ea 51%, transparent 50%) top right / 1px 100% no-repeat;
    margin: 0;
    padding-right: 1rem;
    list-style: none
}

.invoice-footer.list ul {
    background: none
}

.invoice-footer ul li {
    padding: 1px 0;
    width: 100%;
    height: 21px
}

.invoice-footer:first-child ul li, .invoice-footer.list ul li {
    text-align: right
}

.invoice-footer ul li:last-child {
    background: transparent !important
}

.invoice-footer ul li p {
    display: inline-block;
    margin: 0;
    padding: 0;
    font-size: .775rem;
    font-weight: 300
}

.invoice-footer:first-child ul li p:first-child, .invoice-footer.list ul li p:first-child {
    font-weight: 700;
    text-align: left;
    float: left
}

.invoice-footer h1 {
    text-align: right;
    font-size: 1.5rem;
    margin: 0;
    padding: 0 1rem;
    line-height: 1;
    font-weight: 600
}

.invoice-footer h1 sub {
    font-size: 1.4rem;
    font-weight: 300;
    bottom: 0;
    vertical-align: middle
}

.invoice-footer h2 {
    font-size: .85rem;
    font-weight: 300;
    text-align: right;
    padding: 0 1rem;
    margin: 0
}

.invoice-footer h3 {
    font-size: 2.5rem;
    padding: 0;
    text-align: right;
    line-height: 1;
    font-weight: 400
}

.invoice-footer h5 {
    margin: 0;
    padding: 0 1rem
}

.invoice-footer.prices {
    overflow: hidden
}

.invoice-footer ul i.ion-chevron-down {
    position: absolute;
    left: calc(50% - 12px);
    bottom: -5px;
    background: #fff;
    width: 22px;
    height: 22px;
    padding-top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 10px 1px #0000001f;
    font-size: 12px;
    transition: ease .3s
}

.invoice-footer ul:hover i.ion-chevron-down {
    opacity: 0
}

h3.popover-title {
    padding: 1rem
}

input#text.small-input {
    width: 100%;
    color: #263038;
    cursor: pointer;
    border: 1px solid #dee2ea;
    border-radius: .25rem;
    height: 30px
}

.invoice-border-bottom {
    background: linear-gradient(0, #dee2ea, #dee2ea 51%, transparent 50%) bottom right / 100% 1px no-repeat
}

.invoice-border-bottom div {
    background: linear-gradient(-90deg, #dee2ea, #dee2ea 51%, transparent 50%) bottom left / 1px 100% no-repeat;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-content: center;
    padding-top: 1rem
}

.invoice-border-bottom div label {
    color: #4e5d6c
}

.invoice-border-bottom div p {
    margin: 0
}

.invoice-edit-btn {
    width: 100%;
    height: 3.75rem;
    background-image: url(../SVG/circle-edit.svg);
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent
}

.invoice-stock-btn {
    width: 100%;
    height: 3.75rem;
    background-size: 30px 30px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    transform: rotate(0deg)
}

.invoice-modal-header {
    border-bottom: 1px solid #dee2ea;
    background-color: #f4f6f8;
    padding: 1.5rem 0
}

.dropdown-invoice-pay {
    top: 100% !important
}

div.btn-group.dropup {
    vertical-align: middle
}

.pagination-dropup {
    width: 94px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8f9db9;
    text-decoration: none;
    padding: 0;
    margin-right: 2px;
    border: 1px solid #dee2ea;
    border-radius: .25rem;
    transition: border-color .2s ease-out;
    background: none
}

.pagination-dropup:hover, .pagination-dropup:focus {
    color: #0087ff;
    border: 1px solid #0087ff
}

.dropdown-toggle-footer {
    width: 36px !important
}

.bottom-inner {
    padding-left: 10px;
    padding-right: 16px;
    padding-top: 8px
}

.bottom-inner ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex
}

.bottom-inner ul li {
    display: inline-block;
    margin: 0;
    padding: 0
}

.bottom-inner-pagination {
    position: relative;
    margin: 0 5px;
    float: right;
    height: 40px;
    display: flex;
    align-items: center
}

.bottom-inner-pagination ol {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 28px
}

.bottom-inner-pagination ol .btn-group {
    display: inline-block;
    padding-right: 2px;
    float: left
}

.bottom-inner-pagination ol li {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0 2px;
    font-size: .825rem;
    text-align: center
}

.bottom-inner-pagination ol li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    color: #8f9db9;
    font-size: 13px;
    text-decoration: none;
    padding: 0 2px;
    border: 1px solid #dee2ea;
    border-radius: .25rem;
    transition: border-color .2s ease-out
}

.bottom-inner-pagination ol li a:hover {
    border-color: #0087FF;
    border-radius: .25rem;
    color: #0087FF
}

.bottom-inner-pagination ol .current a {
    border-color: #0087FF;
    border-radius: .25rem;
    color: #0087FF
}

.bottom-inner-pagination ol li.current input {
    background: #fdfdfd;
    border: 1px solid #dee2ea;
    border-radius: .25rem;
    color: #8f9db9;
    font-size: .825rem;
    padding: 0 .2rem;
    font-weight: 600;
    width: 30px;
    height: 28px;
    text-align: center
}

.bottom-inner-pagination ol li a.disabled {
    color: #dee2ea;
    opacity: 1;
    cursor: pointer;
    border: none
}

.bottom-inner-pagination .pagination-box {
    bottom: 28px;
    top: auto !important;
    min-width: auto;
    right: auto;
    transform: none !important
}

.button-loading {
    position: relative;
    display: inline-flex;
    align-items: center;
    transition: all .5s
}

.button-loading:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 8px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid #fff;
    border-right: 2px solid transparent;
    -webkit-animation: rotating .5s linear infinite;
    animation: rotating .5s linear infinite
}

a.button-loading {
    color: transparent !important;
    min-width: 44px;
    justify-content: center
}

a.button-loading:before {
    left: 50%;
    margin-left: -8px
}

a.wt-gonder-success,
a.wt-gonder-error {
    color: transparent !important
}

button.wt-gonder-success,
button.wt-gonder-error {
    transition: background-color .3s, border-color .3s;
    padding-left: 2rem !important
}

button.wt-gonder-success {
    background-color: #34bfa3 !important;
    border-color: #34bfa3 !important
}

button.wt-gonder-error {
    background-color: #f4516c !important;
    border-color: #f4516c !important
}

button.wt-gonder-success:before,
button.wt-gonder-error:before {
    left: 16px;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #fff
}

@keyframes rotating {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes wt-gonder-check-draw {
    from {
        transform: translate(-50%, -50%) scale(0.4) rotate(-15deg);
        opacity: 0
    }
    to {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1
    }
}

@keyframes wt-loader-circle {
    from { stroke-dashoffset: 333; }
    to   { stroke-dashoffset: 0; }
}
@keyframes wt-loader-check {
    from { stroke-dashoffset: 77; }
    to   { stroke-dashoffset: 0; }
}

@keyframes wt-label-icon-draw {
    from {
        transform: scale(0.4) rotate(-15deg);
        opacity: 0
    }
    to {
        transform: scale(1) rotate(0deg);
        opacity: 1
    }
}

.wt-gonder-success,
.wt-gonder-error {
    position: relative;
    pointer-events: none
}

.wt-gonder-success:before {
    content: '✓';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    font-size: 13px;
    font-weight: bold;
    color: #28a745;
    animation: wt-gonder-check-draw 0.3s ease forwards
}

.wt-gonder-error:before {
    content: '✕';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    font-size: 13px;
    font-weight: bold;
    color: #dc3545;
    animation: wt-gonder-check-draw 0.3s ease forwards
}

.label.label-gonder-success,
.label.label-gonder-error {
    position: relative;
    display: inline-flex;
    align-items: center;
    pointer-events: none;
    transition: background-color .3s
}

.label.label-outline.label-gonder-success {
    background-color: #34bfa3 !important;
    border-color: transparent !important;
    color: #fff !important
}

.label.label-outline.label-gonder-error {
    background-color: #f4516c !important;
    border-color: transparent !important;
    color: #fff !important
}

.label.label-gonder-success:after {
    content: '✓';
    margin-left: 4px;
    font-weight: bold;
    color: #fff;
    animation: wt-label-icon-draw 0.3s ease forwards
}

.label.label-gonder-error:after {
    content: '✕';
    margin-left: 4px;
    font-weight: bold;
    color: #fff;
    animation: wt-label-icon-draw 0.3s ease forwards
}

.label.label-outline:hover.label-gonder-success {
    background: #2ca98f !important
}

.label.label-outline:hover.label-gonder-error {
    background: #d93a58 !important
}


.footer-btn-group {
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: flex-end;
    padding: 0 14px;
    align-self: center;
    align-items: center;
    height: 50px
}

.footer-btn-group div {
    justify-content: flex-end
}

.bottom-inner-btn {
    margin-right: 5px
}

.bottom-inner-btn button {
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    width: 34px;
    line-height: 0;
    height: 36px;
    border: 1px solid #dee2ea;
    border-radius: .25rem;
    background: none;
    font-size: 1.5rem;
    color: #686e87;
    outline: none;
    margin: 0 1px;
    position: relative
}

.bottom-inner-btn button.list-expand {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.bottom-inner-btn button:hover, .bottom-inner-btn button:active {
    color: #0087ff;
    border: 1px solid #0087ff;
    background: none;
    cursor: pointer
}

.bottom-inner-btn button .ion-android-desktop span {
    position: absolute;
    top: 14px;
    left: 12px;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    color: #0087ff;
}

.wt-form-button {
    height: 36px;
    line-height: 0;
    border: none;
    border-left: 1px solid #dee2ea;
    background: none;
    font-family: 'ion';
    font-size: 1.15rem;
    color: #8f9db9;
    outline: none;
    margin: 0;
    padding: 0 1rem;
    position: absolute;
    bottom: 14px;
    right: 14px;
    cursor: pointer;
    border-radius: 0 .25rem .25rem 0
}

button.x-btn {
    border: none;
    padding: 0 1.2rem;
    color: #FFF;
    line-height: 0;
    font-size: .8rem;
    border-radius: .25rem;
    height: 36px;
    font-weight: 600;
    margin-left: 10px;
    transition: all .5s
}

button.button-loading {
    padding-right: 1.5rem;
    padding-left: 2rem
}

@media (max-width: 767px) {
    .wt-form-button {
        bottom: 0
    }

    button.x-btn {
        margin-left: 5px
    }

    .btn-xs button.x-btn {
        padding: 0 .8rem;
        font-size: .7rem
    }

    button.button-loading {
        padding-right: 1rem;
        padding-left: 1.8rem
    }
}

button.x-btn:hover {
    cursor: pointer
}

button.ca-mobile-btn {
    padding: 0 1rem
}

button.fason-btn {
    border: none;
    padding: 0 1.75rem;
    color: #FFF;
    font-size: .8rem;
    margin: 0;
    border-radius: .25rem;
    height: 36px;
    font-weight: 400;
    cursor: pointer;
    margin-top: 3px;
    line-height: 12px
}

.ca-footer-btn {
    background: #0087FF;
    box-shadow: 0 1px 2px 0 #0000001a
}

.ca-cancel-btn {
    background: #263438;
    color: #fff
}

.ca-info-btn {
    background: #49afff;
    color: #fff
}

.ca-delete-btn {
    background: #ff4d3b;
    color: #fff
}

.ca-pay-btn {
    background: #2b3dff;
    color: #fff
}

.ca-pay2-btn {
    background: #fc566a;
    color: #fff
}

.ca-select-btn {
    border: 1px solid #dee2ea !important;
    border-radius: .25rem !important;
    box-shadow: inset 0 1px 1px #96c8fe13;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !important;
    appearance: none !important;
    background: url(../../../public/svg/custom-select.svg) no-repeat center right 10px;
    height: 34px !important;
    background-color: #fff !important;
    background-size: 10px 12px !important;
    vertical-align: middle;
    padding: 0 2rem 0 .6rem !important;
    font-size: .875rem !important;
    color: #686e87 !important;
    width: 115px !important;
    font-weight: 400 !important;
    margin-left: 14px !important;
    margin-top: 5px !important
}

@media (max-width: 992px) {
    .ca-select-btn {
        margin-left: 7px !important;
        margin-right: 7px !important;
        width: 90px !important
    }
}

.ca-footer-btn:active, .ca-cancel-btn:active, .ca-delete-btn:active, .ca-pay-btn:active {
    opacity: .8;
    -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
    -moz-animation: neon2 1.5s ease-in-out infinite alternate;
    -ms-animation: neon2 1.5s ease-in-out infinite alternate;
    -o-animation: neon2 1.5s ease-in-out infinite alternate;
    animation: neon2 1.5s ease-in-out infinite alternate;
    -webkit-box-shadow: inset 0 0 1px -1px #ffff;
    -moz-box-shadow: inset 0 0 1px -1px #ffff;
    -ms-box-shadow: inset 0 0 1px -1px #ffff;
    -o-box-shadow: inset 0 0 1px -1px #ffff;
    box-shadow: inset 0 0 1px -1px #ffff
}

.ca-footer-btn:hover {
    background: #1578cd
}

.ca-cancel-btn:hover {
    background: #4d636a
}

.ca-info-btn:hover {
    background: #448ec9
}

.ca-delete-btn:hover {
    background: #e63c1b
}

.ca-pay-btn:hover {
    background: #5e6cff
}

.ca-pay2-btn:hover {
    background: #FE848B
}

.multi-screen-tab {
    position: absolute;
    width: 26.6%;
    z-index: 999;
    bottom: 0;
    list-style: none;
    display: table;
    table-layout: fixed;
    transition: .3s ease all
}

.multi-screen-tab .select-triangle {
    position: absolute;
    line-height: 0;
    display: inline-block;
    overflow: hidden;
    height: 16px;
    width: 60px;
    position: relative;
    left: 50%;
    margin-left: -30px;
    position: absolute;
    bottom: 100%;
    z-index: 1;
    display: inline-block;
    color: #fff
}

.multi-screen-tab .select-triangle:before {
    position: relative;
    top: 100%;
    margin-top: 13px;
    font-size: 60px
}

.bottom-tab {
    border-right: 1px solid #e8ebf0;
    height: 50px;
    position: relative;
    display: table-cell;
    padding: 6px .5rem;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #fff
}

.bottom-tab.button-loading:before {
    border: 2px solid #5d78ff;
    border-right: 2px solid transparent;
    left: 10%
}

.bottom-tab.button-loading h1 {
    padding-left: 18px
}

.bottom-tab h1 {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
    text-align: center;
    transition: all .5s
}

.bottom-tab h1:before {
    margin-left: 0 !important;
    margin-right: 0 !important;
    vertical-align: middle
}

.bottom-tab:hover {
    background: #eff0f5
}

.bottom-tab-btn {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #4e5d6c;
    cursor: pointer;
    width: 100%
}

.bottom-tab-close {
    display: none;
    position: absolute;
    z-index: 99999;
    top: 5px;
    justify-content: center;
    right: 7px;
    line-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 1px solid #dee2ea;
    width: 18px;
    height: 18px;
    border-radius: .18rem;
    cursor: pointer;
    color: #4e5d6c
}

.bottom-tab-close i {
    line-height: 0 !important
}

.bottom-tab:hover .bottom-tab-screen, .bottom-tab:hover .bottom-tab-close {
    display: flex
}

.bottom-tab:hover .bottom-tab-close:hover {
    background: #ebedee;
    box-shadow: 0 0 50px 0 #dee2ea
}

.bottom-tab-selected {
    background: #e8ebf1;
    z-index: 1
}

.clist-content {
    border-bottom: .07rem solid #dee2ea;
    background: #f4f6f8;
    width: 100%;
    display: block;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis
}

.secili .clist-content {
    background: #fbfbfb !important;
    border-bottom: .07rem solid #eceef3 !important
}

.clist-content:last-child {
    border: none
}

.clist-content2:hover {
    background-color: #e5f4ff;
    cursor: pointer
}

.clist-content.active, .clist-content#currentStock, .clist-content#currentBankAccount {
    background: #e2e7ec
}

.clist-content-2 {
    padding: 12px;
    width: 100%;
    height: 50px
}

.clist-content-2 h1 {
    font-size: .825rem;
    margin: 0;
    padding: 0;
    text-transform: capitalize;
    font-weight: 400;
    color: #263038;
    line-height: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.clist-content-2 h2 {
    margin: 0;
    padding: 0;
    margin-right: 10px;
    padding-right: 10px;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.75;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #7F828B
}

.card .clist-content {
    position: relative;
    padding: 8px 10px;
    width: 100%;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.card .clist-content:last-child {
    border-bottom: none
}

.clist-content:hover {
    background-color: #e5f4ff;
    cursor: pointer
}

.clist-content ul {
    list-style: none;
    padding: 0 5px;
    margin: 0
}

.clist-content ul li {
    display: inline-block;
    vertical-align: middle;
    width: 100%
}

.clist-content .shape-avatar, .tab-inner-profile .shape-avatar {
    width: 30px;
    height: 30px
}

.clist-content.bank-avatar ul li .shape-avatar {
    width: 93px;
    height: 34px;
    float: left
}

.clist-content.bank-avatar ul li .shape-avatar .letter-avatar {
    font-size: 10px
}

.clist-content ul li .btn-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0
}

.clist-content ul li span.account {
    margin-right: .7rem;
    float: left;
    font-size: 2.3rem;
    width: 30px;
    height: 30px;
    display: flex
}

.clist-content ul li:first-child {
    padding-right: 0;
    padding-left: 0;
    float: left
}

.clist-content h1 {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    font-size: .75rem;
    margin: 0;
    padding: 0;
    text-transform: capitalize;
    font-weight: 400;
    color: #263038;
    line-height: 1rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.clist-content h2 {
    display: grid;
    grid-template-columns:auto auto;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    font-size: .7rem;
    font-weight: 400;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #7F828B
}

.clist-content h3 {
    font-size: .825rem;
    margin: 0;
    padding: 0;
    text-transform: capitalize;
    font-weight: 600;
    color: #0087ff;
    line-height: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.clist-down-btn {
    background: none;
    border: none
}

.clist-down-btn:hover {
    cursor: pointer;
    color: #333
}

#bankAccountList .clist img {
    float: left;
    margin-right: .7rem;
    box-shadow: 0 0 9px 1px #0000000d
}

@media (max-width: 1210px) {
    .clist-content li h1 {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap
    }
}

div.clist-content.clist-case {
    border-radius: .25rem;
    background: #f4f6f8
}

div.clist-content.clist-case.active {
    background: linear-gradient(135deg, #fff6, #0087ff) #0087ff !important
}

div.clist-content.clist-case {
    order: 2
}

div.clist-content.clist-case.active, div.clist-content.clist-case.active + .card-collapse {
    order: 1
}

div.case-inner-profile {
    height: 5.75rem
}

div.case-inner-profile ul li {
    width: 23%
}

li.circle-button.case-date {
    margin-bottom: 1rem;
    text-align: left
}

.case-transfer h3, .case-transfer button {
    display: inline-flex
}

.case-transfer h3 {
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
    padding: 9px 1px 9px 0;
    font-weight: 600;
    color: #0087ff;
    height: 36px;
    border-radius: .25rem;
    width: 100%
}

.clist-case .caseinfo-g1 p {
    color: #788898;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase
}

.clist-case .caseinfo-g1 i {
    font-size: 1rem;
    color: #263038
}

.clist-case p.caseinfo {
    font-size: 1rem;
    font-weight: 500;
    color: #263038;
    text-transform: uppercase
}

.clist-case .caseinfo-g1 h5 {
    font-size: .8rem;
    font-weight: 500;
    text-transform: uppercase;
    padding-top: .5rem
}

.clist-case .caseinfo-g1 button {
    float: right;
    background: transparent;
    border: 0;
    padding: 3px 10px
}

.clist-case.active .caseinfo-g1 i, .clist-case.active p.caseinfo, .clist-case.active .caseinfo-g1 h5 {
    color: #fff
}

.clist-case.active .caseinfo-g1 p, .clist-case.active .cainfo-g1 h5 {
    color: #ffffffbf
}

.clist-case.active .cainfo-g1 h4 {
    color: #FFF !important;
    text-shadow: 0 1px 0 #005fff80
}

.case-open {
    border: 1px solid #0087ff;
    border-top: none;
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem;
    margin-top: -1px;
    background: #e5f4ff;
    padding-bottom: 1px
}

span.case-arrow-down {
    position: absolute;
    z-index: 1;
    right: 2rem;
    top: -10px;
    line-height: 0;
    font-size: 30px;
    color: #0087ff;
    width: 20px;
    height: 10px
}

.case-open .cainfo:last-child {
    border: 0
}

.cainfo {
    margin: 0;
    padding: 8px 14px;
    width: 100%;
    background: #fff
}

.cainfo-g1 h1 {
    font-size: 1.85rem;
    margin: 0;
    padding: 0;
    font-weight: 300;
    color: #263038
}

.cainfo-g1 h1 span {
    font-size: .8rem
}

.cainfo-g1 h2 {
    font-size: .85rem;
    line-height: .85rem;
    margin: 0;
    padding: 0;
    font-weight: 300;
    color: #263038
}

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

.case-xx i {
    font-size: 3.5rem;
    color: #bcc8d4
}

.bg-transfer-case {
    background-color: #f7fbff;
    border-radius: .25rem;
    border: 1px solid #dee2ea
}

.case-border {
    border-radius: .25rem
}

.case-title, .cainfo-g1 h3 {
    font-size: 1rem;
    margin: 0;
    padding: 0;
    font-weight: 300;
    color: #263038
}

.cainfo-g1 p {
    text-align: left;
    text-transform: uppercase;
    font-size: .75rem;
    line-height: .85rem;
}

.cainfo-g1 .stok {
    font-weight: 500
}

.cainfo-g1 .hstok {
    font-weight: 500
}

.cainfo-g1 .sipsat {
    color: #09C
}

.cainfo-g1 .sipal {
    color: #0C9
}

.cainfo-g1 h4 {
    font-size: 1rem;
    margin: 0;
    padding: 0;
    line-height: 1.5rem;
    color: #0087FF;
    font-weight: 500;
    width: auto;
}

.cainfo-g1 h4 span {
    font-size: 1rem
}

.cainfo-g1 h5 {
    margin: 0;
    line-height: 1.5rem;
    color: #788898;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: flex-end;
}

.minibar {
    display: flex;
    align-items: flex-end
}

.minibar-bar {
    position: relative;
    flex: 1;
    margin-left: 14px;
    background-color: #d5deed;
    cursor: pointer
}

.minibar-bar:hover .minibar-fill {
    background-color: #263038;
    cursor: pointer
}

.minibar-bar:hover .minibar-tooltip {
    opacity: 1;
    transform: translateY(-20px)
}

.minibar-tooltip {
    position: absolute;
    top: -20px;
    right: 0;
    width: 60px;
    margin-left: -10px;
    text-align: center;
    background-color: #666;
    color: #eee;
    font-size: 10px;
    font-family: monospace;
    line-height: 12px;
    padding: 4px;
    opacity: 0;
    transition: transform .3s;
    transform: translateY(0);
    pointer-events: none;
    z-index: 50
}

.minibar--mini {
    float: right;
    height: 68px;
    width: 140px
}

.minibar--mini .minibar-bar {
    max-width: 4px;
    height: 100%;
    border-radius: .25rem
}

.minibar-fill {
    position: absolute;
    background-color: #0087FF;
    min-height: 5px;
    left: 0;
    right: 0;
    width: 100%;
    bottom: 0;
    border-radius: .25rem
}

.cainfo-g2 h1 {
    font-size: 1rem !important;
    font-weight: 400 !important;
    padding: 0 0 6px !important;
    color: #263038 !important;
    margin: 0 !important
}

.cainfo-in ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: -webkit-flex;
    display: flex;
    padding-bottom: 22px
}

.cainfo-in:last-child ul {
    padding-bottom: 0
}

.cainfo-in ul li {
    margin: 0;
    padding: 0
}

.cainfo-in ul li:not(:last-child) {
    margin-right: 12px
}

.cainfo-in ul li.table-list {
    width: 100%
}

.cainfo-in ul li.hover-mask {
    position: relative;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -8px;
    cursor: pointer;
    transition: .5s ease all
}

.cainfo-in ul li.hover-mask .mask {
    visibility: hidden;
    position: absolute;
    font-size: 1.8rem
}

.cainfo-in ul li.hover-mask:hover {
    background: #fff;
    box-shadow: 0 1px 14px 1px #45414e26
}

.cainfo-in ul li.hover-mask:hover i:first-child {
    visibility: hidden
}

.cainfo-in ul li.hover-mask:hover .mask {
    visibility: visible
}

.cainfo-in i {
    font-size: 2.5rem;
    color: #5d78ff;
    line-height: 0;
    vertical-align: middle
}

.cainfo-in h1 {
    font-size: .875rem !important;
    color: #0087FF !important;
    font-weight: 300 !important;
    margin: 1px 0 !important
}

.cainfo-in h2 {
    font-size: 1rem;
    margin: 0;
    line-height: 1.25;
    font-weight: 400
}

.cainfo-in h3 {
    font-size: .75rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.2
}

.cainfo-in p {
    color: #70859b;
    margin: 0;
    line-height: 1.85;
    padding-top: .5rem;
    font-weight: 300;
    font-size: .8rem
}

.cainfo-in i {
    font-size: 2.5rem;
    color: #263038;
    line-height: 0;
    vertical-align: middle
}

.user-default {
    background-image: url(../SVG/cari.svg)
}

.stock-left-table {
    display: table;
    width: 100% !important;
    margin-top: 14px;
    background: linear-gradient(0, #dee2ea, #dee2ea 51%, transparent 50%) bottom right / 100% 1px no-repeat
}

.stock-left-table-item {
    border: 1px solid #dee2ea;
    border-left: none;
    border-bottom: none;
    display: table-cell;
    padding: 3px 10px
}

.stock-left-table-item:first-child {
    border-left: 1px solid #dee2ea
}

.stock-left-table-row {
    display: table-row
}

.stock-left-table-row .item {
    border: 1px solid #dee2ea;
    border-left: none;
    border-bottom: none;
    display: table-cell;
    padding: .5rem
}

.stock-left-table-row.bold .item {
    font-weight: 700
}

.stock-left-table-row .item:first-child {
    border-left: 1px solid #dee2ea
}

.stock-left-table-body {
    display: table-row-group
}

table.sales-list > tr.view td, table.sales-list > tr.view th {
    cursor: pointer
}

table.sales-list > tr.borclu {
    background-color: #fff
}

table.sales-list > tr.alacakli {
    background-color: #FFF
}

table.sales-list > tr.view td:first-child {
    position: relative;
    padding-left: 20px
}

.fixed-table > thead > tr th.fixed-edge label.checkbox {
    float: left;
    margin-left: 14px;
    margin-top: 0;
    height: 36px
}

.fixed-table > thead > tr th.fixed-edge label.checkbox .checkmark {
    top: 10px
}

table.sales-list > tr td.fixed-col label.checkbox {
    height: 36px
}

table.sales-list > tr td.fixed-col label.checkbox .checkmark {
    top: 10px
}

table.sales-list > tr.view.open td:first-child:before, table.sales-list > tr.view.open th:first-child:before {
    position: absolute;
    top: 53%;
    left: 7px;
    width: 9px;
    height: 16px;
    margin-top: -12px;
    font: 10px ionicons;
    color: #999;
    content: "\f123";
    transition: all .3s ease
}

table.sales-list > tr.view td:first-child:before, table.sales-list > tr.view th:first-child:before {
    position: absolute;
    top: 34%;
    left: 7px;
    width: 9px;
    height: 9px;
    font: 10px ionicons;
    color: #999;
    content: "\f123";
    transition: all .3s ease
}

table.sales-list > tr.view2 td input {
    height: 24px
}

table.sales-list > tr.view2:hover td input {
    color: #FFF
}

table.sales-list > tr.view2 td {
    height: 36px;
    font-size: .75rem;
    padding: 0 5px
}

.yellow-fix-btn {
    border: none;
    padding: 4px 10px 5px;
    color: #FFF;
    line-height: 1;
    font-size: .8rem;
    border-radius: 5px;
    font-weight: 300;
    font-family: 'Nunito', sans-serif;
    background: #263438
}

table.sales-list > tr.yellow-fix td {
    height: 2rem;
    font-size: .75rem;
    padding: 2px 1px;
    background: #FFF;
    border-bottom: 1px solid #FFF
}

table.sales-list > tr.bg-other td {
    background: #d9d9d9
}

.sales-list tbody tr.yellow-fix td input, .sales-list tbody tr.yellow-fix td select {
    background-color: #f4fafe;
    font-weight: 400;
    color: #7a869e;
    outline: 0;
    border: 1px solid #0087FF;
    padding: 3px 4px 3px 12px;
    border-radius: .25rem;
    margin: 0;
    width: 100%;
    font-size: .75rem;
    height: 36px
}

table.sales-list > tr.view.open td:first-child:before, table.sales-list > tr.view.open th:first-child:before {
    transform: rotate(-180deg)
}

table.sales-list > tr.fold {
    display: none
}

table.sales-list > tr.fold.open {
    display: table-row
}

.fold-content {
    padding: 0
}

.fold-content-inner {
    width: 100%;
    font-size: .75rem;
    padding-bottom: 20px
}

.fold-content-inner > div {
    width: 280px;
    padding: 10px 10px 10px 20px
}

.fold-content-inner div.w-100.d-flex {
    background-color: #cbd2e2 !important
}

.fold-content-inner p {
    margin: 0
}

table.sales-list > tr.view4 td .form-control {
    height: 30px;
    min-width: 50px
}

table.sales-list > tr.view4 td:first-child {
    text-align: center
}

table.sales-list > tr.view4 i {
    font-size: 22px;
    margin: auto;
    display: -webkit-box;
    width: 20px
}

table.sales-list > tr.view4 td {
    padding: 2px
}

table.sales-list.view5 {
    min-width: 480px
}

.working-hours tbody input[type=checkbox] {
    height: 20px !important
}

table.working-hours > tbody > tr.view2 td {
    text-align: center
}

table.working-hours > tbody > tr.view2 td:first-child {
    padding: 0
}

.sales-list tbody tr:hover td .wt-checkbox input {
    height: auto
}

.tab-inner-profile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    width: 100%;
    height: 60px;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem
}

.tab-inner-profile .row {
    width: 100%
}

.tab-inner-profile.sm {
    height: 2.75rem
}

.tab-inner-profile wt-tabs {
    align-self: flex-end;
    margin-bottom: 2px
}

.tab-inner-profile > ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    list-style: none;
    padding: 0;
    width: 100%;
    height: 60px
}

.tab-inner-profile ul li {
    display: inline-block
}

.tab-inner-profile ul li h1 {
    font-size: .9rem;
    color: #616161;
    margin: 0;
    padding: 0
}

.tab-inner-profile ul li h2 {
    font-size: .9rem;
    font-weight: 500;
    color: #53586d;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.tab-inner-profile ul li h3 {
    margin: 0;
    padding: 3px 0 0;
    font-size: .8rem;
    color: #97a8c3
}

.tab-inner-profile .scrtabs-tabs-movable-container ul {
    padding-top: 0
}

.tab-inner-profile .shape-avatar {
    display: flex;
    width: auto;
    background: transparent;
    cursor: pointer;
    overflow: visible
}

.tab-inner-profile .shape-avatar > label {
    padding: 0;
    cursor: pointer;
    background: #fff;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px 0 0 3px
}

.tab-inner-profile .shape-avatar label input {
    width: 0 !important;
    height: 0 !important;
    overflow: hidden;
    opacity: 0
}

.tab-inner-profile .shape-avatar label.disabled {
    cursor: not-allowed
}

.tab-inner-profile .shape-avatar img {
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px
}

.tab-inner-profile .shape-avatar label + button {
    width: 12px;
    height: 34px;
    border-radius: 0 3px 3px 0;
    border: none;
    background: #d9dfe4;
    font-size: 9px;
    padding: 0;
    cursor: pointer
}

.tab-inner-profile .shape-avatar label.empty:hover:after {
    content: "\f2bf";
    font-family: "Ionicons";
    font-style: normal;
    position: absolute;
    left: 7px;
    top: 7px;
    background: #fff;
    color: #0087ff;
    width: 20px;
    height: 20px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 13px 0 #ffffff1a;
    transition: all .3s
}

.tab-inner-top {
    vertical-align: middle
}

.circle-button {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    float: right
}

.circle-button button, .circle-button .img-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-color: transparent;
    background: transparent;
    color: #8b95bd;
    font-size: 1.1rem;
    line-height: 0;
    cursor: pointer;
    text-align: center;
    border-radius: .18rem;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.circle-button > button:not(:last-child), .circle-button > .btn-group:not(:last-child) {
    margin-right: .5rem
}

.circle-button button:hover, .circle-button.hover button, .circle-button .img-upload-btn:hover {
    color: #5d78ff;
    background: #e1e6fd
}

.circle-button.hover button:hover {
    opacity: .6
}

.circle-button button.active {
    background: #fdfdfd;
    border-radius: 50%;
    box-shadow: 0 0 15px 1px #45414e14
}

.circle-button select {
    float: right;
    height: 30px
}

.img-upload-btn input {
    width: 0 !important;
    height: 0 !important;
    overflow: hidden;
    opacity: 0
}

.clist-credit {
    color: #62c26f
}

.clist-loan {
    color: #fc566a
}

.scrtabs-tab-container {
    box-sizing: border-box;
    display: flex;
    height: 48px;
    align-items: flex-end;
    height: 48px
}

.scrtabs-tab-container .tab-content {
    clear: left
}

.scrtabs-tabs-fixed-container {
    float: left;
    height: 48px;
    overflow: hidden;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: row
}

.scrtabs-tabs-movable-container {
    position: relative;
    background: linear-gradient(0, #dee2ea, #dee2ea 51%, transparent 50%) bottom right / 100% 1px no-repeat
}

.scrtabs-tabs-movable-container .tab-content {
    display: none
}

.scrtabs-tab-scroll-arrow {
    border: 1px solid #ddd;
    border-top: none;
    color: #428bca;
    cursor: pointer;
    display: none;
    float: left;
    font-size: 12px;
    height: 48px;
    margin-bottom: -1px;
    padding-left: 6px;
    padding-top: 16px;
    width: 20px
}

.scrtabs-tab-scroll-arrow:hover {
    background-color: #e7ebef
}

.scrtabs-tab-scroll-arrow.scrtabs-disable {
    color: #ddd;
    cursor: default
}

.scrtabs-tabs-fixed-container ul.nav-tabs > li {
    white-space: nowrap
}

.tab-underline {
    width: 1px;
    height: 2px;
    left: 15px;
    bottom: 1px;
    position: absolute;
    background: #0087FF;
    transition: .5s ease
}

.special-button {
    margin-top: 1.2rem;
    background: none;
    border: none;
    border-left: 1px solid #e8e8e8;
    color: #263038;
    padding: 5px 12px;
    width: 100%;
    background: #d7d7d7;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px
}

.special-button i {
    font-size: 22px;
    line-height: 0
}

.modal-special {
    margin-top: 15px
}

.modal-special input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.modal-special button {
    width: 50%;
    float: left;
    background: #f7f7f7;
    border: 1px solid #dee2ea;
    padding: .5rem;
    border-left: none
}

.modal-special button:hover {
    background: #ddd
}

.modal-special button:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px
}

.new-special input {
    width: 75%;
    float: left;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.new-special button {
    width: 25%;
    float: right;
    background: #f7f7f7;
    border: 1px solid #dee2ea;
    padding: .5rem;
    border-left: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px
}

.new-special button:hover {
    background: #ddd
}

.dropdown-item i {
    width: 16px;
    display: inline-block;
    text-align: center;
    font-size: 18px;
    margin-right: 3px;
    position: relative;
    top: 1px
}

.dropdown-item .wt-checkbox {
    margin-bottom: 0 !important
}

.dropdown-menu .title {
    font-size: .875rem;
    line-height: 1.45;
    color: #263038;
    padding: 10px 0 0 22px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase
}

.dropdown-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem;
    width: 100%
}

.dropdown-menu ul ul {
    box-shadow: 0 0 50px 0 #523f6926
}

.dropdown-menu ul li {
    padding: 7px 8px;
    margin: 0;
    width: 100%;
    display: block;
    color: #686e87
}

@media (max-width: 768px) {
    .dropdown-menu ul li {
        padding: 9px 8px
    }
}

.dropdown-menu ul li:last-child {
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem
}

.dropdown-menu ul li a {
    color: #263038;
    line-height: 1;
    padding-left: 14px
}

.dropdown-menu ul li a.active, .dropdown-menu ul li a.active {
    color: #0087FF
}

.dropdown-menu ul li a.active:before, .dropdown-menu ul li a.active:before {
    content: "\f122";
    font-family: "Ionicons";
    display: inline-block;
    margin-left: -14px;
    margin-right: 4px;
    color: #0087FF
}

.dropdown-menu li:hover {
    background: #f7f8fa;
    cursor: pointer
}

.dropdown-menu ul li.dropdown-submenu:after {
    content: "\f3d3";
    font-family: 'Ionicons';
    font-size: .9rem;
    position: absolute;
    right: 10px
}

div.dropdown-menu.dropdown-menu-right.arrow:before, div.dropdown-menu.dropdown-menu-right.arrow:after {
    left: unset;
    right: 10px
}

@media (min-width: 767px) {
    div.dropdown-menu.after.arrow {
        left: 55px;
        top: 0
    }

    div.dropdown-menu.after.arrow:before, div.dropdown-menu.after.arrow:after {
        top: 17px;
        left: -10px;
        transform: rotate(-90deg);
        border-bottom-color: #fff
    }
}

li.dropdown-line, li.dropdown-line:hover {
    border-bottom: 1px solid #dee2ea;
    height: 20px;
    background: #FFF;
    cursor: none
}

.context-dropdown-menu {
    position: absolute !important;
    z-index: 999
}

.zorunlutext {
    color: #616161 !important;
    font-weight: 700;
    background-color: #fffca8e6 !important
}

.zorunlutext:disabled, .zorunlutext[readonly] {
    background-color: #fffca880;
    color: #616161
}

.input-loading {
    background-color: transparent !important;
    background-image: url(../ximages/spinner.gif) !important;
    background-size: 20px 20px !important;
    background-position: right 5px center !important;
    background-repeat: no-repeat !important;
    padding-right: 30px !important;
    transition: padding .5s
}

.input-loading .mat-select-arrow-wrapper {
    display: none
}

.gi-h {
    height: 52.8px
}

.fg-h {
    height: 66.8px
}

.group-input input, .group-input select, .group-input mat-select {
    float: left;
    width: calc(100% - 36px);
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.group-input.double-btn input, .group-input.double-btn select, .group-input.double-btn mat-select {
    width: calc(100% - 72px)
}

table tr td .group-input {
    display: flex
}

table tr td .group-input input {
    float: left;
    width: calc(100% - 30px);
    margin: 0;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

table tr td .group-input button {
    width: 30px;
    min-width: 30px;
    height: 30px;
    border-radius: 0 .25rem .25rem 0;
    background: #e1e6fd !important;
    color: #5d78ff !important
}

.group-input button:last-child {
    border-right: 1px solid #dee2ea !important;
    border-radius: 0 .25rem .25rem 0
}

.group-input button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    margin-bottom: 0;
    font-size: 18px;
    color: #5d78ff;
    text-align: center;
    background-color: #e1e6fd;
    border: 1px solid #dee2ea;
    border-right: 1px solid #c6ccd9cf
}

.group-input button:hover {
    background: #d3dafb;
    cursor: pointer;
    transition: .3s ease background-color
}

.group-input button.before {
    border-radius: .25rem 0 0 .25rem
}

.group-input button.before + input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.group-input-flex {
    display: flex
}

.group-input-flex input, .group-input-flex select, .group-input-flex mat-select {
    display: flex;
    flex: 1 1;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important
}

.group-input-flex > span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-width: 36px;
    padding: .5rem;
    margin-bottom: 0;
    font-size: .8rem;
    line-height: 22px;
    color: #767676;
    white-space: nowrap;
    background-color: #f4f5f8;
    border: 1px solid #dee2ea;
    border-left: 0;
    border-radius: 0 .25rem .25rem 0
}

.group-input-flex-start span {
    border: 1px solid #dee2ea;
    border-right: 0;
    border-radius: .25rem 0 0 .25rem
}

.group-input-flex-start input, .group-input-flex-start select, .group-input-flex-start mat-select {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important
}

.group-input .bank-img {
    background: #f4f6f8;
    border: 1px solid #dee2ea;
    border-right: none;
    border-top-left-radius: .18rem;
    border-bottom-left-radius: .18rem
}

.group-input .bank-img + input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.special-button {
    margin-top: 1.2rem;
    background: none;
    border: none;
    border-left: 1px solid #e8e8e8;
    color: #263038;
    padding: 5px 12px;
    width: 100%;
    background: #d7d7d7;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px
}

.special-button i {
    font-size: 22px;
    line-height: 0
}

.modal-special {
    margin-top: 15px
}

.modal-special input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.modal-special button {
    width: 50%;
    float: left;
    background: #f7f7f7;
    border: 1px solid #dee2ea;
    padding: .5rem;
    border-left: none
}

.modal-special button:hover {
    background: #ddd
}

.modal-special button:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px
}

.new-special input {
    width: 75%;
    float: left;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.new-special button {
    width: 25%;
    float: right;
    background: #f7f7f7;
    border: 1px solid #dee2ea;
    padding: .5rem;
    border-left: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px
}

.new-special button:hover {
    background: #ddd
}

.img-upload {
    border: 1px dashed #dee2ea;
    border-radius: .25rem;
    height: 200px
}

.img-upload i {
    font-size: 8rem;
    color: #dee2ea;
    text-align: center;
    margin: auto
}

.wt-checkbox-large {
    padding: 0
}

.wt-checkbox-large input {
    display: none
}

.wt-checkbox-large span {
    height: 36px;
    background-color: #FFF;
    border: 1px solid #dee2ea;
    border-radius: .18rem;
    font-weight: 400;
    color: #7a869e;
    font-size: .875rem;
    line-height: .875rem;
    text-decoration: none;
    text-align: left;
    width: 100%;
    padding: 0 28px 0 .5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0 auto;
    transition: background-color 150ms ease-in
}

.wt-checkbox-large span:hover {
    color: #0087ff;
    border: 1px solid #0087ff
}

.wt-checkbox-large input + span {
    background: url(../SVG/check-box-empty.svg) no-repeat right;
    background-size: 15px 15px;
    background-position: calc(100% - 10px) 50%
}

.wt-checkbox-large input:checked + span {
    background: #0087FF url(../SVG/check-box-full.svg) no-repeat right;
    background-size: 15px 15px;
    background-position: calc(100% - 10px) 50%;
    color: #fff
}

.wt-checkbox-large.circular span {
    border-radius: 20px
}

.wt-checkbox-large.circular input + span {
    background: url(../SVG/check-box-empty-circular.svg) no-repeat right;
    background-size: 15px 15px;
    background-position: calc(100% - 6px) 50%
}

.wt-checkbox-large.circular input:checked + span {
    background: #0087FF url(../SVG/check-box-full-circular.svg) no-repeat right;
    background-size: 15px 15px;
    background-position: calc(100% - 6px) 50%;
    color: #fff
}

.wt-checkbox-large input:disabled + span {
    cursor: not-allowed !important;
    opacity: .6
}

.aytunc-radio {
    position: relative;
    padding: 0;
    display: flex;
    align-items: center
}

.aytunc-radio input {
    position: absolute;
    right: 12px
}

.aytunc-radio span {
    border: 1px solid #dee2ea;
    border-radius: .18rem;
    font-weight: 400;
    color: #7a869e;
    font-size: .875rem;
    text-decoration: none;
    text-align: left;
    width: 100%;
    padding: 9px .5rem;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    transition: background-color 150ms ease-in;
    height: 36px
}

.aytunc-radio span:hover {
    color: #0087ff;
    border: 1px solid #0087ff
}

.modal-content, .popover {
    background-clip: padding-box
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    display: none;
    outline: 0
}

.modal-slide {
    background: linear-gradient(90deg, #dee2ea, #dee2ea 51%, transparent 50%) top right / 1px 100% no-repeat
}

.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -moz-transition: transform .3s ease-out, -moz-transform .3s ease-out;
    -ms-transition: transform .3s ease-out, -ms-transform .3s ease-out;
    -o-transition: transform .3s ease-out, -o-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    -moz-transition: transform .3s ease-out, -moz-transform .3s ease-out;
    -o-transition: transform .3s ease-out, -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out, -moz-transform .3s ease-out, -o-transform .3s ease-out, -ms-transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out, -moz-transform .3s ease-out, -o-transform .3s ease-out, -ms-transform .3s ease-out;
    -webkit-transform: translate(0, -25%);
    -moz-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    -o-transform: translate(0, -25%);
    transform: translate(0, -25%)
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0)
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px
}

.modal-content {
    display: flex;
    flex-direction: column;
    animation: fadeIn .3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    max-height: 85vh;
    position: relative;
    background-color: #FFF;
    border: 0;
    overflow: hidden;
    border-radius: .27rem;
    outline: 0;
    -webkit-box-shadow: 0 0 15px 1px #45414e33;
    box-shadow: 0 0 15px 1px #45414e33
}

.modal-content .modal-footer .x-btn, .modal-content .modal-footer .btn {
    height: 32px;
    margin-left: .5rem;
    line-height: 1
}

.mat-dialog-container button.x-btn {
    height: 32px
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background-color: #000
}

.modal-backdrop.fade {
    opacity: 0
}

.modal-backdrop.in {
    opacity: .5
}

.modal-header {
    flex: 0 0 auto;
    list-style: none;
    margin: 0;
    border-bottom: 1px solid #e9ecef;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #f4f6f8;
    z-index: 1
}

.modal-header div {
    align-items: center;
    display: flex
}

.modal-header .close {
    order: 2;
    width: 20px;
    margin-right: 10px;
    position: absolute;
    right: 0;
    top: 13px;
    font-weight: 400;
    font-size: 1.6rem;
    font-family: Arial
}

.modal-center {
    flex: 1 1 auto;
    position: relative;
    height: auto !important;
    overflow: auto;
    max-height: 100vh;
    max-width: 100vw
}

.modal-center .image-close {
    position: absolute;
    right: 5px;
    top: 5px;
    background: #2929296b;
    color: #fff;
    border-radius: 3px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    font-size: 20px;
    cursor: pointer;
    transition: .3s ease
}

.modal-center .image-close:hover {
    background: #292929b3
}

.modal-close {
    position: absolute;
    right: 0;
    justify-content: flex-end
}

.modal-title {
    font-size: 1.1rem;
    text-transform: capitalize;
    margin: 0 auto;
    color: #263038;
    font-weight: 500;
    text-align: center;
    align-self: center;
    padding: 0 35px 0 25px
}

.modal-title.button-loading {
    padding-left: 30px
}

.modal-title.button-loading:before {
    border: 2px solid #0087ff;
    border-right: 2px solid transparent
}

.modal-body {
    position: relative;
    padding: 15px
}

.modal-footer {
    flex: 0 0 auto;
    padding: 12px;
    text-align: right;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: 1px solid #e9ecef
}

.modal-footer .left-form label {
    width: 100%;
    text-align: left;
    margin-top: -8px
}

.popover, .tooltip {
    display: block;
    position: absolute
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

.modal-box-bg {
    background-color: #ffff;
    border-radius: .25rem;
    -webkit-box-shadow: -1px 1px 8px -1px #cbd3e1ff;
    -moz-box-shadow: -1px 1px 8px -1px #3E444E;
    box-shadow: -1px 1px 8px -1px #cbd3e1ff
}

@media (min-width: 530px) {
    .modal-dialog {
        max-width: 600px;
        margin: 1.75rem auto
    }

    .modal-sm {
        max-width: 400px
    }

    .modal-xs {
        max-width: 300px
    }
}

@media (min-width: 992px) {
    .modal-lg {
        max-width: 980px
    }
}

.modal-mh-300px {
    max-height: 300px;
    overflow-y: auto
}

.group-list-header {
    flex: 0 0 auto;
    display: flex;
    background-color: #f4f6f8;
    padding: 5px 0
}

.group-list-header-button {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin: 0 7px
}

.group-list-header-button button {
    border: none;
    font-size: .87rem;
    text-align: center;
    height: 36px;
    width: 36px;
    padding: 0;
    border-radius: 3px
}

.group-list-header-button button:hover {
    background: #0087ff;
    cursor: pointer;
    color: #fff
}

.group-list-header-button:first-child button {
    color: #444;
    border: 1px solid #dee2ea;
    background: transparent
}

.group-list-header-button:first-child button:hover {
    border-color: #0087ff
}

.group-list-header-search {
    display: flex;
    position: relative;
    width: 100%;
    border: none;
    border-radius: 3px
}

.group-list-header-search input {
    padding: 0 10px;
    background: #fff;
    border-radius: 3px 0 0 3px
}

.group-list-header-search button {
    color: #444;
    border: 1px solid #dee2ea;
    background: transparent;
    font-size: 1.2rem;
    line-height: 0;
    text-align: center;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 0 3px 3px 0;
    border-left: 0;
    cursor: pointer
}

.group-list-header-search button:hover {
    background: #ebecf2
}

.tc-table tr td input, .tc-table tr td select {
    color: #263038;
    cursor: pointer;
    border: 1px solid #dee2ea;
    border-radius: .25rem;
    vertical-align: middle
}

.tc-table tr th.fixed-edge {
    width: 80px
}

.tc-table tr:nth-child(2) td, .tc-table tr td.hasbutton {
    padding-right: 38px;
    overflow: visible
}

.tc-table tr td.has2button {
    padding-right: 69px
}

.tc-table tr td.has3button {
    padding-right: 100px
}

.tc-table tr td.p-0 {
    padding: 0 8px !important
}

.tc-table tr td button.btn-primary {
    color: #fff;
    background: #0087FF;
    border-color: transparent;
    display: inline-block;
    line-height: 1.25;
    text-align: center;
    vertical-align: middle;
    padding: .25rem .5rem;
    font-size: .75rem;
    border-radius: .21rem;
    height: 30px
}

.tc-table tr .fixed-col {
    min-width: 70px
}

.tc-table tr td input[type="text"], .tc-table tr td select {
    min-width: 80px
}

.tc-table tr td button.tc-btn {
    border: 1px solid #dee2ea;
    border-radius: .25rem;
    height: 30px;
    width: 30px;
    margin-left: 1px;
    vertical-align: middle;
    background: #d3dafb;
    color: #5d78ff;
    cursor: pointer;
    transition: .3s ease background-color
}

.tc-table tr td input.max-w-100, .tc-table tr td select.max-w-100 {
    max-width: 95px
}

.tc-table.view2 tr td {
    padding-right: 2.7rem
}

.pay-tab-menu-container {
    overflow: visible;
    min-height: 130px
}

@media (max-width: 767px) {
    .pay-tab-menu-container.empty {
        height: auto;
        min-height: auto
    }
}

div.pay-tab-menu {
    display: flex;
    flex-direction: column;
    background-color: #FFF;
    position: relative;
    padding: 0;
    overflow-y: visible !important;
    height: 100%;
    border-radius: .25rem
}

div.pay-tab-menu div.list-group {
    flex: 1 1 auto;
    margin-bottom: 0;
    overflow-y: auto
}

div.pay-tab-menu div.list-group > a {
    background: #eef3f9;
    margin: 12px;
    -webkit-border-radius: .18rem;
    -moz-border-radius: .18rem;
    border-radius: .18rem
}

div.pay-tab-menu div.list-group > .item {
    position: relative;
    display: flex;
    align-items: center;
    background: #eef3f9;
    margin: 12px;
    -webkit-border-radius: .18rem;
    -moz-border-radius: .18rem;
    border-radius: .18rem;
    cursor: pointer
}

div.pay-tab-menu div.list-group > a.active, div.pay-tab-menu div.list-group > .item.active {
    border: none;
    color: #263038;
    background-color: #e1e6fd
}

div.pay-tab-menu div.list-group > a:hover, div.pay-tab-menu div.list-group > .item:hover {
    background-color: #e1e6fda6;
    color: #4e5d6c
}

div.pay-tab-menu div.list-group > .item .btn-icon {
    width: 30px;
    height: 30px;
    background-color: transparent
}

div.pay-tab-menu div.list-group > .item .btn-icon:hover {
    background: #d3dafb
}

div.pay-tab-menu div.list-group > .item .info-box {
    position: absolute;
    top: -9px;
    left: 0;
    right: 0;
    margin: auto;
    width: max-content;
    padding: 0 6px;
    line-height: 18px;
    border-radius: 3px;
    text-align: center;
    font-size: 12px;
    z-index: 1
}

div.pay-tab-menu div.list-group > .item.canceled {
    border: 1px solid #f4516c
}

div.pay-tab-menu div.list-group > .item.canceled .info-box {
    background: #f4516c;
    color: #fff
}

div.pay-tab-menu div.list-group > .item.integrated {
    border: 1px solid #36a3f7
}

div.pay-tab-menu div.list-group > .item.integrated .info-box {
    background: #36a3f7;
    color: #fff
}

div.pay-tab-menu div.list-group .item .list-group-item {
    max-width: calc(100% - 38px);
    padding-right: 6px
}

@media (max-width: 767px) {
    div.pay-tab-menu-container {
        overflow: visible
    }

    div.pay-tab-menu-container .list-group {
        overflow: auto;
        max-height: 35vh
    }
}

.pay-tab-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
    padding: 12px 1rem;
    width: 100%;
    height: 3.75rem;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    background: #f4f6f8;
    border-bottom: 1px solid #dee2ea
}

.pay-tab-select h1 {
    font-size: .825rem;
    margin: 0;
    padding: 0;
    text-transform: capitalize;
    color: #263038;
    line-height: 1;
    text-overflow: ellipsis;
    overflow: hidden
}

.pay-tab-select h2 {
    margin: 0;
    padding: 0;
    margin-right: 10px;
    padding-right: 10px;
    font-size: .8rem;
    line-height: 1.75;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #7F828B
}

.list-group-item span {
    font-size: .8rem
}

.login-left {
    min-height: 100vh;
    overflow: hidden
}

.login-right {
    background: #FFF;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

@media (max-width: 767px) {
    .login-right {
        width: 100%
    }
}

.lr-center {
    padding: 20px;
    max-width: 500px
}

.login-h1 {
    font-size: 1rem;
    font-weight: 300;
    color: #263038;
    padding: 0;
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%
}

.login-right h2 {
    font-size: .9rem;
    font-weight: 300;
    color: #263038;
    padding: 0;
    margin: 0
}

.login-button {
    display: inline-block;
    background-image: linear-gradient(to top, #0300BF 0%, #3F9CFF 100%);
    color: #FFF;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 2rem;
    -webkit-transition: all .3s;
    transition: all .3s;
    text-align: center;
    width: 100%;
    box-shadow: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    height: 46px
}

.login-button:hover, .login-button:active {
    background-image: linear-gradient(to top, #0087ff 0%, #4481eb 100%)
}

.login-pic-box {
    -webkit-transform: translate(-50%, 25%);
    transform: translate(-50%, 25%);
    position: absolute;
    top: 50%;
    left: 40%
}

.login-bg-2, .login-bg-1 {
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding-right: 3rem;
    font-family: 'Nunito', sans-serif
}

.login-select, .login-input {
    height: 50px;
    border-radius: 2rem;
    width: 100%;
    border: 1px solid #dee2ea;
    outline: 0;
    padding: 0 20px;
    font-size: 1rem;
    font-weight: 400
}

.login-input:-webkit-autofill {
    background: #FFF
}

.login-select:hover, .login-input:hover, .login-input:focus {
    border: 1px solid #0087ff;
    color: #0087ff;
    animation: none
}

.login-button.loading {
    border-radius: 50px;
    width: 50px;
    font-size: 0
}

.login-right .spinner-btn {
    display: block;
    width: 36px;
    height: 36px;
    position: absolute;
    top: 8px;
    margin: 0 auto;
    left: 0;
    right: 0;
    background: transparent;
    box-sizing: border-box;
    border-top: 4px solid #fff;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-radius: 100%;
    animation-delay: .5s;
    animation: spin .6s ease-out infinite;
    transition: all ease .5s
}

@keyframes spin {
    100% {
        transform: rotate(360deg)
    }
}

.login-local {
    -webkit-box-shadow: 0 0 41px 6px #00000026;
    -moz-box-shadow: 0 0 41px 6px #00000026;
    box-shadow: 0 0 41px 6px #00000026
}

.login-local-left {
    background-image: linear-gradient(to top, #0300BF 0%, #3F9CFF 100%);
    height: 82vh;
    color: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Nunito', sans-serif
}

.login-local-left h1 {
    font-size: 2rem;
    font-weight: 300;
    padding: 3rem 0 0;
    margin: 0
}

.login-local-left p {
    font-family: 'Nunito', sans-serif
}

.login-local-left ul li {
    width: 33.33333%;
    text-align: center
}

.login-local-left ul li button {
    width: 50px;
    height: 50px;
    background: transparent;
    border: none;
    border-radius: 25%;
    -webkit-box-shadow: 0 0 21px 3px #00000026;
    -moz-box-shadow: 0 0 21px 3px #00000026;
    box-shadow: 0 0 21px 3px #00000026
}

.login-local-left ul li p {
    margin-top: .5rem
}

.switch {
    margin-bottom: 0;
    margin-top: -2px !important
}

.switch input[type="checkbox"] {
    display: none
}

.switch label {
    display: block;
    line-height: 0;
    padding-left: 50px;
    position: relative
}

.switch label::before {
    background-image: linear-gradient(to top, #0087ff 0%, #4481eb 100%);
    border-radius: 10px;
    content: '';
    display: inline-block;
    position: absolute;
    transition: all .25s ease;
    left: -1px;
    width: 40px;
    height: 20px
}

.switch label::after {
    background-color: #fff;
    border-radius: 50%;
    content: '';
    display: inline-block;
    position: absolute;
    transition: all .25s ease;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px
}

.switch input[type="checkbox"]:checked + label::after {
    left: 20px
}

.switch-primary input[type="checkbox"]:checked + label::before {
    background-image: linear-gradient(to top, #0300BF 0%, #3F9CFF 100%)
}

.wt-switch {
    width: 40px;
    height: 20px
}

.wt-switch input[type="checkbox"] {
    display: none
}

.wt-switch label {
    display: block;
    line-height: 0;
    position: relative;
    height: 20px;
    width: 40px
}

.wt-switch label::before {
    background-color: #919FAF;
    border-radius: 10px;
    display: inline-block;
    position: absolute;
    transition: all .25s ease;
    left: -1px;
    width: 40px;
    height: 20px;
    top: 0;
    line-height: 2;
    font-family: "Ionicons";
    content: "";
    letter-spacing: 8px;
    text-indent: .5rem;
    color: #fff;
    font-size: 10px;
    cursor: pointer
}

.wt-switch label::after {
    background-color: #fff;
    border-radius: 50%;
    content: '';
    display: inline-block;
    position: absolute;
    transition: all .25s ease;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    cursor: pointer
}

.wt-switch input[type="checkbox"]:checked + label::after {
    left: 20px
}

.wt-switch input[type="checkbox"]:checked + label::before {
    background: #0087ff;
    top: 0;
    line-height: 2;
    font-family: "Ionicons";
    content: "";
    letter-spacing: 8px;
    text-indent: .5rem;
    color: #fff
}

.wt-switch.accounting label::before, .wt-switch.condition label::before, .wt-switch.attr label::before {
    content: "" !important
}

.wt-switch input[type="checkbox"]:disabled + label {
    opacity: .6;
    cursor: not-allowed
}

.wt-switch input[type="checkbox"]:disabled + label:before, .wt-switch input[type="checkbox"]:disabled + label:after {
    cursor: not-allowed
}

.wt-switch.accounting label::after {
    content: 'M';
    font-family: montserrat;
    font-size: 10px;
    line-height: 18px;
    text-align: center
}

.wt-switch.condition label::after {
    content: 'K';
    font-family: montserrat;
    font-size: 10px;
    line-height: 18px;
    text-align: center
}

.wt-switch.attr label::after {
    content: attr(switchletter);
    font-family: montserrat;
    font-size: 10px;
    line-height: 18px;
    text-align: center
}

.wt-switch.vat-included {
    width: 60px;
    margin-top: 8px
}

.wt-switch.vat-included label {
    width: 60px
}

.wt-switch.vat-included label::before {
    width: 60px;
    text-indent: 1.5rem;
    content: attr(data-passive-content);
    font-family: Nunito;
    font-weight: 500;
    letter-spacing: normal
}

.wt-switch.vat-included input[type="checkbox"]:checked + label::before {
    content: attr(data-active-content);
    text-indent: .5rem;
    font-family: Nunito;
    font-weight: 600;
    letter-spacing: normal
}

.wt-switch.vat-included input[type="checkbox"]:checked + label::after {
    right: 2px;
    left: unset
}

.treeview {
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 8pt;
    font-weight: 400;
    color: #000
}

.treeviewFolderUl {
    margin-left: 20px;
    padding-left: 0;
    width: 100%;
}

.treeviewFolderLi {
    position: relative;
    list-style-type: none;
    vertical-align: middle;
    display: flex;
    flex-wrap: wrap;
}

.left-tree {
    display: flex;
    flex-direction: column;
    height: 100%
}

.left-tree-center {
    overflow-x: auto;
    height: 100%
}

.left-tree-header {
    flex: 0 0 auto;
    height: 3.85rem;
    border-bottom: 1px solid #dee2ea;
    display: flex;
    align-items: center
}

.left-tree-header-inner ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.left-tree-header-inner ul li {
    display: inline-block;
    padding: 0;
    margin: 0
}

.left-tree-header-inner ul li h1 {
    font-size: .825rem;
    margin: 0;
    padding: 0;
    color: #263038
}

.left-tree-header-inner ul li h2 {
    margin: 0;
    padding: 0;
    margin-right: 10px;
    padding-right: 10px;
    font-size: .8rem;
    color: #7F828B
}

.left-tree-header button i {
    font-size: 1.3rem;
    line-height: 0
}

.left-tree-header button {
    border: 1px solid #dee2ea;
    border-radius: .25rem;
    background: none;
    padding: 3px 9px;
    margin: 0;
    cursor: pointer;
    color: #8f9db9;
    text-decoration: none;
    transition: border-color .2s ease-out;
    font-weight: 300
}

.bg-stock-search button:hover, .left-tree-header button:hover {
    background: none;
    border: 1px solid #0087ff;
    color: #0087ff
}

.tree-list ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.tree-list ul li {
    padding: .5rem 0 .25rem
}

.tree-list ul li h1 {
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer
}

.tree-list ul li h1 i {
    margin-right: .7rem
}

.tree-list-2 {
    list-style: none;
    padding: 0;
    padding-left: 1.75rem
}

.tree-list-2 li {
    padding: .5rem 0
}

.tree-list-2 li a {
    color: #70859b;
    font-size: .9rem
}

.tree-list-2 li a:hover {
    color: #4e5d6c
}

.clist {
    position: relative;
    border-bottom: 1px solid #dee2ea;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.clist:hover {
    background: #f6fafd;
    cursor: pointer
}

.clist-thead {
    background: linear-gradient(0, #dee2ea, #dee2ea 51%, transparent 50%) bottom right / 100% 1px no-repeat;
    background-color: #ebeef0
}

.clist-thead h1 {
    font-size: .875rem;
    margin: 0;
    padding: 0;
    font-weight: 400
}

div.clist-customer-1 {
    padding: 18px 0 18px 14px;
    height: 70px
}

.clist-customer-1 .shape-avatar {
    width: 32px;
    height: 32px;
    margin-right: .7rem
}

.clist-customer-1.bank-avatar .shape-avatar {
    width: 97px;
    height: 35px;
    float: left
}

@media (max-width: 767px) {
    .clist-customer-1.bank-avatar .shape-avatar {
        width: 70px !important;
        height: 35px;
        float: left
    }

    #bankAccountList .clist img {
        width: 70px !important;
        height: 35px;
        float: left;
        padding: 4px 0;
        margin-right: .7rem;
        box-shadow: 0 0 9px 1px #0000000d
    }
}

.clist-customer-1.bank-avatar .shape-avatar .letter-avatar {
    font-size: 11px
}

.clist-content .shape-avatar .letter-avatar {
    font-size: 12px
}

.clist img {
    background: #fff;
    border-radius: 3px
}

.clist-content img.card-img, .clist img.card-img {
    float: left;
    margin-right: .5rem;
    border-radius: 3px
}

.clist h1 a {
    color: #263038
}

.clist h1 a:hover, .clist h2 a:hover {
    text-decoration: underline;
    color: #0087FF
}

.clist h1, .clist h3 {
    font-size: 14px;
    margin: 0;
    padding: 0 0 4px;
    text-transform: capitalize;
    color: #263038
}

.clist small {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.divider-dash {
    opacity: .7;
    vertical-align: middle
}

.divider-dash::before {
    content: "|";
    font-family: "Ionicons";
    margin: 0 2px
}

.clist h1 span {
    font-size: 1rem
}

.clist h1 i {
    padding-left: 5px
}

h1.clist-phone {
    color: #4e5d6c
}

.clist h2 {
    margin: 0;
    padding: 0;
    margin-right: 10px;
    padding-right: 10px;
    font-size: .8rem;
    line-height: 1.75
}

.clist .clist-buttons button {
    width: 100%;
    min-width: 40px;
    height: 50px;
    color: #929daf;
    font-size: 1rem;
    line-height: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: .25rem
}

.clist .clist-buttons button:hover {
    color: #0087ff
}

.clist .clist-buttons .add {
    background: #0087FF !important;
    box-shadow: 0 1px 2px 0 #0000001a !important;
    border: none !important;
    padding: 0 1.2rem !important;
    color: #FFF !important;
    line-height: 0 !important;
    font-size: .8rem !important;
    border-radius: .25rem !important;
    height: 36px !important;
    font-weight: 600 !important;
    margin: 0 10px !important;
    transition: all .5s !important
}

.clist .clist-buttons .add:hover {
    background: #1578cd !important
}

.clist .clist-buttons button i:before {
    transition: .3s ease
}

.clist .clist-buttons button:not(.collapsed) i:before {
    transform: rotate(-180deg)
}

.clist-edit-delete {
    text-align: right
}

.clist-edit-delete h1 {
    display: block;
    font-size: 1.3rem;
    margin: 0;
    padding: 0;
    text-transform: capitalize;
    line-height: 1;
    white-space: nowrap
}

.clist-edit-delete h6 {
    display: block;
    font-size: .975rem;
    margin: 0;
    padding: 0;
    padding-bottom: 4px;
    text-transform: capitalize;
    color: #929daf;
    line-height: 1
}

.clist-edit-delete h6 span {
    font-weight: 300
}

.chart-info {
    border-bottom: 1px solid #dee2ea;
    background-color: #f4f7fb;
    width: 100%
}

.chart-info h1 {
    margin-bottom: 1rem;
    font-size: .825rem;
    font-weight: 500;
    text-align: center;
    color: #263038
}

.chart-info h2 {
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 300;
    text-align: center;
    color: #1f212a
}

.chart-info h2 small {
    font-size: .75rem;
    font-weight: 300;
    text-align: center
}

.chart-info p {
    color: #97a8c3;
    font-weight: 300
}

.chart-info-inner div {
    border-right: 1px solid #e3e6ea;
    border-bottom: 1px solid #e3e6ea;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    cursor: pointer
}

.chart-info-inner div.select {
    background-color: #ffff
}

.chart-info-inner div:last-child {
    border-right: none
}

.compare {
    text-align: center
}

span.borclu {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 0;
    border-color: #fc566a transparent transparent
}

span.alacakli {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 0;
    border-color: #34bfa3 transparent transparent
}

.clist-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 34px;
    border-left: 1px solid #dee2ea
}

.clist-button-blue {
    background: #f8f9fc
}

.clist-button-green {
    background-image: linear-gradient(to top, #0087ff 0%, #04befe 100%)
}

.clist-button-purple {
    background-image: linear-gradient(-225deg, #7A54D8 0%, #5753C9 48%, #7A54D8 100%)
}

.clist-button-gray {
    background: linear-gradient(-180deg, #BCC5CE 0%, #929EAD 98%), radial-gradient(at top left, #ffffff4d 0%, #0000004d 100%);
    background-blend-mode: screen
}

.clist-button-green:hover {
    background-image: linear-gradient(to top, #00e3ae 0%, #9be15d 100%);
    border: 1px solid #00e3ae
}

.clist-button-purple:hover {
    background-image: linear-gradient(-225deg, #fc566a 0%, #E73A51 48%, #E73A51 100%);
    border: 1px solid #E73A51
}

.clist-button-gray:hover {
    background: linear-gradient(-180deg, #ffcf00 0%, #ff5c5c 98%), radial-gradient(at top left, #ffffff4d 0%, #0000004d 100%);
    background-blend-mode: screen;
    border: 1px solid #ffcf00
}

.clist-last {
    display: flex;
    justify-content: flex-end
}

.clist-total p {
    margin: 0;
    padding: 0;
    margin-right: 10px;
    padding-right: 10px;
    font-size: .725rem;
    color: #999;
    line-height: 1.3
}

.clist-total ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.clist-total ul li {
    display: inline-block;
    width: 100px
}

div.clist-select {
    margin-top: -4px
}

.clist select {
    width: 50px;
    height: 18px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    border: none;
    background: transparent;
    background: url(../SVG/dovizz.svg) no-repeat right center;
    background-position: 32px 0;
    font-size: .825rem;
    margin: 0;
    padding: 0;
    text-transform: capitalize;
    font-weight: 600;
    color: #263038;
    line-height: 1
}

.clist-inner-btn {
    margin: 0 10px 0 25px;
    padding: 0;
    border: none;
    background: none;
    line-height: 0;
    vertical-align: top;
    color: #263038
}

.clist .right-click, .clist-content .right-click {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 20px;
    height: 20px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 16px;
    transition: ease .4s;
    cursor: pointer;
    box-shadow: 3px 3px 15px 2px #a7b0bf80
}

.clist:hover .right-click, .clist-content:hover .right-click {
    opacity: 1
}

@media (max-width: 767px) {
    .clist .right-click, .clist-content .right-click {
        opacity: 1;
        left: unset;
        right: 0;
        width: 18px;
        height: 18px
    }
}

.warning-box {
    position: absolute;
    z-index: 999999;
    height: 60px;
    border-radius: .25rem;
    background: #fcafba;
    border: 1px solid #d87093;
    width: 96%;
    bottom: 0;
    left: 0;
    color: #fc465c;
    text-align: center;
    padding: 20px
}

.warning-box h1 {
    font-size: .875rem;
    font-weight: 600;
    padding: 0;
    margin: 0
}

.warning-box i {
    font-size: 2rem;
    line-height: 0;
    position: absolute;
    z-index: 9999999;
    top: 0;
    right: 5px
}

.wt-popup-bg {
    background: #000000bf;
    position: absolute;
    z-index: 99999;
    width: 100%;
    height: 100%
}

.wt-popup {
    background: #FFF;
    width: 300px;
    position: absolute;
    z-index: 9999999999;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: .25rem;
    text-align: center;
    -webkit-box-shadow: 0 0 41px 6px #000000bf;
    -moz-box-shadow: 0 0 41px 6px #000000bf;
    box-shadow: 0 0 41px 6px #000000bf;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    font-family: 'Nunito', sans-serif
}

.wt-popup-header {
    background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
    width: 300px;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem
}

.wt-popup-header-2 {
    background-image: linear-gradient(to top, #0300BF 0%, #3F9CFF 100%);
    width: 300px;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem
}

.wt-popup-header img {
    padding: 20px 0;
    opacity: .5
}

.wt-popup-header-2 h1, .wt-popup-header h1 {
    font-size: 1.85rem;
    color: #FFF
}

.wt-popup-header-2 p, .wt-popup-header p {
    color: #FFF;
    font-family: 'Nunito', sans-serif
}

.wt-popup-content {
    background: #0000001a;
    width: 300px
}

.wt-popup-content button {
    width: 100%;
    float: left;
    background: none;
    color: #263038;
    font-weight: 600;
    border: none;
    padding: 15px 0
}

.wt-popup-content button:hover {
    background: #0000001a;
    color: #263038;
    cursor: pointer
}

.wpc-1, .wpc-2 {
    width: 50%
}

.wpc-1 {
    border-right: 1px solid #dee2ea
}

.wpc-1:hover {
    border-bottom-left-radius: 7px
}

.wpc-2:hover {
    border-bottom-right-radius: 7px
}

.security-div {
    background: #FFF;
    border-radius: 2rem;
    border: 1px solid #dee2ea;
    max-height: 50px;
    text-align: center
}

.security-div ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.security-div ul li {
    padding: 0;
    margin: 0
}

.security-div ul li + li {
    float: right
}

.security-div ul li p {
    height: 60px;
    padding-left: 1rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .5rem;
    padding-top: 13px;
    margin: 0
}

.login-go-back i:before {
    color: #fff;
    padding-left: 0;
    font-size: 1.8rem;
    font-weight: 600;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px
}

.security-div button {
    font-size: 1.8rem;
    font-weight: 600;
    background: #fff;
    color: #0087ff;
    border: 1px solid #0087ff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 99999;
    top: 3px;
    right: 4px
}

.security-div button:before {
    content: "\f49a";
    font-family: Ionicons;
    font-size: 1.8rem;
    font-weight: 600;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px
}

.security-div button:hover {
    border-radius: 50%;
    background: #0087ff;
    color: #fff
}

.wt-popover {
    display: flex
}

.wt-popover p {
    position: absolute;
    bottom: 55px;
    z-index: 2;
    padding: 4px 7px;
    margin: 0;
    text-align: start;
    border-radius: .25rem;
    background-color: #fc566a;
    border: 1px solid #fc566a;
    color: #FFF
}

.wt-popover p:after {
    content: '';
    bottom: 0;
    right: calc(50% - 5px);
    margin-bottom: -6px;
    position: absolute;
    border-top: solid 5px #fc566a;
    border-left: solid 5px transparent;
    border-right: solid 5px transparent
}

.wt-popover.below p {
    bottom: -18px
}

.wt-popover.below p:after {
    top: -6px;
    bottom: unset;
    margin-bottom: -6px;
    border-top: 0;
    border-bottom: solid 5px #fc566a
}

.wt-popover-owner {
    border: 1px solid #fc566a !important;
    background: #fff !important
}

.wt-popover-owner.p-warn {
    border: 1px solid #fcc756 !important;
    background: #fff !important
}

.wt-popover.b-40 p {
    bottom: 40px
}

@media (min-width: 1080px) {
    .wt-frame-tab .scrtabs-tabs-fixed-container {
        overflow: hidden !important
    }
}

@media (max-width: 767px) {
    .wt-framex {
        padding: 0
    }

    .wt-frame-bottom {
        height: auto;
        border-top: 1px solid #dee2ea
    }

    .left-content-inner-bottom {
        height: auto
    }

    .wt-frame-center {
        padding: 6px 9px 8px;
        margin: 0
    }

    html body .content {
        margin-top: 0
    }

    .bottom-inner-pagination {
        display: flex;
        justify-content: flex-end
    }

    .clist-edit-delete {
        text-align: left;
        border: none;
        display: flex;
        flex-direction: row-reverse
    }

    .clist .clist-customer-1 {
        padding: 10px 0 10px 14px;
        height: 52px
    }

    .clist.case .clist-customer-1 {
        width: 100% !important
    }

    .clist.case h1 {
        margin-left: 0 !important
    }

    .clist.case small {
        display: block !important
    }

    .clist-edit-delete h6 {
        margin-left: 3.25rem
    }

    .clist-edit-delete ul li:first-child {
        padding-left: 0;
        float: left
    }

    .clist .clist-edit-delete small {
        display: none
    }

    .chart-footer-tab-item {
        height: 50px !important
    }

    .chart-footer-tab {
        overflow: scroll !important;
        width: 620px !important
    }

    .chart-footer {
        overflow: auto !important
    }

    .wt-frame-tab {
        margin: 0 !important;
        height: auto
    }

    .room-inner {
        min-width: 1040px
    }

    .right-content-crm {
        height: calc(100vh - 238px)
    }

    .content-calendar-left, .content-calendar-right {
        height: auto !important
    }

    .sl-1, .sl-2 {
        width: 100%;
        display: block
    }

    .nav-search-input, .nav-search-button {
        width: 40px;
        height: 40px
    }

    .bottom-inner-btn button {
        height: 40px;
        width: 40px
    }

    .nav-search-input + .close {
        top: 15px
    }

    .wt-frame-top {
        padding: 0 4px
    }

    .invoice-footer {
        width: 100%
    }

    .invoice-footer.d-flex {
        display: none !important;
    }

    .invoice-footer h1, .invoice-footer h2, .invoice-footer h5 {
        text-align: center;
        padding: 0
    }

    .invoice-footer h5 {
        font-size: .85rem
    }

    .invoice-footer ul li {
        height: auto;
        min-height: 21px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .invoice-footer ul li p {
        float: none !important;
        white-space: nowrap;
    }

    .chart-kasa {
        height: 280px !important
    }
}

.page-help h1 {
    text-align: center;
    font-size: .875rem;
    font-weight: 300;
    padding-top: 14px
}

.product-card-text {
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(120deg, #fff 0%, #f4f6f8 100%);
    height: 100%
}

.product-card {
    width: 100%;
    height: 100%;
    text-align: center
}

.product-card h2 {
    font-size: 1rem;
    text-align: center
}

.product-card h1 {
    font-weight: 600;
    font-size: 1.5rem;
    padding: 0 1rem;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.product-card p {
    font-size: 1rem;
    margin: 2rem 0;
    padding: 0 2rem;
    font-weight: 300
}

.product-card-title {
    flex: 1 1 auto;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.product-card-title span.price-small {
    border: 1px solid #dee2ea;
    padding: 10px 20px
}

.product-card-detail {
    flex: 0 0 auto;
    text-align: center;
    margin: 1rem 0 0
}

.product-card-detail div ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #dee2ea;
    width: 100%;
    border-radius: .25rem
}

.product-card-detail div ul li {
    display: inline-flex;
    border-left: 1px solid #dee2ea;
    padding: 14px 7px;
    width: 33.33333%;
    justify-content: center;
    flex-direction: column;
    text-align: center
}

.product-card-detail div ul li:first-child {
    border-left: none
}

.product-card-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-left: 1px solid #dee2ea
}

.product-card-img img {
    max-width: 320px;
    max-height: 480px
}

img.barcode-product {
    max-width: 90px;
    max-height: 70px
}

.product-price {
    background: linear-gradient(180deg, #dee2ea, #dee2ea 51%, transparent 50%) top left / 100% 1px no-repeat;
    margin-top: 1rem
}

.product-price-item {
    width: 100%
}

.product-price-item h1 {
    font-size: 4rem;
    letter-spacing: -1px;
    margin: 0;
    padding: 0
}

.product-price-item h3 {
    font-weight: 300;
    font-size: .85rem;
    margin: 0;
    padding: 0;
    letter-spacing: 3px
}

.total-price {
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: flex-end
}

.total-price span.big {
    font-size: 5.5rem;
    font-weight: 500;
    line-height: 1
}

.total-price span.small {
    font-size: 4rem;
    font-weight: 500;
    padding: 0;
    margin: 0;
    line-height: 1.1
}

.total-price small {
    font-size: 2rem;
    font-weight: 400;
    padding-left: 5px;
    line-height: 1.5
}

button.bank-button {
    width: 100%;
    border: 1px solid #dee2ea;
    border-radius: .25rem;
    font-size: .8rem
}

button.bank-button:hover, button.bank-button:focus {
    background: transparent;
    border: 1px solid #0087ff;
    color: #0087ff
}

.bank-label {
    display: flex
}

.bank-label label {
    padding-right: 14px
}

.bank-label button {
    border: 1px solid #dee2ea;
    border-left: none;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
    padding: 0 1rem;
    background: #dee2ea;
    color: #4e5d6c;
    cursor: pointer
}

.bank-pos-td {
    width: 160px
}

.bank-pos-td button {
    width: 35px;
    font-size: 1rem;
    text-align: center;
    border-left: 1px solid #dee2ea;
    height: 40px
}

button.bank-button2 {
    width: 100%;
    background: none;
    border: 1px solid #dee2ea
}

canvas#myChart2 {
    max-width: 100%;
    height: 100%
}

.chart-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
    border-radius: .25rem;
    -webkit-box-shadow: 0 1px 14px 1px #45414e0a;
    box-shadow: 0 1px 14px 1px #45414e0a
}

.chart-content-center {
    flex: 1 1 auto;
    position: relative;
    background-color: #fff;
    padding: 0;
    height: 100%;
    overflow: auto;
    border-radius: .25rem
}

.chart-content-header, .chart-content-bottom {
    flex: 0 0
}

.chart-box {
    border: 1px solid #dee2ea;
    background-color: #f4f6f8;
    color: #263038
}

.chart-box + .chart-content-center {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

@media (max-width: 1200px) {
    .chart-box {
        width: 100%;
        display: flex;
        flex: 0 0 auto;
        overflow-x: auto
    }

    .chart-box::-webkit-scrollbar {
        background: #2d325500;
        height: 0
    }

    .chart-box div {
        min-width: 50%
    }
}

span.legend-nakit, span.legend-kart, span.legend-cek, span.legend-senet, span.legend-havale, span.legend-diger {
    border-radius: .18rem;
    color: #fff;
    padding: .15rem .5rem
}

.chart-box-item {
    border-right: 1px solid #dee2ea;
    text-align: center;
    padding: 1rem;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.chart-box-item:hover {
    background-color: #FFF !important;
    cursor: pointer
}

.chart-box-item:last-child {
    border-right: 0
}

.chart-box-item-2 {
    color: #FFF !important;
    text-align: center
}

.chart-box-item-2 h1 {
    margin: 0;
    padding: 0;
    font-size: .9rem;
    font-weight: 400
}

.chart-box-item-2 h2 {
    font-size: 1.25rem;
    margin: 0;
    margin-bottom: .5rem;
    padding: 0;
    font-weight: 500
}

.chart-box-item-2 h2 small {
    font-size: .7rem
}

.chart-box-item-2 p span {
    display: flex;
    justify-content: center
}

.chart-box-item h1 {
    margin: 0;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 400
}

.chart-box-item h2 {
    margin: 0;
    padding: 0;
    font-weight: 500;
    font-size: 2rem
}

.chart-box-item h2 small {
    font-size: 1rem;
    font-weight: 300
}

.chart-box-item p {
    padding: 0;
    color: #97a8c3;
    font-weight: 300
}

.chart-box-item2-selected-1 h1 {
    color: #FFF !important
}

.legend-box div {
    width: 33.33333%;
    margin: 0 12px 10px 0;
    text-align: center;
    padding: .5rem 0;
    border-radius: 6rem
}

.legend-box div:last-child {
    margin-right: 0
}

.legend-box div span {
    width: 2rem;
    height: .45rem;
    display: inline-block;
    border-radius: 1.1rem;
    margin-bottom: .12rem
}

.legend-box div h1, .legend-box div h2 {
    font-size: .8rem;
    margin: 0;
    font-weight: 400
}

.legend-gelir {
    background-color: #67c879
}

.legend-gider {
    background-color: #fa3457
}

.legend-kalan, .chart-box-item-selected-blue {
    color: #fff;
    background: -webkit-gradient(linear, left bottom, left top, from(#2b3dff), to(#0087ff)) !important;
    background: linear-gradient(0deg, #2b3dff 0, #0087ff) !important
}

.chart-box-item-selected-purple {
    color: #fff;
    background: -webkit-gradient(linear, left bottom, left top, from(#667eea), to(#764ba2)) !important;
    background: linear-gradient(0deg, #667eea 0, #764ba2) !important
}

.chart-box-item-selected-green {
    color: #fff;
    background: -webkit-gradient(linear, left bottom, left top, from(#00ecbc), to(#47ece2)) !important;
    background: linear-gradient(0deg, #00ecbc 0, #47ece2) !important
}

.chart-box-item-selected-red {
    color: #fff;
    background: -webkit-gradient(linear, left bottom, left top, from(#e9457f), to(#f4266f)) !important;
    background: linear-gradient(0deg, #e9457f 0, #f4266f) !important
}

.legend-kalan, .chart-box-item-selected-blue p, .chart-box-item-selected-purple p, .chart-box-item-selected-green p, .chart-box-item-selected-red p {
    color: #fff
}

.chart-box-case-bg {
    background: linear-gradient(0deg, #5e6cff 0%, #0087ff 100%);
    border-radius: .25rem
}

.chart-box-case-bg div {
    color: #fff;
    padding: 1rem 0;
    text-align: center;
    border-right: 1px solid #ffffff17
}

.chart-box-case-bg div:nth-last-child {
    border: 0
}

.dashboard-summary .item {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    margin: 0 0 1rem;
    padding: 2rem 1rem;
    border-radius: .5rem;
    box-shadow: 0 1px 12px 4px #45414e0a
}

.dashboard-summary .item .chart-refresh-btn {
    position: absolute;
    bottom: 5px;
    left: calc(50% - 18px);
    opacity: 0;
    z-index: 1;
    border-radius: 50%;
    -webkit-transition: ease .3s;
    transition: ease .3s
}

.dashboard-summary .item:hover .chart-refresh-btn {
    opacity: 1
}

@media (max-width: 767px) {
    .dashboard-summary .item .chart-refresh-btn {
        opacity: 1;
        left: calc(50% - 13px);
        width: 26px;
        height: 26px;
        padding: 0
    }

    .chart-box-item h2 {
        font-size: 1.5rem
    }

    .chart-content {
        height: auto !important;
    }
}

wt-doughnut-chart {
    padding: 25px 0;
}

.dashboard-summary .item.bg-1 .chart-refresh-btn {
    color: #fff;
    right: 5px;
    left: unset;
    top: 5px
}

.dashboard-summary .item.bg-1 .chart-refresh-btn:hover {
    color: #5d78ff
}

.dashboard-summary .item .title {
    position: relative;
    display: inline-block;
    margin-bottom: .6rem;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap
}

.dashboard-summary .item .title.bordered:before {
    content: "";
    bottom: -3px;
    left: 0;
    width: 45px;
    height: 3px;
    background: #6881ff;
    display: inline-block;
    position: absolute
}

.dashboard-summary .item .title.db-border-100.bordered:before {
    width: 100%
}

.dashboard-summary .item .title.bordered.bordered-primary:before {
    background: #6881ff
}

.dashboard-summary .item .title.bordered.bordered-secondary:before {
    background: #80beeb;
    right: 0;
    left: unset
}

.dashboard-summary .item .title.bordered.bordered-success:before {
    background: #34bfa3
}

.dashboard-summary .item .title.bordered.bordered-danger:before {
    background: #f4516c;
    right: 0;
    left: unset
}

.dashboard-summary .item > div {
    display: flex;
    align-items: center;
    justify-content: space-around
}

.dashboard-summary .item svg {
    height: 50px
}

.dashboard-summary .item svg path {
    fill: #d1d6e2
}

.dashboard-summary .item .price {
    font-size: 1.5rem;
    margin: .5rem 0 0;
    padding: 0;
    font-weight: 500
}

.dashboard-summary .item .percentage, .chart-box-item .percentage {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: 4px 8px;
    color: #0087FF;
    background: #dff0ff;
    border-radius: 20px
}

.dashboard-summary .item .percentage.success, .chart-box-item .percentage.success {
    background: #dcf9e0;
    color: #62c26f
}

.dashboard-summary .item .percentage.danger, .chart-box-item .percentage.danger {
    background: #ffe4e7;
    color: #fc566a
}

.dashboard-summary .item .item-border:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    height: 100%;
    background: #e5e6e9;
    border-radius: 5px
}

.dashboard-summary .item.bg-1 {
    color: #fff;
    background: linear-gradient(135deg, #fff6, #0087ff) #0087ff !important
}

.dashboard-summary .item.bg-1 .item-border:after {
    background: #fff
}

.dashboard-summary .item.bg-2 {
    background: #80beeb;
    color: #fff
}

.dashboard-summary .item.bg-2 .item-border:after {
    background: #75acd4
}

.dashboard-summary .item .st0 {
    fill: #6881FF
}

.dashboard-summary .item .st1 {
    fill: #A9BCFF
}

.dashboard-summary .item .st2 {
    fill: #7A95FC
}

.dashboard-summary .item .ion-help-circled, .dashboard-summary .box-container .ion-help-circled {
    position: absolute;
    right: 15px;
    bottom: 15px;
    font-size: 1.1rem;
    line-height: 0;
    color: #6881ff;
    opacity: 0;
    transition: ease .3s
}

.dashboard-summary .item:hover .ion-help-circled {
    opacity: 1
}

@media (max-width: 1300px) {
    .dashboard-summary .item .price {
        font-size: 1rem
    }
}

@media (max-width: 767px) {
    .dashboard-summary .item {
        padding: 1rem 0;
        margin: 0 0 .5rem
    }

    .dashboard-summary .item .title {
        font-size: .75rem;
        padding: 0
    }

    .dashboard-summary .item .price {
        font-size: .9rem;
        font-weight: 600
    }

    .dashboard-summary .item .percentage {
        font-size: .7rem;
        padding: 3px 6px
    }

    .dashboard-summary .item .ion-help-circled, .dashboard-summary .box-container .ion-help-circled {
        opacity: 0 !important
    }
}

.dashboard-summary .box-container {
    position: relative;
    background-color: #fff;
    height: 100%;
    overflow: hidden;
    border-radius: .25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 12px 4px #45414e0a;
    -webkit-box-shadow: 0 1px 12px 4px #45414e0a
}

@media (max-width: 768px) {
    .dashboard-summary .box-container {
        margin-bottom: .5rem
    }
}

.dashboard-summary .box-header {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem
}

.dashboard-summary .box-header h5 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0
}

.dashboard-summary .box-header .wt-frame-tab {
    margin: 0
}

.dashboard-summary .box-body {
    overflow: auto;
    height: calc(100% - 50px);
    display: flex;
    flex-direction: column;
    justify-content: center
}

.chart-label {
    display: flex;
    flex-direction: row;
    justify-content: space-around
}

.chart-label .chart-label-column div {
    padding: 3px 0
}

.chart-label .chart-label-column span {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 1.1rem
}

.chart-label .chart-label-column h1 {
    font-size: .8rem;
    margin: 0 0 0 5px;
    font-weight: 400;
    display: inline-block
}

.dashboard-summary .box-container .ion-android-refresh {
    opacity: 0;
    -webkit-transition: ease .3s;
    transition: ease .3s
}

.dashboard-summary .box-container:hover .ion-android-refresh {
    opacity: 1
}

@media (max-width: 767px) {
    .dashboard-summary .box-container .ion-android-refresh {
        opacity: 1
    }
}

.bd-btn {
    display: flex;
    align-items: flex-end;
    position: relative
}

.bd-btn input.multiplier {
    width: 60px;
    text-align: center;
    height: 36px;
    color: #616161;
    font-size: .875rem;
    background-color: #ffff;
    background-image: none;
    background-clip: padding-box;
    border: 1px solid #dee2ea;
    border-left: none
}

.bd-btn input.multiplier:hover, .bd-btn input.multiplier:focus {
    background-color: #f4fafe;
    border: 1px solid #0087FF;
    color: #7a869e;
    cursor: pointer
}

.bd-btn-button {
    width: 36px;
    min-width: 36px;
    height: 36px
}

.tab-stock {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.tab-stock label.stock-label {
    -webkit-box-ordinal-group: 2;
    box-ordinal-group: 2;
    -ms-flex-order: 1;
    text-align: center;
    order: 1;
    height: 50px;
    width: 25%;
    padding-top: 10px;
    cursor: pointer;
    background-image: linear-gradient(to top, #ebeff3 0%, #f4f6f8 100%);
    border-right: 1px solid #dee2ea;
    -webkit-transition: background ease .2s;
    transition: background ease .2s
}

.tab-stock label.stock-label img {
    max-width: 100%
}

.tab-stock input[type="radio"] {
    display: none
}

.tab-stock input[type="radio"]:checked + label.stock-label {
    background: #FFF
}

.tab-stock input[type="radio"]:checked + label.stock-label + .tab-stock-web {
    display: block
}

.view2 td {
    height: 36px
}

.view2 td p {
    font-size: 12px;
    text-transform: capitalize;
    color: #263038;
    font-weight: 500;
    margin: 0;
    padding: 11px 0;
    line-height: 1;
    white-space: nowrap
}

.view2 td input {
    height: 30px;
    margin-top: 2px
}

.view2 td button {
    border: none;
    background: none;
    color: #6d7a97;
    font-size: 1rem;
    cursor: pointer;
    padding: 0 2px;
    margin: auto
}

.view2 td button i {
    vertical-align: middle;
    font-size: 16px
}

tr.view2:nth-child(even) {
    background-color: #f8f9fc;
    background-size: 100% 1px;
    background-repeat: no-repeat
}

.view3 {
    background-color: #FFF;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    height: 46px
}

.view3:not(:last-child) {
    border-bottom: 1px solid #dee2ea
}

.view3:nth-child(even) {
    background-color: #f8f9fc;
    background-size: 100% 1px;
    background-repeat: no-repeat
}

.view3 td {
    height: 46px
}

.view3 td p {
    font-size: 12px;
    text-transform: capitalize;
    color: #263038;
    font-weight: 500;
    margin: 0;
    padding: 10px 10px 10px 0;
    line-height: 1;
    white-space: nowrap
}

@media (max-width: 767px) {
    .view3 td:first-child {
        min-width: 100px
    }

    .view3 td:first-child p {
        white-space: normal
    }
}

.view5 td p {
    font-size: 12px;
    text-transform: capitalize;
    color: #263038;
    font-weight: 500;
    margin: 0;
    padding: 11px 0;
    line-height: 1;
    white-space: nowrap
}

.right-table-btn {
    display: flex
}

.right-table-btn button {
    width: 36px;
    height: 36px;
    margin: 5px
}

span.clist-top {
    font-size: .75rem;
    font-weight: 300;
    white-space: nowrap
}

span.stock-bottom {
    color: #263038;
    font-size: .7rem
}

.agenda-p-cell-start {
    width: 7%;
    height: 30px;
    font-weight: 700;
    display: table-cell;
    text-align: center;
    font-size: .825rem;
    vertical-align: middle;
    border-bottom: 1px solid #dee2ea;
    background: #fff
}

.agenda-p {
    display: table;
    width: 100%
}

.agenda-p-row {
    display: table-row
}

.agenda-p-row:hover {
    background-color: #0087ff
}

.agenda-p-cell {
    border: 1px solid #FFF;
    border-right: none;
    border-top: none;
    display: table-cell;
    width: 3%;
    text-align: center;
    height: 30px;
    font-size: .825rem;
    vertical-align: middle;
    background: #eee
}

.agenda-p-body {
    display: table-row-group
}

.bg-p-var {
    background: #c8c8c8bf
}

.bg-d-var {
    background: #ea304780
}

.bg-r-var {
    background: #2e57e880
}

.bg-t-var {
    background: #2d325580
}

.bg-p-var button, .bg-d-var button, .bg-r-var button, .bg-t-var button {
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
    opacity: 0
}

.reservation-bg {
    background-color: #f4f6f8 !important
}

.reservation-right {
    border-left: 1px solid #dee2ea
}

.reservation-clist {
    background: linear-gradient(180deg, #f4f6f8 0%, #f4f6f8 100%) !important;
    border-bottom: 1px solid #dee2ea
}

.reservation-form {
    background: linear-gradient(180deg, #f4faff 0%, #f4f6f8 100%) !important;
    border-bottom: 1px solid #dee2ea
}

.reservation-ticket button {
    border: 1px solid #0087ff;
    background: transparent;
    color: #0087ff;
    border-radius: .25rem;
    height: 30px;
    margin-top: 10px;
    cursor: pointer
}

.reservation-ticket button:hover {
    background: #0087ff;
    color: #FFF
}

.room-tab-select {
    border-left: 1px solid #dee2ea;
    border-right: 1px solid #dee2ea;
    border-top: 1px solid #dee2ea;
    width: auto
}

.active-room-tab {
    background-color: #dee2ea40 !important
}

.room-block {
    font-size: .825rem;
    text-transform: capitalize;
    white-space: nowrap;
    color: #263038;
    margin: 0;
    font-weight: 600;
    padding: 0 1rem;
    align-self: center;
    border-right: 1px solid #dee2ea
}

.room-block-select:focus, .room-block-select:hover, .room-block-select {
    background-color: transparent;
    border: 0
}

.room-date-slider h1 {
    font-size: 1.5rem;
    margin: 0
}

.room-date-slider h2 {
    font-size: .725rem;
    margin: 0
}

.room-row {
    width: 100%;
    border-bottom: 1px solid #dee2ea
}

ul.day-grid {
    display: grid;
    grid-template-columns:repeat(31, 1fr);
    grid-gap: 0;
    margin: 0 auto;
    padding: 0
}

ul.day-grid li {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin-left: 0;
    border-left: 1px solid #fff
}

ul.day-grid-header li {
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    align-self: center;
    text-align: center;
    height: 36px
}

.day-grid-header li h1 {
    font-size: .85rem;
    margin: 0
}

.day-grid-header li p {
    font-size: .75rem;
    margin: 0
}

ul.room-grid li {
    height: 24px;
    background: #f4f6f8
}

.room-inner {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 270px)
}

.room-row-header {
    height: 36px !important;
    background: #f4f6f8 !important;
    flex: 0 0 auto
}

.room-container {
    flex: 1 1 auto;
    height: calc(100vh - 306px);
    overflow: auto
}

.room-select {
    z-index: 99999;
    width: 120px
}

.room-number {
    width: 60px;
    height: 24px;
    display: flex
}

.room-status, .room-tech {
    width: 30px;
    height: 24px
}

.room-number h1 {
    font-size: .875rem;
    font-weight: 300;
    margin: auto;
    color: #FFF
}

.room-status button, .room-tech button {
    background: none;
    border: 0;
    width: 100%;
    font-size: 1rem;
    color: #929daf
}

.room-btn {
    width: 100%;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #dee2ea
}

.full-room1 {
    background-image: linear-gradient(0deg, #759BFA 0%, #8175FA 100%) !important
}

.full-room2 {
    background-image: linear-gradient(0deg, #7f57ff 0%, #bca5ff 100%) !important
}

.full-room3 {
    background-image: linear-gradient(0deg, #ff7ba3 0%, #ffacbd 100%) !important
}

.content-bakery {
    height: calc(100vh - 232px);
    background-color: #FFF;
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 100%;
    min-width: 960px;
    overflow: hidden
}

.content-bakery-big {
    width: 140% !important;
    height: calc(100vh - 318px)
}

.content-bakery-header {
    padding: 0;
    flex: 0 0 auto;
    background-color: #f4f6f8;
    height: 36px
}

.content-bakery-center {
    flex: 1 1 auto;
    overflow-x: auto
}

.content-bakery-footer {
    height: 36px;
    flex: 0 0 auto;
    background: #f4f6f8 linear-gradient(180deg, #dee2ea, #dee2ea 51%, transparent 50%) no-repeat top left
}

.bakery-table {
    display: table;
    width: 100%
}

.bakery-table-body {
    display: table-row-group
}

.bakery-table-row {
    display: table-row
}

.bakery-width-1, .bakery-width-2 {
    width: 20%
}

.bakery-width-3, .bakery-width-7, .bakery-width-8, .bakery-width-9 {
    width: 9%
}

.bakery-width-4, .bakery-width-5, .bakery-width-6 {
    width: 4%
}

.bakery-table-cell {
    display: table-cell;
    background: linear-gradient(90deg, #dee2ea, #dee2ea 51%, transparent 50%) top right / 1px 100% no-repeat, linear-gradient(0, #dee2ea, #dee2ea 51%, transparent 50%) bottom right / 100% 1px no-repeat;
    padding: 0;
    vertical-align: middle
}

.bakery-table-cell .clist-content {
    display: block !important
}

.bakery-table-row-header > .bakery-table-cell {
    height: 36px;
    text-align: center;
    vertical-align: middle;
    font-weight: 700;
    background-color: #e2e6ed;
    color: #263038
}

.bakery-table-row-center > .bakery-table-cell {
    height: 54px
}

.bakery-left > .corner-heading {
    height: 90px;
    width: 100%;
    position: relative;
    border-right: 1px solid #dee2ea;
    border-bottom: 1px solid #dee2ea;
    background: #f4f6f8
}

.bakery-left > .corner-heading > h5:first-child {
    position: absolute;
    right: -29px;
    top: 28px;
    font-size: 1rem;
    margin: 0;
    border: 1px solid #dee2ea;
    border-right: none;
    width: 90px;
    height: 34px;
    padding: 8px 0;
    text-align: center;
    background: #f4f6f8;
    transform: rotate(-90deg)
}

.bakery-left > .corner-heading > h5:nth-child(2) {
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 1rem;
    margin: 0;
    padding: 8px 0;
    width: calc(100% - 32px);
    text-align: center
}

.bakery-left {
    position: relative;
    float: left;
    width: 230px;
    line-height: 36px
}

.bakery-right {
    float: left;
    width: calc(100% - 230px)
}

.bakery-left .bakery-table-cell, .bakery-left .bakery-table-cell input {
    height: 36px
}

.bakery-left .hotel-rows input, .bakery-right .hotel-rows input {
    height: 36px
}

.bakery-width-10, .bakery-table-row-center > .bakery-table-cell p {
    padding: 0 .4rem !important
}

.bakery-table-2-item {
    background: linear-gradient(90deg, #dee2ea, #dee2ea 51%, transparent 50%) top right / 1px 100% no-repeat, linear-gradient(0, #fff, #fff 51%, transparent 50%) bottom right / 100% 1px no-repeat !important
}

.bg-red {
    background: #f4f6f8
}

.bakery-btn {
    height: 36px;
    background: none;
    border: 0;
    color: #4e5d6c;
    cursor: pointer;
    color: #263038;
    vertical-align: middle
}

.clist-bakery {
    height: auto !important;
    background: none !important
}

.bakery-table-row-header > .bakery-table-cell input {
    height: 30px;
    vertical-align: middle;
    background-color: #FFF;
    text-align: left;
    width: 98% !important;
    margin: 0 auto;
    border-radius: .25rem !important;
    border: 1px solid #dee2ea
}

.bakery-table-cell input {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 0 !important;
    text-align: center;
    cursor: pointer;
    height: 54px
}

.bakery-table-cell.dates input {
    float: left;
    display: block;
    font-weight: 500;
    width: 50% !important;
    height: 27px
}

.bakery-table-cell input:hover {
    border-color: #0087ff
}

.bakery-dropdown {
    height: 250px;
    width: 300px
}

.bakery-dropdown-header {
    height: 40px;
    padding-top: 2px;
    background: #e2e6ed
}

.bakery-dropdown-center {
    min-height: 174px;
    max-height: 174px;
    overflow-x: auto
}

.bakery-dropdown-footer {
    height: 36px;
    background-color: #0087ff;
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem;
    text-align: center
}

.bakery-clist {
    height: 50px;
    width: 100%;
    padding: 10px 0;
    background: linear-gradient(0, #dee2ea, #dee2ea 51%, transparent 50%) bottom right / 100% 1px no-repeat
}

.bakery-dropdown-header input {
    height: 36px !important;
    background-color: #f4f6f8 !important
}

.bakery-clist:hover {
    background-color: #f4fafe;
    cursor: pointer
}

.bakery-clist div img {
    border-radius: 50%
}

.bakery-clist div h1 {
    color: #4e5d6c;
    font-size: .8rem;
    line-height: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 400;
    margin: 0;
    padding: 0
}

.bakery-dropdown-footer button {
    color: #fff;
    background: none;
    border: 0;
    height: 36px;
    cursor: pointer
}

.color-picker-btn {
    width: 20px;
    height: 20px;
    background: #0087ff;
    margin: auto;
    display: -webkit-box
}

.t-box {
    background-color: #FFF;
    width: 33%;
    border-right: 1px solid #dee2ea;
    border-bottom: 1px solid #dee2ea;
    text-align: center
}

.t-box-buttons {
    height: 20px
}

.crm-box {
    background-color: #fff;
    border-radius: .25rem;
    -webkit-box-shadow: -1px 1px 8px -1px #cbd3e1ff;
    -moz-box-shadow: -1px 1px 8px -1px #3E444E;
    box-shadow: -1px 1px 8px -1px #cbd3e1ff;
    margin-top: 1rem
}

.crm-box-chart {
    height: 34vh
}

.crm-item-mini {
    height: 20vh;
    margin-top: 1rem;
    background-color: #fff;
    border-radius: .25rem;
    -webkit-box-shadow: -1px 1px 8px -1px #cbd3e1ff;
    -moz-box-shadow: -1px 1px 8px -1px #3E444E;
    box-shadow: -1px 1px 8px -1px #cbd3e1ff
}

.crm-item-mini-text {
    padding-left: 12px
}

.crm-item-mini-text h1 {
    font-size: 2.25rem;
    margin: 0;
    line-height: 1.25
}

.crm-item-mini-text h2 {
    font-size: .925rem;
    margin: 0;
    color: #78909c
}

.crm-box-btn {
    position: absolute;
    right: 7px;
    top: 21px;
    border: 1px solid #dee2ea;
    margin: 0;
    padding: .25rem .5rem;
    line-height: 1;
    border-radius: .25rem;
    font-size: 1rem;
    color: #4e5d6c;
    background-color: #f4f6f8;
    cursor: pointer
}

.crm-list {
    border-left: 1px solid #dee2ea
}

.crm-chart-header {
    height: 8vh
}

.content-calendar-left {
    height: calc(100vh - 50px);
    display: flex;
    flex-direction: column;
    border-right: 1px solid #dee2ea
}

.calendar-left-header {
    flex: 0 0 auto;
    border-bottom: 1px solid #dee2ea;
    height: 50px
}

.calendar-left-content-item {
    background-color: #FFF;
    border-radius: .25rem;
    margin-top: 1rem;
    box-shadow: -1px 1px 8px -1px #cbd3e1ff;
    padding: 1rem
}

.calendar-left-content-item h1 {
    font-size: .9rem;
    font-weight: 600;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.calendar-left-content-item h2 {
    font-size: .775rem;
    font-weight: 300;
    color: #949eb7;
    margin: 0
}

.calendar-tab {
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 1rem
}

.calendar-tab button {
    height: 24px;
    background: none;
    border: none;
    padding: 0 1rem;
    color: #96a0b9;
    cursor: pointer
}

.calendar-tab button:hover {
    color: #4e5d6c
}

.calendar-tab button.selected {
    border-radius: 2rem;
    background-color: #97b3ce;
    color: #fff
}

.calendar-left-center {
    flex: 1 1 auto;
    position: relative;
    overflow-y: auto;
    padding: 0
}

.calendar-day {
    height: 100%;
    display: grid;
    grid-template-columns:36px repeat(1, 1fr);
    grid-template-rows:1fr;
    justify-content: space-around;
    align-content: space-around;
    grid-template-areas:"hours days"
}

.calendar-week {
    height: 100%;
    display: grid;
    grid-template-columns:36px repeat(7, 1fr);
    grid-template-rows:1fr;
    align-content: flex-start;
    grid-template-areas:"hours days days days days days days days";
    overflow: auto
}

.calendar-week .hours {
    grid-area: hours;
    display: grid;
    grid-template-rows:4.5em 1fr;
    grid-template-areas:hours-heading hours-body
}

.calendar-week .hours-body {
    grid-area: hours-body;
    display: grid;
    grid-template-columns:1fr;
    grid-template-rows:repeat(24, 3em);
    grid-row-gap: 8px;
    align-items: flex-start;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0
}

.calendar-week .hours-body > li {
    position: relative;
    top: -.5em;
    font-size: .7rem;
    text-align: center;
    color: #919cb6;
    font-weight: 600
}

.calendar-week .day {
    border-left: 1px solid #dee2ea;
    display: grid;
    grid-template-rows:36px 1fr;
    grid-template-areas:day-heading day-body
}

.calendar-week .day.today .day-heading .day-title {
    color: #0087ff;
    font-weight: 700
}

.calendar-week .day .day-heading {
    grid-area: day-heading;
    height: 36px;
    width: 100%;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #dee2ea;
    z-index: 100
}

.calendar-week .day .day-title {
    margin: 0;
    font-size: .8rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    text-align: center;
    color: #909ab4
}

.calendar-week .day .day-body {
    grid-area: day-body;
    display: grid;
    grid-template-columns:1fr;
    grid-template-rows:repeat(24, 3em);
    grid-row-gap: 8px;
    padding: 4px;
    background-size: 100% calc(3em + 8px);
    background-image: linear-gradient(to top, #dee2ea 0%, #fff 1px, #fff 100%);
    grid-template-areas:saat7 saat8 saat9 saat10 saat11 saat12 saat13 saat14 saat15 saat16 saat17 saat18 saat19 saat20 saat21 saat22 saat23 saat24 saat1 saat2 saat3 saat4 saat5 saat6
}

.calendar-week .day .activity {
    grid-column-start: 1;
    padding: 0 4px;
    line-height: 1.2em;
    background-color: #e1f1ff;
    border-radius: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .85;
    font-size: .7rem;
    border-left: 4px solid #0087ff
}

.calendar-week .day .activity.danger {
    border-left: 4px solid #f290a5;
    background: #fbe3e9
}

.activity-offset-1 {
    margin-left: 25%
}

.activity-offset-2 {
    margin-left: 50%
}

.activity-pull-1 {
    margin-right: 25%
}

.activity-pull-2 {
    margin-right: 50%
}

.activity-content h1 {
    font-size: .825rem;
    margin: 0;
    font-weight: 600;
    margin-top: .75em;
    color: #4e5d6c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.activity-content p {
    margin-top: .75rem
}

.from-12 {
    grid-row-start: saat12
}

.from-11 {
    grid-row-start: saat11
}

.from-10 {
    grid-row-start: saat10
}

.from-9 {
    grid-row-start: saat9
}

.from-8 {
    grid-row-start: saat8
}

.from-7 {
    grid-row-start: saat7
}

.from-6 {
    grid-row-start: saat6
}

.from-5 {
    grid-row-start: saat5
}

.from-4 {
    grid-row-start: saat4
}

.from-3 {
    grid-row-start: saat3
}

.from-2 {
    grid-row-start: saat2
}

.from-1 {
    grid-row-start: saat1
}

.from-13 {
    grid-row-start: saat13
}

.from-14 {
    grid-row-start: saat14
}

.from-15 {
    grid-row-start: saat15
}

.from-16 {
    grid-row-start: saat16
}

.from-17 {
    grid-row-start: saat17
}

.from-18 {
    grid-row-start: saat18
}

.from-19 {
    grid-row-start: saat19
}

.from-20 {
    grid-row-start: saat20
}

.from-21 {
    grid-row-start: saat21
}

.from-22 {
    grid-row-start: saat22
}

.from-23 {
    grid-row-start: saat23
}

.from-24 {
    grid-row-start: saat24
}

.to-12 {
    grid-row-end: saat12
}

.to-11 {
    grid-row-end: saat11
}

.to-10 {
    grid-row-end: saat10
}

.to-9 {
    grid-row-end: saat9
}

.to-8 {
    grid-row-end: saat8
}

.to-7 {
    grid-row-end: saat7
}

.to-6 {
    grid-row-end: saat6
}

.to-5 {
    grid-row-end: saat5
}

.to-4 {
    grid-row-end: saat4
}

.to-3 {
    grid-row-end: saat3
}

.to-2 {
    grid-row-end: saat2
}

.to-1 {
    grid-row-end: saat1
}

.to-13 {
    grid-row-end: saat13
}

.to-14 {
    grid-row-end: saat14
}

.to-15 {
    grid-row-end: saat15
}

.to-16 {
    grid-row-end: saat16
}

.to-17 {
    grid-row-end: saat17
}

.to-18 {
    grid-row-end: saat18
}

.to-19 {
    grid-row-end: saat19
}

.to-20 {
    grid-row-end: saat20
}

.to-21 {
    grid-row-end: saat21
}

.to-22 {
    grid-row-end: saat22
}

.to-23 {
    grid-row-end: saat23
}

.to-24 {
    grid-row-end: saat24
}

.activity-month {
    background-color: #fff;
    padding: 4px;
    font-size: .725rem;
    margin-bottom: 5px;
    border-radius: .25rem;
    border-left: 4px solid #97b3ce
}

.month-day-today {
    background-color: #e0eaf2
}

.activity-month p {
    margin: 0
}

.activity-month-danger {
    border-left: 4px solid #E73A51
}

.activity-month-success {
    border-left: 4px solid #00e3ae
}

.crm-dialog {
    max-height: 90vh;
    overflow-y: auto
}

.modal-crm-team button:first-child {
    border: 1px dashed #dee2ea;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.15rem;
    line-height: 1;
    color: #dee2ea
}

.crm-team-img {
    width: 72px;
    border-radius: 2rem;
    border: 1px solid #dee2ea;
    margin-left: 7px;
    display: flex
}

.modal-crm-team.crm-team-img img {
    padding: 3px
}

.modal-crm-team.crm-team-img button i {
    color: #dee2ea
}

.modal-crm-team button:last-child {
    border: 1px solid #0087ff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.15rem;
    line-height: 1;
    color: #0087ff;
    margin-left: 1rem
}

.menu-overflow {
    word-break: break-all;
    width: 60px;
    display: flex
}

table .table-border tr td {
    border-right: 1px solid #dee2ea
}

.wt-checkbox, .wt-radio {
    display: inline-block;
    position: relative;
    cursor: pointer;
    font-weight: 400;
    -webkit-transition: all .3s;
    transition: all .3s;
    padding-left: 20px;
}

.fixed-table .fixed-edge .wt-checkbox, .fixed-table .fixed-col .wt-checkbox {
    padding: 0
}

table .wt-checkbox {
    margin-bottom: 0;
    width: 16px;
    height: 16px;
    line-height: 1.6;
    font-weight: 700;
    color: #263038;
    font-size: .75rem
}

table td .wt-checkbox, table th:nth-child(1) .wt-checkbox, table th:nth-child(2) .wt-checkbox {
    padding: 0
}

table td .wt-checkbox {
    display: flex;
    align-items: center;
    justify-content: center
}

table td .wt-checkbox span {
    position: unset
}

wt-multi-print-checkbox .wt-checkbox {
    width: 16px;
    min-width: 16px;
    height: 100%;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto
}

wt-multi-print-checkbox .wt-checkbox span {
    position: unset;
    min-width: 16px
}

.wt-checkbox.wt-checkbox-disabled {
    opacity: .8;
    cursor: not-allowed
}

.wt-checkbox > input, .wt-radio > input {
    position: absolute;
    z-index: -1;
    visibility: hidden
}

.wt-checkbox > input, .wt-radio > input:disabled + span, .wt-radio.radio-disabled {
    opacity: .6;
    cursor: not-allowed
}

.wt-checkbox > span, .wt-radio > span {
    border-radius: 3px;
    background: 0 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    width: 16px
}

.wt-checkbox > span:after, .wt-radio > span:after {
    content: '';
    position: absolute;
    display: none
}

.wt-checkbox > input:checked ~ span {
    -webkit-transition: all .3s;
    transition: all .3s;
    background: 0 0
}

.wt-checkbox > input:checked ~ span:after, .wt-radio > input:checked ~ span:after {
    display: block
}

.wt-checkbox:hover > input:not([disabled]):checked ~ span, .wt-checkbox > input:checked ~ span {
    -webkit-transition: all .3s;
    transition: all .3s
}

.wt-checkbox > input:disabled ~ span {
    opacity: .6
}

.wt-checkbox:hover > input:not([disabled]) ~ span, .wt-checkbox > input:focus ~ span {
    -webkit-transition: all .3s;
    transition: all .3s
}

.wt-checkbox.wt-checkbox-square > span {
    border-radius: 0
}

.wt-checkbox.wt-checkbox-bold > span {
    border-width: 2px !important;
    -webkit-transition: all .3s;
    transition: all .3s
}

.wt-checkbox > span:after {
    top: 50%;
    left: 50%;
    margin-left: -2px;
    margin-top: -6px;
    width: 5px;
    height: 10px;
    border-width: 0 2px 2px 0 !important;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border: solid #0087ff
}

.wt-checkbox > input:checked ~ span {
    border: 1px solid #0087ff
}

.wt-checkbox > input:disabled ~ span {
    opacity: .6;
    cursor: not-allowed
}

.wt-checkbox > span {
    background: #e4e8ec
}

.wt-checkbox.wt-checkbox-outline > span {
    background: transparent;
    border: 1px solid #0087ff !important
}

.wt-checkbox > span:after {
    border: solid #fff
}

.wt-checkbox.wt-checkbox-outline > span:after {
    border: solid #0087ff
}

.wt-checkbox > input:focus ~ span {
    border: 1px solid transparent !important
}

.wt-checkbox > input:checked ~ span {
    background: #0087ff
}

.wt-checkbox.wt-checkbox-outline > input:checked ~ span {
    background: transparent;
    border: 1px solid #0087ff !important
}

.col-checkbox {
    text-align: center
}

.col-checkbox .wt-checkbox {
    height: 10px;
    padding: 0
}

.wt-radio-inline {
    height: 36px;
    display: flex;
    align-items: center
}

.wt-checkbox-inline .wt-checkbox, .wt-checkbox-inline .wt-radio, .wt-radio-inline .wt-checkbox, .wt-radio-inline .wt-radio {
    display: inline-block;
    margin-right: 15px
}

.wt-checkbox.wt-checkbox-outline > span {
    -webkit-box-shadow: 0 3px 20px 0 #716aca1c;
    box-shadow: 0 3px 20px 0 #716aca1c
}

.wt-radio > span {
    border: 1px solid #bdc3d4;
    border-radius: 50% !important
}

.wt-radio > span:after {
    border: solid #0087ff;
    background: #0087ff;
    top: 50%;
    left: 50%;
    margin-left: -3px;
    margin-top: -3px;
    height: 6px;
    width: 6px;
    border-radius: 100% !important
}

.wt-checkbox.wt-checkbox-single {
    display: inline-flex;
    padding: 0;
    margin: 0
}

.wt-checkbox.wt-checkbox-single span {
    position: relative
}

.wt-alert {
    position: absolute;
    z-index: 99998;
    width: fit-content;
    left: 0;
    right: 0;
    top: 4%;
    font-size: .9rem;
    line-height: 24px;
    overflow-y: auto;
    max-height: 200px;
    min-height: 50px;
    max-width: 94%;
    height: auto;
    margin: auto;
    padding: .75rem 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    box-shadow: 0 3px 5px -1px #000f 0 6px 10px 0 #000f 0 1px 18px 0 #0000001f;
    padding-right: 2.5rem
}

.wt-alert .wt-alert-icon i {
    font-size: 2rem
}

.wt-alert-text {
    font-size: .9rem;
    font-size: .9rem;
    margin-left: .6rem;
    line-height: 2.2
}

.wt-alert-close {
    outline: 0 !important;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 10px;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    float: right;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    opacity: .6
}

.wt-alert-close:hover {
    opacity: 1
}

.wt-alert-info {
    background-color: #0087ff;
    border-color: #36a3f7;
    color: #fff;
    font-weight: 400
}

.wt-alert-success {
    background-color: #34bfa3;
    border-color: #34bfa3;
    color: #fff;
    font-weight: 400
}

.wt-alert-warning {
    background-color: #f0ad4e;
    border-color: #efb35d;
    color: #fff;
    font-weight: 400
}

.wt-alert-danger {
    color: #fff;
    background-color: #f66e84;
    border-color: #f55f78
}

.wt-flip-box-wrapper, .wt-flip-box-wrapper * {
    box-sizing: border-box
}

.wt-flip-box-front, .wt-flip-box-back {
    border-radius: 20px
}

.wt-flip-box {
    position: relative;
    display: inline-block;
    width: 100%
}

.wt-flip-box-front, .wt-flip-box-back {
    height: 100%;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: -webkit-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.wt-flip-box-front-inner, .wt-flip-box-back-inner {
    flex-shrink: 0;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.wt-flip-box-back-inner .flag-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.wt-flip-box-back-inner .flag-container img {
    width: 32px
}

.wt-flip-box-back-inner .flag-container a:after, .wt-flip-box-back-inner .flag-container a:before {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -2px;
    width: 4px;
    height: 4px;
    background: #686e87;
    border-radius: 100%;
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 0
}

.wt-flip-box-back-inner .flag-container a:after {
    left: -16px
}

.wt-flip-box-back-inner .flag-container a:before {
    right: -16px
}

.wt-flip-box-back-inner .flag-container a.active:after, .wt-flip-box-back-inner .flag-container a.active:before {
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 1
}

.wt-flip-box-back-inner .flag-container a.active {
    position: relative
}

.wt-flip-box-front {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg)
}

.wt-flip-box-back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.wt-flip-box-front.transform {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg)
}

.wt-flip-box-back.transform {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg)
}

.wt-flip-box-front.re-transform {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg)
}

.wt-flip-box-back.re-transform {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg)
}

.wt-flip-box-wrapper.hover-box-reverse .wt-flip-box-front {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.wt-flip-box-wrapper.hover-box-reverse .wt-flip-box-back {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg)
}

.accounting-container input {
    max-width: 200px
}

table.tax-declaration input {
    background: #fff !important;
    border: .5px solid #dee2ea !important
}

table.tax-declaration td, table.tax-declaration th {
    padding: 0 1rem
}

.import-box {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 70px;
    left: 50px;
    background: #fff;
    box-shadow: 8px 10px 15px 0 #0003;
    border-radius: 3px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.import-box .modal-close {
    right: 10px;
    top: 10px
}

.import-box .title {
    font-size: 16px;
    color: #676767;
    line-height: 50px;
    height: 50px;
    border-bottom: 1px solid #dee2ea;
    text-align: center
}

.import-box .dropzone {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100px;
    height: 80px;
    border: 1px dashed #bdbdbd;
    border-radius: 3px;
    text-align: center;
    overflow: hidden;
    margin: 30px auto 20px;
    z-index: 1
}

.import-box .dropzone.is-dragover {
    border-color: #666;
    background: #eee
}

.import-box .dropzone .item {
    display: table-cell;
    vertical-align: middle
}

.import-box .dropzone .upload {
    height: 50px
}

.import-box .dropzone .filename {
    display: block;
    color: #676767;
    font-size: 14px;
    line-height: 18px
}

.import-box .dropzone .input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0
}

.import-box .upload-btn {
    position: absolute;
    width: 120px;
    height: 34px;
    left: 90px;
    bottom: 20px
}

.import-box .bar {
    position: absolute;
    z-index: 1;
    width: 300px;
    height: 3px;
    top: 49px;
    left: 0;
    background: #6ECE3B;
    transition: all 3s ease-out;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.import-box .bar.active {
    -webkit-transform: scaleX(1) translate3d(0, 0, 0);
    transform: scaleX(1) translate3d(0, 0, 0)
}

.import-box .syncing {
    position: absolute;
    top: 130px;
    left: 134px;
    opacity: 0
}

.import-box .syncing.active {
    -webkit-animation: syncing 3.2s ease-in-out;
    animation: syncing 3.2s ease-in-out
}

.import-box .done {
    position: absolute;
    top: 130px;
    left: 132px;
    opacity: 0
}

.import-box .done.active {
    -webkit-animation: done .5s ease-in 3.2s;
    animation: done .5s ease-in 3.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes syncing {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    10% {
        opacity: 1
    }
    90% {
        opacity: 1
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        opacity: 0
    }
}

@keyframes syncing {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    10% {
        opacity: 1
    }
    90% {
        opacity: 1
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        opacity: 0
    }
}

@-webkit-keyframes done {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes done {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.period-toggle {
    top: 85%;
    margin-right: 0 !important
}

.period-toggle ul li {
    justify-content: center
}

.settings-search {
    background: #ffffff73 url(../../../public/svg/search.svg) no-repeat 5% 50%;
    background-size: 26px 26px;
    padding: 4px 4px 4px 35px;
    width: 100%;
    font-size: .8rem;
    border-radius: 1rem;
    box-shadow: none
}

.settings-box {
    display: flex;
    height: 110px;
    align-items: center;
    border-radius: 4px;
    padding: 0 15px;
    margin: 10px;
    background: #f7f7f7;
    outline: none;
    cursor: pointer;
    -webkit-box-shadow: 0 1px 14px 1px #45414e0a;
    box-shadow: 0 1px 14px 1px #45414e0a;
    position: relative;
    transition: .5s ease
}

.settings-box:hover {
    background: linear-gradient(135deg, #fff6, #0087ff) #0087ff !important;
    color: #fff
}

.settings-box.selected {
    background: linear-gradient(135deg, #fff6, #0087ff) #0087ff !important;
    color: #fff;
    box-shadow: #0000003d 0 3px 8px
}

.settings-box i {
    font-size: 3.2rem;
    line-height: 0;
    margin-right: 8px;
    align-items: center
}

.settings-box h3 {
    font-size: 1rem;
    margin: .2rem 0
}

.settings-box.mini {
    flex-direction: column;
    justify-content: center;
    margin: 6px
}

.settings-box.mini:not(.selected):hover {
    background: #f7f7f7 !important;
    border: 1px solid #0087ff;
    color: #4e5d6c
}

.settings-box.mini i {
    margin-right: 0
}

.settings-box.mini h3 {
    font-size: .8rem;
    text-align: center
}

.settings-box.mini.logo img {
    width: 85%;
    position: relative;
    z-index: 2
}

.settings-box.mini.logo.selected:after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    top: 2px;
    bottom: 2px;
    background: #f7f7f7;
    border-radius: 3px;
    z-index: 1
}

.settings-box.mini.logo:not(.selected):hover {
    background: #fbfbfb !important;
    border: none;
    color: #4e5d6c;
    transition: .3s ease;
    box-shadow: #0000003d 0 3px 8px
}

@media (max-width: 768px) {
    .settings-box {
        margin: 6px 6px 0;
        height: 76px
    }

    .settings-box i {
        font-size: 3.3rem
    }

    .settings-box i:before {
        top: -7px
    }

    .settings-box h3 {
        font-size: 1rem
    }
}

@media (min-width: 1366px) {
    .settings-box.mini h3 {
        margin-top: 6px;
        margin-bottom: 0
    }
}

@media (min-width: 1600px) {
    .settings-box.mini {
        padding: 15px;
        margin: 10px
    }
}

.settings-row {
    display: inline-flex;
    flex-flow: wrap;
    align-items: center;
    width: 100%;
    padding: .5rem 0;
    line-height: 35px;
    border-bottom: .07rem dashed #ebedf2
}

.settings-row h1 {
    font-size: .825rem;
    text-transform: capitalize;
    margin: 0;
    padding: 0;
    line-height: 16px;
    color: #263038
}

.settings-row p {
    margin: 0;
    padding: 0;
    font-size: .8rem;
    line-height: 16px;
    margin-top: 4px
}

.settings-row select, .settings-row input[type="button"], .settings-row input[type="checkbox"], .settings-row input[type="radio"], .settings-row input[type="text"], .settings-row input[type="password"], .settings-row wt-datepicker {
    float: right;
    max-width: 140px;
    font-size: .8rem
}

.settings-row .group-input-flex > span {
    font-size: .8rem !important
}

.settings-row label {
    font-size: .8rem !important;
    font-weight: 400;
    color: #263038;
    padding-bottom: .1rem
}

.settings-row wt-autocomplete input {
    max-width: 140px !important
}

.settings-row .wt-switch {
    float: right
}

.settings-row .wt-radio-inline {
    float: right;
    line-height: 18px;
    display: flex;
    align-items: center
}

.settings-row .wt-radio-inline .wt-radio {
    padding-bottom: 0;
    margin-bottom: 0;
    padding-left: 20px;
}

.settings-row .wt-checkbox {
    display: flex;
    color: #4e5d6c;
    margin-bottom: 5px;
    line-height: 18px;
    font-weight: 400;
    font-size: .8rem
}

.color-palette {
    font-size: .875em;
    text-align: center;
    display: inline-table;
    width: 100%;
    max-width: 40em;
    background: #fff;
    padding: 2px;
    border-radius: .35em;
    box-shadow: 0 .5em 1.5em #00000026
}

.color-palette label {
    -webkit-tap-highlight-color: #ffffff80;
    transition: all .2s ease-in-out;
    display: table-cell;
    cursor: pointer;
    vertical-align: middle;
    padding: .5em 1em;
    text-transform: capitalize;
    letter-spacing: -.5em;
    color: transparent !important;
    opacity: .35;
    width: 7%;
    background-image: linear-gradient(#ffffff1a, #0000001a)
}

.color-palette label.dark {
    background-color: #404143;
    -webkit-tap-highlight-color: #404143
}

.color-palette label.red {
    background-color: #ff737e;
    -webkit-tap-highlight-color: #ff737e
}

.color-palette label.orange {
    background-color: #ff842d;
    -webkit-tap-highlight-color: #ff842d
}

.color-palette label.yellow {
    background-color: #ffc444;
    -webkit-tap-highlight-color: #ffc444
}

.color-palette label.green {
    background-color: #4fc694;
    -webkit-tap-highlight-color: #4fc694
}

.color-palette label.blue {
    background-color: #0087ff;
    -webkit-tap-highlight-color: #0087ff
}

.color-palette label.purple {
    background-color: #5d78ff;
    -webkit-tap-highlight-color: #5d78ff
}

.color-palette label.pink {
    background-color: #f8adb5;
    -webkit-tap-highlight-color: #f8adb5
}

.color-palette label:first-of-type {
    border-radius: .25em 0 0 .25em
}

.color-palette label:last-of-type {
    border-radius: 0 .25em .25em 0
}

.color-palette label:hover {
    opacity: 1;
    color: #fff !important;
    letter-spacing: normal
}

.color-palette input {
    display: none
}

.color-palette input:checked + label {
    width: 49%;
    opacity: 1;
    color: #fff !important;
    letter-spacing: normal
}

.wt-badge {
    background-color: #e9ebef;
    position: relative;
    color: #fff;
    border-radius: .25rem;
    letter-spacing: .6px;
    padding: 1px 10px;
    font-size: .75rem;
    line-height: 18px;
    min-height: 20px;
    min-width: 20px;
    vertical-align: middle;
    text-align: center;
    display: inline-block;
    margin-right: 5px
}

.wt-badge.crossed {
    padding: 1px 18px 1px 10px
}

.wt-badge i.ion-android-close {
    position: absolute;
    right: 5px;
    top: 0;
    cursor: pointer
}

.wt-badge-outline {
    background: transparent;
    border: 1px solid #dee2ea
}

.wt-badge-outline:hover {
    border-color: #0087FF
}

td wt-table-status .wt-badge {
    margin-left: 5px
}

td wt-table-status:first-child .wt-badge {
    margin-left: 0
}

.custom-table {
    height: auto;
    width: 100%;
    overflow: scroll
}

.custom-table table {
    border-collapse: collapse;
    width: 100%
}

.custom-table tr th {
    background-color: #f8f9fc;
    color: #263038;
    top: 0;
    margin: 0;
    height: 36px;
    font-size: .75rem;
    line-height: 36px
}

.custom-table td, .custom-table th {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    height: 36px;
    font-size: .75rem;
    padding: 0 5px
}

.custom-table tbody tr td input, .custom-table tbody tr td select {
    height: 30px
}

.wt-accordion {
    height: calc(100% - 2.2rem - 2.2rem)
}

.wt-accordion .heading {
    background-color: #fdfdfd;
    border-bottom: 1px solid #dee2ea;
    display: table;
    width: 100%;
    overflow: hidden;
    -webkit-transition: all .3s;
    transition: all .3s;
    cursor: pointer
}

.wt-accordion .heading div {
    padding: 1rem 2rem
}

.wt-accordion .heading:hover {
    background-color: #f4f5f8
}

.wt-accordion .heading .accordion-icon {
    display: table-cell;
    vertical-align: middle;
    line-height: 0;
    padding-right: 1rem;
    display: inline-block;
    font-size: 2rem
}

.wt-accordion .heading .accordion-text {
    vertical-align: middle;
    width: 100%;
    font-size: 1rem
}

.wt-accordion .box {
    padding: 1.5rem 2rem
}

.wt-accordion .box ul li {
    list-style: none;
    font-size: .9rem;
    padding: .5rem;
    border: 1px solid #dee2ea;
    border-radius: 5px;
    margin-bottom: .5rem;
    background: #fdfdfd
}

.search-input {
    position: relative;
    padding: 10px;
    height: 3.75rem
}

.search-input input {
    height: 32px;
    width: 100%;
    border: none;
    padding: 3px 10px;
    background: #fff9;
    border-radius: 4px
}

.search-input input:focus {
    outline: none;
    background: #fff
}

.search-input i {
    position: absolute;
    z-index: 4;
    right: 22px;
    font-size: 1.25rem;
    top: 16px;
    color: #616161
}

svg#pixel-ruler {
    position: absolute;
    top: 0;
    width: 100%;
    height: 200%;
    margin: 0;
    border: 0;
    padding: 0;
    overflow: hidden
}

.modal-dialog-centered {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - (.5rem * 2))
}

.invoice-design .tab-inner-profile {
    height: 64px
}

.pos-list-tab .wt-frame-tab {
    margin: 0 !important
}

.pos-list-tab .scrtabs-tab-scroll-arrow, .pos-list-tab .scrtabs-tab-container {
    height: 50px
}

table.dataTable {
    width: 100% !important;
    border: none !important
}

table.dataTable thead th, table.dataTable thead td {
    padding: 0 5px !important;
    border: none !important
}

table.dataTable tbody th, table.dataTable tbody td {
    padding: 0 2px !important
}

.label-dropdown {
    border: 1px solid #eee;
    border-radius: .25rem;
    display: inline-block;
    cursor: pointer;
    position: relative;
    float: left
}

.label-dropdown:hover {
    border-color: #0087FF
}

.label-dropdown .dropdown {
    padding: 0 0 0 .1875rem;
    display: inline-block;
    float: left;
    font-size: .8rem
}

.label-dropdown .dropdown .dropdown-menu {
    z-index: 9999
}

.label-dropdown .dropdown button {
    color: #3d4146;
    background-color: transparent;
    border-color: transparent;
    font-size: .75rem;
    padding: .3rem 1rem .3rem 0
}

.label-dropdown .dropdown button:hover, .label-dropdown .dropdown button:focus, .label-dropdown .dropdown button:active {
    color: #3d4146;
    background-color: transparent;
    border-color: transparent
}

.label-dropdown .dropdown button:after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .1em;
    content: "\f123";
    font-family: "Ionicons";
    font-size: .55rem;
    position: inherit
}

.label-dropdown > span {
    font-size: .75rem;
    line-height: 1.7rem;
    font-weight: 400;
    padding: 0 0 0 .6875rem;
    color: #a5a5a5;
    margin: 0;
    display: inline-block;
    float: left
}

.clist .label-dropdown + small {
    line-height: 1.8rem
}

.icon-circle {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    line-height: 1px;
    display: inline-block
}

.accordion-inner-panel {
    background: #fdfdfd;
    border-radius: .25rem;
    -webkit-box-shadow: 0 0 13px 0 #523f690d;
    box-shadow: 0 0 13px 0 #523f690d;
    margin: 0 1rem 1rem
}

.accordion-inner-panel .accordion-panel-header {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    position: relative;
    padding: 0 1rem;
    border-bottom: 1px solid #ebedf2;
    min-height: 60px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}

.accordion-inner-panel .accordion-panel-header .text {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.accordion-inner-panel .accordion-panel-header .text h2 {
    font-size: .825rem;
    font-weight: 500;
    text-transform: capitalize;
    white-space: nowrap;
    color: #263038;
    margin: 0;
    padding: 0;
    line-height: 1;
    white-space: nowrap;
    display: block;
    text-align: left
}

.accordion-inner-panel .accordion-panel-header .text h3 {
    margin: 0;
    padding: 0;
    font-size: .8rem;
    line-height: 1.75;
    color: #97a8c3
}

.accordion-inner-panel .accordion-panel-header .toolbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: end;
    align-content: flex-end
}

.accordion-inner-panel .accordion-panel-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0 1rem;
    border-radius: 4px
}

.customer-branch .branch-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed #ebedf2
}

.customer-branch .branch-row:last-child {
    border-bottom: none
}

.customer-branch .branch-row .branch-item:first-child {
    text-align: left
}

.customer-branch .branch-row .branch-item:last-child {
    text-align: right
}

.wt-breadcrumb {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
    justify-content: flex-start;
    height: 20px;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    font-size: .8rem;
}

.wt-breadcrumb .item {
    padding: 0 .2rem
}

.wt-breadcrumb .item:not(:last-child):after {
    font-family: Ionicons;
    content: "\f3d3";
    margin-left: .4rem;
    display: inline-block
}

.wt-breadcrumb .item a, .wt-breadcrumb .item span {
    color: #838ba9
}

.wt-breadcrumb .item a:hover {
    color: #0087FF
}

.wt-breadcrumb .item a i {
    font-size: 1.1rem;
    line-height: 0
}

.page-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: #ebeef3
}

.page-header h1 {
    font-size: 1rem;
    display: inline-block;
    line-height: 20px;
    margin: 0;
    padding-right: 1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.page-header .page-title {
    display: flex;
    align-items: center;
    height: 38px;
    overflow: auto;
    width: 100%
}

wt-header.show-mobile .page-title {
    display: flex !important
}

.hide-title .page-header .page-title {
    display: none !important
}

.wt-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 350px;
    height: 100%;
    z-index: 100000;
    background-color: #fbfbfb;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translateX(100%);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transition: all .1s ease-in-out;
    -webkit-box-shadow: -20px 0 150px 20px #00000038;
    box-shadow: -20px 0 150px 20px #00000038
}

.wt-panel-container {
    display: flex;
    flex-direction: column;
    height: 100vh
}

.wt-panel .wt-panel-head {
    flex: 0 0 auto;
    padding: 22px 1rem .3rem
}

.wt-panel .wt-panel-heading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: .5rem
}

.wt-panel .wt-panel-heading .title {
    font-size: 1.2rem;
    font-weight: 500;
    color: #464457;
    margin: 0;
    padding: 0
}

.wt-panel .wt-panel-heading .close {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 28px;
    height: 28px;
    background-color: #f4f5f7;
    -webkit-transition: all .3s;
    transition: all .3s;
    border-radius: 4px
}

.wt-panel .wt-panel-heading .close i {
    -webkit-transition: all .3s;
    transition: all .3s;
    font-size: .8rem;
    color: #a7abc3
}

.wt-panel .wt-panel-heading .wt-checkbox-large span {
    height: 28px
}

.wt-panel .wt-panel-body {
    position: relative;
    overflow-y: auto;
    width: 100%;
    flex: 1 1 auto
}

.wt-panel .wt-panel-body .circle-add-btn, .wt-frame-bottom .circle-add-btn {
    position: fixed;
    bottom: 18px;
    left: calc(50% - 25px);
    width: 50px;
    height: 50px;
    z-index: 1;
    font-size: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .8;
    border-radius: 50%;
    transition: all .4s ease-in-out;
    box-shadow: 0 0 20px 1px #0f2f5f66
}

.wt-panel .wt-panel-body .circle-add-btn:hover, .wt-frame-bottom .circle-add-btn:hover {
    opacity: 1;
    bottom: 42px
}

.wt-panel .wt-panel-body .circle-add-btn i, .wt-frame-bottom .circle-add-btn {
    line-height: 0
}

.wt-panel .wt-panel-footer {
    flex: 0 0 auto
}

.wt-panel .left-content-inner-bottom2 {
    position: relative;
    z-index: 3
}

@media (max-width: 350px) {
    .wt-panel {
        width: 310px
    }
}

@media (min-width: 767px) and (max-width: 1439px) {
    .wt-panel {
        width: 420px
    }
}

@media (min-width: 1440px) {
    .wt-panel {
        width: 600px
    }
}

.side-list .wt-checkbox {
    font-size: .85rem;
    font-weight: 400;
    line-height: 18px;
    margin-top: .5rem
}

.side-list .clist-content {
    position: relative;
    border: 1px solid #f0f3f7
}

.side-list .clist-content .toggle-accordion {
    visibility: hidden;
    position: absolute;
    right: 0;
    top: 50%;
    bottom: 0;
    width: 30px;
    background: #ffffffd1;
    border: none
}

.side-list .clist-content .toggle-accordion:hover {
    background: #fff;
    cursor: pointer
}

.side-list .clist-content .toggle-accordion i {
    font-size: 14px
}

.side-list .clist-content:hover .toggle-accordion {
    visibility: visible;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.side-list .fixed-table th {
    white-space: pre-wrap
}

body.side-list-opened .wt-content.content {
    margin-right: 0
}

@media (max-width: 1299px) {
    body.side-list-opened .wt-content.content {
        margin-right: 0
    }
}

.wt-frame-top .user-box {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center
}

.wt-frame-top .header-button {
    width: 36px;
    height: 36px;
    padding: 0;
    margin-right: 3px;
    background: transparent;
    border-radius: .25rem
}

.wt-frame-top .header-button:hover, .wt-frame-top .header-button:focus {
    background-color: #4d59950f
}

.print-preferences {
    width: 250px;
    padding: 1rem
}

.print-preferences tr:last-child {
    border-bottom: 0 !important
}

.print-preferences tr td {
    text-align: center
}

.print-preferences tr td:first-child {
    text-align: left
}

.print-preferences td i {
    font-size: 18px;
    padding: 6px;
    cursor: pointer
}

.fixed-table .btn-muadil {
    font-size: 11px;
    line-height: 10px;
    padding: 5px;
    color: #111;
    font-family: montserrat;
    border: none
}

.tab-wrapper {
    display: flex
}

.scrollmenu {
    white-space: nowrap;
    position: relative;
    width: 100%;
    height: 40px;
    overflow: auto;
    padding: 0 .5rem
}

.scrollmenu::-webkit-scrollbar {
    display: none
}

.scrollmenu a {
    display: inline-block;
    color: #686e87;
    text-align: center;
    padding: 0 14px;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 39px;
    height: 39px;
    transition: none
}

.scrollmenu .scrollmenu-container {
    display: inline-block;
    border-bottom: 1px solid #dee2ea
}

.scrollmenu .scrollmenu-container-end {
    float: right
}

.scrollmenu .scrollmenu-container-start {
    float: left
}

.scrollmenu a.active {
    color: #0087ff;
    border-bottom: 2px solid #0087ff
}

.scrollmenu-arrow-right {
    top: 0;
    right: 0;
    background: linear-gradient(90deg, #fff0 0%, #ebeef3ff 80%, #ebeef3ff 100%);
    justify-content: end
}

.scrollmenu-arrow-right span {
    margin-right: 4px
}

.scrollmenu-arrow-left {
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #ebeef3ff 0%, #ebeef3ff 20%, #fff0 100%);
    justify-content: start
}

.scrollmenu-arrow-left span {
    margin-left: 4px
}

div.tab-wrapper .scrollmenu-arrow {
    position: absolute;
    color: #3699FF !important;
    cursor: pointer;
    font-size: 18px;
    height: 40px;
    width: 25px;
    z-index: 1;
    align-items: center;
    line-height: 0
}

.wt-frame-tab.setting, .wt-frame-tab.web {
    height: 100%;
    margin: 0
}

.wt-frame-tab.setting .tab-underline, .wt-frame-tab.web .tab-underline {
    display: none !important
}

.wt-frame-tab.setting .scrollmenu, .wt-frame-tab.web .scrollmenu {
    height: auto
}

.wt-frame-tab.setting .scrollmenu .scrollmenu-container, .wt-frame-tab.web .scrollmenu .scrollmenu-container {
    border: 0
}

.wt-frame-tab.setting .scrollmenu a {
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: normal;
    height: 104px;
    background: #f7f7f7;
    line-height: 13px;
    padding: 16px 5px;
    margin: 6px;
    text-transform: none;
    border-radius: 4px;
    transition: none;
    box-shadow: 0 1px 14px 1px #45414e0a
}

.wt-frame-tab.setting .scrollmenu a:hover, .wt-frame-tab.setting .scrollmenu a.active {
    background: linear-gradient(0deg, #5e6cff 0%, #0087ff 100%);
    color: #fff;
    cursor: pointer
}

.wt-frame-tab.setting .scrollmenu-container {
    width: 100%
}

.wt-frame-tab.setting .scrollmenu-container wt-tab {
    width: 25%;
    float: left
}

@media screen and (max-width: 1200px) {
    .wt-frame-tab.setting .scrollmenu-container wt-tab {
        width: 33.3334%
    }
}

.wt-frame-tab.setting .scrollmenu-container wt-tab a i {
    font-size: 3.2rem;
    margin-bottom: .2rem;
    height: 50px;
    -webkit-box-align: center;
    align-items: center
}

.wt-frame-tab.web .scrollmenu a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f7f7f7;
    padding: 16px 5px;
    margin: 6px;
    text-transform: none;
    border-radius: 4px;
    -webkit-transition: none;
    transition: none;
    box-shadow: 0 1px 14px 1px #45414e0a
}

.wt-frame-tab.web .scrollmenu a:hover {
    background-color: #fff;
    cursor: pointer
}

.wt-frame-tab.web .scrollmenu a.active {
    background-color: #e1e6fd;
    color: unset
}

.wt-frame-tab.web .scrollmenu-container wt-tab.integrated a {
    position: relative;
    border: 1px solid #0087ff80
}

.wt-frame-tab.web .scrollmenu-container wt-tab.integrated a:after {
    content: "AKTİF";
    font-family: "montserrat";
    position: absolute;
    font-size: 9px;
    letter-spacing: 1px;
    line-height: 13px;
    top: -7px;
    color: #fff;
    background: #0087ff;
    padding: 0 3px;
    border-radius: 3px
}

.wt-frame-tab.web .scrollmenu-container-start {
    width: 100%
}

.wt-frame-tab.web .scrollmenu-container wt-tab {
    width: 16.666666%;
    float: left
}

@media (min-width: 1400px) {
    .wt-frame-tab.web .scrollmenu-container wt-tab {
        width: 12.5%
    }
}

.wt-frame-tab.web .scrollmenu wt-tab.gittigidiyor a {
    background-image: url(../../../public/ximages/gittigidiyor-logo.png)
}

.wt-frame-tab.web .scrollmenu wt-tab.n11 a {
    background-image: url(../../../public/ximages/n11-logo.png);
    background-size: 70%
}

.wt-frame-tab.web .scrollmenu wt-tab.kobimaster a {
    background-image: url(../../../public/ximages/kobimaster-logo.png);
    background-size: 65%
}

.wt-frame-tab.web .scrollmenu wt-tab.bembeles a {
    background-image: url(../../../public/ximages/bembeles-logo.png)
}

.wt-frame-tab.web .scrollmenu wt-tab.hepsiburada a {
    background-image: url(../../../public/ximages/hepsiburada-logo.png)
}

.wt-frame-tab.web .scrollmenu wt-tab.ciceksepeti a {
    background-image: url(../../../public/ximages/ciceksepeti-logo.png)
}

.wt-frame-tab.web .scrollmenu wt-tab.ticimax a {
    background-image: url(../../../public/ximages/ticimax-logo.png);
}

.wt-frame-tab.web .scrollmenu wt-tab.ikas a {
    background-image: url(../../../public/ximages/ikas-logo.png);
}

.wt-frame-tab.web .scrollmenu wt-tab.trendyol a {
    background-image: url(../../../public/ximages/trendyol-logo.png);
    background-size: 65%
}

.wt-frame-tab.web .scrollmenu wt-tab.epttavm a {
    background-image: url(../../../public/ximages/epttavm-logo.png);
    background-size: 65%
}

.wt-frame-tab.web .scrollmenu wt-tab.b2c a {
    background-image: url(../../../public/ximages/b2c-logo.png)
}

.wt-frame-tab.web .scrollmenu wt-tab.b2b a {
    background-image: url(../../../public/ximages/b2b-logo.png)
}

.unit-detail-container .item:not(:first-child) label {
    display: none
}

.cart-info p {
    margin: 0;
    font-size: .775rem;
    white-space: nowrap
}

.inventory-table {
    box-shadow: 0 0 17px 0 #dee2ea80
}

.inventory-table th, .inventory-table td {
    height: 32px;
    line-height: 32px;
    padding: 0 16px
}

.shape-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: .5rem;
    background: linear-gradient(135deg, #fff6, #0087ff) #0087ff;
    transition: .2s all;
    overflow: hidden;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px
}

.shape-avatar .letter-avatar {
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color: #fff;
    text-transform: uppercase
}

.shape-avatar img {
    background: #fff;
    border-radius: 3px;
    max-width: 34px;
    max-height: 34px
}

.not-found-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    background: #fff;
    -webkit-border-radius: .25rem;
    -moz-border-radius: .25rem;
    border-radius: .25rem
}

.not-found-container .title {
    font-family: 'Montserrat';
    color: #5d78ff;
    text-transform: uppercase;
    font-weight: 600
}

.not-found-container .description {
    font-size: 1rem;
    margin: 0
}

.not-found-container a {
    color: #5d78ff
}

.not-found-container svg {
    width: 200px;
    margin-bottom: 1.5rem
}

svg.add-file .st0 {
    fill: #5d78ff
}

svg.add-file .st1 {
    fill: #F2F2F2
}

svg.add-file .st2 {
    fill: #3F3D56
}

svg.add-file .st3 {
    fill: #FFF
}

svg.search-not-found .st0 {
    opacity: .5
}

svg.search-not-found .st1 {
    fill: url(#SVGID_1_)
}

svg.search-not-found .st2 {
    fill: #F2F2F2
}

svg.search-not-found .st3 {
    fill: #E0E0E0
}

svg.search-not-found .st4 {
    opacity: .7;
    fill: #5d78ff;
    enable-background: new
}

svg.search-not-found .st5 {
    fill: url(#SVGID_2_)
}

svg.search-not-found .st6 {
    fill: #F5F5F5
}

svg.search-not-found .st7 {
    fill: url(#SVGID_3_)
}

svg.search-not-found .st8 {
    fill: #FFF
}

svg.search-not-found .st9 {
    clip-path: url(#SVGID_5_)
}

svg.search-not-found .st10 {
    opacity: .4;
    fill: #5d78ff;
    enable-background: new
}

svg.search-not-found .st11 {
    fill: url(#SVGID_6_)
}

svg.search-not-found .st12 {
    fill: url(#SVGID_7_)
}

svg.search-not-found .st13 {
    clip-path: url(#SVGID_9_)
}

svg.search-not-found .st14 {
    opacity: .4;
    fill: #BDBDBD;
    enable-background: new
}

svg.search-not-found .st15 {
    fill: url(#SVGID_10_)
}

svg.search-not-found .st16 {
    fill: url(#SVGID_11_)
}

svg.search-not-found .st17 {
    fill: url(#SVGID_12_)
}

svg.search-not-found .st18 {
    fill: url(#SVGID_13_)
}

svg.search-not-found .st19 {
    fill: url(#SVGID_14_)
}

svg.search-not-found .st20 {
    fill: #5d78ff
}

svg.filter .st0 {
    fill: #CCC
}

svg.filter .st1 {
    fill: #E6E6E6
}

svg.filter .st2 {
    fill: #3F3D56
}

svg.filter .st3 {
    fill: #0087FF
}

svg.filter .st4 {
    fill: #2F2E41
}

svg.filter .st5 {
    fill: #FFB8B8
}

svg.filter .st6 {
    opacity: .3
}

.choose-customer-form {
    display: flex
}

.choose-customer-form input {
    background-color: #f4fafe;
    border-color: #0087FF
}

.choose-customer-form button {
    width: 36px;
    min-width: 36px;
    padding: 0
}

.payment-plan-checkboxes {
    display: flex;
    width: 100%;
    padding: .5rem
}

.payment-plan-checkboxes > div {
    width: 20%;
    margin: 3px
}

.autocomplete-new-add {
    background-color: #0087ff;
    color: #fff !important;
    padding: 0 !important
}

@media (max-width: 576px) {
    .autocomplete-new-add {
        position: sticky;
        bottom: 0;
        left: 0;
    }

    .autocomplete-dropdown-item.three-dots {
        text-overflow: unset;
        max-width: unset;
        width: max-content;
        border-radius: 7px;
        height: 28px;
        margin: 3px 3px;
        line-height: 30px;
    }
}

.autocomplete-new-add span {
    font-weight: 600;
    text-align: center
}

.autocomplete-new-add:hover span, .autocomplete-new-add.selected span {
    background-color: #1578cd
}

.autocomplete-new-add span:before {
    content: "\f217";
    display: inline-block;
    font-family: "Ionicons";
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1
}

.wt-popover + label + .multiplier-span input {
    border: 1px solid #fc566a
}

.multiplier-span {
    position: relative;
    display: flex
}

.multiplier-span span {
    position: absolute;
    left: 10px;
    top: 9px;
    font-size: .9rem
}

.multiplier-span span + input {
    padding-left: 1.2rem
}

.wt-frame-top .dropdown-menu.dropdown-menu-right.arrow-right {
    right: 2px
}

app-filter {
    display: flex;
    flex-direction: column;
    height: 100%
}

.mobile-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    background: #fff;
    border-top: 1px solid #dee2ea
}

.cat-container {
    width: 100%
}

wt-category-list {
    display: flex
}

.cat-container > wt-category-list > select {
    width: 20%
}

.cat-container > wt-category-list > select + wt-category-list {
    width: 80%
}

.cat-container > wt-category-list > select + wt-category-list > select {
    width: 25%
}

.cat-container > wt-category-list > select + wt-category-list > select + wt-category-list {
    width: 75%
}

.cat-container > wt-category-list > select + wt-category-list > select + wt-category-list > select {
    width: 33.33333%
}

.cat-container > wt-category-list > select + wt-category-list > select + wt-category-list > select + wt-category-list {
    width: 66.66666%
}

.cat-container > wt-category-list > select + wt-category-list > select + wt-category-list > select + wt-category-list > select {
    width: 50%
}

.cat-container > wt-category-list > select + wt-category-list > select + wt-category-list > select + wt-category-list > select + wt-category-list {
    width: 50%
}

.cat-container > wt-category-list > select + wt-category-list > select + wt-category-list > select + wt-category-list > select + wt-category-list > select {
    width: 100%
}

select.cat-select {
    margin-right: 10px;
    border: 2px solid #dee2ea;
    outline: none;
    min-width: 150px !important
}

select.cat-select:last-child {
    margin: 0
}

select.cat-select option {
    padding: 8px;
    font-size: .85rem
}

select.cat-select option:nth-child(odd) {
    background-color: #f8f9fc
}

select.cat-select option.active {
    background: #1e90ff;
    color: #fff
}

@media (min-width: 1200px) {
    select.cat-select {
        max-width: 220px
    }
}

@media (max-width: 767px) {
    .cat-container {
        flex-direction: column
    }
}

select.cat-select::-webkit-scrollbar {
    width: 8px
}

select.cat-select::-webkit-scrollbar-thumb, select.cat-select::-webkit-scrollbar-track {
    border-radius: 0
}

.mat-dialog-container .wt-container {
    background: #ebeef3
}

.ck.ck-editor {
    display: flex !important;
    flex-direction: column;
    height: 100% !important
}

.ck.ck-reset_all {
    flex: 0 0 auto;
    border: 0 !important
}

.ck.ck-icon, .ck.ck-icon * {
    color: #686e87 !important
}

.ck.ck-toolbar {
    border: 0 !important;
    border-bottom: 1px solid #dee2ea !important
}

.ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
    border: 0 !important
}

.ck.ck-editor__main {
    flex: 1 1 auto
}

.ck.ck-editor__editable {
    height: 100%
}

.ck.ck-editor__editable:focus {
    outline: 0 !important;
    border: 0 !important;
    box-shadow: none !important
}

.ck.ck-toolbar .ck.ck-toolbar__separator {
    background: #dee2ea !important
}

.fixed-table tr td .btn-icon, .fixed-table tr th .btn-icon {
    height: 30px;
    width: 30px;
    min-width: 30px;
    margin: 0 auto;
    font-size: 1rem
}

table tr td .btn-icon:hover, table tr th .btn-icon:hover {
    color: #0087ff;
    background: #d8e3f1
}

.sales-list tr td .group-input-flex span {
    height: 30px;
    font-size: .75rem;
    padding: 0 .5rem;
    border: 1px solid #eaecf1;
    background: #eceef3;
    box-shadow: inset 0 1px 1px #96c8fe13
}

table tr.adding-row {
    background-color: #f4fafe !important
}

table tr.adding-row input, table tr.adding-row select, table tr.adding-row mat-select, table tr.adding-row .group-input button {
    border-color: #0a8cf0
}

table tr.adding-row button.btn {
    color: #fff;
    padding: 6px 12px;
    font-weight: 500;
    font-family: "Nunito";
    background-color: #36a3f7;
    border-color: #36a3f7
}

table tr.adding-row button.btn:hover {
    background-color: #1192f6;
    border-color: #0a8cf0
}

.search-input-group {
    display: flex
}

.search-input-group input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0
}

.search-input-group button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.unit-price-item:not(:last-child) {
    border-bottom: 1px dashed #ebedf2
}

.search-box {
    position: relative;
    display: flex;
}

.search-block {
    padding: 0 14px 7px 14px;
}

.search-box input, .search-box button {
    height: 36px
}

.search-box input {
    padding: .6rem .6rem .5rem;
    width: 100%;
    color: #7a869e;
    outline: 0;
    background: #fff;
    border-radius: .18rem 0 0 .18rem;
    border: 1px solid #eceef3
}

.search-box input:focus {
    background-color: #f4f5f7
}

.search-box input + button {
    position: absolute;
    z-index: 5;
    right: 10px;
    top: 13px;
    min-width: auto;
    height: auto;
    line-height: 0
}

.search-box input + button i {
    font-size: 12px
}

.search-box div + button {
    border-radius: 0;
    background: #eceef3;
    color: #4e5d6c;
    border: 1px solid #eceef3;
    border-left: 0
}

.search-box div + button + button:not(.ml-1) {
    border-radius: 0 3px 3px 0
}

.search-box button {
    min-width: 40px;
    padding: 0
}

.search-box button i {
    vertical-align: middle;
    line-height: 1;
    font-size: 1.2rem
}

.search-dropdown .search-box > input {
    border-radius: .25rem;
    background: #fff;
    padding: 10px 12px;
    height: auto
}

.search-dropdown .search-box > input:focus {
    background: #fff;
    border: none
}

.custom-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 1rem;
    background: #fbfbfb;
    border: 1px solid #ebeef3;
    border-radius: .25rem
}

.custom-panel-header {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem;
    height: 45px;
    background: #f4f6f8
}

.custom-panel-header h2 {
    font-size: 1rem;
    margin: 0
}

.custom-panel-header input, .custom-panel-header button {
    height: 32px
}

.custom-panel-header input:focus {
    background: #f4f5f7
}

.custom-panel-body {
    padding: .5rem .25rem 0;
    height: 100px;
    overflow: auto
}

.custom-panel-body .item {
    position: relative;
    height: 28px;
    margin-right: 7px;
    margin-bottom: 7px;
    border: 1px solid #dee2ea;
    border-radius: .18rem;
    overflow: hidden;
    display: inline-block
}

.custom-panel-body .item:hover > button {
    opacity: 1
}

.custom-panel-body .item label input[type="checkbox"] + span {
    background: #fff url(../SVG/check-box-empty.svg) no-repeat;
    background-size: 15px 15px;
    background-position: 5px 50%
}

.custom-panel-body .item label input[type="checkbox"]:checked + span {
    background: #0087FF url(../SVG/check-box-full.svg) no-repeat;
    background-size: 15px 15px;
    background-position: 5px 50%;
    color: #fff
}

.custom-panel-body .item label input[type=checkbox] {
    display: none
}

.custom-panel-body .item label input[type=checkbox]:disabled + span {
    opacity: .6;
    cursor: not-allowed
}

.custom-panel-body .item label span {
    background-color: #FFF;
    font-weight: 400;
    color: #7a869e;
    font-size: .875rem;
    text-decoration: none;
    text-align: left;
    width: auto;
    padding: 5px 25px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    transition: background-color 150ms ease-in;
    height: 26px;
    line-height: 18px
}

.custom-panel-body .item a:hover {
    color: #4e5d6c
}

.custom-panel-body .item button {
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    border: 1px solid transparent;
    height: 26px;
    color: #5d78ff;
    width: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem
}

.custom-panel-body .item a i:hover {
    opacity: 1
}

.variant-title {
    display: flex;
    align-items: center
}

.variant-title:hover > button {
    opacity: 1
}

.variant-title > button {
    padding: 5px;
    height: 25px;
    width: 25px;
    font-size: 10px;
    opacity: 0;
    margin-left: 5px
}

.filter-bubble {
    position: relative
}

.filter-bubble:after {
    content: "";
    position: absolute;
    right: 2px;
    top: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0087ff
}

.wt-sweetalert {
    background: #fff;
    padding: 2rem;
    height: 100%
}

.wt-sweetalert-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.wt-sweetalert-header .title {
    position: relative;
    max-width: 100%;
    margin: 0 0 1rem;
    padding: 0;
    color: #595959;
    font-size: 1.7em;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    word-wrap: break-word
}

.wt-sweetalert-header i {
    position: relative;
    display: flex;
    justify-content: center;
    font-size: 5rem;
    margin: 2rem;
    font-family: Flaticon;
    font-style: normal;
    line-height: 1;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.wt-sweetalert-header.danger {
    color: #f27474
}

.wt-sweetalert-header.question {
    color: #87adbd
}

.wt-sweetalert-header.question i:not(.noContent):before {
    content: "\f16c"
}

.wt-sweetalert-header.warning {
    color: #f8bb86
}

.wt-sweetalert-header.warning i:not(.noContent):before {
    content: "\f16a"
}

.wt-sweetalert-header.info {
    color: #3fc3ee
}

.wt-sweetalert-header.info i:not(.noContent):before {
    content: "\f16d"
}

.success-icon {
    display: inline-block;
    width: 4em;
    height: 4em;
    margin: 2rem;
    font-size: 20px;
    border-radius: 50%;
    border: 4px solid #96df8f;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation: showSuccess 180ms ease-in-out;
    animation: showSuccess 180ms ease-in-out;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.success-icon__tip, .success-icon__long {
    display: block;
    position: absolute;
    height: 4px;
    background-color: #96df8f;
    border-radius: 10px
}

.success-icon__tip {
    width: 1.2em;
    top: 2.15em;
    left: .7em;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-animation: tipInPlace 300ms ease-in-out;
    animation: tipInPlace 300ms ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 180ms;
    animation-delay: 180ms;
    visibility: hidden
}

.success-icon__long {
    width: 2em;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 1.85em;
    left: 1.375em;
    -webkit-animation: longInPlace 140ms ease-in-out;
    animation: longInPlace 140ms ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    visibility: hidden;
    -webkit-animation-delay: 440ms;
    animation-delay: 440ms
}

@-webkit-keyframes showSuccess {
    from {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes showSuccess {
    from {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes tipInPlace {
    from {
        width: 0;
        top: 0;
        left: -.8em
    }
    to {
        width: 1.2em;
        top: 2.15em;
        left: .7em;
        visibility: visible
    }
}

@keyframes tipInPlace {
    from {
        width: 0;
        top: 0;
        left: -.8em
    }
    to {
        width: 1.2em;
        top: 2.15em;
        left: .55em;
        visibility: visible
    }
}

@-webkit-keyframes longInPlace {
    from {
        width: 0;
        top: 2.55em;
        left: 1.3em
    }
    to {
        width: 2em;
        top: 1.85em;
        left: .4em;
        visibility: visible
    }
}

@keyframes longInPlace {
    from {
        width: 0;
        top: 2.55em;
        left: 1.6em
    }
    to {
        width: 2em;
        top: 1.85em;
        left: 1.2em;
        visibility: visible
    }
}

.wt-sweetalert-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: #74788d;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    word-wrap: break-word;
    overflow-y: auto;
    max-height: 275px;
}

.wt-sweetalert-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 1.5rem auto 1rem
}

.wt-sweetalert-actions button {
    font-size: 1rem;
    font-weight: 600;
    padding: .7rem 1.5rem
}

.wt-sweetalert-actions button:not(:first-child) {
    margin-left: 1rem
}

.wt-sweetalert-container .mat-dialog-container {
    -webkit-animation: mat-dialog-container .3s;
    animation: dialog-animation .3s
}

@-webkit-keyframes dialog-animation {
    0% {
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }
    45% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    80% {
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes dialog-animation {
    0% {
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }
    45% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    80% {
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.wt-sweetalert-backdrop {
    background-color: #0003
}

.card-statement {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3rem)
}

.card-statement-hero {
    flex: 0 0 auto;
    background: linear-gradient(-10deg, #0087ff 0%, #5e6cff 100%);
    color: #fff;
    padding: 1rem
}

.card-statement-hero .btn-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #fff;
    font-size: 1.4rem
}

.card-statement-hero .btn-icon:hover {
    color: #5d78ff;
    background-color: #fff
}

.card-statement-hero .card-number span {
    font-size: 20px;
    line-height: 24px;
    padding-left: 4px;
    font-weight: 300;
    font-family: Montserrat
}

.card-statement-hero .card-details {
    display: flex;
    flex-direction: column;
    color: #fffc
}

.card-statement .card .card-collapse .clist {
    background: #f4f8fb
}

.card-statement .card .card-collapse .clist-customer-1 {
    padding: 8px 0 8px 10px;
    height: auto
}

.card-statement .clist-edit-delete h1 {
    font-family: Montserrat;
    font-size: 1.2rem
}

.card-statement .modal-center {
    flex: 1 1 auto;
    height: 100%
}

.card-statement .modal-footer {
    flex: 0 0 auto
}

.wt-avatar {
    position: relative;
    display: inline-block;
    margin: 0 20px 20px 0
}

.settings-row .wt-avatar {
    float: right;
    margin: 0
}

.wt-avatar .wt-avatar-holder {
    width: 100px;
    height: 100px;
    border-radius: 3px;
    border: 1px dashed #dee2ea;
    background-image: url('/mvc/App/SVG/photo404.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.wt-avatar.active .wt-avatar-holder {
    border: none;
    -webkit-box-shadow: 0 0 13px 0 #0000001a;
    box-shadow: 0 0 13px 0 #0000001a
}

.wt-avatar .wt-avatar-upload {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background-color: #fff;
    -webkit-box-shadow: 0 0 13px 0 #0000001a;
    box-shadow: 0 0 13px 0 #0000001a;
    -webkit-transition: all .3s;
    transition: all .3s
}

.wt-avatar .wt-avatar-upload:hover {
    background: #e6eef5
}

.wt-avatar.active .wt-avatar-upload {
    right: -10px;
    top: -10px;
    width: 30px;
    height: 30px
}

.wt-avatar .wt-avatar-upload i {
    color: #0087ff;
    font-size: 1.4rem;
    line-height: 0
}

.wt-avatar.active .wt-avatar-upload i {
    font-size: .9rem
}

.wt-avatar.active .wt-avatar-upload i:before {
    content: "\f2bf"
}

.wt-avatar .wt-avatar-upload input {
    width: 0 !important;
    height: 0 !important;
    overflow: hidden;
    opacity: 0
}

.wt-avatar .wt-avatar-cancel {
    cursor: pointer;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: auto;
    right: -10px;
    bottom: -5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fc566a;
    font-size: .8rem;
    background-color: #fff;
    -webkit-box-shadow: 0 0 13px 0 #0000001a;
    box-shadow: 0 0 13px 0 #0000001a;
    display: none
}

.wt-avatar .wt-avatar-cancel:hover {
    background: #fbebed
}

app-error {
    background: #fff;
    width: 100%;
    height: 100%;
    display: block
}

.page-not-found-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-width: 1000px;
    margin: auto
}

.page-not-found-container svg {
    height: 23rem;
    max-width: 100%
}

.page-not-found-container h1 {
    font-size: 5rem;
    line-height: 6rem;
    font-weight: 600;
    color: #0087ff;
    font-family: Montserrat;
    margin-bottom: 1.5rem
}

.page-not-found-container h5 {
    font-size: 1.4rem;
    text-transform: uppercase
}

.page-not-found-container p {
    font-size: 1rem
}

@media (max-width: 768px) {
    .page-not-found-container h1 {
        font-size: 5rem;
        line-height: 5rem
    }

    .page-not-found-container svg {
        position: fixed;
        opacity: .1
    }
}

.page-not-found-container .error-404 .st0 {
    opacity: .1;
    enable-background: new
}

.page-not-found-container .error-404 .st0, .page-not-found-container .error-404 .st1 {
    fill: #0087ff
}

.page-not-found-container .error-404 .st2, .page-not-found-container .error-404 .st3 {
    fill: none;
    stroke: #535461;
    stroke-miterlimit: 10
}

.page-not-found-container .error-404 .st3 {
    stroke-width: 2
}

.page-not-found-container .error-404 .st4 {
    opacity: .25;
    enable-background: new
}

.page-not-found-container .error-404 .st5 {
    fill: url(#SVGID_1_)
}

.page-not-found-container .error-404 .st6 {
    fill: #5b5877
}

.page-not-found-container .error-404 .st7 {
    opacity: .1;
    enable-background: new
}

.page-not-found-container .error-404 .st8 {
    fill: #5f5d7e
}

.page-not-found-container .error-404 .st9 {
    opacity: .01
}

.page-not-found-container .error-404 .st10 {
    fill: #fdc2cc
}

.page-not-found-container .error-404 .st11 {
    fill: #d39999
}

.page-not-found-container .error-404 .st12 {
    fill: #865a61
}

.page-not-found-container .error-404 .st13 {
    opacity: .01;
    enable-background: new
}

.page-not-found-container .error-404 .st14 {
    fill: #fff
}

.page-not-found-container .error-404 .st15 {
    fill: #f2f5fb
}

.page-not-found-container .error-404 .st16 {
    fill: #dde0ed
}

.page-not-found-container .error-404 .st17 {
    fill: #abb1d1
}

.page-not-found-container .error-404 .st18 {
    fill: #d7666f
}

.page-not-found-container .error-404 .st19 {
    opacity: .1;
    fill: #fff;
    enable-background: new
}

.page-not-found-container .error-401 .st0 {
    fill: #535461
}

.page-not-found-container .error-401 .st1 {
    fill: #0087FF
}

.page-not-found-container .error-401 .st2 {
    opacity: .1
}

.page-not-found-container .error-401 .st3 {
    fill: #FFF
}

.page-not-found-container .error-401 .st4 {
    opacity: .1;
    enable-background: new
}

.page-not-found-container .error-401 .st5 {
    opacity: .1;
    fill: none;
    stroke: #000;
    stroke-width: 2;
    stroke-miterlimit: 10;
    enable-background: new
}

.page-not-found-container .error-401 .st6 {
    fill: #2F2E41
}

.page-not-found-container .error-401 .st7 {
    fill: #FFB8B8
}

.common-header-search-container {
    display: flex;
    flex: 0 0 auto;
    background-color: #f4f6f8;
    border-bottom: 1px solid #dee2ea;
    padding: 0 .7rem .5rem
}

.common-header-search {
    display: flex;
    position: relative;
    width: 100%;
    border: none;
    border-radius: 3px
}

.common-header-search input {
    padding: 0 10px;
    background: #fff;
    border-radius: 3px 0 0 3px
}

.common-header-search input + button {
    position: absolute;
    z-index: 5;
    right: 10px;
    top: 13px;
    min-width: auto;
    height: auto;
    line-height: 0;
    font-size: 12px
}

.common-header-search > div + button {
    color: #444;
    border: 1px solid #dee2ea;
    background: transparent;
    font-size: 1.2rem;
    line-height: 0;
    text-align: center;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 0 3px 3px 0;
    border-left: 0;
    cursor: pointer
}

.common-header-button {
    display: flex;
    align-items: center;
    margin-left: 1rem
}

.common-input-search {
    position: relative;
    height: 36px
}

.common-input-search input {
    padding-left: 26px
}

.common-input-search i {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    font-size: 18px;
    color: #616161;
    width: 30px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.mat-select-search {
    position: sticky;
    top: 0;
    z-index: 1
}

.mat-select-search input {
    background-color: #fff;
    width: 100%;
    padding-left: 25px;
    border-left: 0;
    border-right: 0
}

.mat-select-search i {
    position: absolute;
    left: 6px;
    top: 6px;
    font-size: 20px;
    z-index: 2;
    color: #686e87
}

.voucher-customer {
    position: relative;
    display: inline-flex;
    align-items: center
}

@media (min-width: 992px) {
    .voucher-customer > button {
        opacity: 0;
        transition: .5s ease
    }

    .voucher-customer:hover > button {
        opacity: 1
    }

    .voucher-customer-info {
        position: absolute;
        left: 0;
        transition: .5s ease;
        display: flex
    }

    .voucher-customer:hover .voucher-customer-info {
        left: 50px
    }

    .voucher-customer:hover > button + button + .voucher-customer-info {
        left: 86px
    }
}

.dropdown-item.bg-light:hover {
    background: #e7ebec !important
}

.wt-file-manager {
    display: flex;
    flex-direction: column;
    max-height: 85vh
}

.wt-file-manager .modal-header, .wt-file-manager .modal-footer {
    flex: 0 0 auto
}

.wt-file-manager .modal-center {
    flex: 1 1 auto
}

.wt-file-manager .header {
    padding: 10px 15px;
    box-shadow: 6px 6px 15px 1px #e2e7ef
}

.wt-file-manager .header button {
    padding: 0 1rem;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.wt-file-manager .header button.action-btn {
    background: #f4f6f8;
    border: 1px solid #e3e8ec
}

.wt-file-manager .header button.action-btn:hover {
    background: #ecf0f3
}

.wt-file-manager .header button.action-btn.icon {
    padding: 0;
    width: 36px;
    color: #5d6880
}

.wt-file-manager .header button.action-btn.icon img {
    width: 20px
}

.wt-file-manager .header button.breadcrumb {
    border: 0;
    color: #4e5d6c;
    background-color: #f4f6f8;
    font-size: .875rem;
    cursor: pointer
}

.wt-file-manager .header button.breadcrumb .dropdown-item {
    display: flex
}

.wt-file-manager .header .wt-breadcrumb {
    height: 28px;
    background: #f8f9fb;
    padding: 0 5px;
    align-items: center;
    overflow-x: auto;
    border-radius: .18rem
}

.wt-file-manager .header .wt-breadcrumb .item {
    display: flex;
    line-height: 0
}

.wt-file-manager .header .wt-breadcrumb .item a {
    white-space: nowrap
}

.wt-file-manager .modal-center {
    padding: 0 5px
}

.wt-file-manager span.item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px;
    height: 120px;
    background: #fbfbfb;
    border: 1px solid transparent;
    cursor: pointer;
    box-shadow: 1px 3px 9px 1px #5153ff2e;
    border-radius: 3px
}

.wt-file-manager span.item:hover {
    background: #fff
}

.wt-file-manager span.item .image {
    text-align: center
}

.wt-file-manager span.item .image img {
    max-width: 45%;
    width: 150px
}

.wt-file-manager span.item .text {
    width: 100%;
    text-align: center
}

.wt-file-manager span.item .text p {
    text-align: center;
    padding: 6px 4px 0;
    margin: 0;
    font-size: 11px;
    font-weight: 300;
    font-family: montserrat;
    color: #3e464e;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis
}

.wt-file-manager span.item .text span {
    text-align: center;
    font-size: .7rem;
    color: #889098
}

.wt-file-manager .selected-list, .mat-autocomplete-panel .selected-list {
    position: relative;
    background: #0087ff;
    padding: 10px 10px 5px;
    flex: 0 0 auto;
    max-height: 70px;
    overflow: hidden
}

.wt-file-manager .selected-list .wt-badge, .mat-autocomplete-panel .selected-list .wt-badge {
    margin-bottom: 5px
}

.wt-file-manager .selected-list.load-more:not(.expanded):before, .mat-autocomplete-panel.selected-list.load-more:not(.expanded):before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, #0087ff 90%);
    z-index: 1
}

.wt-file-manager .selected-list button.more, .mat-autocomplete-panel .selected-list button.more {
    display: none;
    position: absolute;
    bottom: 5px;
    z-index: 1;
    padding: 5px 10px
}

.wt-file-manager .selected-list.load-more button.more, .mat-autocomplete-panel .selected-list.load-more button.more {
    display: block
}

.wt-file-manager .selected-list.expanded, .mat-autocomplete-panel .selected-list.expanded {
    max-height: none;
    padding-bottom: 30px
}

.autocomplete-dropdown {
    pointer-events: auto;
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    display: flex;
    position: fixed;
    z-index: 1000;
    box-shadow: #0000001a -4px 9px 25px -6px
}

.autocomplete-dropdown-items {
    min-width: 112px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 256px;
    position: relative;
    width: 100%;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background: #fff;
    color: #000000de;
    box-shadow: 0 2px 4px -1px #0003 0 4px 5px 0 #00000024 0 1px 10px 0 #0000001f
}

.autocomplete-dropdown-item {
    line-height: 34px;
    width: 100%;
    cursor: pointer;
    padding: 0 12px;
    font-size: .875rem
}

.autocomplete-dropdown-item b {
    background: #ff0
}

.autocomplete-dropdown-item:hover:not(.autocomplete-new-add), .autocomplete-dropdown-item.selected:not(.autocomplete-new-add) {
    background: #cccc !important
}

.wt-select-dropdown {
    animation: fadeIn .4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    box-shadow: #0000000a 0 3px 5px;
    pointer-events: auto;
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    display: flex;
    position: fixed;
    z-index: 1000
}

.wt-select-items {
    min-width: 112px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 256px;
    position: relative;
    width: 100%;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background: #fff;
    color: #000000de;
    box-shadow: 0 2px 4px -1px #0003 0 4px 5px 0 #00000024 0 1px 10px 0 #0000001f
}

.wt-select-option {
    line-height: 34px;
    height: 34px;
    width: 100%;
    cursor: pointer;
    padding: 0 12px;
    font-size: .875rem
}

@media (max-width: 768px) {
    .wt-select-option {
        line-height: 40px;
        height: 40px
    }
}

.wt-select-option:hover, .wt-select-option.selected {
    background: #f3f6f9 !important
}

.wt-select-option.empty {
    color: #789;
    cursor: not-allowed
}

@media (max-width: 767px) {
    .wt-file-manager .modal-header {
        height: 40px
    }

    .wt-file-manager .modal-header .close {
        top: 8px
    }

    .wt-file-manager .header .wt-breadcrumb {
        height: 22px
    }

    .wt-file-manager span.item {
        height: 80px;
        margin: 5px
    }

    .wt-file-manager .header button {
        padding: 0 .6rem;
        height: 30px
    }

    .wt-file-manager .header button.action-btn.icon {
        width: 30px
    }

    .wt-file-manager span.item .text p {
        font-size: .7rem;
        padding-top: 4px;
        line-height: 14px
    }

    .wt-file-manager .header .wt-checkbox-large span {
        height: 30px
    }

    .wt-file-manager .img-checkbox span:before {
        width: 18px;
        height: 18px;
        line-height: 15px
    }

    .wt-file-manager .modal-footer {
        padding: 5px 12px
    }
}

.wt-dropzone-container {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fbfbfb;
    padding: 1rem;
    max-height: 90vh;
    overflow: hidden
}

.wt-dropzone {
    width: 100%;
    padding: 2rem;
    text-align: center;
    border: dashed 2px #ced6de;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto
}

.wt-dropzone input {
    opacity: 0;
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer
}

.wt-dropzone svg {
    width: 130px
}

.wt-dropzone svg .st0 {
    fill: url(#SVGID_1_)
}

.wt-dropzone h3 {
    width: 300px;
    color: #4e5d6c;
    font-weight: 300
}

.wt-dropzone-container .files-list {
    flex: 1 1 auto;
    overflow: auto
}

.wt-dropzone-container .files-list .item {
    background: #e5eaef;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    margin-top: 5px;
    border-radius: .18rem
}

.wt-dropzone-container .files-list .item:first-child {
    margin-top: 0
}

.wt-dropzone-container .files-list .item h4 {
    font-size: .9rem;
    margin-bottom: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.wt-dropzone-container .files-list .item p {
    font-size: .8rem;
    margin: 0
}

.wt-dropzone-container .files-list .item button {
    background: #fff;
    padding: 0;
    font-size: 30px;
    line-height: 26px;
    width: 40px;
    height: 40px;
    min-width: 40px
}

.wt-dropzone-container .files-list .item button:hover {
    background: #f3f6f9
}

.wt-dropzone.fileover {
    background: #f2f6f9;
    border-color: #0087ff;
    transition: .6s ease
}

.wt-dropzone.fileover svg, .wt-dropzone.fileover h3 {
    opacity: .6;
    transition: .6s ease
}

@media (max-width: 767px) {
    .wt-dropzone {
        height: 200px
    }
}

.wt-dropzone-container .loading {
    min-width: 40px;
    background: #fff;
    border-radius: .18rem
}

.wt-dropzone-container .loading * {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    transform-box: fill-box
}

.wt-dropzone-container .loading .a {
    -webkit-animation: 1 2s cubic-bezier(0.42, 0, 0.58, 1);
    animation: 1 2s cubic-bezier(0.42, 0, 0.58, 1)
}

.wt-dropzone-container .loading .background {
    -webkit-animation: scaleAnimation 1 2s cubic-bezier(0.42, 0, 0.58, 1);
    animation: scaleAnimation 1 2s cubic-bezier(0.42, 0, 0.58, 1)
}

.wt-dropzone-container .loading.active .arrow {
    -webkit-animation: arrowAnimation 2 1s;
    animation: arrowAnimation 2 1s
}

.wt-dropzone-container .loading .progressLoader {
    -webkit-animation: progressLoader 1s;
    animation: progressLoader 1s;
    display: none
}

.wt-dropzone-container .loading.active .arrow, .wt-dropzone-container .loading.active .progressLoader {
    display: block;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards
}

@-webkit-keyframes arrowAnimation {
    0% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px)
    }
    20% {
        -webkit-transform: translate(0px, -1px);
        transform: translate(0px, -1px)
    }
    40% {
        -webkit-transform: translate(0px, .2px);
        transform: translate(0px, .2px)
    }
    100% {
        -webkit-transform: translate(0px, 1.3px);
        transform: translate(0px, 1.3px)
    }
}

@keyframes arrowAnimation {
    0% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px)
    }
    20% {
        -webkit-transform: translate(0px, -1px);
        transform: translate(0px, -1px)
    }
    40% {
        -webkit-transform: translate(0px, .2px);
        transform: translate(0px, .2px)
    }
    100% {
        -webkit-transform: translate(0px, 1.3px);
        transform: translate(0px, 1.3px)
    }
}

@-webkit-keyframes scaleAnimation {
    0% {
        -webkit-transform: scale(1.01, 1.01);
        transform: scale(.9, .9)
    }
    65% {
        -webkit-transform: scale(1.01, 1.01);
        transform: scale(1.01, 1.01)
    }
    100% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@keyframes scaleAnimation {
    0% {
        -webkit-transform: scale(1.01, 1.01);
        transform: scale(.9, .9)
    }
    65% {
        -webkit-transform: scale(1.01, 1.01);
        transform: scale(1.01, 1.01)
    }
    100% {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@-webkit-keyframes progressLoader {
    50% {
        -webkit-transform: scale(0.4, 1) translate(0px, 0px);
        transform: scale(0.4, 1) translate(0px, 0px)
    }
    100% {
        -webkit-transform: scale(1, 1) translate(0px, 0px);
        transform: scale(1, 1) translate(0px, 0px)
    }
}

@keyframes progressLoader {
    50% {
        -webkit-transform: scale(0.4, 1) translate(0px, 0px);
        transform: scale(0.4, 1) translate(0px, 0px)
    }
    100% {
        -webkit-transform: scale(1, 1) translate(0px, 0px);
        transform: scale(1, 1) translate(0px, 0px)
    }
}

.wt-dropzone-container .svg-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    background-color: #34bfa3;
    border-radius: .18rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.wt-dropzone-container .svg-wrap #circle {
    width: 22px;
    fill: none;
    position: absolute;
    height: inherit;
    opacity: 1;
    -webkit-transform: rotate(-33deg);
    transform: rotate(-33deg);
    -webkit-animation: circle 1.8s ease-in 2s;
    animation: circle 1.8s ease-in 2s;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    stroke-linecap: round;
    stroke-dasharray: 291, 943;
    stroke-dashoffset: -943
}

.wt-dropzone-container .svg-wrap #circle .st0 {
    stroke: #fff;
    -webkit-animation: fill 1.8s ease-in-out 2s;
    animation: fill 1.8s ease-in-out 2s;
    animation-delay: 0
}

.wt-dropzone-container .svg-wrap #check {
    width: 22px;
    fill: none;
    position: absolute;
    height: inherit;
    opacity: 1;
    stroke-dasharray: 290, 9000;
    stroke-dashoffset: 55;
    -webkit-animation: check 1.8s ease-out 2s;
    animation: check 1.8s ease-out 2s;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    stroke-linecap: round
}

.wt-dropzone-container .svg-wrap #button {
    width: 22px;
    fill: none;
    position: absolute;
    height: inherit;
    opacity: 1;
    stroke-dasharray: 943, 9000;
    stroke-dashoffset: 0;
    -webkit-animation: button 1.8s ease-in-out 2s;
    animation: button 1.8s ease-in-out 2s;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    stroke-linecap: round;
    stroke: green;
    -webkit-transform: scale(1);
    transform: scale(1)
}

@-webkit-keyframes circle {
    0% {
        opacity: 0;
        stroke-dasharray: 40, 943;
        stroke-dashoffset: 0;
        -webkit-transform: rotate(-73deg);
        transform: rotate(-73deg)
    }
    40% {
        opacity: .5
    }
    50% {
        stroke-dasharray: 200, 943;
        -webkit-transform: rotate(-33deg);
        transform: rotate(-33deg)
    }
    51% {
        opacity: 1
    }
    58% {
        stroke-dasharray: 0, 943;
        stroke-dashoffset: -943;
        opacity: 1
    }
    59% {
        opacity: 0
    }
    100% {
        opacity: 0
    }
}

@keyframes circle {
    0% {
        opacity: 0;
        stroke-dasharray: 40, 943;
        stroke-dashoffset: 0;
        -webkit-transform: rotate(-73deg);
        transform: rotate(-73deg)
    }
    40% {
        opacity: .5
    }
    50% {
        stroke-dasharray: 200, 943;
        -webkit-transform: rotate(-33deg);
        transform: rotate(-33deg)
    }
    51% {
        opacity: 1
    }
    58% {
        stroke-dasharray: 0, 943;
        stroke-dashoffset: -943;
        opacity: 1
    }
    59% {
        opacity: 0
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes check {
    0% {
        stroke-dasharray: 290, 9000;
        stroke-dashoffset: -294;
        opacity: 0
    }
    50% {
        stroke-dasharray: 290, 9000;
        stroke-dashoffset: -294;
        opacity: 0;
        opacity: 1
    }
    63% {
        opacity: 1;
        stroke-dasharray: 291, 9000;
        stroke-dashoffset: 55;
        opacity: 1
    }
    100% {
        stroke-dasharray: 291, 9000;
        stroke-dashoffset: 43;
        opacity: 1
    }
}

@keyframes check {
    0% {
        stroke-dasharray: 290, 9000;
        stroke-dashoffset: -294;
        opacity: 0
    }
    50% {
        stroke-dasharray: 290, 9000;
        stroke-dashoffset: -294;
        opacity: 0;
        opacity: 1
    }
    63% {
        opacity: 1;
        stroke-dasharray: 291, 9000;
        stroke-dashoffset: 55;
        opacity: 1
    }
    100% {
        stroke-dasharray: 291, 9000;
        stroke-dashoffset: 43;
        opacity: 1
    }
}

@-webkit-keyframes button {
    0% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    60% {
        opacity: 0
    }
    80% {
        opacity: 1
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes button {
    0% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    60% {
        opacity: 0
    }
    80% {
        opacity: 1
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.img-checkbox {
    padding: 0
}

.img-checkbox span {
    border: 1px solid #fff;
    display: block;
    position: relative;
    cursor: pointer
}

.img-checkbox span:before {
    background-color: transparent;
    color: #fff;
    content: " ";
    display: block;
    border-radius: 4.18rem;
    border: 2px solid #dae2ea;
    position: absolute;
    top: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    font-size: 10px;
    text-align: center;
    line-height: 18px;
    transition-duration: .4s
}

.img-checkbox span img {
    transition-duration: .2s;
    transform-origin: 50% 50%
}

.img-checkbox input[type="checkbox"] + span {
    border-color: #dae2ea
}

.img-checkbox input[type="checkbox"]:checked + span:before {
    content: "\f121";
    font-family: ionicons;
    background-color: #0087ff;
    border-color: #0087ff
}

.img-checkbox input[type="checkbox"]:checked + span, .img-checkbox input[type="checkbox"]:checked + span img {
    transform: scale(0.9)
}

.file-manager-detail .modal-title {
    text-transform: none
}

.file-manager-detail .modal-center {
    background: #0000004d;
    max-height: none;
    min-height: 0
}

.file-manager-detail .modal-center img {
    max-height: 500px;
    max-width: 100%
}

.file-manager-detail .modal-center textarea {
    min-height: 300px;
    border: none;
    padding: 1rem
}

.file-manager-detail .modal-center textarea:focus {
    border: none;
    background: #fff
}

.cdk-drag-preview {
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px #0003 0 8px 10px 1px #00000024 0 3px 14px 2px #0000001f
}

.cdk-drag-placeholder {
    opacity: 1;
    box-shadow: 0 5px 5px -3px #0003 0 8px 10px 1px #00000024 0 3px 14px 2px #0000001f;
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1)
}

.cdk-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1)
}

.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder) {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1)
}

input[onkeyup*="OtomotikArama"] {
    min-width: 60px
}

.mat-tooltip {
    white-space: pre-line
}

wt-datepicker .day-text {
    background: #6e84ff;
    color: #fff;
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    margin: auto;
    width: -moz-max-content;
    width: max-content;
    padding: 0 6px;
    line-height: 18px;
    border-radius: 3px;
    text-align: center;
    font-size: 12px;
    z-index: 1
}

.table-row-link:hover {
    text-decoration: underline;
    color: #0087ff
}

app-acceptance-form-print {
    display: none
}

app-service-contract-form-print {
    display: none
}

@media print {
    wt-menu, .wt-frame-top, wt-header, .wt-container, wt-notification, #navbarHeader {
        display: none
    }

    .wt-content {
        margin: 0 !important
    }

    #screenContent {
        overflow: unset !important
    }

    .wt-frame-center {
        overflow: unset !important
    }

    .wt-col {
        overflow: unset !important
    }

    app-acceptance-form-print {
        display: block
    }

    app-service-contract-form-print {
        display: block
    }

    app-planning-calendar table#planningCalendarTable {
        display: block
    }

    @page {
        size: auto;
        margin: 0
    }
}

table tr.table-loader {
    background-color: #f5f5f5;
    position: relative;
    overflow: hidden
}

table tr.table-loader:before {
    content: '';
    width: 100%;
    height: 2000px;
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    background: radial-gradient(circle, white 50%, #fff0 100%);
    -webkit-animation: animationLoader 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) both infinite;
    animation: animationLoader 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) both infinite
}

@keyframes animationLoader {
    from {
        left: -100%
    }
    to {
        left: 100%
    }
}

svg.document-copy {
    height: 200px;
    padding: 20px
}

svg.document-copy .st0 {
    fill: url(#SVGID_1_)
}

svg.document-copy .st1 {
    fill: #FAFAFA
}

svg.document-copy .st2 {
    fill: #E0E0E0
}

svg.document-copy .st3 {
    fill: #0087FF
}

svg.document-copy .st4 {
    fill: #F5F5F5
}

svg.document-copy .st5 {
    fill: url(#SVGID_2_)
}

svg.document-copy .st6 {
    fill: #EEE
}

svg.document-copy .st7 {
    fill: url(#SVGID_3_)
}

svg.document-copy .st8 {
    fill: url(#SVGID_4_)
}

svg.document-copy .st9 {
    fill: #3AD29F
}

.wt-checkbox-large .disabled {
    pointer-events: none;
    opacity: .4
}

wt-table-input {
    display: block
}

wt-table-input .hover-button {
    position: absolute;
    top: 3px;
    right: 0;
    opacity: 0;
    transition: .3s ease
}

wt-table-input:hover .hover-button {
    opacity: 1
}

.voucher-list-transition-text {
    padding: 2px 3px;
    border-radius: 3px;
    color: #0087FF;
    text-decoration: underline
}

.voucher-list-transition-text:hover {
    background-color: #0087FF;
    color: #fff;
    transition: color 0s
}

.multi-process-icons {
    display: flex;
    align-items: center;
    height: 50px
}

.multi-process-icons button {
    height: 32px;
    margin-right: .5rem;
    background: #fbfcff;
    color: #4e5d6c
}

.multi-process-icons button:hover {
    background: #f4f6f8;
    color: #4e5d6c
}

.multi-process-icons button svg g [fill] {
    fill: #4e5d6c
}

.custom-dropdown-container {
    width: 350px;
    left: unset;
    right: 0
}

.custom-dropdown {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    border-radius: 4px
}

.custom-dropdown .custom-dropdown-header {
    position: relative;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #fff6, #0087ff) #0087ff !important;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}

.custom-dropdown .custom-dropdown-header h5 {
    color: #fff;
    font-family: montserrat;
    text-transform: uppercase;
    margin: 0
}

.custom-dropdown .custom-dropdown-header svg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100px
}

.custom-dropdown .custom-dropdown-body .card-label {
    font-size: .9rem;
    font-weight: 400
}

.custom-dropdown .accordion.accordion-light .card .card-header .card-title {
    padding: .5rem 0
}

.custom-dropdown .card .card-header .card-title.button-loading {
    padding-left: 28px !important
}

.custom-dropdown .card .card-header .card-title.button-loading:before {
    border: 2px solid #0087ff;
    border-right: 2px solid transparent
}

.custom-dropdown.accordion .card .card-body {
    font-size: .85rem
}

.custom-dropdown .search-container {
    position: relative
}

.custom-dropdown .search-container input {
    border-radius: 20px;
    height: 30px;
    padding-left: 30px
}

.custom-dropdown .search-container i {
    position: absolute;
    left: 10px;
    top: 2px;
    font-size: 20px
}

.erp-calendar table {
    width: 100%;
    border: 1px solid #ededed;
    border-collapse: collapse;
    border-left: none;
    border-right: none;
    font-size: .75rem
}

.erp-calendar table tr th {
    text-align: center;
    background-color: #d9dfe4;
    border: 1px solid #ededed;
    padding: 1em
}

.erp-calendar table tr th:first-child {
    border-left: none
}

.erp-calendar table tr th:last-child {
    border-right: none
}

.erp-calendar table tr td {
    border: 1px solid #ededed;
    padding: 1em
}

.erp-calendar table tr td:first-child {
    border-left: none;
    background-color: #d9dfe4;
    font-weight: 600;
    text-align: center;
    font-size: .9rem
}

.erp-calendar table tr td:last-child {
    border-right: none
}

.erp-calendar table tr td ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

.erp-calendar table tr td ul li {
    padding-bottom: 5px;
    position: relative;
    padding-left: 8px
}

.erp-calendar table tr td ul li:before {
    content: "-";
    position: absolute;
    left: 0
}

.erp-calendar-header {
    min-width: 150px;
    max-width: 150px
}

.erp-calendar-cell {
    min-width: 150px;
    max-width: 150px;
    height: 150px
}

.dialog-shadow > mat-dialog-container {
    box-shadow: 0 0 15px 1px #45414e33 !important
}

@media screen and (max-width: 767px) and (max-height: 550px) {
    wt-menu, wt-header, .left-content-inner-bottom {
        display: none
    }

    .wt-content {
        padding: 0 !important
    }
}

.btn-picker {
    border-radius: 50%
}

.dropdown-color-picker {
    width: 206px;
    padding: 7px
}

.dropdown-color-picker .item {
    width: 40px;
    height: 40px;
    float: left;
    margin: 4px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 1px 1px 10px 0 #2a37cc2b
}

.service-definitions-header {
    padding: .5rem;
    background: #f4f6f8;
    border-top: 1px solid #dee2ea
}

.service-definitions-header input {
    background-color: #fff
}

.table-placeholder {
    width: 100%;
    background: #fff;
    border-spacing: 0
}

.table-placeholder tr td {
    height: 36px;
    padding: 12px
}

.table-placeholder tr:nth-child(odd) {
    background-color: #f8f9fc
}

.table-placeholder tr:first-child {
    background-color: #d9dfe4
}

.table-placeholder tr td .text {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: placeholderAnimate;
    animation-name: placeholderAnimate;
    background: #f6f7f8;
    background: -webkit-gradient(linear, left top, right top, color-stop(2%, #eff0f1), color-stop(30%, #e1e5e8), color-stop(58%, #eff0f1));
    background: linear-gradient(to right, #eff0f1 2%, #e1e5e8 30%, #eff0f1 58%)
}

@media (max-width: 767px) {
    .table-placeholder tr td .text {
        -webkit-animation-duration: 13s;
        animation-duration: 13s
    }
}

@-webkit-keyframes placeholderAnimate {
    0% {
        background-position: -650px 0
    }
    100% {
        background-position: 650px 0
    }
}

@keyframes placeholderAnimate {
    0% {
        background-position: -650px 0
    }
    100% {
        background-position: 650px 0
    }
}

.table-placeholder tr {
    -webkit-animation: aniVertical ease;
    animation: aniVertical ease;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 0
}

@-webkit-keyframes aniVertical {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes aniVertical {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.wt-badge.btn-primary-outline {
    color: #0087FF !important;
    background-color: transparent !important;
    cursor: pointer !important
}

.wt-badge.btn-primary-outline:hover {
    color: #fff !important;
    background: #0087FF !important;
    border-color: transparent !important
}

.connection-badge {
    display: flex;
    align-items: center;
    font-size: .85rem;
    font-weight: 500;
    border: 1px solid;
    padding: 0 4px;
    border-radius: 3px
}

.connection-badge.success {
    border-color: #62c26f;
    color: #62c26f
}

.connection-badge.danger {
    border-color: #fc566a;
    color: #fc566a
}

.connection-badge i {
    margin: 2px 0 0 3px
}

.accordion .card .card-body .settings-row:last-child {
    border-bottom: none
}

.ck-editor__editable_inline {
    min-height: 200px
}

.calc-close {
    position: absolute;
    left: 4px;
    top: 4px;
    border-radius: 3px;
    border: 0;
    background: #e9edf1
}

.calc-close:hover {
    background: #fff
}

.dropdown-menu .wt-checkbox {
    padding: 6px 12px 6px 40px;
    margin-bottom: 0;
    display: block
}

.dropdown-menu .wt-checkbox span {
    margin: 6px 0 0 20px
}

.dropdown-menu .wt-checkbox:hover {
    background: #F3F6F9;
    color: #686e87;
    cursor: pointer
}

.paper-shadow-container {
    background: #dfe6e9;
    position: relative;
    width: 500px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center
}

.paper-shadow-container .title {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 15px;
    font-weight: 300;
    font-family: 'montserrat'
}

.paper-shadow {
    position: relative;
    background: #fff;
    color: #4e5d6c;
    width: 210px;
    padding: 15px;
    box-shadow: 0 2px 38px #0003;
    height: 300px;
    display: flex;
    flex-direction: column
}

.paper-shadow.horizontal {
    width: 300px;
    height: 210px
}

.paper-shadow .paper-top {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px
}

.paper-shadow .paper-center {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px 0
}

.paper-shadow .paper-bottom {
    flex: 0 0 auto;
    position: relative;
    height: 15px
}

.paper-shadow .paper-center .line {
    width: 100%;
    height: 2px;
    background: #1113;
    border-radius: 10px
}

.paper-shadow .company-info {
    font-size: 4px
}

.paper-shadow .creation-date {
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 9px
}

.paper-shadow .page-number {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 9px
}

.paper-shadow h1 {
    font-size: 9px
}

.paper-shadow:after, .paper-shadow:before {
    content: '';
    position: absolute;
    left: auto;
    background: none;
    z-index: -1
}

.paper-shadow:after {
    width: 90%;
    height: 10px;
    top: 30px;
    right: 8px;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-box-shadow: 0 -20px 36px 5px #295d92;
    -moz-box-shadow: 0 -20px 36px 5px #295d92;
    box-shadow: 0 -25px 35px 0 #00000080
}

.paper-shadow:before {
    width: 10px;
    height: 95%;
    top: 5px;
    right: 18px;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    -webkit-box-shadow: 20px 0 25px 5px #295d92;
    -moz-box-shadow: 20px 0 25px 5px #295d92;
    box-shadow: 22px 0 35px 0 #00000080
}

wt-kdv-checkbox:hover label {
    text-decoration: underline
}

.card-panel {
    border: 2px solid #eff1f3;
    border-radius: 6px
}

.card-panel > h1, .card-panel > .card-panel-header {
    font-size: 1rem;
    background-color: #eff1f3;
    padding: 10px 14px;
    margin-bottom: 0 !important
}

.card-panel.card-panel-info {
    border-color: #36a3f7 !important
}

.card-panel.card-panel-info > h1, .card-panel.card-panel-info > .card-panel-header {
    background-color: #36a3f7 !important;
    color: #fff
}

.top-info-buttons {
    display: flex;
    align-items: center;
    position: relative;
    height: 50px
}

.top-info-buttons button {
    color: #fff;
    background-color: #ffb822;
    padding: 0 9px;
    height: 28px;
    font-size: 12px;
    text-align: left;
    max-width: 15ch;
    text-overflow: ellipsis;
    overflow: hidden;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 4px 12px 0 #ffb82273
}

.periodSignboardContainer {
    position: absolute;
    top: 2px;
    right: 5px
}

.periodSignboardContainer:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #0087ff
}

.periodSignboardContainer button:before {
    content: "";
    position: absolute;
    left: -20px;
    top: 0;
    width: 20px;
    height: 10px;
    border-radius: 0 10px 0 0;
    -webkit-box-shadow: 10px 0 0 0 #0087ff;
    box-shadow: 10px 0 0 0 #0087ff
}

.periodSignboardContainer button:after {
    content: "";
    position: absolute;
    right: -20px;
    top: 0;
    width: 20px;
    height: 10px;
    border-radius: 10px 0 0 0;
    -webkit-box-shadow: -10px 0 0 0 #0087ff;
    box-shadow: -10px 0 0 0 #0087ff
}

.navi {
    padding: 0;
    margin: 0;
    display: block;
    list-style: none
}

.navi .navi-item {
    list-style: none;
    display: flex;
    padding: .75rem 0;
    cursor: pointer;
    -webkit-transition: all .15s ease;
    transition: all .15s ease
}

.navi .navi-item .symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: .75rem;
    font-weight: 500;
    color: #3f4254;
    background-color: #f3f6f9;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: .42rem
}

.navi .navi-item .navi-text {
    flex-grow: 1
}

.navi .navi-item .navi-link {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .75rem 1.5rem;
    border-radius: .42rem
}

.navi .navi-item .navi-link.active, .navi .navi-item .navi-link:hover {
    background-color: #f3f6f9
}

.navi .navi-item .navi-icon {
    line-height: 0;
    margin-right: .5rem
}

.navi .navi-item .navi-icon i {
    font-size: 18px
}

.navi .navi-item .navi-icon svg {
    height: 22px;
    width: 22px
}

.navi .navi-item .navi-icon svg g [fill] {
    -webkit-transition: fill .3s ease;
    transition: fill .3s ease;
    fill: #d1d3e0
}

.navi .navi-item.active .navi-icon svg g [fill], .navi .navi-item:hover .navi-icon svg g [fill] {
    fill: #0087ff
}

.navi .navi-item .navi-link .navi-label {
    line-height: 0;
    margin-left: .75rem;
    border-radius: .42rem
}

.label {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    font-size: 12px;
    font-weight: 600
}

.label.label-inline {
    width: auto;
    font-weight: 500;
    padding: .15rem .75rem
}

.label.label-success {
    color: #fff;
    background-color: #34bfa3 !important
}

.label.label-danger {
    color: #fff;
    background-color: #f4516c !important
}

.label.label-warning {
    background-color: #ffb822 !important;
    color: #111 !important
}

.label.label-default {
    color: #fff;
    background-color: #939393
}

.label.label-primary {
    color: #fff;
    background-color: #36a3f7 !important
}

.label.label-outline {
    color: #0087ff !important;
    background-color: transparent !important;
    cursor: pointer !important;
    border-color: #0087ff !important;
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: all .4s
}

.label.label-outline:hover {
    color: #fff !important;
    background: #0087ff !important;
    border-color: transparent !important
}

.label.loading {
    position: relative;
    display: inline-flex;
    align-items: center;
    transition: all .5s
}

@keyframes label-loading-fadein {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.label.loading:after {
    content: '';
    box-sizing: border-box;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    border: 2px solid #000;
    border-right: 2px solid transparent;
    -webkit-animation: rotating .5s linear infinite;
    margin-left: 4px;
    animation: label-loading-fadein .2s linear, rotating .5s linear infinite
}

.label.label-outline.loading:after {
    border: 2px solid #0087ff;
    border-right: 2px solid transparent;
    transition: all .5s
}

.label.label-outline:hover.loading:after {
    border: 2px solid #fff;
    border-right: 2px solid transparent;
}

.label.label-success.loading:after {
    border: 2px solid #fff;
    border-right: 2px solid transparent;
    transition: all .5s
}

.label.loading > i {
    opacity: 0;
    display: none;
    transition: all .5s
}

.user-profile-dropdown {
    width: 340px
}

.custom-search {
    display: flex;
    align-items: center;
    background-color: #f3f6f9;
    border-radius: .42rem
}

.custom-search input {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none;
    background-color: transparent !important;
    padding: .7rem;
    height: auto
}

.custom-search svg {
    margin: 0 .7rem 0 0;
    height: 26px;
    width: 26px
}

.custom-search svg g [fill] {
    fill: #b5b5c3
}

.modal-dialog-fullscreen mat-dialog-container {
    margin: 0 !important
}

.modal-dialog-fullscreen .modal-content {
    max-height: none
}

.modal-dialog-fullscreen .modal-center {
    height: calc(100vh - 54px)
}

.integrator-icon {
    border-radius: 4px;
    box-shadow: 0 0 10px 0 #0000002e;
    margin-right: 5px
}

.alert-custom {
    position: absolute;
    z-index: 9999;
    align-items: center;
    left: 0;
    right: 0;
    top: 2rem;
    margin: auto
}

.alert-custom .alert-close {
    position: absolute;
    right: 16px;
    top: 12px
}

.alert-custom a:hover {
    color: #333;
    color: #333;
    text-decoration: underline
}

.report-table .fixed-table td, .report-table .fixed-table th {
    height: 28px;
    font-size: .7rem;
    line-height: .7rem;
    padding: 0 4px
}

.stock-price-label {
    position: relative
}

.stock-price-label:hover span {
    padding-left: 22px;
    transition: .5s ease padding-left
}

.stock-price-label button {
    opacity: 0;
    position: absolute;
    width: 20px;
    height: 20px;
    top: -1px;
    left: 0;
    font-size: 14px;
    padding: 0
}

.stock-price-label:hover button {
    opacity: 1;
    transition: .5s ease opacity
}

wt-list-sorter {
    display: flex
}

.sort-by-row {
    border: 1px solid #dee2ea;
    border-radius: .25rem;
    display: inline-block;
    cursor: pointer;
    position: relative
}

.sort-by-row .sort-by {
    font-size: .75rem;
    line-height: 2rem;
    font-weight: 400;
    padding: 0 0 0 .6875rem;
    color: #a5a5a5;
    margin: 0;
    display: inline-block;
    float: left
}

.sort-by-row .dropdown {
    padding: 0 0 0 .1875rem;
    display: inline-block;
    float: left;
    font-size: .8rem
}

.sort-by-row .dropdown button {
    color: #3d4146;
    background-color: transparent;
    border-color: transparent;
    font-size: .75rem;
    padding-left: 0;
    padding-right: 1rem
}

body.switching * {
    transition: all .2s
}

.dark-mode-switch {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 40px;
    cursor: pointer
}

.dark-mode-switch .inner {
    width: 100%;
    height: 100%;
    border-radius: 40px;
    overflow: hidden
}

.dark-mode-switch .bg {
    width: 100%;
    height: 100%;
    background-color: #8d91a4;
    border: 1px solid #fff;
    border-radius: 40px;
    transition: all .2s
}

body.dark-mode .dark-mode-switch .bg {
    border: 0;
    background-color: transparent
}

.dark-mode-switch .circle {
    margin-left: 6px;
    margin-top: -37px;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border: 2px solid transparent;
    border-radius: 40px;
    transition: all .2s
}

.header-button:hover .dark-mode-switch .circle {
    background-color: #ebecf2
}

body.dark-mode .header-button:hover .dark-mode-switch .circle {
    background-color: #fbc02d
}

.dark-mode-switch-cont .dark-text {
    display: none
}

body.dark-mode .dark-mode-switch-cont .dark-text {
    display: block
}

body.dark-mode .dark-mode-switch-cont .light-text {
    display: none
}

.dark-mode-switch .rays {
    position: absolute;
    left: 6px;
    top: 6px
}

.dark-mode-switch .rays .ray {
    position: absolute;
    left: 10px;
    top: 12px;
    width: 2px;
    height: 8px;
    border-radius: 4px;
    background-color: #fbc02d;
    transform-origin: 2px 0;
    opacity: 0
}

.dark-mode-switch .rays .ray:nth-child(1) {
    transform: rotate(-180deg) translateY(20px);
    transition: all .2s
}

.dark-mode-switch .rays .ray:nth-child(2) {
    transform: rotate(-225deg) translateY(20px);
    transition: all .2s
}

.dark-mode-switch .rays .ray:nth-child(3) {
    transform: rotate(-270deg) translateY(20px);
    transition: all .2s
}

.dark-mode-switch .rays .ray:nth-child(4) {
    transform: rotate(-315deg) translateY(20px);
    transition: all .2s
}

.dark-mode-switch .rays .ray:nth-child(5) {
    transform: rotate(-360deg) translateY(20px);
    transition: all .2s
}

.dark-mode-switch .rays .ray:nth-child(6) {
    transform: rotate(-405deg) translateY(20px);
    transition: all .2s
}

.dark-mode-switch .rays .ray:nth-child(7) {
    transform: rotate(-450deg) translateY(20px);
    transition: all .2s
}

.dark-mode-switch .rays .ray:nth-child(8) {
    transform: rotate(-495deg) translateY(20px);
    transition: all .2s
}

.dark-mode-switch.dark:hover .rays .ray:nth-child(1) {
    transform: rotate(-180deg) translateY(11px)
}

.dark-mode-switch.dark:hover .rays .ray:nth-child(2) {
    transform: rotate(-225deg) translateY(11px)
}

.dark-mode-switch.dark:hover .rays .ray:nth-child(3) {
    transform: rotate(-270deg) translateY(11px)
}

.dark-mode-switch.dark:hover .rays .ray:nth-child(4) {
    transform: rotate(-315deg) translateY(11px)
}

.dark-mode-switch.dark:hover .rays .ray:nth-child(5) {
    transform: rotate(-360deg) translateY(11px)
}

.dark-mode-switch.dark:hover .rays .ray:nth-child(6) {
    transform: rotate(-405deg) translateY(11px)
}

.dark-mode-switch.dark:hover .rays .ray:nth-child(7) {
    transform: rotate(-450deg) translateY(11px)
}

.dark-mode-switch.dark:hover .rays .ray:nth-child(8) {
    transform: rotate(-495deg) translateY(11px)
}

.dark-mode-switch.dark .circle {
    margin-left: 11px !important;
    margin-top: -25px !important;
    background-color: #fbc02d;
    border-color: #f9a825;
    width: 14px;
    height: 14px
}

.dark-mode-switch.dark .rays .ray {
    opacity: 1
}

.dark-mode-switch.dark .rays .ray:nth-child(1) {
    transform: rotate(-180deg) translateY(9px);
    transition: all .4s
}

.dark-mode-switch.dark .rays .ray:nth-child(2) {
    transform: rotate(-225deg) translateY(9px);
    transition: all .6s
}

.dark-mode-switch.dark .rays .ray:nth-child(3) {
    transform: rotate(-270deg) translateY(9px);
    transition: all .8s
}

.dark-mode-switch.dark .rays .ray:nth-child(4) {
    transform: rotate(-315deg) translateY(9px);
    transition: all 1s
}

.dark-mode-switch.dark .rays .ray:nth-child(5) {
    transform: rotate(-360deg) translateY(9px);
    transition: all 1.2s
}

.dark-mode-switch.dark .rays .ray:nth-child(6) {
    transform: rotate(-405deg) translateY(9px);
    transition: all 1.4s
}

.dark-mode-switch.dark .rays .ray:nth-child(7) {
    transform: rotate(-450deg) translateY(9px);
    transition: all 1.6s
}

.dark-mode-switch.dark .rays .ray:nth-child(8) {
    transform: rotate(-495deg) translateY(9px);
    transition: all 1.8s
}

.dual-listbox {
    display: flex;
    flex-direction: column;
    display: flex;
    align-items: center;
    flex-wrap: nowrap
}

.dual-listbox .dual-listbox-search {
    border: 1px solid #ebedf3;
    color: #3f4254;
    outline: 0 !important;
    border-radius: .42rem
}

.dual-listbox .dual-listbox-container {
    display: flex;
    align-items: center;
    width: 100%
}

.dual-listbox .dual-listbox-container .dual-listbox-title {
    color: #3f4254;
    font-weight: 500;
    font-size: 1rem;
    padding: .75rem;
    background: #e9eef3;
    border: 1px solid #ebedf3;
    border-bottom: 0;
    border-top-left-radius: .42rem;
    border-top-right-radius: .42rem;
    margin-top: 1rem
}

.dual-listbox .dual-listbox-container .dual-listbox-body {
    overflow: auto;
    border: 1px solid #ebedf3;
    border-bottom-left-radius: .42rem;
    border-bottom-right-radius: .42rem
}

.dual-listbox .dual-listbox-container .dual-listbox-list {
    height: 300px;
    padding: 0;
    margin: 0;
    width: auto;
    color: #3f4254;
    flex-grow: 1
}

.dual-listbox .dual-listbox-container .dual-listbox-list .item {
    height: 37px;
    display: block;
    padding: .5rem .75rem;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #ebedf3;
    border-right: 1px solid #ebedf3;
    -webkit-transition: background .2s ease;
    transition: background .2s ease
}

.dual-listbox .dual-listbox-container .dual-listbox-list .item:last-child {
    border-bottom: 0
}

.dual-listbox .dual-listbox-container .dual-listbox-list .item.selected {
    background-color: #f3f6f9
}

.dual-listbox .dual-listbox-container .dual-listbox-buttons {
    display: flex;
    flex-direction: column;
    margin: 0 1.5rem
}

.dual-listbox .dual-listbox-container .dual-listbox-buttons button {
    margin-bottom: .5rem
}

.dual-listbox-settings {
    background-color: #f3f6f9;
    border: 1px solid #ebedf3;
    width: 100%;
    border-radius: .42rem
}

@media screen and (min-width: 768px) {
    .dual-listbox-settings > div:nth-child(odd) {
        border-right: 1px solid #ebedf2
    }
}

@media screen and (max-width: 767px) {
    .dual-listbox .dual-listbox-container .dual-listbox-title {
        padding: .25rem .5rem;
        font-size: 1rem
    }

    .dual-listbox .dual-listbox-container .dual-listbox-list .item {
        padding: .25rem .5rem
    }

    .dual-listbox .dual-listbox-container .dual-listbox-buttons {
        margin: 0 .5rem
    }
}

.exchange-rate-type-status {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    width: max-content;
    margin: auto;
    text-align: center;
    padding: 2px 8px;
    font-size: .8rem;
    background: #0087ff;
    color: #fff;
    border-radius: .25rem;
    z-index: 1
}

.exchange-rate-type-status + input {
    border-color: #0087ff
}

.table-header {
    display: flex;
    align-items: center;
    font-size: .9rem;
    font-weight: 500;
    height: 36px;
    background-color: #d9dfe4;
    color: #263038;
    position: sticky;
    width: 100%;
    top: 0;
    z-index: 1
}

.example-handle {
    cursor: move
}

.example-list {
    width: 500px;
    max-width: 100%;
    min-height: 60px;
    display: block;
    background: #fff;
    overflow: hidden
}

.example-box {
    padding: 5px 0 5px 1rem;
    border-bottom: solid 1px #dee2ea;
    color: #000000de;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    background: #fff;
    font-size: 14px
}

.example-box .mat-checkbox-layout {
    padding: 0
}

.cdk-drag-preview {
    z-index: 9999999 !important;
    box-sizing: border-box;
    box-shadow: 0 5px 5px -3px #0003 0 8px 10px 1px #00000024 0 3px 14px 2px #0000001f
}

.cdk-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1)
}

.example-box:last-child {
    border: none
}

.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1)
}

.example-custom-placeholder {
    background: #dce2e8;
    border: dashed 2px #788896;
    min-height: 39px;
    transition: transform 50ms cubic-bezier(0, 0, 0.2, 1)
}

.example-container {
    width: 400px;
    max-width: 100%;
    margin: 0 25px 25px 0;
    display: inline-block;
    vertical-align: top
}

.example-box {
    padding: 8px 10px;
    border-bottom: solid 1px #dee2ea;
    color: #000000de;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    background: #fff;
    font-size: 14px;
    transition: .05s ease
}

.example-box:hover {
    background: #f4f6f8
}

.example-box.active {
    background-color: #36a3f7;
    color: #fff
}

.example-box.active ul li {
    color: #fff
}

.example-box .example-box-buttons {
    opacity: 0
}

.example-box:hover > .example-box-buttons {
    opacity: 1
}

.example-box > .example-box-buttons button {
    margin-right: 5px;
    width: 24px;
    height: 24px;
    font-size: 14px
}

.example-box ul {
    margin: 0;
    padding-left: 0
}

.example-box ul li {
    list-style: none;
    display: flex;
    align-items: center
}

.example-box ul li:before {
    content: "";
    background-image: url(../ximages/treeview.png) !important;
    background-position: -68px -4px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    margin-right: 8px
}

.example-custom-placeholder {
    background: #e4e7ea;
    border: dotted 3px #b3b3b3;
    min-height: 40px;
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1)
}

.settings-row .example-box {
    padding: 4px 8px;
    line-height: 1
}

.period-setting-list {
    background-color: #f7f8f9;
    height: 100%;
    overflow: auto
}

.period-setting-list .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem;
    margin-bottom: .5rem;
    border: 1px solid #f3f5f9;
    background-color: #fff;
    border-radius: .25rem
}

.upload-file-btn-selected {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center
}

.upload-file-btn-selected span {
    display: none
}

.upload-file-btn-selected i {
    display: block !important;
    position: relative;
    z-index: 100;
    font-size: 1.2rem
}

.upload-file-btn-selected input {
    display: block !important;
    margin-left: -82px
}

.upload-file-btn-selected input:before {
    content: "";
    width: 25px;
    height: 30px;
    background: #36a3f7;
    position: absolute;
    left: 0;
    transition: all .2s ease-in-out
}

.upload-file-btn-selected:hover input:before {
    background: #1192f6
}

.upload-animation * {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    transform-box: fill-box
}

.upload-animation.done .c, .upload-animation.done .e {
    display: none
}

.upload-animation.done .d {
    fill: #b2e7e7
}

.upload-animation.done .check {
    display: block !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 10px;
    height: 10px
}

.upload-animation.done .check path {
    fill: #1ac5bd
}

.upload-animation .arrow {
    -webkit-animation: arrowAnimation 2 1s;
    animation: arrowAnimation 2 1s
}

.upload-animation .progressLoader {
    -webkit-animation: progressLoader 1s;
    animation: progressLoader 1s
}

.upload-animation .arrow, .upload-animation .progressLoader {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards
}

.upload-animation .a {
    fill: #f7f7f7
}

.upload-animation .b {
    fill: #e1e5ff
}

.upload-animation .c {
    fill: #476bd4
}

.upload-animation .d {
    fill: #fff
}

.upload-animation .e {
    fill: #29cbae
}

button.upload-animation {
    position: relative
}

button.upload-animation .badge {
    position: absolute;
    right: -2px;
    top: -2px;
    width: 14px;
    height: 14px;
    background-color: #f4516c;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.upload-progress-container {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.upload-progress {
    width: calc(100% - 50px);
    height: 3px;
    background-color: #eff3f9;
    border-radius: 4px
}

.progress {
    width: 0;
    height: 3px;
    background-color: #0087ff;
    border-radius: 4px
}

.upload-progress-text-container {
    color: #0087ff;
    font-size: 14px;
    font-weight: 700
}

.upload-progress-container.success .progress {
    background-color: #1ac5bd
}

.upload-progress-container.danger .progress {
    background-color: #fc566a
}

.upload-progress-container.success .upload-progress-text-container {
    color: #1ac5bd
}

.upload-progress-container.danger .upload-progress-text-container {
    color: #fc566a
}

.example-tooltip-danger {
    background: #f4516c !important
}

.example-tooltip-success {
    background: #34bfa3 !important
}

.example-tooltip-info {
    background: #36a3f7 !important
}

.icons-caption {
    display: flex
}

.icons-caption div {
    position: relative
}

.icons-caption div span {
    position: absolute;
    right: 0;
    top: -2px;
    background-color: #d00;
    color: #0087ff;
    border-radius: 50%;
    font-size: 8px;
    font-weight: 600;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center
}

.css-tabs {
    display: flex;
    flex-direction: column;
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0
}

.css-tabs button {
    display: block;
    padding: 8px 14px;
    border: 0;
    outline: 0;
    border-radius: 2px 2px 0 0;
    font-size: .75rem;
    text-transform: uppercase;
    background: #fff;
    color: #464646;
    cursor: pointer;
    position: relative;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.css-tabs button:hover, .css-tabs button.active {
    background: #f7f9fb
}

.css-tabs .tab-content {
    overflow: hidden;
    width: 100%;
    font-size: .8rem;
    line-height: 25px;
    padding: 1rem;
    background: #f7f9fb
}

.css-tabs .tab-content ul {
    padding: 0;
    margin: 0;
    list-style: inside
}

.card-header .progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: #0587ff14;
    width: 0;
    height: 100%;
    border-radius: 0;
    z-index: 0
}

.cariListeTr {
    background: #f4f6f8;
    overflow: hidden !important
}

.cariListeTr:hover {
    background: #e5f4ff
}

#cariListe .secili {
    background: #fbfbfb !important
}

.cariListeTd {
    padding: 10px
}

.cariListeTd h1 {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    font-weight: 400;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: .825rem;
    text-transform: capitalize;
    color: #263038;
    line-height: 1.2rem
}

.cariListeTd h2 {
    font-size: .75rem;
    color: #7f828b;
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    font-weight: 400;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.cariSearch {
    background: #ffffff73 url(../../../public/svg/search.svg) no-repeat 8px 50%;
    background-size: 26px 26px;
    padding: 4px 4px 4px 35px;
    font-size: .875rem;
    box-shadow: none;
    border-radius: .18rem .18rem 0 0;
    background-color: #f4f6f8;
    font-weight: 400;
    border: 0;
    height: 40px
}

.cariSearch::placeholder {
    color: #4e5d6c;
    opacity: .8
}

.cariListeDetayDiv {
    width: 100%;
    display: none
}

.secili .cariListeDetayDiv {
    width: 100%;
    display: block !important;
    background: #fbfbfb;
}

.cariListe {
    height: 100%;
    background-color: #FFF;
    display: flex;
    flex-direction: column
}

.stokListeTr {
    background: #f4f6f8;
    overflow: hidden !important
}

.stokListeTr:hover {
    background: #e5f4ff
}

.stokListeDetayDiv {
    width: 100%;
    display: none
}

.secili .stokListeDetayDiv {
    width: 100%;
    display: block !important;
    background: #fbfbfb;
}

.pagination {
    position: absolute;
    bottom: 0;
    right: 0
}

.pagination-select {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8f9db9;
    text-decoration: none;
    padding: 0;
    margin-right: 2px;
    border: 1px solid #dee2ea;
    border-radius: .25rem;
    transition: border-color .2s ease-out;
    background: none;
    max-width: 112px
}

.form-group .multiselect-dropdown-list input[type='checkbox'] {
    width: unset !important
}

.group-input .multiselect-dropdown-list-wrapper input {
    float: unset !important;
    width: unset;
    border: unset !important
}

.group-input .multiselect-dropdown {
    display: block;
    float: left;
    height: 36px;
    padding: 6px 36px 6px 6px;
    border-radius: var(--border-radius--base);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border: solid 1px var(--color-border);
    background: var(--color-background);
    background-image: url(../../../public/svg/custom-select.svg);
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 10px 12px;
    width: calc(100% - 36px);
    cursor: pointer
}

.group-input .multiselect-dropdown .optext {
    height: 100%
}

#xxx .multiselect-dropdown {
    height: 36px;
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    padding: 6px;
    gap: 6px;
    border-radius: var(--border-radius--base);
    border: solid 1px var(--color-border);
    background: var(--color-background);
    background-image: url(../public/svg/custom-select.svg);
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 10px 12px;
    width: 100%;
    cursor: pointer
}

#xxx .multiselect-dropdown .optext {
    height: 100%
}

.zorunlutext {
    color: #616161 !important;
    font-weight: 700;
    background-color: #fffca8a1 !important;
    box-shadow: #0000000a 0 3px 5px
}

.stokMuadil {
    padding: 1rem
}

.listing__image {
    height: auto;
    max-width: 100%;
    min-width: 100%;
    overflow: hidden;
    padding-top: 66%;
    position: relative
}

.listing__link--placeholder .listing__image {
    background-color: #F0F0F0
}

.listing__placeholder-gradient {
    position: absolute;
    top: 0;
    left: -45%;
    height: 100%;
    width: 45%;
    background-image: linear-gradient(to left, #fbfbfb0d, #fbfbfb4d, #fbfbfb99, #fbfbfb4d, #fbfbfb0d);
    animation: loading-gradient-animation 1s infinite
}

@keyframes loading-gradient-animation {
    0% {
        left: -45%
    }
    100% {
        left: 100%
    }
}

.file-management-buttons {
    background-size: 26px;
    width: 36px;
    background-color: #fff;
    height: 36px;
    border-radius: .27rem;
    margin: 0 .3rem;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #dee2ea8c
}

.file-management-buttons:hover {
    border: 1px solid #0087ff85;
    transition: all .3s
}

.add-file-svg {
    background-image: url(../SVG/dosyaYonetimi/add-file.svg)
}

.add-folder-svg {
    background-image: url(../SVG/dosyaYonetimi/add-folder.svg)
}

.main-folder-svg {
    background-image: url(../SVG/dosyaYonetimi/main-folder.svg)
}

.file-download-svg {
    background-image: url(../SVG/dosyaYonetimi/file-download.svg)
}

.file-quota {
    font-size: .7rem;
    text-align: left
}

.ovalKose {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px
}

.ovalKose2 {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px
}

.yaziBeyaz {
    color: #FFF
}

.sariRenk {
    background-color: #FFC !important
}

.kirmiziRenk {
    background-color: #BC4143 !important
}

.kirmiziRenk2 {
    background-color: #bc414380
}

.turuncuRenk {
    background-color: #F7DED4
}

.yesilRenk {
    background-color: #E6F9BF
}

.maviRenk {
    background-color: #06F !important
}

.beyazRenk {
    background-color: #FFF
}

.sari {
    color: #FFC !important;
}

.kirmizi {
    color: #BC4143 !important;
}

.kirmizi2 {
    color: #bc414380 !important;
}

.turuncu {
    color: #F7DED4 !important;
}

.yesil {
    color: #0EC223 !important;
}

.mavi {
    color: #06F !important;
}

.beyaz {
    color: #FFF !important;
}

.secili {
    background-color: #c1ffc1cc
}

.satirsonbelge {
    background-color: #9BCD9B
}

.mavi:hover {
    color: #06F
}

.dondur90 {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
}

.dondur270 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
}

.dondur45 {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg)
}

.dondur135 {
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg)
}

.tableDiv {
    display: table;
    width: 100%;
    font-size: 10px
}

.trDiv {
    display: table-row
}

.tdDiv {
    display: table-cell;
    border-bottom: 1px solid transparent;
    border-width: thin
}

.thDiv {
    display: table-cell
}

.ajandaDiv {
    position: relative;
    border: 1pt solid transparent;
    border-width: thin
}

.ajandaGun {
    overflow-x: auto;
    left: 0;
    right: 0;
    top: 18px;
    position: absolute;
    border: none
}

.altiCiz:hover {
    border-bottom: 1px dotted #000;
    border-width: thin
}

hr.hr1 {
    border: 0;
    height: 1px;
    background: #333;
    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
    background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
    background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
    background-image: -o-linear-gradient(left, #ccc, #333, #ccc)
}

hr.hr2 {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #0000, #000000bf, #0000);
    background-image: -moz-linear-gradient(left, #0000, #000000bf, #0000);
    background-image: -ms-linear-gradient(left, #0000, #000000bf, #0000);
    background-image: -o-linear-gradient(left, #0000, #000000bf, #0000)
}

hr.hr3 {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999
}

hr.hr4 {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px #00000080
}

hr.hr5 {
    border: 0;
    height: 0;
    border-top: 1px solid #0000001a;
    border-bottom: 1px solid #ffffff4d
}

hr.hr6 {
    height: 30px;
    border-style: solid;
    border-color: #000;
    border-width: 1px 0 0;
    border-radius: 20px
}

hr.hr6:before {
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: #000;
    border-width: 0 0 1px;
    border-radius: 20px
}

hr.hr7 {
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center
}

hr.hr7:after {
    content: "§";
    display: inline-block;
    position: relative;
    top: -.7em;
    font-size: 1.5em;
    padding: 0 .25em;
    background: #fff
}

hr.hr8 {
    border: 0;
    height: 0;
    box-shadow: 0 0 10px 1px #000
}

.boxSize, textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.cerceve, .include-old-design .cerceve, .cerceve .header, .include-old-design .cerceve .header, .cerceve .footerOld, .cerceve .contentOld, fieldset {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.cerceve, .include-old-design .cerceve {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: auto
}

.cerceve .header, .include-old-design .cerceve .header, .cerceve .footerOld, .include-old-design .cerceve .footerOld {
    position: absolute;
    width: 100%;
    clear: both
}

.cerceve .header, .include-old-design .cerceve .header {
    top: 0;
    border-bottom: none
}

.cerceve .contentOld {
    width: 100%;
    height: 100%;
    vertical-align: top;
    overflow: auto
}

.cerceve .footerOld {
    bottom: 0
}

.cerceve .footerOld ul {
    list-style-type: none;
    margin-top: 0;
    margin-bottom: 0
}

.cerceve .footerOld li {
    list-style-type: none;
    margin-right: 2px
}

.cerceve .footerOld table {
    background-color: #f1f1f1
}

.bakiye {
    border-radius: .18rem;
    -moz-border-radius: .18rem;
    -webkit-border-radius: .18rem;
    padding: 5px 8px;
    border: 1px solid #cbd3e1 !important
}

.spanKapat {
    float: right;
    visibility: hidden;
    border: 1px solid transparent;
    color: #999;
    margin-right: 4px;
    margin-top: 1px;
    margin-bottom: 0;
    padding: 0 3px 2px 4px
}

.mesajBildirimDefault .spanKapat {
    position: absolute !important;
    top: 10px !important;
    right: 14px !important;
    color: inherit !important;
    font-size: 1.5rem !important;
    margin: 0 !important;
    visibility: visible !important;
    width: unset !important;
    border: 0 !important;
    font-size: 1.3rem !important
}

.mesajBildirimDefault .spanKapat:hover {
    color: #616161;
    text-decoration: none;
    cursor: pointer;
    opacity: .5
}

.spanPersonel {
    float: left;
    margin-left: 4px;
    margin-top: 3px;
    margin-bottom: 0;
    padding: 0 3px 2px 4px
}

.ovalKose:hover .spanKapat {
    visibility: visible
}

.confirMinimized {
    position: static !important
}

.confirModal {
    position: fixed;
    min-width: 250px;
    border: 1px solid #0000004d;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    outline: none;
    -webkit-box-shadow: 0 3px 7px #0006;
    -moz-box-shadow: 0 3px 7px #0006;
    box-shadow: 0 3px 7px #0006;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    padding-bottom: 30px
}

.confirModal .fade {
    top: -25%;
    -webkit-transition: opacity .3s linear, top .3s ease-out;
    -moz-transition: opacity .3s linear, top .3s ease-out;
    -o-transition: opacity .3s linear, top .3s ease-out;
    transition: opacity .3s linear, top .3s ease-out
}

.confirModal .fade .in {
    top: 10%
}

.confirmKapat {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    min-width: 20px;
    width: 20px;
    height: 20px;
    background-color: #e4e9f3;
    padding: 0 !important;
    border-radius: .25rem;
    overflow: hidden
}

.confirmKapat:hover {
    text-decoration: none;
    cursor: pointer;
    background-color: #d4dcea
}

.confirmKapat span:before {
    content: "\f129";
    display: inline-block;
    font-family: "Ionicons";
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased
}

.confirModal .header {
    position: relative;
    padding: 0;
    border-bottom: 1px solid #aaa;
    background-color: #96b4d780;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    border-top-right-radius: 6px;
    height: 40px
}

.confirModal .header .confirmKapat {
    margin-top: 0
}

.confirModal .contentOld {
    position: relative;
    overflow-y: auto;
    height: 100%;
    width: 100%;
    overflow: auto
}

#kategoriContent {
    padding: 15px
}

.confirModal .footerOld {
    position: absolute;
    bottom: 0;
    height: 32px;
    width: 100%;
    padding: 2px;
    margin-bottom: 0;
    text-align: right;
    background-color: transparent;
    border-top: 1px solid #ddd;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    *zoom: 1;
    -webkit-box-shadow: inset 0 1px 0 #fff;
    -moz-box-shadow: inset 0 1px 0 #fff;
    box-shadow: inset 0 1px 0 #fff
}

.confirModal .footerOld:before, .confirModal .footerOld:after {
    display: table;
    line-height: 0;
    content: ""
}

.confirModal .footerOld:after {
    clear: both
}

.temaHucre {
    opacity: .8;
    width: 75px;
    height: 75px;
    display: inline-block;
    position: relative;
    margin-top: 10px;
    font-weight: 700;
    text-align: center
}

.temaHucre:hover {
    opacity: 1
}

.temaSec {
    overflow: hidden;
    -webkit-box-shadow: 0 2px 8px #000f;
    -moz-box-shadow: 0 2px 8px #000f;
    box-shadow: 0 2px 8px #000f;
    min-width: 100%;
    min-height: 100%;
    display: inline-block;
    position: relative;
    background-color: #333
}

.temaSec:before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border: 1px solid #ffffff40
}

.temaSec:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -40%;
    left: 0;
    width: 500%;
    height: 400%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    background: transparent;
    -webkit-box-shadow: 0 0 0 200px #ffffff26;
    -moz-box-shadow: 0 0 0 200px #ffffff26;
    box-shadow: 0 0 0 200px #ffffff26;
    border: 1px solid #fff3;
    transition: all .3s
}

.temaSec:hover:before {
    border-color: #ffffff4d
}

.temaSec:hover:after {
    -webkit-box-shadow: 0 0 0 200px #fff3;
    -moz-box-shadow: 0 0 0 200px #fff3;
    box-shadow: 0 0 0 200px #fff3;
    background: #ffffff0d
}

.temaSec.beyazRenk {
    background-color: #fff
}

.temaSec.carbonRenk {
    background-color: #971C44
}

.temaSec.softRenk {
    background-color: #1d1c2a
}

.temaSec.maviRenk {
    background-color: #3f66cf
}

.temaSec.sariRenk {
    background-color: #DBBA2F
}

.temaSec.truncuRenk {
    background-color: #DA8240
}

.temaSec.kirmiziRenk {
    background-color: #EE4746
}

.temaSec.yesilRenk {
    background-color: #608F5F
}

.temaSec.gradyanRenk {
    background-image: linear-gradient(120deg, #8b4af2 0%, #585df9 100%)
}

.temaSec.morRenk {
    background-color: #7163ba
}

.temaSec.turkuazRenk {
    background-color: #48BDB1
}

.temaSec.defaultRenk {
    background-color: #666
}

.hidden {
    visibility: hidden
}

.show {
    visibility: visible
}

.noRepeat {
    background-repeat: no-repeat;
    background-position: center;
    padding: 0
}

.pasifYap {
    opacity: .7;
    color: #0006 inherit;
    text-shadow: 1px 1px 0 #ffffff80 !important;
    cursor: not-allowed !important
}

.file-modal-footer:empty {
    display: none
}

.dosyaYonetimi {
    height: 180px;
    background-color: transparent !important;
    background-position: center;
    background-size: contain;
}

.dosyaYonetimi.folder {
    background-size: 50%;
}

@media (max-width: 768px) {
    .ftpIcerik.boxSize.ui-selectable {
        touch-action: auto;
    }
}

.listeSatirYazi {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-align: center;
    margin: 0;
    padding: 1px
}

.dy-dosya-adi {
    text-align: center;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-size: .8rem;
    padding: .5rem;
    background-color: transparent !important
}

.file-check-icon {
    opacity: 0;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin: 0;
    position: absolute;
    line-height: 0;
    font-size: 15px;
    padding: 7px;
    top: -7px;
    right: -7px;
    transition: all .3s
}

.file-left-click-icon {
    opacity: 0;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    color: #fff;
    margin: 0;
    background: #c7b7b7;
    position: absolute;
    line-height: 0;
    font-size: 16px;
    padding: 6.5px;
    top: -7px;
    left: -7px;
    transition: all .3s;
    box-shadow: #64646f33 0 7px 29px 0
}

.dosyaCerceve:hover .file-left-click-icon {
    opacity: 1
}

@media (max-width: 768px) {
    .file-left-click-icon {
        opacity: 1 !important
    }
}

.checked-file .file-check-icon {
    opacity: 1 !important;
    background: #0087FF
}

.checked-file .file-check-icon i {
    color: #fff
}

.dosyaYonetimi {
    background-image: url(../../../resimler/button_icon/default/renkli/file.png)
}

.folder {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/folder.svg)
}

.filephp {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/php.svg)
}

.fileamr {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/record.svg)
}

.filebat {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/excel.svg)
}

.filedat, .filehtml, .filehtm {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/css.svg)
}

.filedmg, .filedll, .filexpi, .filemsi, .fileexe, .fileprogram, .filehqx {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/disc.svg)
}

.filedoc, .filedocx {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/doc.svg)
}

.fileeml {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/mail.svg)
}

.filefile {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/word.svg)
}

.filefolder {
    background-image: url(../../../resimler/button_icon/default/renkli/folder.png)
}

.filefolderAc {
    background-image: url(../../../resimler/button_icon/default/renkli/folderAc.png)
}

.filefolderAktar {
    background-image: url(../../../resimler/button_icon/default/renkli/folderAktar.png)
}

.fileiso {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/iso.svg)
}

.filejpg, .filejpeg, .filepng, .filegif, .fileswf {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/image.svg)
}

.filemdb {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/sql.svg)
}

.filemov, .filemow, .filemp4, .file3gp, .filewmv, filem4v, .fileflv {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/video.svg)
}

.filepdf {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/pdf.svg)
}

.filepps {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/powerpoint.svg)
}

.filepsd {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/psd.svg)
}

.fileses {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/music.svg)
}

.filettf {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/ttf.svg)
}

.filetxt {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/txt.svg)
}

.filewps, .filelog, .filertf {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/text.svg)
}

.filexls, .filexlsx {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/xls.svg)
}

.filezip, .filecbr, .filecab, .filepst, .filetgz, .filejar, .filebmp, .filerar, .filebin, .fileace, .file7z {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/zip.svg)
}

.filedwg, .filedxf, .filedwf, .filefla, .fileps {
    background-image: url(../SVG/dosyaYonetimi/fileTypes/vector.svg)
}

.fileAktif {
    background-image: url(../../../resimler/button_icon/default/renkli/folder_open.png);
    float: right;
    vertical-align: top;
    width: 150px;
    margin-top: 3px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.dosyaCerceve, .dosyaCerceve2, .dosyaCerceveSec {
    display: inline-block;
    width: 75px;
    height: 50px;
    margin: 5px 3px 0 13px;
    text-align: center;
    background-color: #fff0;
    border: 1px solid transparent;
    cursor: pointer;
    padding-top: 6px;
    float: left
}

.dosyaYonetimi {
    margin-top: 8px
}

.dosyaCerceveSec {
    background-color: #ffffffe6;
    border-color: #f5ffffe6
}

.ftpIcerik .ui-selecting {
    background-color: hsl(0, 0%, 95%);
    border-color: #ddd
}

.ftpIcerik .ui-selected {
    background-color: hsl(0, 0%, 89%);
    border-color: #0087FF
}

.ftpIcerik .ui-selected.checked-file-2 {
    background-color: hsl(0, 0%, 89%);
    border-color: #839eb3
}


.ftpIcerik {
    list-style-type: none;
    padding: .5rem;
    margin: 0;
    width: 100%;
    height: 100%
}

.ftpIcerik .dosyaCerceve, .ftpIcerik .dosyaCerceve2 {
    position: relative;
    margin: .25rem .5rem;
    padding: 1px;
    width: calc((100% - 6rem) / 6);
    height: auto;
    text-align: center;
    background: #fff;
    box-shadow: 0 0 14px #0000000f;
    border-radius: .25rem;
    transition: .3s ease all;
}

@media (min-width: 780px) {
    .ftpIcerik .dosyaCerceve, .ftpIcerik .dosyaCerceve2 {
        width: calc(25% - 1rem) !important;
    }
}

.dosyaCerceve:hover {
    background-color: #eee
}

.ui-selectable-helper {
    position: absolute;
    z-index: 99999999;
    border: 1px dotted #000
}

.ftpCerceve {
    padding-top: 46px;
    padding-bottom: 25px;
    width: 99%;
    height: 100%;
    position: relative;
    background: #f8f9fc !important
}

.ftpMenu {
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    box-shadow: inset 0 0 1px #fff
}

.ftpMenu button {
    vertical-align: top
}

.ftpMenuCizgi {
    border-right: 1px solid #ddd;
    display: inline-block;
    width: 1px;
    height: 80%;
    margin: 0 3px
}

.ftpContent {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: auto
}

.ftpFooter {
    border-top: 1px solid #ddd;
    width: 100%;
    height: 22px;
    position: absolute;
    bottom: 0;
    box-shadow: inset 0 0 1px #fff;
    vertical-align: middle
}

.no-transition {
    transition: none !important
}

.upload-container {
    background-color: #efefef;
    border-radius: 6px;
    padding: 10px
}

.border-container {
    border: 5px dashed #c6c6c6a6;
    text-align: center;
    padding: 20px
}

.border-container p {
    font-family: 'Nunito';
    color: #130f40;
    font-weight: 600;
    font-size: 1.8em;
    letter-spacing: -1px;
    margin-top: 30px;
    margin-bottom: 0;
    opacity: .65
}

.border-container p a {
    text-decoration: none;
    color: #162aff;
    border-bottom: 3px dotted #1616ffd9
}

.border-container p a:hover {
    color: #00f;
    border-bottom: 3px dotted #0000ffd9
}

.drag-file-icons {
    color: #95afc0;
    opacity: .55;
    font-size: 8em
}

.drag-file-svg {
    display: inline-block;
    font-size: inherit;
    height: 1.5em;
    overflow: visible !important;
    vertical-align: -.125em;
    width: .75em
}

.tooltip {
    z-index: 9999999999
}

.tooltip-inner {
    background-color: #000000c9;
    color: #fff;
    border-radius: 10px;
    padding: 2px 5px
}

.form-input-warning {
    border: 2px solid #c9892996 !important;
    background-color: #a1ad3c14 !important
}

.form-input-danger {
    border: 2px solid #fb324a85 !important;
    background-color: #ad3c5614 !important
}

.search-error {
    border-radius: 15px;
    text-align: center;
    display: grid;
    justify-items: center;
    grid-template-rows:25% 30px auto
}

.search-error .loader-bad {
    position: relative;
    justify-self: center;
    width: 90px;
    height: 90px;
    border-radius: 10px;
    transform-origin: bottom center;
    animation: nonono .8s forwards linear, shapes 1s 2s forwards cubic-bezier(0.075, 0.82, 0.165, 1), color-bad 1s 3s forwards cubic-bezier(0.075, 0.82, 0.165, 1);
    background: #F83F2E
}

.search-error .loader-bad:before {
    content: '';
    position: absolute;
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
    top: 100%;
    width: 16px;
    height: 16px;
    border-radius: 0 0 2px 0;
    animation: bubble 1.5s 1.6s forwards cubic-bezier(0.075, 0.82, 0.165, 1);
    background: #F83F2E
}

.search-error .loader-bad .icon {
    position: absolute;
    transform: translate(-50%, -50%) rotate(0deg);
    top: 50%;
    left: 50%
}

.search-error .loader-bad .icon svg {
    margin-bottom: 0 !important;
    width: 60px;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #fff;
    stroke-dashoffset: 40;
    fill: none
}

.search-error .loader-bad .search svg {
    margin-bottom: 0 !important;
    width: 70px;
    stroke-dasharray: 80;
    stroke-dashoffset: 0;
    animation: icon-transform 1.2s .4s forwards cubic-bezier(0.86, 0, 0.07, 1)
}

.search-error .loader-bad .bad svg {
    margin-bottom: 0 !important;
    stroke-dasharray: 27.8;
    stroke-dashoffset: 28;
    animation: face-bad 1s 1.2s forwards cubic-bezier(0.075, 0.82, 0.165, 1);
    transform: translateY(5px)
}

@keyframes nonono {
    0% {
        transform: rotate(-10deg)
    }
    5% {
        transform: rotate(10deg)
    }
    10% {
        transform: rotate(-10deg)
    }
    20% {
        transform: rotate(10deg)
    }
    30% {
        transform: rotate(-10deg)
    }
    40% {
        transform: rotate(10deg)
    }
    50% {
        transform: rotate(-10deg)
    }
    70% {
        transform: rotate(10deg)
    }
    90% {
        transform: rotate(-10deg)
    }
    100% {
        transform: rotate(0deg)
    }
}

@keyframes icon-transform {
    0% {
        stroke-dashoffset: 0
    }
    100% {
        stroke-dashoffset: 85
    }
}

@keyframes check {
    0% {
        stroke-dashoffset: 23
    }
    100% {
        stroke-dashoffset: 0
    }
}

@keyframes face-bad {
    0% {
        stroke-dashoffset: 28
    }
    100% {
        stroke-dashoffset: 0
    }
}

@keyframes bubble {
    0% {
        top: 100%;
        transform: translate(-50%, -50%) rotate(45deg) scale(1)
    }
    100% {
        top: 50%;
        transform: translate(-50%, -50%) rotate(45deg) scale(0);
        opacity: 0
    }
}

@keyframes color {
    0% {
        background: #F83F2E
    }
    100% {
        background: #93df70
    }
}

@keyframes color-bad {
    0% {
        background: #F83F2E
    }
    100% {
        background: #7F828B
    }
}

@keyframes shapes {
    0% {
        border-radius: 10px
    }
    100% {
        border-radius: 45px
    }
}

@media (min-width: 768px) {
    .d-md-table {
        display: table !important
    }
}

.ngx-contextmenu ul {
    position: absolute;
    padding: 1px;
    margin: 0;
    border: .5px solid #cbd3e1;
    background: #fff;
    z-index: 999999999;
    border-radius: .25rem;
    box-shadow: -1px 1px 8px -1px #cbd3e1;
    opacity: 0;
    transform: translateY(15px) scale(.95);
    transition: transform .1s ease-out, opacity .1s ease-out;
    pointer-events: none
}

.ngx-contextmenu.open ul, .ngx-contextmenu.show ul {
    opacity: 1;
    transform: translate(0) scale(1);
    pointer-events: auto;
    padding: .3rem 0
}

.ngx-contextmenu ul li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    white-space: nowrap
}

.ngx-contextmenu ul li a {
    display: flex;
    align-items: center;
    color: #4e5d6c;
    font-size: .8rem;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px 6px 20px;
    outline: 0 none;
    text-decoration: none
}

.ngx-contextmenu ul li a i {
    margin-right: .6rem;
    font-size: 1.2rem;
    width: 12px;
    line-height: 1.2rem;
    text-align: center;
    display: inline-block
}

.ngx-contextmenu ul li:hover > a {
    color: #0087ff;
    outline: none;
    background-color: #f7f8fa;
    transition: all .3s
}

.ngx-contextmenu ul li.disabled {
    opacity: .5;
    pointer-events: none
}

.ngx-contextmenu ul li.disabled .context-btn {
    cursor: default
}

.context-separator {
    display: block;
    margin: 2px 5px;
    height: 1px;
    border-bottom: .5px solid #cbd3e1
}

.ngx-contextmenu ul li .hasSubMenu:before {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: grey
}

.ngx-contextmenu ul li .hasSubMenu:hover:before {
    border-left-color: #fff
}

.context .context {
    top: 4px;
    left: 99%
}

.ngx-contextmenu ul li:hover > .context, .show-context {
    opacity: 1;
    transform: translate(0) scale(1);
    pointer-events: auto
}

.ngx-contextmenu ul li:hover > .context {
    transition-delay: .3s
}

.ngx-contextmenu ul li.divider {
    margin: .2rem 0 !important
}

.wt-checkbox > input.partial ~ span {
    border: 1px solid #677c8f;
    background: #677c8f
}

.wt-checkbox > input.partial ~ span:after {
    top: 50%;
    left: 50%;
    margin-left: -2.4px;
    margin-top: -3px;
    width: 5px;
    height: 9px;
    border-width: 0 2px 0 0 !important;
    -webkit-transform: rotate(45deg);
    transform: rotate(270deg);
    content: '';
    position: absolute;
    display: block
}

.edit-modal {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    filter: alpha(opacity=50);
    opacity: 1;
    background-color: #0000001f;
    color: red
}

.edit-focus {
    position: relative;
    border: 0;
    border-radius: .27rem;
    -webkit-box-shadow: #ffffffad 0 22px 70px 4px;
    box-shadow: #ffffffad 0 22px 70px 4px
}

.pagination-fix-br {
    border-bottom: 1px solid #dde9fb !important;
    margin: 0;
    padding: 10px 5px;
}

.wt-table-input-button {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: all .3s ease 0s;
    font-size: 100%
}

@media (max-width: 768px) {
    .wt-table-input-button {
        position: absolute;
        top: 8px;
        right: 8px;
        opacity: 1;
        transition: all .3s ease 0s;
        font-size: 100%
    }

    .ngx-contextmenu ul li a {
        padding: 10px 12px 10px 20px !important;
    }

    .dropdown-item {
        padding: 10px 12px 10px 20px !important;
    }
}

.wt-table-input:hover ~ .wt-table-input-button,
.wt-table-input-button:hover,
.has-input-button:hover .wt-table-input-button {
    opacity: 1
}

.has-input-button {
    position: relative;
}

.print-preferences {
    width: 250px;
    padding: 1rem
}

.print-preferences tr:last-child {
    border-bottom: 0 !important
}

.print-preferences tr td {
    text-align: center
}

.print-preferences tr td:first-child {
    text-align: left
}

.print-preferences td i {
    font-size: 18px;
    padding: 6px;
    cursor: pointer
}

.secili .clist-content .fw-name {
    font-weight: 500 !important
}

.calendar-container {
    width: 100%;
    height: 100%;
    -webkit-box-shadow: 0 1px 12px 4px #45414e0a;
    box-shadow: 0 1px 12px 4px #45414e0a;
    border-radius: .25rem;
    background: #fff
}

.calendar-header {
    display: flex !important;
    justify-content: space-between;
    height: 62px;
    background: linear-gradient(to bottom, #fafbfd 0%, #fff0 100%);
    border-bottom: 1px solid #a6a8b31f
}

.date-format {
    flex-direction: column;
    text-align: center;
    padding: .8rem 1rem
}

.calendar-header-items {
    padding: .8rem 1rem;
    display: flex
}

.calendar-header-items-margin {
    margin-right: 1rem
}

@media (max-width: 450px) {
    .date-format {
        flex-direction: column;
        text-align: center;
        padding: .8rem .5rem !important
    }

    .calendar-header-items {
        padding: .8rem .5rem !important;
        display: flex
    }

    .calendar-header-items-margin {
        margin-right: .5rem !important
    }
}

.calendar-header .changeble-date-format {
    display: flex;
    height: 20px
}

.calendar-header .changeble-date-format button {
    color: #51565db3;
    font-size: 1rem
}

.calendar-header .changeble-date-format h1 {
    font-weight: 700;
    color: #51565d;
    margin: 0;
    font-size: 18px !important
}

.calendar-header .unchangeble-date-format {
    margin: 5px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: #51565d66
}

.calendar-daily {
    width: 100%;
    height: calc(100% - 62px);
    overflow: auto;
    display: flex;
    flex-direction: column
}

.calendar-daily .hour {
    display: flex;
    width: 100%;
    height: calc(100% / 24);
    min-height: 26.5px;
    border-bottom: 1px solid #a6a8b31f;
    cursor: pointer;
}

.calendar-daily .hour .hour-title {
    font-size: 12px;
    text-transform: uppercase;
    color: #99a1a7;
    text-align: center;
    font-weight: 500;
    padding: 8px 14px;
    border-right: 1px solid #a6a8b31f
}

.calendar-daily .hour .hour-content {
    display: flex;
    padding: 0 14px;
    width: 100%
}

@media (max-width: 768px) {
    .calendar-daily .hour .hour-title {
        padding: 5px 7px
    }

    .calendar-daily .hour .hour-content {
        padding: 0 7px
    }
}

.calendar-daily .hour .hour-content .task, .calendar-daily .hour .hour-content .event {
    margin: 0 7px;
    border-radius: 0;
    max-width: 200px
}

.event.three-dots {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    text-overflow: unset !important;
}

.calendar-monthly {
    display: grid;
    width: 100%;
    height: calc(100% - 62px);
    grid-template-columns:repeat(7, minmax(120px, 1fr));
    grid-template-rows:50px;
    grid-auto-rows: calc((100% - 50px) / 5);
    overflow: auto
}

.add-event-btn {
    height: 26px;
    padding: 0 7px;
    line-height: .8rem;
    background: none;
    background: #f1f1f1;
    color: #767d81f0;
    font-weight: 500;
    opacity: 0;
    transition: .2s ease-in-out;
}

.add-event-btn:hover {
    color: #0087FF;
    cursor: pointer;
}

.day:hover .add-event-btn {
    opacity: 1;
}

.calendar-planning {
    width: 100%;
    height: calc(100% - 62px);
    overflow: auto
}

.calendar-planning .plan {
    display: flex;
    width: 100%;
    min-height: 42px;
    border-bottom: 1px solid #a6a8b31f
}

.calendar-planning .plan-infos {
    width: calc(100% - 100px);
    display: flex;
    flex-direction: column
}

.calendar-planning .plan-info {
    margin: 6px 7px;
    height: 36px;
    display: flex;
    border-radius: 32px;
    transition: all .3s;
    justify-content: unset !important;
    border: 0 !important
}

.calendar-planning .plan-info:hover {
    background-color: #2021240a
}

.plan-active {
    box-shadow: 0 6px 10px 0 #00000024 0 1px 18px 0 #0000001f 0 3px 5px -1px #0003;
    background-color: #fff !important
}

.calendar-planning .plan .plan-date {
    display: flex;
    padding: 14px;
    width: 100px
}

.calendar-planning .plan .plan-day {
    font-size: 18px;
    line-height: 1;
    margin-right: 8px;
    font-weight: 500
}

#bugunscroll {
    box-shadow: #00000008 inset 0 0 15px
}

.calendar-planning .plan .plan-month {
    font-size: 12px;
    line-height: 1;
    margin-top: 4px;
    font-weight: 500;
    color: #918989
}

.calendar-planning .plan .plan-dot {
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1
}

.calendar-planning .plan .plan-hour {
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1
}

.calendar-planning .plan .plan-title {
    padding: 10px 7px;
    font-size: 14px;
    line-height: 1;
    max-width: calc(100% - 68px)
}

.calendar-planning .plan .plan-personal {
    padding: 10px 7px;
    font-size: 14px;
    line-height: 1
}

.day-name {
    font-size: 12px;
    text-transform: uppercase;
    color: #99a1a7;
    text-align: center;
    border-bottom: 1px solid #a6a8b31f;
    line-height: 50px;
    font-weight: 500
}

.day {
    border-bottom: 1px solid #a6a8b31f;
    border-right: 1px solid #a6a8b31f;
    text-align: right;
    transition: all .3s;
    padding: 14px 20px 8px;
    letter-spacing: 1px;
    font-size: 12px;
    box-sizing: border-box;
    color: #98a0a6;
    position: relative;
    overflow: auto;
    z-index: 1
}

.day:hover {
    box-shadow: #00000008 inset 0 0 15px
}

.day--disabled {
    color: #98a0a699;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f9f9fa' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
    cursor: not-allowed
}

.day:nth-of-type(7n + 7) {
    border-right: 0
}

.day:nth-of-type(n + 1):nth-of-type(-n + 7) {
    grid-row: 2
}

.day:nth-of-type(n + 8):nth-of-type(-n + 14) {
    grid-row: 3
}

.day:nth-of-type(n + 15):nth-of-type(-n + 21) {
    grid-row: 4
}

.day:nth-of-type(n + 22):nth-of-type(-n + 28) {
    grid-row: 5
}

.day:nth-of-type(n + 29):nth-of-type(-n + 35) {
    grid-row: 6
}

.day:nth-of-type(7n + 1) {
    grid-column: 1/1
}

.day:nth-of-type(7n + 2) {
    grid-column: 2/2
}

.day:nth-of-type(7n + 3) {
    grid-column: 3/3
}

.day:nth-of-type(7n + 4) {
    grid-column: 4/4
}

.day:nth-of-type(7n + 5) {
    grid-column: 5/5
}

.day:nth-of-type(7n + 6) {
    grid-column: 6/6
}

.day:nth-of-type(7n + 7) {
    grid-column: 7/7
}

.saturday-bg {
    background: #f6f6f6b5
}

.sunday-bg {
    background: #f4f4f4
}

.today {
    border-radius: 50%;
    background: #0087FF;
    color: #fff;
    width: 26px;
    text-align: center;
    padding: 5px;
    height: 26px;
    font-weight: 500;
    float: right;
    transition: ease-in-out .3s;
    cursor: pointer;
}

.today:hover {
    background: #027ce8
}

.monthly-day {
    border-radius: 50%;
    background: #FFF;
    color: #98a0a6;
    width: 26px;
    text-align: center;
    padding: 5px;
    height: 26px;
    float: right;
    font-weight: 500;
    transition: ease-in-out .3s;
    cursor: pointer;
}

.monthly-day:hover {
    background: #f1f1f1;
    color: #767d81f0
}

.task {
    border-left-width: 3px;
    padding: 8px 12px;
    margin: 10px -10px;
    border-left-style: solid;
    font-size: 11px;
    position: relative;
    font-family: Montserrat, "sans-serif";
    text-align: left;
    transition: all .5s;
    z-index: 1;
    background: #e8eff7;
    color: #4c4949;
    box-shadow: #0000001a 0 2px 8px
}

.task:hover {
    box-shadow: #0003 0 2px 8px
}

@media (max-width: 768px) {
    .task, .event {
        padding: 6px 8px;
        margin: 6px -12px;
        font-size: 10px
    }
}

@media (max-width: 1215px) {
    .weather-container {
        display: none !important
    }

    .currency-container {
        display: none !important
    }
}

.task--blue {
    background: #4786ff;
    border: 0;
    border-radius: 4px;
    color: #fff
}

.task--blue:hover {
    background: #1578cd
}

.task--lightblue {
    background: #dae7ffb3;
    border: 1px solid #0a5effb8;
    border-radius: 4px;
    color: #0a5eff
}

.task--lightblue:hover {
    background: #dae7ffe6
}

.task--orange {
    background: #fef0db;
    border: 0;
    border-radius: 4px;
    color: #fc9b10
}

.task--orange:hover {
    background: #ffefd7
}

.task--red {
    background: #f8254e;
    border: 0;
    border-radius: 4px;
    color: #fff
}

.task--red:hover {
    background: #de1f45
}

.task--green {
    background: #28a745;
    border: 0;
    border-radius: 4px;
    color: #fff
}

.task--green:hover {
    background: #269d41
}

.task--gray {
    background: #98a0a6;
    border: 0;
    border-radius: 4px;
    color: #fff
}

.task--gray:hover {
    background: #90989d
}

.task--dark {
    background: #343a40;
    border: 0;
    border-radius: 4px;
    color: #fff
}

.task--dark:hover {
    background: #23272b
}

.task--darkblue {
    background: #2b3dff;
    border: 0;
    border-radius: 4px;
    color: #fff
}

.task--darkblue:hover {
    background: #293af6
}

.event {
    border-left-width: 3px;
    padding: 8px 12px;
    margin: 10px -10px;
    border-left-style: solid;
    font-style: italic;
    font-size: 11px;
    line-height: 11px;
    position: relative;
    font-family: Montserrat, "sans-serif";
    text-align: left;
    transition: all .5s;
    z-index: 1;
    background: #e8eff7;
    color: #4c4949;
    cursor: pointer;
}

.event:hover {
    box-shadow: #0000004d 0 2px 5px;
    background: #dde5ee
}

.event--read {
    border-left-color: #5a56567d;
    color: #5a5656c9
}

.event--notdone {
    border-left-color: #4c4949;
    color: #4c4949
}

.event--done {
    border-left-color: #28a745;
    color: #28a745
}

.weather-container {
    background: linear-gradient(135deg, #fff6, #0087ff) #0087ff !important;
    display: flex;
    height: 50px;
    margin: 6px 0;
    width: auto;
    border-radius: .18rem
}

.weather-container .weather {
    display: flex;
    margin: 0 10px
}

.weather-container .weather .temperature {
    margin: 7px 0 0;
    font-size: 24px;
    color: #fff;
    height: 24px;
    line-height: 24px
}

.weather-container .weather .temperature-unit {
    margin: 7px 0 0;
    height: 24px;
    line-height: 1;
    font-size: 12px;
    color: #fff
}

.weather-container .weather .weather-today {
    margin-bottom: 7px;
    font-size: 12px;
    color: #fff;
    height: 12px;
    line-height: 12px
}

.weather-container .weather .element {
    height: 38px;
    width: 38px;
    margin: 6px 10px
}

.weather-container .weather-infos {
    height: 40px;
    margin: 5px 10px 5px 0;
    border-radius: .18rem;
    padding: 6px;
    background: #ffffff30
}

.weather-container .weather-infos .weather-event {
    color: #fff;
    margin: 0 0 3px;
    font-size: 14px;
    line-height: 14px;
    font-weight: 500
}

.weather-container .weather-infos .province {
    color: #fff;
    font-size: 12px;
    margin: 0;
    line-height: 12px;
    font-weight: 300
}

.weather-container .weather-infos .district {
    color: #f0e0e0;
    font-size: 12px;
    font-weight: 300;
    line-height: 12px;
    margin: 0 0 0 4px
}

.currency-container {
    height: 50px;
    margin: 6px 0 6px 1rem;
    background: linear-gradient(135deg, #fff6, #263438) #263438 !important;
    border-radius: .18rem
}

.currency-infos {
    display: flex !important;
    justify-content: space-between
}

@-webkit-keyframes slide {
    0% {
        transform: translateY(100%);
        opacity: 0
    }
    100% {
        transform: translateY(0%);
        opacity: 1
    }
}

.currency-container label {
    -webkit-animation: slide ease-in-out .3s forwards;
    animation: slide ease-in-out .3s forwards;
    color: #fff;
    font-size: 12px;
    line-height: 12px;
    font-family: 'Montserrat';
    height: 12px;
    font-weight: 300;
    margin: 9px 10px;
    text-align: left
}

.currencies {
    min-width: 140px
}

@-webkit-keyframes swinging {
    0% {
        -webkit-transform: rotate(5deg)
    }
    50% {
        -webkit-transform: rotate(-5deg)
    }
    100% {
        -webkit-transform: rotate(5deg)
    }
}

@keyframes swinging {
    0% {
        transform: rotate(5deg)
    }
    50% {
        transform: rotate(-5deg)
    }
    100% {
        transform: rotate(5deg)
    }
}

.calendar-note {
    position: fixed;
    top: 15vh;
    right: 28px;
    z-index: 2;
    background: linear-gradient(-45deg, #ff8 81%, #ff8 82%, #ff8 82%, #ffffc6 100%);
    width: 80px;
    height: 80px;
    opacity: .8;
    transition: .2s all ease-in-out;
    box-shadow: #00000029 0 3px 6px, #0000003b 0 3px 6px;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-animation: swinging 3.5s ease-in-out forwards infinite;
    animation: swinging 3.5s ease-in-out forwards infinite;
    font-family: 'Chilanka', cursive
}

.new-calendar-note-large {
    display: none
}

.calendar-note:hover, .calendar-note:focus {
    animation: none;
    width: 300px;
    height: 300px;
    opacity: 1;
    transform: none !important
}

.calendar-note:hover .new-calendar-note-small {
    height: 100%;
    display: none
}

.calendar-note:hover .new-calendar-note-large, .calendar-note:focus .new-calendar-note-large {
    display: block;
    height: 100%
}

.new-calendar-note-small .new-note-btn {
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    position: absolute !important;
    padding: 0 !important;
    top: -10px !important;
    right: -10px !important
}

.new-calendar-note-small .new-note-text {
    text-align: center;
    margin: 0;
    height: 100%;
    padding: 1.3rem 7px
}

.new-calendar-note-large .new-note-area {
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    resize: none;
    background: transparent;
    font-family: 'Chilanka', cursive;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
    padding: 22px 14px
}

@-webkit-keyframes fadeIn {
    from {
        opacity: .5
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: .5
    }
    to {
        opacity: 1
    }
}

.new-calendar-note-large .new-note-submit {
    border-radius: 50% !important;
    width: 35px !important;
    height: 35px !important;
    margin: 0 !important;
    position: absolute !important;
    padding: 0 !important;
    top: -12px !important;
    right: -12px !important;
    -webkit-animation: fadeIn .5s;
    animation: fadeIn .5s
}

.new-calendar-note-large .new-note-delete {
    border-radius: 50% !important;
    width: 35px !important;
    height: 35px !important;
    margin: 0 !important;
    position: absolute !important;
    padding: 0 !important;
    top: -12px !important;
    right: 30px !important;
    -webkit-animation: fadeIn .5s;
    animation: fadeIn .5s
}

.calendar-note-show-btn {
    margin-right: 1rem;
    display: flex;
    height: 36px;
    padding: 0 10px;
    border-radius: .18rem
}

.calendar-note-show-btn span {
    margin-right: 10px;
    line-height: 36px
}

.rotate25 {
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg)
}

.rotate-25 {
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg)
}

.messages-container {
    background: #fff;
    padding: 0;
    border-radius: 7px;
    height: 100%
}

.mobile-message-back {
    font-size: 25px;
    color: grey;
    margin-right: 14px;
    margin-top: 10px;
    transition: .3s
}

.settings-tray {
    background: #eee;
    padding: 10px 15px
}

.settings-tray--right i {
    font-size: 25px;
    color: grey;
    margin-left: 14px;
    transition: .3s
}

.settings-tray--right {
    float: right;
    margin-top: 10px;
    display: flex;
    margin-left: auto
}

.friend-drawer--grey {
    background: #eee !important
}

.friend-drawer {
    padding: 10px;
    display: flex;
    vertical-align: baseline;
    background: #fff;
    transition: .1s ease;
    position: relative;
}

.friend-drawer:hover {
    background: #eee
}

@keyframes slide-from-right {
    from {
        width: 0;
        opacity: 0
    }
    to {
        width: 300px;
        opacity: 1
    }
}

@media (max-width: 900px) {
    .message-search {
        width: 212px !important
    }
}

.message-search {
    margin-top: -10px;
    margin-bottom: 0;
    padding: 5px;
    background: #fafafa;
    display: flex;
    width: 300px;
    animation: slide-from-right .3s ease-in-out
}

.message-search span {
    font-size: 20px;
    font-weight: lighter;
    color: #cacaca;
    margin: 2px 2px 9px
}

.message-search-input {
    background: #fff;
    height: 30px;
    margin: 5px 2px
}

.message-search-updown {
    height: 25px;
    padding: 7px;
    width: 25px;
    margin: 7px 2px
}

.message-search-updown i {
    margin: 0 !important;
    font-size: 16px !important
}

.chat-panel {
    height: calc(100% - 120px);
    overflow-y: auto
}

.chat-bubble {
    padding: 10px 14px;
    background: #eee;
    margin: 10px;
    border-radius: 9px;
    position: relative;
    line-height: 1.5;
    font-size: 1rem;
    animation: fadeIn .3s ease-in
}

.chat-bubble-delete {
    position: absolute;
    top: -8px;
    right: -8px;
    border-radius: 50% !important;
    width: 30px;
    padding: 0 !important;
    height: 30px !important;
    animation: fadeIn .6s
}

.chat-bubble-delete i {
    font-size: 14px !important
}

.chat-bubble b {
    font-weight: unset;
    background: orange
}

.col-xs-offset-12 .chat-bubble {
    color: #fff;
    background: linear-gradient(135deg, #fff6, #0087ff) #0087ff !important
}

.chat-bubble:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-bottom: 0;
    margin-top: -10px
}

.chat-bubble--right:after {
    right: 0;
    border-left-color: #0087ff;
    border-right: 0;
    margin-right: -20px
}

.chat-bubble--left:after {
    left: 0;
    border-right-color: #eee;
    border-left: 0;
    margin-left: -20px
}

.read-message {
    color: #00f885;
    position: absolute;
    font-size: 24px;
    bottom: 0;
    right: 14px
}

.read-message-2 {
    color: #00f885;
    position: absolute;
    font-size: 24px;
    bottom: 0;
    right: 9px
}

.message-date {
    color: #dedede;
    position: absolute;
    font-size: 11px;
    bottom: -8px;
    right: 30px
}

.message-date2 {
    position: absolute;
    font-size: 11px;
    bottom: -8px;
    right: 10px
}

.unread-message {
    color: #dedede;
    position: absolute;
    font-size: 24px;
    bottom: 0;
    right: 14px
}

.unread-message-2 {
    color: #dedede;
    position: absolute;
    font-size: 24px;
    bottom: 0;
    right: 9px
}

.unread-message-count {
    background-color: #28a745;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    padding: 2px;
    font-size: 12px;
    text-align: center;
    min-width: 20px
}

.profile-image {
    width: 50px;
    height: 50px;
    border-radius: 40px
}

.profile-image + .status.online {
    width: 10px;
    height: 10px;
    background: limegreen;
    border-radius: 10px;
    border-color: transparent;
    position: absolute;
    top: 50px;
    left: 50px;
}

.friend-drawer .text {
    margin-left: 12px;
    width: 100%
}

.friend-drawer .text h6 {
    margin-top: 6px;
    margin-bottom: 0
}

.friend-drawer .text p {
    margin: 0
}

.messages-list {
    height: calc(100% - 116px);
    overflow-y: auto
}

.messages-list-title {
    margin: 10px 0 10px 20px;
    color: #a4a4a4
}

.messages-search-box {
    background: #fafafa;
    padding: 10px 13px
}

.messages-search-box .input-wrapper {
    background: #fff;
    border-radius: 40px;
    height: 26px
}

.messages-search-box .input-wrapper i {
    color: grey;
    margin-left: 7px;
    font-size: 20px;
    vertical-align: middle
}

.messages-search-box .input-wrapper input {
    border: none;
    border-radius: 30px;
    width: 90%;
    line-height: 26px;
    font-size: 14px;
    display: inline-block;
    height: unset
}

.chat-box-tray {
    background: #eee;
    display: flex;
    padding: 10px 15px;
    align-items: center;
    bottom: 0
}

.chat-box-tray i {
    color: grey;
    font-size: 30px;
    vertical-align: middle
}

.chat-box-tray input {
    margin: 0 10px;
    border: none !important;
    border-radius: 30px;
    width: 100%;
    height: 30px;
    background-color: #fff
}

.emoji {
    margin: 2px;
    font-size: 20px
}

.emoji-list {
    display: grid;
    grid-template-columns:auto auto auto auto auto auto;
    height: 300px;
    overflow: auto
}

.toast-h1 {
    width: 328px;
    font-size: 12px;
    font-weight: 300;
    color: #e5e5e5;
    transition: .3s ease-in-out
}

.toast-h1:hover {
    color: #f5f5f5
}

.toast-h2 {
    width: 328px;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px
}

.toast-h3 {
    width: 328px;
    font-size: 16px;
    font-weight: 400
}

.toast-p {
    width: 328px;
    margin-bottom: 0;
    color: #e9e9e9;
    transition: .3s ease-in-out
}

.toast-p:hover {
    color: #f5f5f5
}

.toast-sneeze-button {
    background-color: #fe9401;
    color: #fff;
    border-radius: 18px;
    padding: 5px 25px;
    margin-top: 12px
}

.toast-sneeze-button:hover {
    background-color: #d07c03
}

.ui-tooltip {
    color: #fff;
    border-radius: 4px;
    margin: 14px;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #616161e6;
    font-family: Roboto, Helvetica Neue, sans-serif;
    font-size: 12px;
    padding: 6px 8px
}

#sweetConfirmPencerepencere {
    animation: dialog-animation .3s
}

.trnsfrm90deg {
    transform: rotate(90deg)
}

.trnsfrm-90deg {
    transform: rotate(-90deg)
}

.ui-resizable-handle.ui-resizable-e:hover {
    background: rgb(177 190 203 / 51%);
}

.ui-resizable-e {
    cursor: e-resize;
    width: 11px !important;
    height: 100%;
    right: -6px;
    top: 0;
    position: absolute;
}

.col-social-web {
    width: 20%
}

@media screen and (max-width: 1500px) {
    .col-social-web {
        width: 33.333%
    }
}

.force-width-sm {
    width: 50px !important
}

.force-width-md {
    width: 80px !important
}

.force-width-lg {
    width: 120px !important
}

.min-width-1000 {
    min-width: 1000px !important
}

.selected-dashboard-date {
    background: #F3F6F9;
    color: #0087ff
}

.selected-dashboard-date:hover {
    background: #f2f6fa;
    color: #0087ff
}

.selected-dashboard-date i {
    display: block !important;
    float: right;
    width: 10px;
    text-align: center;
    font-size: 14px;
    margin-right: 3px;
    position: relative;
    top: 3px
}

.fiyat-label.label-default {
    background-color: #919faf !important;
    opacity: .6 !important
}

.satiryarim {
    color: #4e5d6c80 !important
}

#loading_blocker {
    z-index: 1000000000;
    opacity: 0;
    background-color: #000;
    cursor: wait;
    top: 0;
    left: 0;
    position: fixed;
    height: 100vh;
    width: 100vw
}

@keyframes wt-progress-bar-stripes {
    from {
        background-position: 3px 0
    }
    to {
        background-position: 0 0
    }
}

.wt-progress {
    display: flex;
    height: 3px;
    overflow: hidden;
    font-size: .75rem;
    background-color: #e9ecef;
    width: calc(100% - 160px);
    position: fixed;
    border-radius: .25rem
}

@media (min-width: 992px) and (max-width: 1440px) {
    .wt-progress {
        width: calc(100% - 135px) !important
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .wt-progress {
        width: calc(100% - 50px) !important
    }
}

@media (max-width: 768px) {
    .wt-progress {
        width: 100% !important
    }
}

.wt-progress-bar {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    background-color: #007bff;
    transition: width .6s ease
}

.wt-progress-bar-striped {
    background-image: linear-gradient(45deg, #ffffff26 25%, transparent 25%, transparent 50%, #ffffff26 50%, #ffffff26 75%, transparent 75%, transparent);
    background-size: 1rem 1rem
}

.wt-progress-bar-animated {
    animation: wt-progress-bar-stripes 3
}

.wt-progress-bar.indeterminate {
    position: relative;
    animation: wt-progress-indeterminate 1.5s linear infinite
}

.wt-progress-bar:not(.indeterminate) {
    position: relative;
    transition: width 400ms ease-in-out
}

@keyframes wt-progress-indeterminate {
    from {
        left: -55%;
        width: 55%
    }
    to {
        left: 100%;
        width: 55%
    }
}

.db-tab-w {
    width: calc(100% - 114px)
}

@media (max-width: 992px) {
    .db-tab-w {
        width: calc(100% - 120px)
    }
}

@media (max-width: 767px) {
    .wt-tab-header-row {
        padding: 0 7px;
    }
}

.dragtable-sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    -moz-user-select: none
}

.dragtable-sortable li {
    margin: 0;
    padding: 0;
    float: left;
    font-size: 1em;
    background: #fff
}

.dragtable-sortable th, .dragtable-sortable td {
    border-left: 0
}

.dragtable-sortable li:first-child th, .dragtable-sortable li:first-child td {
    border-left: 1px solid #CCC
}

.ui-sortable-helper {
    opacity: .7;
    filter: alpha(opacity=70)
}

.ui-sortable-placeholder {
    -moz-box-shadow: 4px 5px 4px #C6C6C6 inset;
    -webkit-box-shadow: 4px 5px 4px #C6C6C6 inset;
    box-shadow: 4px 5px 4px #C6C6C6 inset;
    border-bottom: 1px solid #CCC;
    border-top: 1px solid #CCC;
    visibility: visible !important;
    background: #EFEFEF !important;
    visibility: visible !important
}

.ui-sortable-placeholder * {
    opacity: 0;
    visibility: hidden
}

.b2c-menu {
    display: flex;
    float: right;
    border: 1px dashed #686e87;
    border-radius: 3px;
    width: 100%
}

.menuEkle {
    cursor: pointer;
    height: 40px;
    width: 20%;
    border-left: 1px dashed #686e87;
    padding: 10px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s
}

.menuEkle:first-child {
    border-left: none !important
}

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

.kategori-button {
    width: 75px;
    height: 25px;
    font-size: 12px;
    border: none;
    color: #fff;
    border-radius: 50px;
    background-color: #4b75eb !important
}

.menuEkle:hover {
    background: #d9dfe45c !important
}

.menuEkle:hover .arti, .menuEkle:hover .textMenu {
    color: #0d83e7
}

.b2c-social-medias {
    display: flex;
    flex-wrap: wrap
}

.b2c-social-media {
    display: flex;
    width: 20%;
    padding: 10px 5px;
    height: 40px;
    align-items: center
}

@media (max-width: 768px) {
    .b2c-social-media {
        width: 100% !important
    }

    .b2c-social-media .icon {
        width: 20px
    }

    .b2c-multiselect {
        max-width: 140px
    }
}

.b2c-social-media .icon {
    font-size: 20px;
    border-radius: 12px;
    margin-right: 5px
}

.b2c-social-media .ion-social-facebook {
    color: #4267B2 !important
}

.b2c-social-media .ion-social-twitter {
    color: #1DA1F2 !important
}

.b2c-social-media .ion-social-instagram-outline {
    color: #405DE6 !important
}

.b2c-social-media .ion-social-youtube {
    color: red !important
}

.b2c-social-media .ion-social-pinterest {
    color: #E60023 !important
}

.b2c-social-media .wt-switch {
    margin-right: 5px
}

.b2c-social-media input[type="text"] {
    width: calc(100% - 60px) !important;
    max-width: unset
}

.b2c-payment-methods {
    display: flex;
    height: 36px;
    align-items: center;
    float: right
}

@media (max-width: 992px) {
    .b2c-payment-methods {
        float: left !important
    }
}

.b2c-payment-method {
    display: flex;
    align-items: center;
    padding: 10px
}

.b2c-recaptcha {
    display: flex;
    align-items: center
}

.b2c-metatags {
    float: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.b2c-metatag {
    display: flex;
    align-items: center;
    margin-bottom: .5rem
}

.b2c-metatag:last-child {
    margin-bottom: 0 !important
}

.db-tab-btwn-w {
    width: calc(100% - 186px) !important
}

.db-btn-btwn-w {
    width: 172px !important
}

.sal-inv-client-w {
    width: calc(100% - 470px);
    transition: .5s ease
}

.sal-inv-client-w:hover {
    width: calc(100% - 558px)
}

.sal-inv-inputs-w {
    width: 470px
}

.docs-client-w {
    width: calc(100% - 410px);
    transition: .5s ease
}

.docs-client-w:hover {
    width: calc(100% - 498px)
}

.docs-inputs-w {
    width: 410px
}

@media (max-width: 992px) {
    .db-tab-btwn-w {
        width: calc(100% - 176px) !important
    }

    .db-btn-btwn-w {
        width: 162px !important
    }

    .sal-inv-client-w, .sal-inv-client-w:hover {
        width: calc(100% - 43px)
    }

    .docs-client-w, .docs-client-w:hover {
        width: calc(100% - 43px)
    }
}

.add-window-bg {
    background: #ebeef3
}

.docs-badge {
    display: inline-flex;
    margin: 0 .5rem;
    padding: 0 .5rem;
    align-items: center;
    border-radius: 4px;
    height: 22px;
    border: 1px solid #dee2ea;
    color: #4e5d6c
}

.main-accounting-plan {
    background-color: #e1e0ef !important;
    font-weight: 700
}

.child-accounting-plan {
    background-color: #e1e0efa6 !important
}

.sweetConfirmPencere {
    height: 100% !important
}

.seceneklerKutucuk {
    display: flex;
    height: 110px;
    align-items: center;
    border-radius: 4px;
    padding: 0 15px;
    margin: 10px;
    background: #f7f7f7;
    outline: none;
    cursor: pointer;
    box-shadow: 0 1px 14px 1px #45414e0a;
    position: relative;
    animation: fadeIn .4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards
}

.seceneklerKutucukMini {
    display: flex;
    height: 110px;
    align-items: center;
    border-radius: 4px;
    padding: 0 15px;
    background: #f7f7f7;
    outline: none;
    cursor: pointer;
    box-shadow: 0 1px 14px 1px #45414e0a;
    position: relative;
    flex-direction: column;
    justify-content: center;
    margin: 6px
}

.seceneklerKutucukSecili {
    display: flex;
    height: 110px;
    color: #fff;
    align-items: center;
    border-radius: 4px;
    padding: 0 15px;
    background: linear-gradient(135deg, #fff6, #0087ff) #0087ff !important;
    outline: none;
    cursor: pointer;
    box-shadow: 0 1px 14px 1px #45414e0a;
    position: relative;
    flex-direction: column;
    justify-content: center;
    margin: 6px
}

.seceneklerKutucuk:hover {
    background: linear-gradient(135deg, #fff6, #0087ff) #0087ff !important;
    color: #fff
}

.seceneklerKutucukMini:hover {
    background: #f7f7f7 !important;
    border: 1px solid #0087ff;
    color: #4e5d6c
}

.seceneklerKutucuk i {
    font-size: 4.5rem;
    line-height: 0;
    margin-right: 8px;
    align-items: center
}

.seceneklerKutucukSecili i {
    font-size: 4rem;
    line-height: 0;
    align-items: center
}

.seceneklerKutucukMini i {
    font-size: 4rem;
    line-height: 0;
    margin-right: 0;
    align-items: center
}

.seceneklerKutucuk h3 {
    font-size: 1rem;
    margin: .2rem 0
}

.seceneklerKutucuk p {
    font-size: .8rem
}

.seceneklerKutucukMini h3, .seceneklerKutucukSecili h3 {
    font-size: .8rem;
    text-align: center
}

.seceneklerKutucukMini p, .seceneklerKutucukSecili p {
    display: none
}

@media (max-width: 768px) {
    .seceneklerKutucuk, .seceneklerKutucukMini, .seceneklerKutucukSecili {
        margin: 6px 6px 0;
        height: 76px
    }

    .seceneklerKutucuk i, .seceneklerKutucukMini i, .seceneklerKutucukSecili i {
        font-size: 4rem
    }

    .seceneklerKutucuk i:before, .seceneklerKutucukMini i:before, .seceneklerKutucukSecili i:before {
        top: -7px
    }

    .seceneklerKutucuk h3, .seceneklerKutucukMini h3, .seceneklerKutucukSecili h3 {
        font-size: 1rem
    }
}

@media (min-width: 1366px) {
    .seceneklerKutucukMini h3, .seceneklerKutucukSecili h3 {
        margin-top: 6px;
        margin-bottom: 0
    }
}

@media (min-width: 1600px) {
    .seceneklerKutucukMini, .seceneklerKutucukSecili {
        padding: 15px;
        margin: 10px
    }
}

.login-back-button {
    position: fixed;
    top: .5rem;
    left: .5rem;
    background-image: linear-gradient(to top, #0300BF 0%, #3F9CFF 100%);
    color: #FFF;
    cursor: pointer;
    height: 40px;
    width: 40px;
    border: none;
    border-radius: 50%;
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    font-size: 20px;
    opacity: .8;
    transition: all .3s
}

.login-back-button:hover {
    opacity: 1
}

.tab-inner-profile .wt-frame-tab {
    height: 58px
}

.tab-inner-profile .scrollmenu {
    height: 60px
}

.tab-inner-profile .scrollmenu a {
    height: 59px;
    line-height: 59px
}

.grid-list-button {
    padding: 8px;
    margin-left: .5rem;
    border-radius: 8px;
    border: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    transition: .3s ease-in-out
}

@media (max-width: 767px) {
    .grid-list-button {
        margin-left: 5px !important
    }

    wt-list-sorter {
        margin-left: 5px !important
    }
}

.grid-list-button:hover {
    background-color: #e8eff7
}

.grid-list-button:active {
    transform: scale(.9)
}

.grid-list-button .icon {
    position: relative;
    display: block;
    width: 21px;
    height: 21px
}

.grid-list-button .dots i {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background-color: #686e87;
    animation-duration: .4s;
    animation-fill-mode: forwards;
    animation-direction: reverse
}

.grid-list-button.list .dots i {
    animation-direction: normal
}

.grid-list-button .dots i:nth-child(1) {
    left: 0;
    top: 0
}

.grid-list-button .dots i:nth-child(2) {
    left: 12px;
    top: 0
}

.grid-list-button .dots i:nth-child(3) {
    left: 0;
    top: 12px
}

.grid-list-button .dots i:nth-child(4) {
    left: 12px;
    top: 12px
}

.grid-list-button.animation .dots i:nth-child(1), .grid-list-button.animation .dots i:nth-child(3) {
    animation-name: dotScale
}

.grid-list-button.animation .dots i:nth-child(2), .grid-list-button.animation .dots i:nth-child(4) {
    animation-name: dotScale, dotMove
}

@keyframes dotScale {
    0% {
        width: 8px;
        height: 8px
    }
    100% {
        width: 4px;
        height: 4px
    }
}

@keyframes dotMove {
    0% {
        transform: translate(0, 0)
    }
    50% {
        transform: translate(0, 6px)
    }
    100% {
        transform: translate(-12px, 6px)
    }
}

.grid-list-button .lines i {
    position: absolute;
    right: 0;
    width: 15px;
    height: 2px;
    border-radius: 2px;
    background-color: #686e87;
    animation-duration: .4s;
    animation-fill-mode: forwards;
    animation-direction: reverse;
    transform-origin: 100% 0;
    transform: scaleX(0)
}

.grid-list-button:hover .lines i, .grid-list-button:hover .dots i {
    background-color: #0087ff
}

.grid-list-button.list .lines i {
    animation-direction: normal
}

.grid-list-button .lines i:nth-child(1) {
    top: 1px
}

.grid-list-button .lines i:nth-child(2) {
    top: 7px
}

.grid-list-button .lines i:nth-child(3) {
    top: 13px
}

.grid-list-button .lines i:nth-child(4) {
    top: 19px
}

.grid-list-button.animation .lines i:nth-child(1), .grid-list-button.animation .lines i:nth-child(3) {
    animation-name: lineScale1
}

.grid-list-button.animation .lines i:nth-child(2), .grid-list-button.animation .lines i:nth-child(4) {
    animation-name: lineScale2
}

@keyframes lineScale1 {
    0%, 20% {
        transform: scaleX(0)
    }
    100% {
        transform: scaleX(1)
    }
}

@keyframes lineScale2 {
    0%, 50% {
        transform: scaleX(0)
    }
    100% {
        transform: scaleX(1)
    }
}

.grid-view > table > tbody {
    display: grid;
    grid-template-columns:20% 20% 20% 20% 20%
}

@media (max-width: 600px) {
    .grid-view > table > tbody {
        display: grid;
        grid-template-columns:50% 50%
    }
}

@media (min-width: 600px) and (max-width: 850px) {
    .grid-view > table > tbody {
        display: grid;
        grid-template-columns:33.333333% 33.333333% 33.333333%
    }
}

@media (min-width: 850px) and (max-width: 1250px) {
    .grid-view > table > tbody {
        display: grid;
        grid-template-columns:33.333333% 33.333333% 33.333333%
    }
}

@media (min-width: 1250px) and (max-width: 1440px) {
    .grid-view > table > tbody {
        display: grid;
        grid-template-columns:25% 25% 25% 25%
    }
}

.grid-view > table > tbody > tr {
    padding: 14px
}

.grid-view > table > tbody > tr > td {
    display: block
}

.grid-view > table > tbody > tr > td > .clist {
    display: block;
    border-radius: .25rem;
    box-shadow: #63636333 0 2px 8px 0;
    transition: all .3s
}

.grid-view > table > tbody > tr > td > .clist > .right-click {
    left: 5px;
    top: 5px;
    width: 30px;
    height: 30px;
    border-radius: .25rem
}

.grid-view > table > tbody > tr > td > .clist:hover {
    box-shadow: #0003 0 3px 8px;
    background: #fff;
    transform: scale(1.02)
}

.grid-view > table > tbody > tr > td > .clist > div {
    width: 100% !important;
    text-align: left;
    padding: 0
}

.grid-view > table > tbody > tr > td > .clist > div > .clist-customer-1 {
    padding: 0;
    height: 270px
}

.grid-view > table > tbody > tr > td > .clist > div > .clist-customer-1 > .shape-avatar {
    width: 100% !important;
    margin: 0;
    height: 220px;
    border-radius: .25rem .25rem 0 0
}

.grid-view > table > tbody > tr > td > .clist > div > .clist-customer-1 > .shape-avatar > img {
    max-width: 100%;
    max-height: 220px
}

.grid-view > table > tbody > tr > td > .clist > div > .clist-customer-1 > .shape-avatar > .letter-avatar {
    font-size: 60px
}

.grid-view > table > tbody > tr > td > .clist > div > .clist-customer-1 > h1 {
    width: 100% !important;
    padding: 14px 14px 0 !important
}

.grid-view > table > tbody > tr > td > .clist > div > .clist-customer-1 > small {
    width: 100% !important;
    padding: 0 14px !important
}

.grid-view > table > tbody > tr > td > .clist > .clist-edit-delete > h1 {
    padding: 7px 14px 2px !important
}

@media (max-width: 767px) {
    .grid-view > table > tbody > tr > td > .clist > .clist-edit-delete {
        flex-direction: row !important;
        padding-bottom: 14px !important
    }

    .grid-view > table > tbody > tr > td > .clist > div > .clist-customer-1 > .shape-avatar {
        height: 180px !important
    }

    .grid-view > table > tbody > tr > td > .clist > div > .clist-customer-1 {
        height: 230px !important
    }
}

.grid-view > table > tbody > tr > td > .clist > .clist-edit-delete > small {
    padding: 0 14px 14px !important;
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem
}

span.hover-co-blue:hover {
    color: #0087FF !important
}

span.hover-co-red:hover {
    color: #FC566A !important
}

.db-geciken {
    color: #fc566a
}

.db-gecikmeyen {
    color: #0087FF
}

.leaderboard {
    width: 100%;
    position: relative;
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 1px 12px 4px #45414e0a
}

.leaderboard-container {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1rem 0;
    width: 100%;
    overflow: auto;
    height: calc(100% - 50px)
}

.leaderboard-header {
    display: flex;
    width: 100%;
    padding: 0 14px 12px;
    min-width: 1000px
}

.leaderboard-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-width: 1000px
}

.leaderboard-th {
    padding: 4px;
    color: #7d97ad;
    font-weight: 500;
    text-align: left
}

.leaderboard-tr {
    padding: 7px 14px;
    width: 100%;
    display: flex
}

.leaderboard-others {
    flex-direction: column;
    padding: 2px 14px !important;
}

.leaderboard-others > div {
    border-bottom: .07rem dashed #ebedf2;
    padding: 6px 2px
}

.leaderboard-others > div:last-child {
    border-bottom: none
}

.leaderboard-td {
    text-align: left;
    padding: 4px;
    font-weight: 400;
    display: flex;
    align-items: center
}

.leaderboard-td svg {
    width: 45px;
    margin-top: -11px;
}

.leads {
    box-shadow: 0 0 .75em 0 #2e3c491f;
    border-radius: .375rem;
    margin-bottom: 1rem;
    height: 50px
}

.lead-1 {
    border: solid 2px #ecc81a !important
}

.lead-2 {
    border: solid 2px #dbe2e8 !important
}

.lead-3 {
    border: solid 2px #dfdfd1 !important
}

.db-h-25 {
    height: calc((100% - 3rem) / 4)
}

.ldrb-h {
    height: calc(100% - (164px + 1rem))
}

.ldrb-h-2 {
    height: calc(100% - (164px + 1rem))
}

.ldrb-con-h {
    height: 100%
}

.ldrb-con-h-2 {
    height: 100%
}

@media (max-width: 768px) {
    .ldrb-h {
        height: calc(100% - 166.7px) !important;
        margin-bottom: .5rem
    }

    .ldrb-h-2 {
        height: calc(100% - 87.7px) !important;
        margin-bottom: .5rem
    }

    .ldrb-con-h {
        height: 95% !important;
    }

    .ldrb-con-h-2 {
        height: auto !important;
    }

    .db-h-25 {
        height: auto !important
    }

    .leads {
        margin-bottom: .5rem;
        height: 40px
    }

    .leaderboard-td svg {
        width: 35px;
        margin-top: -10px
    }
}

.dashboard-canvas-0 {
    width: 300px
}

.dashboard-canvas-1 {
    width: 250px
}

.dashboard-canvas-2 {
    width: 180px
}

.dashboard-summary-height-1 {
    height: 284px !important
}

.dashboard-summary-height-2 {
    height: 284px !important
}

@media (min-width: 992px) and (max-width: 1800px) {
    .dashboard-canvas-1 {
        width: 150px
    }
}

@media (max-width: 768px) {
    .dashboard-canvas-1 {
        width: 150px
    }

    .dashboard-canvas-2 {
        width: 100px
    }

    .dashboard-canvas-0 {
        width: 200px
    }

    .dashboard-summary-height-1 {
        height: 360px !important
    }

    .dashboard-summary-height-2 {
        height: 280px !important
    }

    .leaderboard-others {
        padding: 0 14px !important
    }
}

.right-0:before {
    left: unset !important;
    right: 0 !important
}

@media (max-width: 767px) {
    .product-n-br {
        display: flex;
        justify-content: space-between;
        align-items: center
    }
}

.bg-a {
    background: linear-gradient(135deg, #fff6, #5d78ff) #5d78ff !important
}

.bg-b {
    background: linear-gradient(135deg, #fff6, #53bad9) #53bad9 !important
}

.bg-c {
    background: linear-gradient(135deg, #fff6, #ffa4a4) #ffa4a4 !important
}

.bg-d {
    background: linear-gradient(135deg, #fff6, #f26c73) #f26c73 !important
}

.bg-e {
    background: linear-gradient(135deg, #fff6, #9d8ed4) #9d8ed4 !important
}

.bg-f {
    background: linear-gradient(135deg, #fff6, #acda7e) #acda7e !important
}

.bg-g {
    background: linear-gradient(135deg, #fff6, #7dd5d9) #7dd5d9 !important
}

.bg-h {
    background: linear-gradient(135deg, #fff6, #f1d563) #f1d563 !important
}

.bg-i {
    background: linear-gradient(135deg, #fff6, #80beeb) #80beeb !important
}

.bg-j {
    background: linear-gradient(135deg, #fff6, #D7C0AE) #D7C0AE !important
}

.bg-k {
    background: linear-gradient(135deg, #fff6, #D3756B) #D3756B !important
}

.bg-l {
    background: linear-gradient(135deg, #fff6, #F1A661) #F1A661 !important
}

.bg-m {
    background: linear-gradient(135deg, #fff6, #FFD369) #FFD369 !important
}

.bg-n {
    background: linear-gradient(135deg, #fff6, #A084CA) #A084CA !important
}

.bg-o {
    background: linear-gradient(135deg, #fff6, #889E81) #889E81 !important
}

.bg-p {
    background: linear-gradient(135deg, #fff6, #8CC0DE) #8CC0DE !important
}

.bg-q {
    background: linear-gradient(135deg, #fff6, #A2D5F2) #A2D5F2 !important
}

.bg-r {
    background: linear-gradient(135deg, #fff6, #FF8787) #FF8787 !important
}

.bg-s {
    background: linear-gradient(135deg, #fff6, #ff9037) #ff9037 !important
}

.bg-t {
    background: linear-gradient(135deg, #fff6, #AEDEFC) #AEDEFC !important
}

.bg-u {
    background: linear-gradient(135deg, #fff6, #CC7351) #CC7351 !important
}

.bg-v {
    background: linear-gradient(135deg, #fff6, #B2A4FF) #B2A4FF !important
}

.bg-w {
    background: linear-gradient(135deg, #fff6, #F9B208) #F9B208 !important
}

.bg-x {
    background: linear-gradient(135deg, #fff6, #B2A4FF) #B2A4FF !important
}

.bg-y {
    background: linear-gradient(135deg, #fff6, #4E9F3D) #4E9F3D !important
}

.bg-z {
    background: linear-gradient(135deg, #fff6, #47B5FF) #47B5FF !important
}

.user-profile-dropdown {
    width: 340px
}

.user-profile-dropdown .user-img {
    background: #fff;
    width: 100px;
    height: 100px;
    display: flex;
    box-shadow: #0000000d 0 0 0 1px;
    align-items: center;
    justify-content: center
}

.user-profile-dropdown .user-img img {
    max-width: 100px;
    max-height: 100px
}

.project-start-date {
    border-radius: 50%;
    background: #0087FF;
    color: #fff;
    width: 26px;
    text-align: center;
    padding: 5px;
    height: 26px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    margin: 3px;
    padding-top: 6px
}

.input-danger-badge {
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    font-size: 1.3rem;
    opacity: 0.5;
    color: red;
}

.input-warning-badge {
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    font-size: 1.3rem;
    opacity: 0.5;
    color: orange;
}

.input-info-badge {
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    font-size: 1.3rem;
    opacity: 0.5;
    color: dodgerblue;
}

#divFilterStokGrid {

}

#divFilterStokGrid .product-container {
    transition: all .3s;
    border-radius: .25rem;
    padding: 7px;
}

#divFilterStokGrid .product-container .product-shadow {
    box-shadow: #63636333 0 2px 8px 0;
    transition: all .3s;
    border-radius: 0.25rem;
}

#divFilterStokGrid .product-container .product-shadow:hover {
    box-shadow: #0003 0 3px 8px;
    background: #fff;
    transform: scale(1.02);
}

#divFilterStokGrid .product-content {
    padding: 10px 8px;
}

#divFilterStokGrid .product-name {
    color: #263038;
    font-size: 14px;
    line-height: 16px;
    height: 32px;
    text-transform: capitalize;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

#divFilterStokGrid .product-code {
    color: #4E5D6C;
    font-size: 11px;
    line-height: 11px;
    margin-top: 5px;
}

#divFilterStokGrid .product-price {
    color: #263038;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    text-transform: capitalize;
    background: none !important;
    margin-top: 10px !important;
}

#divFilterStokGrid .product-quantity {
    color: #4E5D6C;
    font-size: 11px;
    line-height: 11px;
    margin-top: 4px;
}

#divFilterStokGrid .product-image {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    background: #fff;
    border-top-right-radius: 0.25rem;
    border-top-left-radius: 0.25rem;
}

#divFilterStokGrid .product-image .shape-avatar {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

#divFilterStokGrid .product-image .shape-avatar .letter-avatar {
    font-size: 26px !important;
}


#divFilterStokGrid .product-image img {
    max-width: 100%;
    max-height: 100%;
}

span.optext, span.placeholder {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: .725rem;
    line-height: 1.5rem;
    border-radius: var(--border-radius--small);
}

span.optext {
    background-color: var(--color-background--option);
    padding: 0 12px 2px 6px;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

span.optext .optdel {
    float: right;
    margin: 0 -6px 2px 6px;
    font-size: 10px;
    cursor: pointer;
    color: var(--color-text--grey)
}

span.optext .optdel:hover {
    color: var(--color-text--red)
}

.multi-smaller .multiselect-dropdown {
    height: 36px !important
}

.multi-smaller .multiselect-dropdown .optext {
    height: 23px !important
}

.mainLoaderBase {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999;
    background: #313643;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1.2s cubic-bezier(0.86, -0.04, 0.14, 0.95);
    opacity: 1;
}

.mainLoaderBase .mainLoader {
    width: 100px;
    height: 100px;
    z-index: 9;
}

.cariSubeSpan {
    font-size: 13px !important;
    color: #dc3545;
}

/*CRM Webmail*/
.webmail-head-buttons {
    display: flex;
}

.select-mails {
    display: flex;
    margin-right: 28px;
}

.checkbox-mail-header {
    padding: 7px 5px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease-in-out;
}

.checkbox-mail-header input[type=checkbox] {
    height: 16px;
    width: 16px;
}

.select-all-mails {

}

.tasks-w-selecteds {
    font-size: 18px;
    height: 34px;
    width: 20px;
    margin-right: 7px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease-in-out;
}

.refresh-mails {
    font-size: 18px;
    height: 34px;
    width: 34px;
    margin-right: 7px;
    padding: 7px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease-in-out;
}

.webmail-tasks-btn {
    font-size: 25px;
    height: 34px;
    width: 34px;
    margin-right: 7px;
    padding: 7px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease-in-out;
}

.webmail-tasks-btn:hover, .refresh-mails:hover, .checkbox-mail-header:hover, .tasks-w-selecteds:hover, .webmail-sort-btn:hover, .webmail-next-page-btn:hover {
    background-color: #e0e0e0;
    cursor: pointer;
}

.checkbox-mail-header:hover {
    background-color: #e0e0e0;
}

.webmail-next-page-btn {
    font-size: 18px;
    height: 34px;
    width: 34px;
    margin-right: 7px;
    padding: 7px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease-in-out;
}

.webmail-sort-btn {
    height: 34px;
    border: 0;
    background: none;
    border-radius: 4px;
    font-size: .75rem;
    color: #5e5e5e;
    margin-right: 7px;
    width: max-content;
    transition: all .2s ease-in-out;
}

.webmail-mail-list {
    table-layout: fixed;
    min-width: 1200px;
}

.webmail-mail-list tr {
    position: relative;
    font-weight: normal;
    color: #202124;
}

.webmail-mail-list td {
    height: 40px;
    font-size: .8rem;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0 7px;
    white-space: nowrap;
    border-bottom: 1px solid #f4f5f8;
    border-top: 1px solid #f4f5f8;
}

.webmail-mail-list tr:hover {
    box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
    z-index: 2;
}

.webmail-container {
    padding: 0 16px
}

.webmail-subject {
    display: flex;
    justify-content: space-between;
    padding: 20px 0 8px 56px;
}

.webmail-subject h2 {
    font-size: 1.375rem;
    font-weight: 400;
    color: #1f1f1f;
}

.webmail-head {
    display: flex;
    margin: 20px 0 0 0;
}

.webmail-head .shape-avatar {
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    margin-right: 16px !important;
}

.webmail-head-container {
    display: flex;
    flex-direction: column;
    width: calc(100% - 56px);
}

.webmail-head-date {
    line-height: 20px;
    color: #5e5e5e;
    font-size: .75rem;
    font-weight: 400;
}

.webmail-head-cc {
    color: #1f1f1f;
    font-size: .875rem;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}

.webmail-head-cc h5 {
    color: #1f1f1f;
    font-size: .875rem;
    line-height: 20px;
    margin-bottom: 0;
}

.webmail-head-cc-sm {
    color: #5e5e5e;
    font-size: .75rem;
    line-height: 20px
}

.webmail-content {
    margin: 8px 0 20px 56px;
}

.webmail-content-footer {
    padding: 16px 0 16px 56px;
}

.webmail-content-reply-btn {
    border: 1px solid #747775;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    background: none;
    color: #444746;
    cursor: pointer;
    font-weight: 500;
    height: 36px;
    padding: 0 16px;
    min-width: 104px;
}

.webmail-content-reply-btn i {
    margin-right: 8px;
    font-size: 20px;
}

.reports-table {
    table-layout: auto !important;
}

.reports-table td {
    height: 22px !important;
    font-size: .6rem !important;
    padding: 0 4px !important;
}

.reports-table th, .reports-table tfoot td {
    height: 26px !important;
    font-size: .6rem !important;
    padding: 0 4px !important;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
}

.search-clear-btn {
    position: absolute;
    top: 12px;
    right: .6rem;
    cursor: pointer;
    z-index: 3;
    color: #686e87;
}

@media (min-width: 1368px) {
    .search-clear-btn {
        top: 11px;
        right: .6rem;
    }
}

@media (max-width: 768px) {
    .search-clear-btn {
        top: 14px;
        right: .7rem;
    }
}

.filter-count.new ~ .filter-count:not(.new) {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #0087FF;
    color: #fff;
    border-radius: 50%;
    width: 15px;
    font-size: .7rem;
    font-weight: 500;
    height: 15px;
    line-height: 15px;
    text-align: center;
}

.filter-count.new:not([style *= "display:none"]):not([style *= "display: none"]) ~ .filter-count:not(.new) {
    display: none;
}

.filter-count.new {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #0087FF;
    color: #fff;
    border-radius: 50%;
    width: 15px;
    font-size: .7rem;
    font-weight: 500;
    height: 15px;
    line-height: 15px;
    text-align: center;
}

.disable-filter-btn.new ~ .disable-filter-btn:not(.new) {
    opacity: 0;
    position: absolute;
    bottom: -2px;
    right: -6px;
    background-color: #ff4d3b;
    color: #fff !important;
    border-radius: 50%;
    width: 15px;
    font-size: .7rem;
    font-weight: 500;
    height: 15px;
    line-height: 15px;
    text-align: center;
    transition: .3s ease all;
}

.disable-filter-btn.new:not([style *= "display:none"]):not([style *= "display: none"]) ~ .disable-filter-btn:not(.new) {
    display: none;
}

.disable-filter-btn.new {
    opacity: 0;
    position: absolute;
    bottom: -2px;
    right: -6px;
    background-color: #ff4d3b;
    color: #fff !important;
    border-radius: 50%;
    width: 15px;
    font-size: .7rem;
    font-weight: 500;
    height: 15px;
    line-height: 15px;
    text-align: center;
    transition: .3s ease all;
}

.filtreButon:hover .disable-filter-btn {
    opacity: 1 !important;
}

.value-changed-input {
    background-color: #ffd10063;
}

.belge-liste-sepet .clist-customer-1 .shape-avatar {
    width: 28px;
    height: 28px;
    margin-right: .5rem;
}

.belge-liste-sepet div.clist-customer-1 {
    padding: 6px 0 6px 4px;
    height: 40px;
    display: flex;
    align-items: center;
}

.belge-liste-sepet.clist h1, .belge-liste-sepet.clist h3 {
    font-size: .7rem;
    line-height: 15px;
    font-weight: 400;
}

.belge-liste-sepet.clist small {
    font-size: .7rem;
    line-height: 15px;
}

.belge-liste-sepet .clist-edit-delete h1 {
    font-size: .75rem;
    line-height: 15px;
}

.belge-liste-sepet.clist h1 span {
    font-size: .6rem;
    line-height: 15px;
}

.belge-liste-sepet .clist-edit-delete {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.belge-liste-sepet .shape-avatar .letter-avatar {
    font-size: 12px;
}

.belge-liste-sepet .label {
    font-size: .65rem;
    font-weight: 500;
}

.discount-amount-tag > span {
    margin-left: 5px;
    font-size: .75rem;
    font-weight: 500;
}

.discount-amount-tag {
    display: flex;
    box-sizing: border-box;
    width: auto;
    height: 20px;
    background-color: #ff000087;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    position: relative;
    border-radius: 5px 0 0 5px;
    align-items: center;
    margin-right: 17px;
}

.discount-amount-tag::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 100%;
    bottom: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #ff000087;
}

.belge-liste-sepet.clist:hover {
    background: unset;
    cursor: auto;
}

@media (max-width: 767px) {
    .belge-liste-sepet .clist-edit-delete {
        flex-direction: unset;
    }

    .belge-liste-sepet.clist .clist-edit-delete small {
        display: block;
    }

    #cariliste .clist .clist-edit-delete .cari-sube {
        display: block;
    }

    #cariliste .clist .clist-edit-delete{
        text-align: right;
        border: none;
        display: block;
    }
}


/*Toolbardaki bildirimler butonu*/
.bracket {
    display: none;
}

.notf-active {
    display: block !important;
}

.notf-active .ring .bracket {
    display: inline-block;
    position: absolute;
    left: 14px;
    top: 18px;
    fill: #c9c9c9;
    opacity: 0;
    animation: bracket 1s infinite;
}

.notf-active .ring .bracket-1 {
    animation-delay: 0.5s;
}

.notf-active .ring .bracket-2 {
    animation-delay: 1s;
}

.notf-active .ring .bracket-3 {
    animation-delay: 1.5s;
}

@keyframes bracket {
    0% {
        transform: translate3D(0, 0, 0) scale(3);
        opacity: 0;
    }
    50% {
        transform: translate3D(-6px, 0, 0) scale(6);
        opacity: 0.6;
    }
    100% {
        transform: translate3D(-12px, 0, 0) scale(9);
        opacity: 0.1;
    }
}

.bell {
    position: relative;
    transform-origin: 50% 0;
}

.calls-notf .bell {
    transform-origin: unset !important;
}

.notf-active .ring .bell {
    animation: ring 1.5s ease-in-out infinite;
}


@keyframes ring {
    0%, 60%, 100% {
        transform: rotate(0deg);
    }
    5%, 15%, 25%, 35% {
        transform: rotate(6deg);
    }
    45% {
        transform: rotate(4deg);
    }
    55% {
        transform: rotate(2deg);
    }
    60% {
        transform: rotate(-2deg);
    }
    50% {
        transform: rotate(-4deg);
    }
    10%, 20%, 30%, 40% {
        transform: rotate(-6deg);
    }
}

.bracket-right {
    display: none;
}

.notf-active .ring .bracket-right {
    display: inline-block;
    position: absolute;
    top: 18px;
    left: 34px;
    fill: #c9c9c9;
    opacity: 0;
    animation: bracket-right 1s infinite;
}

.notf-active .ring .bracket-right-1 {
    animation-delay: 0.5s;
}

.notf-active .ring .bracket-right-2 {
    animation-delay: 1s;
}

.notf-active .ring .bracket-right-3 {
    animation-delay: 1.5s;
}

@keyframes bracket-right {
    0% {
        transform: translate3d(0, 0, 0) scale(3);
        opacity: 0;
    }
    50% {
        transform: translate3d(6px, 0, 0) scale(6);
        opacity: 0.6;
    }
    100% {
        transform: translate3d(12px, 0, 0) scale(9);
        opacity: 0.1;
    }
}

.calls-dropdown {
    background: transparent !important;
    box-shadow: none !important;
    height: calc(100vh - 100px) !important;
    width: 380px !important;
    padding: 0 10px !important;
    overflow-y: auto !important;
    top: 45px !important;
    left: -170px !important;
    transform: unset !important;
}

@media (max-width: 992px) {
    .calls-dropdown {
        left: -270px !important;
    }
}

.notification-dropdown {
    background: transparent !important;
    box-shadow: none !important;
    height: calc(100vh - 100px) !important;
    width: 380px !important;
    padding: 0 10px !important;
    overflow-y: auto !important;
    top: 45px !important;
    left: -170px !important;
    transform: unset !important;
}

@media (max-width: 992px) {
    .notification-dropdown {
        left: -270px !important;
    }
}

.notification-dropdown.show.show-last .toast-item-wrapper:not(.new-notification) {
    display: none;
}

.calls-dropdown.show.show-last .toast-item-wrapper:not(.new-notification) {
    display: none;
}

.notifications-count {
    opacity: 0;
    position: absolute;
    right: 5px;
    top: -1px;
    border-radius: 50%;
    background: red;
    width: 15px;
    line-height: 15px;
    height: 15px;
    color: #fff;
    font-size: .7rem;
    z-index: 1;
    font-weight: 500;
    transition: all 0.3s ease;
}

.calls-notf .notifications-count {
    right: 0px;
}

.notf-active .ring .notifications-count {
    opacity: 1;
}

.notf-active {
    width: 32px !important;
}

/*Toolbardaki bildirimler butonu*/

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    70% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

#session-tracker-button span {
    display: none;
}

#session-tracker-button.bug-detected span {
    display: block;
    margin-left: .5rem;
    color: #fff;
}

.bug-detected .bug-svg {
    transform: scale(1);
    animation: pulse 1s infinite;
}

.bug-detected {
    transition: .3s ease all;
    display: flex;
    width: auto !important;
    align-items: center;
    background: linear-gradient(135deg, #d6d6d666, #ff5a40) #ff5a40 !important;
    padding: 0 .5rem !important;
}

.bug-detected:hover {
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.bug-contact0 {
    opacity: .8;
    transition: .3s ease all
}

.bug-contact1 {
    fill: rgba(104, 110, 135, 0.62);
    transition: .3s ease all
}

.bug-contact2 {
    fill: rgba(104, 110, 135, 0.77);
    transition: .3s ease all
}

.header-button:hover .bug-contact1 {
    fill: rgba(104, 110, 135, 0.73);
}

.header-button:hover .bug-contact2 {
    fill: rgb(104, 110, 135);
}

.bug-detected .bug-contact1 {
    fill: #fff !important;
}

.bug-detected .bug-contact2 {
    fill: #fff !important;
}

.servisbg {
    background-color: #fed !important;
}

.fixed-table tr th.ui-draggable {
    cursor: move !important;
}

.fixed-table tr th.ui-resizable {
    overflow: visible !important;
}

.fixed-table tr th.dragging {
    transition: .1s all;
}

.fixed-table tr th.drag-acceptable .drag-indicator, .fixed-table tr th.dragging .drag-indicator {
    display: block;
    position: absolute;
    top: 0;
}

.dragging-right .drag-indicator {
    right: 0;
    border-right: 3px solid rgba(0, 135, 255, 0.7) !important;
}

.dragging-left .drag-indicator {
    left: 0;
    border-left: 3px solid rgba(0, 135, 255, 0.7) !important;
}

.drag-indicator {
    display: none;
    height: 36px;
    transition: .1s all;
    z-index: 999999;
}

button.confirm-button {
    background: #e8eff7 !important;
    border: 0;
    border-radius: 4px !important;
    padding: 4px !important;
    color: black !important;
    transition: .1s;
    font-size: 1rem !important;
    width: 30px !important;
    height: 30px !important;
    cursor: pointer;
}

button.confirm-button i {
    font-size: 20px !important;
    color: #4fd36d !important;
}

button.confirm-button:disabled {
    background-color: #cdcdcd !important;
}

button.confirm-button:hover {
    background-color: #d8e3f1 !important;
}

button.cancel-confirm-button {
    background: #e8eff7 !important;
    border: 0;
    border-radius: 4px !important;
    padding: 4px !important;
    color: black !important;
    transition: .1s;
    font-size: 1rem !important;
    width: 30px !important;
    height: 30px !important;
    cursor: pointer;
}

button.cancel-confirm-button span {
    color: #28a745;
}

button.cancel-confirm-button i {
    font-size: 20px !important;
    color: #28a745 !important;
}

/*Destek Talebi Sistemi*/

.ticket {
    background: #f5f9fd;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    border-radius: .5rem;
    height: 80px;
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: .1s ease-in-out;
    cursor: pointer;
}

.ticket:hover {
    background: #e9eef5;
}

.ticket.closed:hover {
    background: #eaeaea;
}

.ticket.answered:hover {
    background: #cdf8e1;
}

.ticket.unread {
    border: 1px solid #0087ff;
}

.ticket .unread-notification {
    position: relative;
    top: -27px;
    float: right;
    width: max-content;
    margin: auto;
    margin-right: 90px;
    text-align: center;
    padding: 2px 6px;
    font-size: .8rem;
    background: #0087ff;
    color: #fff;
    border-radius: .25rem;
    z-index: 1;
}

.closed {
    background: #f2f2f2 !important;
}

.answered {
    background: #daffea !important;
}

.ticket h1 {
    font-size: 1.2rem;
}

.ticket .ticket-descriptions {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
}

.ticket-list {
    height: calc(100% - 46px);
}

.ticket-list-header {
    width: 100%;
    display: flex;
    height: 46px;
    margin-bottom: .5rem;
}

.ticket-attachment {
    display: flex;
    height: 36px;
    align-items: center;
    background: #f5f4f9;
    border: 1px solid #f5f4f9;
    padding: 1rem;
    margin: 7px;
    border-radius: .5rem;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    justify-content: space-between;
}

.image-attachments {
    display: flex;
    flex-wrap: wrap;
}

.ticket-attachment.image {
    height: 125px;
    width: 125px;
    flex-direction: column;
    padding: 10px;
}

.ticket-attachment.image img {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.ticket-attachment button {
    border: 0;
    background: none;
    color: #4e5d6c;
    margin-left: 1rem;
    height: 20px;
    width: 20px;
    border-radius: .5rem;
    cursor: pointer;
}

.ticket-attachment button:hover {
    color: indianred;
}

.ticket-attachments-btn {
    position: absolute;
    top: 16px;
    right: -1px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #eff1f6;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    cursor: pointer;
    transition: all ease-in-out .2s;
}

.ticket-attachments-btn:hover {
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.ticket-attachments-btn i {
    font-size: 17px;
    color: #4e5d6c;
    transition: all ease-in-out .15s;
}

.ticket-attachments-btn:hover i {
    color: #5d78ff;
}

.ticket-attachments-btn .attach-quantity {
    border-radius: 50%;
    font-size: 10px;
    line-height: 10px;
    width: 16px;
    height: 16px;
    background: #5d78ff;
    color: #fff;
    position: absolute;
    top: -3px;
    right: -5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.highlight.highlight-text-md.notranslate.position-relative.overflow-auto {
    display: none;
}

.ticket-container {
    background: #f5f9fd;
    border-radius: .5rem;
    padding: 1rem;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ticket-header {

}

.ticket-header h2 {
    font-size: 1.2rem;
}

.ticket-message {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    border-radius: .5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #fcfeff;
}

.ticket-message-header {
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ticket-message-header .shape-avatar {
    width: 24px;
    height: 24px;
}

.ticket-message-header .shape-avatar .letter-avatar {
    font-size: 12px;
    line-height: 24px;
}

.ticket-message-content {
    margin: 1rem 0 0 0 !important;
}

/*Destek Talebi Sistemi*/

button.cancel-confirm-button:hover {
    background-color: #d8e3f1 !important;
}

button.confirm-button:disabled, button.cancel-confirm-button:disabled {
    cursor: not-allowed;
}

.toggle-children-wrapper-collapsed, .toggle-children-wrapper-expanded {
    cursor: pointer !important;
}

.modal-center .switch-field, .modal-center .switch-field label {
    width: auto !important;
    max-width: unset !important;
}

.tooltip-container {
    position: relative;
    display: inline-flex;
    max-height: 26px;
    align-items: center;
    justify-content: center;
}

.tooltip-container:hover {
    background-color: #ccc
}

.tooltip-box {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    color: #000;
    padding: 0;
    border-radius: 5px;
    white-space: nowrap;
    z-index: 1000;
    min-width: 200px;
    border: 1px solid #ccc;
    display: none;
    cursor: text;
    user-select: text;
    height: fit-content;
}

.tooltip-header {
    font-size: 14px;
    background-color: #f4f6f8;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tooltip-body {
    font-size: 14px;
    padding: 10px 20px;
    display: inline-flex;
    flex-direction: column;
    max-width: 400px;
    word-break: break-all;
    white-space: break-spaces;
    background: #ffffff;
}

.tooltip-content {
    font-size: 12px;
    margin-top: 5px;
    color: #000;
    background: #f4f6f8;
    padding: 10px 0;
}

input.filter-right-border:not(:focus), select.filter-right-border:not(:focus) {
    border-right: 1px solid #dee2ea !important;
}

.daterangepicker tr .today {
    padding: 0px !important;
}

#gorunum_tab {
    height: 100%;
}

/* Rotating border */
@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

.spinner-border {
    display: inline-block;
    width: 2rem; /* Spinner genişliği */
    height: 2rem; /* Spinner yüksekliği */
    vertical-align: text-bottom;
    border: 0.25rem solid currentColor; /* Sınır genişliği */
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
    width: 1rem; /* Küçük spinner genişliği */
    height: 1rem; /* Küçük spinner yüksekliği */
    border-width: 0.2rem; /* Küçük spinner sınır genişliği */
}

/* Growing circle */
@keyframes spinner-grow {
    0% {
        transform: scale(0);
    }
    50% {
        opacity: 1;
    }
}

.spinner-grow {
    display: inline-block;
    width: 2rem; /* Spinner genişliği */
    height: 2rem; /* Spinner yüksekliği */
    vertical-align: text-bottom;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    animation: spinner-grow 0.75s linear infinite;
}

.spinner-grow-sm {
    width: 1rem; /* Küçük spinner genişliği */
    height: 1rem; /* Küçük spinner yüksekliği */
}

button.kampanya-buton-kaydet, button.b2c-buton-vazgec {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#b2cbayi_kampanyapencere .btn-group.modalFooterButton {
    display: flex;
    justify-content: end;
    align-items: center;
}

body.dark-mode #campaign-empty-alert .ion-alert {
    color: #404040 !important
}

.sales-list table#asptablo tr td:nth-child(3) input:first-child:hover + input + input + button,
.sales-list table#asptablo tr td:nth-child(3) input:first-child:focus + input + input + button {
    background-color: #e8eff7 !important;
    opacity: 1 !important
}

.treeview-action .switch-field {
    padding: 2px 0;
}

.treeviewFolderLi .toggle-children, .treeviewFolderLi .toggle-children-placeholder {
    height: 27px !important;
    min-width: 24px;
}

.b2c-badge-container {
    display: flex;
    gap: 16px; /* Rozetler arası boşluk */
    flex-wrap: wrap; /* Küçük ekranlarda alt alta geçsin */
    justify-content: center;
    align-items: center;
}

.b2c-badge {
    position: relative;
    padding: 6px 12px;
    border-radius: 50px;
    color: white;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    cursor: default;
    overflow: hidden;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-size: 300% 300%;
    animation: gradientShift 8s ease infinite;
}

.b2c-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.b2c-badge.silver {
    background: linear-gradient(-45deg, #a0a0a0, #d3d3d3, #686868, #c0c0c0);
    background-size: 400% 400%;
}

.b2c-badge.gold {
    background: linear-gradient(-45deg, #b8860b, #ffd700, #daa520, #8b4513);
    background-size: 400% 400%;
}

.b2c-badge.diamond {
    background: linear-gradient(-45deg, #40e0d0, #1e90ff, #00bfff, #00008b);
    background-size: 400% 400%;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.b2c-sparkles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.b2c-sparkles::before,
.b2c-sparkles::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: sparkle 3s linear infinite;
    opacity: 0;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8),
    0 0 10px rgba(255, 255, 255, 0.5);
}

.b2c-sparkles::after {
    width: 4px;
    height: 4px;
    animation-delay: 0.5s;
    animation-duration: 3.5s;
}

@keyframes sparkle {
    0% {
        transform: translate(10px, 10px) scale(0);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        transform: translate(calc(100% - 20px), calc(100% - 20px)) scale(1);
        opacity: 0.8;
    }
    75% {
        opacity: 1;
    }
    100% {
        transform: translate(20px, 20px) scale(0);
        opacity: 0;
    }
}

@media (max-width: 420px) {
    .b2c-upgrade-package-link {
        display: none
    }
}

@media (max-width: 600px) {
    .b2c-badge {
        font-size: 9px;
        padding: 4px 8px;
    }

    .b2c-upgrade-package-link {
        font-size: 9px;
    }
}

input[password-input] {
    -webkit-text-security: disc;
}


/*Fiyat Göster Sayfası*/

.show-price-detail {
    height: 100%;
    padding-top: 1rem;
}

.show-price-welcome {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.show-price-welcome h1 {
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    color: #0087FF !important;
}

.show-price-input {
    width: 100%;
    max-width: 750px;
}

.show-price-welcome h2 {
    font-size: 1rem;
    font-weight: 300;
    text-align: center;
}

.main-img {
    border: 1px solid #dedde5;
    border-radius: 14px;
    width: 100%;
    max-width: 500px;
}

.main-img img {
    border-radius: 14px;
    width: 100%;
}

.secondary-img {
    margin: 0 7px;
    border: 1px solid #dedde5;
    border-radius: 14px;
    transition: .3s ease-in-out;
    max-width: 100px;
}

.secondary-img:hover {
    border: 1px solid #d3d3da;
    cursor: pointer;
}

.secondary-img.active {
    border: 1px solid #0087FF !important
}

.secondary-img img {
    width: 100%;
    border-radius: 14px;
}

.show-price-detail span {
    font-size: 1rem;
}

.show-price-detail span.title {
    font-size: 1rem;
    font-weight: 600;
    margin-right: 7px;
}

.show-price-detail span.name-title {
    font-size: 1.5rem;
    font-weight: 600;
}

.show-price-detail span.price-title {
    color: #0087FF;
    font-size: 2rem;
    font-weight: 600;
}

@media (max-width: 768px) {
    .main-img {
        max-width: 200px !important;
    }

    .secondary-img {
        max-width: 50px !important;
    }

    .show-price-detail span.name-title {
        margin-top: 1rem;
    }

    .show-price-welcome svg {
        width: 300px
    }

    .show-price-welcome {
        padding: 0 1rem;
    }
}
/*Fiyat Göster Sayfası*/
.basic-spinner {
    width: 17px;
    height: 17px;
    border: 2px solid #dcdcdc;             /* Gri dış halka */
    border-top: 2px solid #3498db;      /* Mavi üst halka - dönen kısım */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

span.letter-pill {
    color: black !important;
    font-family: montserrat;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    border: 1px solid black;
}

span.letter-pill.danger {
    color: #f4516c !important;
    border: 1px solid #f4516c !important;
}

span.letter-pill.striked {
    position: relative;
}

span.letter-pill.striked:before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    right: 0;
    border-top: 1px solid;
    border-color: inherit;

    -webkit-transform:rotate(-20deg);
    -moz-transform:rotate(-20deg);
    -ms-transform:rotate(-20deg);
    -o-transform:rotate(-20deg);
    transform:rotate(-20deg);
}

#jobsQueueOuter{
    max-width: 180px;
}
#jobsQueueOuter button.dropdown-toggle{
    max-width: 100%;
}
#jobsQueueOuter p.three-dots{
    max-width: 100px;
    width: 100px;
    text-align: left;
}

.progress-materializecss {
    position: relative;
    height: 4px;
    display: block;
    width: 100px;
    background-color: #e2ecfe;
    border-radius: 2px;
    overflow: hidden;
}
.progress-materializecss .indeterminate {
    background-color: #387ef5;
}
.progress-materializecss .indeterminate:before {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.progress-materializecss .indeterminate:after {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation-delay: 1.15s;
}
@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }
    60% {
        left: 100%;
        right: -90%;
    }
    100% {
        left: 100%;
        right: -90%;
    }
}
@keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }
    60% {
        left: 107%;
        right: -8%;
    }
    100% {
        left: 107%;
        right: -8%;
    }
}

.rapor-template-container {
    display: flex;
    flex-direction: column;
}

body:not(.dark-mode) .cari-duzenle-bg{
    background: #ebeef3;
}

.wt-switch.wt-switch-sm input[type="checkbox"]:checked + label::after {
    left: 16px;
}

.wt-switch.wt-switch-sm label::after {
    left: 2px;
    top: 2px;
    width: 10px;
    height: 10px;
}

.wt-switch.wt-switch-sm label::before {
    width: 30px;
    height: 16px;
}

.wt-switch.wt-switch-sm {
    width: 30px;
    height: 16px;
}

.wt-switch.wt-switch-sm input[type="checkbox"]:checked + label::before {
    content: " ";
}

.wt-switch.wt-switch-sm label::before {
    content: " ";
}

.secim-alani {
    display: flex;
    gap: 24px;
    justify-content: center;
}
.secenek-karti {
    position: relative;
    width: 100%;
}
.secenek-karti input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.kart-icerik {
    display: flex;
    flex-direction: column;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: #F7FAFC;
}
.kart-icerik:hover {
    border-color: #CBD5E0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.secenek-karti input[type="radio"]:checked + .kart-icerik {
    border-color: #007BFF;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}
.onizleme-kutusu {
    background-color: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    height: 110px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}
.ust-serit {
    width: 30%;
    height: 8px;
    background-color: #EDF2F7;
    border-radius: 4px;
    margin-bottom: 8px;
}

.onizleme-icerigi {
    flex-grow: 1;
    border: 1px solid #EDF2F7;
    border-radius: 4px;
    padding: 8px;
}
.grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.urun-kutusu {
    background-color: #EDF2F7;
    border-radius: 3px;
}

.list-layout {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.urun-satiri {
    height: 15px;
    background-color: #EDF2F7;
    border-radius: 3px;
    position: relative;
}
.yeni-etiketi {
    position: absolute;
    right: -2px;
    top: -5px;
    background-color: #28a745;
    color: white;
    font-size: 8px;
    font-weight: 600;
    padding: 1px 3px;
    border-radius: 3px;
    transform: rotate(10deg);
}
.secenek-yazisi {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #2D3748;
}
.custom-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #A0AEC0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: border-color 0.2s ease-in-out;
    flex-shrink: 0;
}
.custom-radio::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #007BFF;
    transform: scale(0);
    transition: transform 0.2s ease-in-out;
}
.secenek-karti input[type="radio"]:checked + .kart-icerik .custom-radio {
    border-color: #007BFF;
}
.secenek-karti input[type="radio"]:checked + .kart-icerik .custom-radio::after {
    transform: scale(1);
}
.aciklama-metni {
    font-size: 12px;
    color: #718096;
    margin: 8px 0 0;
    text-align: left;
    padding-left: 32px;
}
.alt-mesaj {
    margin-top: 32px;
    font-size: 14px;
    color: #718096;
}
.vitrin-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.vitrin-panel {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.text-warning-sepet{
    color:#d18003 !important;
}

.doviz-bakiye-head {
    flex-direction: column;
    border: 1px solid #e3e3e3;
    padding: 4px 7px;
    border-radius: 7px;
    margin-right: .5rem;
    display: flex;
}

.dovizli-bakiye-head {
    display: flex;
}

@media (max-width: 768px) {
    .dovizli-bakiye-head {
        display: flex;
        flex-direction: column;
    }
}


/* Preview Area */
.uvm-preview-col {
    display: flex;
    flex-direction: column;
}

.uvm-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.uvm-preview-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--uvm-light-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.uvm-link-btn {
    font-size: 0.85rem;
    color: var(--uvm-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.uvm-preview-bg {
    background-color: #f1f3f5;
    border: none;
    display: flex;
    flex-direction: column;
}

.uvm-grid-display {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    opacity: 0.8;
}

.uvm-card-placeholder {
    background: #e9ecef;
    border-radius: 6px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    border: 2px dashed #ced4da;
    padding: 0.8rem 0.4rem;
    place-items: center;
}

.uvm-ph-icon { width: 30px; height: 30px; background: #ced4da; border-radius: 4px; }
.uvm-ph-bar { width: 60%; height: 6px; background: #ced4da; border-radius: 3px; margin-bottom: 4px; }
.uvm-ph-bar.short { width: 30%; }

.uvm-info-text {
    text-align: center;
    color: #868e96;
    font-size: 0.85rem;
    margin-top: 20px;
    line-height: 1.4;
}



/* Scoped Variables */
:root{
    --trm-primary: #0087ff;
    --trm-primary-bg: #0087ff;

    --trm-success: #198754;
    --trm-success-bg: #d1e7dd;
    --trm-success-dark: #0f5132;
    --trm-success-icon-bg: #b0d4c1; /* Badge BG'den biraz koyu */

    --trm-error: #dc3545;
    --trm-error-bg: #f8d7da;
    --trm-error-dark: #842029;
    --trm-error-icon-bg: #eec7cc; /* Badge BG'den biraz koyu */

    --trm-border: #e9ecef;
    --trm-text: #212529;
    --trm-text-sub: #6c757d;

    --trm-neutral-icon-bg: #e9ecef;
    --trm-neutral-icon-color: #6c757d;
    --trm-text-main: #212529;
    --trm-text-muted: #6c757d;
    --trm-border-color: #dee2e6;
}

.trm-wrapper {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: transparent;
    box-sizing: border-box;
}

.trm-modal * { box-sizing: border-box; }

/* HEADER & HERO */
.trm-header {
    padding: 15px 20px;
    display: flex;
    justify-content: flex-end;
}

.trm-close {
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #adb5bd;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
}
.trm-close:hover { color: var(--trm-text); }

.trm-hero {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 30px 25px 30px;
    border-bottom: 1px solid var(--trm-border);
}

.trm-hero-icon {
    width: 60px;
    height: 60px;
    background-color: var(--trm-success-bg);
    color: var(--trm-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
}

.trm-hero-icon.err {
    background-color: var(--trm-error-bg);
    color: var(--trm-error);
}

.trm-hero-title {
    margin: 0 0 5px 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--trm-text);
}

.trm-hero-sub {
    color: var(--trm-text-sub);
    font-size: 0.9rem;
}

/* LİSTE GÖVDE */
.trm-body {
    background-color: #fff;
}

.trm-list-container {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* LİSTE ELEMANI */
.trm-list-item {
    border-bottom: 1px solid var(--trm-border);
    display: flex;
    flex-direction: column;
}
.trm-list-item:last-child { border-bottom: none; }

/* HEADER (Satırın Üst Kısmı) */
.trm-item-header {
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background-color: #fff;
    transition: background-color 0.2s;
}

.trm-item-header:hover {
    background-color: #f8f9fa;
}

.trm-ih-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.trm-item-icon {
    width: 42px;
    height: 42px;
    background-color: #f8f9fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    flex-shrink: 0;
}

.trm-item-texts {
    display: flex;
    flex-direction: column;
}

.trm-item-title {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--trm-text);
    margin-bottom: 8px;
}

.trm-badges-row {
    display: flex;
    gap: 10px;
}

.trm-badge {
    font-size: 0.8rem;
    font-weight: 600;
    /* Flex ile ikonu ve yazıyı hizala */
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Yazı ve ikon arası boşluk */

    padding: 4px 4px 4px 12px; /* Sağ padding azaldı çünkü ikonun kendi paddingi var */
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    user-select: none;
    position: relative;
    z-index: 2;
}

.trm-badge:hover {
    transform: translateY(-1px);
    filter: brightness(0.97);
}

/* İkon Yuvarlağı */
.trm-badge-arrow {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.trm-badge-arrow svg {
    width: 12px;
    height: 12px;
    stroke-width: 3;
}

/* Success Colors */
.trm-badge.success {
    background-color: var(--trm-success-bg);
    color: var(--trm-success-dark);
    border-color: #badbcc;
}
.trm-badge.success .trm-badge-arrow {
    background-color: var(--trm-success-icon-bg); /* Koyu Yeşil Arkaplan */
    color: var(--trm-success-dark);
}

/* Error Colors */
.trm-badge.error {
    background-color: var(--trm-error-bg);
    color: var(--trm-error-dark);
    border-color: #f5c2c7;
}
.trm-badge.error .trm-badge-arrow {
    background-color: var(--trm-error-icon-bg); /* Koyu Kırmızı Arkaplan */
    color: var(--trm-error-dark);
}

/* Chevron Icon */
.trm-toggle-icon {
    color: #adb5bd;
    transition: transform 0.3s ease;
    background: #f3f3f3;
    border-radius: 100%;
    padding: .25rem;
}

.trm-list-item.open .trm-toggle-icon {
    transform: rotate(180deg);
    color: var(--trm-text);
}

/* DETAY ALANI (Accordion Content) */
.trm-details-area {
    display: none;
    background-color: #fafafa;
    padding: 0 30px 20px 87px;
    border-top: 1px solid transparent;
}

.trm-list-item.open .trm-details-area {
    display: block;
    border-top-color: #f1f1f1;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Log Listeleri */
.trm-log-section {
    margin-top: 15px;
}

.trm-log-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
}
.trm-log-title.success { color: var(--trm-success); }
.trm-log-title.error { color: var(--trm-error); }

.trm-log-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.trm-log-li {
    font-size: 0.85rem;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
    color: #555;
    display: flex;
    justify-content: start;
}
.trm-log-li:last-child { border-bottom: none; }

.trm-code-badge {
    font-family: monospace;
    background: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-weight: 600;
    font-size: 0.75rem;
    margin-right: 8px;
    color: #333;
    max-height: 24px;
}

/* Footer */
.trm-footer {
    padding: 20px;
    background: #fff;
    border-top: 1px solid var(--trm-border);
    text-align: center;
}

.trm-btn-close-main {
    background-color: #343a40;
    color: #fff;
    border: none;
    padding: 10px 40px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

/* Scrollbar */
.trm-body::-webkit-scrollbar { width: 8px; }
.trm-body::-webkit-scrollbar-track { background: #f1f1f1; }
.trm-body::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 4px; }

/* EMPTY STATE CONTENT */
.trm-empty-body {
    padding: 0 40px 40px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.trm-empty-icon-circle {
    width: 100px;
    height: 100px;
    background-color: var(--trm-neutral-icon-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    color: var(--trm-neutral-icon-color);
}

.trm-empty-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--trm-text-main);
    margin: 0 0 10px 0;
}

.trm-empty-desc {
    font-size: 0.95rem;
    color: var(--trm-text-muted);
    line-height: 1.5;
    margin: 0;
    max-width: 320px; /* Metnin çok yayılmasını engeller */
    text-align: center;
}

/* --- MATERIAL DESIGN PROGRESS BAR --- */
.trm-progress-area {
    width: 100%;
    text-align: left;
}

.trm-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--trm-sub-text);
    margin-bottom: 8px;
    font-weight: 500;
}

/* Progress Container */
.trm-mat-progress-track {
    width: 100%;
    height: 4px; /* Material Design standardı incedir */
    background-color: #e0e0e0; /* Gri zemin */
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

/* Progress Bar Fill */
.trm-mat-progress-bar {
    height: 100%;
    width: 65%; /* JS ile dinamik değişecek */
    background-color: var(--trm-primary);
    border-radius: 2px;
    transition: width 0.3s ease; /* Akıcı geçiş */
    position: relative;
}

/* Opsiyonel: Aktif olduğunu gösteren parlama efekti */
.trm-mat-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(
            90deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.3) 50%,
            rgba(255,255,255,0) 100%
    );
    transform: translateX(-100%);
    animation: trm-shimmer 1.5s infinite;
}

@keyframes trm-shimmer {
    100% { transform: translateX(100%); }
}
/* --- CLOUD UPLOAD ICON ANIMATION --- */
.trm-cloud-icon-wrapper {
    width: 80px;
    height: 80px;
    background-color: var(--trm-primary-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    color: #fff;
    position: relative;
    /* Hafif pulse efekti */
    animation: trm-pulse-shadow 2s infinite;
}

@keyframes trm-pulse-shadow {
    0% { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(25, 118, 210, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0); }
}

/* SVG İçindeki Ok'un Hareketi */
.trm-arrow-group {
    animation: trm-arrow-up 1.5s ease-in-out infinite;
}

@keyframes trm-arrow-up {
    0% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-4px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}

/* YENİ EKLENEN STİLLER */
.trm-log-li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    font-size: 0.9rem;
    color: #444;
    gap: 0.5rem;
}
.trm-log-content { display: flex; align-items: center; gap: 10px; }
.trm-time-badge { background: #fff; border: 1px solid #ddd; padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 0.8rem; color: #666; }
.trm-time-badge.jobListTime {
    height: 28px;
    display: flex;
    align-items: center;
    background: #f1f1f1;
}
.trm-entity-info { font-weight: 600; color: #212529; }

/* Aksiyon Butonları */
.trm-row-actions { display: flex; gap: 5px; opacity: 0.6; transition: opacity 0.2s; }
.trm-log-li:hover .trm-row-actions { opacity: 1; }

.trm-action-btn {
    border: none;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #555;
    transition: all 0.2s;
}
.trm-action-btn.bug-report{
    background: linear-gradient(135deg, #d6d6d666, #ff5a40) #ff5a40 !important;
    color: #ffffff;
}
.trm-action-btn:hover { background: #e9ecef; color: #000; }

/* Ana Modal Kutusu */
/*.sip-al-modal-container {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100%;
    max-width: 600px; !* Genişliği ihtiyaca göre ayarlayın *!
    margin: 0 auto;
    overflow: hidden;
    color: #333;
    border: 1px solid #e0e0e0;
}*/

/* Header (Mavi İkon Alanı) */
.sip-al-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px 20px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.sip-al-icon-wrapper {
    background-color: #007bff; /* İkinci görseldeki mavi tonu */
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

.sip-al-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
}

.sip-al-subtitle {
    margin: 5px 0 0;
    font-size: 13px;
    color: #7f8c8d;
}

/* Gövde ve Liste Alanı */
.sip-al-body {
    padding: 20px;
    background-color: #f8f9fa; /* Hafif gri arka plan */
}

.sip-al-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-weight: 600;
    color: #34495e;
}

.sip-al-badge {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: normal;
}

.sip-al-badge.success { background-color: #d4edda; color: #155724; }
.sip-al-badge.warning { background-color: #fff3cd; color: #856404; }

.sip-al-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px; /* Çok uzun olursa scroll çıksın */
    overflow-y: auto;
    padding: 0 0.2rem 0 0;
}

/* Liste Elemanları (Kart Görünümü) */
.sip-al-item {
    background-color: #fff;
    border: 1px solid #e9ecef;
    padding: 12px 15px;
    border-radius: 6px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: transform 0.1s;
}

.sip-al-item:hover {
    border-color: #cbd5e0;
}

.sip-al-time {
    font-size: 11px;
    color: #6c757d;
    background: #f1f3f5;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    min-width: 45px;
    text-align: center;
}

.sip-al-column {
    display: flex;
    flex-direction: column;
}

.sip-al-text {
    font-size: 13px;
    line-height: 1.4;
    color: #495057;
}

.sip-al-subtext {
    font-size: 12px;
    color: #868e96;
    margin-top: 2px;
}

.sip-al-list::-webkit-scrollbar {
    width: 5px;
}
.sip-al-list::-webkit-scrollbar-thumb {
    background-color: #ced4da;
    border-radius: 4px;
}

.wt-container.wt-container-pencere {
    background: #ebeef3;
}

.tutorial-popover {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    width: 280px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    font-family: sans-serif;
    transition: width 0.3s ease, height 0.3s ease, top 0.3s ease, left 0.3s ease;
}

.tutorial-popover-title { font-size: 16px; color: #333; font-weight: bold; }
.tutorial-popover-body { font-size: 14px; color: #666; line-height: 1.5; margin-bottom: 15px; }

.tutorial-popover-footer { display: flex; justify-content: space-between; gap: 10px; }
.tutorial-popover-footer button {
    padding: 8px 15px; border-radius: 6px; border: 1px solid #ddd;
    background: #f8f8f8; cursor: pointer; flex: 1;
}
.tutorial-btn-next { background: #007bff !important; color: white; border: none !important; }

.tutorial-popover-close {
    position: absolute; top: 10px; right: 10px; border: none;
    background: none; font-size: 20px; cursor: pointer; color: #999;
}

@keyframes tutorial-glow-pulse {
  0% {
    box-shadow: 0 0 5px var(--tutorial-glow-color, rgba(0, 123, 255, 0.7));
  }
  50% {
    box-shadow: 0 0 20px var(--tutorial-glow-color, rgba(0, 123, 255, 0.9)), 
                0 0 30px var(--tutorial-glow-color, rgba(0, 123, 255, 0.4));
  }
  100% {
    box-shadow: 0 0 5px var(--tutorial-glow-color, rgba(0, 123, 255, 0.7));
  }
}

.tutorial-highlight-glow {
  outline: none;
  border-radius: var(--tutorial-glow-radius, 4px);
  animation: tutorial-glow-pulse 1.5s infinite ease-in-out;
  z-index: 1000;
}

.input-char-count {
    position: absolute;
    bottom: 24px;
    right: 24px;
    font-size: 12px;
    color: #6c757d;
}

.input-invalid {
    border-color: #dc3545!important;
    box-shadow: 0 0 3px #dc3545!important;
}

.input-invalid + .input-char-count {
    font-weight: bold;
    color: #dc3545;
}

.input-valid + .input-char-count {
    font-weight: normal;
    color: #198754;
}

/* Dilekçe Rapor Container - A4 Kağıt Görünümü */
.dilekce-report-container {
    line-height: 1.2;
    margin: 22px;
    justify-self: center;
    align-self: center;
    max-width: 210mm;
    /* min-height: 297mm; */
    padding: 15mm;
    background: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    word-break: break-word;
}

.dilekce-report-container section + section {
    margin-top: 1.2em;
}

.dilekce-report-container .template-editable-line:hover {
    background-color: #a2dba34f;
    cursor: pointer;
}

@media print {
    .dilekce-report-container {
        box-shadow: none;
        padding: 15mm;
        margin: 0;
    }

    .dilekce-report-container section + section {
        margin-top: 12pt;
    }
}

/* ── Onay / Red tıklanabilir pill'leri ── */
@keyframes pill-spin-border {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

span.label.label-pill-action {
    position: relative;
    z-index: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    cursor: pointer;
    overflow: hidden;
    transition: filter 0.15s ease, transform 0.1s ease;
}

/* Dönen conic-gradient — sanki border parlıyormuş gibi */
span.label.label-pill-action::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent     0deg,
        rgba(255,255,255,0.25)  15deg,
        rgba(255,255,255,0.98)  28deg,
        rgba(255,255,255,0.25)  42deg,
        transparent     57deg,
        transparent    360deg
    );
    animation: pill-spin-border 4s linear infinite;
    z-index: -1;
}

span.label.label-pill-action.label-success::before {
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent     0deg,
        rgba(255,255,255,0.25)  15deg,
        rgb(132 255 135 / 91%)  28deg,
        rgba(255,255,255,0.25)  42deg,
        transparent     57deg,
        transparent    360deg
    );
}

span.label.label-pill-action.label-danger::before {
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent     0deg,
        rgba(255,255,255,0.25)  15deg,
        rgb(255 132 132 / 91%)  28deg,
        rgba(255,255,255,0.25)  42deg,
        transparent     57deg,
        transparent    360deg
    );
}

/* İç dolgu — gradient'in sadece border halkası görünür */
span.label.label-pill-action::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 2px;
    border-radius: calc(.25em - 2px);
    z-index: -1;
}

span.label.label-success.label-pill-action::after { background: #5cb85c; }
span.label.label-danger.label-pill-action::after  { background: #d9534f; }

span.label.label-pill-action:hover {
    filter: brightness(1.12);
    transform: scale(1.05);
}

span.label.label-pill-action:hover::before {
    animation-duration: 2s;
}

/* Banka listesi - logo ayrı flex/grid item */
.banka-liste-logo-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 0.7rem 0 14px;
}
.banka-liste-logo-wrap .shape-avatar {
    width: 97px;
    height: 35px;
}
.banka-liste-logo-wrap img {
    width: 97px;
    height: 35px;
    padding: 4px 0;
    box-shadow: 0 0 9px 1px rgba(0,0,0,0.05);
    float: none !important;
}
/* Logo artık flex item, float kaldır */
#bankAccountList .clist img {
    float: none !important;
}
/* Info sütunu: esnek genişlik (logo dışarıda olduğu için) */
#bankAccountList .clist > .col-sm-16 {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
}
/* clist-customer-1'de logo yok, sol padding kaldır */
#bankAccountList .clist .clist-customer-1 {
    padding-left: 0 !important;
}
/* Bakiye: sağa it */
#bankAccountList .clist > .clist-edit-delete {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 100px;
    margin-left: auto;
}
#bankAccountList .clist {
    justify-content: flex-start;
}
/* Desktop: banka listesi small line-height */
#bankAccountList .clist small {
    line-height: 1.3;
}
/* Desktop: banka listesi letter-avatar font boyutu */
#bankAccountList .banka-liste-logo-wrap .shape-avatar .letter-avatar {
    font-size: 12px;
}
/* Bakiye: kuruş kısmı her zaman tam kısmından 1px küçük */
#bankAccountList .clist-edit-delete h1 span {
    font-size: calc(1em - 1px);
}

/* Banka listesi mobil görünüm */
@media (max-width: 767px) {
    /* CSS Grid: logo sol (2 satır), sağda üst=bilgi / alt=bakiye */
    #bankAccountList .clist {
        display: grid !important;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "logo info"
            "logo balance";
        justify-content: stretch;
        align-items: start;
    }
    /* Logo: sol sütun, dikey ortalı */
    .banka-liste-logo-wrap {
        grid-area: logo;
        align-self: center;
        padding: 6px 8px;
    }
    .banka-liste-logo-wrap .shape-avatar {
        width: 65px !important;
        height: 35px;
    }
    .banka-liste-logo-wrap img {
        width: 65px !important;
        height: 35px;
    }
    /* Banka adı + IBAN: sağ üst */
    #bankAccountList .clist > .col-xs-24 {
        grid-area: info;
        min-width: 0;
        width: auto !important;
        max-width: none !important;
        flex: none;
        padding: 6px 4px 0 0;
    }
    /* clist-customer-1: sabit yükseklik kaldır */
    #bankAccountList .clist .clist-customer-1 {
        height: auto !important;
        padding: 0 !important;
    }
    /* Bakiye: sağ alt */
    #bankAccountList .clist > .clist-edit-delete {
        grid-area: balance;
        text-align: right !important;
        padding: 2px 4px 6px 0 !important;
        margin-left: 0;
        min-width: 0;
        width: auto !important;
        flex: none;
    }
    /* Banka adı ve IBAN yan yana */
    .banka-info-container {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap;
        gap: 0 6px;
    }
    .banka-info-container > div:first-child {
        flex-shrink: 1;
        min-width: 0;
    }
    .banka-info-container > small {
        flex-shrink: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 45%;
    }
    /* Font boyutu küçültme */
    #bankAccountList .clist h1 {
        font-size: 11px !important;
    }
    #bankAccountList .clist small {
        font-size: 9px !important;
    }
    /* Shape avatar line-height */
    .banka-liste-logo-wrap .shape-avatar {
        line-height: 1.1;
    }
    /* Letter-avatar font boyutu */
    #bankAccountList .banka-liste-logo-wrap .shape-avatar .letter-avatar {
        font-size: 10px !important;
    }
}

/* Belge formu (cr_al) - mobil cari kodu gizleme */
@media (max-width: 767px) {
    .voucher-customer-info h2 {
        display: none;
    }
    .voucher-customer-info .d-flex {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Tablo içi arama aktif sütun göstergesi */
.tabloici-arama-gostergesi {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #e67e22;
    margin-left: 4px;
    vertical-align: middle;
    flex-shrink: 0;
    cursor: help;
}