﻿body.modal-open > .wrap {
  overflow: hidden;
  height: 100%;
}
.modal-content,
.modal-dialog,
.modal-body {
  height: inherit;
  min-height: 100%;
}
.modal {
  min-height: 100%;
}
.modal-tyre-size-options .modal-body h1,
.modal-tyre-size-options .modal-body h2,
.modal-tyre-size-options .modal-body h3,
.modal-tyre-size-options .modal-body h4,
.modal-tyre-size-options .modal-body h5 {
  color: #333;
}
.modal-tyre-size-options .tyre-size-options--show-alternatives {
  /*color: @kf-blue-dark;*/
  font-size: 16px;
  cursor: pointer;
}
.modal-tyre-size-options .tyre-size-options--show-alternatives:hover {
  color: #666;
  text-decoration: none;
}
.modal-tyre-size-options .tyre-size-options--select-tyre-size select {
  margin-bottom: 6px;
}
.modal-tyre-size-options .tyre-size-option--holder {
  margin: 12px 0px 12px 0px;
  border-left: 4px solid #EEE;
}
@media (min-width: 768px) {
  .modal-tyre-size-options .tyre-size-option--holder {
    margin: 12px 24px 12px 24px;
    border-left: 4px solid #EEE;
    padding: 6px 18px 6px 18px;
  }
}
.modal-tyre-size-options .btn-tyre-size-option {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  padding: 6px;
  border-radius: 0px;
  cursor: pointer;
  width: 100%;
  border: 1px solid #FFF;
}
.modal-tyre-size-options .tyre-size-option--rim {
  order: 1;
  flex-basis: 100%;
}
.modal-tyre-size-options .tyre-size-option--icon {
  order: 2;
  flex-basis: 100%;
}
.modal-tyre-size-options .btn-tyre-size-option {
  flex-wrap: nowrap;
  text-transform: none !important;
}
.modal-tyre-size-options .tyre-size-option--rim {
  flex-basis: 50px;
  order: 1;
  align-self: center;
  text-align: center;
  font-size: 18px;
}
@media (min-width: 768px) {
  .modal-tyre-size-options .tyre-size-option--rim {
    flex-basis: 80px;
    font-size: 28px;
  }
}
.modal-tyre-size-options .tyre-size-option--sizes {
  flex-grow: 1;
  order: 2;
  border-left: 1px dotted #FFF;
  border-right: 1px dotted #FFF;
  padding: 6px;
}
.modal-tyre-size-options .tyre-size-option--sizes .tyre-size-option--size-row .tyre-size-option--size {
  text-align: left;
}
.modal-tyre-size-options .tyre-size-option--sizes .tyre-size-option--size-row .tyre-size-option--size .tyre-size-option--tyre-size {
  font-size: 14px;
}
@media (min-width: 450px) {
  .modal-tyre-size-options .tyre-size-option--sizes .tyre-size-option--size-row .tyre-size-option--size .tyre-size-option--tyre-size {
    font-size: 16px;
  }
}
.modal-tyre-size-options .tyre-size-option--sizes .tyre-size-option--size-row .tyre-size-option--size .tyre-size-option--tyre-details {
  font-size: 11px;
}
@media (min-width: 450px) {
  .modal-tyre-size-options .tyre-size-option--sizes .tyre-size-option--size-row .tyre-size-option--size .tyre-size-option--tyre-details {
    font-size: 12px;
  }
}
@media (min-width: 450px) {
  .modal-tyre-size-options .tyre-size-option--sizes .tyre-size-option--size-row {
    display: flex;
  }
  .modal-tyre-size-options .tyre-size-option--sizes .tyre-size-option--size-row .tyre-size-option--size {
    flex: 1;
    width: 100%;
  }
}
.modal-tyre-size-options .tyre-size-option--icon {
  flex-basis: 50px;
  order: 3;
  align-self: center;
  text-align: center;
  font-size: 18px;
}
@media (min-width: 768px) {
  .modal-tyre-size-options .tyre-size-option--icon {
    flex-basis: 80px;
    font-size: 28px;
  }
}
.modal-tyre-size-options .btn-tyre-size-options--tyre-size-select {
  margin-bottom: 12px;
}
.tyre-size-options .tyre-size-option--holder {
  margin: 12px 0px 12px 0px;
  border-left: 4px solid #EEE;
  padding: 3px 9px 3px 9px;
}
@media (min-width: 768px) {
  .tyre-size-options .tyre-size-option--holder {
    margin: 12px 24px 12px 24px;
    border-left: 4px solid #EEE;
    padding: 6px 18px 6px 18px;
  }
}
.tyre-size-options .btn-tyre-size-option {
  display: flex;
  align-items: center;
  clear: both;
}
.tyre-size-options .btn-tyre-size-option .tyre-size-option--rim {
  font-size: 18px;
  font-weight: bold;
}
@media (min-width: 768px) {
  .tyre-size-options .btn-tyre-size-option .tyre-size-option--rim {
    font-size: 28px;
  }
}
.tyre-size-options .btn-tyre-size-option .tyre-size-option--separator {
  width: 2px;
  margin-left: 3px;
  margin-right: 3px;
  border-left: 1px dotted #FFF;
  align-self: stretch;
}
@media (min-width: 768px) {
  .tyre-size-options .btn-tyre-size-option .tyre-size-option--separator {
    margin-left: 12px;
    margin-right: 12px;
  }
}
.tyre-size-options .btn-tyre-size-option .tyre-size-option--front {
  margin-right: 3px;
  text-align: left;
}
@media (min-width: 768px) {
  .tyre-size-options .btn-tyre-size-option .tyre-size-option--front {
    margin-right: 12px;
  }
}
.tyre-size-options .btn-tyre-size-option .tyre-size-option--rear {
  margin-right: 3px;
  text-align: left;
}
@media (min-width: 768px) {
  .tyre-size-options .btn-tyre-size-option .tyre-size-option--rear {
    margin-right: 12px;
  }
}
.tyre-size-options .btn-tyre-size-option .tyre-size-option--tyresize {
  font-size: 12px;
  text-align: left;
}
@media (min-width: 768px) {
  .tyre-size-options .btn-tyre-size-option .tyre-size-option--tyresize {
    font-size: 14px;
  }
}
.tyre-size-options .btn-tyre-size-option .tyre-size-option--tyredetails {
  font-size: 10px;
  text-align: left;
}
@media (min-width: 768px) {
  .tyre-size-options .btn-tyre-size-option .tyre-size-option--tyredetails {
    font-size: 12px;
  }
}
.tyre-size-options .btn-tyre-size-option .tyre-size-option--icon {
  font-size: 14px;
  font-weight: bold;
}
@media (min-width: 768px) {
  .tyre-size-options .btn-tyre-size-option .tyre-size-option--icon {
    font-size: 20px;
  }
}
.tyre-size-options .btn-tyre-size-option.btn-tyre-size-option {
  margin-bottom: 3px;
}
@media (min-width: 768px) {
  .tyre-size-options .btn-tyre-size-option.btn-tyre-size-option {
    margin-bottom: 12px;
  }
}
/*
<button class="btn btn-danger btn-tyre-size-option">
	<div class="tyre-size-option--rim pull-left">{RIM}"</div>
	<div class="tyre-size-option--separator pull-left"></div>
	<div class="tyre-size-option--front pull-left">
		<div class="tyre-size-option--tyresize">{FRONTTYRESIZE}</div>
		<div class="tyre-size-option--details">{FRONTTYREDETAILS}</div>	
	</div>
	<div class="tyre-size-option--rear pull-left">
		<div class="tyre-size-option--tyresize">{REARTYRESIZE}</div>
		<div class="tyre-size-option--details">{REARTYREDETAILS}</div>
	</div>
	<div class="tyre-size-option--icon pull-right"><i class="fa fa-chevron-right"></i></div>
</button>
*/