/**
 * Panels and tabs content	
	- Cafe Partners > Case Studies
	- Guest Page > subpages 
	- Keys Page > subpages
 * -----------------------------------------------------------------------------
 */

.switch-panels{ margin:0 auto; padding:0; width:900px; min-height:900px; }
/* panels */
.switch-panels .panels{ margin:25px auto; clear:both; position:relative; }
.switch-panels .panel [type=radio],
.switch-panels .tab [type=radio]{ display: none; }
.switch-panels .panel > label{
    background:#e4e4e4;
    padding:0 10px 0 30px; width:220px; height:34px; display:block;
    position:relative; left:0; color:#07a7e0; line-height:34px;
    border-bottom:1px solid #fff; cursor:pointer;
}
.switch-panels .panel input[type=radio]:checked ~ label {
    background:#fff url(2VkLDZcDg7ZW2whBXJ6qMNbJw3sOWXSyAPkElqPPSdc.png) no-repeat 5px 10px;
    color:#07a7e0;
}
.switch-panels .panel-content{
    background:#fff; margin:0 auto; 
	position:absolute; top:0; right:0;
    padding:20px 40px 30px; width:580px;
}
.switch-panels .panel input[type=radio]:checked ~ label ~ .panel-content {
    background:#fff; z-index:3;
}
.switch-panels .panel-content .details{
    float:left; width:370px; margin:0; padding:0;
    font-size:15px; line-height:18px; color:#666; min-height:125px;
}
.switch-panels .panel-content .details li{ margin-top:5px; margin-left:3px; padding-left:20px; }
.switch-panels .panel-content .details li.address{
    background:#fff url(DqKPmmdxuTPoDpb3rJQ4sGCyJZCoGKZLyW01srD9RXl.png) no-repeat top left;
    background-size:15px 15px;
}
.switch-panels .panel-content .photo{
    float:right; position:absolute; top:-30px; right:40px;
}
.switch-panels .panels blockquote{
    margin:10px auto; padding:20px 62px;
    clear:both; font-size:18px;
}
.switch-panels .panels blockquote p{
    line-height:1.5em;
}
.switch-panels .panels blockquote span{
    font-size:14px; line-height:24px;
    display:block; text-align:right;
}
/* tabbed content */
.switch-panels .tabs{
    background:#fff; margin:0 auto; clear:both;
    width:100%; min-height:550px; position:relative;
}
.switch-panels .tab{ float:left; }
.switch-panels .tab > label{
    background:#fff; width:193px;
    margin:0 auto; padding:0; float:left; cursor: pointer;
    position:relative; top:0; left:0;
    font-size:13px; text-align:center; color:#9a9a9a;
}
.switch-panels .tab input[type=radio]:checked ~ label {
    background:none;	color:#07a7e0;
}

.switch-panels .tab > label > .fa-bars {
    padding: 8px 13px 10px 13px;
    font-size: 20px;
    vertical-align: middle;
}

.switch-panels .tab-content {
    margin-top: 40px;
}

.switch-panels .tabs.inner .tab-content {
    margin-top: 5px;
}

.switch-panels .tab-content .no-content {
    text-align: center;
    padding-top: 50px;
}
.switch-panels .tab input[type=radio]:checked ~ label ~ .tab-content{
    z-index:2;
}
/* icons */
.switch-panels  .tab > label span{
    margin:0 auto; padding:0; display:block; width:40px; height:40px;
}
.switch-panels .tab > label .map{
    background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -169px;
}
.switch-panels .tab > label:hover .map,
.switch-panels .tab input[type=radio]:checked ~ label .map{
    background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -125px;
}
.switch-panels .tab > label .plug{
    background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -1419px;
}
.switch-panels .tab > label:hover .plug,
.switch-panels .tab input[type=radio]:checked ~ label .plug{
    background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -1380px;
}

.switch-panels .tab > label .plug-2 {
    background: url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -1510px;
}

.switch-panels .tab > label:hover .plug-2,
.switch-panels .tab input[type=radio]:checked ~ label .plug-2 {
    background: url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -1465px;
}

