/*
    separate file for easier reuse on mobile device
    this is supposed to hold styles for custom controls and alpaca templates
*/

/*

*/
.alpaca-display.alpaca-top > h4 {
	display:none;
}

div.formAnchor legend.alpaca-container-label {
}
div.formAnchor div.tlmd-container-description  {
	font-weight: bold;
	margin-bottom:10px;
}
	

/* allow map panning through the visor/cross hair elements */

div.locPickerMainContainer div.visor {
    pointer-events: none;
}

div.mapContainer {
    height: 300px;
    width: 450px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px;
}

div.durationForm {
    width: 230px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

div.durationForm {
    transition-property: border-color, box-shadow;
    transition-timing-function: ease-in-out;
    transition-duration: .15s;
}

div.durationForm input.hours {
    max-width: 76px;
}

div.durationForm input.minutes {
    max-width: 76px;
}

div.durationForm input.noBSBorder {
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}
div.durationForm input.form-control {
    display: inline-block;
}

/* custom wizard header for longer questionnaires */

div.alpaca-wizard-nav.compact div.customHolder {
    white-space: nowrap;
}

div.alpaca-wizard-nav.compact div.customHolder > div.title {
    display: inline-block;
    padding-right: 4px;
}

div.alpaca-wizard-nav.compact li {
    background: #fff;
    padding: 2px 6px;
    font-size: 16px;
    color: #40505B;
}

/* step we did not advance to yet */
div.alpaca-wizard-nav.compact li.disabled {
    color: #d8d8d8;
}

/* step we can go back to */
div.alpaca-wizard-nav.compact li.visited {
    color: #000;
}

/* the current step */
div.alpaca-wizard-nav.compact li.active {
    color: rgba(27, 94, 140, 0.9);
}

/* image upload */
div.thumbnailContainer {
    width: 100px;
    height: 75px;
    cursor: pointer;
    border:1px dashed black;
    display: flex;
    align-items: center;
}

div.thumbnailContainer > div {
    width:100%;
}

div.thumbnailContainer span.placeholder {
    font-size: 34px;
    color: rgba(0, 0, 0, 0.8)
}



/* long wizard styles for space saving */

div.long-wizard > div.alpaca-field > .alpaca-wizard .alpaca-wizard-nav li div.holder  {
    padding: 4px 14px 4px 14px;
}


div.long-wizard > div.alpaca-field > .alpaca-wizard .alpaca-wizard-nav li div.holder div.title {
    font-size: 14px;
}

div.long-wizard > div.alpaca-field > .alpaca-wizard .alpaca-wizard-nav li div.holder div.description {
    display: none;
}

div.long-wizard >  div.alpaca-field > .alpaca-wizard .alpaca-wizard-nav li div.chevron {
    right: -18px;
    border: 14px solid transparent;
    border-left: 7px solid #d4d4d4;
}

div.long-wizard >  div.alpaca-field > .alpaca-wizard .alpaca-wizard-nav li div.chevron:before {
    top: -14px;
    right: -13px;
    border: 14px solid transparent;
    border-left: 7px solid #fcfcfc;
}
/* style for rendering tlmd-horizontal-edit*/
.alpaca-edit .alpaca-field-object.tlmd-horizontal > .alpaca-container{
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:stretch;
}
.alpaca-edit .alpaca-field-object.tlmd-horizontal > .alpaca-container > .alpaca-container-item {
  flex-grow: 1.0;
  margin-top: 0px;
  margin-right:3px;
}

.alpaca-edit .alpaca-field-object.tlmd-horizontal.tlmd-hide-1 > .alpaca-container > .alpaca-container-item:nth-of-type(1){
  display:none;
}
.alpaca-edit .alpaca-field-object.tlmd-horizontal.tlmd-hide-2 > .alpaca-container > .alpaca-container-item:nth-of-type(2){
  display:none;
}
.alpaca-edit .alpaca-field-object.tlmd-horizontal.tlmd-hide-3 > .alpaca-container > .alpaca-container-item:nth-of-type(3){
  display:none;
}
.alpaca-edit .alpaca-field-object.tlmd-horizontal.tlmd-hide-4 > .alpaca-container > .alpaca-container-item:nth-of-type(4){
  display:none;
}
.alpaca-edit .alpaca-field-object.tlmd-horizontal.tlmd-hide-5 > .alpaca-container > .alpaca-container-item:nth-of-type(5){
  display:none;
}
.alpaca-edit .alpaca-field-object.tlmd-horizontal.tlmd-hide-6 > .alpaca-container > .alpaca-container-item:nth-of-type(6){
  display:none;
}

.alpaca-edit .alpaca-field-object.tlmd-tight{
	padding:0;
}
.alpaca-edit .alpaca-field-object.tlmd-tight > legend, .alpaca-edit .alpaca-field-object.tlmd-tight > p.alpaca-helper{
  display:none;
}
.alpaca-edit .alpaca-field-object.tlmd-tight > .alpaca-container > .alpaca-container-item > .form-group {
  margin-bottom:0;
}

/* style for rendering multi-select checkbox fields in a grid instead of a list*/

div.alpaca-field-checkbox.tlmd-grid{
}

div.alpaca-field-checkbox div.checkbox-flex-container {
	display: flex;
	flex-direction:row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:stretch;
}

.alpaca-edit div.alpaca-field-checkbox.tlmd-grid  div.alpaca-control.checkbox{
  flex-grow: 1.0;
  flex-basis: 30%;
  margin-top: -5px;
  margin-right:3px;
}
.alpaca-edit div.alpaca-field-checkbox.tlmd-grid  div.alpaca-control.checkbox > input{
  display:none;
}

.alpaca-edit div.alpaca-field-checkbox.tlmd-grid  div.alpaca-control.checkbox > input + label{
  width:100%;
  height:100%;
}

.alpaca-display div.alpaca-field-checkbox.tlmd-grid  div.alpaca-control.checkbox{
  margin: 0;
}
.alpaca-display div.alpaca-field-checkbox.tlmd-grid  div.alpaca-control.checkbox > label{
	padding: 0 5px;
  display:inline-block;  
  margin:0 3px 3px 0;
  white-space: nowrap;
}

div.alpaca-field-checkbox.tlmd-grid  div.alpaca-control.checkbox > label,
div.alpaca-field-checkbox.tlmd-grid  div.alpaca-control.checkbox > input + label{
  border-radius: 4px;
  background-color:var(--btn-color-tlmd-default-0);
  border-color:var(--btn-color-tlmd-default-0);
  color: var(--btn-color-tlmd-default-fg-0);
}
div.alpaca-field-checkbox.tlmd-grid  div.alpaca-control.checkbox:hover >  input + label{
  background-color: var(--btn-color-tlmd-default-2);
  border-color: var(--btn-color-tlmd-default-4);
  color:var(--btn-color-tlmd-default-fg-1);
}
div.alpaca-field-checkbox.tlmd-grid  div.alpaca-control.checkbox > input:checked + label{
  background-color:var(--color-tlmd-selected);
  border-color:var(--color-tlmd-selected);
  color: var(--color-tlmd-selected-fg);
}
div.alpaca-field-checkbox.tlmd-grid  div.alpaca-control.checkbox:hover >  input:checked + label{
  background-color:var(--btn-color-tlmd-default-2);
  border-color:  var(--btn-color-tlmd-default-4);
  color: var(--btn-color-tlmd-default-fg-1);
}
	

a.legal {
  text-decoration: underline;
}