/*
.breadcrumb {
    background-color: transparent!important;
    margin-bottom: 0;
}*/

:root {
    --white: #ffffff;
    --light: #f0eff3;
    --black: #000000;
    --dark-blue: #1f2029;
    --dark-light: #353746;
    --red: #da2c4d;
    --yellow: #f8ab37;
    --grey: #ecedf3;
}

body {
    color: #fff;
    background-color: #000;
    background-image: url("../default-bg.jpg");
    background-repeat: repeat-y;
    background-position: center top;
    background-attachment: fixed;
    overflow-x: hidden;

}
.minheight {
    min-height: 80vh;
}
.footer {
    background: rgba(0,0,0,.5);
}
.disabled {
    cursor: not-allowed !important;
}
a {
    color: #fff;
}
h1, h2, h3, h4, h5, h6, p, .h1, .h2, .h3, .h4, .h5, .h6, .p, ul, ol{
    padding: 0;
    margin: 0;
}
.pointer:hover {
    cursor:pointer;
    text-decoration: underline;
}
.card-body-wiki {
    padding: 0;
}


.min-100px {
    min-height: 100px;
}
.img-fluid-index {
    height: 100%;
}
.devider {
    margin: 0;
    padding: 0;
}
.navbar {
    padding: 0;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.5)!important;
}
.dropdown-item, .dropdown-toggle {
    display: inline-block;
    font-size: .85rem;
    line-height: normal;
    padding-bottom: 8px;
    padding-left: 10px!important;
    padding-top: 8px;
    vertical-align: middle;
    background: transparent!important;
}
.nav-link-menu {
    padding: .5rem;
}
.stream-link {
    color: #fff!important;
}
.stream-link:hover {
    color: #dc3545!important;
    text-decoration: none;
}
ul.none {
    list-style: none;
}
ul>li {
    padding: .25rem 0;
}
.table.s8 {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}


.w-15 {
    width: 15%!important;
}
.card {
    background-color: rgba(0,0,0,.5);
}
.card-header {
    padding: .25rem .75rem;
}
.breadcrumb, .breadcrumb-one {
    background-color: transparent;/*rgba(0,0,0,.3)*/
    border-radius: 0;
    margin-bottom: 0;
}
.breadcrumb-one {
    background-color: rgba(0, 0, 0, .3);
    margin-top: -1rem!important;
}
.table {
    color: #fff;
    background: rgba(0,0,0,.5);
}
.table-hover tbody tr:hover {
    color: #fff;
    background: #363636;
}
.table.group {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    background: transparent;
}
.bg-dark-tranc {
    background-color: rgba(0,0,0,.6);
}

.box-area {
}
.box-area .box-header {
    background: rgba(0,0,0,.5);
}
.box-area .box-icon {
    width: 5rem;
}
.box-area .box-content, .card {
    background: rgba(0,0,0,.25);
}
.box-area .box-content.wiki, .card {
    background: rgba(0,0,0,.5);
}
.box-area .box-footer {
    background: rgba(0,0,0,.5);
}
.box-area .box-content .table {
    margin-bottom: 0;
}
.box-area .box-content.wiki ul, .box-area .box-content.wiki ol, .box-area .box-content.wiki dl {
    padding-left: 2rem;
}
.box-area .box-content.changelog ul, .box-area .box-content.changelog ol, .box-area .box-content.changelog dl {
    padding-left: 2rem;
}
.wikis:hover {
    background: rgba(0,0,0,.5);
}
.wiki .img {
    width: 100%!important;
    height: auto!important;
}
.wiki ol, .wiki ul, .changelog ol, .changelog ul {
    /*padding: none !important;*/
}

.group-header {
    background: #151515;
    margin: 0 -20px;
    padding: 10px 20px;
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
}

.page-header {
    background: rgba(0,0,0,.8);
    border: 1px solid  #5a6268;
}

