@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap");

html{scroll-behavior:smooth}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #000000;
    font-family: "Source Sans Pro", sans-serif;
    color: #ffffff;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

a {
	color: #0073b1;
    font-weight: bold;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
.user-url {
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
}

video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    z-index: 11;
}

#popup {
    position: fixed;
    width: 80%;
    max-width: 350px;
    min-width: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: #000000;
    padding: 20px;
    border: 1px solid #313133;
    /*box-shadow: 0px 0px 10px rgba(0,0,0,0.5);*/
    filter: drop-shadow(5px 5px 20px #000000);
    text-align: center; /* Center text horizontally */
    display: flex;
    justify-content: center; /* Center content horizontally in flex container */
    align-items: center; /* Center content vertically in flex container */
    flex-direction: column;
}

#page-overlay {
    position: fixed; /* Fixed position */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 1); /* Black background with opacity */
    z-index: 9999; /* Make sure it's on top */
    display: flex;
    justify-content: center;
    align-items: center;
}
#page-image-conainer {
    display: none;
}
#page-image-overlay {
    position: fixed; /* Fixed position */
    width: 100vw; 
    height: calc(100vh+1000px); 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 1); /* Black background with opacity */
    z-index: 9999; /* Make sure it's on top */
    display: flex;
    justify-content: center;
    align-items: center;
}
.overlay-loading {
    position: fixed;
    max-width: 64px; /* Maximum width is the viewport width */
    max-height: 64px; /* Maximum height is the viewport height */
    width: auto; /* Maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
    z-index: -1;
}

.overlay-image {
    max-width: 100%; /* Maximum width is the viewport width */
    max-height: 100%; /* Maximum height is the viewport height */
    width: auto; /* Maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
    z-index: 0;
}
.overlay-video {
    max-width: 100%; /* Maximum width is the viewport width */
    max-height: 100%; /* Maximum height is the viewport height */
    width: auto; /* Maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
    z-index: 0;
}

.image-overlay-button {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%; /* Position at 50% from the top */
    transform: translateY(-50%); /* This ensures the button is centred vertically */
    z-index: 15; /* To ensure the buttons are above the images */
    cursor: pointer;
    color: #FFFFFF;
    background-color: #434649;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    opacity: 0.50;
}
.button-prev {
    left: 20px; /* Adjust as needed for left alignment */
}
.button-next {
    right: 20px; /* Adjust as needed for right alignment */
}
.button-close {
    top: 40px;
    right: 20px; /* Adjust as needed for right alignment */
}

.no-scroll {
    overflow: hidden;
}

.hidden {
	display: none !important;
}
.hidden-slide {
	opacity: 0 !important;
    height: 0 !important;
    overflow: hidden;
}

.vanish {
    border: 0 !important;
    background: transparent !important;
}

.small-only {
	display: none !important;
}

