/* Start Responsive layout */
.access2016 {
   border: none;
}

#main {
   max-width: 1010px;
   margin: auto;
   padding: 0 5px;
}

.flex-container-tijdvak {
   display: flex;
   flex-direction: column;
}
.flex-tijdvak-1 {
   flex: 37%; 
   padding: 1px;
}
.flex-tijdvak-2 {
   flex: 37%; 
   margin: 0 auto;
   padding: 1px;
}
.flex-tijdvak-3 {
   flex: 24%; 
   margin: 0 auto;
   padding: 1px;
}

.flex-container-saldo {
   display: flex;
   flex-direction: column;
   margin-left: 50px !important;
}
.flex-saldo-1 {
   margin-bottom: 5px;
}
.flex-saldo-2 {
}

/* rapportage, verwerken */

.flex-rapportage-left td {
   padding-left: 5px;
}

.flex-rapportage-right td {
   padding-left: 5px;
}

.flex-rapportage-left table {
   width: 280px; 
   height: 85px;
   border: 1px solid rgb(190, 190, 190); 
}

.flex-rapportage-right table {
   width: 280px; 
   height: 85px;
   border: 1px solid rgb(190, 190, 190); 
}

.flex-container-rapportage {
   display: flex;
   flex-direction: row;
}
.flex-rapportage-left {
   width: 300px; 
   padding: 10px;
}
.flex-rapportage-right {
   width: 300px; 
   padding: 10px;
}
.flex-rapportage-left tr {
   height: 28px;
}
.flex-rapportage-left td {
   padding-left: 5px;
}

.flex-rapportage-right td {
   padding-left: 5px;
}

.flex-rapportage-left table {
   width: 280px; 
   height: 85px;
   border: 1px solid rgb(190, 190, 190); 
}

.flex-rapportage-right table {
   width: 280px; 
   height: 85px;
   border: 1px solid rgb(190, 190, 190); 
}

.flex-container-rapportage2 {
   display: flex;
   flex-direction: row;
}

.flex-rapportage2-left {
   width: 140px;
}
.flex-rapportage2-right {
   
}

/* email popup */
.flex-container-mail {
   display: flex;
   flex-direction: row;
}
.flex-mail-left {
   width: 120px; 
   padding: 1px 10px;
}
.flex-mail-right {
   width: 100%; 
   padding: 1px 10px 7px;
}
.flex-mail-left div {
   xpadding-left: 30px;
}

.flex-container-errors {
   display: flex;
   flex-direction: row;
   font-size: 12px;

}
.flex-errors-1 .flex-errors-2 .flex-errors-3 .flex-errors-4{
   flex: 25%;   
}

.flex-container {
   padding-left: 50px;
   padding-right: 50px;
   display: flex;
   flex-direction: row;
   line-height: 32px;
}
.flex2-item-left {
   padding-right: 50px;
   flex: 55%;
}
.flex2-item-right {
   flex: 45%;
}
.flex2-item-left .jqx-checkbox-office {
   padding-bottom: 11px;
}

.flexTax-item-left {
   flex: 30%;
}
.flexTax-item-middle {
   flex: 30%;
}
.flexTax-item-right {
   flex: 40%;
}
.flexTax-item-left .jqx-checkbox-office,
.flexTax-item-middle .jqx-checkbox-office {
   padding-bottom: 11px;
}

.flex-container-grid,
.flex-container-grid-mutaties {
   padding-left: 50px;
   padding-right: 50px;
   display: flex;
   flex-direction: row;
}
.flex2-grid-left {
   margin: 6px 0 2px 0;
   width: 120px;
   flex-grow: 0;
   flex-shrink: 0;
}
.flex2-grid-right {
   width: 100%;
}

.flex3-item-left {
   flex: 34%;
}
.flex3-item-center {
   flex: 33%;
   align-self: flex-end;   /* hadnmatif svb dagloon */
}
.flex3-item-right {
   flex: 33%;
}

/*toekomstige tijdvakken + alleen handmatig*/
.flex-container-checkbox {
   display: flex;
   flex-direction: row;
}
.flex-checkbox-left {
}
.flex2-check-right {
}

/* geboorteland + geslacht */
.flex50-container {
   display: flex;
   flex-direction: row;
}
.flex50-item-left {
   flex: 55%;
}
.flex50-item-right {
   flex: 45%;
}
.flex50-item-right table {
   float: right;
}
.flex50-item-right #geslachtLabel {
   width: 120px;
}

.looncodedropdown{
   display: initial;
}

.footer {
   height: 50px;
}

@media (min-width: 900px) {

   .ribbonItemFlex {
      height: 72px !important;
   }

   .ribbonItemFlex img {
      position: absolute !important;
      top: 10.5px !important;
   }
   .ribbonItemFlex span {
      position: absolute !important;
      top: 48px !important;
   }

   .space {
      height: 50px;
   }
   
}

@media (max-width: 1000px) {
   
   .flex-container-grid-mutaties {
      flex-direction: column;
   }

   .flex50-container {
      flex-direction: column;
   }
   .flex50-item-right table {
      float: left;
   }
}

/*tablet*/
   
@media (max-width: 900px) {

   .access2016 {
      border: none;
      box-shadow: none;
      margin: 0px;
   }

   .looncodedropdown {
      display: none;
   }

   .buttonSeparator {
      display: none;
   }
   .sectionSeparator_hrm{
      height:  52px !important;
   }
   .ribbonItemFlex {
      height: 36px !important;
      width: 36px !important;
   }
   .ribbonItemFlex img {
      position: absolute !important;
      top: 2px !important;
      left: 2px !important;      
   }
   .ribbonItemFlex span {
      visibility: hidden;
   }
   .flex-container-tijdvak {
      flex-direction: row;
   }
   .tijdvakItem {
      display: none;
   }

   .space {
      height: 400px;
   }

   .flex-container {
      padding-left: 5px;
      padding-right: 5px;
   }
   
   .jqx-checkbox-office {
      line-height: 21;
   }
   
   .flex-container-grid,
   .flex-container-grid-mutaties {
      padding-left: 5px;
      padding-right: 5px;
   }  
   .hline {
      margin: 10px 3px 10px 3px !important;
   }  
   .flex-container-saldo {
      margin-left: 4px !important;
   }
}

@media (max-width: 700px) {
   
   .flex-container-grid {
      flex-direction: column;
   }
   
   .flex-container-saldo {
      flex-direction: row;
   }
   .flex-saldo-1 {
      flex: 0 0 50px; 
      margin-top: 8px;
   }
   .flex-saldo-2 {
      flex: 0 0 80px; 
      margin-top: 5px;
   }
   
   .flex-container-mail {
      flex-direction: column;
   }
   .flex-container-errors {
      flex-direction: column;
   }
   .flex-container-rapportage {
      flex-direction: column;
   }  
   .flex-container-rapportage2 {
      flex-direction: column;
   }
   .flex-container-verwerken {
      flex-direction: column;
   }

   .flex-container {
      flex-direction: column;
      line-height: 24px !important;
   }
   
   .flex2-item-left .jqx-checkbox-office {
      padding-bottom: 0;
   }

   .flex2-item-left {
      padding-right: 0;
   }
   
   .flex2-grid-left {
     display: none;
   }
   .flex3-item-center {
      align-self: unset;   /* hadnmatif svb dagloon */
   }

}

/*mobile*/

@media (max-width: 500px) {

   .groep_bestand {
      display: none;
   }

   .flex-container-checkbox {
      flex-direction: column;
   }

}

@media (max-width: 360px) {

   .groep_toevoegen {
      display: none;
   }
   
   .mv {
      display: none !important;      
   }

}