.btn {
    --btn__color: #555555;
    --btn__background: #A8A1AA;
    --btn__border: 1px solid #C1BCC2;
    --btn__box-shadow: 
        2px 2px 1px #B4AFB6 inset, 
        -2px -2px 1px #B4AFB6 inset, 
        0 2px 2px -1px rgba(0, 0, 0, 0.50);
    --btn__text-shadow: 1px 1px rgba(255, 255, 255, 0.40);
    --btnHover__color: #555555;
    --btnHover__background: #CCC;
    --btnHover__border: 1px solid #B3B3B3;
    --btnHover__box-shadow: 
        2px 2px 1px #B4AFB6 inset, 
        -2px -2px 1px #B4AFB6 inset, 
        0 3.5px 2px -2px rgba(0, 0, 0, 0.40);
    --btnFocus__background: #D6D3D7;
    --btnFocus__box-shadow: 
        0 2px 1px #C1BDC2 inset, 
        2px 0 1px #C1BDC2 inset, 
        -2px 0 1px #C1BDC2 inset;

    /* botao animado "realce de cores" */
    --btnEnhance__color: #EFF1F3;
    --btnEnhance__background_1: #B6AE1F;
    --btnEnhance__background_2: #8F3B3F;
    --btnEnhance__background_3: #374457;

    --btnFlash__color: #EFF1F3;
    --btnFlash__background: rgba(182, 174, 31, 0.80);
    --btnFlash__border: 1px solid rgba(182, 174, 31, 0.80);

    --btnProgress__color: #EFF1F3;
    --btnProgress__background: #008080;
    --btnProgress__border: none;
    --btnProgress__background_1: #008080;
    --btnProgress__background_2: #009999;
    --btnProgress__box-shadow: none;
    --btnProgress__text-shadow: none;
}
:root {
    --btnMoon__color: #007580;
    --btnMoon__background: #EEEEEE;
    --btnMoonHover__color: #007580;
    /* moon::before */
    --btnMoon__border-style: solid;
    --btnMoon__border-color: #007580;
    --btnMoon__box-shadow: 1px 1px rgba(255, 255, 255, 0.05) inset;

    --inputFalse__color: inherit;
    --inputFalseLinkDefault__color: #007580;
    --inputFalseLinkDefaultHover__color: #0099A6;
    --inputFalseLinkDelete__color: #AD0707;
    --inputFalseLinkDeleteHover__color: #C40000;
    --inputFalseLink__text-decoration: underline;
}
.btn, a.btn {
    text-align: center;
    text-decoration: none;
    padding: 6px 12px;
    margin: 0 0;
    font-size: 1rem;
    transition: background-color .3s;
    border-radius: 3px;
    font-family: var(--fontPrime);
    color: var(--btn__color);
    background-color: var(--btn__background);
    border: var(--btn__border);
    box-shadow: var(--btn__box-shadow);
    text-shadow: var(--btn__text-shadow);
    user-select: none;
    cursor: pointer;
}
.btn:hover, .btn:focus, .btn:active, 
a.btn:hover, a.btn:focus, a.btn:active, 
.btn a:hover, .btn a:focus, .btn a:active {
    text-decoration: none !important;
    transition: background-color .3s;
    color: var(--btnHover__color);
    background-color: var(--btnHover__background);
    border: var(--btnHover__border);
    box-shadow: var(--btnHover__box-shadow);
}
.btn:focus, .btn:active {
    background-color: var(--btnFocus__background);
    box-shadow: var(--btnFocus__box-shadow);
}
.btn.xsm {
    padding: 3px 9px 3px 9px;
    font-size: 0.76rem;
}
.btn.sm {
    padding: 5px 10px 5px 10px;
    font-size: 0.85rem;
}
.btn.md {
    padding: 7px 12px;
    font-size: 1.1rem;
}
.btn.lg {
    padding: 8px 13px 8px 13px;
    font-size: 1.22rem;
}
.btn.xlg {
    padding: 9px 14px 9px 14px;
    font-size: 1.32rem;
}

.btn.center {
    display: block;
    margin: auto;
}
.btn.right {
    display: block;
    margin-left: auto;
    margin-right: 0;
}
a.btn.center, a.btn.right, .btn.center a, .btn.right a {
    display: table;
}

