/* defaults */
.hidden { /* bootstraps d-none adds important to display:none, hence the need for our own */
    display: none;
}

/* bootstrap icon circle background  */
.circle-icon {
    background: rgb(86, 86, 86);
    border-radius: 50%;
    display: block;
    font-size: 16px;
    padding: 8px;
    max-width: 31px;
    max-height: 31px;
}

.circle-icon:active,
.circle-icon:hover {
    background: #fcbd49;
    color: rgb(255, 255, 255);
}

/* main styles */
body {
    background-color: rgb(56, 56, 56);
    font-family: Kanit, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: subpixel-antialiased;
}

/* main menus */
.container.bg-dark,
.container-fluid.bg-dark,
.navbar.bg-dark {
    background-color: rgb(42,42,42)!important;
}

nav.navbar a {
    color: rgb(255, 255, 255);
}

nav.navbar a:active,
nav.navbar a:hover,
.nav-link:focus
{
    color: #fcbd49;
}

nav.navbar .dropdown-menu .dropdown-item a.rd-nav-link:active,
nav.navbar .dropdown-menu .dropdown-item a.rd-nav-link:hover {
    color: #ffffff;
}

.dropdown-item:focus,
.dropdown-item:hover {
    background-color: #fcbd49;
    color: rgb(255, 255, 255);
}

nav.navbar ul {
    list-style-type: none;
    text-transform: uppercase;
    font-weight: 500;
}

nav.navbar ul li a {
    text-decoration: none;
}

.offcanvas a.nav-link {
    color: rgb(204, 204, 204);
    font-weight: 500;
    font-size: 16px;
}

.offcanvas .offcanvas-start {
    color: rgb(204, 204, 204);
    background-color: rgb(56, 56, 56);
    height: 100%;
    padding-left: 18px;
    text-transform: uppercase;
}

.offcanvas .offcanvas-start ul.dropdown-menu {
    background-color: rgb(56, 56, 56);
}

#fixedMainMenu .nav-link {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .075em;
    line-height: 1.2;    
}

/* main page areas */
img.brand {
    max-width: 300px;
}

@media screen and (max-width: 576px) {
    .img-fluid-sm {
        max-width: 100%;
        height: auto;
    }
}
@media screen and (min-width: 576px) {
    .img-row-260 {
        max-height: 260px;
    }

    .img-row-260 img {
        max-height: 260px;
    }
}
/* carousel button styles */
.carousel .carousel-control-prev-icon,
.carousel .carousel-control-next-icon {
	position: absolute;
	top: 50%;
	height: 50px;
	width: 66px;
	overflow: hidden;
	transform: translate3d(0, -50%, 0);
	color: #fff;
	font-size: 27px;
	line-height: 1;
}

.carousel .carousel-control-prev-icon::before,
.carousel .carousel-control-next-icon::before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	font-family: 'Material Icons';
}

.carousel .carousel-control-prev-icon::after,
.carousel .carousel-control-next-icon::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: #313539;
	pointer-events: none;
	transition: .33s;
	outline: 1px solid transparent;
}

.carousel .carousel-control-prev-icon:hover,
.carousel .carousel-control-next-icon:hover {
	color: #fff;
}

.carousel .carousel-control-prev-icon:hover::after,
.carousel .carousel-control-next-icon:hover::after {
	background: #fcbd49;
}

.carousel .carousel-control-prev-icon i.bi,
.carousel .carousel-control-next-icon i.bi {
	position: relative;
    top: 10px;
}

.carousel .carousel-control-prev-icon {
	left: 0;
}

.carousel .carousel-control-prev-icon::before {
	margin-left: -3px;
}

.carousel .carousel-control-prev-icon::after {
	transform-origin: 100% 100%;
	transform: skew(10deg);
}

.carousel .carousel-control-next-icon {
	right: 0;
}

.carousel .carousel-control-next-icon::before {
	margin-right: -3px;
}

.carousel .carousel-control-next-icon::after {
	transform-origin: 100% 100%;
	transform: skew(-10deg);
}

#sharesCarousel.carousel .carousel-control-prev-icon,
#sharesCarousel.carousel .carousel-control-next-icon {
    height: 50px;
	width: 22px;
}

/* blogg card */
.card .card-title {
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.25;
}

#mainContent p,
.card .card-text,
.card .card-text p,
.card .card-body p,
.card .card-body p span {
    font-family: Ubuntu, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #646464;
    letter-spacing: 0.7;
}

.card .card-text.share-icons,
.card .card-text.share-icons a {
    color: rgb(255, 255, 255);
    vertical-align: middle;
}

