/* Global styles; applied to all components */
:root{
  --form-controls-height: 2.75rem;
  /* greyscale */
  --charcoal: #464646;
  --gainsboro: #dedede;
  --dim-gray: #5e5e5e;
  --montana: #363b3b;
  --suva-grey: #8d8d8d;


  /* off-whites */
  --jagged-ice: #bfe2dd;
  --solitude: #eaeaef;

  /* greens */
  --fuego: #c1d730;
  --pine-green: #077675;
  --sea-nymph: #93b0ac;
  --dark-teal: #003234;
  --swamp: #001b1f;
  --william: #4d7071;
  --scandal: #b2dbd4;
  --viridian: #3e867a;

  /* purples */
  --toledo: #422735;
  --tyrian-purple: #17020d;
  --deep-koamaru: #343560;
  --loulou: #490a34;

  /* yellows */
  --pear: #cce335;

  /* reds */
  --venetian-red: #cd033a;
}

/* this might need to be defined a on more global level */
.form-wrapper  fieldset,.processing {
box-sizing: border-box;
    background: #f8f8f8;
    border-radius: 0.375rem 0.375rem 0 0;
    -moz-box-shadow: 0 0 0.375rem #ccc;
    box-shadow: 0 0 0.375rem #ccc;
    

    border: 1px solid #999;
    padding: 1rem 0.5rem 0.25rem; 
    margin-bottom: 1rem;
  }

.centered .form-problem-summary,
.centered fieldset,
.centered .form-footer,
.centered .processing {
   margin: 0 auto 1rem;
   max-width: 60rem;
}

/* processing animation for forms */
.processing {
   display:flex;
   flex-direction:column;
   align-items: center;
}


.processing .loading{
   padding-top:3rem;
   padding-bottom:3rem;
}
.processing .loading-text,
.processing .request-failure-text{
   font-size: 2rem;
}
.processing .loading:after {
        content: '';
        display:block;
        width: 3rem;
        height: 3rem;
        background: url('/wcl-american-edu/includes/themes/dp16/images/spinner.svg') no-repeat;
}


.form-wrapper fieldset legend {
    background: var(--solitude);
    border-radius: 0.375rem 0.375rem 0 0;
    -moz-box-shadow: 0 0 0.375rem #ccc;
    box-shadow: 0 0 0.375rem #ccc;
    font-size: 1rem;
    border: 1px solid #999;
    padding: 0.25rem 0.5rem;
    margin-left:0.2rem;
    color: #000;
}



