.web-page-resources {
	opacity    : 1;
	padding    : 2.2rem 1rem;
	transform  : translateX(0) scale(1);
	transition : opacity 0.5s, transform 0.5s;
}

.inactive.web-page-resources {
	bottom         : 0;
	left           : 0;
	overflow       : hidden;
	pointer-events : none;
	position       : absolute;
	right          : 0;
	top            : 0;
}

.web-page-resources.child-open {
	opacity   : 0;
	transform : translateX(-100px);
}

.web-page-resources.opening {
	opacity   : 0;
	transform : translateX(100px);
}

.web-page-resources-header {
	align-items   : center;
	display       : flex;
	margin-bottom : 2rem;
}

.web-page-resources-header .breadcrumbs {
	align-items : center;
	display     : flex;
	margin-left : 1rem;
}

.web-page-resources-header .bread-arrow {
	margin : 0 .15rem 0.1rem !important;
}

.web-page-resources-header .breadcrumb {
	color     : #707070;
	cursor    : pointer;
	font-size : 1.3rem;
}

.web-page-resources-header .breadcrumb:hover {
	color           : #5c5c5c;
	text-decoration : underline;
}

.web-page-resources-header .breadcrumb:last-of-type {
	color           : #0e336c;
	text-decoration : none;
}

.web-page-resources-back {
	align-items : center;
	background  : #3b92de;
	color       : white;
	display     : inline-flex;
}

.web-page-resources-list {
	align-items : flex-start;
	display     : flex;
	flex-wrap   : wrap;
}

.web-page-resource-container,
.web-page-resource-filler {
	align-items : center;
	display     : inline-flex !important;
	flex        : 1 0 200px;
}

.web-page-edit-resource .web-page-resource-container {
	flex : unset;
}

.web-page-resource-filler {
	height  : 0;
	padding : 0;
}

.web-page-resource {
	align-items     : center;
	background      : transparent;
	border          : none;
	box-shadow      : none;
	cursor          : pointer;
	display         : flex;
	flex-direction  : column;
	margin-bottom   : 2rem;
	overflow        : hidden;
	text-decoration : none !important;
	width           : 200px;
}

.web-page-resource:hover:after {
	display : none;
}

.resource-image-container {
	align-items : center;
	display     : flex;
	height      : 100px;
	position    : relative;
	width       : 100px;
}

.resource-image-container .resource-edit {
	bottom   : 0.25rem;
	position : absolute;
	right    : 0.25rem;
}

.resource-image-container .resource-edit.web-page-edit-button {
	position : absolute;
}

.resource-image-container .resource-move {
	border        : 0;
	border-radius : 3px;
	background    : #000;
	cursor        : move;
	opacity       : 0.6;
	overflow      : hidden;
	padding       : 0;
	position      : absolute;
	right         : 0.25rem;
	top           : 0.25rem;
}

.resource-image-container .resource-move:before {
	background      : #000 url(../img/arrows.png) center no-repeat;
	background-size : contain;
	content         : '';
	display         : block;
	height          : 1.7rem;
	width           : 1.7rem;
}

.resource-image-container .resource-invalid {
	background      : #f12020 url(../img/chain-broken.png) center no-repeat;
	background-size : contain;
	border          : 0.25rem solid #f12020;
	border-radius   : 3px;
	height          : 2rem;
	left            : 0.25rem;
	position        : absolute;
	top             : 0.25rem;
	width           : 2rem;
}

.web-page-resource .resource-image {
	max-height : 100%;
	max-width  : 100%;
}

.web-page-resource .resource-default-image {
	background    : #c8c8c8;
	border-radius : 5px;
	height        : 100%;
	position      : relative;
	width         : 100%;
}

.web-page-resource .resource-default-image:before {
		content: '';
		position: absolute;
		top: 20%;
		right: 20%;
		bottom: 20%;
		left: 20%;
		background: #c8c8c8 url(../img/link.png) center no-repeat;
		background-size: contain;
}

.web-page-resource-create .resource-image-container {
	background    : #56b76b;
	border-radius : 5px;
	transform     : none;
	transition    : transform 0.3s;
}

.web-page-resource-create:hover .resource-image-container {
	background : #66c77b;
	transform  : scale(1.015) translate(0,0.15rem);
}

.web-page-resource-create:active .resource-image-container {
	background : #36974b;
	transform  : none;
}

.web-page-resource-create .resource-default-image {
	background-color : inherit;
}

.web-page-resource-create .resource-default-image::before {
	background-color : inherit;
	background-image : url(../img/plus.png);
}

.web-page-resource[data-type="folder"] .resource-default-image:before {
	background-image : url(../img/folder.png);
}

.web-page-resource[data-type="file"] .resource-default-image:before {
	background-image : url(../img/file.png);
}

