/*
 * Copyright (c) 2018, Gnock
 * Copyright (c) 2018, The Masari Project
 *
 * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
 *
 * 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
 *
 * 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
 *
 * 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

body,html{margin:0;padding:0;min-height:100%;overflow-x:hidden}
div,p,input,label{box-sizing: border-box;}

*[v-cloak] {
	display: none;
}
*{
	transition: all 0.2s ease-out;
}

body{
	overflow-y: hidden;
	font-weight: normal;
	background: #f7f7f7;
}
body.menuHidden{
	overflow-y: auto;
}
@media screen and (min-width: 600px) {
	body.menuHidden,body{
		overflow-y: auto;
	}
}
@media screen and (max-width: 600px) {
	.onlyMobile{
		display: none;
	}
}
body.transparent{
	background: transparent !important;
}

.hidden{
	display: none !important;
}

.onlyWhenConnected{
	display: none !important;
}
.onlyNotConnected{
	display:block !important;
}
.connected .onlyWhenConnected{
	display: block !important;
}
.connected .onlyNotConnected{
	display: none !important;
}
.viewOnlyWallet .notViewOnlyWallet{
	display:none !important;
}

.hideOnNative{}
body.native .hideOnNative{
	display: none !important;
}
.hideOnNonNative{display: none !important;}
body.native .hideOnNonNative{
	display: initial !important;
}

#topBar{
	height:34px;line-height:34px;
	position: fixed;
	top:0;
	background: #30466C;
	color:white;
	font-size:16px;
	font-weight: bold;
	padding:0;
	z-index: 20;
	left:280px;
	display: none;
}
#topBar a.toggleMenu{
	color:white;
	display: inline-block;
	height: 100%;
	padding: 0 15px;
}

#main_logo img{
	max-width: 100%;
	max-height: 33px;
	display: inline-block;
	vertical-align: middle;
	margin: -5px -1px 0 -2px;
}

#main_logo {
	font-size: 24px;
}

@media screen and (max-width: 600px) {
	#topBar{
		display: block;
	}
}
body.menuHidden #topBar{
	left:0;
}
body.menuDisabled #topBar{
	display:none;
}

#menu{
	z-index:40;
	position: fixed;
	left:0;top:0;bottom: 0;
	width:280px;
	overflow: auto;
}
body.menuHidden #menu {
	left:-100%;
}
/* computer */
@media screen and (min-width: 600px) {
	body.menuHidden #menu,#menu{
		left:0;
	}
}

#menu{
	background: #30466C;
	color: white;
	padding:10px 15px;
}
.menuDisabled #menu{
	display: none;
}
#menu a{
	display: block;
	color:white;
	font-size: 20px;
	padding:14px 0;
	text-decoration: none;
	font-weight: 300;
}
#menu a:hover{
	border-right:5px solid white;
}
#menu a:first-child:hover{
	border-right: none;
}
#menu a:last-child{
	border-bottom:none;
}
#menu a .icon{display:inline-block;width:30px;text-align: center;}
#menu img{
	max-width: 100%;
	max-height: 33px;
	display: inline-block;
	vertical-align: middle;
	margin: -5px -2px 0 -2px;
}

#menu #menu_logo {
	font-size: 24px;
}

#pageLoading{
	position: fixed;
	left:60%;
	top:0;
	bottom:0;
	width: 100%;
	background: rgba(255,255,255,0.6);
	z-index: 10;
	text-align: center;
	color:black;
}
#pageLoading i{
	position: relative;
	top:50%;
	margin-top:-20px;
	font-size: 40px;
}
body.menuHidden #pageLoading{
	left:0;
}

#page{
	position: relative;
	left:280px;
}
body.menuHidden #page,body.menuDisabled #page{
	left:0;
}
/* computer */
@media screen and (min-width: 600px) {
	body.menuHidden #page,#page{
		left:0;right:0;
		margin-left: 280px;
	}
	body.menuDisabled #page{
		margin-left: 0;
	}
}

