﻿@media screen and (min-width: 1024px) {
    /* summary fixed only in desktop and min tablet (landscape) */
    div#summaryID.fixedClass {
        padding-left: 0;
        position: fixed;
        right: 7px;
        top: 1%;
    }

        div#summaryID.fixedClass .iam-summary {
            margin-top: 0;
        }
}

@media screen and (min-width: 970px) and (max-height: 640px) {
    div#summaryID.fixedClass {
        overflow: hidden;
        overflow-y: auto;
        top: -20px;
    }
}

@media screen and (min-width: 1380px) and (max-width: 1600px) {
    /* summary fixed only in desktop and min tablet (landscape) */
    div#summaryID.fixedClass {
        width: 455.33px;
        right: 4.35%;
    }
}

@media screen and (min-width: 1900px) and (max-width: 2200px) {
    /* summary fixed only in desktop and min tablet (landscape) */
    div#summaryID.fixedClass {
        right: 15.7%;
    }
}

@media screen and (min-width: 1660px) and (max-width: 1690px) {
    /* summary fixed only in desktop and min tablet (landscape) */
    div#summaryID.fixedClass {
        right: 8.565%;
    }
}

@media screen and (min-width: 1580px) and (max-width: 1610px) {
    /* summary fixed only in desktop and min tablet (landscape) */
    div#summaryID.fixedClass {
        right: 6.45%;
    }
}

@media screen and (min-width: 1400px) and (max-width: 1450px) {
    /* summary fixed only in desktop and min tablet (landscape) */
    div#summaryID.fixedClass {
        right: 1.45%;
    }
}

/* Hacking css bootstrap (col-sm) */
@media screen and (min-width: 900px) {
    .iam-header {
        background: #fff;
        border-bottom: 3px solid #42b549;
        position: relative;
        height: 75px;
        padding: 12px 0;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: color, background-color;
        transition-property: color, background-color;
        -webkit-transition: height 400ms;
        transition: height 400ms;
    }

        .iam-header nav.iam-navigation > ul > li:last-child {
            /*display: none;*/
        }

    a.logo-footer {
        display: none;
    }

    .wrap-team.media-partner-slider .slick-track > .item:nth-child(n+2) .tile-text {
        display: none;
    }

    span.trigger-summary {
        display: none;
    }
}

/* Hacking css bootstrap (col-sm) */
@media screen and (max-width: 1080px) and (min-width: 900px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        float: left;
    }

    .col-sm-12 {
        width: 100%;
    }

    .col-sm-11 {
        width: 91.66666667%;
    }

    .col-sm-10 {
        width: 83.33333333%;
    }

    .col-sm-9 {
        width: 75%;
    }

    .col-sm-8 {
        width: 66.66666667%;
    }

    .col-sm-7 {
        width: 58.33333333%;
    }

    .col-sm-6 {
        width: 50%;
    }

    .col-sm-5 {
        width: 41.66666667%;
    }

    .col-sm-4 {
        width: 33.33333333%;
    }

    .col-sm-3 {
        width: 25%;
    }

    .col-sm-2 {
        width: 16.66666667%;
    }

    .col-sm-1 {
        width: 8.33333333%;
    }

    .col-sm-pull-12 {
        right: 100%;
    }

    .col-sm-pull-11 {
        right: 91.66666667%;
    }

    .col-sm-pull-10 {
        right: 83.33333333%;
    }

    .col-sm-pull-9 {
        right: 75%;
    }

    .col-sm-pull-8 {
        right: 66.66666667%;
    }

    .col-sm-pull-7 {
        right: 58.33333333%;
    }

    .col-sm-pull-6 {
        right: 50%;
    }

    .col-sm-pull-5 {
        right: 41.66666667%;
    }

    .col-sm-pull-4 {
        right: 33.33333333%;
    }

    .col-sm-pull-3 {
        right: 25%;
    }

    .col-sm-pull-2 {
        right: 16.66666667%;
    }

    .col-sm-pull-1 {
        right: 8.33333333%;
    }

    .col-sm-pull-0 {
        right: auto;
    }

    .col-sm-push-12 {
        left: 100%;
    }

    .col-sm-push-11 {
        left: 91.66666667%;
    }

    .col-sm-push-10 {
        left: 83.33333333%;
    }

    .col-sm-push-9 {
        left: 75%;
    }

    .col-sm-push-8 {
        left: 66.66666667%;
    }

    .col-sm-push-7 {
        left: 58.33333333%;
    }

    .col-sm-push-6 {
        left: 50%;
    }

    .col-sm-push-5 {
        left: 41.66666667%;
    }

    .col-sm-push-4 {
        left: 33.33333333%;
    }

    .col-sm-push-3 {
        left: 25%;
    }

    .col-sm-push-2 {
        left: 16.66666667%;
    }

    .col-sm-push-1 {
        left: 8.33333333%;
    }

    .col-sm-push-0 {
        left: auto;
    }

    .col-sm-offset-12 {
        margin-left: 100%;
    }

    .col-sm-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-sm-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-sm-offset-9 {
        margin-left: 75%;
    }

    .col-sm-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-sm-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-sm-offset-6 {
        margin-left: 50%;
    }

    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-sm-offset-3 {
        margin-left: 25%;
    }

    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-sm-offset-0 {
        margin-left: 0;
    }
}