.switch-panels .tab > label .key{
    background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -255px;
}
.switch-panels .tab > label:hover .key,
.switch-panels .tab input[type=radio]:checked ~ label .key{
    background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -215px;
}
.switch-panels .tab > label .cu{
    background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -330px;
}
.switch-panels .tab > label:hover .cu,
.switch-panels .tab input[type=radio]:checked ~ label .cu{
    background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -295px;
}
			/* for tabs inside data-slide */	
			.switch-panels .tab > label .ppl{	
			background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -403px;
			background-size:90%;
			}		
				.switch-panels .tab > label:hover .ppl,
				.switch-panels .tab input[type=radio]:checked ~ label .ppl{
				background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -365px;
				background-size:90%; 
				}		
			.switch-panels .tab > label .loc{	
			background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 4px -428px;
			background-size: 80%;
			}		
				.switch-panels .tab > label:hover .loc,
				.switch-panels .tab input[type=radio]:checked ~ label .loc{
				background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 4px -397px;
				background-size: 80%;
				}		
			.switch-panels .tab > label .pen{	
			background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -620px;
			}		
				.switch-panels .tab > label:hover .pen,
				.switch-panels .tab input[type=radio]:checked ~ label .pen{
				background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -581px;
				}	
			.switch-panels .tab > label .clock{	
			background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -699px;
			}		
				.switch-panels .tab > label:hover .clock,
				.switch-panels .tab input[type=radio]:checked ~ label .clock{
				background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -659px;
				}	
			.switch-panels .tab > label .small-key{	
			background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -940px;
			}		
				.switch-panels .tab > label:hover .small-key,
				.switch-panels .tab input[type=radio]:checked ~ label .small-key{
				background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -900px;
				}
            .switch-panels .tab > label .info{
            background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -782px;
            }
                .switch-panels .tab > label:hover .info,
                .switch-panels .tab input[type=radio]:checked ~ label .info{
                background:url(wF7oXEtMxCuOB2cDbi7sVyScMqNWLH1HOoJORJqM968.png) no-repeat 0 -740px;
                }
				
