@charset "utf-8";

html {
    --main-color: #4ec4dd;
    --main-second-color: #82db98;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 300;
    src: local('Ubuntu Light'), local('Ubuntu-Light'), url(font/Ubuntu/4iCv6KVjbNBYlgoC1CzjvWyNL4U.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 300;
    src: local('Ubuntu Light'), local('Ubuntu-Light'), url(font/Ubuntu/4iCv6KVjbNBYlgoC1CzjtGyNL4U.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 300;
    src: local('Ubuntu Light'), local('Ubuntu-Light'), url(font/Ubuntu/4iCv6KVjbNBYlgoC1CzjvGyNL4U.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 300;
    src: local('Ubuntu Light'), local('Ubuntu-Light'), url(font/Ubuntu/4iCv6KVjbNBYlgoC1Czjs2yNL4U.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 300;
    src: local('Ubuntu Light'), local('Ubuntu-Light'), url(font/Ubuntu/4iCv6KVjbNBYlgoC1CzjvmyNL4U.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 300;
    src: local('Ubuntu Light'), local('Ubuntu-Light'), url(font/Ubuntu/4iCv6KVjbNBYlgoC1CzjsGyN.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* cyrillic-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url(font/Ubuntu/4iCs6KVjbNBYlgoKcg72j00.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url(font/Ubuntu/4iCs6KVjbNBYlgoKew72j00.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url(font/Ubuntu/4iCs6KVjbNBYlgoKcw72j00.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url(font/Ubuntu/4iCs6KVjbNBYlgoKfA72j00.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url(font/Ubuntu/4iCs6KVjbNBYlgoKcQ72j00.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url(font/Ubuntu/4iCs6KVjbNBYlgoKfw72.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* cyrillic-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url(font/Ubuntu/4iCv6KVjbNBYlgoCjC3jvWyNL4U.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url(font/Ubuntu/4iCv6KVjbNBYlgoCjC3jtGyNL4U.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url(font/Ubuntu/4iCv6KVjbNBYlgoCjC3jvGyNL4U.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url(font/Ubuntu/4iCv6KVjbNBYlgoCjC3js2yNL4U.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url(font/Ubuntu/4iCv6KVjbNBYlgoCjC3jvmyNL4U.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url(font/Ubuntu/4iCv6KVjbNBYlgoCjC3jsGyN.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* cyrillic-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(font/Ubuntu/4iCv6KVjbNBYlgoCxCvjvWyNL4U.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(font/Ubuntu/4iCv6KVjbNBYlgoCxCvjtGyNL4U.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(font/Ubuntu/4iCv6KVjbNBYlgoCxCvjvGyNL4U.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(font/Ubuntu/4iCv6KVjbNBYlgoCxCvjs2yNL4U.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(font/Ubuntu/4iCv6KVjbNBYlgoCxCvjvmyNL4U.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(font/Ubuntu/4iCv6KVjbNBYlgoCxCvjsGyN.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  

body, header{
-webkit-text-size-adjust:none;
-webkit-user-select: none;
font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
font-weight: normal ;
font-size: 17px ;
box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
text-shadow: none !important ;

} 

input:focus{
    outline: none !important;
}

input[type=button] {
    -webkit-appearance: none;
    -moz-appearance: none;
  }
/*@font-face {
    font-family: "Remini";
    src: url(font/CFJackStory-Regular.ttf) format("truetype");
}*//*       --> moved to javascript (View.Language)/*


/*loading widget*/
.ui-loader-default{
	opacity: 0.3 !important;
}
.ui-header{
    border: none !important;
}

body {
    /* Setting body margins to 0 to have proper positioning of #container div */
    margin: 0;
    padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
    padding-top: env(safe-area-inset-top); /* iOS 11.2 */
text-shadow: none !important;
font-size:14px;
color: rgba(128,128,128, 1) ;

}

p,a,div,ui,li
{
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    text-shadow: none !important;
}
/* #container div with absolute position and 100% width and height so it takes up whole window */
#container {
position: absolute;
width: 100%;
height: 100%;
}
 textarea, select, input{
	-webkit-user-select: auto !important;
 }

p{font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;}

h2{
	font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
	color: #464040;
}

h3{
	font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
	color: #493f3f;
}
h4{
	font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
	color: #676767;
	font: 100;
	margin:0;
}
h5{
	font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
	color: rgb(200,200,200) !important;
	font-weight: 100 !important;
	font-size: 14 !important;
	margin:0;
}
a{
	text-decoration: none;
}
.center{
	text-align:center;
}
.ICSFix{
	-webkit-transform: translate3d(0,0,0);
	-webkit-transform: translateZ(0px);
    -webkit-perspective: 1000;
}
.head {
    display:table;
	font-size: 25px;
	color: rgba(255,255,255,1);
	height: 50px;
	line-height: 35px;
	/*width:100%;*/
	top:0;
	position:fixed;
	z-index:100;
    background-color: var(--main-color);
	vertical-align: middle;
    text-align: center;
}
.head > div {
        display: table-cell;
        vertical-align: top;
}
.head > div.leftButton {
    width:35px;
    box-shadow:0;
    text-shadow:none !important ;
}
    .head > div.headerButton.rightHeaderButton:last-child {
        text-shadow:none !important ;
        right: 12px;
        z-index: 103;
        top: 8px;
        width: 56px  !important;
        height:26px !important;
        text-align: center;
        text-shadow: none !important ;
        font-weight: normal !important ;
        line-height: 26px !important;
    }
.headWithSidr{
	left: 260px !important;
	-webkit-animation-delay: 0.2s;
}
.bottomSpacer{
    margin-bottom: 30px;
}
.headerRoot
{
    background-image: url('img/icons_logo_header.png') ;
    background-position: center;
    background-repeat: no-repeat;
}
.sideMenu{
    width: 290px;
    /*background-color:rgba(20, 43, 67, 0.8);*/
    /*background-color: rgba(26, 53, 87, 0.3);*/
    background-color: rgba(255, 255, 255, 1);
    /*rgba(26, 53, 87, 0.8);*/
	position:fixed;
	z-index: 999999;
	top:0px;
	left: -310px;
	height: 100%;
	text-shadow: none;
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
    border:solid 1px
}
#settingsLink img, #logoffLink img {
    margin-top:-5px;
    /*width:32px;
    height:32px;*/
}
.sideMenu > div {
    height: 100%;
    /*-webkit-overflow-scrolling: touch;
    overflow: scroll;*/
    overflow:auto;
}
.animated{
	-webkit-transition:all 0.2s ease;
	-moz-transition:all 0.2s ease;
	-o-transition:all 0.2s ease;
	-ms-transition:all 0.2s ease;
	transition:all 0.2s ease;
    -webkit-transform: translateZ(0);
}
.sideMenuAnimate{
	left: 0;
}
@media all and (-webkit-transform-3d){
	.sideMenuAnimate{
		/*left: -260px;*/
		-webkit-transform: translate3D(260px,0,0);
		-moz-transform: translate3D(260px,0,0);
		-o-transform: translate3D(260px,0,0);
		-ms-transform: translate3D(260px,0,0);
		transform: translate3D(260px,0,0);
	}
	
	.sideMenuAnimateBack{
		-webkit-transform: translate3D(-260px,0,0);
		-moz-transform: translate3D(-260px,0,0);
		-o-transform: translate3D(-260px,0,0);
		-ms-transform: translate3D(-260px,0,0);
		transform: translate3D(-260px,0,0);
	}
}
.sideMenu img {
    vertical-align: middle;
}
.sideMenu p, .sideMenu a {
    display: inline-block;
    margin: 0;
    padding-left: 15px;
    color:rgba(128,128,128, 1) ;
    text-decoration: none;
    font-size:17px !important;
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
    cursor: pointer;
    vertical-align: middle;
}
.sideMenu ul{
	list-style: none;
	margin:0;
	padding:0;
}
.sideMenu li{
	border-bottom: solid 1px #f2f2f2;
	line-height: 36px;
	height:36px;
	padding: 5px;
	position: relative;
	
}
/*.sideMenu li :active{
	background-color: rgba(255,255,255,0.5);
}*/
.sideMenu img{
	/*height: 36px;
    width: 36px;*/
    width: 21px;
    height: 21px;
	display: inline-block;
}
.sideMenu li div{
	position: absolute;
	left: 55px;
	right: 0;
	top: 4px;
	white-space: nowrap;
}
.sideMenuSubItem{
	height: 33px !important;
}
.sideMenuSubItem img{
	margin-left: 15px;
	width: 33px;
	height: 33px;
}
.sideMenuSubItem div{
	margin-left: 15px
}
.sideMenuSubItem p{
	font-size: 18px;
}
.sideMenuGroupHeading{
	/*font-size: 15px;
	text-decoration: none;
	text-shadow: none;
	background-color: rgba(255,255,255,0.5);
	padding-left: 10px;
    height: 25px;
    line-height: 25px;*/
    border:solid 1px #f2f2f2 ;
    position: relative;
}
.sideMenuGroupHeading h4{
	color: rgba(120,120,120,0.7);
	font-weight: 300;
}
.sideMenuGroupHeadingButton{

    border-radius: 10px;
    background: rgba(159,214,141,1);
    text-align: center;
    position: absolute;
    z-index: 1;
    top: -1px;
    right: 10px;
    height: 27px;
    line-height: 27px;
    box-shadow:0;
    text-shadow:none !important ;
}
.sideMenuGroupHeadingButton:active{
    opacity: 0.3;
    box-shadow:0;
    text-shadow:none !important ;
}
.sideMenuGroupHeadingButton p{
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
    font-size: 13px;
    margin-left: 13px;
    box-shadow:0;
    box-shadow:0;
    text-shadow:none !important ;
}
.sideMenuGroupHeadingButton div {
    background: white;
    width: 2px;
    height: 8px;
    position: absolute;
    left: 7px;
    top: 10px;
    box-shadow:0;
    text-shadow:none !important ;
}
.sideMenuGroupHeadingButton div:before {
    background: white;
    content: "";
    width: 8px;
    height: 2px;
    position: absolute;
    top: 3px;
    left: -3px;
    box-shadow:0;
    text-shadow:none !important ;
}
.sideMenu li:first-child{
	/*border-top: solid 1px rgb(255,255,255);*/
}
.sideMenuMsg
{
    position: absolute !important;
	/* top: 50% !important; */
	margin-top: -4px !important;
	right: 30px !important;
    left: auto !important;
    display:none;
}

.sideMenuMsg div{
	position: relative !important;
	left: auto !important;
}

.sideMenuNotification{
    position: absolute !important;
	top: 50% !important;
	margin-top: -12px !important;
	right: 30px !important;
	left: auto !important;
}
.sideMenuNotification div{
	position: relative !important;
	left: auto !important;
}
.ui-bar-f{
	font-size: 22px;
	color:rgba(255,255,255,1);
	height: 50px;
	line-height: 35px;
    width:100%;
    position:fixed !important;
	top:0;
	left: 0;
	right: 0;
	z-index:100;
	background-color: var(--main-color);
	vertical-align: middle;
    text-align: center;
}
.ui-page
{
    background-color:rgba(240,240,240, 1) !important;
}
.faceTagSelect img[data-id="999"],
#NewFrame .centerProfileImage img:first-child,
.mainFaceTagItem:not([data-id=AllChildren]) .faceTagSingleGroupImage > img,
.profileImage img[data-id="999"], .faceTagImage img[data-id="999"],
.mainFaceTagGroup:not([data-id=myKids]):not([data-id=myFollowees]) .mainFaceTagItem > img,
.invLeftFaceTag img[data-id="999"],
.invRightFaceTag img[data-id="999"] {
    background-color: var(--main-second-color);
}

#adultProfileLink
{
    height:110px;
    border-bottom:0px !important;
    /*background-color: rgba(26, 53, 87, 0.4)  ;*/
    /*background-color:rgba(128,128,128, 1) ;*/
    background-color:rgba(240,240,240, 1) !important;
}
#adultProfileLink img
{
    margin-left:10px;
    margin-top:15px;
    width:80px;
    height:80px ;
    /*background-color:#ffa741;*/
}
#adultProfileLink p
{
    margin:15px 0px 0px 50px;
    font-size:17px !important;
    font-weight:bold;
    color:rgba(128,128,128, 1) ;
}
.ui-bar-f-dlg {
    font-size: 22px;
    color: rgba(255,255,255,1);
    margin-left: -17px;
    line-height: 35px;
    position: relative !important;
    width: 344px !important;
    /*width: 90.6vw !important;*/
    margin-top: -16px;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: var(--main-color);
    vertical-align: middle;
    text-align: center;
}
.ui-icon-f-plus{
    background-image: url("img/plus_smallN.png") !important;
    z-index:100 ;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.ui-icon-f-plus {
		background-image: url("img/plus.png") !important;
        background-size: 18px 18px;
        z-index:100 ;
	}
}

.fullHeight{
	position:absolute !important;
	top:0;
	bottom:0;
	left:0;
    right:0;
}
.pageMinHeight{
	min-height: 460px !important;
}
.contentMinHeight{
    min-height: 400px !important;
}
#remini, .textHeadline
{
	text-align:center;
	z-index: 102;
	top:5px;
	font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
}
.textHeadline {
    left: 45px;
    right: 75px;
    top:0;
    line-height:50px;
    height:50px;
}

.settings{
	position:absolute;
    left: 3px;
    top: 5px;
	z-index: 105;
}

.pxPadding{
    padding: 1px !important;
    margin: 0 !important;
  }

.settings img{
    /*width:35px;
    height:30px;*/
    margin-top: 10px;
    margin-left: 6px;
    /*margin-right: 12px;
    margin-bottom: 7px;*/
}

.button{
	-webkit-box-shadow: inset 1px 1px 2px 1px rgba(0,0,0,0.5), 0 0 1px 1px rgba(255,255,255,0.3);
	border-radius: 6px;
	height: 30px;
	line-height: 20px;
	margin-top:3px;
    margin-right: 3px;
    box-shadow:0;
}
.button button{
    box-shadow:0;
    text-shadow:none !important ;
}
.headerButton{
	padding: 2px;
	position:absolute;
	z-index: 103;
    top: 0 ;
    box-shadow:0;
    text-shadow:none !important ;
    width: 56px;
    height:26px !important;
}
.headerButton:active{
	opacity: 0.5;
}
.headerButton img{
	width: 61px !important;
	height: 41px !important;
}	
.leftHeaderButton{
	left: 0;
}
.rightHeaderButton{
  
       /* padding: 8px; */
        position: absolute;
        right: 12px;
        z-index: 103;
        top: 10px;
        width: 56px !important;
        height: 26px !important;
        text-align: center;
        text-shadow: none !important;
        font-weight: normal !important;
        line-height: 26px !important;
}
.headerButton div{
        text-align: center !important;
        background-color: var(--main-color);
        border: 0.112em solid white;
        border-radius: 0.3em;
        -webkit-border-radius: 4px;
        width: 56px !important;
        height: 26px !important;
        text-align: center;
        text-shadow: none !important;
        font-weight: normal !important;
}

.headerButton div:hover {
    background-color: #45cde6 !important;
}

.headerButton p{
    margin: 0;
    color: white;
    font-size: 16px;
    width: 56px !important;
    height: 26px !important;
    text-align: center;
    text-shadow: none !important;
    font-weight: normal !important;
}

.rightButton{
    background-color:var(--main-color);
    border: 1px solid white;
    border-radius: 6px;
	-webkit-border-radius: 6px;
}

.leftButton img{	
}
.rightButton img:active, .leftButton img:active{
	opacity: 0.5;
}

.leftButton{
	/*float:left;
	display:inline;*/
	position: absolute;
	left: 0;
	padding: 1px;
    padding-right: 10px;
	z-index: 103;
}
.leftButton_skip{
	width: 67px !important;
	height: 45px !important;
}
.leftButtonSkipText{
	position: absolute;
    top: 5px;
    left: 5px;
    width: 59px;
    text-align: center !important;
    text-decoration: none;
    color: white;
    font-size: 18px;
    line-height: 35px;
    height: 35px;
}
.leftButtonSkipText p{
    margin: 0 !important;
}
.mainBackground {
	/*background-color:#fdfeff;*/
    /*background-color: rgba(100,100,100,0.1);*/
    background-color: #f0f0f0 ;
	
}

.noMargin {
	margin: 0px;
}
.noPadding {
	padding: 3px !important;
}
.marginSides{
	margin-left: 15px;
	margin-right: 15px;
}

.mainContent{
	/*margin-right: 5px;
	margin-left: 5px;*/
	
	margin-top: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
	/* min-height: calc(100vh - 91px) !important; */
    position: relative;
    background-color: rgba(240,240,240, 1) !important;
	/*vertical-align: center;*/
	/*
	-webkit-transform: translate3d(0,0,0);
	-webkit-transform: translateZ(0px);
	*/
	/*position:absolute;
	left:0;
	right:0;
	top:70px;
	bottom:0;
	border:double;
	overflow:scroll;
	max-width: 800px;
	*/
}

.additionalMargin{
    margin-top:110px;
}

.postList
{
    max-width: 800px;
	list-style-type: none;
    padding-left: 6px;
    padding-right: 6px;
    margin:0px;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 70px;
	background-color:#f0f0f0;
}
.postList li {
    position: relative;
    z-index:0;
    background-color:white;
}
.postListFilter{
	margin-bottom: 10px;
	min-height: 50px;
	background-color: rgba(255,255,255,0.4);
	position: relative;
	margin-top: 5px;
}
.postList p {
    /*margin: inherit !important;
    background: inherit !important;
    background: #ffffffa8;*/
}
/*.postListFilter span{*/
	/*display: inline-block;*/
	/*background-color: rgb(240,240,240);*/
	/*border-radius: 6px;*/
	/*-webkit-border-radius: 6px;*/
/*}*/
/*.postListFilter span img, .postListFilter span p{*/
	/*float:left;*/
	/*margin:3px;*/
	/*padding: 3px;*/
/*}*/
/*.postListFilterExplenation{*/
	/*position: absolute;*/
	/*left: 0;*/
	/*right: 30px;*/
	/*top: 0;*/
	/*bottom: 0;*/
	/*line-height: 30px;*/
	/*text-align: center;*/
	/*opacity: 0.5;*/
	/*font-size: 14px;*/
/*}*/
.postListFilterButton{
    width: 43px;
    height: 43px;
    text-align: center !important;
    border: 1px solid rgb(200,200,200);
    border-radius: 10px;
    padding-top: 3px;
}
.postListFilterButton:active{
    background-color: #7ca7d0;
}
.postListFilterButton img{
    opacity: 0.6;
    width: 12px;
    height: 12px;
}
.postListFilterButton p{
    margin: 0px;
    font-size: 10px;
    text-decoration: none;
    text-shadow: none;
    margin-top: -1px;
    color: rgb(180,180,180);
    line-height: 10px;
}
.postListFilterButtonSelected{
    background-color: #abd5f5;
}
.postListFilterButtonSelected p, .postListFilterButton p:active{
    color: rgb(100,100,100) !important;
}

.tagFilter{
    display: inline-block;
    background: rgba(180,180,180,0.2);
    border-radius: 5px;
    padding: 2px;
    margin: 1px;
    text-shadow: none;
}
.tagFilter img{
    width: 11px;
    height: 11px;
}
.tagFilter p{
    display: inline;
    font-size: 12px;
    color: rgba(0,0,0,0.4);
    margin-left:2px;
}

.tagFilter span{
    margin-left: 10px;
    background-color: rgba(220,220,220,1);
    border-radius: 10px;
    width: 17px;
    text-align: center !important;
    opacity: 0.7;
    height: 17px;
    line-height: 17px;
    display: inline-block;
    color: rgba(0,0,0,0.4);
}
.tagFilter span:active{
    opacity: 0.3;
}
.tagFilter a{
    color: rgba(0,0,0,0.4);
}

.searchTagContainer{
    margin-right: 61px;
}
.searchTagAddButton{
    width: 45px;
    height: 30px;
    border: rgb(200,200,200) 1px solid;
    position: absolute;
    right: 16px;
    top: 22px;
    text-align: center !important;
    line-height: 12px;
    font-size: 11px;
    color: rgb(150,150,150);
    border-radius: 5px;
    padding: 3px;
}
.searchTagAddButton img{
    width: 15px;
    height: 15px;
}
.searchTagAddButton p{
    margin: 0;
    color: rgb(150,150,150);
    font-weight: 100;
}

.feedDisplays{
    position: absolute;
    right: 0;
    top: 0;
    width: 90px;
    bottom: 0;
}
.feedDisplayOption{
    width: 43px;
    height: 43px;
    text-align: center !important;
    float: left;
    border-top: 1px solid rgb(200,200,200);
    border-bottom: rgb(200,200,200) 1px solid;
    border-left: 1px solid rgb(200,200,200);
    border-radius: 10px 0 0 10px;
    padding-top: 3px;
}
.feedDisplayOption:active {
    background-color: #7ca7d0;
}
.feedDisplayOption img{
    opacity: 0.5;
    width: 12px;
    height: 12px;
}
.feedAssessmentDownload
{
    margin-left:6px;
}
.feedBarDownload
{
    margin-left:6px;
}
.galleryDisplayOptionSelected
{
    margin-left:6px;
}
.feedDisplayOptionSelected{
    background-color: #abd5f5;
    margin-left:6px;
}
.feedDisplayOptionSelected p, .feedDisplayOption p:active{
    color: rgb(100,100,100) !important;
}
.feedDisplayOptionLeft{
    border-left: 1px solid rgb(200,200,200);
    border-radius: 10px 0 0 10px;
}
.feedDisplayOptionRight{
    border-radius: 0 10px 10px 0;
    border-right: 1px solid rgb(200,200,200);
}
.feedDisplayOption p{
    margin: 0px;
    font-size: 10px;
    text-decoration: none;
    text-shadow: none;
    margin-top: -1px;
    color: rgb(180,180,180);
    line-height: 10px;
}
.feedEmptySuggestUpload{
    position: fixed;
    top: 280px;
    bottom: 95px;
    text-align: center !important;
    right: 0;
    left: 0;
    opacity: 0.3;
    max-height: 400px;
    font-size: 14px;
}
.feedEmptySuggestUpload img{
    max-height: 100%;
    position: absolute;
    margin-left: 20px;
    left: 50%;
}
.feedEmptySuggestUpload > div{
    position: absolute;
    width: 100px;
    left: 50%;
    margin-left: -85px;
    bottom: 50%;
    margin-bottom: -40px;
    text-align: center !important;
}
.feedEmptySuggestUpload p{
    margin: 0;
}
.feedEmptySuggestUploadTags{
    margin: 0;
    display: inline-block;
    width: 60px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.background{
	background-color:white;
}
.insetBackground{
	background-image:url("img/texture6.png");
	box-shadow: inset 0 -2px 2px 0 rgba(0,0,0,0.5), inset 0 2px 2px 0 rgba(0,0,0,0.5);
	-webkit-box-shadow: inset 0 -2px 5px 3px rgba(0,0,0,0.5), inset 0 2px 5px 3px rgba(0,0,0,0.5);
	-o-box-shadow: inset 0 -2px 2px 0 rgba(0,0,0,0.5), inset 0 2px 2px 0 rgba(0,0,0,0.5);
	-mox-box-shadow: inset 0 -2px 2px 0 rgba(0,0,0,0.5), inset 0 2px 2px 0 rgba(0,0,0,0.5);
	border-bottom: 2px solid #fff;
	border-top: 2px solid #fff;
		
}
.postContainer{
	margin-bottom:20px;
/*	margin-left:2px;
	width: 466px;*/
	padding:5px;
	
	
    
	
	 /*box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.4),inset 0 0 2px 2px rgba(255,255,255,0.8);
    -moz-box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.4),inset 0 0 2px 2px rgba(255,255,255,0.8);
    -webkit-box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.4),inset 0 0 2px 2px rgba(255,255,255,0.8);
	*/
	
	/*border: 1px solid #9ba4ac;*/
}

.postSuggestion{
    margin-bottom: 20px;
    padding: 5px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 2px dashed rgb(220,220,220);
    margin-left: 5%;
    margin-right: 5%;
}
.postSuggestionActive:after {
    content: "";
    background-color: #7ca7d0;
    position: absolute;
    top: 0;
    right: 5%;
    left: 5%;
    bottom: 0;
    opacity: 0.5;
}
.postSuggestionPlus{
    position: relative;
    height: 50px;
}
.postSuggestionPlus>div{
    background: rgb(240,240,240);
    border: 1px dashed rgb(200,200,200);
    width: 10px;
    height: 50px;
    position: absolute;
    margin-left: -5px;
    left: 50%;
    top: 0;

}
.postSuggestionPlus>div:before{
    background: rgb(240,240,240);
    border: 1px dashed rgb(200,200,200);
    content: "";
    width: 50px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -5px;
}

.postHeader{
	width: 100%;
	white-space:nowrap;
    position:relative;
    height: 75px;
}

.postSettings {
    margin: 5px 10px 0 0;
    height: 24px;
    text-shadow: none;
    font-size: 14px;
    color: rgba(128,128,128, 0.7);
    /*position: absolute;
    top: 55px;
    left: 12px;*/
}

.postSettings img{
	width: 20px;
	height: 20px;	
}

.postSettingTime img{
	float: right;
	margin-top: 3px;
	margin-right: 5px;
	opacity: 0.4;
	width: auto;
	height: auto;
}

.postHeaderIconWrapper{
    height: 40px !important;
}
.postHeaderIcon{
    max-height: 80%;
    opacity: 0.6;
    height: auto !important;
    width: auto !important;
    float: left;
}
.postHeaderIconWrapper p{
    float: left;
    margin: 0;
    line-height: 32px;
    color: rgb(160,160,160);
    font-size: 13px;
}

.postContextMenu{
	position: absolute;
	height:0px;
	top:40px;

	background-color:rgba(255,255,255,0.8);
	width: 160px;
	padding: 7px;
	border-radius-top-left: 150px;
	-webkit-border-top-right-radius: 15px;
	-webkit-border-bottom-right-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	-ms-border-radius: 15px;
	
	box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.4), inset 5px 5px 5px 0 rgba(0,0,0,0.4);
	-webkit-box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.4), inset -1px -1px 3px 0 rgba(0,0,0,0.6), inset 1px 1px 3px 0 rgba(255,255,255,1);
	
	z-index:100;
}
.postContextMenu:after{
	position:absolute;
	top:-20px;
	left: -1px;
	z-index: 100;

	content: "";
	width: 0;
	height: 0;
	
	border-bottom: 20px solid rgba(255,255,255,0.8);	
	border-left:15px solid transparent;
	border-right:15px solid transparent;
}
.postContextMenu ul a{
	list-style:none;	
	display:inline;
	line-height: 25px;	
	font-family:Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
	font-size:14px;
	text-decoration:none;
	color:rgba(0,0,0,0.5);
	margin:0px;
	padding:0px;
	z-index: 100;
}
.postContextMenu li p{	
	padding:0px;
	margin:0px;
	z-index: 100;
}
.postContextMenu img{
	float:left;
	margin-right: 8px;
	width:25px;
	height: 25px;
	vertical-align:middle;
	opacity:0.8;
	z-index: 100;
}
.postContextMenu hr{	
  	border: 0;
    height: 1px;
	background-image: 		 linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0)); 
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0)); 
		z-index: 100;
}

.postTime {
    float: right;
    padding-right: 1px;
}

.faceTagImage{
	z-index:1;
	text-align: center !important;
	position: relative;
}

.faceTagImage img
{
    background-color: #eeeeeead;
}

.faceTagName{
	margin: 0;
	position: absolute;
	top: 0;
	white-space: normal;
	overflow: hidden;
	text-overflow: clip;
	z-index: 2;
	font-size: 10px;
	width: 95%;
}

.faceTagImage img{
	width: 37px;
	height: 37px;
	
	/*Rounded corners:*/
	/*border-radius: 0px 15px 0px 15px; */
	/*-moz-border-radius: 0px 15px 0px 15px; */
	/*-webkit-border-radius: 0px 15px 0px 15px;*/

	/*Shadow:*/
	/*filter: progid:DXImageTransform.Microsoft.gradient( 		startColorstr='#be94e3', endColorstr='#4c4254',GradientType=0 );*/
	 /* IE6-8 */
	/*-webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4);*/
	/*box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4);*/
	/*border: solid 1px rgba(200,200,200,1);*/
	vertical-align:middle;
	z-index:1;
}

.faceTagImageLock{
	position: absolute;
	width: 30px !important;
	height: 30px !important;
	right: -10px;
	box-shadow: 0 0 0 0 ! important;
	border-radius: 0 !important;
	bottom: -7px;
    border: none !important;
}


.faceTagLeftDiv{
	float:left;
	display:block;
	width:33px;
    z-index:1;
    margin-top:11px;
    margin-left: 8px;
}

.postArrowDiv {
	display:inline-block;
	z-index:1;
	margin-left:4px;
}

.postArrowDiv img{
	vertical-align:middle;
	z-index:1;
}

.postArrowDiv  > span 
{ 
    margin-left:6px;
    text-overflow: ellipsis;
    font-weight:700;
    font-size: 26px;
    vertical-align: middle;
    color:rgba(128,128,128, 1);
}

.faceTagRightDiv{
	/*float:right;*/
	position: absolute;
	right:0;
	top:50%;
	margin-top: -26px;
	z-index:1;
}
.faceTagRightDiv img{
	/*width: 33px;
	height: 33px;*/
    z-index:100;
    margin-left: 10px;
}
.postQuickTag.buttonBackground.nox a img {
    width: 22px !important;
    height: 22px !important;
}
.faceTagRightDiv img:active {
    opacity: 0.5;
}
.faceTagDivContainer{
    width: 100%;
    z-index: 1;
    height: 70px;
    position: relative;
    padding-bottom: 3px;
}

.faceTagCenterIscrollWrapperDiv{
	overflow:hidden;
	position:absolute;
	top:11px;
	right:0;
	left:84px;
	right:56px;
	height:39px;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.faceTagCenterIscrollWrapperDivNoIscroll{
    overflow: scroll !important;
}
.faceTagCenterIscrollWrapperDivNoIscroll::-webkit-scrollbar {display:none;}

.faceTagCenterDiv {
	display:block;
	padding:1px;
	z-index:1;
	position: absolute;
}
.faceTagCenterDiv ul{
	list-style: none;
	padding:0;
	margin:0px;
	z-index:1;
	float:left;
	width:100%;
	height:100%;
}
.faceTagCenterDiv li{
	vertical-align:middle;
	display:inline-block;
	z-index:1;
	margin-left: 2px;
	margin-right: 2px;
	position: relative;
    overflow: hidden;
}
.faceTagCenterDiv img{
	vertical-align:middle;
	z-index:1;
}
.faceTagAdd{

}
.faceTagAdd p{
    position: absolute;
    bottom: 5px;
    margin: 0;
    font-size: 10px;
    width: 100%;
    text-decoration: none;
    text-shadow: none;
    color: white;
    font-weight: 100;
}

.faceTagCollectionHeader{
    position: relative;
}

.postBody{
	/*width: 472px;*/
	position:relative;
	overflow:hidden;
	/*padding:3px;*/
	margin-left: -5px;
	margin-right: -5px;
}

.postMedia
{
	z-index:5;
	position:relative;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#be94e3', endColorstr='#4c4254',GradientType=0 );
	 /* IE6-8 */
	/*-webkit-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.4);*/
	/*box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.4);*/
	display:block;
	padding:3px;

}
.postImage {
	max-width:100%;
	display:block;
	z-index:5;
	position:relative;
	margin-left: auto;
    margin-right: auto;
    border-top: solid 1px #f2f2f2 ;
    border-bottom: solid 1px #f2f2f2 ;
    margin-top: 5px;
}
img.postImage {
	margin-bottom: 8px;
}
.postImageSuggestion{
    max-width: 100%;
    max-height: 800px;
    display: block;
    z-index: 5;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
.postImageSuggestion p{
    color: rgb(160,160,160);
    margin-bottom: 5px;
    margin-top: 0;
    font-weight: 100;
}
.postTagsDiv{
	position:absolute;
	padding:10px;
	height:100%;
	width:100%;
	right:1px;
	bottom:-1px;
	z-index:7;
	
	/*
	background-image:url("tags-backN.png");
	background-repeat:no-repeat;
	background-position:right;
	*/
	overflow:hidden;
}
.postTagsDiv img{
	position:absolute;
	right: -215px;
	bottom: -215px;
	z-index:8;
	-webkit-transition: ease 0.5s;
}

.postTagsDiv ul img{
	position: relative;
	display: inline-block;
	right: 0;
	top:0;
	left:0;
	bottom:0;
	-webkit-transition: ease 0s;
}


.curl
{

position: absolute;
width: 80px;
height: 70px;
bottom:0;
right:2px;
z-index:90;
-webkit-transition: ease 0.5s;

/*
	position: absolute;
	width:63px;
	height:63px;
	bottom: -1px;
	/*right: -11px;
	right:-6px;
	z-index:100;
	/*-webkit-transform:rotate(-7deg); /* Safari and Chrome 
	-webkit-transition: ease 1s;
	*/
}
.spiralDiv{
	background-image:url("img/spiral.png");
	background-repeat:repeat-y;
	width:50px;
	min-height:120px;
	float:left;
	z-index:5;
}
.textPost{
	font-family:Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
	font-size: 17px;
	min-height:40px;
	padding: 5px 8px;
}
.textPost > p, .textPost > div {
	margin-left: 8px;
	margin-right: 8px;
}
.textPost p{
    margin:0;
    /*padding:5px;
	padding-bottom: 5px;*/
}
.textPost.rtl {
	padding-right: 6px;
}



.postTextbox .editNewPostAttachedFiles {
	margin-left: -122px; 
	direction: ltr;    
	margin-top: -5px;
}
.postTextbox.rtl .editNewPostAttachedFiles {
	margin-left: 0px; 
	margin-right: -122px; 
	direction: rtl;    
}
.postTextbox .editNewPostAttachedFiles li {
	list-style-type: none;
}
.postTextbox .editNewPostAttachedFiles a.editNewPostAttachedFileURL{
	display: block;  
	font-size: 14px;
	font-weight: normal; 
	clear: both;    
	width: 315px;    
	height: 28px; 
	line-height: 22px;
	direction: ltr;
}
.postTextbox.rtl .editNewPostAttachedFiles a.editNewPostAttachedFileURL{
	direction: rtl;
}
.postTextbox .editNewPostAttachedFiles .editNewPostAttachedFileName{
	text-overflow: ellipsis; 
	white-space: nowrap; 
	overflow: hidden; 
	max-width: 55%;
	float:left; 
}
.postTextbox.rtl .editNewPostAttachedFiles .editNewPostAttachedFileName{
	float:right; 
}
.postTextbox .editNewPostAttachedFiles li img.editNewPostFileTypeIcon {
	height:24px;
	padding-right: 4px; 
	float:left;
}
.postTextbox.rtl .editNewPostAttachedFiles li img.editNewPostFileTypeIcon {
	padding-left: 4px; 
	padding-right: 0px; 
	float:right;
}
.postTextbox .editNewPostAttachedFiles .editNewPostAttachedFileSize{
	float:left;    
	width: 80px; 
	text-align: right;
}
.postTextbox.rtl .editNewPostAttachedFiles .editNewPostAttachedFileSize{
	float: right;    
	text-align: left;
}

.postList .postDatafileWrapper {
    display: block;
    font-size: 14px;
    font-weight: normal;
    clear: both;
    width: auto;
    height: 28px;
    direction: ltr;
    line-height: 22px;
	margin: 0px 20px;
}
.postList .postDatafileWrapper.rtl {
	direction: rtl;
}
.postList .postDatafileWrapper:nth-of-type(1) {
	margin-top: 12px;
}
.postList .postDatafileWrapper.rtl {
    direction: rtl;
    text-align: right;
}
.postList .postDatafileWrapper img.feedFileTypeIcon {
    float: left;
	height: 24px;
    padding: 0px 4px;
}
.postList .postDatafileWrapper.rtl img.feedFileTypeIcon {
	float: right;
}
.postList .postDatafileWrapper .feedDatafileName {
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 250px;
	float: left;
	font-weight: normal;
}
.postList .postDatafileWrapper.rtl .feedDatafileName {
	float: right;
}
.noImage {
	background: none;
}


.textPost .dailysheetPost h1 {
	margin-top: 10px;
}
.textPost .dailysheetPost h3 {
	margin-top: 10px;
	margin-bottom: 5px;
}
.textPost .dailysheetPost .dailySubTitle {
	/* margin-left: 5px; */
}
.dailyRow {
	direction: ltr;
	text-align: left;
	line-height: 20px;
	margin-left: 5px;
}
.mealsAcc .dailyRow, .napsAcc .dailyRow, .suppliedNeededAcc .dailyRow, .diapersBathroomAcc .dailyRow, .activitiesAcc .dailyRow {
	position: relative;
    min-height: 41px;
}
.mealsAcc .dailyRow .ui-block-a,.napsAcc .dailyRow .ui-block-a,.diapersBathroomAcc .dailyRow .ui-block-a,.activitiesAcc .dailyRow .ui-block-a {
	width: 81%;
}  
.dailyRow .listItemOptions {
	height: 45px;
    overflow: hidden;
}
.dailyRow .listItemOption {
	padding: 0px 3px;
}

.galleryPostContainer{
	
}
.galleryPostContainer .galleryPost:hover{
	border: 1px solid orange;
    opacity: 0.7;
}

.galleryActions {
	padding: 2px 4px;
}
.galleryActions a {
	/*float: left;*/
	margin: 0px 6px;
}
.galleryActions.rtl a {
	float: right;
}
.galleryActions a.galleryRemove,.galleryActions a.galleryCancel {
	display: none;
}
.galleryActions a.gallerySelectAll, .galleryActions .galleryCountSelected{
	float: right;
	display: none;
	margin: 0px 6px;
	color: #38c;
    font-weight: bold;
}
.galleryActions.rtl a.gallerySelectAll, .galleryActions.rtl .galleryCountSelected{
	float: left;
}

.galleryPostContainer article {
	margin: 1px;
	border: 1px solid #eee;
	padding: 1px;
	position: relaive;
}

.galleryPostContainer article .selectPost{
	position: absolute;
    top: 6%;
    left: 7%;
    /* background: white; */
    /* width: 20px; */
    /* height: 20px; */
    /* border: 6px solid #555; */
    zoom: 1.6;
    transform: scale(1.6);
    -ms-transform: scale(1.6);
    -webkit-transform: scale(1.6);
    -o-transform: scale(1.6);
    -moz-transform: scale(1.6);
    transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}

.galleryPostContainer article.isSelected{
	opacity: 0.7;
    box-shadow: 2px 2px 4px 0px #aaa;
    border: 2px solid #999;
    margin: 0px;
}

.galleryPost{
    overflow: hidden;
    height: 100%;
    cursor: pointer;
	
	-webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    transition: 0.2s linear;
	
}
.textPostGallery{
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
    font-size: 16px;
   /* background-color: rgba(128,128,129,0.2);*/
    border: 1px solid rgb(230,230,230);
}
.textPostGallery p{
    margin: 0;
	padding: 5px 8px;
	font-size: 92%;
}
.postGalleryMedia{
    background-image: url('img/emptyFaceTag.jpg');
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
	border: 1px solid #ddd;
}

.galleryPost .dailysheetPost h1{
	font-size: 14px;
    margin: 0px;
}
.galleryPost .dailysheetPost h3{
	font-size: 12px;
    margin: 0px;
	margin-top: 5px;
}
.galleryPost .dailysheetPost .dailyRow{
	font-size: 10px;
    margin: 0px;
	line-height: 12px;
}
.galleryPost .postDatafileWrapper img.feedFileTypeIcon {
	height: 14px;
}
.galleryPost .postDatafileWrapper {
	font-size: 12px;
}
.galleryPost .postDatafileWrapper .feedDatafileName {
	line-height: 12px;
}
.galleryPost .postDatafileWrapper {
	line-height: 16px;
	/*overflow:hidden !important;
    text-overflow: ellipsis;*/
}
.galleryPost .postDatafileWrapper:nth-of-type(1) {
	margin-top: 2px;
}


.curl-change
{
	position: absolute;
	width:272px;
	height:272px;
	bottom: -15px;
	right: -15px;
	-webkit-transition: ease 0.5s;
	z-index:100;
}

.tags-back-change{
	position:absolute;
	right: -133px;
	bottom: -133px;
	z-index:9;
	-webkit-transition: ease 0.5s;
}

.fileInput{
	position: fixed;
	left: -999px;
	top: -999px;
}

.newPostTagsWrapper{
	margin-top:10px;
	margin-bottom:50px;
	position: absolute;
	top:50%;
	bottom:0;
	left:0;
	right:0;
	overflow:hidden;
	z-index:0;
    border-top: 1px solid rgba(150,150,150,0.3);
    border-bottom: 1px solid rgba(150,150,150,0.3);
    padding-bottom: 3px;
    background-color: rgb(240,240,240);
}
.newPostTagsHeadline{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 33px;
}
.newPostTagsHeadline p{
    margin: 0;
    line-height: 33px;
    text-align: center;
    color: rgb(150,150,150);
}
.newPostTagsBody {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 33px;
    bottom: 5px;
    overflow: hidden;
    border: 2px solid rgb(200,200,200);
    border-radius: 9px;
    z-index: 20;
}
.newPostTagsDiv{
	position:relative;
	/*left:5px;*/
    width: 100%;
    /*height: 100%;*/
    /*overflow: hidden;*/
	
}

.newPostTagsButton{
	position:absolute;
	top: 50%;
	margin-top: -25px;
	left: 0;
	right: 0;
	margin-left: 190px;	
	text-align:center !important;
	
}
.newPostTagsButton p{
	margin-top:-5px;
	font-weight:bold;
	color: rgba(0,0,0,0.4);
}

.newPostTagsDiv li{
	padding:6px;
}

.newPostTagsButton img:active{
	-webkit-border-radius: 50px;
	opacity: 0.5;
}

.newPostTagsButton p:active{
	color: rgba(0,0,0,0.6);
	
}
.newPostTagsButton a{
	text-decoration: none;
}

.lightGreyBorder{
	border: solid 1px rgb(220,220,220);
}

.hiddenPostTags{
	min-height: 20px;
	max-height:350px;
	width: 140px;
	position:absolute;
	bottom:0px;
	right:0px;
	visibility:hidden;
	z-index:15;
}
.hiddenPostTags li{
	max-width:115px;
}


.postTags{
	line-height: 20px;
	z-index:15;
	/*overflow:hidden;*/

}
.postTags ul{
	text-align:left;
	list-style:none;
	padding:0;
    margin:0;
	/*vertical-align:middle;*/
	/*display:table-cell;*/
}

.postTags li{

	margin-bottom:2px;
	/*
	background-image: 		 linear-gradient(rgba(240,240,240,0.5), rgba(255,255,255,0.8), rgba(240,240,240,0.5));
    background-image: -webkit-linear-gradient(rgba(240,240,240,0.5), rgba(255,255,255,0.8), rgba(240,240,240,0.5));
    background-image:    -moz-linear-gradient(rgba(240,240,240,0.5), rgba(255,255,255,0.8), rgba(240,240,240,0.5));
    background-image:     -ms-linear-gradient(rgba(240,240,240,0.5), rgba(255,255,255,0.8), rgba(240,240,240,0.5));
    background-image:      -o-linear-gradient(rgba(240,240,240,0.5), rgba(255,255,255,0.8), rgba(240,240,240,0.5));
	*/
	/*border: solid 1px rgba(170,170,170,0.3);
	
	*/
	background-color: rgba(255,255,255,0.6);
	/*border-radius: 10px;*/
	/*padding-left:10px;*/
	/*padding-right:10px;*/
	white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
	min-width: 135px;
	

}

.postTags li:active{
	/*
	background-image: 		 linear-gradient(rgba(240,240,240,0.5), rgba(255,255,255,0.8), rgba(240,240,240,0.5));
    background-image: -webkit-linear-gradient(rgba(200,200,200,0.8), rgba(255,255,255,0.5), rgba(200,200,200,0.8));
    background-image:    -moz-linear-gradient(rgba(240,240,240,0.5), rgba(255,255,255,0.8), rgba(240,240,240,0.5));
    background-image:     -ms-linear-gradient(rgba(240,240,240,0.5), rgba(255,255,255,0.8), rgba(240,240,240,0.5));
    background-image:      -o-linear-gradient(rgba(240,240,240,0.5), rgba(255,255,255,0.8), rgba(240,240,240,0.5));
	*/
	background-color: rgba(200,200,200,0.6);
}

.postTags img{
	display:inline;
	vertical-align:middle;	
}

.postTags p{
	display: inline;
	color: rgba(0,0,0,0.5);
	font-size:13px;
	padding-left: 5px;
	padding-right: 4px;
}

.privacyMargin{
    margin-top: 57px;
}
.privacySwitch{
    position: absolute;
    top: 50%;
    margin-top: 12px;
    left: 5px;
    right: 5px;
    height: 39px;
    line-height: 39px;
}

.privacySwitch > div{
    position: absolute;
    right: 5px;
    left: 100px;
}

.privacySwitch label{
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
    color: rgb(153,153,153);
    width: 100px;
    float: left;
    line-height: 40px !important;
}

.selectedTag{
}
.selectedTag p{
	font-weight:800;
	-webkit-transition: ease 0.5s;
}
.tagSelectCheckmark{
	vertical-align:top;
	margin-left: 0;
	margin-top: -10px;
	display: none;
}
.albumBackRotatedImage{
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    transform: rotate(15deg);
    zoom: 1;
}
.albumImage{
    border: 3px solid white;
    border-width: 2px !important;
    position: absolute;
    z-index: 2;
    width: 68%;
    height: 68%;
    left: 0;
    margin-left: 12.5%;
    top: 0;
    margin-top: 8.5%;
    background-image: url('img/albumThumbnail.png');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
}
.albumNewImage{
    border: 3px dashed rgb(200,200,200);
    border-width: 2px !important;
    position: absolute;
    z-index: 2;
    width: 68%;
    height: 68%;
    left: 0;
    margin-left: 12.5%;
    top: 0;
    margin-top: 8.5%;
    background-image: url('img/albumNewThumbnail.png');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
}
.albumItem{
    position: relative;
}
.albumName{
    position: absolute;
    bottom: 0;
    left: 0;
    right:0;
    text-align: center !important;
}
.albumName p{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-family:Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
    font-size: 13px;
    text-shadow: none;
    text-decoration: none;
    color: black;
    text-align: center !important;
}
.albumName p:active{
    color:black;
}
.albumBackRotatedImage{
    z-index: 1;

}
.albumThumbnailContainer{
    position: absolute;
    left: 3px;
    right: 3px;
    top: 3px;
    bottom: 3px;
}
.albumThumbnailContainer a:active{
    color: black;
}
.albumThumbnailContainer:active:after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #7ca7d0;
    opacity: 0.5;
    z-index:3;
}
.albumCount{
    z-index: 3;
    position: absolute;
    right: 15%;
    top: 5%;
}
.deleteAlbumBtn{
	z-index: 3;
	position: absolute;
	right: 52%;
	top: 30%;
}
.albumSpecial{
    position: absolute;
    top: 13%;
    right: 13%;
    left: 13%;
    bottom: 13%;
    border: 1px solid rgb(200, 200, 200);
    background-color: rgba(240,240,240,0.6);
}
.albumSpecial img{
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transition: background 0.5s linear;
    margin-top: -33px;
    margin-left: -31px;
    opacity: 0.6;
}

.postCaption{
	display:block;	
}
.postCaption p{
	font-family:Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
	font-size:16px;
	padding:0px;
	margin:0px;
}

.editNewPostTextDiv{
/*	position:absolute;
	top:0;
	bottom:50%;
	right:5px;
	left:5px;
	margin-top:50px;
	min-height:120px;
	
	font-family:Tahoma, Geneva, sans-serif;
	font-size: 14px;
	color:rgba(0,0,0,0.6);
	z-index:90;
	box-sizing: border-box;*/

    position: relative;
    height: auto;
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
    font-size: 14px;
    color: rgba(0,0,0,0.6);
    z-index: 90;
    box-sizing: border-box;
}
.editNewPostTextDiv.app {
	height: 125px;
}

.editNewPostTextDiv textarea{
	resize: none;
	min-height: 120px;
	width:100% !important;
	z-index: 1;
	
}

.editNewPostTextDiv.app textarea {
	height:100% !important;
	overflow-y: scroll !important;
}

.editNewPostTextDiv textarea::-webkit-scrollbar {
	width: 12px;
}

.editNewPostTextDiv textarea::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
}

.editNewPostTextDiv textarea::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

.editNewPostMeasureDiv p{
    margin-right: 20px;
    display:inline-block;
}
.editNewPostTextDivWithMedia {
    display: table;
    width: 98%;
    margin: 4px auto 0 auto;
    border-radius: 10px;
}
.editNewPostTextDivWithMedia textarea {
    display:table-cell;
    padding-right: 155px !important;
    box-sizing: border-box; /* Opera/IE 8+ */
    -webkit-box-sizing: border-box; /* Safari, Chrome et al  */
    -moz-box-sizing: border-box; /* Firefox */
}

.editNewPostTextDivWithMedia img, .editNewPostTextDivWithMedia video{
	/*position:absolute;
	right:5px;
	top:15px;*/
	margin-bottom:10px;
	max-width: 140px;
	max-height: 90px;
	border: 1px solid rgb(150,150,150);
	border-radius: 10px;
	margin: 5px;
	
	-webkit-box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.5);
}
#tinymce {
    padding-right:155px;
}
.mce-menubtn.mce-fixed-width span {
    width: auto !important;
}
.editNewPostTextDivWithMedia > div { border-radius:3px;}
.mce-branding-powered-by {
    display: none;
}
.imageaddmobile ul {
}
.imageaddmobile {
    bottom: 10px !important;
    height: 50% !important;
}
.imagesaddtextarea {
    position: absolute;
    z-index: 5;
    right: 10px;
    /* top: 0; */
    bottom: 1px;
    width: 152px;
    padding-bottom: 50px;
    white-space: nowrap;
    max-height: 90px;
    overflow: hidden;
    height: 40%;
}
.editNewPostTextDivWithMedia ul{
	list-style: none;
	white-space: nowrap;
	position: absolute;
	padding-left: 0;
	padding-right: 0;
    margin: 0;
	
}
.editNewPostTextDivWithMedia li{
	display: inline-block;
    position: relative;
}
.editNewPostTextDivWithMediaNewImageWrapper{
    position: relative;
    width: 80px;
    height: 80px;
    margin: 10px;
    direction: ltr;
}
.editNewPostTextDivWithMediaNewImage {
    border: 1px dashed rgb(200,200,200);
    height: 80px;
    width: 80px;
    background-color: rgb(250,250,250);
    border-radius: 1px;
}
.editNewPostTextDivWithMediaNewImageText{
    font-weight: 100;
    text-decoration: none;
    text-shadow: none;
    color: rgb(220,220,220);
    text-align: center;
    font-size: 13px;
}
.editNewPostTextDivWithMediaNewImage:active:after{
    content: "";
    background-color: #7ca7d0;
    position: absolute;
    left: 0;
    top: 0;
    bottom: -2px;
    right: -2px;
    opacity: 0.5;
}
.editNewPostTextDivWithMediaNewImage > div{
    background: rgb(240,240,240);
    border: 1px dashed rgb(220,220,220);
    width: 10px;
    height: 50px;
    position: relative;
    margin-left: 35px;
    margin-top: 17px;
}
.editNewPostTextDivWithMediaNewImage > div:before{
    background: rgb(240,240,240);
    border: 1px dashed rgb(220,220,220);
    content: "";
    width: 50px;
    height: 10px;
    position: absolute;
    top: 20px;
    left: -20px;
}
.imageLoaderContainer{
    background-color: rgba(230,230,230,0.5);
    opacity: 0;
    z-index:6 !important;
}
.imageLoader {
    top: 50%;
    left: 50%;
    margin-left: 6px;
    position: absolute;
}
.imageLoaderX{
    position: absolute;
    z-index: 6;
    left: -1px;
    top: -1px;
    background-color: rgba(150,150,150,0.8);
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    text-shadow: none;
    border-radius: 5px;
}
.postStatus{
	display:block;
	position:relative;
	/*height:45px;*/
}
.postStatusTags{

}
.postStatusTagsStatus{
    display: table-cell;
    white-space: nowrap;
}
.postStatusTagsStatus p{
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 10px;
    margin-bottom: 8px;
    color: rgb(100,100,100);
    font-size: 14px;
}
.postStatusTagsTags{
    display: table-cell;
    vertical-align: top;
    text-align: right;
    width: 100%;
}
.postStatusTagsTagsRTL{
    text-align: left;
    direction: ltr;
}
.postStatusTagsTags>div{
    margin-top: 5px;
    position: relative;
}
.postStatusTagsTags>div p{
    margin-left: 3px;
    margin-top: 0;
    margin-bottom: 0;
    color: rgb(150,150,150);
    font-size: 14px;
    font-weight: 100;
    display: inline-block;
}
.postStatusTagsTags>div img{
    opacity: 0.2;
    width: 14px;
    height: 14px;
    position: relative;
    /*top: 3px;*/
}
.postStatusOptions{
    margin-top: 1px;
}
.postStatusOptions img{
    margin-left: 7px;
    margin-right: 7px;
    width: 25px;
    height: 25px;
    /*opacity: 0.7;*/
}
.postStatusOptionsUnavailable{
    opacity: 0.3 !important;
}
.floatRight{
    float:right;

}
.floatLeft{
    float: left !important;
}
.heartSpan{
	float:left;
	line-height:25px;
	display:inline;
	margin-right: 7px;
	margin-top: 10px;

}
.heartSpan img{
	width:15px;
	height:15px;
	display:inline;
	vertical-align:middle;
}


.heartSpan p, time{
	line-height: 32px;
	display: inline;
	font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
	font-size: 14px;
	color: rgba(128,128,128, 1);
	font-weight: 100;
    vertical-align: middle;
    margin-left: 10px;
}
.removeHeart p{
    color:#e57171 !important;
    font-weight: 800 !important;
}
.removeHeart{
    opacity: 1 !important;
    width: 28px !important;
    height: 28px !important;
}
.postStatusHeart{}
.postStatusHeart img{
	position: absolute;
	right: 5px;
	top: 50%;
	margin-top: -20px;
	width: 35px;
	height: 35px;
}
.postStatusButton{
	float: right;
	color: rgb(150,150,150);
	height: 30px;
	width: 71px;
	border-radius: 5px;
	text-align: center !important;
	line-height: 30px;
	border: solid 1px rgb(200,200,200);
	margin-top: 6px;
	margin-left: 5px;
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
}
.postStatusButton img{
	opacity: 0.4;
	width: 10px;
	height: 10px;
	position: absolute;
	left: 4px;
	top: 12px;
}
.postStatusButton p{
	display: inline-block;
	text-shadow: none;
	margin-right: 4px;
	margin-left: 16px;
}
.postStatusButton a{
	color: rgb(150,150,150) !important;
	text-shadow: none;
	font-weight: 100 !important;
}
.postStatusButtonOnlyIcons{
    width: 45px;
}
.postStatusButtonOnlyIcons img{
    position: absolute;
    left: 50%;
    top: 10px;
    width:13px;
    height: 13px;
    margin-left: -7px;
}
.postQuickTag {
    color: rgb(150,150,150);
    border-radius: 5px;
    text-align: center !important;
    border: solid 1px rgb(200,200,200);
    font-size: 13px;
    white-space: nowrap;
    /*overflow: hidden;*/
    position: relative;
    padding: 7px 12px;
    margin-top: 6px;
    display: inline-block;
	cursor:pointer;
}
.buttonBackground {
   /* background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#adabab 100%);*/
}
.afloat {
    position: absolute !important;
    z-index: 6;
    right: 7px;
    top: 21px;
	box-shadow: 2px 2px 13px 1px #999;
}
.afloat.rtl {
	right: initial;
	left: 7px;
}
.postQuickTag img {
	opacity: 0.4;
    display: table-cell;
    height: 33px;
    margin-right: -7px;
    margin-left: 6px;
    margin-top: 1px;
}
.rtl .postQuickTag img{
	margin-right: 6px;
    margin-left: -7px;
}
.postQuickTag span {
	display: table-cell;
    vertical-align: middle;
    padding: 2px;
    text-align: left;
}
.rtl .postQuickTag span {
	text-align: right;
}
.postQuickTag p{
	display: inline-block;
	text-shadow: none;
	margin: 0;
	margin-right: 4px;
	margin-left: 16px;
}
    .postQuickTag a {
        color: rgb(150,150,150) !important;
        text-shadow: none;
        font-weight: 100 !important;
        display: table-row;
    }
.commentsContainer{
	display:block;
}
.commentsContainer ol{
	list-style:none;
	padding:0px;
	margin:0px;	
}
.commentsContainer li{
	margin-bottom:3px;
}
.commentDiv{
	position:relative;
	min-height:35px;
}

.commentDivEdit{
	border: 1px rgba(255,100,100,0.7) dashed;	
	position:relative;
}

.commentTrash{
	position:absolute;
	top: -15px;
	right: -15px;	
	z-index:100;
	visibility:hidden;	
}
.commentTrashEdit{
	position:absolute;
	top: -15px;
	right: -15px;	
	z-index:100;	
	visibility:visible;
}
.commentTrash img, .commentTrashEdit img{
	width:30px;
	height:30px;	
}

.commentTextDiv{
	display: block;
	margin-left: 40px;
	padding-left: 10px;
	padding-right: 10px;
	vertical-align:top;
	word-wrap: break-word;
}
.commentTextDiv p{
	/*display:inline;*/
	font-size:14px;
	font-family:Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
}
.commentCreatorSpan{
	display: block;
	font-size: 16px;
	color: #2d6194;
	font-weight: bold;
}
.commentImageSpan{
	display:block;
	float:left;
	margin-top: 4px;
	position: relative;
	text-align: center !important;
}
.commentImageSpan img{
	width:33px;
	height:33px;
	border-style:groove;
	border-width:3px;

	
	/*Rounded corners:*/
	border-radius: 0px 0px 15px 0px; 
	-moz-border-radius: 0px 0px 15px 0px; 
	-webkit-border-radius: 0px 0px 15px 0px;
}
.commentTime{
	display:block;
	text-align:right;

}
.commentTime p{
	margin-left:5px;
	font-family:Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
	font-size:13px;
	color: rgb(160,160,160);
	vertical-align:middle;
	display:inline;	
}
.commentTime img{
	width: 15px;
	height: 15px;
	vertical-align:middle;
	display:inline;
}
.newComment{
	display:block;
	padding:0px;
	width:100%;
	min-height:35px;
	vertical-align:middle;
	position:relative;
}

.newCommentTextAreaDiv{
	display:block;
	margin-right: 50px;
	
	/*position:absolute;
	top:0;
	bottom:50%;
	right:5px;
	left:5px;
	margin-top:50px;
	min-height:120px;*/
	
	font-family:Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
	font-size: 14px;
	color:rgba(0,0,0,0.6);
	z-index:1;
	box-sizing: border-box;
}
.newComment textarea{
	resize: none;
	/*position:absolute !important;
	right: 37px !important;
	left: 0px !important;
	width:auto !important;
	height: 100%;
	margin:0 !important;
	*/
	
	/*min-height: 120px;
	height:100% !important;
	width:100% !important;*/
}
.newComment img{
	/*float:right;
	vertical-align:middle;
	*/
	position: absolute;
	right: 5px;
	top:50%;
	margin-top: -20px;
	width:35px;
	height:35px;
}
/*
input, textarea { 
	vertical-align:middle;
	height: 20px;
	border-radius:6px; 
	-moz-border-radius:6px; 
	-web-kit-border-radius:6px; 
	-khtml-border-radius:6px; 
	-webkit-box-shadow: -1px -1px 2px rgba(255,255,255,0.7), inset 1px 1px 2px rgba(0,0,0,0.5), 1px 1px 2px rgba(255,255,255,0.7);
	resize:none;
	max-height:200px;
	overflow:hidden;
}
*/
#RegistrationFormsEdit .ui-content > button {
    padding: 4px;
    font-weight: normal;
    background: #E9F4FF !important;
}

#RegistrationFormsEdit .ui-content > .ui-input-text.ui-body-inherit.ui-corner-all.ui-shadow-inset {
    display: inline-block;
}

#RegistrationFormsEdit #formHtml {
    /*background: #fff !important;*/
    margin: 6px;
    margin-left: 0;
    margin-right: 0;
    padding: 5px;
   /* padding-left: 40px;
    border-radius: 5px;
    box-shadow: 0 0 1px 0px !important;*/
}

.form-bottom-row{
    display: block;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    height: 20px;
    border-top: none;
    border-top: 1px solid #ccc;
}

#RegistrationFormsEdit .formdraggableDiv {
    margin: 6px;
    margin-top: 20px;
    background-color: #fff;
    border: 1px solid grey;
}

#RegistrationFormsEdit #textBox {
    margin-left: 0px !important;
}

#RegistrationFormsEdit #formHtml div[contenteditable="true"], #postStory h3[contenteditable="true"], #postStory div[contenteditable="true"] {
    padding: 6px;
    outline-color: #999;
    outline-style: solid;
    outline-offset: -1px;
    outline-width: 1px !important;
}
#postStory h3[contenteditable="true"], #postStory div[contenteditable="true"] {
    background: #fff;
    border: 1px solid #888;
}
#RegistrationFormsEdit label.txtbox {
    font-weight: normal;
}
#RegistrationFormsEdit #formHtml .ui-btn-icon-notext {
    width: 22px !important;
    height: 22px;
}
input:focus, textarea:focus, button:focus{
	outline: none;
}
.postTextbox{
	position:relative;
}
.postTextboxLabel{
    display: table-cell;
    min-width: 120px;
    width: 120px;
    vertical-align: top;
}

.postTextboxLabel label{
	height: 35px;
	font-family:Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
	color:rgb(153,153,153);
	width: 100px;
	float: left;
	
    padding-left: 3px;
    padding-right: 3px;
	margin-top: 10px !important;
}

.postTextboxInput{
    display: table-cell;
    width: 100%;
}
.postTextboxInput .ui-slider{
	margin: 6px -4px 2px;
	width: 14em;
}
.rtl .postTextboxInput .ui-slider{
	margin: 6px 6px 3px;
}
.postTextboxInput button#attachFiles {
	padding: 8px 8px 8px 24px;
   
}
.postTextboxInput button#attachFiles.rtl {
	padding: 8px 24px 8px 8px;
   
}

.postTextboxLabelCheckTime{
    display: table-cell;
    min-width: 80px;
    width: 80px;
    vertical-align: top;
}

.postTextboxLabelCheckTime label{
	height: 35px;
	font-family:Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
	color:rgb(153,153,153);
	width: 80px;
	float: left;
	
    padding-left: 3px;
    padding-right: 3px;
	margin-top: 10px !important;
}

.postTextboxLabelCheckTime p {
    margin: auto 0;
    line-height: 18px;
    vertical-align: middle;
    display: inline-block;
}

#attachFiles img {
	position:absolute;
	top:4px;
	left:5px;
	width: 24px;
}
#attachFiles img.rtl {
	left:initial;
	right:5px;
	
}

.postTextboxInput button#AddObservation {
	padding: 3px 18px 3px 3px;
    
}
.postTextboxInput button#AddObservation.rtl {
	padding: 3px 3px 3px 18px;
}
.postTextboxInput button#AddObservation img {
	margin-right: 9px;
	margin-bottom: -4px;
	width: 26px;
}
.rtl .postTextboxInput button#AddObservation img {
	margin-right: initial;
	margin-left: 9px;
	
}
.postTextboxInput button#AddObservation .observeText {
	width: 26px;
	float:right;
	margin-top: 5px;
}
.postTextboxInput button#AddObservation.rtl .observeText {
	float:left;
}
.postTextboxLabel p {
    margin: auto 0;
    line-height: 18px;
    vertical-align: middle;
    display: inline-block;
}