#copyright{
	padding:30px 0;
	color: #474E5D;
	font-size: 14px;
	padding-left:280px;
	text-align: center;
	width: 100%;
}
body.menuDisabled #copyright{
	padding-left: 0;
}
body.transparent #copyright{
	display: none;
}
/* computer */
@media screen and (max-width: 600px) {
	body.menuHidden #copyright{
		padding-left: 0;
		margin-left:0;
		left: 0;
	}
}


#copyright a{color: #474E5D;text-decoration: none;}
#copyright .links a, #copyright .links select{
	display:inline-block;
	margin-right: 10px;
}
#copyright .links{
	padding-top:10px;
}

.walletAmount {
	font-size: 30px;
}

.transactions table{
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

#accountTransactions {
	padding: 10px 35px;
}

.transactions .transaction{
	border-top: 1px solid #E2E2E2;
}
.transactions table tr:first-child {
	border-top: 0 none;
}

.transactions .transaction td{
	padding:8px 0;
}
.transactions td.noTransactions{
	text-align: center;
}

.transactions .transaction div{
	font-size: 16px;
}
.transactions .transaction .direction{
	font-size: 20px;
	width: 5%;
	padding-left:5px;
}
.transactions .transaction .timestamp{
	width: 45%;
	font-size: 18px;
}
.transactions .transaction .amount{
	font-size: 20px;
	width: 42%;
	text-align: right;
	padding-right:5px;
}
.transactions .transaction .amount.more{color:#6bc534;}
.transactions .transaction .amount.less{color:#5b5b5b;}
.transactions .transaction .moreInfo {
	font-size: 20px;
	width: 8%;
	text-align: right;
	padding-right: 10px;
	cursor: pointer;
}

.receiveTab .qrCode{
	text-align: center;
	padding-top:20px;
}
.receiveTab .qrCode img{
	width: 80% !important;
	height: auto !important;
	image-rendering: pixelated;
	display: inline-block !important;
	max-width: 300px;
}

.receiveTab .address{
	text-align: center;
	padding: 10px;
}
.receiveTab .fakeInput{
	border:1px solid gray;
}
.receiveTab .address input{
	width:calc(100% - 50px);
	font-size: 20px;
	border:none;
	padding:5px;
}
.receiveTab .address .copy{
	width:20px;
	font-size: 20px;
	height:100%;
	border-left:1px solid gray;
	padding:5px;
}


.tab{
	display: block;
	padding:20px 5px;
}
.tab .button{
	width: 100%;
}

.importKeys{

}

/*
.sendTab{

}
.sendTab .icon{
	text-align: center;
	padding-top:20px;
}
.sendTab .icon i{
	font-size: 60px;
	color:#146DBD;
}
.sendTab label{
	display: block;
	text-align: left;
	font-size: 18px;
}*/

.sendTab .destinationInput{
	display: block;
	width: 100%;
	border:1px solid #D9DCE7;
}
.sendTab .destinationInput input{
	width: calc(100% - 41px);
	border:none;
	padding: 5px;
	display: inline-block;
}
.sendTab .destinationInput .scanButton{
	width: 20px;
	border-left:1px solid #D9DCE7;
	padding: 18px 8px;
	display: inline-block;
	height: 100%;
}
/*
.sendTab .amountInput{
	display: block;
	width: 100%;
	padding:5px;
}

.sendTab .row{
	padding:20px 10px;
	text-align: center;
}
*/
.qrCodeScanningContainer{
	position: fixed;
	top:0;
	height:100vh;
	right:0;left:0;
	background: rgba(255,255,255,0.8);
	z-index: 100;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
.qrCodeScanningContainer.native{
	background: transparent !important;
	display: none;
}
.qrCodeScanningContainer.hidden{
	top:100vh;
	display: block !important;
}
.qrCodeScanningContainer .close{
	position: absolute;
	right:20px;
	top:20px;
	font-size: 30px;
	color:black;
	border:3px solid black;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	width: 40px;height:40px;
	line-height: 35px;
	text-align: center;
}
.qrCodeScanningContainer.native .close{
	color:white;
	border-color: white;
}
.qrCodeScanningContainer .close:hover {
	background: black;
	color: #146DBD;
}
.qrCodeScanningContainer h2{
	text-align: center;
	color: #146DBD;
	position: absolute;
	left: 0;
	right: 0;
	top: 20%;
}
.qrCodeScanningContainer .videoContainer{
	text-align: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
}
.qrCodeScanningContainer video{
	width: 80%;
	max-width: 400px;
	border:2px solid black;
}

/*
.button{
	display: inline-block;
	padding: 10px;
	font-size: 16px;
	background: none;
	border: 3px solid #005B95;
	color:#005B95;
	text-decoration: none;
}
.button:hover{
	background: #005B95;
	color:white;
}
*/


/*===================INDEX PAGE==============*/
.indexTab .container{
	width:940px;
	margin-left:auto;margin-right:auto;
}
@media screen and (max-width: 940px) {
	.indexTab .container{
		width:100%;
	}
}
.indexTab .mainBlock{
	min-height:100vh;
	position: relative;
	text-align: center;
	background-image: -webkit-linear-gradient(rgba(62, 75, 92, 0.70), rgba(62, 75, 92, 0.70)), url(../img/landing/balancing.jpg);
	background-image: -o-linear-gradient(rgba(62, 75, 92, 0.70), rgba(62, 75, 92, 0.70)), url(../img/landing/balancing.jpg);
	background-image: linear-gradient(rgba(62, 75, 92, 0.70), rgba(62, 75, 92, 0.70)), url(../img/landing/balancing.jpg);
	background-position: center center;
	background-size: cover;
	margin-bottom:0px;
}
body.native .indexTab .mainBlock {
	height: 100vh;
	margin-bottom: 0;
}
@media screen and (max-width: 940px) {
	.indexTab .mainBlock{
		margin-bottom:40px;
	}
}
.indexTab .mainBlock .step:first-child{
}
.indexTab .mainBlock .headline{
	margin-top: 30vh;
}
@media screen and (max-width: 940px) {
	.indexTab .mainBlock .headline{
		margin-top: 15vh;
	}
}
.indexTab .mainBlock h1{
	display: inline-block;
	color:white;
	padding: 0 20px;
	margin-bottom: 0;
	font-size: 40px;
}

.indexTab .mainBlock h2{
	color:white;
	font-size:18px;
}
.indexTab .mainBlock > .actions{
	text-align: left;
	color:white;
	padding:20px;
	vertical-align: middle;
}
body.native .indexTab .mainBlock > .actions{
	text-align: center;
}
.indexTab .mainBlock > .actions img{
	max-height: 35px;
}
.indexTab .mainBlock > .actions .btn{
	/*padding:3px;*/
	background: white;
	margin-top: 0;
	margin-right: 20px;
}
.indexTab .mainBlock > .actions .btn.basic{
	background: none;
	color:white;
	border-color: white;
}
.indexTab .mainBlock > .actions .right{
	text-align: right;
	float:right;
}
@media screen and (max-width: 940px) {
	.indexTab .mainBlock > .actions .right{
		float:none;
		margin-top:15px;
	}
}
.indexTab .notesBlock{
	position: absolute;
	bottom:0;
	-webkit-transform: translateY(-50px);
	-moz-transform: translateY(-50px);
	-ms-transform: translateY(-50px);
	-o-transform: translateY(-50px);
	transform: translateY(-50px);
	left:0;right:0;
}
@media screen and (max-width: 940px) {
	.indexTab .notesBlock{
		position: relative;
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
		-ms-transform: translateY(0px);
		-o-transform: translateY(0px);
		transform: translateY(0px);
		padding:30px 0;
	}
}
.indexTab .notes{
	width:20%;
	display: inline-block;
	margin-right:6%;
	vertical-align: middle;
}
.indexTab .notes:last-child{
	margin-right: 0;
}
@media screen and (max-width: 940px) {
	.indexTab .notes, .indexTab .notes:last-child{
		width: auto;
		display: block;
		margin:	20px 5%;
	}
}
.indexTab .notes .block{
	height: 180px;
	background: transparent;
	text-align: center;
	padding-top: 36px;
	padding-bottom: 31px;
}
.indexTab .block i{
	font-size: 40px;
	color:#00A0E3;
}
.indexTab .block h3{
	color:white;
	font-size: 20px;
	margin: 0;
	margin-bottom:5px;margin-top:8px;
	font-weight: normal;
}
.indexTab .block a{
	text-decoration: none;
}
.indexTab .block h4{
	color:white;
	font-size: 12px;
	margin: 0;
	font-weight: normal;
}
@media screen and (max-width: 940px) {
	.indexTab .block h3,
	.indexTab .block h4{
		color:#2D5587;
	}
}

.indexTab .walletImportSelector{
	z-index: 90;
	position: fixed;
	padding-top:10%;
	top:0;bottom:0;left:0;right:0;
	background:rgba(0,0,0,0.9);
}
.indexTab .walletImportSelector .close{
	position: absolute;
	right:20px;
	top:20px;
	font-size: 30px;
	color:white;
	border:3px solid white;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	width: 40px;height:40px;
	line-height: 35px;
	text-align: center;
}
.indexTab .walletImportSelector .close:hover{
	background: white;
	color:#146DBD;
}
.indexTab .walletImportSelector .container{
	max-height: 80%;
	margin:0 10%;
}
.indexTab .walletImportSelector .container .text{
	color:white;
	font-weight: bold;
	font-size:24px;
	margin-bottom:20px;
	text-align: center;
}
.indexTab .walletImportSelector .container .options{
	display: block;
	max-width: 1000px;
}
.indexTab .walletImportSelector .container .walletOption{
	display: inline-block;
	width: 30%;
	margin-right:4%;
	/*background: white;*/
	color:white;
	margin-bottom: 20px;
	text-align: center;
}
.indexTab .walletImportSelector .container .walletOption .subcontainer{
	display: inline-block;
	padding:15px 20px;
	border:3px solid white;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
.indexTab .walletImportSelector .container .walletOption .subcontainer:hover{
	background: white;
	color:#146DBD;
}
.indexTab .walletImportSelector .container .walletOption i{
	font-size: 60px;
	margin-bottom:10px;
}
@media screen and (max-width: 600px) {
	.indexTab .walletImportSelector .container .walletOption{
		display: block;
		width: 100%;
		margin-right: 0;
	}
}
.indexTab .walletImportSelector .container .walletOption:last-child{
	margin-right: 0;
}

/*=====================================*/
body{
	font-family: "Roboto-Regular", sans-serif;
	font-weight: normal;
	font-size: 14px;
	line-height: 1;
	color: #000;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}

.body-root{
	padding:0 30px;
	min-height: 80vh;
}
.body-header {
	display: table;
	width: 100%;
	margin-top: 36px;
	padding-bottom: 20px;
	border-bottom: 1px solid #D6DDED;
}
.body-header .header-title {
	font-size: 26px;
	color: #474E5D;
	line-height: 1;
	margin-bottom: 15px;
}
.body-header .header-title-icon {
	vertical-align: top;
	margin-right: 3px;
}
.body-header .header-subtitle {
	font-size: 14px;
	color: #474E5D;
	line-height: 26px;
}
.body-header .header-subtitle a {
	font-size: 14px;
	color: #474E5D;
	line-height: 1;
}

.body-content{
	padding-top: 30px;
}

.panel{
	background: #FFF;
	border-radius: 5px;
	padding: 32px 40px 32px 40px;
	margin-bottom: 30px;
	-webkit-box-shadow: 0 10px 25px 0 #DFE3EC;
	box-shadow: 0 10px 25px 0 #DFE3EC;
	position: relative;
}
.panel.nopadding{
	padding:0;
}
.panel a{
	text-decoration: none;
	color:#474E5D;
}
.panel.inline {
	background: transparent;
	padding: 40px 40px 32px 40px;
	border: 1px solid #D6DDED;
	box-shadow: none;-webkit-box-shadow: none;
}
.panel .body{}
.panel .header-title{
	font-size: 20px;
	color: #474E5D;
	margin-bottom: 22px;
}
.panel.nopadding .header-title{
	padding: 32px 40px 0 40px;
}
.panel .body > .content{
	color:#7c818c;
	line-height: 26px;
	word-wrap: break-word;
}
.panel .body > .content .actions{
	padding-top:30px;
}

.step{
	margin-bottom:20px;
}
.step > .title{
	font-size: 18px;
}
.step > .content{}

.message{
	position: relative;
	min-height: 1em;
	margin: 1em 0;
	background: #f8f8f9;
	padding: 1em 1.5em;
	line-height: 1.4285em;
	color: rgba(0,0,0,.87);
	-webkit-transition: opacity .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
	transition: opacity .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
	transition: opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;
	transition: opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease,-webkit-box-shadow .1s ease;
	border-radius: .28571429rem;
	-webkit-box-shadow: 0 0 0 1px rgba(34,36,38,.22) inset, 0 0 0 0 transparent;
	box-shadow: 0 0 0 1px rgba(34,36,38,.22) inset, 0 0 0 0 transparent;
	word-break: break-all;
}
.message > .title{font-weight: 700;padding-bottom:8px;}
.message > .content{font-size:1em;}
.message.error{background-color: #fff6f6;color: #9f3a38;}
.message.warning{background-color: #fffaf3;color: #573a08;}


/*=================BUTTONS====================*/
.btn{
	text-decoration: none;
	background:#e0e1e2 none;
	cursor: pointer;
	color: rgba(0,0,0,.6);
	border: none;
	display: inline-block;
	font-weight: 400;
	letter-spacing: .05em;
	margin-top: .5rem;
	margin-bottom: 0;
	text-align: center;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	vertical-align: middle;
	font-size: 1.07rem;
	line-height: 1.4;
	border-radius: .28571429rem;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all .25s ease;
	-o-transition: all ease .25s;
	transition: all .25s ease;
	padding: .78571429em 1.5em .78571429em;
}
.btn.basic{background:none;color:#e0e1e2;border:2px solid #e0e1e2;}
.btn.basic:hover{background:none !important;color:#e0e1e2;border:2px solid #e0e1e2;}
.btn:hover{background-color: #cacbcd;color: rgba(0,0,0,.8);}

.btn.primary{color: #fff;background-color: #2185d0;}
.btn.primary.basic{color: #2185d0;border-color: #2185d0;}
.btn.primary:hover {background-color: #1678c2;}
.btn.primary.basic:hover{color: #1678c2;border-color: #1678c2;}

.btn.teal{background-color: #00b5ad;color: #fff;}
.btn.teal:hover{background-color: #009c95;color: #fff;}

.btn.green{background-color: #4cb860;color: #fff;}
.btn.green:hover{background-color: #499c4e;color: #fff;}

.btn:disabled,.btn.disabled{
	cursor: default;
	opacity: .45!important;
	background-image: none!important;
	-webkit-box-shadow: none!important;
	box-shadow: none!important;
	pointer-events: none!important;
}

.btn.mini{font-size: .78571429rem;}
.btn.tiny{font-size: .85714286rem;}
.btn.small{font-size: .92857143rem;}
.btn.medium{font-size: 1rem;}
.btn.large{font-size: 1.14285714rem;}
.btn.big{font-size: 1.28571429rem;}
.btn.huge{font-size: 1.42857143rem;}
.btn.massive{font-size: 1.71428571rem;}


/*==================FORMS===================*/
.field{
	margin-bottom:15px;
	position: relative;
}
.field label {
	display: block;
	font-weight: 400;
	margin-bottom:5px;
}
.field input, .field .subfield, .field select{
	border: 1px solid #D9DCE7;
	border-radius: 5px;
	font-size: 14px;
	padding: 17px 16px 15px;
	width: 100%;
	color: rgba(71, 78, 93, 0.7);
	background: #FFFFFF;
}

.field input:read-only, .field input.readonly, .field .subfield.readonly{
	background:#f8f8f9;
}

.field input[type=checkbox],
.field input[type=radio]{
	width: auto;
}
.field .subfield{
	padding: 0;
}
.field .subfield input{
	width: calc(100% - 41px);
	border:none;
	padding: 5px;
	display: inline-block;
}
.field .subfield input.twoActions {
	width: calc(100% - 82px);
}

.field .subfield .action{
	width: 20px;
	border-left:1px solid #D9DCE7;
	padding: 18px 8px;
	display: inline-block;
	height: 100%;
}

.field.checkbox input{
	position: absolute;
	opacity: 0;
	z-index: 8;
	width: 3.5rem;
	height: 1.5rem;
}
.field.checkbox label{
	margin-left:70px;
}
.field.checkbox label:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 17px;
	height: 17px;
	content: '';
	background: #fff;
	border-radius: .21428571rem;
	-webkit-transition: border .1s ease,opacity .1s ease,-webkit-transform .1s ease,-webkit-box-shadow .1s ease;
	transition: border .1s ease,opacity .1s ease,-webkit-transform .1s ease,-webkit-box-shadow .1s ease;
	transition: border .1s ease,opacity .1s ease,transform .1s ease,box-shadow .1s ease;
	transition: border .1s ease,opacity .1s ease,transform .1s ease,box-shadow .1s ease,-webkit-transform .1s ease,-webkit-box-shadow .1s ease;
	border: 1px solid #d4d4d5;

	display: block;
	position: absolute;
	content: '';
	z-index: 1;
	-webkit-transform: none;
	transform: none;
	border: none;
	top: 0;
	background: rgba(0,0,0,.05);
	-webkit-box-shadow: none;
	box-shadow: none;
	width: 3.5rem;
	height: 1.5rem;
	border-radius: 500rem;
}
.field.checkbox input:checked~label:before{
	background-color: #2185d0;
}
.field.checkbox label:after{
	background: #fff -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));
	background: #fff -webkit-linear-gradient(transparent,rgba(0,0,0,.05));
	background: #fff linear-gradient(transparent,rgba(0,0,0,.05));
	position: absolute;
	content: ''!important;
	opacity: 1;
	z-index: 2;
	border: none;
	-webkit-box-shadow: 0 1px 2px 0 rgba(34,36,38,.15), 0 0 0 1px rgba(34,36,38,.15) inset;
	box-shadow: 0 1px 2px 0 rgba(34,36,38,.15), 0 0 0 1px rgba(34,36,38,.15) inset;
	width: 1.5rem;
	height: 1.5rem;
	top: 0;
	left: 0;
	border-radius: 500rem;
	-webkit-transition: background .3s ease,left .3s ease;
	transition: background .3s ease,left .3s ease;
}
.field.checkbox input:checked~label:after{
	left: 2.15rem;
}


/*===================TEXT=================*/
.center,.tc{text-align:center}
.left,.tl{text-align:left}
.right,.tr{text-align:right}
.clearBoth,.cb{clear:both;}

.text.loader{
	min-width: 2.28571429rem;
	padding-top: 3.07142857rem;
	position: relative;
	display: inline-block;
	margin: 0;
	text-align: center;
	z-index: 1000;
}
.text.loader:after, .text.loader:before {
	width: 2.28571429rem;
	height: 2.28571429rem;
	margin: 0 0 0 -1.14285714rem;
}
.text.loader:before{
	position: absolute;
	content: '';
	top: 0;
	left: 50%;
	border-radius: 500rem;
	border: .2em solid rgba(0,0,0,.1);
}
.text.loader:after{
	border-color: #767676 transparent transparent;
	position: absolute;
	content: '';
	top: 0;
	left: 50%;
	-webkit-animation: loader .6s linear;
	animation: loader .6s linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	border-radius: 500rem;
	border-color: #767676 transparent transparent;
	border-style: solid;
	border-width: .2em;
	-webkit-box-shadow: 0 0 0 1px transparent;
	box-shadow: 0 0 0 1px transparent;

	width: 2.28571429rem;
	height: 2.28571429rem;
	margin: 0 0 0 -1.14285714rem;
}
@-webkit-keyframes loader{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes loader{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}

/*===================PROGRESS=================*/
.progress{
	height:24px;
	border-radius: .28571429rem;
	position: relative;
	display: block;
	max-width: 100%;
	background: rgba(0,0,0,.1);
	margin-bottom:1.5rem;
	text-align: center;
}
.progress .bar{
	display: block;
	position: relative;
	width: 0;
	min-width: 2em;
	background: #888;
	border-radius: .28571429rem;
	-webkit-transition: width .1s ease,background-color .1s ease;
	transition: width .1s ease,background-color .1s ease;
	height:24px;line-height:24px;
	color:white;
}
.progress .label{
	display: block;
}