.header {
	height: 52px;
    position: fixed;
    background: #1A1A1B;
    /*background: #FFFFFF;*/
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.header-spacer {
	height: 52px;
}

.header-inner {
	display: flex;
	align-items: center;
    justify-content: space-between;
	width: 1188px;
	height: 100%;
    padding-left: 24px;
    padding-right: 24px;
}

.header-inner-left {
	display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
}


.header-a {
	display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-decoration: none;
}

.header-logo-img {
	width: 46px;
    height: 46px;
    margin-right: 10px;
    cursor: pointer;
}


.header-inner-right {
	display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
}

.nav-item {
	color: #c7d1d8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.3s;
    text-decoration: none !important;
}

.nav-item-menu {
	display: none;
}

.fa-caret-down {
	font-size: 14px;
}

.nav-item:hover {
	color: #FFFFFF;
}

.nav-item-text {
	font-size: 13px;
}

.menu-drop {
    display: none;
}

.adx-background {
    width: 100%;
    height: 54px;
    background: linear-gradient(90deg, #FFFFFF 0%, #0073b1 100%);
    position: relative;
    margin-bottom: 50px;
}

.ad-bar-container {
	display: flex;
	margin-top: 15px;
	align-items: center;
    justify-content: center;
    position: relative;
}

.ad-bar-title {
	color: #434649;
	font-weight: bold;
	display: flex;
	align-items: center;
    justify-content: center;
}

.ad-bar-separator {
    color: #434649;
}

.ad-bar-subtitle {
	color: #434649;
	font-weight: bold;
	margin-right: 10px;
	display: flex;
	text-align: center;
	align-items: center;
    justify-content: center;
}

.ad-bar-ad {
    /*font-size: 14px;*/
    color: #434649;
	font-weight: bold;
	display: flex;
	text-align: center;
	align-items: center;
    justify-content: center;
}
.superscript {
    vertical-align: super;
    font-size: smaller;
    line-height: normal;
}

.ad-bar-container:hover {
    text-decoration: none;
    .ad-bar-title {
        color: #FFFFFF;
    	font-weight: bold;
    }
    .ad-bar-separator {
        color: #FFFFFF;
    	font-weight: bold;
    }
    .ad-bar-subtitle {
    	color: #FFFFFF;
    	font-weight: bold;
    }
    .ad-bar-ad {
        color: #FFFFFF;
        font-weight: bold;
    }
}

.main-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.columns-container {
    margin-top: 15px;
    max-width: 1228px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.left-column {
    width: 220px;
    margin-right: 20px;
}
.left-column-fixed {
    position: fixed;
    top: 60px;
    width: 220px;
    margin-right: 20px;
}
.center-column {
    width: 550px;
    margin-right: 20px;
}
.right-column {
    width: 320px;
}
.right-column-fixed {
    position: fixed;
    top: 60px;
    width: 320px;
}

.map-container {
	height: 300px;
}
.map-container-sidebar {
	height: 200px;
}
.map-container-pad{
    padding: 15px;
}
.center {
	display: flex;
	justify-content: center;
	align-items: center;
}


.card {
    margin-bottom: 8px;
    background-color: #1A1A1B;
}
.generic-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0px 10px 10px 10px;
}
.error-card {
    margin-bottom: 8px;
    background-color: #FFF2F2;
    border: 1px solid #FFCCCC;
    color: #FF0000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    padding: 10px 10px 10px 10px;
}

.card-text {
    padding: 10px;
    
}

.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 200px;
}
.profile-background {
    width: 100%;
    height: 54px;
    background: linear-gradient(90deg, #FFFFFF 0%, #313133 100%);
    position: relative;
    margin-bottom: 50px;
}
.profile-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid #fff;
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translate(-50%, 20%);
}
.profile-title {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 18px;
}
.profile-title:hover {
    text-decoration: none;   
}
.profile-title-link:hover {
    text-decoration: none;   
}
.profile-subtitle {
    font-size: 14px;
    margin-bottom: 5px;
}
.profile-info {
    width: 80%;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin-top: 10px;
}
.profile-info-name {
    display: flex;
    align-items: flex-start;
}
.profile-info-value {
    display: flex;
    align-items: flex-end;
}
.profile-button-full {
    width: 100%;
    margin-top: 10px;
    background-color: #313133;
    color: #FFFFFF;
    font-weight: bold;
    padding: 10px 15px;
    cursor: pointer;
}
.profile-button-full:hover {
    background: #3E3E3F;
	color: #FFFFFF;
	text-decoration: none;
}

.menu-card {
    display: flex;
    flex-direction: column;
}
.menu-header {
    background: #313133;
    width: 100%;
    display: flex;
    color: #c7d1d8;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0 10px 0;
    cursor: pointer;
}
.menu-header:hover {
    background: #313133;
    color: #FFFFFF;
}
.dropdown-menu-header {
    background: #313133;
    width: 100%;
    display: flex;
    color: #c7d1d8;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0 10px 0;
    cursor: pointer;
}
.dropdown-menu-header:hover {
    background: #313133;
    color: #FFFFFF;
}
.menu-header-no-hover {
    width: 100%;
    display: flex;
    color: #c7d1d8;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0 10px 0;
}
.menu-header-title {
    padding-left: 12px;
    height: 100%;
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: flex-start;
}
.menu-header-angle {
    padding-right: 14px;
    padding-top: 3px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fa-menu-item {
    padding-left: 14px;
    margin-right: 10px;
}
.menu-item {
    width: 100%;
    display: flex;
    color: #c7d1d8;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
}
.menu-item:hover {
    background: #313133;
    text-decoration: none;
    color: #FFFFFF;
    transition: 0.2s;
}
.dropdown-menu-item {
    width: 100%;
    display: flex;
    color: #c7d1d8;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    padding: 10px 0 10px 15px;
}
.dropdown-menu-item:hover {
    background: #313133;
    text-decoration: none;
    color: #FFFFFF;
    transition: 0.2s;
}
.menu-start {
    height: 10px;
}
.menu-end {
    height: 10px;
}

.create-card {
    display: flex;
    width: 100%;
    height: 70px;
    cursor: pointer;
    color: #c7d1d8;
    margin-bottom: 10px;
}
.create-card-last {
    display: flex;
    width: 100px;
    height: 70px;
    cursor: pointer;
    color: #c7d1d8;
    margin-bottom: 10px;
}
.create-card:hover {
    text-decoration: none;
}

.create-card-container {
    width: 100%;
    height: 100%;
    display: flex;
}

.create-card-border-right {
    border-right: 1px solid #434649;
}

.create-card-title-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 35px;
}
.create-card-title-container:hover {
    background: #313133;
    color: #FFFFFF;
    transition: 0.2s;
}
.create-form-card {
    padding: 10px;
}

.fa-edit {
    margin-right: 10px;
}
.create-card-title {
    
}
.create-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
}
.create-card-icon:hover {
    background: #313133;
    text-decoration: none;
    color: #FFFFFF;
    transition: 0.2s;
}

