:root{
    /* PALETA ID VISUAL JEISA */
    --dark-brown: #322923;
    --light-brown: #BF9972;
    --black: #000000;
    --white: #ffffff;
    --orange: #F68D2E;
	--orange-light: #FFDFBF;
    --beige: #EFDBB2;
    --gray: #F3F3F3;
	--green: #2ECC71;
}

* {
 margin: 0px;
 padding: 0px;
}

*{
    font-family: 'Poppins', sans-serif;
	font-size: 12px;
}

a {
    color:#444444;
    transition: all 0.3s;
	text-decoration: none;
}

a:hover{
    color: black;
	text-decoration: none;
}

/* FONTES */

black12{
color: var(--black);
font-size: 12px;
font-weight: normal;
}

black14{
color: var(--black);
font-size: 14px;
font-weight: normal;
}

black25{
color: var(--black);
font-size: 25px;
font-weight: normal;
}

/* */
/* INDEX */ 
/**/

#loadingData {
position:fixed;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
display:none;
background-color:#000;
font-family:myriad;
color:#FFFFFF;
font-size: 20px;
opacity:50;
z-index:999;
}

#pageBody {
	position:relative;
	margin:0px;
	top:0px;
	left:0px;
	width: 100vw;
	max-width: 100vw;
	height: auto;
}

#popupWindow {
	position: absolute;
	float: left;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	z-index: 1000;
	display: none;
}

#popupWindow-mask {
	;osition: relative;
	top: 0px;
	background-color: black;
	width: 100%;
	height: 100%;
	z-index: 1001;
	opacity: 0.8;
}

#popupWindow-fileOptions, #popupWindow-appMsgIOS, #popupWindow-appMsgAndroid  {
	position: absolute;
	top: 100px;
	z-index: 1002;

	--widthA: calc(100vw - 350px);
 	--widthB: calc(var(--widthA) / 4);
	left: var(--widthB);
	
	background-color: white;
	width: 350px;
	height: auto;
	padding: 20px;
	opacity: 1;
	display: none;

}

/*  */
/* BARRA DO TOPO */
/*  */

#containerTop {
	position:fixed;
	width: 100%;
	height: 50px;
	background-color: var(--white);
	z-index: 2000;
	border-bottom: 1px solid #CDCDCD;
}

/* BOTAO DE ABERTURA DO MENU E NOME DO CURSO */

#cTop-menuBox {
	position:relative;
	width: 300px;
	height: 50px;
	display: inline-block;
}

#cTop-menuBox-menuLogo {
	position:relative;
	width: 60px;
	height: 50px;
	line-height: 50px;
	display: inline-block;
	color: var(--black);
	vertical-align: top;
}

#cTop-menuBox-courseName {
	position:relative;
	width: 200px;
	height: 50px;
	line-height: 50px;
	font-size: 22px;
	display: inline-block;
}

/* MENU DE USUARIO */

#cTop-userMenu {
	position:relative;
	float:right;
	right:0px;
	width: 70px;
	height: 50px;
	display: inline-block;
}

#cTop-userMenu-logo {
	position:relative;
	width: 50px;
	height: 50px;
	line-height: 50px;
	color: var(--black);
}

#cTop-userMenu-menuBox {
	position:absolute;
	float:right;
	top:50px;
	right:20px;
	width: 200px;
	height: auto;
	border: 1px solid #CDCDCD;
	padding: 10px;
	display: none;
}

.cTop-userMenu-options {
	position:relative;
	width: 100%;
	height: auto;
	line-height: 40px;
	display: inline-block;
}

/*  */
/* MENU LATERAL ESQUERDO */
/*  */

#containerMenu {
	position:fixed;
	float:left;
	top:50px;
	left:0px;
	width: 250px;
	height: 100vh;
	border-right-style: 1px solid #CDCDCD;
	display: none;
	overflow-y: auto;
	background: url(../imgs/bg-menu-v2.png);
	background-repeat: repeat-y;
	background-size: auto;
	z-index: 10;
}

#cMenu-info {
	position:relative;
	width: 100%;
	height: auto;
	padding-top: 20px;
	padding-bottom:  20px;
	border-bottom: 1px solid #CDCDCD;
}

#cMenu-courseList {
	position:relative;
	width: calc(100% - 20px);
	height: auto;
	padding-top: 20px;
	padding-bottom:  20px;
	background-color: white;
}

