background-color: #1E3148 !important;color:white;.no-padding {
    padding: 0 !important;
}

.no-padding-top {
    padding-top: 0 !important;
}

.no-padding-bottom {
    padding-bottom: 0 !important;
}

.no-padding-left {
    padding-left: 0 !important;
}

.no-padding-right {
    padding-right: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

.no-margin-left {
    margin-left: 0 !important;
}

.no-margin-right {
    margin-right: 0 !important;
}

.text-align-center {
    text-align: center !important;
}

.text-align-right {
    text-align: right !important;
}

.text-align-left {
    text-align: left !important;
}

.btn-flat {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-image: none;
    border: none;
    border-radius: 0;
    padding: 6px 10px;
    margin: 0;
    background: #348fe2;
    border-color: #348fe2;
}

.btn-create {
    background: #3559E0;
    border-color: #348fe2;
    border-radius: 8px;
    margin-top: 5px;
}

.btn-save {
    background: #359637;
    border-color: #348fe2;
    border-radius: 8px;
    padding: 8px 16px 8px 16px;
    width: 72px !important;
    height: 36px !important;
}

.btn-delete {
    color: #fff;
    background: #ff5b57;
    border-color: #ff5b57;
}

.iframe-content .head {
    background: none repeat scroll 0 0 #0F2167;
    border: medium none;
    padding: 10px 15px;
    color: #fff;
    font-size: 18px;
    line-height: 20px;
    font-weight: bold;
}


.btn-icon i {
    margin-right: 5px;
}

.btn-danger {
    background: #f0134d;
    border-color: #f0134d;
}

.row-form input[type="text"],
.row-form input[type="email"],
.row-form input[type="password"],
.row-form input[type="file"],
.row-form textarea,
.row-form input[type="number"] {
    -moz-border-radius: 3px;
    color: #555;
    background-color: #fff;
    background-image: none;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    width: 100%;
    font-size: 12px;
    color: #454545;
    padding: 5px 7px 5px;
    border: 1px solid #D7D7D7;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    display: inline-block;
    background: #FDFDFD;
    height: 34px;
    margin: 0px;
    line-height: 24px;
    border-radius: 0;
    box-shadow: none;
    border-radius: 8px;
    margin-left: 0px !important;
    margin-top: 4px !important;
}

.row-form input[disabled="disabled"] {
    background: #dcdcdc;
}

.row-form input[type=button][disabled=disabled],
.row-form input[type=submit][disabled=disabled] {
    background: #348fe2 !important;
}

.row-form select {
    font-size: 12px;
    height: 34px;
}

.iframe-content .row-fluid {
    margin-bottom: 0;
}

    .iframe-content .row-fluid label, .form-content .row-fluid label {
        font-size: 13px;
        font-weight: 600;
    }

        .iframe-content .row-fluid label em, .form-content .row-fluid label em {
            color: red;
        }

.iframe-content .row-form {
    border: none;
    padding: 10px 16px;
    display: flex;
}

span.field-validation-error span, .field-validation-error {
    color: #f00 !important;
    padding-left: 14px;
    margin-bottom: 5px;
    margin-top: 3px;
    line-height: 12px;
    display: block;
    font-size: 11px;
    font-weight: normal;
}

.form-popup .form-body {
    overflow-y: scroll;
    height: 100%;
    background-color: #fff;
}

@media (max-height: 900px) {
    .form-popup .form-body {
        overflow-y: scroll;
        height: 93vh;
    }
}

.fancybox-skin{
    border-radius: 8px;
}

.fancybox-outer, .fancybox-inner {
    border-radius: 8px;
}

.k-grid td {
    vertical-align: top;
    padding: 8px;
    word-wrap: break-word;
}

.k-button, .k-widget {
    border-left: none;
    border-right: none;
}

.k-grid tr:hover {
    background: none;
    box-shadow: none;
}

.k-alt, .k-pivot-layout > tbody > tr:first-child > td:first-child, .k-resource.k-alt, .k-separator {
    background: #fff;
}

.k-grid tr td {
    border-bottom: 1px solid #d5d5d5;
    font-size: 13px;
    vertical-align: inherit;
}

    .k-grid tr td a img:hover {
        cursor: pointer;
    }

.k-grid tr:last-child td {
    border-bottom: none;
}

.k-grid-header th.k-header {
    box-shadow: none;
    background: #F1F1F1;
    font-size: 13px;
    padding: .6em .6em .5em .6em;
}

    .k-grid-header{
        padding-right: 0px !important;
    }

    .k-filter-row > th:first-child, .k-grid tbody td:first-child, .k-grid tfoot td:first-child, .k-grid-header th.k-header:first-child {
        padding-left: 10px;
        height: 36px;
    }

.page-header {
    border: 0;
    text-align: right;
    background-color: #FFFFFF;
    height: 65px;
    display: flex;
    justify-content: space-between;
    align-items : center;
}

    .page-header span {
        font-size: 24px;
        line-height: 37px;
        float: left;
        font-weight: bold;
        padding-left: 27px;
        margin-top: 6px;
    }

.setting-component{
    margin-right: 25px;
    margin-top: 13px;
}

.notifi-box {
    width: 500px;
    height: 0px;
    opacity: 0;
    position: absolute;
    top: 63px;
    right: 35px;
    z-index: 1;
    background-color: white;
    right: 0;
    top: 75px;
    box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #DDE2E4;
    overflow: scroll;
}

.btn-search .fa-magnifying-glass{
    margin-right: 4px;
}

.button-postion .iframe-fancybox-large .fa-plus,
.button-postion .iframe-fancybox-xlarge .fa-plus {
    margin-right: 4px;
}


.notifi-block {
    text-align: left;
    border-bottom: 1px solid #DDE2E4;
    padding-bottom: 20px;
    padding: 28px 24px 20px 24px;
}

    .notifi-block h4 {
        line-height: 32px;
        font-size: 20px;
        margin-top: -13px;
    }

    .notifi-block button {
        width: auto;
        height: 36px;
        border-radius: 44px;
        padding: 8px 12px 8px 12px;
        font-size: 14px;
        margin-right: 8px;
        border: none;
        color: #818E9E;
        font-weight: 600;
        line-height:20px;
        
    }

    .notifi-block .notifi-button.clicked {
        background-color: #E5EEFF;
        color: #3559E0;
    }

        .notifi-block button:hover {
            background-color: #E5EEFF;
            color: #3559E0;
        }


    .button-postion {
        display: flex;
        justify-content: end;
        padding: 8px, 16px, 8px, 12px;
    }

.notifi-wrapper {
    text-align: left;
    border-bottom: 1px solid #DDE2E4;
    padding-bottom: 20px;
    padding: 20px 24px 20px 24px;
}

    .notifi-wrapper .title {
        font-weight: 700;
        margin-bottom: 8px;
        font-size: 15px;
        padding-bottom: 0;
    }

    .notifi-wrapper .status {
        width: 57px;
        height: 20px;
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 20px;
        color: #FFFFFF;
        background-color: #E03A22;
        padding: 2px 8px 2px 8px;
        border-radius: 29px;
        font-weight: 500;
    }

    .notifi-wrapper ul {
        height: 35px;
        overflow: hidden;
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .notifi-wrapper ul.active {
            height: auto;
        }

        .notifi-wrapper ul li {
            position: relative;
            min-height: 37px;
            width: 100%;
        }

            .notifi-wrapper ul li:before {
                content: "";
                position: absolute;
                top: 8px;
                left: -12px;
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: #bfbfbf;
            }
    .notifi-wrapper .toggle_btn {
        display: flex;
        justify-content: end;
        cursor: pointer;
        font-weight: 500;
    }

        .notifi-wrapper .toggle_btn span {
            margin-top: -6px;
            font-weight: 700;
            color: #3559E0;
            cursor: pointer;
            font-size: 14px !important;
            padding: 0 4px 0 0;
        }

        .notifi-wrapper .toggle_btn.active .fa-angle-down {
            transform: rotate(180deg);
        }

    .notifi-wrapper .info-item {
        color: #818E9E;
        font-size: 14px;
        display: block;
        width: 120px;
        padding-left: 0;
        margin-top : 0;
    }

    .notifi-wrapper .info-value {
        font-weight: 400;
        font-size: 14px;
        padding-left: 0;
        width: 50%;
        margin-top: 0;
    }

#logo {
    width:108px;
    height:40px;
    top: 16px;
    left: 16px
}

.content .workplace .head-custom {
    border: 1px solid #ccc;
    border-bottom: none;
    background: none repeat scroll 0 0 #2a72b5;
    padding: 0;
}

.discount .span12 .span6 input[type="checkbox"], .discount .span12 .span6 input[type="radio"] {
    margin-top: 0;
}

.discount .span12 .span6 label {
    display: inline-block;
}

.img-upload input[type="text"] {
    width: 75%;
    margin-right: 5px;
    float: left;
}

.media.image-browse {
    display: block;
    float: left;
    width: 30px;
    height: 30px;
    background: none repeat scroll 0 0 #2a72b5;
    text-align: center;
    margin-right: 3px;
}

    .media.image-browse i {
        margin: 6px auto;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
        float: none;
    }

.img-upload {
    margin-bottom: 5px;
    display: block;
    float: left;
    width: 100%;
}

.media.image-browse.del {
    background: #ff5b57;
    border-color: #ff5b57;
}

.media.image-browse:hover {
    cursor: pointer;
}

.meta-tags ul {
    margin: 0;
}

    .meta-tags ul li {
        float: left;
        display: inline;
        margin: 0 5px 5px 0;
    }

        .meta-tags ul li span {
            background: #fff;
            color: #2f2f2f;
            padding: 1px 5px;
            border: 1px solid #cccccc;
            display: block;
            border-radius: 5px;
            -webkit-border-radius: 5px;
        }

        .meta-tags ul li a {
            display: block;
            float: right;
            color: red;
            margin-left: 5px;
            font-weight: 700;
        }

            .meta-tags ul li a:hover {
                cursor: pointer;
            }

.price-class {
    font-weight: 700;
    font-size: 14px;
}

.navigation {
    width: 100%;
    padding-left: 10px;
    padding-right: 16px;
    position: relative;
    height: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding-bottom: 8px;
}
    .navigation::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: calc(100% - 32px);
        height: 1px;
        background: rgba(255, 255, 255, 0.2);
    }

    .navigation li > ul > li > a span.text, .navigation li > a span.text {
        font-size: 13px;
    }

    .navigation li > a {
        position: relative;
        right: 9px;
        background-color: #1E3148;
        width: 100%;
    }
    .navigation li > a.active {
        background: linear-gradient(180deg, #E06C58 0%, #E15C7B 100%);
        border-radius:12px
    }

.navigation.active {
    max-height: 500px;
}

.header-container .navigation {
    overflow: unset;
    transition: none;
    margin-bottom: 55%;
}

    .header-container .navigation::after {
        bottom: -126px;
    }

.footer-container .navigation {
    overflow: unset;
    transition: none;
}

    .footer-container .navigation::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4vh;
    }

