@import url('https://fonts.googleapis.com/css2?family=Baloo+Paaji+2:wght@500&display=swap');


@media screen and (max-width: 380px) {

    /*divs around fairway-buttons in layout-page*/
    .fairway_btn_container {
        padding: 0 !important;
    }

    .fairway_btn_row {
        padding: 0 !important;
    }
}


@media screen and (max-width: 420px) {
    .content_block {
        width: 100% !important;
    }

    /*fairway-buttons in layout-page*/
    button.fairway_col {
        font-size: 1em !important;
        font-weight: 200 !important;
        margin: 2px 2px !important;
        padding: 2px 2px !important;
    }

    div.fairway_col_empty {
        margin: 4px 5px !important;
        padding: 0 !important;
    }
}

@media screen and (max-width: 576px) {
    .main_container {
        width: 90% !important;
    }

    .align_center_max576 {
        text-align: center !important;
    }

    .wide_button_max576 {
        max-width: 240px !important;
    }

    .narrow_button_max576 {
        font-size: 16px !important;
        width: 120px !important;
    }

    input[type="button"].wide_text_in_button {
        font-size: 1em !important;
        min-height: 38px;
    }

    .small_on_narrow {
        font-size: small !important;
    }

    input[type="button"].small_on_narrow {
        margin: 2px !important;
        padding: 2px 6px !important;
    }
}

.mobileScorecard {
    display: none;
}

/*navbar small devices css*/
@media screen and (max-width: 770px) {
    .navbar>.container-fluid {
        display: contents !important;
    }

    .navbar {
        padding: 2rem !important;
    }

    .profileBtn {
        /* margin: 0 0 0 auto !important; */
        position: absolute;
        right: 0;
    }

    button.navbar-toggler.custom-toggler {
        position: absolute;
        left: 0;
        box-shadow: none !important;
    }

    .mobileScorecard {
        display: block;
    }

    .fullWidthScorecard {
        display: none;
    }

    .align_center_max770 {
        text-align: center !important;
    }

    section#news,
    article#news {
        width: 100vw !important;
    }
}

@media screen and (max-width: 1200px) {
    .navbar {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        flex-direction: row-reverse !important;
        /*padding: 2rem !important;*/
    }
}



:root {
    /*Nämä on käytössä vanhoilla muotoiluilla. Otan pois, kun kaikki värimuotoilut on vaihdettu uuteen tapaan. -Mari */
    --mint: #7cffd5;
    --black: black;
    --white: #f6fffc;
    --gray: #292929;
    --lightGray: #898989;
    --danger: #fe0000;

    /* NAMES FOR COLORS, DARK*/
    --effect: #7cffd5;
    --effect2: #7cffd5;
    --bgColor1: #000;
    --bgColor2: #000;
    --bgColor3: #292929;
    --bgColor4: #292929;
    --bgColor5: #292929;
    --bgColor6: #424242;
    --textHeader: #f6fffc;
    --navItems: #7cffd5;
    --textHeading: #7cffd5;
    --text1: #f6fffc;
    --text2: #898989;
    --text3: #7cffd5;
    --danger: #fe0000;


    /* README: USAGE OF COLORS
    --effect: mint effect color. Same for both themes.
    --effect2: nav link hover
    --bgColor1: body background
    --bgColor2: header
    --bgColor3: navbar background and footer background, input[type=radio]
    --bgColor4: text input background
    --bgColor5: "dark" buttons background
    --bgColor6: selected checkbox-buttons
    --textHeader: color of text in the header and footer sections
    --navItems: color of the hampurilaisvalikko
    --textHeading: h2, h3, .heading
    --text1: article, p, .headline, button, .small_heading, addlayout_hole_heading, error_notification
    --text2: .radio-label, .radio_label_with_info
    --danger: orange-red danger color. Same for both themes.


    /* NAMES FOR COLORS, LIGHT
    --effect: #7cffd5;
    --effect2: #39A07F;
    --bgColor1: #fff;
    --bgColor2: #39A07F;
    --bgColor3: #39A07F;
    --bgColor4: #D2D8D6;
    --bgColor5: #D1FEF0;
    --bgColor6: #39A07F;
    --textHeader: #f6fffc;
    --navItems: #f6fffc;
    --textHeading: #292929;
    --text1: #000;
    --text2: #292929;
    --text3: #292929;
    --danger: #fe0000;*/

    /*score colors */
    --albatross: #6FFF6F;
    --eagle: #32CD32;
    --birdie: #008908;

    --bogey: #FF836C;
    --doublebogey: #FF4B29;
    --triplebogey: #D70606;
    --worse: #A0000C;
    --fault: rgb(195, 0, 255);
}

