/* 
 * Styling for Willow Sound Vision - Client Portal
 * (c) 2016 Willow SoundVision
 *
 * Revisions 
 * ====================================
 * None
 */



/*	=================================================================================
	GENERAL STYLINGS
	================================================================================= */

* {
	-moz-box-sizing: 		border-box; 
	-webkit-box-sizing: 	border-box; 
	box-sizing: 			border-box; 
}

html {
	font-family: Arial, Helvetica, sans-serif;
	-webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
	margin: 0px;
	font-size: 14px;
	line-height: 20px;
}

.link {
	cursor: pointer;
}

/*	=================================================================================
	MISC GLOBAL STYLINGS
	================================================================================= */

h1,h2,h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h1 {
	font-size: 2.5em;
}

h2 {
	font-size: 2.0em;
}

h3 {
	font-size: 1.5em;
}

hr {
	margin-top: 20px;
	margin-bottom: 20px;
}

label {
    font-weight: bold;
}

.debug {
	float: left;
	background: #ff8080;
	z-index: 10000;
	opacity: 0.8;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
	padding: 10px;
}

div.form {
	background: #ffffe6;
	padding: 15px;
	border: 1px dotted #BABABA;
}


/*	=================================================================================
	LINK STYLINGS
	================================================================================= */

a:link,a:visited {
	color: #3E50B4;
	text-decoration: none;
}
a:hover {
	color: #FF3F80;
	text-decoration: underline;
}

.ci-pagination span, .ci-pagination strong  {
	border: 1px solid #999999;
	transition: background-color .3s;
	text-decoration: none;
	padding: 8px 16px;
	color: #fff;
	background: #999999;
	float: left;
}
.ci-pagination a:first-child {
	border-bottom-left-radius: 6px;
	border-top-left-radius: 6px;
}
.ci-pagination a:last-child {
	border-bottom-right-radius: 6px;
	border-top-right-radius: 6px;
}
.ci-pagination a:hover {
	background: #999999;
}
.ci-pagination {
	display: inline-block;
}
.ci-pagination a {
	color: black;
	float: left;
	padding: 8px 16px;
	text-decoration: none;
	transition: background-color .3s;
	border: 1px solid #ddd;
}
.ci-pagination a.active {
	background-color: #4CAF50;
	color: white;
	border: 1px solid #4CAF50;
}
.ci-pagination a:hover:not(.active) {background-color: #ddd;}



/*	=================================================================================
	FORM FIELD GLOBALS
	================================================================================= */

select, textarea, input[type="text"], input[type="password"], input[type="number"], input[type="email"] {
    padding: 4px 6px;
    margin-bottom: 3px;
	margin-top: 3px;
    color: #555555;
    vertical-align: middle;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
	border: 1px solid #cccccc;
	font-family: inherit;
	background-color: white;
}

input[type="text"], input[type="password"], input[type="number"], input[type="email"] {
	height: 30px;
}


.ajax_hasvalue {
	background: transparent;
}

input[disabled] {
	background-color:#ddd;
}

/*	=================================================================================
	HEADER & FOOTER
	================================================================================= */

#header {
	position: fixed;
	width: 100%;
	height: 80px;
	color: #fff;
	background: #17164a;
	background: -moz-linear-gradient(top, #17164a 0%, #2c2b91 100%);
	background: -webkit-linear-gradient(top, #17164a 0%,#2c2b91 100%);
	background: linear-gradient(to bottom, #17164a 0%,#2c2b91 100%);
	border-bottom: solid 1px #000;
	top: 0;
	z-index: 100;
}

#header .header-top a:visited, #header .header-top a:link {
	color: rgb(179, 185, 243);
}

#header .header-left {
	max-width: 50%;
	float:left;
}

#header .logo {
	max-width: 65%;
	max-height: 65%;
	position:absolute;
	top:15px;
	left:10px;
}

#header .header-right {
	max-width: 50%;
	text-align: right;
	position:absolute;
	top:5px;
	right:5px;
	padding: 10px;
}

#header .name {
	font-size: 2em;
}

#header .client {
	font-style: italic;
}

#header .header-navigation {
	background: #ebebeb;
	position:absolute;
	top: 80px;
	min-height: 25px;
	width: 100%;
	border-bottom: 1px solid #000;
	color: #000;
	text-align: right;
}

#header .nav-option {
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 2px;
}

#header .selected {
	font-weight: bold;
}

#content {
	padding: 15px;
	margin-top: 100px;
	margin-bottom: 30px;
	z-index: 0;
}

#footer {
	position:fixed;
	background:#BABABA;
	height:25px;
	bottom:0px;
	left:0px;
	right: 0px;
	padding: 2px;
	z-index: 100;
	text-align: center;
}

#footer .footer_left {
	position:fixed;
	left: 5px;
}

#footer .footer_right {
	position:fixed;
	right: 5px;
}

img.section_logo {
	width: 94px;
	float:left;
	margin-right: 10px;
}



/*	=================================================================================
	FORM STYLINGS
	================================================================================= */