.table-sorting .head {
    background: #fff;
}

.list-checkbox .lb-checkbox {
    margin: 0 5px 0 0 !important;
}

.btn-del {
    background: #ff5b57;
    border-color: #ff5b57;
}

.block, .block-fluid {
    border: 1px solid #E4E9EB;
}

.rate-config .form-control, .mb-10 {
    margin-bottom: 10px;
}

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    border-radius: 0;
    height: 24px;
}

.bank-request {
    width: 100%;
}

    .bank-request tr th:first-child {
        text-align: left;
    }

    .bank-request tr th, .bank-request tr td {
        border: 1px solid #999;
        padding: 3px 5px;
    }

        .bank-request tr td.th-center {
            text-align: center;
        }

        .bank-request tr td img {
            width: 80px;
        }

.row-form input[type="checkbox"], .row-form input[type="radio"] {
    margin-top: -2px;
}

.txt-highlight {
    background: yellow !important;
}

.font-big-size {
    font-size: 20px;
    font-weight: 700;
}

.margin-top-30 {
    margin-top: 30px;
}

.warning-color {
    color: #ff5f73;
}

.warning-bg-color {
    background: #ff5f73;
}

.ok-color {
    color: #01aa78;
}

.ok-bg-color {
    background: #01aa78;
}