.dark-theme {
    --par: #151515;
    --effect: #7cffd5;
    --effect2: #7cffd5;
    --bgColor1: #000;
    --bgColor2: #000;
    --bgColor3: #292929;
    --bgColor4: #292929;
    --bgColor5: #292929;
    --bgColor6: #424242;
    --bgColor7: #292929;
    --bgColor8: #000;
    --borderColor1: #000;
    --borderColor2: #898989;
    --textHeader: #f6fffc;
    --navItems: #7cffd5;
    --textHeading: #7cffd5;
    --text1: #f6fffc;
    --text2: #898989;
    --text3: #7cffd5;
    --text4: #f1eee4;
    --text5: #000;
    --danger: #fe0000;
    /* drawmapButton-värimuuttujat ei käytössä missään, mutta tässä on listattuna buttoneiden korostukseen koodissa käytetyt värit */
    --drawmapButtonLawn: #9fdf8d;
    --drawmapButtonWater: #0355dc;
    --drawmapButtonSand: #9f744a;
    --drawmapButtonField: #fff176;
    --drawmapButtonForest: #54862f;
    --drawmapButtonFairway: #f1eee4;
    --drawmapButtonHazard: #ffff00;
    --drawmapButtonRoad: #888888;
    --drawmapButtonPath: #a52a2a;
    --drawmapButtonFairwayRoute: #000000;
    --drawmapButtonMarker: #000000;
    /* drawmap-värimuuttujat ei käytössä missään, mutta tässä on listattuna piirtoon koodissa käytetyt värit (samat molemmissa teemoissa) */
    --drawmapLawn: #9fdf8d;
    --drawmapWater: #0355dc;
    --drawmapSand: #9f744a;
    --drawmapField: #fff176;
    --drawmapForest: #54862f;
    --drawmapFairway: #f1eee4;
    --drawmapHazard: #ffff00;
    --drawmapRoad: #888888;
    --drawmapPath: #a52a2a;
    --drawmapFairwayRoute: #000000;
    --drawmapMarker: #000000;

}

.light-theme {
    --effect: #7cffd5;
    --effect2: #39A07F;
    --bgColor1: #fff;
    --bgColor2: #39A07F;
    --bgColor3: #39A07F;
    --bgColor4: #D2D8D6;
    --bgColor5: #D1FEF0;
    --bgColor6: #39A07F;
    --bgColor7: #f6fffc;
    --bgColor8: #D1FEF0;
    --borderColor1: #f6fffc;
    --borderColor2: #898989;
    --textHeader: #f6fffc;
    --navItems: #f6fffc;
    --textHeading: #292929;
    --text1: #000;
    --text2: #030303;
    --text3: #292929;
    --text4: #918f88;
    --text5: #000;
    --danger: #fe0000;
    /* drawmapButton-värimuuttujat ei käytössä missään, mutta tässä on listattuna buttoneiden korostukseen koodissa käytetyt värit. */
    --drawmapButtonLawn: #339618;
    --drawmapButtonWater: #0355dc;
    --drawmapButtonSand: #9f744a;
    --drawmapButtonField: #cab300;
    --drawmapButtonForest: #54862f;
    --drawmapButtonFairway: #918f88;
    --drawmapButtonHazard: #c7ce00;
    --drawmapButtonRoad: #535353;
    --drawmapButtonPath: #a52a2a;
    --drawmapButtonFairwayRoute: #000000;
    --drawmapButtonMarker: #000000;
    /* drawmap-värimuuttujat ei käytössä missään, mutta tässä on listattuna piirtoon koodissa käytetyt värit (samat molemmissa teemoissa) */
    --drawmapLawn: #9fdf8d;
    --drawmapWater: #0355dc;
    --drawmapSand: #9f744a;
    --drawmapField: #fff176;
    --drawmapForest: #54862f;
    --drawmapFairway: #f1eee4;
    --drawmapHazard: #ffff00;
    --drawmapRoad: #888888;
    --drawmapPath: #a52a2a;
    --drawmapFairwayRoute: #000000;
    --drawmapMarker: #000000;
}

