:root{
    --cor-input-radio:#2984ca;
    --cor-input-radio:#2c72db;
    --cor-input-radio-verde:#22af45;
    --cor-input-radio-verm:#f1433d;
}
/* 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;}

.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%);}




/*
.tooltip-new{ position:relative; text-decoration:none; cursor:pointer; z-index: 10000;}
.tooltip-new:hover{ z-index: 10000;}
.tooltip-new span{display: none;}
.tooltip-new:hover span{ display:block; transition: top .4s; position:absolute; text-align:left; color:#FFF; word-wrap: break-word !important; word-break: break-all !important; width: 120px; height: 200px; top:-100%; left:0px; padding:10px; border-radius: 5px; background-color:#252525 !important;  z-index: 10000; animation: slideaway 200ms;} 
   
@keyframes slideaway {
    from { transform: translateX(20px); opacity:0;  }
    to { opacity: 1; display: block; }
}
*/
    
