body {
	background: linear-gradient(#424242 0%, #151515 100%) fixed;
	color: white;
	margin: 0;
	padding: 0;
	padding-bottom: 30px;
}


.plaster {
	background-image: url('images/solback.png');
	background-repeat: repeat;
	opacity: 0.5;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}


header {
	width:100%;
	color: lightblue;
	box-shadow: 0px 0px 10px 0px #4a4e74;
	border-radius: 0px 0px 15px 15px;
	display:block;
	height: 25px;
	padding: 2px;
}


.span80 {
	display: inline-block;
	width: 80px;
}


a, a:visited {
	color: white;
	text-decoration: none;
}

a:hover {
	color: lightblue;
}

input[type="text"],
input:not([type]) {
	width: 100%;
}

.ScaryLink:hover {
	color: salmon;
}

.nowrap {
	white-space: nowrap;
}


.OptionListHeader {
	text-align: center;
	font-weight: bold;
	font-size: 1.5em;
	background: linear-gradient(rgba(202, 202, 202, 0.25) 0%, rgba(116, 99, 144, 0.5) 100%) fixed;
	border-radius: 5px 5px 5px 5px;
}

.OptionList {
	background: linear-gradient(rgba(202, 202, 202, 0.25) 0%, rgba(99, 99, 100, 0.5) 100%) fixed;
	height: 80vh;
	max-height: 80vh;
	overflow-y: scroll;
}

.OptionList li{
	padding-right: 10px;
	padding-bottom: 10px;
}

.OptionList li:hover{
	color: white;
	cursor: pointer;
}

.selected {
	color: white;
	box-shadow: -10px -5px white;
	border-radius: 5px 5px;
	text-decoration: none;
}

.special-text {
	color: rgb(15 255 23);
}

.CenteredDiv {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.SharesListDisabled {
	opacity: 0.6;
}


.DisabledShareRow {
	opacity: 0.8;

}



.SharesListTable {
	border-collapse: collapse;
	border-radius: 5px 5px 5px 5px;
}

.SharesListTable #Enabled {
	column-width: 1em !important
}

.SharesListTable #Path {
	column-width: 20em !important
}

.SharesListTable td {
	padding: 1em;
	border: 1px solid rgba(100,100,100,0.5);
}

.SharesListTable tr:hover:not(.DisabledShareRow):not(thead tr) {
	background: linear-gradient(rgba(121, 223, 121, 0.25) 0%, rgba(2, 2, 2, 0.25) 50%) fixed;
	box-shadow: inset 0 0 5px lightseagreen;
	cursor: pointer;
	text-shadow: 0px 0px 5px black;
}

.SharesListTable tr:active:not(.DisabledShareRow):not(thead tr) {
	background: linear-gradient(rgba(121, 223, 121, 0.25) 0%, rgba(2, 2, 2, 0.25) 50%) fixed;
	box-shadow: inset 0 0 5px red;
	cursor: pointer;
	text-shadow: 0px 0px 5px black;
	color: red;
}



.SharesListTable thead th {
	background: linear-gradient(rgba(0, 94, 100, 0.558) 20%, rgba(0, 153, 255, 0.5) 100%) fixed !important;
	border-radius: 5px 5px 2px 2px;
	padding: 5px;
	color:white;
	text-align: center;
}

.SharesListTable thead td {
	background: linear-gradient(rgba(56, 218, 78, 0.558) 0%, rgba(2, 2, 2, 0.5) 50%) fixed !important;
	border-radius: 5px 5px 2px 2px;
	padding: 5px;
	color:white;
	text-align: center;
}

.SharesListTable td {
	background: linear-gradient(rgba(249, 249, 249, 0.25) 0%, rgba(2, 2, 2, 0.25) 100%) fixed;
	text-align: center;
}

#IsExpired {
	animation: SlowStrobe 1s linear infinite;
	color:orange;
}

@keyframes SlowStrobe {
	0% {
		color: orange;
	}
	50% {
		color: red;
	}
	100% {
		color:darkgoldenrod;
	}
}

/* 
	This targets disabled multiSelect() options in the
	selectable column and stylizes them...
	The purpose is the Contacts column for AttentionTo
	select in the upload form... to make the groups
	stand out.

	It's hacky, and I could do something better with
	JQuery when the list is loaded, but this works for now.
*/
.ms-elem-selectable.disabled {
	text-align: center;
	font-weight: bold;
	color: blue !important;
  }

#HiddenFileUploadContainer, #HiddenFileUploadStatusContainer {
	display: block;
}

#UploadStatusDetails {
	text-align: center;
	width: 100%;
}

#fileUploadContainer, #uploadStatus {
	width: 	500px;
	border: 1px solid white;
	padding: 10px;
}

#progressBar {
	background-color: teal;
	border: 1px solid black;
	border-radius: 5px;
	height: 10px;
}

#progressBarContainer {
	width: 100%;
	background-color: gray;
	border: 1px solid black;
	border-radius: 5px;
	height: 10px;
}

.StatusNotDone {
	color: black;
	opacity: 0.3;
}

.StatusInProgress {
	animation: InProgress 1s linear infinite;
}


@keyframes InProgress {
	0% {
		color: black;
		opacity: 0.5;
	}
	50% {
		color: lightblue;
		opacity: 0.8;
	}
	100% {
		color:white;
		opacity: 0.5;
	}
}

.StatusDone {
	opacity: 1.0;
	color:lightgreen;
	text-shadow: 1px 1px 2px black;
}

.OptionalLabel {
	display: block;
}


.uploadStatusTitleText {
	padding: 0px;
	margin: 5px;
}


.share {
    font-weight: bold;
    position: relative;
}
.share:before {
    content: ".";
    font-size: 2.2em;
    position: absolute;
    bottom: -2.5px;
    left: -4px;
}
.share:after {
    content: ":";
    font-size: 2em;
    position: absolute;
    bottom: -6px;
    right: -7px;
}



/* Media query for mobile devices */
@media only screen and (max-width: 600px) {
	#fileUploadContainer, #uploadStatus {
		width: 98%;
		padding: 5px;
	}
	.ms-container {
		width: 550px !important;
	}
}


@media only screen and (max-width: 500px) {
	#fileUploadContainer, #uploadStatus {
		width: 98%;
		padding: 5px;
	}
	.OptionalLabel {
		display: none;
	}
	.ms-container {
		width: 450px !important;
	}

}


@media only screen and (max-width: 400px) {
	#fileUploadContainer, #uploadStatus {
		width: 98%;
		padding: 5px;
	}
	.OptionalLabel {
		display: none;
	}

	.ms-container {
		width: 350px !important;
	}
}