.effect {
    color: var(--effect);
}

.effect2 {
    color: var(--effect2);
}


body {
    background-color: var(--bgColor1) !important;
    touch-action: manipulation;
}

.row {
    margin: 0px !important;
}

/* HEADER & NAVBAR -SECTION */

header {
    background-color: var(--bgColor2);
    color: var(--textHeader);
    padding-top: 5px !important;
    margin: 0 !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

header img {
    width: 80px;
}

header h1 {
    font-size: 65px !important;
    font-family: 'Baloo Paaji 2', cursive;
    margin: 0px !important;
}

nav {
    background-color: var(--bgColor3);
    border-top: solid var(--effect) 2px;
    text-align: center;
    font-size: 1.2em;
    border-radius: 12px;
}

.nav-link {
    color: var(--textHeader) !important;
}

.nav-link:hover {
    color: var(--effect) !important;
}

/*Collapse navbar*/
.custom-toggler {
    border: none !important;
    float: left;
}

.bi-list::before {
    color: var(--navItems) !important;
    margin-left: 0.6em;
}

/*User link*/
.dropdown-menu.show {
    background-color: var(--bgColor2) !important;
    border: solid 1px var(--effect) !important;
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    right: 0.5em;
}

.dropdown-menu[data-bs-popper] {
    top: auto !important;
    left: auto !important;
    margin-top: 0.4em !important;
    margin-right: 1em !important;
}

.dropdown-item:hover {
    background-color: var(--bgColor2) !important;
    color: var(--effect) !important;
    max-width: fit-content !important;
}

a#dropdownMenuLink {
    border: none !important;
}

.profileBtn {
    margin: auto;
}

#notificationMark_1 {
    position: relative;
    display: none;
    top: 0.3rem;
    right: 0.3rem;
    color: var(--textHeader);
    width: 1.5em;
    height: 1.5em;
    font-size: 0.5em;
    font-weight: 600;
    border-radius: 50%;
    background-color: var(--danger);
    z-index: 20;
}

#notificationMark_2,
#notificationMark_3,
#notificationMark_4,
#notificationMark_5 {
    display: none;
    color: var(--text5);
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background-color: var(--danger);
    margin-left: 0.2em;
}

#logOutBtn {
    font-size: 1em !important;
}

/*Theme toggler*/
#darkmodeTogglerLabel {
    width: 50px;
    height: 20px;
    position: relative;
    padding: 2px;
    display: inline-block;
    background: #ebebeb;
    border: 1px solid var(--effect);
    border-radius: 20px;
    box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4), inset 0px -5px 15px rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: 0.1s;
}

#darkmodeTogglerLabel:after {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: 1px;
    left: 1px;
    background: linear-gradient(180deg, var(--effect), green);
    border-radius: 18px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

#darkmode-toggle {
    width: 0;
    height: 0;
    visibility: hidden;
}

#darkmode-toggle:checked+#darkmodeTogglerLabel {
    background: #242424;
}

#darkmode-toggle:checked+#darkmodeTogglerLabel:after {
    left: 49px;
    transform: translateX(-100%);
    background: linear-gradient(180deg, #777, #3a3a3a);
}

#darkmodeTogglerLabel:active:after {
    width: 26px;
}

/*End of theme toggler */
/* END OF HEADER & NAVBAR -SECTION */


.main_container {
    padding: 0px !important;
}

.content_container {
    padding: 0px !important;
    margin: 0px;
}

.sisalto {
    min-height: calc(100vh - 275px);
    padding-top: 15px;
}

article {
    color: var(--text1);
}

h2 {
    font-family: 'Baloo Paaji 2', cursive;
    color: var(--textHeading) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    text-align: center;
}

.h2_more_margin {
    margin-top: 15px !important;
    margin-bottom: 20px !important;
}

h3 {
    font-family: 'Baloo Paaji 2', cursive;
    font-size: 25px !important;
    color: var(--effect2) !important;
    letter-spacing: 2px;
    margin-top: 5px !important;
}

h4 {
    font-family: 'Baloo Paaji 2', cursive;
    font-size: 23px !important;
    letter-spacing: 2px;
    color: var(--effect2) !important;
}

h5 {
    font-family: 'Baloo Paaji 2', cursive;
    font-size: 18px !important;
    letter-spacing: 2px;
    color: var(--effect2) !important;
}

p {
    color: var(--text1);
}

