body {

	background-color: #f1f1f1;



	font-weight: lighter;

	font-family: 'Raleway', sans-serif;

	font-weight: 300;

	-webkit-font-smoothing: antialiased;

	overflow: hidden;

}



body, html{

   height: 100%;

   padding: 0;

}



#logged_drp {

    border-bottom: 3px solid rosybrown;

}

.navi .contain ul li.is-current:before, .navi .contain ul li:hover:before {

  border-top: 2px solid rosybrown;

}



.brand {

	color: rosybrown;

}



/*DARKV*/



/*SCROLLBARS*/

	.rsel_pl ::-webkit-scrollbar {

	  width: 6px;

	  height: 6px;

	}

	.rsel_pl ::-webkit-scrollbar-button {

	  width: 0px;

	  height: 0px;

	}

	.rsel_pl ::-webkit-scrollbar-thumb {

	  background: #F7F7F7;

	  border: 5px none #ffffff;

	  border-radius: 12px;

	}

	.rsel_pl ::-webkit-scrollbar-thumb:hover {

	  background: #eeeeee;

	}

	.rsel_pl ::-webkit-scrollbar-thumb:active {

	  background: #c4c4c4;

	}

	.rsel_pl ::-webkit-scrollbar-track {

	  background: transparent;

	  border: 18px none #ffffff;

	  border-radius: 44px;

	}

	.rsel_pl ::-webkit-scrollbar-track:hover {

	  background: transparent;

	}

	.rsel_pl ::-webkit-scrollbar-track:active {

	  background: transparent;

	}

	.rsel_pl ::-webkit-scrollbar-corner {

	  background: transparent;

	}



	.darkv .rsel_pl ::-webkit-scrollbar-thumb {

	  background: #414141;

	}

	.darkv .rsel_pl ::-webkit-scrollbar-thumb:hover {

	  background: #515151;

	}

	.darkv .rsel_pl ::-webkit-scrollbar-thumb:active {

	  background: #6F6F6F;

	}



	/*GRAF V DETAIL*/

		.gvd_top ul::-webkit-scrollbar {

		  width: 6px;

		  height: 6px;

		}

		.gvd_top ul::-webkit-scrollbar-button {

		  width: 0px;

		  height: 0px;

		}

		.gvd_top ul::-webkit-scrollbar-thumb {

		  background: #50AE59;

		  border: 5px none #ffffff;

		  border-radius: 12px;

		}

		.gvd_top ul::-webkit-scrollbar-thumb:hover {

		  background: #46884B;

		}

		.gvd_top ul::-webkit-scrollbar-thumb:active {

		  background: #46884C;

		}

		.gvd_top ul::-webkit-scrollbar-track {

		  background: #6CB472;

		  border: 18px none #ffffff;

		  border-radius: 44px;

		}

		.gvd_top ul::-webkit-scrollbar-track:hover {

		  /*background: transparent;*/

		}

		.gvd_top ul::-webkit-scrollbar-track:active {

		  background: transparent;

		}

		.gvd_top ul::-webkit-scrollbar-corner {

		  background: transparent;

		}



/*MENU*/

	.u_menu_grp {

		background-color: rgb(63, 65, 68);

		display: inline-block;

		position: fixed;

		top: 50px;

		left: 10px;

		  border-radius: 5px;

		  z-index: 100;

	}



	.um_bone {

		list-style-type: none;

		margin: 0;

		padding: 0;

	}



	.um_item {

		border-top: 1px solid rgb(50, 50, 50);

		border-bottom: 1px solid rgb(84, 84, 84);

		padding: 2px 15px 2px 0px;

		color: rgb(117, 117, 121);

		cursor: pointer;

		overflow: hidden;

		white-space: nowrap;

	} 



	.um_item:first-of-type {

		border-top:none;

	}



	.um_item:last-of-type {

		border-bottom:none;

	}



	.um_item:hover {

		background-color: rgb(56, 56, 56);

		  color: rgb(169, 166, 166);

	}



	.um_item_active {

		  background-color: rgb(35, 35, 37);

		  color: silver;

	}



	.um_item.um_head span {

		/*background-color: blue;*/

		height: 35px;

	}	



	.um_item.um_head label {

		font-size: 20px;

		position: absolute;

		overflow: hidden;

		text-overflow: ellipsis;

	}



	.um_head {

		position: relative;

	}



	.um_head img {

		max-width: 90px;

		height: auto;

		max-height: 108px;

		display: block;

		margin: 0 auto 6px auto;

		padding-left: 15px;

	}



	.u_menu_grp_sm .um_head img  {

		max-width: 40px;

		padding-left: 0;

	}



	.um_item span {

		display: inline-block;

		height: 20px;

		width: 35px;

		margin-right: 5px;

		text-align: center;

		position: relative;

	}



	.um_item .tooltip {

		display: none !important;

	}



	.u_menu_grp_sm .um_item .tooltip {

		display: block !important;

	}



	.um_item label {

		display: inline-block;

		font-weight: 500;

		max-width: 100px;

		cursor: pointer;

		transition:max-width .2s ease;

		-webkit-transition:max-width .2s ease;

		-moz-transition:max-width .2s ease;

		-ms-transition:max-width .2s ease;

		-o-transition:max-width .2s ease;

	}



	.u_menu_grp_sm .um_bone .um_item label {

		max-width: 0;

	}



	.u_menu_grp_sm .um_bone .um_item {

		padding-right: 0;

	}



/*GERAL*/

	.page_label {

		display: inline-block;

		font-size: 60px;

		font-weight: 100;

		position: absolute;

		top: 20%;

		left: 20%;

		opacity: 1;

		transition:opacity .3s ease;

		-webkit-transition:opacity .3s ease;

		-moz-transition:opacity .3s ease;

		-ms-transition:opacity .3s ease;

		-o-transition:opacity .3s ease;

	}



	.rsel_noscrol {

		overflow-x: initial !important;

	}



	.u_menu_grp_sm + .selection_change_part .page_label {

		opacity: 0;

	}



	.page_in {

		height: 100vh;

		background-size: cover;

	}



	.upage_back {

		height: 100%;

		width: 100%;

	}



	.upage_back img {

		min-width: 100%;

		min-height: 100%;

	}



	.btn_contain {

		width: 90px;

		overflow: hidden;

		position: relative;

		height: 38px;

		display: block;

		margin-left: 15px;

	}



	.btn_contain_cancel {

		position: absolute;

		left: -100%;

		background-color: #E60101;

		color: white;

		font-size: 17px;

		width: 45px;

		padding: 5px 10px;

		z-index: 2;

		-webkit-transition: 0.2s;

		-o-transition: 0.2s;

		transition: 0.2s;

		text-align: center;

		cursor: pointer;

		height: 100%;

	}



	.btn_contain_label {

		position: absolute;

		left: 0;

		margin: 0 !important;

		-webkit-transition: 0.2s;

		-o-transition: 0.2s;

		transition: 0.2s;

	}



	.btn_contain_confirm {

		position: absolute;

		right: -100%;

		background-color: #07A507;

		color: white;

		font-size: 17px;

		width: 45px;

		padding: 5px 10px;

		z-index: 2;

		-webkit-transition: 0.2s;

		-o-transition: 0.2s;

		transition: 0.2s;

		text-align: center;

		cursor: pointer;

		height: 100%;

	}



	.btn_contain_on .btn_contain_label {

		transform: scale(0.5);

	}



	.btn_contain_on .btn_contain_cancel {

		left: 0;

	}



	.btn_contain_on .btn_contain_confirm {

		right: 0;

	}



	.btn_contain_on .btn_contain_cancel:hover {

		background-color: #D21111;

	}



	.btn_contain_on .btn_contain_confirm:hover {

		background-color: #268526;

	}



	.btn_contain_cancel i {

		transform:rotate(130deg);

		-webkit-transition: 0.3s;

		-o-transition: 0.3s;

		transition: 0.3s;

		/*transition-delay: 1s;*/

	}



	.btn_contain_confirm i {

		transform:rotate(-130deg);

		-webkit-transition: 0.3s;

		-o-transition: 0.3s;

		transition: 0.3s;

		/*transition-delay: 1s;*/

	}



	.btn_contain_on .btn_contain_cancel i {

		transform:rotate(0deg);

	}



	.btn_contain_on .btn_contain_confirm i {

		transform:rotate(0deg);

	}



	.no_activity {

		background-color: rgba(255, 255, 255, 0.55);

		color: #2F3107;

		padding: 10px;

		text-align: center;

		font-size: 20px;

		font-weight: 500;

		white-space: normal;

	}



/*LOGIN PAGE*/

	.back_login_page {

		background-image: url('../images/posters/3/login.gif');

		background-repeat: no-repeat;

		    background-size: cover;

		    height: 100%;

		    color: white;

		        padding: 50px 10% 0 10%;

		        overflow-y: auto;

		        width: calc(100% + 20px);

	}



	.back_login_page input {

		background-color: transparent;

		outline: none;

		color: white;

		border-radius: 0;

	}

	.back_login_page input:focus {

		border-color: white;

		background-color: rgba(0,0,0,0.5);

	}

	.back_login_page input:-webkit-autofill {

		-webkit-box-shadow: 0 0 0px 1000px white inset;

		background-color: transparent !important;

	}

	.back_login_page input::-webkit-input-placeholder {

		color: rgb(220,220,220);

		font-size: 16px;



	}

	.back_login_page input:-ms-input-placeholder {

		color: rgb(220,220,220);

		font-size: 16px;



	} 

	.back_login_page input::-moz-placeholder {

		color: rgb(220,220,220);

		font-size: 16px;

	}

	.back_login_page input:-moz-placeholder {

		color: rgb(220,220,220);

		font-size: 16px;

	}



	.back_login_page .modal-footer {

		border-top: none;

	}



	.back_login_page #remember2 {

		margin-top: 15px;

		margin-right: 10px;

		width: 15px;

		background-color: #A5A5A5;

		-webkit-appearance: none;

		height: 15px;

	}

	.back_login_page #remember2:checked {

		background-color: mediumseagreen;

	}

	.back_login_page #remember2 + label {

		color: #A5A5A5;

	}

	.back_login_page .forget_log {

		color: white;

		text-shadow: none;

		opacity: 0.8;

		font-weight: 400;

	}

	.back_login_page button {

		border-radius: 0;

	}

	.back_login_page label {

		font-weight: 400;

	}

	.back_login_page .modal-body {

		margin-bottom: 15px;

	}

	.back_login_page .modal-title, .back_login_page h4 {

		text-align: center;

		color: rgba(203, 231, 255, 0.92);

		font-weight: 400;

		text-shadow: 0px 0px 1px rgba(42, 74, 121, 0.8);

	}

	.back_login_page .alert {

		border-radius: 0;

		font-weight: 600;



	}

	.back_login_page .alert-danger {

		background-color: rgba(242, 222, 222, 0.67);

	}

	.back_login_page .alert-info {

		background-color: rgba(217, 237, 247, 0.75);

	}

	.back_login_page .alert-success {

		background-color: rgba(223, 240, 216, 0.75);

	}



/*RIGHT MENU*/

	.hor_area {

		height: 100%;

		width: 26%;

		position: absolute;

		top: 0;

		left: 75%;

		overflow: hidden;

		white-space: nowrap;

		transition:left .2s ease;

		-webkit-transition:left .3s ease-out;

		-moz-transition:left .3s ease-out;

		-ms-transition:left .3s ease-out;

		-o-transition:left .3s ease-out;

	}



	.hor_area_on {

		left: 75px;

		overflow: auto;

		width: calc(100% - 75px);

	}



	.hor_area_on .r_selection_zone {

		/*width: 80%;*/

		    width: calc(100% - 200px);

		position: relative;

		overflow: hidden;

	}



	.darkv .r_sel_menu {

		    background-color: rgba(140, 140, 140, 0.87);

	}

	.r_sel_menu {

		height: 100%;

		width: 200px;

		/*background-color: rgba(247, 246, 242, 0.87);*/

		    background-color: rgba(241, 241, 241, 0.87);

		/*position: absolute;*/

		/*top: 0;*/

		/*right: 50px;*/

		float: left;

		display: inline-block;

		padding-top: 50px;



	}



	.darkv .r_selection_zone {

		background-color: rgb(95, 95, 95);

	}

	.r_selection_zone {

		height: 100%;

		float: left;

		display: inline-block;

		background-color: rgb(247, 244, 237);

		/*width: 125px;*/

		width: calc(100% - 200px);

	}



	.darkv .rsel_area {

		    background-color: #5F5F5F;

	}

	.rsel_area {

		/*display: none;*/

		top: 100%;

		height: 100%;

		top: 100%;

		position: absolute;

		width: 100%;

		/*background-color: #F7F4ED;*/

		    background-color: #F9F8F7;

		color:black;

		

	}



	.rsel_area_active {

		top: 0;

		/*display: block;*/

		transition:top .2s ease;

		-webkit-transition:top .3s cubic-bezier(.02, .15, .07, .96);

		-moz-transition:top .3s cubic-bezier(.02, .15, .07, .96);

		-ms-transition:top .3s cubic-bezier(.02, .15, .07, .96);

		-o-transition:top .3s cubic-bezier(.02, .15, .07, .96);

	}

	

	.rsel_area h3 {

		margin-top: 50px;

		font-weight: 200;

		margin-left: 20px;

	}

	

	.darkv .rs_op {

		background-color: rgba(109, 109, 109, 0.57);

		color: rgba(255, 255, 255, 0.58);

	}

	.rs_op {

		cursor: pointer;

		text-align: center;

		padding: 10px;

		/*color: rgba(0,0,0,0.6);*/

		color: rgba(109, 104, 95, 0.58);

		font-weight: 400;

		font-size: 20px;

		background-color: rgba(247, 244, 237, 0.57);

		margin: 5px 0;

	}



	.darkv .rs_op:hover {

		color: #ABA8A5;

		background-color: rgb(90, 90, 90);

	}

	.rs_op:hover {

		color: #948D86;

		/*background-color: rgb(247, 244, 237);*/

		background-color: #F9F8F7;

	}



	.rsel_pad {

		margin-top: 50px;

	}