.card-text-truncated {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

h5.card-title a {
    color: #212529;
    text-decoration: none;
}
h5.card-title a:active,
h5.card-title a:hover {
    color: #fcbd49;
    text-decoration: none;
}

.card p.text-body-secondary {
    font-weight: 400;
}

@media only screen and (min-width: 768px) {
    .card-body-news {
        min-height: 150px;
    }
}

/* footer */
#footer,
#footer a,
#footer-links, 
#footer-links ul li a {
    color: #ffffff;
    text-decoration: none;
    font-family: Ubuntu, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.35px;
}

#footer a:active,
#footer a:hover,
#footer-links ul li a:active,
#footer-links ul li a:hover {
    color: #fcbd49;
}

#footer-links p.header-p {
    font-weight: 600;
}

#footer-links .header-p {
    text-transform: uppercase;
}

#footer #footerMediaLinks ul li {
    display: block;
}

#footer ul li a {
    margin-top: .5rem;
    display: block;
}

#mainContent {
    min-height: 600px;
}

.profile-card {
    background-color: #383838;
    color: #ffffff;
    text-transform: uppercase;
}

.profile-card img {
    max-height: 100px;
}

.profile-card .row {
    min-height: 100px;
}

.profile-card .card-body {
    height: 100%;
}

.share-single {
    color: #ffffff;
    font-weight: 300;
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;
}

.share-single.share-europatipset,
.background-europatipset {
    background-color: #008734;
    color: white;
}

.share-single.share-stryktipset,
.background-stryktipset {
    background-color: #00427a;
    color: white;
}

.share-single.share-topptipset,
.background-topptipset {
    background-color: #ff8927;
    color: white;
}

.share-single.share-challenge,
.background-challenge {
    background-color: #a61018;
    color: white;
}

.share-single.share-powerplay,
.background-powerplay {
    background-color: #a61018;
    color: white;
}

.share-single.share-bomben,
.background-bomben {
    background-color: #a61018;
    color: white;
}

.share-single.share-atg,
.background-atg {
    background-color: #014f9f;
    color: white;
}

#contentTableau img {
    width: 100%;
    height: auto; 
}

.tableau-single {
    position: relative; 
}

.tableau-single .badge {
    position: absolute; 
    top: 1rem;
    right: 1.5rem;
    font-size: 15px;
    font-weight: 400;
}


/* start page banner row */
.startpage-banner-row div {
    overflow: hidden;
}


/* Reducering */
.reduction-card {
    border: 2px solid #d1d1d1;
    border-radius: 10px;
}

#gametypeSelectorList .thumbnail-square-100 {
    opacity: 25%;
}

#gametypeSelectorList .thumbnail-square-100.active {
    opacity: 100%;
}

.thumbnail-square-100 {
    display: block;
    width: 85px;
    height: 85px;
    overflow: hidden;
}

.thumbnail-square-100 img {
    height: 85px;
    width: auto;
    position: relative;
    left: -45px;
}

.thumbnail-30 {
    height: 30px;
    width: auto;
}

.gametype-selector {
    font-size: 1.25rem;
    font-weight: 400;
}

th.selection-header {
    width: 60px;
}

.reduction-table thead tr th {
    background-color: #4D4D4D;
    font-weight: 600;
    color: #ffffff;
    border-left: 2px solid #ffffff;
}

.current-bet-table thead tr th {
    background-color: #4D4D4D;
    font-weight: 600;
    color: #ffffff;
    border-top: 1px solid #fefefe;
}

.reduction-table tbody tr td {
    color: #000000;
    padding: .25rem .25rem;
}

.reduction-table tbody tr td,
#mainContent .reduction-table tbody tr td p,
.reduction-table tbody tr td p {
    font-weight: 600;
}

.current-bet-table tbody tr td.dark,
.reduction-table tbody tr td.dark {
    background-color: #313031;
    color: #ffffff;
}

.reduction-table tbody tr td.tbl-col:active,
.reduction-table tbody tr td.tbl-col:hover {
    background-color: #D0EBD8;
}

.reduction-table .team-name,
.reduction-table .broadcast-date {
    font-size: 14px;
    font-weight: 400;
}

.reduction-table .tbl-col {
    border: 2px solid #EFEFEF;
    cursor: pointer;
}

.reduction-table .tbl-col p {
    margin-bottom: 2px;
}

#colorSelection button {
    color: #ffffff;
    min-width: 80px;
}


button.btn.reduction-color-green {
    background-color: #60C680;
    border-color: #60C680;
}

button.btn.reduction-color-green:active,
button.btn.reduction-color-green:hover {
    background-color: #40b364;
    border-color: #40b364;
}

button.btn.reduction-color-green-2 {
    background:#5BAB24;
    color: #ffffff
}

button.btn.reduction-color-green-2:active,
button.btn.reduction-color-green-2:hover {
    background:#45811b;
    color: #ffffff;
}

