@font-face {
    font-family: 'Swedensans';
    src: url('SwedenSansRegular.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: Swedensans, sans-serif;
}

h2 {
    margin: 2px 0px;
}

.outer {
    display: flex;
    justify-content: center;
    align-items: stretch;
    height: 100vh;
    background-color: #f5f5f5;
}

.wrapper {
    width: 1200px;
    display: flex;
    flex-direction: column;
    background-color: rgb(26, 48, 80);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.header {
    padding: 0.5rem;
    background-color: #142638;
    color: white;
    text-align: center;
    font-size: 1.5rem;
}

#activation {
    text-align: center;
    background-color: rgb(26, 48, 80);
}

#job-type-select {
    width: 100%;
    background-color: rgb(254, 203, 0);
}

#event-filter-area {
    width:100%;
    text-align:center;
    color:white;
    padding:8px;
    font-size:18px;
}

.main-key-area {
    margin-top: 30px;
    font-size: 20px;
    color:white;
}

#mainToken {
    font-size: 18px;
    color: black;
    padding: 10px;
    background-color: rgb(254, 203, 0);
}

.content {
    flex: 1;
    display: flex;
    flex-direction: row;
}

.left {
    width: 0%;
    display: none;
    background-color: rgb(254, 203, 0); /* #d0eaff; */
    padding: 1rem;
}

.right {
    width: 100%;
    background-color: #1a3050;
    padding: 1rem;
}

#candidate-search-select {
    width: 100%;
    background-color: rgb(254, 203, 0); /* #142638;  */
    text-align: center;
}

#description {
    width: 100%;
    background-color: rgb(254, 203, 0);
}

.description-block {
    margin: 40px auto 40px 15%;   
    font-size:18px;
}

.info {
    display: block;
    padding: 5px;
    border: solid 1px #c0c0c0;
    font-size: 10px;
}

ul.no-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

.panelrow {
    padding: 5px;
    width: 100%;
}

.activate-button {
    font-size: 18px;
    margin: 5px 0px;
    background-color: yellowgreen;
    border-radius: 5px;
    padding: 10px
}

.key-choice {
    font-size: 14px;
    margin: 10px 0px;
    background-color: yellowgreen;
    border-radius: 5px;
    padding: 4px;
}

.prepare-choice {
    padding: 10px;
    text-align: center;
    background-color: yellowgreen;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    user-select: none;
    border-radius: 10px;
    margin: 10px 5px;
}

.filter-box {
    font-size: 16px;
}

.filter-label {
    font-size: 16px;
}

label.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.item {
    border: solid 1px #ffffff;
    padding: 5px;
}

.candidate {
    background-color: yellowgreen;
}

.no-candidate {
    background-color: rgb(254, 203, 0);
}

.duplicate {
    background-color: rgb(189, 189, 189);
}

.blocked {
    background-color: palevioletred;
}

.candidate-tag {
    border: solid 1px lightgreen;
    background-color: lightgreen;
    padding: 2px;
    text-transform: uppercase;
    display: inline-block;
    font-size: 10px;
    margin-left: 5px;
    position: relative;
    top: -2px;
}

.duplicate-tag {
    border: solid 1px #808080;
    background-color: #808080;
    padding: 2px;
    text-transform: uppercase;
    display: inline-block;
    font-size: 10px;
    margin-left: 5px;
    position: relative;
    top: -2px;
}

.blocked-tag {
    border: solid 1px red;
    background-color: red;
    padding: 2px;
    text-transform: uppercase;
    display: inline-block;
    font-size: 10px;
    margin-left: 5px;
    position: relative;
    top: -2px;
}

.source-tag {
    border: solid 1px firebrick;
    background-color: firebrick;
    color: white;
    padding: 1px;
    text-transform: uppercase;
    display: inline-block;
    font-size: 8px;
    margin-left: 3px;
    position: relative;
    top: -1px;
}

.source-tag-nodata {
    border: solid 1px firebrick;
    background-color: firebrick;
    color: white;
}

.source-tag-sample {
    border: solid 1px lightblue;
    background-color: lightblue;
    color: black;
}

.source-tag-cache {
    border: solid 1px orange;
    background-color: orange;
    color: black;
}

.source-tag-real {
    border: solid 1px green;
    background-color: green;
    color: white;
}

.create-event-button {
    width:50%;
    font-size:18px;
    height:40px;
    border-radius:10px;
}

.flag-as-blocked-button {
    margin-left:5px;
    width: 23%;
    font-size: 18px;
    height: 40px;
    border-radius: 10px;
}

.meta-data-button {
    width: 23%;
    margin-left: 5px;
    font-size: 18px;
    height: 40px;
    border-radius: 10px;
}

#meta-data {
    color: grey;
}

.button-group {
    display: flex;
    width: 90%;
    margin:10px 0px 10px 5%;    
}

.button-group input[type="radio"] {
    display: none;
}

.button-group input[type="radio"]:hover {
    background-color: #005293;
}

    .button-group label {
        flex: 1;
        padding: 10px;
        text-align: center;
        background-color: rgb(189, 189, 189);
        border: 1px solid #ccc;
        cursor: pointer;
        transition: background-color 0.3s, color 0.3s;
        user-select: none;
        border-radius: 10px;
        margin: 0 2px;
    }


.button-group input[type="radio"]:checked + label {
    background-color: #142638;
    color: white;
    border-color: white;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

.button-group label:not(:last-child) {
    border-right: none; /* remove double borders */
}

button:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    opacity: 0.6;
}

.button-group label.disabled {
    opacity: 0.5; /* Gör den visuellt dimmad */
    cursor: not-allowed; /* Visar att den inte går att klicka på */
}

#time-limit {
    height:32px;
}