/*******************
// Table of Contents
// 1. Basic
// 2. TRC align
// 3. TRC text
// 4. TRC radius
// 5. TRC disabled
// 6. TRC size
// 7. TRC font awesome
// 8. TRC colors
********************/

/* 1. Basic */
.mk-trc{
	height:25px;
	line-height:25px;
	margin-bottom:5px;
        margin-top:5px;
        margin-left: 5px;
	display:inline-block;
}
.mk-trc label{
	height:inherit;
	display:block;
}
.mk-trc input[type="radio"],
.mk-trc input[type="checkbox"]{
	display:none;
}
.mk-trc i{
	float:left;
	width:55px;
	height:25px;
	margin-right:5px;
	font-style:normal;
	position:relative;
	background:#7f8c8d;
	display:inline-block;
	background:rgba(0,0,0,.3);
}
.mk-trc[data-style="radio"] i,
.mk-trc[data-style="check"] i{
	width:25px;
}
.mk-trc i:before,
.mk-trc i:after{
	content:'';
	position:absolute;
}
.mk-trc i:before{
	top:2px;
	left:2px;
	z-index:1;
	width:21px;
	height:21px;
	background:#eee;
	transition:all .2s ease-in-out 0s;
}
.mk-trc input:checked + label i{
	background:#2196f3;
}
.mk-trc input:checked + label i:before{
	left:32px;
}

