/* Import global font family */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap');

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

/******************** CSS reset *******************/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
****************************************************/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    /* font: inherit; */
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

i {
    font-style: italic;
}

/*************** My main style ***************/
html {
    background-color: #f0f0f0;
}
form{
    width: 100%;
}

/*************** start page ***************/
.start-pg-header-bar{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}
.logos{
    display: flex;
}

.start-pg-header-bar h1 {
    display: block;
    margin: auto;
    text-align: left;
    padding-right: 40px;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
}

.section {
    padding: 10px 10px;
    margin: auto;
    max-width: 950px;
}
.centered_section{
    text-align: center;
    padding: 60px;
}
.centered_note{
    text-align: center;
    /* padding: 20px 0px; */
    margin: auto;
    max-width: 950px;
    font-size: 19px;
    color: red;
}


.start-pg-container h2 {
    margin: auto;
    padding: 20px;
    text-align: center;
}

.uib-logo,
.NEWSREC-logo {
    width: 85px;
    float: right;
    margin: 40px;
    text-align: center;
}
.uib-logo{
    width: 70px;
    margin-right: 0;
}

.uib-logo img,
.NEWSREC-logo img {
    width: 100%;
    /* max-width: 150px; */
}

/* .NEWSREC-logo {
    float: right;
} */

.NEWSREC-logo img {
    background-color: black;
}

.project_title {
    margin-right: 20px;
}

.section_bg{
    background-color: #f0f0f0;
    padding: 15px 0;
}
.section_bg ul{
    list-style-type: disc;
    padding: 10px 20px;
}

/*************** Front page ***************/
header{
    position: fixed;
    width: 100%;
    z-index: 3;
}
.header_content {
    padding: 30px 20px;
    transition: all .2s ease-in-out;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

.logo {
    width: 90px;
    margin: auto;
    text-align: center;
    transition: all .2s ease-in-out;
    font-size: 0;
    padding: 0 10px;
}

header.shrink .header_content {
    background-color: rgba(255, 255, 255, .98);
    box-shadow: 0 5px 5px rgba(0, 0, 0, .05);
    padding: 10px 20px;
}

header.shrink .logo {
    width: 50px;
}

/* .left_content,
.right_content,
.center_content {
    
} */

.left_content{
    position: absolute;
    right: 10px;

}


.right_content {
    margin-right: 0;
    display: none;
}


.timer_container {
    padding-left: 4px;
    text-align: center;
}

.timer_container>span {
    font-size: 11px;
    color: #777;
    display: block;
    margin-bottom: 4px;
    white-space: nowrap;
}

.timer_container>strong {
    color: #333;
    font-size: 17px;
}

.front_page_body {
    margin: 0;
}

.main_wrapper {
    max-width: 1200px;
    margin: auto;
    padding:130px 20px 20px 20px;
}

.news_unit {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgb(0 0 0 / 5%);
    position: relative;


    display: flex;
    flex-direction: column; /* Stack children vertically */
    height: 100%;
}

.news_unit:hover {
    box-shadow: 0 5px 15px rgb(0 0 0 / 15%);
}

.news_unit>a {
    display: block;
    text-decoration: none;
    height: 100%;
    flex: 2; 
}
.img_headline_style img {
    width: 100%;
    border-radius: 10px;
}

.img_container img {
    width: 100%;
    border-radius: 10px 10px 0 0;
}

.title_container{
    max-width: 100%; /* Ensure it doesn't exceed the width of the parent */
    overflow: hidden; /* Hide overflow text */
    box-sizing: border-box; 
    /* align-items: center; */
    /* padding-bottom: 60px; */
}


.title_container p{
    color: #444;
    font-size: 22px;
    font-weight: 900;
    line-height: 28px;
    padding: 20px 20px 23px 20px;
    /* word-wrap: break-word;  */
} 

.news_unit>a:hover .title_container p {
    color: black;
    /* text-decoration: underline; */
}

.news_title_img{
    display: flex;
    /* align-items: stretch; */
    flex-direction: column; /* Stack children vertically */
    height: 100%;
}

.img_container,
.title_container, .title_container_hdl {
    flex: 1; /* Ensure both containers share the available space equally */
    display: flex; /* For proper alignment of content */
    /* justify-content: center;  */
    overflow: hidden; 
}

.img_container img {
    width: 100%; /* Make the image fill the container */
    height: 100%; /* Ensure the image stretches to fill the container */
    object-fit: cover; 
}


/* .grid_container {
    font-size: 26px;
    line-height: 39px;
} */

.actions_container {
    position: absolute;
    z-index: 1; 
    left: 10px;
    bottom: 10px;
    right: 10px;
}

.reading_time_div,
.addTo_readLater {
    padding: 5px 20px 3px 10px;
    display: inline-block;
    border-radius: 5px;
    /* border: solid;
    border-color: #555; */
    cursor: pointer;
    height: 43px;
    line-height: 28px;
}

.reading_time_div>span {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    fill: #555;
    margin-right: 3px;
}

.addTo_readLater>span {
    width: 41px;
    height: 41px;
    display: inline-block;
    vertical-align: middle;
    fill: #555;
    margin: 0 2px;
    padding-bottom: 25px;
}

.reading_time_div>p,
.addTo_readLater>p {
    display: inline-block;
    font-size: 18px;
    color: #555;
    vertical-align: middle;
    padding-bottom: 25px;
}

.addTo_readLater:hover {
    background-color: rgba(0, 0, 0, 0.07);
    /* padding-bottom: 25px; */
}


.addTo_readLater.selected {
    background-color: rgba(0, 128, 0, 0.7); /* Green background with some transparency */
    color: white; /* Change text color to white for better visibility */
    /* vertical-align: middle; */
}

.addTo_readLater.selected > p {
    color: #fff;
    fill: #fff;
    display: none;
}
.addTo_readLater.selected > span{
    display: none;
}
.addTo_readLater .selected_checkmark{
    display: none;
    font-size: 18px;
    margin-top: 6px;
}
.addTo_readLater .selected_checkmark svg{
    vertical-align: middle;
    margin: 6px;
}
.addTo_readLater.selected .selected_checkmark{
    display: block;
}


/******************* Dropdown menu ********************/
.dropdown {
    position: relative;
}

.dropdown .dropbtn {
    font-size: 14px;
    border: none;
    outline: none;
    color: #333;
    padding: 8px 10px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    border-radius: 5px;
    white-space: nowrap;
}

.dropdown .dropbtn i {
    width: 0;
    height: 0px;
    display: inline-block;
    border: solid transparent 5px;
    border-top-color: #333;
    vertical-align: middle;
    margin-left: 4px;
    margin-bottom: -5px;
}

.dropdown:hover .dropbtn {
    background-color: rgba(0, 0, 0, 0.07);
}

.dropdown:hover .dropbtn i {
    width: 0;
    height: 0px;
    display: inline-block;
    border: solid transparent 5px;
    border-bottom-color: #333;
    vertical-align: middle;
    margin-left: 4px;
    margin-top: -5px;
    margin-bottom: 3px; 
}


.dropdown-content {
    width: 350px;
    overflow: auto;
    /* display: none; */
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    right: 0;
    max-height: 500px;
    overflow: auto;
    border-radius: 5px;
    /* transition */
    top: 80%;
    opacity: 0;
    transition: all .25s ease-in-out;
    z-index: -1;
    visibility: hidden;
}

.dropdown-content a {
    float: none;
    color: #333;
    padding: 15px 20px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 15px;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}

.dropdown-content a:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: #000;
}