#checkinoutTime
{
    vertical-align: middle ;
    margin-top: 24px;
}

.postTextboxInput button#checkinPopup {
	padding: 3px 18px 3px 3px;
    
}
.postTextboxInput button#checkinPopup.rtl {
	padding: 3px 3px 3px 18px;
}
.postTextboxInput button#checkinPopup img {
	margin-right: 9px;
	margin-bottom: -4px;
	width: 26px;
}
.rtl .postTextboxInput button#checkinPopup img {
	margin-right: initial;
	margin-left: 9px;
	
}
.postTextboxInput button#checkinPopup #checkindatetime {
	width: 26px;
	float:right;
	margin-top: 5px;
}
.postTextboxInput button#checkinPopup.rtl #checkindatetime {
	float:left;
}
.postTextboxLabel p {
    margin: auto 0;
    line-height: 18px;
    vertical-align: middle;
    display: inline-block;
}

#checkindatetime + span {
    padding-right: 30px;
  }

#checkindatetime:invalid+span:after {
    position: absolute;
    content: '✖';
    padding-left: 10px;
    padding-top: 3px;
  }
  
  #checkindatetime:valid+span:after {
    position: absolute;
    content: '✓';
    padding-left: 10px;
    padding-top: 3px;
  }

/*.ui-select*/
/*{*/
    /*width: 100% !important;*/
    /*padding: 0.4em 0!important; */
/*}*/

.faceTagSelect{
	background-color: rgba(255,255,255,0.5) !important;
	border: solid 1px rgba(255,255,255,0.8) !important;
	position:relative;
	color: #FFF;
	min-height: 100px !important;
	min-width:100px !important;
	border:double;
}
.faceTagSelect:after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: -webkit-linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,0) 75%,rgba(0,0,0,0.7) 100%);
	z-index:1;
}
.faceTagSelectBorder:after{
	box-shadow: 0 0 0 1px rgba(0,0,0,0.6) inset;
}
/*
.faceTagSelect:active:after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: -webkit-linear-gradient(rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 75%,rgba(255,255,255,0.7) 100%);

	z-index:1;
	
}
.faceTagSelect:active{
	color: rgba(0,0,0,0.5) !important;
}
*/
.faceTagSelectCheckmark{
	position:absolute;
	top:5px;
	right:5px;
	width: auto !important;
	height: auto !important;
}

.faceTagSelect img{
	width:100%;
	margin-left:auto;
}

.faceTagSelectName{
	position: absolute;
	left: 0;
	right:0;
	bottom:0;
	z-index: 2;
}
.faceTagSelectNameOldVer{
	background-color: rgba(150,150,150, 0.7);
}
.faceTagSelectName p{
    text-align: center !important;
    margin: 0;
}

.newPostDiv{
}

.profileImageContainer{
    height: 85px;
    background-color: white;
    border-bottom: 1px solid #f2f2f2;
}

.profileImageContainer h2{
    display: table-cell;
    margin: 0;
    vertical-align: top;
    width: 100%;
}
.profileImage{
	display: table-cell;
	position: relative;
	/*margin-top:10px;*/
	/*margin-bottom:15px;*/
	/*height:45px;*/
	padding-right: 5px;
    padding-left: 5px;
    padding-top: 5px;   
    /*background-color: #ffa741;*/ 
}