.no-border {
    border: none;
}

.no-border-top {
    border-top: none;
}

.no-border-bottom {
    border-bottom: none;
}

.tab-content {
    border: 1px solid #DDD;
}

.payment-pending {
    background: orange;
    padding: 5px 5px;
    color: #fff;
}

.payment-done {
    background: green;
    padding: 5px 5px;
    color: #fff;
}

.payment-rollback {
    background: red;
    padding: 5px 5px;
    color: #fff;
}

.cb-group > label.lb-checkbox {
    display: inline-block;
}

.cb-group > label {
    display: inline-block;
}

.required-start {
    color: red !important;
}

.td-number {
    text-align: right !important;
}

.td-date {
    text-align: center !important;
}

.td-center {
    text-align: center !important;
}

.td-right {
    text-align: right !important;
}

.td-left {
    text-align: left !important;
}

.td-func {
    text-align: center !important;
}

    .td-func a {
        display: inline-block;
        margin-right: 5px;
    }

.survey-table table {
    width: 100%;
}

    .survey-table table thead tr td,
    .survey-table table tbody tr td {
        border: 1px solid #D7D7D7;
        font-size: 13px;
        overflow: hidden;
        border-style: solid;
        padding: .1em .6em .1em .6em;
        font-weight: 400;
        text-overflow: ellipsis;
        text-align: left;
    }

    .survey-table table thead tr td {
        box-shadow: none;
        background: #F1F1F1;
    }

    .survey-table table tbody tr td p {
        margin-bottom: 0 !important;
    }

