/// <reference path="../defaults" />
/// <reference path="variables_and_mixins" />



*:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  -ms-interpolation-mode: bicubic;
}

#map_canvas img, #map_canvas embed, #map_canvas object, .map_canvas img, .map_canvas embed, .map_canvas object {
  max-width: none !important;
}

.left {
  float: left !important;
}

.right {
  float: right !important;
}

.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.hide {
  display: none;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
}

textarea {
  height: auto;
  min-height: 50px;
}

@mixin newCellMainAlign($direction, $sizeName) {

  > .cell-#{$direction}-start-#{$sizeName} {
    align-self: flex-start;
    text-align: start;
  }

  > .cell-#{$direction}-end-#{$sizeName} {
    align-self: flex-end;
    text-align: end;
  }

  > .cell-#{$direction}-center-#{$sizeName} {
    align-self: center;
    text-align: center;
  }

  > .cell-#{$direction}-auto-#{$sizeName} {
    align-self: auto;
  }

  > .cell-#{$direction}-baseline-#{$sizeName} {
    align-self: baseline;
  }

  > .cell-#{$direction}-stretch-#{$sizeName} {
    align-self: stretch;
  }
}

@mixin newCellCrossAlign($direction, $sizeName) {

  > .cell-#{$direction}-start-#{$sizeName} {
    align-items: flex-start;
    justify-content: flex-start;
  }

  > .cell-#{$direction}-end-#{$sizeName} {
    align-items: flex-end;
    justify-content: flex-end;
  }

  > .cell-#{$direction}-center-#{$sizeName} {
    align-items: center;
    justify-content: center;
  }

  > .cell-#{$direction}-baseline-#{$sizeName} {
    align-items: baseline;
  }

  > .cell-#{$direction}-stretch-#{$sizeName} {
    align-items: stretch;
  }
}

@mixin newGridCrossAlign($direction, $sizeName) {

  &.grid-#{$direction}-start-#{$sizeName} {
    align-items: flex-start;
  }

  &.grid-#{$direction}-end-#{$sizeName} {
    align-items: flex-end;
  }

  &.grid-#{$direction}-center-#{$sizeName} {
    align-items: center;
  }

  &.grid-#{$direction}-baseline-#{$sizeName} {
    align-items: baseline;
  }

  &.grid-#{$direction}-stretch-#{$sizeName} {
    align-items: stretch;
  }
}

@mixin newGridAlign($direction, $sizeName) {
  /* Container Align*/
  &.grid-#{$direction}-start-#{$sizeName} {
    justify-content: flex-start;
  }

  &.grid-#{$direction}-end-#{$sizeName} {
    justify-content: flex-end;
  }

  &.grid-#{$direction}-center-#{$sizeName} {
    justify-content: center;
  }

  &.grid-#{$direction}-space-between-#{$sizeName} {
    justify-content: space-between;
  }

  &.grid-#{$direction}-space-around-#{$sizeName} {
    justify-content: space-around;
  }
}

/*Odisseia Grid*/
@mixin gridDirection($size) {

  //align grid
  [class*="grid-direction-rows"] {
    @include newCellMainAlign(horizontal, $size);
    @include newCellCrossAlign(vertical, $size);
    @include newGridAlign(vertical, $size);
    @include newGridCrossAlign(horizontal, $size);
  }

  [class*="grid-direction-columns"] {
    @include newCellMainAlign(horizontal, $size);
    @include newCellCrossAlign(vertical, $size);
    @include newGridAlign(horizontal, $size);
    @include newGridCrossAlign(vertical, $size);
  }
  /* Container Directions */
  .grid-direction-rows-#{$size} {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .grid-direction-rows-reverse-#{$size} {
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  .grid-direction-columns-#{$size} {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .grid-direction-columns-reverse-#{$size} {
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
}

@mixin gridAlign($size) {
  /* Container Align*/
  .grid-#{$size}-main-align-start {

    justify-content: flex-start;
  }

  .grid-#{$size}-main-align-end {

    justify-content: flex-end;
  }

  .grid-#{$size}-main-align-center {

    justify-content: center;
  }

  .grid-#{$size}-main-align-space-between {

    justify-content: space-between;
  }

  .grid-#{$size}-main-align-space-around {

    justify-content: space-around;
  }

  .grid-#{$size}-cross-align-start {

    align-items: flex-start;
  }

  .grid-#{$size}-cross-align-end {

    align-items: flex-end;
  }

  .grid-#{$size}-cross-align-center {

    align-items: center;
  }

  .grid-#{$size}-cross-align-baseline {

    align-items: baseline;
  }

  .grid-#{$size}-cross-align-stretch {

    align-items: stretch;
  }
}

