body {
	background-color: #222;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	height: 100%;
    color: #999999;
    font-size: 15px;
}

body::-webkit-scrollbar {
    display: none;
}

.wrapper {
    padding: 15px;
    text-align: center;
}

form {
    display: inline-block;
}

input {
    font-size: 20px;
    border-radius: 10px;
    background-color: #a9a9a9;
    color: #222;
    padding: 5px;
    text-align: center;
    text-transform: capitalize;
}

input[type='radio'] { 
    width: 18px;
    height: 18px;
    margin-top: -4px;
    vertical-align: middle;
}

textarea {
    padding: 10px;
    width: 250px;
    height: 125px;
    color: #666;
    background-color: #a9a9a9;
    font-size: 20px;
    font-family: inherit;
    border-radius: 10px;
}

.radio-label {
    display: inline-block;
    font-size: 18px;
}

select {
    font-size: 20px;
    border-radius: 10px;
    background-color: #a9a9a9;
    padding: 5px;
    color: #666;
}

::placeholder {
    color: #666;
    opacity: 1;
}

.place-alert::placeholder {
    color: red;
}

.place-alert {
    color: red!important;
}

.alert {
    display: inline-block;
    border: 1px solid #8f2886;
    border-radius: 10px;
    font-size: 20px;
    color: #8f2886;
    padding: 5px 10px;
}

.allergies {
    display: inline-block;
    font-size: 20px;
    color: red;
    padding: 10px;
    font-weight: 600;
}

.title {
    font-size: 25px;
    font-weight: 600;
}

.sub-title {
    font-size: 25px;
    font-weight: 300;
}

.submit-button {
    cursor: pointer;
    display: inline-block;
    padding: 10px 20px;
    border: 3px solid #521c7e;
    border-radius: 15px;
    background-color: #521c7e;
    color: #a9a9a9;
    font-weight: 600;
    font-size: 20px;
}

.submit-button-a {
    cursor: pointer;
    display: inline-block;
    padding: 5px 10px;
    border: 3px solid #521c7e;
    border-radius: 15px;
    background-color: #521c7e;
    color: #a9a9a9;
    font-weight: 600;
    font-size: 20px;
}

.option-button-a {
    cursor: pointer;
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #f15499;
    border-radius: 10px;
    background-color: #f15499;
    color: #222;
    font-weight: 500;
    font-size: 18px;
}

.submit-button-a-2 {
    cursor: pointer;
    display: inline-block;
    padding: 5px 10px;
    border: 3px solid #8f2886;
    border-radius: 15px;
    background-color: #8f2886;
    color: #a9a9a9;
    font-weight: 600;
    font-size: 20px;
}

.sb-2 {
    padding: 10px 5px;
}

.child-box {
    display: inline-block;
    padding: 25px;
    border-radius: 25px;
    border: 2px solid #333;
    margin: 10px;
}

.button-add-child {
    cursor: pointer;
    float: right;
    padding: 10px;
    border-radius: 15px;
    background-color: #8f2886;
    color: #a9a9a9;
    font-size: 14px;
    font-weight: 600;
    margin-top: 15px;
}

.child-list {
    font-size: 25px;
    color: #8f2886;
    font-weight: 300;
}

.coat {
    display: inline-block;
    padding-left: 5px;
}

.option-label {
    display: inline-block;
    width: 80px;
    font-weight: 300;
    color: #666;
}

/* BURGER MENU START */
.burger-menu {
    float: right;
    cursor: pointer;
    padding: 5px;
    width: 40px;
    height: 40px;
}

.bar1, .bar2, .bar3 {
    width: 40px;
    height: 4px;
    background-color: #666;
    margin: 7px 0;
    transition: 0.4s;
    border-radius: 2px;
}
  
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-8px, 6px);
    transform: rotate(-45deg) translate(-8px, 6px);
}
  
.change .bar2 {opacity: 0;}
  
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

.top-menu {
    position: fixed;
    top: 0;
    height: 50px;
    padding: 5px 10px;
    margin-left: -10px;
    background: #222;
    z-index: 10;
}

.sticky-header {
    display: inline-block;
    text-align: center;
    font-size: 24px;
    font-weight: 300;
    height: 50px;
    line-height: 50px;
    overflow: auto;
    color: #a9a9a9;
}

.hub-menu {
    display: none;
    position: absolute;
    left: 10px;
    margin-top: 5px;
    padding: 0 15px;
    text-align: center;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-radius: 10px;
    background-color: #333;
    border: 1px solid #444;
}

.menu-buttons {
    position: absolute;
    z-index: 10;
    right: 10px;
    margin-top: 5px;
    padding: 0 15px;
    text-align: center;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-radius: 10px;
    background-color: #333;
}

