html {
    background-color: #fdfdfd;
}

.ud{
	display: none !important;
}

.tt_pages {
    /* margin-top: 50px; */
    /* position: relative; */
    /* padding-bottom: 40px; */
    /* display: none; */
    z-index: 0;
    /* min-height: 100%; */
    position: fixed;
    max-width: 100%;
    min-width: 100%;
    overflow: scroll !important;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    /* overflow-x: hidden; */
}

.tt_pages_visible{
	z-index:99;
}


.tt_pages#lightbox
{
	z-index: 99999;
	margin-top: 0px;
}
/*#loadingStream{
	float: left;
	display: block;
	text-align: center;
	font-size: 2em;
	margin-top: 20px;
	width:100%;
}
.tt_page_loading{
}*/
#infoBar {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 50px;
    /*background-color: #cff896;*/
    background-color: rgba(28,28,28,1);
    z-index: 99990;
	padding-right: 16px;
}

.modal-open #infoBar{
	z-index: 0;
}

.mAppShow{
	display: none !important;
}
body.lightboxMode #infoBar{
	visibility: hidden;
}

#logo {
    height: 30px;
    width: 40%;
    float: left;
    margin-bottom: -3px;
    margin-left: 1px;
}

#accInfo {
	width: 100%;
	/* float: right; */
	font-size: 16pt;
	color: white;
	/* margin-top: 11px; */
	margin-right: 36px;
	padding-top: -15px;
	position: relative;
	top: -25px;
}

    #accInfo a, #accInfo i {
        color: rgba(255,255,255,0.9);
        cursor: pointer;
        text-decoration: none;
        font-size: 22px;
        transition-duration: 300ms;
        /* padding: 0; */
        /* line-height: 10px; */
    }

        #accInfo a:hover {
            /* opacity: 1; */
        }

        #accInfo a p {
			display: inline-block;
			vertical-align: middle;
			/* overflow: hidden; */
			}
#accInfo .r{
	float: right;
}
#accInfo .mApp-MenuItem:hover{
	background-color: #007aff;
	background-color: #ff0094;
}
	#accInfo .ai_item.rmost
	{
		padding: 0px 14px;
		line-height: 48px;
		margin-top: -1px;
	}
#accInfo .l{
	float:left;
}
#accInfo #ttAdvancedMenu{
	/*padding: 14px;
	padding-top: 15px;*/
}
#userProfileDiv{
	line-height:48px;
}
.userProfilePic{
	border-radius: 50%;
	border: 1px solid #bbb;
	box-shadow: #bbb 0 0 1px 0px;
	/*background-color: #9999ff;*/
	/* margin-top: -10px; */
	width: 30px;
	height: 30px;
	padding: 0px;
	position: relative;
	overflow: hidden;
	text-align: center;
	/*top: 9px;*/
}

.uname{
	position: relative;
	/* padding-right: 1px; */
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#accInfo #userProfileIco{
	top: -16%;
	position: relative;
	font-size: 40px;
	/* left: -1%; */
}
#accInfo .userProfilePic img{
	width: 100%;
	/* height: 100%; */
	/*top: -3px;
	position: relative;*/
}
.showMobile{
	display: none !important;
}
.pressed{
	background-color:green
}
p {
    margin: 0;
    padding: 0;
}

.hide {
    display: none !important;
}

.left {
    text-align: left;
}

#ftFavPeople {
    width: 150px;
}

    #ftFavPeople input {
        padding: 0;
    }

    #ftFavPeople #list {
        background-color: #FFFFFF;
        border: 1px solid #FFFFFF;
        opacity: 0.4;
        padding: 2px;
    }


        #ftFavPeople #list div {
            padding: 3px;
            cursor: pointer;
        }

            #ftFavPeople #list div:hover {
                font-weight: bold;
                background-color: #aaa;
            }

.albums ul {
    list-style: none;
    width: 100%;
}