.profileImage img{
	width:75px;
	height:75px;
	/*position:absolute;*/
	/*left:3px;*/
	/*top:3px;*/
	
}
.profileImage a{
	position: absolute;
	left:auto;
	right:3px;
	top:3px;
	width:25px;
	height:25px;
}
.profileImage a img{

}

.profileImage h2{
	margin:0;
	margin-left: 70px;
	margin-bottom: 10px;
	margin-right: 50px;
	
}
.profileImage input{
	position:absolute !important;
	top: 50px !important;
	left: 3px !important;
	width:45px;
	
}
.profileImage div{
    position: absolute;
    top: 65px;
    width: 80px;
    text-align: center;
    left: 20px;
    color: rgb(180,180,180);
    margin-left:-17px;
}
.profileImage p{
	margin: 0;
	width: 100%;
	white-space: normal;
	overflow: hidden;
    text-overflow: clip;
    font-size: 11px !important;
    /*color: #4b4b4b;
    font-weight: 700;*/
    text-decoration: underline;
    color: deepskyblue;
    cursor: pointer;
}
.profilePageMenuContainer{
    display: table-cell;
    width:100%;
    padding-left: auto;
    padding-right: auto;
    height: 85px;
    vertical-align: middle;
}

.reminiClass
{
    background-image: url('img/icons.png') ;
    background-position-x: 15px ;
    background-position-y: 95px ;
    width:70px;
    height:70px;
    background-repeat: no-repeat ;
}
.childrenCollectionContainer{
	margin-bottom: 20px;
	margin-top:4px;
	border: 1px solid rgba(150,150,150,0.5);
	-webkit-border-radius: 20px;
	border-radius: 20px;
	position: relative;
	height: 80px;
}
.childrenCollection{
	position: absolute;
	right:70px;
	left:20px;
	top:20px;
	bottom:0;
	white-space:nowrap;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.newPostDiv{
    /*position:fixed;*/
    /*bottom:10px;*/
    /*left:50%;*/
    /*margin-left: -25px;*/
    /*z-index:100000;*/
}
.newPostDiv img{
	position:fixed;
	bottom:10px;
	left:50%;
    margin-left: -25px;
	z-index:100000;
    width: 50px;
    height: 50px;
	/*-webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.7);
	-webkit-border-radius: 50px;*/
	
	/*
	-webkit-transform: translate3D(0,0,100px);
	-webkit-transform: translateZ(100px);
	*/
}
.newPostDivText
{
	margin-left: -60px;
    /*margin-left: -1px;*/
}

.newPostOption{
    position: absolute;
    background-color: rgba(255,255,255,1);
    border-radius: 100px;
    padding: 10px;
    width: 55px;
    height: 55px;
    font-size: 15px;
    box-shadow: 0 0 15px 0px white;
    color: white;
    text-shadow: none;
    top: 80%;
    left:50%;
    margin-left: -40px;
    opacity: 0;
}
.newPostOption:active{
    background-color: #7ca7d0;
}
.newPostOptionsBack{
    bottom: 10px;
    left: 50%;
    margin-left: -25px;
    position: absolute;
    width: 50px;
    height: 50px;
}
.newPostOptionsBackRotated{
    MozTransform: rotate(405deg);
    transform: rotate(405deg);
    -webkit-transform: rotate(405deg);
}
.newPostOption p{
    margin:0;
    margin-top: 5px;
    margin-left: -8px;
    margin-right: -8px;
    white-space: nowrap;
}
.tikshortonDiv h3{
    text-align: center;
    margin-top: 10px;
}
.tikshortonDiv #sessionInfo {
    min-height: 50px !important;
    width: 262px;
}
.tikshortonDiv #description{
    min-height: 100px !important;
}
.tikshortonDiv label {
    font: bold 11pt arial !important;
}
.tikshortonDiv h3 {
    font: bold 13pt arial !important;
}
.tikshortonDiv .ui-input-text {

    display: inline-block;
    margin-left: 8px;
}
#AddNews img + .ui-input-text {
    display: none;
}
#AddNews textarea{
    min-height:200px;
}
#News ul{
    padding: 0;
}
#News li{
    list-style: none;
    position: relative;
    background: #fff;
    padding: 8px;
    font: bold 13pt arial;
    margin-bottom: 8px;
}
#News li img{
    width: 100px;
    height: 100px;
    object-fit: cover;
    vertical-align: middle;
}
#News li span{
    display: inline-block;
    padding: 0 8px;
    vertical-align: top;
    height: 84px;
    max-width: calc(100% - 116px);
}
#News li span a {
    position: absolute;
    bottom: 13px;
    font-size: 80%;
}
#OneNews .ui-content img{
    width: 100%;
}
.tikshortonDiv label[for="yes"], .tikshortonDiv label[for="no"]{

    padding: 8px 15px;
}
.tikshortonDiv.firstShow h3 ~ * {
    display: none;
}
.tikshortonDiv {
    font: 11pt arial;
    width: initial;
    min-height: 350px;
    background: #fff;
    border: 2px solid var(--main-second-color);
    border-radius: 8px;
    padding: 8px;
    min-width: 565px;
}
.wms .mainFaceTagGroupHeader .childrenAttendance,.wms #parentsAddPickUpLink, .wms #notificationsLink, .wms #calendarLink, .wms #messagingLink, .wms #volunteerLink, .wms #attendanceLink, .wms #addRegistrationFormLink, .wms #menageTeachersLink, .wms #menageChildrenLink, .wms #incidentLink, .wms #lessonsLink{
    display: none !important;
}
#Tikshorton {
    height: -webkit-fill-available;
}
#Tikshorton .ui-content {
    overflow-x: auto;
    height: -webkit-fill-available;
}
.tikshortonChildren{
    padding: 0;
}
.tikshortonChildren li {
    list-style: none;
    background: #fff;
    white-space: nowrap;
    padding: 8px 15px 8px 8px;
    color: var(--main-second-color);
    font-weight: bold;
    border: 2px solid var(--main-second-color);
    border-left: none;
    border-radius: 0 10px 10px 0;
    margin: 8px 0;
    text-shadow: none;
    cursor: pointer;
}
.tikshortonChildren li.active {
    color: #fff;
    background: var(--main-second-color);    
}
.newPostOptionPos1{
    margin-left: -28px;
    top:33%;
    opacity: 1;
}
.newPostOptionPos2{
    margin-left: 52px;
    top: 47%;
    opacity: 1;
}
.newPostOptionPos3{
    margin-left: -107px;
    top: 47%;
    opacity: 1;
}
.newPostOptionPos4{
    margin-left: -147px;
    top: 68%;
    opacity: 1;
}
.newPostOptionPos5{
    margin-left: 82px;
    top: 68%;
    opacity: 1;
}
.newPostDivImage
{
	margin-left: 0;
}
.newPostDiv input{
    position:fixed;
	bottom:17px;
	left:50%;
	z-index:100001;
	height:50px;
	width:53px;
	opacity: 0;
}
.newPostSelectBox{
    /*position: absolute !important;*/
    /*top: 50%;*/
    /*left: 5px;*/
    /*right: 5px;*/
}
.mainFaceTagItemAddItemPlus>div{
    width: 100% !important;
}
.centerProfileImage{
    margin: -90px calc(50% - 185px);
	width: calc(180px * 2);
	height: calc(180px * 2);
	border: 2px solid rgb(150,150,150);
    position: relative;
    transform: translateX(0px) translateY(0px) scale(0.5);
}
.centerProfileImage img{
	width:100%;
	height:100%;
}
.centerProfileImage div{
    width: calc(120px * 2);
    text-align: center !important;
    position: absolute;
    z-index: 1;
    top: calc(37px * 2);
    left: 50%;
    margin-left: calc(87px * 2);
}
.centerProfileImage p{
    font-family:Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
    font-size: calc(20px * 2);
    color: black;
    margin: 0;
}
.intro_centerProfileImage{
    position: absolute;
    top: calc(-7px * 2);
    max-width: calc(117px * 2) !important;
    left: calc(87px * 2);
}
.invitationChannel{
	text-align: center !important;
	margin-top:5px !important;
	padding: 15px !important;
	height: 150px;
	margin-bottom: 10px !important;
	
}
.invitationChannel h4{
	font-size: 15px;
}
.invitationChannel div{
	background: -webkit-linear-gradient(rgba(255,255,255,0.7) 0%,rgba(235,235,235,0) 100%);
	-webkit-border-radius: 20px;
	border-radius: 20px;
	padding:10px;
	-webkit-box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4);
	height: 100%;
	overflow: hidden;
}
.invitationChannel div:active{
	background-image: -webkit-linear-gradient(rgba(235,235,235,0.7) 0%,rgba(255,255,255,0) 100%);
	-webkit-border-radius: 20px;
	border-radius: 20px;
	padding:10px;
	-webkit-box-shadow: 0 0 0 0 rgba(0,0,0,0.1);
}
.invitationChannel img{
	width:70px;
	height:70px;
}
.popup{
	background-color: rgba(255,220,220,1);
	border: solid 1px rgb(200,200,200);
	-webkit-border-radius: 20px;
		border-radius: 20px;
	-webkit-box-shadow: 2px 2px 10px 0 rgba(250, 50, 50,0.5);
	text-align: center !important;
	
	
	display: block;
	
	z-index: 1;
    opacity: 0;
}
.popup p{
	margin:0;
}

#dialog, #dialog:after{
    /* overflow: auto; */
    max-height: 100%;
    max-width: 100%;
	min-height: 50px;
	min-width: 200px;
	position:fixed;
	/*padding: 10px;*/
	-webkit-border-radius: 0px;
	border-radius: 10px;
	/*top:45%;*/
    left:0;
    top:250px;
	background-color: rgba(255,255,255,1);
	border: solid 1px rgba(200,200,200,1);
	box-shadow: 0 0 10px 10px rgb(170,170,170);
	-webkit-box-shadow: 0 0 10px 5px rgb(170,170,170);
	z-index: 100001;
}
#dialogX{
	background-color: rgba(255,255,255,1);
	width: 30px;
	height: 30px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	top: -15px;
	left: -15px;
	z-index: 100000;
	position: absolute;
	-webkit-box-shadow: 0 0 10px 5px rgb(170,170,170);
	content: "";
	
}
.dialogSpinner{
    height: 60px;
}
.dialogSpinner > div{
    top:50%;
    left: 50%;
}

/*#dialog > span:first-child:before{
	left: -11px;
	width: 23px;
	height: 3px;
	top: -2px;
	background: rgb(150,150,150);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 100002;
	content: "";
	position: absolute;
}*/
/*#dialog > span:first-child:after{
	left: -2px;
	top: -12px;
	width: 3px;
	height: 23px;
	background: rgb(150,150,150);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 100003;
	content: "";
	position: absolute;
}*/


#dialogX img{
	width: 15px;
	position: absolute;
    top: 10px;
    left: 7px;
	z-index: 1000000;
	opacity: 0.2;
}

#dialog h, #dialog > div {
    text-align: center !important;
    overflow: auto;
    max-height: 70vh;
}

#dialog span h4{
    margin: 15px;
    text-align:center;
}
#dialog input{
    margin-left: 4px;
    margin-right: 4px;
}

.dialogButton{
    border-bottom: 1px solid rgb(180,180,180);
    background-color: rgb(240,240,240);
    font-size: 18px;
    font-weight: 600;
    height: 50px;
    line-height: 50px;
}
.dialogButtonBigger{
	margin: 20px;
}
.dialogButtonSpecial{
    border-top: 1px solid rgb(180,180,180);
}
.dialogButton:last-child{
    border-bottom: none;
}
.dialogButton:active{
    background-color: #7ca7d0;
    border-radius: 9px;
}
.dialogButton:hover {
    background-color: #abd5f5;
    border-radius: 9px;
}
.dialogButton p{
    margin: 0;
    color: black;
    display: inline-block;
}
.dialogButton .ui-checkbox {
    float: left;
    top: 17px;
}

.dialogButtonDisabled p{
    color: rgb(150,150,150);
}
.dialogButtonDisabled:hover, .dialogButtonDisabled:active{
    background-color: rgb(240,240,240);
}

.fullScreenImage {
    max-width: 100%;
    max-height: 100%;
}
.terms{
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 20px;
    text-shadow: none;
    color: black;
    font-size: 14px;
}
.terms a{
    color:black !important;
}

#loginImageTop{
	background-color: #f0f0f0;
	position: absolute;
	top:0;
	right:0;
	left:0;
	bottom:20px;
	
}
#loginImageBottom{
    background-color: #f0f0f0;
    position: absolute;
	height:20px;
	right:0;
	left:0;
	bottom:0;
}
#Login #loginLogo, #Start:not(.school) #loginLogo{
    position:absolute;
    width: 100%;
    margin-top:0px;
    left:0px;
	z-index:1;
    text-align: center;
    height:150px;
    background-color: var(--main-color) ;
}
#Login #loginLogo img, #Start:not(.school) #loginLogo img{
    left:50%;

    max-width: 360px;
    margin-top:51px;
}
#loginLogo p{
    left:50%;
	
	margin: 0;
	font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
	font-size: 18px;
	color: black;
    margin-top:170px;
}
#loginFields{
	margin-top:165px;
	margin-left:10px;
	margin-right:10px;
}
.faceTagListMenuButtons{
    margin-top: -20px;
    margin-bottom: 25px;
}
.faceTagListFooterTabs{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    line-height:50px;
}
.faceTagListFooterTabs > div{
    text-align:center !important;
    background-color:rgba(235,235,235, 0.9);
    border: 1px solid #7ca7d0;
    position: relative;
}
.faceTagListFooterTabActive > div{
    background-color: #abd5f5;
}
.faceTagListFooterTabActive > div:after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background-image: url('img/login_top.png');
    background-repeat: repeat;
    opacity: 0.9;
}
.faceTagListFooterTabs > div:active{
    background-color:#7ca7d0;
}
.faceTagListFooterTabs > div:hover{
    background-color:#7ca7d0;
}
.faceTagListFooterTabs p{
    margin: 0;
    text-decoration: none;
    text-shadow: none;
    color: rgb(100,100,100);
    font-weight: 100;
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
}
.invContainer{
	display:block;
	position:relative;
	padding-bottom: 10px;
	padding-top: 10px;
	border-bottom: 1px solid rgb(220,220,220);
	min-height: 60px;
    border-top: solid 1px rgba(220,220,220,0);
    cursor: pointer;

}
.invContainer:first-child{
	border-top: solid 1px rgb(220,220,220);
}

.invCheckMark{
	right:10px;
	position: absolute;
	top:10px;
	width:40px;
	height:40px;
	
}
.invLeftFaceTag{
	position: absolute;
	top: 5px;
	left: 5px;
	text-align: center !important;
}
.invLeftFaceTag img, .invRightFaceTag img{
	height: 50px;
	width: 50px;
}

.invLeftFaceTag span
{
    background-repeat: no-repeat;
    cursor: pointer !important;
   /* background: #0093ff;*/
    display: inline-block;
    width: 11px;
    height: 11px;
    /* vertical-align: middle; */
    border-radius: 8px;
    /* margin-left: -10px; */
    /* top: -10px; */
    position: absolute;
    left: 1px;
}
.invText{
	position:relative;
	margin-left: 70px;
	margin-right: 70px;
}

.invText p, .invText a{
	word-wrap: break-word;
	margin: 0;
	text-decoration: none !important;
	color: rgb(170,170,170) !important;
	font-size: 14px;
	font-weight: 100 !important;
}
.invText a
{
    float:right;
}
#childparentslist .invText a {
    float: none;
}
.invText h5{
	position: absolute;
	top: 2px;
	right: 0;
}
.invText h4{
	margin:0;
}
.postDraftSettings {
    margin-left: 50%;
    color: #fff;
    background: var(--main-color);
    padding: 3px 14px;
    border-radius: 5px;
}
.completeProfile {
    background: var(--main-color) !important;
    border: solid 1px #eee !important;
    color: #fff !important;
    border-radius: 5px !important;
    text-shadow: none !important;
    font-size: 13px !important;
    font-weight: normal !important;
    padding: 1px 6px !important;
}
.invTextSearchRamdomChild
{
    position:relative;
	margin-left: 70px;
    margin-right: 70px;
    width:350px !important;
}

.invTextSearchRamdomChild p, .invTextSearchRamdomChild a{
	word-wrap: break-word;
	margin: 0;
	text-decoration: none !important;
	color: rgb(170,170,170) !important;
	font-size: 17px;
    font-weight: 100 !important;
    width:300px !important;
}
#LessonsReportA table {
    border-collapse: collapse;
    background: #fff;
    width: 100%;
    box-shadow: 0 0 3px 0;
    margin: 8px 0;
}
#LessonsReportA span {
    background: #eec735;
    float: right;
    width: 34px;
    height: 34px;
    border-radius: 17px;
    display: inline-block;
    margin-top: -14px;
    cursor: pointer;
}

#LessonsReportA span img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin: 7px;
}
#LessonsReportA td {
    padding: 0;
    vertical-align: top;
    border: 1px solid #888;
}

#LessonsReportA .dayHead {font-weight: bold;border-bottom: 1px solid #888;padding: 5px;}

#LessonsReportA .dayDes:not(:last-child) {
    border-bottom: 1px solid #888;
}

#LessonsReportA .dayDes {
    padding: 5px;
    cursor: pointer;
    font-size: 11pt;
}
#LessonsReportB .assHead {
    font-size: 15pt;
}
#LessonsReportB .assHead span{
    float: right;
    cursor: pointer;
}
#LessonsReportB .assContent {
    background: #fff;
    padding: 6px;
    box-shadow: 0px 0px 3px 0px !important;
    border-radius: 3px;
    /* display:none; */
}
#LessonsReportB .assl2 {
    font-size: 14pt;
}
#LessonsReportB li:before {
    content: '\2218';
    margin-right: 5px;
}
#LessonsReportB li {
    font-size: 11pt;
    margin-left: 20px;
    display: inline-block;
    cursor: pointer;
}
#LessonsReportB .pAss {
    display: inline-block;
    width: calc(50% - 30px);
    margin: 15px;
    vertical-align: top;
}
#LessonsReportB .assl3 {
    font-size: 13pt;
    margin-left: 10px;
}

#LessonsReportB .assl4 {
    margin-left: 20px;
}
#Ratios #divTop{

    width: 100%;
    height: 30px;
    background-color: cornflowerblue;
}
#Ratios select {
    width: 150px;
    height: 33px;
    margin-top: 15px;
    margin-left: 26px;
    margin-right: 20px;
    padding: 5px;
    border-radius: 5px;
}
#Ratios .date {
    height: 21px;
    border-radius: 5px;
    border-width: 1px;
    padding: 5px;
}
#Ratios #print{
    position: relative;
    float: right;
    top: 13px;
    right: 13px;
    border-radius: 93px;
    border: 0px;
    width: 27px;
    height: 27px;
    background-color: #2196f3;
}
#Ratios #apply{
    position: relative;
    float: right;
    top: 15px;
    right: 35px;
    width: 57px;
    background-color: #ffca28;
    border: 0px;
    border-radius: 4px;
    height: 23px;
    color: white;
}
#Ratios #background{
    height: 459px;
    width: 98%;
    background-color: #f5f5f5;
    top: 100px;
    position: absolute;
}
#Ratios table{
    border: 0.2px solid #e0e0e0;
    border-collapse: collapse;
    /* height: 100%; */
    width: 92%;
    margin-left: 3%;
    margin-top: 20px;
    /* position: absolute; */
    background-color: white;
    box-shadow: inset 1px 1px 1px 1px #eeeeee;
}
#Ratios th {
    height: 30px;
    width: 10px;
    border: 0.2px solid #e0e0e0;
    vertical-align: middle;
    border-right: 0px;
    border-left: 0px;
    text-align: center;
}
#Ratios td {
    height: 30px;
    width: 10px;
    border: 0.2px solid #e0e0e0;
    vertical-align: middle;
    border-right: 0px;
    border-left: 0px;
    text-align: center;
}

.hideFrame li:nth-last-child(2) {
    display:none;
}
.invRightFaceTag {
    position: absolute;
    top: 5px;
    right: 5px;
    text-align: center !important;
}
.invButtons{
	position: relative;
	text-align: center !important;
}
.invNew{
	position: absolute;
	top: 6px;
	left: 0;
	background-color: #e57171;
	padding-left: 2px;
	padding-right: 2px;
	border-radius: 10px;
	opacity: 0.7;
	padding-bottom: 2px;
	color: white;
	font-size: 14px;
    z-index:3;
	
	-webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    -o-transform: rotate(315deg);
    -ms-transform: rotate(315deg);
    transform: rotate(315deg);
	
	box-shadow: 1px 1px 3px 0 black;
	-webkit-box-shadow: 1px 1px 3px 0 black;
	-moz-box-shadow: 1px 1px 3px 0 black;
}
.invNew p{
	margin: 0 !important;
	text-shadow: none;
}
/*.introPost{
	position: fixed;
	bottom: 45px;
	left: 50%;
	margin-left: -112px;
	max-width: 280px;
}*/

.invGroupCount{
    position: absolute;
    z-index: 2;
    top: 17px;
    right: 58px;
    max-width: 27px;
    background-color: rgba(253,253,253,1);
    border-radius: 10px;
    padding: 3px;
    border: 1px solid rgba(200,200,200,0.5);
    color: rgba(150,150,150,1);
}
.invGroupCount p{
    margin: 0 !important;
}

.mainFaceTagContainer{
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
}
.mainFaceTagContainer a{
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
}
.mainFaceTagContainer ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.mainFaceTagGroupHeader {
    display: table;
    width: 100%;
    height: 45px;
    line-height: 45px;
    background-color: #f0f0f0;
    position: relative;
    margin-top: -1px;
}
.mainFaceTagGroupHeader > a, .mainFaceTagGroupHeader > p {
    display: table-cell!important;
    vertical-align: middle;
    width: inherit;
    font-size:16px !important;
    font-weight: 600;
    color:rgba(128,128,128, 1) !important;
}
.mainFaceTagGroupHeader > p:first-child {
    padding-left:10px;
}
.mainFaceTagGroupHeader p{
    margin: 0;
    margin-left: 5px;
    margin-right: 5px;
    /*color: rgba(150,150,150,0.8);*/
    display: inline-block;
    font-size:16px !important;
    font-weight: 600;
    color: rgba(128,128,128, 0.8) !important;
}
.mainFaceTagGroupHeader>div {
    position: absolute;
    top: -10px;          
    right: 0;
    width: 50px;
    bottom: -10px;
}
.mainFaceTagGroupHeader>div>img{
    opacity: 0.2;
    left: 50%;
    position: absolute;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px;
}
.mainFaceTagGroupHeaderRTL>div{
    right: auto !important;
    left:0;
}
.mainFaceTagItem{
    position: relative;
    height: 100px;
    border-bottom: 1px solid rgba(240,240,240, 1);
    /*border-right: 3px solid rgba(240,240,240, 1);
    border-left: 3px solid rgba(1240,240,240, 1);*/
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    margin:0px 3px 0px 3px;
    background-color:white;
}
.mainFaceTagItemActive:after{
    content:"";
    background-color: #7ca7d0;
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    opacity:0.5;
}
.mainFaceTagItem > img {
    width: 80px;
    height: 80px;
    position: absolute;
    left: 10px;
    top: 10px;
    /*background-color: var(--main-color);
    border-radius: 10px;*/
}
.mainFaceTagItemName{
    left: 95px;
    right: 5px;
    top: 5px;
    bottom: 0px;
    position: absolute;
    padding-top: 0px;
}
.mainFaceTagItemName>p {
    margin:20px 0px 0px 6px;
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
    font-size: 17px;
}
.mainFaceTagItemRTL>img{
    left: auto !important;
    right: 5px;
}
.mainFaceTagItemNameRTL {
    /*left: auto !important;*/
    right: 95px;
    direction: rtl;
    text-align: right;
}
.mainFaceTagItemIntext{
    font-size: small !important;
    color: rgb(150,150,150);
    font-weight: lighter;
    float:right;
}
.mainFaceTagItemNotification{
    position: absolute;
    top: 50px;
    left: 110px;
    max-width: 30px;
}
.mainFaceTagItemNotificationRTL {
    left: 10px;
    right: initial;
}
.faceTagSingleGroupImage {
    width: 80px;
    height: 80px;
    position: absolute;
    left: 5px;
    top: 5px;
    /*background-color: #ffa741;
    rgba(230,230,230,0.8);*/
    /*border-radius: 10px;*/
}
.faceTagSingleGroupImage>img{
    width: 40px;
    height: 40px;
   /* border-radius: 10px;*/
    float:left;
}
.faceTagSingleGroupImageRTL{
    left: auto !important;
    right: 5px;
}
.mainFaceTagItemAddItem{
    position:relative;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 0px 3px 0px 3px;
    background-color: white;
    font-size: 20px !important;
    color: rgba(128,128,128, 1);
}
.mainFaceTagItemAddItemP{
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    height: 40px;
}
.mainFaceTagItemAddItemP p{
    margin: 0;
    overflow: hidden;
    line-height: 20px;
    font-size: 15px !important;
    color: rgba(128,128,128, 0.8) !important ;
}
.mainFaceTagItemAddItemPlus{
    position: relative;
    height: 40px;
    width: 26px;
    display:inline-block;
}
.mainFaceTagItemAddItemPlus>div{
    position: absolute;
    top: 50%;
    margin-top: -13px;
    width: 26px;
    height: 26px;
    display: inline-block;
    background-color: rgba(225,225,225,0.9);
    border-radius: 50px;
    left: 0;
  }
.mainFaceTagItemAddItemPlus>div>div{
    background: rgb(250,250,250);
    width: 3px;
    height: 13px;
    position: absolute;
    margin-left: -1px;
    left: 50%;
    top: 7px;
}
.mainFaceTagItemAddItemPlus>div>div:before{
    background: rgb(250,250,250);
    content: "";
    width: 13px;
    height: 3px;
    position: absolute;
    top: 50%;
    left: -5px;
    margin-top: -2px;
}
.introPageHeader{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	color: white;
	text-decoration: none;
	text-shadow: none;
	cursor: default;
}
.introMainPost{
	top: 20%;
	position: absolute;
	left: 0;
	right: 0;
}
.introMain{}
.introMain div{
	width: 100px;
	height: 50px;
	background-color: rgba(255,255,255,0.1);
	border: 1px solid white;
	color: white;
	border-radius: 10px;
	margin-left: auto;
	margin-right: auto;
	line-height: 50px;
}
.introMain div:active{
	background-color: rgba(255,255,255,0.3);
	box-shadow: 0 0 15px 5px white;
}
.introMainInvite{
	top: 70%;
}
.introMainInvite p{
	top: 150px;
	position: absolute;
	right: 60px;
	width: 245px;
	overflow: hidden;
}
.introMainInvite div{
	top: 240px;
	position: absolute;
	right: 132px;
}
.introMainInvite img{
	top: 63px;
	position: absolute;
	right: 98px;
}
.introPost{
    position: fixed;
    bottom: 0;
    height: 200px;
    width: 300px;
    left: 50%;
    margin-left: -150px;
}
.introPostRight{
	position: absolute;
	width: 175px;
	margin: 0;
	right: 0;
}
.introPostLeft{
	position: absolute;
	left: 0;
	width: 175px;
	margin: 0;
}
.introPost img{
	bottom: -28px;
	position: absolute;
	left: 50%;
	margin-left: -65px;
}

.introInvite{
    position: absolute;
    right: 12px;
    z-index: 103;
    top: 10px;
    width: 56px !important;
    height: 26px !important;
    text-align: center;
    text-shadow: none !important;
    font-weight: normal !important;
    line-height: 24px !important;
}
.introInvite div{
	text-align: center !important;
    background-color: var(--main-color);
    border: 0.112em solid white;
    border-radius: 0.3em;
    -webkit-border-radius: 4px;
    width: 56px !important;
    height: 26px !important;
    text-align: center;
    text-shadow: none !important;
    font-weight: normal !important;
}

.introInvite p {
    margin: 0;
    color: white;
    font-size: 18px;
    width: 56px !important;
    height: 26px !important;
    text-align: center;
    text-shadow: none !important;
    font-weight: normal !important;
}

.introOptions{
	position: fixed;
	left: 15px;
	top: 60px;
	margin-left: -15px;
	margin-top: -15px;
	max-width: 240px;
}
.intro, .intro img{
	z-index: 105;
	max-width: 100%;
	max-height: 40%;
}
.intro h3{
	font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
	font-weight: 100 !important;
}
.intro h4{
	font-weight: 100 !important;
	color: rgb(190,190,190);
}
.welcomeOption{
    text-align: center;
    position: relative;
	text-decoration: none !important;
}
.welcomeOptionHeader{
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 1;
	text-decoration: none !important;
}
.welcomeOptionHeader h1{
    font-size: 45px;
    margin: 0;
    color: black !important;
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
    text-decoration: none !important;
}
.welcomeOptionText h3{
    font-size: 20px;
    margin: 0;
    color: black !important;
     font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
    text-decoration: none !important;
}
.welcomeOptionText{
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center !important;
    z-index: 1;
    color: black !important;
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
    text-decoration: none !important;
}
.welcomeSkipToFeed{
	position: absolute;
	bottom: 0;
	right: 0;
}
.welcomeSkipToFeedButton{
	text-align: center;
	position: absolute;
	max-width: 100px;
	bottom: 0;
	top: 0;
	width: 100%;
	margin-top: 20px;
}
.welcomeSkipToFeedText{
    position: absolute;
    z-index: 5;
    top: 7px;
    bottom: 10px;
    text-decoration: none;
    left: 10px;
    width: 75px;
}
.welcomeSkipToFeed img{
	width: 100%;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
}
.welcomeSkipToFeed h4{
	margin:0;
	float: right;
	margin-bottom: 60px;
}
.welcomeSkipToFeed p{
    margin: 0;
    color: white;
    text-decoration: none;
    z-index: 2;
    font-size: 24px;
    margin-top: 12px;
}
.welcomeSkipToFeed_rtl{
	position: absolute;
	bottom: 0;
	left: 0;
}
.welcomeSkipToFeed_rtl img{
	max-width: 100px;
	position: absolute;
	left: 0;
	bottom: 0;
}
.welcomeSkipToFeed_rtl h4{
	margin:0;
	float: left;
	margin-bottom: 60px;
}
.welcomeSkipToFeed_rtl p{
    margin: 0;
    color: white;
    text-decoration: none;
    z-index: 2;
    font-size: 24px;
    margin-top: 12px;
}
.welcomeLogo img{
	max-height: 60px;
}
.fullMaxWidth img{
	max-width: 100%;
}
.welcomeButtons{
	position: absolute;
	left: 0;
	right: 0;
    top: 295px;
}
.welcomImage{
	position: absolute;
	/*left: 50%;*/
	left: 0;
	right: 0;
	top: 255px;
	/*margin-left: -65px;*/
	margin-top: -80px;
	
}
.welcomImage p{
	margin: 0;
	margin-left: 10px;
	margin-right: 10px;
	display: inline-block;
	color: white;
	text-decoration: none;
	text-shadow: none;
	direction: inherit;
}
.welcomImage img{
	display: inline-block;
	max-width: 50px;
	max-heigh: 50px;
}
.sendEmailContainer{
	position: absolute;
	top: 0;
	bottom:0;
	margin-top: 150px;
	max-width: 800px;
	left: auto;
	right: auto;
	width: 100%;
	border: solid 1px rgb(240,240,240);
}
.sendEmailTop{
	position: absolute;
	top: 0;
	bottom: 50%;
	left:0;
	right: 0;
	box-shadow: 0 3px 3px 0 rgb(130,130,130);
}
.sendEmailBottom{
	position: absolute;
	top: 50%;
	bottom: 0;
	left:0;
	right: 0;
}
.newCommentTextArea{
	position: absolute;
	top:5px;
	bottom:50%;
	min-height: 120px;
	left: 5px;
	right: 5px;
}
.newCommentTextArea textarea{
	min-height: 120px !important;
	resize: none;
	width: 100% !important;
	height: 100% !important;
}
.inputDate{
	height: 125px;
	z-index: 999999999999;
	background: white;
	border: 1px solid rgb(200,200,200);
	border-radius: 15px;
	padding: 15px;
	box-shadow: 0 0 10px 0 rgb(200,200,200);
	opacity: 0.98;
	/*display: none;*/
}
.inputDateModal{
	display: none;
	position: fixed;
	left: 50%;
	top:100px;
	margin-left: -122px;
}
.inputDate select{
	z-index: 999999999999999;
	position: relative;
}
.inputDate label{
	/*margin-bottom: -10px !important;*/
	margin-top: -5px !important;
}
.inputDateOption{
	display: inline-block;
	text-align: center !important;
	color:rgb(200,200,200);
	margin-bottom: 10px;
}
#setmandetorydiv .ui-slider-switch.ui-mini {
    vertical-align: middle;
    margin-left: 5px;
}
@media screen and (max-width: 800px) {
    #metroDaily #metroDailyPost #napTable input[type=text], #metroDaily #metroDailyPost #bathroomTable input[type=text], #metroDaily #metroDailyPost #diapersTable input[type=text] {
        width: 24vw;
    }
}
#metroDailyPost #napTable input[type="time"], #metroDailyPost #diapersTable input[type="time"]{
    max-width: 80px;
}
#RegistrationForms #downloadtable {
    display: inline-block;
    width: fit-content;
    margin-bottom: -12px;
}

#RegistrationForms #printAllbutton{
    display: inline-block;
    width: fit-content;
    margin-bottom: -12px;

}
input[type="text"]:not(.selectbox), input[type="number"],
input[type="password"], textarea {
  -webkit-user-modify: read-write-plaintext-only !important;
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
  outline-style: none !important;
}

.msgSettings
{
    position: absolute;
    top: 0px;
    left: 57px;
    z-index: 5;
    display:none;
}

