/* ===== MOBILE (menores que 768px) ===== */
@media (max-width: 767px) {

    #u-result {
        font-size: 26px;
        background-color: #e1e1e1;
        padding: 20px;
        text-align: center;
        color: #555;
        font-weight: 700;
        border-radius: 5px;
        transition: all .5s ease;
        word-break: break-all;
    }

    /* Botões */
    .btn {
        background-color: #ff5757;
        color: white;
        border: none;
        padding: 10px 20px;
        margin: 5px;
        cursor: pointer;
        border-radius: 4px;
        transition: .3s;
    }

    .btn:hover {
        background-color: #a83232;
    }

    .btn-mini {
        background-color: #d6d6d6;
        color: #696969;
        border: none;
        padding: 5px 10px;
        margin: 5px;
        cursor: pointer;
        border-radius: 3px;
        font-size: 15px;
        transition: .3s;
    }

    .btn-mini:hover {
        background-color: #c0c0c0;
    }

    .btn-submit {
        background-color: #4089ED;
        color: #fff;
        padding: 20px 50px;
        font-size: 17px;
    }

    .btn-submit:hover {
        background-color: #2761b3;
    }

    /* Inputs */
    input[type="number"] {
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }

    input[type="number"]:focus {
        border-color: #c44343;
        outline: none;
    }

    /* Checkbox */
    label {
        color: #444;
        font-size: 14px;
    }

    /* Mensagem */
    #copy-message {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        background-color: #222;
        color: #ccc;
        padding: 15px;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    #copy-message.show {
        opacity: 1;
    }

    /* Efeito */
    .flash-success {
        background-color: #d4edda !important;
        color: #155724 !important;
    }

    .checkbox:checked,
    .radio:checked {
        border-color: #c44343;
        background-color: #c44343;
    }

    .checkbox,
    .radio {

        accent-color: #ff5757;
    }



    .checkbox-wrapper {
        margin-bottom: 5px;
    }

    .checkbox-wrapper>span {
        font-size: 15px;
    }

    .div-aling-right {
        display: flex;
        justify-content: flex-end;
    }

    .div-aling-center {
        display: flex;
        justify-content: center;
    }

    .text-label {
        color: #e26161;
        margin-bottom: 10px;
        margin-left: 15px;
        text-transform: uppercase;
        font-weight: 700;
    }

}

/* ===== TABLET (768px até 1023px) ===== */
@media (min-width: 768px) and (max-width: 1023px) {

    #u-result {
        font-size: 26px;
        background-color: #e1e1e1;
        padding: 20px;
        text-align: center;
        color: #555;
        font-weight: 700;
        border-radius: 5px;
        transition: all .5s ease;
        word-break: break-all;
    }

    /* Botões */
    .btn {
        background-color: #ff5757;
        color: white;
        border: none;
        padding: 10px 20px;
        margin: 5px;
        cursor: pointer;
        border-radius: 4px;
        transition: .3s;
    }

    .btn:hover {
        background-color: #a83232;
    }

    .btn-mini {
        background-color: #d6d6d6;
        color: #696969;
        border: none;
        padding: 5px 10px;
        margin: 5px;
        cursor: pointer;
        border-radius: 3px;
        font-size: 15px;
        transition: .3s;
    }

    .btn-mini:hover {
        background-color: #c0c0c0;
    }

    .btn-submit {
        background-color: #4089ED;
        color: #fff;
        padding: 20px 50px;
        font-size: 17px;
    }

    .btn-submit:hover {
        background-color: #2761b3;
    }

    /* Inputs */
    input[type="number"] {
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }

    input[type="number"]:focus {
        border-color: #c44343;
        outline: none;
    }

    /* Checkbox */
    label {
        color: #444;
        font-size: 14px;
    }

    /* Mensagem */
    #copy-message {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        background-color: #222;
        color: #ccc;
        padding: 15px;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    #copy-message.show {
        opacity: 1;
    }

    /* Efeito */
    .flash-success {
        background-color: #d4edda !important;
        color: #155724 !important;
    }

    .checkbox:checked,
    .radio:checked {
        border-color: #c44343;
        background-color: #c44343;
    }

    .checkbox,
    .radio {
        accent-color: #ff5757;
    }

    .checkbox-wrapper {
        margin-bottom: 5px;
    }

    .checkbox-wrapper>span {
        font-size: 15px;
    }

    .div-aling-right {
        display: flex;
        justify-content: flex-end;
    }

    .div-aling-center {
        display: flex;
        justify-content: center;
    }

    .text-label {
        color: #e26161;
        margin-bottom: 10px;
        margin-left: 15px;
        text-transform: uppercase;
        font-weight: 700;
    }

}

/* ===== DESKTOP (1024px ou mais) ===== */
@media (min-width: 1024px) {

    #u-result {
        font-size: 26px;
        background-color: #e1e1e1;
        padding: 20px;
        text-align: center;
        color: #555;
        font-weight: 700;
        border-radius: 5px;
        transition: all .5s ease;
        word-break: break-all;
    }

    /* Botões */
    .btn {
        background-color: #ff5757;
        color: white;
        border: none;
        padding: 10px 20px;
        margin: 5px;
        cursor: pointer;
        border-radius: 4px;
        transition: .3s;
    }

    .btn:hover {
        background-color: #a83232;
    }

    .btn-mini {
        background-color: #d6d6d6;
        color: #696969;
        border: none;
        padding: 5px 10px;
        margin: 5px;
        cursor: pointer;
        border-radius: 3px;
        font-size: 15px;
        transition: .3s;
    }

    .btn-mini:hover {
        background-color: #c0c0c0;
    }

    .btn-submit {
        background-color: #4089ED;
        color: #fff;
        padding: 20px 50px;
        font-size: 18px;
    }

    .btn-submit:hover {
        background-color: #2761b3;
    }

    /* Inputs */
    input[type="number"] {
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }

    input[type="number"]:focus {
        border-color: #c44343;
        outline: none;
    }

    /* Checkbox */
    label {
        color: #444;
        font-size: 14px;
    }

    /* Mensagem */
    #copy-message {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        background-color: #222;
        color: #ccc;
        padding: 15px;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    #copy-message.show {
        opacity: 1;
    }

    /* Efeito */
    .flash-success {
        background-color: #d4edda !important;
        color: #155724 !important;
    }

    .checkbox:checked,
    .radio:checked {
        border-color: #c44343;
        background-color: #c44343;
    }

    .checkbox,
    .radio {

        accent-color: #ff5757;

    }

    .checkbox-wrapper {
        margin-bottom: 5px;
        max-width: 250px;
    }

    .checkbox-wrapper>span {
        font-size: 15px;
    }

    .div-aling-right {
        display: flex;
        justify-content: flex-end;
    }

    .div-aling-center {
        display: flex;
        justify-content: center;
    }

    .text-label {
        color: #e26161;
        margin-bottom: 10px;
        margin-left: 15px;
        text-transform: uppercase;
        font-weight: 700;
    }

}