.xx-container-item {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 30px auto;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "xx-superior xx-superior"
    "xx-centro xx-centro";
  font-size: 12px;
  padding: 2px 0px 0px 2px;
}

input:disabled {
	color: rgb(115, 115, 115);
	background-color: rgb(244, 244, 244);
}

.xx-container-item .xx-superior {
  display: grid;
  grid-template-columns: auto 18% 18% 20%;
  grid-template-rows: 100%;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "xx-requisitante xx-quantidadeInicial xx-saldo xx-quantidade";
  grid-area: xx-superior;
}

.xx-container-item .xx-superior .xx-requisitante {grid-area: xx-requisitante; margin: 2px;}

.xx-container-item .xx-superior .xx-quantidade { grid-area: xx-quantidade; text-align: center; margin: 2px}

.xx-container-item .xx-superior .xx-quantidadeInicial { grid-area: xx-quantidadeInicial; text-align: center; margin: 2px}

.xx-container-item .xx-superior .xx-saldo { grid-area: xx-saldo; text-align: center; margin: 2px}

.xx-container-item .xx-centro {
  display: grid;
  grid-template-columns: auto 18% 18% 20%;
  grid-template-rows: 100%;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "xx-requisitante2 xx-quantidadeInicial2 xx-saldo2 xx-quantidade2";
  grid-area: xx-centro;
}

.xx-container-item .xx-centro .xx-requisitante2 {grid-area: xx-requisitante2; margin: 6px 2px;}

.xx-container-item .xx-centro .xx-quantidade2 {grid-area: xx-quantidade2; text-align: center; margin: 2px; position: relative; height: 25px;}

.xx-container-item .xx-centro .xx-quantidadeInicial2 {grid-area: xx-quantidadeInicial2; margin: 6px 2px;}

.xx-container-item .xx-centro .xx-saldo2 {grid-area: xx-saldo2; text-align: center; margin: 6px 2px;}

.xx-container-item .xx-centro .xx-quantidade2 .xx-input-quantidade {
    width: 100%;
    letter-spacing: 1px;
    padding: 3px;
	font: 11px "Lucida Sans Unicode";
	text-align: right;
}

.xx-container-item.xx-cheio {
    border: 1px solid #92b7b0;
    border-radius: 10px;
    box-shadow: -3px 2px 4px 0px rgb(0 16 16 / 75%);
}

.xx-container-item .xx-efeito-input-verde {border: 1px solid #ccc;transition: 0.4s;}
.xx-container-item .xx-efeito-input-verde ~ .xx-focus-border:before,
.xx-container-item .xx-efeito-input-verde ~ .xx-focus-border:after{content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 2px; background-color: #04886d; transition: 0.4s;}
.xx-container-item .xx-efeito-input-verde ~ .xx-focus-border:after{top: auto; bottom: 0;}
.xx-container-item .xx-efeito-input-verde ~ .xx-focus-border i:before,
.xx-container-item .xx-efeito-input-verde ~ .xx-focus-border i:after{content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 0; background-color: #04886d; transition: 0.6s;}
.xx-container-item .xx-efeito-input-verde ~ .xx-focus-border i:after{left: auto; right: 0;}
.xx-container-item .xx-efeito-input-verde:focus ~ .xx-focus-border:before,
.xx-container-item .xx-efeito-input-verde:focus ~ .xx-focus-border:after{left: 0; width: 100%; transition: 0.4s;}
.xx-container-item .xx-efeito-input-verde:focus ~ .xx-focus-border i:before,
.xx-container-item .xx-efeito-input-verde:focus ~ .xx-focus-border i:after{top: 0; height: 100%; transition: 0.6s;}