$image-folder-path: '/cdn/img/' !default;
$tui-type-folder: '/cdn/fonts/type-1.020/' !default;
//$tui-type-folder: 'http://www.tui.se/cdn/fonts/type-1.020/' !default; // for local development

@import 'layouts/base-styles/variables';
@import 'layouts/base-styles/fonts';
@import 'layouts/base-styles/base';
@import 'layouts/base-styles/mixins';
@import 'bootstrap/bootstrap-overwrites';
@import 'bootstrap/scss/variables';

// Search should change to tui-container and remove all reference to below code
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 12px;
  padding-right: 12px;
}

.container:before,
.container:after {
  content: ' ';
  display: table;
}

.container:after {
  clear: both;
}

@media (min-width: 768px) {
  .container {
    width: 744px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 968px;
  }
}

@media (min-width: 1224px) {
  .container {
    width: 1200px;
  }
}

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 12px;
  padding-right: 12px;
}

.container-fluid:before,
.container-fluid:after {
  content: ' ';
  display: table;
}

.container-fluid:after {
  clear: both;
}

.row {
  margin-left: -12px;
  margin-right: -12px;
}

.row:before,
.row:after {
  content: ' ';
  display: table;
}

.row:after {
  clear: both;
}

.col-xs-12 {
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 12px;
  padding-right: 12px;
  width: 100%;
}

@media (min-width: 768px) {
  .col-sm-4,
  .col-sm-6 {
    float: left;
  }

  .col-sm-4 {
    width: 33.33333%;
  }

  .col-sm-6 {
    width: 50%;
  }
}

.form-control {
  display: block;
  width: 100%;
  height: 40px;
  padding: 6px 12px;
  font-size: 18px;
  line-height: 1.3;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 2px;
}

@import 'partials/atoms/buttons/buttons';
@import 'partials/atoms/conceptlogos/concept-banners';

// We should refactor whole form scss. It produces to much as of now.
input,
select,
textarea {
  font-size: 1.6rem;
  font-family: inherit;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #b9b9b9;
  padding: 0 12px;
  font-weight: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: baseline;
  line-height: 36px;
}

input[type='text'] {
  min-height: 36px;
}

input {
  .form-item & {
    width: 100%;
  }

  &[type='checkbox'] {
    background: $color-white;
    appearance: none;
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 26px;
    border-radius: $border-radius-input;
    border: 1px solid $color-blue-400;
    vertical-align: -.4em;
    margin: 0;

    &:checked {
      background: $color-blue-400 url($checkbox-checked) no-repeat center;
    }
  }

  &[type='radio'] {
    background: $color-white;
    appearance: none;
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 26px;
    border-radius: 50%;
    border: 1px solid $color-blue-400;
    vertical-align: -.4em;
    margin: 0;

    &:checked {
      background: $color-white url($radio-checked) no-repeat center;
    }
  }

  &:focus {
    border-color: $link-color;
    outline: 0;
  }

  &:disabled {
    border-color: $color-tui-grey-50;
    background-color: $color-beige-100;
    cursor: $cursor-disabled;
  }
}

select,
select.form-control {
  background: #fff url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSI4cHgiIHZpZXdCb3g9IjAgMCAxMiA4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggZD0iTTkuNSwxOCBDOS4yNDQsMTggOC45ODgsMTcuOTAyNCA4Ljc5MjgsMTcuNzA3IEM4LjQwMjQsMTcuMzE2NiA4LjQwMjQsMTYuNjgzNCA4Ljc5MjgsMTYuMjkzIEwxMy4wODU4LDEyIEw4Ljc5MjgsNy43MDcgQzguNDAyNCw3LjMxNjYgOC40MDI0LDYuNjgzNCA4Ljc5MjgsNi4yOTMgQzkuMTgzNCw1LjkwMjQgOS44MTY0LDUuOTAyNCAxMC4yMDcsNi4yOTMgTDE1LjIwNjgsMTEuMjkzIEMxNS41OTc0LDExLjY4MzQgMTUuNTk3NCwxMi4zMTY2IDE1LjIwNjgsMTIuNzA3IEwxMC4yMDcsMTcuNzA3IEMxMC4wMTE4LDE3LjkwMjQgOS43NTYsMTggOS41LDE4IFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJmb3JtcyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI2NC4wMDAwMDAsIC04NDQuMDAwMDAwKSI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0OC4wMDAwMDAsIDI0My4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Im11bHRpc2VsZWN0LWV4cGFuZGVkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgNTY0LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9ImlucHV0LWRlZmF1bHQtY29weS00Ij4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iaWNvbi8wOF9OYXZpZ2F0aW9uQXJyb3ciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyMi4wMDAwMDAsIDQxLjAwMDAwMCkgcm90YXRlKDkwLjAwMDAwMCkgdHJhbnNsYXRlKC0yMjIuMDAwMDAwLCAtNDEuMDAwMDAwKSB0cmFuc2xhdGUoMjEwLjAwMDAwMCwgMjkuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvbWFzaz4KICAgICAgICAgICAgICAgICAgICAgICAgPHVzZSBpZD0iUG9zdGl2ZV9feDI4X3BfeDI5XyIgZmlsbD0iIzA5MkE1RSIgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9InRpbnQvZ3JleTEwMCIgbWFzaz0idXJsKCNtYXNrLTIpIj48L2c+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=') no-repeat right 10px center;
}

select {
  line-height: 34px;
  padding-right: 24px;
}

select:focus {
  border-color: #0074ab;
  outline: 0;
}

label {
  font-size: 1.6rem;
  font-weight: bold;
  display: block;
  margin-bottom: 6px;
}

@import 'partials/atoms/icon-flags-svg/icon-flags-svg';
@import 'partials/atoms/icon-svg/icon-svg';
@import 'partials/atoms/images/images';
@import 'partials/atoms/labellogos/label-logos';

ul {
  padding-left: 0;
  list-style: none;
}

@import 'partials/atoms/logo-tui/logo-tui';
@import 'partials/atoms/typography/type';
@import 'partials/molecules/site-search/tui-text-search';
@import 'partials/molecules/tools-navigation/tools-navigation';
@import 'partials/molecules/tui-navigation/tui-navigation';
@import 'partials/molecules/hotel-card/hotel-favorite';
@import 'partials/organisms/footer/footer';

.color-tui-red {
  color: $color-red-400;
}