*{margin:0; padding:0; font-family: "Inter", sans-serif; box-sizing: border-box; color:#0F1729;}
.r-modal{position:fixed; width:100%; height:100%; top:0; left:0; background-color: rgba(252, 251, 251, 0.9);}
.flex{display: flex!important; }
.flex-row{flex-direction: row;}
.flex-center{justify-content: center;}
.flex-align-center{align-items: center;}
.flex-end{justify-content: flex-end;}
.flex-center-all{align-items: center; justify-content: center;}
.flex-between{justify-content: space-between; gap: 10px}
.flex-around{justify-content: space-around; gap: 10px}
.flex-between > div{flex-grow: 1;}
.flex-center-row{align-items: center; flex-direction: row;}
.flex-center-row span{margin-top: 10px; margin-left: 7px;}
.flex-center-row input[type=radio]{width: 20px;}
.border{border:1px solid}
.gap-5{gap:5px}
.b-1{width: 10%;}
.b-2{width: 20%;}
.b-3{width: 30%;}
.b-4{width: 40%;}
.b-5{width: 50%;}
.b-6{width: 60%;}
.b-7{width: 70%;}
.b-8{width: 80%;}
.b-9{width: 90%;}
.b-10{width: 100%;}
.b-1, .b-2, .b-3, .b-4, .b-5, .b-6, .b-7, .b-8, .b-9, .b-10{padding: 5px; float: left;}
.lbl, .b-full{width: 100%; float: left;}

/**
container
**/
.container{width: 100%; height: 100vh; display: flex; flex-direction: row; margin:0; padding:0;}

.envio-header{width: 100%;}
.envio-header img{width: 35%; float: left;}

/**
tipo envio
**/
.tipo-envio{width: 100%; display: inline-flex; flex-direction: row; justify-content: center; gap:30px; margin: 20px 0; }
.tipo-envio-gestor{width: 100%; display: inline-flex; flex-direction: row; justify-content: center; gap:30px; margin: 20px 0; }
.tipo-envio-gestor .tm{cursor: pointer; user-select: none;}
.tm{width: 80%; padding: 10px; border-radius: 05px; border: 1px solid #EEEFF5; background-color: #ffffff; display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 1;}
.tm img{width: 70px;flex-shrink: 1;}
.tm-selected{background-color: #3C83F6;}
.checked{position: absolute; top: 10px; right: 10px; background-color: #26c96c; width: 30px; height: 30px; border-radius: calc(100%/2); display: flex; align-items: center; justify-content: center;}

/**
menu esquerda
**/
.m-left{width: 240px; background-color:#0F1729; padding:10px; margin:0; display: flex; flex-direction: column;}
.m-head{width: 100%; height: 60px;  padding: 05px 0; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #182543;}
.m-head img{width: 70%; margin:05px 15%; padding:0}
.m-content{flex: 1}
.m-content ul{list-style: none; padding: 15px 10px}
.m-content ul li{margin: 2px 0;}
.m-content ul li a{display: flex; align-items: center; padding: 10px 05px; flex-direction: row; text-decoration: none; color:#f8f8f8; font-weight: 600; font-size: 15px;}
.m-content ul li a span{margin-right: 10px; color:#ffffff}
.m-content ul li a:hover{background-color: #182543; border-radius: 05px;}
.m-foot{height: 30px;  border-top: 1px solid #182543;}
.m-foot a{display: flex; align-items: center; padding: 10px 05px; flex-direction: row; text-decoration: none; color:#f8f8f8; font-weight: 600; font-size: 15px;}
.m-foot a:hover{background-color: #182543; border-radius: 05px;}
.m-foot a span{margin-right: 10px;}

.m-content-selected{background-color: #3C83F6; border-radius: 05px;}

/**
content
**/
.content{width: 100%; flex: 1; overflow: hidden; background-color: #F9FAFB; overflow-y: auto; padding: 10px 20px;}

.senhaup{width: 100%; padding: 10px;}
.tipodeenvio{width: 30%;margin: 10px 0!important; background: linear-gradient(135deg, #fff3cd, #ffe69c); padding: 16px; border-radius: 10px; font-size: 22px; font-weight: 700; display: flex; justify-content: space-between; align-items: center;}
.tipodeenvio p{font-size: 33px!important; }

/**
tabela - table
**/
.tabela{width: 100%; float: left; background-color: #ffffff;border: 1px solid #e9ecf0; border-radius: 5px;}
.tabela table{width: 100%; border-collapse: collapse;}
.tabela table thead tr{background-color: #F8FAFC;}
.tabela table thead tr td{font-size: 14px; font-weight: 600; padding: 15px 8px; color:#0F1729; border-bottom: 1px solid #e9ecf0; }
.tabela table tbody tr td{font-size: 12px; font-weight: 400; border-bottom: 1px solid #e9ecf0; padding: 15px 8px}
.tabela table tbody tr:hover{background-color: #e9ecf0;}

.title{font-size: 22px; margin: 10px 0; font-weight: 700;}
.subtitle{font-size: 16px; margin: 10px 0; font-weight: 500;}

.b-info{width: 100%; float: left;}
.b-info h1{font-weight: 600; font-size: 15px;}
.b-info p{font-weight: 300; font-size: 13px; line-height: 1.5;}
.b-info b, .b-info strong{font-weight: 900;}
.informacao{background-color: #EEEFF5;}
.informacao div{padding:0; }
.informacao div.b-10:first-child{border-bottom:1px #e2e4ec solid;}
.informacao div:last-child{border:none;}
.informacao p{padding: 2px!important; margin: 2px 03px!important;}

/**
icon
**/
.icon{font-size: 15px!important; margin-right: 05px; margin-top: -1px; float: left;}

/**
btn
**/
.btn{border:none; cursor: pointer; transition: filter 0.2s; font-weight: 900;}
.btn:hover{filter: opacity(0.8)}
.btn-default{padding: 10px 15px; border-radius: 05px;}
.btn-small{padding: 3px 10px; border-radius: 05px; font-size: 12px;}
.btn span{font-size: 16px;}
.btn-icon{padding: 3px 4px; border-radius: 05px;}
/**
status
**/
.status{padding: 05px 8px; font-size: 12px; border-radius: 10px; float: left;}


/**
cores de alertas - color alerts
**/
.success{background-color: #E9FCF0!important;}
.error{background-color: #FFF0F0!important;}
.alert{background-color: #FFF6E6!important;}
.info{background-color: #F1F5F9!important;}

/**
cores fontes - font color
**/
.color-blue-dark{color:#4B5790!important}
.color-red{color:#B22819!important}
.color-orange{color:#96630D!important}
.color-green{color:#387C45!important}
.color-white{color:#f8f9fa!important}

/**
cores fundo - background color
**/
.bg-color-blue-dark{background-color: #4B5790!important;}
.bg-color-blue{background-color: #3C83F6!important;}
.bg-color-ligth{background-color: #dbe5ee!important;}
.bg-color-green{background-color: #60ec8a!important;}
.bg-color-orange{background-color: #f7b84c!important;}


/**
paginação
**/
.paginacao{width: 100%; display: flex; align-items: center; justify-content: center; margin:15px 0;padding:0;}
.paginacao ul{list-style: none;}
.paginacao ul li{margin: 0 05px; float: left;}
.paginacao ul li a{text-decoration: none; padding: 05px 08px; font-weight: 800; color: #ffffff; background-color: #3C83F6; font-size: 12px; border-radius: 05px;}
.paginacao-checked{background-color: #1149a3!important;}


/**
JANELA MODAL   
**/
#modal{position: fixed; top:0; left: 0; background: #000000; opacity: 0.8; width: 100%; height: 100%; z-index: 9999;}
#modalloading{position: fixed; top:0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.6; z-index: 9;}
.modalblank{position: fixed; width: 30%; top: 20%; padding: 25px 0; left: 35%; background-color: #f8f8f8; z-index: 999;}
.m-close{position: absolute; top: -5px; right: -05px; background-color: #f33e4e; color:#ffffff; padding: 05px 8px; cursor: pointer; font-size: 14px;}

.m-modal{position: fixed; width: 100%; height: 100%; top:0; left: 0; background-color: #0000008a; backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center;}
.m-window{background-color: #ffffff;padding:0; margin:0;}
.m-window header{display: flex; flex-direction: row; justify-content: space-between; padding:02px 03px; margin:0;}
.m-window header p{font-weight: 800; font-size: 14px; padding: 03px 5px;}
.m-window header span{font-weight: 800; font-size: 12px; cursor: pointer; background-color: #e4445f; padding: 02px 04px; border-radius: 03px;}
.m-window main{width: 100%; float: left; padding: 10px}
.duvidas{display: flex;  padding: 10px; margin: 10px 0; }
.duvidas .ex{width: 200px; display: flex; align-items: center; justify-content: center;}
.duvidas .ex span{font-size: 50px;}
.duvidas h1{font-weight: 700; font-size: 18px;}
.duvidas p{font-weight: 400; font-size: 15px;}


.modaloading{position: fixed; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center;}
.modaloading p{font-weight: 300;}

.modalboleto{position: fixed; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(8px); display: flex; justify-content: center; align-items: center;}
.modalboletoclosed{position: absolute; top:2px; right: 2px; background-color: #f5627b; color:#182543; font-weight: 900; padding: 05px 10px; cursor: pointer; user-select: none;}
.modalboletocloseds{position: absolute; top:2px; right: 2px; background-color: #f5627b; color:#182543; font-weight: 900; padding: 05px 10px; cursor: pointer; user-select: none;}
.iframe{width: 1200px; height: 95%; background-color: #ffffff;}
/**
option opção de envio
**/
.option{width: 100%; margin: 10px 0; padding: 10px 0; float: left; display: flex; gap: 5px}
.option section{padding: 05px; flex-grow: 1; background-color: #eceef5; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.option section p{font-size: 12px; margin: 05px 0;}
.option section button{flex-grow: 0; cursor: pointer; border:none; margin-bottom: 10px; padding: 05px 10px; background-color: #4B5790; color:#ffffff; border-radius: 04px;}
/*  FORMULARIO  */
.formulario,
.formulario form{width: 100%; float: left;}
.formulario input,
.formulario select,
.formulario textarea{width: 100%; resize: none; font-size: 12px; border:#cdd3dd 1px solid; border-radius: 03px; background-color: #ffffff; padding: 10px 15px; float: none; }
.formulario input:focus{outline: 1px solid; outline-color: #ccc;}
.formulario input:disabled{cursor: not-allowed; background-color: #f0eeee;}
.formulario p{display: block; width: 100%; margin: 10px 0; font-size: 12px;}



/*  FORMULÁRIO DE LOGIN */
/**
ÁREA LOGIN
**/
.box-login{width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center;}
.login{position: relative; width: 400px; background-color: #28166F; border-radius: 03px; padding: 10px; display: flex; flex-direction: column; align-items: center;}
.img1{width: 90%; padding: 40px 10px;}
.img2{width: 70%; padding: 10px;}
.login h2{font-weight: 400; text-align: center; padding: 35px 0; border-bottom: #ddd 1px solid;}
.login span{display: block; font-weight: 800; font-size: 12px; color:#ffffff; margin-bottom: 10px;}
.login form{width: 70%; margin: 05px 15%;padding: 5px 0; float: left;}
.login form input{width: 100%; float: left; padding: 15px 05px; border:none; border-radius: 05px; background-color: #f8f8f8;}
.login button{width: 100%; float: left; border:none; margin: 10px 0; border-radius: 05px; padding: 15px 0; cursor: pointer; background-color: #25B387; color:#ffffff; font-weight: 900; text-transform: uppercase; transition: transform 0.1s;}
.login button:hover{transform: scale(1.05);}
.ajuda{width: 70%; margin: 05px 15%; float: left; padding: 10px;}
.ajuda p{width: 100%; text-align: center; font-size: 13px; color:#ffffff}
.ajuda p a{font-weight: 900; text-decoration: underline; color:#ffffff}
/**
mensagem de erro de login
**/
.messageerro{position: absolute; width: 100%; height: 100%; top:0; left: 0;background-color: rgba(248, 248, 248, 0.6); backdrop-filter: blur(5px);  display: flex;  align-items: center; justify-content: center; overflow: hidden;}
.m-errror{width: 90%; padding: 10px 15px; border-radius: 5px;  font-weight: 800;  color:#182543; transform: translateY(100vh); /* começa fora da tela */ animation: bxMsg 0.8s ease forwards; }

.m-errror p{text-align: center; padding: 10px 15px;}
.m-b-success{background-color: #a2e7c0; border: 1px solid #26c96c;}
.m-b-error{background-color: #ffc8ba; border: 1px solid #f3a38f;}
.m-b-info{background-color: #a2cee7; border: 1px solid #73b4da;}
.m-b-alert{background-color: #e7cfa2; border: 1px solid #e9c789;}

@keyframes bxMsg {
    to {
        transform: translateY(0); /* centro */
    }
}


/**
mensagem confirmação de pagamento
**/
.modalconfirmacao{position: absolute; width: 100%; height: 100%; top:0; left: 0;background-color: rgba(248, 248, 248, 0.6); backdrop-filter: blur(5px);  display: flex;  align-items: center; justify-content: center; overflow: hidden;}
.msgconfimacao{position: relative; width: 50%; border-radius: 05px; padding: 10px 20px; background-color: #4B5790;}
.msgconfimacao h1{font-size: 25px; padding: 15px 0; font-weight: 900; color:#ffffff;}
.msgconfimacao h2{font-size: 18px; padding: 15px 0; font-weight: 900; color:#ffffff;}
.msgconfimacao p{font-weight: 400; font-size: 18px; color:#ffffff; line-height: 1.3;}
.btnfechar{position: absolute; right: 05px; top: 05px; padding: 05px 08px; font-weight: 900; background-color: #e4445f; color:#ffffff; font-weight: 13px; cursor: pointer;}

/**
mensagem de perguntar o tipo de acesso
**/
.modaldefinetipo{position: fixed; width: 100%; height: 100%; top:0; left: 0; background-color: #0000008a; backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; }
.tipoacesso{background-color: #ffffff; width: 600px; height: 200px; display: flex; align-items: center; justify-content: center; flex-direction: row; gap: 10px; border-radius: 05px; }
.tipoacesso button{ padding:15px 25px; border:none; background-color: #25B387; flex-shrink: 1; font-weight: 900; color:#0F1729; font-size: 20px; border-radius: 5px; cursor: pointer;}

/**
modal pesquisar clerigo
**/
.modalwindow{position: relative; width: 700px; height: 95%; background-color: #ffffff; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border-radius: 05px; }
.formpesquisa{ width: 100%; padding: 10px; float: left;}
.formpesquisa span{display: block; margin: 10px 0; font-weight: 900; color:#252525;}
.formpesquisa input{border:none; width: 100%; padding: 20px 15px; background-color: #f8f8f8; border-bottom: 2px solid #cccccc;}
.formpesquisa input:focus{border-color: #5690ec; outline: none;}
.formpesquisa button{width: 100%; float: left; padding: 21px 15px; cursor: pointer; font-weight: 900; color:#ffffff; border:none; border-radius: 05px;}
.formpesquisa button:disabled{cursor: not-allowed;}

.resultado{width: 100%; float: left; padding: 10px;}
.resultado table{border-collapse:collapse; width: 100%;}
.resultado table tr{border-bottom:1px solid #ebe8e8;}
.resultado table tr:last-child{border-bottom:none;}
.resultado table tr td{padding: 10px 02px; font-size: 12px;}

/** MODAL informação de pegamento **/
.modalpagamento{position: fixed; width: 100%; height: 100%; top:0; left: 0;background-color: rgba(248, 248, 248, 0.6); backdrop-filter: blur(5px);  display: flex; flex-direction: column;  align-items: center; justify-content: center; overflow: hidden;}
.mp{width: 70%; background-color: #1149a3; display: flex; flex-direction: column; border-radius: 05px;}
.mp-header img{width: 200px;}
.mp-header{padding: 10px; border-bottom: 1px solid #2455a3; display: flex; align-items: center; justify-content: center;}
.mp-footer{padding: 10px; border-top: 1px solid #2455a3; display: flex; align-items: center; justify-content: center;}
.mp-footer img{width: 200px;}
.mp-main{width: 100%; padding: 10px 0; display: flex; justify-content: center;}
.mp-informacao{width: 95%; background-color: #ffffffbe; border-radius: 05px;}
.mp-informacao .b-10{padding:0; border-bottom:1px #e2e4ec solid;}
.mp-informacao .b-10:last-child{border-bottom:none;}
.mp-informacao p{font-size: 12px; padding: 2px!important; margin: 2px 03px!important;}

.mp-pagamento{width: 100%; padding: 10px 02px; background-color: #ffffff; margin: 20px 0; display: inline-flex; justify-content: center; flex-direction: row; gap: 20px}
.mp-pagamento .mp-row{ width: 50%;}
.mp-pagamento h1{font-size: 15px; padding: 10px  0; font-weight: 800; text-align: center;}
.mp-cobranca{padding: 0; display: flex; flex-direction: column;}
.mp-pixqr{display: flex; flex-direction: row;}
.cbtn{display: flex; align-items: center; gap: 10px;}
.mp-cobranca button{border:none; padding: 03px 08px; margin: 05px 0; display: flex; align-items: center; cursor: pointer; border-radius: 05px;}
.cpix{width: 100%; height: 120px; margin: 06px 0; padding: 10px; background-color: #f7f5ec; border-radius: 05px; }
.cpix p{word-wrap: break-word;
  overflow-wrap: break-word;}
.cboleto{width: 100%; padding: 10px; height: 120px; margin: 06px 0; background-color: #f7f5ec; border-radius: 05px;}

.qrcode{width: 100%;}
.qrcode img{width: 140px; margin:0; padding:0; float: left;}
.mp-aguardando{width: 100%;}
.mp-aguardando p{text-align: center; display: flex; align-items: center;  justify-content: center; gap: 10px;}
.mp-aguardando span{animation: spinner 1.5s linear infinite;}
.fecharmodal{width: 70%; display: flex; justify-content: center;}
.fecharmodal span{padding: 08px 15px; background-color: #bd3939; color: #ffffff; margin: 05px 0; font-weight: 900; font-size: 14px; cursor: pointer; border-radius: 05px; user-select: none;}
@keyframes spinner {
  to {
    transform: rotate(360deg); /* Rotates the element to 360 degrees */
  }
}
/**
mensagem de confirmação de envio
**/
.modalconfirm{position: fixed; width: 100%; height: 100%; top:0; left: 0; background-color: #0000008a; backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center;}
.mpainel{width: 400px; background-color: #ffffff; border-radius: 05px; padding: 30px;}
.mmessage p{text-align: center;}
.mpainel p{font-weight: 300; font-size: 14px;}
.mbtn{width: 100%; float: left; display: flex; align-items: center; flex-direction: row; gap: 20px; justify-content: center; margin: 20px 0;}
.mbtn button{border:none; padding: 10px 15px; width: 100%; font-weight: 900; color:#ffffff; cursor: pointer;}
.mbtn button:last-child{color:#0F1729}
/**
alert
**/
.relative{position: relative;}
.msgalt{position: absolute; background-color: #ffb7b7; width: 100%; height: 100%;}
.msgalt span{color:#182543; font-weight: 900;}

/**
MENSAGEM DE ERRO
**/
.ms-error{position: absolute; background-color: #faebcc; border-left: 05px solid #fad17a; padding: 05px; border-radius: 04px; height: 70px; display: flex; align-items: center; top: 0; z-index: -1; }
.ms-error p{font-weight: 400; font-size: 13px; padding: 5px 10px;}
.openerror{animation: errorOpen 0.1s forwards;}
.closeerror{animation: errorClose 0.1s forwards;}

/**
icones
**/
.i{width: 20px; height: 20px; background-size: 100% 100%; background-position: center center; background-image: url('./../assets/icon/pastor.png'); display: inline-block; margin-top: 2px;}

/**
OTHERS
**/
.recursos{width: 100%; float: left;}
.recursos h1{font-weight: 800; font-size: 22px; padding: 10px 0; background-color: #ffffff;}
.menumobile{display: none;}
.padding-10{padding: 10px;}

@media only screen and (min-width: 992px){
    .max-width{width: 900px;}
}

@media only screen and (max-width: 600px){
    .m-modal{padding: 10px;}
    .mp{width: 90%;}
    .modalblank{width: 90%; left: 5%!important; }
    .menumobile{display: inline; position: fixed; top: 10px; left: 10px; background-color: #28166F; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 05px; border:1px solid #ffffff}
    .menumobile span{ color:#ffffff; cursor: pointer;}
    .max-width{width: 900px;}
    .m-left{display: none;}
    .b-1,
    .b-2,
    .b-3,
    .b-4,
    .b-5,
    .b-6,
    .b-7,
    .b-8,
    .b-9,
    .b-10{width: 100%;}
    .flex-center-m{flex-direction: column!important;}
    /** login **/
    .box-login{background-color: #f6f7ff;}
    .login{width: 80%; border-radius: 05px;}
    .login form{width: 90%;}
    .tipoacesso{width: 90%; flex-direction: column;flex-grow: 0;}
    .tipo-opcao{width: 100%; padding: 10px}
    .tipo-opcao button{width: 100%;}
    .tabela{width: 100%;  overflow: hidden; overflow-x: scroll;}
    .tabela table{width: 100%;}
    .tabela table thead tr td,
    .tabela table tbody tr td{white-space: nowrap;}
}