.dropdown:hover .dropdown-content {
    /* transition */
    transition: all .25s ease-in-out;
    opacity: 1;
    top: 108%;
    z-index: 1;
    visibility: visible;
}

/*************** Add to readLater alert ***************/


/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 2;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 40px;
    border: 1px solid #888;
    border-radius: 10px;
    width: 40%;
    font-size: 23px;
}

.modal-buttons {
    margin-top: 20px; /* Adds space above the buttons */
    display: flex;
    justify-content: center;
    gap: 0px; /* Adds space between the buttons */
}
.modal-buttons button:first-child {
    margin-right: 10px; /* Adjust the space between the buttons */
}

.modal-buttons button:last-child {
    margin-left: 10px; /* Adjust the space between the buttons */
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/******************* description_container ********************/
.top_instruction{
    padding: 0;
    grid-column: 1 / -1;
    position: sticky;
    top: 55px;
    z-index: 2;
}
.inst_box{
    background-color: #e3e3e3;
    padding: 10px;
}
.inst_box .red{
    color: #991919;
}
.inst_box p{
    line-height: normal;
}
.inst_title{
    margin-bottom: 5px;
}
.strong_oppgave{
    font-size: 18px;
    color: #991919;
}
/* .description_container{ */
    /* position: -webkit-sticky; */
    /* Safari & IE */
    /* position: sticky; */
    /* position: fixed; */
    /* z-index: 3; */
    /* top: 50%; */
    /* width: 160px; */
    /* left: 15px; */
    /* bottom: 100px; */
/* } */


.description_btn {
    border: none;
    border-radius: 50%;
    background: white;
    width: 60px;
    height: 60px;
    box-shadow: 0 5px 5px rgb(0 0 0 / 20%);
    line-height: 0px;
    opacity: .75;
    /* margin-left: 20px; */
    margin-top: 9px;
}

.desc_hint{
    font-size: 15px;
    color: brown;
    font-weight: bold;
}
.info_img{
    width: 75%;
    /* border-radius: 100%; */
}

.description_btn:hover{
    cursor: pointer;
    opacity: 1;
}

.description_btn:hover .tooltip-content{
    cursor: pointer;
    opacity: 1;
    bottom: 108%;
    z-index: 1;
    visibility: visible;
}

.tooltip-content {
    opacity: 0;
    position: absolute;
    /* bottom: 80%; */
    top: -260%;
    left: 5%;
    right: 5%;
    background-color: #fff;
    padding: 0.5em;
    /* min-width: 100%; */
    min-width: 10rem;
    height: 450px;
    line-height: normal;
    padding: 13px;
    border-radius: 10px;
    box-shadow: 0 5px 5px rgb(0 0 0 / 10%);
    transition: all .25s ease-in-out;
    z-index: -3;
    visibility: hidden;
  }


.tooltip-desc{
    line-height: 20px;
    font-size: 14px;
}

.tooltip-desc strong{
    /* font-size: 16px; */
    color: brown;
}


.tooltip-title{
    font-size: 20px;
    color: brown;
    font-weight: bold;
}


.tooltip-content p{
    text-align: left;
    line-height: 20px;
    /* font-size: 15px; */
}

.tooltip-content p strong{
    text-align: left;
    color: brown;
}
.inactiveLink {
    pointer-events: none;
    cursor: default;
    text-align: left;
 }
/******************* Personal info ********************/

#back2Top {
    width: 40px;
    line-height: 40px;
    overflow: hidden;
    z-index: 999;
    position: fixed;
    cursor: pointer;
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    /* position: fixed; */
    bottom: 10px;
    right: 0;
    /* background-image: linear-gradient(-225deg, #B7F8DB 0%, #a1d8e9 100%); */
    color: rgb(61, 57, 57);
    text-align: center;
    font-size: 30px;
    text-decoration: none;
    border-radius: 12px 12px 12px 12px;
}