/* tabbed content  inside a tab*/
.switch-panels .tabs.inner{
    background:#fff; margin:20px auto; clear:both;
    width:100%; min-height:400px; position:relative;
}
.switch-panels .tabs.inner label{ background:#fff; color: #07a7e0; width:288px; }
.switch-panels .tabs.inner input[type]:checked ~ label{ background:#e4e4e4; color: #9a9a9a; }
.switch-panels .tabs.inner .tab input[type=radio]:checked ~ label ~ .tab-content{
    z-index:1;
}

.switch-panels .graph {
    height: 430px;
}

.switch-panels .graph .note {
    color: #8E8E8E;
    font: 0.750em/1em 'MuseoSans-300',Arial,Helvetica,sans-serif;
    margin: 10px 20px 0;
}

.switch-panels .bar-data.graph {
    height: 470px;
}

.switch-panels .performance-panel .graph {
    height: 370px;
}

@media only screen and (max-width:915px){
    .switch-panels { width:760px; }
    .switch-panels .panel > label{ width:200px; }
    .switch-panels .panel-content{ width:480px; padding:20px;}
    .switch-panels .panel-content .details{ width:300px; }
    .switch-panels .panel-content .photo{ right:-20px; }
    .switch-panels .panel-content .photo img{ width:80%; }
    .switch-panels .tabs{ width:460px; }
    .switch-panels .tab > label{ width:153px; }
    .switch-panels .tab-content img{ width:100%; }
    .switch-panels .tabs.inner label{  width:228px; }
    .switch-panels .panels blockquote{ padding:20px 44px; }
}

@media only screen and (max-width:768px){
    .switch-panels{ width:700px; min-height:850px; }
    .switch-panels .panel > label{ width:180px; }
    .switch-panels .panel-content{ width:440px; }
    .switch-panels .panel-content h2{ width:250px; font-size:26px; word-wrap:break-word; }
    .switch-panels .panel-content .details{ width:280px; min-height:100px;  }
    .switch-panels .panel-content .photo img{ width:80%; }
    .switch-panels .tabs{ width:430px; }
    .switch-panels .tab > label{ width:142px; }
    .switch-panels .tabs.inner label{ width:213px; }
}

@media only screen and (max-width:715px){
    .switch-panels{ width:560px; min-height:850px; }
    .switch-panels .panel > label{
        background:#e4e4e4 url(2VkLDZcDg7ZW2whBXJ6qMNbJw3sOWXSyAPkElqPPSdc.png) no-repeat 5px -14px;
    }
    .switch-panels .panel-content{ width:490px; }
    .switch-panels .panel-content h2{ width:320px; }
    .switch-panels .panel-content .details{ width:300px; min-height:100px;  }
    .switch-panels .tabs { width:470px; min-height:550px;  }
    .switch-panels .tab > label{ width:155px; }
    .switch-panels .tabs.inner label{ width:233px; }
}

@media only screen and (max-width:575px){
    .switch-panels{ margin:0 auto; padding:0; width:450px; min-height:700px; }
    .switch-panels .panel-content{ width:380px; }
    .switch-panels .panel-content h2{ width:240px; font-size:22px; }
    .switch-panels .panel-content .details{ width:240px; min-height:80px; }
    .switch-panels .panel-content .photo { margin-right:20px; right:0; text-align:right; }
    .switch-panels .panel-content .photo img{ width:65%; }
    .switch-panels .tabs{ width:100%; min-height:450px; }
    .switch-panels .tabs label{ width:125px; }
    .switch-panels .tabs.inner{ min-height:300px; }
    .switch-panels .tabs.inner label{ width:188px; }
    .switch-panels .panels blockquote{ padding:20px 30px; }
}

@media only screen and (max-width:460px){
    .switch-panels{ margin:0 auto; padding:0; width:340px; min-height:900px; }
    .switch-panels .panel{ float:left; }
    .switch-panels .panel > label{
        background-position:10px -14px;
        width:40px; padding:0; font-size:0;
    }
    .switch-panels .panel input[type=radio]:checked ~ label {
        background-position:10px 10px;
    }
    .switch-panels .panel-content{ width:300px; top:34px; }
    .switch-panels .panel-content h2{ width:300px; font-size:24px; }
    .switch-panels .panel-content .details{ width:300px; min-height:90px;}
    .switch-panels .panel-content .photo {
        position:relative; margin:0 auto; width:300px; text-align:center; top: 0;
    }
    .switch-panels .panel-content .photo img{ width:70%; }
    .switch-panels .tabs { min-height:400px; }

    .switch-panels .tabs label {
        width: 100px;
    }
    
    .switch-panels .tabs.inner{ min-height:280px; }
    .switch-panels .tabs.inner label{ width:148px; line-height:40px; font-size:12px; }
    .switch-panels .tabs.inner .tab-content{ top:40px; }
    .switch-panels .panels blockquote{ padding:20px 25px; }
}

@media only screen and (max-width:320px){
    .switch-panels{ width:320px; min-height:900px; }
    .switch-panels h1{ text-align:center; }
    .switch-panels .panel-content{ width:280px; left:0; }
    .switch-panels .panel-content h2{ width:270px; }
    .switch-panels .panel-content .details{ width:270px; }
    .switch-panels .panel-content .photo { width:270px; }
    .switch-panels .tabs label{ width:92px; }
    .switch-panels .tabs.inner label{ width:138px; }
}


/*	
	row-data:
	- Keys
*/		
.data-slide{ background:#d5edf8;background:#d5edf8; border-bottom:2px solid #808080; }
.data-slide .slide-heading{ margin:0; padding:20px 50px 20px 20px;   }
.data-slide .slide-heading:hover{ background:#b2e0f4; cursor:pointer; }

.data-slide .slide-heading h3{ margin:0; width:100%; }
	.data-slide .slide-heading h3 > .h-wrap,
	.data-slide.keys .slide-heading h3 > .h-wrap, .data-slide.members .slide-heading h3 > .h-wrap {
	padding-top: 5px; line-height: 24px; word-wrap:break-word;
	display:block !important; text-align:left !important; 
	float:left; width: 93.37349%; /* 775 / 830 */
	}

.data-slide .slide-heading .meta {
    margin-left: 50px;
    clear: both;
}

	.data-slide .slide-heading .meta ul{ margin:0; padding:0; list-style:none; }
	.data-slide .slide-heading .meta ul li{ padding:0 10px 0 0; display:inline; }
	.data-slide .slide-heading .meta ul li span{ padding:0 0 0 15px; display:inline-block; }

/* for keys page */
.data-slide.keys .slide-heading h3{ margin:0;}
	.data-slide.keys .slide-heading h3 > .h-wrap, .data-slide.members .slide-heading h3 > .h-wrap{
	display:inline-block !important; 
	width:63.8554%; /* 530 / 830 */
	}
.data-slide.keys .slide-heading h3 .ico-location.right, .data-slide.members .slide-heading h3 .ico-key-black.right{
    color: #3a3a3a;
	font:normal 16px/24px MuseoSans-100, Arial, Helvetica, sans-serif;
	}

.data-slide.keys .row-details.switch-panels .tab:first-child > label {
    margin: 0 13px;
}

.data-slide.keys .row-details.switch-panels .tab > label {
    margin: 0 13px;
}

.data-slide.keys .slide-heading .meta {
    width: 100%;
    margin-left: 0;
}

.data-slide.keys .slide-heading .meta ul {
    width: 63.8554%;
    display: inline-block;
    padding-left: 50px;
}

@media only screen and (max-width: 850px) {

    .data-slide.keys .row-details.switch-panels .tab > label {
        margin: 0 10px 0 0;
    }

    .data-slide.keys .row-details.switch-panels .tab:first-child > label {
        margin: 0 10px 0 10px;
    }

    .data-slide.keys .row-details.switch-panels .tab:last-child > label {
        margin: 0 0 0 10px;
    }
}

@media only screen and (max-width: 750px) {

    .data-slide.keys .row-details.switch-panels .tab > label {
        margin: 0 6px 0 0;
        padding-right: 5px;
    }

    .data-slide.keys .row-details.switch-panels .tab:first-child > label {
        margin: 0 6px 0 6px;
        padding-right: 5px;
    }

    .data-slide.keys .row-details.switch-panels .tab:last-child > label {
        margin: 0 0 0 6px;
        padding-right: 5px;
    }
}

@media only screen and (max-width: 590px) {

    .data-slide.keys .row-details.switch-panels .tab > label {
        margin: 0 5px 0 0;
        padding-right: 5px;
    }

    .data-slide.keys .row-details.switch-panels .tab:first-child > label {
        margin: 0 5px 0 5px;
        padding-right: 5px;
    }

    .data-slide.keys .row-details.switch-panels .tab:last-child > label {
        margin: 0 0 0 5px;
        padding-right: 5px;
    }
}

/* override default switch-panels */
/* remove x  button */
.row-details.switch-panels .remove{ 
background:none; border:0; padding:0;
font:11px 'MuseoSans-500', Arial, Helvetica, sans-serif;
color:#747474; line-height:normal; 
text-transform:uppercase; 
}	
	.row-details.switch-panels .remove span{ 
	background:#747474; text-transform:lowercase;
	margin-left:10px; color:#fff; border:1px solid #fff;
	width:15px; height:15px; font-size:11px; line-height:13px; 
	display:inline-block; 
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	}
.row-details.switch-panels .remove:hover{ color:#00a6df }
.row-details.switch-panels .remove:hover span{ background:#00a6df; }

.row-details.switch-panels{
background: none repeat scroll 0 0 #d5edf8;
width:auto; min-height:500px; height:auto; 
margin:0 auto; padding:20px 0 0 0; clear: both;
}	
	.row-details.switch-panels .tabs,
	.row-details.switch-panels .tabs label{
	background:transparent;
	}
		.row-details.switch-panels .tab-content .wrap{
		margin:0 auto; width:530px; 
		}

.row-details.switch-panels .tabs {
    width: 700px;
    height: auto;
    min-height: 450px;
}

.row-details.switch-panels .tabs.key-tabs {
    width: 800px;
}
	
	.row-details.switch-panels .tab > label{ 
	margin:0 30px; padding:0 10px 0 0  ; width:auto;
	line-height:40px; text-align:left;
	}
	.row-details.switch-panels .tab:first-child > label{	
	margin:0 28px 0 0;
	}	
	.row-details.switch-panels .tab:last-child > label{ 	
	margin:0 0 0 28px;
	}

.row-details.switch-panels .tab-content .tab-pane > h4,
.row-details.switch-panels .tab > label.for-mobile {
    visibility: hidden;
    display: none;
}

		/* for tabs inside data-slide */	
		.row-details.switch-panels .tab > label:hover,
		.row-details.switch-panels .tab input[type=radio]:checked ~ label{
		color:#07a7e0; border-bottom:2px solid #07a7e0; 
		}		
	.row-details.switch-panels .tab > label span { float:left; }

/******** 
	.data-slide .row-details content 
*/
/* people tab */
.row-details .table-list{
width:100%; 
border-bottom:1px solid #f6f6f6;
font:14px 'MuseoSans-100', Arial, Helvetica, sans-serif;
text-align:left;
}	
	.row-details .table-list .feed{
	width:100%; text-align:left;
	}
	.row-details .table-list .feed tr.info{
	background:#eff8fc; width:100%; 
	color:#9a9a9a; 
	}
	.row-details .table-list tr:nth-child(even){
	background:#f6f6f6; width:100%;
	}
	.row-details .table-list td{ padding:0; }
	.row-details .table-list .feed td{ padding:10px 15px; }
		.row-details .table-list .status{ width:120px; }
		.row-details .table-list .ctrl{ width:40px;}
		.row-details .tables .table-list + .pagination{ display:block; }

.row-details .table-list .comments {
    padding-top: 15px;
}

/* key tab - key booking form */
.row-details .form.secure .row{ max-width:100%; }
	.row-details .form.secure .field{ margin:0 auto; float:none; }
	.row-details .form.secure .field.has-modal{  position:relative; }
	.row-details .form.secure .field.has-modal .modal-map{  right:5px; }
	.row-details .form.secure .field .note{
	color:#8e8e8e; font:0.74em/1em 'MuseoSans-300', Arial, Helvetica, sans-serif;
 	}

/* Integrations Tab */
.actions .new-access-form .info,
.new.key .guest-form .info,
.kcform.edit-key-form .info {
    background: #EFF8FC none repeat scroll 0 0;
    font: 14px "MuseoSans-100", Arial, Helvetica, sans-serif;
    color: #9A9A9A;
    padding: 10px 15px;
}

/* location tab - cafe details */
.row-details .location{ margin:20px auto; padding:0 20px; }
.row-details .location.cafe-details{ font-size:14px; line-height:20px; }
.row-details .location.cafe-details .left, 
.row-details .location.cafe-details .right,
.row-details .location.cafe-details .notif p{ margin:0 auto; padding:0; }
.row-details .location.cafe-details .right{ padding: 0 0 40px 0; width:345px;  }
.row-details .location.cafe-details .sched{ margin:20px 0; }
.row-details .location.cafe-details .info span{ font-size:12px; line-height:18px;  }
.row-details .location.cafe-details .notif{ 
background:#dcf1fa url(C66PXx7LbDpjIIgWpbZ1LZl4yK9VI43TbtGHJS35ATk.png) no-repeat; 
background-size:130px 70px; background-position:80% 60%;
padding: 10px; width:500px; font-size:12px; line-height:18px;

}
.row-details .location.cafe-details .map-canvas {
height:222px; width: 270px;
}
.row-details .location.cafe-details .notif .border{ 
padding:0 25px 25px; border:1px solid #00a7df; 
}
.row-details .location.cafe-details .notif h6{ padding: 20px 0 0 0; }
.row-details .location.cafe-details .notif ol{ margin:0 0 0 15px; padding:0; }

.row-details .location.cafe-details .edit-location {
  font-size: 16px;
}

.row-details .location.cafe-details .button-panel {
  padding-top: 20px;
}

.switch-panels .tab.location-revenue-tab > label .map {
  background-position: 0 -175px;
}

.switch-panels .tab.location-revenue-tab > label:hover .map,
.switch-panels .tab.location-revenue-tab input[type='radio']:checked ~ label .map {
  background-position: 0 -131px;
}

.switch-panels .tab.location-usage-tab > label .key {
     background-position: 0 -261px;
 }

.switch-panels .tab.location-usage-tab > label:hover .key,
.switch-panels .tab.location-usage-tab input[type='radio']:checked ~ label .key {
    background-position: 0 -221px;
}

.row-details.switch-panels .location-usage-tab-pane .tabs.inner .tab > label {
    width: 350px;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 24px;
    border: none;
}

.switch-panels .location-usage-tab-pane .gmap-data.graph {
  margin-top: 10px;
}

.switch-panels .tabs.location-tabs .tabs.inner {
  margin-top: 0;
}

.row-details.switch-panels .tabs.location-tabs > .tab > input[type="radio"]:checked ~ label + .tab-content > .tabs.inner .tab > input[type="radio"]:checked ~ label + .tab-content {
    display: block;
}

.row-details.switch-panels .tabs.location-tabs .tabs.inner .tab > input[type="radio"]:checked ~ label + .tab-content {
  display: none;
  min-height: 0;
}

@media only screen and (max-width: 880px) {

    .data-slide.keys .slide-heading h3 > .h-wrap,
    .data-slide.keys .slide-heading .meta ul {
        width: 60.81081%; /* 450 / 740 */
    }

    .row-details.switch-panels .tabs.key-tabs {
        width: 100%;
    }
}

@media only screen and (max-width:865px){
.data-slide .slide-heading h3 > .h-wrap{ 
width:91.17647%; /* 620 / 680 */
}
}

@media only screen and (max-width: 825px) {

    .data-slide.keys .slide-heading h3 > .h-wrap,
    .data-slide.keys .slide-heading .meta ul {
        width: 56.5217%; /* 390 / 690 */
    }
}

@media only screen and (max-width: 768px) {

    .kcform.guest-form {
        margin: 0 50px !important;
    }

    .data-slide .slide-heading {
        padding: 20px 0;
    }

    .data-slide .slide-heading h3 {
        box-sizing: border-box;
    }

    .data-slide .slide-heading h3,
    .data-slide .slide-heading .meta,
    .data-slide .slide-heading .ico-location,
    .data-slide .slide-heading .ico-plug {
        padding: 0 20px;
    }

    /* override default switch-panels */
    .row-details.switch-panels .tabs {
        width: 100%;
    }

    /* location tab - cafe details */
    .row-details .location.cafe-details {
        margin: 0 30px;
        padding: 20px 0;
        width: auto;
    }

    .row-details .location.cafe-details .notif {
        float: none !important;
    }
}

@media only screen and (max-width: 715px) {
    
    .data-slide.keys .slide-heading h3 > .h-wrap,
    .data-slide.keys .slide-heading .meta ul {
        width: 52.63158%; /* 350 / 665 */
    }
}

@media only screen and (max-width: 660px) {

    .data-slide.keys .slide-heading h3 > .h-wrap,
    .data-slide.keys .slide-heading .meta ul {
        width: 50%; /* 300 / 600 */
    }
}

@media only screen and (max-width:640px){
    
    /*	row-data:	- Keys */
    .keys-index .data-slide .slide-heading {
        padding: 20px 0 45px;
        position: relative;
    }

    .keys-index .data-slide .slide-heading .ico-location {
        margin-left: 70px;
        clear: both;
        position: absolute;
        bottom: 20px;
        left: 0;
    }

.data-slide .slide-heading h3 > .h-wrap{ 
width:87.719298%; /* 500 / 570 */
}

    .data-slide.keys .slide-heading h3 > .h-wrap,
    .data-slide.keys .slide-heading .meta ul {
        width: 80%;
    }

/* location tab - cafe details */
.row-details .location.cafe-details .left,
.row-details .location.cafe-details .right.info{ 
width:47.27%; /* 260 / 550 */
}
}/* end 640px */

@media only screen and (max-width: 660px) {
    
    /* override default switch-panels */
    .row-details.switch-panels .tab > label {
        margin: 0 10px;
    }

    .row-details.switch-panels .tab:last-child > label {
        margin: 0 0 0 10px;
    }

    .row-details.switch-panels .key-tab-content {
        margin-top: 0;
    }
}

@media only screen and (max-width:540px){
    
    /*	row-data:	- Keys */
    .keys-index .data-slide .slide-heading .meta ul {
        display: none;
    }
    
.keys-index .data-slide .slide-heading .ico-location{
font-size:14px;
}

.row-details.switch-panels .tab-content .wrap {
margin:0px 20px; width:auto;
}
	.row-details .table-list .feed td {
		padding:10px;
	}
	.row-details .table-list .status {
	width:25.53191489361702%; /* 120 / 470 */
	}
	.row-details .table-list .ctrl,
	.row-details .table-list .ctrl .ico-info{
    width: 30px;
	}
	
/* location tab - cafe details */
.row-details .location.cafe-details .grid-2.notif { 
margin:20px auto; padding:0;
}

    .data-slide.keys .row-details.switch-panels .tab > label {
        visibility: hidden;
        display: none;
        border: 0;
    }

    .data-slide.keys .row-details.switch-panels .tab > label.for-mobile {
        margin: 0;
        padding: 0;
        border-bottom: 0;
        width: 40px;
        height: 40px;
        line-height: 40px;
        visibility: visible;
        display: inline-block;
    }

    .data-slide.keys .row-details.switch-panels .tabs input[type=radio]:checked ~ label.for-mobile {
        background: #f6f6f6;
        border-bottom: 0;
    }

    .data-slide.keys .row-details.switch-panels .tab-content {
        top: 40px;
        border-top: 2px solid #f6f6f6;
    }
}/* end 540px */

@media only screen and (max-width: 700px) {

    .switch-panels .tab-content {
        margin-top: 0;
    }

    .switch-panels .performance-panel .graph {
        height: 240px;
    }

    /* form inside secure form: +Access */
    .kcform.guest-form {
        margin: 0 50px 30px !important;
    }

    /*	row-data:	- Keys */
    .data-slide .slide-heading > h3 {
        font-size: 20px;
        height: auto;
    }

    .data-slide.members .slide-heading h3 > .h-wrap {
        padding-bottom: 10px;
    }

    .keys-index .data-slide .slide-heading .ico-location {
        background: none;
        margin-left: 50px;
    }

    .keys-index .data-slide .slide-heading .ico-location > .fas,
    .keys-index .data-slide .slide-heading .ico-location > .far,
    .keys-index .data-slide .slide-heading .ico-location > .fab {
        display: none;
    }

    .data-slide .slide-heading h3 > .h-wrap {
        font-size: 18px;
        font-weight: 600;
        width: 85.36585%; /* 350 / 410 */
    }

    .data-slide.keys .slide-heading h3 > .h-wrap,
    .data-slide.keys .slide-heading .meta ul {
        width: 70%;
    }

    /* override default switch-panels */
    .row-details.switch-panels .tab > label,
    .row-details.switch-panels .tab:first-child > label,
    .row-details.switch-panels .tab:last-child > label {
        visibility: hidden;
        display: none;
        border: 0;
    }

    /* use dot tab labels:*/
    .row-details.switch-panels .tab-content .tab-pane > h4 {
        margin: 20px 20px 0;
        visibility: visible;
        display: inline-block;
    }

    .row-details.switch-panels .tab > label.for-mobile,
    .row-details.switch-panels .tab:first-child > label.for-mobile,
    .row-details.switch-panels .tab:last-child > label.for-mobile {
        margin: 0;
        padding: 0;
        border-bottom: 0;
        width: 40px;
        height: 40px;
        line-height: 40px;
        visibility: visible;
        display: inline-block;
    }

    .row-details.switch-panels .tabs input[type=radio]:checked ~ label.for-mobile {
        background: #f6f6f6;
        border-bottom: 0;
    }

    .row-details.switch-panels .tab-content {
        top: 40px;
        border-top: 2px solid #f6f6f6;
    }

    .keys-index .row-details.switch-panels .tab-content .kcform {
        padding: 20px 0 0 0;
    }

    .keys-index .row-details.switch-panels .tab-content .kcform.settings {
        padding: 0;
    }

    .row-details.switch-panels .tab-content .wrap {
        margin: 0;
    }

    .row-details.switch-panels .tab-content .table-list {
        margin: 20px 0 0;
    }

    .row-details .table-list .feed td {
        padding: 10px 15px;
    }

    .row-details .table-list .status {
        width: 0;
        display: none;
        visibility: hidden;
    }

    .row-details .table-list .ctrl,
    .row-details .table-list .ctrl .ico-info {
        width: 40px;
    }

    /* location tab - cafe details */
    .row-details .location.cafe-details .left,
    .row-details .location.cafe-details .right.info,
    .row-details .location.cafe-details .grid-2.notif {
        margin: 0 auto 20px;
        padding: 0;
        width: 100%;
    }

    .row-details .location.cafe-details .left {
        width: 80%;
        float: none !important;
    }
}
/* end 580px */

@media only screen and (max-width:400px){
/*	row-data:	- Keys */
.data-slide .slide-heading h3 > .h-wrap{ 
line-height: 22px;
width:83.33333%; /* 275 / 330 */
}
/* override default switch-panels */
.row-details.switch-panels .tab-content .wrap {
margin:0; 
}
.row-details .table-list {
border-bottom:2px solid #f6f6f6;
}
.row-details .table-list .feed td {
padding:10px 15px;
}
.row-details .table-list td.ctrl{ padding: 10px 10px 10px 5px; }
.row-details .table-list .ctrl,
.row-details .table-list .ctrl .ico-info{
width:30px;
}

/* location tab - cafe details */
.row-details .location{ padding:0; }
.row-details .location.cafe-details .left{ 
margin: 0px auto; float:none !important; text-align: center;
}
.row-details .location.cafe-details .left{ width:100%; }
.row-details .location.cafe-details .left img{ width:100%; }
.row-details .location.cafe-details .right.info{ 
margin:10px auto 20px; padding:0; width:auto; 
}
.row-details .location.cafe-details .grid-2.notif{ 
background-size:100px 54px; 
background-position:95% 65%;
}
	.row-details .location.cafe-details .notif h6 {
	font-weight:normal; 
	}
}/* end 400px */

@media only screen and (max-width:360px){
/*	row-data:	- Keys */
.data-slide .slide-heading h3 > .h-wrap{ 
font-size:16px; line-height:20px;
width:77.2727%; /* 255 / 330 */
}
.data-slide .slide-heading .meta{ 
font-size:14px;
}

/* form inside secure form: +Access */
.kcform.guest-form{ margin:0 30px 30px 20px !important; }

.row-details .location.cafe-details {
    margin: 0px 10px;
    padding: 20px 0px;
    width: auto;
}

.row-details .location.cafe-details .grid-2.notif{ 
background:none;
}
}/* end 360px */	

@media only screen and (max-width:320px){
/*	row-data:	- Keys */
.data-slide .slide-heading > h3{ font-size:18px; }

    .data-slide.keys .slide-heading h3 > .h-wrap,
    .data-slide.keys .slide-heading .meta ul {
        width: 65%;
    }

/* form inside secure form: +Access */
.switch-options .field.date .date-wrapper .hasDatepicker{
width:85%;
}
.keys-index .row-details.switch-panels .tab-content .kcform {
margin:0 10px; padding: 20px 0px 0px; 
}

    .keys-index .data-slide .slide-heading .ico-location {
        bottom: 0;
    }

    .keys-index .data-slide .slide-heading .ico-location {
        position: relative;
        margin: 0;
    }

    .ico-location {
        min-width: inherit;
    }
}/* end 320px */

.tab-list {
    list-style: outside none none;
    display: table;
    margin: auto;
    padding-left: 0;
}

.tab-list > li {
    float: left;
    font-size: 13px;
}

.tab-content > .tab-pane {
    display: none;
    padding-bottom: 30px;
}