.form-field-wrapper{
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-bottom: 1.25rem;
    padding: 0;
    
    
  }
  /* if the field is in a table no margins */
  td > .form-field-wrapper {
    margin-bottom: 0;
  }
  

  .form-field{
    display:flex;
    flex-direction: column;
  }

  /* the form controls take up the rest of the space */
  .field-control{
    width: 100%;
    max-width: 100%;
  }

  
  /* The label on the left/above the form field; fix the field-info width so all form field will line up. */
  .field-info{
    
    margin-right:1rem;
  }

  /* if it is a column label should not have an imposed width by css */
  th > .field-info{
      padding-left: 0.5rem; 
      max-width:auto; 
      min-width:auto;
      text-align: left;
    }

  .label, .table-field caption{
    font-size:1.125rem;
  }
  .question-help{
    color:dimgray;
    display: block;
    font-size: 0.9375rem;
  }

  .question-help-inline {
      margin-left: 1.5rem;
  }

  /* recommended form controls to set at least 2.75rem for easy use on touch devices. */
  input[type=text],input[type=checkbox],input[type=radio],input[type=button],.option-list > span{
    /* height: 2.75rem; 
    height: var(--form-controls-height);
    font-size:1rem;
*/
  }

  /* handle focus on input element */
  input[type=text]:focus{
    box-shadow: 1px 1px 2px 2px var(--gainsboro), -1px -1px 2px 2px var(--gainsboro);
    border-color: var(--dim-gray)  !important;
    outline: 1px solid var(--suva-grey);
  }

  /* this is just to fight other stlye sheets */
  .form-field input[type="search"], .form-field input[type="text"], .form-field input[type="email"], 
   .form-field input[type="password"], .form-field input[type="tel"], .form-field input[type="submit"], 
   .form-field input[type="number"], .form-field select, .form-field textarea {
    padding-left: 0.75rem;
    max-width: 100%;
    width:100%;
  } 

  /* some field are tiny enough to stay inline even on the smallest screens */
  .form-field input.dont-expand {

      width:inherit;

   }

  .form-field select{
    text-transform:none;
    padding-left: 0.75rem;
    font-size:1rem;
  }

  /* global modifiers for showing errors */

  .form-problem-summary {
    margin: 0.5rem;
    padding: 0.5rem;
  }
  


  .form-help {
      padding:0.5rem;
  }

  /* make the error status with .problem class so it does not collide with other style sheets */
  .form-field-wrapper.problem {
    border: 1px solid #D32F2F;
    background-color: #FFCDD2;
    padding: 0.5rem; /* make sure there is some space between the red border and the error message */
  }

  .field-status{
    display: none;
  }
  .problem .field-status{
    display: flex;
    align-items: center;
    
  }
  
  /* error icon */
  /* make sure if nested fields exists (e.g. table) they don't display problem unless it has problem class directly on its field-wrapper*/
  .problem > .field-status > .status-icon {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAwIDEwMDAiPg0KICA8cGF0aCBmaWxsPSIjRDMyRjJGIiBkPSJNNTAwIDk5MEMyMjkuOCA5OTAgMTAgNzcwLjIgMTAgNTAwUzIyOS44IDEwIDUwMCAxMHM0OTAgMjE5LjggNDkwIDQ5MC0yMTkuOCA0OTAtNDkwIDQ5MHptMC05MjkuNkMyNTcuNiA2MC40IDYwLjQgMjU3LjYgNjAuNCA1MDBjMCAyNDIuNCAxOTcuMiA0MzkuNiA0MzkuNiA0MzkuNiAyNDIuNCAwIDQzOS42LTE5Ny4yIDQzOS42LTQzOS42IDAtMjQyLjQtMTk3LjItNDM5LjYtNDM5LjYtNDM5LjZ6TTQyOS4zIDc0NmMwLTE5IDYuNy0zNSAyMC00Ny41IDE4LTE3IDM2LjQtMjUuNiA1NC44LTI1LjYgMjAuNCAwIDM3LjcgNyA1MiAyMS4zIDE0LjQgMTQuMyAyMS41IDMxLjggMjEuNSA1Mi4zIDAgMjAuOC02LjggMzguMi0yMC4zIDUyLjItMTMuNCAxNC0zMC41IDIxLTUxLjQgMjEtMjIgMC00MC03LjQtNTQuNS0yMi0xNC40LTE0LjgtMjEuNy0zMi0yMS43LTUyem05Ny0xMzJjLTkgLjYtMjUuMy0uMy00OC43IDBsLTM2LjQtMTY0LjJjLTEyLjctNjQtMjEuMy0xMTAuOC0yNS41LTE0MC0yLjItMTguMi0zLjItMzEuNy0zLjItNDAuNSAwLTIgLjgtNy40IDIuNS0xNiAxLjgtMTcuNiA4LjItMzAuNiAxOS41LTM5LjIgMTEuMy04LjMgMjcuMi0xMy4zIDQ3LjYtMTUgMTEuNy0xLjYgMTktMi40IDIyLjYtMi40IDIzLjQgMCA0MyA2IDU5IDE4IDE2IDExLjggMjQgMjguNyAyNCA1MC40IDAgMjAuMi0zLjMgNTQuNC0xMCAxMDIuM0w1NDkuOCA1MTBjLTcgNDEuMy0xNSA3Ny0yMy44IDEwNHoiLz4NCjwvc3ZnPg==");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 3rem 3rem;
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
  }


  .field-status .messages{
    align-items: center;
    list-style: none;
    margin-left: 0.5rem;
    padding: 0;
  }


  .problem .messages{
    color: #D32F2F;
    margin-bottom:0;
  }


  /* around 560px snap out of the 100% width; except textarea and select */
  @media screen and (min-width:35rem) {
  .form-field input[type="search"], .form-field input[type="text"], .form-field input[type="email"], 
   .form-fieldinput[type="password"], .form-field input[type="tel"], .form-field input[type="submit"], 
   .form-fieldinput[type="number"] {
    width:inherit;
    } 
    /* turn into multi-column field on the big screen only */
    .field-control.multi-column {
      display: flex;
    }
    /* Make sure columns take up even space; you might need to override this on your own CSS if you want different column width proportions */
    .field-control.multi-column > span {
      flex-grow: 1;
    }
    
  }


  /* 580px is the first break point which is 36.25rem given the 16px font size.

    Your break point might vary. Take a look at the widest control (in this case the textarea and start break as it goes out of the screen)
  */
  @media screen and (min-width:55rem) {
    .form-wrapper fieldset legend{
      font-size: 1.25rem;
    }
    /* turn into a row layout if stay-wide is NOT present */
    .form-field:not(.stay-wide){
      flex-direction: row;
    }

    /* main field labels should move to the left of the control unless .stay-wide is present */
    .form-field:not(.stay-wide) .field-info {
      max-width: 29rem; /* limit the left label so all fields line up */
      min-width: 29rem;
      text-align: right;
    }

    /* turn into multi-column field on the big screen only */
    .field-control.multi-column-lg {
      display: flex;
    }
    /* Make sure columns take up even space; you might need to override this on your own CSS if you want different column width proportions */
    .field-control.multi-column-lg > span {
      flex-grow: 1;
    }



    /* increase padding on bigger screens */
    .form-field-wrapper {
      margin-bottom: 1rem;
      padding: 0 0.5rem;
    
    }
    /* increase label size on bigger screens */
    .label, .table-field caption{
     font-size:1.25rem;
    }

    .table-field caption{
        border-bottom: 1px solid;
    }

   
    .question-help{
     font-size: 0.9375rem;
    }
    


  }





