body{
    font-size: 16px;
}
.box_shadow {
    box-shadow: 0px 0px 5px 2px rgb(0 0 0 / 20%);
    border-radius: 5px;
}
@media screen and (min-width: 1200px) {
.container {
    max-width: 980px;
    }
}
.title{
    padding: 25px 0;
    font-size: 5px;
}
.title h1{font-size: 36px; font-weight: bold; text-align: center;padding-bottom: 25px;}
.title h2{font-size: 16px;font-weight: normal;}
.dropbox{
    text-align: center;
    border: 2px dashed #007bff;
    border-radius: 5px;
    background: #f9fafb;
    margin-top: 20px;
}
.dropbox .group-button{
    position: absolute;
    top: 32%;
    left: 32%;
}
.group-button > .button{
    background: #327cfe;
    clear: both;
    color: #fff;
    border-radius: 5px;
    width: 210px;
    height: 56px;
    padding: 16px 41px;
    font-weight: 600;
    position: relative;
    cursor: pointer;
}
.icon-add,.icon-delete {font-size: 24px;}
.group-button > .button > span{
    position: absolute;
    right:50px ;
}
.group-button > .button > i{
    position: absolute;
    left:50px ;
}
.group-button > .lable{
    padding: 7px 20px;
    clear: both;
    float: left;
    width: 100%;
    font-size: 14px;
    color: #000;
}


.group-button.step2 > .button{
  background: #f1f5fe;
  color: #327cfe;
}
.preview-files {
    /* border: solid 1px #f0f0f0;
    border-radius: 5px; */
}
.font-item :last-of-type {
    border: none;
}

.font-delete {float: right;color: #f63232; width: 24px; height: 25px; cursor: pointer;}
.font-delete >i{
    font-weight: bold;
}
.font-done {float: right;color: #38ac63; width: 24px; height: 25px;}
.font-done >i{
    font-weight: bold;
}
.dropbox .form-control-file{
    opacity: 0;
    height: 270px;
}
div.preview-files > img {
    width: 30%;
}
.font-item {
    color: #5d6168;
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0
}
.font-item .font-head {
    overflow-x: hidden;
    padding: 10px 10px 8px 10px;
}
.font-item .pull-right {
    float: right!important;
    min-width: 30%;
}
.font-item .btn-success {float: right; background: #38ac63;}
.font-item .btn-danger {float: right; background: #e37668;}
.group_button{
    padding-bottom: 0px;
    float: right;
    width: 100%;
}
.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}
.right{float:right;}
.group_button .btn-primary, .group_button .btn-secondary{
    width: 210px;
    height: 56px;
}
#status{
    width: 100%;
    float: left;
    text-align: center;
    padding-bottom: 10px;
}
.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.glyphicon-remove:before {
    content: "Del";
}
.hidden {
    display: none;
}
.font-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 120px;
}
.font-name-text {
    font-weight: 600;
}

@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?rrdz6a');
    src:  url('../fonts/icomoon.eot?rrdz6a#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.ttf?rrdz6a') format('truetype'),
      url('../fonts/icomoon.woff?rrdz6a') format('woff'),
      url('../fonts/icomoon.svg?rrdz6a#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
  [class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-add:before {
    content: "\e900";
  }
  .icon-delete:before {
    content: "\e901";
  }
  .icon-done:before {
    content: "\e64c";
  }