@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');
@import '~@angular/material/prebuilt-themes/indigo-pink.css';




body {
    background: #F0F5F8;
    font-family: 'Roboto' !important;
}

a:focus, li:focus, div:focus, span:focus, input:focus {
    outline: none;
}

row {
    display: block;
    clear: both;
}

a {
    color: #097BA0;
    text-decoration: none;
}

    a:hover {
        color: #0A3858;
    }



/********** Override mdl default styles *****/

.mdl-layout__container {
    height: 80px !important;
    position: fixed;
    z-index: 100;
}

.mdl-layout__header {
    background: #FFF;
    box-shadow: 0 5px 5px 0px rgba(52, 110, 170, .18);
}

.mdl-layout__header-row {
    padding: 0 20px 0 20px;
}

.mdl-textfield.is-invalid .mdl-textfield__input {
    border-color: rgba(0,0,0, 0.12);
}

.mdl-textfield__input {
    font-family: 'Roboto' !important;
    font-size: .9em;
}

.mdl-textfield__label {
    font-size: .9em;
}


/***** Header part *******/
#header-part {
    max-height: 75px;
    position: fixed;
}

.header-right {
    width: 50%;
    display: block;
}

.logo {
    background: url(../images/Logo.png) no-repeat;
    width: 50%;
    height: 29px;
}

.ico-shopping {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: url(../images/icon_cart.png) no-repeat;
    background-position: 0 -7px;
}

.cart-info {
    line-height: 20px !important;
    float: right;
    padding-top: 9px;
}

    .cart-info span, .cart-info .ico-shopping {
        float: left;
        padding-left: 3px;
    }

        .cart-info span .cartval {
            background: #FDCE3B;
            color: #000;
            display: block;
            border-radius: 8px;
            text-align: center;
            padding: 0px 17px;
        }

        .cart-info span .cartlbl {
            color: #A2A1A0;
            padding-left: 4px;
        }

/***** Body part *******/

.body-part {
    padding-top: 100px;
    width: 900px;
    margin: auto;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 15px;
}

/****** Tile *******/

.mdl-card {
    width: 48.5%;
    float: left;
    margin-bottom: 25px;
    /*min-height: 397px;*/
}

    .mdl-card:nth-child(even) {
        margin-left: 3%;
    }

.tile-image {
    width: 100%;
    height: 203px;
    background: #CCC;
    cursor: pointer;
}

.mdl-card__title-text {
    color: #097BA0;
    font-size: 1.6em;
    cursor: pointer;
    font-weight: 600;
    padding-bottom: 10px;
}

.mdl-card__supporting-text {
    padding: 0 16px 16px 16px;
    line-height: 21px;
    min-height: 65px;
}

    .mdl-card__supporting-text a {
        display: block;
        clear: both;
    }

row > div, row > span, row > label {
    float: left;
}

.mdl-card label {
    color: #A0A0A0;
}

.mdl-card__supporting-text row:first-child label:first-child {
    color: #0A3858;
    font-weight: 600;
    font-size: 1.4em;
}

.mdl-card__supporting-text row:nth-child(2) label:first-child {
    font-weight: 600;
}

.mdl-card__actions {
    text-align: right;
    position: relative;
}

    .mdl-card__actions label {
        color: #A0A0A0;
    }

    .mdl-card__actions label, .mdl-card__actions input, mdl-card__actions button {
        position: absolute;
    }

        .mdl-card__actions input[type='text'], .mdl-card__actions input[type='number'] {
            width: 50px;
            padding: 7px;
            font-size: 1.1em;
            font-weight: 500;
            right: 120px;
            text-align: center;
            border: 1px solid #D5D5D5;
            border-radius: 2px;
        }

    .mdl-card__actions label {
        right: 197px;
        margin-top: 9px;
        font-size: .9em;
    }

    .mdl-card__actions button {
        color: #332D0E !important;
        background-color: #FECF39 !important;
        text-transform: inherit;
        font-weight: 600;
    }

/**********************************************/
.app-view {
    width: 768px;
    padding-top: 15px;
}

.page-title h3 {
    margin-top: 0;
    color: #097BA0;
    font-weight: 500;
    font-size: 1.4em;
    width: 768px;
    display: block;
    margin: auto;
    position: relative;
}

.page-title {
    color: #097BA0;
    font-weight: 500;
    font-size: 1.4em;
    position: relative;
    padding-top: 80px;
}

    .page-title .prev-btn {
        background: url(../images/arrow_back_default.png) no-repeat;
        background-position: center;
        width: 30px;
        height: 19px;
        padding: 3px;
        position: absolute;
        left: -51px;
        top: 7px;
        border: 0;
    }

        .page-title .prev-btn:hover {
            background: url(../images/arrow_back_hover.png) no-repeat;
            background-position: center;
        }