#back2Top:hover {
    background-color: rgb(155, 155, 175);
    color: #000;
}

.personal_info_body {
    padding: 10px 50px 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    min-height: 100vh;
}

.btn-lg {
    background: #fbfbfb;
    color: #333;
    padding:10px 25px !important;
    margin: auto;
    border: solid 2px #333;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    font-size: 18px;
    /* height: 50px; */
    /* line-height: 50px; */
    display: inline-block;
}

.btn-lg:hover {
    background-image: none !important;
    background-color: #1f2021 !important;
    border-color: #1f2021;
    /* background-image: linear-gradient(-225deg, #c8e9da 0%, #bbd8e0 100%); */
    color: #fff;

}

#error {
    color: #e73b3b;
    font-size: 12px !important;
    text-align: left;
    display: flex;
    justify-content: left;
    align-items: left;
    padding: auto;

}

.personal_info_body .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: left;
    max-width: 1000px;
    margin: 20px auto;
    padding: 20px 0;
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgb(0 0 0 / 10%);
    background-color: #fff;
    width: calc(100% - 40px);
}

.h4_header {
    font-size: 30px;
    font-weight: bold;
    line-height: 30px;
    margin: 30px;
}

.h4_subheader {
    font-size: 20px;
    line-height: 30px;
    margin: 10px 30px
}

.hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, #f0f0f0, #00b9ff, #59d941, #f0f0f0);
}

.survey_Qs{
    /* width: 900px; */
}
.flabel, .hdl_followup {
    display: flex;
    flex-direction: column;
    margin: 10px 30px;
    align-items: stretch;
    text-align: left;  
}

.flabel p, .flabel_feedback p {
    font-size: 23px;
    padding: 15px 0;
    font-weight: bold;
    margin-top: 15px;
    line-height: 35px;
}
.flabel_feedback{
    display: flex;
    flex-direction: column;
    margin: 10px 10px;
    align-items: stretch;
    text-align: left; 

}
.question_header{
    font-size: 23px;
    padding: 15px;
    font-weight: bold;
    line-height: 35px;
    text-align: left;
    /* margin-left: 20px; */
}

.question_header_Q2{
    margin-left: 20px;
}

.hdl_followup p {
    font-size: 23px;
    /* padding: 15px 0; */
    font-weight: bold;
    /* margin-top: 15px; */
    line-height: 35px;

}


.clabel{
    font-size: 18px;
    line-height: 25px;

}
.small_text {
    font-size: 14px;
    color: #888;
}

.button_container {
    text-align: center;
    padding: 20px 10px;
}

select {
    border: solid 1px #ccc;
    padding: 5px;
    border-radius: 5px;
    height: 30px;
    width: 100%;
    max-width: 350px;
}

.copyright {
    padding: 20px;
    color: #999;
}

.textinput_mturk input{
    /* border: none; */
    border: solid 1px #ccc; 
    padding: 0px;
    border-radius: 5px;
    height: 30px;
    width: 100%;
    max-width: 350px;
}
.controlShow{
    display: none;
}

.controlShowStrength{
    display: none;
}

.radio_btn_vertical{
    padding: 6px;
    /* font-size: 20px; */
}
.radio_btn_horizontal{
    display: flex;
    justify-content: space-between; /* Spread items evenly */
    /* align-items: center;  */
    /* Align vertically in the center */
    gap: 10px; /*Space between items*/
}
.radio_btn_horizontal input[type="radio"] {
    margin-right: 5px; /* Space between the radio button and label */
}
.radio_btn_horizontal label {
    text-align: center;
    display: flex;
    flex-direction: row; /* Label and input in the same line */
    align-items: center;
    /* padding-bottom: 32px; */
}
.follow-up-radio{
    margin-left: 60px;
    /* padding-bottom: 11px; */
}

/******************* headlines_survey page *******************/

.pi_choices{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    /* align-items: center; */
    padding-bottom: 15px;
}

.headlines_survey_body .form-check, .headlines_survey_body .form-check:hover {
    background-color: transparent;
    border:none;
    padding: 0;
    display: flex;
}