.form select, .form textarea, .form input[type="text"], .form input[type="password"], input[type="number"], input[type="email"] {
	width: 300px;
	display: inline-block;
}

.form_input {
	display: inline-block;
}

.form_header {
	font-weight: bold;
	font-size: 1.5em;
	padding-bottom: 6px;
	margin-bottom: 15px;
	border-bottom: 1px dotted #BABABA;
	margin-top: 20px;
}

.form_header:first-child {
    margin-top: 0px;
}

.form_row label {
	width: 150px;
	display: inline-block;
	vertical-align: top;
}

.form_checkbox:hover {
    background-color:rgba(0, 0, 0, 0.08);
    border-radius:30px;
}

.form_checkbox label {
	width: 430px;
	display: inline-block;
	vertical-align: top;
}

.form_section {
	margin-top: 15px;
}

.form_section {
	margin-top: 15px;
}

.form_tab {
	margin-left: 10px;
}

.form .ui-spinner {
	margin-top: 3px;
	margin-bottom: 3px;
	display: inline-block;
	background: #FFFFFF !important;
	color: black;
	width: 300px;
	padding: 0px;
}

.form .ui-spinner-input {
	border: 0px;
	height: 20px;
	padding: 0px;
	font-family: inherit !important;
}


/*	=================================================================================
	CHECKBOX STYLINGS
	================================================================================= */

input[type=checkbox].cb,
input[type=radio].cr {
	position:absolute;
	z-index:-1000;
	left:-1000px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	height:1px; width:1px;
	margin:-1px;
	padding:0;
	border:0;
}


input[type=checkbox].cb + label.cb-label,
input[type=radio].cr + label.cr-label {
	padding-left:35px;
	height:30px; 
	display:inline-block;
	line-height:30px;
	background-repeat:no-repeat;
	background-position: 0 0;
	vertical-align:middle;
	cursor:pointer;
	width: 35px;
	overflow: hidden;
}

input[type=checkbox].cb:checked + label.cb-label,
input[type=radio].cr:checked + label.cr-label {
	background-position: 0 -30px;
}
					
