input[type=number] {
    -moz-appearance:textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#account, #checkout, #article_selection, #history, #basket, #basket_rel, #previous_op, #articles_data {
    background:#fff;
}

@keyframes colorchange {
    0% { background: yellow; }
    50% { background: #660066; }
    100% { background: yellow; }
}

/*
 * Top row
 */

.row.kpsul_top {
    padding:0 15px;
    color:#000;
}

.row.kpsul_top > div {
    margin-top:15px;
}

/* Account */

#account {
    color:black;
    height:120px;
}

#account[data-balance="ok"] #account_form input { background:#009011; color:#FFF;}
#account[data-balance="low"] #account_form input { background:#EC6400; color:#FFF; }
#account[data-balance="neg"] #account_form input { background:#C8102E; color:#FFF; }
#account[data-balance="frozen"] #account_form input { background:#000FBA; color:#FFF; }

#account_form {
    padding:0;
    height:100%;
}

#account_form input {
    width:100%;
    height:100%;

    padding:0;
    padding-bottom:10px;

    border:0;
    border-radius:0;

    background:#f3f3f3;

    font-family:'Roboto Mono';
    font-size:50px;
    font-weight:bold;

    text-align:center;
    text-transform:uppercase;
}

#account_data {
    height:100%;
}

#account_data .data_line {
    line-height:16px;

    font-family:'Roboto Mono';
    font-size:12px;
}

#account_data #account-balance {
    height:40px;
    line-height:40px;

    font-size:35px;
    font-weight:bold;
}

#account-name {
    font-weight:bold;
}

#account .buttons {
    position:absolute;
    bottom:0;
    right:0;
}

@media (min-width: 600px) {
    #account_form input { font-size:60px; }

    @media (min-width: 768px) {
        #account{ height:160px; }
        #account_form input { font-size: 70px; }
        #account_name { font-size:60px; }
        #account_data .data_line {
            font-size:14px;
            line-height:24px;
        }
        #account_data #account-balance {
            font-size:50px;
            line-height:60px;
            height:60px;
        }

        #account { margin-right:0; }
        #account_form input { font-size:85px; }

        @media (min-width: 992px) {
            #account_form input { font-size:100px; }
        }
    }
}

/* Checkout */

#checkout {
    padding:0;
    height:160px;
    font-family:'Roboto Mono';
}

#checkout_form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor:pointer;
    outline:none;
    border:0;

    width:100%;
    height:50px;
    padding:0 15px;

    background:rgba(200,16,46,0.9);
    color:#fff;

    font-weight:bold;
    font-size:18px;
}

#checkout_form select option {
    height:25px;
    padding:0 15px;
    line-height:25px;
    font-weight:normal;
    font-size:14px;
    background-color:rgba(255,255,255,0.1);
}

#checkout_data {
    padding:0 15px;
}

#checkout_data .buttons {
    position:absolute;
    bottom:0;
    right:0;
}

#addcost {
    position:absolute;
    bottom:0;
    left:0;

    height:32px;
    line-height:32px;
    padding:0 10px;

    background:#c8102e;
    color:#fff;

    font-weight:bold;

    animation: blink 1.5s steps(1) infinite;
}
@keyframes blink { 50% { visibility: hidden; } }

/*
 * Second part
 */

.row.kpsul_middle {
    margin:15px 0;
    font-family:'Roboto Mono';
    color:#000;
}

.row.kpsul_middle > div {
    padding:0;
    height:100%;
}

.row.kpsul_middle > div:first-child > div {
    margin-right:0;
}

.row.kpsul_middle > div+div {
    margin-top:15px;
}

@media (min-width:768px) {
    .row.kpsul_middle > div:first-child > div {
        margin-right:15px
    }

    .row.kpsul_middle > div {
        margin-top:0 !important;
    }
}

/* Special operations */

#special_operations {
    height:40px;
}

#special_operations button {
    height:100%;
    width:25%;

    float:left;

    background: rgba(200,16,46,0.9);
    color:#FFF;

    font-size:18px;
    font-weight:bold;

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#special_operations button:focus,
#special_operations button:hover {
    outline:none;
    background: rgba(200,16,46,1);
    color:#fff;
}

/* Article autocomplete */

#article_selection {
    height:40px;
    width:100%;
}

#article_selection input, #article_selection span {
    height:100%;
    float:left;
    border:0;
    border-radius:0;
    border-bottom: 1px solid rgba(200,16,46,0.9);
    font-size:16px;
    font-weight:bold;
}

#article_selection input:first-child {
    border-right: 1px dashed rgba(200,16,46,0.9);
}

#article_autocomplete {
    width:80%;
    padding-left:10px;
}

#article_number {
    width:10%;
    text-align:center;
}

#article_stock {
    width:10%;
    line-height:38px;
    text-align:center;
}

@media (min-width:1200px) {
    #article_autocomplete {
        width:84%
    }

    #article_number {
        width:8%;
    }

    #article_stock {
        width:8%;
    }
}

/* Article data */

#articles_data {
    overflow:auto;
    max-height:500px;
}

#articles_data table {
    width: 100%;
}

#articles_data table tr.article {
    height:25px;
    font-size:14px;
}

#articles_data table tr.article>td:first-child {
    padding-left:10px;
}

#articles_data table tr.category {
    height:35px;
    background-color:rgba(200,16,46,0.9);
    font-size:16px;
    color:#FFF;
    font-weight:bold;
}

#articles_data table tr.category>td:first-child {
    padding-left:20px;
}

#articles_data .article.low-stock {
    background:rgba(236,100,0,0.3);
}

#articles_data .article:hover {
    background:rgba(200,16,46,0.3);
    cursor:pointer;
}

/* Second part - Left - bottom */

.kpsul_middle_left_bottom {
    margin:15px 0 0;
}

.kpsul_middle_left_bottom > div {
    height:160px;
    padding:0;
}

#basket, #basket_rel, #previous_op {
    height:100%;
}

#basket_rel, #previous_op {
    border-top:1px solid #C8102E;
    padding-left: 3px;
}

#basket {
    overflow:auto;
}

@media (min-width:768px) {
    #basket {
        margin-right:7px;
    }
    #basket_rel {
        border-top:0;
        margin-left:7px;
        margin-right:7px;
    }
    #previous_op {
        border-top:0;
        margin-left:7px;
    }
}

#basket table {
    width:100%;
}

#basket table tr {
    height:25px;
    font-size:14px;
}

#basket tr .amount {
    width:70px;
    padding-right:15px;
    text-align:right;
}

#basket tr .number {
    width:50px;
    padding-right:15px;
    text-align:right;
}

#basket tr .lowstock {
    display:none; 
    padding-right:15px;
}

#basket tr.ui-selected, #basket tr.ui-selecting {
    background-color:rgba(200,16,46,0.6);
    color:#FFF;
}

/* History */

#previous_op .trigramme {
    width:100%;
    background-color:rgba(200,16,46,0.85);
    color:#FFF;
    font-weight:bold;
    padding:3px;
    margin-left: -3px;
    margin-bottom: 3px;
}

.kpsul_middle_right_col {
    overflow:auto;
}

.kpsul_middle_right_col #history .day {
    top: 0;
}