.woods {
    display: none;
}

.hide-robot {
    display: none;
}

#sebo-form {
    display: none;
}

/* fix for the state input dropdown */
.ui.selection.dropdown {
    min-width: 8em;
}

.ui.input.success > input {
    background-color: #FFF6F6;
    border-color: #E0B4B4;
    /* color: #9F3A38; */
    color: #66ffcc;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Force green border and background when valid */
.field.success .ui.input input {
    border-color: #21ba45 !important;
    border-size: 1px !important;
    border-style: solid !important;
    border-radius: 0.28571429rem !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    color: #21ba45 !important;
    /* Semantic UI green */
    background-color: #f8fff8 !important;
    /*box-shadow: 0 0 0 1px #21ba45 !important;*/
}

/* Optional: Style the icon as well, if you want a green hashtag icon */
.field.success .ui.input > i.icon {
    color: #21ba45 !important;
}

/* Success Placeholder */

.ui.input.success > input::-webkit-input-placeholder {
    color: #e7bdbc;
}

.ui.input.success > input::-moz-placeholder {
    color: #e7bdbc;
}

.ui.input.success > input:-ms-input-placeholder {
    color: #e7bdbc !important;
}

/* Custom CSS from Sticky Header Semanitc UI example */

body {
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4) 30%, rgba(29, 24, 81, 0.1) 100%);
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.4) 30%, rgba(29, 24, 81, 0.1) 100%);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 30%, rgba(29, 24, 81, 0.1) 100%);
}

.ui.label.sebo-blue {
    background-color: #05173b;
    color: #fff;
}

.main.container {
    margin-bottom: 1rem;
}

.main.menu {
    /* margin-top: 4em; */
    border-radius: 0;
    border: none;
    box-shadow: none;
    transition: box-shadow 0.5s ease, padding 0.5s ease;
}

.main.menu .item img.logo {
    margin-right: 1.5em;
}

.overlay {
    float: left;
    margin: 0em 3em 1em 0em;
}

.overlay .menu {
    position: relative;
    left: 0;
    transition: left 0.5s ease;
}

.main.menu.fixed {
    background-color: #ffffff;
    border: 1px solid #ddd;
    box-shadow: 0px 3px 5px rgba(29, 24, 81, 0.3);
}

.overlay.fixed .menu {
    left: 800px;
}

/* .top-form {
  min-height: 240px;
} */

.text.container .left.floated.image {
    margin: 2em 2em 2em -4em;
}

.text.container .right.floated.image {
    margin: 2em -4em 2em 2em;
}

.ui.footer.segment {
    margin: 5em 0em 0em;
}

label {
    text-align: left !important;
}

.dealercode {
    color: #DB2828;
}

.ui.fluid.search .results {
    overflow-y: auto;
    max-height: 500px;
}

#submit {
    background-color: #006400;
    color: #fff;
}

/* Multi-step form CSS */

.in,
.out {
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 500ms !important;
}

#user {
    display: block;
    /* padding: 20px; */
    padding: 20px 0px 20px 0px;
}

#dealer {
    display: block;
    padding: 20px 0px 20px 0px;
}

#machine {
    display: block;
    padding: 20px;
}

#comments {
    display: block;
    /* padding: 20px; */
    padding: 20px 0px 20px 0px;
}

#logo {
    border: 2px solid white;
    border-radius: 10px;
    color: white;
    padding: 15px;
}

#logo:hover {
    box-shadow: 0px 0px 5px 5px white;
}

.thanks {
    color: #05173b;
    font-family: "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
    text-align: center;
    padding-top: 20px;
}

/* Custom Responsive Helpers */

/* @bl4ck5un bl4ck5un/responsive-semantic-ui.css
Created 8 months ago •
Code
Revisions 1
Stars 1
Forks 1
Responsive helpers (mobile-only etc.) for semantic-ui
responsive-semantic-ui.css */
/* Semantic UI has these classes, however they're only applicable to*/
/* grids, containers, rows and columns.*/
/* plus, there isn't any `mobile hidden`, `X hidden` class.*/
/* this snippet is using the same class names and same approach*/
/* plus a bit more but to all elements.*/
/* see https://github.com/Semantic-Org/Semantic-UI/issues/1114*/

/* Mobile */
@media only screen and (max-width: 767px) {
    [class*="mobile hidden"],
    [class*="tablet only"]:not(.mobile),
    [class*="computer only"]:not(.mobile),
    [class*="large screen only"]:not(.mobile),
    [class*="widescreen only"]:not(.mobile),
    [class*="or lower hidden"] {
        display: none !important;
    }

    .ui.step,
    .ui.steps .step {
        font-size: 0.6rem;
    }

    .ui.grid.container {
        padding: 0px;
    }

    #sebo-form {
        padding-left: 0px;
        padding-right: 0px;
    }

    #user {
        display: block;
        padding: 30px 0px 30px 0px;
    }

    #dealer {
        display: block;
        padding: 30px 0px 30px 0px;
    }

    #machine {
        display: block;
        padding: 30px 0px 30px 0px;
    }

    #comments {
        display: block;
        padding: 30px 0px 30px 0px;
    }

    h2.ui.header,
    h2 {
        font-size: 1.4rem;
    }

    .ui.popup {
        font-size: 0.8rem;
    }
}

/* Tablet / iPad Portrait */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    [class*="mobile only"]:not(.tablet),
    [class*="tablet hidden"],
    [class*="computer only"]:not(.tablet),
    [class*="large screen only"]:not(.tablet),
    [class*="widescreen only"]:not(.tablet),
    [class*="or lower hidden"]:not(.mobile) {
        display: none !important;
    }
}

/* Computer / Desktop / iPad Landscape */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    [class*="mobile only"]:not(.computer),
    [class*="tablet only"]:not(.computer),
    [class*="computer hidden"],
    [class*="large screen only"]:not(.computer),
    [class*="widescreen only"]:not(.computer),
    [class*="or lower hidden"]:not(.tablet):not(.mobile) {
        display: none !important;
    }
}

/* Large Monitor */
@media only screen and (min-width: 1200px) and (max-width: 1919px) {
    [class*="mobile only"]:not([class*="large screen"]),
    [class*="tablet only"]:not([class*="large screen"]),
    [class*="computer only"]:not([class*="large screen"]),
    [class*="large screen hidden"],
    [class*="widescreen only"]:not([class*="large screen"]),
    [class*="or lower hidden"]:not(.computer):not(.tablet):not(.mobile) {
        display: none !important;
    }
}

/* Widescreen Monitor */
@media only screen and (min-width: 1920px) {
    [class*="mobile only"]:not([class*="widescreen"]),
    [class*="tablet only"]:not([class*="widescreen"]),
    [class*="computer only"]:not([class*="widescreen"]),
    [class*="large screen only"]:not([class*="widescreen"]),
    [class*="widescreen hidden"],
    [class*="widescreen or lower hidden"] {
        display: none !important;
    }
}