/*FOOTER*/

	footer {

		position: fixed;

		width: 100%;

		height: 30px;

		background-color: rgb(63, 65, 68);

		border-top: 1px solid black;

		bottom: 0;

		left: 0;

		z-index: 200;

		display: none;

	}



	.fot_pl_grp_on {

		display: block;

	}

	.fot_pl_grp_on .fot_pl_grp {

		display: block;

	}

	.fot_pl_grp {

		position: absolute;

	    top: 1px;

	    right: 50px;

	    padding: 2px 15px;

	    outline: none;

	    background-color: #353535;

	    color: silver;

	    cursor: pointer;

	    border-color: #656565;

		border-radius: 2px;

		-moz-appearance: none;

		-webkit-appearance: none;

		display: none;

	}



/*START*/

	.page_in_start {

		background-image: url('../images/posters/3/start.jpg');

		color: white;

	}



/*USER INFO*/

	.page_in_info {

		/*background-image: url('../images/posters/3/user_info.jpg');*/

		color: white;

	}



	.user_sa {

		font-size: 35px;

		font-weight: 200;

		padding-bottom: 30px;

		border-bottom: 1px solid #D8D8D8;

		color: #D8D8D8;

		margin: 35px 7% 20px 7%;

	}



	.rsel_area {

		/*background-color: #EFEFEF;*/

		/*overflow-x: auto;*/

		overflow: hidden;

		/*overflow-y:auto; */

	}



	.rsel_scr_down {

		overflow-y: auto;

		height: 100%;

	}

	

	.usi_grp  {

		display: inline-block;

		margin: 5px 20px;

		padding: 0px 15px;

		vertical-align: top;

	}



	.usi_line {

		white-space: normal;

	}



	.usi_grp label {

		display: block;

		font-weight: 500;

		border-bottom: 2px solid silver;

		color: silver;

		margin-bottom: 15px;

	}



	.usi_grp input, .usi_grp select {

		display: block;

		border: 1px solid silver;

	    border-radius: 1px;

	    margin-bottom: 20px;

	    padding: 7px 15px;

	    outline: none;

	    width: 165px;

	    background-color: transparent;

	}



	.usi_grp input:disabled, .usi_grp select:disabled {

		background-color: #E4E0DA;

		color: #C1BBB6;

	}



	.usi_grp div {

		display: block;

		border: 1px solid #B9B9AE;

		background-color: #CACABC;

		border-radius: 1px;

		width: 100%;

		color: #EFEFEF;

		outline: none;

		margin-bottom: 40px;

		cursor: pointer;

		height: 30px;

		overflow: hidden;

		position: relative;



	}

	

	.usi_grp div span {

		display: block;

		padding: 4px 7px;

		transition:margin-top .2s ease;

		-webkit-transition:margin-top .2s ease;

		-moz-transition:margin-top .2s ease;

		-ms-transition:margin-top .2s ease;

		-o-transition:margin-top .2s ease;

	}



	.usi_grp div .upd_ui {

		margin-top: -28px;

	}



	.usi_grp div span:nth-of-type(2) {

		background-color: seagreen;

	}



	.usi_grp div:hover {

		background-color: silver;

	}

	

	.usi_grp input[type="file"] {

		color: transparent;

		outline: none;

	}

	.usi_grp input[type="file"]::-webkit-file-upload-button {

	  visibility: hidden;

	}

	.usi_grp input[type="file"]::before {

	  content: 'Select image';

	  width: 100%;

	  text-align: center;

	  display: inline-block;

	  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);

	  border: 1px solid #999;

	  border-radius: 3px;

	  padding: 5px 8px;

	  outline: none;

	  white-space: nowrap;

	  -webkit-user-select: none;

	  cursor: pointer;

	  text-shadow: 1px 1px #fff;

	  font-weight: 700;

	  font-size: 10pt;

	  color: black;

	}

	.usi_grp input[type="file"]:hover::before {

	  border-color: rgba(0,0,0,0.5);

	}

	.usi_grp input[type="file"]:active::before {

	  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);

	}



	.preview_userpic {

		width: 165px;

		text-align: center;

	}

	

	.preview_userpic span {

		height: 50px;

		width: 50px;

		border-radius: 50%;

		display: block;

		background-color: silver;

		overflow: hidden;

		margin: 10px auto;

	}



	.preview_userpic img {

		width: 100%;

		display: block;

	}



	.preview_userpic button {

		border:none;

		outline: none;

		padding: 4px 8px;

		color: white;

		margin: 5px;

		background-color: transparent;

		-webkit-transition: background-color 0.2s;

		-o-transition: background-color 0.2s;

		transition: background-color 0.2s;

	}

	.preview_userpic button:hover {

		background-color: rgba(0, 0, 0, 0.06);

	}

	.preview_userpic button:nth-of-type(1) {

		color: crimson;

		border: 1px solid crimson;

	}

	.preview_userpic button:nth-of-type(2) {

		color: mediumseagreen;

		border: 1px solid mediumseagreen;

	}



	/*PREFERENCES*/

	.pref_area {



	}



	.pref_area_col {

		/*float: left;*/

		/*display: inline-block;*/

		padding: 15px 25px;

		width: 99%;

		white-space: initial;

	}



	.pref_grp {

		padding: 15px 8px;

		border-bottom: 1px solid silver;

		margin-top: 20px;

		display: inline-block;

		margin-right: 20px;

	}



	.pref_grp label {

		font-weight: 500;

		width: 200px;

		font-size: 18px;

		color: #9E9E9E;

	}



	.darkv .pref_area h4 {

		color: white;

	}

	.pref_area h4 {

		text-align: center;

	}



/*CONVERSATIONS*/

	.page_in_conversations {

		/*background-image: url('../images/posters/3/user_messages.jpg');*/

		color: white;

	}



	.exp_ul2_h_500 {

		/*height: 500px;*/

		height: 70%;

	}



	@media (max-height: 650px) {

		.exp_ul2_h_500 {

			height: 85%;

		}



		.load_more_topics {

			margin: 0px auto;

		}

	}