.cMenu-courseList-options {
	position:relative;
	width: 90%;
	height: 30px;
	color: var(--dark-brown);
	line-height: 30px;
	padding-left: 5px;
}

#cMenu-infoChart {
	position:relative;
	width: 60px;
	height: 60px;
	display: inline-block;
	padding-right: 20px;
}

#cMenu-infoDetails {
	position:relative;
	width: calc(100% - 90px);
	height: 60px;
	line-height: 25px;
	color: white;
	display: inline-block;
	vertical-align: middle;
}

.cMenu-options {
	position:relative;
	width: 90%;
	height: 30px;
	border-radius: 10px;
	margin-top: 10px;
	color: var(--white);
	line-height: 30px;
	padding-left: 10px;
}

#cMenu-infoLicense {
	position:relative;
	width: 100%;
	height: auto;
	color: white;
	line-height: 20px;
	padding-left: 20px;
}

/* */
/* TELAS */
/* */

#containerScreen {
	position:relative;
	left:0px;
	top:50px;
	width: 100vw;
	max-width: 1170px;
	height: auto;
	min-height: calc(100vh - 100px);
	display: inline-block;
	vertical-align: top;
	background-color:#F4F4F4;
	padding-bottom: 20px;
}

/* RODAPE */

#containerBottom {
position: relative;
top: 50px;
width: 100%;
height: 50px;
line-height: 50px;
color: white;
background-color: black;
font-weight: bold;
display: inline-block;
}

/* LISTAGEM DE MODULOS */

#screen-moduleList {
	position:relative;
	width: calc(100% - 20px);
	height: auto;
	min-height: 100vh;
	display: inline-block;
}

#screen-moduleList-title {
	position:relative;
	width: 100%;
	height: 50px;
	line-height: 50px;
	color: #333333;
	font-weight: bold;
	display: inline-block;
}

.screen-moduleList-themeTitle {
	position:relative;
	width: 100%;
	height: 50px;
	line-height: 50px;
	color: #666666;
	font-weight: bold;
	display: inline-block;
	border-top: 1px solid #CDCDCD;
	border-bottom: 1px solid #CDCDCD;
	margin-top: 10px;
}

.screen-moduleList-moduleBox {
	position:relative;
	width: 100%;
	height: auto;
	display: inline-block;
	padding-top: 20px;
}

.screen-moduleList-modulePic {
	position:relative;
	width: 100%;
	height: auto;
	display: inline-block;
}

.screen-moduleList-moduleName, .screen-contentList-moduleName {
	position:relative;
	width: 100%;
	top:0px;
	height: 20px;
	line-height: 20px;
	color: #333333;
	font-weight: bold;
	display: inline-block;
}

.screen-moduleList-moduleDescription, .screen-contentList-moduleDescription {
	position:relative;
	width: 100%;
	height: auto;
	line-height: 22px;
	color: #666666;
	display: inline-block;
}

.screen-moduleList-moduleConcluded, .screen-contentList-moduleConcluded {
	position: relative;
	top: -12px;
	width: 100%;
	height: 5px;
	background-color:  #999999;
	display: inline-block;
}

.screen-moduleList-moduleConcludedPercent, .screen-contentList-moduleConcludedPercent  {
	position: relative;
	width: 0%;
	height: 5px;
	background-color: orange;
}

/* LISTAGEM DOS CONTEUDOS */

#screen-contentList {
	position:relative;
	width: calc(100% - 20px);
	height: auto;
	display: inline-block;
}

#screen-contentList-title {
	position:relative;
	width: 100%;
	height: 50px;
	line-height: 50px;
	color: #333333;
	font-weight: bold;
	display: inline-block;
	border-bottom-style: solid;
	border-bottom-color: #CDCDCD;
	border-bottom-width: 1px;
}

.screen-contentList-moduleBox {
	position:relative;
	width: 100%;
	height: auto;
	display: inline-block;
	margin-top: 15px;
}

.screen-contentList-modulePic {
	position:relative;
	width: 100%;
	height: auto;
	display: inline-block;
}

.screen-contentList-contentGroup-NE {
	position:relative;
	width: 100%;
	height: auto;
	display: inline-block;
}

.screen-contentList-contentBox {
	position:relative;
	width: 100%;
	height: auto;
	display: inline-block;
	background-color: white;
	border-radius: 5px;
	margin-top: 15px;
	border: solid;
	border-color: #CDCDCD;
	border-width: 1px;
}

