@import 'less/_variables';
.hide {
    display: none !important;
}

.show {
    display: block !important;
}
/* =============================================================================
   Main structure
   ========================================================================== */
label {
    display: block;
    margin: 10px 0 6px;
    font-family: "texgyreherosbold",Arial,Tahoma,Verdana,sans-serif;
    font-weight: normal;
    color: @label-text-color;
    white-space: nowrap;
}

input {
    width: 100%;
    padding: 7px;
    background-color: #fff;
    border: 1px solid #c2c2c2;
    border-color: #858585 #c2c2c2 #c2c2c2;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 15px;
    overflow: hidden;
}

/* =============================================================================
   Grid
   ========================================================================== */
.container { /*max-width: 700px;*/
    width: 100%;
    margin: 0 auto;
    padding: 0 2%;
    background: @background-color;
    /*-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 15px 0 rgba(0,0,0,0.5);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.5);*/
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    clear: both;
}

/* =============================================================================
   Tabs
   ========================================================================== */
#tabs {
    padding: 25px 0;
}

.mainTabs li {
    min-width: 78px;
    margin-right: 5px;
    background: @menu-background-color;
    font-family: "texgyreherosbold",Arial,Tahoma,Verdana,sans-serif;
    font-weight: normal;
    font-size: 1.1em;
}

#tabs h2 {
    color: @menu-text-color;
}
.grRemText label {
    color: @menu-text-color
}
.mainTabs li a {
    display: block;
    color: @menu-text-color;
}

.mainTabs .regular {
    display: block;
    padding-bottom: 5px;
}

.ui-tabs .ui-state-default.ui-selectmenu-button {
    width: 99% !important;
    height: 36px;
    padding: 6px 3em 6px 1em;
    background: #f5f5f5;
    color: #1f1f1f;
    font-size: 14px;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background: @menu-background-active-color;
    color: @menu-text-color;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    color: @menu-text-color;
}

.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited {
    color: @menu-text-color;
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    background: @menu-background-active-color;
    color: @menu-text-color;
}

.ui-selectmenu-menu.ui-selectmenu-open {
    max-height: 155px;
    overflow: hidden;
    overflow-y: auto;
}

.tabForm h2 {
    display: none;
}

/* =============================================================================
   Inner links
   ========================================================================== */
.tabForm {
    margin-top: 5px;
}

