/**
 * How to override the settings...
 * 
 * You may scope custom styling as:
 *   .bakery.settings.override { ... }
 *   .bakery.popup.override { ... }
 *   .bakery.small_button.override { ... }
 * 
 * Because with .override you have a stronger selector!
 */


/**
 * General stuff.
 */
.bakery span {
    display: inline-block;
}
.bakery label,
.bakery ._label {
    font-weight: normal;
}


/**
 * The settings dialog.
 */
.bakery.settings {
    /*display: none;*/
    position: fixed;
    left: 20%;
    top: 20%;
    right: 20%;
    bottom: 20%;
    z-index: 1000000;
    background: white;
    border: 3px solid #017c8e;
    padding: 1rem;
    overflow-y: auto;
    color: #000;
}
#bakery_close_settings {
    float: right;
}

.bakery.settings ._tab ._value {
    float: right;
    cursor: pointer;
}
.bakery.settings ._tab + ._tab {
    margin-top: 1rem;
}
.bakery.settings ._tab ._main {
    overflow-x: auto;
    /*width: 100%;*/
    padding: 1rem;
}
.bakery.settings ._tab ._arrow {
    background: url(../Icons/arrow.png);
    width: 0.8rem;
    height: 0.8rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0;
    padding: 0;
    margin-right: 1rem;
    vertical-align: sub;
    cursor: pointer;
}
.bakery.settings ._tab ._title {
    cursor: pointer;
}
.bakery.settings ._tab ._header {
    background: #fff;
    padding: 0.5rem;
    user-select: none;
}
.bakery.settings ._value span {
    float: left;
    margin-right: 1rem;
}
.bakery.settings ._buttons button {
    float: right;
}
.bakery.settings table {
    width: 100%;
    line-height: 1.2rem;
    font-size: 1rem;
    border-collapse: collapse;
}
.bakery.settings thead {
    background: #017c8e;
    color: #fff;
}
.bakery.settings tbody {
    background: #fff;
    color: #000;
}
.bakery.settings th, .bakery.settings td {
    border: 1px solid #017c8e;
    padding: 0.5rem 1rem;
    text-align: left;
}


/**
 * The popup.
 */
.bakery.popup {
    display: none;
    position: fixed;
    right: 10%;
    bottom: 10%;
    z-index: 10002;
    background: white;
    border: 3px solid #017c8e;
    padding: 1rem;
    color: #000;
    max-width: 80%;
    min-width: 24rem;
}

.bakery.popup ._buttons button {
    margin: 0 1rem 0.5rem 1rem;
}
.bakery.popup ._buttons button:first-child {
    margin-left: 0;
}
.bakery.popup ._buttons button:last-child {
    margin-right: 0;
}

/**
 * The small button at the bottom.
 */
.bakery.small_button {
    display: none;
    position: fixed;
    bottom: 10%;
    z-index: 1;
    right: 5%;
    color: #000;
}

@media (max-width: 32rem) {
    .bakery.popup {
        min-width: 80%;
        width: 80%;
    }
    .bakery.popup ._buttons button {
        display: block;
        width: 100%;
        margin: 1rem 0;
    }
}