label.cb-label {
	background-image:url(../images/checkbox.png);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

label.cr-label {
	background-image:url(../images/radio.png);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

input[type=checkbox].cb:disabled + label.cb-label,
input[type=radio].cr:disabled + label.cr-label{
	opacity:0.6; /* "grey out" when checkbox disabled */
	cursor:default;
}


/*	=================================================================================
	MISC INPUT STYLINGS
	================================================================================= */

.minicolors-input {
	height: 28px !important;
	width: 200px;
}

.ui-spinner, .spinner-input {
	background: #FFFFFF !important;
	color: black;
}

.spinner-input {
	border: 0px !important;
}


/*	=================================================================================
	MENU STYLINGS
	================================================================================= */

div.menu {
	float:right;
	padding: 1px;
	border: 1px solid #000000;
	margin: 10px 0px 20px 10px;
	max-width: 820px;
}

div.menu img {
	width: 64px;
}

div.menu div.option {
	display: inline-block;
	text-align: center;
	cursor: hand;
	width: 130px;
	max-width: 130px;
	height: 100px;
	max-height: 102px;
	padding: 5px;
	overflow: hidden;
	margin: 1px;
	vertical-align: middle;
}

div.menu div.option:hover {
	background-color: #EFEFEF;
	text-align: center;
	cursor: hand;
}


/*	=================================================================================
	DIALOGUES
	================================================================================= */

.form_message {
	border: 1px solid #000;
	padding: 8px;
	margin-bottom: 25px;
	min-height: 80px;
}

.form_message .message_icon {
	height: 64px;
	width: 64px;
	display: inline-block;
	margin-right: 10px;
	vertical-align: top;
}

.form_message .message_panel {
	display: inline-block;
}

.form_message .message_header {
	font-weight: bold;
	margin-bottom: 5px;
}

.form_notice {
	background: #eee8f3;
}

.form_info {
	background: #e6ffcc;
}

.form_error {
	background: #ff8080;
}



/*	=================================================================================
	TABLE FORMATS
	================================================================================= */

table.data_table {
	width: 100%;
}

table.data_table .icon,
table.info_table .icon {
	width: 24px;
}

table.data_table,
table.info_table {
	margin: 20px 0 40px 0;
	border-collapse: collapse;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	table-layout:fixed;
}

table.data_table td,
table.info_table td {
	padding: 6px 12px;
	white-space: nowrap;
	overflow: hidden;
}

table.data_table thead tr,
table.info_table thead tr {
	background: #000000;
	color: #FFFFFF;
}

table.data_table 	.first,
table.info_table  	.first {
	font-size: 1.3em;
	line-height: 20px;
	font-weight: bold;
}

table.data_table 	.expand,
table.info_table  	.expand {
	width: 20px;
	height: 20px;
	margin-right: 7px;
}


table.data_table thead 	.first.red,
table.info_table 		.first.red		{	background: #ea6153;	}
table.data_table thead 	.first.blue,
table.info_table 		.first.blue 	{	background: #2980b9;	}
table.data_table thead 	.first.green,
table.info_table 		.first.green 	{	background: #27ae60;	}
table.data_table thead 	.first.orange,
table.info_table 		.first.orange 	{	background: #FFA500;	}

table.data_table thead .second,
table.info_table .second {
	background: #808080;
	font-size: 1.1em;
	line-height: 15px;
}

table.data_table thead 	.second.red,
table.info_table 		.second.red 	{	background: #c5948f;	}
table.data_table thead 	.second.blue,
table.info_table 		.second.blue 	{	background: #82a0b4;	}
table.data_table thead 	.second.green,
table.info_table 		.second.green 	{	background: #97aea1;	}
table.data_table thead 	.second.orange,
table.info_table 		.second.orange 	{	background: #ffc65e;	}

table.data_table tbody tr,
table.info_table tbody tr {
	background: #f6f6f6;
}

table.data_table tbody tr:nth-of-type(odd) {
	background: #e9e9e9;
}

table.data_table .highlight,
table.info_table .highlight {
	background: #ddffcc !important;
}

table.data_table .highlight-error,
table.info_table .highlight-error {
	background: #e9c2be !important;
}

table.data_table .highlight-warning,
table.info_table .highlight-warning {
	background: #ffe3b0 !important;
}


table.data_table tbody .row_disabled,
table.info_table tbody .row_disabled {	background: #ffdcdc !important }

table.data_table tbody tr:hover, table.data_table tbody tr.hover {
	background: #c0c0c0 !important;
}

table tbody td.section.blue,
table thead td.section.blue	{	background: #94b7cf !important; font-weight: bold; color: #404040;	}
table tbody td.section.red,
table thead td.section.red 	{	background: #e9c2be !important; font-weight: bold; color: #404040;	}
table tbody td.section.green,
table thead td.section.green {	background: #c3ddce !important; font-weight: bold; color: #404040;	}
table tbody td.section.orange,
table thead td.section.orange {	background: #fff2db !important; font-weight: bold; color: #404040;	}

/*	=================================================================================
	SEARCH BAR
	================================================================================= */

table.search .icon {
	vertical-align:middle;
	margin-right: 5px;
}


/*	=================================================================================
	STATUS FORMATS
	================================================================================= */

span.player-status-0 {	color: #31a557;		font-weight: bold;	}
span.player-status-1 { 	color: #c68a19;		font-weight: bold;	}
span.player-status-2 { 	color: #dd0404;		font-weight: bold;	}
span.player-status-3 {	color: #2412ea;		font-weight: bold;	}


/*	=================================================================================
	FILTER BAR
	================================================================================= */

table.filter_bar 		{	width: 100%	}
table.filter_bar td 	{ 	 }
table.filter_bar .icon 	{	width: 72px; height: 72px }


/*	=================================================================================
	MENUS
	================================================================================= */

.grid-container {
	display: grid;
}

.grid-container--fill {
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.grid-container--fit {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-element {
	background-color: #EAEAEA;
	padding: 15px;
	color: #000000;
	border: 1px solid #fff;
	height: 200px;
	text-align: center;
}

.grid-element:hover {
	background-color: #DADADA;
}

.grid-element img {
	max-width: 70%;
	max-height: 70%;		
}

/*	=================================================================================
	PAGINATION
	================================================================================= */

div.pagination-container {
	width: 100%;
	font-size: 14px;
	margin:5px;
}

div.pagination-container .number {
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
}

div.pagination-container .current {
	font-weight: bold;
}



/*	=================================================================================
	FULL SCREEN DIALOG
	================================================================================= */

	#full-screen-frame {
		background: rgba(90,90,90,1);
		position: fixed;
		top: 115px;
		left: 10px;
		right: 10px;
		bottom: 35px;
		z-index: 200;
		min-width: 800px;
		padding: 10px;
		color: white;
		border: 1px black solid;
	}
	#full-screen-frame .close-full-screen-frame {
		float: right;
	}
	#full-screen-frame h2 {
		margin-top: 5px;
	}
    #full-screen-frame-notification {
        position: absolute;
        right: 70px;
        top: 20px;
        width: 400px;
        height: 25px;
        text-align: right;
        font-size: 1.2em;
    }
	#full-screen-frame-content {
		position: absolute;
		top: 60px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		width: 100%;
		height: calc(100% - 60px);
	}

/*	=================================================================================
	CONTROL PANEL UI
	================================================================================= */
	.control-panel {
		float: right;
		background: #eaeaea;
		border: 1px black solid;
		margin-bottom: 15px;
		clear: both;
	}
	.control-panel-item {
		padding: 5px;
		text-align: center;
		width: 70px;
		height: 70px;
		display: inline-block;
			
	}
	.control-panel-icon {
		width: 32px;
	}

	.action-holder {
		display: flex;
		flex-direction: column;
		cursor: pointer;
		align-items: center;
		margin: 0.5em;
	}