.headlines_survey_body .form-check input[type=radio]{
    visibility: hidden;
    z-index: -1;
    position: absolute;
}
.headlines_survey_body .form-check label{
    background-color: #dfe6ed;
    display: block;
    padding: 5px;
    border-radius: 15px;
    border: solid 4px transparent;
}
.headlines_survey_body .form-check label:hover{
    background-color: #ced4da;
    cursor: pointer;
}
.headlines_survey_body .form-check input[type=radio]:checked ~ label{
   border-color: green;
}
.headlines_survey_row{
    margin-bottom: 20px;
}
.headlines_survey_row .title_container p, .title_container_hdl{
    margin: 0;
    padding: 7px;
}
.headlines_survey_row h1{
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 15px;
    margin-left: 15px;
}

.battry-box{
    font-size: 14px; 
}
span.num{
    display: block;
    position: absolute;
    bottom: 4px;
    text-align: center;
    margin: auto;
    left: 0;
    right: 0;
    font-weight: bold;
}
/******************* headlines_survey end *******************/

/******************* Article page *******************/

.article_page_img {
    width: 100%;
    /* float:left;  */
    /* margin: 2%; */
    text-align: center;
}

.article_page_img img {
    width: 100%;
    border-radius: 15px;
    /* max-width: 700px; */
}

.article_page_caption {
    padding: 15px 0 0;
    text-align: center;
    font-size: 17px;
    font-style: italic;
    color: #777;
}

.article_body_container {
    padding: 60px 40px 40px 40px;
    margin: auto;
    max-width: 850px;
}

.article_page_title {
    padding: 20px 0 0 0;
    font-size: 45px;
    line-height: 53px;
    font-weight: 900;
    /* max-width: 850px; */
}

.article_page_text {
    padding-top: 40px;
    font-size: 20px;
    line-height: 28px;
}

.article_page_secondary {
    display: flex;
    justify-content: space-between;
    padding: 20px 0 30px 0;
    /* text-align: center; */
    font-size: 18px;
    color: #888;
}


.back_button {
    width: 25px;
}

.back_button img {
    cursor: pointer;
    width: 100%;
    /* max-width: 150px; */
}

/******************* Thanks *******************/
.thanks_h1 {
    font-size: 60px;
    font-weight: bolder;
    padding: 20px 0 40px 0;
}

.thanks_p {
    padding: 40px 20px 60px 20px;
    font-size: 30px;
    line-height: 1.5;
}

.thanks_img {
    width: 20%;
    margin: auto;
}

.thanks_img img {
    width: 100%;
    margin: auto;
    max-width: 150px;
}

.mturk_code{
    border: solid #aaa 2px;
    border-radius: 8px;
    width: 282px;
    margin: 40px 10px;
    font-size: 21px;
    padding-left: 15px;
    line-height: 50px;
}

.code_text p{
    font-size: 20px;
    line-height: 29px;
}

.form_txtarea{
    width: 100%;
    max-width: 600px;
    resize: vertical;
    box-sizing: border-box;
}

.col-sm-7 b, .hdl_followup b{
    line-height: 32px;
    font-size: 22px;
}

/******************* The grid system for articles *******************/

/* Salience Grid system */
/* .grid_container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 25px;
    grid-template-rows: auto;
    grid-template-areas:
        "one two three"
        "four five six"
        "seven eight nine"
    ;
}

.grid_container .grid_item:nth-child(1) {
    grid-area: one;
}

.grid_container .grid_item:nth-child(2) {
    grid-area: two;
}

.grid_container .grid_item:nth-child(3) {
    grid-area: three;
}

.grid_container .grid_item:nth-child(4) {
    grid-area: four;
}

.grid_container .grid_item:nth-child(5) {
    grid-area: five;
}

.grid_container .grid_item:nth-child(6) {
    grid-area: six;
}

.grid_container .grid_item:nth-child(7) {
    grid-area: seven;
}

.grid_container .grid_item:nth-child(8) {
    grid-area: eight;
}
.grid_container .grid_item:nth-child(9) {
    grid-area: nine;
} */


/* khadiga */
/* 3 items per row grid system */
.grid_container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    /* grid-auto-rows: 20vh; */
    /* grid-template-rows: repeat(8, 1fr);  */
    gap: 25px;
}

.grid_container .grid_item {
    width: 100%; 
    height: 450px;
}
/* khadiga */


/* .grid_container .grid_item:nth-child(1) {
    grid-row: 1;
    grid-column: span 1; 
}

.grid_container .grid_item:nth-child(n+2) {
    grid-row: auto;
    grid-column: span 1; 
} */

 /* Each item from second onwards spans one column */

/******************* Start page styling *******************/

.frontpage_h1 {
    font-size: 36px; /* Adjust the size as per your requirement */
    color: #333; /* Font color */
    margin-bottom: 20px; /* Space below the heading */
    letter-spacing: 1.5px; /* Adding space between characters */
    text-align: center;
}

