/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

@font-face {
    font-family: "Rajdhani";
    src: url(../files/Rajdhani-Regular.ttf);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Rajdhani";
    src: url(../files/Rajdhani-Bold.ttf);
    font-weight: bold;
    font-style: normal;
}

.radio-item label, .checkbox-item label {
    color: white;
}

.group-description  {
    background: var(--wr-layout-background-dark-650);
    color: white;
}

#surveyListFooter {
display: none; 
}

:root {
    --wr-text-color-dark-secondary: #6c757d;
    --wr-text-color--lightest: rgb(255, 255, 255);
    --wr-text-color--lighter: rgb(235, 235, 235);
    --wr-text-color--light: rgb(200, 200, 200);
    --wr-text-color--light-gray: rgb(175, 175, 175);
    --wr-text-color--gray: rgb(155, 155, 155);
    --wr-text-color--dark-gray: rgb(110, 110, 110);
    --wr-text-color--dark: rgb(80, 80, 80);
    --wr-text-color--darker: rgb(40, 40, 40);
    --wr-text-color--darkest: rgb(0, 0, 0);
    
    --wr-layout-background-dark-default: rgb(42, 44, 46);
    --wr-layout-background-dark-1000: rgb(0, 4, 7);
    --wr-layout-background-dark-950: rgb(3, 4, 6);
    --wr-layout-background-dark-900: rgb(6, 8, 10);
    --wr-layout-background-dark-850: rgb(10, 12, 14);
    --wr-layout-background-dark-800: rgb(14, 16, 18);
    --wr-layout-background-dark-750: rgb(18, 20, 22);
    --wr-layout-background-dark-700: rgb(22, 24, 26);
    --wr-layout-background-dark-650: rgb(26, 28, 30);
    --wr-layout-background-dark-600: rgb(30, 32, 34);
    --wr-layout-background-dark-550: rgb(33, 35, 38);
    --wr-layout-background-dark-500: rgb(35, 39, 42);
    --wr-layout-background-dark-450: rgb(38, 41, 44);
    --wr-layout-background-dark-400: rgb(51, 55, 59);
    --wr-layout-background-dark-350: rgb(55, 61, 66);
    --wr-layout-background-dark-300: rgb(61, 66, 72);
    --wr-layout-background-dark-250: rgb(67, 72, 78);
    --wr-layout-background-dark-200: rgb(73, 79, 85);
    --wr-layout-background-dark-150: rgb(80, 86, 92);
    --wr-layout-background-dark-100: rgb(87, 93, 99);
}

body {
    background: var(--wr-layout-background-dark-default);
    font-family: 'Rajdhani',serif;
    color: #fbf8ff !important;
}
.card {
    background: var(--wr-layout-background-dark-600) !important;
    border-radius: 10px;
    color: #fbf8ff !important;
}

a, .wr-link {
    color: #fbf8ff !important;
    font-weight: bold;
    border-bottom: 2px solid var(--wr-layout-background-dark-100);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}
a:hover, .wr-link:hover {
    color: #fbf8ff !important;
    border-bottom: 2px solid var(--wr-layout-background-dark-300);
}

#survey-nav {
    background: var(--wr-layout-background-dark-800) !important;
    border-bottom: none !important;
    color: #fbf8ff !important;
}

h1, .group-title, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Rajdhani', 'serif';
    font-weight: bold;
}

.survey-description {
    font-family: 'Rajdhani', 'serif';
    color: var(--wr-text-color--light-gray) !important;
}

p {
    font-family: 'Rajdhani', 'serif';
    color: #fbf8ff !important;
    font-size: 14px;
    font-weight: normal;
}

.progress {
    background: var(--wr-layout-background-dark-700);
    justify-content: flex-start;
    border-radius: 100px;
    align-items: center;
    position: relative;
    padding: 0 5px;
    display: flex;
    height: 25px;
    width: calc(100% - 10px);
}
.progress .progress-bar {
    animation: load 3s normal forwards;
    box-shadow: 0 10px 40px -10px var(--wr-layout-background-light-700);
    border-radius: 100px;
    margin-left: -10px;
    background: var(--wr-layout-background-dark-100);
    height: 25px;
    min-width: 25px;
}

.question-title-container {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: var(--wr-layout-background-dark-600) !important;
    font-family: 'Rajdhani', 'serif';
    font-weight: bold;
    font-size: 15px;
}

.question-container {
    border-radius: 10px;
    background: var(--wr-layout-background-dark-600);
    border: none;
}

.ls-questionhelp {
    font-size: 13px;
    color: var(--wr-text-color--light-gray) !important;
}

.answer-container {
    border: none;
}

.question-valid-container {
    background: var(--wr-layout-background-dark-600) !important;
}

.ls-question-mandatory {
    font-weight: normal !important;
}

.answer-item.radio-item {
    color: #fbf8ff !important;
}

label {
    font-weight: normal;
}

input {
    background: var(--wr-layout-background-dark-400) !important;
    border-radius: 5px !important;
    color: var(--wr-text-color--light-gray) !important;
    border: var(--wr-layout-background-dark-500) 2px solid !important;
}

textarea {
    background: var(--wr-layout-background-dark-400) !important;
    border-radius: 5px !important;
    color: var(--wr-text-color--light-gray) !important;
    border: var(--wr-layout-background-dark-500) 2px solid !important;
}

table {
    background: var(--wr-layout-background-dark-700) !important;
    width: 100% !important;
    border-radius: 10px !important;
    box-shadow: 0 0 15px rgba(0,0,0, 0.25) !important;
    border-radius: 15px;
    border-collapse: unset;
    border: none;
}

.ls-heading > th {
    text-transform:uppercase;
    font-family: 'Rajdhani', serif;
    font-weight: bold !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
    color: #fbf8ff !important;
}

tr {
    padding: 15px 0 !important;
    border-top: 1px rgb(31, 34, 37) solid !important;
    transition: background-color 0.25s ease !important;
    cursor: pointer !important;
    font-size: 15px !important;
    color: #fbf8ff !important;
    border: none;
}

tr:hover, .table-hover>tbody>tr:hover>* {
    background: rgb(31, 34, 37) !important;
    color: #fbf8ff !important;
}

table .ls-odd {
    background: var(--wr-layout-background-dark-550);
    color: #fbf8ff !important;
}

table .ls-even {
    background: var(--wr-layout-background-dark-450);
    color: #fbf8ff !important;
}

.top-container.space-col {
    margin-top: 0px !important;
}



/*  Sjoerd 
    Sjoerd
    Sjoerd
    Sjoerd
    Sjoerd
*/  

#video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Plaats de video achter alle andere inhoud */
  overflow: hidden;
}

#video-background video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.wr-logo {
    height: 92px;
    width: 250px;
    background-image: url('https://cdn.warsaw.gg/imaging/brand/logo/wr-full-light.webp');
    margin: 15px;
}

.modal-content {
background-color: #181b1e !important;
border: 1px solid rgb(30 30 30 / 20%) !important;
}
.modal-header {
border-bottom: 1px solid #181b1e !important;
}
.modal-footer {
border-top: 1px solid #181b1e !important;
}