html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

#main-content {
padding-top: 2rem;
}

.editor-dashed-box {
	padding-right: 0px;
	padding-left: 0px;
}

.content-edit-mode {
	border: 2px dashed #ccc;
	opacity: 1;
	background-color: transparent;
}

/* This gets rid of scrollbars on chrome, IE, and Edge */
:not(.list-items)::-webkit-scrollbar {
	display: none;
}

.fade {
    opacity: 1;
}

.modal .modal-dialog {
    -webkit-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.modal-dialog {
    margin: 20vh auto 0px auto
}

.modal-header {
    white-space: nowrap;
}

.modal-backdrop .fade {
    opacity: 0.5 !important;
}


.modal-backdrop.fade {
    opacity: 0.5 !important;
}
.fluidMedia {
    position: relative;
    padding-bottom: 165%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.fluidMedia2 {
    position: relative;
    padding-bottom: 340%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.fluidMedia3 {
    position: relative;
    padding-bottom: 390%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.fluidMedia4 {
    position: relative;
    padding-bottom: 410%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.fluidMedia5 {
    position: relative;
    padding-bottom: 200%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

    .fluidMedia iframe, .fluidMedia2 iframe, .fluidMedia3 iframe, .fluidMedia4 iframe, .fluidMedia5 iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

* {
	-ms-overflow-style: none;
}

#hero {
	padding: 0;
	margin: 0;
}

#pages-area td {
	vertical-align: middle;
}

.content-edit-mode:hover {
	opacity: 0.8;
	background-color: #eee;
	cursor: pointer;
}

#editNavigation {
	margin-top: 4rem;
}

.navListItem {
	font-family: "Vitesse A", "Vitesse B", Georgia, serif !important;
	font-weight: bolder;
}

.nav-pill-li.active {
	display: initial !important;
}

.nav-stacked > li + li {
	margin: 0;
}

#FileNameText {
	margin-left: 1.5rem;
}

.pill-order {
	font-family: "Vitesse A", "Vitesse B", Georgia, serif !important;
	font-weight: bolder;
}

#AddNavBtn {
	width: 100%;
	color: #ccc;
	border: none;
}

	#AddNavBtn:hover {
		color: #aaa;
	}

#EditorForm {
	display: flex;
}

#EditorPillsOuter {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-top: 25px;
	margin-bottom: 15px;
	width: 14.66666667%;
	margin-right: 2%;
	padding: 15px;
	min-height: 485px;
}

#EditorPills {
	width: 100%;
}

.PillPlaceholder {
	height: 40px;
	width: 100%;
}

.table-center-vertical td {
	vertical-align: middle !important;
}

.bg-default {
	background-color: #f5f5f5 !important;
}

.text-default {
	color: #333 !important;
}

.panel-group .panel + .panel {
	margin-top: 0;
}

.panel-group .panel-heading {
	border-radius: 0;
}

.panel-group .panel {
	border-radius: 0;
}

	.panel-group .panel:first-child {
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}

	.panel-group .panel:last-child {
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		border-bottom-width: 1px;
	}

/* This is useful for making 2 objects go to opposite ends of their container */
.spread {
	display: flex;
	justify-content: space-between;
}

/* Add to a select you want to look disabled */
.disabled-select {
	color: grey;
	cursor: not-allowed;
}

.tag-click {
    color: white;
    text-decoration: none;
}

.tag-click:hover {
    text-decoration: none;
}