@font-face {
  font-family: 'SFProText-Regular';
  src: url('/fonts/SFProText-Regular.eot');
  src: url('/fonts/SFProText-Regular.eot?#iefix') format('embedded-opentype'),
       url('/fonts/SFProText-Regular.svg#SFProText-Regular') format('svg'),
       url('/fonts/SFProText-Regular.ttf') format('truetype'),
       url('/fonts/SFProText-Regular.woff') format('woff'),
       url('/fonts/SFProText-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

html, body, div, p,img, button, input {
	box-sizing:border-box;
}

body {
    color: #cccccc;
    background-color: #000;
    margin: 0px 0px;
    padding: 0px;
    height: 100%;
    text-align: center;
 	 font-family: 'SFProText-Regular', sans-serif;
 	 font-size:20px;
}

form {
	border:none;
	margin:0 auto;
	width:100%;
	max-width:400px;
	box-sizing:content-box;
	
}

#login-big-logo{
	margin:10vh auto 6vh;
	padding: 0 10px;
}

#login-big-logo img {
	max-width:100%
}

input {
	display:block;
	height:38px;
	 font-size:14px;
	 line-height:38px;
	 padding:0px 18px;
	 border:1px solid #707070;
	 border-radius:19px;
	 background-color: #fff;
	 color: #000;
	 width:300px;
	 margin:0 auto;
	 outline:none;
}

#login-password {
	margin:35px auto;
}

button#logout-button, button#login-button, button#send-forgotten-password-button, button#send-new-password {
	width:150px;
	height:44px;
	font-size:17px;
	line-height:43px;
	border:none;
	border-radius:22px;
	background-color: #ED1C24;
	color: #fff;	
	cursor:pointer;
	outline:none
}

#login-checkboxes-container {
	margin-top:30px;
}

#login-checkboxes-container > div {
	margin:20px;
	font-size:16px;
	color:#C4C4C4;
	
}

#login-checkboxes-container .login-checkbox {
	flex: 0 0 24px;
	display:inline-block;
	width:24px;
	height:24px;
	margin-right:20px;
	
}

#login-checkboxes-container input + label span.login-checkbox {
	background: url('/img/login-checkbox.png') center no-repeat;
}


#login-checkboxes-container input:checked + label span.login-checkbox {
	background: url('/img/login-checkbox-checked.png') center no-repeat;
}

#login-checkboxes-container label {
	display:flex;
	justify-content:flex-start;
	align-items: center;
}

#login-checkboxes-container label span.clickable-link, #switch-to-forgotten-password, #switch-to-login{
	font-size:16px;
	color:#ED1C24;
	cursor:pointer;
}

#login-bottom-row {
	font-size:16px;
	position:fixed;
	bottom:20px;
	left:0;
	right:0;	
}

#login-bottom-row span {
	cursor:pointer;
}

#forgotten-password-screen div {
	font-size:16px
}

#forgotten-password-screen #forgotten-password-email{
	text-align:center;
	margin-top:25px;
	margin-bottom:35px;
}

.login-popup {
	display:none;
	position:absolute;
	top:0;
	right:0;
	left:0;
	bottom:0;
	z-index:1000;
}

.login-popup-content {
	margin: 0 auto;
	margin-top:5vh;
	height:80vh;
	width: 98%;
	max-width:685px;
	background-color:#575757;
	font-size:16px;
	color:#C4C4C4;
	border-radius:10px;
}

.login-popup-header {
	width:100%;
	position:relative;
}

.login-popup-close {
	position:absolute;
	top:15px;
	right:15px;
	cursor: pointer;
}

.login-popup-logo {
	padding-top:25px;
	max-width:90%;
	margin:0 auto;
	/* margin-bottom:60px; */
}

.login-popup-logo img{
	max-width:100%
}

.login-popup-text {
	
}

.active-popup {
	color: #ED1C24;
}


/* --------- */

#logo-container {
	margin:50px auto;
}


.digi-list-name {
	cursor:pointer;
	display:inline-block;
	font-size: 20px;
	margin:25px auto;
	color: #ccc;
}


/* Alert popup */
.jconfirm-holder {
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: initial;
	font-size: 16px;
	color: #000;
	width: 90%;
	margin: 0 auto;
	max-width: 300px;
}

.digi-list-item{
	position:relative
}

#device-list .digi-buttons {
	display: flex;
    width: 60px;
    justify-content: space-evenly;
    position:absolute;
    top:25px;
    left:0px;
}

#device-list .digi-buttons button {
	width:24px;
	height:24px;
	border-radius:5px;
	top:23px;
	left:23px;
	outline: none;
    border: none;
	cursor: pointer;
}

#device-list .digi-buttons button.unpair-button {
	background-color: #ED1C24;
    color: #fff;
}

#device-list .digi-buttons button.rename-button {
	background-color: #ffba0b;
    color: #ccc;
    background-image: url(/img/button-edit-icon.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 70%;
}



button#play-button{
	margin-top:30px;
	width:150px;
	height:44px;
	font-size:17px;
	line-height:43px;
	border:none;
	border-radius:22px;
	background-color: #ffba0b;
	color: #000;	
	cursor:pointer;
	outline:none
}

.inline-button-container button {
	border-radius: 4px;
    padding: 10px;
    color: red;
    border: none;
    font-size: 20px;
    font-weight: bold;
    background: url(/img/copy-link-xxl.png);
    background-size: 60% 60%;
    width: 40px;
    background-color: black;
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    height: 32px;
    cursor:pointer;
}


@media only screen and (max-width: 600px) {
  .login-popup-logo img{
   display:none;
  }
  .login-popup-logo{
	margin-bottom: 20px;
  }
}