.frontpage_text {
    background-color: #fff;
    color: #333;
    padding: 15px;
    border-radius: 5px;
    margin: 20px 0; /* Adding top and bottom margin */
    max-width: 75%; /* Controlling width */
    margin-left: auto; /* Centering */
    margin-right: auto; /* Centering */
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1); /* Optional: Adding a slight shadow */
    line-height: 115%;
}

.frontpage_text ul {
    padding-left: 40px; /* Increases indentation of the bullet points */
    margin-top: 15px; /* Removes the default top margin of ul */
}

.instructions {
    padding:0 20px; /* Adds indent to the list */
    list-style-type: none; /* Removes default list style */
    margin-top: 10px; /* Adds space above the list */
    margin-bottom: 10px; /* Adds space below the list */
}

.instructions ul{
    list-style-type: disc;
    padding-left: 20px;
}

.instructions li {
    margin-bottom: 10px; /* Adds space between list items */
    position: relative; /* Needed for custom bullet points */
    padding-left: 5px;
}

.instructions li::before {
    /* content: ''; 
    color: #333; 
    font-size: 20px; 
    position: absolute; 
    left: 0; 
    top: 50%;
    transform: translateY(-50%);  */
}

.frontpage_text li {
    margin-bottom: 15px; /* Adds space between bullet points */
}

/* Styling for the buttons */
.choice_container {
    margin-top: 50px; /* Space above the button container */
}

.choice_btn {
    display: block; /* Makes the button occupy its own line */
    margin: 20px auto; /* Adds 10px space above and below, auto centers it */
    padding: 10px 20px; /* Add inner padding to buttons */
    text-align: center; /* Center the text inside the button */
    text-decoration: none; /* Removes the underline from the anchor element */
    background-color: #4CAF50; /* Green background */
    color: white; /* White text color */
    border-radius: 5px; /* Rounded corners */
    font-size: 20px; /* Font size */
    transition: background-color 0.3s; /* Transition effect for hover state */
    width: 350px;
}

/* Hover state for the button */
.choice_btn:hover {
    background-color: #45a049; /* Slightly darker green on hover */
}



/******************* end page styling *******************/

.endpage_wrapper {
    max-width: 90%;
    margin: auto;
    padding: 125px 20px 20px 20px;
}


/* Party Preference Styling */
.party-preference-container {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 20px;
}

/* Applies to all h1 tags within the container */
.party-preference-container h1 {
    font-size: 2rem; /* Default size for both h1 tags */
    color: #333;
    display: block; /* Ensures each h1 is on its own line */
}

/* Specific to the first h1 tag */
.party-preference-container h1:first-child {
    margin-bottom: .5rem;
    padding-bottom: .25rem;
    border-bottom: 2px solid #666; /* Underline for only the first h1 */
}

/* Specific to the second h1 tag */
.party-preference-container h1.dynamic-party {
    font-size: 2.5rem; /* Larger size for the dynamic content */
    color: #3f3f3f; /* Different color for the dynamic content */
    font-weight: bold; /* Bold for the dynamic content */
    margin-top: 0; /* Removes any top margin */
}


/* Main container flex adjustment */
.endpage_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    align-items: start;
}


/* Startpage Button */
.startpage-button {
    display: block; /* Makes the button occupy its own line */
    margin: 20px auto; /* Adds 10px space above and below, auto centers it */
    padding: 10px 20px; /* Add inner padding to buttons */
    text-align: center; /* Center the text inside the button */
    text-decoration: none; /* Removes the underline from the anchor element */
    background-color: #4CAF50; /* Green background */
    color: white; /* White text color */
    border-radius: 5px; /* Rounded corners */
    font-size: 20px; /* Font size */
    transition: background-color 0.3s; /* Transition effect for hover state */
    width: 350px; /* Adjust width as needed */
}

/* Titles and Text */
.endpage_container h1, .endpage_container h2 {
    color: #333;
}

.endpage_container p {
    color: #666;
}


.left-side {
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: center; /* Center the session-sections vertically */
}

.right-side {
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: center; /* Center the session-sections vertically */
}

.session-section {
    width: 90%; /* Make the session-section take full width */
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.session-title {
    text-align: center;
    margin-bottom: 20px;
}

.stats-graph-container {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Allocate 1/3 of the space to stats and 2/3 to graph */
    gap: 20px;
    align-items: start; /* Align the stats and graph at the top */
}

.stats-container {
    width: 100%; /* Stats container takes the full width allocated to it */
    padding-top: 30px;
}

.chart-container {
    width: 80%; /* Chart container takes the full width allocated to it */
    align-items: center;
    padding-left: 50px;
    padding-top: 10px;  

}

/* Styles for table */
.stats-container table {
    width: 100%; /* Make table use full width of its container */
    border-collapse: collapse; /* Collapse borders for a clean look */
}

.stats-container th,
.stats-container td {
    border: 1px solid #ddd; /* Light gray border for each cell */
    padding: 8px; /* Padding inside cells */
    text-align: left; /* Align text to left within cells */
}

.stats-container th {
    background-color: #f2f2f2; /* Light gray background for headers */
}

/* Styles for canvas (graph) */
.chart-container canvas {
    width: 100%; /* Canvas takes full width of its container */
    height: auto; /* Height is automatic to maintain aspect ratio */
}

@media (max-width: 768px) { /* Adjust the pixel value based on your breakpoint */
    .stats-graph-container {
        grid-template-columns: 1fr; /* Stack stats and graph on top of each other */
    }
}




/******************* sport article styling *******************/
/* Define a class for the toggled state */
.toggled-overlay {
    position: relative;
  }
  
  .toggled-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); /* semi-transparent black */
    border-radius: inherit;
    z-index: 1; /* overlay sits on top of other content */
  }

  .checkmark {
    display: none; /* Initially hidden */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the checkmark */
    /* Set the size of the checkmark image if needed */
    width: 100px; /* Example size */
    height: auto; /* Maintain aspect ratio */
    z-index: 2;
  }
  
  .news_unit.selected .checkmark {
    display: block; /* Show the checkmark when the .news_unit is selected */
  }


  .username_container {
    text-align: center; /* Center the container */
    margin: 20px 0; /* Add some margin for spacing */
}