.app-img {
    position: relative;
}

    .app-img .info {
        position: absolute;
        bottom: 20px;
        right: 20px;
        color: #FFF;
        background: rgba(0, 0, 0, .6);
        padding: 10px;
    }

        .app-img .info .price {
            font-size: 1.6em;
            font-weight: 600;
        }

    .app-img label {
        font-size: .9em;
        line-height: 20px;
    }

    .app-img .price-lbl {
        padding-top: 3px;
    }

.app-desc {
    color: #888;
    padding: 25px 0;
}

    .app-desc label {
        color: #113551;
        font-weight: 600;
        display: block;
    }

/************* Order summary *************/

.steps-info {
    text-align: center;
    overflow: auto;
    padding-bottom: 25px;
}

    .steps-info label {
        color: #097BA0;
        font-size: 1.3em;
        display: block;
        padding: 0 0 15px 0;
    }

        .steps-info label span {
            font-weight: 600;
        }

    .steps-info step {
        display: inline-block;
        color: #8A8E91;
        font-weight: 600;
    }

        .steps-info step label {
            display: block;
            color: #8A8E91;
            background: #DDE2E5;
            font-size: 2em;
            padding: 21px 0;
            border-radius: 50px;
            width: 63px;
            margin: auto;
            margin-bottom: 6px;
            font-weight: normal;
        }

        .steps-info step.highlight label {
            color: #FFF;
            background: #003555;
        }

        .steps-info step.highlight {
            color: #003555;
        }

        .steps-info step.complete label {
            color: #FFF;
            background: #98CF00;
        }

        .steps-info step.complete {
            color: #789625;
        }

dot {
    background: #C3C5C9;
    display: inline-block;
    margin: 0 4px;
    width: 8px;
    height: 8px;
    border-radius: 10px;
    margin-bottom: 46px;
}

.summary-box {
    width: 100%;
    padding-bottom: 20px;
    margin: auto !important;
}

    .summary-box .mdl-card__title {
        padding-bottom: 5px;
    }

        .summary-box .mdl-card__title h2 {
            margin: auto;
            color: #013554;
        }


.tbl-row {
    display: table;
    width: 100%;
    padding: 20px 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-top: 0 none !important;
}

    .tbl-row .cell {
        display: table-cell;
    }

        .tbl-row .cell:first-child {
            width: 40%;
            text-align: left;
        }

            .tbl-row .cell:first-child label {
                line-height: 8px;
            }

            .tbl-row .cell:first-child .app-name {
                color: #013554 !important;
                font-weight: 600;
                padding-bottom: 10px;
                font-size: 1em;
            }

        .tbl-row .cell:nth-child(2) {
            width: 20%;
            text-align: center;
        }

        .tbl-row .cell:last-child {
            width: 40%;
            text-align: right;
        }

    .tbl-row input[type='text'], .tbl-row input[type='number'] {
        width: 50px;
        text-align: center;
        display: block;
        margin: auto;
        color: #013554;
        font-size: 1em;
        padding: 5px;
        margin-top: 6px;
        font-weight: 600;
        border: 1px solid #D5D5D5;
        border-radius: 2px;
    }

    .tbl-row .vgap {
        margin-top: 6px;
    }

    .tbl-row label, .tbl-row div {
        color: #8A8E91;
        display: block;
        font-size: .9em;
    }

        .tbl-row label span {
            font-weight: 600;
            color: #013554 !important;
            font-size: 1.3em;
            display: inline-block;
        }

    .tbl-row input, .tbl-row button {
        position: inherit;
        color: #8A8E91;
        border: 1px solid #D5D5D5;
        border-radius: 2px;
    }

    .tbl-row label {
        position: inherit;
        color: #8A8E91;
    }

.cost-footer {
    /*color: #4094B5!important;*/
    font-size: .9em;
    padding: 10px;
    width: 300px;
    margin: auto;
}

.cost-lbl {
    display: block;
    overflow: auto;
    color: #013554 !important;
    margin: auto;
    line-height: 44px;
}

.cen-align {
    text-align: center;
}

.total-cost {
    font-size: 2.2em;
    font-weight: 600;
    padding-bottom: 8px;
    margin-top: -5px;
}

.total-cost-lbl {
    font-size: 1.5em;
    text-transform: uppercase;
    padding-top: 15px;
}