.error_notification {
    text-align: center;
    border: solid 1px var(--danger);
    /* color: var(--textHeader); */
    color: var(--text1);
    border-radius: 12px;
    padding: 6px 12px;
    max-width: 600px;
    margin-top: 7px !important;
    margin: 0 auto;
}

.ok_notification {
    text-align: center;
    border: solid 1px var(--effect2);
    color: var(--effect2);
    border-radius: 12px;
    padding: 6px 12px;
    max-width: 600px;
    margin-top: 7px !important;
    margin: 0 auto;
}

.required {
    color: var(--effect2);
}

.mint_color {
    color: var(--mint);
}

.lg_color {
    color: var(--lightGray);
}

.danger_color {
    color: var(--danger);
}

.penalty_color {
    color: var(--fault);
}

.white_color {
    color: var(--white);
}



.small_heading {
    color: var(--text1) !important;
}

.addlayout_hole_heading {
    font-family: 'Baloo Paaji 2', cursive;
    font-size: larger;
    text-transform: uppercase;
    color: var(--text1) !important;
    margin-top: 10px !important;
    margin-bottom: 0px !important;
}


a:link {
    text-decoration: none;
    color: var(--text1);
    margin-left: 10px;
    margin-right: 10px;
}

a:visited {
    color: var(--text1);
}

ul {
    list-style-type: none !important;
    padding: 10px;
}


button {
    color: var(--text1);
    font-size: 1.2em !important;
    background-color: var(--bgColor5);
    border: solid var(--effect2) 1px;
    border-radius: 6px !important;
    padding: 4px 12px !important;
}

.dark_button {
    color: var(--text1) !important;
    font-size: 1.2em !important;
    background-color: var(--bgColor5) !important;
    border: solid var(--effect2) 1px !important;
    border-radius: 6px !important;
    padding: 4px 12px !important;
    margin: 10px !important;
}

.dark_danger_button {
    color: var(--text1) !important;
    font-size: 1.2em !important;
    background-color: var(--bgColor5) !important;
    border: solid var(--danger) 1px !important;
    border-radius: 6px !important;
    padding: 4px 12px !important;
    margin: 10px !important;
}

.wide_button_max576 {
    width: 320px !important;
    max-width: 95% !important;
}

.narrow_button_max576 {
    width: 160px;
    max-width: 95% !important;
}

input.width230px,
label.width230px {
    min-width: 230px !important;
}

input.width115px,
label.width115px {
    min-width: 115px !important;
}

input,
textarea {
    background-color: var(--bgColor4);
    border-radius: 6px;
    border: none;
    padding: 4px 14px !important;
}

input,
select,
textarea {
    color: var(--text1);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--text1);
}

::-webkit-input-placeholder {
    text-align: left;
}

:-moz-placeholder {
    text-align: left;
}


/* Radio-buttons */

.radio_label {
    position: relative;
    margin-top: 0.6rem;
    display: flex !important;
    text-align: left;
    color: var(--text2);
}

.radio_label_with_info {
    position: relative;
    margin-top: 0.6rem;
    display: flex !important;
    text-align: left;
    color: var(--text2);
}

input[type=radio] {
    margin: 0.3rem !important;
    accent-color: var(--bgColor3) !important;
}

.radio_selection_div {
    display: flex;
    flex-direction: column;
    align-items: start;
}


.center_align {
    text-align: center !important;
}

.left_align {
    text-align: left !important;
}

.right_align {
    text-align: right;
}

.margin_0 {
    margin: 0 !important;
}

.margin_1 {
    margin: 1px !important;
}

.margin_5 {
    margin: 5px !important;
}

.margin_10 {
    margin: 10px !important;
}

.margin_20 {
    margin: 20px !important;
}

.margin_bottom_10 {
    margin-bottom: 10px !important;
}

.margin_top_20 {
    margin-top: 20px !important;
}

.margin_bottom_20 {
    margin-bottom: 20px !important;
}

.padding_5 {
    padding: 5px !important;
}

.padding_10 {
    padding: 10px !important;
}

.max_width_90vw {
    max-width: 90vw !important;
}

/* Buttons, input fields and headers of the search page */

.selection_button_wrap {
    position: relative;
    text-align: center;
}

.selection_button_label {
    color: var(--text1) !important;
    font-size: 1em !important;
    background-color: var(--bgColor5) !important;
    border: solid var(--effect2) 1px !important;
    border-radius: 6px !important;
    margin: 10px 3px !important;
    padding: 3px 0;
}