.screen-contentList-contentBox-line {
	position:relative;
	width: 100%;
	height: auto;
	display: inline-block;
	border-bottom-style: solid;
	border-bottom-color: #CDCDCD;
	border-bottom-width: 1px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.screen-contentList-contentBox-groupIcon {
	position:relative;
	width: 40px;
	height: auto;
	display: inline-block;
}

.screen-contentList-contentBox-groupName {
	position:relative;
	width: calc(100% - 50px);
	height: auto;
	line-height: 25px;
	font-weight: bold;
	display: inline-block;
}

.screen-contentList-contentBox-concludedIcon {
	position:relative;
	width: 40px;
	height: auto;
	display: inline-block;
	vertical-align: top;
	line-height: 25px;
}

.screen-contentList-contentBox-contentName {
	position:relative;
	width: calc(100% - 90px);
	height: auto;
	line-height: 25px;
	display: inline-block;
}

.screen-contentList-contentBox-reviewIcon {
	position:relative;
	width: 30px;
	height: auto;
	display: inline-block;
	vertical-align: top;
	line-height: 25px;
}

/* CONTENT */

#screen-content {
	position:relative;
	width: 100%;
	height: auto;
	display: inline-block;
	vertical-align: top;
}

#screen-content-moduleTitleBox {
	position:relative;
	width: calc(100% - 30px);
	height: auto;
	display: inline-block;
	padding-top: 15px;
}

#screen-content-moduleTitle {
	position:relative;
	width: calc(100% - 35px);
	height: auto;
	line-height: 25px;
	color: #333333;
	font-weight: bold;
	display: inline-block;
}

#screen-content-separatorLine {
	position:relative;
	width: 100%;
	height: 1px;
	display: inline-block;
	background-color: #CDCDCD;
}

#screen-content-controlBox {
	position:relative;
	width: 90%;
	height: auto;
	display: inline-block;
	margin-top: 10px;
	margin-bottom: 10px;
}

#screen-content-controlBackButton {
position:relative;
	width: 150px;
	height: auto;
	line-height: 20px;
	display: inline-block;
	padding-top: 5px;
	padding-bottom: 5px;
	border-style: solid;
	border-color: #CDCDCD;
	border-width: 1px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	margin-right: -2px;
	background-color: white;
}

#screen-content-controlNextButton {
	position:relative;
	width: 150px;
	height: auto;
	line-height: 20px;
	display: inline-block;
	padding-top: 5px;
	padding-bottom: 5px;
	border-style: solid;
	border-color: #CDCDCD;
	border-width: 1px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	margin-left: -3px;
	background-color: white;
}

#screen-content-videoBox {
	position:relative;
	width: 100%;
	height: auto;
	display: inline-block;
	vertical-align: top;
	margin-top: -7px;
}

#screen-content-videoWithSteps, #screen-content-videoNormal {
	position:relative;
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
	display: inline-block;
	vertical-align: top;
}

#screen-content-videoStepsBox {
	position:relative;
	width: 100%;
	height: auto;
	display: inline-block;
	vertical-align: top;
}

#screen-content-videoSteps-controlBox {
	position:relative;
	width: 100%;
	height: auto;
	display: inline-block;
	margin-top: 20px;
}

#screen-content-videoSteps-backButton {
	position:relative;
	width: 130px;
	height: auto;
	line-height: 20px;
	display: inline-block;
	padding-top: 5px;
	padding-bottom: 5px;
	border-style: solid;
	border-color: #CDCDCD;
	border-width: 1px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	margin-right: -2px;
	background-color: white;
}


#screen-content-videoSteps-nextButton {
	position:relative;
	width: 130px;
	height: auto;
	line-height: 20px;
	display: inline-block;
	padding-top: 5px;
	padding-bottom: 5px;
	border-style: solid;
	border-color: #CDCDCD;
	border-width: 1px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	margin-left: -3px;
	background-color: white;
}

.screen-content-videoSteps-actualStepTitle {
	position:relative;
	width: calc(100% - 30px);
	height: auto;
	line-height: 25px;
	color: #333333;
	font-weight: bold;
	display: inline-block;
	padding-top: 20px;
}

