/* CSS Document */

 /* Settings panel Styles */
#cfont,#confont{width:161px; height:30px; line-height:30px; padding:3px; margin-left:84px; font: 12px Arial, Helvetica, sans-serif; color:#666;}
.settings-panel { 
	position: fixed; 
	top:30%;
	transform:translateY(-30%); 
	-webkit-transform:translateY(-30%); 
	-moz-transform:translateY(-30%); 
	-ms-transform:translateY(-30%); 
	left: 0px; 
	width: 200px; 
	background-color: #fff; 
	border: 1px solid #ebeff0; 
	padding: 10px; 
	margin-left: -225px; 
	z-index: 99; 
}

.settings-panel .open-buttton { 
	display: block; 
	width: 40px; 
	height: 40px;
	position: absolute; 
	top: 10px; 
	right: -62px; 
	cursor: pointer; 
	background-color: #fff; 
	color:#333;
	border: 1px solid #ebeff0; 
	border-left: none; 
	text-align: center;
	line-height: 40px;
}

.settings-panel .open-buttton:before {
	content:'\f013';
	font-family:'FontAwesome';
	font-size:24px;
 -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.settings-panel h5 { line-height: 12px; margin: 0px 0px 8px 0px; padding: 0px; color: #555; }
.settings-panel .patterns , .settings-panel .c_patterns  { overflow: hidden; margin: 0px 0px 0px -6px; padding: 0px 0px 3px 6px; }
.settings-panel .patterns li, .settings-panel .c_patterns li { width: 35px; height: 35px; border: 1px solid #e1e4e5; float: left; margin: 0px 0px 2px 5px; cursor: pointer; }


 /* Card Patterns Colors */
.settings-panel .c_patterns li.c1 { 	background-color:#add8df;  }
.settings-panel .c_patterns li.c2 { 	background-color:#c6dda9;  }
.settings-panel .c_patterns li.c3 { 	background-color:#ffe58e;  }
.settings-panel .c_patterns li.c4 { 	background-color:#fcccd3;  }
.settings-panel .c_patterns li.c5 { 	background-color:#b2c2e4;  }
.settings-panel .c_patterns li.default{ 	background-color:#add8df;  }

.settings-panel  h5{ 
	font-size:14px;
	color:#61b1ca;
	 font-weight:600;
	 padding:3px 0px;
}

.settings-panel { 
	font-size:10x;
}