.notificationSettingsRight{
    position: absolute;
    top: 0px;
    left: 17px;
    z-index: 5;
}
.notificationSettingsLeft{
    position: absolute;
    top: -5px;
    left: -5px;
    z-index: 5;
}

.notificationStyle{
   
}

.notificationStyle > div{
    background: #e57171;
    border-radius: 25px;
    padding:5px;
    line-height: 10px;
    max-width: 40px;
    margin-top:10px;
}

.notificationStyle p{
    margin: 0;
    text-align: center !important;
    z-index: 1;
    font-size: 12px !important;
	font-weight: 100;
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
    color: white;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
	padding-left: 0;
}

.msgMotif
{
    margin-top:2px !important;
    /* display:none; */
}

.largeImage{
	background-repeat: no-repeat;
    background-size: contain;
	background-position: center;
	background-color: black;
	text-align: left;
}
.largeImage img{
	max-width: 100%;
	max-height: 100%;
	margin-top:auto;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
}
.noOpacity{
	opacity: 0;
    position:absolute;
    z-index: -1;
    top: -999999px;
}
.hidden{
    display: none !important;
}
#coronaQuiz .ui-checkbox {
    display: inline-block !important;
    margin: 2px 0;
    margin-bottom: -7px;
    max-width: calc(100% - 33px);
    vertical-align: middle;
}
#coronaQuiz span {
    display: inline-block;
    /* font-weight: normal; */
    margin: 5px;
}
#coronaQuiz label{
    padding: 5px 15px;
}
#coronaQuiz {
    margin-top: 10px;
    line-height: 26px;
    font-weight: bold;
}
#coronaQuiz .ui-input-text {
    display:inline-block;
    margin: 4px;
}
#coronaQuiz .ui-input-text input {
    min-height: 28px;
    padding: 0 6px;
}
.progressBar{
	background-color: rgba(240,240,240,0.7);
	border-radius: 20px;
	border: 1px solid rgb(150,150,150);
	box-shadow: 1px 1px 1px 0 white, inset 0 0 0 1px rgb(180, 180, 180);
	overflow: hidden;
	position: fixed;
	left: 50px;
	right: 50px;
	top: 5px;
	height: 35px;
	z-index: 101;
	text-shadow: none;
}
.progressBarFill{
	position: absolute;
	top: 0;
	width: 0;
	height: 100%;
	z-index: -1;
	background: #b7fc9f;
	background: -moz-linear-gradient(top, #b7fc9f 0%, #96d081 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7fc9f), color-stop(100%,#96d081));
	background: -webkit-linear-gradient(top, #b7fc9f 0%,#96d081 100%);
	background: -o-linear-gradient(top, #b7fc9f 0%,#96d081 100%);
	background: -ms-linear-gradient(top, #b7fc9f 0%,#96d081 100%);
	background: linear-gradient(to bottom, #b7fc9f 0%,#96d081 100%);
	border-color: grey;
	box-shadow: 1px 1px 1px 0 rgb(150,150,150),inset -1px -1px 0 0 rgba(255,255,255,0.8);
}
.progressBarError{
	background: #e57171 !important;
	opacity: 0.8;
	height: 65px !important;
	left: 5px !important;
	right: 5px !important;
}
.progressBarError h4{
	color: white !important;
}

.progressBar h4{
	margin: 0;
	/*line-height: 45px;*/
}

#circleG{
	width:56px;
	left: 50%;
	margin-left: -28px;
	position: absolute;
	top: 20px;
}

.circleG{
background-color:#E4FCE2;
float:left;
height:12px;
margin-left:6px;
width:12px;
-moz-animation-name:bounce_circleG;
-moz-animation-duration:1.5s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-border-radius:8px;
-webkit-animation-name:bounce_circleG;
-webkit-animation-duration:1.5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-border-radius:8px;
-ms-animation-name:bounce_circleG;
-ms-animation-duration:1.5s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-border-radius:8px;
-o-animation-name:bounce_circleG;
-o-animation-duration:1.5s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-border-radius:8px;
animation-name:bounce_circleG;
animation-duration:1.5s;
animation-iteration-count:infinite;
animation-direction:linear;
border-radius:8px;
}

#circleG_1{
-moz-animation-delay:0.3s;
-webkit-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
animation-delay:0.3s;
}

#circleG_2{
-moz-animation-delay:0.7s;
-webkit-animation-delay:0.7s;
-ms-animation-delay:0.7s;
-o-animation-delay:0.7s;
animation-delay:0.7s;
}

#circleG_3{
-moz-animation-delay:0.9s;
-webkit-animation-delay:0.9s;
-ms-animation-delay:0.9s;
-o-animation-delay:0.9s;
animation-delay:0.9s;
}

@-moz-keyframes bounce_circleG{
0%{
}

50%{
background-color:#48AD26}

100%{
}

}

@-webkit-keyframes bounce_circleG{
0%{
}

50%{
background-color:#48AD26}

100%{
}

}

@-ms-keyframes bounce_circleG{
0%{
}

50%{
background-color:#48AD26}

100%{
}

}

@-o-keyframes bounce_circleG{
0%{
}

50%{
background-color:#48AD26}

100%{
}

}

@keyframes bounce_circleG{
0%{
}

50%{
background-color:#48AD26}

100%{
}

}
.feedBar{
    position: fixed;
    right: 0;
    left: 0;
    height: 65px;
    background-color: rgba(255,255,255,0.95);
    z-index: 99;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    /*text-align: center;*/
    
    top: -30px;
}
.feedBarAnchorClass{
    max-width: 800px;
    position:relative;
    top:0 !important;
    height: 50px !important;
    background-color:#f0f0f0;
}
.feedBarAnchorClass img{
    margin-top: 12px !important;
}
.feedBarGroup{
    position: absolute;
    top: 0;
    bottom: 0;
}
.feedBarGroupRight{
    right: 0;
}
.feedBarGroupLeft{
    left: 0;
}
.feedBarGroup > div:not(.ui-input-search){
    position: relative;
    /*width: 30px;*/
    height: 100%;
    float: left;
    /*margin-left: 6px;*/
}
.feedBarGroup > div.ui-input-search{
    position: relative;
    /*width: 30px;*/

    float: left;
    margin-left: 6px;
}
.feedBarButton{
    cursor: pointer;
}
.feedBarButton:active:after{
    content:"";
    background-color: #7ca7d0;
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    opacity:0.5;
}

.feedBar img{
    /*width: 20px;
    height: 20px;*/
}
.feedBar p {
    margin: 0px;
    font-size:14px;
    text-shadow: none;
    margin-top: -1px;
    color: rgb(100, 100, 100);
    line-height: 10px;
    height: 19px;
    vertical-align: middle;
    display: table-cell;
}
.feedBarButtonTextWrapper{
    display: block;
    height: 25px;
    text-align: center;
}
.feedBarButtonTextWrapper > div{
    display: inline-block;
    padding-left: 1px;
    padding-right: 1px;
}
.feedBarCenter{
    /*position: absolute;
    top: 0;
    bottom: 0;
    right: 80px;*/
    /* position: absolute; */
    top: 0;
    bottom: 0;
    /* right: 80px; */
    margin-right: 61px;
    float: right;
}
.feedBarGroup.ass {
    width: 180px;
}
.feedBarGroup.ass:first-child > div {
    width: 33%;
}
.ass + .feedBarCenter {
    left: 180px;
}
.feedBarCenter:active:after{
    content:"";
    background-color: #7ca7d0;
}
.feedBarCenter img{
    /*width: 20px;
    height: 20px;*/
}

.feedRefreshButton{
	position: fixed;
	left: 0;
	right: 0;
	top: 110px;
	text-align: center;
	z-index: 100;
}
.unlock{
	background-image: url('img/unlock.png');
	background-repeat: no-repeat;
	background-position: 50%;
}
.lock{
	background-image: url('img/lock.png');
	background-repeat: no-repeat;
	background-position: 50%;
}
.forgotPass{
	position: absolute;
	bottom: 20px;
	text-align: center !important;
	display: block;
	width: 100%;
}
.forgotPass a{
	text-decoration: none;
	color: #676767 !important;
	text-shadow: none;
}
.resetPass{
	display: block;
	width: 90%;
	margin-left: 5%;
	border: 1px solid rgba(240,240,240,0.7);
	text-align: center !important;
	background-color: rbga(250,250,250,0.6);
	padding-bottom: 5px;
	padding-top: 5px;
}
.resetPass p{
	color: white !important;
	text-shadow: none;
}
.resetPassText{
	color: white !important;
	text-shadow: none;
}
.maxWidth{
	max-width: 800px;
}
.textOverFlowEllypsis{
	overflow: hidden;
	/*text-overflow: ellipsis;*/
    width: 100%;
    font-size: 16px !important;
    color: rgba(128,128,128, 1);
    font-weight:600;
}
.profilePageMenuItem{
	/*height: 40px;
	background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); *//* FF3.6+ *//*
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); *//* Chrome,Safari4+ *//*
	background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); *//* Chrome10+,Safari5.1+ *//*
	background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); *//* Opera 11.10+ *//*
	background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); *//* IE10+ *//*
	background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); *//* W3C *//*
	border: 1px solid rgb(240, 240, 240);
	box-shadow: 0 0 3px 0 rgb(150,150,150);
	margin-top: 4px;
	margin-bottom: 4px;
	text-align: center !important;
	padding: 3px;
	text-decoration: none;
	color: black;*/
    height: 37px;
    text-align: center !important;
    padding: 3px;
    text-decoration: none;
    color: rgb(100,100,100);
    position: relative;
}
.profilePageMenuItem:active:after{
	/*background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%); *//* FF3.6+ *//*
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff)); *//* Chrome,Safari4+ *//*
	background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); *//* Chrome10+,Safari5.1+ *//*
	background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); *//* Opera 11.10+ *//*
	background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); *//* IE10+ *//*
	background: linear-gradient(to bottom, #e5e5e5 0%,#ffffff 100%); *//* W3C */
    content: "";
    background-color: #7ca7d0;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0.5;
}
.profilePageMenuItem img{
	/*width: 18px;
	height: 18px;
    opacity:0.7;*/
}
.profilePageMenuItem p{
	margin: 0;
	font-size: 12px;
    font-weight: normal;
}
.profilePageMenuItemRight{
	border-left:solid 1px #f2f2f2 ;
}
.profilePageMenuItemLeft{
	border-right:solid 1px #f2f2f2 ;
}
.profilePageMenuItemLeft img{
    /*width:40px;*/
}
.profilePageMenuItemBothSides{
	border-radius: 10px 10px 10px 10px;
	margin-left: 1px;
	margin-right: 1px;
}
.rightButtonInvite{
	/*padding: 8px;*/
	position: absolute;
	right: 12px;
	z-index: 103;
	top: 10px;
    width: 56px  !important;
    height:26px !important;
    text-align: center;
    text-shadow: none !important ;
    font-weight: normal !important ;
    line-height: 24px !important;
}
.rightButtonInvite .rightButtonInvitediv:hover
{
    background-color:#45cde6 !important ;
}
.rightButtonInvite img{
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	width: 70px;
	height: 43px;
}
.rightButtonInvite .rightButtonInvitediv p{
	margin: 0;
	color: white;
    font-size: 18px;
    width: 56px  !important;
    height:26px !important;
    text-align: center;
    text-shadow: none !important ;
    font-weight: normal !important ;
}
.profilePageMenuContainer .profilePageMenuItem {
    height: auto !important;
}
.rightButtonInvitediv{
    text-align: center !important;
    background-color:var(--main-color);
    border: 0.112em solid white;
    border-radius: 0.3em;
    -webkit-border-radius: 4px;
    width: 56px  !important;
    height:26px !important;
    text-align: center;
    text-shadow: none !important ;
    font-weight: normal !important ;
}
.newsFeedError{
	background-color: #e57171;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 3px;
	padding-right: 3px;
	color: white;
	text-decoration: none;
	text-shadow: none;
	text-align: center !important;
	border-radius: 5px;

	margin-top: 10px;
	margin-bottom: 10px;
}
.faceTagMoreButton{
	text-align: center !important;
	font-size: 14px;
	position: relative;
    margin-right: 55px;
}
.faceTagMoreButton p{
    margin: 0;
    white-space: normal;
    text-overflow: ellipsis;
    width: 10px;
    position: absolute;
    left: 42px;
    top: -3px;
    color: rgba(128,128,128, 1);
    text-decoration: none;
    text-shadow: none !important;
    /*line-height: 1.7em;*/
}
.faceTagMoreButton img{
	/*width: 15px;
    position: absolute;
    left: 4px;
    top: 9px;
    opacity: 0.6;
    height: 19px;*/
}
.faceTagMoreButtonNew {
    margin-top: 0;
    height: 35px;
    width: 42px;
    border-radius: 10px;
    line-height: 30px;
    border: 1px solid rgb(220, 220, 220);
}
.faceTagMoreButtonNew img{
    width: 12px;
    height: 12px;
    position: absolute;
    right: 0;
    top: 13px;
    opacity: 0.5;
}
.faceTagMoreButtonNew p{
    margin: 0;
    font-size: 13px;
    color: rgb(150,150,150);
    position: absolute;
    right: 12px;
    width: 26px;
    top: 3px;
}
.faceTagMoreButtonWithoutIcon p{
    right:auto;
    left:auto;
    width:100%;
}
.buttonBackground{
	/*background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ 
	background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ 
	background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ 
	background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ 
	background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
}
.buttonBackground:active,.buttonBackground:hover{
	/*background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%); /* FF3.6+ 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff)); /* Chrome,Safari4+ 
	background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ 
	background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* Opera 11.10+ 
	background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* IE10+ 
	background: linear-gradient(to bottom, #e5e5e5 0%,#ffffff 100%); /* W3C */
}
.emailItem{
	display: inline-block;
	padding: 5px;
	border-radius: 6px;
	background-color: rgba(220,220,220,0.5);
	text-decoration: none;
	text-shadow: none;
	font-size: 15px;
	margin: 3px;
}
.emailItem span{
	display: inline-block;
	margin-left: 10px;
	background-color: rgba(200,200,200,1);
	border-radius: 10px;
	width: 17px;
	text-align: center !important;
	opacity: 0.7;
	height: 17px;
	line-height: 17px;
	display: inline-block;
}
.emailItem span a{
	color: white;
	opacity: 0.7;
}
.emailItem p{
	margin: 0;
	display: inline-block;
}
.captchaDiv{
	width: 318px;
	margin-left: auto;
	margin-right: auto;
}
#download h3{
	color: white;
	text-shadow: none;
	text-decoration: none;
}
.rtl{
    direction: rtl !important;
	text-align: right !important;
}
.rtlDirection{
    direction: rtl !important;
}
.ltr{
    direction: ltr;
}
.feedMessage{
	text-align: center !important;
	background-color: rgb(240,240,240);
	border-radius: 5px;
	height: 50px;
	text-shadow: none;
	color: rgb(150,150,150);
	margin: 10px;
	border: 1px solid rgb(210,210,210);
	position: relative;
	line-height: 50px;
}
.feedMessage a{
	color: rgb(150,150,150) !important;
}
.feedMessage p{
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.feedMessageX{
	position: absolute;
	top: -7px;
	left: -7px;
	width: 15px;
	height: 15px;
	border-radius: 10px;
	background: rgb(220,220,220);
	font-size: 7px;
	line-height: 15px;
	box-shadow: 0 0 1px 1px rgb(150,150,150);
}
.feedMessageX a{
	color: white;
}
.feedMessageX:active{
	opacity: 0.5;
}
.rotateLeft{
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
}
.rotateRight{
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}
.rotateFlip{
    /*-ms-transform: rotate(180deg); /* IE 9 */
    /*-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    /*transform: rotate(180deg);*/
}
#facebookLogin{
    visibility: hidden;
    /*background-color: rgb(59,89,152);*/
    /*cursor: pointer;*/
    /*margin:5px;*/
    /*margin-top:60px;*/
    /*border-radius: 5px;*/
    /*text-align:center;*/
    margin-right: .3125em;
    margin-left: .3125em;
}
#facebookLogin p{
    display: inline-block;
    margin: 0;
    font-size:20px !important;
}
#facebookLogin img{
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 10px;
    width: 30px;
    margin-top: -5px;
    margin-bottom: -5px;
    border-radius: 4px;
}
.unavailable{
    opacity: 0.5;
}
.redButton{
    background: #ff3019; /* Old browsers */
    background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C */
    height: 45px;
    border-radius: 5px;
    line-height: 45px;
    text-align: center;
    margin-top: 30px;
}
.redButton p{
    margin: 0;
    text-shadow: none;
    color: white;
}
.redButton:active{
    background-color: white;
    opacity: 0.3;
}
.redButton:hover{
    background-color: white;
    opacity: 0.7;
}
.mainFaceTagGroupHeaderEdit, .mainFaceTagGroupHeaderDelete {
    width: max-content;
    display: inline-block;
    margin-left: 5px;
	/* width: 50px; for iphone / safari */
    margin-right: 5px;
}
.mainFaceTagGroupHeaderEdit:hover, .mainFaceTagGroupHeaderDelete:hover{
    background-color: rgb(240,240,240);
}
.mainFaceTagGroupHeaderEdit:active, .mainFaceTagGroupHeaderDelete:active{
    background-color: #7ca7d0;
}
.mainFaceTagGroupHeaderEdit p, .mainFaceTagGroupHeaderDelete p{
    display: inline-block;
    font-size: 14px;
    font-weight: 100;
    text-shadow: none;
}
.mainFaceTagGroupHeaderEdit img, .mainFaceTagGroupHeaderDelete img{
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height:16px;
}
.listItemOptions{
    opacity: 0;
    display: inline-block;
    position:absolute;
    right: 0;
    z-index: 1;
}
#main .listItemOptions{
    background-color: #fff;
    padding-left: 10px;
}
.listItemOptionsRTL{
    left: 0;
    right: initial !important;
}
.listItemOption{
    text-align: center;
    color: black;
    font-size: 13px;
    font-weight: 100;
    height: 82px;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
    z-index:999;
}
.listItemOptionImageMore
{
}

.listItemOptionImageMore img{
    margin: 3px;
    width: 27px;
    height: 27px;
    background-color:#b3b3b3 ;
    border-radius: 100%;
    margin-left: -12px;
}

.moreSketchP{
    margin-left:-15px;
 }

.listItemOptionImageMore:hover{
   
}
.listItemOptionImageMore:active{
   
}

.listItemOptionImage{
    display: inline-block;
    border-radius: 100%;
    width: 35px;
    height: 35px;
    /*border: solid 1px grey;*/
    margin-top: 16px;
}
.listItemOptionImage img{
    margin: 3px;
}
.red{
    /*background-color: #e57171;*/
}
.yellow{
    /*background-color: #ffc45f;*/
}
.grey{
    background-color: rgb(200,200,200);
}
.listItemOptionImage:hover{
    background-color:rgb(220,220,220);
}
.listItemOptionImage:active{
    background-color: #7ca7d0;
}
.listItemOptionsCompact{
    opacity: 1;
    position: absolute;
    top: 0;
    right: 0;
}
.listItemOptionsCompact p{
    margin-top:0;
}
.listItemOptionImageCompact{
    margin-top:4px;
}
.listItemOptionsCompact p{
    margin-top:0 !important;
}
.postUploadingSpinner{
    display: inline-block;
    float: left;
    margin-left: 13px;
    margin-top: 15px;
    margin-right: 13px;
}
.postUploadingSpinner>div{
    z-index:0 !important;
}
.postUploadingImage{
    display: inline-block;
    float: left;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    vertical-align: middle;
}
.postUploadingImage img{
    float: initial;
    vertical-align: middle;
}
.postUploadingBody p{
    color: white;
    text-shadow: none;
}
.postUploadingErrorButton{
    background-color: rgba(255,255,255,0.4);
    color: black;
    text-shadow: none;
    border-radius: 10px;
    width: 44%;
    display: inline-block;
    margin: 5px;
    border: 1px solid rgba(255,255,255,0.5);
}
.postUploadingErrorButton:hover{
    background-color: rgba(255,255,255,0.7);;
}
.postUploadingErrorButton:active {
    background-color: rgba(255,255,255,0.8);;
}
.postUploadingErrorButton p{
    margin: 0;
}
.postUploadingErrorButton img{
    max-width: 20px;
}
.postUploadingSpinnerGallery{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -11px;
    margin-top: -11px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.6);
    width: 20px;
    height: 20px;
    z-index: 5;
}
.postUploadingSpinnerGallery>div{
    margin-left: 10px;
    margin-top: 10px;
}
.galleryVideoPlayButton{
    width: 60px;
    height: 60px;
    background-color: rgba(0,0,0,0.1);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -30px;
    margin-top: -30px;
    border-radius: 100px;
    cursor: pointer;
    z-index:10;
}
.galleryVideoPlayButton:after{
    content: '';
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 22px solid white;
    opacity: 0.8;
    top: 50%;
    left: 50%;
    position: absolute;
    margin-left: -8px;
    margin-top: -12px;
}
.galleryVideoPlayButton:hover:after{
    opacity:0.9;
}
.galleryVideoPlayButton:before{
    content: '';
    border-radius: 100px;
    border: 6px white solid;
    opacity: 0.8;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 4px;
    left: 4px;
}
.postProgressBar{
    position: absolute;
    top: 0;
    z-index: 3;
    left: 0;
    right: 0;
    height: 3px;
}
.postProgressBar>div{
    height: 6px;
    border-radius: 3px;
    background: #b7fc9f;
    background: -moz-linear-gradient(top, #b7fc9f 0%, #96d081 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7fc9f), color-stop(100%,#96d081));
    background: -webkit-linear-gradient(top, #b7fc9f 0%,#96d081 100%);
    background: -o-linear-gradient(top, #b7fc9f 0%,#96d081 100%);
    background: -ms-linear-gradient(top, #b7fc9f 0%,#96d081 100%);
    background: linear-gradient(to bottom, #b7fc9f 0%,#96d081 100%);
}
.allowComment{
    display: inline-block;
    margin-top: 13px;
}
.affiliateLogo img{
	margin-top: 5px;
	margin-bottom: 5px;
	max-height: 34px;
}
/*
Daily Sheet
*/

.centerBottomButtonAdd{
	padding: 2px;
	position: relative;
	z-index: 103;
	bottom: 0;
	width: 63px;
	height: 43px;
	text-align: center;
	left: 50%;
	transform: translate(-50%, 0);
}
.centerBottomButtonAdd img{
	position: relative;
	z-index: -1;
	width: 70px;
	height: 43px;
}
.centerBottomButtonAdd p{
	margin: 0;
	color: white;
	font-size: 18px;
}
.centerBottomButtonAdddiv{
	position: relative;
	text-align: center !important;
	bottom:40px;
}
.popupBackButton{
	position: absolute;
	left: 0;
	padding: 1px;
	padding-right: 10px;
	z-index: 103;
}
.popupBackButton img{
	/*width:35px;
	height:35px;*/
}
.popupContent {
    margin-top: 40px;
    width: 310px !important;
    /*width: 80vw !important;*/
}
.dailyBottom {
    margin-bottom: 200px;
}

#myparentslist .ui-content {
    padding-bottom: 100px !important;
}
.mce-tabs,.mce-window-head > .mce-title {
    visibility: hidden;
}
.mce-window-head > .mce-title::before {
    content: 'Paste YouTube/ Vimeo URL link below';
    visibility: visible;
}

.mce-container.mce-abs-layout-item.mce-last.mce-formitem::after {
    margin-top: 10px;
    font-size: 14px;
    display: inline-block;
    content: 'Note: The YouTube/ Vimeo video can’t be shared if it’s private.';
}

.mce-i-media:before {
    font-size: 30px;
    margin-left: -8px;
}

iframe[allowfullscreen] {
    max-width: 100% !important;
    margin: 0 auto;
    display: block;
}

iframe:not([allowfullscreen]) {height:180px}
.editNewPostTextAreaMaxHeightMin{	max-height: 140px !important;}
.editNewPostTextAreaMaxHeight200 {	max-height: 200px !important;}
.editNewPostTextAreaMaxHeight300 {	max-height: 300px !important;}
.editNewPostTextAreaMaxHeight400 {	max-height: 400px !important;}
.editNewPostTextAreaMaxHeight500 {	max-height: 500px !important;}
.editNewPostTextAreaMaxHeight600 {	max-height: 600px !important;}
.editNewPostTextAreaMaxHeight700 {	max-height: 700px !important;}
.postQuickTag #dialogX {
    width: 15px;
    height: 15px;
    top: -12px;
    left: -12px;
    position: absolute;
    box-shadow: none;
    border: 1px solid #aaa;
    padding: 5px;
    background: rgba(238, 238, 238, 0.9);
	background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}
.rtl .postQuickTag #dialogX {
	left: initial;
	right: -12px;
}

.postQuickTag #dialogX a {
	top: 5px;
    left: 8px;
    position: absolute;
    font-weight: bold !important;
}

.newevent {
    width: 90%;
    margin: 10px auto;
}
    .newevent div {
        margin: 0 auto 0 auto;
    }
.eventstop {
    display:table;
    width:100%;
}
    .eventstop img {
        display:table-cell;
        width:64px;
        vertical-align:middle;
        cursor:pointer;
    }
    .eventstop span {
        display: table-cell;
        width: 100%;
        text-align: center;
        vertical-align: middle;
        font: bold 30pt Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
        color: steelblue;
    }
.oneevent {
    display: table;
    width: 94%;
    margin: 6px 2%;
    padding: 4px 1%;
    font: bold 14px Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
    color: #999;
}
    .oneevent button {
    }
.oneeventdetails {
    display: table;
    width: 94%;
    margin: -6px 2% 6px 2%;
    padding: 4px 1%;
    font: 14px Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
    color: #999;
}



.postQuickTag #dialogX img {
    width: 8px;
    height: 8px;
    top: 4px;
    left: 4px;
}
#observPopup .postTextboxLabel label {
	width: 100%;
	height: initial;
}
#observPopup .postTextboxLabel {
	width: 100%;
}

.observChose{
	position: relative;
    /* border: 1px solid #aaa; */
    box-shadow: 1px 1px 6px 0px #bbb;
    float: left;
    margin-left: 15px;
    padding: 2px 6px;
    font-size: 13px;
    margin-top: 8px;
	max-width: 200px;
}
.observChose:hover{
	box-shadow: 1px 1px 10px 1px #aaa;
	color: #555;
}

.delObserv{
	position: absolute;
    top: -11px;
    right: -11px;
    border: 1px solid #aaa;
    color: red;
    box-shadow: 1px 1px 6px 0px #aaa;
    padding: 0px 4px;
    border-radius: 133px;
    background: white;
	cursor: pointer;
}
.delObserv:hover{
	background: red;
	color: white;
	font-weight:bold;
}

.ui-select .ui-btn {
	max-width: 100%;
}
#observPopup .ui-btn{
	max-width:100%;
	width: 240px;
}
#observPopup .ui-btn span:first-of-type{
	max-width:100%;
	width: 190px;
}
.staffOnlyMsg {
    border: 1px dotted #002e44;
    padding: 6px 6px;
    box-shadow: 2px 2px 12px 1px #b1c2d0;
    background: var(--main-color);
    font-weight: bold;
    border-radius: 8px;
    margin: 10px 8px;
    font-size: 14px;
    text-align: center;
    color: #002e44;
    display: block;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
}
.postObservHeader {
    font-weight: bold;
    text-decoration: underline;
    margin: 5px 9px;
}
.postObservWrapper {
    margin-bottom: 10px;
}
ul.postObservBody {
    width: 90%;
}
.observTitle {
    font-weight: bold;
	color: black;
}
li.lastLvl {
    color: #1d6ba5;
}
.nox #dialogX {
    display:none;
}
.eventstop {
    display: table;
    width: 100%;
}

    .eventstop img {
        display: table-cell;
        width: 64px;
        vertical-align: middle;
        cursor: pointer;
    }

    .eventstop span {
        display: table-cell;
        width: 100%;
        text-align: center;
        vertical-align: middle;
        font: bold 20pt Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
        color: steelblue;
    }

.cancelin, .cancelout, .warningimg {
    vertical-align: middle;
}
.cancelin, .cancelout {
    width: 28px;
    margin-top: -7px;
    margin-left: 4px;
}

.checkin, .checkisin {
    background-color:  #63dfd2;
    color:#333;
    border-radius: 6px;
}

.checkout {
    background-color:  var(--main-color);
    color:#333;
    border-radius: 6px;
}

.checkin, .checkout, .noarrive, .checkisin {
    display: inline-block;
    font: 17px Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
    padding: 5px 10px;
    border-radius: 0;
    width:110px;
}

.spCheckTimePencilIn
{
    background-image: url('img/edit15.png') !important ;
    background-position: 107px;
    background-repeat: no-repeat;
    cursor: pointer !important;
}

.spCheckTimePencilOut
{
    background-image: url('img/edit15.png') !important ;
    background-position: 112px;
    background-repeat: no-repeat;
    cursor: pointer !important;
}
#Attendance .invText h4 {
    margin: 3px 0 !important;
}

#Attendance .invText p {
    margin: 0 !important;
    display: inline-block !important;
    line-height: 21px;
    padding-top: 3px;
    vertical-align: middle;
    white-space: normal !important;
}
#Attendance .invText {
    margin-right:0;
} 
#Attendance .invText p::before {
    content: attr(shtm);
    display: inline-block !important;
    vertical-align: middle;
    line-height: 1.4;
    padding-top: 0;
    text-align: center;
    white-space: pre;
    margin-top: -7px;
    margin-right: 10px;
}
#Attendance .rtl .invText p::before {
	margin-right: 0px;
	margin-left:5px;
}
#Attendance .rtl li{
	padding-right: 65px;
}
#Attendance .rtl .invLeftFaceTag{
	left:auto;
	right:5px;
}
#Attendance .rtl .invText p .checkin:not(.saved) span, #Attendance .rtl .wontarrive span, #Attendance .rtl .wontarriveSearch span, #Attendance .rtl .invText p a + .checkout span {
	margin-right:5px;
}
#Attendance .rtl .wontarrive, #Attendance .rtl .wontarriveSearch {
	margin: 0 5px 0 0;
}
#Attendance .rtl .invText a.note {
    margin-left: auto;
	margin-right:5px;
}
.attendanceHistory {
    width: 94%;
    text-align: center;
    margin: 0 auto;
    border-spacing: 6px 8px;
}

    .attendanceHistory tr:first-child > td {
        background: none;
        box-shadow: none;
        border-radius: 0;
    }

    .attendanceHistory tr:not(:first-child) {
        cursor: pointer;
    }

    .attendanceHistory td:nth-child(1) {
        width: 15%;
        font: bold 17px Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
    }

    .attendanceHistory td:nth-child(2), .atin, .childhistory .checkin, .checkin.saved, .checkin:not(.ui-btn) {
        background-image: -moz-linear-gradient(-100deg, rgba(111, 232, 251, 0.22) 0%, rgb(111, 232, 251) 35%, rgba(111, 232, 251, 0.64) 85%, rgba(111, 232, 251, 0.2));
        background-image: -webkit-linear-gradient(-100deg, rgba(111, 232, 251, 0.22) 0%, rgb(111, 232, 251) 35%, rgba(111, 232, 251, 0.64) 85%, rgba(111, 232, 251, 0.2));
        background-image: -o-linear-gradient(-100deg, rgba(111, 232, 251, 0.22) 0%, rgb(111, 232, 251) 35%, rgba(111, 232, 251, 0.64) 85%, rgba(111, 232, 251, 0.2));
        background-image: -ms-linear-gradient(-100deg, rgba(111, 232, 251, 0.22) 0%, rgb(111, 232, 251) 35%, rgba(111, 232, 251, 0.64) 85%, rgba(111, 232, 251, 0.2));
        background-image: linear-gradient(-100deg, rgba(111, 232, 251, 0.22) 0%, rgb(111, 232, 251) 35%, rgba(111, 232, 251, 0.64) 85%, rgba(111, 232, 251, 0.2));
		cursor: default;
    }

    .attendanceHistory td:nth-child(3), .atout, .childhistory .checkout, .checkout.saved, .checkout:not(.ui-btn) {
        background-image: -moz-linear-gradient(-100deg, rgba(84, 255, 73, 0.22) 0%, rgb(114, 255, 89) 35%, rgba(111, 251, 135, 0.64) 85%, rgba(4, 255, 0, 0.2));
        background-image: -webkit-linear-gradient(-100deg, rgba(84, 255, 73, 0.22) 0%, rgb(114, 255, 89) 35%, rgba(111, 251, 135, 0.64) 85%, rgba(4, 255, 0, 0.2));
        background-image: -o-linear-gradient(-100deg, rgba(84, 255, 73, 0.22) 0%, rgb(114, 255, 89) 35%, rgba(111, 251, 135, 0.64) 85%, rgba(4, 255, 0, 0.2));
        background-image: -ms-linear-gradient(-100deg, rgba(84, 255, 73, 0.22) 0%, rgb(114, 255, 89) 35%, rgba(111, 251, 135, 0.64) 85%, rgba(4, 255, 0, 0.2));
        background-image: linear-gradient(-100deg, rgba(84, 255, 73, 0.22) 0%, rgb(114, 255, 89) 35%, rgba(111, 251, 135, 0.64) 85%, rgba(4, 255, 0, 0.2));
		cursor: default;
    }

    .attendanceHistory td:nth-child(4), .atda, .childhistory .noarrive, .noarrive {
        background-image: -moz-linear-gradient(-100deg, rgba(255, 255, 255, 0.32) 0%, rgb(255, 255, 255) 35%, rgb(255, 255, 255) 85%, rgba(255, 255, 255, 0.42));
        background-image: -webkit-linear-gradient(-100deg, rgba(255, 255, 255, 0.32) 0%, rgb(255, 255, 255) 35%, rgb(255, 255, 255) 85%, rgba(255, 255, 255, 0.42));
        background-image: -o-linear-gradient(-100deg, rgba(255, 255, 255, 0.32) 0%, rgb(255, 255, 255) 35%, rgb(255, 255, 255) 85%, rgba(255, 255, 255, 0.42));
        background-image: -ms-linear-gradient(-100deg, rgba(255, 255, 255, 0.32) 0%, rgb(255, 255, 255) 35%, rgb(255, 255, 255) 85%, rgba(255, 255, 255, 0.42));
        background-image: linear-gradient(-100deg, rgba(255, 255, 255, 0.32) 0%, rgb(255, 255, 255) 35%, rgb(255, 255, 255) 85%, rgba(255, 255, 255, 0.42));
        box-shadow: 0px 0px 2px 0px #ddd;
		cursor: default;
        /*border-radius: 7px;*/
    }

    .attendanceHistory td:nth-child(5), .atno, .childhistory .noreport {
        background-image: -moz-linear-gradient(-100deg, rgba(255, 255, 0, 0.24) 0%, rgba(251, 255, 0, 0.65) 35%, rgba(251, 255, 0, 0.72) 85%, rgba(255, 235, 0, 0.2));
        background-image: -webkit-linear-gradient(-100deg, rgba(255, 255, 0, 0.24) 0%, rgba(251, 255, 0, 0.65) 35%, rgba(251, 255, 0, 0.72) 85%, rgba(255, 235, 0, 0.2));
        background-image: -o-linear-gradient(-100deg, rgba(255, 255, 0, 0.24) 0%, rgba(251, 255, 0, 0.65) 35%, rgba(251, 255, 0, 0.72) 85%, rgba(255, 235, 0, 0.2));
        background-image: -ms-linear-gradient(-100deg, rgba(255, 255, 0, 0.24) 0%, rgba(251, 255, 0, 0.65) 35%, rgba(251, 255, 0, 0.72) 85%, rgba(255, 235, 0, 0.2));
        background-image: linear-gradient(-100deg, rgba(255, 255, 0, 0.24) 0%, rgba(251, 255, 0, 0.65) 35%, rgba(251, 255, 0, 0.72) 85%, rgba(255, 235, 0, 0.2));
		cursor: default;
    }