/*LAST SEEN*/

	.page_in_lastseen {

		/*background-image: url('../images/posters/3/user_lastseen.jpg');*/

		color: white;

	}

	

	.datepick_btn {

		border: none;

		/*margin-bottom: 5px;*/

		/*background-color: #CAC480;*/

		background-color: #CA794A;

		color: #770B0B;

		text-align: center;

		/*border-radius: 0 30px 30px 0;*/

		cursor: pointer;

		font-size: 20px;

		/*box-shadow: inset -1px 2px 3px rgba(0,0,0,0.5);*/

		/*width: 125px;*/

		width: calc(100% - 190px);

		transition:width .2s ease-out;

		-webkit-transition:width .2s ease-out;

		-moz-transition:width .2s ease-out;

		-ms-transition:width .2s ease-out;

		-o-transition:width .2s ease-out;



		font-weight: 600;

		padding: 5px;

		/*margin-bottom: 10px;*/

		background-color: #5C738A;

		color: #B5BFCA;

	}

	.darkv .datepick_btn {

		background-color: #303B46;

		border-bottom: 1px solid black;

		color: #778390;

	}



	.datepick_btn:focus {

		/*background-color: #ECC436;*/

		background-color: black;

		/*width: 200px;*/

		/*border-radius: 0 30px 30px 0;*/

		box-shadow: inset -1px 2px 5px rgba(0,0,0,0.5);

	}



	.rsel_cal select {

		padding: 5px;

		font-size: 20px;

		width: 140px;

		background-color: #5C738A;

		color: white;

		border: 1px solid #5c738a;

		outline: none;

		border-left: 1px solid #4C5C6D;

		cursor: pointer;

	}

	.rsel_cal select:hover {

		background-color: #566A7D;

	}



	.cal_counter {

	    display: inline-block;

	    border-right: 1px solid #4C5C6D;

	    background-color: #5C738A;

	    color: white;

	    width: 50px;

	    height: 38px;

	    font-size: 20px;

	    padding: 4px 0;

	    float: left;

	    text-align: center;

	}

	.darkv .cal_counter {

		background-color: #303B46;

	}



	.darkv .rsel_cal select {

		background-color: #303B46;

		border: 1px solid #303B46;

		border-left: 1px solid #4C5C6D;

		color: #778390;

	}



	/*.datepick_btn:focus */



	/* ##### CALENDAR #####*/

		.weekday {

			display: inline-block;

			width: 14.28%;

			text-align: center;

		}

		.darkv .weekday {

			color: #E7E7E7;

			background: rgb(35, 105, 211);

		}



		.calday {

			display: inline-block;

			width: 14.28%;

			min-height: 80px;

			height: 100%;

			/*border-right: 1px solid rgb(223,226,233);*/

			cursor: pointer;

			border-right: 1px solid #D5E4E6;

		}

		.darkv .calday {

			border-right: 1px solid #000000;

			color: #8E9092;

		}



		.calday:hover {

			background-color: #EBF1F3;

		}

		

		.dayweek {



		}

		.darkv .dayweek {

			/*background: rgb(235,238,243);*/



			/*background-color: #1D1E1F;*/

			    /*background-color: #232425;*/

			    background-color: #20262D;

		}



		/*.dayweek:hover {

			background: #E6ECEE;

		}*/

		

		.daywend {

			background-color: #F0F0F1;

		}

		.darkv .daywend {

			/*background: white;*/

			/*background-color: #1A1B1D;*/

			    /*background-color: #27292B;*/

			    background-color: #1C2025;

		}



		/*.daywend:hover {

			background: #F3F3F3;

		}*/



		.darkv .calday:hover {

			background-color: rgba(35, 29, 28, 0.98);

		}

		

		.daymore {

			/*background: rgb(222, 226, 237);*/



			/*border:1px solid #6d3327;*/

			background-color: rgba(204, 82, 36, 0.23) !important;

			border: 1px solid #FF1C00 !important;

		}

		.darkv .daymore {

			background-color: #2f2120 !important;

			/*background-color: rgba(204, 82, 36, 0.23);*/

			border: 1px solid #562E29 !important;

			

		}

		

		.dayactive {

			background-color: #C4E4EC;

		}

		.darkv .dayactive {

			/*background: rgb(56,91,155);*/

			/*background-color: #38393d;*/

			background-color: #292F3A;

			color:white;

		}

		

		.dayactive:hover {

			background-color: #B5DDE7;

		}

		.darkv .dayactive:hover {

			background: rgba(35, 29, 28, 0.91);

		}



		.darkv .outofmonth {

			/*opacity: 0.3;*/

			/*background-color: #151618;*/

			    /*background-color: #1F2021;*/

			    background-color: #161D25;

		}

		.outofmonth {

			background-color: #F0F2F3;

		}



		.darkv .outofmonth .monthday {

			color: #828282;

		}



		.monthday {

			/*font-size: 0.8em;*/

			font-size: 13px;

			margin-left: 5px;

		}



		.cal_title {

			padding: 0px 5px;

			font-size: 12px;

			white-space: nowrap;

			text-overflow: ellipsis;

			overflow: hidden;

			color: black;

			font-weight: 500;
			height: 16px;

		}

		.cal_title span {
			width: calc(100% - 10px);
		    display: inline-block;
		    white-space: nowrap;
		    text-overflow: ellipsis;
		    overflow: hidden;
		}

		.darkv .cal_title {

			color:#D0D0D0;

		}



		.cal_title i {

			opacity: 0.5;

			margin-right: 2px;

			margin-left: -4px;

			font-size: 0.4em;
			vertical-align: text-top;

		}

		.darkv .week {

			background-color: black;

			border-bottom: 1px solid #000000;

		}

		.week {

			height: 80px;

			width: 100%;
			/*width: calc(100% - 275px);*/

			border-bottom: 1px solid #D5E4E6;

		}

		

		@media (min-height: 650px) {

			.week {

				height: 90px;

			}

		}

		@media (min-height: 740px) {

			.week {

				height: 100px;

			}

		}

		@media (min-height: 850px) {

			.week {

				height: 110px;

			}

		}

		@media (min-height: 950px) {

			.week {

				height: 120px;

			}

		}

		@media (min-height: 1020px) {

			.week {

				height: 130px;

			}

		}

		



		.week tr .calday:last-of-type {

			border-right: none;

		}



		.cal_det {

			background: rgb(35, 105, 211);

			/*height: 500px;*/

			color:white;

			position: relative;

			height: 100%;

		}



		.cal_choosemonth {

			color: white;

			font-size: 18px;

			padding: 2px 10px;

			cursor: pointer;

			background: transparent;

			border: none;

			outline: none;

			width: 70%;

		}



		.cal_month_n {

			display: inline-block;

			width: 30%;

		}



		.cal_det_area table {

			margin: 15px 5px;

		}



		.cal_det_area table td {

			padding: 5px;

		}



		.cal_det_area table i {

			font-size: 0.6em;

			margin-right: 5px;

		}



		.cal_arrow {

			color:rgb(35, 105, 211);

			position: absolute;

			left: 0%;

			top: 50%;

			-webkit-transform: translate(-75%, -50%) scaleY(1.8);

			-moz-transform: translate(-75%, -50%) scaleY(1.8);

			-ms-transform: translate(-75%, -50%) scaleY(1.8);

			-o-transform: translate(-75%, -50%) scaleY(1.8);

			transform: translate(-75%, -50%) scaleY(1.8);

			font-size: 100px;

		}



		.cal_ops {

			background: rgb(42, 78, 134);

			position: absolute;

			width: 100%;

			bottom: -7px;

		}



		.cal_sets {

			color: white;

			padding: 7px;

			font-size: 16px;

			cursor: pointer;

			float: right;

		}



		.calday_unfold {

			height: 0;

			transition: 0.23s;

			-o-transition: 0.23s;

			-ms-transition: 0.23s;

			-moz-transition: 0.23s;

			-webkit-transition: 0.23s;

			perspective: 100px;

			-o-perspective: 100px;

			-ms-perspective: 100px;

			-moz-perspective: 100px;

			-webkit-perspective: 100px;

			position: relative;

			overflow: hidden;

			/*max-height: 225px;*/

			background-color: black;

			/*overflow-y: auto;*/

		}



		.calday_unfold_on {

			/*height: 100%;*/

			height: 0 !important;

		}



		.calday_unfold_on .fold_up {

			transform:rotateX(-100deg);

			-o-transform:rotateX(-100deg);

			-ms-transform:rotateX(-100deg);

			-moz-transform:rotateX(-100deg);

			-webkit-transform:rotateX(-100deg);

			

			box-shadow: inset 2px -14px 13px -4px rgba(0,0,0,0.5);

		}

		.calday_unfold_on .fold_down {

			transform:rotateX(100deg);

			-o-transform:rotateX(100deg);

			-ms-transform:rotateX(100deg);

			-moz-transform:rotateX(100deg);

			-webkit-transform:rotateX(100deg);

			background-color: #110707;

			box-shadow: inset 2px 14px 13px -4px rgba(0,0,0,0.5);

		}



		.fold_up{

			background-color: white;

			height: 50%;

			width: 100%;

			transition: 0.23s;

			-o-transition: 0.23s;

			-ms-transition: 0.23s;

			-moz-transition: 0.23s;

			-webkit-transition: 0.23s;

			position: relative;

			top: 0;

			left: 0;

			transform-origin: 0% 0% 0px;

			-o-transform-origin: 0% 0% 0px;

			-ms-transform-origin: 0% 0% 0px;

			-moz-transform-origin: 0% 0% 0px;

			-webkit-transform-origin: 0% 0% 0px;



			transform: rotateX(0deg);

			-o-transform: rotateX(0deg);

			-ms-transform: rotateX(0deg);

			-moz-transform: rotateX(0deg);

			-webkit-transform: rotateX(0deg);

		} 

		.darkv .fold_up {

			/*background-color: #26272b;*/

			background-color: #1D1D1D;

		}



		.fold_down {

			background-color: white;

			height: 50%;

			width: 100%;

			min-height: 32px;

			transition: 0.23s;

			-o-transition: 0.23s;

			-ms-transition: 0.23s;

			-moz-transition: 0.23s;

			-webkit-transition: 0.23s;

			position: relative;

			/*top: 50px;*/

			bottom: 0;

			left: 0;

			transform-origin: 0% 100% 0px;

			-o-transform-origin: 0% 100% 0px;

			-ms-transform-origin: 0% 100% 0px;

			-moz-transform-origin: 0% 100% 0px;

			-webkit-transform-origin: 0% 100% 0px;

			transform: rotateX(0deg);

			-o-transform: rotateX(0deg);

			-ms-transform: rotateX(0deg);

			-moz-transform: rotateX(0deg);

			-webkit-transform: rotateX(0deg);

			box-shadow: none;

		}

		.darkv .fold_down {

			background-color: #1D1D1D;

		}



		.cal_show_title {

			display: block;

			color: #989898;

			padding: 5px 10px;

			max-width: 700px;

			margin: 0 auto;

		}



		.cal_show_title:hover, .cal_show_title:focus {

			text-decoration: none;

			color: #B36248;

		}

		.darkv .cal_show_title:hover, .darkv .cal_show_title:focus {

			background-color: #2F2120;

		}



		.cal_show_title span {

			margin-right: 15px;

			font-weight: 500;

			vertical-align: middle;

		}



		.cal_show_title span:first-of-type {

			font-size: 16px;

			width: 50%;

			display: inline-block;

			font-weight: 300;

			white-space: nowrap;

			overflow: hidden;

			text-overflow: ellipsis;

		}



		.cal_schedule {

			color: lightcoral;

			font-size: 12px;

		}



		.darkv .rsel_cal {

			/*background-color: #161617;*/

			background-color: #2A3035;

		}

		.rsel_cal {

			overflow: hidden;

			overflow-y:auto;

			margin-top: 32px;

			padding-top: 20px;

		}



		.seen_calendar {

			overflow: auto;

			/*height: 100%;*/

			display: inline-table;

			display:table;

			width: 100%;

			border-top: 1px solid #D5E4E6;

		}

		.darkv .seen_calendar {

			border-top: none;

		}









	/* ##### LAST SEEN #####*/

		.seen_list {

			list-style-type: none;

		    width: 85%;

		    max-width: 820px;

		    margin: 0 auto;

		    padding: 0;

		    position: relative;

		    overflow: hidden;



		    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#27381b+0,3b4449+25,4e4639+43,5e4a32+53,2b4a70+78,1c2d33+97 */

		    background: #27381b; /* Old browsers */

		    background: -moz-linear-gradient(top, #27381b 0%, #3b4449 25%, #4e4639 43%, #5e4a32 53%, #2b4a70 78%, #1c2d33 97%); /* FF3.6+ */

		    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#27381b), color-stop(25%,#3b4449), color-stop(43%,#4e4639), color-stop(53%,#5e4a32), color-stop(78%,#2b4a70), color-stop(97%,#1c2d33)); /* Chrome,Safari4+ */

		    background: -webkit-linear-gradient(top, #27381b 0%,#3b4449 25%,#4e4639 43%,#5e4a32 53%,#2b4a70 78%,#1c2d33 97%); /* Chrome10+,Safari5.1+ */

		    background: -o-linear-gradient(top, #27381b 0%,#3b4449 25%,#4e4639 43%,#5e4a32 53%,#2b4a70 78%,#1c2d33 97%); /* Opera 11.10+ */

		    background: -ms-linear-gradient(top, #27381b 0%,#3b4449 25%,#4e4639 43%,#5e4a32 53%,#2b4a70 78%,#1c2d33 97%); /* IE10+ */

		    background: linear-gradient(to bottom, #27381b 0%,#3b4449 25%,#4e4639 43%,#5e4a32 53%,#2b4a70 78%,#1c2d33 97%); /* W3C */

		    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27381b', endColorstr='#1c2d33',GradientType=0 ); /* IE6-9 */

		}

		

		.seen_list li {

			/*width: 35%;

			right: 0;

			margin-left: 65%;*/

			width: 100%;

			right: 0;

			margin-left: 0%;

			transition:width .2s ease-out, margin-left .2s ease-out;

			-webkit-transition:width .2s ease-out, margin-left .2s ease-out;

			-moz-transition:width .2s ease-out, margin-left .2s ease-out;

			-ms-transition:width .2s ease-out, margin-left .2s ease-out;

			-o-transition:width .2s ease-out, margin-left .2s ease-out;

		}



		.seen_list li input {

			opacity: 0;

			position: absolute;

			top: 0;

		}



		.seen_list li input:checked + .seen_list_display {

			right: 35%;

			transition:right .2s ease-out;

			-webkit-transition:right .2s ease-out;

			-moz-transition:right .2s ease-out;

			-ms-transition:right .2s ease-out;

			-o-transition:right .2s ease-out;

			color: black;

		}



		.seen_list li input:checked + .seen_list_display:hover, .seen_list li input:checked + .seen_list_display:hover {

			color: inherit;

			text-decoration: inherit;

			z-index: 100;

		}



		.seen_list li label {

			display: block;

			margin-bottom: 0;

		}



		.seen_list li label .seen_list_sm:hover {

			background-color: rgba(4, 11, 17, 0.52);

		}



		.seen_list li label .seen_list_sm {

			/*padding: 5px;*/

			cursor: pointer;

			position: relative;

			/*background-color: aliceblue;*/

			background-color: rgba(4, 11, 17, 0.32);

			/*border-bottom: 1px solid silver;*/

			z-index: 100;

			overflow: hidden;

			margin: 3px 0;



		}



		.seen_list_on li label .seen_list_sm {

			right: -12px;

			-webkit-transition: right 0.2s, width 0.2s;

			-o-transition: right 0.2s, width 0.2s;

			transition: right 0.2s, width 0.2s;

		}



		.seen_list li label input:checked + a + .seen_list_sm {

			background-color: rgba(4, 11, 17, 0.82);

			transition:background-color .2s ease-out;

			-webkit-transition:background-color .2s ease-out;

			-moz-transition:background-color .2s ease-out;

			-ms-transition:background-color .2s ease-out;

			-o-transition:background-color .2s ease-out;

		}



		.seen_list li label .seen_list_display {

			background-color: rgba(0, 0, 255, 0.06);

			width: 65%;

			height: 100%;

			position: absolute;

			top: 0;

			right: 100%;

			    background: url('../images/pattern2.png');

			background-color: rgba(103, 103, 103, 0.36);



			overflow: hidden;

			/*max-height: 500px;*/

		}



		.seen_list_display img {

			min-width: 100%;

			min-height: 100%;

			opacity: 0.59;

		}

		

		.list_seen_vert {

			overflow-y: auto;

			max-height: 500px;

			height: 500px;

			/*position: relative;*/

		}



		@media (max-height: 630px) {

			.list_seen_vert {

				max-height: 430px;

			}

		}

		@media (max-height: 570px) {

			.list_seen_vert {

				max-height: 300px;

			}

		}



		.seen_list_sm div {

			/*font-size: 16px;

			font-weight: 500;

			margin-right: 5px;*/

		}



		.last_seen_rate_out {

			height: 3px;

			background-color: gray;

		}



		.last_seen_rate_in {

			height: 3px;

		}



		.last_seen_ti {

			display: block;

			/*max-width: calc(100% - 75px);*/

			width: calc(100% - 60px);

			overflow: hidden;

			text-overflow: ellipsis;

			font-size: 18px;

			padding-left: 20px;

			color: white;

			font-weight: 600;

		}

		

		.seen_list_sm span:nth-of-type(1) {

			/*position: absolute;*/

			float: left;

			font-size: 42px;

			/*margin-left: 15px;*/

			font-weight: 300;

			width: 60px;

			text-align: center;

		}



		.seen_list_sm span:nth-of-type(2) {

			/*font-size: 12px;

			font-weight: 500;*/

			display: block;

			padding-left: 85px;

			font-weight: 500;

			/*max-width: calc(100% - 75px);*/

			width: calc(100% - 60px);

			color: white;

		}



		.seen_list_sm span:nth-of-type(3) {

			/*font-size: 13px;

			font-weight: 500;

			padding-left: 10px;

			padding-top: 3px;*/

		}



		.seen_list_display span:nth-of-type(1)  {

			background-color: #5777D0;

			color: white;

			padding: 2px 10px;

			position: absolute;

			top: 25%;

			left: 5%;

			font-size: 18px;

		}



		.seen_list_display div {

			font-size: 35px;

			color: white;

			position: absolute;

			top: 42%;

			left: 5%;

			text-shadow: 2px 2px #5F5F5F;

			white-space: normal;

		}



		.seen_list_display span:nth-of-type(2)  {

			border: 2px solid rgba(218, 218, 218, 0.9);

			color: white;

		    border-radius: 20px;

		    padding: 2px 23px;

		    position: absolute;

		    top: 75%;

		    left: 5%;

		    font-size: 20px;

		    font-weight: 500;

		    background-color: rgba(0, 0, 0, 0.18);

		}



		.seen_list_on li {

			width: 35%;

		    right: 0;

		    margin-left: 65%;

		    overflow: hidden;

		}



		.seen_list + .sl_more {

			width: 85%;

			max-width: 820px;

			margin: 0 auto;

			margin-top: 20px;

		}



		.seen_list + .sl_more button {

			padding: 5px;

			border: none;

			background-color: #454A4A;

			outline: none;

			color: #C5A4EF;

			width: 100%;

			

		}



		.seen_list_on + .sl_more button {

			width: 35%;

			margin-left: 65%; 

		}

	

	/*TIMELINE*/

		.timeline_area {

			padding: 10px;

			white-space: normal;

		}



		.timeline_year {

			display: inline-block;

			margin-left: 10px;

			margin-bottom: 20px;

		}

		.darkv .tml_year_lbl {

			border: 1px solid #2D3D4C;

			color: #8993A0;

			background-color: rgba(78, 91, 103, 0.41);

		}

		.tml_year_lbl {

			border: 1px solid #A7CEFF;

			padding: 3px 15px;

			color: #4949B1;

			margin-left: 40px;

			width: 70px;

			text-align: center;

			margin-bottom: -1px;

		}



		.tml_month {

			clear: both;

			height: 28px;

		}



		.tml_month:hover {

			cursor: pointer;

			opacity: 0.8;

		}

		.darkv .tml_month_lbl {

			background-color: #182432;

			color: #798492;

			border: 1px solid #182432;

		}

		.tml_month_lbl {

			display: inline-block;

			background-color: #CAE3F7;

			color: #25259C;

			float: left;

			padding: 1px 5px;

			border: 1px solid #25259C;

			width: 40px;

		}

		.darkv .timeline_n_outer {

			background-color: #203040;

			border: 1px solid #030404;

		}

		.timeline_n_outer {

			position: relative;

			display: inline-block;

			width: 70px;

			background-color: #D8EBFF;

			border: 1px solid #A7CEFF;

			float: left;

			

		}

		

		.darkv .timeline_n_inner {

			    background: linear-gradient(to right, #B0494C, #D55459);

			    color: #E0B2B2;

			    font-weight: 500;

		}

		.timeline_n_inner {

			background-color: #F3DE6F;

			background: linear-gradient(to right, #F3DE6F, white); /* Standard syntax */

		}

		

		.darkv .timeline_m {

			background-color: #1D2A3A;

			color: #A75A65;

		}

		.timeline_m {

			float: left;

			background-color: #ECE5D2;

			width: 50px;

			color: #AD943A;

			padding: 1px 5px;

		}



		.tml_max {

			background: linear-gradient(to right, gold, gold);

		}



/*POOLS*/

	.page_in_pools {

		background-image: url('../images/posters/3/user_pools.jpg');

		color: white;

	}



/*MEDIA*/

	.page_in_media {

		/*background-image: url('../images/posters/3/user_media.jpg');*/

		color: white;

	}



	.filter_media_zone {

		margin: 0 auto;

		width: 400px;

		position: relative;

	}



	.filter_media_zone > label {

		position: absolute;

	    opacity: 0.5;

	    top: -20px;

	    font-size: 13px;

	    font-weight: 400;

	}



	.filter_media_zone > label:nth-of-type(1) {

		left: 25px;

	}

	.filter_media_zone > label:nth-of-type(2) {

		left: 200px;

	}

	.filter_media_zone > label:nth-of-type(3) {

		left: 348px;

	}



	.filter_media {

		outline: none;

		display: none;

		height: 33px;

		-webkit-appearance: none;

		appearance: none;

		-moz-appearance: none;

		font-size: 18px;

		border: 2px solid rgba(192, 192, 192, 0.44);

		background-color: white;

		border-radius: 18px;

		padding: 2px 11px;

		display: inline-block;

		margin-right: 5px;

	}



	.media_section {

		max-height: calc(100% - 110px);

	}



/*STATS*/

	.page_in_stats {

		/*background-image: url('../images/posters/3/user_stats.jpg');*/

		color: white;

	}



	/*HORIZONTAL GRAPH*/

		.graf_area {

			width: 100%;

		}



		.graf_left {

			width: 230px;

			height: 100%;

			float: left;

			

			-webkit-perspective: 208px;

			/*transform: scale(1.4) translate(35px, 0px);*/ 

			transform: scale(1.4) translate(29px, -14px);

			

		}



		.graf_right {

			width: calc(100% - 330px);

			float: left;



		}



		.grafbar_side {

			background-color: #5DBA47;

			height: 45px;

			margin-bottom: 5px;

			width: 100%;

			/*box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.22);*/

			box-shadow: inset -75px 0px 39px -41px rgba(0, 0, 0, 0.1);

			/*transform: rotateY(50deg);*/

			transform: rotateY(48deg) skewY(10deg);

		}



		.graf_h_bar_item {

			margin-bottom: 5px;

		}



		.graf_h_bar {

			background-color: #5DBA47;

			border-radius: 0 20px 20px 0;

			padding-left: 20px;

			box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.22);

			display: inline-block;

			height: 45px;

		}



		.graf_h_bar:hover {

			/*background-color: green;*/

		}



		.graf_h_bar span {

			color: #EFEFEF;

			font-size: 30px;

			font-weight: 700;

			text-shadow: 0px 1px 4px #5DBA47;

		}



		.graf_h_bar_item label {

			font-weight: 500;

		    color: #5DBA47;

		    margin-left: 20px;

		    vertical-align: top;

		}



		.graf_axix {

			border-bottom: 3px dotted silver;

			margin-top: 40px;

			width: calc(100% - 40px);

		}



		.graf_axix_label {

			color: silver;

			font-weight: 500;

		}

		.graf_axix_label:nth-of-type(2), .graf_axix_label:nth-of-type(3) {

			margin-left: calc(50% - 40px);

		}



	/*VERTICAL GRAPH*/

		.graf_v_zone {

			height: calc(100% - 34px);

			margin-top: 33px;

		}



		.graf_v_area {

			height: calc(100%  - 10px - 200px);

			background-color: #EDEDEB;

			/*padding-top: 45px;*/

			position: relative;

			padding-left: 50px;

			white-space: nowrap;

			overflow-y: hidden;

			padding-bottom: 38px;

		}



		.graf_v_contain {

			height: 100%;

		}



		.graf_v_bt {

			height: 10px;

			background-color: #EDEDEB;

			position: relative;

		}



		.graf_scrolcover {

			width: 100%;

		    height: 30px;

		    top: -25px;

		    position: absolute;

		    background-color: #EDEDEB;

		}



		.graf_v_detail {

			height: 200px;

			background-color: #4A4A4A;

			overflow: hidden;

		}



		.graf_v_detail_off .gvd_top {

			/*left: 50%;*/

			right: -100%;

		}

		.graf_v_detail_off .gvd_avg {

			top: 100%;

		}

		

		.graf_v_detail_off .gvd_per {

			top: 100%;

		}



		.graf_v_item {

			display: inline-block;

			height: 100%;

			margin: 0 -3px 0 5px;

			/*float: left;*/

			position: relative;

			width: 45px;

			z-index: 1;

		}



		.graf_v {

			background-color: #DEE0DD;

			position: absolute;

			bottom: 0;

			width: 100%;

		}



		.graf_v:hover {

			cursor: pointer;

			background-color: #BAD6BF;

		}



		.graf_v_item:hover label {

			color: #929292;

		}



		.graf_v_item label {

			position: absolute;

			bottom: -45px;

			width: 100%;

			text-align: center;

			font-weight: 400;

			color: silver;

			white-space: normal;

			word-wrap: break-word;

		}



		.graf_v_grid {

			position: absolute;

			height: calc(100% - 38px);

			top: 0;

			right: 0;

			width: calc(100% - 50px);

			border-left: 1px dotted silver;

			/*padding-top: 40px;*/

			z-index: 0;

		}

		.graf_v_large .graf_v_grid_sep {

			width: 4845px;

		}

		

		.graf_v_grid_sep {

			border-bottom: 1px dotted silver;

			height: 20%;

			/*width: calc(100vw + 165px);*/

			width: 100%;

		}



		.graf_v_detail_item {

			display: inline-block;

			float: left;

			padding: 10px;

			color: white;

		}



		.graf_v_detail_item h5 {

			text-transform: uppercase;

		    color: #E8E8E8;

		    font-size: 12px;

		    letter-spacing: -0.5px;

		    font-weight: 600;

		}



		.gvd_avg {

			width: 200px;

			height: 100%;

			border-left: 1px solid #5D5D5D;

			margin-left: 50px;

			position: relative;

			top: 0;

			-webkit-transition: 0.2s;

			-o-transition: 0.2s;

			transition: 0.2s;

		}



		.gvd_per {

			width: 400px;

			height: 100%;

			border-left: 1px solid #5D5D5D;

			position: relative;

			top: 0;

			-webkit-transition: 0.2s;

			-o-transition: 0.2s;

			transition: 0.2s;

		}



		.gvd_top {

			width: 400px;

			/*height: calc(100% + 10px);*/

			height: 215px;

			background-color: #65C178;

			/*position: relative;*/

			position: fixed;

			/*top: -10px;*/

			bottom: 0;

			/*left: 0;*/

			right: 5%;

			-webkit-transition: 0.2s;

			-o-transition: 0.2s;

			transition: 0.2s;

		}



		.gvd_avg_ball {

			border: 11px solid #3A3A3A;

			border-radius: 50%;

			font-weight: 600;

			font-size: 50px;

			line-height: 47px;

			height: 80px;

			width: 80px;

			text-align: center;

			margin: 0 auto;

			background-color: #2B2B2B;

		}



		.gvd_n {

			font-size: 30px;

			font-weight: 600;

			margin-left: 38px;

		}



		.gvd_bar_out {

			background-color: #3A3A3A;

			height: 8px;

			width: 80%;

			margin: 15px auto 0 auto;

			border-radius: 4px;

		}



		.gvd_bar_in {

			background-color: #65C178;

			height: 100%;

			border-radius: 4px 0 0 4px;

		}



		.gvd_top ul {

			list-style-type: none;

			width: 60%;

			display: inline-block;

			height: 160px;

			overflow-y: auto;

			overflow-x: hidden;

			float: left;

		}



		.gvd_top li {

			overflow: hidden;

			text-overflow: ellipsis;

		}



		.gvd_top li a {

			text-decoration: none;

			color: white;

		}

		.gvd_top li a:hover {

			color: #DADADA;

		}



		.gvd_top button {

			outline: none;

			border:none;

			background-color: #478552;

			color:white;

			padding: 5px 15px;

			margin-left: 15px;

		}



		.gvd_top button:hover {

			background-color: #6E8872;

		}



		.that_year {

			font-size: 17px;

			color: #65C178;

			margin-left: 1px;

		}



		.graf_ops {

			position: fixed;

			right: 1px;

			z-index: 2;

		}



		.graf_ops button {

			background-color: #F7F7F5;

			border:none;

			cursor: pointer;

			padding: 8px 10px;

			float: left;

			font-weight: 600;

			font-size: 13px;

			color: #848484;

			border-bottom: 1px solid #D1D1CF;

			outline: none;

		}



		.graf_ops button:hover {

			background-color: #CCCCCC;

		}



		button.graf_op_on {

			background-color: #D1D1CF;

			color: white;

		}



		.graf_ops button:nth-of-type(1) {

			border-radius: 2px 0 0 2px;

		}



		@media screen and (max-width: 1340px) {

			.gvd_avg {

				margin-left: 10px;

				width: 20%;

			}

			.gvd_per {

				width: 30%;

			}

			.gvd_top {

				width: 30%;

			}

			.gvd_top ul {

				padding: 0;

			}

		}



		@media screen and (max-width: 920px) {

			.graf_v_detail_item h5 {

				/*display: none;*/

			}

			.gvd_avg {

				margin-left: 0px;

				width: 40%;

			}

			.gvd_per {

				width: 30%;

			}

			.gvd_top {

				width: 15%;

				/*top: 0;*/

			}

			.gvd_top ul {

				display: none;

			}

			

		}



		@media screen and (max-height: 360px) {

			.graf_v_area {

				height: calc(100%  - 30px - 90px);

			}



			.graf_v_bt {

				height: 30px;

			}



			.graf_v_detail {

				height: 90px;

			}

		}



		@media (max-height: 650px) {

			.graf_v_area {

				height: calc(100% - 10px - 150px);

			}

			.graf_v_detail {

				height: 150px;

			}

			.gvd_top ul {

				height: 114px;

			}



			.gvd_top {

				height: 170px;

			}

		}

	

	/*DARK CHART*/

		.char_dark_area {

			/*background-color: #77777F;*/

			width: 100%;

			overflow: hidden;

			margin-top: 33px;

			height: calc(100% - 33px);

			position: relative;

			background: rgba(104,104,112,1);

			background: -moz-linear-gradient(top, rgba(104,104,112,1) 0%, rgba(104,104,112,1) 1%, rgba(94,104,114,1) 41%, rgba(125,123,128,1) 100%);

			background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(104,104,112,1)), color-stop(1%, rgba(104,104,112,1)), color-stop(41%, rgba(94,104,114,1)), color-stop(100%, rgba(125,123,128,1)));

			background: -webkit-linear-gradient(top, rgba(104,104,112,1) 0%, rgba(104,104,112,1) 1%, rgba(94,104,114,1) 41%, rgba(125,123,128,1) 100%);

			background: -o-linear-gradient(top, rgba(104,104,112,1) 0%, rgba(104,104,112,1) 1%, rgba(94,104,114,1) 41%, rgba(125,123,128,1) 100%);

			background: -ms-linear-gradient(top, rgba(104,104,112,1) 0%, rgba(104,104,112,1) 1%, rgba(94,104,114,1) 41%, rgba(125,123,128,1) 100%);

			background: linear-gradient(to bottom, rgba(104,104,112,1) 0%, rgba(104,104,112,1) 1%, rgba(94,104,114,1) 41%, rgba(125,123,128,1) 100%);

			background: linear-gradient(to bottom, rgb(163, 165, 181) 0%, rgb(125, 125, 146) 14%, rgb(117, 111, 134) 61%, rgb(90, 87, 95) 100%);

			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#686870', endColorstr='#7d7b80', GradientType=0 );e=1 );

		}



		.char_dark_zone {

			width: 100%;

			float: left;

			height: 100%;

			border-right: 1px solid #4B555E;

			-webkit-transition: .2s;

			-o-transition: .2s;

			transition: .2s;

		}



		.char_dark_detail {

			width: 0%;

			display: inline-block;

			float: left;

			height: 0%;

			border-bottom: 1px solid #4B555E;

			-webkit-transition: .2s;

			-o-transition: .2s;

			transition: .2s;

			position: relative;

		}

		

		.char_dark_bottom {

			width: 100%;

			height: 0%;

			position: absolute;

			bottom: 0;

			-webkit-transition: .2s;

			-o-transition: .2s;

			transition: .2s;

		}



		.char_dark_topul {

			list-style-type: none;

			margin: 0;

			padding: 0;

			height: 100%;

		}



		.char_dark_bottom h5 {

			height: 100%;

			width: 30px;

			display: inline-block;

			float: left;

			position: relative;

		}

		.char_dark_bottom h5 span {

			-ms-transform: rotate(-90deg); /* IE 9 */

		    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */

		    transform: rotate(-90deg);

		    display: block;

		    width: 100%;

		    position: absolute;

		    top: 35%;

		}

		

		.char_dark_topul li {

			display: inline-block;

			height: 100%;

			width: calc(20% - 6px);

			float: left;

			padding: 5px;

		}

		

		.char_dark_topul li a {

			text-align: center;

			color: #7A8086;

			font-size: 30px;

			font-weight: 500;

			word-wrap: break-word;

			white-space: normal;

			display: -webkit-box;

			-webkit-line-clamp: 3;

			text-decoration: none;

			/*height: 100%;

			width: 100%;*/

			overflow: hidden;

			text-overflow:ellipsis;

		}



		.char_dark_topul li:hover {

			background-color: rgba(57, 69, 78, 0.38);

			-webkit-transition: background-color .12s;

			-o-transition: background-color .12s;

			transition: background-color .12s;

			cursor: pointer;

		}



		.char_dark_topul li:nth-of-type(1) {

			border-bottom:20px solid #FBD046;

		}

		.char_dark_topul li:nth-of-type(2) {

			border-bottom:20px solid #FA6B5B;

		}

		.char_dark_topul li:nth-of-type(3) {

			border-bottom:20px solid #28D8B2 ;		

		}

		.char_dark_topul li:nth-of-type(4) {

			border-bottom:20px solid #57A6E1 ;

		}

		.char_dark_topul li:nth-of-type(5) {

			border-bottom:20px solid #C761C5;

		}



		.char_dark_area_active .char_dark_zone {

			width: 70%;

			height: 80%;

		}

		.char_dark_area_active .char_dark_detail {

			width: 30%;

			height: 80%;

		}

		.char_dark_area_active .char_dark_bottom {

			height: 20%;

		}



		.char_dark_upper {

			position: relative;

		}



		.char_dark_upper input {

			width: 100%;

			height: 60px;

			border:none;

			border-bottom: 1px solid #4B555E;

			background-color: transparent;

			outline: none;

			font-size: 32px;

			padding: 3px 30px;

			/*color: #98A2AB;*/

			color: #6F7982;

		}

		

		.char_dark_dot {

			height: 7px;

			width: 7px;

			border-radius: 50%;

			background-color: #28D8B2;

			display: inline-block;

			position: absolute;

			top: 27px;

			left: 15px;

		}



		.char_dark_upper input::-webkit-input-placeholder {

			color: #555758;

			/*color: #555E65;*/

			font-size: 20px;

			padding: 10px 0px;

		}

		.char_dark_upper input:-ms-input-placeholder {

			color: #555758;

			/*color: #555E65;*/

			font-size: 20px;

			padding: 10px 0px;

		} 

		.char_dark_upper input::-moz-placeholder {

			color: #555758;

			/*color: #555E65;*/

			font-size: 20px;

			padding: 10px 0px;

		}

		.char_dark_upper input:-moz-placeholder {

			color: #555758;

			/*color: #555E65;*/

			font-size: 20px;

			padding: 10px 0px;

		}



		.char_dark_placer {

			display: inline-block;

			height: calc(100% - 60px);

			white-space: nowrap;

			width: 100%;

			overflow-y: hidden;

			font-size: 0;

		}



		.char_dark_iten {

			display: inline-block;

			/*margin-right: -1px;*/

			width: 100px;

			border-right: 1px solid #4B555E;

			height: 100%;

			position: relative;

			/*float: left;*/

			font-size: 14px;

			cursor: pointer;

			box-shadow: 0px 0px 0px rgba(0,0,0,0.5);

			-webkit-transition: box-shadow 0.2s, background-color .1s;

			-o-transition: box-shadow 0.2s, background-color .1s;

			transition: box-shadow 0.2s, background-color .1s;

		}



		.char_dark_iten:hover, .char_dark_iten_on {

			background-color: white;

			box-shadow: 0px 0px 14px rgba(0,0,0,0.5);

			/*transform: scale(1.1);*/

			z-index: 2;

		}



		.char_dark_label {

			text-align: center;

			color: #555758;

			/*color: #555E65;*/

			padding-top: 10px;

			font-size: 16px;

			font-weight: 600;

		}



		.char_dark_value {

			text-align: center;

			color: #555758;

			/*color: #555E65;*/

			font-size: 45px;

		}



		.char_dark_inner {

			background-color: #28D8B2;

			position: absolute;

			bottom: 0;

			width: 100%;

		}



		.char_dark_outer  {

			height: calc(100% - 95px);

			position: relative;

		}

		

		.char_dark_detail h5, .char_dark_bottom h5 {

			color: #333333;

			font-weight: 300;

			font-size: 20px;

		}



		.char_dark_detail h5:before, .char_dark_bottom h5:after {

			content:"";

			display: inline-block;

			margin-right: 8px;

			margin-left: 10px;

			position: relative;

			height: 7px;

		    width: 7px;

		    border-radius: 50%;

		}

		.char_dark_detail h5:before {

			background-color: #FBD046;

			top: -4px;

		}

		.char_dark_bottom h5:after {

			background-color: #57A6E1;

			top: 65px;

		}



		/*PIE CHART*/

			/* 

			  make each pie piece a rectangle twice as high as it is wide.

			  move the transform origin to the middle of the left side.

			  Also ensure that overflow is set to hidden.

			*/

			  .pie {

					position:absolute;

					width:100px;

					height:200px;

					overflow:hidden;

					left:150px;

					-moz-transform-origin:left center;

					-ms-transform-origin:left center;

					-o-transform-origin:left center;

					-webkit-transform-origin:left center;

					transform-origin:left center;

				}

			/*

			  unless the piece represents more than 50% of the whole chart.

			  then make it a square, and ensure the transform origin is

			  back in the center.



			  NOTE: since this is only ever a single piece, you could

			  move this to a piece specific rule and remove the extra class

			*/

				.pie.big {

					width:200px;

					height:200px;

					left:50px;

					-moz-transform-origin:center center;

					-ms-transform-origin:center center;

					-o-transform-origin:center center;

					-webkit-transform-origin:center center;

					transform-origin:center center;

				}

			/*

			  this is the actual visible part of the pie. 

			  Give it the same dimensions as the regular piece.

			  Use border radius make it a half circle.

			  move transform origin to the middle of the right side.

			  Push it out to the left of the containing box.

			*/

				.pie_before {

					content:"";

					position:absolute;

					width:100px;

					height:200px;

					left:-100px;

					border-radius:100px 0 0 100px;

					-moz-transform-origin:right center;

					-ms-transform-origin:right center;

					-o-transform-origin:right center;

					-webkit-transform-origin:right center;

					transform-origin:right center;

					/*border-right: 5px solid #78748A;*/

				}

			 /* if it's part of a big piece, bring it back into the square */

				.big .pie_before {

					left:0px;

				}

			/* 

			  big pieces will also need a second semicircle, pointed in the

			  opposite direction to hide the first part behind.

			*/

				.pie.big:AFTER {

					content:"";

					position:absolute;

					width:100px;

					height:200px;

					left:100px;

					border-radius:0 100px 100px 0;

				}

			/*

			  add colour to each piece.

			*/

				.pie:nth-of-type(1):BEFORE,

				.pie:nth-of-type(1):AFTER, .pie:nth-of-type(1) .pie_before, label.pie_legend:nth-of-type(1):before {

					background-color:#FBD046;	

					background: linear-gradient(to left, #FBD046 0%,#EBC13A 100%);

				}

				.pie:nth-of-type(2):AFTER,

				.pie:nth-of-type(2):BEFORE, .pie:nth-of-type(2) .pie_before, label.pie_legend:nth-of-type(2):before {

					background-color:#FA6B5B;	

					background: linear-gradient(to left, #FA6B5B 0%,#ED6253 100%);

				}

				.pie:nth-of-type(3):AFTER,

				.pie:nth-of-type(3):BEFORE, .pie:nth-of-type(3) .pie_before, label.pie_legend:nth-of-type(3):before {

					background-color:#28D8B2;	

					background: linear-gradient(to left, #28D8B2 0%,#25C3A1 100%);

				}

				.pie:nth-of-type(4):AFTER,

				.pie:nth-of-type(4):BEFORE, .pie:nth-of-type(4) .pie_before, label.pie_legend:nth-of-type(4):before {

					background-color:#57A6E1;	

					background: linear-gradient(to left, #57A6E1 0%,#4795D0 100%);

				}

				.pie:nth-of-type(5):AFTER,

				.pie:nth-of-type(5):BEFORE, .pie:nth-of-type(5) .pie_before, label.pie_legend:nth-of-type(5):before {

					background-color:#13A956;	

					background: linear-gradient(to left, #13A956 0%,#14994F 100%);

				}

				.pie:nth-of-type(6):AFTER,

				.pie:nth-of-type(6):BEFORE, .pie:nth-of-type(6) .pie_before, label.pie_legend:nth-of-type(6):before {

					background-color:#3C3C3C;	

					background: linear-gradient(to left, #3C3C3C 0%,#332828 100%);

				}

				.pie:nth-of-type(7):AFTER,

				.pie:nth-of-type(7):BEFORE, .pie:nth-of-type(7) .pie_before, label.pie_legend:nth-of-type(7):before {

					background-color:white;	

					background: linear-gradient(to left, white 0%,#EEECEC 100%);

				}

				.pie:nth-of-type(8):AFTER,

				.pie:nth-of-type(8):BEFORE, .pie:nth-of-type(8) .pie_before, label.pie_legend:nth-of-type(8):before {

					background-color:#D481D2;	

					background: linear-gradient(to left, #D481D2 0%,#B56EB3 100%);

				}

				.pie:nth-of-type(9):AFTER,

				.pie:nth-of-type(9):BEFORE, .pie:nth-of-type(9) .pie_before, label.pie_legend:nth-of-type(9):before {

					background-color:silver;

					background: linear-gradient(to left, silver 0%,#B3B2B2 100%);	

				}

				.pie:nth-of-type(10):AFTER,

				.pie:nth-of-type(10):BEFORE, .pie:nth-of-type(10) .pie_before, label.pie_legend:nth-of-type(10):before {

					background-color:purple;

					background: linear-gradient(to left, purple 0%,#6C046C 100%);	

				}

				.pie:nth-of-type(11):AFTER,

				.pie:nth-of-type(11):BEFORE, .pie:nth-of-type(11) .pie_before, label.pie_legend:nth-of-type(11):before {

					background-color:lime;	

					background: linear-gradient(to left, lime 0%,#00DB00 100%);

				}

				.pie:nth-of-type(12):AFTER,

				.pie:nth-of-type(12):BEFORE, .pie:nth-of-type(12) .pie_before, label.pie_legend:nth-of-type(12):before {

					background-color:aqua;	

					background: linear-gradient(to left, aqua 0%,#07E5E5 100%);

				}

				.pie:nth-of-type(13):AFTER,

				.pie:nth-of-type(13):BEFORE, .pie:nth-of-type(13) .pie_before, label.pie_legend:nth-of-type(13):before {

					background-color:burlywood;	

					background: linear-gradient(to left, burlywood 0%,#C7A375 100%);

				}

				.pie:nth-of-type(14):AFTER,

				.pie:nth-of-type(14):BEFORE, .pie:nth-of-type(14) .pie_before, label.pie_legend:nth-of-type(14):before {

					background-color:brown;	

					background: linear-gradient(to left, brown 0%,#942121 100%);

				}

				.pie:nth-of-type(15):AFTER,

				.pie:nth-of-type(15):BEFORE, .pie:nth-of-type(15) .pie_before, label.pie_legend:nth-of-type(15):before{

					background-color:coral;

					background: linear-gradient(to left, coral 0%,#E67044 100%);

				}





				.pie_legend {

					position: relative;

					top: 43%;

					left: 20px;

					color: #B5B5B5;

					font-weight: 400;

					margin-bottom: 0;

					display: block;

					margin-left: 17px;

				}

				.pie_legend:before {

					content: "";

					display: block;

					height: 7px;

					width: 7px;

					position: absolute;

					left: -10px;

					top: 7px;

				}



				 {

					background-color: red;

				}

			/*

			  now rotate each piece based on their cumulative starting

			  position

			*/

				

			/*

			  and rotate the amount of the pie that's showing.



			  NOTE: add an extra degree to all but the final piece, 

			  to fill in unsightly gaps.

			*/

				

				

			/*

			NOTE: you could also apply custom classes (i.e. .s0 .v30)

			but if the CSS3 attr() function proposal ever gets implemented,

			then all the above custom piece rules could be replaced with

			the following:



			.pie[data-start] {

			   transform:rotate(attr(data-start,deg,0);

			}

			.pie[data-value]:BEFORE {

			   transform:rotate(attr(data-value,deg,0);

			}

			*/

			@media screen and (max-height: 600px) {

				.char_dark_topul li a {

					font-size: 19px;

				}



			}

			@media screen and (max-width: : 1100px) {

				.char_dark_zone {

				    width: 60%;

				}

				.char_dark_detail {

				    width: 40%;

				}

			}

			@media screen and (max-width: : 900px) {

				.char_dark_zone {

				    width: 40%;

				}

				.char_dark_detail {

				    width: 60%;

				}

			}



/*RECOMENDED*/

	.page_in_recomended {

		/*background-image: url('../images/posters/3/user_recomended.jpg');*/

		color: white;

	}



	.rec_seen {

		background-color: silver;

	}



	.rec_del {

		background-color: #FF2D34;

		color: white;

		outline: none;

		border:none;

		padding: 2px 10px;

	}



	.rec_del:hover {

		background-color: #EA272E;

	}



	.rec_del:active {

		box-shadow: inset 0 3px 5px rgba(0,0,0,.125);

	}



/*PLISTS*/

	.page_in_plists {

		/*background-image: url('../images/posters/3/user_plists.jpg');*/

		color: white;

	}



	.rsel_pl {

		overflow-x: initial;

	}

	

	/*PLIST MANAGE*/

		.pl_ul {

			list-style-type: none;

			margin: 32px auto 0 auto;

			/*height: calc(100% - 62px);*/

			height: calc(100% - 15px);

			padding: 0;

			overflow-y: auto;

			/*background-color: #EADAAA;*/

			    max-width: 860px;

		}



		.pl_ul li {

			background-color: #EADAAA;

			position: relative;

			height: 250px;

			top: 0;

			width: 100%;

			border-top: 2px solid #B10B0B;

			border-bottom: 2px solid #B10B0B;

			margin-top: -2px;

			transition:height .2s ease, top 0.2s ease;

			-webkit-transition:height .2s ease, top 0.2s ease;

			-moz-transition:height .2s ease, top 0.2s ease;

			-ms-transition:height .2s ease, top 0.2s ease;

			-o-transition:height .2s ease, top 0.2s ease;

			/*transition: 0.3s;*/

			/*border-right: 2px solid #B10B0B;*/

			cursor: pointer;

		}

		li.pl_deact .pl_name {
			color: #c11616;
		}



		.pl_ul li:last-of-type {

			margin-bottom: 43px;

		}

		

		.pl_ul li:hover {

			/*background-color: #E1D2A4;*/

		}



		.pl_ul_active {

			overflow: hidden;

		}



		.pl_ul .pl_active {

			height: calc(100% - 45px);

			z-index: 100;

			position: relative;

			/*top: 35px;*/

			transition: 0.3s;

			/*width: calc(100% - 299px);*/

			width: 100%;

			border-top: 2px solid #B10B0B;

			border-bottom: 2px solid #B10B0B;

		}



		.pl_ul li input {

			border: none;

		    background-color: transparent;

		    color: white;

		    font-size: 40px;

		    position: absolute;

		    top: 15%;

		    left: 5%;

		    width: 55%;

		    z-index: 11;

		    text-shadow: 1px 1px rgba(111, 111, 111, 0.55);

		    text-overflow: ellipsis;

		    font-weight: 400;

		    -webkit-transition: 0.5s;

		    -o-transition: 0.5s;

		    transition: 0.5s;

		}



		.pl_ul li.pl_active input  {

			width: 65%;

			font-size: 45px;

		}



		.pl_ul li select {

			z-index: 0;

			border: none;

			background-color: transparent;

			color: white;

			font-size: 20px;

			position: absolute;

			/* font-weight: 500; */

			top: 50%;

			left: 5%;

			width: 40%;

			-moz-appearance:none;

			-webkit-appearance:none;

			z-index: 11;

			transition:0.5s;

			text-shadow: 1px 1px rgba(111, 111, 111, 0.55);

		}



		.pl_ul li article {

			position: absolute;

			top: 50%;

			left: 5%;

			width: 40%;

			z-index: 12;

			height: 30px;

		}



		.pl_ul li.pl_active select, .pl_ul li.pl_active article  {

			top: calc(15% + 60px);

		}



		.pl_ul li .pl_n {

			font-size: 20px;

			position: absolute;

			font-weight: 700;

			color: #F5CE00;

			top: 20%;

			left: 60%;

			z-index: 11;

			text-shadow: 1px 1px rgba(156, 139, 33, 0.45);

			transition: 0.23s;

		}



		li.pl_active .pl_n {

			top: 5%;

			left: 5%;



		}



		.cover_ptd {

			z-index: 2;

			top: 25%;

			left: 70%;

			width: 20%;

			height: 90px;

			position: absolute;

		}



		.pl_ul li .pl_title_display {

			font-size: 20px;

		    position: absolute;

		    font-weight: 700;

		    background-color: rgba(148, 131, 81, 0.31);

		    top: 25%;

		    left: 70%;

		    width: 20%;

		    height: 90px;

		    overflow: hidden;

		    z-index: 1;

		    transition:all .6s ease;

		    -webkit-transition:all .6s ease;

		    -moz-transition:all .6s ease;

		    -ms-transition:all .6s ease;

		    -o-transition:all .6s ease;

		}



		.pl_title_display a {

			text-decoration: none;

			color:white;

			display: block;

			font-size: 13px;

			font-weight: 300;

			padding: 2px 0 0 5px;

			white-space: nowrap;

			text-overflow: ellipsis;

			overflow: hidden;

			text-shadow: 1px 1px rgba(111, 111, 111, 0.55);

		}



		.pl_title_display a:hover, .pl_title_display a:focus {

			text-decoration: none;

			/*color:#BD913D;*/

			font-weight: bold;

		}



		.pl_active .cover_ptd {

			height: 0;

		}



		li.pl_active .pl_title_display {

			height: 60%;

			overflow-y: auto;

			/*left: 60%;*/

			width: 30%;

			top: 10%;

			z-index: 11;

			background-color: #F8BB0B;

		}



		.pl_ul li button {

			font-size: 15px;

		    position: absolute;

		    font-weight: 500;

		    background-color: #FFE02C;

		    top: 80%;

		    left: 80%;

		    width: 100px;

		    height: 25px;

		    outline: none;

		    border: none;

		    z-index: 11;

		    -webkit-transition: left 1.2s;

		    -o-transition: left 1.2s;

		    transition: left 1.2s;

		}



		.pl_ul li.pl_active button {

			left: 90%;

		}



		.pl_ul li.pl_active button:hover {

			left: 89%;

		}



		.pl_edit_area {

			background-color: rgba(175, 171, 161, 0.44);

			position: absolute;

			bottom: -50px;

			width: 100%;

			height: 50px;

			opacity: 0;

			transition:all .8s ease;

			-webkit-transition:all .8s ease;

			-moz-transition:all .8s ease;

			-ms-transition:all .8s ease;

			-o-transition:all .8s ease;

			/*display: none;*/

		}



		.pl_edit_area .opt_pl {

			outline: none;

			border: none;

			background-color: transparent;

			display: inline-block;

			color: white;

			font-size: 18px;

			margin: 15px;

			cursor: pointer;

			

			position: relative;

			font-weight: 400;

			opacity: 0.7;

		}



		.opt_pl i {

			transform: scale(0);

			width: 0;

			-webkit-transition: 0.3s;

			-o-transition: 0.3s;

			transition: 0.3s;

		}



		.opt_pl_on i {

			transform: scale(1);

			width: inherit;

			color: green;

			display: inline-block;

			width: 50px;

			text-align: center;

			padding-top: 16px;

			height: 50px;

			top: -15px;

			position: relative;

		}



		.opt_pl_on span {

			display: none;

		}



		.pl_active_editmode .pl_posters {

			opacity: 0;

		}

		

		.pl_active_editmode .pl_title_display, .pl_active_editmode .pass_cok {

			display: none;

		}



		.pl_active_editmode .pl_edit_area .opt_pl span, .pl_active_editmode article {

			display: none;

		}



		li.pl_active_editmode select {

			background-color: rgb(234, 218, 170);

		}



		.pl_edit_area .opt_pl:hover {

			opacity: 1;

		}



		.close_ops {

			transform: scale(0);

			width: 0;

			-webkit-transition: 0.3s;

			-o-transition: 0.3s;

			transition: 0.3s;

			right: 25px;

			position: absolute;

			top: 0;

			font-size: 18px;

			margin: 15px;

			cursor: pointer;

			font-weight: 400;

			opacity: 0.7;

			color:red;

		}



		.pl_active_editmode .close_ops {

			transform: scale(1);

			display: inline-block;

			width: 50px;

			text-align: center;

			padding-top: 11px;

			height: 100%;

			margin-top: 0px;

		}



		.pl_edit_area .opt_pl:nth-of-type(1) {

			-webkit-transition: top 0.5s;

			-o-transition: top 0.5s;

			transition: top 0.5s;

			top: 50px;

		}

		.pl_edit_area .opt_pl:nth-of-type(2) {

			-webkit-transition: top 0.7s;

			-o-transition: top 0.7s;

			transition: top 0.7s;

			top: 150px;



		}

		.pl_edit_area .opt_pl:nth-of-type(3) {

			-webkit-transition: top 0.9s;

			-o-transition: top 0.9s;

			transition: top 0.9s;

			top: 250px;

		}

		.pl_edit_area .opt_pl:nth-of-type(4) {
			-webkit-transition: top 1.1s;
			-o-transition: top 1.1s;
			transition: top 1.1s;
			top: 250px;
		}

		.pl_edit_area .opt_pl:nth-of-type(5) {

			-webkit-transition: top 1.3s;

			-o-transition: top 1.3s;

			transition: top 1.3s;

			top: 350px;

			right: 5px;

			position: absolute;

		}



		.pl_active .pl_edit_area .opt_pl {

			top: 0;

		}



		.pl_active .pl_edit_area {

			bottom: 0;

			opacity: 1;

		}



		.pl_active .pl_posters {

			/*margin-top: -50px;*/

		}



		.pl_posters {

			opacity: 1;

			overflow: hidden;

			height: 100%;

			/*-webkit-filter: blur(5px);*/

			z-index: 10;

			/*position: absolute;*/

			    background-color: black;

			 -webkit-transition: opacity 0.2s;

			 -o-transition: opacity 0.2s;

			 transition: opacity 0.2s;

			

		}



		.pl_posters img {

			position: relative;

			top: 50%;

			/*-webkit-transform: translateY(-50%);

			-ms-transform: translateY(-50%);

			transform: translateY(-50%);*/

			transform: translate(0%, -50%);



			min-width: 100%;

			min-height: 100%;

			opacity: 0.9;

		}



		.pl_active .pl_posters img {

		    transform: translate(-5%, -50%);

		    -webkit-transition: 1.7s;

		    -o-transition: 1.7s;

		    transition: 1.7s;

		}

		

		.blur {

			position: absolute;

			/*top: 100%;

			transition:0.23s;*/

			display: none;

		}

		

		.pl_active .blur {

			/*display: block;*/

			/* overflow: hidden; */

			height: calc(100% - 100px);

			-webkit-filter: blur(5px);

			/* background-color: rgb(255, 0, 0); */

			top: 0;

			z-index: 0;

			/* margin-top: -50px; */

		}



		.pl_active .blur img {

			position: relative;

			top: 50%;

			-webkit-transform: translateY(-50%);

			-ms-transform: translateY(-50%);

			transform: translateY(-50%);

			min-width: 100%;

			min-height: 100%;

			opacity: 0.5;

		}



		.poster_single {

			

		}



		.close_pl {

			display: inline-block;

			position: absolute;

			top: -30px;

			opacity: 0;

			right: 30px;

			-webkit-transition: 1.5s;

			-o-transition: 1.5s;

			transition: 1.5s;

			width: 30px;

			padding-left: 13px;

		}



		.pl_active .close_pl {

			top: 7px;

			opacity: 0.5;

		}



		.pl_active .close_pl:hover {

			opacity: 1;

		}



		.close_pl span:nth-of-type(1) {

			height: 25px;

			width: 3px;

			background-color: gold;

			display: inline-block;

			transform: rotate(135deg);

			margin-right: -3px;

			-webkit-transition: 0.5s;

			-o-transition: 0.5s;

			transition: 0.5s;

		}

		.close_pl span:nth-of-type(2) {

			height: 25px;

			width: 3px;

			background-color: gold;

			display: inline-block;

			transform: rotate(45deg);

			-webkit-transition: 0.5s;

			-o-transition: 0.5s;

			transition: 0.5s;

		}

		.close_pl:hover span:nth-of-type(1) {

			transform: rotate(45deg);

		}

		.close_pl:hover span:nth-of-type(2) {

			transform: rotate(135deg);

		}



	/*ADD NEW PL*/

		.addnew {

			margin-bottom: 50px;

		}



		.addnew label {

			font-size: 30px;

			font-weight: 400;

			color: #E0DBD3;

			display: block;

			text-align: center;

			width: 320px;

			    margin: 0 auto;

		}



		.addnew_pl>label {

			margin-top: 50px;

		}



		.addnew input, .addnew select {

			border: 1px solid #E0DBD3;

			height: 50px;

			width: 230px;

			border-radius: 2px;

			display: block;

			margin: 10px auto;

			background-color: transparent;

			color: #BBB7B0;

			outline: none;

			font-size: 18px;

			padding: 0 10px;

			-webkit-transition: background-color 0.2s;

			-o-transition: background-color 0.2s;

			transition: background-color 0.2s;

		}



		.addnew input:focus, .addnew select:focus {

			background-color: #F1ECE4;

		}



		.addnew div {

			background-color: #E0DBD3;

			width: 230px;

			height: 50px;

			padding: 12px 5px;

			text-align: center;

			font-size: 20px;

			color: #BDB8B0;

			font-weight: 600;

			cursor: pointer;

			-webkit-transition: background-color 0.2s;

			-o-transition: background-color 0.2s;

			transition: background-color 0.2s;

			    margin: 0 auto;

		}



		.addnew div:hover {

			background-color: #D0CAC2;

		}



	/*MANAGE GROUPS*/

		

	/*PREFERED*/

		.pref_pl_pick {

			background-color: white;

			margin: 8px auto;

			height: 40px;

			width: 300px;

			padding: 5px 10px;

			font-size: 17px;

			box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.27);

			cursor: pointer;

			-webkit-transition: 0.11s;

			-o-transition: 0.11s;

			transition: 0.11s;

		}



		.pref_pl_pick:hover {

			/*box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.27);*/

			box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);

			width: 304px;

			/*height: 42px;*/

		}



		.pref_pl_pick:active {

			box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.3);

			width: 300px;

		}



		.pref_pl_pick_sel {

			box-shadow: 0px 4px 12px 1px rgba(0, 0, 0, 0.2);

			background-color: rgba(46, 139, 87, 0.67);

			color: white;

			width: 306px;

		}



		.filter_prefer {

			display: block;

			width: 400px;

			outline: none;

			margin: 20px auto;

			border-radius: 20px 0px 0px 20px;

			border: 1px solid gainsboro;

			font-size: 25px;

			color: green;

			padding: 5px 10px;

			text-align: center;

		}



		.predef_zone {

			overflow-y: scroll;

			height: calc(100% - 170px);

		}



		.predef_area {

			overflow: hidden;

		}



	/*STORED*/

		.rsel_stored_area {



		}



		.stored_item_area {

			display: inline-block;

			width: 50%;

			height: 100%;

			overflow: hidden;

			overflow-y: auto;

			float: left;

			padding: 9px 0;

		}



		.stored_item_area a, .stored_item_area div {

			display: block;

			padding: 2px 5px;

			color: black;

		}



		.list_exp_bar_blue + .expand .stored_item_area a {

			color: white;

		}



		.stored_item_area a:hover, .stored_item_area a:focus, .list_exp_bar_blue + .expand .stored_item_area a:hover {

			text-decoration: none;

			color: gold;

		}



		.stor_options {

			width: 50%;

			float: left;

			padding-top: 15%;

		}



		.stor_options button {

			display: block;

		    margin: 10px 15px;

		    outline: none;

		    background-color: #E8E8E8;

		    border: 1px solid #C7C7C7;

		    padding: 5px 10px;

		    width: 90px;

		    font-size: 17px;

		}



		.stor_options button:hover {

			background-color: #D2D2D2;

		}



/*STORAGE*/

	.new_stor_area {

		margin: 50px 100px;

	}

	

	.new_stor_input {

		width: calc(100% - 90px);

		height: 65px;

		outline: none;

		background-color: transparent;

		border: 2px solid white;

		border-right-width: 0;

		color: white;

		font-size: 30px;

		font-weight: 600;

		padding: 0 20px;

		-webkit-transition: 0.2s;

		-o-transition: 0.2s;

		transition: 0.2s;

	}



	.new_stor_input::-webkit-input-placeholder {

	   color: rgba(255,255,255,0.8);

	   font-weight: 500;

	}

	.new_stor_input:-moz-placeholder {

		color: rgba(255,255,255,0.8);

		font-weight: 500;

	}

	.new_stor_input::-moz-placeholder {

		color: rgba(255,255,255,0.8);

		font-weight: 500;

	}

	.new_stor_input:-ms-input-placeholder {

		color: rgba(255,255,255,0.8);

		font-weight: 500;

	}



	.new_stor_input:focus, .new_stor_input:focus + .new_stor_btn {

		background-color: rgba(156, 129, 63, 0.25);

		border-color: transparent;

		/*box-shadow: -2px 1px 2px rgba(0, 0, 0, 0.15);*/

	}



	.new_stor_btn {

		width: 92px;

		height: 65px;

		outline: none;

		background-color: transparent;

		border: 2px solid white;

		color: white;

		font-size: 30px;

		font-weight: 600;

		padding: 0 20px;

		/*margin-left: -2px;*/

		border-left-width: 0;

		-webkit-transition: 0.2s;

		-o-transition: 0.2s;

		transition: 0.2s;

		position: relative;

	}



	.new_stor_btn span {

		display: inline-block;

		width: 4px;

		height: 30px;

		position: relative;

		background-color: white;

		top: 4px;

	}



	.new_stor_btn span:nth-of-type(1) {

	

	}

	.new_stor_btn span:nth-of-type(2) {

		transform:rotate(90deg);

		left: -4px;

	}



	.new_stor_btn:hover span {

		background-color: green;

	}



/*GUEST BANNER*/

	.guest_banner {

		background-color: rgba(248, 245, 240, 0.46);

		height: 400px;

		width: 100%;

		margin: 100px 0;

		position: absolute;

	}

	.guest_inner {

		width: 532px;

		margin: 0 auto;

		background-color: #F8F5F0;

	}

	.guest_inner:after {

		content: "";

		display: block;

		clear: both;

	}

	.guest_top_label {

		height: 110px;

		width: 400px;

		float: left;

		border:1px solid #E4E2DD;

		font-size: 25px;

		/*text-align: center;*/

		padding-top: 34px;

		color: #9B9893;

		padding-left: 25px;

	}

	.guest_about {

		height: 110px;

		width: 132px;

		float: left;

		border-right: 1px solid #E4E2DD;

		border-top: 1px solid #E4E2DD;

		border-bottom: 1px solid #E4E2DD;

		font-size: 25px;

		/*text-align: center;*/

		padding-top: 34px;

		color: #9B9893;

		padding-left: 25px;

	}

	.guest_top_label i {

		margin-left: 220px;

		border: 1px solid #C3C1BE;

		border-radius: 50%;

		color: #C3C1BE;

		padding: 2px 7px;

	}

	.guest_top_area {

		height: 290px;

		width: 400px;

		float: left;

		/*border-left: 1px solid #E4E2DD;*/



	}

	.guest_top_film {

		/*border-bottom: 1px solid #E4E2DD;

		border-right: 1px solid #E4E2DD;*/

		height: 50%;

		width: calc(100% / 3);

		float: left;

		position: relative;

	}

	.guest_about_area {

		height: 290px;

		width: 132px;

		float: left;

		/*border-left: 1px solid black;*/

	}

	.guest_about_detail {

		border-right: 1px solid #E4E2DD;

		border-bottom: 1px solid #E4E2DD;

		height: 50%;

	}

	.guest_i {

		font-size: 40px;

		text-align: center;

		padding-top: 20px;

		color: #9B9893;

	}

	.guest_i span {

		display: block;

		font-size: 12px;

	}

	.guest_about_detail label {

		display: block;

		text-align: center;

		width: 100%;

		text-overflow: ellipsis;

		overflow: hidden;

		color: #9B9893;

	}

	.guest_explore {

		height: 100%;

	    background-color: #FA8272;

	    color: white;

	    font-size: 20px;

	    padding: 29px;

	    text-align: center;

	    cursor: pointer;

	    -webkit-transition: background-color 0.2s;

	    -o-transition: background-color 0.2s;

	    transition: background-color 0.2s;

	}

	.guest_explore:hover {

		background-color: #FAAA72;

	}

	.guest_top_film a {

		text-decoration: none;

		overflow: hidden;

		display: block;

		width: 100%;

		height: 100%;

		background-color: black;

	}

	.guest_top_film a:hover img {

		opacity: 0.8;

	}

	.guest_top_film a img {

		max-width: 100%;

		height: auto;

		-webkit-transition: opacity 0.2s;

		-o-transition: opacity 0.2s;

		transition: opacity 0.2s;

		position: relative;

		z-index: 2;

	}

	.guest_top_film a span {

		color: white;

		display: block;

		position: absolute;

		top: 30%;

		font-size: 20px;

		padding: 0 10px;

		z-index: 0;

	}



/*NEWS*/

	.darkv .news_item {

		border-bottom: 10px solid #5F5F5F;

	}

	.news_item {

		border-bottom: 4px solid #F9F8F7;

	}



/*ADMIN*/

	/*GENRES*/

		.um_genres {

			height: 100%;

			overflow-y: auto;

			padding-bottom: 120px;

		}


		.darkv .um_genres h5 {
			color: black;
		}

		.um_genres table {

			display: inline-block;

			margin-right: 10px;

			background-color: snow;

			padding: 2px 4px;

		}



		.um_genres section div {

			background-color: snow;

			padding: 4px;

		}



		.um_genres .g_cat.gc0 {

			background-color: #a99898;

		}

		.um_genres .g_cat.gc2 {

			background-color: gold;

		}
		.um_genres .g_cat.gc3 {
			background-color: #be90d6;
		}
		.um_genres .g_cat.gc4 {
			background-color: #d6ca90;
		}



		.darkv .um_genres h4 {

			color: silver;

		}



		.darkv .um_genres h5 {

			/*color: whitesmoke;*/

		}



		.um_genres section {

			display: inline-block;

			vertical-align: top;

		}



		.g_sub2_grp {

			border-top: 1px dashed;

		}

		.g_sub1_grp {

			border-top: 2px solid;

		}



/*EXPANSION LIST*/

	.page_in_stored {

		/*background-image: url('../images/posters/3/user_stored.jpg');*/

		color: white;

	}



	.l_exp {

		/*overflow: hidden;*/

		position: relative;

		height: 65px;

	}



	.list_exp {

		padding: 0;

		list-style-type: none;

		max-width: 800px;

		margin: 0 auto;

		margin-bottom: 20px;

	}



	.list_exp_shadow {

		box-shadow: -7px 0px 12px -5px rgba(0,0,0,0.45), 7px 0px 12px -5px rgba(0,0,0,0.45);

		/*box-shadow: 25px 0px 25px -25px rgba(0,0,0,0.45), -25px 0px 25px -25px rgba(0,0,0,0.45);*/

	}

	

	.list_exp_noshad {

		box-shadow: none;

	}



	.list_exp_bar {

		background-color: white;

		height: 65px;

		overflow: hidden;

		-webkit-transition: .2s cubic-bezier(.47,0,.87,.55) ;

		-o-transition: .2s cubic-bezier(.47,0,.87,.55) ;

		transition: .2s cubic-bezier(.47,0,.87,.55) ;

		width: 100%;

		z-index: 3;

		position: absolute;

	}



	.list_exp_bar_blue {

		background-color: rgb(109, 130, 156);

	}



	.list_exp_bar_border {

		border-bottom: 3px solid black;

		border-left: 1px solid black;

		border-right: 1px solid black;

	}



	.list_exp_bar_margin {

		margin-bottom: 3px;

	}



	.list_exp_bar.l_exp_off {

		width: 0;

		border: none;

	}



	.list_exp_bar:hover .l_exp_ops_2btn {

		right: -100px;

	}



	.list_exp_bar:hover .l_exp_ops_1btn {

		right: -45px;

	}



	.l_exp_ops {

		position: absolute;

	    background-color: rgba(53, 53, 58, 0.26);

	    opacity: 0.15;

	    height: 100%;

	    

	    -webkit-transition: 0.23s;

	    -o-transition: 0.23s;

	    transition: 0.23s;

	    cursor: pointer;

	    border-left: 5px solid rgba(53, 53, 58, 0.26);

	}



	.l_exp_ops:after {

		content:"";

		display: block;

		clear: both;

	}

	

	.l_exp_ops_1btn {

		width: 65px;

	    right: -65px;

	}



	.l_exp_ops_2btn {

		width: 125px;

		right: -125px;

	}



	.list_exp_bar .l_exp_ops:hover {

		right: -1px;

		opacity: 1;

	}



	.l_exp_ops_btn {

		float: left;

		display: inline-block;

		height: 100%;

		border-right: 1px solid;

		width: 60px;

		cursor: pointer;

		/*background-color: rosybrown;*/

		-webkit-transition: .2s;

		-o-transition: .2s;

		transition: .2s;



		text-align: center;

		padding: 15px 0;

		background-color: #B3CEFF;

		color: #5E6E82;

		font-size: 18px;

		font-weight: 500;

	}



	.l_exp_ops_btn:hover {

		background-color: #E3E7FF;

	}

	

	.l_exp_ops_btn:active {

		transform: scale(0.9);

	}



	.stored_info + .l_exp_ops .edit_plgrp {

		background-color: #E4D9D9;

		color: #B1716E;

	}



	.stored_info + .l_exp_ops .edit_plgrp:hover {

		background-color: #DEDEDE;

	}



	.expand {

		background-color: white;

	    height: 65px;

	    position: absolute;

	    overflow: hidden;

	    -webkit-transition: .23s cubic-bezier(.47,0,.87,.55);

	    -o-transition: .23s cubic-bezier(.47,0,.87,.55);

	    transition: .23s cubic-bezier(.47,0,.87,.55);

	    width: 100%;

	    z-index: 2;

	    opacity: 0;

	    top: 0;

	        

	}



	.list_exp_shadow .expand {

	    box-shadow: -7px 0px 12px -5px rgba(0,0,0,0.45), 7px 0px 12px -5px rgba(0,0,0,0.45);

	}



	.list_exp_bar_blue + .expand {

		background-color: rgb(109, 130, 156);

	}



	.list_exp_active .expand {

		opacity: 1;

		z-index: 4;

	}



	.list_exp_area {

	    overflow: auto;

	    height: calc(100% - 86px);

	}



	.list_exp_bar_stored {

		/*background-color: white;*/

	}



	.stored_info {

		display: inline-block;

		float: left;

		padding: 12px 10px;

		height: 100%;

		width: 100%;

	}



	.stored_info span {

		display: inline-block;

		font-size: 20px;

		width: 65%;

		color: #A0631F;

		text-overflow: ellipsis;

	    white-space: nowrap;

	    overflow: hidden;

	    vertical-align: middle;

	}

	

	.list_exp_bar_blue  .stored_info span {

		color: white;

	}



	.stored_info label {

		font-size: 25px;

		display: inline-block;

		width: 10%;

		color: rgb(241, 238, 224);

	}



	.close_list_ext {

		top: 7px;

		opacity: 0.5;

		display: none;

		position: absolute;

		top: 30px;

		/*opacity: 0;*/

		right: 30px;

		-webkit-transition: .2s;

		-o-transition: .2s;

		transition: .2s;

		cursor: pointer;

		width: 30px;

		padding-left: 13px;

	}



	.list_exp_active .expand .close_list_ext {

		display: inline-block;

		transform: scale(0.7);

	}



	.list_exp_active .expand .close_list_ext:hover {

		transform: scale(1);

	}



	.close_list_ext span:nth-of-type(1) {

		height: 25px;

		width: 3px;

		background-color: black;

		display: inline-block;

		transform:rotate(135deg);

		margin-right: -3px;

		-webkit-transition: 0.5s;

		-o-transition: 0.5s;

		transition: 0.5s;

	}

	.close_list_ext span:nth-of-type(2) {

		height: 25px;

		width: 3px;

		background-color: black;

		display: inline-block;

		transform:rotate(45deg);

		-webkit-transition: 0.5s;

		-o-transition: 0.5s;

		transition: 0.5s;

	}



	.xpand_area {

		height: 100%;

	}



	.expand .expand_h:disabled {

		opacity: 0.1;

	}



	.expand .expand_h {

		position: absolute;

		font-size: 30px;

		opacity: 1;

		text-align: center;

		width: 50%;

		padding-top: 20px;

		display: none;

		border:none;

		background-color: transparent;

		outline: none;

	}



	.list_exp_bar_blue + .expand .expand_h {

		color: white;

	}



	.list_exp_bar_blue + .expand .expand_h:disabled {

		opacity: 0.5;

	}



	.list_exp_active .expand .expand_h {

		display: block;

	}





@media screen and (max-width: 1080px) {

	.cal_title {

		padding: 0;

		font-size: 10px;

	}

}



@media screen and (max-width: 900px) {

	.r_sel_menu {

		width: 130px;

	}

	.hor_area_on .r_selection_zone {

		width: calc(100% - 130px);

	}

	.r_selection_zone {

		width: calc(100% - 130px);

	}

	.rs_op {

		font-size: 16px;

	}

	.char_dark_area_active .char_dark_zone {

	    width: 60%;

	}

	.char_dark_area_active .char_dark_detail {

	    width: 40%;

	}

	.char_dark_topul li a {

		font-size: 19px;

	}

	.graf_left {

		width: 148px;

		-webkit-perspective: 230px;

		transform: scale(1.24) translate(20px, -11px);

	}

	.gvd_top {

		width: 18%;

	}





}

@media screen and (max-width: 760px) {

	.char_dark_area_active .char_dark_zone {

	    width: 100%;

	}

	.char_dark_area_active .char_dark_detail {

	   display: none;

	}

	.gvd_top {

		width: 18%;

		right: 2%;

	}



}

@media screen and (max-width: 700px) {

	

	.u_menu_grp {

		left: 0;

	}



	.hor_area {

		left: 40%;

		width: 60%;

	}



	.hor_area_on {

	    left: 40px;

	    width: 90%;

	}



	.r_sel_menu {

	    width: 250px;

	}



	.r_selection_zone {

	    width: calc(100% - 250px);

	}



	.rs_op {

	    font-size: 20px;

	}



	.hor_area_on .r_selection_zone {

	    width: 100%;

	}



	.u_menu_grp_sm + .selection_change_part .r_sel_menu {

		display: none;

	}



	.u_menu_grp_sm + .selection_change_part .hor_area {

		left: 10%;

	}

	

	.u_menu_grp_sm + .selection_change_part .rsel_area {

		width: 100%;

	}



	.rsel_area h3 {

	    margin-top: 45px;

	    font-size: 20px;

	    margin-bottom: 5px;

	}



	.r_sel_menu {

		padding-top: 65px;

	}



	.char_dark_topul li a {

	    font-size: 12px;

	}



	.graf_v_zone {

	    margin-top: 45px;

	}



	.page_label {

		left: 40%;

	}

	.gvd_top {

		height: 150px;

		width: 22%;

	}

}



@media screen and (max-width: 540px) {

	.rsel_area h3 {

	    margin-top: 60px;

	    font-size: 14px;

	}



	.filter_media_zone {

		margin-top: 20px;

	}



	.char_dark_area {

		margin-top: 60px;

		height: calc(100% - 60px);

	}



	.graf_v_zone {

	    margin-top: 60px;

	}



	.pl_ul {

		margin: 60px auto 0 auto;

	}



	.exp2_target {

		font-size: 12px;

		overflow: hidden;

		text-overflow: ellipsis;

	}



	.rsel_cal {

		margin-top: 60px;

	}



	.cal_title span {

		display: none;

	}



	.cal_title i {

		margin-left: 5px;

		font-size: 0.7em;

	}



	.user_sa {

		margin: 2px 7% 20px 7%;

		opacity: 0;

	}



	.u_menu_grp_sm + .selection_change_part .hor_area {

	    left: 0%;

	}



	.hor_area_on {

	    left: 40px;

	    width: 100%;

	}



	.u_menu_grp {

	    left: -100%;

	    -webkit-transition: left 0.2s ease-out;

	    -o-transition: left 0.2s ease-out;

	    transition: left 0.2s ease-out;

	}



	.u_menu_grp.u_menu_grp_sm_on {

		left: 0%;

	}



	.nav_menu {

	    display: inline-block;

	}



	.seen_list_on li {

	    width: 100%;

	    margin-left: 0%;

	 }



	 .seen_list li label {

	 	position: relative;

	 }



	 .seen_list li label input:checked + a + .seen_list_sm {

	 	width: 35%;

	 	right: -65%;

	 	-webkit-transition: right 0.2s, width 0.2s;

	 	-o-transition: right 0.2s, width 0.2s;

	 	transition: right 0.2s, width 0.2s;

	 }



	 .seen_list_display div, .seen_list_display span:nth-of-type(2) {

	 	display: none;

	 }



	 .graf_left {

	 	display: none;

	 }



	 .graf_right {

	 	width: calc(100% - 90px);

	 }

	 .gvd_top {

	 	width: 26%;

	 }

}



@media screen and (max-width: 500px) {

	.graf_v_detail {

		display: none;

	}

	.graf_v_area {

		height: calc(100% - 40px);

	}

	.back_login_page {

		padding: 60px 0% 0 0%;

	}

}



@media (max-height: 650px) {

	.rsel_area h3 {

		margin-top: 8px;

		opacity: 0;

	}

	.filter_media_zone {

		margin-top: 25px;

	}

}