/****************************************************** Fonts */
@font-face {
  font-family: 'Gotham';
  src: url('font/Gotham-Book.eot');
  src: url('font/Gotham-Book.eot?#iefix') format('embedded-opentype'),
  url('font/Gotham-Book.woff') format('woff'),
  url('font/Gotham-Book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('font/Gotham-Bold.eot');
  src: url('font/Gotham-Bold.eot?#iefix') format('embedded-opentype'),
  url('font/Gotham-Bold.woff') format('woff'),
  url('font/Gotham-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/****************************************************** Body */
html, body{
  background-color: #eee;
	font-family: 'Montserrat';
	font-size:15px;
	color:#434343;
}
body{
	height:100%;
	
	
}




/****************************************************** Parameter */
a {
	outline: none;
	text-decoration:none;
}
:focus {
	-moz-outline-style: none;
}
*:focus {
    outline: 0;
}
.separate{
	clear:both;
}

.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor:default;
}

.display_none{
	display:none!important;
}

/****************************************************** Font */


.fsa{ font-size:12px; }
.fsb{ font-size:15px; }
.fsc{ font-size:17px; }
.fsd{ font-size:19px; }
.fse{ font-size:21px; }
.fsf{ font-size:30px; }

.fca{ color:#00baac;}
.fcb{ color:#ffffff;}
.fcc{ color:#a5a5a5;}
.fcd{ color:#000;}

.f_b{	font-weight:bold;}
.f_u{	text-transform:uppercase;}

.f_text{
	font-size:15px;
	letter-spacing:1px;
	line-height:22px;
}



/****************************************************** input  */

input, select{
	padding:7px;
	border:solid 1px #e7e8e9;
	font-size:15px;
	color:#686b6d;
	background-color:white;
}
/****************************************************** Asset */

/* cursor */
.asset_cursor{
  width: 38px;
  height: 20px;
  display: inline-block;
  position: relative;
}

.asset_cursor div{

	transition-timing-function: ease-in-out;
	transition-duration: .2s;
}

.asset_cursor .bull{
	position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 25px;
  top: 5px;
  left:0px;
  z-index: 3;
  background-color: #818181;
  border: solid 1px #6f6f6f;
	box-shadow: 1px 1px 2px #ccc;
}

.asset_cursor .bar{
	position: absolute;
  width: 100%;
  height: 14px;
  border-radius: 12px;
  background-color: #bcbcbc;
  z-index: 2;
  top: 9px;
}

.asset_cursor.active .bull{
  left: 15px;
  background-color: #00baac;
  border: solid 1px #039f93;
	box-shadow: 1px 1px 2px #ccc;
}

.asset_cursor.active .bar{
  background-color: #78dad3;
}


/* Checkbox */
.asset_checkbox{
	width: 25px;
  height: 20px;
  padding-top: 5px;
  font-size: 13px;
	
	border:solid 1px #bbb;
	background-color:#fff;
	color:#fff;
	display:inline-block;
	text-align:center;
}

.asset_checkbox i{
	opacity:0;
}
.asset_checkbox.on{
	border:solid 1px #14816b;
	background-color:#2d8f7b;
}

.asset_checkbox.on i{
	opacity:1;
}

/* round color */
.asset_round_color{
	width: 23px;
  height: 19px;
  padding-top: 4px;
  font-size: 13px;
	
	border:solid 1px #fff;
	background-color:#fff;
	color:#fff;
	display:inline-block;
	text-align:center;
	border-radius:25px;
}



/* Asset weekday */

.asset_weekday{
	background-color:#bfbfbf;
  width: 30px;
  height: 25px;
	padding-top:5px;
  border-radius: 30px;
  display: inline-block;
	text-align:center;
	margin:0 5px 0 0;
}

.asset_weekday.on{
	background-color:#2d8f7b;
}

.asset_weekday span{
  font-size: 16px;
  color: #fff;
  text-transform:uppercase;
}

.asset_weekday input{
	display:none;
}

	

/* css ------------------ checkbox custom */

.cc_container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.cc_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.cc_checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.cc_container:hover input ~ .cc_checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.cc_container input:checked ~ .cc_checkmark {
  background-color: #2d8f7b;
}

/* Create the checkmark/indicator (hidden when not checked) */
.cc_checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.cc_container input:checked ~ .cc_checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.cc_container .cc_checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* css ------------------ checkbox radio */

/* Customize the label (the container) */
.cr_container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.cr_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.cr_checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.cr_container:hover input ~ .cr_checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.cr_container input:checked ~ .cr_checkmark {
  background-color: #2d8f7b;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.cr_checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.cr_container input:checked ~ .cr_checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.cr_container .cr_checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

/****************************************************** Frame Inside */


.frameInside{
	position:absolute;
	/*
	overflow-x:hidden;
	overflow-y:auto;
	*/
	box-sizing: border-box;
	
	width:100%;
}

.frameInside_current{
	z-index:2;
}

.frameInside_back{
	opacity:0;
	z-index:1;
}

/****************************************************** Z index */

.container_header{
	z-index:15;
}
.container_recorder{
	z-index:14;
}
.container_recorder_speech{
	z-index:13;
}

.container_action{
	z-index:12;
}
.container_setting_default{
	z-index:11;
}
.container_note_sheet{
	z-index:10;
}

/****************************************************** Menu */

/*********************** Menu Body Hack start*/
body.show{
overflow:hidden;
}
/*********************** Menu Body Hack end*/


.menu{
	z-index:100;
	
	position:fixed;

	display:hidden;
	pointer-events:none;
	opacity:0;
	transition-timing-function: ease-in-out;
	transition-duration: .2s;
}
	

.menu.show{
	display:block;
	opacity:1;
	pointer-events:auto;
}

.menu .content{
	width:80%;
	height:100%;
	background-color:white;
	box-shadow: 1px 1px 2px #ccc;
	float:left;
}

.menu .shadow{
	width:20%;
	height:100%;
	float:right;
	opacity:.5;
	background-color:rgba(0,0,0,.5);
}


.menu .header{
	width:100%;
	height:135px;
	Background-image:url(../img/menu_bg.png);
	background-size:100% 100%;
}
.menu .header .profil_picture{
    position: absolute;
    left: 21px;
    top: 33px;
    width: 60px;
    height: 60px;
    border-radius: 70px;
    background-color: grey;
    overflow: hidden;
}

.menu .header .profil_picture img{
	width:100%;
}
.menu .header .name{
    position: absolute;
    left: 24px;
    top: 98px;
}


.menu .line{
	height:1px;
	width:100%;
	background-color:#eeeeee;
	margin:10px 0;
}

.menu .item{
		margin: 10px;
    border-radius: 3px;
    position: relative;
    color: #aaaaaa;
    font-size: 18px;
    padding: 15px 0 15px 60px;
}

.menu .item i{
	position:absolute;
	left: 17px;
  top: 16px;
	
}

.menu .item .title{
    font-size: 15px;
    color:black;
}

.menu .item .cursor{
	position:absolute;
	top:9px;
	right:21px;
    
}


/* active */
.menu .item.active{
	background-color:#e4f2fd;
	color:#4b82f5;
}
/****************************************************** Header */
.container_header{
	/*position:fixed;*/
	width:100%;
	background-color:#00baac;
	color:#ffffff;
	height:60px;
}


.container_header .logo{
	float:left;
	margin:12px 0 0 15px;
}

.container_header .logo img{
	height:35px;
}


.open_menu{
	float:right;
	width:60px;
	height:60px;
	
	font-size:30px;
	transition-timing-function: ease-in-out;
	transition-duration: .1s;
	text-align:center;
}

.open_menu i{
	margin:15px 0 0 0;
}
.open_menu i:last-child{
	display:none;
}
/* show */

.container_header.show .open_menu i:last-child{
	display:block;
}
.container_header.show .open_menu i:first-child{
	display:none;
}

/****************************************************** container STYLE */
.container{
	position:relative;
}
.container_note_short, .container_label, .container_color, .container_color_edit, .container_export{
	margin:0 auto 25px auto;
	overflow:hidden;
	
	width:95%;
	background-color:white;
	padding:3.5%;
	box-shadow: 1px 1px 2px #ccc;
	box-sizing: border-box;
}


.container_space_s1{
	width:100%;
	height:25px;
}
.container .title_left{
	float:left;
}

.container .title_right_icon{
	float:right;
}

.container .title_right_icon .icon{
	float:right;	
	width:25px;
	height:25px;
	border-radius:50%;
	text-align:center;
	color:white;
	padding-top:6px;
	box-sizing:border-box;
	font-size:11px;
	float:right;
	margin:-3px 0 0 7px;
}

.container .title_right_icon .icon i{
}

.title_right_icon span{
	
    letter-spacing: 0.5px;
   
}

.container.archived div{
	opacity:.5;
}
.container.archived {
	background-color:rgba(255,255,255,.5);
	;
}

.container.archived .container_note_short_top{
	min-height:16px;
}

.title_archived{
	display:none;
	position:absolute;
	text-align:center;
	top:15px;
	right:18px;
}

.container.archived .title_archived{
	display:block;
	opacity:1;
}

/****************************************************** container note */

.container_note_short .text{
}

.container_note_short{
	padding:0;
	
}

.container_note_short.close{
	display:none;
}

.container_note_short_top{
	padding:3.5%;
	padding-bottom:4%;
}

.container_note_short_bottom{
	padding:3.5%;
	padding-top:2.5%;
	padding-bottom:2.5%;
	border-top:solid 1px rgba(0,0,0,.1);
	
}



/****************************************************** note_show_more */
.note_show_more{
	margin-bottom:170px!important;
}

/****************************************************** container setting default */
.container_setting_default{
  background-color: #eee;
  position:absolute;
	width:250px;
	overflow:hidden;
	width:100%;
}


.container_setting_default .container_note_short{
	text-align:center;
	margin:20px auto 0px auto;
}

.default_label_wrapper{
	margin-top:20px;
	padding:0 20px 70px 20px;
}

.default_label_item{
	transition-timing-function: ease-in-out;
	transition-duration: .2s;
	text-align:center;
	
	border-radius:2px;
	
	
	margin:0 auto 25px auto;
	
	
	
	background-color:rgba(255,255,255,0.6);
	box-shadow: 1px 1px 2px #999;
	color:rgba(94,94,94,1);
	opacity:0.5;
}


.default_label_item.active{
	background-color:rgba(255,255,255,1);
	color:rgba(0,186,172,1);
	opacity:1;
}

.default_label_item table{
	
	height:100%;
	padding:10px;
}

.default_label_item table td:first-child{
	
	width:45px;
	color:#ffffff;
}



.default_label_item_title{
	margin:10px 0 10px 0;
	
	font-size:17px;
	letter-spacing:1px;
	font-weight:bold;
	text-transform:uppercase;
}

.default_label_item_circle{
	float:left;
	width:25px;
	height:25px;
	height:100%;
}
	
/****************************************************** container note sheet */

.container_note_sheet{
  background-color: #eee;
  /*position:absolute;*/
	/*opacity:0;*/
	width:100%;
	box-sizing: border-box;
  overflow-x: auto;
}

.container_note_sheet.remove div, .container_note_sheet.remove span{
	opacity:.5;
}

.container_note_sheet .remove_button{
	position:fixed;
	z-index:15;
	opacity:0;
	transition-timing-function: ease-in-out;
	transition-duration: .2s;
	pointer-events:none;
}


.container_note_sheet.remove .remove_button, .container_note_sheet.remove .remove_button *{
	opacity:1;
	pointer-events:auto;
}

.container_note_sheet textarea{
	width:100%;
	height:auto;
	padding:0;
	border:0;
	min-height:20px;
  scrollbar-width: none;
}

}
.container_note_sheet textarea::-webkit-scrollbar {
  display: none;
}

/******************** Swiper color */
/* color */

.swiper_color_wrapper{   
  margin: 0 auto;
  width: 100%;
  height:102px;
  overflow-y:auto;
  margin:10px 0 10px 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.swiper_color_wrapper::-webkit-scrollbar {
  display: none;
}

.swiper_color_wrapper {
}

.swiper_color_container{
  width:50px;
  overflow:hidden;
  height:102px;
}

.swiper_color{
	transition-timing-function: ease-in-out;
	transition-duration: .2s;
	width:42px;
	height:42px;
	margin:10px;
	margin-top:56px;
	font-size:15px;
	color:#fff;
	text-align:center;
	opacity:0.3;
	background-color:grey;
	float:left;
	border-radius:42px;
	position:relative;
	margin-bottom:15px;
}
.swiper_color.active{
	transition-timing-function: ease-in-out;
	transition-duration: .2s;
	border-radius:62px;
	margin:0;
	margin-top:30px;
	opacity:1;
	width:62px;
	height:62px;
	font-size:25px;
}

.swiper_color i{
	margin:14px auto;
}
.swiper_color.active i{
	margin:18px auto;
}

.swiper_color .square{
	position:absolute;
	height:10px;
	width:10px;
	border-radius:0;
	transform: rotate(45deg); 
	opacity:0;
  left: 10px;
  bottom: 10px;
	transition-timing-function: ease-in-out;
	transition-duration: .2s;
}

.swiper_color.active .square{
	height:10px;
	width:10px;
	opacity:1;
  left: 26px;
  bottom: -4px;
}


.swiper_color .title{
    position: absolute;
    top: -25px;
    width: 408px;
    opacity: 0;
    pointer-events: none;
    color: black;
    font-size: 14px;
    left: -175px;
    overflow: hidden;
    text-align:center;
}
.swiper_color.active .title{
	opacity:1;
}



/* label */
.swiper_label_wrapper{   
  margin: 0 auto;
  width: 100%;
  height:72px;
  overflow-y:auto;
  margin:10px 0;
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}
.swiper_label_wrapper::-webkit-scrollbar {
  display: none;
}

.swiper_label_container{
  width:50px;
  margin-top:7px;
  height:62px;
}

.swiper_label{
	transition-timing-function: ease-in-out;
	transition-duration: .2s;
	text-align:center;
	float:left;
	position:relative;
	border-radius:2px;
	
	width:170px;
	margin:0 10px;
	
	font-size:17px;
	letter-spacing:1px;
	font-weight:bold;
	text-transform:uppercase;
	padding:14px 0 14px 0;
	
	background-color:rgba(255,255,255,0.6);
	box-shadow: 1px 1px 2px #999;
	color:rgba(94,94,94,1);
	
	
}
.swiper_label.active{
	background-color:rgba(255,255,255,1);
	color:rgba(0,186,172,1);
	
	
}

.swiper_label .square{
	position:absolute;
	background-color:white;
	height:10px;
	width:10px;
	border-radius:0;
	transform: rotate(45deg); 
	opacity:0;
	transition-timing-function: ease-in-out;
	transition-duration: .2s;
	left:80px;
	top:5px;
}

.swiper_label.active .square{
	height:10px;
	width:10px;
	opacity:1;
	top:-5px;
	left:80px;
}



/****************************************************** container label */
.container_label{
	transition-duration: .2s;
}

.container_label.transition_off{
	transition-duration: 0s;
}

.container_label_table_wrapper{
	width:100%;
	overflow:hidden;
}

.container_label_table_inner{
	width:200%;
	transition-timing-function: ease-in-out;
	transition-duration: .2s;
}

.container_label_table_wrapper .clt_left{
	float:left;
	width:50%;
}

.container_label_table_wrapper .clt_right{
	float:right;
	width:50%;
	position:relative;
}
			
			
.container_label .drag, .container_label .bin{
	position:absolute;
	padding:15px 15px;
	font-size:20px;
	text-align:center;
	box-sizing: border-box;
	right:0;
}
.container_label .bin{
	right:50px;
}

.container_label_table_inner .label_count span:last-child{
	float:right;
}


/* edit */
.container_label.edit .container_label_table_inner {
	margin-left:-100%;
}

/* new */
.container_label.new .container_label_table_inner {
	margin-left:-100%;
}

.container_label.new .drag, .container_label.new .bin{
	display:none;
}


/* binned */
.container_label.binned {
	height:0;
	margin:0;
	padding:0;
}



/****************************************************** container color */

.container_color{
	transition-duration: .2s;
	padding:0;
}

.container_color.transition_off{
	transition-duration: 0s;
}

.container_color table{
	width:100%;
}

.container_color table .left1{
	width:15%;
	min-width:15%;
	color:white;
	text-align:center;
	font-size:30px;
}

.container_color table .right1{
	width:85%;
}

.container_color_table_wrapper{
	width:100%;
	overflow:hidden;
}

.container_color_table_inner{
	width:200%;
	transition-timing-function: ease-in-out;
	transition-duration: .2s;
}

.container_color_table_inner table{
	width:100%;
}

.container_color_table_inner table .left2{
	width:50%;
  padding: 20px;
	box-sizing: border-box;
}

.container_color_table_inner table .right2{
	width:50%;
  padding: 10px 20px;
	box-sizing: border-box;
}

.container_color_table_inner table .right2 table{
background-color:red;
width:100%;
}


.container_color .content span:last-child{
	float:right;
}



.container_color_table_inner .drag,.container_color_table_inner .cog, .container_color_table_inner .bin{
	padding:15px;
	font-size:20px;
	text-align:center;
	box-sizing: border-box;
	float:right;
}


/* edit */
.container_color.edit .container_color_table_inner {
	margin-left:-100%;
}


/* binned */
.container_color.binned {
	height:0;
	margin:0;
	padding:0;
}




/****************************************************** container color edit*/

.container_color_edit{

}


.container_color_edit input{
	margin-top:5px;
}

.container_color_edit .colorSpotMain{
	background-color:red;
	width:20px;

}



/* color picker spectrum */

.sp-replacer.sp-light{
	width:100px;
}
.sp-palette .sp-thumb-el {
    width: 26px;
    height: 26px;
}

.sp-palette-container{
	width:64px;
}

.sp-alpha{
	display:none!important;
}

/****************************************************** container container export*/

.container_export input{
	
}


.container_export .recurrence_not_selected{
	opacity:.5;
}

.container_export .recurrence_selected{
	opacity:1;
}


/******************** Swiper color */
/* color */

.swiper_icon_wrapper{   
  margin: 0 auto;
  width: 100%;
  height:72px;
  overflow-y:auto;
  margin:5px 0 10px 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.swiper_icon_wrapper::-webkit-scrollbar {
  display: none;
}


.swiper_icon_container{
  width:50px;
  overflow:hidden;
  height:72px;
}

.swiper_icon{
	transition-timing-function: ease-in-out;
	transition-duration: .2s;
	width:62px;
	padding:10px 0;
	font-size:25px;
	color:#686b6d;
	text-align:center;
	float:left;
	position:relative;
	margin-bottom:15px;
}
.swiper_icon.active{
	transition-timing-function: ease-in-out;
	transition-duration: .2s;
	font-size:25px;
	background-color:#1bb394;
	color:#fff;
	border-radius:5px;
}

.swiper_icon i{
	
}


/****************************************************** container record */
.container_record{
}
.container_record_setting{
}


/****************************************************** container color title */

.container_color_title{
	width:100%;
	background-color:#fff;
	border-bottom:1px grey;
	box-shadow: 1px 1px 2px #999;
	margin-bottom:25px;
	padding:0;
	box-sizing: border-box;
}

.container_color_title table{
	width:100%;
}
.container_color_title .left{
	width:15%;
	text-align:center;
	font-size:100%;
	font-size:30px;
	color:white;
}


.container_color_title .left .color{
	width:100%;
	height:100%;
}

.container_color_title .right{
	width:80%;
	padding:20px;
	
}

.container_color_title .color{
}
.container_color_title .content span:last-child{
	float:right;
}



/****************************************************************************************************************/



/****************************************************** container label title */

.container_label_title{
	width:100%;
	background-color:#fff;
	border-bottom:1px grey;
	box-shadow: 1px 1px 2px #999;
	margin-bottom:25px;
	padding:25px;
	box-sizing: border-box;
}

.container_label_title .content span:last-child{
	float:right;
}

.container_label_title .title{
}

.container_label_title .content{
}







/****************************************************** separator date */

.separator_date{
	margin:20px 0 20px 0;
	text-align:center;
}

.separator_date.close{
	display:none;
}

/****************************************************** Action */

.container_action{
	background-color:white;
	position:fixed;
	bottom:0;
	width:100%;
	height:85px;
	text-align:center;
	
	box-shadow: 0px 0px 3px #666;
}

.container_action_left{
	float:left;
	width:50%;
}
.container_action_right{
	float:right;
	width:50%;
}


/****************************************************** Recorder */
.container_recorder{
	width:100%;
	height:150px;
	bottom:0;
	position:fixed;
	display:none;
}

.cr .notice{
	width:100%;
	position:absolute;
	text-align:center;
	bottom:125px;
	z-index:21;
	display:none;
}


.cr .background_1{
	width:100%;
	height:20%;
	background-image: linear-gradient(to bottom, rgba(238,238,238,0), rgba(238,238,238,0.7));
	/*background-image: linear-gradient(to bottom, rgba(1,238,238,0), rgba(1,238,238,0.7));*/
}
.cr .background_2{
  background-color: #eee;
  /*background-color:rgba(1,238,238,1);*/
	width:100%;
	height:80%;
	opacity:.7;
}


.cr .icon_record_wrapper{
	position:absolute;
	text-align:center;
	width: 100%;
	height: 75px;
	bottom: 27px;
	z-index: 21;
	pointer-events:none;
}
.cr .icon_record{
	width:75px;
	height:75px;
	display:inline-block;
	color:#fff;
	font-size:35px;
	pointer-events:all;
}
.cr .icon_record i{
	margin-top:20px;
}

.cr .icon_wrapper{
    width: 100%;
    height: 31px;
    position: absolute;
    bottom: 45px;
    z-index: 20;
  text-align:center;
}

.cr .icon_wrapper i{
    color:white;
    
    font-size:18px;
    margin-top:9px;
    margin-left:1px;
}

.cr .icon_wrapper .fas.fa-cog{
    font-size:22px;
    margin-top:7px;
    margin-left:1px;
}
.cr .icon_edit{
	float:left;
  height: 31px;
  width: 31px;
  margin:0 0 0 25px;
}

.cr .icon_setting{
	float:right;
  height: 35px;
  width: 35px;
  margin:-2px 18px  0 0;
  border-radius:31px;
}

.cr .bull_wrapper_1,.bull_wrapper_2,.bull_wrapper_3{
	position:absolute;
	text-align:center;
	width: 100%;
}

.cr .bull_wrapper_1{
    height: 100px;
    bottom: 14px;
    
    z-index: 17;
}
.cr .bull_wrapper_2{
    height: 85px;
    bottom: 22px;
    
    z-index: 18;
}
.cr .bull_wrapper_3{
    height: 75px;
    bottom: 27px;
    
    z-index: 19;
}

.cr .bull_1{
  background-color: white;
  opacity:.25;
	width:100px;
	height:100px;
	border-radius:100px;
	display:inline-block;
	transition-duration: .2s;
}

.cr .bull_2{
	
  background-color: white;
  opacity:.40;
	width:85px;
	height:85px;
	border-radius:100px;
	display:inline-block;
	
	transition-timing-function: ease-in-out;
	transition-duration: .2s;
}

.cr .bull_3{
  background-color: #282828;
	width:75px;
	height:75px;
	border-radius:75px;
	display:inline-block;
	
}

.cr .bar_wrapper{
	width: 100%;
  height: 45px;
	position:absolute;
	bottom:38px;
	
	z-index:15;
}

.cr .bar{
	background-color:#282828;
	border-radius:45px;
	margin:0 8px;
  height: 45px;
	padding:0 auto;
	box-sizing: border-box;
	border-radius:25px;
	
	z-index:16;
}


.cr.recording .bull_3{
	background-color:#00baac;
}
.cr.recording .notice{
	display:block;
}
.container_recorder.recording{
	height:250px;
}


.container_recorder_speech{
	position:absolute;
	background-color:rgba(238,238,238);
	display:none;
}

.container_recorder_speech .final{
	width: 85%;
  margin: auto;
  font-size: 15px;
  color: black;
  background-color: white;
  padding: 15px;
  border: solid 1px #9a9a9a;
      
}

.container_recorder_speech .separator{
	/*background-color:black;*/
	width:45%;
	height:1px;
	margin:35px auto;
	opacity:.25;
	
}

.container_recorder_speech .interim{
width: 85%;
    margin: auto;
    text-align: center;
    font-size: 25px;
    color: black;
    font-weight: bold;
}

.container_recorder_speech .close{
    position: absolute;
    top: 80px;
    right: 29px;
}
.container_recorder_speech .close i{
	font-size:35px;
}

.container_recorder_speech.recording{
	display:block;
}


.container_recorder_speech p{
	margin-bottom:10px;
}

.container_recorder_speech p:last-child{
	margin-bottom:0;
}

/****************************************************** button */

button.btn {
	border:0;
	border-radius:5px;
	padding:15px 0 15px 0;
	font-size:20px;
	line-height:20px;
	margin-top:15px;
	box-shadow: 1px 1px 2px #999;
	position:relative;
	box-sizing: border-box;
}

button.btn i{
	float:left;
	margin-left:20px;
}

.container_action .btn{
	width:90%;
}


button.btn.green {
  background-color: #1bb394;
  border:solid 1px #1bb394;
  color: #ffffff;
}

button.btn.grey {
  background-color: #ffffff;
  border:solid 1px #ddd;
  color: #686b6d;
}

button.btn.red {
  background-color: #ffffff;
  border:solid 1px #ddd;
  color: #d90f0f;
}

/****************************************************** Slider */