/* extras pretty_form.php */

.pretty-form
{
    color: black;
    font-family: "Oxygen", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 300;
    user-select: none;
}

.pretty-form fieldset
{
    border: 1px #bbbbbb solid;
    border-radius: 4px;
    margin: 0;
    padding: 20px;
}

.pretty-form hr {
    border: 1px #cccccc solid;
}

.pretty-form > label,
.pretty-form  .button-container,
.pretty-form  .cb-container,
.pretty-form  .datalist-container,
.pretty-form  .rb-container,
.pretty-form  .textbox-container,
.pretty-form p
{
    margin: 18px 0;
}

.pretty-form input[type=password],
.pretty-form input[type=date],
.pretty-form input[type=text],
.pretty-form .datalist-container input,
.pretty-form textarea,
.pretty-form select
{
    margin: 4px 0 0 0;
}

.pretty-form label
{
    display: block;
}
    .pretty-form label.inline
    {
        display: inline-block;
    }

.pretty-form input[type=password],
.pretty-form input[type=text],
.pretty-form .datalist-container input
{
    background-color: white;
    border: 1px solid #075a8c;
    border-radius: 4px;
    color: #666666;
    display: block;
    font-family: "Oxygen", Helvetica, sans-serif;
    font-size: 16px;
    height: auto;
    line-height: 30px;
    max-width: 400px;
    padding: 5px 10px;
    vertical-align: middle;
    width: 100%;
   -webkit-appearance: none;
}
    .pretty-form input[type=password].short,
    .pretty-form input[type=text].short,
    .pretty-form .datalist-container input.short
    {
        max-width: 200px;
    }
    .pretty-form input[type=password].tiny,
    .pretty-form input[type=text].tiny,
    .pretty-form .datalist-container input.tiny
    {
        max-width: 60px;
    }
    .pretty-form input[type=password].inline,
    .pretty-form input[type=text].inline,
    .pretty-form .datalist-container input.inline
    {
        display: inline-block;
        margin-top: 0;
    }

.pretty-form input[type=date]
{
    background-color: white;
    border: 1px solid #075a8c;
    border-radius: 4px;
    color: #666666;
    display: inline-block;
    font-family: "Oxygen", Helvetica, sans-serif;
    font-size: 16px;
    height: auto;
    line-height: 30px;
    max-width: 400px;
    padding: 5px 10px;
    vertical-align: middle;
    width: auto;
   -webkit-appearance: none;
}

.pretty-form textarea
{
    background-color: white;
    border: 1px solid #075a8c;
    border-radius: 4px;
    color: #666666;
    display: block;
    font-family: "Oxygen", Helvetica, sans-serif;
    font-size: 16px;
    height: auto;
    line-height: 30px;
    max-width: 400px;
    min-height: 180px;
    padding: 5px 10px;
    vertical-align: middle;
    width: 100%;
   -webkit-appearance: none;
}
    .pretty-form textarea.inline
    {
        display: inline-block;
    }

.pretty-form .cb-container label
{
    margin: 8px 0;
}
    .pretty-form .cb-container.inline label
    {
        display: inline-block;
        margin-right: 12px;
    }
    .pretty-form input[type=checkbox]
    {
        cursor: pointer;
        height: 25px;
        line-height: 25px;
        margin-left: 0;
        margin-top: 0;
        vertical-align: middle;
        width: 25px;
    }
        .pretty-form .cb-container.inline label {
            margin-bottom: 0;
        }
        .pretty-form .cb-container label:nth-of-type(1) {
            margin-top: 13px;
        }
.pretty-form .cb-container.indented label
{
    margin: 8px 0 8px 25px;
}

.pretty-form .rb-container label
{
    margin: 8px 0;
}
    .pretty-form .rb-container.inline label
    {
        display: inline-block;
        margin-right: 12px;
    }
    .pretty-form input[type=radio]
    {
        cursor: pointer;
        height: 25px;
        line-height: 25px;
        margin-top: -3px;
        vertical-align: middle;
        width: 25px;
    }
    .pretty-form input[type=radio]:nth-child(1)
    {
        margin-left: 0;
    }
        .pretty-form .rb-container.inline label {
            margin-bottom: 0;
        }
        .pretty-form .rb-container label:nth-of-type(1) {
            margin-top: 13px;
        }
