/* style.css */

#sketch-holder-holder {
}

#toggle-auto-mosaic {
/*    font-weight: 500;
    border: 2px solid #f0ad4e;*/
}

html, body {
  height: 100%;
}

hr {
    -webkit-margin-before: .6em;
    -webkit-margin-after: .6em;
}

body {
    font-family: "Avenir Next";
}

button {
    font-family: "Avenir Next";
}

input {
    font-family: "Avenir Next";
}

h1 {
    font-size: 2.75em;
    font-weight: 600;
    margin-top:15px;
    margin-bottom:10px;
}

h2 {
    font-size: 2.2em;
    font-weight: 600;
	margin-top:25px;
}

.header-logo {
    cursor: pointer;
    margin-top: 15px;
    margin-left: 15px;
    height:30px; 
    width: 30px;
}

.alt-text {
    font-size: 0.75em;
    color: #898570;
}

.btn-group {
    border-radius: 5px;
}

#m-toggle-auto-mosaic {
    border-color: #ffbb33;
    color: #ffbb33;
    background-color: white;
}

#m-toggle-auto-mosaic.active {
    border-color: #ffbb33;
    background-color: #ffbb33;
    color: white;
}

.btn-lg {
    font-size: 2em;
    padding-top: 11px;
    padding-bottom: 11px;
    width:45%;
    vertical-align: middle;
}

.btn-lg-toggle {

}

.btn-rounded {
    border-radius: 20px;
}

.btn-show-colors {
    background-color: #cccccc;
}

.form-rounded {
    border: 1px solid #888888;
    border-radius: 5px;
    margin-top: 0;
    margin-bottom: 10px;
    padding: 10px;
}

.strong-font {
    font-weight: 600;
}

.fa.fa-angle-down {
    font-weight: bold;
}

.fa.fa-angle-up {
    font-weight: bold;
}

.form-rounded-less {
    border: solid #888888;
    border-width: 0 1px 1px 1px;
    border-radius: 0 0 4px 4px;
    margin-top: 0;
    margin-bottom: 10px;
    padding: 10px;
}

.full-preset {
    vertical-align: middle;
    padding: 10px 5px 10px 5px;
}

.btn-show-color-presets {
    margin-top: 10px;
}

.btn-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: .9em;
    border-radius: 2px;
    border: none;
    outline: none !important;
    margin: 4px;
    vertical-align: top;
}

.btn-icon.checked {
    border: solid 1px #000000;
}

.colorpicker-component {
	margin-top: 5px;
}

.colorset-button {
    width: 100%;
    text-align: left;
    color: white;
    outline: none;
    padding: 5px 8px 5px 10px;
    margin-top: 3px;
    margin-bottom: 0px;
}

.expanded {
    border-radius: 4px 4px 0 0;
    outline: none !important;
    -webkit-box-shadow: 0 !important;
    box-shadow: 0 !important;
}

.font-size-1-25 {
    font-size: 1.25em;
}

.font-size-1-5 {
    font-size: 1.5em;
}

.font-size-2 {
    font-size: 2em;
}

.font-size-2-5 {
    font-size: 2.5em;
}

.initially-hidden {
    display: none;
}

.initially-hidden-75 {
    display: none;
    font-size: .75em;
}

.initially-hidden-1-25 {
    display: none;
    font-size: 1.25em;
}

.input-number {
    width: 70px;
}

.margin-bottom-5 {
    margin-bottom: 5px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.margin-bottom-25 {
    margin-bottom: 25px;
}

.margin-top-5 {
    margin-top: 5px;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-top-15 {
    margin-top: 10px;
}

.test-things {
    padding-top:5px;
    padding:0;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.colorset-1 {
    color: #000000;
}

.opacity-03 {
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
}

.opacity-05 {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.opacity-06 {
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

.opacity-07 {
     opacity: 0.7;
     filter: alpha(opacity=70); /* For IE8 and earlier */
}

.opacity-09 {
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}

.opacity-10 {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.opacity-box {
    position: absolute;
    left: 100px;
}

.margin-left-5 {
    margin-left: 5px;
}

.margin-left-10 {
    margin-left: 10px;
}

.margin-right-10 {
    margin-right: 10px;
}

.padding-top-5 {
    padding-top: 5px;
}

.padding-bottom-10 {
    padding-bottom: 10px;
}

.parameters-ui {
    overflow-y:scroll; 
    height:400px;"
}

.preset-picker {
    margin-top: 25px;
    display:none;
}

.select-all-link {
    position: relative;
    top: 5px;
}

.fixed-top {
    position: absolute;
    top: 0;
    left: 0;
    padding-right: 90px;
}

.parameter-title {
    font-weight: 600;
    font-size: 1.1em;
    margin-bottom: 3px;
    margin-top: 2px;
}

.relative-top-mobile {
    position: relative;
    margin-top: 30px;
    margin-bottom: 10px;
    left: -15px;
}

.sticky-top {
    position: sticky;
    top: 15px;
    margin-top: 15px;
}

.table-full {
    width: 100%;
}

.table-color-preset {
    border-bottom: 1px solid #888888;
}

.table-row-margin {
    height: 30px;
}

.width-40 {
    width:40%;
    padding-bottom: 10px;
    padding-top: 10px;
}