.img-preview-big {
    max-height: 150px;
}

.login-cover-svg {
    background-color: #09416e;
    /*background-image: url(../images/star.svg);*/
    background-attachment: fixed;
    background-size: cover;
}

.treegrid-indent {
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
}

.treegrid-expander {
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.treegrid-expander-expanded {
    background-image: url(../images/collapse.png);
}

.treegrid-expander-collapsed {
    background-image: url(../images/expand.png);
}

.trumbowyg-box,
.trumbowyg-editor {
    min-height: 200px;
}

.dropzone {
    min-height: 210px;
}

.group-left-border {
    padding: 6px 12px;
    margin: 0 0 20px;
    border-left: 5px solid #eeeeee;
}

li.selected {
    background-color: #fafafa;
    border-left: 3px solid #1f2629;
    color: #eeeeee;
}


/** validation error jquery*/

.validation-error-label,
.validation-valid-label {
    margin-top: 7px;
    margin-bottom: 7px;
    display: block;
    color: #F44336;
    position: relative;
    padding-left: 0px;
}

.validation-valid-label {
    color: #1f2629;
}

.validation-error-label:before,
.validation-valid-label:before {
    font-family: 'icomoon';
    position: absolute;
    top: 2px;
    left: 0;
    display: inline-block;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
}

.validation-error-label:empty,
.validation-valid-label:empty {
    display: none;
}

.validation-error-label:before {
    content: '';
}

.validation-valid-label:before {
    content: '';
}


/*reset valid label not margin/nit show.show onli error*/

.validation-valid-label {
    margin-top: 0px;
    margin-bottom: 0px;
    display: block;
    color: #F44336;
    position: relative;
    padding-left: 0px;
}

.validation-valid-label {
    color: #1f2629;
}

.display-none {
    display: none;
}

.entry-thumbnail {
    overflow: hidden;
}

.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}


/**
@media (min-width: 769px) {
 .page-header {
   margin: 40px 0 20px;
 }
}
**/

h2.custom-category-title {
    color: #59b210;
    font-size: 18px;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 10px;
    border-bottom: 1px dashed #aaa;
    border-top: 1px dashed #aaa;
    padding: 10px 0;
}

.dashed-line {
    border-bottom: 1px dashed #aaa;
    padding: 10px 0;
}

.product-info form button {
    background: #1f2629;
    border: 2px solid #1f2629;
    color: #fff;
    font-weight: 700;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 14px;
    transition: .3s;
}

.product-content .mini-cart-total {
    border-bottom: 1px dashed #aaa;
    overflow: hidden;
    padding: 10px 0;
}

.product-content .mini-cart-total span.total-price {
    float: right;
    font-size: 14px;
}

.product-content .mini-cart-total span.text-info {
    float: left;
    color: #333;
    font-size: 14px;
}

.product-content .mini-cart-total span.text-title {
    float: left;
    color: #5cace2;
    font-size: 17px;
}

.product-content .mini-cart-total span.price {
    float: right;
    font-size: 14px;
    color: #1f2629;
}

.product-content .mini-cart-total span.bayar {
    float: right;
    font-size: 17px;
    color: #1f2629;
}

.product-content .mini-cart-total span.info-nmr {
    font-size: 12px;
    color: #e73827;
    font-style: italic;
}

ul.track_timeline {
    list-style-type: none;
    position: relative;
}

ul.track_timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}

ul.track_timeline>li {
    margin: 20px 0;
    padding-left: 20px;
}

ul.track_timeline>li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #22c0e8;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
}

svg.star-background {
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
    min-width: 100%;
    height: 100%;
}

.map-responsive {
    overflow: hidden;
    padding-bottom: 50%;
    position: relative;
    height: 0;
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.datepaginator .pagination>li .dp-off {
    background-color: #f3f3f3;
}

.datepaginator .pagination>li .dp-no-select:hover {
    background-color: #f3f3f3;
}

.pagination>li>a:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>span:focus {
    z-index: 2;
    color: #333333;
    background-color: #f3f3f3;
    border-color: #dddddd;
}

.datepaginator .pagination>li>.dp-selected,
.datepaginator .pagination>li>.dp-selected:hover,
.datepaginator .pagination>li>.dp-selected:focus {
    background-color: #468fca;
    color: #fff;
    width: 140px;
}


/* The actual timeline (the vertical ruler) */

.tline {
    position: relative;
    margin: 0 auto;
}


/* The actual timeline (the vertical ruler) */

.tline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: white;
    top: 0;
    bottom: 0;
    margin-left: -3px;
}


/* Container around content */

.tline-container {
    padding: 5px 0px;
    position: relative;
    background-color: inherit;
}


/* Place the container to the right */

.tline-right {
    left: -4px;
}


/* Fix the circle for containers on the right side */

.tline-right::after {
    left: -16px;
}


/* The actual content */

.tline-content {
    padding: 5px 15px;
    background-color: white;
    position: relative;
    border-radius: 6px;
    border: 1px solid #ccc;
}


/* Media queries - Responsive tline on screens less than 600px wide */