.pretty-form .rb-container.indented label
{
    margin: 8px 0 8px 25px;
}

.pretty-form .textbox-container label
{
    margin: 3px 0 0 0;
}
    .pretty-form .textbox-container label:first-child
    {
        margin: 4px 0 0 0;
    }
        .pretty-form .textbox-container label input,
        .pretty-form .textbox-container label textarea
        {
            margin: 0;
        }
.pretty-form .textbox-container.indented label
{
    margin: 3px 0 0 25px;
}

.pretty-form .select-container {
    margin: 18px 0;
}
    .pretty-form .select-container.centered select {
        display: inline-block;
    }
.pretty-form select
{
    background-color: white;
    border: 1px solid #075a8c;
    border-radius: 4px;
    color: #666666;
    display: block;
    font-size: 16px;
    height: auto;
    line-height: 30px;
    max-width: 280px;
    padding: 10px;
    scrollbar-color: #cdcdcd #f0f0f0;
    vertical-align: baseline;
    width: 100%;
}
    .pretty-form select.short {
        width: auto;
    }
    .pretty-form select.tiny {
        width: auto;
    }
    .pretty-form select.inline {
        display: inline-block;
    }

.pretty-form .button-container
{
    padding: 10px 0;
    text-align: center;
}
    .pretty-form button,
    .pretty-form input[type=button],
    .pretty-form input[type=reset],
    .pretty-form input[type=submit],
    .pretty-form a.button
    {
        -moz-appearance: button;
        -moz-box-sizing: border-box;
        -moz-user-select: none;
        -moz-binding: none;
        background-color: ButtonFace;  /* ButtonFace = #F0F0F0 in FF */
        border: 2px outset ButtonFace;
        border-radius: 4px;
        color: ButtonText; 
        cursor: pointer;
        display: inline-block;
        font-family: "Oxygen", Helvetica, sans-serif;
        font-size: 16px;
        font-weight: 300;
        line-height: normal;
        margin: 0;
        padding: 7px 20px;
        text-align: center;
        text-decoration: none;
        text-shadow: none;
        white-space: pre;
    }
        .pretty-form button:hover,
        .pretty-form input[type=button]:hover,
        .pretty-form input[type=reset]:hover,
        .pretty-form input[type=submit]:hover,
        .pretty-form a.button:hover
        {
            background-color: #e0e0e0;
            border: 2px outset #e0e0e0;
        }

    .pretty-form button:disabled,
    .pretty-form input[type=button]:disabled,
    .pretty-form input[type=reset]:disabled,
    .pretty-form input[type=submit]:disabled,
    .pretty-form a.button.disabled,
    .pretty-form button.disabled,
    .pretty-form input[type=button].disabled,
    .pretty-form input[type=reset].disabled
    .pretty-form input[type=submit].disabled
    {
        color: #aaaaaa;
        cursor: default;
    }
        .pretty-form button:disabled:hover,
        .pretty-form input[type=button]:disabled:hover,
        .pretty-form input[type=reset]:disabled:hover,
        .pretty-form input[type=submit]:disabled:hover,
        .pretty-form a.button.disabled:hover,
        .pretty-form button.disabled:hover,
        .pretty-form input[type=button].disabled:hover,
        .pretty-form input[type=reset].disabled:hover
        .pretty-form input[type=submit].disabled:hover
        {
            background-color: ButtonFace;
            border: 2px outset ButtonFace;
        }

.pretty-form .centered {
    text-align: center;
}

.pretty-form .hidden {
    display: none !important;
}


.pretty-form .slider-container {
    margin: 8px 0 10px 0;
    padding: 0;
}
    .pretty-form .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 15px;
        border-radius: 5px;  
        background: #d3d3d3;
        margin: 0;
        outline: none;
        opacity: 0.7;
        padding: 0;
        -webkit-transition: .2s;
        transition: opacity .2s;
    }
    .pretty-form .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        border-radius: 50%; 
        background: #04AA6D;
        cursor: pointer;
    }
    .pretty-form .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #04AA6D;
        cursor: pointer;
    }

.pretty-form .container {
    margin: 18px 0;
}