/* ########################################################################## --- GENERAL TAGS --- */

  html {
    font-family: Roboto, sans-serif;
    font-size: 17px;
    font-weight: normal;
  }

  body {
    color: #606060;
    padding: 0em;
    margin: 0em;
    background-color: #f5f5f5;
  }

  /*################################################################################################### --- tags --- */
  a {
    color: #455a64;
    text-decoration: none;
  }

  input{
    font-family: inherit;
    font-size: 1rem;
    margin: 0em;
    padding: 0.5em 1em;
    outline: none;
    border: none;
    color: inherit;
    background: #ffffff;
  }

  input[type="submit"]{
    background: #679DAA;
    border: none;
    color: #ffffff;
  }

  input[type="submit"]:hover{
    background: #fa424a;
  }

  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="date"],
  input[type="file"],
  input[type="password"],
  textarea,
  select {
    width: 100%;
    box-sizing: border-box;
    
    display: block;
    margin: 0em 0em 1em 0em;
    padding: 0.5em 1em;
    border: 1px solid #e4ecf0;
  }

  textarea{
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    background: #fff;
    outline: none;
    font-family: inherit;
    font-size: inherit;
    border: 1px solid #e4ecf0
  }

  select{
    padding: 0.5em 1em;
    font-family: inherit;
    font-size: 1em;
    color: inherit;
    background: #fff;
    border: 1px solid #e4ecf0;
    
    background-image: url("https://demojms.albtranslations.com/pub/images/arrow-dropdown.png");
    background-position: top 55% right 0.5em;
    background-repeat: no-repeat;
  }

  select option{
    font-size: inherit;
    color: inherit;
  }

  .button{
    display: inline-block;
    background: #679DAA;
    border: none;
    color: #fff;
    padding: 0.5em 1em;
    font-size: 1rem;
  }
  .button:hover{
    background: #fa424a;
  }

  ::-webkit-input-placeholder {
    opacity: 1;
    font-style: italic;
  }

  ::-moz-placeholder {
    opacity: 1;
    font-style: italic;
  }

  ::-ms-placeholder {
    opacity: 1;
    font-style: italic;
  }

  ::-webkit-input-placeholder {
    opacity: 1;
    font-style: italic;
  }

  :-ms-input-placeholder {
    opacity: 1;
    font-style: italic;
  }

  ::-ms-input-placeholder {
    opacity: 1;
    font-style: italic;
  }

  ::placeholder {
    opacity: 1;
    font-style: italic;
  }

  p{
    margin: 0em 0em 1em 0em;
    line-height: 1.3em;
  }

  ul {
    list-style-type: none;
    margin: 0em;
    padding: 0em;
  }

  h1{
    font-size:1.4em;
    margin: 1rem 0em 0em 0em;
  }

  h2{
    color: #455a64;
  }

  h3{
    font-size: 1.1em;
    margin: 0.5em 0em 0.5em 0em;
    color: #455a64;
  }

  table{
    border-collapse: collapse;
  }

  thead{
    background-color: #679DAA;
    color: #fff;
    text-align: left;
  }

  table td,
  table tr{
    border: 1px solid #dbdbdb;
  }

  table td,
  table th{
    padding: 0.5em 1em;
  }

  table tr:nth-child(2n){
    background-color: #DEEBEF;
  }

  .wrapper{
    background: #fff;
    padding: 1em;
    border-radius: 4px;
  }
  
  /* #####################################*/

  #breadcrumbs {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
    
    margin-bottom: 1rem;
  }

  #breadcrumbs a {
    padding: 0.5em;
  }

  #breadcrumbs a:not(:first-child)::before {
    content: "➤ ";
    color: #03a3d8;
  }

  #breadcrumbs a:hover {
    text-decoration: underline;
  }

  /* ########################################################################## --- FILTERS --- */

  #filters{
  font-size: 0.9em;
  }

  #filters > li{
    display: inline-block;
    padding-right: 1em;
    text-align: center;
    position: relative;
  }

  #filters select{
    border: none;
    background-image: none;
    padding: 0em;
  }

  /* ########################################################################## --- MAIN --- */

  main{
    position: relative;
    min-height: 80vh;
    padding: 0em 1em;
  }

  .boxed{
    max-width: 57rem;
    margin: 0em auto;
  }
  .jobConfirmation{
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .jobConfirmation img{
    margin-top: 1em;
  }

  #errors,
  #confirmation{
    margin: 1em 0em;
  }

  #errors{
    color: #fa424a;
  }

  #confirmation{
    color: #03a3d8;
  }

  /* ########################################################################## --- ADVANCED SEARCH --- */

  #advancedSearch{
    color: #5c5b5b;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 2em 0em;
    font-style: italic;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    
    padding: 0.3em 0em;
    margin: 1em 0em 1em 0em;
  }
  
  #advancedSearch input,
  #advancedSearch textarea,
  #advancedSearch select{
    width: 100%;
    margin-bottom: 0.4em;
  }
  
  #advancedSearch input[type=search],
  #advancedSearch select {
    /*border: 0.2em solid #C9DEE3;*/
    border: 0.2em solid #dae2e4;
  }
  
  #advancedSearch input[type=search]:hover{
    border: 0.2em solid #C9DEE3;
  }
  
  #advancedSearch select:hover {
    border: 0.2em solid #C9DEE3;
  }
  
  #advancedSearch input[type="submit"]{
    margin-bottom: 0em;
  }

  #advancedSearch #advancedSearchSubmit{
    padding: 0.5em 1em;
    font-weight: 500;
    margin-bottom: 0em;
  }

  #searchNoResult{
    color: #fa424a;
    font-weight: 500;
    background-color: #fa424a;
  }

  #searchNoResult,
  #confirmJob{
    width: 80%;
    position: relative;
    padding: 2em;
    border-radius: 1em;
    color: #fff;
  }

  #confirmJob{
    background: rgba(0, 180, 137, 0.6);
  }

  #confirmJob .arrow-down{
    border-top: 2.5em solid rgba(0, 180, 137, 0.6);
  }

  #searchNoResult .arrow-down{
    border-top: 2.5em solid #fa424a;
  }

  .arrow-down {
    width: 0;
    height: 0;
    border-left: 1.5em solid transparent;
    border-right: 1.5em solid transparent;
    
    border-top: 2.5em solid #ccc;
    
    position: absolute;
    bottom: -2.4em;
    
    right: 20%;
  }

  /* ########################################################################## --- QUESTIONS LIST --- */
  #filtersForm{
    text-align: center;
    border-bottom: 2px solid #E6E6E6;
    padding-bottom: 1em;
    margin-bottom: 1em;
    font-size: 0.8em;
  }

  #filtersForm select{
    border: none;
    padding: 0em;
    max-width: 6.2em;
  }

  #filtersForm option:not(:checked) { 
    background-color: #fff;
    color:inherit;
    padding: 1em;
    border: 1px solid #eee;
  }

  /* ########################################################################## --- QUESTIONS LIST --- */

  #questionsList > li{
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 1em 0em;
  }

  #questionsList > li:first-child{
    padding-top: 0em;
  }

  #questionsList > li:last-child{
    border: none;
  }

  #questionsList a{
    display: inline-block;
    font-size: 15px;
  }

  #questionsList > li div{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
  }

  .postListInformations{
    font-size: 0.8em;
    padding-top: 0.5em;
    font-style: italic;
  }

  .postListInformations i{
    color: #fcbcb4;
  }

  .postListInformations > li{
    display: inline-block;
    padding-right: 1em;
  }

  #questionsList .publication{
    width: 12%;
    text-align: right;
    display: none;
  }

  #questionsList .publication a{
    background: #82c6af;
    padding: 0.2em 0.5em;
    border-radius: 4px;
    font-size: 0.7em;
    color: #fff;
  }

  #questionsList .questCategory{
    width: 18%;
    text-align: center;
    display: none;
  }

  #questionsList .questCategory span{
    background: #cad182;
    font-size: 0.7em;
    color: #fff;
    padding: 0.2em 0.5em;
    border-radius: 9px;
  }

  #questionsList .questAnswer{
    min-width: 2em;
    text-align: right;
    padding-left: 2em;
    display: none;
  }

  #questionsList .questAnswer:hover a{
    text-decoration: none;
  }

  #questionsList .questAnswer i{
    color: #d182ca;
    font-size: 0.9em;
  }

  #questionsList .subscribe{
    display: none;
    padding-left: 2em;
    color: #AFB2B3;
    cursor: normal;
  }

  #questionsList .subscribe:hover{
  color: #d1b182;
  }

  /* ########################################################################## --- ANSWERS PAGE--- */


  #addJobForm select{
    width: 100%;
    margin-bottom: 1em;
  }

  #answersList > li{
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0.5em 1em;
    border-top: 0.05em solid #eee;
  }

  #addAnswerForm{
    background: #E6E6E6;
    padding: 1em;
    margin-top:1em;
  }

  .answNr{
    color: #337ab7;
  }

  #addAnswerForm textarea{
    margin-bottom: 0em;
  }

  /* ########################################################################## --- REQUEST PAYMENTS --- */

  #requestPayment{
    margin: 2em 0em;
    text-align: center;
  }

  /* ########################################################################## --- PAGINATION --- */

  #pagination{
    margin: 1em 0em;
    text-align: center;
  }

  #pagination li{
    display: inline-block;
    margin: 0em 0.5em;
  }

  #pagination > li > a,
  .currentPage{
    display: block;
    width: 1em;
    padding: 0.5em;
    
    font-size: 0.9em;
    color: #82C3D1;
    line-height: 1em;
    border: 1px solid #eee;
    
  }

  #pagination > li:hover > a,
  .currentPage{
    background: #82C3D1;
    color: #fff;
  }

  .currentPage{
    cursor: default;
  }

  /* ########################################################################## --- INSTRUCTIONS --- */

  #instructionImg{
    text-align: center;
    margin-top: 1em;
  }

  #instructionImg img{
    width: 80%;
  }

  #colorCodes {
    max-width: 15em;
    
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;
  }

  #colorCodes > * {
    box-sizing: border-box;
    flex: 0 0 50%;
    margin: 0.2em 0em;
    overflow: hidden;
  }

  #colorCodes > *:nth-child(2n) {
    border: 0.01em solid #ccc;
  }
  
  #colorCodeOpen {
    background-color: #dae2e4;
  }
  
  #colorCodeAssigned {
    background-color: #fff1b5;
  }

  #colorCodeCompleted {
    background-color: #f7b733;
  }

  #colorCodeConfirmed {
    background-color: #cae4db;
  }
  
  /* ########################################################################## --- VIEW JOBS --- */

  #jobDetails{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
  }

  #jobDetails > li{
    padding: 0.5em 2em 0em 0em;
    font-size: 0.9em;
    color: #838080;
  }

  #jobDetails > li.postedDate {
    margin-right: auto;
  }

  #jobDetails > li.postedAttachments,
  #jobDetails > li.completedAttachments {
    flex: 1 1 100%;
    padding-right: 0em;
  }

  #jobDetails > li.postedAttachments a:hover,
  #jobDetails > li.completedAttachments a:hover {
    text-decoration: underline;
  }

  #jobDetails > li a{
    color: #838080;
  }

  #jobDetails > li .fa{
    color: #00b489;
  }

  #jobDetails + * {
    margin-top: 1em;
  }
  
  #adminPanel a {
    text-decoration: underline;
  }
  
  #adminPanel > li{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    
    margin: 1em 0em;
    
    border: 1px solid #e4ecf0;
    border-radius: 4px;
    
    background-color: #ffffff;
  }

  #adminPanel > li.myJobsLi {
    margin: 0em;
    border: none;
    border-bottom: 0.1em solid #fff;
  }

  #adminPanel > li.myJobsLi .mainRightJobInfo {
    background-color: #dae2e4;
  }

  .mainRightJobInfo{
    background-color: #dae2e4;
    font-size: 0.9em;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-content: stretch;
  }

  .mainRightJobInfo > li{
    flex: 1 1 auto;
    line-height: 2em;
    
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
  }

  .mainRightJobInfo.stackedTop > li {
    flex: 0 1 4em;
  }

  .mainRightJobInfo > li .fa{
    color: #00b489;
  }

  .mainRightJobInfo > li.jobAssigned i.fa {
    margin-right: 0.5em;
  }

  .mainRightJobInfo > li.jobUnassigned {
    font-weight: bold;
    color: #fff;
    background-color: #00b489;
  }

  .mainRightJobInfo #editDeleteBtn{
      padding-top: 1em;
  }
  
  .mainJobInfo {
    flex: 1 1 auto;
    padding: 1em;
  }
  
  .mainJobInfo.open {
    background-color: #dae2e4;
  }
  
  .mainJobInfo.assigned {
    background-color: #fff1b5;
  }

  .mainJobInfo.completed {
    background-color: #f7b733;
  }

  .mainJobInfo.confirmed {
    background-color: #cae4db;
  }

  #jobDescription {
    margin: 2em 0em;
  }
  
  .deadline{
    color: #fa424a;
    font-style: italic;
    font-size: 0.8em;
  }
  
  /* ########################################################################## --- USERS PAGE --- */
  
  body.USERS_PAGE > main {
    max-width: 70em;
  }
  
  #addUserCont {
    display: flex;
  }
  
  #addUserBtn {
    display: inline-block;
    margin: 0em 0em 1em auto;
    padding: 0.5em 1em;
    border: 0.1em solid #679DAA;
    border-radius: 0.2em;
    color: #ffffff;
    background-color: #679DAA;
  }
  
  #usersTable .phoneNumber,
  #usersTable td:last-of-type {
    text-align: center;
  }
  
  #usersTable td:last-of-type span {
    padding: 0.2em;
  }
  
  #usersTable i {
    font-size: 1.2em;
  }
  
  .deleteIcon {
    color: #ff0000;
  }
  
  .deletedUser {
    color: #afa9a9;
    background: #eae8e8;
  }
  
  .deletedUser i.fa-user {
    color: #cacaca;
  }
  
  /* ########################################################################## --- ADD USER PAGE --- */
  
  #addUserForm,
  #editUserForm {
    margin-top: 1em;
  }
  
  .requiredFields {
    margin-left: 0.5em;
    color: #ff0000;
  }
  
  /* ########################################################################## --- FOOTER --- */

  footer{
      background-color: #6b6b6b;
    font-size: 0.8em;
    
    -webkit-box-sizing: border-box;
    
    box-sizing: border-box;
    margin-top: 2em;

  }
  footer ul{
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
  }

  footer ul li{
      flex: 1 1 auto;
      display: inline-block;
      padding: 1.5em 1.5em 1.5em 1.5em;
  }

  footer ul li:last-child{
      padding-right: 0em;
  }

  footer a,
  footer p{
    text-decoration: none;
    color: #fff;
    margin: 0em;
  }
  #footerSocialMedia a{
      font-size: 1em;
      padding: 0em 0em 0em 1em;
      
  }
  /* ########################################################################## --- RESPONSIVE DESIGN --- */

  @media screen and (min-width: 600px) {
    
    header h1,
    header p{
      display: block;
    }
    
    #questionsList > li{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: start;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }
    
    #questionsList > li div{
      -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
    }
    
    #questionsList .questListLeft{
      text-align: justify;
      padding-right: 1em;
      width: 75%;
    }
    
    #pageContainer{
      padding: 2em;
    }
    
    footer ul{
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
    }
  }

  @media screen and (min-width: 800px) {
    
    .wrapper{
      padding: 1em 1.5em;
      text-align: justify;
    }
    
    #advancedSearch{
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
      margin: 3em 0em 2em 0em;
    }
    
    #advancedSearch input,
    #advancedSearch textarea,
    #advancedSearch select{
      margin: 0em 1em 0em 0em;
    }
    
    #questionsList .publication,
    #questionsList .questAnswer,
    #questionsList .subscribe{
      display: block;
    }
    
    #advancedSearch input[type="submit"]{
      width: auto;
      margin-right: 0em;
    }
    
    #advancedSearch select {
      width: 50%;
    }
    
    #filtersForm{
      text-align: left;
    }
    
    #questionsList > li:first-child{
      padding-top: 1em;
    }
    
    .mobileAnswers{
      display: none !important;
    }
    
    .jobConfirmation{
      margin-top: 5em;
    }
    
    .mainRightJobInfo{
      flex: 0 0 10rem;
    }
    
    #adminPanel > li{
      flex-flow: row nowrap;
    }
  }