/*=================================
FONTS  
=================================*/
@font-face {
	font-family: 'kord';
	src: url('/_fonts/CircularStd-Book.otf') format("opentype");
}


/*=================================
CORE VARS  
=================================*/
:root{
	--logo: url(/_images/logo_dark.svg);
	--background: #F0EBF4;
	--background-bw: #fff;
	--text-color: #04215a;
	--text-color-bw: #000;
	--text-color-title: #E64398;
	--text-link: #2196f3;
	--text-link-mild: #7997d2;
}
.dark:root{
	--logo: url(/_images/logo.svg);
	--background: #272727;
	--background-bw: #000;
	--text-color: #F0EBF4;
	--text-color-bw: #fff;
	--text-color-title: #E64398;
}


/*=================================
CORE  
=================================*/
*:focus{outline: none;}

html, body{
	width: 100%; height: 100%; margin: 0; padding: 0; background: var(--background); color: var(--text-color);
	font-family: kord, helvetica, arial, serif; line-height: 1.6em; -webkit-font-smoothing: antialiased;
}
html.dark .inverted,
html.invert{filter: invert(1) !important;}

h1, h2, h3, h4, h5, h6{margin: 0; padding: 0; font-weight: normal;}
h1, .h1{font-size: 30px; /*text-transform: uppercase;*/ margin-bottom: 40px; position: relative;}
h2, h3{font-size: 16px; font-weight: bold; text-transform: uppercase; margin-bottom: 10px;}
h2{color: var(--text-color-title); margin-top: 40px;}
h2.clean{margin-top: 0;}
h3 a{color: var(--text-color-title); text-decoration: none;}
h5{font-size: 20px; line-height: 1.2em;}
h6, .h6{font-size: 10px; line-height: 1.2em; margin-top: 3px; position: relative;}
.h6.master:after{
	/*transform: scale(1);*/ position: absolute; top: -1px; right: -16px; content: '\1F346'; animation: erected_master 5s infinite;
	transform: scale(1) rotate(-100deg);
}
@keyframes erected_master{
	0%, 30%{}
	31%, 80%{transform: scale(2); top: -4px; right: -20px;}
	81%, 100%{}
}

