/* www.bokartid.se */

/* Dropdown Button */
.dropbtn {
  background-color: #eee;
  color: #555;
  padding: 7px 15px 7px 5px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropbtn_dark {
  background-color: #141414;
  color: #ddd;
}

/* Dropdown button on hover */
.dropbtn:hover {
  color: black;
  background-color: #e2e2e2;
}
.dropbtn_dark:hover {
  color: white;
  background-color: #1a1a1a;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 260px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content_dark {
  display: none;
  position: absolute;
  background-color: #161616;
  min-width: 260px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 14px 12px;
  text-decoration: none;
  display: block;
}
.dropdown-content_dark a {
  color: white;
  padding: 14px 12px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
.dropdown-content_dark a:hover {background-color: #262626;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}


/* Dropdown Right Button */
.dropbtn_right {
  background-color: #eee;
  color: #555;
  padding: 7px 10px 7px 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropbtn_right_dark {
  background-color: #141414;
  color: #ddd;
}

/* Dropdown button on hover */
.dropbtn_right:hover {
  color: black;
  background-color: #e2e2e2;
}
.dropbtn_right_dark:hover {
  color: white;
  background-color: #1a1a1a;
}

.dropdown_right {
  float: right;
  position: relative;
  display: inline-block;
}
.dropdown_right-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 260px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  right: 0;
  z-index: 1;
}
.dropdown_right-content_dark {
  display: none;
  position: absolute;
  background-color: #161616;
  min-width: 260px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown_right-content a {
  color: black;
  padding: 14px 12px;
  text-decoration: none;
  display: block;
}
.dropdown_right-content_dark a {
  color: white;
  padding: 14px 12px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown_right-content a:hover {background-color: #ddd;}
.dropdown_right-content_dark a:hover {background-color: #262626;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show_right {display:block;}


/* Dropdown Page Button */
.dropbtn_page {
  background-color: #eee;
  color: #555;
  padding: 3px 12px 3px 12px;
  margin: 1px 0px 0px 0px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropbtn_page_dark {
  background-color: #222;
  color: #ddd;
}
.dropbtn_page_selected {
  background-color: #04AA6D;
  color: white;
  padding: 3px 12px 3px 12px;
  margin: 1px 0px 0px 0px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropbtn_page_selected_dark {
  background-color: #04AA6D;
  color: black;
}

/* Dropdown button on hover */
.dropbtn_page:hover {
  color: black;
  background-color: #ddd;
}
.dropbtn_page_selected:hover {
  color: black;
  background-color: #04AA6D;
}
.dropbtn_page_dark:hover {
  color: white;
  background-color: #000;
}

.dropdown_page {
  float: left;
  position: relative;
  display: inline-block;
}
.dropdown_page-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 260px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown_page-content_dark {
  display: none;
  position: absolute;
  background-color: #161616;
  min-width: 260px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown_page-content a {
  color: black;
  /* padding: 14px 12px; */
  text-decoration: none;
  display: block;
}
.dropdown_page-content_dark a {
  color: white;
  /* padding: 14px 12px; */
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown_page-content a:hover {background-color: #ddd;}
.dropdown_page-content_dark a:hover {background-color: #262626;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show_page {display:block;}


/* Dropdown Chat Button */
.dropbtn_chat {
  background-color: #fff;
  color: #555;
  padding: 0px 12px 0px 0px;
  margin: 0px 0px 0px 0px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropbtn_chat_dark {
  background-color: #111;
  color: #ddd;
}
.dropbtn_chat_selected {
  background-color: #04AA6D;
  color: white;
  padding: 0px 12px 0px 0px;
  margin: 0px 0px 0px 0px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropbtn_chat_selected_dark {
  background-color: #04AA6D;
  color: black;
}

/* Dropdown button on hover */
.dropbtn_chat:hover {
  color: #04AA6D;
}
.dropbtn_chat_selected:hover {
  color: black;
  background-color: #04AA6D;
}
.dropbtn_chat_dark:hover {
  color: #04AA6D;
}


/* meny sidor */
.menysida {
  display: inline-block;
}
.menysida-content a {
  color: black;
  padding: 0 0 20px 0;
  text-decoration: none;
  display: block;
}
.menysida-content_dark a {
  color: white;
  padding: 0 0 20px 0;
  text-decoration: none;
  display: block;
}

/* Autoplay Button */
.bt_autoplay_btn {
  background-color: #eee;
  color: #555;
  padding: 8px 5px 6px 5px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.bt_autoplay_btn_dark {
  background-color: #141414;
  color: #ddd;
}

/* Dropdown button on hover */
.bt_autoplay_btn:hover {
  color: black;
  background-color: #e2e2e2;
}
.bt_autoplay_btn_dark:hover {
  color: white;
  background-color: #1a1a1a;
}

input.explore_1[type=text] {
    max-width: 50%;
    height: 40px;
    background: #fff;
    color: #222;
    padding: 0 5px 0 5px;
    border-color: #ccc;
    border-style: solid;
    border-width: 1px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
input.explore_1-dark[type=text] {
    max-width: 50%;
    height: 40px;
    background: #111;
    color: #eee;
    padding: 0 5px 0 5px;
    border-color: #444;
    border-style: solid;
    border-width: 1px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input.explore_2[type=text] {
    width: 170px;
    height: 30px;
    background: #fff;
    color: rgb(57,83,69);
    padding: 0 3px 0 3px;
    border-color: #ccc;
    border-style: solid;
    border-width: 1px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
input.explore_2-dark[type=text] {
    background: #111;
    color: rgb(157,187,171);
    border-color: #444;
}

input.search_knapp {
    height: 30px;
    width: 2em;
    max-width: 2em;
    min-width: 2em;
    background: #ddd;
    color: #666;
    border: 0px;
    cursor: pointer;
}
input.search_knapp:hover {
    background: #ccc;
}
input.search_knapp-dark {
    width: 2em;
    max-width: 2em;
    min-width: 2em;
    background: #222;
    color: #999;
    border: 0px;
    cursor: pointer;
}
input.search_knapp-dark:hover {
    background: #333;
}

div.hashtags_scroll_1 {
  line-height: 40px;
  display: block;
  overflow: auto;
  white-space: nowrap;
  scrollbar-color: #ddd #eee;
}
div.hashtags_scroll_1-dark {
  scrollbar-color: #222 #1a1a1a;
}
div.hashtags_scroll_1 a {
  display: inline-block;
  line-height: 22px;
  padding: 5px 7px 5px 7px;
  margin: 2px;
}
div.hashtags_scroll_2 {
  line-height: 40px;
  overflow: auto;
}
div.hashtags_scroll_2 a {
  display: inline-block;
  line-height: 22px;
  padding: 5px 7px 5px 7px;
  margin: 2px;
}

div.scroll_blog_1 {
  line-height: 40px;
  display: block;
  overflow: auto;
  white-space: nowrap;
  scrollbar-color: #ddd #eee;
}
div.scroll_blog_1-dark {
  scrollbar-color: #222 #1a1a1a;
}
div.scroll_blog_1 a {
  display: inline-block;
  line-height: 22px;
  padding: 5px 7px 5px 0px;
  margin: 2px;
}
div.scroll_blog_2 {
  height: 94px;
  max-height: 94px;
  width: 160px;
  max-width: 160px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: pre-wrap;
  padding: 2px 5px 2px 5px;
  background: #eee;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
div.scroll_blog_2-dark {
  background: #1a1a1a;
}
div.scroll_blog_2:hover {
  background: #ddd;
}
div.scroll_blog_2-dark:hover {
  background: #282828;
}

/* ########## media screen */

@media screen and (max-width: 600px) {
    input.explore_2[type=text] {
        width: 100px;
        height: 30px;
        background: #fff;
        color: rgb(57,83,69);
        padding: 0 3px 0 3px;
        border-color: #ccc;
        border-style: solid;
        border-width: 1px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
    }
    input.explore_2-dark[type=text] {
        background: #111;
        color: rgb(157,187,171);
        border-color: #444;
    }
}
@media screen and (max-width: 500px) {
    input.explore_2[type=text] {
        width: 80px;
        height: 30px;
        background: #fff;
        color: rgb(57,83,69);
        padding: 0 3px 0 3px;
        border-color: #ccc;
        border-style: solid;
        border-width: 1px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
    }
    input.explore_2-dark[type=text] {
        background: #111;
        color: rgb(157,187,171);
        border-color: #444;
    }
}
@media screen and (max-width: 400px) {
    input.explore_2[type=text] {
        width: 60px;
        height: 30px;
        background: #fff;
        color: rgb(57,83,69);
        padding: 0 3px 0 3px;
        border-color: #ccc;
        border-style: solid;
        border-width: 1px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
    }
    input.explore_2-dark[type=text] {
        background: #111;
        color: rgb(157,187,171);
        border-color: #444;
    }
}
@media screen and (max-width: 300px) {
    input.explore_2[type=text] {
        width: 40px;
        height: 30px;
        background: #fff;
        color: rgb(57,83,69);
        padding: 0 3px 0 3px;
        border-color: #ccc;
        border-style: solid;
        border-width: 1px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
    }
    input.explore_2-dark[type=text] {
        background: #111;
        color: rgb(157,187,171);
        border-color: #444;
    }
}