.screen-content-videoSteps-actualStepDescription {
	position:relative;
	width: calc(100% - 30px);
	height: auto;
	line-height: 25px;
	color: #666666;
	display: inline-block;
}

#screen-content-videoSteps-allStepsTitle {
	position:relative;
	width: calc(100% - 30px);
	height: auto;
	line-height: 25px;
	color: #333333;
	font-weight: bold;
	display: inline-block;
	padding-top: 20px;
}

.screen-content-videoSteps-stepTitle {
	position:relative;
	width: calc(100% - 30px);
	height: auto;
	line-height: 30px;
	color: #333333;
	border-radius: 10px;
	display: inline-block;
}


#screen-content-concludedBox, #screen-content-reviewBox, #screen-content-textBox {
	position:relative;
	width: 95%;
	height: auto;
	display: inline-block;
	background-color: white;
	border-radius: 5px;
	margin-top:20px;
	border-style: solid;
	border-color: #CDCDCD;
	border-width: 1px;
	padding-bottom: 20px;
	-webkit-box-shadow: 0px 2px 7px 0px rgba(230,223,230,1);
	-moz-box-shadow: 0px 2px 7px 0px rgba(230,223,230,1);
	box-shadow: 0px 2px 7px 0px rgba(230,223,230,1);
	vertical-align: top;
}

#screen-content-reviewBox {
	padding-bottom: 0px;	
}

#screen-content-concludedText, #screen-content-reviewText, #screen-content-reviewOptions, #screen-content-text {
	position:relative;
	width: 90%;
	height: auto;
	line-height: 50px;
	font-weight: bold;
	color: #333333;
	display: inline-block;
}

#screen-content-notConcludedButton {
	position:relative;
	width: 90%;
	height: auto;
	line-height: 25px;
	padding-top: 5px;
	padding-bottom: 5px;
	color: white;
	background-color: #333333;
	display: inline-block;
	border-radius: 10px;
}

#screen-content-concludedButton {
	position:relative;
	width: 90%;
	height: auto;
	line-height: 25px;
	padding-top: 5px;
	padding-bottom: 5px;
	color: white;
	background-color: green;
	display: inline-block;
	border-radius: 10px;
}

#screen-content-comments {
position: relative;
width: 100%;
height: auto;
display: inline-block;
padding-top: 20px;
vertical-align: top;
}

#screen-content-comments-counter {
position: relative;
width: calc(100% - 30px);
height: 25px;
display: inline-block;
color:black;
line-height: 25px;
font-weight: bold;
}

#screen-content-comments-newCommentBox {
position: relative;
width: calc(100% - 20px);
height: auto;
display: inline-block;
padding-top: 10px;
}

.screen-content-comments-commentBox {
position: relative;
width: calc(100% - 20px);
height: auto;
display: inline-block;
background: url(../imgs/commentsBackgroundLine.png);
background-repeat: repeat-y;
background-size: auto;
}

.screen-content-comments-commentReplyBox {
position: relative;
width: calc(100% - 40px);
height: auto;
display: inline-block;
background: url(../imgs/commentsBackgroundLine.png);
background-repeat: repeat-y;
background-size: auto;
margin-left: 40px;
}

#screen-content-comments-newComment-userPicture {
position: relative;
width: 50px;
height: 50px;
line-height: 50px;
display: inline-block;
font-size: 25px;
vertical-align: top;
}

.screen-content-comments-userPicture {
position: relative;
width: 50px;
height: 50px;
display: inline-block;
vertical-align: top;
}

.screen-content-comments-userNoPicture {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
display: inline-block;
vertical-align: top;
background-color: chocolate;
line-height: 50px;
font-size: 25px;
}

.screen-content-comments-text {
position: relative;
width: calc(100% - 70px);
height: auto;
line-height: 20px;
display: inline-block;
padding-left: 10px;
}

.screen-content-comments-submit {
position: relative;
width: 100%;
height: auto;
display: inline-block;
margin-bottom: 20px;
}

.inputButtonSubmit {
position: relative;
width: 100px;
height: auto;
color: var(--white);
background-color: var(--orange);
line-height: 30px;
border-radius: 10px;
text-align: center;
margin-top: 10px;
display: inline-block;
}

.inputButtonCancel {
position: relative;
width: 100px;
height: auto;
color: black;
background-color: transparent;
line-height: 30px;
text-align: center;
margin-top: 10px;
display: inline-block;
}