.albums li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
    background: url('../images/AlbumBackground_140_r.png');
    background-repeat: no-repeat;
    padding: 30px 0px;
    width: 140px;
}

    .albums li img {
        margin: 0px 30px;
    }

    .albums li p {
        margin: 0px 16px;
        text-align: center;
        vertical-align: bottom;
    }

    .albums li a {
        text-decoration: none;
        font-size: 0.9em;
    }

    .albums li.a_mo {
        background-image: url("../images/AlbumBackground_140.png");
    }

#main {
    margin: 30px 0;
    position: relative;
}

header h1 {
    text-align: center;
    font-size: 30px;
    font-weight: normal;
    margin: 30px 0 10px 0;
}

header p {
    text-align: center;
    font-size: 14px;
    color: #666666;
    margin: 0;
    font-weight: normal;
}

#tiles {
    list-style-type: none;
    position: relative;
    margin: 0;
    padding: 0;
}

    #tiles li {
        /*width: 200px;*/
        background-color: #ffffff;
        border: 1px solid #dedede;
        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        display: none;
        cursor: pointer;
        padding: 4px;
    }

        #tiles li.inactive {
            visibility: hidden;
            opacity: 0;
        }

        #tiles li img {
            display: block;
        }

        #tiles li p {
            color: #666;
            font-size: 13px;
            line-height: 20px;
            text-align: center;
            font-weight: normal;
            margin: 7px 0 2px 7px;
        }

footer {
    text-align: center;
}

    footer a {
        color: #435DC5;
        text-decoration: none;
    }

.progress-bar {
    background-color: #0BC20B;
    height: 2px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 0;
    box-shadow: 0 1px 3px rgba(11, 194, 11, 0.2);
    -webkit-transition: width 0.3s ease-out;
    -moz-transition: width 0.3s ease-out;
    -o-transition: width 0.3s ease-out;
    transition: width 0.3s ease-out;
}

.albA {
    text-align: center;
}

.albBg1 {
    font-size: 90px;
}

.albBg2 {
    bottom: 9px;
    font-size: 50px;
    left: -54px;
    position: relative;
}

.progGIFS {
    background: url("../images/prog_bar.gif") repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: none;
    height: 2px;
    position: absolute;
    right: 5px;
    top: 35px;
    width: 72px;
}

.progGIFA {
    background: url("../images/prog_bar.gif") repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: none;
    height: 2px;
    position: absolute;
    right: 5px;
    top: 35px;
    width: 51px;
}

.progGIFY {
    background: url("../images/prog_bar.gif") repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: none;
    height: 2px;
    position: absolute;
    right: 5px;
    top: 35px;
    width: 49px;
}

/*Collage View*/
.Collage {
    /*padding: 2px;*/
	margin-left: 4px;
}

    .Collage img {
        margin: 0;
        padding: 0;
        display: inline-block;
        vertical-align: bottom;
        opacity: 1;
        /*border: 2px solid #FFF;*/
    }