.checkin.ui-btn, .checkout.ui-btn, .wontarrive.ui-btn, .wontarriveSearch.ui-btn, .checkisin.ui-btn {
    display: inline-block;
    vertical-align: middle;
    margin: -2px 0px 0px;
    padding: 5px 9px;
}
.invText p .checkin:not(.saved) span, #Attendance .wontarrive span, .wontarriveSearch span, .invText p a + .checkout span {
    display: inline-block;
    width: 15px;
    height: 15px;
    vertical-align: middle;
    border-radius: 8px;
    margin-left: 5px;
}

.attendanceHistory a {
    text-decoration: underline;
    font-weight: normal !important;
}
.invText p .checkin:not(.saved) span {
    background:blue;
}
#Attendance .wontarrive span, .wontarriveSearch span{
    background:#fff;
}
.invText p a + .checkout span{
    background: green;
}
.invText p a{
    display:inline-table;
}
#Attendance .cancelin, #Attendance .cancelout {
    color: var(--main-second-color) !important;
    text-decoration: underline !important;
    text-align: center;
    margin: 0px 6px 0px;
    vertical-align: middle;
    z-index:1000;
    white-space:nowrap;
}
.cancelinUndo
{
    display: inline-block;
    font: 17px Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
    padding: 5px 10px;
    border-radius: 0;
    width: 150px;
    color: #38c !important;
    border:0 ;
}
    .childhistory {
            width: 94%;
            margin: 0 auto;
        }

    .childhistory span:not(:first-child) {
        display: inline-block;
        margin: 2px;
        padding: 5px 10px;
        line-height: normal;
    }

    .childhistory .day {
        font: bold 14pt Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
    }

.atin, .atout, .atda, .atno {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

 /*.noarrive {
    background-image: -moz-linear-gradient(-100deg, rgba(167, 167, 167, 0.16) 0%, rgba(167, 167, 167, 0.27) 35%, rgba(167, 167, 167, 0.45) 85%, rgba(167, 167, 167, 0.31));
    background-image: -webkit-linear-gradient(-100deg, rgba(167, 167, 167, 0.16) 0%, rgba(167, 167, 167, 0.27) 35%, rgba(167, 167, 167, 0.45) 85%, rgba(167, 167, 167, 0.31));
    background-image: -o-linear-gradient(-100deg, rgba(167, 167, 167, 0.16) 0%, rgba(167, 167, 167, 0.27) 35%, rgba(167, 167, 167, 0.45) 85%, rgba(167, 167, 167, 0.31));
    background-image: -ms-linear-gradient(-100deg, rgba(167, 167, 167, 0.16) 0%, rgba(167, 167, 167, 0.27) 35%, rgba(167, 167, 167, 0.45) 85%, rgba(167, 167, 167, 0.31));
    background-image: linear-gradient(-100deg, rgba(167, 167, 167, 0.16) 0%, rgba(167, 167, 167, 0.27) 35%, rgba(167, 167, 167, 0.45) 85%, rgba(167, 167, 167, 0.31));
}*/
.invText p a + .checkout {
    display: inline-block;
    vertical-align: middle;
}
    .childrenAttendance {
        font-weight: normal !important;
        text-align: right;
    }
    .childrenAttendance + a {
        padding-bottom: 2px;
    }
.warningimg {
    display:none;
    position: absolute;
    width: 20px;
}
#Attendance #reminder {
    display:none;
    width: 250px;
    width: fit-content;
    margin: -10px auto 30px auto;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    background: #ffffb2;
    box-shadow: 2px 2px 8px 0px #bbb;
	text-align: center;
}
#Attendance .moveto {
    display: inline-block;
    vertical-align: middle;
    margin: -2px 0px 0px;
    padding: 5px 9px;
}
#Attendance #reminder img{
	margin: -4px 5px 0px -9px;
}
#Attendance .wontarrive, .wontarriveSearch {
    /*color: #aaa !important;
    */ 
    margin: 0 0 0 5px;
    display: inline-block;
    width: 100px;
    /* padding: 3px; */
    /* font-weight: normal; */
    vertical-align: middle;
}
.checkin + .checkout {
    margin-left: 13px;
}
.checkin.outsaved {
    background-color: #0eb134;
    color:white;
}
#AttendanceH .disable td{
    background: #ddd !important;
}



#eventscontent .mainFaceTagGroupHeader {
    padding: 0 2%;
}
    .oneeventdetails button img {
        height:24px;
    }

    #Calendar #linesView, #Calendar #daysView, #Calendar #downloadCsv, .oneeventdetails button
{
    width: initial !important;
    display: inline-block;
    border-radius: 100px;
    background: transparent !important;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 5px 0px #ddd;
    margin-top: 5px;
    padding: 4px 5px 0px;
	cursor:pointer;
	
	-webkit-transition:all 0.2s ease;
	-moz-transition:all 0.2s ease;
	-o-transition:all 0.2s ease;
	-ms-transition:all 0.2s ease;
	transition:all 0.2s ease;
}
#Calendar #linesView:hover, #Calendar #daysView:hover, .oneeventdetails button:hover{
	background:#ddd !important;
}
.oneevent span {
    display: table-cell;
}
.oneeventdetails span {
    display: block;
    line-height: 20px;
}
    .oneevent span:first-child, .oneeventdetails span:first-child {
        text-align: left;
    }

    .oneevent span:last-child, .oneeventdetails span:last-child {
        text-align: right;
    }
    #eventscontent .rtl span:first-child {
        text-align: right;
    }

#eventscontent .rtl:not(.oneeventdetails) span:last-child {
    text-align: left;
}
#eventscontent hr {
    width: 94%;
    border-top: 1px solid #ddd;
}
.eventday {
    background: steelblue;
    width: 94%;
    margin: 6px 2%;
    border-radius: 5px;
    padding: 10px 1%;
    font: 14pt Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
    color: white;
    cursor: pointer;
    text-align: center;
}
.ellipsis, .headellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: inherit;
    position: absolute;
}
.normal {
    overflow: hidden;
} 
.ellipsis + * {
    margin-top: 15px;
}
#eventscontent span[data-type='more'] a{
    line-height: 25px;
    font-weight: normal;
}
#eventscontent .rtl span[data-type='more'] {
    text-align: left;
}
#eventscontent span[data-type='more'] {
    text-align: right;
}
.endsBy {
	border: 1px solid #ddd;
    text-align: center;
    padding: 3px 8px;
    border-radius: 5px;
    box-shadow: 1px 1px 5px 0px #ccc;
    display: inline-block !important;
    font-weight: normal;
    text-shadow: none;
	vertical-align:middle;
	margin-left: 10px;
}
#Attendance #reminder.reminder {
    background: #81ef81;
}

#parentsContactList-label, #usingMessages-label, #usingAttendance-label, #dailySheetEmail-label, #showDailyTime-label, #dailySheetEmail {
    display: inline-block;
}
    #parentsContactList-label ~ div, #usingMessages-label ~ div, #usingAttendance-label ~ div, #dailySheetEmail-label ~ div, #showDailyTime-label ~ div {
        vertical-align: middle;
    }
    #parentsContactList + div, #usingMessages + div, #usingAttendance + div, #dailySheetEmail-label + div, #showDailyTime-label + div {
        direction: ltr;
    }
#dailySheetEmail + div {
    width: 125px;
}

#dailySheetManual > div {
    display: inline-block;
    vertical-align: middle;
}

#dailySheetManual input {
    height: 42px;
}
#Messages .searchline, #Messages .conversations {
    margin: 0px 2px 0px 2px !important;
}
#Messages .searchline img {
    position: absolute;
    right: 17px;
    top: 14px;
    cursor:pointer;
    }
#Messages .searchline input {
    padding-right:35px;
}
#Messages .conversations > div:not(.mess) {
    margin-top: 8px;
    background: #fff;
    border-radius: 0px;
    border: 1px solid rgba(221, 221, 221, 0.37);
    box-shadow: inset 0px 0px 0px 0px;
    cursor: pointer;
    font-size:14px;
    font-weight: 400;
    color: #4b4b4b;
    width: 98%;
    margin-right: 0px;
    margin-left: 0px;
}
#Messages .conversations > div > span > img {
    vertical-align: middle;
    height: 70px;
    border-radius: 0px;
    margin: 5px;
    /*background-color: #ffa741;*/
}
    #Messages .conversations > div[data-ischild=true] > span > img {
        background-color: var(--main-second-color);
    }

    #Messages .conversations > div > span:last-child {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        position: absolute;
        margin-left: 6px;
        margin-top: 15px;
        line-height: 25px;
        width: 71%;
    }
#Conversation {
    font:10pt Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
    color:#000;
}
    #Conversation .messageline {
        position: fixed;
        bottom: 8px;
        width: 100%;
        max-width: 800px;
    }
        #Conversation .messageline img {
            position: absolute;
            right: 3px;
            margin-top: -67px;
            height: 60px;
            cursor: pointer;
        }
    #Conversation .messageline input {
        padding-right: 35px;
        font-size:17px;
    }
    #Conversation > div > div {
        text-align: left !important;
    }
    #Conversation .messageline > div {
        border-color: #888;
        margin: 0.5em 45px 0.5em 10px;
    }
    #Conversation .messages {
        overflow: auto;
        position: fixed;
        max-height: 80vh;
        bottom: 90px;
        width: 100%;
        max-width: 800px;
    }
        #Conversation .messages > div {
            padding: 0 0px;
            margin-left: -3px;
            display: table;
            position: relative;
            max-width: 84%;
        }
        #Conversation .messages > div > img {
            vertical-align: middle;
            height: 50px;
            border-radius: 25px;
            margin: 3px;
            display: table-cell;
        }
        #Conversation .messages .other {
            text-align: right;
            margin-left: auto;
            position: relative;
            max-width: 84%;
        }
        #Conversation .messages div > span {
            display: table-cell;
            vertical-align: middle;
            padding-left: 5px;
        }
        #Conversation .messages div.other > span {
            padding-left: 0px;
            padding-right: 5px;
        }
        #Conversation .messages div > span > span.more {
            margin: -4px 0 14px 58px;
        }
            #Conversation .messages div.other > span > span.more {
                margin: -4px 58px 14px 0;
            }
        #Conversation .messages div > span > span {
            color: #333;
            font-size: 17px;
            text-shadow: none;
            background: #f1ddfa;/*#f1ddfa*/
            padding: 5px;
            padding-top: 0;
            border-radius: 0 6px 6px 6px;
            display: inline-block;
            margin-top: 17px;
            margin-bottom: 13px;
        }
#main .mainFaceTagItemName > p > img {
    /*margin-top: 11px;*/
    width: 26px;
}
#main
{
   /* background-color: #f0f0f0 ;*/
}
#ChildProfile
{
    background-color: #f0f0f0 ;
}

#Conversation .messages div.other span span {
    direction: rtl;
    border-radius: 6px 0 6px 6px;
}
    #Conversation .messages div > span > span::before {
                display: inline-block;
                width: 0;
                height: 0;
                border-top: 8px solid #cfeef6;/*#fffacd*/  
                border-left: 8px solid transparent;
                content: '';
                margin-left: -12px;
                padding: 4px 2px;
            }
        #Conversation .messages div.other > span > span::before {
            border-right: 8px solid transparent;
            border-left: 0;
            content: '';
            margin-right: -12px;
            margin-left: 0;
            border-top: 8px solid #f1ddfa;/*#92c0e5*/
        }
        .filterheader {
            height: 30px;
            background: var(--main-color);
            border-radius: 9px 9px 0 0;
            color: #fff;
            font-weight: normal;
            line-height: 26px;
        }
        .filterheader::after {
            content: 'X';
            color:#fff;
            font-weight:normal;
            font-size:20px;
            float:right;
            margin:2px 5px;
            cursor:pointer;
            transform: scale(1.2, 1);
        }
        .filtercontent {
            padding:10px;
            text-align:left;
            max-width:350px;
        }
        .filtercontent div:not(.ui-input-text) {
            font-weight:normal;
             margin:8px 0 0 0px;
         }
        .filtercontent div.ui-input-text {
           
            display:inline-block;
         }
         .filtercontent span {
             display:inline-block;
             padding:8px 16px;
             border:1.5px solid var(--main-color);
             margin:3px;
             border-radius:9px;
             font-weight:normal;
             color:#000;
             cursor:pointer;
             font-size:15px;
         } 
         .filtercontent span.non {
            color:#777;
            border: 1px solid #777;
         }
         .filtercontent button {

            background: var(--main-second-color);
            width:fit-content !important;
            margin:0 auto !important;
            border:0;
            color:#fff;
            padding:5px 10px;
         }
        #Conversation .messages div > font {
            position: absolute;
            left: 67px;
            top: 0px;
            width: 100%;
            white-space: nowrap;
        }
        #Conversation .messages div:not(.other) > span > span {
            background: #cfeef6; /*#fffacd*/ 
        }
        #Conversation .messages div.other > font {
            right: 67px;
            left:auto;
        }
        #Conversation .messages div.other span span span{
            direction:ltr;
            display: inline-block;
        }
        #Conversation .messages .pintoright {
            display: inline-block;
            margin: 8px;
            border-top: 8px solid #00f;
            border-right: 6px solid transparent;
            background: #00f;
            background-clip: padding-box;
            padding: 8px;
            padding-top: 0;
            border-radius: 6px 0 10px 6px;
            text-shadow: none;
        }
        #Conversation .messages .pintoleft {
            display: inline-block;
            margin: 8px;
            border-top: 8px solid #00f;
            border-left: 6px solid transparent;
            background: #00f;
            background-clip: padding-box;
            padding: 8px;
            padding-top: 0;
            border-radius: 0 6px 6px 10px;
            text-shadow: none;
        }
        #Conversation .messages .pintoleft::after {
            background: #55f;
            display: block;
            margin: 0 -8px -8px -9px;
            border-radius: 0 0 6px 6px;
            content: attr(data-time);
            padding: 3px 6px;
            color: #3c1288;
        }
#Messages .conversations .noready {
    font-weight: bold;
}
table.xl6914505 td, table.xl6914505 td span, table.xl6914505 td font {
    font-size: 110% !important;
}
.font814505 .ui-checkbox, .xl10114505 .ui-checkbox {
    display: inline-block;
    width: 33px;
    vertical-align: text-bottom;
}
.xl8014505 .ui-checkbox {
    display: inline-block;
    width: 33px;
}
#Messages .conversations > div > span:first-child::before {
    content: attr(data-for);
    position: absolute;
    margin-top: 44px;
    width: 80px;
    text-align: center;
    font-size: 11px;
    overflow: hidden;
    height: 30px;
}
#Messages .conversations > div > span.multi:first-child::before {
    height: 70px;
    margin-top: 5px;
}
#Messages .conversations > div > span:first-child::after {
    content: attr(classroom);
    position: absolute;
    margin-top: 5px;
    margin-left: 6px;
    text-align: center;
    font-size: 11px;
    overflow: hidden;
    height: 30px;
}
#Conversation .messages div > span .time {
    float: right;
    margin-left: 10px;
    font-size: 12px;
    color: #39709c;
    vertical-align: middle;
    margin-top: 5px;
    white-space: nowrap;
    width: 110px;
    text-align: right;
}
#Conversation .messages div.other > span .time {
    float: left;
    margin-right: 10px;
    margin-left:0px;
}
.searchline {
    /* display:none; */
}
#formHtml.rtl {
    margin-left: 6px !important;
    margin-right: 40px !important;
}

#formHtml.rtl .ui-icon-delete {
    margin-right: -35px;
    margin-left: auto;
}
#formHtml.rtl .ui-icon-arrow-u{
    left: 48px;
    right:auto;
}
#formHtml.rtl .ui-icon-arrow-d{
    left: 14px;
    right:auto;
}
#formHtml.rtl .ui-btn.ui-checkbox-off:after, #formHtml.rtl .ui-btn.ui-checkbox-on:after{
    left:auto;
    right: .5625em;
}
#RegistrationForms .rtl .ui-btn.ui-checkbox-off:after, #RegistrationForms .rtl .ui-btn.ui-checkbox-on:after{
    left:auto;
    right: .5625em;
}
#formHtml.rtl .textboxxx:before{
    content:'הכנס כאן טקסט';
}
#RegistrationForms .rtl h3 > a > span > .editContact {
    right: auto !important;
    left: 118px !important;
}

#RegistrationForms .rtl h3 > a > span > .ui-icon-arrow-u {
    right: auto !important;
    left: 81px !important;
}

#RegistrationForms .rtl h3 > a > span > .ui-icon-arrow-d {
    right: auto !important;
    left: 44px !important;
}

#RegistrationForms .rtl h3 > a > span > .ui-icon-delete {
    right: auto !important;
    left: 7px !important;
}
#RegistrationForms .rtl h3 > a{
    text-align:right !important;
    direction:rtl !important;
    padding-right: 2.5em !important;
    padding-left: 16px !important;
}
#RegistrationForms .rtl h3 > a:after{
    right: .5625em;
    left:auto !important;
}

.table-sticky .rtl td:not(:first-child) {
    border-right: none !important;
    border-left: 1px solid #888 !important;
}
#formHtml.rtl .ui-checkbox-off,#formHtml.rtl .ui-checkbox-on,#RegistrationForms .rtl .ui-checkbox-off,#RegistrationForms .rtl .ui-checkbox-on{
    margin-left:auto;
    padding-right:40px;
    text-align: right;
    direction: rtl;
}
#dialog .cmc label {
    display: inline-block;
    vertical-align: middle;
}
#dialog .cmc label + div {
    display: inline-block;
    vertical-align: middle;
    margin-left:5px;
}
#dialog .hide .allowComment{
    width:200px;
    vertical-align: middle;
}
#dialog .hide .ui-slider-switch {
    vertical-align: middle;
    margin-left:5px !important;
}
#formHtml.rtl input[type=text], #RegistrationForms .rtl input[type=text]{
    text-align:right;
}
#RegistrationFormsEdit #formHtml.rtl .textboxxq:before {
    content: 'נושא השדה';
}
#RegistrationFormsEdit .ui-content .rtl ~ button{
    direction: rtl;
}
.tiksorpost {
    text-align: right;
}
.tiksorpost h3 {
    text-align: center;
}
.messagesMessage {
    text-align: center;
    box-shadow: 1px 1px 5px 0px #BBB;
    display: block;
	width: 300px;
    width: fit-content;
    margin: 8px auto 12px;
    padding: 8px;
    border-radius: 5px;
    background-color: rgba(230, 230, 230, 0.5);
	cursor: pointer;
    color: #4fc4db;
    font-weight: 700 ;
    font-size: 17px;
}
.messagesMessage:hover {
	color: #2977b5;
}

.timepicker_wrap {
	padding: 10px 0px !important;
}
.timepicker_wrap .time, .timepicker_wrap .mins, .timepicker_wrap .meridian {
	margin: 0 1px !important;
	font-size: 16px !important;
	width: 46px !important;
}
.timepicker_wrap .prev, .timepicker_wrap .next{
	border: none !important;
	cursor: pointer;
}
.timepicker_wrap input.timepicki-input {
	width: 85% !important;
	margin-left: 6px !important;
	border: none;
}
.timepicker_wrap .ti_tx, .timepicker_wrap .mi_tx, .timepicker_wrap .mer_tx {
	margin: 6px 0px !important;
}
.timepicker_wrap .closePicker {
	float: left;
	margin-top: 45px;
	padding: 0px 6px 0px 4px;
	cursor: pointer;
}
.timepicker_wrap .closePickerBtn{
	background: url(img/ok-icon.png) no-repeat;
	width: 32px;
	display: block;
	height: 32px;
	background-size: 32px;
}
.observCat
{
    display: block  !important;
    white-space: initial  !important;
    overflow: hidden !important;
    text-align: left !important;
}

.loginDialog
{
    margin:40px;
    display:block;   
    opacity:1 !important;
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
    max-width: 799px;
}

.loginDialog div
{
    vertical-align: middle !important;
    text-align: center !important;
    text-shadow: none !important ;
    border:none !important;
    border-radius: 0px !important;
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
    font-size: 20px !important;
  
}

.loginDialogInputLogin div {
    background-color: var(--main-color) !important;
    border: none !important;
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
    color: white !important;
}

.loginDialogInputRegister div {
    background-color: var(--main-second-color) !important;
    border: none !important;
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
    color: white !important;
}

.login_loginButtonEnter div
{
    background-color: #ffa741 !important;
    vertical-align: middle !important;
    text-align: center !important;
    text-shadow: none !important ;
    border:none !important;
    border-radius: 0px !important;
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
    font-size: 20px !important;
    color:white !important;
}

.loginDialog input
{
    box-shadow: none !important;
	-webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-sizing: border-box !important;/* added this*/      
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
}

.loginInputLogin {
    background-color: var(--main-color) !important;
    border-color: #f0f0f0 !important;
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
}

.loginInputRegister {
    background-color: var(--main-second-color) !important;
    border-color: #f0f0f0 !important;
}

.loginDialog p
{
    height:40px; 
    box-shadow: none !important;
	-webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    text-shadow: none !important ;
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
    font-size: 17px !important;
    /*border-color: transparent !important ;*/
}

.imgcontainer {
    position: relative;
    width: 49%;
    padding-top: 65.33%; /* 4:3 Aspect Ratio */
    display:inline-block;
    margin-bottom:0;
}
.imgcontainer .imagesview {
    padding-top: 40%;
    background: gray;
    cursor: pointer;
    position: absolute;
    display: inline-block;
    text-align: center;
    top: 6px;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    font: 18vw arial;
}
.imggroup {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor:pointer;
}
.imgcontainer.isthree {
    width: 98%;
    padding-top: 73.5%; /* 4:3 Aspect Ratio */
}

@media screen and (min-width: 800px) {
    .imagesview {
        font-size: 145px !important;
    }
}

@media screen and (max-width: 414px) {
    .profilePageMenuItem[data-id=attendance] {
        margin-top: 0;
    }
    #LessonsPlanEdit .day, #LessonPlan .day {
        width: 28px !important;
    }
    #Lessons table td:nth-child(2),#Lessons table td:nth-child(4),#Lessons table td:nth-child(5){
        display: none;
    }
    #Lessons table td:nth-child(3) {
        overflow: visible !important;
        max-width: fit-content !important;
    }
    #Lessons .ui-input-search, #LessonsPlan .ui-input-search {
        margin-left: 7px;
    }
}
#Lessons table td {
    /* width: 34% !important; */
}
#MenageChildrenInfo table td, #MenageTeachersInfo table td{
    /* width: 100% !important; */
}
#MenageChildrenInfo .ui-content, #MenageTeachersInfo .ui-content, #LessonsPlan .ui-content, #Lessons .ui-content {
    overflow-x: auto;
}
/* #MenageChildrenInfo table, #MenageTeachersInfo table{
    display: block !important;
    overflow: auto !important;
    max-width: 100% !important;
}
#LessonsPlan table {
    display: block !important;
    overflow: auto !important;
    max-width: 100% !important;
}
#LessonsPlan table td {
    width: 20% !important;
    text-align: center !important;
}
#Lessons table {
    display: block !important;
    overflow: auto !important;
    max-width: 100% !important;
} */
#dayLessons td .eye {
    margin: 9px !important;
}
.eye{
    margin: 0 !important;
    background-color: #fff !important;
    border-radius: 32px !important;
    margin-right: 3px !important;
    float: right;
    display: inline-block !important;
    width: 30px !important;
    padding: 9px !important;
    vertical-align: middle;
    background: url(img/eye.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 91%;
}
.welcomeButtons {
        top: 330px;
    }

    #childImmunizationsUl li > div:first-child > * {
        display: table-cell;
        vertical-align: middle;
    }

    #childImmunizationsUl li > div:first-child > b {
        white-space: nowrap;
        padding-right: 5px;
        vertical-align: top;
    }

    #childImmunizationsUl li > div:first-child > span {
        font-size: 11pt;
        line-height: 22px;
        text-shadow: none;
        color: #555;
    }

    #childImmunizationsUl li > div:first-child {
        display: table;
        margin-top: 10px;
    }

#myparentslist ul.ui-listview {
    margin: 0 0 -1em;
    background: #fff;
}

        #myparentslist ul.ui-listview .invLeftFaceTag {
            left: 5px;
        }

        #myparentslist ul.ui-listview .invText {
            margin-left: 65px;
        }

    #myparentslist #noContactsFound, #myparentslist #noImmunizationsFound {
        text-align: center;
        font: 11pt arial;
        text-shadow: none;
        color: #777;
        margin: 28px auto;
    }

    #myparentslist .listItemOption p {
        font-size: 13px !important;
        margin: 0 !important;
    }

    #myparentslist #addNewImmunization, #myparentslist #addNewContact {
        margin-top: 20px;
    }

#myparentslist #childInfoContent {
    padding: 10px 5px;
    background: #fff;
}

    .isnull::placeholder {
        color: red;
        opacity: 1; /* Firefox */
    }

    .isnull:-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: red;
    }

    .welcomImage {
        top: 270px;
    }

    .isnull::-ms-input-placeholder { /* Microsoft Edge */
        color: red;
        width: 125px;
    }

    #dailySheetManual > div {
        display: inline-block;
        vertical-align: middle;
    }

    #dailySheetManual input {
        height: 42px;
    }

    #NewFrame .ui-content {
        overflow-x: visible;
    }

    #dailySheetEmail {
        display: inline-block;
    }

    #dailySheetEmailblock label {
        display: inline-block;
    }

    #myparentslist #childSchuedualUl li {
        min-height: 54px;
        line-height: 54px;
        padding-bottom: 0;
        padding-top: 0;
    }

    #teacherCode, #parentCode {
        text-align: center;
        margin-top: 30px;
    }

    #Kiosk .ui-content > div {
        text-align: center;
    }

    #teacherCode input, #parentCode input {
        width: 30px;
        height: 30px;
        border: none;
        border-bottom: 3px solid #000;
        font: 26pt arial;
        padding-bottom: 0;
        text-align: center;
    }

    #teacherCode span, #parentCode span {
        display: inline-block;
        width: 15px;
        height: 30px;
    }

    #attendanceChildren {
        padding-left: 0;
    }

    #Login #loginLogo p, #Start:not(.school) #loginLogo p {
        margin-top: 180px;
    }

    .loginDialog {
        margin-right: auto;
        margin-left: auto;
    }

    .video-js {
        margin-left: 2px;
    }
#attendanceChildren li {
    list-style: none;
}
#attendanceChildren li * {
    vertical-align: middle;
}
#attendanceChildren li img {
    width: 70px;
    padding-right: 8px;
}
#attendanceChildren div {
    display: inline-block;
}
#attendanceChildren div span {
    font: 700 16px arial;
    color: #777;
}
#attendanceChildren div font {
    font: 10pt arial;
    color: #777;
}
#attendanceChildren .ui-btn {
    margin: 0;
}

    #attendanceChildren div span:first-child {
        margin-top: -2px;
    }

    #Kiosk .pad {
        position: relative;
        cursor: url("img/pen.cur"), crosshair;
        cursor: url("img/pen.cur") 16 16, crosshair;
        -ms-touch-action: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

    #Kiosk canvas {
        border: 2px solid #47a;
        background: #fff;
        border-radius: 7px;
    }

    #Kiosk .sigPad {
        text-align: center;
    }

    #checkindatetime + span {
        padding-right: 30px;
    }

    #checkindatetime:invalid + span:after {
        position: absolute;
        content: '✖';
        padding-left: 10px;
        padding-top: 3px;
    }

    #checkindatetime:valid + span:after {
        position: absolute;
        content: '✓';
        padding-left: 10px;
        padding-top: 3px;
    }

    .postTextboxLabelCheckTime {
        display: table-cell;
        min-width: 80px;
        width: 80px;
        vertical-align: top;
    }

        .postTextboxLabelCheckTime label {
            height: 35px;
            font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto;
            color: rgb(153,153,153);
            width: 80px;
            float: left;
            padding-left: 3px;
            padding-right: 3px;
            margin-top: 10px !important;
        }

        .postTextboxLabelCheckTime p {
            margin: auto 0;
            line-height: 18px;
            vertical-align: middle;
            display: inline-block;
        }

    #attendanceChildren li > div:nth-child(3) {
        display: block;
        margin-top: 4px;
    }

    #Attendance .note:not(.disableButtons) {
        margin-left: 4px;
        color: #38c !important;
        text-decoration: underline !important;
    }

    #AttendanceQr .ui-content {
        text-align: center;
    }

        #AttendanceQr .ui-content div {
            font-weight: bold;
            margin-top: 20px;
            position: relative;
        }

            #AttendanceQr .ui-content div div {
                position: absolute;
                left: 50%;
                top: 8px;
                transform: translate(-50%, -50%);
            }

        #AttendanceQr .ui-content img {
            vertical-align: middle;
        }

#NewFrame .mainContent > span > label, .frameEditSpan > label {
    width: 250px;
    display: inline-block;
    vertical-align: middle;
}
.frameEditSpan > div {
    vertical-align: middle;
}
    #attendanceReports .mainContent .attbuttons {
        text-align: center;
    }

    #attendanceReports table td {
        vertical-align: top;
    }

    #attendanceReports table {
        width: 100%;
        text-align: center;
    }

    #Kiosk input[type=tel] {
        -webkit-text-security: disc;
        -moz-webkit-text-security: disc;
        -moz-text-security: disc;
    }

    .messagesMessage #messagesMessage {
        display: none;
    }

    #recaptcha {
        /*display: none !important;
    height: 1px !important;
    width: 1px !important;
    right: 6000px !important;*/
    }

        #recaptcha > div > div {
            position: absolute;
            z-index: 3;
            top: 313px;
            width: 100%;
        }

            #recaptcha > div > div > iframe {
                margin: 0 auto;
                display: inherit;
            }

    #Attendance .fullWidth > div {
        text-overflow: initial;
        overflow: initial;
        white-space: initial;
    }

    *[contenteditable] {
        -webkit-user-select: text;
        user-select: text;
    }

    #Volunteer .repeatingItems .ui-select, #Volunteer .repeatingItems .ui-input-text {
        display: inline-block;
        vertical-align: middle;
        margin: .5em .5em .5em 0;
    }

    .profilePageMenuItem span.ac {
        background: #f16d6b;
        text-shadow: none;
        color: #fff;
        display: inline-block;
        padding: 3px;
        border-radius: 12px;
        position: absolute;
        top: 2px;
        left: 53%;
    }

    .repeatingEvery {
        width: 40px !important;
        margin: 0 auto !important;
    }

    #Volunteer .ui-collapsible-content table {
        width: 100%;
        text-align: center;
        margin: 0 auto;
        border-spacing: 0;
    }

        #Volunteer .ui-collapsible-content table th {
            background: #ccc;
            text-shadow: none;
            padding: 8px;
        }

        #Volunteer .ui-collapsible-content table td {
            padding: 5px;
            border-bottom: 1px solid #ccc;
        }

        #Volunteer .ui-collapsible-content table tr td:first-child {
            border-left: 1px solid #ccc;
        }

        #Volunteer .ui-collapsible-content table tr td:last-child {
            border-right: 1px solid #ccc;
        }

    #Volunteer .ui-collapsible-heading-toggle span {
        display: inline-block;
        position: absolute;
        right: 0;
        top: 7px;
    }

        #Volunteer .ui-collapsible-heading-toggle span a {
            margin-right: 5px;
            font: 11pt arial;
        }

    #volunteerPopup-popup {
        top: 30px !important;
    }

    #volunteerPopup {
        margin-top: 0;
        margin-bottom: 30px;
    }

    #Volunteer .ui-collapsible-content table th:first-child {
        border-radius: 5px 0 0 0;
    }

    #Volunteer .ui-collapsible-content table th:last-child {
        border-radius: 0 5px 0 0;
    }

    #Volunteer .ui-collapsible-content table tr:last-child td:first-child {
        border-radius: 0 0 0 5px;
    }

    #Volunteer .ui-collapsible-content table tr:last-child td:last-child {
        border-radius: 0 0 5px 0;
    }

    .mainFaceTagItemName > p {
        margin: 20px 0px 0px 12px;
        font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
        font-size: 17px;
    }

    .textOverFlowEllypsis {
        overflow: hidden;
        /*text-overflow: ellipsis;*/
        width: 100%;
        font-size: 18px !important;
        color: rgba(128,128,128, 1);
        font-weight: 600;
    }

    .mainFaceTagGroupHeader p {
        margin: 0;
        margin-left: 5px;
        margin-right: 5px;
        /*color: rgba(150,150,150,0.8);*/
        display: inline-block;
        font-size: 16px !important;
        font-weight: 600;
        color: rgba(128,128,128, 0.8) !important;
    }

    .mainFaceTagItemAddItemP p {
        margin: 0;
        overflow: hidden;
        line-height: 20px;
        font-size: 16px !important;
        color: rgba(128,128,128, 0.8) !important;
    }

    .profilePageMenuItem p {
        margin: 0;
        font-size: 14px;
        font-weight: normal;
    }

