body,
.js{
  .block-system-main-block{
    float: inherit;
    width: 100%;
    max-width: $custom_row_width;
    margin: 0 auto;
    padding: 0 0 5px 0;
    background-color: $col_12;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    @include breakpoint($tab_mini, true){
       padding: 10px;
     }
    @include breakpoint($tab, true){
       padding: 20px;
     }
    @include breakpoint($desk_mini, true){
       padding: 40px;
     }
  }
#main-content{
  padding: 0 5px;
  @include breakpoint($desk_margin, true) {
      display: block;
      padding: 0;
    }
  }
// body style on mobile for table
.inlblock,
.form-type-date{
  display: inline-block!important;
}
//select button for EI
select::-ms-expand {
   display: none;
}

.field--name-title input{
  font-size: 20px!important;
}
.file-size{
  display: block;
  margin: 10px 0;
}
details{
  color: $col_4;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  margin: 10px 0;
  font-weight: normal;
  summary,
  legend{
    font-weight: normal!important;
  }
  summary{
    a,
    span{
      color: $col_4;
    }
  }
  .form-type-checkbox{
     //margin: 0 10px;
  }
}
// Descriptions fields (under paragraph, image, file or fields).
 ul.tips,
 div.description,
 .form-item .description,
 em{
   color: $col_1!important;
   font-size: 12px;
   font-weight: 400;
   line-height: 15px;
   letter-spacing: 0.2px;
   opacity: 0.8;
  }

 //Cursor style in text form and date form.
.form-text,
.form-date{
  cursor: text;
}

// When input is focused colored line is adding to input (focus-line).
.focus-line{
  display: block;
  width: 0;
  height: 1px;
  margin-top: -1px;
  background-color: $col_5;
  }

 // /admin/structure/forum page buttons
.action-links li{
 margin: 5px auto;
}

// /admin/config/search/pages button
.container-inline.form-wrapper{
  input.button.form-submit{
    display: block;
  }
}
// Content page , hide add content button.
#block-agnian-material-admin-local-actions{
 li a[data-drupal-link-system-path="node/add"]{
    display: none;
  }
 }
// admin/structure/webform/templates page buttons
 .webform-filter-form input[type="submit"].button,
 .webform-filter-form .form-select{
    margin: 10px 5px;
 }

// /admin/appearance page button
form{
  #edit-actions{
    margin: 30px 0;
    input{
     margin: 0;
    }
  }
}
// Select buttons.
.form-type-select.form-item,
.form-type-language-select,
.form-item-operation.form-no-label.form-item{
  //display: inline-block;
  margin: 0 20px 10px 0;
  .form-select:not(.chosen-container){
    width: 100%;
    max-width: 220px;
    padding: 4px 1.571em 4px 0.5em;
    border:solid rgb(169, 169, 169);
    border-width: 1px 0;
    border-radius: 0;
    cursor: pointer;
    background: url(../../agnian_material_admin/images/downicon.png) no-repeat 97% 55%;
    color: $col_4;
    font-size: 16px;
    text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    -webkit-font-smoothing: antialiased;
    &:hover{
      background-color: inherit;
      box-shadow: none;
     }
    &:focus{outline: none;}
   }
 }

// or word admin/structure/types/manage/page/fields/add-field
.form-item-separator.form-item{
   display: inline-block;
   width: 30%;
   margin: 30px 0 30px 80px!important;
   font-size: 16px;
  }