.Image_Wrapper {
	margin-right: -4px;
    /*-moz-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1);
    box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;*/
}
.isel
{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;color: white;position: absolute;right: 12px;top: 10px;/* text-shadow: #000 0px 0px 2px; */font-size: 14px;visibility: hidden;cursor: pointer;border-radius: 50%;border: 1px solid #fff;width: 24px;height: 24px;line-height: 21px;}
.isel::before{
	content:"";
}

.selectMode .isel {
    visibility: visible;
}
.desktop .outerDiv:hover .isel, .cardItem:hover .isel{
	visibility: visible;
}

.desktop .outerDiv .isel:hover::before, .sel .isel::before
{
/* 	content:"\f3ff" !important; */
}
.sel .isel {
    visibility: visible;
    color: white;
    /* text-shadow: #fff 0 0 0px; */
    background-color: #0070CF;
    vertical-align: middle;
    text-align: center;
    border-width: 2px;
}

.sel .isel::before {
    content: "\f122" !important;
}
.Image_Wrapper .title {
        /*background: linear-gradient(#777777, #000000) repeat scroll 0 0 rgba(0, 0, 0, 0);*/
        background-color: rgba(0,0,0,0.5);
        color: white;
        margin-top: -1.65em;
        opacity: 0.9;
        overflow: hidden;
        position: relative;
        text-overflow: ellipsis;
        width: auto;
		cursor: auto;
		min-width:50%;
		height: 1.5em;
        /*word-wrap: break-word;*/
    }
	.Image_Wrapper .shared
	{
		cursor: pointer;
	}
        .Image_Wrapper .title:hover {
            /*background-color: lightgreen;*/
        }

.scrollToTop {
    /*background-color: grey;
    border: 1px solid grey;
    border-radius: 10%;
	color: black;*/
    bottom: 10px;
    cursor: pointer;
    display: none;
    font-size: 3em;
    opacity: 0.9;
    position: fixed;
    right: 30px;
    z-index: 99999;
    /*padding: 3px 3px 10px;*/
    transform: translateZ(0);
}

    .scrollToTop:hover {
        opacity: 1;
    }

    .scrollToTop i {
        color: green;
		position: relative;
		top: 0;
		left: 0;
		z-index: 99998;
    }
	.scrollToTop i.bg {
       color: white;
		z-index: 99998;
		left: 36px;
		font-size: 0.9em;
	}

.settings{
	width: 800px;
	height: 95%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
	border-radius: 3px;
	border: 1px solid #ccc;
	/*box-shadow: rgba(0,0,0,.4) 0px 0px 8px 0px;*/
}
#settingsMenu {

list-style: none;

width: 225px;

float:left;

height: 100%;

padding-left: 0;

border-right: 3px solid rgb(3, 191, 253);

padding-top: 1em;

/* border-right: 3px solid #007aff; */

margin-top: 0px;

margin-bottom: 0px;
}

    .list-item {
        margin-left: 10px;
        margin-bottom: 2px;
		margin-top: 2px;
        cursor: pointer;
        text-align: left;
		font-weight: bold;
		padding:1em;
    }
	 .list-item > *{
		position:relative;
		top:0;
		bottom:0;
	 }
        .desktop #settingsMenu li:hover {
            background-color: rgb(3, 191, 253);
            color: white;
			border-radius: 3px 0px 0 3px;
        }
	.list-subText{
		color: #999;
	}
.profSel {
	background-color: rgb(3, 191, 253);
	color: white;
	/* border-radius: 3px 0 0 3px; */
	/* background-color: #007aff; */
}
.settingDivs {
	/*border-left: 1px solid deepskyblue;*/
	display: none;
	/*height: 300px;*/
	/* margin-left: 125px; */
	margin: 30px;
	width: 60%;
	float: left;
	margin-top: 20px;
	min-width: 200px;
}

.show{
	display: block;
}

.desktop .sTitle{
	font-size: 1.5em;
	margin-bottom: 1em;
	color: rgb(3, 171, 226);
	/*margin: -20px -64px 10px -29px;
	padding: 20px;
	background-color: rgb(3, 191, 253);*/
}

.displayclass {
    display: block;
}

.mediaInput {
    display: none;
}

/*#profBio input {
    margin: 20px 0px 10px 5px;
    color: black;
}

#profBio textarea {
    margin: 5px 10px 0px;
    width: 204px;
}

#profBio span {
    color: grey;
    margin-left: 5px;
    position: absolute;
}

#profSettings input {
    margin: 5px 10px 0px;
}
	
	#loginMedia input{
		margin: 20px 0px 0px 123px;
	}
	
	#loginMedia span {
        color: grey;
        margin-left: 6px;
        position: absolute;
		margin-top: 18px;
    }*/

#searchDiv input{
    border:1px solid black;
    border-radius: 4px;
}

.pageHead{
	text-align: center;
	width: 100%;
	font-weight: bold;
	font-size: 11pt;
	height: 40px;
	line-height: 40px;
	position: relative;
}

.tcHeader{
	color: #ec008c;
	color: #fff;
}

.sHeader{
	/* color: rgb(5, 155, 205); */
}