body, input, select, textarea, button, .ui-btn {
    font-family: Ubuntu, "Open Sans", Lato, Oswald, Raleway, Roboto !important;
}

.kioskLabel {
    display: inline-block;
    min-width: 160px;
}

.kioskLabel ~ button {
    padding: 0.4em 1em;
    margin: 10px 0 !important;
}
.postStatusTagsStatus p {
    margin: inherit !important;
}
#Attendance .invText a {
    float: none;
}
#Attendance .invText a.note  {
    margin-left: 5px;
}
#attendanceReports .attbuttons{
    text-align:center;
}
#attendanceReports table {
    width: 100%;
    text-align: center;
}
#attendanceReports table td {
    vertical-align: top;
}
#frameChildrenFields .ui-content .ui-btn-icon-notext {
    display: inline-block;
    vertical-align: middle;
}
#frameChildrenFields .ui-content div {
    display: inline-block;
    width: 89%;
    vertical-align: middle;
}
.publicDraftPost,.downloadImagesGroup,.translate, .DailyJournals, .childStressed, .childNotStressed {
    /*float: right;*/
    background: var(--main-color);
    color: #fff;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    margin: 4px;
    vertical-align: top;
}
span[data-goal="uploadingStatus"] p {
    margin: 0;
    line-height: 30px;
}
.postDraftSettings ~ span[data-goal="uploadingStatus"] p {
    margin-left: 30px;
    margin-top: -20px;
}

#Kiosk .checkin.ui-btn, #Kiosk .checkout.ui-btn {
    padding: 10px 15px;
}
@media screen and (max-width: 359px) {
    #mealsOptions .ui-controlgroup-controls label {
        padding: 10px;
    }

    #suppliedNeededPopup .head p.noMargin.noPadding.textHeadline, #diapersBathroomPopup .head p.noMargin.noPadding.textHeadline {
        margin-right: 35px !important;
        font-size: 20px !important;
    }

    .ui-bar-f-dlg {
        width: 289px !important;
    }

    .popupContent {
        width: 256px !important;
    }
}

#pdfInformation .feedFileTypeIcon {
    vertical-align: middle;
    display: inline-block;
    margin: 5px;
    width: 50px;
}

#pdfInformation li {
    list-style: none;
}
#Start.school #loginLogo {
    position: relative;
    max-width: 800px;
    margin-top: 0px;
    z-index: 1;
    text-align: center;
    margin: 0 auto;
    background:#fff;
}

    #Start.school #loginLogo > img.klastrip {
        object-fit: cover;
        height: 41vh;
        width: 100%;
    }
    #Start.school #loginLogo > img.klalogo {
        width: 280px;
        margin-top: -22px;
        padding: 10px 20px;
        background-color: #fff;
        max-width: 100%;
    }
#Start.school #loginLogo > img {
        max-width: 100%;
        position: relative;
        display: block;
        margin: 0 auto;
}
#Start.school .loginDialog {
    margin-right: auto;
    margin-left: auto;
    width: 320px;
}
#Start.school .welcomeButtons{

    position: static;
}
#Start.school .terms{
    bottom: 7px;
}
#Start:not(.school) .loginDialogInputLogin div {
    background-color: #ffa741 !important;
}
#Start:not(.school) .loginDialogInputRegister div {
    background-color: #9f8ddd !important;
}
#Start:not(.school) .loginInputLogin{
    background-color:transparent !important;
}
#Login.school #loginLogo p {
    left: 50%;
    margin-top: 60px !important;
    font-size: 150%;
    font-weight: bold;
    color: #fff;
}
#Login.school .login_loginButtonEnter div{
    background-color: var(--main-second-color) !important;
}
#newCalendar .smallEvent:hover {
    text-decoration: underline;
}
#newCalendar .smallEvent {
    color: #0182d0;
    font-size: 13px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100px;
}
#oneEventPop {
    cursor: pointer;
}
#dialog .oneeventdetails {
    text-align: left !important;
}
#newCalendar + #eventscontent {
    margin-top: 2px;
    /* display: none !important; */
}
#Calendar #downloadCsv, #Calendar #daysView {
    margin-right: 4px;
}
#oneEventPop{
    width: 90vw;
    height: 80vh;
    margin-top: 10vh;
    max-width: 750px;
    overflow-y: scroll;
}
.mobileDayBox {
    width: 30px;
    padding: 8px;
    height: 30px;
    font: bold 17pt arial;
    position: relative;
}
.mobileDayEvents{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #0eb134;
    display: none;
    position: absolute;
    left: 18px;
    top: 33px;
}
#Attendance .disableButtons span, .disableButtons button {
    background: #ddd !important;
}
#Attendance a.disableButtons {
    color: #aaa !important;
}
#dialog span h4 button {
    margin-left: 10px;
}
.dialogButton .ui-checkbox + a p {
    padding-left: 40px;
}
#Volunteer td a.undo {
    font-weight: normal;
    text-decoration: underline;
}
#Volunteer .ui-collapsible-content table td div input[type=checkbox] {
    position: static;
    margin-left: -24px;
    margin-right: 3px;
}
#Volunteer .ui-collapsible-content table td div {
    display: inline-block;
}
#Volunteer .ui-collapsible-content table tr .edit, #Volunteer .ui-collapsible-content table tr .delete {
    margin: 0;
    margin-left: -50px;
}
#Volunteer .ui-collapsible-content table td div.ui-checkbox {
    margin: 0;
}
#myparentslist .invText p a {
    float: left;
}
#metroDaily {
    margin-top: 20px;
}
#activeParentsTotal{
    margin: 0 auto;
    border-collapse: collapse;
}
#activeParentsTotal td, #activeParentsTotal th{
    border: 1px solid #444;
    padding: 4px;
}
#metroDaily ul {
    list-style: none;
    padding-left: 10px;
    width: fit-content;
    border-right: 2px solid #aaa;
    display: inline-block;
}
#dialog .cmc .hide label + div.ui-input-text {
    display: none;
}
#MenageChildrenInfo table tr:not(:first-child) td span.tag, #myparentslist span.tag {
    color: #fff;
    padding: 1px 5px;
    border-radius: 5px;
    font-size: 80%;
    margin-left: 3px;
    vertical-align: middle;
    float: left;
}
.formschildren .ui-collapsible > h3 > a > img, #manageForms .ui-collapsible-set .ui-collapsible > h3 > a > img {
    vertical-align: middle;
    width: 30px;
    border-radius: 15px;
}
.formschildren .ui-collapsible > h3 > a {
   padding: 5px;
   padding-right:40px;
   background-color:#fff !important;
   color:#555;
   height: 30px;
   font-weight: normal;
}
#manageForms .ui-collapsible-set .ui-collapsible > h3 > a {

    background-color:#fff !important;
    font-weight: normal;
 }
.formschildren .ui-collapsible > h3 > a:after {/*  , #manageForms .ui-collapsible-set .ui-collapsible > h3 > a:after { */
    left:auto;
    right:.5625em;
}
.formschildren .ui-collapsible {
    width:230px;
}
.formschildren .ui-collapsible > h3 > .ui-icon-plus:after,.formschildren .ui-collapsible > h3 > .ui-icon-minus:after,#manageForms .ui-collapsible-set .ui-collapsible > h3 > .ui-icon-plus:after,#manageForms .ui-collapsible-set .ui-collapsible > h3 > .ui-icon-minus:after {
    background-color:#fff !important;
    border:1px solid #555;
    background-size:16px;
    background-image:url('data:image/svg+xml;utf8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path style%3D%22fill%3A%23555%3B%22 d="M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z"/></svg>')
}
.formschildren .ui-collapsible > h3 > .ui-icon-minus:after, #manageForms .ui-collapsible-set .ui-collapsible > h3 > .ui-icon-minus:after {
    background-image:url('data:image/svg+xml;utf8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path style%3D%22fill%3A%23555%3B%22 d="M11 11h11v1h-11h-11v-1h11z"/></svg>')
}
.formschildren .ui-collapsible-content .forms > a {
    width:calc(50% - 7px);
    display:inline-block;
    color:#555;
    font:10pt arial;
    border:1px solid #ddd;
    line-height:20px;
    padding:3px;
    border-top:0;
    border-left:0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
    position:relative;
}
.formschildren .ui-collapsible-content{
    border-bottom: 0 !important;
    border-right: 0 !important;
    padding:0;
}
.formschildren .ui-collapsible-content .forms > a.filled{
    width:calc(50% - 27px);
    padding-right:23px
}
.formschildren .ui-collapsible-content .forms > a.filled:after{
    width:20px;
    height:20px;
    background-image:url('img/checked.png');
    background-size:20px;
    content:'';
    display: inline-block;
    position:absolute;
    right:3px;
}
#formPlatform {
    position: fixed;
    top: 1px;
    left: 0px;
    width: calc(100vw - 19px);
    height: calc(100vh - 4px);
    z-index: 999;
    background: #fff;
    border: 1px solid #555;
    border-radius: 5px;
    /* max-width: 538px; */
    display: none;
}
#RegistrationForms{
    min-height: -webkit-fill-available !important;
}
#RegistrationForms #manageForms .form iframe:not(#forprint) {
    height: 100vh !important;
}
#formPlatform:before {
    content: 'X';
    margin-left: 15px;
    cursor: pointer;
    display: inline-block;
    position: absolute;
    color: #555;
    font: 16px arial;
    transform: scaleX(1.3);
    margin-top: 10px;
}
#formPlatform button {
    float: right;
    border: none;
    padding: 2px 15px;
    border-radius: 7px;
}
#formPlatform > img {
    float: right;
    width: 16px;
    vertical-align: middle;
    border: 5px solid #4ec4dd;
    border-radius: 15px;
    border-top-width: 2px;
    margin: 6px;
    cursor: pointer;
}
#formPlatform > img.edit, #formPlatform > img.delete {
    border-color: transparent;
    margin: 8px -5px 0;
}
#formPlatform > img.delete {
    margin: 8px -1px 0;
}
#formPlatform > hr{
    margin-top: 37px;
    border-color: #f6f6f654 !important;
}
#formPlatform > .form {
    overflow: auto;
    height: calc(100vh - 53px);
    margin: 5px;
}
@media screen and (min-width: 824px){
    #formPlatform {
        /* left: calc(((100vw - 800px) / 2) + 245px) !important; */
    }
}
.newDesign button:not(.ui-icon-delete) {

	background: var(--main-second-color) !important;
    float: none;
    padding-left: 40px;
}
.newDesign button:not(.ui-icon-carat-d):not(.ui-icon-delete){
    display: inline-block;
    width: fit-content !important;
    padding: 7px;
    color: #fff;
    font-weight: normal;
    /* float: right; */
    margin: 6px;
    background: #9e9e9e;
}
.newDesign button:after{
	background-color: #00000000;
}
.newDesign .topline  > div {
    display: inline-block;
    vertical-align: middle;
    margin-right:5px;
}
.newDesign .topline button {
    display: inline-block;
    vertical-align: middle;
    padding-left:35px !important;
}
.newDesign .topline button:hover {
    color:#fff !important;
}
.newDesign .topline .ui-select .ui-btn {
   padding:7px;
   padding-right:40px;
   background:#fff;
}
.newDesign .topline .ui-icon-carat-d:after{
    background-image:url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23555555%3B%22%20points%3D%2211.949%2C3.404%207%2C8.354%202.05%2C3.404%20-0.071%2C5.525%207%2C12.596%2014.07%2C5.525%20%22%2F%3E%3C%2Fsvg%3E") !important;
    background-color:#fff;
}
.newDesign .topline button#addForm {
	float:right;
}

.newDesign .topline .ui-select span {
    color:#555;
    font-weight: normal;
}
.newDesign .topline > div:first-child, .newDesign .formschildren {
    margin-left:.5em;
}
#mformlink, #sformlink {
    color: #555;
    font-weight: normal;
    font-size: 90%;
    line-height: 40px;
    border-bottom: 2px solid var(--main-second-color);
    display: inline-block;
    margin: 0 5px;
    padding: 0 6px;
}
.sideMenu #aboutSchoolLink, .sideMenu #blogLink { 
    display: none;
}
/* @media screen and (orientation:portrait){
    .sideMenu #billingLink {
        display: none;
    }
} */
#billing .spansedate + input::-webkit-calendar-picker-indicator{

    position: absolute; 
    left: 1px;
}
#MenageChildrenInfo table tr:not(:first-child) td span.tag.parent, #myparentslist span.tag.parents {
    background: #59bdd8;
}
#MenageChildrenInfo table tr:not(:first-child) td span.tag.fans, #myparentslist span.tag.fans {
    background: #6ad085;
}
#MenageChildrenInfo table tr:not(:first-child) td span.tag.emergency {
    background: #faa841;
}
.de, .deP{
    margin: 4px 3px !important;
    float: left;
    display: inline-block;
}
#metroDaily ul li {
    margin: 5px 0;
    background: #fff;
    border-radius: 10px 0 0 10px;
    cursor:pointer;
    position: relative;
    border:1px solid var(--main-color);
}

#metroDaily ul li p {
    margin: 0;
    padding: 8px;
    font-size: 17pt;
    color: var(--main-color);
    width: 200px;
}
#metroDaily > div {
    display: inline-block;
    padding: 10px;
    vertical-align: top;
    border: 2px solid var(--main-second-color);
    margin-left: -2px;
    border-radius: 5px;
    background: #fff;
}
#metroDaily > div h3 {
    text-align: center;
    margin-top: 0;
}
#metroDailyPost .ui-radio input[type="number"] {
    position: static;
    z-index: 100000;
    width: 40px;
}
#metroDailyPost .button{
    background: #fff;
    color: var(--main-color);
    border: 1px solid var(--main-color);
    border-radius: 5px;
    cursor: pointer;
    box-shadow: none;
    height: auto;
}
.commentVideoPlay {
    position: absolute;
    top: calc(50% - 35px);
    left: calc(50% - 35px);
    cursor: pointer;
}
#metroDailyPost .button span{
    font-size: 9pt;
    line-height: normal;
    display: block;
}
#metroDailyPost div[data-id="food"] > div:not(#mealsOptions):not(#BreakfastBox), #metroDailyPost #BottleBox, #metroDailyPost .firstShow {
    display: none;
}

#metroDailyPost #BottleBox input[type="number"] {
    width: 40px;
    height: 22px;    
}

#metroDailyPost #BottleBox table{
    width: 250px;
}

#metroDailyPost .button.active{
    background: var(--main-color);
    color: #fff;
}
.kdphide, .kdphide + select, .kdphide + select + div {
    display: none !important;
}
#napTable, #diapersTable, #bathroomTable, #heatTable {
    width: 300px;
    margin-top: 10px;
}
#napTable, #diapersTable{
    width: 100%;
}
#napTable th, #napTable td,#diapersTable th, #diapersTable td,#bathroomTable th, #bathroomTable td,#heatTable th, #heatTable td{
    text-align: center;
}
#napTable .addNapTime, #diapersTable .addNapTime, #bathroomTable .addNapTime{
    padding: 7px 0px;
}
.txtDesc{
    max-width: 268px;
    margin: 0 0 8px 0 !important;
}
#MenageChildrenInfo .editContact, #MenageChildrenInfo .de{
    display: inline-block;
    margin: 4px;
}
#MenageChildrenInfo .endParents td {
    /* border-top: 3px solid #888 !important; */
}
#SignUp #type + div {
    width: 115px;
}
#IncidentReportEdit button:not(.ui-icon-delete) {
    padding: 6px;
}
.messageline .addimage + div, .formAddImage .addimage + div {
    display: none;
}
#IncidentReportEdit .staffarea, #IncidentReportEdit .parentsarea {
    margin-top:35px !important;
    top: -13px;
    position: relative;
}
#IncidentReportEdit .staffarea h3, #IncidentReportEdit .parentsarea h3{
    background: #f0f0f0 !important;
}
#IncidentReportEdit .staffarea hr, #IncidentReportEdit .parentsarea hr{
    margin-left: -35px !important;
}
#IncidentReport .confirm {
    background: var(--main-color);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    position: relative;
    right: 10px;
    top: 10px;
    left: 3px;
}
#dialog .ui-icon-delete:after, #RegistrationFormsEdit .ui-icon-delete:after, #IncidentReport .ui-icon-delete:after, #IncidentReportEdit .ui-icon-delete:after,.deP.ui-icon-delete:after,.de.ui-icon-delete:after,  #LessonsPlan .ui-icon-delete:after, #Lessons .ui-icon-delete:after, #Lesson .ui-icon-delete:after, #RegistrationForms .ui-icon-delete:after, #Volunteer .ui-icon-delete:after, .commentTime .ui-icon-delete:after, #attendanceReports .ui-icon-delete:after, #AddQuestionnaires .ui-icon-delete:after {
    background-image: url(img/delete-wN.png);
    background-position: -3px -4px;
}
.feedFilterPosts{
    width: 22px;
    /*opacity: 0.35;*/
    margin-top: 2px !important;
    margin-left:6px;
    /*display: none;*/
}
.feedFilterPosts img{
    width: 22px;
}
#stressTable td {
    border: 1px solid #919191;  
}
#stressTable td img{
    width: 14px;
    vertical-align: middle;
}
#metroDailyPage .ui-content {
    min-height: 90vh;
}
#metroDailyPage #BottleBox td {
    text-align: center;
}
#dialog span h4 button#filterPosts, #dialog span h4 button#selectMonthForNjMeals {
    margin-left: 0;
}
.comment > textarea[disabled] {
    background: #eee !important;
}

#dailyAttendance th span {
    writing-mode: vertical-rl;
    font: 9pt arial;
    white-space: nowrap;
}
#dailyAttendance td input {
    margin: 0;
}
#dailyAttendance table td, #dailyAttendance table th {
    border: 1px solid #eee;
    background: #fff;
    vertical-align: middle;
    padding: 7px !important;
}
#dailyAttendance .downbtn{
    margin-top: -5px;
    cursor: pointer;
    float: right;
    margin-right: 10px;
    padding: 5px 25px;
    border-radius: 15px;
    background: var(--main-color);
    border: none;
    color: #fff;
}
#dailyAttendance table td a {
    font-weight: normal;
}
#dailyAttendance table th {
    background: #dff4f9;
    font-weight: normal;
}
#metroDailyPost svg {
    vertical-align: middle;
}
#attendanceReports .ui-controlgroup-vertical .ui-btn:focus {
    color: #333;
    border-color: #ddd;
}
#attendanceReports .ui-controlgroup-vertical .ui-btn {
    background-color: #fff;
    text-align: left;
    font-weight: normal;
}
#attendanceReports .ui-controlgroup-vertical .ui-btn:hover {
    background-color: #fbfbfb;
}
#attendanceReports .h3 {
    margin: 8px 1px;
    text-align: left;
}
#attendanceReports #dailyAttendance {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding-top: 55px;
    margin-bottom: 30px;
}
#sendPushLink span{
    display: inline-block;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--main-color);
    margin: 10px;
    color: var(--main-color);
    opacity: 0.9;
}
#sendPushLink span:hover{
    opacity: 1;
}
#topIcons{
    background: #fff;
    margin: 0 3px;
    margin-top: -2px;
    display: table;
    width: -webkit-fill-available;
}
#topIcons a{
    font-size: 13px;
    text-align: center;
    font-weight: normal;
    color: #555;
    margin: 8px;
    display: table-cell;
    padding: 8px 0;
}
#topIcons a svg{
    vertical-align: top;
}
#AddQuestionnaires .question {
    /* padding: 8px;
    border: 1px solid #888;
    border-radius: 10px;
    margin:8px; */
}
#AddQuestionnaires #allq h3 a {
    padding-right: 40px;
}
.ui-content > #topMsg {
    background: #fff;
    padding: 10px;
    text-align: center;
    color: #663399;
}
#isYesNo{
    display: none;
}
.allsignreport{
    border-collapse: collapse;
}
.allsignreport td{
    border: 1px solid #555;
    vertical-align: middle;
}
.allsignreport .sign{
    vertical-align: middle;
}
fieldset{
    vertical-align: middle;
}
#childQrContent .ui-input-text {
    display: inline-block;
    width: 60px;
}
#childQrContent {
    font-size: larger;
}
.postMedia > div.video-js {
    width: auto !important;
}
#ChildFeed img[data-goal="postComment"], #displayPost img[data-goal="postComment"]{
    display: none;
}
#markAllAsRead {
    margin-top: 5px;
    background: var(--main-color);
    color: #fff;
    border-color: #fff;
    border-style: double;
    border-radius: 5px;
    cursor: pointer;
}
#RegistrationFormsEdit button:not(.ui-icon-delete), #IncidentReportEdit button:not(.ui-icon-delete){
    display: inline-block;
    width: auto;
    margin: 3px;
    font-size: 90%;
} 

#formHtml  div[contenteditable="true"] {
    padding: 6px;
}

@media only screen and (max-width: 447px) {
    .form-bottom-row .ui-flipswitch.ui-shadow-inset.ui-bar-inherit.ui-corner-all.ui-mini {
      bottom: 23px !important;
      float:right;
      position: relative;
    }
  }
  

  #RegistrationFormsEdit .ui-flipswitch-active {
    background-color: var(--main-color);
    border-color: var(--main-color);
  }

#RegistrationFormsEdit .ui-icon-delete {
    float: left;
    bottom: 10px;
}

#IncidentReportEdit .ui-icon-delete {
    position: absolute;
    margin-left: -35px;
}
#RegistrationFormsEdit .textboxxx:before, #IncidentReportEdit .textboxxx:before {
    content: 'Enter text here';
    color: #888;
    position: absolute;
}
#postStory h3:not(.con):before{
    padding: 3px 8px;
    font-size: 80%;
    font-weight: normal;
}
#postStory #storycontent {
   /* padding-left: 40px;*/
}
#postStory .ui-icon-delete {
    display: inline-block;
    position: absolute;
    margin: 4px;
    margin-top: -30px;
    width: 22px !important;
    height: 22px;
}
#postStory .ui-icon-arrow-d, #postStory .ui-icon-arrow-u{
    display: inline-block;
    position: absolute;
	right:10px;
    margin: 4px;
	margin-top:-30px;
    width: 22px !important;
    height: 22px;
}
#postStory .storybuttons span {
    display: inline-block;
    text-align: center;
}
#postStory .ui-icon-arrow-u{
	right:40px;
}
#postStory .ui-icon-delete:after{
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20height%3D%2214%22%20viewBox%3D%22-40%200%20427%20427.00131%22%20width%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m232.398438%20154.703125c-5.523438%200-10%204.476563-10%2010v189c0%205.519531%204.476562%2010%2010%2010%205.523437%200%2010-4.480469%2010-10v-189c0-5.523437-4.476563-10-10-10zm0%200%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m114.398438%20154.703125c-5.523438%200-10%204.476563-10%2010v189c0%205.519531%204.476562%2010%2010%2010%205.523437%200%2010-4.480469%2010-10v-189c0-5.523437-4.476563-10-10-10zm0%200%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m28.398438%20127.121094v246.378906c0%2014.5625%205.339843%2028.238281%2014.667968%2038.050781%209.285156%209.839844%2022.207032%2015.425781%2035.730469%2015.449219h189.203125c13.527344-.023438%2026.449219-5.609375%2035.730469-15.449219%209.328125-9.8125%2014.667969-23.488281%2014.667969-38.050781v-246.378906c18.542968-4.921875%2030.558593-22.835938%2028.078124-41.863282-2.484374-19.023437-18.691406-33.253906-37.878906-33.257812h-51.199218v-12.5c.058593-10.511719-4.097657-20.605469-11.539063-28.03125-7.441406-7.421875-17.550781-11.5546875-28.0625-11.46875h-88.796875c-10.511719-.0859375-20.621094%204.046875-28.0625%2011.46875-7.441406%207.425781-11.597656%2017.519531-11.539062%2028.03125v12.5h-51.199219c-19.1875.003906-35.394531%2014.234375-37.878907%2033.257812-2.480468%2019.027344%209.535157%2036.941407%2028.078126%2041.863282zm239.601562%20279.878906h-189.203125c-17.097656%200-30.398437-14.6875-30.398437-33.5v-245.5h250v245.5c0%2018.8125-13.300782%2033.5-30.398438%2033.5zm-158.601562-367.5c-.066407-5.207031%201.980468-10.21875%205.675781-13.894531%203.691406-3.675781%208.714843-5.695313%2013.925781-5.605469h88.796875c5.210937-.089844%2010.234375%201.929688%2013.925781%205.605469%203.695313%203.671875%205.742188%208.6875%205.675782%2013.894531v12.5h-128zm-71.199219%2032.5h270.398437c9.941406%200%2018%208.058594%2018%2018s-8.058594%2018-18%2018h-270.398437c-9.941407%200-18-8.058594-18-18s8.058593-18%2018-18zm0%200%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m173.398438%20154.703125c-5.523438%200-10%204.476563-10%2010v189c0%205.519531%204.476562%2010%2010%2010%205.523437%200%2010-4.480469%2010-10v-189c0-5.523437-4.476563-10-10-10zm0%200%22%2F%3E%3C%2Fsvg%3E");
    
}
#postStory .storybutton {
    display: inline-block;
    width: fit-content;
}
#postStory .textbox{
    min-height: 50px;
}
#postStory .storybuttons {
    background: #fff;
    width: 100vw;
    margin-top: -3px;
    left: 0;
    text-align: center;
    font-size: 80%;
    padding-bottom: 5px;
    z-index: 19;
}
#RegistrationForms .p{
    text-shadow: 0px 1px 1px #000;
    font-weight: bold;
}
#postStory .leftButton + div + div {
    font-size: 40px;
    line-height: 10px;
    position: absolute;
    right: 77px;
    margin-top: -3px;
    cursor: pointer;
}
.storyimage:not(#postStory img){
	width:100%;
    margin-top: 10px;
}
.storageimage {
	width:100%;
    margin-top: 10px;
}
#postStory .storyimage {
    width: calc(100%);
    margin: 10px 0;
}
#postStory .story2image + .foredit {
    width: calc(50% - 18px) !important;
}
#postStory .storybutton {
    padding: 3px 6px;
    margin: 6px 2vw;
}
.story2image:not(#postStory img){
	width:calc(50% - 4px);
    margin-top: 10px;
}
#postStory .story2image {
    width: calc(50% - 4px);
    /* margin: 10px 0; */
}
#postStory .ui-input-text, #postStory .ui-input-text input{
    display: none;
}
#WeeklyProjectionEdit .textboxxx:before {
    content: 'Area and materials offered';
    color: #888;
    position: absolute;
}
#WeeklyProjectionEdit .textboxxxx:before {
    content: 'Teacher research question';
    color: #888;
    position: absolute;
}
#WeeklyProjectionEdit .textboxxxxx:before {
    content: 'Milestones';
    color: #888;
    position: absolute;
}
#WeeklyProjectionEdit .assembly .after {
    content: '';
    width: 28px;
    height: 28px;
    position: absolute;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%2214%2C3%2011%2C0%207%2C4%203%2C0%200%2C3%204%2C7%200%2C11%203%2C14%207%2C10%2011%2C14%2014%2C11%2010%2C7%20%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    top: -10px;
    left: -14px;
    cursor: pointer;
    box-shadow: 0 0 7px 0 !important;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    background-color: #888;
}
#WeeklyProjectionEdit .assembly {  
    padding: 2px;
    margin: 2px;
    border: 1px solid #888;
    border-radius: 5px;
    position: relative;
    margin-left: 10px;
}
#RegistrationFormsEdit .textboxxq:before, #IncidentReportEdit .textboxxq:before {
    content: 'Type question here';
    color: #888;
    position: absolute;
}
#RegistrationFormsEdit .textboxxqb:before, #IncidentReportEdit .textboxxqb:before {
    content: 'Amount';
    color: #888;
    position: absolute;
}
#RegistrationForms .pdf{
    display: inline-block;
    width: fit-content;
    margin: 0 5px 0 20px;
    padding: 8px;
}
#RegistrationForms .pdf + div {
    display: none;
}
.ui-icon-vaccines {
    display: none !important;
}
#RegistrationForms .ui-content > table{
    display: inline-block;
    overflow: auto;
    max-width: 100%;
}
.invContainer .ui-icon-star + .ui-input-text + span{
    float: right;
    margin-right: -60px;
    margin-top: 13px;
    font-size: 11px;
    text-align: center;
}
.invContainer .ui-icon-star{
    float: right;
    margin-top: -17px;
    margin-right: 30px;
}
.table-sticky{
    max-height: calc(100vh - 60px);
    overflow: auto;
}
.table-sticky table{
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
.table-sticky tr:first-child td, .table-sticky tr:first-child th{
    position: sticky !important;
    top: 0 !important;
    background: #fff;
}
.table-sticky tr:first-child td:first-child, .table-sticky tr:first-child th:first-child{
    z-index: 2;
}
.table-sticky td:first-child, .table-sticky th:first-child{
    position: sticky !important;
    left: 0 !important;
    background: #fff;
    z-index: 1;
}
.table-sticky td:not(:first-child){
    border-left: none !important;
}
.table-sticky tr:not(:first-child) td{
    border-top: none !important;
}
#MenageChildrenInfo .updatevaccine{
	margin:0 auto;
}
#MenageChildrenInfo .updatevaccine + div {
    display: none;
}
.faceTagDivContainer > .classesRegen{
    float: right;
    font-size: small;
    margin-right: 100px;
    margin-top: 10px;
    z-index: 2;
    position: relative;
    max-width: 300px;
    white-space: break-spaces;
}
#MenageChildrenInfo .ui-icon-star{
    margin: 0 auto;
}
.invContainer .ui-input-text, #MenageChildrenInfo .ui-icon-star + .ui-input-text{
    display: none;
}
#myparentslist #childSchuedualUl .invContainer .ui-input-text {
    display: inline-block;
}
.green.ui-icon-star:after {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3Agreen%3B%22%20points%3D%2214%2C5%209%2C5%207%2C0%205%2C5%200%2C5%204%2C8%202.625%2C13%207%2C10%2011.375%2C13%2010%2C8%20%22%2F%3E%3C%2Fsvg%3E);
    background-color: #fff !important;
}
#RegistrationForms .signature, #RegistrationFormsEdit .signature, #IncidentReport .signature, #IncidentReportEdit .signature{
    margin: 3px 0;
    border: 1px solid #888;
    width: fit-content;
    border-radius: 4px;
    background: #fff;
    padding: 1px;
}
#notificationsLink > a > div > div {
    top: -6px;
}

#MenageChildren table, #searchLessons, #dayLessons, #MenageChildrenInfo table, #Lessons table, #LessonsPlan table, #Lesson table, #MenageTeachers table, #MenageTeachersInfo table {
    border-collapse: collapse;
    color: #888;
    background: #fff;
    width: 100%;
    box-shadow: 0 0 3px 0px;
    min-height: 37px;
}
#MenageChildren table td,#dayLessons td, #searchLessons td, #Lessons table td, #LessonsPlan table td, #Lesson table td, #MenageChildrenInfo table td, #MenageTeachers table td, #MenageTeachersInfo table td{
    /*padding: 6px;*/
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

#MenageChildrenInfo table td:not(:first-child), #MenageTeachersInfo table td:not(:first-child){

    text-align: center;
}
#MenageChildrenInfo table tr:first-child td, #Lessons table tr:first-child td, #LessonsPlan table tr:first-child td, #Lesson table tr:first-child td, #MenageTeachersInfo table tr:first-child td{

    padding:8px;
}
#Lessons table td,#LessonsPlan table td,#searchLessons td, #Lesson table td{
    padding:8px;
    text-align:left;
}
#dayLessons td {
    /* padding-left: 8px; */
    text-align: left;
    line-height: 37px;
}
#dayLessons td .ui-input-text{

    display: inline-block;
    float: right;
    margin: 0;
}
#addDayLesson {
    margin-left: 3px;
}
#dayLessons{
    margin: 5px 0px;
}
#MenageChildren table td:first-child, #MenageTeachers table td:first-child{
    
    width: 55px;
}
#MenageChildren table td:first-child .ui-checkbox,#MenageTeachers table td:first-child .ui-checkbox{

    margin: auto 10px;
}
#MenageChildren table td img, #MenageChildrenInfo table td img,#MenageTeachers table td img, #MenageTeachersInfo table td img {
    width: 40px;
    /* height: 40px; */
    border-radius: 20px;
    vertical-align: middle;
    margin: 10px;
}
#MenageChildrenInfo table td img,#MenageTeachersInfo table td img {
    margin: 2px;
}
#MenageChildrenInfo table td img#deleteChildInfoDoc:hover {
    box-shadow: 0 0 4px 0;
}
#MenageChildrenInfo table td img#deleteChildInfoDoc {
    width: 29px; 
    float: right;
}
#MenageChildrenInfo table td .regis{
    display: inline-block;
    margin-left: 49px;
    margin-top: -17px;
    color: #aaa;
    font-size: 13px;
    float: left;
}
#MenageChildrenInfo .header p,#MenageTeachersInfo .header p {
    display: inline-block;
    margin:5px;
}
#MenageChildrenInfo .header,#MenageTeachersInfo .header {
    margin-top:15px;
}
#MenageChildrenInfo .header > a,#MenageTeachersInfo .header > a {
    float: right;
    color: #888;
    font-weight: normal;
}
.formLongText {
    padding: 0.4em;
}
.azreport{
    border: 0.2px solid;
}
.formLongText input {
    display: none !important;
}

