body{
	background-color: #F8F6F3;
	font-size:16px;
}

.header{
	font-family: 'Fjalla One', sans-serif;
}

.sub-header,.form-element,p.header-section,.notice,.popover-title,.popover-content,.random-check,#okay,
#view,.modal-title,.checkbox>label,#gen,#cleaner,.conversion-area>p,footer>p{
	font-family: 'Lato', sans-serif;
}

.header{
	font-size: 1.4em;
}

.header,p.header-section{
	color: #598DBB;
}

.sub-header{
	color: #446180;
	letter-spacing: 1px;
	font-size: 13px;
}

.header-section{
	background: #FDF8F7;
	padding-top: .3em;
	padding-bottom: .4em;
	padding: right:.2em;
	padding-right: .3em;
	padding-left: .3em;
	border: 1px solid #D8D8D8;
}

.header-section,.main-section{
	max-width: 600px;
	margin: 10px auto 0;
}

@media(max-width:767px){
	.header-section,.main-section{
	    max-width:90%;
    }
}

.form-element{
	border-radius:2px;
}

.form-element{
	padding: 4px 8px;
	font-size: 11px;
	line-height: 1.42857143;
	color: #484747;
	height:28px;
	letter-spacing: 1px;
	border: 1px solid rgba(95, 177, 232, 0.68);
	background-color: #FFFEF7;
}

textarea.form-element{
	resize:none;
	margin-bottom:10px;
}

.form-control:focus {
    border-color: #4C4848;
}

#output{
	margin-top: 10px;
	background: #FFFCFC;
	min-height:20px;
	padding: 6px;
	border: 1px solid #E6E6E6;
	max-height:700px;
	overflow:auto;
	cursor:crosshair;
	z-index:1000;
	resize:both;
	border-radius:2px;
}

select>option{
    font-size: 1.2em;
}

.settings,p.header-section,#output{
	margin-bottom: 10px;
}

p.header-section{
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	word-wrap:break-word;
	/* padding: 1px; */
}

#color{
	height: 28px;
	width:100%;
}

.code{
	margin: 10px auto 40px;
	background: #FBFBFB;
	border: 1px solid #D6D6D6;
}

code{
	color:black;
	background-color: transparent;
}

.css-code-section,.css-code{
    padding: 1.5em 1em 0 1em;
    margin: -8px 0 0 0;
    border-radius: 2px;
}

.css-code-section{
	background: #FFFFF4;
	border: 1px solid #D2D2D2;
	min-height: 350px;
}

@media(min-width:992px){
	
	.code{
		max-width: 85%;
	}
}

@media(min-width:768px) and(max-width:991px){
	
	.code{
		max-width: 95%;
	}
}

.icon-left{
	margin-right: 5px;
	position: relative;
	top: 1px;
}

.css-code-value{
	color: #C92626;
	/* font-size: .9em; */
}

p.property{
	margin-bottom: -1px;
	background: #FFFDEF;
	border: 1px solid #D0D0D0;
	padding: 4px 10px 4px;
	border-radius: 0px;
	font-size: .93em;
}

.notice{
	margin-top: 10px;
	border-radius: 1px;
	background-color: #F0F2F3;
	border: 1px solid #CCCCCC;
	font-size: 1em;
	letter-spacing: 1px;
	min-height:50px;
	font-size:.875em;
}

.mover{
	display:none;
}

.glyphicon-move{
	color:#787272;
	font-size:12px;
}

#reset,#copy,#random,#add,#toggle-btn{
	position:relative;
	top: -20px;
}

#view{
	margin-top:15px;
}

#reset,#copy,#random,#add,#view,#okay,#clear-stack,#gen,#cleaner,#toggle-btn{
	padding: 3px 10px;
	font-size: 12px;
	color: #FFFFFF;
	background: #4F9DDE;
	border-radius: 1px;
	min-width: 86px;
	margin-bottom: 6px;
	-webkit-transition: background .4s;
	transition: background .4s;
	margin-right: 5px;
}