.PhotoStream {
	display: inline-block;
	width:100%;
	/* -webkit-transform: translateZ(0); */
	/* transform: translateZ(0); */
}
.tcStream{
	/* column-count: 2; */
	/* column-gap: 0; */
	/* display: flex; */
	/* flex-direction: column; */
	/* flex-wrap: wrap; */
	/* padding: 10px; */
	/* height: 100vw; */
}
.PhotoStream .tt_page_loading:last-child{
	display: block;
	line-height: 24px;
	font-size: 24px;
	height: 24px;
	width: 24px;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}
#tt_page_MyStream{
	background-color: #4f5561; /*#d3d6db;*/
	background-color: #515E7B;
}

#tt_page_PhotoStream{
	background-color: #e0e0e0;
	/* background-color: #63022e; */
	text-align: center;
}
#tt_page_PhotoStream .pageHead,
#tt_page_MyStream .pageHead{
	width: 850px;
	/*display: block;*/
	margin: auto;
}

#tt_page_PhotoStream .PhotoStream{
	width: 850px;
	text-align: left;
	article {  -moz-column-width: 13em;
	-webkit-column-width: 13em;
	-moz-column-gap: 1em;
	-webkit-column-gap: 1em;     }
	section {  display: inline-block;
	margin:  0.25rem;
	padding:  1rem;
	width:  100%;
	background:  #efefef; }
	article {  -moz-column-width: 13em;
	-webkit-column-width: 13em;
	-moz-column-gap: 1em;
	-webkit-column-gap: 1em;     }
	section {  display: inline-block;
	margin:  0.25rem;
	padding:  1rem;
	width:  100%;
	background:  #efefef; }
	article {  -moz-column-width: 13em;
	-webkit-column-width: 13em;
	-moz-column-gap: 1em;
	-webkit-column-gap: 1em;     }
	section {  display: inline-block;
	margin:  0.25rem;
	padding:  1rem;
	width:  100%;
	background:  #efefef; }
	-moz-column-width: 13em;
}

#tt_page_PhotoStream .tc{
	width: 100%;
}
#tt_page_Settings {
  background-color: #efeff4;
  position: absolute;
  bottom: 0;
  /*left: 0;*/
  right: 0;
}

#tt_page_Cart {
  background-color: #F5F8F9;
  position: absolute;
}

#tt_page_MyOrders {
  background-color: #F5F8F9;
  position: absolute;
}

#tt_page_UsersAndGroups {
  background-color: #F5F8F9;
  position: absolute;
}

#tt_page_Downloads {
  background-color: #F5F8F9;
  position: absolute;
}

#tt_page_WebsitePlugins{
  background-color: #F5F8F9;
  position: absolute;
}

.tools{
	position: absolute;
	top: 0;
}

.tools.r {
	right: 0;
	padding-right: 35px
}

.tools .tools-ico{
	line-height: 40px;
	cursor: pointer;
}

.btn::after{
  position: absolute;
  right: 20px;
  font-family: "FontAwesome";
}

.btn-group .btn::after
{
	right: 10px;
}
.btn-state-processing::after{
  content: "\f110";
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}

.btn-state-success::after
{
  content: "\f00c";
}
.btn-state-error::after
{
  content: "\f071";
}
/* sping counter clockwise */
.fa-spin-reverse {
  -webkit-animation: spin-counter 2s infinite linear;
  -moz-animation: spin-counter 2s infinite linear;
  -o-animation: spin-counter 2s infinite linear;
  animation: spin-counter 2s infinite linear;
}

