body 
{
    font-family: system-ui, Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(90deg, gainsboro 0%, rgba(59, 150, 168, 1) 49%, gainsboro 100%);
    margin: 8px;
}

.outer, .outer2, .outer-container
{
	background-color: floralwhite;
	width:fit-content;
	margin:10px;
	padding:15px;
	border-radius:10px;
	box-shadow: 0 0 5px 2px black;
	margin: auto;
	margin-bottom: 15px;
}

#heading
{
	background-color: transparent;
	color: white;
	font-weight: bold;
	display: flex;
}

#heading-menu
{
	margin : auto;
	cursor : pointer;
}

#heading-text
{
	flex : 1;
}



#send-to, #instructions, #element-selector, #heading, .outer2, .tag, .outer-container, #assign-acs, #assignment-title
{
	width: 50%;	
}

@media (max-width: 960px)
{
	#send-to, #instructions, #element-selector, #heading, .outer2, .tag, .outer-container, #assign-acs, #assignment-title
	{
		width: calc(100% - 20px - 10px);
		margin:0px;
		margin-bottom:10px;
		box-shadow: 0 0 10px 2px black;
	}

	body
	{
		background: cadetblue;
	}
}

.tag
{
	font-weight: bold;
	box-shadow: 0 0 5px 2px black;
	cursor: pointer;
}

.outer-container
{
	box-shadow: 0 0 5px 2px black;
}


#send-to-input, #message-input
{
	width: 100%;
	resize: none;
	font-family: Calibri;
}

#msg
{
	display: none;
}

#send , #save-template
{
    background-color: transparent;
    box-shadow: none;
}

#send-button , #save-template-button, #print-button
{
    padding: 20px;
    border: 1px solid;
    cursor: pointer;
    background-color: cadetblue;
    color: white;
    box-shadow: 0 0 10px 10px black;
}

#element-selector-msg
{
	margin-bottom: 10px;
}

#element-selector-msgs
{
	padding-bottom: 10px;
}

#search-input
{
    border-radius: 10px;
    border: 1px solid gray;
    padding: 2px;
}

#element-selector-search
{
	margin-bottom: 10px;
}

div[id^='element-selector-msg-']
{
	font-size: x-small;
	margin-left: 10px;
}

div[id^='task-group-']
{
    margin-left: 35px;
    display: none;
}

div[id^='ele-group-']
{
    margin-left: 25px;
    display: none;
}

.print-aoo
{
    font-weight: bold;
	cursor: pointer;
}

.print-task
{
    font-family: Calibri;
	cursor: pointer;
}

.print-element
{
	cursor: pointer;
}

div[id$='-even']
{
    background-color: aliceblue;
	font-size: small;
	margin-bottom: 10px;
	box-shadow : 0 0 2px 1px;
	padding : 5px;
}

div[id$='-odd']
{
	font-size: small;
	background-color: aliceblue;
	margin-bottom: 10px;
	box-shadow : 0 0 2px 1px;
	padding : 5px;
}

div[id$='-even']:hover
{
	background-color: lightblue;
}

div[id$='-odd']:hover
{
	background-color: lightblue;
}

.expand-collapse
{
    font-size: x-large;
    cursor: pointer;
    width: 20px;
    display: inline-block;
}

input[type='checkbox']
{
	accent-color: green;
}

span[id^='task-count']
{
	font-size: x-small;
}

span[id^='aoo-count']
{
	font-size: small;
}