h1 .userlabel{display: block; position: relative;}
h1 .userlabel:before,
h1 .userlabel:after{font-size: 10px; background: var(--text-color); color: var(--background); border-radius: 2px; padding: 2px 8px; text-transform: uppercase; line-height: 0; margin-top: 0px;}
h1 .userlabel:after{background: var(--text-color-title);}
h1 .userlabel.paying:before{position: relative; content: 'Paying Subscriber';}
h1 .userlabel.intrial:before{position: relative; content: 'In Trial'; background: #4caf50;}
h1 .userlabel.lapsed:before{position: relative; content: 'Subscription Lapsed'; background: #999;}
h1 .userlabel.cancelled:after{position: relative; content: 'Cancelled'; background: #999;}
h1 .userlabel.hidden{display: none;}


a{color: var(--text-link);}
a.block, a.button{background: var(--text-color); color: var(--background); padding: 2px 4px; text-decoration: none; border-radius: 3px; cursor: pointer;}
a.block.red, a.button.red{background: #f44336;}
a.block:hover,
a.button:hover{opacity: .7;}

table{border: none; border-spacing: 0; margin-left: -10px; width: 100%; line-height: 1.3em;}
.box table{margin-left: 0;}
table th,
table td{padding: 10px; margin: 0; position: relative;}
table th{
	font-weight: normal; text-align: left; text-transform: uppercase;
	background-image: linear-gradient(to right, rgba(0, 0, 0, .3) 25%, transparent 0%);
    background-position: bottom; background-size: 4px 1px; background-repeat: repeat-x;
}
table th.section{
	font-weight: 700; background: none; font-size: 12px;
}
table.tree .rec{background: #dadde2;}
table tr:hover td,
table.tree tr:hover td{background-color: rgba(4, 33, 90, .1);}

table.href td{cursor: pointer;}

table .thumb_small{float: left; width: 21px; margin-right: 10px; box-shadow: 0 0 3px #999;}

ul{margin: 0; padding: 0;}
ul.default{margin: 10px 20px; padding: 0;}

ul.cards{margin: 0; padding: 0; list-style: none;}
ul.cards li{float: left; margin: 0 20px 20px 0; border: 1px solid #0b175b; box-shadow: 3px 3px #0b175b; padding: 15px; cursor: pointer;} 
ul.cards h3{font-size: 40px; text-align: center; text-transform: none;}
ul.cards h4{text-align: center;}

hr{
	margin: 30px 0; opacity: 0.3; border: none; height: 1px;
    background-image: linear-gradient(to right, var(--text-color) 25%, transparent 0%);
    background-position: bottom; background-size: 4px 1px; background-repeat: repeat-x;
}

.disabled{position: relative;}
.disabled::after{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: '';}
.update .disabled{opacity: .7;}

.pagination .disabled::after{top: 8px; content: '...';}
.recset_stats{position: relative;}
.recset_stats .totalrecs{float: left; top: 44px; font-size: 23px; position: relative;}
.recset_stats .totalrecs:after{position: absolute; content: 'Records'; padding-left: 10px;}

.main_switch{position: relative;}
.main_switch .switch{position: absolute; right: 0; top: -100px;}


/*=================================
FORM ELEMS  
=================================*/
/* General */
input, select, textarea{-webkit-appearance: none;}

input[type='text'], 
input[type='password'],
textarea,
select, 
.input{color: var(--text-color); font-size: 25px; width: 383px;/*width: 400px;*/ padding: 10px 0; border: none; border-bottom: 1px solid var(--text-color); font-family: kord, helvetica, arial, serif; background: transparent;}


.input{height: calc(53px - 21px);}
select{border-radius: 0; cursor: pointer;}

textarea{width: calc(100% - 40px); height: 300px; border: none;}
textarea.short{height: 100px;}

.service .searchbox input{background: none; height: calc(53px - 21px); border: none; border-bottom: 1px solid var(--text-color); width: 220px;}
.service .searchbox input:hover,
.service .on .searchbox input{background: var(--background-bw); color: #04215a;}


.update input[type='text'],
.update input[type='password'],
.update textarea,
.update select{border: none; border-radius: 5px; color: var(--text-color); background: var(--background-bw); padding: 10px 20px;}

.update textarea.short{height: 300px;}

/* Text */
input[type='text']::placeholder{color: #739AAA; font-size: 13px;}
input[type='text'].small,
	.input.small{width: 70px;}
input[type='text'].mid,
	.input.mid{width: 150px;}
select.small{width: 100px;}
input[type='text'].long,
	.input.long{width: 400px;}
input[type='text'].full,
	select.full,
	.input.full{width: calc(100% - 40px);}


select.thin,
input.thin[type='text']{font-size: 10px; padding: 5px 10px; width: 200px;}

/* Checkbox / Radio */
input[type='checkbox'],
input[type='radio']{position: relative; cursor: pointer; width: 20px; height: 20px; padding: 0; border: 3px solid var(--text-color); float: left; margin-right: 10px; margin-top: -1px;}
input[type='radio']{border-radius: 50%;}
.update input[type='checkbox'],
	.update input[type='radio'],
	.href input[type='checkbox'],
	.href input[type='radio']{cursor: pointer;}
input[type='checkbox']:checked::before,
input[type='radio']:checked::before{position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; background: var(--text-color); content: '';}
input[type='radio']:checked::before{border-radius: 50%;}

/* Checkbox >> Slider */
label.switch{position: relative; display: inline-block; width: 60px; height: 34px;}
label.switch.small{width: 51px; height: 24px;}
label.switch.small{width: 30;}

label.switch .slider{display: block; width: 100%; height: 100%;}
label.switch .slider:before{position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; width: 100%; height: 100%; transition: .4s; background-color: var(--text-color); opacity: .1;}
label.switch .slider:after{position: absolute; content: ''; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: #fff; transition: .4s;}
label.switch.small .slider:after{height: 16px; width: 16px;}

label.switch .slider.round:before{border-radius: 34px;}
label.switch .slider.round:after{border-radius: 50%;}

input:checked + .slider:before{background-color: #15841a; opacity: 1;}
input:checked + .slider:after{transform: translateX(26px);}
.orange input:checked + .slider:before{background-color: #FF9800;}

label.switch input{opacity: 0; width: 0; height: 0;}
.update label.switch .slider{cursor: pointer;}

label.small{font-size: 10px; text-transform: uppercase;}

/* Buttons */
input[type='submit'],
input[type='button'],
button.button,
div.button,
.buttonlike{
	transition: all .2s; cursor: pointer; margin-top: 6px;
	background: var(--text-color); font-size: 20px; color: var(--background); border-radius: 5px; padding: 9px 24px;
	text-transform: uppercase; font-size: 15px;
	border: 0;
	}
	input[type='submit']:hover,
	input[type='button']:hover,
	div.button:hover,
	.buttonlike:hover{opacity: .7;}
input[type='submit'].red,
input[type='button'].red{background: #bb1e13;}
input[type='submit'].empty,
input[type='button'].empty{background: transparent; border: 1px solid var(--text-color); color: var(--text-color);}
input[type='submit'].empty:hover,
input[type='button'].empty:hover{background: var(--text-color); color: var(--background);}

.allsmall,
.allsmall input,
.allsmall select,
.smalltext,
input.smalltext{font-size: 10px;}

.allsmall h3{font-size: 12px;}
.allsmall .box{padding: 10px; padding-bottom: 0; margin-bottom: 20px;}

.allsmall select{padding: 5px 10px;}

form.updatable input[type='submit']{display: none; margin-top: 50px;}
.update form.updatable input[type='submit']{display: block;}
input[type='submit'].loading{background: #666;}


input.avatartext{background-size: 0;}
.update input.avatartext{
	background-size: 50px 50px;
	background-position: left;
	padding-left: 60px;
	background-repeat: no-repeat;
/* 	position: relative; */
}
/* .update input.avatartext:before{position: absolute; width: 50px; height: 100%; top: 0; left: 0; background: #000; content: '';}
 */
.update input.avatartext.empty{
	padding-left: 20px;
	width: 262px;
	background-repeat: no-repeat;
	background-size: 0;
}

.update .newrec{position: absolute; top: 0; right: 0;}



form{/*margin-top: 50px;*/}
form .form_elem{margin-right: 15px; margin-bottom: 25px;}
form .form_elem h6{line-height: 1.8em;}
form .form_elem h6::before{top: 3px;}

form label, .form_elem label{display: block; margin-bottom: 6px; font-size: 10px; text-transform: uppercase;}
form .profile_main label.switch{margin-bottom: -10px;}
.filters_container label{color: #fff;}
form h5{color: #A1C3D1;}


/*form .form_elem h5{margin-right: 5px;}*/


input.auto,
select.auto{width: auto;}



.icn_newwindow{background-image: url(/_images/icn_newwindow.svg); background-repeat: no-repeat; background-size: 13px; background-position: right; padding-right: 14px;}



/*=================================
PAGE ELEMS  
=================================*/
/*#background{width: 100%; height: 100%; position: relative; overflow: hidden; background: #1d76d2;}*/
#wrapper{min-height: calc(100% - 20px - 60px); position: relative; padding-top: 20px;}
.wrap_max{margin: 0 auto; width: calc(100% - 80px); max-width: calc(1000px - 80px); padding-right: 40px; padding-left: 40px;}
.wrap_max.full{padding-bottom: 100px;}

#head{padding-bottom: 20px;}
#head .logo{
	float: left; cursor: pointer;
	width: 104px; height: 78px; display: inline-block; margin-left: -10px;
	background-image: var(--logo); background-repeat: no-repeat; background-size: 100%;
}

/* BurgerMenu */
#head .menu_icon_action{display: none; cursor: pointer; position: absolute; top: 20px; right: 30px; z-index: 1050; width: 50px; height: 45px;}
#head .menu_icon{
	display: none; width: 30px; height: 2px; position: absolute; top: 42px; right: 40px; z-index: 1050; background: var(--text-color);;
	transition: background .2s ease-out;
	}
	#head .menu_icon:before,
	#head .menu_icon:after{
	  content: ''; width: 100%; height: 100%; position: absolute; background: var(--text-color); top: 8px;
	  transition: all .2s ease-out;
	}
	#head .menu_icon:after{top: -8px;}

	#head .menu_icon.on{background: transparent;}
	#head .menu_icon.on:before{transform: rotate(-45deg); top: 0;}
	#head .menu_icon.on:after{transform: rotate(45deg); top: 0;}

/* Menu */
#head .nav{float: right; padding: 7px 0 0 40px; margin-right: -10px; font-weight: 200;}
#head .nav ul{list-style: none; text-transform: uppercase; font-weight: 300; background: var(--background); border-radius: 5px; /*box-shadow: -15px 20px 10px 10px var(--background);*/}
#head .nav ul li{position: relative; float: left; margin-left: 1px; cursor: pointer; padding: 5px 10px; background: var(--background); border-radius: 5px;}
#head .nav ul a{text-decoration: none; color: var(--text-color);}

	#head .nav ul ul{display: none; position: absolute; top: 35px; padding-top: 1px; right: 0; width: 140px; z-index: 200;}
	#head .nav ul li:hover ul{display: block;}
	#head .nav ul ul li{width: calc(100% - 20px); margin-left: 0; float: none; text-align: right;}
		#head .nav ul ul ul{display: none; position: absolute; left: -141px; top: -1px;}
		#head .nav ul li:hover ul ul{display: none;}
		#head .nav ul ul li:hover ul{display: block;}

#head .nav ul li:hover{background: var(--text-color);}

#head .nav ul li:hover,
#head .nav ul li:hover a,
#head .nav ul li:hover li:hover,
#head .nav ul li:hover li:hover a,
#head .nav ul li:hover li:hover li:hover,
#head .nav ul li:hover li:hover li:hover a{color: var(--background);}

#head .nav ul li:hover li,
#head .nav ul li:hover li a,
#head .nav ul li:hover li:hover li,
#head .nav ul li:hover li:hover li a{color: var(--text-color);}

#head .nav #nav_profile b.avatar{width: 20px; height: 20px; display: block; background-size: cover; border-radius: 80px; border: 2px solid var(--text-color);}


/* Breadcrumbs */
#breadcrumbs{padding-bottom: 10px; font-size: 13px; text-transform: uppercase; color: var(--text-link-mild);}
#breadcrumbs.wrap_max{}
#breadcrumbs ul{list-style: none;}
#breadcrumbs ul li{float: left; margin-right: 10px; padding-right: 10px; position: relative;}
/*#breadcrumbs ul li img{display: none;}*/
#breadcrumbs .tiny_thumb{width: 20px; height: 20px; margin-right: 7px; box-shadow: none;}
#breadcrumbs ul li a{color: var(--text-link-mild); text-decoration: none;}
#breadcrumbs ul li a:hover{color: var(--text-color);}
#breadcrumbs li::after{content: '.'; position: absolute; top: 0; right: 5px;}
/*#head .nav ul a:hover{text-decoration: underline;}*/


.qstats{display: none; font-size: 10px; margin-bottom: 40px;}
.qstats.on{display: block;}
.qstats h2{font-size: 50px; margin-top: 20px; font-weight: normal; color: var(--text-color);}
.qstats .elem{float: left; margin-right: 40px; margin-bottom: 40px;}

.dyn_table{display: none;}

.update #player,
.update .player_btn{display: none;}
#player{padding: 30px 0;}
.player_btn{position: relative; width: 50px; height: 50px; background: rgba(22, 0, 94, .8); color: #f2eaf4; font-size: 25px; border-radius: 150px;}
.player_btn::before{position: absolute;}
/*.player_btn::after{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}*/
.player_btn.play{cursor: pointer; display: none;}
.player_btn.play:hover{background: rgba(22, 0, 94, 1);}
.player_btn.on{background: rgb(21, 132, 26, .8); cursor: pointer;}
.player_btn.on:hover{background: rgb(21, 132, 26, 1);}
.player_btn.play::before{top: 14px; left: 15px; content: '\25ba';}
.player_btn.play.on::before{font-size: 13px; content: '\2590\A0\258C'}
.player_btn.back10{cursor: pointer;}
.player_btn.back10::before{top: 14px; left: 15px; content: '\21ba';}
.player_btn.back10:hover{background: rgba(22, 0, 94, 1);}
.player_btn.inst_on.on::before{font-size: 17px; top: 16px; left: 12px; content: 'ON';}
.player_btn.inst_off{background: rgba(22, 0, 94, .8);}
.player_btn.inst_off.on::before{font-size: 17px; top: 16px; left: 9px; content: 'OFF';}

.graph{background: #00133a; padding: 50px 5%;}
.graph.light{background: #d2c5db;}
.graph h3{color: var(--background);}
.graph.light h3{color: var(--text-color);}
.graph.clear{background: transparent;}
.graph.slim{margin-top: 0; padding-top: 0;}
.graph.superslim{margin-top: 0; padding: 0;}
.graph .graph{max-width: 1200px; margin: auto;}

.hdd{width: 100%; height: 40px; position: relative;}
.hdd .tiny_thumb{position: absolute; z-index: 100;}
.hdd.embeded .used,
.hdd.embeded .total{margin-left: 10px; position: relative;}
.hdd.embeded .used::before{position: absolute; content: attr(data-count); left: 43px; top: 8px; font-size: 13px;}
.hdd.total{height: 100%; background: #0a175b;}
.hdd.used{width: 0; height: 100%; background: #2196F3; transition: width 1s;}

.artwork{width: 200px; height: 200px; background-size: cover; background-position: center;}
.artwork.small{width: 100px; height: 100px;}
ul .artwork{box-shadow: 0 0 5px #848484;}

.dragdrop{position: relative;}
.dragdrop input{display: none;}
.file_drop{position: relative; padding: 10%; width: calc(100% - 20%); height: calc(100% - 20%); text-align: center; background-size: cover; background-position: center; /*cursor: pointer;*/ box-shadow: 0 0 5px #848484;}
.file_drop h3{display: none; filter: invert(100%); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
html.dark .file_drop h3{filter: invert(50%);}
.update .file_drop{background-color: rgba(4, 33, 90, .5);}
.update .file_drop h3{display: block;}
.update .file_drop.hover{background-color: rgba(4, 33, 90, .7);}

.update .dragdrop.artwork.elem{margin-bottom: 100px;}

#footer{background: #144b9c; height: 60px; color: #fff; line-height: 1.3em;}
#footer a,
#footer b{color: #ffeb3b; text-decoration: none;}

#screenlock{display: none; position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4);}

#pop{display: none; position: fixed; z-index: 1000; top: 10px; left: 10px; background: #4caf50; color: #fff; padding: 3px 10px; border: 1px solid #09690d; font-size: 12px;}
#pop.bad{background: #b71d1d; border-color: #5a0303;}
#pop.process{background: #ffda18; border-color: #5a0303; color: #000;}


ul.albums{padding: 0; margin: 0; list-style: none;}
ul.albums li{position: relative; float: left; margin: 0 20px 60px 0; padding: 10px; width: 180px; height: 180px; background-color: rgba(4, 33, 90, .1); /*background-size: 100%; */background-position: center;}

/*transition: background-size .1s ease-in;}*/
/*ul.albums li:hover{background-size: 102%; transition: background-size .1s ease-in;}*/
/*ul.albums li div{background: rgba(255, 255, 255, .5); color: #000; padding: 5px;}*/
ul.albums li div{position: absolute; top: 101%;}
ul.albums li div h6{margin-top: 5px;}

ul.albums.lists{margin-bottom: 50px;}
ul.albums.lists li{float: none; margin: 0 20px 20px 0; padding: 10px; width: 60px; height: 60px; border-radius: 10px;}
ul.albums.lists.inline li{float: left; width: 80px; height: 80px;}
ul.albums.lists.wide li{width: 260px; height: 80px; position: relative;}
ul.albums.lists.wide li:after{position: absolute; width: 20px; height: 100%; top: 0; right: -30px; content: ''; background-color: rgba(4, 33, 90, .1); border-radius: 10px 0 0 10px;}

.new ul.albums li{background-color: rgba(255, 255, 255, .5);}
.new ul.albums.lists.wide li:after{background-color: rgba(255, 255, 255, .5);}


/*=================================
CLASSES  
=================================*/
.left{float: left;}
.right{float: right;}
.clear{clear: both;}

.href{cursor: pointer;}

.center{text-align: center;}
.tright{text-align: right;}

.box{
	color: #efecf4;
	padding: 20px; padding-bottom: 10px; background: #817b86; /*background: var(--text-color);*/ margin-bottom: 40px;
	/*border: 1px solid #04215a; border-style: solid none;*/
	/*background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' heig… fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E);*/
}
.box input{filter: invert(1) contrast(3.5);}
.box input[type=submit]{font-weight: bold;}
.box input.datepicker,
.box.light{filter: none; color: var(--text-color); background: rgba(4, 33, 90, .1); color: var(--text-color);}
.box.light input{filter: none;}
.box.tight{margin-bottom: 0; padding: 10px;}


/* .box input, .box label, .box select{color: #efecf4;} */

.form_update,
.update .form_view, 
.filters_container,
.new .update,
.hidden{display: none;}

.no_br,
.no_br td,
.no_br div{white-space: nowrap;}

.filters_container.on{display: block;}


.slider{position: relative;}
.slider .slide_page{display: none;}
.slider .slide_page.on{display: block;}


/*.update .form_update{display: block;}*/

.off{filter: opacity(.5);}
/* position: relative;} */
/* .off:after{position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; z-index: 100;} */
.red{color: #bb1e13;}
.green{color: #239227;}
.alert{position: relative; padding-left: 30px;}
.alert::before{position: absolute; top: 0; left: 0; background: #bb1e13; color: #fff; content: '!'; padding: 2px 10px; border-radius: 30px;}
.alert a{text-decoration: none; color: #1a529a;}
h6.alert{padding-left: 18px;}
h6.alert::before{font-size: 8px; line-height: 1em; padding: 2px 5px; border-radius: 30px; /*top: 3px;*/}
h6.alert.i::before{background: #04215a;}
.bullet{position: relative; margin-left: 12px;}
.bullet::before{position: absolute; top: -3px; left: -14px; content: '\2022';}
.bullet.sub:before{top: -1px; left: -13px;}
table .bullet::before{top: 8px; left: -5px;}
h6 .bullet::before{top: 0px; left: -9px;}
.bullet.orange::before{color: #FF9800;}
.bullet.green::before,
	.bullet.DEPLOYING::before,
	.bullet.POWERED_ON::before{color: #4caf50;}
.bullet.red::before,
	.bullet.SERVER_NOT_FOUND::before{color: #F44336;}
.bullet.gray::before,
	.bullet.POWERED_OFF::before{color: #9e9e9e;}


.status{background: var(--text-color); display: inline-block; color: var(--background); border-radius: 15px; padding: 2px 15px;}
.status_red{background: #F44336;}
.status_green{background: #4caf50;}


.bold{font-weight: bold;}

.block_btn{border: 1px solid #0a175b; padding: 5px; display: inline-block; border-radius: 3px; cursor: pointer; margin-right: 15px;}
.block_btn:hover,
.block_btn.on{background: #0a175b; color: #f0ebf4;}


.p{padding-top: 20px;}
.pp{padding-top: 50px;}
.pb{padding-bottom: 150px;}
.pr5{padding-right: 50px;}
.pl{padding-left: 15px;}
.pl2{padding-left: 20px;}
.pl3{padding-left: 30px;}

.m{margin-top: 20px !important;}
.m1{margin-top: 30px !important;}
.m2{margin-top: 40px !important;}
.mm{margin-top: 50px !important;}
.ml{margin-left: 20px !important;}
.ml1{margin-left: 10px !important;}
.ml2{margin-left: 30px !important;}
.ml4{margin-left: 40px !important;}
.mr{margin-right: 20px !important;}
.mr5{margin-right: 50px !important;}
.mb05{margin-bottom: 5px !important;}
.mb{margin-bottom: 15px !important;}
.mb1{margin-bottom: 10px !important;}
.mb2{margin-bottom: 20px !important;}
.mb3{margin-bottom: 30px !important;}

.br{border-right: 1px solid rgba(4, 33, 90, .1);;}

.beta{position: relative; padding-right: 20px;}
.beta::after{position: absolute; content: '\03b2'; text-transform: none; background: #04215a; font-size: 9px; color: #F0EBF4; padding: 0px 7px; margin: 0px 0 0 5px; border-radius: 50px;}
.beta.incomplete::after{color: #04215a; background: #fff;}
h1.beta::after{font-size: 9px; line-height: 1.2em; padding: 5px 7px; margin: -5px 0 0 5px;}
.beta.betaoff::after{opacity: .5;}

.platform{position: relative; padding-left: 30px;}
div.platform{}
.platform::before{position: absolute; content: ''; left: 5px; top: 0; width: 25px; height: 100%; background-repeat: no-repeat; background-size: 17px;}
td.platform::before{top: 10px;}
.platform.iOS::before{content: ''; left: 7px;}
.platform.Android::before{background-image: url(/_images/android_logo.svg);}
div.platform.Android::before{top: 3px;}
.platform.amazon-fireos::before{background-image: url(/_images/amazon_logo.svg);}
div.platform.amazon-fireos::before{top: 5px;}
.platform.cordova-fireos::before{background-image: url(/_images/amazon_logo.svg);}
.platform.cordova::before{background-image: url(/_images/logo_cordova.png); top: 12px; background-size: 16px;}
.platform.KordSim::before{background-image: url(/_images/logo.svg); top: 3px; background-size: 36px;}

html.dark .platform::before{filter: invert(1);}
html.dark .platform.iOS::before{filter: invert(0); color: #fadca2;}


/*h1 img{float: left; width: 37px; margin-right: 10px; box-shadow: 0 0 5px #666;}*/


.tiny_thumb{width: 40px; height: 40px; background-size: cover; background-position: center; float: left; box-shadow: 0 0 5px #666; margin-right: 15px;}
.tiny_thumb.circle{border-radius: 100px; border: 1px solid #f0ebf4; box-shadow: 0 0 0 3px #0c175a;}
.dyn_table .artist{height: 42px; vertical-align: middle; display: table-cell;}

.record{padding-top: 10px; height: 20px; overflow: hidden;}
.record.full{padding-top: 0; height: auto; overflow: visible;}


.ui-menu-item .tiny_thumb.circle{border: 1px solid #f0ebf4; box-shadow: 0 0 0 2px #0c175a;}
.ui-menu-item .tiny_thumb{width: 20px; height: 20px;}
.ui-menu-item .record{padding-top: 0; height: auto;}



.trmail{position: relative; padding-right: 20px;}
.trmail::after{position: absolute; content: 'T'; text-transform: none; background: #04215a; font-size: 9px; color: #F0EBF4; padding: 0px 7px; margin: 0px 0 0 5px; border-radius: 50px;}
h1.trmail::after{font-size: 14px; padding: 5px 11px; margin: -5px 0 0 10px;}

.elems{padding-top: 20px; margin-bottom: 40px;}
.elems .elem{margin-bottom: 20px;}
.elems .inline{float: left; margin: 0 40px 20px 0; position: relative;}
.elem h3.left{margin-right: 20px;}

.form_elem{margin: 5px 20px 5px 0;}

/*
.radio label,
.checkbox label{margin-top: 4px;}*/

.checkbox_flex .checkbox{display: inline-flex;}

.radio input + label,
.checkbox input + label{margin-right: 20px; float: left;}

.update .radio input + label,
.update .checkbox input + label,
.href.radio input + label,
.href.checkbox input + label{cursor: pointer;}


.loading_elem{position: relative; text-transform: uppercase; font-size: 12px; line-height: 1; padding-left: 12px;}
.loading_elem::before{position: absolute; left: 0; top: 0; width: 5px; height: 5px; background: #d3562d; content: ' '; animation: loading_elem .4s infinite;}

.loading{position: relative;}
.loading::after{position: absolute; left: 0; top: 0; width: 5px; height: 5px; background: #d3562d; content: ''; animation: loading_elem .4s infinite;}
.loading h6{padding-left: 10px; text-transform: uppercase; color: #7997d1;}

.glow{animation: loading_elem 1.5s infinite; color: #bb1e13;}

@keyframes loading_elem{
	0%, 49%{opacity: 0;}
	50%, 100%{opacity: 1;}
}


.service{}
.service h1,
.service h2,
.service h3{float: left; margin-right: 10px; line-height: 1.3em; /*margin-bottom: 10px;*/}

.service .update{padding-top: 3px; cursor: pointer; float: left; position: relative;}
.noeditbtn .service .update{display: none;}
.service .update::after{position: absolute; top: 7px; left: 0; content: '\270E'}
.service .update.h2::after{top: 16px;}
.service .update:hover::after{position: absolute; top: 5px; left: 0; content: '\270F'}
.service .update.h2:hover::after{top: 15px;}
/*✏*/
.update .service .update{color: #d8177b;}
.service input{padding: 3px 15px; font-size: 10px; background: transparent; border: 1px solid var(--text-color); color: var(--text-color);}
.service input[type='checkbox']{padding: 0; border: 3px solid var(--text-color);}
	
.service input:hover,
.service .on input{background: var(--text-color); color: var(--background);}
.service .filter, .page_nav{float: right;}
.service .filter ul, .page_nav ul{margin: 0; padding: 0; list-style: none; padding-top: 12px;}
.service .filter ul li, .page_nav ul li{float: left; margin-left: 20px; text-transform: uppercase; font-size: 13px;}
.service .filter ul li a{text-decoration: none; color: var(--text-link-mild);}
.service .filter ul li.on a,
.service .filter ul li:hover a,
.page_nav{color: var(--text-link-mild);}
.page_nav ul li.on,
.page_nav ul li:hover{color: var(--text-color); cursor: pointer;}

.page_nav ul li.on,
.page_nav ul li:hover{}

.note::before{content: '!'; position: absolute; top: 0; left: -8px; background: #bd0000; padding: 0px 10px; border-radius: 30px; color: #fff; font-size: 13px; font-style: normal; font-weight: bold;}
.note{position: relative; margin-top: 30px; font-style: italic; padding-left: 29px;}


.rec_control{position: absolute; top: 0; left: 0; margin: 0; padding: 0; list-style: none; width: 90px; height: 20px; display: none;}
.update .rec_control{display: block;}
.rec_control li{
	margin-right: 5px; float: left; position: relative;
	border-radius: 50%; border: 2px solid #000; font-weight: bold; font-size: 35px; width: 20px; height: 20px; text-align: center; line-height: 0;
    cursor: pointer; opacity: .2; transition: opacity .5s;
}
.rec_control li:hover{opacity: 1;}
.rec_control li:before{position: absolute; top: 9px; left: -2px;}
.rec_control li.up:before{content: '\2023'; transform: rotate(-90deg);}
.rec_control li.down:before{content: '\2023'; transform: rotate(90deg);}
.rec_control li.delete{border-color: #bb1e13; color: #bb1e13;}
.rec_control li.delete:before{content: 'x'; top: 8px; left: 5px; font-size: 20px;}
.rec_control li.sort_handle:before{content: '\21F5'; font-size: 15px; top: 10px; left: 4px;}


.label{background: #0a135d; color: #fff; font-size: 8px; line-height: 1em; position: absolute; top: 0; left: 0; padding: 3px 4px;}


.pagination{height: 100px; position: relative;}
.pagination ul{margin: 0; padding: 0; list-style: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.pagination li{float: left; margin: 10px 5px; padding: 7px 13px; border-radius: 50px; cursor: pointer;}
.pagination li.active{background: #04215a; color: #fff;}
.pagination li:first-child,
.pagination li:last-child{display: none;}


ul.href, ul.countries, ul.groups{padding: 0; margin: 0; list-style: none;}
ul.href li, ul.countries li, ul.groups li{float: left; padding: 10px 15px; margin-right: 15px; background: rgba(4, 33, 90, .1); cursor: default;}
.update ul.href li:hover{background: rgba(4, 33, 90, .3); transition: background .2s; cursor: pointer;}
ul.href li.on{background: rgba(4, 33, 90, .5); transition: background .2s;}
ul.countries{margin-top: 15px;}
ul.countries li, ul.groups li{width: 175px; float: left; height: 20px; overflow: hidden; margin-bottom: 10px; background: none;}
.geotargeting ul.countries li, ul.groups li{width: auto;}
ul.countries li.on{background: rgba(4, 33, 90, .5); color: #fff;}

ul.countries .remove{font-size: 10px;}

.geo_rest .smalltext{float: left; margin-right: 10px;}
.geo_rest input.smalltext{top: -5px; position: relative;}


.preview{width: 375px; height: 480px; position: relative; overflow: hidden; padding-bottom: 50px; position: relative; background-color: #000; background-repeat: no-repeat; background-size: cover; background-position: center top;}
.preview .logo{position: absolute; z-index: 1000; top: 15px; left: 20px; content: ''; background: url(/_images/logo_yellow.svg) no-repeat; width: 20px; height: 37px;}
.preview div{background-size: cover; background-position: center; background-repeat: no-repeat;}

#btn_linkCampAsst input{margin-top: 38px;}

#dyn_promoAssets .elem{width: 200px;}
#dyn_promoAssets .elem .dragdrop{width: 100%;}
#dyn_promoAssets input{width: calc(100% - 40px);}

ul.prev_recs{margin: 0; padding: 0; list-style: none;}

ul.prev_recs li{
	float: left; position: relative; margin: 0 30px 30px 0; padding: 20px; color: #fff; cursor: pointer;
	position: relative; width: 150px; height: 250px; padding-bottom: 20px; overflow: hidden;
}
ul.prev_recs li .promoname{position: absolute; bottom: 0; right: 0; padding: 10px; text-shadow: 0 0 5px #000;}
ul.prev_recs li .bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; background-repeat: no-repeat; background-size: cover; background-position: center top; transition: all .2s;}
ul.prev_recs li:hover .bg{width: 110%; height: 110%; top: -5%; left: -5%;}

#dyn_caption{
	position: absolute; top: 265px; left: 20px; margin-top: 20px; z-index: 1000; font-weight: bold; color: #fff;
	padding: 5px 10px !important; background: #000000; font-weight: 400; font-size: 13px;
}

#dyn_promoAssets_preview{position: relative; width: 100%; height: 100%;}
#dyn_promoAssets_preview::after{position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(rgba(0, 0 ,0 , 0) 0%, rgba(0, 0, 0, 1) 100%);}

#dyn_promoAssets_preview_thumb{position: absolute; z-index: 100; bottom: 0px; width: calc(100% - 40px); height: 150px; /*background-color: rgba(136, 136, 136, .5);*/ margin: 0 20px; border-radius: 3px;}



.explicit:after{position: relative; top: -2px; content: 'Explicit'; text-transform: uppercase; font-size: 8px; border: 1px solid var(--text-color); border-radius: 3px; padding: 2px 3px; margin-left: 10px;}
.explicit.edited:after{content: 'Clean';}
h1.explicit:after{content: 'E'; font-size: 18px; padding: 2px 6px; top: -4px;}
h1.explicit.edited:after{content: 'C';}

.explicit_btn{width: 170px;}
.explicit_btn:nth-child(2){width: 140px;}



.darkshadow{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8);}
.darkshadowpop{display: none; position: fixed; top: 15%; left: 25%; width: 50%; max-width: 800px; height: 50%; max-height: 800px; background: #fff; border-radius: 30px; padding: 20px;}
.darkshadowpopwrapper{overflow-y: scroll; width: 100%; height: 100%;}


/* .countries ul{margin: 0; padding: 0; list-style: none;}
.countries ul li{width: 190px; height: 20px; margin-right: 10px; margin-bottom: 10px; overflow: hidden; float: left; padding: 10px; cursor: pointer;}
.countries ul li
.countries ul li:hover{background: rgba(4, 33, 90, .1);} */


ul.clickable_list{margin: 0; padding: 0; list-style: none;}
ul.clickable_list li{margin: 5px; padding: 5px; cursor: pointer;}
ul.clickable_list.inline li{display: inline-block;}
ul.clickable_list li:hover{background: var(--text-link-mild);}


/*=================================
 jQuery UI
===================================*/
#ui-datepicker-div{display: none;}
html.dark #ui-datepicker-div{color: #000;}
input.datepicker{
/* 	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgI…IjMzMzMzMyIiBoZWlnaHQ9IjMiIHdpZHRoPSI0IiB4PSIyMSIgeT0iMTIiLz48L2c+PC9zdmc+); */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAADFwAAAxcBwpsE1QAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEtSURBVGiB7ZlRDsIgEEQX4yk0XkjjPfTQGqPUa4xf6NpKujQgW7rvSwudMgxLWyUSAuAA4IoPFwB76fm19fmF7hhym4s+vxAAIPa9tv4q10Bq8zYC4Nhbo1/EBGL9U5mgfwFwDP0cO8ET0XbMuXPOhQsIJiqZRH3vnNt9HZHOjLR/Kqn6/fb2akSAJxrMxCPjWPLoC6I8APCs2Dzy3xDF+tHx5l7zpbEa0c66f2BOy4vTbiLhzqqd/sppJhEzoo1BjcSotZtJa3Z5iQR+zVBIq0SblGYSMSPaaMZIcrGPvUfnbpOy3ERKbKO2/TLMiDaaMfK37XeqppTlJmJPv4UxI9poxog9/WpDnIj2n1KbScSMaIPXyJOINjP7o6cLH3giJ94wAzoiOtcehBHjBXoBCxl3fmqVAAAAAElFTkSuQmCC);
	background-repeat: no-repeat;
	background-position: calc(100% - 10px);
	background-size: 25px;
	cursor: pointer; border-bottom: 1px solid #efecf4;
}
.box input.datepicker{
/* 	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAADFwAAAxcBwpsE1QAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEtSURBVGiB7ZlRDsIgEEQX4yk0XkjjPfTQGqPUa4xf6NpKujQgW7rvSwudMgxLWyUSAuAA4IoPFwB76fm19fmF7hhym4s+vxAAIPa9tv4q10Bq8zYC4Nhbo1/EBGL9U5mgfwFwDP0cO8ET0XbMuXPOhQsIJiqZRH3vnNt9HZHOjLR/Kqn6/fb2akSAJxrMxCPjWPLoC6I8APCs2Dzy3xDF+tHx5l7zpbEa0c66f2BOy4vTbiLhzqqd/sppJhEzoo1BjcSotZtJa3Z5iQR+zVBIq0SblGYSMSPaaMZIcrGPvUfnbpOy3ERKbKO2/TLMiDaaMfK37XeqppTlJmJPv4UxI9poxog9/WpDnIj2n1KbScSMaIPXyJOINjP7o6cLH3giJ94wAzoiOtcehBHjBXoBCxl3fmqVAAAAAElFTkSuQmCC); */
	color: #efecf4;
}
.box.red{background: #bb1e13; color: #fff; filter: none; color: var(--text-color);}
.box.lightred{background: #d2b9b7; filter: none; color: var(--text-color);}
html.dark .box.lightred{background: #8c6d6d; filter: none; color: var(--text-color);}
.box.green{background: #4caf50; color: #fff; filter: none; color: var(--text-color);}
.box.lightgreen{background: #b8d2b7; filter: none; color: var(--text-color);}

/*input.datepicker:focus{background: #fff;}*/
.ui-datepicker{background: #fff; /* border: 1px solid #ccc; */ box-shadow: 0 0 5px #ccc; padding: 10px;}
.ui-datepicker a{padding: 3px 8px;}
.ui-datepicker table th,
.ui-datepicker table td{text-align: center;}
.ui-datepicker-today a{color: #bb1e13;}
.ui-datepicker-current-day a{background: #04215a; color: #fff; text-decoration: none; border-radius: 300px;}
.ui-datepicker-prev,
.ui-datepicker-next{font-size: 12px; text-transform: uppercase; cursor: pointer;}
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover{font-weight: 600;}
.ui-datepicker-next{float: right;}
.ui-datepicker-title{display: inline-block; width: 270px; text-align: center; text-transform: uppercase; font-weight: bold;}

.ui-state-default{text-decoration: none;}
.ui-state-default:hover{font-weight: 700;}



.ui-helper-hidden-accessible{display: none;}
ul.ui-autocomplete{display: table; width: auto; list-style: none; box-shadow: 2px 7px 9px -5px #9e9e9e; z-index: 100;}
ul.ui-autocomplete li{padding: 15px 15px 15px 22px; color: rgba(0, 0, 0, 0.6); background: #fff; margin-top: -10px; cursor: pointer;}
ul.ui-autocomplete li .ui-state-active{font-weight: bold; color: #000;}


.ui-sortable-helper{box-shadow: 0 0 35px #666;}



.only_tablet,
.only_mobile{display: none;}



/*=================================
RESPONSIVE CASES  
=================================*/
@media only screen and (max-width: 800px){
	.no_tablet{display: none; visibility: hidden;}
	.only_tablet{display: inline-block;}
	
	
	#head .menu_icon, #head .menu_icon_action{display: block;}
	#head .nav{
		display: block; position: absolute; top: 0; left: -150%; padding-bottom: 20px; width: 100%; min-height: calc(100% - 20px); z-index: 100; background: #fff; box-shadow: 0 0 5px #000;
		max-height: 100%; overflow: hidden;
		transition: left 1s;
	}
	#head .nav.on{display: block; top: -25px; left: -40px; transition: left .5s; max-height: none; overflow: visible;}
	#head .nav ul li{float: none; margin-left: 0; margin-top: 20px; font-weight: bold;}
		#head .nav ul ul{display: block; position: relative; background: none; top: 0; width: auto;}
		#head .nav ul ul li{text-align: left; font-weight: normal; margin-top: 10px;}
			#head .nav ul li:hover ul ul{display: block;}
			#head .nav ul ul ul{display: block; position: relative; left: 0; top: 0;}
	
	#head .nav ul li:hover, #head .nav ul li.on{background: none;}
	
	.pagination{height: 190px;}
	.pagination ul{width: 100%; padding-top: 35px;}
	.pagination li.disabled{padding: 0; margin: 0;}
	
}

@media only screen and (max-width: 550px){
	
	.no_mobile{display: none; visibility: hidden;}
	.only_mobile{display: inline-block;}
	
	input[type='text'].full,
	input[type='text'].long{width: calc(100% - 20px);}
		
	.elems .inline{float: none; margin-right: 10px;}
	
	
	
	#footer{font-size: 11px;}
	#footer .wrap_max{padding-top: 10px;}
}





/*=================================
DARK MODE  
=================================*/
/*html.dark #head .logo{background-image: url(/_images/logo.svg);}

html.dark h2{color: #f09333;}

html.dark a{color: #708cc5}

html.dark input[type='checkbox'], 
html.dark input[type='radio']{border: 3px solid #6f8bc5;}
html.dark input[type='checkbox']:checked::before, 
html.dark input[type='radio']:checked::before{background: #6f8bc5;}

html.dark hr{background-image: linear-gradient(to right, white 25%, rgba(255,255,255,0) 0%);}

html.dark #head .nav ul li:hover,
html.dark #head .nav ul ul{background: rgba(0, 2, 6, 0.85); color: #fff;}
html.dark #head .nav ul ul{color: #F0EBF4;}
html.dark #head .nav ul ul li:hover{background: rgba(255, 255, 255, 0.05);}
html.dark #head .nav ul li:hover a, 
html.dark #head .nav ul li.on a{color: #fff;}

html.dark .service .filter ul li.on a{color: #fff;}

html.dark .beta::after{color: #04215a; background: #fff;}
html.dark .beta.incomplete::after{color: #fff; background: transparent;}*/