// Checkbox style.
.checkboxed:before{
    margin-left: 2px;
    height: 10px!important;
    border-color: $col_5!important;
    border-top-style: none!important;
    border-right-style: none!important;
    opacity: 1!important;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
.dischbox:before{
  border-color: $col_15!important;
  opacity: 0.26!important;
}
.checkbox.form-type-checkbox{
  max-width: 30px;
  &:before{
     top: 4px;
     left: 10px;
   }
 }
.form-type-checkbox.form-no-label{
   &:before {
    top: 10px;
    left: 4px;
    }
  }
.form-type-checkbox{
  position: relative;
  top: 0;
  right: 0;
  //display: inline-block;
  width:  auto;
  min-height: 24px;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0!important;
  font-size: 16px!important;
  font-weight: normal;
  cursor: pointer;
  &:before {
    content: "";
    position: absolute;
    top: 6px;
    //left: 4px;
    width: 16px;
    height: 16px;
    border: 2px solid $col_15;
    pointer-events: none;
    opacity: 0.54;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
      }
    label{
      //margin-left: 10px!important;
      }
    input[type="checkbox"]{
        width: 30px;
        height: 18px;
        padding: 0;
        vertical-align: middle;
        line-height: normal;
        box-sizing: border-box;
        cursor: pointer;
        opacity: 0;
     }
  }
  .form-item-required,
  .form-item-translatable{
    display: block;
  }
// Radio buttons
.form-radios{
  .form-type-radio{
   position: relative;
   input[type="radio"]{
     width: 30px;
     height: 18px;
     margin-top: 4px;
     opacity: 0;
     }
     &:before{
      content: "";
      position: absolute;
      top: 6px;
      left: 2px;
      z-index: 1;
      width: 20px;
      height: 20px;
      border: 2px solid $col_15;
      border-radius: 50%;
      pointer-events: none;
      opacity: 0.54;
      -webkit-transition: all 0.15s ease-in-out;
      -o-transition: all 0.15s ease-in-out;
      transition: all 0.15s ease-in-out
     }
     &:after {
      content: "";
      position: absolute;
      top: 11px;
      left: 7px;
      z-index: 1;
      width: 0;
      height: 0;
      background-color: $col_5;
      border-radius: 50%;
      -webkit-transition: all 0.15s ease-in-out;
      -o-transition: all 0.15s ease-in-out;
      transition: all 0.15s ease-in-out;
     }
  }
.radioboxed:before{
  border-color: $col_5;
  opacity: 1;
 }
.radioboxed:after{
  width: 10px;
  height: 10px;
 }
}
input[type="radio"]{
  width: 30px;
  height: 18px;
  margin-top: 4px;
}
// Content page content(node) types on top (icon menu)
#node-types-list-cont{
 margin-top: 0;
 background-color: $col_11;
 .more-btn{
   position: relative;
   display: block;
   min-width: 24px;
   padding-right: 24px;
   margin: 14px 0;
   color: $col_12;
   font-size: 13px;
   font-weight: 700;
   text-align: right;
   text-transform: uppercase;
   opacity: 0.8;
   cursor: pointer;
   &:after{
    content: "expand_more";
    position: absolute;
    top: -2px;
    right: -5px;
    display: inline-block;
    overflow: hidden;
    width: 30px;
    height: 30px;
    color: $col_12;
    font-family: 'Material Icons';
    font-style: normal;
    font-size: 22px;
    word-wrap: normal;
    word-break: normal;
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga" 1;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }
    &.less{
     &:after{
       top: -9px;
       right: -10px;
       -webkit-transform: rotate(180deg);
       transform: rotate(180deg);
    }
  }
  @include breakpoint($desk, true){
         margin-top: -20px;
    }
  }
 .more-btn:hover,
 .more-btn:active,
 .more-btn:focus{
    outline: none;
    opacity: 1;
 }
 .cut{
   height: auto!important;
   }
   .holder{
    padding: 30px 12px;
    @include breakpoint($desk-margin, true){
      padding: 50px 0 30px;
      text-align: inherit;
      li:nth-child(6n+6){
        margin: 0 -3px 20px 0!important;
       }
     }
      > .node-types-list,
      ul{
        overflow: hidden;
        height: 190px;
        padding: 0;
        margin: 0 auto;
        text-align: center;
        @include breakpoint($gt_phone, true) {
          margin: 0;
          text-align: inherit;
         }
        @include breakpoint($tab, true){
           height: 142px;
            }
         li{
            display: inline-block;
            overflow: hidden;
            margin: 0 18px 20px 0;
            vertical-align: top;
             a{
              position: relative;
              display: -webkit-box;
              display: -moz-box;
              display: -ms-flexbox;
              display: -webkit-flex;
              display: flex;
              width: 110px;
              height: 80px;
              color: $col_12;
              font-size: 24px;
              text-decoration: none;
              align-items: center;
              justify-content: center;
              @include breakpoint($tab, true){
                width: 156px;
                height: 125px;
              }
              @include breakpoint($desk, true){
                width: 176px;
              }
              .title,
               a{
                  padding: 4px;
                  font-size: 18px;
                  text-align: center;
                  line-height: 18px;
                  overflow-wrap: break-word;
                  word-wrap: break-word;
                  -ms-word-break: break-all;
                  word-break: break-word;
                  //-ms-hyphens: auto;
                  //-moz-hyphens: auto;
                  //-webkit-hyphens: auto;
                  //hyphens: auto;
                  @include breakpoint($tab, true) {
                    font-size: 24px;
                    padding: 6px;
                    line-height: 26px;
                   }
                }
              }
           }
       }
    }
    &.actv{
      position: relative;
      z-index: 1001;
      margin: 0!important;
     .holder{
       padding-top: 0!important;
       .cut{
           overflow: visible!important;
           //max-height: 410px;
        }
       }
      .overlay-close-btn{
            width: 100%;
            height: 36px;
          > .close-btn{
              @include close_btn(30px, 30px, 2px, $col_12);
          }
       }
    }
   .node-types-list{
     li:nth-child(13n+1) {
       background-color: #f44336;
      }
    li:nth-child(13n+2) {
        background-color: #673ab7;
      }
    li:nth-child(13n+3) {
        background-color: #03a9f4;
      }
    li:nth-child(13n+4) {
        background-color: #4caf50;
      }
    li:nth-child(13n+5) {
          background-color: #9c27b0;
        }
    li:nth-child(13n+6) {
          background-color: #ff5722;
        }
    li:nth-child(13n+7) {
          background-color: #607d8b;
        }
    li:nth-child(13n+8) {
          background-color: #e91e63;
        }
    li:nth-child(13n+9) {
        background-color: #3f51b5;
      }
    li:nth-child(13n+10) {
        background-color: #00bcd4;
      }
    li:nth-child(13n+11) {
        background-color: #8bc34a;
      }
    li:nth-child(13n+12) {
        background-color: #ffc107;
      }
     li:nth-child(13n+13) {
        background-color: #795548;
      }
    }
 }

// Structure open page, structure types.
#structure-types-list-cont{
   //display: none!important;
   @include breakpoint($tab, true) {
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     display: block;
     overflow-x: hidden;
     overflow-y: auto;
     width: 180px;
     padding-top: 66px;
     background-color: $col_12;
     border-right: 1px solid rgba(0,0,0,0.12);
     ul{
      margin: 0;
      li{
         margin-top: 26px;
         list-style: none;
         a{
           padding-left: 20px;
           margin-top: 16px;
           color: $col_4;
           border-left: solid 4px transparent;
           font-size: 14px;
           font-weight: 500;
           text-transform: capitalize;
          }
          li{
             margin-left: 24px;
           }
          li.menu-item--active-trail{
            a{
             border-left-color: $col_5;
             color: $col_5;
            }
          }
       }
     }
    .menu-item--active-trail >a,
     ul >li:hover >a, ul>li > a.is-active{
         color: $col_5;
         border-left-color: $col_5;
       }
    }
  @include breakpoint($desk-mini, true) {
       width: 240px;
     }
 }
.strcmain{
   display: block;
   width: 100%;
   padding-left: 0;
   vertical-align: top;
   @include breakpoint($tab, true) {
      padding-left: 180px!important;
  }
  @include breakpoint($desk-mini, true) {
      padding-left: 240px!important;
  }
  .holder{
    padding-right: 40px;
    padding-left: 40px;
    .button--small{
       margin: 0;
       background: none;
       box-shadow: none;
       border: 1px solid transparent;
       color: $col_5;
       font-size: 14px;
       font-weight: 500;
     }
    .button--small:hover,
    .button--small:focus{
        color: $col_12;
      }
    }
  }
.trnsp{
  padding: 2px 2px 20px;
  background-color: transparent;
  box-shadow: none;
  }
  .admin-list{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    li{
      display: inline-block;
      width: 100%;
      max-width: 373px;
      margin: 10px auto;
      background-color: $col_12;
      border: none;
      border-radius: 2px;
      box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
      vertical-align: top;
      -webkit-flex: 1 0 auto;
      flex: 1 0 auto;
      @include breakpoint($tab_mini, true){
         max-width: 49%;
         flex: 1 0 49%;
         &:nth-child(odd){
          margin: 10px 10px 0 0;
        }
        &:nth-child(even){
          margin: 10px 0 0 0;
        }
      }
      @include breakpoint($desk_mini, true){
         max-width: 32%;
         flex: 1 0 32%;
         &:nth-child(odd) {
           margin: 16px 13px 0 0;
        }
        &:nth-child(even) {
           margin: 16px 13px 0 0;
        }
      }
    a{
      display: table;
      width: 100%;
      height: 96px;
      padding: 0;
      background: none;
      line-height: 25px;
      text-decoration: none;
      span,
      label{
        display: inline-block;
        width: 100%;
        padding: 20px 24px;
        vertical-align: middle;
        border-bottom: 1px solid rgba(0,0,0,0.12);
        color: $col_1;
        font-weight: inherit;
        font-size: 24px;
        line-height: 32px;
        text-transform: capitalize;
        cursor: pointer;
        &:after{
          content: "chevron_right";
          position: absolute;
          top: 18px;
          left: 87%;
          display: inline-block;
          overflow: hidden;
          width: 34px;
          height: 34px;
          color: $col_1;
          font-family: 'Material Icons';
          font-size: 34px;
          text-rendering: optimizeLegibility;
          font-feature-settings: "liga" 1;
          font-style: normal;
          text-transform: none;
          line-height: 1;
          word-wrap: normal;
          word-break: normal;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          @include breakpoint($desk, true) {
             left: 90%;
           }
        }
      }
      span:hover,
      label:hover,
      span:active,
      label:active{
        text-decoration: none;
      }
     div,
    .description{
       color: $col_4!important;
       padding: 30px 24px;
       font-size: 15px;
       line-height: 20px;
     }
    }
   a:hover,
   a:active{
     text-decoration: none;
   }
  }
  li:hover,
  li:active,
  li:focus,
  li:hover span,
  li:active span,
  li:focus span{
     text-decoration: none;
  }
  @include breakpoint($desk, true){
    li:nth-child(3n){
        margin: 18px 0 0 0;
      }
    }
  }
