@import '../../../theme/styles/default.less';
@import './variable.less';

@{card-item-prefix} {
  display: inline-block;
  width: 100%;
  min-height: 80px;
  border-radius: 4px;
  background-color: #ffffff;
  margin: 0 0 20px 0;
  cursor: pointer;

  ul {
    list-style: none;
    margin: 0 0 0 75px;
    padding: 0;
    height: 80px;
    overflow: hidden;
    li {
      margin: 0 20px 20px 0 ;
      padding: 0 30px 0 0;
      float: left;
      min-width: 84px;
      text-align: center;
      div:nth-child(1){
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 50%;
        margin-bottom: 6px; 
        color: #fff;
      }
    }
  }
  .card-open{
    height: auto;
    overflow: auto; 
  }
  .card-button{
    position: absolute;
    right: 15px;
    top: 15px;
    span{
      display: block;
      width: 20px;
      height: 20px;
      background-repeat: no-repeat;
      background-size: 100%;
    }
    .open{
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAUCAYAAADskT9PAAAAAXNSR0IArs4c6QAAA41JREFUSA2dlT1IW1EUx/tM0CiNwSmoHYQUHBysuJU6ZPVjEEUrJmISRUEpQh10qIMd4mChFAWLH5FGaRVLC34sHTJYl4JQB4dCAw5VySSaolET7e8k0V71BY0Xznvn3nvO/3/uPee8pz245/D5fKZYLDYq7gaDocvlckXuA6Xdx2l6etoWjUY/n5+fl4q/pmkbRqOxrrW1NZguXka6DpOTk7Wnp6frQi7EIqLLmuyli3fnGwgEAsZgMOiFrFdIMjIyfGazuUv0cDg8enZ25hKdgIZtNlu/3W6Pyvy2cacA/H5/fiQSmQOsAoII0u3xeCZVcE7vIbgRxMT6qslkanQ6nbuqjZ5+awAA2wH9iFgBCJLregrupx4YhfmE2lhgz0aQIaSJQAN6thdrKWsAQm1iYqKf9zchB+yrxWIpT0UugLInNmIrPuKbxEh5UN2N2dnZvMPDww9gViNRAPvb2tqGhUQd3I5Z5pwyrK6LDnEvAXhRjchSTk5OS3Nz857sqeNGAOPj43KCBZyLMNzlyhs52arqJDqtWCKtKHqyBTdFVwcpqcBGaicfzC0w69vb29dVmyspIOoONteEHAfJXZkeOUE6aLsf2BWLiC5rKrDoSd8ywRJMltaSHLIdH/EbWFxczAmFQu8xcmB8zs5Qbm7uq4aGhljSLv5aWVnJ2t7efsukUxZoxXfypgVfyJsxVlhY2FNZWXmcmCae8/PzhoODg9fM+uCAQpuxWq0dNTU1hxp5LAZArrIE2eOz2uJ2u5cSrv+fXGdRssLLWf0LOan3zIsFGA1gSFs+RNaTnbKFfmVMTU1V8/mW2spDNsGo01h8yiReTJmZmZsOh+PPFS8mXFsVkftRLx0h/6XaXT8Ip3RSuMuqjegzMzOPTk5O5LAywjeKMLGeeMrV7e/vDwIm7Xjl6lS7C/16KvHx0pYD11N5YS/vlAFQVNL78gGyY3fMdfVw6jHVOZXObXSSEqmVLDACYDRR/SE9e90ApH3I1SccCwDQbR89MHVNbWcwdqit53oddSMAHF8CNIQYcVzOzs526n1AVLJUunzQjo6O/BykChv5OfVxE29U+8sAyLeFfPvYrIU4hgzQDV7e0pb3HpBLoUsNDSIGgL5QFy7qYl9A4wGQs1I25ev3GMI7/UTSjQiOy58aHL+RempqQ344bohHAMxm8TvSyMZOugR3sSeIArjmkGfYH8HV/Q+Wtd95iEqyRQAAAABJRU5ErkJggg==');
    }
    .close{ 
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAUCAYAAADskT9PAAAAAXNSR0IArs4c6QAAA0NJREFUSA2tlU9I02EYx/cPa0KKp9HoEBp08CDWLfCwqyUUykpcsU3FoKigDnqwQx70kFBRkKjbqEklRYEl3XYQIYgOBh6Ckg6x2CFEhZayuT7ftZ/9Nn/lJj7w/t7nff58n+d93ud9f/aJiYmwzWZ7kMvl9jPPORyOc93d3Un4PafJyUnv5ubmU4Bb7Hb7L+ZLdkVB0YTiBWwDihSjkyQS0u0VEcPHJp8wPGB+YaPtxFjIJ6Ag09PTtaurqzEMTpNAFtEgBiPwOel3S+DZCd6P/xC8E7xXNTU1Qb/fvyLMrQSMABzJDQyHWbswfuN2u893dXUtG/pK5qmpqbp0Ov0YvJP4ZcAb6OnpuW3G2JaAlNFotCWTyTyDPYjTVwA6ent7P5gdd+LHx8eP4/sc38PYfne5XGdDodBcqZ+jVKB1wbAZgEQBYJ7K9FnZWskKtvPyFQY2zVbB5WtZAQOUvnDSF0Os+wEDyx73eDx9bW1tPw0b8zwzM1OdSqXGsA1gq94Z4bwHOW/1lCXZI5HICTQHpK2qqloMBALfSi2xOZXNZh8hr2MsFjr4k9mORjtauEmNyJedTueFcDj82mwjPh6PH9rY2JCNaM1Btj8AH2W8pWE+Ktgf3d+vgDjDY0jUB434vCeg37AQL5l0spGtKNZBhK4ZiKaZi54+g3NLNzs7uSyaTd3HM9wOVuKck2PkVzZR9zOv1Xm1tbV3X2qD/HWVRD7CTi4DdwXEfYAkCddL9KQPImOnwAPwYo7ogU0/0YRsvrLcmbD1g6QHyIVwn6Wu8Lw8Ng6IEJCz3+sRisUauql5PGyVvDwaDi+LNVM513paAAMp5QGRHxfLNy47WtDZTuQ+aZQIComS6IQPMtxjbnlBzMDNf+qRT/ps05DCz5ZP+zwQMUHZp+RMx9OYZ24p/apYvoRmU8ibIXldQz2gD1XhHefULLyLJpEPYwJiTj3yLjCwWO1bA8EkkEq6lpaURbsl1yQgQ4ZW7LJ7X8j7B80nR5aP19fX9Pp8vI91OVHYCBhBlPkMSUda1JLEgOcGbmFYIHmLXLyUrlypOQMCU+wiT/nQKrGookQ5+tZ+1roR2lYAC0O1ulV68joIfTlp8pfQbWXXTV/3YMrwAAAAASUVORK5CYII=');
    }
  }
  .card-item {
    width: 100%;
    height: 100%;
    padding: 0 0 0 20px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    font-size: 14px;
    padding-left: 20px;
    padding-top: 20px;
    padding-right: 20px;
    
    position: relative;
    .type{
      margin: 0 25px 0 0;
      width: 40px;
      position: absolute;
      top: 42px;
      left: 25px;
    }
  }

  .cardsub:hover {
    border-radius: 4px;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
  }  
}