.back-page-card {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 50px;
    cursor: pointer;
    color: #c7d1d8;
    padding: 0px 10px;
}

.back-page-card:hover {
    text-decoration: none;
    background: #313133;
    color: #FFFFFF;
    transition: 0.2s;
}
.back-page-card-icon {
    font-size: 18px;
    margin-right: 10px;
}

.page-description {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.page-description-text {
    color: #696c6f;
    margin-left: 10px;
    margin-right: 15px;
    font-size: 14px;
    font-weight: bold;
}

hr {
    flex-grow: 1;
    border: 0;
    display: block;
    height: 1px;
    border-top: 1px solid #696c6f;
}


.mask-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.mask-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #313133;
    padding: 10px;
}
.mask-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 10px;
}
.mask-details {
    flex-grow: 1;
    font-size: 13px;
    color: #696c6f;
}

.mask-username {
    font-weight: bold;
    color: #FFFFFF;
}

.mask-option-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #696c6f;
    cursor: pointer;
    background-color: #313133;
    padding: 4px 5px;
    border-radius: 50%;
    width: 32px;
}
.mask-option-dots:hover {
    color: #FFFFFF;
    background-color: #3E3E3F;
}

.mask-options-menu-container {
    display: none;
    position: relative;
}
.mask-options-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    border: 1px solid #313133;
    background-color: #313133;
    top: 26px;
    left: -140px;
    font-size: 16px;
    width: 150px;
    z-index: 5;
}
.mask-options-menu-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #c7d1d8;
    font-size: 16px;
    line-height: 1.6;
    padding: 5px 5px 5px 10px;
    cursor: pointer;
    user-select: none;
}
.mask-options-menu-option:hover {
    color: #FFFFFF;
    text-decoration: none;
    background-color: #3E3E3F;
}

.mask-title {
    display: inline-block;
    color: #0073b1;
    font-size: 18px;
    font-weight: bold;
    overflow-x: hidden;
    word-wrap: break-word;
    width: 535px;
    max-width: calc(100vw - 20px);
}
.mask-title:hover {
    text-decoration: none;
}
.mask-subtitle {
    overflow-x: hidden;
    word-wrap: break-word;
    width: 535px;
    max-width: calc(100vw - 20px);
}
.mask-body {
    padding: 10px;
}
.mask-media {
    width: 100%;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}
.mask-media-video {
    width: 100%;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}
.blur {
    -webkit-filter: blur(10px);
    filter: blur(10px);
}
.mask-media:hover {
    .blur {
        filter: blur(0px);
        transition: 0.2s;
    }
}
.mask-video-background {
    width: 100%;
    height: 100%;
    background-size: cover;
    object-fit: contain;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.mask-media-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
}

.mask-stats {
    margin-left: 10px;
    font-size: 13px;
    color: #FFFFFF;
}
.footer-spacer {
    margin-bottom: 20px;
}
.mask-footer {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    width: 100%;
    border-top: 1px solid #696c6f;
}
.mask-footer-item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #696c6f;
    font-size: 14px;
    font-weight: bold;
    margin-right: 20px;
    cursor: pointer;
}
.mask-footer-item-icon {
    font-size: 20px;
    margin-right: 5px;
}
.mask-footer-item:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.list-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.mask-list {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
}
.mask-list:hover {
    /*background-color: #313133;*/
}

.mask-list-actions {
    width: 100%;
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.list-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 10px;
}

.list-title {
    color: #0073b1;
    font-size: 16px;
    font-weight: bold;
}
.list-title:hover {
    text-decoration: none;
}

.list-details {
    flex-grow: 1;
    /*font-size: 13px;*/
    color: #c7d1d8;
}