.resource-title {
	color      : #222;
	font-size  : 1.2rem;
	margin-top : 0.5rem;
}

.web-page-resource:hover .resource-title {
	color : #4183c4;
}

.web-page-resource:active .resource-title {
	color : #1047a4;
}

.web-page-edit-resource {
	display : block;
	padding : 0;
}

.web-page-edit-resource .web-page-resource {
	cursor : default;
	margin : 0;
	width  : auto;
}

.web-page-edit-resource .resource-top {
	align-items : center;
	display     : flex;
	padding     : 1.5rem;
}

.web-page-edit-resource .resource-left {
	flex : 1 1 auto;
}

.web-page-edit-resource .resource-right {
	align-items : center;
	display     : flex;
	flex        : 0 0 auto;
	margin-left : 4rem;
}

.web-page-edit-resource .resource-right .right-buttons {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 1rem;
}

.web-page-edit-resource .resource-right .right-buttons button + button {
		margin-top: 1rem;
}

.web-page-edit-resource label {
		display: block;
}

.web-page-edit-resource label + label {
		margin-top: 1rem;
}

.resource-main-input {
	font-size : 1.35rem;
	width     : 100% !important;
}

.web-page-edit-resource label .label-text {
	display         : flex;
	justify-content : space-between;
	align-items     : center;
	flex            : 1 0 auto;
}

.web-page-edit-resource label .label-text input {
	width : auto;
}

.web-page-edit-resource .resource-href-label,
.web-page-edit-resource .resource-file-label,
.web-page-edit-resource .resource-event-label {
		display: none;
}

.web-page-edit-resource[data-type="link"] .resource-href-label {
		display: block;
}

.web-page-edit-resource[data-type="file"] .resource-file-label {
		display: block;
}

.web-page-edit-resource[data-type="event"] .resource-event-label {
	display         : flex;
	justify-content : space-between;
	align-items     : center;
	max-width       : 320px;
}

.web-page-edit-resource[data-type="event"] .google-calendar-container {
	margin : 1em 0;
}

.web-page-edit-resource[data-type="event"] .event-input {
	flex : 1 1 auto;
}

.web-page-edit-resource[data-type="event"] .event-input.swiftbox {
	max-width : 200px;
}

.web-page-edit-resource[data-type="event"] .event-input:not(:first-child) {
	margin-left : 1em;
}

.web-page-edit-resource[data-type="event"] .date-time {
	display : flex;
	flex    : 1 1 auto;
}

.web-page-edit-resource[data-type="event"] .date-time input {
	min-width : 0;
}

.web-page-edit-resource[data-type="event"] .link-google-calendar {
	font-size       : 1.25em;
	display         : inline-flex;
	align-items     : center;
	justify-content : space-between;
	flex            : 1 1 auto;
	max-width       : 200px;
}

.edit-resource-input {
	border        : 1px solid #b9b9b9;
	border-radius : 2px;
	padding       : 0.2rem;
}

.edit-resource-input:focus {
	border-bottom  : 0.15rem solid #0e336c;
	box-shadow     : 0 0 7px #ccc;
	outline        : none;
	padding-bottom : calc(0.05rem + 1px);
}

.web-page-edit-resource .resource-bottom {
	align-items     : center;
	background      : linear-gradient(to left, #f7f7f0, #f3f7fa);
	border-top      : 1px solid #e9e9e9;
	display         : flex;
	justify-content : flex-end;
	margin-top      : 1rem;
	padding         : 0.7rem 0.4rem;
}

.attach-resource-modal {
	display : block !important;
}

.attach-resource-modal .no-options {
	font-style : italic;
	text-align : center;
	width      : 100%;
}

.web-page-insert-options {
	display : block;
}

.web-page-resource-insert-option {
	align-items    : center;
	border-radius  : 5px;
	cursor         : pointer;
	display        : inline-flex;
	flex-direction : column;
	height         : 80px;
	width          : 80px;
}

.web-page-resource-insert-option:hover {
	background : #f2f2f2;
}

.selected.web-page-resource-insert-option {
	background : #e5e5e5;
}

.web-page-resource-insert-option .resource-image-container {
	display         : inline-flex;
	height          : unset;
	justify-content : center;
	width           : unset;
}

.web-page-resource-insert-option .resource-image {
	max-height : 50px;
	max-width  : 50px;
}

.resource-modal-content {
	min-width : 400px;
}

.bootstrap .modal-dialog.custom-modal {
	box-shadow : none !important;
}

.bootstrap .modal-dialog.custom-modal {
	align-items      : center !important;
	display          : flex !important;
	flex-direction   : column !important;
	height           : 100% !important;
	justify-content  : center !important;
	margin           : 0 !important;
	width            : 100% !important;
}