.live-correction, .live-correction-loading {
    min-width: 215px !important;
    min-height: 60px;
    background: #106EA6 !important;
    text-transform: uppercase;    
}

.btn-svenska-spel-submit {
    min-width: 215px !important;
    background: #E60000 !important;
    display: block;
    border: none;
    padding: 0 !important;
    cursor: pointer;
}

button.btn-svenska-spel-submit img {
    width: 62px;
    height: 62px;
}

/* reduction filter */
.background-dark,
.container-filter .reduction-card .background-dark {
    background-color: #4D4D4D;
    color: #ffffff;
}

.container-filter .reduction-card .display-label,
.container-filter .reduction-card .form-label,
.container-filter .reduction-card .form-check-label {
    color: #fff;
    font-size: 17px;
    font-weight: 400;
}

.reduction-tooltip-icon {
    font-weight: 600;
}

/* default */
.reduction-color-green,
.reduction-table tbody tr td.reduction-color-green,
.current-bet-table tbody tr td.selected-color-green,
#lineSketchTab table tbody td.selected-color-green,
#lineSketchTab table tbody td.selected-color-home,
#lineSketchTab table tbody td.selected-color-draw,
#lineSketchTab table tbody td.selected-color-away {
    background-color: #60C680;
}
.btn.reduction-color-green:active,
.btn.reduction-color-green:hover {
    background-color: #40b364;
}

/* yellow */
.reduction-color-yellow,
.reduction-table tbody tr td.reduction-color-yellow,
.current-bet-table tbody tr td.selected-color-yellow,
#lineSketchTab table tbody td.selected-color-yellow {
    background-color: #FF8927;
}
.btn.reduction-color-yellow:active,
.btn.reduction-color-yellow:hover {
    background-color: #f36e00;
}
.reduction-color-yellow label.input-group-text,
.background-color-yellow {
    background-color: #ff9741;
    border-color: #ff9741;
    color: #ffffff;
}

/* purple */
.reduction-color-purple,
.reduction-table tbody tr td.reduction-color-purple,
.current-bet-table tbody tr td.selected-color-purple,
#lineSketchTab table tbody td.selected-color-purple {
    background-color: #C261C6;
}
.btn.reduction-color-purple:active,
.btn.reduction-color-purple:hover {
    background-color: #af41b3;
}
.reduction-color-purple label.input-group-text,
.background-color-purple {
    background-color: #c974cd;
    border-color: #c974cd;
    color: #ffffff;
}

/* red */
.reduction-color-red,
.reduction-table tbody tr td.reduction-color-red,
.current-bet-table tbody tr td.selected-color-red,
#lineSketchTab table tbody td.selected-color-red {
    background-color: #C54643;
}
.btn.reduction-color-red:active,
.btn.reduction-color-red:hover {
    background-color: #a33532;
}
.reduction-color-red label.input-group-text,
.background-color-red {
    background-color: #cb5956;
    border-color: #cb5956;
    color: #ffffff;
}

/* blue */
.reduction-color-blue,
.reduction-table tbody tr td.reduction-color-blue,
.current-bet-table tbody tr td.selected-color-blue,
#lineSketchTab table tbody td.selected-color-blue{
    background-color: #3464cc;
}
.btn.reduction-color-blue:active, 
.btn.reduction-color-blue:hover {
    background-color: #5d83d6;
}
.reduction-color-blue label.input-group-text, 
.background-color-blue {
    background-color: #5da2d1;
    border-color: #5da2d1;
    color: #ffffff;
}

/* color labels */
.reduction-color .form-switch label.form-check-label {
    min-width: 200px;
}

#mainContent .reduction-table tbody tr td.reduction-color-green p,
#mainContent .reduction-table tbody tr td.reduction-color-yellow p,
#mainContent .reduction-table tbody tr td.reduction-color-purple p,
#mainContent .reduction-table tbody tr td.reduction-color-red p,
#mainContent .reduction-table tbody tr td.reduction-color-blue p {
    color: #ffffff;
}

.current-bet-table tbody tr td.selected-color-green span,
.current-bet-table tbody tr td.selected-color-yellow span,
.current-bet-table tbody tr td.selected-color-purple span,
.current-bet-table tbody tr td.selected-color-red span,
.current-bet-table tbody tr td.selected-color-blue span {
    color: #ffffff;
}


/* default */
.current-bet-table tbody tr td {
    margin: 5px;
    padding: 2px;
}

.current-bet-table tbody tr td.selected-result span {
    display: block;
    margin: 0px;
    padding: 5px;
    border: 5px solid #4D4D4D;
}

.current-bet-table tbody tr td.temporary-result span {
    display: block;
    margin: 0px;
    padding: 5px;
    border: 5px dotted #4D4D4D;
}

.reduction-accordion,
#mainContent .reduction-accordion p {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
}

.reduction-accordion {
    min-width: 75px;
}

