:root{
    --cor-input-radio:#2984ca;
    --cor-input-radio:#2c72db;
    --cor-input-radio-verde:#22af45;
    --cor-input-radio-verm:#f1433d;

    --cor-ip-verde:#07d474;
    --cor-ip-verde-ff:#09ca70;
    --cor-ip-verm:#f1433d;
    --cor-ip-emerg:#dcd500;
    --cor-ip-cinza:#efeeee;

    --cor-ip-teste:#ff6661;
}
/* loader */ 
.form-grade-mensagem-loader{position: fixed; background: #c0c0c0e1; left: 0px; right: 0px; bottom: 0px; top: 0px; width: 100%; z-index: 10002; height: 100%; display: flex;flex-direction: row; justify-content: center; align-items: center;}
.form-msg-caixa-loader{margin-bottom: 30px; width:auto; height: auto; min-height:auto; font-size: 12px; font-family: var(--font-rr); border-radius: 5px;  }
.form-msg-loader-tit{float:left; width: 100%; height: auto; line-height: auto; text-align: center; padding-top: 20px; font-size: 34px; font-family: var(--font-rr); color: var(--cor-rosa); word-wrap: break-word; border-top-left-radius: 5px; border-top-right-radius: 5px;}
.form-msg-loader-subtit{float:left; width: 100%; height: auto; line-height: auto; text-align: center; padding-top: 20px; font-size: 18px; font-family: var(--font-rl); color: #000; word-wrap: break-word; border-top-left-radius: 5px; border-top-right-radius: 5px;}
.form-msg-loader-div-timer{float:left; width: 100%; height: auto; text-align: center; margin-top: 40px; }
.form-msg-loader-timer{margin:0 auto; width: auto; height: auto; line-height: auto; background-color: var(--cor-rosa); padding: 10px; font-size: 18px; font-family: var(--font-rl); color: #fff; word-wrap: break-word; border-radius: 5px;}

.btn-x-close{float:right; width:35px; height:35px; border-radius:3px; background-color:#F00; margin-top:-15px; margin-right:20px; line-height:35px; text-align:center; font-size:18px; color:#FFF}
.btn-x-close:hover{cursor:pointer; transform:scale(1.05); transition:.1s;}

.css-frm-caixa-fotos{ border-radius:10px; background-color:#FFFFFF !important; width:95% !important; height:95% !important; }
.css-frm-grade-fotos{position: fixed; background: #222222cc; left: 0px; right: 0px; bottom: 0px; top: 0px; width: 100%; z-index: 10002; height: 100%; display: flex;flex-direction: row; justify-content: center; align-items: center;}

.foto-caixa{float:left; width:100%; height: 100%;}
.prod-img-btnclose{float:left; width:100%; height: 50px; }
.prod-img-princ{float:left; width:100%; height: calc(100% - 160px) !important; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; }
.prod-img-peq{float:left; width:100%; height: 100px; overflow-x: auto; overflow-y: hidden; white-space:nowrap;}

.prod-img-peq-cx{display: inline-block; width: 85px; height: 80px; background-color: #FFF; margin-right: 10px; border-radius: 5px; border: 1px solid #CCC; }
.prod-img-peq-cx:hover{cursor: pointer; border: 2px solid var(--cor-fundo-vermelho);}

.prod-img-princ-item{float:left; width:99%; height: 99%; margin-top: .5%; margin-left: .5%; border: 0px !important; object-fit: contain; object-position: center; display: none;}
.prod-img-princ-item[src]{display: block;}


.prod-img-item{float:left; width:90%; height: 90%; margin-top: 5%; margin-left: 5%; border: 0px !important; display: none; object-position: center;}
.prod-img-item[src]{display: block;}


.spinner { color: var(--cor-rosa); display: flex; align-items: center; justify-content: center; min-height: auto;}
.spinner:after { animation: changeContent .8s linear infinite; display: block; content: "⠋"; font-size: 50px;}  
@keyframes changeContent {
    10% { content: "⠙"; }
    20% { content: "⠹"; }
    30% { content: "⠸"; }
    40% { content: "⠼"; }
    50% { content: "⠴"; }
    60% { content: "⠦"; } 
    70% { content: "⠧"; }
    80% { content: "⠇"; }
    90% { content: "⠏"; }
}

/* togle certo - tela que a bola esta ficando um pouco para baixo */
.cm-toggle-telaerrada {-webkit-appearance: none; -webkit-tap-highlight-color: transparent; position: relative; border: 0; outline: 0; cursor: pointer;}
.cm-toggle-telaerrada:after {content: ''; width: 30px; height: 12px; display: inline-block; background: #c4c3c38c; border-radius: 10px; transition: .2s; clear: both;}
.cm-toggle-telaerrada:before{content: ''; width: 17px; height: 17px; display: block; position: absolute; left: 0; top: -2px; border:1px solid #CCC; border-radius: 50%; background: #ffffff;}
.cm-toggle-telaerrada:checked:before {transition: .3s; left: 15px; border:1px solid var(--cor-verde-ml);}
.cm-toggle-telaerrada:checked:after {transition: .3s; background: var(--cor-verde-ml);}

.form-linha-check-auto{float:left; width:auto; height: auto; margin-right: 20px;}
.form-linha-check{float:left; width:100%; height: auto;}
.form-inp-tit-check{float:left; padding-top:5px; width:calc(100% - 50px); height:auto; min-height: 30px; font-family: var(--font-rr); color: #333333; font-size:14px;}
.form-inp-tit-loc-date{float:left; width:auto; height:auto; min-height: 30px; margin-left:10px; margin-right:10px; line-height: 30px; font-family: var(--font-rr); color: #333333; font-size:14px;}
.form-inp-check{float:right; width:35px; height:auto; min-height: 30px; padding-top:3px;}
.form-inp-check01{float:left; width:35px; height:auto; min-height: 30px; padding-top:3px;}
.form-inp-tit-check01{float:left; width:auto; margin-left: 4px; height:auto; min-height: 30px; font-family: var(--font-rr); color: #333333; font-size:14px;}

.radio-label { font-weight: 500 !important; align-items: center; padding: 5px; margin-bottom: 10px; margin-right: 10px; background-color: #fff; border:1px solid #ccc; border-radius: 4px; font-size: 14px; transition: background-color 0.2s, border-color 0.2s;}
.radio-label:hover { background-color: #e6e6e6; cursor: pointer;}
.radio-input { position: absolute; opacity: 0; }
.radio-input:checked + .radio-label { background-color: var(--cor-input-radio); border:1px solid var(--cor-input-radio); color: white; }
.radio-input:disabled + .radio-label { background-color: #e4e4e4; border:1px solid #CCC; color: #000; cursor: default; }
.radio-input:focus + .radio-label { outline: 0px solid var(--cor-input-radio); }
.radio-inner-circle { display: inline-block; width: 1em; height: 1em; border: 1.5px solid #888; border-radius: 50%; margin-right: 0.5em; transition: border-color 0.2s; position: relative; }
.radio-label:hover .radio-inner-circle { border-color:0px; }
.radio-input:checked + .radio-label .radio-inner-circle { border-color: white; }
.radio-input:checked + .radio-label .radio-inner-circle::after { content: ''; display: block; width: 0.5em; height: 0.5em; background-color: white; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }


.radio-label-verde { font-weight: 500 !important; align-items: center; padding: 5px;  margin-bottom: 10px; margin-right: 10px; background-color: #fff; border:1px solid #ccc; border-radius: 4px; font-size: 14px; transition: background-color 0.2s, border-color 0.2s;}
.radio-label-verde:hover { background-color: #e6e6e6; cursor: pointer;}
.radio-input-verde { position: absolute; opacity: 0; }
.radio-input-verde:checked + .radio-label-verde { background-color: var(--cor-input-radio-verde); border:1px solid var(--cor-input-radio-verde); color: white; }
.radio-input-verde:disabled + .radio-label-verde { background-color: #e4e4e4; border:1px solid #CCC; color: #000; cursor: default; }
.radio-input-verde:focus + .radio-label-verde { outline: 0px solid var(--cor-input-radio-verde); }
.radio-inner-circle { display: inline-block; width: 1em; height: 1em; border: 1.5px solid #888; border-radius: 50%; margin-right: 0.5em; transition: border-color 0.2s; position: relative; }
.radio-label-verde:hover .radio-inner-circle { border-color:0px; }
.radio-input-verde:checked + .radio-label-verde .radio-inner-circle { border-color: white; }
.radio-input-verde:checked + .radio-label-verde .radio-inner-circle::after { content: ''; display: block; width: 0.5em; height: 0.5em; background-color: white; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.radio-label-verm { font-weight: 500 !important; align-items: center; padding: 5px;  margin-bottom: 10px; margin-right: 10px; background-color: #fff; border:1px solid #ccc; border-radius: 4px; font-size: 14px; transition: background-color 0.2s, border-color 0.2s;}
.radio-label-verm:hover { background-color: #e6e6e6; cursor: pointer;}
.radio-input-verm { position: absolute; opacity: 0; }
.radio-input-verm:checked + .radio-label-verm { background-color: var(--cor-input-radio-verm); border:1px solid var(--cor-input-radio-verm); color: white; }
.radio-input-verm:disabled + .radio-label-verm { background-color: #e4e4e4; border:1px solid #CCC; color: #000; cursor: default; }
.radio-input-verm:focus + .radio-label-verm { outline: 0px solid var(--cor-input-radio-verm); }
.radio-inner-circle { display: inline-block; width: 1em; height: 1em; border: 1.5px solid #888; border-radius: 50%; margin-right: 0.5em; transition: border-color 0.2s; position: relative; }
.radio-label-verm:hover .radio-inner-circle { border-color:0px; }
.radio-input-verm:checked + .radio-label-verm .radio-inner-circle { border-color: white; }
.radio-input-verm:checked + .radio-label-verm .radio-inner-circle::after { content: ''; display: block; width: 0.5em; height: 0.5em; background-color: white; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }


/* tooltip */
.tp-cont { position: relative; display: inline-block; cursor: pointer; }
.tp-cont:hover .tp-text { visibility: visible; }
.tp-text { visibility: hidden; position: absolute; z-index: 1; background-color: #333; color: #fff; padding: 10px; border-radius: 5px; bottom: 105%; left: 50%; transform: translateX(-50%);}


.tp-cont-2 { position: relative; display: inline-block; width: 100%; opacity: 1 !important; transition: 1s; }
.tp-text-2{ position: absolute; visibility: hidden; text-align: left; background-color: #333; color: #fff; z-index: 10000; color: #fff; padding: 10px; border-radius: 5px; opacity: 1 !important;  }
.tp-cont-2 .tp-text-2 { opacity: 0 !important; }
.tp-cont-2:hover .tp-text-2 { visibility: visible; opacity: 1 !important; transition: ease-in-out .5s; }


.tp-text-bottom { bottom: -50px; left:0px; transform: translateY(0%); }
.tp-text-top { bottom: 30px; left:0px; transform: translateY(100%);}



/* checks */

/* verde */
.rd-lb-verde { float:left; width:calc(50% - 10px); color: var(--cor-ip-verde-ff); font-weight: 500 !important; text-align: center; font-size: 0.825rem !important; align-items: center; padding-top: 10px; padding-bottom: 10px; margin-bottom: 10px; margin-right: 10px; background-color: #fff; border:1px solid var(--cor-ip-verde); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s;}
.rd-lb-verde:hover { background-color: #d6feeb; cursor: pointer;}

.rd-ip-verde { position: fixed; opacity: 0; }
.rd-ip-verde:checked + .rd-lb-verde { background-color: var(--cor-ip-verde); color: white; }
.rd-ip-verde:disabled + .rd-lb-verde { cursor: default; opacity: 0.5; background-color: #FFF; }
.rd-ip-verde:focus + .rd-lb-verde { outline: 0px; }


/* vermelho */
.rd-lb-verm { float:left; width:calc(50% - 10px); font-weight: 500 !important; text-align: center; font-size: 0.825rem !important; align-items: center; padding-top: 10px; padding-bottom: 10px; margin-bottom: 10px; margin-right: 10px; border:1px solid var(--cor-ip-verm);;  border-radius: 4px; transition: background-color 0.2s, border-color 0.2s;}
.rd-lb-verm:hover { background-color: #e6e6e7; cursor: pointer;}

.rd-ip-verm { position: fixed; opacity: 0; }
.rd-ip-verm:checked + .rd-lb-verm { background-color: var(--cor-ip-verm); color: white; }
.rd-ip-verm:disabled + .rd-lb-verm { cursor: default;  }
.rd-ip-verm:focus + .rd-lb-verm { outline: 0px; }

/* cinza */
.rd-lb-cinza { float:left; width:calc(50% - 10px); font-weight: 500 !important; text-align: center; font-size: 0.825rem !important; align-items: center; padding-top: 10px; padding-bottom: 10px; margin-bottom: 10px; margin-right: 10px; border:1px solid var(--cor-ip-cinza);;  border-radius: 4px; transition: background-color 0.2s, border-color 0.2s;}
.rd-lb-cinza:hover { background-color: #e6e6e7; cursor: pointer;}

.rd-ip-cinza { position: fixed; opacity: 0; }
.rd-ip-cinza:checked + .rd-lb-cinza { background-color: var(--cor-ip-cinza); color: white; }
.rd-ip-cinza:disabled + .rd-lb-cinza { cursor: default; color:gray }
.rd-ip-cinza:focus + .rd-lb-cinza { outline: 0px; }


/* emergencia - amarelo */
.rd-lb-emerg { float:left; width:calc(50% - 10px); font-weight: 500 !important; text-align: center; font-size: 0.825rem !important; align-items: center; padding-top: 10px; padding-bottom: 10px; margin-bottom: 10px; margin-right: 10px; border:1px solid var(--cor-ip-emerg);;  border-radius: 4px; transition: background-color 0.2s, border-color 0.2s;}
.rd-lb-emerg:hover { background-color: #e6e6e7; cursor: pointer;}

.rd-ip-emerg { position: fixed; opacity: 0; }
.rd-ip-emerg:checked + .rd-lb-emerg { background-color: var(--cor-ip-emerg); color: white; }
.rd-ip-emerg:disabled + .rd-lb-emerg { cursor: default;  }
.rd-ip-emerg:focus + .rd-lb-emerg { outline: 0px; }