.list-button {
    padding: 5px 10px;
    background-color: #313133;
    color: #c7d1d8;
    cursor: pointer;
}
.list-button:hover {
	background: #3E3E3F;
	color: #FFFFFF;
	text-decoration: none;
}

.login-card {
    width: 100%;
}
.login-form {
    width: 100%;
    padding: 0px 10px 10px 10px;
}

.sidebar-right-links {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #434649;
}
.sidebar-right-links-link {
    color: #434649;
}
.sidebar-right-links-link:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.splide-container {
    /*border: 1px solid #696c6f;*/
    width: 100%;
    /*height: 420px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: 5px;
}

.splide {
    background-color: #1A1A1B;
}
.splide__slide {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.splide-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.splide-video {
    max-width: 100%;
    max-height: 420px;
    width: auto;
    height: auto;
    object-fit: contain;
}


.page_numbers {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 20px;
}
.page_numbers a {
	text-decoration: none;
}
.page_numbers_item {
    height: 30px;
    min-width: 30px;
    display: flex;
	align-items: center;
	justify-content: center;
	color: #7D7F80;
	padding-left: 10px;
	padding-right: 10px;
	border: 1px solid #343536;
	margin: 5px;
}
.page_numbers_item a {
	color: #7D7F80;
}
.page_numbers_item:hover {
	background-color: #2C2C2D;
	color: #FFFFFF;
	cursor: pointer;
}
.page_numbers_item_selected {
	background-color: #2C2C2D;
	font-weight: bold;
}

.rules-card {
    width: 100%;
    padding: 15px 10px 10px 10px;
}


.comment-card {
	padding: 15px 10px 10px 10px;
	margin-bottom: 20px;
}
.comment-container {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	border-bottom: 1px solid #696c6f;
}
.comment-container:last-child {
	border: none;
}
.comment-img-container {
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.comment-img {
    display: flex;
    align-items: flex-start;
    justify-content: center;
	width: 32px;
	border-radius: 50%;
	margin-top: 5px;
	margin-right: 10px;
}
.comment-main {
    flex-grow: 1;
    margin-right: 5px;
}
.comment-text {
    padding-top: 5px;
	overflow-x: hidden;
    word-wrap: break-word;
    width: 465px;
    max-width: calc(100vw - 90px);
}
.comment-details {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	font-size: 13px;
    color: #696c6f;
    margin-bottom: 3px;
}
.comment-details-username {
    color: #FFFFFF;
    font-size: 13px;
    /*font-weight: bold;*/
}
.comment-action {
    height: 100%;
    display: flex;
	align-items: flex-start;
	justify-content: center;
	color: #c7d1d8;
	padding-right: 5px;
	cursor: pointer;
	margin-top: 5px;
}
.comment-action:hover {
    color: #FFFFFF;
}


.arrow-card {
	display: flex;
	align-items: center;
	padding: 10px;
	cursor: pointer;
	color: #c7d1d8;
	font-size: 18px;
	/*justify-content: center;*/
}
.arrow-card:hover {
	text-decoration: none;
	color: #FFFFFF;
}
.arrow-card-img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	margin-right: 15px;
}
.arrow-card-center {
	flex-grow: 1;
}


/*Less than 1047px*/
@media only screen and (max-width: 1047px) {
	.large-only {
		display: inline !important;
	}
	.small-only {
		display: none !important;
	}
}

/*Less than 700px*/
@media only screen and (max-width: 550px) {
    .toggleMenu {
        
    }
	.large-only {
		display: none !important;
	}
	.small-only {
		display: inline !important;
	}
}

/*Less than 1150px*/
@media only screen and (max-width: 1150px) {
    .center-column {
        margin-right: 0px;
    }
    .right-column {
        display: none;
    }
}
@media only screen and (max-width: 810px) {
    .nav-item-menu {
        display: block;
    }
    .left-column {
        display: none;
    }
    .center-column {
        margin-right: 0px;
    }
    .ad-bar-container {
        flex-direction: column;
    }
    .ad-bar-separator {
        display: none;
    }
}
@media only screen and (max-width: 550px) {
    .ad-bar-container {
        flex-direction: column;
    }
    .ad-bar-separator {
        display: none;
    }
    .ad-bar-ad {
        /*display: none;*/
    }
    .center-column {
        width: 100%;
        margin-right: 0px;
    }
    .create-card-title-container {
        padding-left: 30px;
    }
    .create-card-border-right {
        /*border: none;*/
    }
    .create-card-icon {
        /*display: none;*/
    }
}