.form .testSpan {
    visibility: hidden;
    white-space: nowrap;
}
#MenageChildrenInfo .header:first-child button {
    /* display: none; */
}
#MenageChildrenInfo .table-sticky table tr td:last-child {
    min-width: 60px;
}

#MenageChildrenInfo .table-sticky table tr td:last-child button {
    display: inline-block;
    margin: 8px 1px !important;
}
#MenageChildrenInfo .header button,#MenageTeachersInfo .header button{
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    margin-top: 3px;
    margin-right: 2px;
    box-shadow: none;
}
#MenageChildren .ui-input-text,#MenageTeachers .ui-input-text {
    display: inline-block;
    margin-right: 20px;
}
#MenageChildrenInfo .editChild{
    display: none;
    vertical-align: middle;
}
#MenageChildren .ui-btn:not(.ui-icon-carat-d),#MenageTeachers .ui-btn:not(.ui-icon-carat-d) {
    display: inline-block;
    width: fit-content !important;
    padding: 7px;
    color: #fff;
    font-weight: normal;
    float: right;
    margin: 6px;
    background: #9e9e9e;
}
#MenageChildren .ui-select, #MenageTeachers .ui-select{
	display:inline-block;
	vertical-align:middle;
}
#MenageChildren #search, #MenageChildren #addChild,#MenageTeachers #search, #MenageTeachers #addAdult {

    background: var(--main-second-color) !important;
}
#MenageChildren #search{
    top: 2px;
}
#MenageChildren #addChild, #MenageTeachers #addAdult{
    float: none;
    padding-left: 40px;
}
#MenageChildren #addChild:after,#MenageTeachers #addAdult:after {
   
    background-color: #00000000;
}
#MenageChildren .topdiv,#MenageTeachers .topdiv{
    background: #fff;
    margin-top: -16px;
    padding: 5px 10px;
    overflow: auto;
}
#MenageChildrenInfo table {
    /* overflow: auto;
    display: block; */
}
#MenageChildren #status, #Lessons #status, #LessonsPlan #status, #MenageChildrenInfo #status,#MenageTeachers #status, #MenageTeachersInfo #status{
    background: #fff;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    color: #888;
    border-radius: 5px;
    display: none;
}
#MenageChildren table tr:not(:first-child) td,#MenageTeachers table tr:not(:first-child) td {
    height: 60px;
}
#MenageChildren table tr:not(:first-child) td span, #MenageChildrenInfo table tr:not(:first-child) td span, #MenageTeachers table tr:not(:first-child) td span {
    display: inline-block;
}

#MenageChildrenInfo table td,#MenageTeachersInfo table td {
    padding: 8px 3px;
}
#viewChildForms{
    width: -webkit-fill-available;
    margin: .5em;
}
#WeeklyProjection table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px auto;
}
#WeeklyProjection table td {
    border: 1px solid #888;
    height: 70px;
    padding: 5px;
}
#WeeklyProjection .wheader + tr td {
    border-top: none;
}
#WeeklyProjection .wheader td {
    height: auto;
    padding: 5px;
    border-bottom: none;
}
#attendanceReports table.njMeals .bold {
    border-left: 3px solid #888;
}
#attendanceReports table.njMeals, #RegistrationForms table {
    border-collapse: collapse;
    margin-top: 60px;
    background: #fff;
}
#attendanceReports table.njMeals td, #RegistrationForms table:not(.xl6914505) td {
    border: 1px solid #888;
    vertical-align: middle;
    padding: 0px;
}
#Volunteer .ui-collapsible h3.pub > a {
    padding-right: 140px;
}
#attendanceReports table.njMeals td {

    padding: 0px;
}
#RegistrationForms .xl8514505:not(:first-child) div, .xl12514505 .ui-checkbox,.xl11114505 .ui-checkbox,.xl11014505 .ui-checkbox, #RegistrationForms .xl8614505 div {
    float: left;
}
.xl8814505 .ui-checkbox {
    position: absolute;
    left: 10px;
}
#attendanceReports table.njMeals tr.total td {
    border-top: 3px solid #888;
    border-bottom: 3px solid #888;
}
#attendanceReports table.njMeals tr:first-child td:not(:first-child) {
    border-left: 3px solid #888;
}
#RegistrationForms table{
    margin: 30px auto;
}
#RegistrationForms table td{

    padding: 3px;
}
#RegistrationForms table td:not(:first-child){
    text-align: center;
}
.speec{
    width: 25px;
    margin-top: 12px;
    cursor: pointer;
}
.dialogButton a{
    width: 100%;
    display: inline-block;
}
#LessonsPlan .ui-input-search, #Lessons .ui-input-search{
    display: inline-block;
}
#Lessons td a, #LessonsPlan td a, #Lesson td a{
    margin: 0 3px;
    float: right;
    display: inline-block;
}
#Lessons td:last-child,#LessonsPlan td:last-child, #Lesson td:last-child{
    width: 108px;
}
#Lessons td:last-child{
    max-width: 108px;
}
#Lesson .des, #LessonsEdit #allclasses, #LessonsEdit #allMilestone{
    background: #fff;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    color: #888;
    border-radius: 5px;
}
#LessonsEdit #allclasses, #LessonsEdit #allMilestone, #Lesson #allclasses, #Lesson #allMilestone{
    text-align: left;
}
#LessonsEdit #allMilestone, #Lesson #allMilestone{
    margin-bottom: 20px;
}
#LessonsEdit .age .ui-input-text, #LessonsPlanEdit .age .ui-input-text, #Lesson .age .ui-input-text {
    display:inline-block;
}
#LessonsPlanEdit input[type="date"]::-webkit-calendar-picker-indicator {
    display:none;
} 
#LessonsPlanEdit input[type="date"] {
	width: 103px;
}
#volunteerPopup #firstForm + table td:first-child div.ui-input-text {
    width: fit-content;
}
#volunteerPopup #firstForm + table td:first-child .ui-input-text input[type="date"] {
    margin-right: -27px;
}
#volunteerPopup #firstForm + table input[type="date"]::-webkit-calendar-picker-indicator, #volunteerPopup #firstForm + table input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}
#LessonsEdit .duration .ui-input-text, #Lesson .duration .ui-input-text {
    display:inline-block;
}
#LessonsEdit .category .ui-select, #Lesson .category .ui-select {
    display:inline-block;
    vertical-align: middle;
}
#LessonsEdit .theme .ui-select, #Lesson .theme .ui-select, .incident .ui-select {
    display:inline-block;
    vertical-align: middle;
}
#LessonsEdit .gs .ui-select, #Lesson .gs .ui-select {
    display:inline-block;
    vertical-align: middle;
}
#LessonsPlan .ui-select, #Lessons .ui-select {
    display:inline-block;
    vertical-align: middle;
}
#LessonsPlan .ui-select .ui-btn,#Lessons .ui-select .ui-btn, .incident .ui-select .ui-btn{
    padding: 8px 40px 7px 8px;
    margin-top: -3px;
    margin-left: 8px;
}
#MenageChildren .ui-select .ui-btn, #MenageTeachers .ui-select .ui-btn, #childrenInfo .ui-select .ui-btn{
    padding: 8px 40px 7px 8px;
    margin-top: -3px;  
}
#Lessons .ui-select .ui-btn {
    
    margin-left: 7px;
}
#LessonsEdit .location .ui-select, #Lesson .location .ui-select {
    display:inline-block;
    vertical-align: middle;
}
#LessonsEdit .age input, #Lesson .age input {
    width: 50px;
}
.lessonHead{
    font-weight: bold;
    margin: 3px;
}

.ui-select .ui-btn>span.lesAss:not(.ui-li-count) {

    white-space: break-spaces;
}

#dialog #addAm {
    margin-left: auto !important;
}
#Lesson #allMilestone span, #LessonsEdit #allMilestone span {
    box-shadow: 0 0 4px 0;
    padding: 5px;
    display: inline-block;
    margin: 3px auto;
    border-radius: 3px;
    margin-bottom: 8px;
}

#Lesson #allMilestone.edi span:before, #LessonsEdit #allMilestone span:before {
    content: '❌';
    position: absolute;
    font-size: 68%;
    margin-top: -10px;
    margin-left: -10px;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 0 4px 0;
    border-radius: 9px;
}
#LessonPlan .ui-icon-delete {
    visibility: hidden;
    width: 0px;
}
.lessonFormHead {
    width: 100px;
    display: inline-block;
    margin-left: 8px;
}
#Lesson textarea#des, #LessonsEdit textarea#des {
    
    height: 100px !important;
}
#childrenInfo .ui-select, #childrenInfo .ui-input-text {
    display: inline-block;
    vertical-align: middle;
    margin: 10px;
}
#childrenInfo .ui-select .ui-btn:hover,#Lesson .ui-select .ui-btn:hover,#MenageChildren .ui-select .ui-btn:hover,#MenageTeachers .ui-select .ui-btn:hover,.incident .ui-select  .ui-btn:hover, #Lessons .ui-select .ui-btn:hover, #LessonsPlan .ui-select .ui-btn:hover, #LessonsEdit .ui-select .ui-btn:hover, #LessonsPlanEdit .ui-select .ui-btn:hover {
    background: #fff;
}
#childrenInfo .ui-select .ui-btn:active,#Lesson .ui-select .ui-btn:active,#MenageChildren .ui-select .ui-btn:active,#MenageTeachers .ui-select .ui-btn:active,.incident .ui-select  .ui-btn:active,#Lessons .ui-select .ui-btn:active, #LessonsPlan .ui-select .ui-btn:active, #LessonsEdit .ui-select .ui-btn:active, #LessonsPlanEdit .ui-select .ui-btn:active  {
    background: #fff;
}
#childrenInfo .ui-select .ui-btn,#Lesson .ui-select .ui-btn,#MenageChildren .ui-select .ui-btn,#MenageTeachers .ui-select .ui-btn,.incident .ui-select  .ui-btn,#Lessons .ui-select .ui-btn, #LessonsPlan .ui-select .ui-btn, #LessonsEdit .ui-select .ui-btn, #LessonsPlanEdit .ui-select .ui-btn {
    background: #fff;
}
#childrenInfo .ui-select .ui-btn:after,#Lesson .ui-select .ui-btn:after,#MenageChildren .ui-select .ui-btn:after,#MenageTeachers .ui-select .ui-btn:after,.incident .ui-select .ui-btn:after,#Lessons .ui-select .ui-btn:after, #LessonsPlan .ui-select .ui-btn:after, #LessonsPlanEdit .ui-select .ui-btn:after, #LessonsEdit .ui-select .ui-btn:after {
    background-color: transparent;
}
#LessonsPlanEdit .ui-select{
    display: inline-block;
}
#childrenInfo .ui-icon-carat-d:after,#Lesson .ui-icon-carat-d:after,#MenageChildren .ui-icon-carat-d:after,#MenageTeachers .ui-icon-carat-d:after,.incident  .ui-icon-carat-d:after,#Lessons .ui-icon-carat-d:after, #LessonsPlan .ui-select .ui-icon-carat-d:after, #LessonsPlanEdit .ui-icon-carat-d:after, #LessonsEdit .ui-icon-carat-d:after{
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23555%3B%22%20points%3D%2211.949%2C3.404%207%2C8.354%202.05%2C3.404%20-0.071%2C5.525%207%2C12.596%2014.07%2C5.525%20%22%2F%3E%3C%2Fsvg%3E) !important;
}
#childrenInfo .ui-select span,#Lesson .ui-select span,#MenageChildren .ui-select span,#MenageTeachers .ui-select span,#Lessons .ui-select span, #LessonsPlan .ui-select span,  #LessonsPlanEdit .ui-select span, #LessonsEdit .ui-select span {
    font-weight: normal;
    text-shadow: none;
}
#LessonsPlan .ui-input-text:before {
    content: 'End Date';
    position: absolute;
    padding: 7px;
    color: #777;
}
#LessonsPlan .ui-select + .ui-input-text:before {
    content: 'Start Date';
}
#LessonsPlan .hideBContent.ui-input-text:before {
    content: none;
}
#LessonsPlan .ui-input-text, #Lessons .ui-input-text {
    display: inline-block;
    margin-left: 8px;
}
#Lessons .ui-input-text {
    margin-left: 7px;
}
#Lessons .ui-input-text {

    /* width: 85px; */
}
#Lessons #search{
    
    width: 87px;
}
#Lessons #fromAge {
    width: 81px;
}
#Lessons #toAge {
    width: 63px;
}
#Lessons .ui-input-search {
   /* padding-right: 5px; */
}
#Lessons #Theme-button span{

    width: 50px;
}
#Lessons #frame-button span{

    width: 93px;
}
#Lessons #location-button span{

    width: 63px;
}
#Lessons #groupSize-button span{

    width: 77px;
}
#Lessons .ui-btn-icon-notext:after {
    background-color: var(--main-second-color);
}
#Lessons .ui-icon-delete:after{
    background-position: 4px;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20height%3D%2214%22%20viewBox%3D%22-40%200%20427%20427.00131%22%20width%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m232.398438%20154.703125c-5.523438%200-10%204.476563-10%2010v189c0%205.519531%204.476562%2010%2010%2010%205.523437%200%2010-4.480469%2010-10v-189c0-5.523437-4.476563-10-10-10zm0%200%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m114.398438%20154.703125c-5.523438%200-10%204.476563-10%2010v189c0%205.519531%204.476562%2010%2010%2010%205.523437%200%2010-4.480469%2010-10v-189c0-5.523437-4.476563-10-10-10zm0%200%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m28.398438%20127.121094v246.378906c0%2014.5625%205.339843%2028.238281%2014.667968%2038.050781%209.285156%209.839844%2022.207032%2015.425781%2035.730469%2015.449219h189.203125c13.527344-.023438%2026.449219-5.609375%2035.730469-15.449219%209.328125-9.8125%2014.667969-23.488281%2014.667969-38.050781v-246.378906c18.542968-4.921875%2030.558593-22.835938%2028.078124-41.863282-2.484374-19.023437-18.691406-33.253906-37.878906-33.257812h-51.199218v-12.5c.058593-10.511719-4.097657-20.605469-11.539063-28.03125-7.441406-7.421875-17.550781-11.5546875-28.0625-11.46875h-88.796875c-10.511719-.0859375-20.621094%204.046875-28.0625%2011.46875-7.441406%207.425781-11.597656%2017.519531-11.539062%2028.03125v12.5h-51.199219c-19.1875.003906-35.394531%2014.234375-37.878907%2033.257812-2.480468%2019.027344%209.535157%2036.941407%2028.078126%2041.863282zm239.601562%20279.878906h-189.203125c-17.097656%200-30.398437-14.6875-30.398437-33.5v-245.5h250v245.5c0%2018.8125-13.300782%2033.5-30.398438%2033.5zm-158.601562-367.5c-.066407-5.207031%201.980468-10.21875%205.675781-13.894531%203.691406-3.675781%208.714843-5.695313%2013.925781-5.605469h88.796875c5.210937-.089844%2010.234375%201.929688%2013.925781%205.605469%203.695313%203.671875%205.742188%208.6875%205.675782%2013.894531v12.5h-128zm-71.199219%2032.5h270.398437c9.941406%200%2018%208.058594%2018%2018s-8.058594%2018-18%2018h-270.398437c-9.941407%200-18-8.058594-18-18s8.058593-18%2018-18zm0%200%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m173.398438%20154.703125c-5.523438%200-10%204.476563-10%2010v189c0%205.519531%204.476562%2010%2010%2010%205.523437%200%2010-4.480469%2010-10v-189c0-5.523437-4.476563-10-10-10zm0%200%22%2F%3E%3C%2Fsvg%3E");
}
#Lessons .ui-btn-icon-notext{
    background-color: #82db9811;
    border-color: #82db9877;
}
#LessonsEdit .category, #LessonsEdit .theme, #LessonsEdit .age, #LessonsEdit .location, #LessonsEdit .gs, #LessonsEdit .duration, #Lesson .category, #Lesson .theme, #Lesson .age, #Lesson .location, #Lesson .gs, #Lesson .duration{

    display: inline-block;
    min-width: 50%;
}
#LessonsPlan .ui-input-text input::-webkit-calendar-picker-indicator {
    margin: auto;
}
#LessonsPlan .ui-input-text input {
    visibility: hidden;
    padding: 5px;
    width: 130px;
}
#LessonsEdit #allclasses, #Lesson #allclasses{
    margin-bottom: 10px;
}
#LessonsEdit a#am, #LessonsEdit a#cc, #Lesson a#am, #Lesson a#cc{
    margin-left: 6px;
}
#LessonsPlanEdit .lessonFormHead {
	width: 110px;
}
#LessonsPlanEdit .day, #LessonPlan .day{
    background: #fff;
    color: #059;
    display: inline-block;
    padding: 5px;
    border-radius: 26px;
    width: 42px;
    text-align: center;
    font-size: 140%;
    padding-top: 12px;
    line-height: 15px;
    margin: 3px;
}
#LessonsPlanEdit .age > span {
    white-space: nowrap;
}
#LessonsPlanEdit .day span, #LessonPlan .day span {
    font-size: 50%;
    font-weight: normal;
}
#LessonsPlanEdit #daysArr, #LessonPlan #daysArr{
    width: fit-content;
    margin: 0 auto;
}
#LessonsPlanEdit #lessonsPlanDay, #LessonPlan #lessonsPlanDay{
    display: none;
    width: 90vw;
    margin: 0 auto;
    border: 2px solid #059;
    border-radius: 6px;
    margin-top: 5px;
    max-width: 406px;
}
#LessonsPlanEdit #lessonsPlanDay .ui-input-text:first-child {
    margin-top: 0;
}
#searchLessons td a {
    float: right;
    background: #059;
    font-size: 80%;
    padding: 2px 10px;
    color: #fff;
}
#LessonPlan #lessonsPlanDay #dayLessons input {
    pointer-events: none;
}
#LessonPlan #lessonsPlanDay .ui-state-disabled{
    opacity: 1;
}
#LessonPlan #des, #LessonPlan #frame, #LessonPlan .age{
    background: #fff;
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 8px;
}
.ui-icon-copy:after{
    background-image: url(img/copy.svg);
    background-size: 14px;
}
#LessonsPlan table tr:first-child td,#Lessons table tr:first-child td {
    font-weight: bold;
    font-size: 79%;
    /* text-align: center; */
}
#Lessons table td {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 50px;
    /* text-align: center; */
}
.incident ul{
    margin: 7px auto;
}
.incident{
    width: 752px;
    padding: 10px;
    
    margin: 0 auto;
    background: #fff;
    display: none;
}
.incidentMobile{
    width: 78vw;
    padding: 3vw;
    
    margin: 0 auto;
    background: #fff;
    display: none;
}
.fontSize{font-size: 3.7vw;}
.incident br + div {
font-weight: bold;
}
.incident > div:first-child > div:nth-child(1),
.incident > div:first-child > div:nth-child(3),
.incident > div:first-child > div:nth-child(4)
{
text-align: center;
}
.incident > div:first-child > div:nth-child(1),
.incident > div:first-child > div:nth-child(3){
    display: none;
}
.incident > div:first-child > div:nth-child(5)
{
margin-top: 10px;
}
.incident input[type="date"]::-webkit-calendar-picker-indicator {
margin: auto;
}
.incident input[type="date"]{
width: 130px;
}
.incident > div:first-child > div:nth-child(7) {
border:1px solid #000;
padding:5px;
font-weight: bold;
}
.incident > div:first-child > div:nth-child(7) span {

font-weight: normal;
}

.incident > div:first-child > div:nth-child(7) > div > .ui-input-text {
display: inline-block;
}
.incident > div:first-child > div:nth-child(7) > div:nth-child(4) > .ui-input-text {
width:590px
}
.incident > div:first-child > div:nth-child(7) > div:nth-child(6) > .ui-input-text {
width:274px
}
.incidentMobile > div:first-child > div:nth-child(7) {
    border: 0.3vw solid #000;
    padding: 1.5vw;
    font-weight: bold;
}
.incident .signBox{
border:1px solid #000;
padding:5px;
text-align:center;
font-weight: bold;
}
.incident .signBox + .signBox{
border-top:0;
}
.incident .signBox .ui-input-text{
display: inline-block;
}
.incident .signBox .sig{
display: inline-block;
}
.incident .signBox .sign, .signBox .sign + div{
width: fit-content;
margin: 0 auto;
}
.incident .btn{
    float: right;
    width: fit-content;
    margin-top: -19px;
}
#incidents {
    
}
#incidents a:not(.ui-btn) {
    margin: 5px;
    width: -webkit-fill-available;
    display: inline-block;
    padding: 8px;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 0 3px 0 !important;
    border-radius: 5px;
}
.ui-icon-print:after {
    background-image: url(img/downlowdForBilling.png);
    background-position: 2px 1px !important;
	background-size:16px;
    background-color: #4ec4dd !important;
}
#LessonsPlan table {
    margin-top: 15px;
}

#newincident {
    width: fit-content;
    float: right;
    margin-right: 6px;
}
#incidents .ui-btn-icon-notext:after {
    background-color: var(--main-color);
}
#incidents .ui-btn {
    display: inline-block;
    right: 24px;
    position: absolute;
    padding: 4px 10px;
    background-color: var(--main-color);
    color: #fff;
}
/* #Calendar .ui-content{
    
    height: calc(100vh - 60px);padding: 10px;margin-left: -2px;
} */
.dailyDate {
    float: right;
    background: var(--main-color);
    color: #fff;
    padding: 3px 6px;
    font-size: 75%;
    font-weight: normal;
    border-radius: 3px;
}
#RegistrationForms .form .ui-icon-print:after {
    background-image: url(img/save.svg);
    background-size: 21px;
}
#RegistrationForms .form .submitForm:active, #RegistrationForms .form .submitForm:hover, #RegistrationForms .form .submitForm {
    background-color: var(--main-color);
    color: #fff;
    font-weight: 400;
}

#MenageChildren .ui-icon-info, #childlist .ui-icon-info{
    border: 0;
    height: 18px;
    width: 18px !important;
    padding: 0 !important;
    background: #eee !important;
    margin: 0 !important;
    display: inline-block;
    /* margin-top: 20px !important; */
}
#MenageChildren .ui-icon-info{
    float: left !important;
    margin-top: 20px !important;
}

#childlist .ui-icon-infonew{
    border: 0;
    height: 18px;
    width: 18px !important;
    padding: 0 !important;
    background: #eee !important;
    margin: 0 !important;
    display: inline-block;
    /* margin-top: 20px !important; */
}

#getAllDataNumForChildren th {
    white-space: nowrap;
    padding: 7px;
    border: 1px solid #888;
    vertical-align: bottom;
}
#getAllDataNumForChildren td{
    vertical-align: middle !important;
    border: 1px solid #888;
    line-height: 40px;
    padding: 3px;
    text-align: center;
}
#childrenInfo .ui-select, #childrenInfo .ui-input-text {
    display: inline-block;
    vertical-align: middle;
    margin: 10px;
}
#LessonsControl .ui-content {
    /* background: #fff !important;
    height: calc(100vh - 76px); */
    padding: 10px !important;
}
#LessonsControl button {
    background: var(--main-second-color);
    text-shadow: none;
    color: #fff;
}
#getAllDataNumForChildren{

    border-collapse: collapse;
    background: #fff;
    width: -webkit-fill-available;
    margin: 10px;
}
#NewFrame #Ratiosblock .ui-input-text{
    display: inline-block;
}
#getAllDataNumForChildren td img{

    width: 40px;
    border-radius: 20px;
    vertical-align: middle;
    float: left;
}
#formPlatform > .form iframe:not(#forprint){
    height: calc(100vh - 58px) !important;
}
@media print{
    
    @page {     margin: 50px 10px !important; }

    div[data-role="collapsible"][data-id="825"] .form.print input[type="text"] {
        padding: 0;
        margin: 0;
    }

    div[data-role="collapsible"][data-id="825"] .form.print .ui-input-text.ui-body-inherit.ui-corner-all.ui-shadow-inset {
        padding: 0;
        margin: 0;
        border: 0;
    }

    div[data-role="collapsible"][data-id="825"] .form.print .txtboxq {
        margin: -8px auto;
        margin-top:-14px;
    }

    div[data-role="collapsible"][data-id="825"] .form.print span, div[data-role="collapsible"][data-id="825"] .form.print input {
        font-size: 6px !important;
    }

    div[data-role="collapsible"][data-id="825"] .form.print label.txtbox.ui-btn.ui-corner-all.ui-checkbox-off.ui-btn-inherit.ui-btn-icon-left, div[data-role="collapsible"][data-id="825"] .form.print label.txtbox.ui-btn.ui-corner-all.ui-checkbox-on.ui-btn-inherit.ui-btn-icon-left {
        padding: 0 0 0 20px;
        margin: 0;
        max-height: 16px;
        line-height: 13px;
    }
    div[data-role="collapsible"][data-id="825"] .form.print .ui-checkbox-off:after, div[data-role="collapsible"][data-id="825"] .form.print .ui-checkbox-on:after{
        display: none;
    }
    div[data-role="collapsible"][data-id="825"] .form.print .ui-checkbox input{
        width: 10px;
        height: 10px;
        margin: -5px;
        margin-left: 2px;
    }
    div[data-role="collapsible"][data-id="825"] .form.print .ui-checkbox {
        margin: 0;
    }

    div[data-role="collapsible"][data-id="825"] .form.print br {display:none;}
    div[data-role="collapsible"][data-id="825"] .form.print div { min-height:auto !important}
    div[data-role="collapsible"][data-id="825"] .form.print .txtbox {
        margin-top: -12px;
    }
    div[data-role="collapsible"][data-id="825"] .form.print .ui-checkbox-off,  div[data-role="collapsible"][data-id="825"] .form.print .ui-checkbox-on{
        background-color: transparent;
        background-image: none;
    }

    #RegistrationForms .print .ui-collapsible-content-collapsed, #IncidentReport .print .ui-collapsible-content-collapsed{
        display: block;
    }
    #IncidentReport .ui-collapsible-content, #IncidentReport .ui-content, #RegistrationForms .ui-collapsible-content, #RegistrationForms .ui-content{
        padding: 0;
    }
    #RegistrationForms .ui-collapsible-set, #IncidentReport .ui-collapsible-set{
        margin: 0;
    }
    #RegistrationForms .ui-checkbox-off:after, #IncidentReport .ui-checkbox-off:after {
        border: 2px solid #000;
    }
    #IncidentReport .ui-checkbox-on:after, #IncidentReport .ui-checkbox-on, #RegistrationForms .ui-checkbox-on:after, #RegistrationForms .ui-checkbox-on{
        background-color: transparent;
        background-image: none;
    }
    #IncidentReport .form .ui-icon-print, #IncidentReport .form .submitForm, #RegistrationForms .form .ui-icon-print, #RegistrationForms .form .submitForm, .fpdf {
        display: none !important;
    }
    #RegistrationForms .ui-collapsible-content, #IncidentReport .ui-collapsible-content {
        border: 0;
    }
    #RegistrationForms a.ui-collapsible-heading-toggle, #IncidentReport a.ui-collapsible-heading-toggle {
        visibility: hidden;
    }
    .topIncidentDiv{
        display: none !important;
    }
    #RegistrationForms table:not(.xl6914505),#RegistrationForms #downloadtable,#RegistrationForms #printAllbutton,#IncidentReport table:not(.xl6914505){
        display: none !important;
    }
    #RegistrationForms .ui-content, #IncidentReport .ui-content{
        margin-top: 0;
    }
    #RegistrationForms .head, #IncidentReport .head{

        display: none;
    }
    #IncidentReport .ui-collapsible-heading-toggle, #RegistrationForms .ui-collapsible-heading-toggle{
        display: none;
    }
    #RegistrationForms .form.print, #IncidentReport .form.print{
        position: static !important;
        z-index: 1;
        background: #fff;
        width: -webkit-fill-available !important;
        top: 0;
        left: 0;
        height: -webkit-fill-available !important;
        padding: 10px !important;
    }
    #Incident .nobrak {
        position: relative;
        page-break-inside: avoid;
        width:calc(100% - 70px);
    }
    #Incident .head, #Incident #incidents {
        display: none;
    }
    #Incident .incident > div:first-child > div:nth-child(7){
        width:calc(100% - 85px);
    }
    #RegistrationForms .topline, #RegistrationForms .formschildren{
        display: none;
    }
    #formPlatform{
        height: auto !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #formPlatform > .form{
        height: auto !important;
    }

    .signatureParent
    {
        background: none !important;
    }
}
#attendanceNameFase .afor {
    opacity: 0.3;
}
#Settings label[for="PersonalSettings"] + div{
    display: none;
}
#nameFace td{
	vertical-align: middle !important;
}
#Attendance #teacherchild {
    margin-top: -28px;
    margin-bottom: 20px;
    padding:0;
}
#Attendance #teacherchild div{
   display:inline-block;
   padding: 10px;
   padding-top: 9px;
   width: calc(50% - 24px);
   margin:0;
   margin-left: 2px;
   text-align:center;
   font-weight:bold;
   background: #d0d0d0;
   border:1px solid #bbb;
   border-radius:5px 5px 0 0;
   cursor: pointer;
}
#Attendance #teacherchild .active{
    background: var(--main-color);
    border-bottom: 0;
    padding-top: 10px;
}
.njMeals tr:first-child td {
    font-size: 13px !important;
}
#subsidiesLi,
/* #reportsLi, */
.divForSelect:nth-child(2),
.divForSelect:nth-child(4),
.imgdoan,
.imgdoan + a,
/* .imgdoan ~ table td:nth-child(6), */
.imgdoan ~ table td:nth-child(2),
.imgdoan ~ table td:nth-child(3),
#CheckboxBi-Weekly,
#CheckboxBi-Weekly + p,
#CheckboxBi-Weekly + p + div,
/*.divEditLibraryInPlan:nth-child(11),*/
#oneTimeChargeWithBlock #allTheReport > div > p:nth-child(14),
#oneTimeChargeWithBlock #allTheReport > div > p:nth-child(15),
#setBillingWithBlock #allTheReport > div > p:nth-child(16),
#setBillingWithBlock #allTheReport > div > p:nth-child(17),
#oneTimeChargeWithBlock > p:nth-child(3),
#oneTimeChargeWithBlock > p:nth-child(3) + input , 
#oneTimeChargeWithBlock > p:nth-child(3) + input + p , 
#oneTimeChargeWithBlock > p:nth-child(3) + input + p + div, 
#oneTimeChargeWithBlock > p:nth-child(3) + input + p + div + input, 
#oneTimeChargeWithBlock > p:nth-child(3) + input + p + div + input + p , 
#oneTimeChargeWithBlock > p:nth-child(3) + input + p + div + input + p + div,
.forthechildinfo ,
.forthechildinfo + p ,
.forthechildinfo + p + p,
img[src="img/chargeDue.png"],
img[src="img/chargeDue.png"] + li,
.editOpenMenuBtn.editPlanCild,
.editOpenMenuBtn.editPendingChild,
#setBillingWithBlock #paymentDate + p + p,
#setBillingWithBlock #paymentDate + p + p + input,
#setBillingWithBlock #paymentDate + p + p + input + p,
#addMyBank + p,
#addMyBank + p + button,
#billing .pcps td:nth-child(2),
#billing .ptps td:nth-child(3),
/* #billing #report2, */
#addMyBank + p + button + p /*  ,
.schoolsettingsnotavilaboile * */
{
    
    visibility:hidden;
}

.salfimg
{
    height:150px;
    width:150px;
    object-fit: cover;
}

@media only screen and (min-width:600px)  {
    .BoulderHeaderImg {
        height: inherit;
    }
}

@media only screen and (max-width: 600px) {
    .BoulderHeaderImg {
        width: 220px;
        vertical-align: middle;
    }

    #attendanceReports table.njMeals{
        overflow-x: auto;
        display: block;
    }
  }



.mainFaceTagGroup[data-id="myKidsHistoricFrames"] li .mainFaceTagItemName:not(.mainFaceTagItemNameRTL) p, .mainFaceTagGroup[data-id="myKidsFrames"] li .mainFaceTagItemName:not(.mainFaceTagItemNameRTL) p{
    display: inline-block;
    width: calc(100% - 110px);
    padding-right: 110px;
    position: absolute;
}

span#startingAmountPay, #discountPay, #tatalPay, #subchargePay {
    font-size: 11px;
    display: block;
}

span#startingAmountPay {
    margin-top: -10px;
}

span#tatalPay {
    border-top: 1px solid black;
    width: 77%;
}

.divEditLibraryInPlan:has(.addDiscount),
.divEditLibraryInPlan:has(.addsubCharge) {
    border: 0;
    height: auto;
}

