@import url('font.css');

.root {
	--title-color: rgb(54, 0, 0);
	--subtitle-color: blue;
	--btn-color: rgb(128, 128, 128);

	--text-color: #750000;
	--bg-color: var(--color-gray-800);
	--tag-color: #fff;
	--tag-bg-color: red;
	
	--title-font-family: 'Sohne', sans-serif;
	--txt-font-family: 'Sohne', sans-serif ;
	
	--swiper-theme-color: #000;
}

.webStoryPage {
	--title-font-family: 'Sohne', sans-serif;
	--txt-font-family: 'Sohne', sans-serif;
	font-weight: 200;
}

.webStoryPage .page-content {
  gap: .25rem !important;
}

.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical, 
.swiper-vertical>.swiper-pagination-progressbar {
    width: 5px !important;
    right: 0 !important;
	left: auto !important;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #f3a22b;
}

.webStoryPage:not([class*=" h-"]):not([class*=" v-"]) .page-text{
	background-color: transparent !important;
	padding: 0 !important;
}

.webStoryPage .mention-item-action{
    color: #f3a22b;
}

.webStoryPage.full-page .page-content .page-text-wrap{
	background: #00000099;
}