/* from text field */
  input{
    padding-left:0.5rem; 
    max-width: 100%;
    margin-right: 0.5rem;
    box-sizing: border-box;
  }
  .field-info{
    padding-top:0.5rem; 
  }


/* from the optionList */
  .option-list{
    /* border: 1px solid blueviolet; */
    
  }
  .option-list li{
    /* border: 1px solid greenyellow; */
    /* make sure options line up with the main label */
    padding: 0.75rem 0.25rem 0.25rem;
  }

  .option-list{
    
    list-style: none;
    padding: 0;
    margin:0;
  }
  /* horizontal class on option-list will render it in a row. Do not use flexbox for this */
  .option-list.horizontal li{
    /*flex-direction: row;*/
    float:left;
    /* make sure there is enough space after each options. e.g. x yes    x no*/
    margin-right: 1rem;
  }

  /* text boxes in the option list is for the other option */
  .option-list .other{
    display: inline-block;
    vertical-align: top;
  }

  /* move the label to cover the real radio/checkbox */
  .option-label{
    position: relative;
  }

  /* hide the actual input focus */
  .checkbox input, .radio input, .checkbox input:focus, .radio input:focus {
    outline: none;
    box-shadow: none;
  }

  /* make some space between the checkbox and label */
  /* requre label tag to wrap the checkbox/radio */
  label.option-label input[type=checkbox] {
    margin-right: 0.4rem;
  } 

  label.option-label input[type=radio] {
    margin-right: 0.4rem;
  } 


  /* unchecked checkbox; as the base */
  .checkbox-overlay {
    background-color:white;
    border: 0.0625rem solid;
    border-radius: 0.1875rem;
    height: 1.25rem;
    width: 1.25rem;
    display: inline-block;
    margin: 0 0.625rem 0 0.0625rem;
    /* outline: 1px solid;  */
    /* moving the checkbox down a little to be in line the the label */
    position: absolute;
    top: 0rem;
    left: -.2rem;
    cursor: pointer;
  }

  /* check the checkbox */
  .checkbox input[type=checkbox]:checked + .checkbox-overlay{
    outline-color: #bbb;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNjAwIj4NCiAgPHBhdGggZmlsbD0iIzA3NzY3NSIgZD0iTTcuNyA0MDQuNnMxMTUuMiAxMjkuNyAxMzguMiAxODIuNjhoOTljNDEuNS0xMjYuNyAyMDIuNy00MjkuMSAzNDAuOTItNTM1LjEgMjguNi0zNi44LTQzLjMtNTItMTAxLjM1LTI3LjYyLTg3LjUgMzYuNy0yNTIuNSAzMTcuMi0yODMuMyAzODQuNjQtNDMuNyAxMS41LTg5LjgtNzMuNy04OS44NC03My43eiIvPg0KPC9zdmc+");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
  }