#GlobalControls *{
	display: none;
}
@-moz-keyframes spin-counter {
  0% {
    -moz-transform: rotate(359deg);
  }
  100% {
    -moz-transform: rotate(0deg);
  }
}
@-webkit-keyframes spin-counter {
  0% {
    -webkit-transform: rotate(359deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@-o-keyframes spin-counter {
  0% {
    -o-transform: rotate(359deg);
  }
  100% {
    -o-transform: rotate(0deg);
  }
}
@-ms-keyframes spin-counter {
  0% {
    -ms-transform: rotate(359deg);
  }
  100% {
    -ms-transform: rotate(0deg);
  }
}
@keyframes spin-counter {
  0% {
    transform: rotate(359deg);
  }
  100% {
    transform: rotate(0deg);
  }
}



/* Login Panel Style: start */
/* Login Panel style */
#pnlLogin {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width:100%;
	background-color: #333;
	z-index: 9999999;
	background: url(../images/ttbg.jpg) no-repeat;
	background-size: cover;
	font-family: Arial;
	font-size: 11pt;
	min-height: 350px;
	min-width: 310px;
	display:none;
}

#pnlLogin a, #pnlLogin a:visited{
	text-decoration: none;
	color:rgba(255,255,255,0.6);
	outline:none;
	cursor: pointer;
}

#pnlLogin a:hover{
	color:rgba(255,255,255,1);
}
#pnlLogin #ttLogo-l{
	position:relative;
	top: 40px;
	left: 40px;
}
#pnlLogin #caption{
	float: right;
	color: white;
	top: 52px;
	position: relative;
	right: 57px;
	font-size: 12pt;
	/* font-family: "source sans pro"; */
	font-weight: normal;
	/* left: 80px; */
	/* display: none; */
}
#pnlLogin #login{
	position: absolute;
	top: 30%;
	right: 15%;
	width: 335px;
	color: #fff;
	float:right;
}

#pnlLogin #loginByID{
	background-color: rgba(0,0,0,0.85);
	padding: 20px;
	padding-bottom: 10px;
	border-radius: 2px;
}

#pnlLogin #loginByID > div
{
	margin: 3px auto;
}

#pnlLogin #btnSubmit{
  position: relative;
  z-index: 99999;
  top: -50px;
  right: -5px;
  font-size: 2em;
  float: right;
  padding-left: -12px;
  /* padding-right: 5px; */
  margin-right: 5px;
  /* background-color: red; */
  background-color: rgba(0,255,0,.4);
  /* color: rgba(255,255,255,0.7); */
}

.desktop #pnlLogin #btnSubmit:hover {
	background-color: rgba(0,255,0,.8);
}
#pnlLogin #loginIco{
	margin: 0px 8px 2px 12px;
	/*background-color: rgba(255,255,255,0.3);*/
	/* width: 1.2em; */
	/* border-radius: 63%; */
	/* border: 2px solid rgba(255,255,255,0.8); */
}
#pnlLogin #loginIco.processing{
	  margin: 0px 5px 2px 5px;
	  background-color: none;
}
#pnlLogin .flatTextBox {
	width:100%;
	background-color: rgba(0,0,0,0) !important;
	padding: 5px;
	font-size: 1.2em;
	border: none;
	border-bottom: 1px solid rgba(255,255,255,0.6);
	text-decoration: none;
	margin-bottom: 10px;
	outline: 0;
	color:rgba(255,255,255,1);
	font-weight: normal;
	border-radius: 0;
	-webkit-user-select: initial;
}

	#pnlLogin .flatTextBox.focus
	{
		border: none;
	}

#pnlLogin #pwd{
	/*width: 240px;*/
}
#pnlLogin #forgotPwd{
	font-size: 0.8em;
	color: #aaa;
	text-align: right;
	right: -35px;
	width: 100%;
	position: relative;
}

#pnlLogin a.socialLogin{
	margin-top:10px;
	padding: 5px;
	font-size: 0.8em;
	color: #bbb;
	background-color: rgba(0,0,0,0.8);
	vertical-align: middle;
	width:166px;
	text-align:center;
}
	#pnlLogin a.socialLogin img
	{
		vertical-align: middle;
		margin:0;
		padding: 0;
		opacity: 0.7;
	}
	#pnlLogin a.socialLogin:hover, #pnlLogin a.socialLogin:hover img
	{
		opacity: 1;
		color: #fff;
	}
	#pnlLogin a.socialLogin div{
		margin: auto 4px;
		display: inline-block;
		position: relative;
		bottom: -0.2em;
	}
