/* Scrollbar width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #4d4a69;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #6483c5;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #DD7510;
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    font-size: 12px;
    color: #0a0a0a;
}

::-moz-placeholder {
    /* Firefox 19+ */
    font-size: 12px;
    color: #0a0a0a;
}

:-ms-input-placeholder {
    /* IE 10+ */
    font-size: 12px;
    color: #0a0a0a;
}

:-moz-placeholder {
    /* Firefox 18- */
    font-size: 12px;
    color: #0a0a0a;
}

h3 {
    margin: 5px 0px 0px 14px
}

label {
    width: 87px;
    text-align: right;
    margin: 0 2px 0 0;
}

#calcu {
    position: relative;
    top: 20px;
    left: 20px;
    background-color: rgba(6, 27, 99, 0.26);
    width: 400px;
    height: auto;
    padding: 6px;
    border: solid black 1px;
    border-radius: 3px;
}


#hlp_row {
    display: inline-block;
    font-size: 20px;
    color: #cff0ce;
}

#calc_hlp {
    position: fixed;
    z-index: 0;
    top: 53px;
    left: 330px;
    display: inline-block;
    font-size: 35px;
    color: #18096e;
    font-weight: bold;
}

#calc_hlp:hover {
    color: #dd1710;
}

.calcu_info {
    position: fixed;
    z-index: 2;
    top: 53px;
    left: 25px;
    color: #00020e;
    background-color: #eff5ef;
    width: 379px;
    height: 75px;
    overflow-y: scroll;
    font-size: 12px;
    font-weight: 700;
    color: #191e31c6;
    margin: 0px 0px 0px 3px;
    padding: 2px;
    border: solid black 1px;
    border-radius: 3px;
    display: none;
}

.clb {
    color: #0e0335;
    font-weight: bold;
    font-style: italic;
}

#info_close {
    background: #353341;
    color: #cff0ce;
    font-weight: bold;
}

#info_close:hover {
    color: #dd1710;
    cursor: crosshair;
}

#display_container {
    display: table;
    width: 360px;
    padding: 4px;
    margin-top: 6px;
    border: solid rgb(221, 206, 183) 2px;
}

#before_tax {
    background-color: rgba(226, 230, 214, 0.966);
    width: 110px;
    padding: 2px;
    border: solid rgb(243, 234, 234) 1px;
    border-radius: 3px;
}

#tax_rate {
    background-color: rgba(226, 230, 214, 0.966);
    width: 65px;
    padding: 2px;
    border: solid rgb(243, 234, 234) 1px;
    border-radius: 3px;
}

#tax_amount {
    background-color: rgba(226, 230, 214, 0.966);
    width: 100px;
    padding: 2px;
    border: solid rgb(243, 234, 234) 1px;
    border-radius: 3px;
}

#after_tax {
    background-color: rgba(226, 230, 214, 0.966);
    width: 110px;
    padding: 2px;
    border: solid rgb(243, 234, 234) 1px;
    border-radius: 3px;
}

.clear {
    font-size: 12px;
    background: #221a47;
    color: rgb(236, 234, 243);
    border: solid rgb(236, 234, 243) 1px;
    border-radius: 10px;
}

@media screen and (max-width: 500px) {
    #calcu {
        top: 20px;
        left: 20px;
        width: 360px;
        padding: 6px;
    }

    #calc_hlp {
        top: 53px;
        left: 300px;
    }

    .calcu_info {
        top: 53px;
        left: 25px;
        width: 345px;
        font-size: 11px;
    }

    #info_close {
        background: #381a27;
        color: #cff0ce;
        font-weight: bold;
    }

    #info_close:hover {
        color: #dd1710;
        cursor: crosshair;
    }

    #before_tax {
        width: 100px;
        padding: 2px;
    }

    #tax_rate {
        width: 50px;
        padding: 2px;
    }

    #tax_amount {
        width: 85px;
        padding: 2px;
    }

    #after_tax {
        width: 100px;
        padding: 2px;
    }


    ::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        font-size: 10px;
    }

    ::-moz-placeholder {
        /* Firefox 19+ */
        font-size: 10px;
    }

    :-ms-input-placeholder {
        /* IE 10+ */
        font-size: 10px;
    }

    :-moz-placeholder {
        /* Firefox 18- */
        font-size: 10px;
    }
}

/* iPad Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    ::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        font-size: 12px;
        color: #0a0a0a;
    }

    ::-moz-placeholder {
        /* Firefox 19+ */
        font-size: 12px;
        color: #0a0a0a;
    }

    :-ms-input-placeholder {
        /* IE 10+ */
        font-size: 12px;
        color: #0a0a0a;
    }

    :-moz-placeholder {
        /* Firefox 18- */
        font-size: 12px;
        color: #0a0a0a;
    }

    h3 {
        margin: 5px 0px 0px 14px
    }

    #calcu {
        top: 20px;
        left: 20px;
        width: 400px;
        padding: 6px;
    }

    .calcu_info {
        left: 28px;
        font-size: 12px;
    }

    #display_container {
        width: 360px;
        padding: 4px;
        margin-top: 6px;
    }

    #before_tax {
        width: 100px;
        padding: 2px;
    }

    #tax_rate {
        width: 50px;
        padding: 2px;
    }

    #tax_amount {
        width: 100px;
        padding: 2px;
    }

    #after_tax {
        width: 100px;
        padding: 2px;
    }

    label {
        width: 87px;
        text-align: right;
        margin: 0px 2px 0px 0px;
    }
}