.username_input {
    width: 50%; /* Adjust width as needed */
    padding: 10px; /* Add padding for a larger click area */
    font-size: 1rem; /* Adjust font size as needed */
    margin-bottom: 20px; /* Add some margin below the input */
    
    /* Add more styles here */
    border: 1px solid #ccc; /* Example border */
    border-radius: 5px; /* Rounded corners */
    
    /* Center the input text */
    display: block;
    margin-left: auto;
    margin-right: auto;

    text-align: center;
    
    /* Placeholder styling */
    color: black; /* Grey text for placeholder */
}

/* Style for placeholder text */
.username_input::placeholder {
    color: #888; /* Adjust the color as needed */
    font-style: italic; /* Optional: makes it clear it's a placeholder */
}

/* Remove the label */
label[for="username"] {
    display: none;
}


.messages-placeholder {
    min-height: 35px; /* Adjust the height as needed */
    text-align: center;
    margin: 10px 0;
}

.messages p {
    color: red; /* or any color that indicates an error */
    font-weight: bold;
    margin: 0; /* Removes default paragraph margin */
    padding: 10px 0; /* Gives some spacing inside the message area */
}




/******************* spot end page styling *******************/

.leaderboard-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 20px; /* Adjust as needed */
}

.leaderboard {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    overflow-y: auto; /* Enables scrolling if more items than can fit */
    height: 300px; /* Adjust height as needed */
}

.leaderboard h2 {
    font-family: 'Arial', sans-serif;
    color: #333;
    font-size: 1.5rem; /* Size of the leaderboard titles */
    margin-bottom: 10px; /* Spacing between the title and the list */
    text-align: center;
}

.leaderboard ol {
    list-style-type: none; /* Removes default list styling */
    padding: 0; /* Removes default padding */
}

.leaderboard li {
    font-family: 'Verdana', sans-serif;
    color: #666;
    padding: 5px 0; /* Spacing between list items */
}

.leaderboard-empty {
    text-align: center;
    padding: 20px;
    color: #666;
}

/* New style for the score container */
.score-container {
    text-align: center;
    margin-bottom: 2rem;
    padding-top: 25px;
}

.score-container h2 {
    font-size: 1.75rem;
    margin-bottom: .5rem;
    display: block; /* Adjust if you want inline or block */
    color: #333;
}

.score-container .score-pos {
    font-size: 2.5rem;
    color: #4CAF50; /* Adjust the color to match your design */
    font-weight: bold;
    margin-top: 0;
}

.score-container .score-neg {
    font-size: 2.5rem;
    color: #f44336; /* Adjust the color to match your design */
    font-weight: bold;
    margin-top: 0;
}

/******************* Party Preference Styling *******************/
.party-preference-container {
    grid-area: party;
    text-align: center;
    margin-bottom: 1rem;
}

.party-preference-container h1:first-child {
    font-size: 2rem;
    margin-bottom: .5rem;
    padding-bottom: .25rem;
    border-bottom: 2px solid #666;
    display: inline-block;
}

.party-preference-container h1:last-child {
    font-size: 2.5rem;
    color: #3f3f3f;
    font-weight: bold;
    margin-top: 0;
}

/* Score color based on positive or negative */
.score-positive {
    color: #4CAF50; /* Green color for positive scores */
}

.score-negative {
    color: #f44336; /* Red color for negative scores */
}





/* Leaderboard table adjustments */
.leaderboard table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.leaderboard th,
.leaderboard td {
    padding: 8px;
    text-align: left; /* Default alignment */
}

/* Specific alignment for each column */
.leaderboard th:nth-child(1), .leaderboard td:nth-child(1) { 
    text-align: left; /* Rank aligned to the left */
    width: 10%;
}

.leaderboard th:nth-child(2), .leaderboard td:nth-child(2) { 
    text-align: center; /* Username aligned to the center */
    width: 60%;
}

.leaderboard th:nth-child(3), .leaderboard td:nth-child(3) { 
    text-align: right; /* Score aligned to the right */
    width: 30%;
}

