body{
    background-color: #A8A8A8;
    font-family: 'Roboto', sans-serif;
}

.container{
    /*border:1px solid white;*/
    width: 85%;
    height: 600px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
}
.backbox{
    background-color: #404040;
    width: 100%;
    height: 80%;
    position: absolute;
    transform: translate(0,-50%);
    top:50%;
    display: inline-flex;
}

.frontbox{
    background-color: white;
    border-radius: 20px;
    height: 100%;
    width: 50%;
    z-index: 10;
    position: absolute;
    right:0;
    margin-right: 3%;
    margin-left: 3%;
    transition: right .8s ease-in-out;
}

.moving{
    right:45%;
}

.loginMsg, .signupMsg{
    width: 50%;
    height: 100%;
    font-size: 15px;
    box-sizing: border-box;
}

.loginMsg .title,
.signupMsg .title{
    font-weight: 300;
    font-size: 23px;
}

.loginMsg p,
.signupMsg p {
    font-weight: 100;
}

.textcontent{
    color:white;
    margin-top:65px;
    margin-left: 12%;
}

.loginMsg button,
.signupMsg button {
    background-color: #404040;
    border: 2px solid white;
    border-radius: 10px;
    color:white;
    font-size: 12px;
    box-sizing: content-box;
    font-weight: 300;
    padding:10px;
    margin-top: 20px;
}

/* front box content*/
.login, .signup{
    padding: 20px;
    text-align: center;
}

.update{
    padding: 20px;
    text-align: left;
}

.moda-confirm h2,
.login h2,
.signup h2,
.update h2{
    color: #E98526;
    font-size:22px;
}

.inputbox{
    margin-top:30px;
}
.moda-confirm input,
.login input,
.signup input,
.update input{
    display: block;
    width: 100%;
    height: 40px;
    background-color: #f2f2f2;
    border: none;
    margin-bottom:20px;
    font-size: 12px;
}

/*.login button,*/
/*.signup button{*/
/*    background-color: #E98526;*/
/*    border: none;*/
/*    color:white;*/
/*    font-size: 12px;*/
/*    font-weight: 300;*/
/*    box-sizing: content-box;*/
/*    padding:10px;*/
/*    border-radius: 10px;*/
/*    width: 60px;*/
/*    position: absolute;*/
/*    right:30px;*/
/*    bottom: 30px;*/
/*    cursor: pointer;*/
/*}*/

/* Fade In & Out*/
.moda-confirm p,
.login p {
    cursor: pointer;
    color:#404040;
    font-size:15px;
}

.loginMsg, .signupMsg{
    /*opacity: 1;*/
    transition: opacity .8s ease-in-out;
}

.visibility{
    opacity: 0;
}

.hide{
    display: none;
}


.action-btn {
    background-color: #FF7F00;
    border: none;
    text-transform: uppercase;
    padding: 0.5em 1.25em;
    right:30px;
    bottom: 30px;
    color: white;
    border-radius: 0.5em;
    transition: 0.3s;
    cursor: pointer;
    position: absolute;
    display: block;
}

.action-btn:hover {
    background-color: #ff6600;
}

.action-btn:focus {
    outline: 0.05em dashed #ff6600;
    outline-offset: 0.05em;
}

.action-btn::after {
    content: '';
    display: block;
    width: 1.2em;
    height: 1.2em;
    position: absolute;
    left: calc(50% - 0.75em);
    top: calc(50% - 0.75em);
    border: 0.15em solid transparent;
    border-right-color: white;
    border-radius: 50%;
    animation: button-anim 0.7s linear infinite;
    opacity: 0;
}