.box-ribbon {
    position: relative;
}
.ribbon-1 {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px; height: 75px;
    text-align: right;
}
.ribbon-2 {
    position: absolute;
    right: 10px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px; height: 75px;
    text-align: right;
}
.alert-success {
    /* OP */
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.alert-warning {
    /* Träning */
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.alert-info {
    /* Open Game */
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
.ribbon-1 span,.ribbon-2 span {
    font-size: 10px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 100px;
    display: block;
    background: #79A70A;
    background: linear-gradient(#9BC90D 0%, #79A70A 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px; right: -21px;
}
.ribbon-1 span.operation,.ribbon-2 span.operation {
    font-size: 10px;
    font-weight: bold;
    color: #155724;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 100px;
    display: block;
    background: #79A70A;
    background: linear-gradient(#1d7b32 0%, #43ff6e 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px; right: -21px;
}
.ribbon-1 span.open,.ribbon-2 span.open {
    font-size: 10px;
    font-weight: bold;
    color: #000;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 100px;
    display: block;
    background: #79A70A;
    background: linear-gradient(#a47e0c 0%, #ffc107 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px; right: -21px;
}
.ribbon-1 span.train,.ribbon-2 span.train {
    font-size: 10px;
    font-weight: bold;
    color: #0c5460;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 100px;
    display: block;
    background: #79A70A;
    background: linear-gradient(#17a2b8 0%, #17a2b8 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px; right: -21px;
}
.ribbon-1 span::before,.ribbon-2 span::before {
    content: "";
    position: absolute; left: 0px; top: 100%;
    z-index: -1;
    border-left: 3px solid #000;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #000;
}
.ribbon-1 span::after, .ribbon-2 span::after {
    content: "";
    position: absolute; right: 0px; top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-right: 3px solid #000;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #000;
}

.list-group {
    border: 1px solid #6c757d!important;
}
.list-group-item {
    background-color: transparent;
    border-bottom: 1px solid #6c757d!important;
    color: #fff;
}
.list-group-item:hover, .start-xml:hover {
    background-color: #0000004f;
    color: #fff;
}

.list-group-item:last-child {
    border-bottom: 0!important;
}

/*Datepiker*/
.bg-success .ui-state-default {
    background: #28a745!important;
    color: #fff!important;
}
.bg-success .ui-state-default.ui-state-active {
    background: #8c8c8c!important;
}

.bg-warning .ui-state-default {
    background: #ffc107!important;
    color: #fff!important;
}
.bg-warning .ui-state-default.ui-state-active {
    background: #8c8c8c!important;
}

.bg-danger .ui-state-default {
    background: #dc3545!important;
    color: #fff!important;
}
.bg-danger .ui-state-default.ui-state-active {
    background: #8c8c8c!important;
}

.bg-primary .ui-state-default {
    background: #007bff!important;
    color: #fff!important;
}
.bg-primary .ui-state-default.ui-state-active {
    background: #8c8c8c!important;
}

.bg-info .ui-state-default {
    background: #17a2b8!important;
    color: #fff!important;
}
.bg-info .ui-state-default.ui-state-active {
    background: #8c8c8c!important;
}

.ui-state-default.ui-state-active {
    background: #8c8c8c!important;
}

.event a {
    background-color: #42B373 !important;
    background-image :none !important;
    color: #ffffff !important;
}

.rl-dropdown {
    min-width: 100%;
    color: #212529;
    background-color: rgba(0,0,0,.9);
    border: 1px solid #6c757d;
}
.rl-dropdown .dropdown-item {
    color: rgba(255,255,255,1);
}
.rl-dropdown .dropdown-item:hover {
    background: rgba(102, 102, 102, 0.5);
}

/* width */
::-webkit-scrollbar {
    width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: red;
    border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #b30000;
}

/*
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked),
[type="radio"]:checked,
[type="radio"]:not(:checked){
    position: absolute;
    left: -9999px;
    width: 0;
    height: 0;
    visibility: hidden;
}

 */

.custom-radios div {
    display: inline-block;
}
.custom-radios input[type="radio"] {
    display: none;
}
.custom-radios input[type="radio"] + label {
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 14px;
}
.custom-radios input[type="radio"] + label span {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    line-height: 40px;
}
.custom-radios input[type="radio"] + label span img {
    opacity: 0;
    transition: all 0.3s ease;
}
.custom-radios input[type="radio"]#color-1 + label span {
    background-color: var(--green);
}
.custom-radios input[type="radio"]#color-2 + label span {
    background-color: var(--yellow);
}
.custom-radios input[type="radio"]#color-3 + label span {
    background-color: var(--red);
}
.custom-radios input[type="radio"]:checked + label span img {
    opacity: 1;
}




@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .marfin-md {
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}