//}

.layout-column{
  .panel{
    padding: 0;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
    background-color: $col_12;
    border: none;
    border-radius: 2px;
    >h3{
      padding: 32px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
      color: $col_5;
      font-size: 18px;
      line-height: 18px;
      font-weight: 500;
     }
    .admin-list{
      li{
        position: relative;
        width: 100%;
        max-width: 100%;
        margin: 0;
        flex: auto;
        box-shadow: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
        a{
          padding: 0 32px;
          span{
            padding: 24px 0;
            margin: 0;
            border: none;
            color: $col_1;
            font-size: 20px;
            line-height: 20px;
           }
          .description{
            padding: 0 0 24px;
            margin: 0;
          }
        }
      }
    }
  }
}
// Overlay on content page after clicking content button.
#overlay{
  position: fixed;
  top: 78px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: none;
  background-color: rgba(0, 0, 0, .8);
  .overlay-close-btn{
    width: 100%;
    height: 40px;
    > .close-btn{
      @include close_btn(30px, 30px, 2px, $col_12);
      top: 5px;
      right: 5px;
    }
  }
}

// Content button in content page, visible after scroliing, it opens overlay with content types adding buttons (icon menu).
#content-add-btn{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 110;
  display: none;
  width: 56px;
  height: 56px;
  background-color: red;
  border-radius: 50%;
  cursor: pointer;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
  -webkit-transition: -webkit-box-shadow 0.15s ease-out;
  -moz-transition: -moz-box-shadow 0.15s ease-out;
  -o-transition: -o-box-shadow 0.15s ease-out;
  transition: box-shadow 0.15s ease-out;
  -webkit-transition-duration: 0.25s;
  -webkit-transition-duration: 0.25s;
  -moz-transition-duration: 0.25s;
  -o-transition-duration: 0.25s;
  transition-duration: 0.25s;
  &:after{
    content: '+';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    color: $col_12;
    font: 700 20px/56px $roboto;
    text-align: center;
  }
}
#content-add-btn:hover,
#content-add-btn:focus,
#content-add-btn:active{
  outline: 0;
  -webkit-box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.38);
  box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.38);
}
// Modules page
.system-modules,
.system-modules-uninstall,
.update-manager-update-form{
  div,
  summary,
  span,
  details,
  ul li{
    padding-left: 0;
    color: $col_1;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    white-space: normal;
 }
 div:hover,
 summary:hover,
 span:hover,
 details:hover,
 ul li:hover,
 div:active,
 summary:active,,
 span:active,,
 details:active,,
 ul li:active,
 div:focus,
 summary:focus,
 span:focus,
 details:focus,
 ul li:focus{
   background: inherit;
   text-decoration: none;
}
label,
.module-name{
   z-index: -100;
   margin: 0;
   color: $col_4;
   font-size: 14px;
   line-height: 20px;
  }
.table-filter{
  padding-bottom: 30px;
 }
.bootstrap-switch-container{
  background: transparent!important;
  input[type='checkbox']{
    width: 50px!important;
    height: 30px;
    margin-top: -4px;
    margin-left: 0!important;
    outline: 0;
    cursor: pointer;
    }
  }
}
 .update-manager-update-form{
   .select-all{
     div{
       display: none;
     }
    }
   .select-all:after,
   .select-all:before{
       display: none;
     }
  }
.system-modules,
.update-manager-update-form{
  .form-type-checkbox{
   .bootstrap-switch.bootstrap-switch-mini{
     position: relative;
     overflow: visible;
     border: none;
     //box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
     background: transparent;
     box-shadow: none;
     text-shadow: none;
     word-break: normal;
     word-wrap: normal;
     &:after{
      content: '';
      position: absolute;
      top: 4px;
      left: 0;
      z-index: -50;
      display: inline-block;
      width: 36px;
      height: 14px!important;
      background: $col_15;
      box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
      border-radius: 25px;
      border: none;
      color: transparent!important;
      line-height: 16px;
      text-shadow: none;
      opacity: 0.5;
      -webkit-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
      transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     }
    .bootstrap-switch-handle-on {
      width: 0!important;
      border: none;
      background: transparent;
      background-image: none;
      box-shadow: none;
      color: transparent!important;
      text-shadow: none;
       }
    .bootstrap-switch-label {
        position: relative;
        z-index: 1000;
        display: inline-block;
        width: 24px!important;
        height: 24px;
        padding: 0;
        vertical-align: middle;
        border-radius: 25px;
        border: none;
        border-color: transparent;
        background: #aaaaaa;
        background-image: none;
        text-shadow: none;
        -webkit-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
      }
    .bootstrap-switch-handle-off{
        width: 0!important;
        background-image: none;
        background: transparent;
        color: transparent!important;
        text-shadow: none;
      }
     }
   .bootstrap-switch.bootstrap-switch-on >.bootstrap-switch-container{
      background: transparent;
      .bootstrap-switch-label{
        background: $col_5;
        opacity: 1;
      }
    }
  .bootstrap-switch-disabled{
      cursor: default;
      >.bootstrap-switch-container >.bootstrap-switch-label{
         background: #e0e0e0!important;
         opacity: 1!important;
      }
    }
  .bootstrap-switch-on:after{
     background: $col_5!important;
     opacity: 0.6!important;
     transform: none;
   }
  .bootstrap-switch-disabled:after{
     background: $col_15!important;
     opacity: 0.1!important;
    }
  }
 .form-type-checkbox:after,
 .form-type-checkbox:before{
    display: none;
  }
 }
