:root{
	--primary: #f84d21;
	--secundary: #1D1D1B;
	--bt: #f84d21;
	--btHover: #ff8464;
	--salmaoEscuro: #bd4c42;
	--salmaoIntermediario: #fa8072;
	--salmaoClaro: #eeac99;
	--salmaoClaro2: #ffc5b4;
}

html, body{margin: 0px; font-family:'Outfit', sans-serif; background: #263238; color: #FEFEFE; font-size: 15px;}
a, a:visited, a:hover, a:link{text-decoration: none; color: inherit}
form{margin: 0px}
.fullLink{position: absolute; width: 100%; height: 100%; top: 0; left: 0}
h1{color: var(--main-color); font-family: 'Outfit', sans-serif;margin: 0px 0px 20px 0px; text-align: left !important; font-size: 27px; font-weight: bold; width: 100%;}
h2{color: var(--main-color); font-family: 'Outfit', sans-serif;margin: 10px 0px 20px 0px; text-align: left !important; font-size: 20px; font-weight: normal; border-bottom: 1px solid #DDD; width: 100%;}
section{padding: 20px; min-width: 1000px;}
.contain{max-width: 600px; margin: 0px auto; font-size: 15px; text-align: justify; padding: 20px}
.containPainel{width: calc(100% - 250px); padding: 40px 0px; margin: 0 auto;}

.menuTopList{display: flex; gap: 10px;}

/*NOTIFICAÇÕES*/
#notificationBox{position: absolute; top: 47px; right: 0px; box-shadow: 0px 0px 10px -4px #333; width: 300px; height: calc(100vh - 47px); background: #FCFCFC;}
.notificationBox{background: #FCFCFC; border: 1px solid #CCC; position: absolute; top: 3px; width: 200px; height: 200px}
.notificationItem{background: #FFFFFF; border-bottom: 1px solid #BBB; padding: 10px; cursor: pointer;   -webkit-user-select: none; -ms-user-select: none; user-select: none;}

.flex{display: flex; justify-content: space-between; flex-wrap: wrap}
.flexGap40{display: flex;flex-wrap: wrap; gap: 40px;}
.flexGap10{display: flex;flex-wrap: wrap; gap: 10px;}
.flexForm{display: flex}
.txtCenter{text-align: center}

.inputBox{margin-right: 5px}
.inputBox>div{font-size: 12px; color: #777;}
.notificationNumber{position: absolute; top: 5px; right: 9px; background: #ff2530; border-radius: 50%; color: #FFF; width: 16px; height: 16px; font-size: 8px; text-align: center; display: flex; justify-content: center; align-items: center;}

.titulo{padding: 15px 0px; color: var(--primary); font-size: 23px; font-weight: bold}

.logo{background: var(--primary); padding: 15px; text-align: center;}
.logo img{max-width: 70px}
.header{text-align: center; background: var(--primary); padding: 20px 15px;}
.header img{height: 70px}
#boxTemp, #boxExtra{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.75); display: flex; justify-content: center; align-items: center; z-index: 100000;}
.boxTempAC{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.75); display: flex; justify-content: center; align-items: center; z-index: 100000;}
.boxTempAB{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.75); display: flex; justify-content: center; align-items: baseline; z-index: 10000; }
#menuIcon{display: none}

/* MENSAGEM ALERTA */
.msgAlerta{padding: 20px; border-radius: 2px; background: #FFFFFF; color: #000000 !important; position: relative}

.alertaMsg{border-radius: 4px; background: #fff; color: #000 !important; position: relative; overflow: hidden; min-width: 250px;}
.alertaCab{background: #EEEEEE; 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;}
.fecharBox{position: absolute; right: 0px; top: 0px; width: 38px; height: 38px; transition: 0.3s; background: #DDDDDD; cursor: pointer}
.fecharBox:hover{background: #CCCCCC}
.fecharBox img{filter: invert(1); width: 20px; padding: 9px;}

.menuItem{position: relative; color: #FFFFFF; display: flex; align-items: center; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 7px 15px; font-size: 15px; font-weight: bold; transition: 0.3s;}
.menuItem img{margin-right: 10px; max-width: 40px; max-height: 40px; border-radius: 15px}

.menuSide{width: 200px; position: fixed; top: 79; left: 0; height: 100%; font-size: 17px; transition: 0.6s; z-index: 1001; background: #6767f6}
.menuItemCab{position: relative; color: #FFFFFF; background: #4949dc; display: flex; align-items: center; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 7px 15px; font-size: 13px; transition: 0.3s; font-weight: bold}
.n1{padding-left: 15px}
.n2{padding-left: 35px; cursor: pointer}
.n2:hover{background: rgba(255,255,255,0.2)}

.menuTop{background: #101517AA; display: flex; justify-content: space-between; padding: 7px 30px; position: sticky; top: 0; z-index: 10000; backdrop-filter: blur(3px);}
.menuTop .menuItem{color: #FFFFFF;  transition: 0.6s; padding: 3px 15px; margin: 3px 8px 3px 3px; border-radius: 3px; cursor: pointer}
.menuTop .menuItem img{margin: 0px 5px;}
.menuTop .menuItem:hover{background: #2a373caa}
.menuTop .menuItemIcon{fill: #FFFFFF; margin-right: 5px; transition: 0.3s; width: 24px; height: 24px;}
.menuTop .menuItem:hover .menuItemIcon{fill: var(--salmaoIntermediario); margin-right: 5px}
.menuTop-logo{height: 45px}
.nomeUsuarioHeader{margin-right: 5px; font-weight: normal; font-size: 13px}
.fotoPerfil{width: 33px; height: 33px; fill: #FFFFFF; transition: 0.3s}
.menuTop .menuItem:hover .fotoPerfil{fill: var(--salmaoIntermediario)}

.contraMenu{display: none; position: fixed; top: 0px; right: 0px; height: 100%; width: calc(100% - 155px); cursor: pointer; z-index: 10000;}
.menuOpen{left: 0px !important}/*Mostra Menu do lado esquerdo*/

/*TABLE HEADER*/
.tbBox{margin-top: 15px; border: 1px solid #BBB; border-radius: 4px; overflow: hidden; width: max-content; max-width: 100%;}
.tbHeader{padding: 10px 10px; font-weight: bold; display: flex; background: #e6e6e6; color: #222222; align-items: center;}
.tbHeader>div{padding-right: 5px;}
.tbLine{padding: 5px 10px; line-height: 30px; display: flex; background: #FAFAFA; align-items: center;}
.tbLine>div{text-overflow: ellipsis; white-space: nowrap; padding-right: 5px; overflow: hidden;}
.tbLine:nth-child(odd){background: #EEEEEE;}

.usuariosBox{padding: 5px; border: 1px solid #CCC; background: #FFFFFF; border-radius: 3px; margin: 5px 0px; display: flex; align-items: center;}
.timeNomeFantasia, .timeRazaoSocial{width: 260px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-right: 3px; font-weight: bold}
.timeEmail{width: 200px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-right: 3px}
.timeFone{width: 140px;}
.timeNomeContato{width: 160px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-right: 3px}
.timeAcoes img{width: 28px; cursor: pointer;}

/*-- SÉRIE --*/
.eventoList{display: flex; max-width: calc(100% - 80px); gap: 25px; flex-wrap: wrap;}
.eventoThumb{width: 200px; transition: 0.5s; border-radius: 8px; border: 2px solid transparent; overflow: hidden; box-shadow: 0px 15px 15px -10px #000; cursor: pointer; position: relative}
.eventoThumb img{width: 100%}
.eventoThumb:hover{transform: scale(1.05); border: 2px solid #CCC}


.administracaoThumb{width: 200px; background: #55656e; transition: 0.5s; border-radius: 8px; border: 2px solid transparent; overflow: hidden; box-shadow: 0px 15px 15px -10px #000; cursor: pointer; position: relative; padding: 15px; text-align: center; font-size: 15px}
.admIcon {width: 170px; height: 170px; fill: #FFF}
.administracaoThumb:hover{transform: scale(1.05); border: 2px solid #CCC}

.admUser{width: 200px; background: #55656e; transition: 0.5s; border-radius: 8px; border: 2px solid transparent; overflow: hidden; box-shadow: 0px 15px 15px -10px #000; cursor: pointer; position: relative; padding: 15px; font-size: 15px}
.admUser>div{padding: 2px 0px; text-overflow: ellipsis; overflow: hidden; text-wrap: nowrap;}
.admUser:hover{transform: scale(1.05); border: 2px solid #CCC}


.bloqueado img{filter: grayscale(0.8); transition: 0.8s}
.bloqueado:hover img{filter: grayscale(0);}
.beltComprar{padding: 10px; background: #D32F2F; color: #FFFFFF; position: absolute; top: 20px; left: -70px; width: 100%; text-align: center; font-weight: bold; transform: rotate(316deg); box-shadow: 3px 3px 11px -2px #000; transition: 0.5s}
.beltConcluido{padding: 10px; background: #1E88E5; color: #FFFFFF; position: absolute; top: 20px; left: -70px; width: 100%; text-align: center; font-weight: bold; transform: rotate(316deg); box-shadow: 3px 3px 11px -2px #000; transition: 0.5s}
.bloqueado:hover .beltComprar{background: #01a37d}

.cover{left: 0px; position: fixed; right: 0px; top: 0px; transition: opacity 200ms ease 0s; width: 100%; z-index: 0;}
.cover img{width: 100%}
.coverBlur{background-image: radial-gradient(farthest-side at 75% 21%, transparent, rgb(0, 0, 0)); position: absolute; inset: 0px;}

.coverTitle{position: relative; margin-top: 15px}
.coverTitle img{max-width: 30%}

.episodioList{display: flex; max-width: 100%; gap: 25px; flex-wrap: wrap;}
.episodioThumb{width: 250px; transition: 0.5s; border-radius: 8px; border: 1px solid transparent; overflow: hidden; box-shadow: 0px 15px 15px -10px #000; cursor: pointer; position: relative; background: #0003;}
.episodioThumb img{width: 100%}
.episodioThumb:hover{transform: scale(1.05); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.1);}

.episodioTitle{font-weight: regular; margin: 3px 0px; padding: 0px 5px}
.episodioTime{font-weight: light; font-size: 11px; margin-bottom: 5px; color: var(--salmaoClaro2); padding: 0px 3px}
.episodioDesc{text-align: left; font-weight: 200; padding: 0px 5px 5px 5px;}
.assistido{display: inline-block; width: 15px; margin-right: 5px; vertical-align: middle;}
.assistido svg{fill: var(--salmaoClaro2)}

.episodioDiv{display: flex; gap: 40px;}
.episodioVideo{width: calc(100vw - 400px)}
.episodioSide{width: 350px; min-heigth: 200px; background: #141c21; color: #FFFFFF; border-radius: 5px; overflow: hidden; padding: 15px}

.episodioTitulo{font-weight: bold; font-size: 18px; margin-bottom: 10px}
.episodioDescricao{font-weight: 200; font-size: 14px; margin-bottom: 15px}
.episodioAnexos{margin-bottom: 25px}
.episodioAnexosFiles{position: relative; display: flex; align-items: center; font-weight: 200; margin-top: 15px; background: #263238; padding: 5px; border-radius: 3px; cursor:pointer; transition: 0.3s; text-align: left;}
.episodioAnexosFiles:hover{background: var(--salmaoClaro);}
.episodioFileIcon{width: 25px; height: 25px; fill: #FFFFFF; margin-right: 5px;}
.episodioAcoes{display: flex; margin-bottom: 15px; justify-content: space-between; align-items: center}
.episodioAcoesBt{position: relative; background: var(--bt); color: #FFF; font-size: 12px; font-family: 'Nunito Sans', sans-serif; border: none; border-radius: 40px; padding: 5px; cursor: pointer; transition: 0.5s; outline: none; text-align: center; width: max-content; font-weight: 200; line-height: 20px;}
.episodioAcoesBt:hover{background: var(--btHover);}
	
.episodioFavoritos {position: relative; display: inline-block; width: 30px; height: 30px; margin: 10px 0px; cursor: pointer}
.episodioFavoritos input{opacity: 0; width: 0; height: 0; position: absolute}

.episodioFavoritosStar{width: 25px; height: 25px; fill: #FFFFFF; transition: 0.3s; margin-top: 3px;}
.episodioFavoritosStar:hover{fill: var(--salmaoEscuro)}
input:checked + .episodioFavoritosStar {fill: var(--salmaoClaro)}


.episodioConcluir {padding: 10px 30px; font-weight: 300; font-size: 13px; background: #00f6e2; border-radius: 20px; text-align: center; cursor: pointer; color: #141c21; width: max-content; margin: 15px auto; transition: 0.5s; display: block;}
.episodioConcluir input{opacity: 0; width: 0; height: 0; position: absolute}
.episodioConcluir:hover{background: #17f8e5; box-shadow: 1px 1px 10px 0px #FFF;}
.episodioConcluir:has(input:checked){background: #bdbdbd; box-shadow: initial;}
.episodioConcluir:before {content: "CONCLUIR EPISÓDIO";}
.episodioConcluir:has(input:checked):before {content: "EPISÓDIO CONCLUIDO";}


.favoritado{fill: var(--salmaoIntermediario)}
.episodioBtVA{width: 20px; height: 20px; fill: #FFFFFF}

.btAssistir{padding: 15px 25px; background: #FFFFFF; border-radius: 4px; width: max-content; color: #263238; transition: 0.3s; font-weight: bold; cursor: pointer; margin-top: 30px;}
.btAssistir:hover{background: #CECECE;}
.btPlay{fill: var(--salmaoIntermediario); width: 25px; height: 25px; margin-right: 8px; vertical-align: middle;}
.divAction{position: relative; margin-top: 25px; margin-left: 50px; max-width: 70%}
.divDescricao{color: #FFFFFF; font-size: 18px; margin-top: 30px}
.divEpisodios{border-top: 2px solid #FFFFFF; padding: 20px 50px; position: relative; margin-top: 40px}

/*RESPOSTAS - PERFIS*/
#respostaDiv{min-width: 1150px;}
[class^='resposta-']{white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.resposta-select{width: 30px;}
.resposta-setor{width: 160px;}
.resposta-unidade{width: 160px;}
.resposta-avaliacao{width: 290px;}
.resposta-nome{width: 240px;}
.resposta-data{width: 125px;}
.resposta-acoes{width: 115px; display: flex}
.resposta-acoes img{width: 25px; padding: 0px 5px; cursor: pointer}


/*INPUT RADIO ALTERNATIVAS*/
/* The container */
.alternativa{display: block; position: relative; cursor: pointer; font-size: 14px; color: #444; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.alternativaFlex img{width: 250px}
/* Hide the browser's default checkbox */
.alternativa input{position: absolute; opacity: 0; cursor: pointer; left: 0; width: 0px; height: 0px}

/* Create a custom checkbox */
.checkmark {display: inline-block; top: 0; left: 0; height: 20px; width: 20px; background-color: #DDDDDD; border: 1px solid #CCCCCC; border-radius: 50%; position: relative;}
.checkmark2 {display: inline-block; top: 0; left: 0; height: 20px; width: 20px; background-color: #DDDDDD; border: 1px solid #CCCCCC; border-radius: 3px; position: relative;}
	
/* On mouse-over, add a grey background color */
.alternativa:hover input ~ .checkmark {background-color: #BBBBBB;}
.alternativa:hover input ~ .checkmark2 {background-color: #BBBBBB;}

/* When the checkbox is checked, add a blue background */
.alternativa input:checked ~ .checkmark {background-color: #26c6da; border: 1px solid #0097a7;}
.alternativa input:checked ~ .checkmark2 {background-color: #26c6da; border: 1px solid #0097a7;}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after{content: ""; position: absolute; display: none;}
.checkmark2:after{content: ""; position: absolute; display: none;}

/* Show the checkmark when checked */
.alternativa input:checked ~ .checkmark:after {display: block;}
.alternativa input:checked ~ .checkmark2:after {display: block;}

/* Style the checkmark/indicator */
.alternativa .checkmark:after {left: 5px; top: 5px; width: 10px; height: 10px; background: #fff; border-radius: 50%; position: absolute}
.alternativa .checkmark2:after {left: 6px; top: 2px; width: 4px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute}
.alternativa .btDefault{background: #FF9800 !important}			

/*LOGIN*/
.loginHeader{position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.loginHeaderBack{top: 0; left: 0; width: 100%; height: 100%; filter: brightness(0.8); background: URL("/img/background-login.jpg"); background-position: center bottom; background-size: cover;}
.loginBox{position: absolute; width: 400px; max-height: calc(100% - 120px); text-align: center; background: #000000AA; border-radius: 5px; padding: 15px;}
.loginBox input, .forgotInput{max-width: 400px; border-radius: 40px; font-size: 15px !important; padding: 12px !important}
.loginBox input[type='text'], .loginBox input[type='password'], .forgotInput{border-bottom: 1px solid #AAAAAA !important;}

.loginBox img{width: 250px; margin: 25px 0px 50px 0px;}

.forgot{color: #FFFFFF; border: none; cursor: pointer; background: transparent; transition: 0.3s}
.forgot:hover{color: var(--bt);}
.loginInput {padding: 7px; width: 100%; outline: none; border: #CCC; margin-bottom: 10px; font-size: 17px; font-family: 'Nunito Sans', sans-serif;}

#flexMsg, #flexBox {position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 10000; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.85);}
.boxMsg {padding: 15px; background: #FFFFFF; color: #000; text-align: center; margin-top: 55px; position: relative;}
.close {position: absolute; top: 7px; right: 7px; width: 15px; height: 15px; background: URL('/img/close.png'); cursor: pointer; background-size: 15px;}


.creater{position: absolute; bottom: 10px; color: #FFFFFF; font-size: 13px; width: 100%; text-align: center;}
.creater a{text-decoration: none; color: #FFFFFF}

.input {font-family: 'Nunito Sans',sans-serif; background: #FFFFFF; padding: 10px; font-size: 14px; width: 100%; max-width:600px; outline: none; border: 1px solid #BBB; color: #000; border-radius: 4px;}
.input:focus {background: #FFFFFF;}
.input:disabled, .input[readonly] {background: #DDD; color: #000;}

.labelFk{padding: 5px 0px; border-radius: 5px; color: #DDD; font-size: 13px; margin-bottom: 10px; display: block; transition: 0.3s; cursor: pointer}
.labelFk:hover{background: transparent}
.labelFk .input{cursor: pointer}
.labelFk:has(.input:focus) {color: var(--primary);}

.textarea{font-family: 'Nunito Sans', sans-serif; font-size: 17px; padding: 8px; margin: 10px 0px; width: 600px; height: 100px; outline: none; border-radius: 3px; border: 1px solid #BBB;}
.maxcontent{width: max-content}


.bt{position: relative; background: var(--bt); color: #FFF; font-size: 15px; font-family: 'Nunito Sans', sans-serif; border: none; border-radius: 40px; padding: 9px 12px; cursor: pointer; transition: 0.5s; outline: none; text-align: center; margin: 0 auto; -webkit-appearance: none; width: max-content; min-width: 136px;}
.bt:hover{background: var(--btHover); box-shadow: 2px 2px 7px -2px #777}

.btVermelho{position: relative; background: #f44336; color: #FFF; font-size: 12px; font-family: 'Nunito Sans', sans-serif; border: none; border-radius: 3px; margin: 5px 10px 0px 0px; padding: 5px 20px; cursor: pointer; transition: 0.5s; outline: none; text-align: center;-webkit-appearance: none; width: max-content;}
.btVermelho:hover{background: #d32f2f; box-shadow: 2px 2px 7px -2px #777}

.btCinza{position: relative; background: #545f65; color: #FFF; font-size: 12px; font-family: 'Nunito Sans', sans-serif; border: none; border-radius: 3px; margin: 5px 10px 0px 0px; padding: 5px 20px; cursor: pointer; transition: 0.5s; outline: none; text-align: center;-webkit-appearance: none; width: max-content;}
.btCinza:hover{background: #717f87; box-shadow: 2px 2px 7px -2px #777}

.btsalmao{position: relative; background: var(--bt); color: #FFF; font-size: 12px; font-family: 'Nunito Sans', sans-serif; border: none; border-radius: 3px; margin: 5px 10px 0px 0px; padding: 5px 20px; cursor: pointer; transition: 0.5s; outline: none; text-align: center;-webkit-appearance: none; width: max-content;}
.btsalmao:hover{background: var(--btHover); box-shadow: 2px 2px 7px -2px #777}

.btVerde{position: relative; background: #11be73; color: #FFF; font-size: 12px; font-family: 'Nunito Sans', sans-serif; border: none; border-radius: 3px; margin: 5px 10px 0px 0px; padding: 5px 20px; cursor: pointer; transition: 0.5s; outline: none; text-align: center;-webkit-appearance: none; width: max-content;}
.btVerde:hover{background: #05864e; box-shadow: 2px 2px 7px -2px #777}

.footer {font-size: 14px; line-height: 25px;}

.media img {width: 20px; margin-right: 5px; vertical-align: middle;}

.div300{margin: 0 auto; width: max-content;}
.div300 img{height: calc(100% - 40px); max-width: 100%; max-height: calc(100vw - 50px);}


.box{border: 1px solid #BBB; border-radius: 3px; width: max-content; background: #FFFFFF; margin-top: 50px; overflow: hidden; position: relative}
.boxHeader{padding: 13px; background: #EEEEEE; font-weight: bold}
.boxClose{position: absolute; top: 0; right: 0; width: 24px; height: 24px; padding: 10px; cursor: pointer; transition: 0.3s;}
.boxClose:hover{background: #DDDDDD;}
.boxClose img{width: 24px;}

.boxContain{padding: 15px;}

.width50p{width: 50%; margin: 0 auto;}

/*** PAGE - MEU PERFIL ***********/
.perfilFoto{width: 250px; height: 250px; object-fit: cover; border-radius: 50%; box-shadow: 3px 3px 7px -3px #777;}
.btFotoPerfil{margin: 5px auto; color: #333; background: #FFFFFF; box-shadow: 1px 1px 5px 1px #DDD; padding: 5px; z-index: 10; width: 60px; text-align: center; border-radius: 15px; display: flex; align-items: center; gap: 3px; justify-content: center; font-weight: bold; cursor: pointer; transition: 0.3s; outline: none; border: 0px; position: relative}
.btFotoPerfil:hover{box-shadow: 0px 2px 7px -1px #555}
.btFotoImg{width: 17px;}
/*********************************/

/*** PAGE - CADASTRO USUÁRIO ***********/
.cadastroEtapas{display: flex; width: 100%; gap: 5px}
.cadastroEtapas>div{border-radius: 2px; background: #CCCCCC; width: calc(100% / 4 - 5px); margin-bottom: 10px; text-align: center; padding: 10px;}
.cadastroEtapas>div>img{width: 25px;}
.cadastroEtapas .etapaConcluida{background: var(--primary) !important}
.cadastroRequisitos{background: #FCFCFC; border: 2px solid #BBB; border-radius: 5px; padding: 10px; margin: 15px 0px;}

/*********************************/

/** PROGRESS LOAD ****************/
.progressBox{display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 10000; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.3);}
.progress{position: relative; width: 250px; height: 20px; background: #FFFFFF; border-radius: 4px; overflow: hidden; text-align: center}
.percent{z-index: 3; position: relative; line-height: 20px;}
.bar{position: absolute; top: 0; left: 0; height: 20px; width: 0px; animation: barColor 5s ease-in 0s infinite normal forwards; background: var(--primary)}
@keyframes barColor {
	0%, 50%, 100% {opacity: 1}
	25%, 75% {opacity: 0.7}
}
/*********************************/

.status{width: 5px !important; height: 20px !important; margin: 0px 5px 0px 0px !important; border-radius: 5px !important; padding: 0px !important;}
.amarelo1,.amarelo2, .laranja1, .salmao1, .salmao2, .salmao3, .salmao4, .cinza1, .cinza2, .cinza3, .laranja1, .verde1, .vermelho1, .vermelho2, .roxo1{width: 5px; height: 20px; margin: 2px 5px 0px 3px; border-radius: 5px; padding: 0px !important; text-align: center}
.amarelo1{background: #ffc107}
.amarelo2{background: #e8ae00}
.salmao1{background: #0062cc}
.salmao2{background: #0156b3}
.salmao3{background: #015290}
.salmao4{background: #17a2b8}
.cinza1{background: #999999}
.cinza2{background: #777777}
.cinza3{background: #555555}
.laranja1{background: #ff8000}
.verde1{background: #02a258}
.vermelho1{background: #e02213}
.vermelho2{background: #fd6054}
.roxo1{background: #a300a6}

/*********************************/
/*** SWITCH LIGA/DESLIGA *********/
.switch {position: relative; display: inline-block; width: 60px; height: 34px; margin: 10px 0px;}
.switch input{opacity: 0; width: 0; height: 0;}
.slider{position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; border-radius: 34px;}
.slider:before {position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; border-radius: 50%;}
input:checked + .slider {background-color: #6767f6;}
input:focus + .slider {box-shadow: 0 0 1px #2196F3;}
input:checked + .slider:before {-webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);}

/* EXEMPLO
<label class="switch">
	<input type="checkbox">
	<span class="slider"></span>
</label>
*/

/********************************/
/********************************/
.guias{display: flex; margin-bottom: 20px;
	& > div{padding: 5px 7px; background: #CCC; cursor: pointer; border-right: 1px solid #EEEEEE; font-size: 13px;
		&:hover{background: #DDD}
	}
	& .ativa{background: #DDD; border-bottom: 2px solid #6767f6;}

}

/* FONE MASK */
.iti__selected-dial-code, .iti__dial-code, .iti__country-name{color: #000000}