.hast-container, 
.hast-row {
    clear: both;
}

.hast-container .hast-row .hast-cell {
    float: left;
}

.hast-container .hast-row .hast-cell.col1 { width: 100%; }
.hast-container .hast-row .hast-cell.col2 { width: 50%; }
.hast-container .hast-row .hast-cell.col3 { width: 33.33%; }
.hast-container .hast-row .hast-cell.col4 { width: 25%; }
.hast-container .hast-row .hast-cell.col5 { width: 20%; }

@media (max-width: 480px) {
    .hast-container .hast-row .hast-cell,
    .hast-container .hast-row .hast-cell.col1,    
    .hast-container .hast-row .hast-cell.col2,    
    .hast-container .hast-row .hast-cell.col3,    
    .hast-container .hast-row .hast-cell.col4,    
    .hast-container .hast-row .hast-cell.col5
    {
        float: none;
        width: 100%;
    }
}


.hast-clear { clear: both; }

div.hast-toolbar {
    float: right;
    /*margin: 10px 0;*/
}

div.hast-toolbar > * {
    float: left;
    margin-left: 10px;
}

div.hast-buttons button, button.actionbutton {
        margin-left: 5px;
        /*border: dotted 1px gray;*/
/*        border-top: solid 1px lightgray;
        border-left: solid 1px lightgray;
        border-bottom: solid 1px gray;
        border-right: solid 1px gray;*/
        background: #f0f0f0;  
        /*padding: 4px;*/
        cursor: pointer;
        /*border-radius: 3px;*/
        height: 28px;
}

div.hast-buttons select {
        margin-left: 5px;
        border: solid 1px gray;
/*        border-top: solid 1px lightgray;
        border-left: solid 1px lightgray;
        border-bottom: solid 1px gray;
        border-right: solid 1px gray;*/
        background: #f0f0f0;  
        padding: 4px;
        cursor: pointer;
        /*border-radius: 3px;*/
        height: 28px;
}

div.hast-buttons button:hover, button.actionbutton:hover {
    background: #f5f5f5;
}

div.hast-buttons button:focus {
    outline: 0;
}

div.hast-buttons button:active, button.actionbutton:active  {
    border: solid 1px gray;
/*        border-top: solid 1px black;
        border-left: solid 1px black;
        border-bottom: none; // solid 1px lightgray;
        border-right: none; //solid 1px lightgray;*/
}

/*div.hast-toolbar > * {
    float: right;
}*/

div.hast-buttons input[type="text"]
{
    border: solid 1px gray;
    min-height: 4ex;
    padding: 0;
    margin: 0;
    width: auto;
    min-height: 26px;
    /*margin-right: 10px;*/
}

.hast-label label { font-weight: bold; }

.hast-sticky { z-index: 15; opacity: 0.9; }

/*.hast-buttons-small button { padding: 0px; margin: 0;}*/

/*.hast-toolbar { margin-top: 0px;}*/

/*.hast-toolbar > * { margin-top: 0px; margin-bottom: 0px; margin-left: 0; margin-right: 10px; padding: 0;}*/

/*.hast-toolbar:first-child { margin-bottom: 10px; }*/


.hast-inputbar select,
.hast-inputbar input
{ 
    width: auto;
}

.hast-inputbar .hast-cell.fullwidth {
    width: 100%;
}

.hast-inputbar .hast-cell.fullwidth select,
.hast-inputbar .hast-cell.fullwidth input
{ 
    box-sizing: border-box;
    height: 4ex;
    width: 100%;
}

.hast-buttons button { min-height: 4.3ex; }


.x-columns-flex {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

.x-columns-flex.margin_bottom {
  margin-bottom: 20px;
}

.x-columns-flex.margin_top {
  margin-top: 20px;
}

.x-columns-flex.x-separators div[class*="x-column-"] {
    border-top: dashed 1px gray;
    border-bottom: dashed 1px gray;
    padding: 15px;
/*      +min-screen(700px)
        border-left: dashed 1px $red-base
      +max-screen(699px)
        border-top: dashed 1px $red-base
        padding-left: 0*/
    box-sizing: border-box;
    /*padding-left: 15px;*/
}

.x-columns-flex div[class*="x-column-"] input,
.x-columns-flex div[class*="x-column-"] textarea
{
    width: 100%;
}

.x-columns-flex div[class*="x-column-"] input[type='file']{
    width: 85%;
}


.x-columns-flex div[class*="x-column-"] h3 {
    margin-top: 0;
}

.x-columns-flex div[class*="x-column-"]:first-child {
    border-left: none;
    padding-left: 0;
}

.x-columns-flex.x-separators .x-column-3 {
    border-bottom: dashed 1px gray!important;
}

@media (min-width: 700px) {
    .x-columns-flex.x-separators div[class*="x-column-"] {
        border-left: dashed 1px gray;        
    }
}

@media (min-width: 700px) {
    .x-columns-flex.x-separators div[class*="x-column-"] {
        border-top: dashed 1px gray;
        /*padding-left: 0;*/
    }
}

@media (min-width: 1024px) {
    .x-columns-flex .x-column-1 { width: 100%; }
    .x-columns-flex .x-column-2 { width: 50%!important; }
    .x-columns-flex .x-column-3 { width: 33%!important; }
    .x-columns-flex .x-column-4 { width: 25%!important; }
    .x-columns-flex .x-column-5 { width: 20%!important; }

    .x-columns-flex .x-column-2:nth-child(3),
    .x-columns-flex .x-column-3:nth-child(4) {
        border-left: none!important;
        padding-left: 0px!important;
    }
    .x-columns-flex .x-column-3:nth-child(n+4) {
        width: 50%!important;
        border-top: none;
    }
}

@media (min-width: 700px) and (max-width: 1023px) {
    .x-columns-flex .x-column-3 {    
        width: 50%!important;
    }
    .x-columns-flex .x-column-3:nth-child(2n+1) {    
        border-left: none!important;
        padding-left: 0!important;
    }
    .x-columns-flex .x-column-3:last-child {    
        width: 100%!important;
    }
    .x-columns-flex .x-column-5 {
      width: 25%!important
    }   
}

@media (max-width: 699px) {
    .x-columns-flex .x-column-3 {    
        padding-left: 0!important;
        border-top: none!important;
    }
    .x-columns-flex .x-column-4 {    
        width: 50%!important;
    }
}