@mixin cellColumns($sizeName) {
  .cell-#{$sizeName}-1 {

    flex-basis: 8.333333333%;
    min-width: 8.333333333%;
  }

  .cell-#{$sizeName}-2 {

    flex-basis: 16.666666667%;
    min-width: 16.666666667%;
  }

  .cell-#{$sizeName}-3 {

    flex-basis: 25%;
    min-width: 25%;
  }

  .cell-#{$sizeName}-4 {

    flex-basis: 33.333333333%;
    min-width: 33.333333333%;
  }

  .cell-#{$sizeName}-5 {

    flex-basis: 41.666666667%;
    min-width: 41.666666667%;
  }

  .cell-#{$sizeName}-6 {

    flex-basis: 50%;
    min-width: 50%;
  }

  .cell-#{$sizeName}-7 {

    flex-basis: 58.333333333%;
    min-width: 58.333333333%;
  }

  .cell-#{$sizeName}-8 {

    flex-basis: 66.666666667%;
    min-width: 66.666666667%;
  }

  .cell-#{$sizeName}-9 {

    flex-basis: 75%;
    min-width: 75%;
  }

  .cell-#{$sizeName}-10 {

    flex-basis: 83.333333333%;
    min-width: 83.333333333%;
  }

  .cell-#{$sizeName}-11 {

    flex-basis: 91.666666667%;
    min-width: 91.666666667%;
  }

  .cell-#{$sizeName}-12 {

    flex-basis: 100%;
    min-width: 100%;
  }
}

@mixin cellAlign($sizeName) {
  .cell-#{$sizeName}-align-start {

    align-self: flex-start;
    text-align: start;
  }

  .cell-#{$sizeName}-align-end {

    align-self: flex-end;
    text-align: end;
  }

  .cell-#{$sizeName}-align-center {

    align-self: center;
    text-align: center;
  }

  .cell-#{$sizeName}-align-auto {

    align-self: auto;
  }

  .cell-#{$sizeName}-align-baseline {

    align-self: baseline;
  }

  .cell-#{$sizeName}-align-stretch {

    align-self: stretch;
  }
}

@mixin cellCrossAlign($sizeName) {
  .cell-#{$sizeName}-cross-align-start {

    align-items: flex-start;
  }

  .cell-#{$sizeName}-cross-align-end {

    align-items: flex-end;
  }

  .cell-#{$sizeName}-cross-align-center {

    align-items: center;
    justify-content: center;
  }

  .cell-#{$sizeName}-align-baseline {

    align-items: baseline;
  }

  .cell-#{$sizeName}-cross-align-stretch {

    align-items: stretch;
  }
}

.grid-full {
  width: 100%;
  height: 100%;
}

.grid--position-relative {
  position: relative;
}

.grid-full-h {
  height: 100%;
  max-height: 100%;
}

.grid-full-w {
  width: 100%;
}

.cell-scroll-vertical, .grid-scroll-vertical {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  overflow-x: hidden;
}

.cell-relative
{
  position: relative;
}

.cell-absolute
{
  position: absolute;
}


.z-index-2
{
  z-index: 2;
}

.z-index-1
{
  z-index: 1;
}


@mixin cellShrink() {
  @for $i from 1 through 12 {
    .cell-shrink-#{$i} {

      flex-shrink: $i !important;
    }
  }
}

@mixin cellGrow() {
  @for $i from 1 through 12 {
    .cell-grow-#{$i} {

      flex-grow: $i !important;
    }
  }
}

@include cellShrink();
@include cellGrow();

.cell-no-scroll {
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
}

.cell-scroll-horizontal {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  overflow-y: hidden;
}

.cell--position-absolute {
  position: absolute;
}

.grid {
  width: 100%;
  display: -moz-box;
  display: flex;
  //height: inherit;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

  &.grid-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  &.grid-wrap-reverse {
    -webkit-flex-wrap: wrap-reverse;
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
  }

  &.grid-nowrap {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}

@include gridDirection(sm);
@include gridAlign(sm);

@media #{$medium-up} {
  @include gridDirection(md);
  @include gridAlign(md);
}