.btn-holder {
    clear: both;
}

    .btn-holder .back-btn {
        background: #057CA4 url(../images/btn_arrow_back_white.png) no-repeat;
        background-color: #057CA4 !important;
        background-position: 24% 45%;
        padding-left: 40px;
        text-transform: inherit;
        margin-right: 5px;
        width: 120px;
    }
        /*.btn-holder .back-btn:hover{
	background: #057CA4 url(../images/btn_arrow_back_white.png) no-repeat;	
	background-color: #057CA4!important;
}*/
        .btn-holder .back-btn:disabled {
            background: #CBCBCB url(../images/btn_arrow_back_grey.png) no-repeat;
            background-color: #CBCBCB !important;
            background-position: 24% 45%;
        }

    .btn-holder .next-btn {
        background: #057CA4 url(../images/btn_arrow_next_white.png) no-repeat;
        background-color: #057CA4 !important;
        background-position: 85% 45%;
        padding-right: 40px;
        text-transform: inherit;
        margin-left: 5px;
        width: 120px;
    }

        .btn-holder .next-btn:disabled {
            background: #CBCBCB url(../images/btn_arrow_next_grey.png) no-repeat;
            background-color: #CBCBCB !important;
            background-position: 85% 45%;
        }

    .btn-holder .payment-btn {
        background: #FED03A url(../images/btn_arrow_black.png) no-repeat;
        background-color: #FED03A !important;
        color: #100802 !important;
        background-position: 89% 45%;
        padding-right: 44px;
        text-transform: inherit;
        margin-left: 5px;
        width: 195px;
    }

        .btn-holder .payment-btn:disabled {
            background: #CBCBCB url(../images/btn_arrow_next_grey.png) no-repeat;
            background-position: 89% 45%;
            background-color: #CBCBCB !important;
            color: #888 !important;
        }

/************* Order - Contact info ********/
.form-group {
    width: 80%;
    margin: auto;
    text-align: center;
    max-width: 687px;
}

.mdl-textfield {
    display: block;
    margin: auto;
}

.form-vgap {
    height: 25px;
    clear: both;
}

.col {
    clear: both;
}

    .col .mdl-textfield {
        float: left;
        margin: 0 20px;
    }

.user-info {
    padding: 10px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: .8em;
    font-weight: 600;
}

    .user-info label {
        width: 33%;
        float: left;
        display: block;
    }

        .user-info label:nth-child(2) {
            text-align: center;
        }

        .user-info label:last-child {
            text-align: right;
        }

        .user-info label span {
            color: #013554 !important;
        }


/******* Order success page ***********/

.app-success.body-part {
    overflow-y: inherit;
    overflow-x: inherit;
}

.success-info {
    text-align: center;
}

    .success-info label {
        display: block;
        color: #77797A;
    }

        .success-info label p {
            margin-bottom: 0;
        }

        .success-info label span {
            color: #023450;
            font-weight: 500
        }

.ico-tick {
    background: #84B21B url(../images/payment_Successful.png) no-repeat;
    background-position: center;
    background-color: #84B21B;
    border-radius: 60px;
    padding: 60px 60px;
    margin: auto;
    margin-bottom: 10px;
    display: block;
    width: 0px;
}

.success-info .highlight {
    color: #023450;
    font-size: 1.6em;
    margin-bottom: 20px;
    font-weight: 600;
}

.success-info label.price-lbl {
    color: #023450;
    font-size: 3em;
    font-weight: 600;
    line-height: 50px;
    margin-bottom: 20px;
}

.success-info .btn-holder {
    margin: 20px;
}

    .success-info .btn-holder button:first-child {
        margin-right: 10px;
    }

.mdl-button--accent.mdl-button--accent.mdl-button--raised, .mdl-button--accent.mdl-button--accent.mdl-button--fab {
    background-color: #057CA4;
    color: #fff;
    border-radius: 4px;
    text-transform: capitalize;
    font-weight: 400;
}

    .mdl-button--accent.mdl-button--accent.mdl-button--raised:disabled, .mdl-button--accent.mdl-button--accent.mdl-button--fab:disabled {
        background-color: #CCC;
        color: #666;
        border-radius: 4px;
        text-transform: capitalize;
        font-weight: 400;
    }
/******** Responsive part *********/

@media only screen and (max-width: 1024px) {
    #header-part {
        position: inherit;
    }

    .app-view {
        width: 90%;
    }

    .app-img img {
        width: 100%;
    }
	.mdl-layout__header {
		display: block;
	}
}

@media only screen and (max-width: 850px) {

    .body-part {
        width: 96%;
    }

    .steps-info step label {
        font-size: 1.5em;
        padding: 10px 0;
        border-radius: 50px;
        width: 40px;
    }

    dot {
        margin-bottom: 35px;
    }

    .page-title h3 {
        width: 85%;
    }
}

@media only screen and (max-width: 500px) {
    .logo {
        background: url(../images/logo_small.png) no-repeat;
        background-position: left center;
    }

    dot {
        margin: 0 2px;
        margin-bottom: 10%;
    }

    .steps-info step {
        font-size: .8em;
    }

    .mdl-card {
        width: 100%;
    }

        .mdl-card:nth-child(even) {
            margin-left: 0;
        }

    .page-title h3 {
        width: 68%;
    }
}

.ico-fail {
    background: #84B21B url(../images/payment_Failed.png) no-repeat;
    background-position: center;
    background-color: #84B21B;
    border-radius: 60px;
    padding: 60px 60px;
    margin: auto;
    margin-bottom: 10px;
    display: block;
    width: 0px;
}