.mk-trc[data-style="radio"] i:before{
	background:#ddd;
	border:2px solid transparent;
}
/* for radio */
.mk-trc[data-style="radio"] input:checked + label i:before{
	left:2px;
	border-color:#fff;
	background:#2196f3;
}
.mk-trc[data-style="radio"] input:checked + label i:before{
	left:2px!important;
}
/* for checkbox */
.mk-trc[data-style="check"] i{
	background:#ddd;
	border:2px solid #7f8c8d;
	border:2px solid rgba(0,0,0,.2)
}
.mk-trc[data-style="check"] i:before,
.mk-trc[data-style="check"] i:after{
	width:0;
	background:transparent;
	border-right:2px solid transparent;
}
.mk-trc[data-style="check"] i:before{
	top:10px;
	left:7px;
	height:6px;
	-webkit-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
.mk-trc[data-style="check"] i:after{
	top:5px;
	padding:0!important;
	left:12px!important;
	height:12px!important;
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
	transition:all .2s ease-in-out 0s;
}
.mk-trc[data-style="check"] input:checked + label i:before,
.mk-trc[data-style="check"] input:checked + label i:after{
	border-color:#fff;
}
.mk-trc[data-style="check"] input:checked + label i:before{
	left:7px;
}

/* 2. TRC align */
.mk-trc[data-align="right"] i{
	float:right;
	margin-right:0;
	margin-left:5px;
}

/* 3. TRC text */
.mk-trc[data-text="true"] i:after,
.mk-trc[data-text="true"] i:after{
	left:22px;
	color:#eee;
	height:25px;
	content:'NE';
	padding:0 4px;
	font-size:13px;
	font-weight:bold;
	line-height:25px;
	text-transform:uppercase;
	color:rgba(255,255,255,.8);
	transition:all .2s ease-in-out 0s;
}
.mk-trc[data-text="true"] input:checked + label i:after{
	left:0;
	content:'ANO';
}
/* text disable for radio and check */
.mk-trc[data-style="radio"] i:after,
.mk-trc[data-style="check"] i:after,
.mk-trc[data-style="radio"] input:checked + label i:after,
.mk-trc[data-style="check"] input:checked + label i:after{
	content:'';
}

/* 4. TRC radius */
.mk-trc[data-radius="true"] i,
.mk-trc[data-radius="true"] i{
	border-radius:25px;
}
.mk-trc[data-radius="true"] i:before,
.mk-trc[data-radius="true"] i:before{
	border-radius:inherit;
}
/* 5. TRC disabled */
.mk-trc input:disabled + label{
	color:#888;
	cursor:not-allowed;
}
.mk-trc input:disabled + label i{
	background:#ccc;
}
.mk-trc input:disabled + label i:after{
	color:#ddd;
}
/* for checkbox */
.mk-trc[data-style="check"] input:disabled + label i{
	background:#ddd;
	border-color:#ccc;
}

/* 6. TRC size */
.mk-trc[data-size="2"]{
	height:30px;
	line-height:30px;
}
.mk-trc[data-size="2"] label i{
	width:60px;
	height:inherit;
}
.mk-trc[data-size="2"][data-style="radio"] label i,
.mk-trc[data-size="2"][data-style="check"] label i{
	width:30px;
}
.mk-trc[data-size="2"] label i:after{
	left:28px;
	height:inherit;
	line-height:30px;
}
.mk-trc[data-size="2"] label i:before{
	width:26px;
	height:26px;
}
.mk-trc[data-size="2"][data-style="check"] label i:before{
	width:0;
	left:8px;
	top:13px;
	height:7px;
}
.mk-trc[data-size="2"][data-style="check"] label i:after{
	top:5px;
	left:15px!important;
	height:15px!important;
}
.mk-trc[data-size="2"][data-style="check"] label i:before,
.mk-trc[data-size="2"][data-style="check"] input:checked + label i:before{
    top:12px;
	left:8px;
    border-radius:0;
}
/* size 2 for font-awesome */
.mk-trc[data-size="2"] label i[data-before-check]:before,
.mk-trc[data-size="2"] label i[data-after-check]:before{
	line-height:26px;
}
.mk-trc[data-size="2"][data-style="check"] input:checked + label i[data-before-check]:before,
.mk-trc[data-size="2"][data-style="radio"] input:checked + label i[data-before-check]:before,
.mk-trc[data-size="2"][data-style="check"] input:checked + label i[data-after-check]:before,
.mk-trc[data-size="2"][data-style="radio"] input:checked + label i[data-after-check]:before{
	left:2px;
}
.mk-trc[data-size="2"][data-style="check"] label i[data-before-check]:before,
.mk-trc[data-size="2"][data-style="check"] label i[data-after-check]:before{
	width:inherit;
}

/* size 3 for toggle and radio */
.mk-trc[data-size="3"]{
	height:40px;
	line-height:40px;
}
.mk-trc[data-size="3"] label i{
	width:80px;
	height:inherit;
}
/* size 3 for check and radio */
.mk-trc[data-size="3"][data-style="radio"] label i,
.mk-trc[data-size="3"][data-style="check"] label i{
	width:40px;
}
.mk-trc[data-size="3"] input:checked + label i:before{
	left:42px;
}
.mk-trc[data-size="3"] label i:after{
	left:42px;
	font-size:16px;
	height:inherit;
	line-height:40px;
}
.mk-trc[data-size="3"] label i:before{
	width:36px;
	height:36px;
}
/* size 3  for check */
.mk-trc[data-size="3"][data-style="check"] label i:before{
	width:0;
	left:8px;
	top:13px;
	height:7px;
}
.mk-trc[data-size="3"][data-style="check"] label i:after{
	top:10px;
	left:21px!important;
	height:20px!important;
}
.mk-trc[data-size="3"][data-style="check"] label i:before,
.mk-trc[data-size="3"][data-style="check"] input:checked + label i:before{
    top:20px;
	left:12px;
    border-radius:0;
}
/* size 3 for font-awesome */
.mk-trc[data-size="3"] label i[data-before-check]:before,
.mk-trc[data-size="3"] label i[data-after-check]:before{
	font-size:24px;
	line-height:36px;
}
.mk-trc[data-size="3"][data-style="check"] input:checked + label i[data-before-check]:before,
.mk-trc[data-size="3"][data-style="radio"] input:checked + label i[data-before-check]:before,
.mk-trc[data-size="3"][data-style="radio"] input:checked + label i[data-after-check]:before,
.mk-trc[data-size="3"][data-style="check"] input:checked + label i[data-after-check]:before{
	left:2px;
}
.mk-trc[data-size="3"][data-style="check"] label i[data-before-check]:before,
.mk-trc[data-size="3"][data-style="check"] label i[data-after-check]:before{
	width:inherit;
}

/* 7. TRC font awesome */
.mk-trc i[data-before-check]:before,
.mk-trc i[data-before-check]:after,
.mk-trc i[data-after-check]:before,
.mk-trc i[data-after-check]:after{
	border:none;
}
.mk-trc i[data-before-check]:before{
	color:#7f8c8d;
	font-size:16px;
	line-height:20px;
	text-align:center;
	-webkit-transform:rotate(0);
	-ms-transform:rotate(0);
	transform:rotate(0);
	font-family:FontAwesome;
	content:attr(data-before-check);
}
.mk-trc input:checked + label i[data-after-check]:before{
	color:#fff;
	background:rgba(0,0,0,.1);
	content:attr(data-after-check);
}
.mk-trc[data-style="check"] input:checked + label i[data-after-check]:before{
	height:100%;
	background:transparent!important;
}
.mk-trc[data-style="check"] i[data-before-check]:before{
	width:inherit;
	height:inherit;
	line-height:25px;
	top:-2px!important;
	left:-2px!important;
}

/* 8. TRC colors */
/* common */
.mk-trc[data-color] input:disabled + label i:after{
	color:rgba(0,0,0,.3);
}
.mk-trc[data-color] i[data-before-check]:before{
	color:#fff;
	background:rgba(255,255,255,.2);
}
/* 8.1 red */
.mk-trc[data-color="red"] i{
	background:rgba(243,66,53,.6);
}
.mk-trc[data-color="red"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="red"] input:checked + label i:before{
	background:rgba(243,66,53,1);
}
.mk-trc[data-color="red"] input:disabled + label i{
	background:rgba(243,66,53,.4);
}
/* 8.2 pink */
.mk-trc[data-color="pink"] i{
	background:rgba(233,30,99,.6);
}
.mk-trc[data-color="pink"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="pink"] input:checked + label i:before{
	background:rgba(233,30,99,1);
}
.mk-trc[data-color="pink"] input:disabled + label i{
	background:rgba(233,30,99,.4);
}
/* 8.3 black */
.mk-trc[data-color="black"] i{
	background:rgba(54,63,69,.6);
}
.mk-trc[data-color="black"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="black"] input:checked + label i:before{
	background:rgba(54,63,69,1);
}
.mk-trc[data-color="black"] input:disabled + label i{
	background:rgba(54,63,69,.4);
}
/* 8.4 purple */
.mk-trc[data-color="purple"] i{
	background:rgba(156,39,176,.6);
}
.mk-trc[data-color="purple"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="purple"] input:checked + label i:before{
	background:rgba(156,39,176,1);
}
.mk-trc[data-color="purple"] input:disabled + label i{
	background:rgba(156,39,176,.4);
}
/* 8.5 deep-purple */
.mk-trc[data-color="deep-purple"] i{
	background:rgba(103,58,183,.6);
}
.mk-trc[data-color="deep-purple"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="deep-purple"] input:checked + label i:before{
	background:rgba(103,58,183,1);
}
.mk-trc[data-color="deep-purple"] input:disabled + label i{
	background:rgba(103,58,183,.4);
}
/* 8.6 indigo */
.mk-trc[data-color="indigo"] i{
	background:rgba(63,81,181,.6);
}
.mk-trc[data-color="indigo"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="indigo"] input:checked + label i:before{
	background:rgba(63,81,181,1);
}
.mk-trc[data-color="indigo"] input:disabled + label i{
	background:rgba(63,81,181,.4);
}
/* 8.7 blue */
.mk-trc[data-color="blue"] i{
	background:rgba(32,149,242,.6);
}
.mk-trc[data-color="blue"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="blue"] input:checked + label i:before{
	background:rgba(32,149,242,1);
}
.mk-trc[data-color="blue"] input:disabled + label i{
	background:rgba(32,149,242,.4);
}
/* 8.8 light-blue */
.mk-trc[data-color="light-blue"] i{
	background:rgba(3,169,244,.6);
}
.mk-trc[data-color="light-blue"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="light-blue"] input:checked + label i:before{
	background:rgba(3,169,244,1);
}
.mk-trc[data-color="light-blue"] input:disabled + label i{
	background:rgba(3,169,244,.4);
}
/* 8.9 cyan */
.mk-trc[data-color="cyan"] i{
	background:rgba(0,188,212,.6);
}
.mk-trc[data-color="cyan"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="cyan"] input:checked + label i:before{
	background:rgba(0,188,212,1);
}
.mk-trc[data-color="cyan"] input:disabled + label i{
	background:rgba(0,188,212,.4);
}
/* 8.10 teal */
.mk-trc[data-color="teal"] i{
	background:rgba(0,149,135,.6);
}
.mk-trc[data-color="teal"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="teal"] input:checked + label i:before{
	background:rgba(0,149,135,1);
}
.mk-trc[data-color="teal"] input:disabled + label i{
	background:rgba(0,149,135,.4);
}
/* 8.11 green */
.mk-trc[data-color="green"] i{
	background:rgba(76,175,80,.6);
}
.mk-trc[data-color="green"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="green"] input:checked + label i:before{
	background:rgba(76,175,80,1);
}
.mk-trc[data-color="green"] input:disabled + label i{
	background:rgba(76,175,80,.4);
}
/* 8.12 light-green */
.mk-trc[data-color="light-green"] i{
	background:rgba(139,195,74,.6);
}
.mk-trc[data-color="light-green"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="light-green"] input:checked + label i:before{
	background:rgba(139,195,74,1);
}
.mk-trc[data-color="light-green"] input:disabled + label i{
	background:rgba(139,195,74,.4);
}
/* 8.13 lime */
.mk-trc[data-color="lime"] i{
	background:rgba(205,220,57,.6);
}
.mk-trc[data-color="lime"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="lime"] input:checked + label i:before{
	background:rgba(205,220,57,1);
}
.mk-trc[data-color="lime"] input:disabled + label i{
	background:rgba(205,220,57,.4);
}
/* 8.14 yellow */
.mk-trc[data-color="yellow"] i{
	background:rgba(255,235,59,.6);
}
.mk-trc[data-color="yellow"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="yellow"] input:checked + label i:before{
	background:rgba(255,235,59,1);
}
.mk-trc[data-color="yellow"] input:disabled + label i{
	background:rgba(255,235,59,.4);
}
/* 8.15 amber */
.mk-trc[data-color="amber"] i{
	background:rgba(255,193,7,.6);
}
.mk-trc[data-color="amber"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="amber"] input:checked + label i:before{
	background:rgba(255,193,7,1);
}
.mk-trc[data-color="amber"] input:disabled + label i{
	background:rgba(255,193,7,.4);
}
/* 8.16 orange */
.mk-trc[data-color="orange"] i{
	background:rgba(255,152,0,.6);
}
.mk-trc[data-color="orange"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="orange"] input:checked + label i:before{
	background:rgba(255,152,0,1);
}
.mk-trc[data-color="orange"] input:disabled + label i{
	background:rgba(255,152,0,.4);
}
/* 8.17 deep-orange */
.mk-trc[data-color="deep-orange"] i{
	background:rgba(255,87,34,.6);
}
.mk-trc[data-color="deep-orange"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="deep-orange"] input:checked + label i:before{
	background:rgba(255,87,34,1);
}
.mk-trc[data-color="deep-orange"] input:disabled + label i{
	background:rgba(255,87,34,.4);
}
/* 8.18 brown */
.mk-trc[data-color="brown"] i{
	background:rgba(121,85,72,.6);
}
.mk-trc[data-color="brown"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="brown"] input:checked + label i:before{
	background:rgba(121,85,72,1);
}
.mk-trc[data-color="brown"] input:disabled + label i{
	background:rgba(121,85,72,.4);
}
/* 8.19 grey */
.mk-trc[data-color="grey"] i{
	background:rgba(158,158,158,.6);
}
.mk-trc[data-color="grey"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="grey"] input:checked + label i:before{
	background:rgba(158,158,158,1);
}
.mk-trc[data-color="grey"] input:disabled + label i{
	background:rgba(158,158,158,.4);
}
/* 8.20 blue-grey */
.mk-trc[data-color="blue-grey"] i{
	background:rgba(96,125,139,.6);
}
.mk-trc[data-color="blue-grey"] input:checked + label i,
.mk-trc[data-style="radio"][data-color="blue-grey"] input:checked + label i:before{
	background:rgba(96,125,139,1);
}
.mk-trc[data-color="blue-grey"] input:disabled + label i{
	background:rgba(96,125,139,.4);
}