.gr-relative {
    position: relative !important;
}

#frmKyc img, #frmEditIdentityUser img {
    width: 300px;
    height: 220px;
    object-fit: contain;
}

#frmKyc .action {
    display: flex;
    justify-content: flex-end;
    align-content: center;
}

    #frmKyc .action .action-item {
        margin-left: 50px;
    }

    #frmKyc .action .btn-reject {
        background-color: #a5302c;
    }

.ui-autocomplete .ui-menu-item {
    padding: 7px 15px;
    cursor: pointer;
}

.is-mobile {
    display: none;
}

.row-form-filter .input-daterange {
    display: flex;
}

    .row-form-filter .input-daterange .input-group-addon {
        margin: 0 10px 0 10px;
    }

    .row-form-filter .input-daterange .date-range-format {
        width: 50%;
    }

.k-grid-content{
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .is-mobile-viewport .k-header, .is-mobile-viewport [role="gridcell"] {
        display: none;
    }

    .is-mobile-viewport .is-mobile {
        display: block !important;
        width: calc(100vw - 68px) !important;
    }

    .is-mobile-viewport tr:nth-child(even) .is-mobile {
        background-color: #eae8e8;
    }

    .is-mobile-viewport .k-grid-content {
        overflow: hidden;
    }
}

.col-template-val {
    margin: 0 0 1em .5em;
}

.row-form-filter {
    padding: 5px 16px;
    vertical-align: baseline;
    border: 0 !important;
}

.padding-top-filter {
    padding: 20px 0;
}

.header-btn {
    margin-right: -1px;
}


.padding-table-gird {
    /*margin-top: 10px;*/
    width: 100%;
}

#gridSource[role=gridcell] {
    display: flex;
    align-items: center;
}

#gridSource {
    border-top: none;
    border-bottom: none;
}

.fancybox-image img {
    display: block !important;
}

.td-func {
    border-right: 1px solid #DDE2E4 !important;
}

.d-product-card {
    display: flex;
    align-items: center;
    width: 250px;
    font-family: Arial, sans-serif;
}

.d-product-image {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 10px;
}

    .d-product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.d-product-info {
    max-width: 180px;
}