#pnlLogin #fbBox{
	float: left;
}
#pnlLogin #gplusBox{
	float: right;
	/*margin-top: 5px;*/
}

#pnlLogin #loginByID > #showError{
	color: #000;
	background-color: #fc8f8f;
	text-align: center;
	width: 100%;
	/*border-radius: 2px;*/
	padding: 5px;
	display: none;
	margin-bottom: 10px;
}
#pnlLogin #footer {
	position: absolute;
	bottom: 5px;
	left: 30px;
	color: rgba(255,255,255,0.8);
	font-size: 10pt;
	/*width: 100%;*/
}
#pnlLogin #footer >  div{
	display: inline-block;
	margin: 0 10px;
}
#pnlLogin #footer > #copyright_short{
	display: none;
}
#pnlLogin ::-webkit-input-placeholder {
    color:    rgba(255,255,255,0.3);
}
#pnlLogin :-moz-placeholder { 
   color:    #fff;
   opacity:  .3;
}
#pnlLogin ::-moz-placeholder { 
   color:    #fff;
   opacity:  .3;
}
#pnlLogin :-ms-input-placeholder { 
   color:    #333;
}

@media (max-width: 1366px)
{
	#pnlLogin {
		background-size: auto;
	}
}

@media (max-width: 800px){
	
	#pnlLogin #ttLogo-l, #pnlLogin #login{
		display: block;
		margin-left: auto;
		margin-right: auto;
		left:auto;
		right:auto;
	}

	#pnlLogin #login
	{
		margin: 0;
		position: absolute;
		top: 200px;
		left: 50%;
		padding: 10px;
		margin-right: -50%;
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	#pnlLogin #footer {
		left: auto;
		text-align: center;
	}

		#pnlLogin #footer > div
		{
			margin: 0 5px;
		}
	#pnlLogin #footer > #copyright_short{
		display: inline-block;
	}

	#pnlLogin #footer > #copyright_long{
		display: none;
	}
}

@media (max-width: 800px)
{
	#pnlLogin #ttLogo-l{
		top:20px;
	}
	#pnlLogin #caption{
		display:none;
	}
	
}

@media (max-width: 370px)
{
	#pnlLogin a.socialLogin
	{
		width: 155px;
	}
}

#pnlLogin input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px black inset;
	color:white !important;
	-webkit-text-fill-color: white;
}

#pnlLogin .ui-loader{
	display: none;
}

#pnlLogin #pageText{
	display:none;
	font-size: 3em;
	position: static;
	top: auto; 
	left: auto; 
	width: auto; 
	}
	#pnlLogin #loginPage{
	width: 450px;
	height: 310px;
	position: relative;
	border-radius: 5px;
	z-index: 999;
	margin-left: auto;
	top:0;
	left: 5%;
	}
#pnlLogin #loginDetails{
	right:auto;
}
#pnlLogin #bg,#pnlLogin #bg2{
	left:auto;
}
#pnlLogin #titleBar{
	text-align:left;
}

@media (max-height: 400px)
{
	#pnlLogin #footer{
		bottom:auto;
		position:relative;
		top:350px;
	}
	
}

/* Login Panel Style: end*/

.desktop .mobileShow{
    display: none;
}

input{
	font-size: 16px;
	padding: 5px 1px;
	display: block;
	border: 0;
	border-bottom: 1px solid rgba(117,117,117,0.5);
	width: 95%;
	/* margin-left: 2.5%; */
}

label{
	color: #757575;
	color: rgba(117,117,117,0.45);
	font-size: 15px;
	font-weight: 300;
	position: absolute;
	pointer-events: none;
	left: 5px;
	top: 9px;
	padding-left: 3px;
   -moz-transition: .2s ease all;
   -webkit-transition: .2s ease all;
   transition: .2s ease all;
}

input:focus ~ label, 
input:valid ~ label, 
.frm-ele.has-value label {
    top: -16px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(117,117,117,1);
}