@media screen and (max-width: 1220px) and (min-width: 680px) {
    form#frmsubmitncb {
        /*display: flex;
        justify-content: space-between;*/
    }

    span.trigger-summary.close {
        display: none;
    }

    form#frmsubmitncb > .col-sm-8 {
        width: 60%;
        padding: 10px;
    }

    form#frmsubmitncb > .col-sm-4 {
        width: 40%;
        padding: 10px;
    }

    .iam-summary > .title, .iam-summary > .name-product {
        padding: 0 10px;
    }

    .detail-billing .detail-title,
    .iam-summary .detail-billing ul > li.checked-polis,
    .iam-summary .detail-billing ul > li.inTotal,
    .iam-summary .detail-billing ul > li.term-condition-li,
    .iam-summary .detail-billing ul > li.review-methodPayment {
        padding-left: 10px;
    }

    .iam-summary .detail-billing ul > li {
        padding: 4px 10px 5px 30px;
    }

        .iam-summary .detail-billing ul > li > i {
            left: 10px;
        }

        .iam-summary .detail-billing ul > li > label.label-area {
            font-size: 12px;
        }

    .iam-summary .detail-billing.button-submit {
        flex-direction: column;
        padding-bottom: 0;
        padding: 0 10px 0;
    }

        .iam-summary .detail-billing.button-submit > * {
            width: 100%;
            margin-bottom: 15px;
        }

    .iam-proccess-btn.hidden-lg {
        display: none;
    }

    .iam-pricetag .tag.price .btn.buy-btn {
        position: static;
        margin-top: 10px;
    }

    .wrap-product {
        background: transparent;
        padding: 0;
        position: static;
        width: 100%;
    }

        .wrap-product .item {
            border: 1px solid #ddd;
        }

            .wrap-product .item .iam-pricetag .tag {
                max-width: 100%;
            }

    .selected span.btn.selected {
        bottom: -8px;
        top: inherit;
        left: 0;
    }
}

@media screen and (max-width: 1080px) {
    .modal .modal-dialog {
        max-width: 100%;
        margin: auto;
        padding: 15px;
    }

    .iam-summary .detail-billing ul > li > .value-print {
        min-width: 35px;
    }

        .iam-summary .detail-billing ul > li > .value-print > a {
            font-family: inherit;
            font-size: 13px;
        }

    .iam-proccess.question-part .iam-answer .item {
        width: 50%;
    }
}

