@topbarHeight: 50px;
@bottombarHeight: 16px;
@bottombarHeightMobile: 76px;
@btnBlue: #69f;
@btnDarkBlue: #36f;
@rowPadding: 15px;
@btnGap: 10px;
@inputLineheight: 34px;

.composer-radius{
	.border-radius(4px);
}

.res_btn{
	float: right;
    color: @btnBlue;
    border: solid 1px @btnBlue;
    background: #fff;
}

.composer {
	.no-select;

	position: fixed;
	bottom: 0px;

	right: 20px;
	left: 20px;
	height: 50%;
	padding-top: 35px;

	background: #fff;
	border: solid 1px @input-border;
	visibility: hidden;
	box-shadow: 0 0 5px 5px #ccc;

	textarea{
		border: solid 1px @input-border;
	}

	.composer-top{
		margin-top: -25px;
		.btn{
			border: none;
			font-size: 16px;
		}
	}
	.bt-disabled{
		color: #ccc;
		cursor: not-allowed;
		ul{
			display: none !important;
		}

		.bk-icon:before{
			content: "\f078" !important;
		}
	}

	.bk-icon{
		float: right;
		line-height: 50px;
		position: relative;
    	top: -50px;
    	right: 30px;
	}

	.bk-icon:before{
		content: "\f078";
	}

	#notes, #algorithms, #backtests-list{
		.open{
			.bk-icon:before{
				content: "\f077";
			}
		}
	}

	.select-algorithm-name, .select-note-name, .select-backtest-name{
		white-space: nowrap;
    	display: block;
    	overflow: hidden;
    	width: 100%;
    	text-overflow: ellipsis;
    	padding: 0 50px;
	}

	.algorithm-dropdown, .backtest-dropdown, .note-dropdown{
	    overflow: hidden;
		margin: 0 -30px;
		height: 50px;
	}

	.js-share-container{
		display: none;
	}

	.composer-container {
		min-height: 50px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.title-container, .category-list-container{
		padding-right: @rowPadding;
		margin-top: 10px;
		display: inline-block;
		.title, .category-list{
			font-size: 14px;
			.composer-radius;
		}
	}

	.title-container {
		padding-left: @rowPadding;
		width: 50%;
		.col-lg-12{
			padding: 0px;
		}
	}

	.category-list-container{
		padding-left: 12px;
		width: 25%;
		.hidden, .category-list-hidden{
			display: none;
		}

		.category-list{
			width: 100%;
			height: @inputLineheight;
			cursor: pointer;
			padding: 6px 32px;
			margin-right: -30px;
			font-size: 14px;
			line-height: 1.42857143;
			color: #555;
			background-color: #fff;
			background-image: none;
			border: 1px solid @input-border;
			-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
			box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
			-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
			-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
			transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
			&.warning{
				border-color: #cc0000;
				.placeholder(#cc0000);
			}
		}

		.category-list-wrapper{
			cursor: pointer;
		}

		.category-list-options{
			position: absolute;
			width: 100%;
			border: solid 1px @input-border;
			z-index: 2;
			list-style-type: none;
			background-color: #fff;
			padding: 0;
			.composer-radius;
			.selected{
				background-color: rgba(111, 159, 255, 0.2);
			}
			li:hover{
				color: @btnBlue;
				cursor: pointer;
			}
			li > div{
				padding: 13px 10px;
				margin: 0 30px;
			}
			li:not(:last-child) > div{
				border-bottom: solid 1px @input-border;
				margin-bottom: -1px;
			}
		}

		.col-lg-12{
			padding: 0px;
		}
	}

	.category-tag-row {
		margin: 5px 0;

		.tags-container {
			.bootstrap-tagsinput {
				width:100%;
				margin-bottom: 0px;
				input {
					height:28px;
				}
			}
		}
	}

	.write-preview-container {
		height:100%;
		margin: 0 0;
		padding-bottom: 10px;
		>div {
			height:100%;
		}
	}

	.write, .preview  {
		display: block;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		font-size: 14px;
		.composer-radius;
		resize:none;
		overflow: auto;
	}

	.preview {
		overflow-y: auto;
        background:#fff;
	}

	.formatting-bar {
		margin: 5px 0;
		padding: 0px 8px;
		span {
			color: #000;
		}
        .btn-primary {
            background:#69f;
            border-color:#69f;
        }
        .btn-default {
            border-color:#fff;
        }
	}

    .resizer {
        position: absolute;
        width: 100%;
        left: 0;
        top: 10px;
        cursor: move;

        .trigger {
            position: relative;
            display: block;
            height: 10px;
            width: 50px;
            top: -15px;
            margin: 0 auto;
			.pointer;

            background: #efefef;
            border: 1px solid #999;
            .border-radius(2px);

            i {
                position:relative;
                top:-8px;
                font-size: 11px;
                color: #666;
            }
		}
	}

	.imagedrop {
		position: absolute;
		top: 250px;
		text-align: center;
		font-size: 24px;
		color: #999;
		width: 100%;
		display: none;
	}

  .topic-thumb-container {
    margin-top: 5px;
    margin-left: 8px;
    margin-right: 8px;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
  }

  .topic-thumb-btn {
    cursor: hand;
    cursor: pointer;
  }

  .topic-thumb-toggle-btn {
	position: absolute;
	right: 30px;
	top: 22px;
  }

  .topic-thumb-preview {
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 100px
  }

  .topic-thumb-ctrl.form-group {
    display: inline-block;
    vertical-align: -50% !important;
  }

  .composer-bottom{
	margin-bottom: @bottombarHeight;
	margin-top: 15px;

	.share_res{
	  line-height: @inputLineheight;
	  padding: 4px 12px;
	  border: solid 1px @input-border;
	  color: @input-border;
	  .composer-radius;
	  .action-bar .btn, .btn-res{
		  .res_btn;
	  }
	  .btn-backtest{
		  margin-right: @btnGap;
	  }
	}

	.btn-group{
		width: 100%;
		.btn{
			height: 44px;
			width: 12%;
			margin-right: 20px;
			float: left;
			.composer-radius !important;
			.btn-default{
				margin-right: 20px;
			}
		}
		.btn-primary{
			background-color: @btnBlue;
			border-color: @btnBlue;
		}

		.btn-primary:hover{
			background-color: @btnDarkBlue;
			border-color: @btnDarkBlue;
			cursor: pointer;
		}
	}
  }

}

@media (max-width: 767px) {
	.composer {
		left: 5px;
		right: 5px;
		height:90% !important;
		background: rgba(224, 224, 224, 1);
		.title-container, .category-list-container{
			display: block !important;
			width: auto !important;
		}

		.category-list-container{
			width: auto !important;
			padding-left: 14px;
			.category-list{
				padding-left: 12px;
			}
		}

		.composer-bottom{
			margin-bottom: @bottombarHeightMobile;

			.share_bt, .share_rh{
				> span{
					color: @input-border;
				}
				button{
					.res_btn;
				}
				.backtest-selected, .notebook-selected{
					display: inline-block;
					position: absolute;
					left: 28px;
					.btn-sm{
						padding: 7px 10px;
						color: @btnBlue;
					}
				}
				.composer-radius;
				color: @input-color;
				margin: 0px 14px 10px;
				padding: 5px 10px;
				border: solid 1px @input-border;
				line-height: 34px;
			}

			.action-bar{
				margin: 0 14px;
				button{
					width:40%;
				}
				.btn-primary{
					float: right;
				}
			}
		}
	}

	.share-frame, .notes-frame{
		margin-left: -150px;
		margin-top: -170px;
		.backtests, .notes{
			width: 300px;
			height: 300px;
			.backtests-container, .notes-container{
				padding: 15px;
				.backtests-add-div2, .notes-add-div2{
					padding-top: 20px;
				}
			}
			.note-control-list, .algorithm-control-list, .backtest-control-list{
				left: 0;
			}
		}
	}

	.resizer {
		visibility: hidden;
	}
}