@media #{$large-up} {
  @include gridDirection(lg);
  @include gridAlign(lg);
}

.cell {
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
  text-align: start;
  display: -moz-box;
  display: flex;
}

/* Cell Align*/
@include cellAlign(sm);
@include cellCrossAlign(sm);
@include cellColumns(sm);

/* Cell Responsive */
@media #{$medium-up} {
  @include cellAlign(md);
  @include cellCrossAlign(md);
  @include cellColumns(md);
}

@media #{$large-up} {
  @include cellAlign(lg);
  @include cellCrossAlign(lg);
  @include cellColumns(lg);
}

/* Cell Fixed With */

.cell.fix-width-8 {
  width: 8px;
  max-width: 8px;
}

.cell.fix-width-16 {
  width: 16px;
  max-width: 16px;
}

.cell.fix-width-32 {
  width: 32px;
  max-width: 32px;
}

.cell.fix-width-48 {
  width: 48px;
  max-width: 48px;
}

.cell.fix-width-56 {
  width: 56px;
  max-width: 56px;
}

.cell.fix-width-72 {
  width: 72px;
  max-width: 72px;
}

.cell-auto {
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
  max-height: 100%;
}

.cell-1-auto {
  -webkit-flex: 1 auto;
  -ms-flex: 1 auto;
  flex: 1 auto;
  min-height: 0;
}

.cell-1-1-auto {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.cell-1 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.cell-full-w {
  min-width: 100%;
}

.cell-full-h {
  height: 100%;
}

.vertical-align {
  display: flex;
  align-items: center;
}

.cell-no-shrink {
  flex-shrink: 0;
}

.cell-no-grow {
  flex-grow: 0;
}

.cell-order-1 {
  -ms-flex-order: 1;
  order: 1;
}

.cell-order-2 {
  -ms-flex-order: 2;
  order: 2;
}

/*#region Metrics and Spaces */

.w-xxs {
  width: 60px
}

.w-xs {
  width: 90px
}

.w-sm {
  width: 150px
}

.w {
  width: 200px
}

.w-md {
  width: 240px
}

.w-lg {
  width: 280px
}

.w-xl {
  width: 320px
}

.w-xxl {
  width: 360px
}

.w-full {
  width: 100%
}

.w-auto {
  width: auto
}

.h-auto {
  height: auto

}

.h-full {
  height: 100%;
  max-height: 100%;
  min-height: 100%;
}

.h-sm {
  min-height: 30px;
  max-height: 30px;
}

.h-md {
  min-height: 80px;
  max-height: 80px;
}

.h-lg {

}

// wrappers

.wrapper-xsm {
  padding: 5px
}

.wrapper-sm {
  padding: 10px
}

.wrapper {
  padding: 16px
}

.wrapper-md {
  padding: 20px
}

.wrapper-lg {
  padding: 30px
}

.wrapper-xl {
  padding: 50px
}


@mixin wraperSizes($media,$sizeDesc, $size) {
  .wrapper-#{$media}-#{$sizeDesc} {
    padding: $size;
  }
}

.margin-offset-t-100 {
  margin-top: -100%;
}

@include wraperSizes(sm, small, 10px);
@include wraperSizes(sm, medium, 20px);
@include wraperSizes(sm, large, 30px);
@media #{$medium-up}{
  @include wraperSizes(md, small, 10px);
  @include wraperSizes(md, medium, 20px);
  @include wraperSizes(md, large, 30px);
}

@media #{$large-up}{
  @include wraperSizes(lg, small, 10px);
  @include wraperSizes(lg, medium, 20px);
  @include wraperSizes(lg, large, 30px);
}

.b-a {
  border: 1px solid #dee5e7
}

.b-t {
  border-top: 1px solid #dee5e7
}

.b-r {
  border-right: 1px solid #dee5e7
}

.b-b {
  border-bottom: 1px solid #dee5e7
}

.b-l {
  border-left: 1px solid #dee5e7
}

.b-light {
  border-color: #edf1f2
}

.b-dark {
  border-color: #3a3f51
}

.b-black {
  border-color: #3a3f51
}

.b-primary {
  border-color: $color-primary;
}

.b-success {
  border-color: $color-success;
}

.b-info {
  border-color: $color-info;
}

.b-warning {
  border-color: $color-warning;
}

.b-danger {
  border-color: $color-danger;
}

.b-white {
  border-color: #fff
}

.b-dashed {
  border-style: dashed !important
}