.system-modules-uninstall{
  .form-type-checkbox{
   .bootstrap-switch.bootstrap-switch-mini{
     position: relative;
     overflow: visible;
     //box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
     background: transparent;
     box-shadow: none;
     border: none;
     text-shadow: none;
     word-break: normal;
     word-wrap: normal;
     &:after{
      content: '';
      position: absolute;
      top: 4px;
      left: 0;
      z-index: -50;
      display: inline-block;
      width: 36px;
      height: 14px!important;
      background: $col_5;
      box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
      border-radius: 25px;
      border: none;
      color: transparent!important;
      line-height: 16px;
      text-shadow: none;
      opacity: 0.6;
      -webkit-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
      transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .bootstrap-switch-handle-on {
        width: 0!important;
        background: transparent;
        background-image: none;
        box-shadow: none;
        border: none;
        color: transparent!important;
        text-shadow: none;
     }
    .bootstrap-switch-label {
        position: relative;
        z-index: 1000;
        display: inline-block;
        height: 24px;
        width: 24px!important;
        padding: 0;
        vertical-align: middle;
        background: $col_5;
        background-image: none;
        border-radius: 25px;
        border: none;
        border-color: transparent;
        text-shadow: none;
        -webkit-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        }
    .bootstrap-switch-handle-off{
        width: 0!important;
        background-image: none;
        background: transparent;
        color: transparent!important;
        text-shadow: none;
      }
  }
 .bootstrap-switch.bootstrap-switch-on >.bootstrap-switch-container{
     background: transparent;
     .bootstrap-switch-label{
         background: #aaaaaa!important;
         opacity: 1;
      }
    }
  .bootstrap-switch-disabled{
      cursor: default;
      >.bootstrap-switch-container >.bootstrap-switch-label{
          background: #e0e0e0!important;
          opacity: 1!important;
        }
   }
  .bootstrap-switch-on:after{
     background: $col_15!important;
     opacity: 0.6!important;
     transform: none;
   }
  .bootstrap-switch-disabled:after{
     background: $col_15!important;
     opacity: 0.1!important;
    }
  }
  .form-type-checkbox:after,
  .form-type-checkbox:before{
    display: none;
  }
}
// Tables.
 table.views-table,
 .table,
 table:not(.ui-datepicker-calendar){
     background-color: $col_12;
     thead{
       tr{
         padding: 10px 8px;
         border: solid #dcdfe1;
         border-width: 1px 0 0;
         th,
         th.is-active{
            padding: 10px 8px;
            border: none;
            background-color: $col_12;
            color: $col_1;
            font-weight: 500;
            font-size: 13px;
            text-transform: uppercase;
            opacity: 0.9;
            a{
              color: $col_5;
              font-weight: 500;
              font-size: 14px;
              text-transform: uppercase;
              &:after{
                display: none;
              }
              span{
                margin-top: 2px;
                margin-right: 14px;
                background-image: none;
                font-size: 16px;
              }
              span:hover,
              span:active{
                 background-image: none;
               }
              .tablesort--desc:before{
                 @include material_font_icon('arrow_upward');
                 margin: 0;
                 font-size: 17px;
               }
              .tablesort--asc:before{
                 @include material_font_icon('arrow_downward');
                 margin: 0;
                 font-size: 17px;
              }
           }
          a:hover,
          a:active{
            span{
              background-image: none;
            }
          }
        }
        th:not(:first-child):last-child{
            padding: 10px 0;
            //text-align: right;
         }
        .select-all {
          position: relative!important;
          &:before {
            content: "";
            top: 14px;
            left: 9px;
            position: absolute;
            width: 16px;
            height: 16px;
            border: 2px solid $col_1;
            pointer-events: none;
            opacity: 0.8;
            -webkit-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
            @include breakpoint($tab_mini, true) {
              left: 12px;
             }
           }
         input[type="checkbox"]{
            display: inherit;
            width: 100%;
            padding: 0;
            margin-top: 4px;
            box-sizing: border-box;
            line-height: normal;
            cursor: pointer;
            opacity: 0;
           }
         }
         .checkboxed:before{
            bottom: 12px;
            height: 10px;
            border-color: $col_5;
            border-top-style: none;
            border-right-style: none;
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
           }
         }
      }
      tbody{
           tr{
             border: solid #dcdfe1;
             border-width: 1px 0 0;
              td{
                padding: 10px 4px;
                vertical-align: top;
                color: $col_17;
                font-size: 14px;
                font-weight: normal!important;
                word-wrap: break-word;
                word-break: break-word;
                //white-space: normal;
                a,
                h3{
                  color: $col_4;
                  font-weight: normal!important;
                  word-break: break-word;
                }
                div,
                ul li{
                  color: $col_17;
                  font-weight: normal;
                  text-align: left;
                }
                a.tabledrag-handle{
                  height: auto;
                  .handle{
                    width: 16px;
                    height: 16px;
                    margin: 2px 10px 0 10px;
                    background-position: center;
                    }
                  }
                  &.views-field-operations{
                    >div{
                        padding-right: 0;
                        margin-right: 0;
                    }
                  }
                .form-type-checkbox{
                  &:before{
                    top: 4px;
                  }
                }
              @include breakpoint($tab_mini, true) {
                 padding: 10px 8px;
                 vertical-align: middle;
                }
              }
             td.views-field-operations,
             td:not(:first-child):last-child{
               width: auto;
               padding: 10px 2px;
               //text-align: right;
              }
            .views-field-title{
                width: 45%;
                max-width: 120px;
                @include breakpoint($tab, true) {
                  max-width: none;
                }
              }
             .form-type-select{
                margin-right: 50px!important;
              }
            .block{
                color: $col_4;
              }
           }
           tr:hover .dropbutton >li{background-color: inherit; background-image: none;}
           tr:hover td,
           tr:hover,
           tr:hover input{
              background-color: $col_13;
              outline: 0;
          }
          tr.selected td{
            background: $col_13;
            label:before {
              bottom: 12px;
              height: 10px;
              border-color: $col_5;
              border-top-style: none;
              border-right-style: none;
              -webkit-transform: rotate(-45deg);
              -ms-transform: rotate(-45deg);
              -o-transform: rotate(-45deg);
              transform: rotate(-45deg);
             }
          }
          .region-title{
            background-color: $col_13;
            td{
              padding-left: 12px!important;
              color: $col_4;
              font-weight: 400;
             }
           }
       }
  }
.permissions{
  th.checkbox{
    position: relative;
    padding: 10px 20px 32px;
    font-size: 12px;
    text-transform: none;
    &:before {
      content: "";
      position: absolute;
      top: 56px;
      left: 39%;
      width: 16px;
      height: 16px;
      border: 2px solid $col_15;
      opacity: 0.54;
      cursor: pointer;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      }
   }
   .checkbox.form-type-checkbox{
     display: inline-block;
     text-align: center;
     &:before{
       top: 4px;
     }
   }
}
body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
    margin-left: 0;
 }
