/* .widgets *******************************/

.widgets {
	margin-bottom: 10px;
	overflow: hidden;
	position: relative;
	width: 100%;

	.scroll {
		align-items: center;
		background: linear-gradient(270deg, rgba(255,255,2550,1) 10%, rgba(255,255,255,0) 100%);
		display: none;
		height: 100%;
		justify-content: flex-end;
		position: absolute;
		right: 0;
		top: 0;
		width: 100px;

		button {
			align-items: center;
			background-color: #fff;			
			border: 0;
			border-radius: 50px;
			box-shadow: 0 5px 5px rgba(0,0,0,0.1);
			display: flex;
			height: 60px;
			justify-content: center;
			margin-right: 10px;
			transition: all ease 0.2s;
			width: 60px;

			&:hover {
				background-color: #eee;		
			}

			img {
				height: 40px;
				width: auto;
			}
		}
	}

	.wrapper {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
}

@media (min-width: 1000px) {

	.widgets {

		.scroll {
			display: flex;

			button {

				&:hover {
				}

				img {
				}
			}
		}

		.wrapper {
			flex-direction: row;
			width: 100svh;
		}
	}
}

/* .widget *******************************/

.widget {
	align-items: flex-start;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: var(--css-border-radius);
	color: #222;
	display: flex;
	font-size: 0.9rem;
	font-weight: 500;
	gap: 10px;
	outline: 0;
	padding: 10px;
	text-align: left;
	text-decoration: none;
	transition: all ease 0.2s;
	white-space: nowrap;

	&:hover {
		background-color: var(--color-brand-blue);
		color: #fff;
	}

	.graphic {
	 	background-position: center;
  	background-repeat: no-repeat;
	  background-size: cover;
		border-radius: var(--css-border-radius);
		height: 70px;
		width: 70px;
	}

	.text {
		width: calc(100% - 80px);

		.label {
			background-color: var(--color-brand-red);
			border-radius: var(--css-border-radius);
			color: #fff;
			font-size: 0.8rem;
			font-weight: 800;
			margin-bottom: 5px;
			padding: 3px 10px;
			text-transform: uppercase;
		}

		.title {
			font-weight: 800;
		}

		.details {
		}
	}
}

@media (min-width: 1000px) {

	.widget {

		&:hover {
		}

		.graphic {
		}

		.text {

			.label {
			}

			.title {
			}

			.details {
			}
		}
	}
}

/* .modal-widget *******************************/

.modal-widget {

	.community {
		align-items: center;
		display: flex;
		gap: 20px;
		justify-content: space-between;
		margin-bottom: 20px;
		width: 100%;

		.graphic {
			width: 50px;

			img {
				height: 50px;
				width: 50px;
			}
		}

		.text {
			width: 400px;

			h3 {
				font-size: 1.2rem;
			}

			.location {
			}
		}

		.opts {
			text-align: right;

			button {
			}
		}
	}
}

@media (min-width: 1000px) {
}