#random{
	background: #B55D5D;
}

#reset:hover,#copy:hover,#random:hover,#add:hover,#view:hover,#okay:hover,#clear-stack:hover,#gen:hover,
#cleaner:hover,#toggle-btn:hover{
	background: #3482A9;
}

.btn-wrapper {
    margin-left: 8px;
}

@media(max-width:767px){
	#reset,#copy,#random{
		margin-top: 5px;
	}
}
.popover {
    border: 1px solid #B5B5B5;
    border-radius:2px;
    box-shadow:none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
}

.popover-title{
    text-align:center;
    font-size: 14px;
    background: #FFF9ED;
    display:none;
}
  
.popover-content{
	color: #000000;
	padding: 12px;
	font-size: 12px;
	background: #fffcfc;
}

.input-group-addon{
	border-radius: 2px;
	background: #fdf8f7;
}

.input-group-addon>span{
	min-height: 12px;
	min-width: 20px;
	border-radius: 2px;
}

.random-check{
	background-color: #FCFAF8;
	border: 1px solid #DCDCDC;
	color: #67696F;
	font-size: 13px;
	border-radius: 2px;
}

.checkbox-inline-random+.checkbox-inline-random{
	margin-left:0;
	margin-right:10px; 
}

.checkbox-inline{
	margin-right:10px;
	margin-left:0;
}

.checkbox label{
	font-size: 11px;
	letter-spacing: 1px;
	word-wrap: break-word;
}

.checkbox-area{
	background: #FAFAFA;
	border: 1px solid #CECECE;
}

@media(min-width:768px){
	.random-check{
        padding: 0px 10px 9px;
 }

	.checkbox-area{
		max-width: 93%;
        margin: auto;
	}

	.conversion-area label{
		padding: 0 1.8em 0 1.8em;
	}
}

.list-inline-check{
	max-width: 200px;
	margin: 0px auto -5px;
	text-align: center;
}

input[type=checkbox], input[type=radio] {
    margin: 2px 0 0;
}

.checkbox{
	margin-bottom:8px;
}

.button-list{
	margin-bottom: -15px;
	/* margin-left: 8px; */
	text-align:center;
}

.modal-content{
    background-color: #FFFAF4;
    border-radius: 2px;
    box-shadow: none;
    overflow:auto;
}

.modal-body{
	max-height:500px;
	overflow:auto;
}

.saved-styles-div>p{
	margin-bottom:0;
}

#css-code-container,.conversion-area{
	background: #FFFFF9;
	padding: .8em;
	border: 1px solid #E4E4E4;
	font-size: .875em;
	border-radius: 2px;
}

#view,#gen,#cleaner{
	margin-left: 0;
}

#cleaner{
	min-width: 111px;
}

.conversion-area>p{
	color: #1B1A1A;
	font-size: .9em;
	letter-spacing: 1px;
}

.form-element[disabled], .btn[disabled]{
    opacity: .6;
    background: transparent;
}

.property-remove{
	cursor:pointer;
	color: #946565;
	font-size: .7em;
	-webkit-transition: font-size .2s;
	transition: font-size .2s;
	margin-left: 10px;
	padding: 4px;
	background: #E8B7B7;
	border-radius: 50%;
}

.property-remove:hover{
	color:#DC4242;
}

@media(min-width:820px) and (max-width:880px){
	p.property{
		font-size:.93em;
	}
}

.button-list>li {
    padding-right: 0px; 
    padding-left: 0px;
}

.title-img{
	max-width: 34px;
    margin-right: 10px;
    margin-top: -10px;
}

footer>p{
	text-align: center;
    color: #598DBB;
    border-top: 1px solid #CCCCCC;
    padding-top: 5px;
    max-width: 250px;
    margin: 0 auto 10px;
}