body,
.js{
  position: relative;
  // Admin toolbar styling
  #toolbar-bar{
      background-color: $col_5;
    }
  #toolbar-item-administration-tray{
      border-bottom: 0;
      &.toolbar-tray-vertical{
            height: auto;
            border-bottom: 0;
      }
      &.toolbar-tray-horizontal{
             border-bottom: 0;
      }
      .toolbar-lining{
        padding-right:0;
        .toolbar-menu-administration{
            .toolbar-menu{
                .menu-item{
                    &:last-child{
                        border-right: 0;
                    }
                }
            }
        }
       .toolbar-toggle-orientation{
           display:none !important;
          }
      }
  }
  .toolbar .toolbar-tray-vertical.is-active{
    position: absolute;
    >nav{
      position: relative;
      &:before{
        display: table;
        content: "";
        line-height: 0;
      }
    }
  }
    .content-header{
      padding: 0;
    }
    .layout-container{
      margin: 0;
      &:after{
        content:'';
        display:table;
        clear:both;
        }
        .view-filters{
           float: inherit;
           width: 100%;
           margin: 0 auto;
           background-color: $col_12;
           @include breakpoint($phone, true){
              padding-left: 5px;
           }
           @include breakpoint($tab, true){
              padding-left: 0;
           }
          // Select button.
           .form-item{
              float: inherit;
              width: 80%;
              margin: 14px 20px 10px 20px;
              input{
                 max-width: 220px;
               }
               @include breakpoint(540px){
                   display: inline-block;
                   width: 20%;
                   margin: 0 20px 10px 0;
                }
               &.form-type-textfield{
                 @include breakpoint($gt_phone, true){
                   overflow: hidden;
                   vertical-align: top;
                 }
               }
             }
            // Content page filter button.
            #edit-actions{
              display: inline-block;
              margin: 0 20px 20px;
              vertical-align: middle;
              @include breakpoint(540px){
                 margin: 0 20px 20px 0;
              }
              @include breakpoint($tab, true) {
                 margin: 0 10px 10px;
              }
              input{
                  margin: 0;
              }
              #edit-reset{
                display: block;
                margin: 10px 0 0;
               }
             }
           }
          .view-content{
             float: inherit;
             width: 100%;
             margin: 0 auto;
             background-color: $col_12;
             #edit-header{
               padding: 0 20px 30px;
               @include breakpoint($tab_mini, true) {
                    padding: 0 0 30px;
                }
               .form-item.form-type-select{
                 display: inline-block
               }
               .form-actions{
                  display: block;
                  margin: 14px 0 0;
                  vertical-align: middle;
                  @include breakpoint($tab_mini, true) {
                     display: inline-block;
                     margin: 0 18px;
                  }
                }
              }
          }
       }
}
// Check it.
body.page--node-add-section{
    color: $col_1;
    #field-paragraphs-add-more-wrapper{
       margin: 20px 0;
    }
    #edit-field-paragraphs{
      max-width: $custom_row_width;
      margin: 0 auto;
      .paragraphs-dropbutton-wrapper{
        display: inline-block;
        width: 166px;
        height: 125px;
        margin: 0;
        background-color: $col_12;
        >input{
          width: 100%;
          padding: 127px 0 0 0;
          border: none;
          border-radius: 0;
          background: none;
          -webkit-box-shadow: none;
          box-shadow: none;
          color: $col_12;
        }
      }
    }
}
  #toolbar-item-administration-tray{
    border-bottom: 0;
    &.toolbar-tray-vertical{
           height: auto;
        }
    .toolbar-lining{
        padding-right:0;
        .toolbar-menu-administration{
          .toolbar-menu{
            .menu-item{
              &:last-child{
                  border-right: 0;
              }
            }
          }
        }
    .toolbar-toggle-orientation{
         display:none !important;
        }
      }
   }
  // Node link on the top of content type.
  .block-system-breadcrumb-block{
    a{
      color: $col_1;
     }
   }
  fieldset{
    padding: 30px 0;
    border: none;
    background: none;
    background-color: inherit;
    color: $col_1;
    font-weight: normal!important;
    .form-type-checkbox{
       margin: 0 10px;
     }
   }
// Page title on the top.
  #block-agnian-material-admin-page-title{
    max-width: $custom_row_width;
    min-height: 56px;
    margin: 0 auto;
    border-radius: 2px 2px 0 0;
    vertical-align: middle;
    line-height: 52px;
    @include title;
  }
.content-header{
    padding: 0;
  }
 // Edit content page.
  .layout-region-node-main{
     float: inherit;
     width: 100%;
     background-color: $col_12;
     >div:not(.empty){
       padding: 10px 10px 18px;
       margin: 10px 0;
       border: 1px dashed  rgba(0,0,0,0.12);
       border-radius: 5px;
     }
    >div:hover,
    >div:focus{
      border: 1px dashed  rgba(0,0,0,0.34);
    }
  }
