.cp-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    text-align: center;
    font-family: Arial, sans-serif;
}

.cp-operation {
    margin-bottom: 80px;
}

/* TABLE */

.cp-table {
    margin: auto !important;
    border-collapse: separate !important;
    border-spacing: 12px 10px !important;
}

.cp-table td {
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    width: auto !important;
}

/* LABELS */

.cp-label {
    font-size: 18px !important;
    font-weight: bold !important;
    padding-bottom: 8px !important;
}

/* CASES NOMBRES */

.cp-box {

    width: 80px !important;
    height: 80px !important;

    min-width: 80px !important;
    max-width: 80px !important;

    min-height: 80px !important;
    max-height: 80px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    text-align: center !important;

    font-size: 54px !important;
    font-weight: bold !important;
    line-height: 1 !important;

    background: #ffffff !important;

    border-radius: 0 !important;
}

/* CASES RESULTAT */

.cp-answer {

    width: 80px !important;
    height: 80px !important;

    min-width: 80px !important;
    max-width: 80px !important;

    min-height: 80px !important;
    max-height: 80px !important;

    padding: 0 !important;
    margin: 0 auto !important;

    text-align: center !important;

    font-size: 54px !important;
    font-weight: bold !important;
    line-height: 1 !important;

    background: #ffffff !important;

    box-sizing: border-box !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    outline: none !important;
}

/* RETENUES */

.cp-carry {

    width: 52px !important;
    height: 52px !important;

    min-width: 52px !important;
    max-width: 52px !important;

    min-height: 52px !important;
    max-height: 52px !important;

    border-radius: 50% !important;

    text-align: center !important;

    font-size: 24px !important;
    font-weight: bold !important;

    background: white !important;

    padding: 0 !important;
    margin: auto !important;

    box-sizing: border-box !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    outline: none !important;
}

/* COULEURS */

.unit {
    border: 4px solid #ff0000 !important;
    color: #ff0000 !important;
}

.ten {
    border: 4px solid #0057ff !important;
    color: #0057ff !important;
}

.hundred {
    border: 4px solid #f0c400 !important;
    color: #f0c400 !important;
}

.thousand {
    border: 4px solid #00a000 !important;
    color: #00a000 !important;
}

.ten-thousand {
    border: 4px solid purple !important;
    color: purple !important;
}

.hundred-thousand {
    border: 4px solid orange !important;
    color: orange !important;
}

.million {
    border: 4px solid teal !important;
    color: teal !important;
}

.ten-million {
    border: 4px solid brown !important;
    color: brown !important;
}

.hundred-million {
    border: 4px solid pink !important;
    color: pink !important;
}

.billion {
    border: 4px solid black !important;
    color: black !important;
}

/* SYMBOLE */

.cp-symbol {

    width: 70px !important;

    font-size: 64px !important;
    font-weight: bold !important;

    text-align: center !important;
}

/* TRAIT */

.cp-line {

    width: 100% !important;

    border-bottom: 5px solid black !important;

    margin-top: 5px !important;
}

/* BOUTON */

#cp-correct {

    margin-top: 30px !important;

    padding: 16px 36px !important;

    background: green !important;
    color: white !important;

    border: none !important;
    border-radius: 10px !important;

    font-size: 30px !important;
    font-weight: bold !important;

    cursor: pointer !important;
}

/* RESULTATS */

#cp-results {

    margin-top: 25px !important;

    font-size: 24px !important;
    font-weight: bold !important;
}

/* SEPARATEUR */

.cp-separator {

    border: none !important;

    border-top: 2px solid #d9d9d9 !important;

    margin: 70px 0 !important;
}