export const appStyleCss = `

.ivu-form-item {
    margin-bottom: 5px !important
}

.ivu-divider-horizontal.ivu-divider-with-text-center,
.ivu-divider-horizontal.ivu-divider-with-text-left,
.ivu-divider-horizontal.ivu-divider-with-text-right {
    margin: 5px 0 !important
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-light {
    color: #fff !important;
}

.text-primary {
    color: #2d8cf0 !important;
}

.text-success {
    color: #19be6b !important;
}

.text-warning {
    color: #ff9900 !important;
}

.text-danger {
    color: #ed4014 !important;
}

.text-muted {
    color: #8a8f99 !important;
}

.bg-primary {
    background-color: #2d8cf0 !important;
}

.bg-success {
    background-color: #19be6b !important;
}

.bg-warning {
    background-color: #ff9900 !important;
}

.bg-danger {
    background-color: #ed4014 !important;
}

.bg-muted {
    background-color: #8a8f99 !important;
}

.divider {
    border-top: 1px solid #eff2f6;
    margin-top: 20px;
    margin-bottom: 20px;
}

.hide {
    display: none !important;
}

.smaller {
    font-size: small !important;
}


.image-round {
    border-radius: 50% !important;
}

.break {
    display: block;
}

.hand-hover {
    cursor: pointer;
}

.vue-input-tag-wrapper {
    border: 1px solid #dcdfe6 !important;
    border-radius: 5px !important;
}

.vue-input-tag-wrapper>.input-tag {
    background-color: #ecf5ff !important;
    border: 1px solid #cae4ff !important;
    color: #409eff !important;
    border-radius: 3px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.vue-input-tag-wrapper>.input-tag>.remove {
    color: #409eff !important;
}

.xlsx-button {
    border: 1px solid #67c23a;
    background-color: #67c23a;
}

.img-fluid {
    width: 100%;
    height: auto;
}


.pl-5 {
    padding-left: 5px
}

.pr-5 {
    padding-right: 5px
}

.mr-2 {
    margin-right: 2px;
}

.ml-2 {
    margin-left: 2px;
}

.el-col {
    margin-bottom: 5px;
}

.mb-5 {
    margin-bottom: 5px;
}

.mt-5 {
    margin-top: 5px;
}

.mr-5 {
    margin-right: 5px;
}

.ml-5 {
    margin-left: 5px;
}

.mr-20 {
    margin-right: 20px;
}

.ml-20 {
    margin-left: 20px;
}


.mr-10 {
    margin-right: 10px;
}

.ml-10 {
    margin-left: 10px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mt-10 {
    margin-top: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mt-15 {
    margin-top: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mt-50 {
    margin-top: 50px;
}

.w-100 {
    width: 100px !important;
}

.w-150 {
    width: 150px !important;
}

.w-120 {
    width: 120px !important;
}

.w-200 {
    width: 200px !important;
}

.w-250 {
    width: 250px !important;
}

.w-300 {
    width: 300px !important;
}

.w-500 {
    width: 500px !important;
}

.w-max {
    width: 100% !important;
}

.h-30 {
    width: 30px !important;
}

.w-30 {
    height: 30px !important;
}

.h-50 {
    width: 50px !important;
}

.w-50 {
    height: 50px !important;
}


/** tooltip */

.tooltip {
    display: block !important;
    z-index: 10000;
  }
  
  .tooltip .tooltip-inner {
    background: black;
    color: white;
    border-radius: 16px;
    padding: 5px 10px 4px;
  }
  
  .tooltip .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
    border-color: black;
    z-index: 1;
  }
  
  .tooltip[x-placement^="top"] {
    margin-bottom: 5px;
  }
  
  .tooltip[x-placement^="top"] .tooltip-arrow {
    border-width: 5px 5px 0 5px;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    bottom: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
  }
  
  .tooltip[x-placement^="bottom"] {
    margin-top: 5px;
  }
  
  .tooltip[x-placement^="bottom"] .tooltip-arrow {
    border-width: 0 5px 5px 5px;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
    top: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
  }
  
  .tooltip[x-placement^="right"] {
    margin-left: 5px;
  }
  
  .tooltip[x-placement^="right"] .tooltip-arrow {
    border-width: 5px 5px 5px 0;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    left: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
  }
  
  .tooltip[x-placement^="left"] {
    margin-right: 5px;
  }
  
  .tooltip[x-placement^="left"] .tooltip-arrow {
    border-width: 5px 0 5px 5px;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    right: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
  }
  
  .tooltip.popover .popover-inner {
    background: #f9f9f9;
    color: black;
    padding: 24px;
    border-radius: 5px;
    box-shadow: 0 5px 30px rgba(black, .1);
  }
  
  .tooltip.popover .popover-arrow {
    border-color: #f9f9f9;
  }
  
  .tooltip[aria-hidden='true'] {
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s, visibility .15s;
  }
  
  .tooltip[aria-hidden='false'] {
    visibility: visible;
    opacity: 1;
    transition: opacity .15s;
  }
    
`;
