html {
   height: 100%;
}

body {
	min-height: 100%;
	position:relative;
	background: url(../../img/people.jpg) no-repeat;
	background-size: cover;
    overflow: hidden;
}

button, input, optgroup, select, textarea{ font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }


.cell-wrap {
	padding: 1rem;
	background-color: white;
	margin-top: 10vh;
    height: 24rem;
}

.connect-logo {
	margin: 1rem auto;
	min-height: 40px;
	width: 60%;
	background: url(../../img/wc-connect-logo.png) center center no-repeat;
	background-size: contain;
}

.connect-wrapper {
}


.primary-color {
	color:#46bee6;
}

.connect-form__actions {
	margin-top: 1rem;
	width: 100%;
	display: inline-flex;
	justify-content: space-between;
    position: relative;
}

.connect-form__actions p{ font-size: 0.8rem; }

.connect-form {
    top: 7rem;
}

#error {
	display: none;
	color: red;
    position: absolute;
    top: -25px;
    left: 0;
}

.hero-button > .material-icons {
	font-size: 50px;
}


/* medium and up */
@media screen and (min-width: 40em) {
	.cell-wrap {
		margin-top: 0;
		padding: 1rem;
		background-color: white;
		height: 36rem;
	}


	.connect-logo {
		height: 70px;
		min-height: 50px;
		margin: 3rem -3rem;
	}

	.connect-form {
		width: 80%;
		position: relative;
		margin: 0 auto;
	}
}


@media screen and (min-width: 64em) {

	.cell-wrap {
		padding: 1rem;
		background-color: white;
	}

	.connect-logo {
		height: 60px;
		min-height: 50px;
		margin: 3rem 0rem;
	}

}

@media screen and (min-width: 85.375em) {
	.cell-wrap {
		height: 36rem;
	}

}

@media screen and (min-width: 120em) {

	.connect-logo {
		height: 70px;
		min-height: 50px;
		margin: 3rem 0rem;
	}
}


input[type='color']{ padding:0.1rem; }

div.field-type-range .input-group-field{ padding-bottom:5px; }
input[type='range']{ width:100%; }

div[type="text"] .input-group-field{ padding-bottom: 0.35rem; }
div[type="text"] .input-group-label{ min-width:80px; }

pre{
	border: 1px solid #e6e6e6;
    border-radius: 3px;
    background: #fefefe;
	padding: 1rem;
	margin-bottom: 1rem;
}

*{ outline: none; }

main > .row{ max-width:85rem; padding-left:10px; padding-right:10px; }

p .button{ margin:0; }

.menu > li > button{
    padding: 0.7rem 1rem;
    line-height: 1;
}

.dropdown-pane{ font-size:0.9rem; padding: 0; }
.dropdown-pane hr{ margin:.5rem auto; }

/*.button-tabs{ background:#fff; }
.button-tabs .button:not(:first-child):not(:last-child){ border-radius:0; border-left:0 none; border-right:0 none; }
.button-tabs .button:first-child{ border-bottom-right-radius: 0; border-top-right-radius: 0; border-right:0 none; }
.button-tabs .button:last-child{ border-top-left-radius: 0; border-bottom-left-radius: 0; border-left:0 none; }
*/

hr.column{ margin-left: -0.9375rem; margin-right: 0; }