.button {
    display: inline-block;
    border: 1px solid #666;
    border-radius: 7px;
    padding: 7px;
    color: #999;
    width: 125px;
    cursor: pointer;
}

@media screen and (min-width: 600px) {
    .mobile-br {
        display: none !important;
    }
}

.child_queue_box {
    position: relative;
    z-index: 1;
    padding: 15px;
    background-color: #333;
    border-radius: 10px;
    text-align: center;
}

.child_name {
    font-size: 20px;
    font-weight: 600;
}

.class_name, .class_name a:link{
    font-size: 18px;
    font-weight: 300;
    color: #999;
}

.actions {
    padding: 15px;
}

.button-space {
    display: inline-block;
    width: 10px;
}

.color-button-white {
    width: 100px;;
    cursor: pointer;
    display: inline-block;
    padding: 5px;
    border-radius: 10px;
    background-color: #e1e1df;
    color: #222;
    font-weight: 300;
    font-size: 20px;
    margin: 5px;
}

.color-button-blue {
    width: 100px;;
    cursor: pointer;
    display: inline-block;
    padding: 5px;
    border-radius: 10px;
    background-color: #0045a5;
    color: #999;
    font-weight: 300;
    font-size: 20px;
    margin: 5px;
}

.color-button-green {
    width: 100px;;
    cursor: pointer;
    display: inline-block;
    padding: 5px;
    border-radius: 10px;
    background-color: #539936;
    color: #222;
    font-weight: 300;
    font-size: 20px;
    margin: 5px;
}

.color-button-yellow {
    width: 100px;;
    cursor: pointer;
    display: inline-block;
    padding: 5px;
    border-radius: 10px;
    background-color: #dfc21e;
    color: #222;
    font-weight: 300;
    font-size: 20px;
    margin: 5px;
}

.color-button-orange {
    width: 100px;;
    cursor: pointer;
    display: inline-block;
    padding: 5px;
    border-radius: 10px;
    background-color: #d94f23;
    color: #222;
    font-weight: 300;
    font-size: 20px;
    margin: 5px;
}

.color-button-pink {
    width: 100px;;
    cursor: pointer;
    display: inline-block;
    padding: 5px;
    border-radius: 10px;
    background-color: #f15499;
    color: #222;
    font-weight: 300;
    font-size: 20px;
    margin: 5px;
}

.color-button-brown {
    width: 100px;;
    cursor: pointer;
    display: inline-block;
    padding: 5px;
    border-radius: 10px;
    background-color: #84501e;
    color: #a9a9a9;
    font-weight: 300;
    font-size: 20px;
    margin: 5px;
}

.color-button-silver {
    width: 100px;;
    cursor: pointer;
    display: inline-block;
    padding: 5px;
    border-radius: 10px;
    background-color: #afb4b2;
    color: #222;
    font-weight: 300;
    font-size: 20px;
    margin: 5px;
}

.color-button-black {
    width: 100px;;
    cursor: pointer;
    display: inline-block;
    padding: 5px;
    border-radius: 10px;
    background-color: #0d1011;
    color: #999;
    font-weight: 300;
    font-size: 20px;
    margin: 5px;
}

.color-button-lavender {
    width: 100px;;
    cursor: pointer;
    display: inline-block;
    padding: 5px;
    border-radius: 10px;
    background-color: #b598c7;
    color: #222;
    font-weight: 300;
    font-size: 20px;
    margin: 5px;
}

.color-button-burgundy {
    width: 100px;;
    cursor: pointer;
    display: inline-block;
    padding: 5px;
    border-radius: 10px;
    background-color: #421b32;
    color: #999;
    font-weight: 300;
    font-size: 20px;
    margin: 5px;
}

.color-button-gold {
    width: 100px;;
    cursor: pointer;
    display: inline-block;
    padding: 5px;
    border-radius: 10px;
    background-color: #bca792;
    color: #222;
    font-weight: 300;
    font-size: 20px;
    margin: 5px;
}

.v-task {
    cursor: pointer;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 10px;
    font-weight: 300;
    font-size: 16px;
    margin: 5px;
}

.color-Nursery {
    cursor: pointer;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 10px;
    background-color: white;
    color: #222;
    font-weight: 300;
    font-size: 16px;
    margin: 5px;
}

.color-White {
    cursor: pointer;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 10px;
    background-color: #e1e1df;
    color: #222;
    font-weight: 300;
    font-size: 16px;
    margin: 5px;
}

.color-Blue {
    cursor: pointer;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 10px;
    background-color: #0045a5;
    color: #999;
    font-weight: 300;
    font-size: 16px;
    margin: 5px;
}

.color-Green {
    cursor: pointer;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 10px;
    background-color: #539936;
    color: #222;
    font-weight: 300;
    font-size: 16px;
    margin: 5px;
}

