/* 
    howto.offwhite: #F6FAF9 
    howto.menu colo(u)r: xxx, nope:#f9f9f9xxx   -> aliceblue
    howto.yellowish overlay yellowishoverlay background-color: rgba(235, 224, 15, 0.08);
    
    howto.logo_colours:
            gold: 236, 197, 125  #ecc57d
           green:  86, 173, 133  #56ad85
         Netblue:   0,  80, 143  #00508f
       Waterblue: 202, 216, 237  #cad8ed
*/

@font-face {
    font-family: 'NotoSans';
    src: url('/fonts/Noto-Sans-700.eot'); /* IE9+ Compat */
    src: url('/fonts/Noto-Sans-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/Noto-Sans-regular.woff2') format('woff2'), url('/fonts/Noto-Sans-regular.woff') format('woff');
    font-weight: normal;
}

@font-face {
    font-family: 'Lato-Bold';
    src: url('/fonts/Lato-Bold.eot'); /* IE9+ Compat */
    src: url('/fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/Lato-Bold.woff2') format('woff2'), url('/fonts/Lato-Bold.woff') format('woff'), url('/fonts/Lato-Bold.ttf') format('ttf');
    font-weight: bold;
}

*, html, body {
    font-family: NotoSans;
    /* for debugging */
    /*font-family: 'Brush Script MT';*/
    margin: 0;
    font-size: 1.0rem; /* base size of this web site is 1 em (or 16px) */
}


.footer-div {
    display: none;
    position: relative;
    background-color: #F6FAF9;
    min-height: 190px;
    width: 100%;
}

    .footer-div a {
        color: inherit;
    }

        .footer-div a div {
            display: inline-block;
            padding: 0px;
            border-radius: 15px;
        }

        .footer-div a:hover div {
            box-shadow: inset 1px 1px 1px #bdc3c7, inset -4px -4px 8px #f9f9f9;
        }

        .footer-div a:active div {
            box-shadow: inset 4px 4px 8px #bdc3c7, inset -4px -4px 8px #f9f9f9;
        }

        .footer-div a div img {
            margin-top: 4px;
        }

.footer-div-left {
    padding-top: calc(0px + 5px);
    height: 95px;
    float: left;
    width: 90px;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 5px;
}

.footer-div-right {
    padding-top: calc(0px + 18px);
    height: 95px;
    float: left;
    width: calc(100% - 100px);
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.3rem;
}


.gwf-googly {
    /*Google-looking letters on landing page*/
    font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
    font-style: normal;
    margin: -3px;
}

.gwf-googly-Net-part {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-style: normal;
    margin: -1px;
}