@media screen and (max-width: 600px) {
    /* Place the timelime to the left */
    .tline::after {
        left: 31px;
    }
    /* Full-width containers */
    .tline-container {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
    /* Make sure that all arrows are pointing leftwards */
    .tline-container::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }
    /* Make sure all circles are at the same spot */
    .tline-right::after {
        left: 5px;
    }
    /* Make all right containers behave like the left ones */
    .tline-right {
        left: 15px;
    }
}

.rotate90 {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}


/* Important part */

.modal-dialog-scroll {
    overflow-y: initial !important
}

.modal-body-scroll {
    height: 250px;
    overflow-y: auto;
}

.admin-login-shell {
    min-height: calc(100vh - 90px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px 12px;
}

.admin-login-stage {
    width: 100%;
    max-width: 1060px;
    display: grid;
    grid-template-columns: minmax(280px, 1.05fr) minmax(340px, 430px);
    gap: 28px;
    align-items: stretch;
}

.admin-login-intro {
    padding: 42px 40px;
    border-radius: 28px;
    color: #fff;
    background: linear-gradient(155deg, rgba(7, 35, 58, 0.9), rgba(12, 92, 133, 0.82));
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
    position: relative;
    overflow: hidden;
}

.admin-login-intro:before,
.admin-login-intro:after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.admin-login-intro:before {
    width: 260px;
    height: 260px;
    top: -120px;
    right: -70px;
}

.admin-login-intro:after {
    width: 180px;
    height: 180px;
    bottom: -90px;
    left: -50px;
}

.admin-login-brand,
.admin-login-title,
.admin-login-copy,
.admin-login-points {
    position: relative;
    z-index: 1;
}

.admin-login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

.admin-login-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    padding: 10px;
}

.admin-login-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #d8f1ff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.admin-login-title {
    margin: 0 0 14px;
    color: #fff;
    font-size: 38px;
    line-height: 1.15;
    font-weight: 700;
}

.admin-login-copy {
    max-width: 540px;
    margin: 0 0 26px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    line-height: 1.7;
}

.admin-login-points {
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-login-points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    color: #f2fbff;
    font-size: 15px;
}

.admin-login-points li:before {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: 8px;
    border-radius: 50%;
    background: #7ce2ff;
    flex: 0 0 auto;
    box-shadow: 0 0 0 6px rgba(124, 226, 255, 0.15);
}

.admin-login-card-wrap {
    display: flex;
    align-items: center;
}

.admin-login-card {
    width: 100%;
    margin: 0;
    padding: 34px 32px 28px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 26px 60px rgba(4, 24, 41, 0.24);
}

.admin-login-card-head {
    margin-bottom: 24px;
}

.admin-login-card-head h2 {
    margin: 0 0 8px;
    color: #123146;
    font-size: 28px;
    font-weight: 700;
}

.admin-login-card-head p {
    margin: 0;
    color: #617d90;
    font-size: 14px;
    line-height: 1.6;
}

.admin-login-alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid #ffd0d4;
    border-radius: 14px;
    background: #fff4f5;
    color: #b13646;
    font-size: 13px;
    font-weight: 600;
}

.admin-login-label {
    display: block;
    margin-bottom: 8px;
    color: #244055;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.admin-login-field {
    position: relative;
}

.admin-login-field-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #6d8798;
    font-size: 16px;
    z-index: 2;
}

.admin-login-card .form-control {
    height: 52px;
    border-radius: 14px;
    border: 1px solid #d8e2ea;
    padding-left: 46px;
    padding-right: 16px;
    box-shadow: none;
    font-size: 14px;
    color: #193447;
    background: #fbfdff;
}

.admin-login-card .form-control:focus {
    border-color: #0f81b5;
    box-shadow: 0 0 0 4px rgba(15, 129, 181, 0.12);
    background: #fff;
}

.admin-login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 18px 0 22px;
}

.admin-login-remember {
    margin: 0;
    color: #4f6b7d;
}

.admin-login-help {
    color: #6f8696;
    font-size: 12px;
    text-align: right;
}

.admin-login-submit {
    margin-bottom: 0;
}

.admin-login-submit .btn {
    height: 52px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #0c6c9b, #1596c8);
    box-shadow: 0 18px 30px rgba(13, 118, 166, 0.25);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
}

.admin-login-submit .btn:hover,
.admin-login-submit .btn:focus {
    background: linear-gradient(135deg, #0b628c, #1388b5);
}

@media (max-width: 991px) {
    .admin-login-stage {
        grid-template-columns: 1fr;
        max-width: 620px;
    }

    .admin-login-intro,
    .admin-login-card {
        border-radius: 24px;
    }
}

@media (max-width: 767px) {
    .admin-login-shell {
        min-height: auto;
        padding-top: 18px;
    }

    .admin-login-intro {
        padding: 28px 24px;
    }

    .admin-login-title {
        font-size: 30px;
    }

    .admin-login-card {
        padding: 26px 22px 22px;
    }

    .admin-login-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-login-help {
        text-align: left;
    }
}