div#editBiliingLibrary {
    box-shadow: 0px 0px 3px 0px #80808059 !important;
    margin-left: 10px;
    width: 96%;
    height: 46%;
    height: auto;
    overflow: auto;
    padding-bottom: 50px;
    position: relative;
    scrollbar-width: none;
    max-height: 51%;
}

input#inputSavePlan {
    position: absolute;
    float: right;
    /* bottom: 10px; */
    /* right: 15px; */
    background-color: var(--main-second-color);
    font-size: 11px;
    border: 0px;
    border-radius: 4px;
    color: white;
    height: 21px;
    -webkit-text-stroke: thin;
    width: 50px;
    position: relative;
    top: 65px;
    right: -135px;
}

input#inputCancelPlan {
    position: absolute;
    float: right;
    /* bottom: 10px; */
    background-color: #9e9e9e54;
    font-size: 11px;
    border: 0px;            
    border-radius: 4px;
    height: 21px;
    width: 50px;
    /* right: 80px; */
    position: relative;
    top: 65px;
    right: -120px;
}

.divEditLibraryInPlan {   
    position: relative;
    /* float: left; */
    width: 125px;
    border-bottom: 2px solid #8080806e; 
    height: 50px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-right: 12px;
    display: inline-block;
}
.divEditLibraryInPlan:has(#newChargeTotal) {
    float: right;
    /* margin-top: -10px; */
    /* display: block; */
}
.divEditLibraryInPlan:has(.inputDiscountDescraption ),
.divEditLibraryInPlan:has(.inputChargeDescraption )
 {
    margin-right: 200px;
}
button.addDiscount {
    margin-top: 5px;
    background-color: #4ec4dd;
    font-size: 11px;
    border: 0px;
    border-radius: 4px;
    color: white;
    height: 21px;
    -webkit-text-stroke: thin;
    width: 100px;
    cursor: pointer;
    padding: 4px 6px;
}

button.addsubCharge {
    margin-top: 5px;
    background-color: #4ec4dd;
    font-size: 11px;
    border: 0px;
    border-radius: 4px;
    color: white;
    height: 21px;
    -webkit-text-stroke: thin;
    width: 100px;
    cursor: pointer;
    padding: 4px 6px;
}

div#wrapDiscountDisplay > * {
    width: 46%;
    display: inline-block;            
}

div#wrapDiscountDisplay {
    position: absolute;
    left: 10px;
    top: 170px;
    font-size: 12px;
    flex-direction: row;
    width: 100%;
    overflow: scroll;
    height: 100px;
}
.discountAmountDisplay{
    text-align: end;
}
div#wrapDiscountDisplay > * {
    font-size: 12px;   
}
#tableImgStudent tr td p {
    position: absolute;
    top: 33px;
    width: 75px;
    left: -7px;
    font-size: 12px;
    color: gray;
    text-align: center;
}
img#deleteLibrary {
    cursor: pointer;
    display: inline-block;
    position: relative;
    top: -27px;
    left: 240px;
}
div#wrapManageCharges > * {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
}

div#wrapManageCharges {
    overflow: auto;
    max-height: 250px;
}

#wrapManageCharges {
    scrollbar-width: 1px;
    -ms-overflow-style: none;
}

#wrapManageCharges::-webkit-scrollbar {
    display: none;
}
/* #wrapManageCharges {
    overflow-y: scroll; 
    
    scrollbar-width: thin; 
    scrollbar-color: #888 #ccc; 
}*/
/* 
#wrapManageCharges::-webkit-scrollbar {
    width: 5px;
}

#wrapManageCharges::-webkit-scrollbar-track {
    background: #ccc;
    border-radius: 5px;
}

#wrapManageCharges::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 5px;
    border: 1px solid #ccc; 
} */
#editBiliingLibrary .divEditLibraryInPlan textarea.inputsTableLibraryInPlan{
	height:12px;
}
#wrapManageCategories {
    cursor: default;
}
#wrapManageCategories p{
    display:inline-block;
	margin-right:3px;
	vertical-align:super;
	width: 80%;
}
#wrapManageCategories img{
    cursor: pointer;
}

    /* print.css */
/*
@media print {

    body {
        line-height: 1.0 !important;
        font-size: 0.7em !important;
    }

    .form.print * {

    .form-section {
        page-break-inside: avoid;
    }

    .form-header, .form-footer {
        display: none;
    }

    input, select, textarea {
        font-size: 5pt !important;
    }

    span, p {
        font-size: 10pt !important;
        line-height: 1em !important;
    }

    .form-field {
        margin-bottom: 3px;
    }

   
    .ui-input-text{
        margin-top:0em !important;
    }
    .ui-btn {
        padding: 0 !important;
    }
    .ui-btn-icon-left {
        padding-left: 1em !important;
    }
    .ui-btn, label.ui-btn {
        border-style: none !important;
    }
    #RegistrationForms .ui-checkbox-off:after, #IncidentReport .ui-checkbox-off:after {
     border: 1px solid black !important;
    }

    .ui-checkbox input{
        width:auto !important;
    }

    .ui-checkbox {
        font-size: small;
        margin: .2em 0 !important;
        width: auto;
        float: left;
        break-inside: avoid;
    }

    .ui-checkbox .ui-btn{
        padding-left: 40px !important;
        font-size: small !important;
        font-weight: normal !important;
        margin: .2em 0 !important;
    }

    .ui-btn.ui-checkbox-off:after{
        display: block !important;
        width: 12px !important;
        height: 12px !important;
        margin: -8px 2px 0 2px !important;
    }
}

.txtbox {
    min-height: 0px !important;
    clear: both !important;
    break-inside: avoid;
}  

.txtboxq{
    clear: both !important;
}
    @page {
        size: A4;
        margin: 10mm;
    }

}

*/


.action-buttons {
    display: none; /* Hide by default */
    
}

h3:hover .action-buttons {
    display: inline; /* Show on hover */
}



.galleryPostContainer1 .galleryPost:hover{
    border: 1px solid orange;
    opacity: 0.7;
}


.galleryPostContainer1 article {
    margin: 1px;
    border: 1px solid #eee;
    padding: 1px;
    position: relaive;
}


.galleryPostContainer1 article.isSelected{
    opacity: 0.7;
    box-shadow: 2px 2px 4px 0px #aaa;
    border: 2px solid #999;
    margin: 0px;
}

.galleryPost1{
    overflow: hidden;
    height: 100%;
    cursor: pointer;
    
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    transition: 0.2s linear;
    position: relative;
    background-size: cover;
}

.tickIcon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: white; /* White color for the tick to contrast with the green background */
    font-size: 10px; /* Adjust size as needed */
    display: none; /* Hidden by default */
    background-color: green; /* Green background for the circle */
    border-radius: 50%; /* Makes the background a circle */
    padding: 5px 8px; /* Adjust padding to form a better circle */
    line-height: 15px; /* Adjust line height to vertically center the tick */
    text-align: center; /* Center the tick horizontally */
}

.security-btn {
    width: 100%;
    padding: 10px;
    background-color: #4EC5DD;
    color: white;
    border: none;
    cursor: pointer;
    font-size: x-large;
    border-radius: 25px; 
}

.topIncidentDiv .ui-input-text
{
    width: 32%;
    float: left;
    margin-left: 2px;
    height: 40px;
}

.topIncidentDiv .ui-select
{
    float: left;
}

.topIncidentDiv .ui-select
{
    float: left;
    width: 49%;
}

.sideMenuInjury
{
    position: absolute !important;
	/* top: 50% !important; */
	margin-top: -4px !important;
	right: 30px !important;
    left: auto !important;
    display:none;
}

.sideMenuInjury div
{
	position: relative !important;
	left: auto !important;
}

.signatureParent
{
    position:absolute;
    width: 197px;
    height: 71px;
    margin-top: -75px;
    background: #bbb3;
}

#postStory .storyTinymceContiner
{
    margin-bottom: 35px;
}

/* Custom Camera Styling */

.overlay-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 110px;
    background-color: rgba(0, 0, 0, 0.5); /* Black with 30% transparency */
}

.overlay-top {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% transparency */
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.flashlight-icon {
    width: 30px;
    height: 30px;
    background-image: url('img/flashlight-icon.png'); /* Set the flashlight icon image */
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.done-button {
    padding: 5px 15px;
    color: white;
    border: 2px solid white;
    border-radius: 4px;
    text-transform: uppercase;
    cursor: pointer;
    background-color: transparent;
}

.camera-interface {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
    z-index: 1; /* Ensure it appears above the overlay */
}

.clicked-image {
    position: absolute;
    left: 30px;
    bottom: 30px;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    cursor: pointer;
}

.clicked-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    z-index: 10; /* Ensure the badge is above other elements */
}

.outer-circle {
    width: 53px;
    height: 53px;
    background-color: transparent;
    border-radius: 50%;
    border: 4px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.camera-button {
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.change-orientation {
    width: 30px;
    height: 30px;
    background-image: url('img/orientation-icon.png'); /* Use the URL of your provided image */
    background-size: cover;
    background-position: center;
    position: absolute;
    right: 34px;
    bottom: 34px;
    border-radius: 4px;
    cursor: pointer;
}

#StorageMedia .leftButton + div + div {
    font-size: 40px;
    line-height: 10px;
    position: absolute;
    right: 77px;
    margin-top: -3px;
    cursor: pointer;
}

#scannerOutline {
    position: relative;
    margin: 40px; /* Center the div horizontally */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--main-color);
    height: calc(70vh - 56px);;
    top: calc(23% - 56px);
}




#copperWrapper * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
  }
  
  #copperWrapper {
    width: 100%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  #copperWrapper .editor-container,
  #copperWrapper .preview-container {
    display: block;
    position: relative;
    width: 100%;
    background-color: #ffffff;
    padding: 2em 1em;
    box-shadow: 0 1.25em 4em rgba(8, 6, 75, 0.15);
    border-radius: 0.5em;
  }
  
  #copperWrapper .editor-container {
    margin: 0 0.6em 0 0;
  }
  
  #copperWrapper .preview-container {
    display: grid;
    place-items: center;
  }
  
  #copperWrapper label {
    display: block;
    background-color: #025bee;
    color: #ffffff;
    width: 12em;
    font-size: 1.1em;
    text-align: center;
    padding: 1em 0;
    border-radius: 0.3em;
    margin: auto;
    cursor: pointer;
  }
  
  #copperWrapper .image-container {
    margin-bottom: 1em;
  }
  
  #copperWrapper img {
    max-width: 100%;
  }
  
  #copperWrapper button,
  #copperWrapper a {
    border: none;
    outline: none;
    place-items: center;
    cursor: pointer;
  }
  
  #copperWrapper .options-btn {
    margin-top: 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  #copperWrapper .options-btn button {
    background-color: lightgray;
    color: #025bee;
    border-radius: 0.3em;
    font-size: 0.8em;
    height: 3.2em;
    width: 3.2em;
  }
  
  #copperWrapper .options-btn button img {
    width: 1.1em;
  }
  
  #copperWrapper .action-btns {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 1em;
  }
  
  #copperWrapper #preview,
  #copperWrapper #download {
    background-color: #025bee;
    font-size: 1em;
    padding: 0.8em 1em;
    color: #ffffff;
    border-radius: 0.3em;
    text-decoration: none;
  }
  
  #copperWrapper .hide {
    display: none;
  }
  
  @media screen and (max-width: 1200px) {
    #copperWrapper {
      flex-direction: column;
      position: absolute;
      transform: translateX(-50%);
      left: 50%;
      top: 1em;
      height: 80%;
      justify-content: center;
    }
  
    #copperWrapper img {
      display: block;
      width: 60%;
      margin: 0 auto;
    }

    #copperWrapper .image-container{
        height:600px;
    }
  
    #copperWrapper .editor-container {
      margin: 0 0 0.6em 0;
    }
  }

  #postStory .mainContent {
    overflow-y: auto; 
}

.sortable-ghost {
    opacity: 0.5;
}


.storageimage-container {
    width: 338px;
    height: 477px;
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
}

.storageimage-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.controls-container {
    display: flex;
    width: 100%;
    max-width: 580px;
    margin-top: 10px;
    padding: 5px;
    box-sizing: border-box;
}

.photo-size-select {
    background: #fff;
    display: block;
    float: left;
}

.print-button {
    width: 49%;
    top: 8px;
    background: var(--main-second-color);
    color: white;
    border: none;
    cursor: pointer;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 20px;
}
.controls-container .ui-select{
    width: 49%;
}
.print-button:hover {
    background-color: #45a049; 
}

.controls-container #Status-button {
    background: white;
}

#prevBtn{
    width: 50px;
    float:left;
}

#nextBtn{
    width: 50px;
    float:right;
}

.image-count-label {
    display: inline-block;
    margin-top: 15px;
    font-size: 18px;
}

.storybutton svg {
    width: 54.4px;
    height: 54.4px;
}

@media (max-width: 768px) {
    .storybutton svg {
        width: 34.4px;
        height: 34.4px;
    }
}

.formAddImage {
    margin:15px;
}

.injuryimagec img {
    width: 350px;
    height: auto;
    margin-left: -18px;
}

.feedFilterDailySheet{
    margin-left: 7px;
}

.feedFilterDailySheet img{
    width: 27px;
}

.disabled-checkbox {
    pointer-events: none; /* Prevent interaction */
    opacity: 0.8; /* Slightly reduced opacity */
    color: #6c757d; /* Use a lighter color to indicate disabled state */
    cursor: not-allowed; /* Show not-allowed cursor */
}

.disabled-checkbox + label {
    color: #6c757d; /* Lighten label color if needed */
}

#nonotmsg
{
    background: #fff;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    color: #888;
    border-radius: 5px;
    display: block;
}

.storageStatusOptions {
    background-color: white;
    width: 97%;
    margin-left: 3px;
    overflow: hidden; /* Hide overflowing content */
    white-space: nowrap; /* Prevent line breaks */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Align items vertically */
    height: 34px;
    overflow: scroll;
}

.storageStatusOptions img {
    height: 25px;
    padding-right: 5px;
}

.storageStatusOptions a {
    float: right;
}


.storageStatusTags {
    display: inline-block; 
    white-space: nowrap; 
    width: 100%;
    overflow: scroll;
}

.storageStatusTags > span {
    display: inline-block;
    vertical-align: middle; 
    margin-right: 10px; 
}

.storageStatusTags img {
    opacity: 0.2;
    width: 14px;
    height: 14px;
    vertical-align: middle; 
}

.storageStatusTags > span p {
    margin: 0;
    display: inline-block;
    color: rgb(150, 150, 150);
    font-size: 14px;
    font-weight: 100;
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
}


.storageDateClass {
    background-color: white;
    text-align: center;
    margin-left: 3px;
    font-size: small;
    font-weight: bold;
    width:97%;
}

.inAppStorageHeader {
    width: 100%;
    height: 30px;
    border-color: white;
}

.mediaselectfilterheader {
    height: 30px;
    background: var(--main-color);
    border-radius: 9px 9px 0 0;
    color: #fff;
    font-weight: normal;
    line-height: 26px;
}
.mediaselectfilterheader::after {
    content: 'X';
    color:#fff;
    font-weight:normal;
    font-size:20px;
    float:right;
    margin:2px 5px;
    cursor:pointer;
    transform: scale(1.2, 1);
}

.visualHealtLabel {
    font-size: medium !important;
    font-weight: bold !important;
    padding: 6px 0 0 6px;
}

.visualHealtContainer{
    margin-top: 10px; 
    width: 95%; 
    display: flex; 
    align-items: center; 
    gap: 10px;
    height: 40px;
}

img.attendanceprofileimg {
    border-radius: 50%;
    width: 60px;
    height: 60px;
}

.checkmark {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background-color: var(--main-color);
    border-radius: 50%;
    display: none; /* Initially hidden */
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
}

/* Button styles */
button.attendanceaction {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    background-color: var(--main-second-color);
    color: white;
    cursor: pointer;
    margin: 5px;
    width:180px;
}

p.AttendanceCheckinMessage {
    word-wrap: break-word;
    white-space: normal; 
    overflow-wrap: break-word;
    width: 100%; 
    color: rgb(170, 170, 170) !important;
}



/* Extra small screen (phones) */
@media (max-width: 486px) {
    .attbuttonsstyle {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    /* Buttons take up full width on phones */
    button.attendanceaction {
        width: 90%; /* Less than 100% to leave some space between buttons */
        font-size: 12px; /* Small font size */
        padding: 10px 15px;
        margin-bottom: 10px;
    }
}

/* Below 400px screens for even smaller devices (if necessary) */
@media (max-width: 400px) {
    button.attendanceaction {
        width: 100%; /* Full width */
        font-size: 10px; /* Even smaller font size */
        padding: 10px 12px;
    }
}

/* Common styles for the LED button */
.led-button {
    width: 15px;
    height: 15px;
    border-radius: 50%; /* Makes it circular */
    margin-top: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Glow effect */
    background: linear-gradient(145deg, #ccc, #fff); /* Base gradient for 3D effect */
    position: relative;
}

/* Green LED (on state) */
.led-button.green {
    background: radial-gradient(circle, #32cd32 30%, #228b22 70%);
    box-shadow: 0 0 15px 4px rgba(50, 205, 50, 0.8); /* Glow for the green LED */
}

/* Grey LED (off state) */
.led-button.grey {
    background: radial-gradient(circle, #bbb 30%, #777 70%);
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5); /* Subtle glow for grey */
}

/* Optional: Add a glossy highlight for a realistic effect */
.led-button::after {
    content: '';
    position: absolute;
    top: 5%;
    left: 5%;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3); /* Semi-transparent white */
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.6);
}

.attbuttonsstyle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--main-color);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    gap: 1px;
}

.attendanceaction {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    background-color: var(--main-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    width: 100%; /* Ensure buttons stretch equally */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.attendanceaction img {
    width: 24px;
    height: 24px;
    margin-bottom: 5px;
}

.attendanceaction div {
    font-size: xx-small; /* Set text to xx-small */
    color: white;
    text-align: center;
}

.attendanceaction:hover {
    background-color: var(--main-second-color);
    color: white;
    transform: scale(1.05);
}

.attendanceaction:active {
    background-color: var(--main-color); /* Clicked state background */
    transform: scale(0.98); /* Slight shrink on click */
    color: white; /* Consistent text color */
}

p.attendancestatusmsg{
    white-space: normal !important; 
    word-wrap: break-word !important; 
    overflow: visible !important; 
    text-overflow: unset !important; 
    width: 100% !important; 
    color: rgb(170, 170, 170) !important; 
    padding:2px;
}

/* Notes Button */
.notes-buttonabs {
    position: absolute;
    top: 5px; /* Position from the top */
    left: 5px; /* Position from the left */
    background-color: #f8f9fa;
    color: black;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10; /* Ensure it stays above other elements */
    pointer-events: auto; /* Ensure it’s clickable */
}

.attendanceTime {
    font-size: medium;
    display: block;
    margin-top: 2px;   
    margin-bottom: 2px;    
    color:var(--main-color);
}

/* Move Button */
.move-buttonabs {
    position: absolute;
    top: 45px; /* Position below the Notes button */
    left: 5px; /* Align with the Notes button */
    background-color: #f8f9fa;
    color: black;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10; /* Ensure it stays above other elements */
    pointer-events: auto; /* Ensure it’s clickable */
}

/* Move Button Hover Effect */
.move-buttonabs:hover, .notes-buttonabs:hover {
    background-color: var(--main-second-color);
}

.visualHCContainers
{
    position: absolute;
    bottom: 10px;
    width: 88%;
    margin-left: 0px;
}

.newAttnContainer{
    border: 1px solid #CFCFCF;
    padding: 10px !important;
    margin: 10px !important;
    border-radius: 12px;
    background-color: white;
    height: 220px;
}

.attendanceNewdheader {
    display: flex;
    align-items: center;
    min-height: 118px;
}
.attProfileCont {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-left: 30px;
    height: 73px;
    min-width: 100px;   
        
}

.attProfileCont > img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #CFCFCF;
    position: relative;
    z-index: 1;
}

.attprofImage {
    display: inline-block;
    padding: 5px 10px;
    background-color: var(--main-color);
    border-radius: 20px;
    color: white;
    font-size: 11px;
    font-weight: bold;
    position: absolute;
    bottom: -10px;
    min-width: 90px;
    max-width:101px;
    text-align: center;
    z-index: 999;
    text-overflow: ellipsis;
}

.chckinoutmsg{
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid var(--main-color);
    border-radius: 20px;
    color: var(--main-color);
    font-size: 14px;
    font-weight: bold;
    margin-top: 4px;
}

.attMessageCnt{
    width: calc(100% - 100px);
    text-align: center;
    color: #676767;
    padding-top: 3px;
}

.attMessageCntChild{
    font-size: small;
    display: inline-block;
    width: 100px;
}

.undoattnStatus {
    font-size: small;
    display: inline-block;
    margin-left: -54px !important;
}

.attndCardDivider{
    width: 100%;
    border-top: 1px solid #CFCFCF;
    margin-left: 0px;
}

.custom-button {
    position: relative;
    background-color: var(--main-color);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 3px 6px !important;
    font-size: 15px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5) !important;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 80px !important;
    text-align: center;
    float: left;
    margin: 10px !important;
    border: 2px solid white;
    background-image: none !important;
}

.custom-button::after {
    content: ""; /* Pseudo-element for white background */
    position: absolute;
    bottom: -5px; /* Slightly below the button */
    left: 10%; /* Center horizontally */
    width: 80%; /* Adjust width for the white background */
    height: 8px; /* Thickness of the white bottom area */
    border-radius: 10px; /* Rounded edges */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    z-index: -1; /* Send it behind the button */
}

.custom-button:hover {
    transform: scale(1.05); /* Slight zoom on hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Enhanced shadow */
}

.custom-button:active {
    transform: scale(0.95); /* Slight shrink on click */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduced shadow */
}

.editNoteAttClass{
    float: right;
    margin: 15px;
    width: 20px;
    height: 20px;
    /* background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D"http%3A//www.w3.org/2000/svg"%20width%3D"24"%20height%3D"22"%20viewBox%3D"0%200%2024%2022"%3E%3Cpath%20d%3D"M16.775%203.47191L20.5333%207.24046C20.6917%207.39922%2020.6917%207.65825%2020.5333%207.81702L11.4333%2016.9417L7.56667%2017.3721C7.05%2017.4306%206.6125%2016.9919%206.67083%2016.4738L7.1%2012.5966L16.2%203.47191C16.3583%203.31315%2016.6167%203.31315%2016.775%203.47191ZM23.525%202.51515L21.4917%200.476291C20.8583%20-0.158764%2019.8292%20-0.158764%2019.1917%200.476291L17.7167%201.9553C17.5583%202.11406%2017.5583%202.3731%2017.7167%202.53186L21.475%206.30041C21.6333%206.45917%2021.8917%206.45917%2022.05%206.30041L23.525%204.8214C24.1583%204.18217%2024.1583%203.1502%2023.525%202.51515ZM16%2014.46V18.7132H2.66667V5.34365H12.2417C12.375%205.34365%2012.5%205.28933%2012.5958%205.19742L14.2625%203.52622C14.5792%203.2087%2014.3542%202.66974%2013.9083%202.66974H2C0.895833%202.66974%200%203.568%200%204.67517V19.3817C0%2020.4889%200.895833%2021.3871%202%2021.3871H16.6667C17.7708%2021.3871%2018.6667%2020.4889%2018.6667%2019.3817V12.7888C18.6667%2012.3418%2018.1292%2012.1203%2017.8125%2012.4337L16.1458%2014.1049C16.0542%2014.201%2016%2014.3263%2016%2014.46Z"%20fill%3D"var(--main-color)"%2F%3E%3C%2Fsvg%3E'); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


.visual-health-check {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #666;
    width: 100%;
}

.checkbox-group {
    display: flex;
    gap: 10px;
}

.custom-checkbox {
    display: flex;
}

.custom-checkbox input[type="checkbox"] {
    display: none; /* Hide default checkbox */
}

.custom-checkbox::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 3px;
    border: 2px solid var(--main-color);
    position: absolute;
    left: 7px; /* Align the checkbox to the left */
    top: 50%; /* Vertically center the checkbox */
    transform: translateY(-50%); /* Adjust vertical alignment */
    margin-left: 9px;
    transition: all 0.2s ease;
}

.custom-checkbox::after {
    width: 12px !important;
    height: 12px !important;
    margin-top: -6px !important;
    margin-left: 9px !important;
           
}

.custom-checkbox span {
    margin-left: 25px; /* Space for text */
    display: inline-block;
    position: relative;
    z-index: 1; /* Ensure text is above the checkbox */
}

.custom-checkbox input[type="checkbox"]:checked  {
    content: "\2713"; /* Checkmark symbol */
    display: flex;
    font-size: 12px !important;
    color: var(--main-color) !important;
    background-color: white !important;
    width: 11px !important;
    height: 11px !important;
    
}

.custom-checkbox input[type="checkbox"]:not(:checked) + span {
    margin-left: 22px; /* Add extra margin when not checked */
}

.custom-checkbox input[type="checkbox"]:checked + span {
    background-color: transparent; /* Keep background transparent for span */
    color: #78c7dc; /* Keep the text color unchanged */
}

.newAttnContainer .ui-btn.ui-checkbox-on.ui-checkbox-on:after {
    background-color:  var(--main-color) !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M20.3%207.3l-10%2010a1%201%200%2001-1.4%200l-5-5a1%201%200%20011.4-1.4l4.3%204.3%209.3-9.3a1%201%200%20011.4%201.4z%22/%3E%3C/svg%3E") !important;
}

.newAttnContainer .ui-btn.ui-checkbox-off:after {
    background-color: rgba(0, 0, 0, .01) !important; 
}

div.visual-health-check .ui-state-disabled {
    opacity: 0.7 !important;
}

.responsive-card {
    box-sizing: border-box;
}

  /* Adjust for larger screens */
  @media (min-width: 600px) {
    .responsive-card {
      font-size: 1.1em; /* Scale up text slightly */
    }
  }

  /* Adjust for desktop screens */
  @media (min-width: 1024px) {
    .responsive-card {
      max-width: 350px; /* Center the card with a fixed size */
    }
  }

  #postStory .rightButtonInvitediv.disabled {
    pointer-events: none;  /* prevents clicks */
    opacity: 0.5;          /* visually indicate it's disabled */
  }

  .mandatoryInput {
    position: relative; 
  }
  
  .mandatoryInput:after {
    content: " *";
    color: red;
    position: absolute;
    left: 100%;      
    top: 50%;       
    transform: translate(4px, -50%); 
    pointer-events: none;  
  }

  .mandatoryFormInput {
    position: relative; 
  }
  
  .mandatoryFormInput:after {
    content: " *";
    color: red;
    position: absolute;   
    top: 50%;       
    transform: translate(4px, -50%); 
    pointer-events: none;  
    font-size: small;
  }
 

  #RegistrationFormsEdit .ui-flipswitch {
    border-radius: 20px;
    height: 1.4em !important;
    margin-top: 4px;
  }

  #RegistrationFormsEdit .ui-flipswitch .ui-btn.ui-flipswitch-on {
    width: 1.2em;
    height: 1.2em;
    margin: 0.07em;
  }

  #RegistrationFormsEdit .ui-flipswitch.ui-flipswitch-active {
    padding-left: 3em;
  }

  #RegistrationFormsEdit .ui-field-contain>label+.ui-flipswitch{
    width: 3em;
  }

  #RegistrationFormsEdit  .ui-flipswitch-active .ui-flipswitch-on {
    left: -17px;
}

#RegistrationFormsEdit .ui-flipswitch-active{
    width: 0em !important;
}

.formsControlBox {
    margin: 6px;
    margin-top: 20px;
    background-color: #fff;
    padding:10px;
}

.formsControlBox .ui-input-text {
    width: 250px;
    float: left;
    margin-left:2px;
    margin-top: 3px;
}

.formsControlBox #formname {
    width:250px;
    height: 40px;
}
  
  #categoryTrigger,
  #categoryTrigger:hover,
  #categoryTrigger:active,
  #categoryTrigger:focus {
    background-color: #f6f6f6 !important;
    border-color: #f6f6f6 !important;
    color: #333 !important;
    clear:both;
  }


  
  
@media (max-width: 457px) {
    .formsControlBox .ui-input-text,
    .formsControlBox #formname {
      width: 160px !important;
    }
  }


@media (max-width: 650px) {
    .formsControlBox > button,
    .formsControlBox > .categoryslectorclass {
        width: 100%;
        margin-left: 0 !important;
        margin-top: 10px;
    }

    .formsControlBox > .categoryslectorclass a {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 420px) {
    #metroDailyPost select {
        max-width: 115px;
        font-size: small;
        height: 26px;
    }
  }

  
.messages > div[data-id]
  span[data-messageid] > span {
  position: relative;
  display: inline-block;
}

/* Base: draw the icon but no horizontal offset */
.messages > div[data-id]:not(.other) span[data-messageid] > span::after {
    content: "";
    position: absolute;
    top: 2px;
    width: 20px;
    height: 20px;
    background: url('img/delete.png') no-repeat center/contain;
    background-color: white;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  

/* Desktop: show on hover */
@media (hover: hover) and (pointer: fine) {
    /* 1) If parent has .other → place icon on LEFT */
    .messages > div.other[data-id]:hover
      span[data-messageid] > span::after {
      opacity: 1;
      left: 8px;
      right: auto;
    }
  
    /* 2) If parent does NOT have .other → place on RIGHT */
    .messages > div[data-id]:not(.other):hover
      span[data-messageid] > span::after {
      opacity: 1;
      right: 8px;
      left: auto;
    }
  }
  
  /* Mobile: show on press */
  @media (hover: none) {
    .messages > div.other[data-id]
      span[data-messageid] > span:active::after {
      opacity: 1;
      left: 8px;
      right: auto;
    }
    .messages > div[data-id]:not(.other)
      span[data-messageid] > span:active::after {
      opacity: 1;
      right: 8px;
      left: auto;
    }
  }
  


.messages > div[data-id]
span[data-messageid] > span::after {
opacity: 0;
}


@media (hover: hover) and (pointer: fine) {
.messages > div[data-id]:hover
  span[data-messageid] > span::after {
  opacity: 1;
}
}


@media (hover: none) {
.messages > div[data-id]
  span[data-messageid] > span:active::after {
  opacity: 1;
}
}

.report-box {
    width: 220px;
    height: 133px;
    background-color: white;
    box-shadow: 0px 0px 3px 0px #8080804f !important;
    border: 0px;
    padding: 10px;
    font-size: 13px;
    color: #444;
    border-radius: 4px;
    box-sizing: border-box;
}
.report-box hr {
    margin: 8px 0;
    border: 0;
    border-top: 0.5px solid #8080801f;
}

#attendanceDashboardRatio .dashboard-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
  }
  
  #attendanceDashboardRatio .dashboard-header-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
    align-items: stretch;
    justify-content: flex-start;
  }
  
  #attendanceDashboardRatio .dashboard-header-box {
    flex: 1 1 160px;
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 90px;
    font-weight: bold;
  }
  
  #attendanceDashboardRatio .kids-box {
    background-color: #f9a826;
  }
  
  #attendanceDashboardRatio .staff-box {
    background-color: #a78bfa;
  }
  
  #attendanceDashboardRatio .dashboard-header-count {
    font-size: 32px;
    line-height: 36px;
  }
  
  #attendanceDashboardRatio .dashboard-header-label {
    font-size: 14px;
    margin-top: 6px;
    font-weight: 500;
  }
  
  #attendanceDashboardRatio .warning-box {
    display: flex;
    align-items: center;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    padding: 16px 20px;
    background-color: #fff;
    max-width: 320px;
    box-sizing: border-box;
  }
  
  #attendanceDashboardRatio .warning-icon {
    font-size: 20px;
    color: #e53935;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
  }
  
  #attendanceDashboardRatio .warning-message {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  #attendanceDashboardRatio .warning-title {
    font-weight: bold;
    color: #000;
    font-size: 15px;
    margin-bottom: 2px;
  }
  
  #attendanceDashboardRatio .warning-subtitle {
    font-size: 14px;
    color: #000;
    line-height: 1.4;
    font-weight: lighter;
  }
  
  /* Grid Layout */
  #attendanceDashboardRatio .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
  }
  
  /* Class Box */
  #attendanceDashboardRatio .class-box {
    background: white;
    border-radius: 10px;
    padding: 10px;
    font-size: 14px;
    text-align: center;
  }
  
  #attendanceDashboardRatio .class-name {
    font-weight: lighter;
    margin-bottom: 8px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  #attendanceDashboardRatio .class-box-row {
    display: flex;
    justify-content: space-between;
    gap: 0px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    padding: 3px;
  }
  
  #attendanceDashboardRatio .class-box-cell {
    flex: 1;
    font-size: 13px;
    background: #fdfdfd;
    position: relative;
  }

  #attendanceDashboardRatio .class-box-row .class-box-cell:first-child {
    border-right: 1px solid #dcdcdc;
  }
  
  #attendanceDashboardRatio .count-value {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 2px;
  }
  
  #attendanceDashboardRatio .count-label {
    font-size: 12px;
    color: #666;
  }
  
  #attendanceDashboardRatio .inline-warning-icon {
    color: #e53935;
    font-size: 18px;
    position: absolute;
    top: -10px;
    right: -10px;
    border: 1px solid #dcdcdc;
    border-radius: 50%;
    padding: 4px;
    background-color: #fff;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 16px;
    box-sizing: border-box;
    padding: 2px;
  }
  

  #attendanceDashboardRatio .all-box .class-box-cell {
    background-color: #ebf3fe;
  }
  
  #attendanceDashboardRatio .dashboard-grid .class-box:first-child .class-box-row {
    background-color: #ebf3fe;
  }

  #attendanceDashboardRatio .class-box-cell.clickable {
    cursor: pointer;
  }
  
     /* Image upload loader animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}