.b-l-light {
  border-left-color: #edf1f2
}

.b-l-dark {
  border-left-color: #3a3f51
}

.b-l-black {
  border-left-color: #3a3f51
}

.b-l-primary {
  border-left-color: $color-primary;
}

.b-l-success {
  border-left-color: $color-success;
}

.b-l-info {
  border-left-color: $color-info;
}

.b-l-warning {
  border-left-color: $color-warning;
}

.b-l-danger {
  border-left-color: $color-danger;
}

.b-l-white {
  border-left-color: #fff
}

.b-l-2x {
  border-left-width: 2px
}

.b-l-3x {
  border-left-width: 3px
}

.b-l-4x {
  border-left-width: 4px
}

.b-l-5x {
  border-left-width: 5px
}

.b-2x {
  border-width: 2px
}

.b-3x {
  border-width: 3px
}

.b-4x {
  border-width: 4px
}

.b-5x {
  border-width: 5px
}

.no-border, .no-borders {
  border-color: transparent;
  border-width: 0;
}

/* Border Radius */
.r {
  border-radius: 2px 2px 2px 2px
}

.r-2x {
  border-radius: 4px
}

.r-3x {
  border-radius: 6px !important;

}

.r-l {
  border-radius: 2px 0 0 2px !important;
}

.r-r {
  border-radius: 0 2px 2px 0 !important;
}

.r-t {
  border-radius: 2px 2px 0 0 !important;
}

.r-b {
  border-radius: 0 0 2px 2px !important;
}

.no-radius {
  border-radius: 0;
}

/*Margins*/
.m-xxs {
  margin: 2px 4px !important;
}

.m-xs {
  margin: 5px !important;
}

.m-sm {
  margin: 10px !important;
}

.m {
  margin: 15px !important;
}

.m-md {
  margin: 20px !important;
}

.m-lg {
  margin: 30px !important;
}

.m-xl {
  margin: 50px !important;
}

.m-n {
  margin: 0 !important
}

.m-l-none {
  margin-left: 0 !important
}

.m-l-xs {
  margin-left: 5px !important;
}

.m-l-sm {
  margin-left: 10px !important;
}

.m-l {
  margin-left: 16px !important;
}

.m-l-md {
  margin-left: 24px !important;
}

.m-l-lg {
  margin-left: 30px !important;
}

.m-l-xl {
  margin-left: 40px !important;
}

.m-l-xxl {
  margin-left: 50px !important;
}

.m-t-none {
  margin-top: 0 !important
}

.m-t-xxs {
  margin-top: 1px !important;
}

.m-t-xs {
  margin-top: 5px !important;
}

.m-t-sm {
  margin-top: 10px !important;
}

.m-t {
  margin-top: 15px !important;
}

.m-t-md {
  margin-top: 20px !important;
}

.m-t-lg {
  margin-top: 30px !important;
}

.m-t-xl {
  margin-top: 40px !important;
}

.m-t-xxl {
  margin-top: 50px
}

.m-r-none {
  margin-right: 0 !important
}

.m-r-xxs {
  margin-right: 1px
}

.m-r-xs {
  margin-right: 5px
}

.m-r-sm {
  margin-right: 10px
}

.m-r {
  margin-right: 16px
}

.m-r-md {
  margin-right: 24px
}

.m-r-lg {
  margin-right: 30px
}

.m-r-xl {
  margin-right: 40px
}

.m-r-xxl {
  margin-right: 50px
}

.m-r-n-xxs {
  margin-right: -1px
}

.m-r-n-xs {
  margin-right: -5px
}

.m-r-n-sm {
  margin-right: -10px
}

.m-r-n {
  margin-right: -15px
}

.m-r-n-md {
  margin-right: -20px
}

.m-r-n-lg {
  margin-right: -30px
}

.m-r-n-xl {
  margin-right: -40px
}

.m-r-n-xxl {
  margin-right: -50px
}

.m-b-none {
  margin-bottom: 0 !important
}

.m-b-xxs {
  margin-bottom: 1px
}

.m-b-xs {
  margin-bottom: 4px
}

.m-b-sm {
  margin-bottom: 8px
}

.m-b {
  margin-bottom: 16px
}

.m-b-md {
  margin-bottom: 22px
}

.m-b-lg {
  margin-bottom: 34px
}

.m-b-xl {
  margin-bottom: 46px
}

.m-b-xxl {
  margin-bottom: 58px
}

/*#endregion */