// Basic page image and date/time fields styling.
.field--type-datetime,
.field--type-image,
.field--name-field-sort-order{
  // Label in date form.
   .container-inline div,
   .container-inline label{
      display: inline-block;
    }
     .image-widget{
      position: relative;
      width: 50%;
      pointer-events: fill;
       // Basic page preview of upload image styling.
      .image-preview{
        margin-top: -50px;
        margin-bottom: 20px;
        background: $col_12;
      }
       .image-widget-data{
        // 'upload' word under main image or file.
        .js-hide.js-form-submit.form-submit{
          display: inline-block;
          padding: 0;
          margin: 0;
          pointer-events: none;
          color: $col_4;
          font-size: 13px;
          font-weight: 500;
          text-align: left;
          text-transform: capitalize;
          line-height: 24px;
          letter-spacing: 0.2px;
          &:focus{
             border: none!important;
           }
         }
       }
     }
    // Basic page remove button under preview image.
    .button.form-submit{
          z-index: 1;
          display: block;
          padding: 4.5px 7px;
          margin: 10px 0 0;
          border: none!important;
          border-radius: 0;
          background: none;
          box-shadow: none;
          color: $col_5;
          font-size: 14px;
          font-weight: 500;
          text-align: left;
          line-height: 26px;
          cursor: pointer;
          &:focus{
            border: none;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            text-decoration: none;
            cursor: text;
            }
          &:hover {
            border-radius: 0;
            background: #ddd !important;
            box-shadow: none;
            color: $col_4;
            text-decoration: none;
           }
          &:active{
            background: $col_1!important;
            cursor: wait;
           }
         }
      }
    .form-item-field-image-0,
    .form-type-managed-file{
       position: relative;
       >label{
         margin: 0 0 65px 0!important;
         cursor: pointer;
         &:before{
            //content: 'file_upload';
            position: absolute;
            top: 50px;
            bottom: 0;
            left: -6px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            color: $col_17;
            font-family: "Material Icons";
            font-size: 48px;
            text-align: center;
            word-wrap: normal;
            word-break: normal;
            font-feature-settings: 'liga';
            text-rendering: optimizeLegibility;
            cursor: pointer;
            }
        }
     }
       // Summary on Bacis page.
      .field--widget-text-textarea,
      .field--widget-text-textarea-with-summary,
      .form-type-webform-html-editor{
         color: $col_1;
         @include label;
         .form-textarea-wrapper{
             box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.22);
             -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.22);
             .cke_chrome{
                border: none;
             }
             .cke_top{
               border: none;
               background: $col_16;
               background-image: none;
               .cke_toolgroup{
                 border: none;
                 background: transparent;
                 background-image: none;
               }
              .cke_button_on{
                background-color: $col_13;
                background-image: none;
                box-shadow: none;
                a,
                span{
                  background-color: $col_13;
                  }
                }
               .cke_combo a{
                  border:none;
                }
               .cke_combo_open{
                 //margin: 0;
               }
             }
            span{
             background-color: $col_14;
             background: $col_14;
            a{
             background: $col_14;
            }
            a:hover,
            a:active,
            a:focus,
            a:visited{
             border-color: transparent;
             background: $col_14;
             box-shadow: none;
             outline: 0;
             }
            }
           span.cke_combo{
            a.cke_combo_button:hover,
            a.cke_combo_button:active,
            a.cke_combo_button:focus,
            a.cke_combo_button:visited{
              padding: 1px!important;
              margin: 0!important;
             }
            }
            span:hover,
            span:active,
            span:focus,
            span:visited{
              //border: 0;
              background: $col_14;
              box-shadow: none;
              outline: 0;
            }
          .cke_contents{
            height: 160px;
          }
          .cke_bottom{
            border-top: 1px solid $col_13;
            background: transparent;
            background-image: none;
            box-shadow: none;
            span,
            a{
              background: transparent;
             }
             a:hover,
             a:active,
             a:focus,
             a:visited{
               border: none;
               background: transparent;
               box-shadow: none;
              }
            }
          }
          .filter-wrapper{
              border: none;
              border-top: 1px solid #e0e0e0;
              background-image: none;
              box-shadow: none;
            }
         }
        .cke_dialog{
          tr td:first-child{
            padding-left: 0!important;
          }
        }
       #edit-field-paragraphs-wrapper,
       #edit-field-paragraph-wrapper,
       .field--widget-entity-reference-paragraphs.js-form-wrapper.form-wrapper {
         .field-multiple-table.collapsed > tbody{
          display: block;
        }
      }
      // Add buttons
      #edit-field-paragraphs-wrapper,
      #edit-field-paragraph-wrapper,
      .field--widget-entity-reference-paragraphs.js-form-wrapper.form-wrapper{
          margin: 60px 0;
          @include add-button;
          .dropbutton-wrapper{
             .dropbutton-widget{
                 position: inherit;
                 max-width: $custom_row_width;
                 padding-right: 0;
                 margin: 0 auto;
                 border: 0;
                 border-radius: 0;
                 background: none;
                 box-shadow: none;
                 .dropbutton{
                    padding: 5px 0;
                    border-radius: 0;
                    outline: none;
                    @include breakpoint($phone, true) {
                       padding: 20px;
                     }
                    li{
                       position: relative;
                       display: inline-block;
                       width: 100%;
                       margin: 3px 1.5% 3px;
                       border-top: 0;
                       @include breakpoint($tab, true) {
                          width: 30%;
                       }
                       &:hover {
                          border-radius: 0;
                          background: #ddd !important;
                          box-shadow: none;
                          text-decoration: none;
                         }
                       &:active{
                          background: $col_1!important;
                          cursor: wait;
                         }
                        &:after{
                            content: 'add_circle';
                            position: absolute;
                            top: 0;
                            bottom: 0;
                            left: 0;
                            z-index: 10;
                            display: inline-block;
                            width: 30px;
                            height: 30px;
                            display: inline-block;
                            border-radius: 50%;
                            color: $col_17;
                            font-family: "Material Icons";
                            font-size: 25px;
                            line-height: 34px;
                            text-align: center;
                            text-align: center;
                            word-wrap: normal;
                            word-break: normal;
                            text-rendering: optimizeLegibility;
                            font-feature-settings: 'liga';
                            cursor: pointer;
                          }
                          &.dropbutton-toggle{display: none;}
                      }
                  }
               }
            }
          }
      // Opened paragraphs after click add buttons.
      #edit-field-paragraphs-wrapper,
      #edit-field-paragraph-wrapper,
      .field--widget-entity-reference-paragraphs.js-form-wrapper.form-wrapper {
          // Paragraph header styling when no paragraph is open.
          #edit-field-paragraphs,
          #edit-field-paragraph{
             margin-top: 20px;
             color: $col_5;
             font-size: 24px;
             font-weight: 400;
             line-height: 40px;
             p{
              color: $col_1;
              font-size: 12px;
              }
             strong{
               font-weight: 400;
             }
            }
            // Add button on open paragraph.
            .new-btn,
            .new-btn1{
              position: relative;
              width: 20%;
              &:focus{
                  border: none;
                  color:inherit;
                  outline: none;
                }
              &:hover:before{
                 background-color: #4f636d;
                 box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
                 }
                &:active:before{
                    background-color: #384d56;
                    box-shadow:none;
                 }
                &:after{
                  content: 'add_circle';
                  position: absolute;
                  top: 2px;
                  left: 0;
                  z-index: 10;
                  border-radius: 50%;
                  color: $col_17;
                  font-family: "Material Icons";
                  font-size: 25px;
                  line-height: 30px;
                  text-align: left;
                  word-wrap: normal;
                  word-break: normal;
                  text-rendering: optimizeLegibility;
                  font-feature-settings: 'liga';
                 }
                }
              // Box shadow on pragraphs divs
                table{
                  tbody{
                    tr{
                      td{
                        &:nth-child(2){
                        >div:not(.form-item){
                         border-radius: 3px;
                         box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
                         }
                        }
                      }
                    }
                  }
                 .form-item{
                    .clearfix{
                        border-collapse: inherit;
                        border-spacing: 0;
                        &:focus{
                         border: none;
                         color:inherit;
                         outline: none;
                        }
                      }
                    }
                  }
                .field-multiple-table .paragraph-type-top.collapsed + .paragraphs-subform{
                      display: block;
                      position: absolute;
                      left: 100px;
                      top: 0;
                      max-width: 118px;
                      padding: 0;
                      z-index: 500;
                      @include breakpoint($phone, true){
                         left: 154px;
                         max-width: 220px;
                      }
                      @include breakpoint($tab_mini, true){
                         left: 200px;
                         max-width: 300px;
                      }
                      *:not(.open-text){display: none;}
                       .open-text{
                         padding: 0 5px!important;
                         margin: 0!important;
                         background: $col_16;
                         border: none;
                         pointer-events: none;
                         input{
                           border: none!important;
                         }
                       }
                       img.open-text{
                        max-width: 100px;
                        //height: 30px;
                        border: 1px solid $col_6;
                       }
                   }
                 table.field-multiple-table.inline-table{
                    >thead tr{
                      th.field-label{
                        &:after{
                          display: none;
                        }
                      }
                    }
                   .ajax-new-content{
                     box-shadow: none!important;
                    }
                  }
                 table.field-multiple-table{
                      width: 100%;
                      max-width: $custom_row_width;
                      margin: 0 auto;
                      border-collapse: collapse;
                      border-spacing: 0 5px;
                      background: $col_12;
                      >thead{
                        cursor:  pointer;
                        tr{
                           border-bottom: 0;
                           th.field-label{
                              position: relative;
                              border: solid #bfbfba;
                              border-width: 0 0 0 0;
                              background: #fafafa;
                              &:after{
                                content: '-';
                                position: absolute;
                                top: 10px;
                                right: 10px;
                                width: 24px;
                                height: 24px;
                                color: $col_6;
                                font-size: 28px;
                              }
                             // Paragraph header styling when no paragraph is opened.
                                h4.label{
                                margin: 80px 10px 16px 24px;
                                font-weight: 400;
                               }
                               span.expand{
                                  color: $col_5;
                               }
                               &:after{
                                left: 10px;
                                top: 12px;
                              }
                           }
                        }
                      }
                      &.collapsed{
                          border-bottom: 1px solid #dcdfe1;
                          > thead .field-label:after{content: '+';}
                          //> tbody{display: none;}
                      }
                      >tbody{
                        >tr.draggable{
                              display: block;
                              border-bottom: 0;
                              padding: 0;
                              &:hover{
                                background-color: transparent;
                                cursor: pointer;
                                input:not(.form-submit),
                                 td{
                                  background: transparent;
                               }
                              }
                              >td{
                                  position: relative;
                                  display: block;
                                  padding: 5px;
                                  background-color: transparent;
                                  cursor: pointer;
                                  @include breakpoint($tab, true){
                                      padding: 5px 30px;
                                  }
                                  >div{
                                      position: relative;
                                      display: inline-block;
                                      width: 100%;
                                      overflow: hidden;
                                      background-color: $col_12;
                                   }
                                  .form-type-textfield{
                                    display: block;
                                  }
                                  &:first-child{
                                      width: 1px !important;
                                      padding: 0;
                                      a{
                                        float: none;
                                        padding: 0;
                                        margin: 0;
                                        >.handle{
                                            width: 16px;
                                            height: 16px;
                                            padding: 0;
                                            margin: 0 auto;
                                            background-position: center;
                                          }
                                       }
                                       &.field-multiple-drag{
                                         .handle{
                                            position: absolute;
                                            top: 13px;
                                            left: 10px;
                                            z-index: 1;
                                            @include breakpoint($tab, true){
                                              left: 36px;
                                             }
                                           }
                                          .tabledrag-changed{
                                              position: absolute;
                                              top: 14px;
                                              left: 14px;
                                              z-index: 2;
                                           }
                                       }
                                      &.field-multiple-drag + td >.form-item{
                                        padding: 0 30px;
                                     }
                                     &.field-multiple-drag + td >.ajax-new-content>.form-item{
                                        padding: 0 30px;
                                    }
                                  }
                                  .paragraph-type-top{
                                       position: relative;
                                       margin-bottom: 0;
                                       cursor: pointer;
                                       &:after{
                                          content: '-';
                                          position: absolute;
                                          top: 4px;
                                          right: 0;
                                          width: 24px;
                                          height: 24px;
                                          color: $col_6;
                                          font-size: 28px;
                                          pointer-events: none;
                                        }
                                       &.collapsed{
                                          &:after{content: '+';}
                                       }
                                       >.paragraph-type-title{
                                          width: 100%;
                                          padding: 5px 0 5px 50px;
                                          border: 0;
                                          background-color: $col_16;
                                          font-size: 14px;
                                          flex-basis: auto;
                                          cursor: pointer;
                                          em{font-style: inherit;}
                                          @include breakpoint($tab, true){
                                              padding: 5px 50px;
                                           }
                                         }
                                        .paragraphs-dropbutton-wrapper,
                                        .paragraph-dropbutton-wrapper{
                                              position: absolute;
                                              top: 0;
                                              right: 0;
                                              bottom: 0;
                                              display: inline-block;
                                              margin: 0;
                                             // Recycle bin button on open paragraph to delete paragraph.
                                              &:before{
                                                  content: '';
                                                  position: absolute;
                                                  top: 0;
                                                  right: 0;
                                                  display: inline-block;
                                                  width: 20px;
                                                  height: 20px;
                                                  font-size: 28px;
                                                  @include retina_ready_sprite(act_delete);
                                                }

                                        // Delete button on open paragraph
                                       >input.form-submit{
                                          padding: 0;
                                          text-indent: 100%;
                                          white-space: nowrap;
                                          background: none;
                                          box-shadow: none;
                                        }
                                        >input.form-submit:active,
                                        >input.form-submit:hover,
                                        >input.form-submit:focus,
                                        >input.form-submit:visited{
                                           border: none;
                                           background: transparent!important;
                                           color: inherit;
                                           outline: none;
                                        }
                                        .dropbutton-wrapper{
                                           background: $col_16;
                                           .dropbutton{
                                              width: 100%;
                                              padding: 0 !important;
                                              margin-right: 0;
                                              overflow: visible;
                                              @include breakpoint($tab_mini, true) {
                                                margin-right: 36px;
                                               }
                                              li{
                                                 padding: 0;
                                                 &:hover:before{
                                                    background-color: $col_16!important;
                                                    box-shadow: none !important;
                                                  }
                                                  &.confirm-remove{
                                                      float: left;
                                                      width: 58%;
                                                      &:before{
                                                          width: 5px;
                                                          height: 5px;
                                                          background-color: $col_13;
                                                          box-shadow:none;
                                                        }
                                                   }
                                                  &.restore{
                                                      position: relative;
                                                      float: left;
                                                      width: 33%;
                                                      &:before{
                                                          width: 5px;
                                                          height: 5px;
                                                          background-color: $col_13;
                                                          box-shadow:none;
                                                      }
                                                  }
                                                  .ajax-progress{
                                                    position: absolute;
                                                    top: 0;
                                                    right: 100%;
                                                    background: $col_16;

                                                   }
                                                  >input{
                                                    margin: 0 14px;
                                                    padding: 0!important;
                                                    color: red!important;
                                                    box-shadow: none;
                                                    background: transparent;
                                                   }
                                                   input:active,
                                                   input:hover,
                                                   input:focus,
                                                   input:visited{
                                                      background: transparent!important;
                                                    }

                                                 }
                                             }
                                          }
                                        }
                                     .paragraphs-dropbutton-wrapper:hover,
                                     .paragraph-dropbutton-wrapper:hover{
                                        border-radius:0;
                                        background: transparent!important;
                                        box-shadow: none;
                                        text-decoration: none;
                                     }
                                     .paragraphs-dropbutton-wrapper:visited,
                                     .paragraph-dropbutton-wrapper:visited,
                                     .paragraphs-dropbutton-wrapper:active,
                                     .paragraph-dropbutton-wrapper:active,
                                     .paragraphs-dropbutton-wrapper:focus,
                                     .paragraph-dropbutton-wrapper:focus{
                                        border :none;
                                        color: inherit;
                                        outline: none;
                                    }
                                .dropbutton-widget{
                                    padding-right: 0;
                                    border: 0;
                                    border-radius: 0;
                                    .dropbutton{
                                     li{
                                       padding: 3px;
                                       &:after{display:none;}
                                       &.dropbutton-toggle{display: none;}
                                       &.restore{display: block;}
                                       &:hover {
                                         border-radius:0;
                                         box-shadow: none;
                                         background: #ddd!important;
                                         text-decoration: none;
                                         }
                                       }
                                       li:visited,
                                       li:active,
                                       li:focus{
                                           border:none;
                                           color:inherit;
                                           outline: none;
                                           input{
                                              background: none!important;
                                          }
                                       }
                                    }
                                }
                                &:after{
                                  top: 5px;
                                  left: 28px;
                                }
                             }
                             .paragraphs-subform{
                                  padding: 15px;
                                  &:after{
                                    content: '';
                                    display: table;
                                    clear: both;
                                    }
                                  /*.form-file{
                                      position: relative;
                                      border: none;
                                      background: transparent;
                                      box-shadow: none;
                                      color: transparent;
                                      text-transform: none;
                                }*/
                              }
                              .paragraphs-subform:hover,
                              .paragraphs-subform:active{
                                background: none!important;
                              }
                            }
                          }
                        }
                      }
                    }
        .layout-region-node-secondary{
            float: inherit;
            width: 100%;
            background-color: $col_12;
            >div{
              position: relative;
              display: -webkit-box;
              display: -moz-box;
              display: -ms-flexbox;
              display: -webkit-flex;
              display: flex;
              flex-wrap: wrap;
              height: auto;
              border: none;
              background-color: $col_12;
              box-shadow: none!important;
               >div,
               >details{
                  display: inline-block;
                  width: 100%;
                  flex: 1 0 auto;
                  margin: 10px 0;
                  border: 1px dashed  rgba(0,0,0,0.12);
                  border-radius: 5px;
                  background-color: $col_12;
                  background-image: none!important;
                  box-shadow: none;
                  @include breakpoint($tab, true) {
                     max-width: 32%;
                     flex: 1 0 32%;
                     margin: 10px 3px;
                  }
                }
                >div:hover,
                >div:focus,
                >details:hover,
                >details:focus{
                  border: 1px dashed  rgba(0,0,0,0.34);
                }
              }
           }
         // Buttons on edit content page
         .layout-region-node-footer{
            float: inherit;
            width: auto;
            padding: 30px 0;
            padding-right: 0;
            text-align: center;
            @include breakpoint($tab, true) {
                  text-align: right;
              }
           }
            #edit-actions{
             .dropbutton-wrapper{
               position: inherit;
               display: inline-block;
               float: inherit;
               width: auto;
               min-width: 200px;
               margin-bottom: 20px;
               vertical-align: top;
               >.dropbutton-widget{
                  width: 100%;
                  max-width: none!important;
                  >ul.dropbutton{
                     position: relative;
                     padding: 0 20px 0 0;
                     border: none;
                     background-color: $col_5;
                     -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
                     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
                     -webkit-transition: -webkit-box-shadow 0.15s ease-out;
                     -moz-transition: -moz-box-shadow 0.15s ease-out;
                     -o-transition: -o-box-shadow 0.15s ease-out;
                     >li{
                       padding: 4px 14px;
                       margin: 0;
                       border: none;
                       background-color: $col_5;
                       background-image: none;
                       box-shadow: none;
                       input,
                       button{
                        width: auto!important;
                        padding: 0;
                        margin: 0;
                        vertical-align: bottom;
                        border: none;
                        border-radius: 2px;
                        background-color: $col_5;
                        background-image: none;
                        box-shadow: none;
                        color: $col_12;
                        font-size: 14px;
                        font-weight: 500;
                        line-height: 26px;
                        white-space: nowrap;
                        text-shadow: none;
                        @include breakpoint($tab, true) {
                           max-width: none;
                          }
                       }
                       input:hover,
                       input:active,
                       input:focus,
                       input:visited,
                       button:hover,
                       button:active,
                       button:focus,
                       button:visited{
                          background: none;
                          background-image: none;
                          box-shadow: none;
                          text-shadow: none;
                          text-decoration: none;
                       }
                       input{
                         max-width: 196px;
                         overflow: hidden;
                         text-overflow: ellipsis;
                         white-space: nowrap;
                         @include breakpoint($tab-mini, true) {
                             max-width: none;
                             overflow: visible;
                           }
                         }
                      }
                   >.dropbutton-toggle{
                       top: 0;
                       right: 0;
                       background: transparent;
                       cursor: pointer;
                       >button{
                         &:before{
                            top: 0;
                            bottom: 0;
                            left: -16px;
                            color: $col_12;
                            font-size: 26px;
                          }
                         }
                       }
                      }
                      >ul.dropbutton:hover,
                      >ul.dropbutton:focus{
                        background-image: none;
                        background: #039be5!important;
                        color: $col_12;
                        -webkit-box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.38);
                        box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.38);
                       }
                      >ul.dropbutton:active li,
                      >ul.dropbutton:hover li,
                      >ul.dropbutton:hover .dropbutton-toggle,
                      >ul.dropbutton:hover input,
                      >ul.dropbutton:active button,
                      >ul.dropbutton:active input{
                        background: #039be5!important;
                        background-image: none;
                        box-shadow: none!important;
                        text-decoration: none;
                      }
                  }
                 @include breakpoint($tab, true) {
                   margin-bottom: 0;
               }
          }
         // Preview button
         #edit-preview,
         #edit-delete,
         >input,
         >a{
            display: inline-block;
            padding: 4.5px 16px;
            margin: 0 10px 20px 10px;
            vertical-align: top;
            border: none;
            border-radius: 2px;
            background-color: $col_5;
            background-image: none;
            color: $col_12;
            font-size: 14px;
            font-weight: 500;
            line-height: 26px;
            white-space: nowrap;
            @include breakpoint($phone, true) {
               margin: 0 10px 20px 30px;
              }
            @include breakpoint($tab, true) {
                 margin: 0 0 0 30px;
              }
            }
         #edit-delete,
         #edit-delete-translation{
             background-color: red;
          }
      }
// Extend page table colors */
.details-wrapper {
  .responsive-enabled tr {
     border: 0;
     border-bottom: 1px solid #dcdfe1;
     background: $col_12;
    }
  }
}
