/* Radio Button UIKit styles */
.cloud-docs .uk-input, 
.cloud-docs .uk-select, 
.cloud-docs .uk-textarea, 
.cloud-docs .uk-radio, 
.cloud-docs .uk-checkbox {
    box-sizing: border-box;
    margin: 0;
    border-radius: 0;
    font: inherit;
}

.cloud-docs .uk-radio:checked, 
.cloud-docs .uk-checkbox:checked, 
.cloud-docs .uk-checkbox:indeterminate {
    background-color: #1e87f0;
    border-color: transparent;
}

.cloud-docs .uk-radio:not(:disabled), 
.cloud-docs .uk-checkbox:not(:disabled) {
    cursor: pointer;
}

.cloud-docs .uk-radio {
    border-radius: 50%;
}
.cloud-docs .uk-radio:focus {
    outline: none;
}


.cloud-docs .uk-radio, 
.cloud-docs .uk-checkbox {
    display: inline-block;
    height: 16px;
    width: 16px;
    overflow: hidden;
    margin-top: -4px;
    vertical-align: middle;
    -webkit-appearance: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border: 1px solid #ccc;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    -webkit-transition-property: background-color,border;
    transition-property: background-color,border;
}

.cloud-docs .uk-radio, 
.cloud-docs .uk-checkbox {
    padding: 0;
}

.cloud-docs input, label, select, textarea {
	touch-action: manipulation;
}

.cloud-docs .uk-radio:checked {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23fff%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E");
}


/* WebRTC styles */
.webrtc .dtmf-button { width:45px; height:35px;}

.webrtc .phone-button { width:70px; height: 50px; left: 20px; }

.webrtc .button,.button:visited {
  background:#222
    url(/images/cloudimages/overlay.png) repeat-x;
  display:inline-block;
  color:#ffffffcf;
  text-decoration:none;
  border-radius:6px;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  box-shadow:0 1px 3px rgba(0,0,0,0.6);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.6);
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.6);
  text-shadow:0 -1px 1px rgba(0,0,0,0.25);
  border-bottom:1px solid rgba(0,0,0,0.25);
  position:relative;
  cursor:pointer;
  font-size:13px;
  font-weight:bold;
  line-height:1;
  text-shadow:0 -1px 1px rgba(0,0,0,0.25);
  align: center;
  border: 1px solid #6d6d8e;
}

.webrtc .button,.button:visited,.medium.button,.medium.button:visited {
  font-size:13px;
  font-weight:bold;
  line-height:1;
  text-shadow:0 -1px 1px rgba(0,0,0,0.25);
}

.webrtc .button:hover { background-color:#111;color:#fff; }
.webrtc .button:active { top:1px; }

.webrtc .super.button,
.webrtc .super.button:visited { font-size:28px;padding:8px 14px 9px; }

.webrtc .green.button,
.webrtc .green.button:visited { background-color:#91bd09; }
.webrtc .green.button:hover { background-color:#749a02; }

.webrtc .red.button,
.webrtc .red.button:visited { background-color:#e62727; }
.webrtc .red.button:hover { background-color:#cf2525; }

.webrtc .blue.button,
.webrtc .blue.button:visited { background-color:#2981e4; }
.webrtc .blue.button:hover { background-color:#1c69bf; }

.webrtc .disabled.button,.disabled.button:visited {
  background-color:#1b2852a1;
  color: #d5e2e1 !important;
  cursor: default;
  pointer-events: none;
}
.webrtc .disabled.button:hover{ background-color:#666; }

.webrtc .keypad-status-row {
    padding: 20px 0 30px 0;
    margin: 0 0 20px -10px;
    width: 300px;
	font-weight: 600;
  	text-align: left !important;
}

.webrtc .keypad-status-row .status {
  	margin-left: 10px !important;
}

.webrtc .keypad-status-row img {
    margin-top: -10px;
}

@media screen and (max-width: 480px) {
	.webrtc .uk-container {
		padding: 0px; 
	}
}

@media screen and (min-width: 1400px) {
	.uk-width-xxlarge-1-2 {
    	width: 50% !important;
	}
}

#cloud-documentation-menu ul.uk-nav-sub {
  font-size: 12px !important;
}

.uk-form select, .uk-form textarea, .uk-form input:not([type]), .uk-form input[type="text"], .uk-form input[type="password"], .uk-form input[type="datetime"], .uk-form input[type="datetime-local"], .uk-form input[type="date"], .uk-form input[type="month"], .uk-form input[type="time"], .uk-form input[type="week"], .uk-form input[type="number"], .uk-form input[type="email"], .uk-form input[type="url"], .uk-form input[type="search"], .uk-form input[type="tel"], .uk-form input[type="color"] {
    height: 35px !important;
    max-width: 100% !important;
    padding: 4px 6px !important;
    background: #ffffffe0 !important;
  	border-color: #3982a5 !important;
    color: #666 !important;
    -webkit-transition: all 0.2s linear !important;
    -webkit-transition-property: border, background, color, box-shadow, padding !important;
    transition: all 0.2s linear !important;
    transition-property: border, background, color, box-shadow, padding !important;
    border-radius: 4px !important;
}

.uk-form input:not([type]):focus, .uk-form input[type=text]:focus, .uk-form input[type=password]:focus, .uk-form input[type=email]:focus, .uk-form input[type=url]:focus, .uk-form input[type=search]:focus, .uk-form input[type=tel]:focus, .uk-form input[type=number]:focus, .uk-form input[type=datetime]:focus, .uk-form input[type=datetime-local]:focus, .uk-form input[type=date]:focus, .uk-form input[type=month]:focus, .uk-form input[type=time]:focus, .uk-form input[type=week]:focus, .uk-form input[type=color]:focus, .uk-form select:focus, .uk-form textarea:focus {
    border-color: #246382 !important;
    outline: 0 !important;
    background: #cef1f9 !important;
    color: #333 !important;
  	box-shadow: none !important;
}

.phone-container .screen {
	background-image: linear-gradient(to top,#cfdedf2b 0,#3a8dbb 100%) !important;  
}

@media (max-width: 420px) {
	.phone-container .marvel-device.note8 {
      	width: 270px;
      	height: 610px;
      	background: #fff;
      	padding: 0;
  	}

  	.phone-container .marvel-device.note8 .volume {
        background: none;
  	}
  
  	.phone-container .marvel-device.note8 .volume:before {
       background: none;
    }
  
  	.phone-container .marvel-device.note8 .sleep {
       background: none;
    }

  	.phone-container .marvel-device.note8 .more-sensors {
       background: none;
    }

  	.phone-container .screen {
		background-image: none !important;
	}
  
  .webrtc .keypad-status-row {
    	font-size: smaller;
  }
}