.cqcc { 
	position: fixed; z-index: 99; bottom: 10px; right: 10px; width: 100%; width: calc( 100% - 20px ); max-width: 600px;
	max-height: 70%; overflow-y: auto;
	background: #fff; color: #000; font-size: 14px; padding: 20px 40px; box-sizing: border-box; text-align: left; box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.cqcc hr { height: 4px; margin: 20px 0; background: #f6f6f6; border: none; }
.cqcc a { color: #02aec3; }

.cqcc__close { position: absolute; top: 20px; right: 20px; }
.cqcc__closeBtn { background: transparent; padding: 4px 10px; font-weight: normal; border: none; color: black; font-size: 2em; opacity: 0.5; }

.cqcc__cat {display: flex; justify-content: space-between;}
.cqcc__cat .cqcc__txt {display: none;}
.cqcc__cat.open_option {display: block;}
.cqcc__cat.open_option .cqcc__txt {display: block;}

.cqcc__cat .cqcc__h {cursor: help;}
.cqcc__cat .cqcc__h::after { content: ''; display: inline-block; vertical-align: middle; position: relative; top: 2px; margin: 0 5px; width: 0; height: 0; border: 5px solid transparent; border-top-color: #02aec3; }
.cqcc__cat.open_option .cqcc__h::after { transform: rotate(180deg); top: -3px; } 

.cqcc__h { font-size: 16px; margin: 10px 0; font-weight: bold;}
.cqcc__more { display: none; }
.cqcc__txt { margin: 10px 0; }

.cqcc__btns { margin: 10px 0; display: flex;}
.cqcc__btn { background: transparent; padding: 9px 16px; font-weight: normal; border: 1px solid #ddd; color: black; margin: 2px;}
.cqcc__btn:hover { background: #ddd;}
.cqcc__switch { display: flex; align-items: center; cursor: pointer; }

.cqcc__more .cqcc__btn--deny { display:none; }

.cqcc__switch[data-key='basic'] {cursor: not-allowed;}
.cqcc__switch[data-key='basic'] .cqcc__switch-gauge {opacity: 0.5;}

.cqcc__switch-gauge { height: 26px; width: 40px; border-radius: 15px; border: 2px solid #eee; background: #ccc; position: relative; transition: background 100ms; margin-right: 20px; }
.cqcc__switch-gauge::after { content: ''; display: block; width: 22px; height: 22px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px; box-shadow: 0 0 5px rgba(0,0,0,0.2); transition: box-shadow 100ms, left 100ms; }
.cqcc__switch:hover .cqcc__switch-gauge::after { box-shadow: 0 0 5px rgba(0,0,0,0.5); }
.cqcc__switch-labelOn { display: none; }
.cqcc__switch-labelOff { display: inline; }
.cqcc__switch--active .cqcc__switch-gauge { background: #02aec3; }
.cqcc__switch--active .cqcc__switch-gauge::after { left: 16px; }
.cqcc__switch--active .cqcc__switch-labelOn { display: inline; }
.cqcc__switch--active .cqcc__switch-labelOff { display: none; }

@media only screen and (max-width: 600px) {
	.cqcc {padding: 20px;}
}