/** botoes de alerta */
.btn.success, .btn.warning, .btn.error,
.btn.success:hover, .btn.warning:hover, .btn.error:hover,
.btn.success:focus, .btn.warning:focus, .btn.error:focus,
.btn.success:active, .btn.warning:active, .btn.error:active {
    color: #FFFFFF;
    text-shadow: none;
    box-shadow: none;
}
.btn.success {
    background-color: #007580;
    background-image: linear-gradient(to bottom, #01EBFF, #007580, #007580, #01EBFF);
    border: 2px solid #01EBFF;
    border-image: linear-gradient(to bottom, #007580, #01EBFF, #01EBFF, #007580);
    border-image-slice: 2;
}
.btn.success:hover, .btn.success:focus, .btn.success:active {
    background-image: linear-gradient(to left, #01EBFF, #007580, #007580, #01EBFF);
    border-image: linear-gradient(to left, #007580, #01EBFF, #01EBFF, #007580);
    border-image-slice: 2;
}

.btn.warning {
    background-color: #7E7300;
    background-image: linear-gradient(to bottom, #E4D100, #7E7300, #7E7300, #E4D100);
    border: 2px solid #C1B700;
    border-image: linear-gradient(to bottom, #7E7300, #E4D100, #E4D100, #7E7300);
    border-image-slice: 2;
}
.btn.warning:hover, .btn.warning:focus, .btn.warning:active {
    background-image: linear-gradient(to left, #E4D100, #7E7300, #7E7300, #E4D100);
    border-image: linear-gradient(to left, #7E7300, #E4D100, #E4D100, #7E7300);
    border-image-slice: 2;
}

.btn.error {
    background-color: #800000;
    background-image: linear-gradient(to bottom, #FF0000, #800000, #800000, #FF0000);
    border: 2px solid #DE0C02;
    border-image: linear-gradient(to bottom, #800000, #FF0000, #FF0000, #800000);
    border-image-slice: 2;
}
.btn.error:hover, .btn.error:focus, .btn.error:active {
    background-image: linear-gradient(to left, #FF0000, #800000, #800000, #FF0000);
    border-image: linear-gradient(to left, #800000, #FF0000, #FF0000, #800000);
    border-image-slice: 2;
}

/** botoes alert outline */
.btn.outline {
    background-color: transparent;
    background-image: none;
}
.btn.outline.success, .btn.outline.warning, .btn.outline.error {
    border-width: 2px;
    transition: .5s;
}
.btn.outline.success {
    color: #01EBFF;
}
.btn.outline.warning {
    color: #E4D100;
}
.btn.outline.error {
    background: radial-gradient(ellipse at top, #FF0000, transparent),
        radial-gradient(ellipse at bottom, #800000, #C40000, transparent);
    color: transparent;
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparente;
    background-clip: text;
}
.btn.outline.success:hover, .btn.outline.warning:hover, .btn.outline.error:hover,
.btn.outline.success:focus, .btn.outline.warning:focus, .btn.outline.error:focus,
.btn.outline.success:active, .btn.outline.warning:active, .btn.outline.error:active {
    color: #FFFFFF;
    transition: .35s;
}

/** botao animado "realce de cores" */
.btn.enhance {
    color: var(--btnEnhance__color);
    border: 1px solid transparent;
    background-color: transparent;
    box-shadow: none;
    text-shadow: none;
    animation: enhance 1.6s ease infinite;
}
.btn.enhance:hover {
    animation: enhance .4s ease infinite;
}
@keyframes enhance {
    10% { background-color: var(--btnEnhance__background_1); }
    55% { background-color: var(--btnEnhance__background_2); }
    100% { background-color: var(--btnEnhance__background_3); }
}

/** botoes com "border-flash" borda animada */
.btn.flash {
    position: relative;
    color: var(--btnFlash__color);
    background-color: var(--btnFlash__background);
    border: var(--btnFlash__border);
    box-shadow: none;
    text-shadow: none;
}
.btn.flash::before, .btn.flash.dual::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
    border-radius: 2px;
    border: var(--btnFlash__border);
}
.btn.flash::before {
    animation: firstborder 1.1s infinite;
}
.btn.flash.dual::after {
    animation: secondborder 1.1s infinite;
}
@keyframes firstborder {
    100% {
        inset: -12px;
        opacity: 0;
    }
}
@keyframes secondborder {
    100% {
        inset: -22px;
        opacity: 0;
    }
}

/** botao progresso (em foco) */
.btn.progress {
    color: var(--btnProgress__color);
    border: var(--btnProgress__border);
    background-color: var(--btnProgress__background);
    box-shadow: var(--btnProgress__box-shadow);
    text-shadow: var(--btnProgress__text-shadow);
}
.btn.progress:focus, .btn.progress:active, .btn.progress.focus {
    box-shadow: none;
    background: repeating-linear-gradient(
        45deg,
        var(--btnProgress__background_1) 0,
        var(--btnProgress__background_1) 10px,
        var(--btnProgress__background_2) 10px,
        var(--btnProgress__background_2) 20px
    );
    background-size: 400% 400%;
    animation: progress 7s linear infinite;
}
@keyframes progress {
    0% { background-position: 100% }
    100% { background-position: 0 }
}

/** Botões com aparencia de texto comum e link */
.input_false {
    display: inline-block !important;
    color: var(--inputFalse__color);
    font-size: 1.04rem;
    margin: 2px 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 !important;
    background-color: transparent !important;
}
.input_false.link {
    color: var(--inputFalseLinkDefault__color);
}
.input_false.link:hover, .input_false.link:focus, .input_false.link:active {
    color: var(--inputFalseLinkDefaultHover__color);
    text-decoration: var(--inputFalseLink__text-decoration);
}
.input_false.link.delete {
    color: var(--inputFalseLinkDelete__color);
}
.input_false.link.delete:hover, .input_false.link.delete:focus, .input_false.link.delete:active {
    color: var(--inputFalseLinkDeleteHover__color);
    text-decoration: var(--inputFalseLink__text-decoration);
}

/** botoes: delete, cancel e danger. ´diferente dos botoes de alertas´ */
.btn_cancel, .btn_delete, .btn_danger {
    display: inline-block;
    padding: 20px 12px;
    color: #D1BFE0;
    background-color: #632929;
    border: none;
    border-radius: 2px;
    font-size: 1.11rem;
    font-family: var(--fontPrime);
    letter-spacing: 0.45px;
    line-height: 0.1;
    text-shadow: none;
    box-shadow: none;
}
.btn_cancel.upperstr, .btn_delete.upperstr, .btn_danger.upperstr {
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: bold;
}
.btn_cancel:hover, .btn_delete:hover, .btn_danger:hover, 
.btn_cancel:focus, .btn_delete:focus, .btn_danger:focus,
.btn_cancel:active, .btn_delete:active, .btn_danger:active {
    color: #D1BFE0;
    background-color: #7A1E1E;
}
.btn_cancel a, .btn_delete a, .btn_danger a,
.btn_cancel a:hover, .btn_delete a:hover, .btn_danger a:hover,
.btn_cancel a:focus, .btn_delete a:focus, .btn_danger a:focus,
.btn_cancel a:active, .btn_delete a:active, .btn_danger a:active,
a.btn_cancel , a.btn_delete, a.btn_danger,
a.btn_cancel:hover, a.btn_delete:hover, a.btn_danger:hover,
a.btn_cancel:focus, a.btn_delete:focus, a.btn_danger:focus,
a.btn_cancel:active, a.btn_delete:active, a.btn_danger:active {
    color: #D1BFE0;
    text-decoration: none;
}

/** moon */
.moon {
    position: relative;
    display: inline-flex;
    align-items:center;
    height: 40px;
    font-family: var(--fontPrime);
    background-color: transparent;
    border: none;
    margin: 2px 0;
    padding: 0 0;
    cursor: default;
}
.moon span, .moon a {
    position: relative;
    display: inline-block;
    left: 14px;
    font-size: 1.05rem;
    color: var(--btnMoon__color);
    background-color: var(--background);
    border-radius: 8px;
    z-index: 56;
    text-decoration: none;
}
.moon span:hover, .moon a:hover, .moon span:focus, .moon a:focus, .moon span:active, .moon a:active {
    text-decoration: none;
    color: var(--btnMoonHover__color);
}
.moon::before {
    position: absolute;
    display: block;
    content: '';
    top: 0;
    left: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border-width: 2px;
    border-style: var(--btnMoon__border-style);
    border-color: var(--btnMoon__border-color);
    box-shadow: var(--btnMoon__box-shadow);
    z-index: 55;
}
.moon *, .moon *:hover {
    text-decoration: none;
}
label.moon span { 
    cursor: default; 
}
label.moon a, button.moon a, button.moon span { 
    cursor: pointer; 
}
.moon.cur_pointer, label.moon.cur_pointer span {
    cursor: pointer;
}
.moon.new span, .moon.new a {
    background-color: transparent;
}
.moon.new::before {
    border-top-width: 2px;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 3px;
    border-style: groove;
    transform: rotate(338deg);
}
.moon.wane::before {
    transform: scale(1);
}
.moon.new.wane::before { 
    transform: scale(1) rotate(338deg) 
}
.moon.wane:hover::before { 
    transform: scale(0) 
}
.moon.new.wane:hover::before { 
    transform: scale(0) rotate(338deg) 
}
.moon.wane:hover a, .moon.wane:hover span {
    left: 0;
}
.moon.crescent a, .moon.crescent span {
    left: 0;
}
.moon.crescent:hover a, .moon.crescent:hover span {
    left: 14px;
}
.moon.crescent::before {
    transform: scale(0);
}
.moon.new.crescent::before {
    transform: scale(0) rotate(338deg);
}
.moon.crescent:hover::before {
    transform: scale(1);
}
.moon.new.crescent:hover::before {
    transform: scale(1) rotate(338deg);
}
.moon a, .moon span, .moon:hover a, .moon:hover span, .moon::before, .moon:hover::before {
    transition: all 0.8s ease-in-out;
}
.moon.sm {
    height: 30px;
}
.moon.sm span, .moon.sm a {
    font-size: 0.88rem;
}
.moon.crescent.sm:hover a, .moon.crescent.sm:hover span {
    left: 10px;
}
.moon.sm::before {
    width: 28px;
    height: 28px;
}
.moon.lg {
    height: 49px;
}
.moon.lg span, .moon.lg a {
    font-size: 1.18rem;
}
.moon.crescent.lg:hover a, .moon.crescent.lg:hover span {
    left: 18px;
}
.moon.lg::before {
    width: 47px;
    height: 47px;
    border-width: 3px;
}
.moon.new.lg::before {
    border-top-width: 3px;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 4px;
}
/**
 * .moon > element = funciona para elemento child "a" e "span"
 * .moon .wane = efeito hover em que a lua desaparece  ( 1 - 0 )
 * .moon .crescent = efeito hover em que a lua aparece ( 0 - 1 )
 */