/* Background colors for top positions */
.first-place { background-color: gold; }
.second-place { background-color: silver; }
.third-place { background-color: #cd7f32; } /* Bronze color */

/* Hover effect for rows */
.leaderboard tbody tr:hover {
    background-color: #f5f5f5;
}

/* Ensure the background color fills the entire row */
.leaderboard tbody tr {
    background-clip: padding-box;
}

.fixed-bottom-right {
    position: fixed; /* Keeps the button fixed during scrolling */
    bottom: 20px;    /* Distance from the bottom of the viewport */
    right: 20px;     /* Distance from the right of the viewport */
    z-index: 1000;   /* Ensures the button stays above other content */
    background: #d3caca;
    color: #991919;
    padding: 9px !important;
    margin: auto;
    border: solid 2px #333;
    box-shadow: 0 5px 5px rgb(0 0 0 / 20%);
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    font-size: 18px;
    /* height: 50px; */
    line-height: 1.7;
    display: inline-block;
}

.fixed-bottom-right:hover {
    background-image: none !important;
    background-color: #1f2021 !important;
    border-color: #1f2021;
    box-shadow: 3 15px 15px rgba(21, 18, 18, 0.05);
    /* background-image: linear-gradient(-225deg, #c8e9da 0%, #bbd8e0 100%); */
    color: #fff;

}


.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.checkbox-label {
    display: flex;
    align-items: center;
}

.checkbox-label span {
    margin-left: 5px;
}

.button-subtitle {
    display: block;
    font-size: xx-small;
    line-height: 1; /* Adjust line height for the subtitle */
}

.radio-options {
    display: flex;
    justify-content: space-around; /* or space-between for more spacing */
    flex-wrap: wrap; /* In case the options can't fit in one line, they will wrap */
}





.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;  /* This ensures that all children are centered horizontally */
    text-align: center;
    color: white;
    /* font-weight: bold; */
    font-size: large;
}

.spinner {
    border: 5px solid #f3f3f3; /* Light grey */
    border-top: 5px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



.form-check {
    padding: 10px;
    margin: 5px;
    background-color: #e9ecef; /* Light grey background */
    border-radius: 5px; /* Rounded borders */
    border: 1px solid #ddd; /* Light grey border */
    transition: background-color 0.3s ease;
}

.form-check:hover {
    background-color: hsla(0, 0%, 0%, 0.07); /* Slightly darker grey on hover */
}

.form-check-label {
    margin-left: 10px; /* Space between radio button and label */
}

/* .style_above{
    display: flex;
    flex-direction: column;
    align-items: stretch;
} */

/* .selected-value{
    text-align: center; 
    font-size: 24px;    
    padding: 10px;
    margin-bottom: 0;
    height: 24px;
} */


/******************* Feedback Survey Styling *******************/
/* Base styles for the radio button container */
.radio-container {
    display: flex;
    flex-wrap: wrap; 
    /* justify-content: center;  */
    /* Centers the buttons in the container */
    gap: 15px; /* Space between radio buttons */
    padding: 10px;
    max-width: 100%; /* Ensure the container fits within the screen */
    box-sizing: border-box; /* Include padding in width calculations */
}

/* Radio buttons and labels */
.radio-container label {
    display: flex;
    align-items: center;
    gap: 5px; 
    /* Space between the radio button and text */
    font-size: 18px; /* Default font size */
    white-space: nowrap; /* Prevent text wrapping */
}

/* Radio button input */
.radio-container input[type="radio"] {
    margin: 0;
    transform: scale(1); /* Standard size, adjust scale if needed */
}

/* Responsive styles for smaller screens */
@media (max-width: 750px) {
    .radio-container {
        flex-direction: column; /* Stack buttons vertically */
        justify-content: flex-start; /* Align items to the left */
        gap: 10px; /* Reduce spacing */
    }

    .radio-container label {
        font-size: 14px; /* Reduce font size for smaller screens */
    }





}

/* Optional: Styling for very small screens */
@media (max-width: 480px) {
    .radio-container label {
        font-size: 14px; /* Further reduce font size for very small screens */
    }
}


/* ################personal info parties table  */
.likert-table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
}

.likert-table th,
.likert-table td {
    border: 1px solid #ccc;
    padding: 10px 2px;
    min-width: 30px;
}

.likert-table th {
    background-color: #f9f9f9;
    font-weight: bold;
    position: relative;
    padding-bottom: 24px;
}

.likert-table .radio-cell input[type="radio"] {
    margin: 0 auto;
}

/* Style for the small image in pre-questionnaire */
.small-image {
    width: 100%;
    height: auto;
    margin-top: 10px;
    max-width: 400px;
}

.progress{
    width: 200px;
    margin: auto;
    padding-top: 30px;
}
    
.start_btn_p{
    font-size: 25px;
    color: #991919;
    /* line-height: 70px; */
}

.instructions{
    /* align-items: left; */
    text-align: left;
    font-size: 22px;
    line-height: 35px;
}

.vignette{
    padding-bottom: 30px;
    font-size: 30px;
    text-align: center;
    line-height: 50px;
}

.divider {
    width: 10px;  /* Thickness of the vertical line */
    background-color: #ccc;  /* Color of the divider */
    margin: 0 10px;  /* Space between the divs */
  }

.neste_feedback{
    padding-top: 50px;
}

