

.tinted {
	background-color: #fff6b2;
}

.handle {
	cursor: grab;
}

.toc {
	background-color: rgb(255,255,255,0.5);
	border: solid #444 1px;
	padding: 20px;
	margin-left: auto;
	margin-right: auto;
	list-style: none;
}

.toc h5 {
	margin-top: 8px;
}

/*Custamize as per need*/
.sort-list-group-item{
	padding: 1rem;
    margin-bottom: 1rem;
    background: rgba(53, 64, 82, 0.024);
    border: 1px solid rgba(134, 140, 151, 0.24);
	border-radius: 3px;

	cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.sort-list-group-item:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.sort-list-group-item:hover {
	z-index: 0;
}

.input-section {
	background-color: rgb(255,255,255,0.5);
	padding: 20px;
}

.square-section {
	background-color: rgb(255,255,255,0.5);
}


.square {
	width: 20vw;
	height: 20vw;
	background-color: #00a2ff;
	margin-top: 2vw;
	margin-left: 2vw;
	display: inline-block;
	position: relative;
}

.swap-threshold-indicator {
	background-color: #0079bf;
	height: 100%;
	display: inline-block;
}

.inverted-swap-threshold-indicator {
	background-color: #0079bf;
	height: 100%;
	position: absolute;
}

.indicator-left {
	left: 0;
	top: 0;
}

.indicator-right {
	right: 0;
	bottom: 0;
}

.num-indicator {
	position: absolute;
	font-size: 50px;
	width: 25px;
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
	color: white;
}

.grid-square {
	width: 100px;
	height: 100px;
	display: inline-block;
	background-color: #fff;
	border: solid 1px rgb(0,0,0,0.2);
	padding: 10px;
	margin: 12px;
}

.nested-sortable, .nested-1, .nested-2, .nested-3 {
	margin-top: 5px;
}

.nested-1 {
	background-color: #e6e6e6;
}

.nested-2 {
	background-color: #cccccc;
}

.nested-3 {
	background-color: #b3b3b3;
}

.frameworks {
	background-color: rgb(255,255,255,0.5);
	border: solid rgb(0,0,0,0.3) 1px;
	padding: 20px;
}

.frameworks h3 {
	margin-top: 5px;
}

.blue-background-class {
	background-color: #C8EBFB;
}

.col {
	padding-right: 0;
	margin-right: 15px;
}

.selected {
	background-color: #f9c7c8;
	border: solid red 1px !important;
	z-index: 1 !important;
}

.highlight {
	background-color: #B7F8C7;
}