[data-exception-progress]{ cursor: pointer; }
[data-exception-progress] .progress,
.progress-bar-annotated .progress{ height:1.2rem; }
[data-exception-progress] .input-group-field,
.progress-bar-annotated .input-group-field{ background: #e6e6e6; }
[data-exception-progress] .input-group-label,
.progress-bar-annotated .input-group-label{ font-size: 0.75rem; line-height: 2; border:0 none; height:1.2rem; }

.progress-bar-annotated .input-group-label{ min-width: 5rem; text-align: center;}

.padding-none{ padding:0; }
.padding-xsmall{ padding:5px; }
.padding-small{ padding:10px; }
.padding-medium{ padding:20px; }
.padding-large{ padding:30px; }

	.padding-xsmall-vertical{ padding-top:5px; padding-bottom:5px; }
	.padding-small-vertical{ padding-top:10px; padding-bottom:10px; }
	.padding-medium-vertical{ padding-top:20px; padding-bottom:20px; }
	.padding-large-vertical{ padding-top:30px; padding-bottom:30px; }

	.padding-xsmall-horizontal{ padding-left:5px; padding-right:5px; }
	.padding-small-horizontal{ padding-left:10px; padding-right:10px; }
	.padding-medium-horizontal{ padding-left:20px; padding-right:20px; }
	.padding-large-horizontal{ padding-left:30px; padding-right:30px; }

	.padding-none-top{ padding-top:0; }
	.padding-xsmall-top{ padding-top:5px; }
	.padding-small-top{ padding-top:10px; }
	.padding-medium-top{ padding-top:20px; }
	.padding-large-top{ padding-top:30px; }

	.padding-none-bottom{ padding-bottom:0; }
	.padding-xsmall-bottom{ padding-bottom:5px; }
	.padding-small-bottom{ padding-bottom:10px; }
	.padding-medium-bottom{ padding-bottom:20px; }
	.padding-large-bottom{ padding-bottom:30px; }

	.padding-none-left{ padding-left:0; }
	.padding-xsmall-left{ padding-left:5px; }
	.padding-small-left{ padding-left:10px; }
	.padding-medium-left{ padding-left:20px; }
	.padding-large-left{ padding-left:30px; }

	.padding-none-right{ padding-right:0; }
	.padding-xsmall-right{ padding-right:5px; }
	.padding-small-right{ padding-right:10px; }
	.padding-medium-right{ padding-right:20px; }
	.padding-large-right{ padding-right:30px; }

.margin-none{ margin:0; }
.margin-xsmall{ margin:5px; }
.margin-small{ margin:10px; }
.margin-medium{ margin:20px; }
.margin-large{ margin:30px; }

	.margin-xsmall-vertical{ margin-top:5px; margin-bottom:5px; }
	.margin-small-vertical{ margin-top:10px; margin-bottom:10px; }
	.margin-medium-vertical{ margin-top:20px; margin-bottom:20px; }
	.margin-large-vertical{ margin-top:30px; margin-bottom:30px; }

	.margin-xsmall-horizontal{ margin-left:5px; margin-right:5px; }
	.margin-small-horizontal{ margin-left:10px; margin-right:10px; }
	.margin-medium-horizontal{ margin-left:20px; margin-right:20px; }
	.margin-large-horizontal{ margin-left:30px; margin-right:30px; }

	.margin-none-top{ margin-top:0; }
	.margin-xsmall-top{ margin-top:5px; }
	.margin-small-top{ margin-top:10px; }
	.margin-medium-top{ margin-top:20px; }
	.margin-large-top{ margin-top:30px; }

	.margin-none-bottom{ margin-bottom:0; }
	.margin-xsmall-bottom{ margin-bottom:5px; }
	.margin-small-bottom{ margin-bottom:10px; }
	.margin-medium-bottom{ margin-bottom:20px; }
	.margin-large-bottom{ margin-bottom:30px; }

	.margin-none-left{ margin-left:0; }
	.margin-xsmall-left{ margin-left:5px; }
	.margin-small-left{ margin-left:10px; }
	.margin-medium-left{ margin-left:20px; }
	.margin-large-left{ margin-left:30px; }

	.margin-none-right{ margin-right:0; }
	.margin-xsmall-right{ margin-right:5px; }
	.margin-small-right{ margin-right:10px; }
	.margin-medium-right{ margin-right:20px; }
	.margin-large-right{ margin-right:30px; }

.template-gateway > .row{ min-height:100vh; }

.container{
	background:#fff;
	border-radius:10px;
}

.radio-list li{
    cursor: pointer;
}

.callout.secondary {
    background-color: #eaeaea;
}

.video-container{
	text-align:center;
}
	.video-container video{ margin:0 auto; width:100%; max-width:1200px; border: 0.0625rem solid #2b333d; }

.button{ padding:0.6em .7em; }
.button.success,
.button.success:hover,
.button.success:focus{ color:#fff; }

table{ border-spacing: 1px; background: #e9e9e9; }

small.button.success,
small.button.warning,
small.button.alert,
small.button.warning:hover,
small.button.success:hover,
small.button.alert:hover{ cursor: default; }

.thumbnail{ border:0.0625rem solid #2b333d; box-shadow:none; border-radius: 0; }


.defaultSkin table.mceLayout { margin-bottom: 1rem; }
td .defaultSkin table.mceLayout { margin-bottom: 0; }

body.template-default main{ padding-top:20px; }

nav.left{
	max-width: 17rem;
	padding: 15px 0;
	background: #2b333d;
	position: absolute;
	display:none;
	left: 0;
	top: 0;
	bottom: 0;
	height: 100%;
	text-align: center;
	width: 17rem;
    overflow-y:auto;
    overflow-x: hidden;
}

    nav.left > ul.dropdown.menu{
        margin-top: 15px;
    }

    nav.left .dropdown.menu > li.is-dropdown-submenu-parent > a::after{ border-color:#fff transparent transparent; right:0.625rem; }

    nav.left > ul.dropdown.menu > li{ width:100%; }
    nav.left > ul.dropdown.menu > li > a{ border-bottom:0 none; }
    nav.left > ul.dropdown.menu > li > .menu.nested{ margin-left:0.5rem; border:0 none; }
    nav.left > ul.dropdown.menu > li > .menu.nested a{ color:#0a0a0a; padding:0.625rem 0.625rem; }
    nav.left > ul.dropdown.menu > li > .menu.nested a:hover{ background:rgba(0, 0, 0, 0.1); }

    nav.left > ul.dropdown.menu > li a{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .menu.vertical.nested:not(.is-dropdown-submenu){ display:none; }

	nav.left > ul {  }

	nav.left > ul ul.sub-menu { background:#111111; border-bottom:0.0625rem solid rgba(0, 0, 0, 0.5); }
	nav.left > ul ul.sub-menu li{ font-weight:normal; }
	nav.left > ul ul.sub-menu li a{ padding-left:1.825rem; }
	
	nav.left > img { max-width: 160px; width: 100%; }
	nav.left > img.logo-small { display:none; }

	nav.left li {
		color: #fff;
		text-align:left;
		font-size: 0.9em;
		font-weight: bold;
	}
	
	nav.left li a.button{ display:inline-block; padding: 0.6em .7em; position: absolute; right: 10px; top: 10px; z-index: 100; }

    nav.left > ul > li.row a{ border-right:0.0625rem solid rgba(0, 0, 0, 0.5); font-weight:normal; padding:0.625rem; }
    nav.left > ul > li.row a:first-child{ }
    nav.left > ul > li.row a:first-child i{ }
    nav.left > ul > li.row a:last-child{ padding-left:0; padding-right:0; text-align:center; border-right:0; }
    nav.left > ul > li.row a:last-child i{ margin:0; }
    nav.left > ul > li.row a i{  }
	
    nav.left > ul > li:first-child > a:not(.button){ border-top:0.0625rem solid rgba(0, 0, 0, 0.5); }
    nav.left > ul > li > a:not(.button){ border-bottom:0.0625rem solid rgba(0, 0, 0, 0.5); }

	nav.left li a:not(.button){
		color: inherit;
		padding: 0.9375rem 0.625rem;
		display: block;
		position:relative;
        
	}

	nav.left .menu > li > a i{ margin-right:0; }

	nav.left li a:not(.button) i{
		width:25px;
		text-align: center;
	}

	nav.left li a:not(.button).active,
	nav.left li a:not(.button):hover{
		background: rgba(255, 255, 255, 0.1);
	}
	
	nav.left li a{ padding-left: 0.925rem; }

footer{
	border-top: 0.0625rem solid #cacaca;
}

textarea.form-field-richtext-small{ height: 19.5rem; }
textarea.form-field-richtext-large{ height: 39rem; }

.help-text{ font-weight:normal; color:#9a9a9a; font-style:normal; }

label{ font-weight:bold; }

textarea{
	min-height:108px;
}

.input-group-label.button{ margin-bottom:0; }

.tabs-title > a{ font-weight:bold; }

.module-playlist_follow_tool .tabs-panel,
.module-language .tabs-panel{ padding-top:0; }
.module-playlist_follow_tool .tabs-panel .form-fieldset > h4,
.module-language .tabs-panel .form-fieldset > h4{
    background: #e6e6e6;
    padding: 0.5rem 0;
    margin-right: -1rem;
    margin-left: -1rem;
    margin-bottom: 1rem;
}

.form-field-datetime .row{ margin-left: 0; margin-right: 0; }
.form-field-datetime .row .column{ padding-left: 5px; padding-right: 5px; }
.form-field-datetime .row .column:first-child{ padding-left:0; }
.form-field-datetime .row .column:last-child{ padding-right:0; }
.form-field-datetime .row p.column{ line-height: 2.4; }

.form-field-group[type="text"]{
	height:auto;
	padding: 1px;
	margin-left: 0;
	margin-right: 0;
	overflow:hidden;
}

	.form-field-group .group-option:hover label{ background:#f1f1f1; }
	.form-field-group .group-option.is-active label{ background:rgba(43, 166, 203, 0.5); }
	.form-field-group .group-option{
		margin:0;
		padding: 0;
	}

		.form-field-group .group-option input[type='checkbox']{
			margin:9px 0 0 9px;
			float: left;
		}

		.form-field-group .group-option label{
			padding: 0.2rem 0.9375rem 0.2rem 1.9375rem;
			margin: 1px;
			display: block;
			border-radius:3px;
		}

.tabs-content .tabs-panel.is-active{ display: block;}

nav.top{
	background:#2b333d;
	position:fixed;
	left:0;
	right:0;
	top:0;
	width:100%;
	z-index:999;
    border-bottom: 0.0625rem solid #111;
    margin-bottom: 20px;
}

	nav.top .row{
        max-width: 85rem;
    }

	nav.top img{
		height:22px;
		margin-bottom: 1px;
	}

	nav.top .row a:not(:first-child){
		color:#fff;
		padding-top: 0.6rem;
		padding-bottom: 0.6rem;
		text-align: center;
	}

    body:not(.show-nav) nav.top .row a:not(:last-child):not(:first-child).active,
    nav.top .row a:not(:last-child):not(:first-child):hover {
        background: rgba(255, 255, 255, 0.1);
    }

    body.template-default:not(.user-authorized) nav.top .row a:last-child{ text-align: right; }

	nav.top .row a:not([href]){
        color:#000;
        background: #fff;
	}

@media screen and (max-width: 1199px) {
	body.show-nav nav.left{
		display:block;
		position:fixed;
		left:0;
		top:0;
		right:0;
		bottom:0;
		width:100%;
		height:100%;
		z-index:998;
		max-width:none;
		padding: 42px 0 0 0;
	}

	body.show-nav{ overflow: hidden; }

	nav.left > ul{ margin-top:0; }
	
	nav.left > img{ display: none; }
	
	body.template-default main{ padding-top:53px; }
}

@media screen and (min-width: 1200px) {
	body.template-default.user-authorized main{
		margin-left:17rem;
	}

	body.template-default:not(.user-authorized) main{
		padding-top:0;
	}

	nav.left{ display:block; border-right: 0.0625rem solid #111; }
	nav.user{ display:block; }
	nav.top{ position:static; }
	body.template-default.user-authorized nav.top{ display: none; }

	.table-scroll table{ width:100%; }
}