$white: #FFFFFF;
$gray-100: #F8F9FA;
$gray-200: #EDEFF1;
$gray-300: #DEE2E6;
$gray-400: #CED4DA;
$gray-500: #ADB5BD;
$gray-600: #6C757D;
$gray-700: #495057;
$gray-800: #343A40;
$gray-900: #23272B;
$black: #000000;

$blue: #007BFF;
$blue-hover: darken($blue, 15%);
$indigo: #6610F2;
$indigo-hover: darken(#6610F2, 15%);
$purple: #6F42C1;
$purple-hover: darken(#6F42C1, 15%);
$pink: #E83E8C;
$pink-hover: darken(#E83E8C, 15%);
$red: #DC3545;
$red-hover: darken(#DC3545, 15%);
$orange: #FD7E14;
$orange-hover: darken(#FD7E14, 15%);
$yellow: #FFC107;
$yellow-hover: darken(#FFC107, 15%);
$green: #28A745;
$green-hover: darken(#28A745, 15%);
$teal: #20C997;
$teal-hover: darken(#20C997, 15%);
$cyan: #17A2B8;
$cyan-hover: darken(#17A2B8, 15%);

$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;

.wrapper {
  width: 750px;
  margin: 0 auto 20px;
  text-align: center;
  position: relative;
  max-width: 100%;
  font-size: 15px;
  font-weight: 400 !important;
  font-family: Verdana, Arial, sans-serif;
  color: $dark;
}

.wrapper * {
  font-weight: 400 !important;
}

p {
  margin: 12px 0 16px;
}

.w-100 {
}

.breadcrumb-wrap {
  margin-top: 20px;
}

.breadcrumbs {
  line-height: 57px;
  padding: 0 10px;
}

#chooseType {
  width: 100%;
  justify-content: center;
  position: absolute;
  top: 70px;
  z-index: 1006;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-family: Verdana, Arial, sans-serif !important;
  box-sizing: border-box;
  
  div.message {
    width: 100%;
    margin: 0;
    
    h4 {
      margin: 0 0 2px;
    }
  }
  
  .btn-toolbar {
    box-sizing: border-box;
    width: 100%;
    display: flex;
  }
  
  .btn-choose {
    box-sizing: border-box;
    padding: 2px 44px 3px 26px;
    margin: 8px 5px;
    position: relative;
    color: $gray-500;
    border: 1px solid $gray-400;
    outline: none !important;
    box-shadow: none !important;
    transition: all .2s;
    min-width: 110px;
    line-height: 1.5;
    border-radius: 0;
    
    svg {
      display: inline-block;
      visibility: hidden;
      width: 16px;
      height: 16px;
    }
    
    &:hover,
    &:active,
    &:focus {
      color: $success;
      border-color: $success;
      transition: all .2s;
    }
    
    &.active {
      transition: all .2s;
      color: $success;
      border-color: $success;
      outline: none !important;
      box-shadow: none !important;
      
      svg {
        visibility: visible;
      }
    }
  }
  
  @media screen and (max-width: 399px) {
    top: 50px;
    padding: 0 15px;
    .btn-toolbar {
      flex-direction: column;
    }
    .btn-choose,
    .btn-choose.active {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      display: block;
      margin: 10px 0 0 !important;
    }
  }
}

.DashboardContainer {
  font-family: Verdana, Arial, sans-serif !important;
  font-size: 15px;
  
  button.uppy-u-reset.uppy-c-btn.uppy-StatusBar-actionBtn.uppy-StatusBar-actionBtn--upload.uppy-c-btn-primary {
    border-radius: 0 !important;
  }
  
  * {
    border-radius: 0 !important;
  }
  
  .uppy-DashboardContent-back {
    diplay: none;
  }
  
  .uppy-Dashboard-inner {
    border-radius: 0;
    margin-bottom: 5px;
    
    .uppy-Dashboard-innerWrap {
      border-radius: 0;
      
      .uppy-Dashboard-dropFilesHereHint {
        padding-top: 0;
        background-position: 50% calc(50% + 60px);
        @media screen and (max-width: 399px) {
          padding-top: 10px;
        }
      }
      
      .uppy-DashboardAddFiles {
        border-radius: 0;
        justify-content: center;
        color: $dark !important;
        
        button.uppy-Dashboard-browse,
        button.uppy-Dashboard-browse:hover {
          text-transform: capitalize;
          display: inline-block;
          font-weight: normal;
          color: #212529;
          text-align: center;
          vertical-align: middle;
          cursor: pointer;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          background: transparent;
          border: 1px solid transparent;
          border-bottom-width: 1px !important;
          padding: 2px 42px 3px !important;
          font-size: 15px !important;
          line-height: 1.5 !important;
          width: auto;
          max-width: 100%;
          transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
        }
        
        button.uppy-u-reset.uppy-Dashboard-browse {
          color: #FFFFFF !important;
          background-color: $blue !important;
          border-color: $blue !important;
          outline: none !important;
          box-shadow: none !important;
        }
        
        button.uppy-u-reset.uppy-Dashboard-browse:hover {
          color: #FFFFFF !important;
          background-color: $blue-hover !important;
          border-color: $blue-hover !important;
        }
        
        button.uppy-u-reset.uppy-Dashboard-browse.focus, button.uppy-u-reset.uppy-Dashboard-browse:focus {
          box-shadow: none !important;
        }
        
        button.uppy-u-reset.uppy-Dashboard-browse.disabled, button.uppy-u-reset.uppy-Dashboard-browse:disabled {
          color: #343A40 !important;
          background-color: transparent !important;
        }
        
        @media screen and (max-width: 399px) {
          padding-bottom: 0;
        }
      }
      
      .uppy-Dashboard-progressindicators {
        .uppy.uppy-Informer {
          bottom: 77px !important;
          width: 100%;
          
          p {
            background-color: $danger;
            width: 100%;
            padding: 7px 10px;
            
          }
        }
      }
    }
  }
  
  .uppy-Dashboard-dropFilesTitle {
    max-width: 100%;
    font-size: 15px;
    flex-wrap: wrap;
    padding: 25px 25px 35px;
    justify-content: center;
    align-self: center;
    align-items: center;
    font-family: Verdana, Arial, sans-serif !important;
    
    > span {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      max-width: 260px;
      align-self: center;
      justify-self: center;
      color: $dark !important;
      transform: translateY(10px);
      font-size: 15px;
      font-weight: 400 !important;
      font-family: Verdana, Arial, sans-serif !important;
      
      .uppy-Dashboard-browse {
        padding: 0;
        width: 90px;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: calc(50% - 45px);
        margin-right: calc(50% - 45px);
        font-size: 15px;
      }
    }
    
    .max-per-file {
      font-size: 14px;
    }
    
    @media screen and (max-width: 399px) {
      > span {
        transform: translateY(26px);
      }
    }
  }
  
  .uppy-Dashboard--isAddFilesPanelVisible {
    .uppy-Dashboard-dropFilesTitle {
      > span {
        transform: translateY(-10px) !important;
        @media screen and (max-width: 399px) {
          transform: translateY(5px) !important;
          
        }
      }
    }
  }
}

.uppy-u-reset.uppy-StatusBar-actionCircleBtn:focus {
  box-shadow: none !important;
}

.uppy-Dashboard--isAddFilesPanelVisible {
  .uppy-Dashboard-files {
    filter: none;
    opacity: 0;
    
    * {
      opacity: 0;
    }
  }
}

#doneUploading {
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  justify-content: center;
  top: 255px;
  z-index: 9;
  display: none;
  padding: 0 15px;
  
  .done-uploading {
    color: #FFFFFF;
    background-color: #28A745;
    border: 1px solid #28A745;
    padding: 2px 48px 3px;
    display: block;
    line-height: 1.5;
    font-size: 19px;
    border-radius: 0;
    transition: all .2s;
  }
  
  .done-uploading:hover {
    transition: all .2s;
    color: #FFFFFF;
    background-color: #218838;
    bordercolor: #1E7E34
  }
  
  .done-uploading.focus, .done-uploading:focus {
    transition: all .2s;
    color: #FFFFFF;
    background-color: #218838;
    border-color: #1E7E34;
    box-shadow: 0 0 0 .2rem rgba(72, 180, 97, .5)
  }
  
  @media screen and (max-width: 399px) {
    top: 265px;
    .done-uploading {
      width: 100%;
    }
  }
}

.maximum-file-size {
  display: block;
  font-size: 13px;
  padding: 6px 10px;
  color: #777777;
}

.btn-toolbar {
  justify-content: center;
}

.btn-toolbar-delete {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  paddin: 0 10px;
}

.uppy-Dashboard-AddFilesPanel {
  transition: none !important;
}

.uppy-Dashboard-innerWrap {

}

.uppy-DashboardTabs {
  display: none;
}

.uppy-c-btn-primary {
  color: #FFFFFF;
  background-color: #28A745;
  border-color: #28A745
}

.uppy-c-btn-primary:hover {
  color: #FFFFFF;
  background-color: #218838;
  border-color: #1E7E34
}

.uppy-c-btn-primary.focus, .uppy-c-btn-primary:focus {
  color: #FFFFFF;
  background-color: #218838;
  border-color: #1E7E34;
  box-shadow: 0 0 0 .2rem rgba(72, 180, 97, .5)
}

.uppy-c-btn-primary.disabled, .uppy-c-btn-primary:disabled {
  color: #FFFFFF;
  background-color: #28A745;
  border-color: #28A745
}

// upload table

.upload-table {
  box-sizing: border-box;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 !important;
  
  * {
    box-sizing: border-box !important;
  }
  
  header.table-row.table-header {
    background-color: $dark;
    color: white;
    @media screen and (max-width: 599px) {
      .table-cell:not(.cell-checkbox) {
        display: none;
      }
    }
  }
  
  .table-row {
    display: flex;
    width: 100%;
    background-color: $gray-200;
    
    &:nth-child(even) {
      background-color: $gray-100;
    }
    
    .table-cell {
      display: flex;
      align-items: center;
      align-self: center;
      white-space: nowrap;
      padding: 10px;
      
      > span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      
      .mobile-label {
        display: none;
      }
      
      &.cell-checkbox {
        flex-grow: 1;
        position: relative;
        width: 45%;
        max-width: 45%;
        
        > label {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      
      &.cell-size {
        width: 15%;
        max-width: 15%;
        
        > abbr {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      
      &.cell-date {
        width: 20%;
        min-width: 170px;
        
      }
      
      &.cell-delete {
        width: 80px;
        flex-grow: 1;
        text-align: right;
        justify-content: flex-end;
        
        .btn.btn-sm {
          padding: 2px 10px 3px;
        }
      }
    }
    
    @media screen and (max-width: 599px) {
      flex-wrap: wrap;
      border-bottom: 1px solid $gray-400;
      div.table-cell {
        label.mobile-label {
          display: inline-block;
          margin: 0 10px 0 0;
          font-weight: bold;
          color: $gray-600;
          cursor: default;
        }
        
        > span {
          max-width: 100%;
        }
      }
      .table-cell.cell-checkbox {
        width: calc(100% - 80px);
        max-width: calc(100% - 80px);
        order: 1;
      }
      .table-cell.cell-delete {
        order: 2;
        text-align: right;
        justify-content: flex-end;
        
      }
      .table-cell.cell-size {
        order: 3;
        width: auto;
        max-width: 100%;
        padding-top: 0;
      }
      
      .table-cell.cell-date {
        flex-grow: 1;
        padding-top: 0;
        order: 4;
        width: auto;
        max-width: 100%;
      }
    }
  }
  
  .btn-toolbar {
    justify-content: flex-start;
    padding: 10px 0;
  }
}

// container

.container {
  box-sizing: border-box;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto
}

@media (min-width: 576px) {
  .container {
    max-width: 540px
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px
  }
}

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto
}

.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.select-css {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
  linear-gradient(to bottom, #FFFFFF 0%, #E5E5E5 100%);
  background-position: right .7em top 50%, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: .65em auto, 100%;
  border: 1px solid #AAAAAA;
  box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04);
  box-sizing: border-box;
  color: $dark;
  cursor: pointer;
  display: block;
  font-family: sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin: 6px 0 0;
  max-width: 100%;
  padding: .4em 1.8em .3em .8em;
}

.select-css::-ms-expand {
  display: none;
}

.select-css:hover {
  border-color: #888888;
}

.select-css:focus {
  border-color: #AAAAAA;
  box-shadow: none;
  color: #222222;
  outline: none;
}

.select-css option {
  font-weight: normal;
}

.nav_table {
  box-sizing: border-box;
  width: 100%;
}

.right_nav_td {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  @media screen and (max-width: 991px) {
    padding: 0 6px;
  }
}