.width40px {
    width: 40px;
}

.selection_button:checked+.selection_button_label {
    color: var(--effect) !important;
    background-color: var(--bgColor6) !important;
    border-radius: 6px;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

input:disabled {
    opacity: 0.5;
}

input:disabled+label {
    opacity: 0.5;
}


.info-text-small {
    font-size: small;
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 5px;
    color: var(--text2);
}

.infoDiv {
    background-color: var(--bgColor7);
    position: absolute;
    display: block;
    z-index: 1000 !important;
    width: fit-content;
    max-width: 40vw;
    text-align: left;
    padding: 8px;
    border: 2px solid var(--bgColor6);
    border-radius: 12px;
}

.infoP {
    color: var(--effect2);
    font-size: 0.8em;
}


footer {
    padding-top: 20px !important;
    background-color: var(--bgColor3);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    margin: 0 !important;
}

.nav-item {
    color: var(--textHeader) !important;
}

.headline {
    background-color: var(--bgColor3);
    text-align: center;
    margin-top: 10px !important;
    margin-bottom: 10px;
    margin-left: 1px;
    margin-right: 1px;
    border-radius: 12px;
}

.heading {

    font-family: 'Baloo Paaji 2', cursive;
    font-size: x-large !important;
    color: var(--textHeading) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 3px;
    margin-bottom: 5px;
}

.heading_2 {
    font-family: 'Baloo Paaji 2', cursive;
    font-size: large !important;
    color: var(--textHeading) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 3px;
    margin-top: 10px;
}

.subtitle {
    font-family: 'Baloo Paaji 2', cursive;
    font-size: medium !important;
    color: var(--textHeading) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 3px;
    margin-bottom: 0;
}

.subtitle_bg {
    background-color: var(--bgColor3);
    text-align: center;
    margin-top: 0 !important;
    margin-bottom: 2px;
    margin-left: 3px;
    margin-right: 3px;
    border-radius: 12px;
}

.subtitle_bg_noStats {
    background-color: var(--bgColor3);
    text-align: center;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}

.content_block {
    border-top: solid 5px var(--bgColor3);
    border-bottom: solid 5px var(--bgColor3);
    border-radius: 20px;
    box-shadow: 0 -1px 0 rgb(124 255 213 / 0.45);
    margin: 10px auto;
    /*height: 100%;*/
    width: 85%;
}

.content_block_light {
    border-top: solid 2px var(--bgColor3);
    border-bottom: solid 2px var(--bgColor3);
    border-radius: 20px;
    margin: 2px auto;
    width: 98%;
}

.page_divider {
    border-bottom: 2px dashed var(--borderColor2);
    padding: 20px;
}

a.normalLink {
    color: var(--effect2);
    text-decoration: underline;
}

.limit_search_dropdown {
    color: var(--text1);
    background-color: var(--bgColor1);
    border: 1px solid var(--text4);
    margin-top: 2px !important;
    margin: 5px;
    padding: 2px;
    border-radius: 10px;
    width: 60px;
}

.limit_scores_dropdown {
    color: var(--text1);
    background-color: var(--bgColor1);
    border: 1px solid var(--text4);
    margin-top: 2px !important;
    margin: 5px;
    padding: 2px;
    border-radius: 10px;
    width: 80px;
}

/* Some iconien tyylit */
.fa {
    padding: 15px;
    font-size: 40px !important;
    width: 80px !important;
    text-align: center;
    text-decoration: none;
    border-radius: 20%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.fa-youtube {
    background: #bb0000;
    color: white;
}

.fa-instagram {
    background: #125688;
    color: white;
}

.fa-facebook {
    background: #3B5998;
    color: white;
}

/*Fontawesome iconien tyylit*/
.fa-up-down {
    margin: 0.4em 0.1em 0.1em 0.1em !important;
}

/*Hidden display*/

.displayHidden {
    display: none !important;
}

/*Feedbackpage*/
form#feedbackForm {
    align-items: center;
    display: flex;
    flex-direction: column;
}

textarea#feedback {
    max-width: 90%;
}

/*Borders*/
.whiteRoundedBorder {
    border: 1px solid var(--effect2);
    border-radius: 20px;
}

.effect2Border {
    border: 1px solid var(--effect2);
    border-radius: 6px;
}