.neste_feedback p{
    color: brown;
    /* font-weight: bold; */
}



  /* === responsive === */
  @media only screen and (max-width: 700px) {
    .battry-box{
        font-size: inherit;
    }

    .personal_info_body{
        padding: 0;
    }
    .start-pg-header-bar h1{
        padding: 0;
    }
    .logos {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
    }
    .uib-logo, .NEWSREC-logo{
        margin:10px;
        width: 70px;
    }

    .likert-table th,
    .likert-table td {
        padding: 5px 2px 24px 2px;
        font-weight: normal;
        font-size: 80%;
    }

    .h4_header{
        font-size: 22px;
        margin: 10px;
    }

    .headlines_survey_body .flabel{
        margin: 10px;
        /* padding-bottom: 20px; */
        overflow-x: auto;
    }
    /* .mobile_hdl{
        padding-bottom: 5px;
    } */
    .form-check label{
        padding: 0;
        margin: 0 3px 0;
    }
    
    .hdl_followup{
        margin: 10px

    }
    .headlines_survey_body .flabel p, .hdl_followup p{
        font-size: 17px;
        line-height: normal;
        font-weight: normal;
    }

    .headlines_survey_body .form-check,.headlines_survey_body .form-check:hover{
        padding-bottom: 10px;
        margin: 0 3px 0;
        min-width: 62%;
    }

    .front_page_body .logo{
        width: 60px;
        margin: 0;
    }
    .front_page_body .grid_container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    .front_page_body .grid_container .grid_item{
        height: auto;
        padding-bottom: 50px;
    }
    .front_page_body .dropdown .dropbtn{
        white-space: normal;
        width: 100px;
    }
    .front_page_body .dropdown-content {
        width: 95vw;
    }
    .front_page_body .strong_oppgave, .front_page_body .inst_box{
        font-size: 90% ;
    }
    .front_page_body .main_wrapper{
        padding: 120px 10px 20px 10px;
    }
    
    /* .dropdown.open .dropbtn {
        background-color: rgba(0, 0, 0, 0.07);
      } */
    
    .dropdown.open .dropbtn i {
        width: 0;
        height: 0;
        display: inline-block;
        border: solid transparent 5px;
        border-bottom-color: #333;
        vertical-align: middle;
        margin-left: 4px;
        margin-top: -5px;
        margin-bottom: 3px;

        max-height: 500px; 
        overflow: visible;
      }

    .vignette{
        font-size: 25px;
        line-height: 40px;
      }
    .thanks_h1{
        font-size: 30px;
        padding: 20px 10px;
    }
    .instructions{
        font-size: 18px;
        line-height: 30px;
        vertical-align: top;
    }

    .inst_box {
        background-color: #e3e3e3;
        padding: 10px;
        position: relative;
        max-height: 65px; 
        overflow: hidden;
        transition: all 0.3s ease-in-out;
    }
    
    /* Fading effect at the bottom */
    .inst_box::after {
        content: "Klikk for å utvide";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 10px;
        background: linear-gradient(to top, #e3e3e3 50%, transparent 100%);
        color: #991919;
        font-size: 12px;
        font-weight: bold;
        padding: 33px 0 7px 0;
        pointer-events: none;
        width: 100%;
        text-align: center;
    }
    
    /* Expanded state */
    .inst_box.expanded {
        max-height: none; /* Remove height limit */
        overflow: visible;
    }
    
    .inst_box.expanded::after {
        content: ""; /* Remove the "Click for more" text */
        background: none; /* Remove the gradient */
    }

    /* .close{
        font-size: 18px;
    } */
    .modal-content{
        padding: 8px;
        width: 80%;
    }
    .modal-content p{
        font-size: 17px;
        line-height: 25px;
        padding: 10px;
        text-align: center;
    }
    .pi_choices{
        flex-direction: column;
        align-items: stretch;
        padding: 10px 0 0 0;
        /* align-items: center; */
        /* padding-bottom: 15px; */
    }

    .title_container, .title_container_hdl{
        padding-bottom: 10px 0 10px 0;
    }


    /* ############### */

    .headline_item {
        display: flex; /* Use flexbox to align items horizontally */
        align-items: flex-start; /* Vertically center the content */
        gap: 10px; /* Optional: Add space between the image and title */
        width: 100%; /* Ensure the container takes the full width */
    }
    
    .img_headline_style {
        flex: 0 0 25%; /* Image gets 25% of the container width */
        display: flex; /* Ensure proper alignment of the image */
        justify-content: center; /* Center the image horizontally */
        align-items: center; /* Center the image vertically */
        overflow: hidden; /* Hide any overflowing parts of the image */
        min-width: 120px;
    }
    
    .img_headline_style img {
        width: 100%; 
        height: auto; 
        object-fit: cover; 
    }
    
    .title_container_hdl {
        /* flex: 0 0 75%; */
        display: block; /* Optional: For alignment within the title container */
        /* align-items: center;  */
        padding: 0;
    }
    .title_container_hdl p{
        box-sizing: border-box;

    }
    .start_btn_p{
        line-height: normal;
    }
    .horizontal_scroll_mobile{
        overflow-x: scroll;
        margin: 15px;
    }
    #progresstext{
        font-size: 2.7px;
    }
    

  }