/* For small device max-width 680px (usually mobile landscape view) */
@media screen and (max-width: 680px) {
    .iam-summary .detail-billing ul > li {
        font-size: 14px;
        margin-bottom: 5px;
    }

        .iam-summary .detail-billing ul > li.term-condition-li,
        .iam-summary .detail-billing.button-submit {
            display: none;
        }

    .mobile-checkout {
        display: flex;
        justify-content: space-between;
        padding-bottom: 1.5rem;
        margin-top: 1.5rem;
    }

        .mobile-checkout > * {
            width: 49% !important;
            margin-bottom: 0 !important;
            border-radius: 5px !important;
            padding: 10px;
            height: initial;
            border-radius: 5px;
            border: 1px solid;
        }

        .mobile-checkout > .btn.fake,
        .mobile-checkout > .btn.submit {
            background: #efff00;
            color: inherit;
        }

    /* Footer */
    .iam-footer {
        text-align: center;
    }

    .dho-partner {
        position: static;
        margin-top: 1rem;
    }

    #waModal .modal-dialog {
        width: 100%;
        max-width: 100%;
    }

    .name-section {
        font-size: 12px;
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .iam-main-content .iam-cover-proccess {
        min-height: initial;
        margin-top: 0;
        border-radius: 0;
    }

    .iam-cover-proccess .iam-proccess > .title {
        font-size: 14px;
        padding-left: 20px;
        margin-bottom: 7px;
        letter-spacing: 0.25px;
    }

    #frmsubmitncb .col-sm-8 {
        padding: 0;
    }

    .iam-proccess.question-part .iam-answer {
        padding-bottom: 15px;
    }

        .iam-proccess.question-part .iam-answer .item {
            width: 50%;
        }

    .wrap-product {
        padding: 0;
        background: transparent;
        position: static;
        width: 100%;
        clear: both;
    }

        .wrap-product .item {
            border: 1px solid #ddd;
        }

            .wrap-product .item .iam-pricetag .tag {
                max-width: 100%;
            }

    .mm.bottom .btn.selected {
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;
    }

    .selected .tag.price span.btn.selected {
        display: none;
    }

    .iam-pricetag .tag.price .btn.buy-btn {
        position: static;
    }

    .iam-pricetag .tag.price .btn.buy-btn,
    .wrap-product .item .iam-ojkNo.vertical {
        display: none;
    }

    .mm.bottom {
        display: block;
        margin-top: 2rem;
    }

    .wrap-product .item .mm.bottom .iam-ojkNo.vertical,
    .wrap-product .item .mm.bottom .btn.buy-btn {
        display: block;
    }

    .mm.bottom .btn.buy-btn {
        padding: 10px 8px 8px;
        margin-bottom: 7px;
        text-transform: uppercase;
        font-size: 12px;
        border: none;
        box-shadow: none;
        width: 100%;
        background: #114f99;
        outline: none;
        color: #fff;
        text-align: center;
        letter-spacing: 1px;
        position: relative;
    }

    .wrap-espaj fieldset .form-group > *,
    .wrap-espaj fieldset .form-group.beneficiary > div {
        padding: 0;
        margin-bottom: 2rem;
        width: 100%;
    }

    .wrap-espaj fieldset .form-group {
        margin-bottom: 0;
        flex-direction: column;
    }

    .iam-proccess {
        padding: 0 15px;
    }

    .iam-cover-proccess .iam-proccess > .title > i.fas {
        left: 0;
    }

    .name-section .iam-logo > img {
        width: 60px;
        top: 14px;
    }

    .title-fieldset {
        text-transform: capitalize;
        padding-top: 0;
        font-size: 14px;
    }

    .iam-cover-proccess .iam-proccess > .abstract {
        letter-spacing: 0.15px;
    }

    .title-fieldset .arrow-place {
        top: -12px;
    }

    /* ===============
            MENU RINCIAN
        ================ */

    .trigger-summary.close .control {
        top: 13px;
    }

    .trigger-summary:active,
    .trigger-summary:focus {
        opacity: 1;
        color: #fff;
        filter: alpha(opacity=100);
    }

    .trigger-summary .control {
        position: absolute;
        top: 11px;
        right: 17px;
    }

        .trigger-summary .control i.fas {
            font-size: 20px;
        }

            .trigger-summary .control i.fas.fa-times {
                display: none;
            }

    .bill-opened .trigger-summary .control i.fas.fa-times {
        display: inline;
    }

    .bill-opened .trigger-summary .control i.fas.fa-angle-up {
        display: none;
    }

    .trigger-summary .control i.fas.fa-angle-down {
        display: none;
    }

    /* summary mobile */
    .trigger-summary {
        display: none;
    }

    .trigger-summary {
        background-image: url('../image/receipt-bottom-other.png');
        background-position: -14px 0;
        background-size: cover;
        background-repeat: no-repeat;
        color: #000 !important;
        display: block;
        letter-spacing: .8px;
        padding: 10px 15px;
        height: 40px;
        width: 150px;
        border-radius: 10px;
        position: relative;
        float: none;
        opacity: 1;
        text-shadow: none;
        font-size: 15px;
        overflow: hidden;
        z-index: 999;
        position: fixed;
        bottom: 50px;
        right: 7px;
    }

    span.trigger-summary.close {
        background-image: none;
        background-color: #ee4136;
        display: none;
    }

    #summaryID {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        height: 100%;
        background: #fff;
        z-index: 992;
        overflow-y: scroll;
        -webkit-transform: translate(0,100%);
        -ms-transform: translate(0,100%);
        transform: translate(0,100%);
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
        transition: -webkit-transform .4s ease;
        transition: transform .4s ease;
        transition: transform .4s ease,-webkit-transform .4s ease;
    }

    .bill-opened div#summaryID {
        z-index: 992;
        -webkit-transform: translate(0,0);
        -ms-transform: translate(0,0);
        transform: translate(0,0);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        bottom: 0;
        padding: 0;
    }

    .iam-summary {
        height: initial;
        margin: 0 0 10px;
    }

    .open span.trigger-summary .control i.fas.fa-angle-down {
        display: block;
    }

    .open span.trigger-summary .control i.fas.fa-angle-up {
        display: none;
    }

    .modal-body h6.title {
        font-size: 14px;
        padding-right: 30px;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
}

/* For small device max-width 320px (mobile potrait view) */
@media screen and (max-width: 390px) {
    body {
        font-size: 14px;
    }

    .mobile-checkout > * {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }

    .mobile-checkout {
        flex-direction: column;
    }
}

/* For small device max-width 320px (mobile potrait view) */
@media screen and (max-width: 360px) {
    .btn.btn-agree {
        font-size: 11px;
        word-break: break-all;
        white-space: normal;
    }
}