.screen-content-comments-actionButtons {
position: relative;
width: calc(100% - 75px);
height: auto;
color: var(--orange);
line-height: 25px;
margin-left: 60px;
padding-bottom: 10px;
}

.screen-content-comments-replyBox {
position: relative;
width: calc(100% - 70px);
height: auto;
margin-left: 60px;
display: none;
}

/* DADOS DO USUARIO */

#screen-userData {
	position:relative;
	width: calc(100% - 30px);
	height: auto;
	min-height: 100vh;
	display: inline-block;
}

#screen-userData-titleBox {
	position:relative;
	width: 100%;
	height: auto;
	display: inline-block;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom:1px solid #CDCDCD;
}

#screen-userData-titleBox-title {
	position:relative;
	width: 100%;
	height: auto;
	line-height: 25px;
	color: #333333;
	font-weight: bold;
}

.screen-userData-dataBox {
	position:relative;
	width: 100%;
	height: auto;
	display: inline-block;
	padding-top: 15px;
	padding-bottom: 30px;
	border-bottom:1px solid #CDCDCD;
}

.screen-userData-dataInfo {
	position:relative;
	width: 100%;
	height: auto;
	display: inline-block;
	vertical-align: top;
	line-height: 25px;
}

.screen-userData-dataEditBox {
	position:relative;
	width: calc(100% - 40px);
	height: auto;
	display: inline-block;
	background-color: white;
	border-radius: 5px;
	border: 1px solid #CDCDCD;
	margin-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 30px;
-webkit-box-shadow: 0px 2px 7px 0px rgba(230,223,230,1);
-moz-box-shadow: 0px 2px 7px 0px rgba(230,223,230,1);
box-shadow: 0px 2px 7px 0px rgba(230,223,230,1);
}

.screen-userData-dataInputBoxSZ1 {
	position:relative;
	width: 100%;
	height: auto;
	display: inline-block;
	margin-left: 10px;
	padding-top: 20px;
}

.screen-userData-dataInputBoxSZ2 {
	position:relative;
	width: 100%;
	height: auto;
	display: inline-block;
	margin-left: 10px;
	padding-top: 20px;
}

.screen-userData-dataInputBoxSZ3 {
	position:relative;
	width: 100%;
	height: auto;
	display: inline-block;
	margin-left: 10px;
	padding-top: 20px;
}

.screen-userData-dataInput {
	position:relative;
	width: 90%;
	height: auto;
	display: inline-block;
	line-height: 25px;
}

#screen-userData-submitButtons {
	position:relative;
	width: 100%;
	height: auto;
	display: inline-block;
	margin-top: 15px;
	margin-bottom: 15px;
}


@media(min-width:768px) {
	
#pageBody {
	width: calc(100vw - 17px);
}

#containerMenu {
position: relative;
top:50px;
left:0px;
width: 250px;
display: inline-block;
height: 100%;
min-height: 100vh;
}
	
#containerScreen {
position:relative;
left:0px;
top:50px;
width: calc( 100% - 255px ); 
display: inline-block;
}
	
#screen-moduleList {
width: calc( 100% - 40px ); 
}
	
#screen-contentList {
width: calc( 100% - 40px ); 
}
	
.screen-moduleList-moduleBox {
width: 310px;
vertical-align: top;
margin-left: 5px;
margin-right: 5px;
}
	
.screen-contentList-moduleBox {
width: 360px;
vertical-align: top;
}
	
.screen-contentList-contentGroup-NE {
width: calc(100% - 390px);
margin-left: 20px;
}

#screen-content-videoWithSteps {
width: calc(60% - 20px);
margin-top: 30px;
}
	
#screen-content-videoNormal {
width: calc(100% - 350px);
margin-top: 30px;
}
	
#screen-content-videoStepsBox {
width: calc(40% - 20px);
}
	
#screen-content-concludedBox, #screen-content-reviewBox {
width: calc(50% - 40px);
}
	
#screen-content-reviewBox {
margin-left: 20px;
}
	
/* TELAS */

#containerLoadScreen  {
width: calc(100% - 255px);
}
	
/* MY ACCOUNT */

.screen-userData-dataInfo {
	width: 40%;
}
	
.screen-userData-dataEditBox {
	margin-top: 0px;
	margin-left: 40px;
	width: calc(55% - 40px);
}