@keyframes button-anim {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

.action-btn.loading {
    color: transparent;
}

.action-btn.loading::after {
    opacity: 1;
}

.minhaModal {
    width: 300px !important;
    text-align: center !important;
}
/* em values are used to adjust button values such as padding, radius etc. based on font-size */


@import url(https://fonts.googleapis.com/css?family=Lobster);

@import url(https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css);

.alert .inner {
    display: block;
    padding: 6px;
    margin: 6px;
    border-radius: 3px;
    border: 1px solid rgb(180,180,180);
    background-color: rgb(212,212,212);
}

.alert .close {
    float: right;
    margin: 3px 12px 0px 0px;
    cursor: pointer;
}

.alert .inner,.alert .close {
    color: rgb(88,88,88);
}

.alert input {
    display: none;
}

.alert input:checked ~ * {
    animation-name: dismiss,hide;
    animation-duration: 300ms;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-delay: 0s,100ms;
}

.alert.error .inner {
    border: 1px solid rgb(238,211,215);
    background-color: rgb(242,222,222);
}

.alert.error .inner,.alert.error .close {
    color: rgb(185,74,72);
}

.alert.success .inner {
    border: 1px solid rgb(214,233,198);
    background-color: rgb(223,240,216);
}

.alert.success .inner,.alert.success .close {
    color: rgb(70,136,71);
}

.alert.info .inner {
    border: 1px solid rgb(188,232,241);
    background-color: rgb(217,237,247);
}

.alert.info .inner,.alert.info .close {
    color: rgb(58,135,173);
}

.alert.warning .inner {
    border: 1px solid rgb(251,238,213);
    background-color: rgb(252,248,227);
}

.alert.warning .inner,.alert.warning .close {
    color: rgb(192,152,83);
}

@keyframes dismiss {
    0% {
        opacity: 1;
    }
    90%, 100% {
        opacity: 0;
        font-size: 0.1px;
        transform: scale(0);
    }
}

@keyframes hide {
    100% {
        height: 0px;
        width: 0px;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
        border: 0px;
    }
}


.input-container {
    margin: 20px 0;
}
.hidden {
    display: none;
}


/*RADIO*/
/* body */
body {
    width: 100%;
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    margin: 0;
    padding: 0;

    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}


/* section */
section {
    /*width: 50%;*/
    min-height: inherit;
    display: flex;
    justify-content: center;
    /*flex-direction: column;*/
    position: relative;
}

section::before,
section::after {
    content: "";
    display: block;

    border-radius: 100%;

    position: absolute;
}

.light {
    --primary: hsl(250, 100%, 44%);
    --other: hsl(0, 0%, 14%);
}
/* label */
.label_radio {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    margin: 12px 12px;
    cursor: pointer;
    position: relative;
}


/* input */
.input_radio {
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}


/* .design */
.design {
    width: 16px;
    height: 16px;

    border: 1px solid var(--other);
    border-radius: 100%;
    margin-right: 16px;

    position: relative;
}

.design::before,
.design::after {
    content: "";
    display: block;

    width: inherit;
    height: inherit;

    border-radius: inherit;

    position: absolute;
    transform: scale(0);
    transform-origin: center center;
}

.design:before {
    background: var(--other);
    opacity: 0;
    transition: .3s;
}

.design::after {
    background: var(--primary);
    opacity: .4;
    transition: .6s;
}


/* .text */
.text {
    color: var(--other);
    font-weight: bold;
    text-align: center;
}


/* checked state */
.input_radio:checked+.design::before {
    opacity: 1;
    transform: scale(.6);
}


/* other states */
.input_radio:hover+.design,
.input_radio:focus+.design {
    border: 1px solid var(--primary);
}

.input_radio:hover+.design:before,
.input_radio:focus+.design:before {
    background: var(--primary);
}

.input_radio:hover~.text {
    color: var(--primary);
}

.input_radio:focus+.design::after,
.input_radio:active+.design::after {
    opacity: .1;
    transform: scale(2.6);
}

.abs-site-link {
    position: fixed;
    bottom: 20px;
    left: 20px;
    color: hsla(0, 0%, 0%, .6);
    background: hsla(0, 0%, 98%, .6);
    font-size: 16px;
}

.buttao_column {
    border: 1px solid #000000; /* Espessura, estilo e cor da borda */
    padding: 20px; /* Espaçamento interno */
    border-radius: 3px; /* Arredondamento dos cantos */
    display: flex;
    flex-direction: column;
}
.quadro{
    border: 1px solid #000000; /* Espessura, estilo e cor da borda */
    padding: 20px; /* Espaçamento interno */
    border-radius: 3px; /* Arredondamento dos cantos */
}

/*ENVIAR*/
.action-btn-modal{
    background-color: #219a00;
    border: none;
    /*text-transform: uppercase;*/
    padding: 0.7em 2em;
    right:30px;
    bottom: 30px;
    color: white;
    border-radius: 0.3em;
    transition: 0.3s;
    cursor: pointer;
}

.action-btn-modal:disabled,
.action-btn-modal[disabled]{
    background-color: #cccccc;
    color: #666666;
}


/*CANCELAR*/
.action-btn-modal-cancel{
    background-color: #d30303;
    border: none;
    /*text-transform: uppercase;*/
    padding: 0.7em 2em;
    right:30px;
    bottom: 30px;
    color: white;
    border-radius: 0.3em;
    transition: 0.3s;
    cursor: pointer;
}