.tabForm .innerTabs {
    display: inline-block;
    margin: 15px 0 20px;
    background: @menu-background-color;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.tabForm .innerTabs li {
    display: inline-block;
    padding: 10px 9px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    color: @menu-text-color;
}

.tabForm .innerTabs li.active {
    background: @menu-background-active-color;
    color: @menu-text-color;
}

/* =============================================================================
   Icons
   ========================================================================== */
.icon {
    display: block;
    /*width: 28px;
    background: url("img/icons/icons.png") no-repeat;*/
    margin: 0 auto 2px;
}

.car {
    background-position: 0 0;
}

.plane {
    background-position: -30px 0;
}

.hotel {
    background-position: -60px 0;
}
.server {
    background-position: -90px 0;
}
/* =============================================================================
   Form
   ========================================================================== */
.selLbl {
    margin-bottom: 8px;
}

.spec {
    margin-top: 2px;
}

.inpWrap {
    position: relative;
    border: 2px solid transparent;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.inpWrap.clicked {
    background: #fff;
    border: 2px solid #0087f5;
}

.inpWrap.clicked input {
    border: 1px solid #0087f5;
    color: #0065b8;
}

input.map {
    padding-left: 32px;
    background-image: url("img/icons/map.png");
    background-repeat: no-repeat;
    background-position: 10px 50%;
}

.inpWrap.clicked input.map {
    background-image: url("img/icons/mapFocus.png");
}

input.date {
    padding-left: 35px;
    background-image: url("img/icons/date.png");
    background-repeat: no-repeat;
    background-position: 10px 50%;
}

.inpWrap.clicked input.date {
    background-image: url("img/icons/dateFocus.png");
}

/* Error handling */
.alertWrap {
    display: block;
    margin: 2em 0 1em;
    padding: 1.5em 1.5em 1.6em;
    background: #f5d7d7;
    border-left: 3px solid #b80000;
    color: #b80000;
}

.alertWrap .warn, .alertWrap .alertMessage {
    display: block;
    float: left;
    width: 83%;
}

.alertWrap .warn {
    width: 18px;
    height: 18px;
    margin-right: 1.5em;
    background: url("img/icons/warning.png") no-repeat;
}

.alertWrap .alertMessage ul {
    margin-left: 18px;
    list-style: disc outside;
}

.alertWrap .alertMessage ul li {
    padding-top: 1em;
}

.alertWrap .alertMessage ul li a {
    text-decoration: underline;
    color: #b80000;
}

.dataMissing {
    border: 2px solid #e52525;
}

.dataMissing input {
    background-color: #f5d7d7;
    border: 1px solid #e52525;
    color: #b80000;
}

span.dataMissing {
    background-color: #f5d7d7 !important;
    border: 1px solid #e52525;
    color: #b80000;
}

.dataMissing input.map {
    background-image: url("img/icons/mapError.png");
}

.dataMissing input.date {
    background-image: url("img/icons/dateError.png");
}

.fieldWrap.advanced, .fieldWrap.preference, .fieldWrap.equipment {
    margin: 20px 0 0;
}

.fieldWrap.equipment {
    margin-left: 1.5em;
}

.fieldWrap.advanced .toggle {
    color: @label-text-color;
    cursor: pointer;
}

.fieldWrap.advanced .toggle:hover {
    text-decoration: underline;
    color: @label-text-color;
}

.fieldWrap.advanced .toggle span {
    display: inline-block;
    width: 7px;
    height: 8px;
    background: url("img/icons/toggle.png") 0 0 no-repeat;
    vertical-align: middle;
}

.fieldWrap.advanced .toggle span.arrowUp {
    background-position: 0 -8px;
}

.fieldWrap.advanced .toggle:hover span {
    background-position: -10px 0;
}

.fieldWrap.advanced .toggle:hover span.arrowUp {
    background-position: -10px -8px;
}

.fieldWrap.advanced .options {
    margin-top: 15px;
}

.fieldWrap .multiDest {
    margin-top: 5px;
    padding: 2em 0 1em 1em;
    border-top: 1px solid #4c4c4c;
}

.fieldWrap .multiDest h6, .fieldWrap .multiDest .buttons {
    display: block;
    float: left;
}

.fieldWrap .multiDest h6 {
    line-height: 2;
}

.fieldWrap .multiDest .buttons {
    float: right;
}

.fieldWrap .multiDest .buttons button {
    margin: 0;
}

.fieldWrap.equipment ul {
    display: inline-block;
    margin-right: 2%;
    vertical-align: top;
}

.fieldWrap .checkbox {
    display: inline-block;
    margin-right: 20px;
}

.fieldWrap.equipment .checkbox {
    display: block;
    margin-top: 1.25em;
    margin-right: 0;
}

.fieldWrap .checkbox input, .fieldWrap .checkbox label {
    display: block;
    float: left;
    margin: 0;
}

.fieldWrap .checkbox input {
    width: 14px;
    height: 14px;
    margin: 0 5px 0 0;
}

.fieldWrap.equipment .checkbox input {
    margin-top: 1px;
}

.fieldWrap.equipment h6 {
    margin: 0;
    padding: 0;
    border: 0;
}

.fieldWrap.equipment p {
    display: block;
    margin-top: 1.5em;
    margin-right: 0;
}

.ui-widget button {
    margin-top: 2em;
    padding: .7em 1.3em .8em;
    background: @button-background-color;
    /*background: linear-gradient(to top,#ffbe00 0,#ffcb00 100%);
    border-width: 1px 1px 2px;
    border-color: #d4a900 #aa8700 #aa8700;*/
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 1em;
    font-weight: bold;
    color: @button-text-color;
    outline: none;
    border: none;
}

.ui-widget button.btnSearch {
    font-size: 1.3em;
}

.ui-widget button.btnAdd, .ui-widget button.btnRemove {
    padding: .3em 1.2em .5em;
    font-size: 1em;
}

/* =============================================================================
   Media Queries
   ========================================================================== */
@media screen and (max-width:640px) {
    body {
        font-size: 80%;
    }

    #tabs {
        padding: 20px 0.5em;
    }

    .ui-autocomplete.ui-menu {
        max-width: 91% !important;
    }
}

@media screen and (max-width:491px) {
    .container {
        padding: 0;
    }

    #tabs {
        padding: 0 0 20px;
    }

    .mainTabs .regular {
        display: none;
    }

    .ui-tabs .ui-tabs-nav.mainTabs {
        margin-bottom: 1em;
        border-radius: 0;
    }

    .ui-tabs .ui-tabs-nav.mainTabs li {
        width: @tabs-width;
        margin-right: 0;
        border: 1px solid #000;
        border-width: 0 0 1px 1px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    .ui-tabs .ui-tabs-nav.mainTabs li:first-child {
        border-left: 0;
    }

    .alertWrap {
        margin: 2em 1.5em 1em;
    }

    .ui-tabs .ui-tabs-panel.tabForm {
        padding: 0 1.5em;
    }

    .tabForm h2 {
        display: block;
        margin-bottom: .5em;
    }

    .ui-widget button.btnSearch {
        width: 100%;
    }
}

@media screen and (max-width:372px) {
    .ui-autocomplete.ui-menu {
        max-width: 87% !important;
    }
}