#mediaContent h5 {
    text-transform: uppercase;
}

#mediaContent .card .card-text {
    min-height: 110px;
}

.pageNyheter .card .card-text {
    min-height: 90px;
}

.selection-header {
    cursor: pointer;
}

.no-break,
.turnover,
.closing-time {
    white-space: nowrap;
}

/* Reduction match info*/

#reductionInformationTabs ul li a {
    color: #ffffff;
    cursor: pointer;
    text-transform: uppercase;
}


#reductionInformationTabs .nav-tabs .nav-link.active {
    background-color: #313131;
}

#reductionInformationTabs .nav-tabs,
#reductionInformationTabs .nav-tabs .nav-link {
    border-color: #313131;
}

#reductionCountWarning {
    font-weight: 400;
}

.reduction-color .reduction-color-group-select option:disabled {
    color: #cecece;
}

/* Reduction post calculation table*/
#postReductionTable thead tr th {
    padding-top: 30px;
    padding-bottom: 10px;
}

#postReductionTable tbody tr td {
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
    padding-top: 15px;
    padding-bottom: 15px;
}

.reduction-card .round-selector {
    cursor: pointer;
    opacity: 0.7;
}

.reduction-card .round-selector.active {
    opacity: 1;
}


#reductionCalculationCountWarning.bg-grey {
    background-color: #4D4D4D;
}

#overviewTab table td.selected {
    background-color: #60C680;
    color: #ffffff;
}

#lineSketchTab table td.team-cell,
.table-striped>tbody>tr:nth-of-type(odd) td {
    background-color: #ffffff;
}

#lineSketchTab table td.team-cell {
    height: 30px;
    width: 30px;
    border: 1px solid #333333;
}

#lineSketchTab #tableColorInformation {
    font-size: 16px;
    font-weight: 400;
}

.canvas-print {
    width: 600px;
}

#sharesCarousel {
    min-height: 160px;
}

.livebet-selector {
    cursor: pointer;
}

.livebet-title {
    font-weight: 600;
    font-size: 16px;
}

.links-no-underline a {
    text-decoration: none;
}

@media screen and (max-width: 576px) {
    .reduction-card .border-start {
        border-left: 0px solid black!important;
    }
}

.reduction-card .form-check-input {
    border: 1px solid #666666;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.5%29'/%3e%3c/svg%3e");
}

/* google chart */

@media screen and (max-width: 576px) {
    #revenueTabChartData text {
        font-size: 9px;
    }
}


#visitorSharesList .share-single {
    font-weight: 600;
}

#addVisitorShare a {
    color: var(--bs-card-cap-color);
    text-decoration: none;
}

#addVisitorShare a:hover,
#addVisitorShare a:active {
    color: #fcbd49;
}

#addVisitorShare #visitorShareForm label {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding-left: 1rem;
}

#addVisitorShare #gametypeSelectorList a {
    cursor: pointer;
}

#addVisitorShare #gametypeSelectorList a.selected {
    opacity: 100%;
}

.button-yellow {
    background-color: #FF8927;
    border-color: #ff9741;
    color: #ffffff;
}
.btn.button-yellow:active,
.btn.button-yellow:hover {
    background-color: #f36e00;
    border-color: #ff9741;
}

.btn.button-yellow:disabled {
    background-color: #ff9842;
    border-color: #ff821b;
}

.overflow-safe {
    overflow: hidden;
    text-overflow: ellipsis;   
}

.modal-link:active,
.modal-link:hover {
    text-decoration: underline;
    cursor: pointer;
}

.share-linked {
    color: #ffffff;
}

.modal-body a {
    color: #f36e00;
}

.modal-body a:active,
.modal-body a:hover {
    color: #ff9842;
}

.livebet-top a,
.livebet-top a:visited {
    color: #333333;
    text-decoration: none;
}

.livebet-top a:active,
.livebet-top a:hover {
    color: #fcbd49;
}

.updated-score {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(96, 198, 128, 0.5),
        rgba(96, 198, 128, 0.5) 10px,
        rgba(223, 243, 229, 0.5) 10px,
        rgba(223, 243, 229, 0.5) 20px
    );
    background-color: #60C680;
    background-size: cover;
    background-attachment: fixed;
}

#correctRowsTitle {
    font-size: 1.5em
}

.color-setting-block {
    display: block; 
    height: 14px;
    width: 14px;
}

#mainPageBlurb h1 {
    font-family: Ubuntu, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #646464;
    letter-spacing: 0.7;
}

#mainPageBlurb p {
    font-family: Ubuntu, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #646464;
    letter-spacing: 0.7;
}

#livebetCurrentSystemResults {
    position: relative;
}

#audioSymbol {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.5rem;
    cursor: pointer;
}

.share-title {
    white-space: normal;
}