.screen-userData-dataInputBoxSZ1 {
	width: 100%;
}

.screen-userData-dataInputBoxSZ2 {
	width: 48%;
}
	
.screen-userData-dataInputBoxSZ3 {
	width: 31%;
}
	
/* CONTEUDOS */

#screen-content-comments-newCommentBox {
	
width: calc( 100% - 40px);
	
}

.screen-content-comments-commentBox {

width: calc( 100% - 40px);
	
}
	
}

/* LOGIN */

#containerLogin {
position: relative;
width: 100%;
height: 100vh;
background-color: #102a49;
}

#containerLogin-box {
position: relative;
top:100px;
width: 300px;
height: auto;
background-color:var(--white);
border-radius: 10px;
padding-left: 20px;
padding-right: 20px;
}

#containerLogin-box-courseName {
position: relative;
width: 100%;
height: 100px;
padding-top: 30px;
padding-bottom: 30px;
}

#containerLogin-box-button {
position: relative;
width: 100%;
min-height: 60px;
line-height: 60px;
vertical-align: middle;
}

#containerLogin-box-error {
position: relative;
width: 100%;
min-height: 30px;
line-height: 30px;
vertical-align: middle;
background-color: red;
color:white;
font-size: 12px;
border-radius: 10px;
}

#containerLogin-box-success {
position: relative;
width: 100%;
min-height: 30px;
line-height: 30px;
vertical-align: middle;
background-color: green;
color:white;
font-size: 12px;
border-radius: 10px;
}

.containerLogin-box-line {
position: relative;
width: 100%;
height: 40px;
line-height: 40px;
display: inline-block;
}


.formInputClear {
width: calc(100% - 10px);
height:30px;
background-color:#F4F4F4;
border-color: var(--orange);
border-style:solid;
border-radius:10px;
font-size:12px;
padding-left:10px;
}

.formInput {
width: calc(100% - 10px);
height:30px;
background-color:#F4F4F4;
border-color: var(--orange);
border-style:solid;
border-radius:10px;
font-size:12px;
border-right:5px solid #FF3D3D;
padding-left:10px;
}

.formInputOK {
position:relative;
width: calc(100% - 10px);
height:30px;
background-color:#F4F4F4;
border-color: var(--orange);
border-style:solid;
border-radius:10px;
font-size:12px;
border-right:5px solid #B4EB45;
padding-left:10px;
}

.formButton {
position:relative;
width:90%;
height:30px;
background-color:#009213;
border-style:none;
border-radius:10px;
color:white;
font-size:14px;
}

.inputHidden {
position:relative;
width: 20px;
height: 20px;
border: 0;
text-align: center;
background: transparent;
color: white;
font-weight: bold;
}

/* TOOL PRAY CREATOR */

#screen-toolsPray {
	position:relative;
	width: calc(100% - 20px);
	height: auto;
	display: inline-block;
	vertical-align: top;
}

.screen-toolsPray-box {
	position:relative;
	width: calc(100% - 40px);
	height: auto;
	display: inline-block;
	background-color: white;
	border-radius: 5px;
	margin-top:20px;
	border-style: solid;
	border-color: #CDCDCD;
	border-width: 1px;
	padding-bottom: 20px;
	-webkit-box-shadow: 0px 2px 7px 0px rgba(230,223,230,1);
	-moz-box-shadow: 0px 2px 7px 0px rgba(230,223,230,1);
	box-shadow: 0px 2px 7px 0px rgba(230,223,230,1);
	vertical-align: top;
	padding: 20px;
}

.screen-toolsPray-boxText {
	position:relative;
	width: 100%;
	height: auto;
	line-height: 25px;
	color: #333333;
	display: inline-block;
}

/* PIE CHART */

@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.pie {
  --p:50;
  --b:10px;
  --c:darkred;
  --w:60px;
  
  width:var(--w);
  aspect-ratio:1;
  position:relative;
  display:inline-grid;
  margin:5px;
  place-content:center;
  font-size:12px;
  font-weight:bold;
  font-family:sans-serif;
}
.pie:before,
.pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.pie:before {
  inset:0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
  inset:calc(50% - var(--b)/2);
  background:var(--c);
  transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
  animation:p 1s .5s both;
}
.no-round:before {
  background-size:0 0,auto;
}
.no-round:after {
  content:none;
}

@keyframes p {
  from{--p:0}
}