body{
}

h1,h2,h3,h4,h5,h6,p,span,input,b,label,select,a,button{
    font-family: 'Nunito', sans-serif;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

.btn-unum{
    padding: 7px 15px;
    font-size: 25px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}

.btn-unum:hover,.btn-unum:focus{
    text-decoration: none;
    outline: none;
}

.btn-unum.btn-unum-default{
    background: #ffffff;
    color: #097AAD;
}

.btn-unum.btn-unum-default:hover{
    background: #e1e8eb;
    color: #097AAD;
}

.btn-unum.btn-unum-primary{
    background: #097AAD;
    color: #ffffff;
}

.btn-unum.btn-unum-primary:hover{
    background: #378db4;
    color: #ffffff;
}

.header{
    width: 100%;
    background: #80bc30;
    position: relative;
    height: 130px;
}

.header .container{
    height: 100%;
}

.header:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: -1px;
    background: rgba(0,0,0,0.1);
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
}

.header .header-content{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.header .header-content img{
    width: 200px;
}

.header .header-content .menu-items-1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 40%;
    height: 100%;
}

.header .header-content .menu-items-1 a{
    color: #eeeeee;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
}

.header .header-content .menu-items-1 a:hover{
    color: #ffffff;
}

.header .header-content .menu-items-2{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.header .header-content .menu-items-2 a{
    font-size: 22px;
    font-weight: 700;
    padding: 5px 20px;
    cursor: pointer;
    background: #ffffff;
    color: #097AAD;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    margin-left: 10px;
}

.header .header-content .menu-items-2 a:hover{
    background: #e6e6e6;
}

.header .header-content .menu-items-2 a.comprar{
    background: #097AAD;
    color: #ffffff;
}

.header .header-content .menu-items-2 a.comprar:hover{
    background: #2a8ebd;
    color: #ffffff;
}

.modal{
    background: rgba(0,0,0,0.4);
}

.form-control.form-control-unum{
    padding: 0;
    border: none;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}

.unum-card-info-delete,.unum-card-info-delete:focus,.unum-card-info-delete:active{
    position: absolute;
    right: -40px;
    top: 50%;
    border: none;
    color: #999;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0;
    right: -50px;
    transform: translateY(-50%);
    transition: 0.5s;
    outline: none !important;
    font-size: 20px;
}

.form-control.form-control-unum:hover .unum-card-info-delete{
    right: 10px;
    z-index: 1000;
    opacity: 1;
}

.default-unum {
    background: #ffffff;
    border-radius: 4px;
    outline: none;
    width: 100%;
    height: 0px;
    transition: all .5s ease;
    font-size: 16px;
    color: #8B8B8B;
    margin-top: 5px;   
    overflow: auto;
}

.default-unum-active {
    height: 150px;
    padding: 15px 20px;
    border: 1px solid #72BEFB;    
}

.flex-item{
    display: flex;
    justify-content: space-between;
}

.child-flex{
    height: 100%;
    position: relative;
}

.length-item{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.left-item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.right-item{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.child-item{
    width: 100%;
    height: 50px;
    align-items: center;
    cursor: pointer;
    display: flex;
    position: relative;
    border-bottom: 1px solid #dbdbdb;
}

.child-text{
    font-size: 1.0rem;
    color: #72BEFB;
    margin-left: 5px;
}

.input-unum{
    background: #ffffff;
    border: 1px solid #72BEFB;
    border-radius: 4px;
    outline: none;
    width: 100%;
    font-size: 16px;
    color: #8B8B8B;
    padding: 15px 20px;
    margin-top: 5px;
}


.input-unum img{
    max-width: 100%;
    max-height: 100%;
}

.input-unum:hover,.input-unum:focus{
    outline: none;
}

.btn-adicionar{
    background: #ffffff;
    border: 1px solid #72BEFB;
    border-radius: 4px;
    outline: none;
    width: 100%;
    font-size: 16px;
    color: #8B8B8B;
    padding: 15px 20px;
    margin-top: 5px;
    cursor: pointer;
    text-align: left;
}

.btn-adicionar:hover{
    background: #f9f9f9;
    color: #72BEFB;
}

.btn-adicionar:hover,.btn-adicionar:focus{
    outline: none;
}

.page-comprar label{
    color: #1087FE;
    font-size: 20px;
    margin: 20px 0 0 0;
    font-weight: 700;
}

.page-comprar-content{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.page-comprar-content .page-comprar-content-left{
    width: 40%;
}

.page-comprar-content .page-comprar-content-right{
    width: 45%;
    display: flex;
    align-items: center;
}

.page-comprar-content .page-comprar-content-right img{
    width: 100%;
    margin-top: 50px;
}

.page-comprar p{
    margin: 0;
    font-size: 17px;
    color: #8B8B8B;
}

.page-comprar h2{
    margin: 0;
    font-size: 50px;
    color: #0FCF69;
}

.page-comprar h1{
    margin: 60px 0 10px 0;
    font-size: 30px;
    color: #CCCC;
}


.page-cartao h3{
    color: #80bc30;
    font-size: 25px;
    margin: 50px 0 5px 0;
    font-weight: 700;
}

.page-cartao label{
    color: #80bc30;
    font-size: 20px;
    margin: 20px 0 0 0;
    font-weight: 700;
}

.page-cartao-content{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.page-cartao-content .page-cartao-content-left{
    width: 40%;
}

.page-cartao-content .page-cartao-content-right{
    width: 45%;
    display: flex;
    align-items: center;
}

.page-cartao-content .page-cartao-content-right img{
    width: 100%;
    margin-top: 50px;
}

.page-cartao p{
    margin: 0;
    font-size: 17px;
    color: #8B8B8B;
}

.page-cartao h2{
    margin: 0;
    font-size: 50px;
    color: #0FCF69;
}


.btn-confirmar-compra{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 27px;
    padding: 14px 40px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-align: center;
    color: #ffffff;
    background: #0FCF69;
    margin-top: 40px;
}

.btn-confirmar-compra:hover{
    background: #4cc785;
}

.btn-voltar{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 27px;
    padding: 14px 40px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-align: center;
    color: #999999;
    background: #eeeeee;
    margin-top: 40px;
}

.btn-voltar:hover{
    background: #f9f9f9;
}




.footer{
    width: 100%;
    margin-top: 150px;
    position: relative;
    padding-bottom: 100px;
}

.footer img{
    width: 80%;
    margin-bottom: 15px;
}

.footer h4{
    font-size: 26px;
    margin: 20px 0 30px 0;
    color: #ffffff;
}

.footer p{
    margin: 0;
    color: #ffffff;
}

.footer-bg{
    width: 100%;
    height: 1100px;
    left: 0;
    bottom: 0;
    position: absolute;
    background-image: url(/app/content/img/bg-3.png);
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: -1;
}


.login{
    padding: 40px;
}

.login p{
    margin-top: 0px;
    font-size: 22px;
    color: #cccccc;
}

.login label{
    color: #1087FE;
    font-size: 20px;
    margin: 20px 0 0 0;
    font-weight: 700;
}

.login button{
    margin-right: 20px;
}







/* css novo template card */
.actual-card{
    justify-content: flex-end !important;
    padding-top: 3rem !important;
    align-items: flex-start !important;
}

.main-card-content{
    width: 320px;
    background-color: #2e2d2d;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 2px 5px 1.5px #dbdbdb;
}

.header-card-cotnent{
    width: 100%;
    height: 120px;
    min-width: 100px;
    background-color: #00afef;
    border-radius: 0px 0px 30px 30px;
    position: relative;
}

.body-content-card{
    width: 100%;
    height: 450px;
    background-color: #2e2d2d;
}

.image-contet-user {
    width: 135px;
    height: 135px;
    border-radius: 50%;
    position: absolute;
    bottom: -20%;
    left: 15px;
    transform: translate(0, 20%);
    overflow: hidden;
}

.relative-view{
    width: 135px;
    height: 135px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-edit{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    justify-content: center;
    z-index: 5;
    cursor: pointer;
    align-items: center;
    background-color: rgb(0,0,0,0.3)
}


.user-profile{
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-top: 0px !important;
}

.icon-edit{
    font-size: 20px;
    color: #ffffff;
}

.icon-header{
    color: #ffffff;
    font-size: 30px;
    position: absolute;
    top: 43%;
    right: 6%;
    cursor: pointer;
    transform: translate(-6%, -43%);
}

.icon-header-qr {
    color: #ffffff;
    font-size: 30px;
    position: absolute;
    top: 43%;
    right: 20%;
    cursor: pointer;
    transform: translate(-20%, -43%);
}

.icon-save-card {
    color: #ffffff;
    height: 30px;
    object-fit: contain;
    position: absolute;
    top: 43%;
    right: 35%;
    cursor: pointer;
    transform: translate(-35%, -43%);
}

.content-user-infos{
    width: 100%;
    display: flex;
    padding: 0px 20px 20px 20px;
    flex-direction: column;
}

.name-user{
    font-size: 1.2rem;
    color: #ffffff;
    font-family: 'Nunito', sans-serif;  
    font-weight: bold;
}


.content-right{
    width: 100%;
    text-align: right;
}

.unum-image{
    margin: 0px 20px 0px 0px !important;
    width: 70px !important;
    height: 60px;
    object-fit: contain;
}
    
.cargo-user{
    font-size: 1rem;
    color: #a1a1a1;
    font-family: 'Nunito', sans-serif;  
}

.icon-border{
    width: 60px;
    height: 60px;
    border-radius: 10px;
    /* background-color: #ffffff; */
    /* box-shadow: 0px 0px 2px 1px #dbdbdb; */
    display: flex;
    margin-bottom: 25px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.grid-child{
    width: 100%;
    display: flex;
    justify-content: center;
}

.flex-icons{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 33.3%);
    margin: 15px 0px 0px 0px;
}

/* fim css */

.input-circle {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: relative;
    display: flex;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--blue);
}

.span-label {
    font-family: 'Nunito';
    margin-left: 7px;
    font-size: 17px;
    color: #8B8B8B;
}

.flex-content {
    display: flex;
    margin-right: 40px;
    flex-direction: row;
}

.circle-dentro {
    width: 19px;
    height: 19px;
    margin: 0px -1px 1px 0px;
    border-radius: 50%;
    transition: all ease .5s;
    opacity: 0;
    background-color: var(--blue);
}

.circle-dentro-active {
    opacity: 1 !important;
} 
.sombra-text{
	font-weight: 500;
	text-shadow: 0 0 4px rgb(0 0 0 / 60%);
}


.flex-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.box-icon {
    cursor: pointer;
    width: 60px;
    margin-bottom: 10px;
    height: 60px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0px 0px 5px 1px #dbdbdb;
    display: flex;
    justify-content: center;
    align-items: center;
}

.iamge-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.box-icon-relative{ 
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px solid #378db4;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-content{
    width: 100%;
}

.text-message-errror{ 
    color: var(--blue);
    font-family: 'Nunito';
}

.foto-user-card{
    width: 100%;
    margin-top: 10px;
    height: 150px;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    display: flex;
    justify-content: center;
    transition: all .5s ease;
    align-items: center;
    border: 1px solid #72BEFB;
}

.foto-user-card:hover {
    box-shadow: 0px 0px 5px 1px #dbdbdb;
}

.input-type-file{
    width: 100%;
    position: absolute;
    z-index: 5;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

.icon-image{
    font-size: 60px;
    color: #cccccc;
}

.preview-image{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.image-preview{
    width: 50%;
    height: 90%;
    border-radius: 10px;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}



@media screen and (max-width: 1024px) {
    .footer-bg {
        background: none !important;
    }

    .footer h4{
        color: var(--blue);
        text-shadow: none !important;
    }

    .footer p {
        color: #000000 !important;
        text-shadow: none  !important;
    }

    .footer a{
        color: #000000 !important;
    }

    .footer a > i{
        color: var(--blue) !important;
    }
}

@media screen and (max-width: 975px) {

    .page-comprar-content .page-comprar-content-left{
        width: 50% !important;
    }

    .page-comprar-content .page-comprar-content-right{
        align-items: flex-start  !important;
    }
}


@media screen and (max-width: 765px) {
    
    .header .header-content .menu-items-1{ 
        flex-direction: column;
        justify-content: center;

    }
    
    .page-cartao-content{
        flex-direction: column-reverse !important;
    }

    .page-cartao-content .page-cartao-content-left {
        width: 100% !important;
    }

    .page-cartao-content .page-cartao-content-right {
        width: 100% !important ;
    }

    .actual-card {
        justify-content: center !important;
    }

    .footer > .container > .row{ 
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
    }
    .footer > .container > .row .col-3 {
        max-width: 100% !important;
        text-align: center;
    }
}

@media screen and (max-width: 500px) {
    .page-comprar-content {
        flex-direction: column-reverse !important;
    }

    .page-comprar-content .page-comprar-content-left {
        width:  100% !important;
    }

    .page-comprar-content .page-comprar-content-right{ 
        width: 100% !important;
    }

    .page-comprar-content .page-comprar-content-right img{ 
        width: 60%  !important;
        margin: 50px auto !important;
    }

    #center-button{ 
        text-align: center !important;
    }

    .mobile-card-flex {
        background-color: #2e2d2d !important;
        align-items: flex-start !important;
    }
    .mobile-card-main {
        width: 100%;
        box-shadow: none !important;
    }
}