body{margin: 0px; background: #ebecf0; color: #222222; font-size: 17px; font-family: 'Noto Sans', sans-serif;}
a, a:link, a:hover, a:visited{text-decoration: none; color: #1976D2;}
form{margin: 0px}
h1{text-align: center; font-weight: 600; font-size: 40px; margin: 20px 0px; color: #333333; width: 100%}
h2{margin: 0px 0px; font-weight: 600; color: #000;}
.fullLink{position: absolute; width: 100%; height: 100%; top: 0px; left: 0px}

.flex{display: flex; flex-wrap: wrap;}

.flexCadastro{display: flex; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #CCC; flex-wrap: wrap; align-items: flex-end;}
.flexCadastro>div{margin: 10px}

#boxNotification{position: fixed; padding: 10px; background: #0099DD; color: #fff; left: 15px; bottom: 15px; border-radius: 2px; box-shadow: 0px 0px 3px 0px #555; user-select: none;}

#loading {display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: URL('img/loading.gif'); background-repeat: no-repeat; background-position: center; background-color: rgba(255,255,255,0.5); z-index: 10000; align-items: center; justify-content: center; user-select: none;}
#progressBar{margin-top: 90px; display: none;}

/*MSG BOX*/
#boxTemp{width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: 1000}
.alertaMsg{border-radius: 4px; background: #fff; color: #000 !important; position: relative; overflow: hidden; min-width: 250px;}
.alertaCab{background: #F5F5F5; padding: 10px 15px; vertical-align: middle; font-size: 14px; text-align: center;}
.alertaCab img{width: 25px; height: auto; margin-right: 10px; vertical-align: middle}
.alertaText{padding: 15px; font-size: 17px; text-align: center;}

.msgClose{position: absolute; top: 5px; right: 5px;}
.btClose{background: #EEEEEE; color: #777777; border: none; border-radius: 2px; width: 25px; height: 25px; text-align: center; outline: none; transition: 0.3s}
.btClose:hover{background: #E53935; color: #FFFFFF;}
#msgBox{text-align: center;}

/* //MSG BOX
#boxTemp{width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: 1000}
.msgAlerta{background: #FFFFFF; padding: 20px; position: relative; border-radius: 2px}
.msgClose{position: absolute; top: 5px; right: 5px;}
.btClose{background: #EEEEEE; color: #777777; border: none; border-radius: 2px; width: 25px; height: 25px; text-align: center; outline: none; transition: 0.3s; cursor: pointer}
.btClose:hover{background: #E53935; color: #FFFFFF;}
#msgBox{text-align: center;}
.input{padding: 10px; margin-bottom: 15px; outline: none; font-size: 15px;}
 */


.header{position: sticky; top: 0; left: 0; background: #252627; height: 30px; width: calc(100% - 30px);  padding: 15px; z-index: 1000; box-shadow: 0px 0px 5px -3px #000; transition: 0.5s; min-width: 1000px;}
.header img{height: 100%}

.contain{min-width: 1100px; width: 1100px; margin: 0 auto; padding: 0px 10px 30px 10px}
.center{display: flex; justify-content: center; align-items: center}

.input500{width: 500px; margin-bottom: 10px;}
textarea{width: 100%; height: 150px; outline: none; font-size: 15px; font-family: 'Nunito', sans-serif; padding: 5px;}

/*PAINEL*/
.sair{position: fixed; top: 15px; right: 15px; width: 30px; height: 30px; background: URL('img/icon-sair.svg'); background-size: 30px; cursor: pointer}
.user{position: fixed; top: 15px; right: 60px; width: 30px; height: 30px; background: URL('img/icon-user.svg'); background-size: 30px; cursor: pointer}
.mais{position: fixed; top: 15px; right: 105px; width: 30px; height: 30px; background: URL('img/icon-mais.svg'); background-size: 30px; cursor: pointer}

.box{width: 260px; background: #FFFFFF; border: 1px solid #DDD; margin: 5px; position: relative; border-radius: 5px; overflow: hidden; padding-bottom: 40px;   -webkit-user-select: none; -ms-user-select: none; user-select: none;}
.box:hover{border: 1px solid #AAA; }
.boxTitulo{padding: 10px; font-weight: 600; font-size: 14px}
.boxCount{padding: 5px 10px; font-size: 14px}
.boxTipo{padding: 10px; align-items: center; font-size: 13px; background: #E7E7E7; text-align: center; display: flex;}
.boxTipo img{width: 30px; margin-right: 10px}
.boxAction{display: flex; justify-content: space-around; position: absolute; width: 100%; padding: 10px 0px; bottom: 0;}
.boxAction img{width: 20px;}

#legend{padding: 5px; background: rgba(30,30,30,1); position: absolute; z-index: 100; border-radius: 5px; color: #FFFFFF; font-size: 9px; border-radius: 2px; border: 1px solid #EEEEEE; z-index: 10000; overflow: hidden}

.geral{min-height: calc(100% - 61px); display: flex; margin-top: 1px; min-width: 1000px}
.lateral{min-height: 100%; background: #FFFFFF; border-right: 1px solid #DDD; font-size: 13px; padding: 15px; text-align: justify; width: 200px}
.qrcode{width: 200px;}
.qrcode img{width: 100%; border: 1px solid #DDD}
.qrcodeBaixar{padding: 15px 30px; background: #1B6ABF; color: #FFFFFF !important; display: block; text-align: center; margin: 15px 0px; border-radius: 2px; transition: 0.3s}
.qrcodeBaixar:hover{background: #064C98;}

.principal{padding: 0px 15px 15px 15px; width: calc(100% - 231px)}
.icon{width: 50px; padding: 5px; cursor: pointer; margin-right: 3px; border: 1px solid transparent; border-radius: 2px; transition: 0.3s}

input[type='text'], input[type='password'], input[type='email'], select{padding: 4px 7px; font-family: 'Nunito', sans-serif; font-size: 14px; outline: none;}
.moeda{width: 90px; text-align: right;}
.itemProduto{width: 250px}
.itemDescricao{width: 450px}
.itemCategoria{width: 125px}

.itens .flex > div{margin-right: 7px;}

.titleBar{display: flex; align-items: center; margin-left: -15px; padding: 7px; background: #FFFFFF; width: calc(100% + 15px)}
.tituloQrcode{margin: 0; margin-right: 10px; background: 0; border: 1px solid transparent; width: 300px; padding: 7px !important; border-radius: 5px;}
.tituloQrcode:hover, .tituloQrcode:focus{background: #FFFFFF; border: 1px solid #CCC;}
.iconAction{display: flex; gap: 15px}
.iconAction img{width: 20px; transition: 0.6s}
.iconAction div{border: 1px solid #CCC; padding: 5px 10px; border-radius: 5px; transition: 0.6s}
.iconAction div:hover{background: #7dd3ed;}

/* ICONS PAGE QRCODE*/
.icons-list{display: flex; width: 100%; margin: 15px 0px;}
.icon:hover{background: #FAFAFA}
.label{font-weight: 600; margin-top: 15px}
.label span{font-weight: normal; font-size: 13px}
.iconRadio input:checked ~ .icon {background: #FFFFFF !important; border: 1px solid #AAAAAA;}
.iconRadio input{display: none}

#conteudoQR{border-top: 1px solid #AAA; padding-top: 15px;margin-top: 10px;}

/*Funcionalidades*/
#box-funcionalidades{display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: calc(100% - 60px); background: #EEEEEE; flex-wrap: wrap; padding: 30px 0px; justify-content: center; overflow-y: auto; z-index: 1000; gap: 10px}
#box-funcionalidades>div{width: 350px; font-size: 14px; border: 1px solid #CCC; border-radius: 3px; padding: 10px; background: #FFFFFF}
#box-funcionalidades>div>div:first-child{display: flex; align-items: center; font-weight: 600;}
.textBlue{color: #1976D2; cursor: pointer}
.close {position: absolute; right: 10px; top: 10px; width: 30px !important; padding: initial !important; font-weight: 600; margin: 0px !important; font-size: 20px !important; text-align: center; cursor: pointer; color: #CCC; height: 30px; line-height: 30px; transition: 0.3s}
.close:hover{border: 1px solid #A00; color: #A00}

.bt{margin-top: 30px; padding: 10px 15px; background: #1976D2; border: 0px; border-radius: 2px; color: #FFFFFF; font-family: 'Nunito', sans-serif; font-size: 15px; cursor: pointer; transition: 0.3s; outline: none; text-align: center; width: max-content;}
.bt:hover{background: #064C98}

#lista{margin-top: 15px; font-size: 15px;}
#lista .flex{margin: 5px 0px;}
#lista .flex > div{line-height: 30px;}
.action{display: flex;}
.btAdd, .btAlterar, .btAlterarSalvar, .btExcluir{background: center no-repeat; background-size: 20px; width: 30px; height: 30px; cursor: pointer; border-radius: 2px; margin-right: 10px; transition: 0.3s}
.btAdd{background-color: #1976D2; background-image: URL('img/icon-add.svg')}
.btAlterar{background-color: #1976D2; background-image: URL('img/icon-editar.svg')}
.btAlterarSalvar{background-color: #009688; background-image: URL('img/icon-salvar.svg')}
.btExcluir{background-color: #E53935; background-image: URL('img/icon-lixeira.svg')}
.btAdd:hover{background-color: #064C98}
.btAlterar:hover{background-color: #064C98}
.btAlterarSalvar:hover{background-color: #00796B}
.btExcluir:hover{background-color: #C62828}

.inputCopy{opacity: 0; width: 20px; height: 5px; position: absolute;}
.btCopy{cursor: pointer}
#msgCopy{display: none; position: fixed; top: 30px; width: 180px; left: calc(50% - 90px); background: #ffe000; padding: 10px; text-align: center; border-radius: 3px; color: #000; font-weight: bold; font-size: 17px; z-index: 10000;}

/* LOGIN */
.center{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center}
.center img{max-width: 100%; max-height: 100%}
.boxLogin{background: #FFFFFF; border-radius: 2px; width: 300px; border: 1px solid #CCC;}
.loginImg{padding: 20px; text-align: center}
.loginImg img{height: 90px}
.dados{padding: 15px; text-align: center; background: #F5F5F5;}
.dados .input{padding: 10px; font-size: 16px; margin-bottom: 10px; outline: none; width: 100%; border: none; border-bottom: 1px solid #777777; background: transparent}
.btLogin{border: none; border-radius: 2px; padding: 15px 10px; width: 100%; background: #1E88E5; color: #FFFFFF; font-family: 'Heebo', sans-serif; font-weight: bold; outline: none; cursor: pointer; transition: 0.3s; margin-bottom: 20px}
.btLogin:hover{background: #096CC3;}
.formEsquciSenha{text-align: center}
.btEsqueciSenha{border: none; padding: 10px; width: max-content; background: transparent; color: #455A64; font-family: 'Heebo', sans-serif; font-weight: bold; outline: none; cursor: pointer; transition: 0.3s}
.btEsqueciSenha:hover{color: #607D8B;}