.d-product-title {
    font-size: 14px;
    font-weight: 400;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.d-product-price {
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.menu {
    margin-top: 0 !important;
    width: 240px;
    background: #1E3148;
    bottom: 0;
    position: fixed;
    padding: 14px 0;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    padding-top: 18px;
    top: 0;
    font-family: Lato, sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    color: #FFFFFF !important;
    border: none;
    border-radius: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-left: 10px;
    padding-right: 10px;
}

    .menu::-webkit-scrollbar {
        width: 5px; 
    }

    .menu::-webkit-scrollbar-track {
    }

    .menu::-webkit-scrollbar-thumb {
        background-color: rgb(158, 165, 171);
        border-radius: 2px; 
    }

.navigation li.openable > ul {
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

#app.content {
    padding-top: 0 !important;
    margin-left: 256px;
}

.k-grid-header, 
.k-grid-header-wrap{
    border-right: none;
}

.navigation li {
    width: 100%;
    background-color: #1E3148 !important;
}
    .navigation li a:not(.active):hover {
        background: #253D5A;
        border-radius: 12px
    }

.navigation li.openable {
    background: transparent !important;
    padding: 2px 0;
}

.menu .admin-name {
    padding: 1px 20px 0px;
    float: left;
    font-size: 15px;
    width: 100%;
    color: rgb(112, 128, 154);
    margin-top: 9px;
}

.menu .menu-title {
    padding: 10px 20px;
    letter-spacing: 0.05em;
    pointer-events: none;
    cursor: default;
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    display: flex;
    width: 208px;
    height : 44px;
    line-height : 20px;
}

.menu ul.navigation > li > a span {
    color: #FFFFFF;
    padding: 13px 0 13px 5px;
    position: relative;
    font-size: 13px;
    display: inline-block;
    font-weight: 600
}

    .menu ul.navigation > li > a span:hover {
        color: #FFFFFF;
    }

.menu ul.navigation > li > a .svg-inline--fa,
.menu ul.navigation > li > a .fa-solid {
    display: inline-block;
    margin-left: 20px;
    font-size: 12px;
    margin-bottom: 1px;
}

.navigation li > ul > li {
    background: transparent !important;
    padding: 2px 0;
    border: 0 !important;
    border-radius: 0;
    margin-left: 34px;
    width: auto;
}

    .navigation li > ul > li:hover {
        background: transparent !important;
    }

    .navigation li > ul > li > a {
        color: #a7aebb;
        padding: 13px 0 13px 5px;
        transition: all 0.4s ease 0s;
        font-size: 15px;
        display: inline-block;
    }

        .navigation li > ul > li > a:hover {
            color: #3bc0c3;
        }

.navigation li > ul.active {
    display: block;
}

[v-cloak] {
    display: none;
}

.img-padding {
    padding-left: 16px !important;
}

.menu-title .text img {
    padding-right: 12px;
}

.k-pager-input .k-textbox{
    text-align: center;
}

/*.fancybox-inner {
    border-radius: 12px !important;
    width: 615px !important;
}

.fancybox-opened {
    width: 615px !important;
    height: 615px !important;
}*/

.fancybox-close {
    position: absolute;
    top: 4px;
    right: 3px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040;
}

.row-form input[type="text"],
.row-form input[type="email"],
.row-form input[type="password"],
.row-form input[type="file"],
.row-form textarea,
.row-form input[type="number"] {
    border-radius: 8px;
    color: #272B30;
}

.select2-single-select-first.select2-container .select2-choice {
    background-image: none;
    border-radius: 8px;
    height: 32px;
    background-color: #F6F8F9 !important;
    border: 1px solid #D7D7D7;
    margin-top: 4px;
   /* margin-bottom: 3px;*/
}


.select2-container .select2-choice {

}

/*.large-iframe{
    width: 770px;
    height: 616px;
}*/

body {
    background: #EEF0F1;
    font-family: 'Roboto', sans-serif;
}

.row-form span {
    font-size: 11px;
    color: #272B30;
}

.row-form select {
    color: #272B30;
    background-color: #F6F8F9;
    border-radius: 8px;
}

.k-filter-row th, .k-grid-header th.k-header {
    border-style: none;
    height: 36px;
}

.k-grid td {
    border-style: none;
}

.k-block, .k-button, .k-draghandle, .k-grid-header, .k-grouping-header, .k-header, .k-toolbar, .k-treemap-tile, html .km-pane-wrapper .k-header {
    background-color: #1E3148 !important;
}

.k-filter-row th, .k-grid-header th.k-header {
    font-weight: 700 !important;
    line-height: 34px !important;
     font-family: 'SF Pro Display', sans-serif;

}
.span12 .no-margin {
    padding: 0px !important;
}

.row-form-filter {
    padding: 4px 0px;
    vertical-align: baseline;
    border: 0 !important;
}

.row-form,
.row-form-filter {
    display: flex;
}

.block-postion{
    display: flex;
    justify-content : end;
}

.k-pager-wrap {
    display: flex;
    justify-content: end;
}

.flex-content {
    height: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.row-form.row-form-filter {
   min-width:80%;
}


.k-gantt-toolbar .k-state-default, .k-grid .k-grouping-header, .k-grid-header, .k-grid-header-wrap, .k-grouping-header .k-group-indicator, .k-header, .k-pager-wrap, .k-pager-wrap .k-link, .k-pager-wrap .k-textbox{
    border-color:none !important;
}

.specie_title {
    display: none !important;
}
.Label-Title {
    color: #3559E0 !important;
}

.text {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
}

    .text img {
        margin-right: 12px; 
    }

.wrapper{
    margin-left: 15px !important;
}

    .wrapper:nth-child(2) {
        margin-bottom: 20px;
        margin-top: 24px;
    }

.custom-icon {
    width: 17px;
    height: 17px;
    margin-bottom: 3px !important;
}

.level-title {
    color: #FF806B;
    font-weight: 500;
    padding-left: 30px;
    display: flex;
    position: relative;
    cursor: pointer;
}
    .level-title:hover {
        background: #253D5A;
        border-radius: 12px
    }

.level-title .fa-chevron-down {
    left: 208px;
    position: absolute;
    position: absolute;
}

.rotate {
    transform: rotate(180deg);
}

.a-color {
    background-color: #0F2167;
}

    .a-color:hover {
        background-color: #3559E0;
        color: #FFFFFF !important;
        border-radius: 12px;
    }

.navigation .wrapper {
    margin-left: 21px;
}

    .navigation .wrapper:first-child {
        margin-top: 30px;
    }

    .navigation .wrapper:nth-child(2) {
        margin-bottom: 20px;
    }


.span12.WAPPER_CSS_CLASS .k-block,
.span12.WAPPER_CSS_CLASS .k-button,
.span12.WAPPER_CSS_CLASS .k-draghandle,
.span12.WAPPER_CSS_CLASS .k-grid-header,
.span12.WAPPER_CSS_CLASS .k-grouping-header,
.span12.WAPPER_CSS_CLASS .k-header,
.span12.WAPPER_CSS_CLASS .k-pager-wrap,
.span12.WAPPER_CSS_CLASS .k-toolbar,
.span12.WAPPER_CSS_CLASS .k-treemap-tile,
html .km-pane-wrapper .span12.WAPPER_CSS_CLASS .k-header {
    background-color: #EEF0F1 !important;
}

.span12.WAPPER_CSS_CLASS .k-grid.k-widget {
    border: 2px solid #DDE2E4;
    border-radius: 8px;
}

.wrapper text {
    margin-right: 10px;
    height: 25px;
    box-sizing: border-box;
}

.wrapper  a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

    .wrapper .text:hover {
        background-color: #3559E0;
        border-radius: 12px;
        box-shadow: 0 0 0 9px #3559E0;
    }

/*select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    border-radius: 8px;
    height: 40px;
    margin-left: 0px!important;
    margin-top: 4px !important ;
    background-color: #DDE2E4 !important;
}*/

.btn-search {
    margin-left: -28px;
}

.header-label{
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.row-form-filter .span2{
    margin-left: 10px;
}

    .row-form-filter .span2 .select2-container .select2-choice {
        background-color: white !important;
    }

        .row-form-filter .span2 .select2-container .select2-choice span {
            background-color: white !important;
            font-size: 12px !important;
        }

.custom-input {
    width: 358px;
    height: 41px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #F6F8F9 !important;
    margin-left: 5px;
}

.iframe-content .row-fluid [class*="span"] {
    background-color: #FFFFFF;
}

.upload-container{
    position: absolute !important;
    top: 20%;
}

.hyperlink-container {
    -moz-border-radius: 3px;
    color: #555;
    background-color: #F6F8F9;
    background-image: none;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    width: 100%;
    font-size: 12px;
    color: #3559E0;
    padding: 5px 7px 5px;
    border: 1px solid #D7D7D7;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    display: inline-block;
    height: 34px;
    margin: 0px;
    line-height: 24px;
    border-radius: 0;
    box-shadow: none;
    border-radius: 8px;
    margin-left: 0px !important;
    margin-top: 4px !important;
    font-weight: 600;
}


.iframe-content .fancybox-image {
    border-radius: 8px;
    width: 120px;
    height: 120px;
    margin-top: 5px;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
    border: 1.5px;
}

.span.field-validation-error span,
.field-validation-error {
    padding: 1px 1px 0 0 !important;
}

.upload-btn {
    background-color: #DDE2E4;
    border-radius:8px;
    border:none;
    width:96px;
    height: 24px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 50px;
}

.icon-img {
   margin-left: 20%;
}

.table-sorting {
    border-collapse: collapse;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 0px 0px 1px #DDE2E4;
    border-top: none;
    border: none;
}

div.k-grid-footer,
div.k-grid-header {
    border-bottom-color: #DDE2E4;
}

.cancel-btn {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 4px;
    right: 0;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    border: none;
    padding: 2px;
}

.edit-btn {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 4px;
    left: 0;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    border: none;
    background-color: rgba(0, 0, 0, 0.7);
}

.icon-class {
    color: #FFFFFF !important;
}

.row-form:has(.Label-Title) {
    margin-bottom: -20px;
}

.fancybox-inner .k-webkit,
.fancybox-inner .k-webkit120,
.fancybox-inner .fontawesome-i2svg-active,
.fancybox-inner .fontawesome-i2svg-complete {
  overflow:hidden;
}

.k-webkit:has(.iframe-content) {
  overflow: hidden;
}

.svg-inline--fa.fa-calendar {
    position: absolute;
    top: 58%;
    z-index: 2;
    left: 90%;
    font-size: 20px;
    color: #818E9E;
}

.owm-icondiv {
    width: 50px;
    opacity: 0.7;
    text-align: center;
    background-color: lightgray;
    border-radius: 10px;
    border: 1px solid darkgray;
}


input[type="radio"], input[type="checkbox"] {
    margin-top: -5px;
}

.owm-layercontrol-header {
    font-size: larger;
    font-weight: bold;
    display: block;
    position: relative;
}

.header-block-container{
    width: 100%;
    height: 80px;
    display: flex;
}

.header-block {
    display: flex;
    flex-grow: 1;
    height: 65px;
    margin-right: 12px;
    background-color: #FFFFFF;
    border-radius: 12px;
    padding-top: 5px;
    border: 1px solid #DDE2E4
}
    .header-block:last-child {
        margin-right: 0px;
    }

    .header-block .custom-compo{
        margin-left: 12px;
    }

.header-router-container {
    width: 100%;
    height: 36px;
    border-bottom: 1px solid #DDE2E4;
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    cursor:pointer;
}

.header-router {
    width: 148px;
    height: 100%;
    color: #818E9E;
    text-align: center;
    transition: color 0.3s, border-bottom-color 0.3s; 
}

    .header-router:hover {
        color: #E06C58;
        border-bottom: 3px solid #E06C58;
        text-decoration: none;
    }

.choosen-style {
    color: #E06C58;
    border-bottom: 3px solid #E06C58;
    text-decoration: none;
}

.Hidden-label{
    display: none;
}

.view-only {
    background-color: #DDE2E4 !important;
}

.create-view {
    background-color: #F6F8F9 !important;
}
/*//Chart-css*/
.chart-container {
    /*margin-left: 9px;*/
}

    .chart-container .filter-div {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
       /* margin-left: 20px;
        margin-top: 10px;*/
    }

.filter-div label, .filter-div select, .filter-div input {
    margin-bottom: 0;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.filter-div label {
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.chart-container .custom-picker {
    width: 20vh;
    height: 21px !important;
    background-color: #FFFFFF !important;
    margin-left: 0 !important; 
}

.chart-container .custom-input {
    width: 20vh;
    background-color: #FFFFFF !important;
    height:30.33px;
    margin-left: 0;
}

.chart-container .reset-btn {
    width: 72px !important;
    height: 30px;
    background-color: #EEF0F1;
    font-size: 14px;
    font-weight: 600;
    color: #3559E0;
    margin-top: 11.5px;
    border: none;
}

.header-component {
    display: flex; 
 /*   margin-left: 25px;*/
}

    .header-component > div {
        width: 20%;
        height: 65px;
        border: 1px solid #ccc;
        background-color: #FFFFFF;
        margin-top: 10px;
        padding-top: 5px;
        border-radius: 12px;
        margin-right: 16px;
        display: flex;
        border: 1px solid #DDE2E4
    }
        .header-component > div:last-child {
            margin-right: 0px;
        }

 .custom-compo {
        margin-top: 6px;
        color: #3559E0;
        background-color: #E5EEFF;
        width: 48px;
        height: 48px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        margin-right: 12px;
        align-items: center;
        margin-left: 12px;
    }

.component-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.component-header {
    margin-top: 6px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    color: #818E9E;
}

.component-value {
    font-size: 24px;
    text-align: left;
    font-weight: 700;
}

 .custom-compo img{
   display: block;
   margin-left: 10px;
}

.chart-container .ship-chart {
    margin-top: 20px;
    display: flex;
}

.ship-chart .chart-block {
    width: 35%;
    height: 320px;
    border-radius: 8px;
    border: 1.5px;
    background-color: #FFFFFF;
    margin-right: 16px;
    display: block;
    border: 1px solid #DDE2E4
}

    .ship-chart .chart-block:last-child {
        margin-right: 0px;
    }

    .ship-chart .chart-block b {
        font-size: 16px;
        font-weight: 600;
    }

.dot {
    font-size: 60px;
}

.dot-container {
    display: flex;
    margin-bottom: 21px;
    margin-right: 12px;
}

.chart-block .details ul {
    list-style: none;
    padding: 0;
    display: flex; 
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
}

.programming-stats .details ul li {
    margin: 12px 16px;
    text-transform: uppercase;
}

.chart-block .details {
    margin-top: 0;
    margin-left: 0;
}

.block-container {
    height: 66%;
    margin-left: 92px;
    width: 66%
}

.quality-pie{
    display: flex;
    margin-top: 20px;
}

    .quality-pie .day-pie {
        width: 66.85%;
        height: 274px;
        background-color: #FFFFFF;
        border-radius: 8px;
        border: 1.5px;
        margin-right: 16px;
        display: block;
        border: 1px solid #DDE2E4
    }

    .quality-pie .species-pie {
        width: 33%;
        height: 274px;
        background-color: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #DDE2E4
    }

.species-pie{
    display:block;
}

    .species-pie .details ul {
        list-style: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content:center;
        margin-top: 10px;
    }

    .species-pie .details {
        margin-top: 0px;
        margin-left: 0px;
    }

.day-pie-block {
    margin-top: 16px;
    height: 68%;
    margin-left: 5%;
    width: 90%;
}

.fancybox-lock .fancybox-overlay{
    overflow:hidden;
}

#area-qualiti-pie {
    margin-left: -5%;
}

.custom-img {
    width: 600px !important;
    height: 940px !important;
}

.span4:has(.custom-img) {
    margin-left: 0;
    height: 165%;
    width: 34.09%;
}

.journey-btn {
    margin-left: 907% !important;
    z-index: 1;
}

.role-group-container {
    background-color: #FFFFFF !important;
}


@media (max-width: 1550px) {
    .k-grid-header th.k-header {
        font-size: 10.9px;
    }

    .k-grid tr td {
        font-size: 12px;
    }

    .svg-inline--fa.fa-calendar{
        left: 86%;
    }
}

@media (max-width: 1700px) {
    .journey-btn {
        margin-left: 790% !important;
        z-index: 1;
    }
}

@media (max-width: 1490px) {
    .journey-btn {
        margin-left: 615% !important;
        z-index: 1;
    }
}


@media (max-width: 1490px) {

    .block-container{
       margin-left: 62px;
    }

    .component-header {
        font-size: 10px;
    }

    .component-value {
        font-size: 18px;
    }

    .chart-title {
        font-size: 12px !important;
    }
}

.chart-title{
    margin-left: 16px;
    font-size: 16px;
    margin-top: 10px;
}