/* unchecked radio; as the base */
  .radio-overlay {
    background-color:white;
    border: 0.0625rem solid;
    border-radius: 1rem;
    height: 1.25rem;  
    width: 1.25rem;
    display: inline-block;
    margin: 0 0.625rem 0 0.0625rem;
    /* outline: 1px solid;  */
    /* moving the checkbox down a little to be in line the the label */
    position: absolute;
    top: 0rem;
    left: -0.25rem;
    cursor: pointer;
  }

  /* check the radio */
  .radio input[type=radio]:checked + .radio-overlay {
    outline-color: #bbb;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj4NCiAgPGNpcmNsZSBmaWxsPSIjMDc3Njc1IiBjeD0iMTAwIiBjeT0iMTAwIiByPSI4MCIvPg0KPC9zdmc+");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
  }

  /* handle checkboxes focus */
  .checkbox input:focus + .checkbox-overlay {
    box-shadow: 1px 1px 2px 2px var(--gainsboro), -1px -1px 2px 2px var(--gainsboro);
    border-color: var(--dim-gray)  !important;
    border-width: 2px;
    outline:none;
    /* outline: 2px solid var(--suva-grey); */
  }

  /* handle radio focus */
  .radio input:focus + .radio-overlay {
    box-shadow: 1px 1px 2px 2px var(--gainsboro), -1px -1px 2px 2px var(--gainsboro);
    border-color: var(--dim-gray)  !important;
    border-width: 2px;
  
    /* outline: 2px solid var(--suva-grey); */
  }

/* table fields */
  .table-field{
     table-layout:fixed;
     border:0;  
  }
  
  /* make sure all cells look the same */
  .table-field .form-field-wrapper{
      padding:0;
  }
  
  .table-field td, .table-field th{
      /* add some space on the right on small screens */
      padding-right:0.25rem;
  }

  .table-field th, .table-field tfoot{
      font-weight:bold;
  
  }
  .table-field thead{
      border-bottom: 1px solid;
  }

  /* make sure to add some space at the bottom of the last row so the the footer line doesn't touch the last fields */
  .table-field tbody tr:last-child .form-field-wrapper {
      margin-bottom:0.25rem;
  }

  .table-field tfoot{
      border-top: 1px solid;
  }

  /* in the table the error messages has less space */
  .table-field .problem .status-icon{
      width: 2rem;
      min-width: 2rem;
      background-size: 1.75rem;
  }
  
  /* add some space to the end of error message so it does not hit the next cell. */
  .table-field .problem .messages{
      margin-right:0.25rem;
      margin-left:0;
  }
  
  /* add some space the top when an error occurs so it is clear which field the error belong */
  .table-field .form-field-wrapper.problem{
      margin-top:0.25rem;
  }

  /* make sure the table cell are horizontally aligned even when an error message makes the table cell taller. */
  .table-field tr {
      vertical-align: bottom;
  }

  /* make sure to match the form controls height for table cells with only text in them; only works if the text is always in a sigle line */
  .table-field .text-only-field {
      line-height: 2.5rem;
  }

  @media screen and (min-width:55rem) {
      .table-field td, .table-field th{
      /* add some space on the right on small screens */
          padding-right:0.5rem;
          padding-left:0.5rem;
      
      }
      
      .table-field th{
          padding-bottom: 0.125rem;
      }
      
  }

/* make sure textareas has a default height */
  .field-control textarea {
      min-height: 9rem;
      width: 100%;
  }

.field-control .horizontal-controls{
	display:flex;
	flex-wrap:wrap;
}
/* make sure the 3 part date field lines up with its label*/
.horizontal-controls.date{
	padding-top:0.5rem;
	flex-direction: row;
}
/* make sure the 3 part date field lines up with its label*/
.horizontal-controls .form-field-wrapper{
	margin-bottom:0;
}
/* make sure the individual horizontal fields line up vertically with the other fields. turn off padding on the first element*/
.field-control.horizontal>span:first-child .form-field-wrapper{
	padding-left: 0;
} 

/* add the above padding back if it has an error */
.field-control.horizontal>span:first-child .form-field-wrapper.problem {
	padding-left:0.5rem;
} 

/* horizontal fields under a checkbox or radio */
.option-list .additional-controls.horizontal,
.option-list .additional-controls.vertical{
	display:flex;
	margin-left:1.5rem;
} 
.option-list .additional-controls.vertical{
	flex-direction: column;
}

/* the extra controls under a checkbox/radio does not need space on the bottom */
.option-list .additional-controls .form-field-wrapper{
	margin-bottom:0;
}