.color-Yellow {
    cursor: pointer;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 10px;
    background-color: #dfc21e;
    color: #222;
    font-weight: 300;
    font-size: 16px;
    margin: 5px;
}

.color-Orange {
    cursor: pointer;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 10px;
    background-color: #d94f23;
    color: #222;
    font-weight: 300;
    font-size: 16px;
    margin: 5px;
}

.color-Pink {
    cursor: pointer;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 10px;
    background-color: #f15499;
    color: #222;
    font-weight: 300;
    font-size: 16px;
    margin: 5px;
}

.color-Brown {
    cursor: pointer;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 10px;
    background-color: #84501e;
    color: #a9a9a9;
    font-weight: 300;
    font-size: 16px;
    margin: 5px;
}

.color-Silver {
    cursor: pointer;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 10px;
    background-color: #afb4b2;
    color: #222;
    font-weight: 300;
    font-size: 16px;
    margin: 5px;
}

.color-Black {
    cursor: pointer;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 10px;
    background-color: #0d1011;
    color: #999;
    font-weight: 300;
    font-size: 16px;
    margin: 5px;
}

.color-Lavender {
    cursor: pointer;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 10px;
    background-color: #b598c7;
    color: #222;
    font-weight: 300;
    font-size: 16px;
    margin: 5px;
}

.color-Burgundy {
    cursor: pointer;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 10px;
    background-color: #421b32;
    color: #999;
    font-weight: 300;
    font-size: 16px;
    margin: 5px;
}

.color-Gold {
    cursor: pointer;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 10px;
    background-color: #bca792;
    color: #222;
    font-weight: 300;
    font-size: 16px;
    margin: 5px;
}

.no-color-assigned {
    cursor: pointer;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 10px;
    background-color: #8f2886;
    color: #a9a9a9;
    font-weight: 300;
    font-size: 16px;
    margin: 5px;
}

.color-stats {
    text-align: right;
}

.stats {
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
}

.filter-button {
    cursor: pointer;
    display: inline-block;
    border: 1px solid #444;
    border-radius: 10px;
    font-size: 18px;
    padding: 5px 10px;
    color: #666;
}

.filter-button-checked {
    cursor: pointer;
    display: inline-block;
    border: 1px solid #666;
    background-color: #666;
    border-radius: 10px;
    font-size: 18px;
    padding: 5px 10px;
    color: #222;
    font-weight: 500;
}

.text-button {
    display: inline-block;
    border-radius: 10px;
    background-color: #5BC236;
    color:#ffffff !important;
    text-align: center;
    font-weight: 600;
    padding: 5px 10px;
    width: 45px;
    text-decoration: none !important;
}
  
.call-button {
    display: inline-block;
    border-radius: 10px;
    background-color: #007aff;
    color:#ffffff !important;
    text-align: center;
    font-weight: 600;
    padding: 5px 10px;
    width: 45px;
    text-decoration: none !important;
}

.vc {
    display: inline-block;
    border-radius: 7px;
    background-color: #dfc21e;
    padding: 2px 4px;
    color: #222;
    font-size: 15px;
    font-weight: 900;
    margin-left: 7px;
}

.vc_location {
    display: inline-block;
    font-size: 20px;
    color: #dfc21e;
    padding: 10px;
    font-weight: 300;
}

.wd-room {
    font-style: italic;
    font-size: 14px;
}

.highlight {
    border: 1px solid red;
}

.desk-stats1 {
    display: inline-block;
    text-align: right;
    width: 150px;
    font-size: 2em;
    font-weight: 300;
    color: #555;
}

.desk-stats2 {
    display: inline-block;
    text-align: left;
    width: 50px;
    font-size: 2em;
    font-weight: 600;
    padding-left: 10px;
}

.filled {
    font-weight: 600;
    color: #222;
}

.tasks-align {
    display:block;
    max-width:1000px;
    text-align:center;
    margin:0 auto;
}

.ID {
    position: absolute;
    float: left;
    font-weight: 300;
    font-size: 1.5em;
    color: #666;
}

.close {
    cursor: pointer;
    position: absolute;
    z-index: 2;
    right: 0;
    padding-right: 20px;
    color: #555;
    font-size: 24px;
    font-weight: 600;
}

.burger-div {
    color: inherit;
}

.desk_vc_child {
    cursor: pointer;
    display: inline-block;
    font-size: 22px;
    font-weight: 300;
    transition: width 0.2s, height 0.2s;
}

.desk_vc_child_options {
    border: 1px dashed #555;
    border-radius: 10px;
    padding: 10px 20px 0px 20px;
    margin: 15px;
}

.draggable-div {
    height:10px;
}