.footer-status-div {
    position: absolute;
    left: 0px;
    width: calc(100vw - 20px);
    margin-left: 10px;
    margin-right: 10px;
    bottom: 28px;
    font-size: 0.9rem;
    line-height: 0.9rem;
    font-family: monospace;
    text-align: left;
    /*color: #667eea;*/
    color: darkgray;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .footer-status-div div {
        /*box-shadow: 1px 1px 4px #bdc3c7, inset -1px -1px 4px #f9f9f9;*/
        padding: 0px;
        border-radius: 0px;
    }


.item-collection {
    color: #333;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -ms-overflow-style: scrollbar; /*howto ie11 - it works!!*/
    /*max-height: calc(100vh - 200px);*/
    max-height: calc(100vh - 75px);
}

.item-collection-grouping {
    margin: 14px;
    border-radius: 5px;
    box-shadow: inset 1px 1px 8px #bdc3c7, -1px -1px 8px #f9f9f9;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 10px;
}

.dropdown-menu-close-bar {
    height: 46px;
    background-color: transparent;
    width: 100%;
    text-align: right;
}

.button-item-close {
    margin-top: 0px;
    width: 30px;
    border-radius: 0px !important;
    text-align: center;
    transform: translateX(-5px);
    box-shadow: none !important;
    background-color: rgba(246, 5, 5, 0.05) !important;
    border: 1px solid lightgray;
    transform: translateX(-15px);
}

    .button-item-close:hover {
        box-shadow: inset 1px 1px 8px #bdc3c7, inset -1px -1px 8px #f9f9f9 !important;
    }

    .button-item-close:active {
        box-shadow: inset 4px 4px 8px #bdc3c7, inset -4px -4px 8px #f9f9f9 !important;
    }

.button-item-100 {
    width: calc(100% - 60px);
}

.button-item-75 {
    width: calc(75% - 26px);
}

.button-item-50 {
    width: calc(50% - 26px);
    margin-left: 10px;
    transform: translateX(-10px);
}

.button-item {
    /* position: relative; needed for margin top and bottom - do not set the height */
    border-radius: 12px;
    padding: 0px;
    background: #e0e5ec;
    box-shadow: 1px 1px 8px #bdc3c7, -1px -1px 8px #f9f9f9;
    transition: all 0.2s ease;
    line-height: 1.2rem;
    /*margin: 0px auto;*/
    display: inline-block;
    padding: 7px 0; /*this is padding within the button itself */
    margin-bottom: 0px;
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    position: relative;
    border: 1px solid #ccc;
}

    .button-item:hover {
        box-shadow: inset 1px 1px 8px #bdc3c7, -1px -1px 8px #f9f9f9;
    }

    .button-item:active {
        box-shadow: inset 4px 4px 8px #bdc3c7, -4px -4px 8px #f9f9f9;
    }

@media only screen and (max-width: 480px) {
    .button-item-close {
    }

    .button-item-100 {
    }

    .button-item-75 {
        margin-left: calc(50% - 37% + 4px);
    }

    .button-item-50 {
        margin-left: 10px !important;
        transform: translateX(2px);
    }

    .button-item {
        margin-bottom: 15px !important;
        margin-top: 15px !important;
        text-align: center;
    }
}



.checkbox-list {
    list-style: none;
    width: calc(100% - 20px);
    overflow-x: hidden;
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    margin: 0 auto;
}

.checkbox-item {
    margin-bottom: 15px;
    width: calc(100% - 15px);
    line-height: 1rem;
}

    .checkbox-item input[type="checkbox"] {
        display: none;
    }

.checkbox-label {
    border-radius: 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    background: #e0e5ec;
    box-shadow: 8px 8px 16px #bdc3c7, -8px -8px 16px #f9f9f9;
    transition: all 0.2s ease;
    /*font-size: 1rem;*/
    padding: 7px;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

    /* Unchecked state */
    .checkbox-label:hover {
        box-shadow: 4px 4px 8px #bdc3c7, -4px -4px 8px #f9f9f9;
    }

/* Checked state */
.checkbox-item input[type="checkbox"]:checked + .checkbox-label {
    box-shadow: inset 4px 4px 8px #bdc3c7, inset -4px -4px 8px #f9f9f9;
    background: #e0e5ec;
}

.checkbox-box {
    width: 24px;
    height: 24px;
    margin-right: 1rem;
    border-radius: 6px;
    background: #e0e5ec;
    box-shadow: 4px 4px 8px #bdc3c7, -4px -4px 8px #f9f9f9;
    position: relative;
    transition: all 0.2s ease;
}

.checkbox-item input[type="checkbox"]:checked + .checkbox-label .checkbox-box {
    box-shadow: inset 4px 4px 8px #bdc3c7, inset -4px -4px 8px #f9f9f9;
}

    .checkbox-item input[type="checkbox"]:checked + .checkbox-label .checkbox-box::after {
        content: '✔';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        color: #667eea; /* pen blue */
        font-weight: bold;
    }
/*
.checkbox-item button[type="button"] {
    min-width: 175px;
    width: calc(100% - 50px);
    background: #e0e5ec;
    border: none;
    border-radius: 2px;
    padding: 8px 0px;
    cursor: pointer;
    box-shadow: 6px 6px 12px #c8d0d6, -6px -6px 12px #f8f9fa;
    transition: all 0.3s ease;
}

    .checkbox-item button[type="button"]:hover {
        box-shadow: 3px 3px 6px #c8d0d6, -3px -3px 6px #f8f9fa;
        color: #333;
    }

    .checkbox-item button[type="button"]:active {
        box-shadow: inset 3px 3px 6px #c8d0d6, inset -3px -3px 6px #f8f9fa;
        background: #e0e5ec;
    }

.checkbox-item-main-button {
    background-color: #e0f0ec !important;
}
*/

/* 
    ugly, not used
.checkbox-item-hr {
    margin: 0 auto;
    width: calc(100% - 6px);
    transform: translateX(-10px) translateY(-5px);
    height: 2px;
    margin-bottom: 1px;
    box-shadow: inset 3px 3px 3px #d8d0d6, inset -3px -3px 3px #ffffff;
}
*/

.selections-status-div {
    background-color: #F6FAF9;
    color: #555;
    width: calc(100% - 18px);
    margin-left: 8px;
    font-size: 0.9rem;
    line-height: 0.9rem;
    padding:2px;
    padding-bottom:calc(2px + 4px);
    min-height:20px;
    cursor:default;
}
    .selections-status-div div.title {
        display: inline-block;
        padding: 2px 4px 0px 4px;
        font-size: 0.8rem;
        line-height: 0.8rem;
    }
        .selections-status-div div.title:hover {
            box-shadow: inset 1px 1px 1px #bdc3c7, inset -4px -4px 8px #f9f9f9;
        }
        .selections-status-div div.title:active {
            box-shadow: inset 4px 4px 8px #bdc3c7, inset -4px -4px 8px #f9f9f9;
        }

    .selections-status-div div.template-member {
        display: inline-block;
        font-size: 0.8rem;
        background-color: rgba(236, 197, 125,0.4);
        border-radius: 20px;
        padding: 4px;
    }

    .selections-status-div div.collection-member {
        display: inline-block;
        font-size: 0.8rem;
        background-color: rgba(86, 173, 133,0.4);
        border-radius: 20px;
        padding: 4px;
    }

.after-selections-status-div{
    width:100%;
    clear:both;
    background-color:white;
    height:6px;
}


.wn-section-selector-div {
    /*background-color: #f9f9f9;*/
    background-color:aliceblue;
    padding:2px;
    margin-bottom:40px;
}
.wn-tab {
    z-index: 1;
    cursor: pointer;
    /*background-color: lavender;*/
    color: #333;
    cursor: pointer;
    margin-right: -6px;
    border-top-right-radius: 12px;
    padding: 5px;
    /*border: 1px solid #888;*/
    /*margin-top: -10px;*/
    display: inline-block;
    height: 30px;
    white-space: nowrap;
    line-height: 30px;
}

.wn-tab-unselected {
    box-shadow: inset 1px 1px 1px #bdc3c7, inset -4px -4px 8px #f9f9f9;
}

.wn-tab-selected {
    box-shadow: inset 4px 4px 8px #bdc3c7, -4px -4px 8px #f9f9f9;
    background-color: rgba(235, 224, 15, 0.12);
}


@media only screen and (max-width: 401px) {
    .wn-tab {
        width: 100%;
    }
}