/* make sure nested radio and checkbox group line up with their parent */
.option-list .additional-controls .form-field-wrapper.inline-radio-group,
.option-list .additional-controls .form-field-wrapper.inline-checkbox-group,
.option-list .additional-controls .form-field-wrapper.inline-textarea
{
	margin-left: 1.5rem;
}

@media screen and (min-width:55rem) {
    /* make sure nested radio and checkbox group line up with their parent on bigger screens */
    .option-list .additional-controls .form-field-wrapper.inline-radio-group,
    .option-list .additional-controls .form-field-wrapper.inline-checkbox-group,
    .option-list .additional-controls .form-field-wrapper.inline-textarea
     {
	margin-left: 1rem;
     }

}


/* reduce the error icon size */
.field-control.horizontal .problem > .field-status > .status-icon,
.table-card .problem > .field-status > .status-icon
{
	width: 2rem;
	height: 2rem;
	min-width: 2rem;
	background-size: 1.75rem;
}

/* make sure error line up with the reduced icon size */
.form-field-wrapper.inline .messages li{
  padding: 0rem;
}


/* table-card styling */
.table-card-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left:0;
  padding-left:0;
  list-style:none;
}

/* general for each table card */
.table-card{
	border: 1px dotted teal;
  padding: 1rem;
	margin: 1rem 0.5rem;
	max-width: 24rem;
	min-width: 21rem; /* could bleed out on mobile if increase this. */
}

/* table-card errors */
.table-card .problem .field-info {
    padding-top:0rem;
}
.table-card .problem .field-status {
    padding-top:0.25rem;
}

/* place the card number and the delete button evenly*/
.table-card-header{
	display:flex;
	align-items: center;
	justify-content: space-between;
}

/* table card textbox like controller are always 100% */
.table-card .form-field input[type="text"],.table-card .form-field input[type="email"], 
.table-card .form-fieldinput[type="password"],.table-card .form-field input[type="tel"],.table-card .form-field input[type="submit"], 
.table-card .form-fieldinput[type="number"] {
    width:100%;
}

.table-card-overlay{
	background-color: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5rem;
	width: 100%;
	height: 100%;
}

/* delete button on the table-card */
/*
.table-card-delete{
	float:right;
}*/

.table-card-delete > a {
	text-decoration: none;
}

.table-card-delete:not(.deletable) > a{
	display: none;
}


/* cover the last card with an overlay */
.table-card-overlay ~ div,.table-card-overlay ~ span{
	visibility: hidden;
}

@media screen and (min-width: 55rem){

	.table-card .form-field:not(.stay-wide) .field-info {
    max-width: 100%;
		width: 100%;
		min-width: initial;
    text-align:left;
	}

	.table-card .form-field:not(.stay-wide) {
    flex-direction: column;
	}

	.table-card .form-field-wrapper {
    margin-bottom: 0.5rem;
    padding: 0rem;
	}
}

/* fileupload progress loader */
.uploading{
	display: flex;
}
.uploading .loading{
	padding-top: 0.25rem;
	padding-bottom: 1rem;
}
.uploading .text{
	padding-top:0.75rem;
}
.uploading .loading:after{
	content: '';
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	background: url(/wcl-american-edu/includes/themes/dp16/images/spinner.svg) no-repeat;
}

/* list-pickers; checkbox and radio groups */
.list-picker ul.checkbox,
.list-picker ul.radio {
  display:flex;
  flex-wrap:wrap;
}

.list-picker .option-list-container {
  overflow-y: scroll;
  max-height: 12rem;
  border: 1px solid var(--suva-grey);
  padding-left: 0.5rem;
  width: auto;
}

.list-picker .selected-options-container ul {
  background-color: var(--suva-grey);
  color: white;
  list-style: none;
  padding-left: 0;
  min-height: 2rem;
  border-radius: 0.375rem 0.375rem 0 0;
  margin-bottom:0;
  margin-top: .25rem;
}

.list-picker .selected-options-container ul>li{
  padding-top:0.25rem;
  display: inline-block;
  margin-right: 0.5rem;
  margin-left: 0.5rem;  
  animation-duration: 300ms;
  animation-name: show-item;
}

@keyframes show-item {
  from {
    opacity: 0.0;
    color: var(--solitude);
  }

  to {
    opacity: 1.0;
    color: white;
  }
}