修改弹窗层级

src/common/components/Calendar/index.less

@@ -1,6 +1,7 @@
 @import "~@less/mixin.less";
-
+@import "~@less/variables.less";
 .wrapper{
+  .contentZIndex1;
   width: 294px;
   padding: 5px;
   font-size: 0;
@@ -10,7 +11,6 @@
   position: absolute;
   top: 10px;
   right: 0;
-  z-index: 100;
   border: 1px solid #ccc;
   box-sizing: border-box;
   .top{

src/common/components/ComplexModal/index.less

@@ -1,8 +1,9 @@
 @import "~@less/mixin.less";
+@import "~@less/variables.less";
 .container {
   // position: relative;
   // padding-top: 40px;  //改为绝对定位，拖拽元素不在监听document，改为这个
-  z-index: 2000;
+ .maskZIndex;
   position: absolute;
   width: 100%;
   height: 100%;
@@ -56,11 +57,11 @@
     }
   }  
   .closeIcon{
+    .contentZIndex1;
     cursor: pointer;
     position: absolute;
     top: 14px;
     right: 10px;
-    z-index: 100;
     vertical-align: text-top;
   }
 }

src/common/components/ConfirmModal/index.less

@@ -1,5 +1,7 @@
 @import "~@less/mixin.less";
+@import "~@less/variables.less";
 .modal {
+    .maskContentZIndex1;
     position: fixed;
     top: 50%;
     left: 50%;
@@ -7,7 +9,6 @@
     border-radius: 5px;
     background: #fff;
     overflow: hidden;
-    z-index: 1999;
 }
 
 .modal-title {
@@ -74,6 +75,7 @@
 }
 
 .mask {
+    .maskZIndex;
     position: fixed;
     top: 0;
     left: 0;
@@ -83,5 +85,4 @@
     opacity: .6;
     filter:alpha(opacity=60);
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
-    z-index: 1998;
 }

src/common/components/DelToast/index.less

@@ -1,11 +1,11 @@
-// @import "~@less/mixin.less";
+@import "~@less/variables.less";
 .del-box{
+  .contentZIndex1;
   position: absolute;
   width: 206px;
   height: 106px;
   box-shadow: 2px 2px 5px rgba(0,0,0,.4);
   background: #fff;
-  z-index: 66;
   text-align: center;
   padding: 20px;
   right: -30px;

src/common/components/InspectCommon/index.less

@@ -1,8 +1,8 @@
 @import "~@less/variables.less";
 .wrapper {
+    .contentZIndex1;
     position: absolute;
     top: 40px;
-    z-index: 99;
     background-color: #fff;
     padding:28px 8px 8px 8px;
     min-width: 300px;

src/common/components/MiniToast/index.less

@@ -1,9 +1,10 @@
+@import "~@less/variables.less";
 .infoBox{
+  .contentZIndex1;
   position: absolute;
   top:27px;
   width: 388px;
   background: #fff;
-  z-index: 40;
   border: 1px solid #EAEDF1;
   /*box-shadow: 0 5px 10px 0 rgba(0,0,0,0.10);*/
   box-shadow: 0 10px 20px 0 #989DA3;

src/common/components/Notify/index.less

@@ -2,7 +2,7 @@
   position: fixed;
   left: 0;
   top: 0;
-  z-index: 10000;
+  z-index: 200;
 }
 .notify-bg {
   position: fixed;

src/common/components/SearchOption/index.less

@@ -1,12 +1,12 @@
 @import "~@less/variables.less";
 
 .search {
+    .contentZIndex1;
     width: 316px;
     padding: 8px;
     box-sizing: border-box;
     position: absolute;
     top: 30px;
-    z-index: 99;
     background-color: #fff;
     // margin-bottom: 80px;
     .llStyle;
@@ -39,7 +39,6 @@
     .clearVal{
         cursor: pointer;
         right: 18px;
-        z-index: 200;
     }
 }
 .show {

src/common/components/WrapModalContainer/index.less

@@ -1,6 +1,7 @@
+@import "~@less/variables.less";
 .container {
+  .maskZIndex;
   position: fixed;
-  z-index: 2000;
   width: 100%;
   height: 100%;
   .shade {

src/common/less/variables.less

@@ -73,7 +73,7 @@
   box-shadow: 0 10px 20px 0 #989DA3;
   // filter:progid:DXImageTransform.Microsoft.Shadow(color='#989DA3',Direction=125,Strength=6);
   border: 1px solid #dedede;
-  z-index: 203;
+  z-index: 20;
   padding: 20px;
   white-space: nowrap;
 }
@@ -269,3 +269,21 @@
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
   z-index: 999;
 }
+.maskZIndex {
+  z-index: 100;
+}
+.maskContentZIndex1 {
+  z-index: 110;
+}
+.maskContentZIndex2 {
+  z-index: 120;
+}
+.contentZIndex1 {
+  z-index: 10;
+}
+.contentZIndex2 {
+  z-index: 20;
+}
+.contentZIndex3 {
+  z-index: 30;
+}

src/components/AddAssistCheck/Textarea/index.less

@@ -11,7 +11,7 @@
   resize: none;
   font-family: inherit;
   position: relative;
-  z-index: 10;
+  // z-index: 10;
   word-break: break-all;
   word-wrap:break-word;
 }

src/components/Banner/index.jsx

@@ -100,7 +100,7 @@ class Banner extends Component {
     const {showConfigModal, closeConfigModal, changeType, confirmType} = this;
 
     return (
-      <div className={style["logo"]} style={{zIndex:disVisible||copyVisible?40:zIndex}}>
+      <div className={style["logo"]} >
         <img src={logo} />
         <span className={style["logo-name"]}>|&nbsp;&nbsp;智能辅助临床决策系统</span>
         <div className={style["buon"]}>

src/components/Banner/index.less

@@ -1,6 +1,7 @@
 @import "~@less/variables.less";
 
 .logo{
+    .contentZIndex3;
     background: linear-gradient(-90deg, #93CEE3 7%,#3B9ED0 98%);
     background-image: url("../../common/images/bar.png");
     height: 50px;

src/components/CopyRight/CopyModalSon/index.less

@@ -1,5 +1,6 @@
-
+@import "~@less/variables.less";
       .copyContent{
+        .maskContentZIndex1;
         position: fixed;
         width: 820px;
         left: 50%;
@@ -7,7 +8,6 @@
         margin-left: -410px;
         background: #fff;
         height: 60%;
-        z-index: 1000;
         padding: 80px 0 40px;
         img{
           cursor: pointer;
@@ -52,6 +52,7 @@
         }
       }
       .shade {
+        .maskZIndex;
         position: fixed;
         left: 0;
         top: 0;
@@ -59,7 +60,6 @@
         bottom:0;
         background: #000;
         opacity: 0.6;
-        z-index: 999;
         filter:alpha(opacity=60);
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
       }

src/components/CopyRight/DiscontentSon/index.less

@@ -1,13 +1,13 @@
 @import "~@less/mixin.less";
-
+@import "~@less/variables.less";
       .disContent{
+        .maskContentZIndex1;
         position: fixed;  
         width: 50%;
         height: 60%;
         left: 25%;
         background: #fff;
         top: 20%;
-        z-index: 1000;
         padding: 40px 0 60px 0;
         img{
           cursor: pointer;
@@ -76,12 +76,12 @@
       }
       
     .shade {
+      .maskZIndex;
       position: fixed;
       left: 0;
       top: 0;
       right: 0;
       bottom:0;
-      z-index: 999;
       background: #000;
       opacity: 0.6;
       filter:alpha(opacity=60);

src/components/CopyRight/index.less

@@ -2,7 +2,6 @@
 .container {
   position: absolute;
   bottom: 0px;      //页面布局
-  z-index: 40;
   width: 450px;
   .disTips{
     padding: 10px 20px 0px 20px;

src/components/DiagResultSearch/index.less

@@ -1,11 +1,11 @@
 @import "~@less/variables.less";
 .search-box {
+    .contentZIndex1;
     position: absolute;
     top: 20px;
     width: 316px;
     // box-shadow: 0 6px 20px 0 #989DA3;
     background: #fff;
-    z-index: 99;
     margin-bottom: 80px;
     
 }

src/components/EmergencyProcedure/EmergencyModal/index.less

@@ -1,4 +1,5 @@
 @import "~@less/mixin.less";
+@import "~@less/variables.less";
 
 .emergencyProdure {
   position: fixed;
@@ -6,7 +7,6 @@
   bottom: 10px;
   width: 450px;
   right: 10px;
-  z-index: 202;
   padding: 15px;
   background-color: #fff;
   .modalTop {
@@ -45,7 +45,6 @@
     left: 10px;
     padding: 10px;
     box-sizing: border-box;
-    z-index: 20;
     background-color: #fff;
     box-shadow: 0 10px 20px 0 #989DA3;
     border: 1px solid #dedede;
@@ -70,10 +69,10 @@
     color: #2A9BD5;
   }
   .imageModalWrap {
+    .maskZIndex;
     position: fixed;
     left: 0;
     top: 0;
-    z-index: 300;
     width: 100%;
     height: 100%;
     background-color: #000;
@@ -82,10 +81,10 @@
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
   }
   .imageModal {
+    .maskContentZIndex1;
     position: fixed;
     background-color: #fff;
     overflow: hidden;
-    z-index: 500;
     width: 900px;
     padding-top: 30px;
     box-sizing: border-box;
@@ -107,11 +106,11 @@
     }
   }
   .dragImgWrap {
+    .contentZIndex1;
     width: 100%;
     height: 30px;
     line-height: 36px;
     text-indent: 1em;
-    z-index: 502;
     background-color: transparent;
     position: absolute;
     top: 0;
@@ -122,7 +121,6 @@
     position: absolute;
     top: 6px;
     right: 10px;
-    z-index: 800;
   }
 }
 .imageModalWrap {

src/components/EmergencyProcedure/index.less

@@ -1,5 +1,7 @@
+@import "~@less/variables.less";
 .emergencyProdureWrap {
   .emergencyWrap {
+    .contentZIndex1;
     moz-user-select: -moz-none;
     -moz-user-select: none;
     -o-user-select: none;
@@ -8,7 +10,6 @@
     -ms-user-select: none;
     user-select: none;
     position: fixed;
-    z-index: 202;
     top: 55px;
     right: 20px;
     width: auto;
@@ -44,11 +45,9 @@
     line-height: 40px;
     position: absolute;
     left: 0;
-    z-index: 101;
     text-align: center;
     border-radius: 50%;
     color: #fff;
-    z-index: 100;
     background-color: #F93333;
   }
 }

src/components/HistoryCaseContainer/index.less

@@ -3,7 +3,7 @@
      position: fixed;
     left: 0;
     top: 0;
-    z-index: 241;
+    z-index: 100;
     width: 100%;
     height: 100%;
     background-color: #000;

src/components/InfoTitle/index.jsx

@@ -52,7 +52,7 @@ class InfoTitle extends Component {
     render() {
         const {disVisible,copyVisible,winWidth,loading} = this.props;
         const {le} = this.state;
-        return <div className={style['title-wrapper']} style={{zIndex:disVisible||copyVisible?40:204,left:le}}>
+        return <div className={style['title-wrapper']} >
             <PatInfoContainer sizeFlag={winWidth <= 1065?true:false}/>
             <div className={style["operations"]} onClick={this.showHistoryBox}>
                 <span><img src={historyCase} />&nbsp;历史病历</span>

src/components/InfoTitle/index.less

@@ -1,5 +1,6 @@
 @import "~@less/variables.less";
 .title-wrapper{
+  .contentZIndex2;
   overflow: hidden;
   /*padding: 12px 20px 8px 20px;*/
   margin-bottom: 40px;
@@ -9,7 +10,6 @@
   left: 10px;
   top: 50px;
   right: 470px;
-  z-index: 204;
   min-width: 548px;
 }
 .operations, .health{

src/components/Inspect/index.less

@@ -14,7 +14,7 @@
         line-height: 30px;
         text-align: center;
         position: relative;
-        z-index: 8;
+        z-index: 10;
     }
     .button {
         float: right;
@@ -23,7 +23,7 @@
         // overflow: hidden;
         margin-top: -3px;
         position: relative;
-        z-index: 99;
+        z-index: 10;
     }
     .disabledBtn{
         float: right;
@@ -87,7 +87,7 @@
   width: 120%;
   top: 29px;
   left: 0;
-  z-index: 99;
+  z-index: 10;
   font-size: 12px;
   box-shadow: 0 10px 20px 0 #989DA3;
   border: 1px solid #dedede;

src/components/Operation/index.jsx

@@ -326,7 +326,7 @@ class Operation extends Component {
     const { visible, preVisible,diagShow } = this.props.print;
     const {winWidth} = this.props;
     const {zIndex,type,le} = this.state;
-    return <div className={style['container']} style={{zIndex:zIndex,left:le}}>
+    return <div className={style['container']} style={{left:le}}>
       <span className={style['button']} onClick={showPrint}><img src={printImg} /> 打印病历</span>
       <span className={style['preButton']} onClick={showPreview}><img src={preview} /> 预览</span>
       <span className={style['preButton']} onClick={() => { this.saveHis(3) }}><img src={saveHistory} /> 保存病历模板</span>

src/components/Operation/index.less

@@ -1,5 +1,6 @@
 @import "~@less/variables.less";
 .container {
+    .contentZIndex2;
     padding-left: 80px;
     padding-top: 10px;
     position: fixed;

src/components/PushContainer/index.less

@@ -5,7 +5,7 @@
   width: @push-width;
   float: right;
   padding-top: 20px;
-  z-index: 200;
+  // z-index: 200;
   position: relative;
   // position: fixed;     
   // top: 50px;

src/components/PushItems/DetailsModal/index.less

@@ -1,10 +1,12 @@
+@import "~@less/variables.less";
 .details-wrapper {
+    .maskZIndex;
     position: fixed;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
-    z-index: 205;
+  
     img {
         max-width: 100%;
     }

src/components/PushItems/index.less

@@ -66,33 +66,6 @@
       }
     }
   }
-  .show {
-    float: right;
-    color:  #58ACD7;;
-    font-size: 14px;
-    cursor: pointer;
-    img {
-      width: 12px;
-      height: 12px;
-    }
-  }
-  .close{
-    float: right;
-    text-align: right;
-    color: #58ACD7;
-    font-size: 14px;
-    cursor: pointer;
-    clear: both;
-    img {
-      width: 12px;
-      height: 12px;
-    }
-    .close-modal {
-      width: 40px;
-      height: 40px;
-      margin-right: -10px;
-    }
-  }
   .recommend {
     border:1px solid #EAEDF1;
     margin-bottom: 15px;
@@ -126,230 +99,6 @@
       padding:6px 0px 6px 15px;
     }
   }
-  .tips{
-    border:1px solid #EAEDF1;
-    .tips-title,h1{
-      font-size: 14px;
-      color: #000;
-      padding: 8px 15px;
-      background: #EAF7FA;
-      font-weight: bold;
-      img {
-        float:left;
-        margin-top: 0px;
-        margin-right: 5px;
-      }
-    }
-    .tips-title{
-      .tips-name{
-        width: 255px;
-        display: inline-block;
-      }
-      h2{
-        display: inline-block;
-      }
-      .tips-btn{
-        display: inline-block;
-        float: right;
-      }
-      .redTips{
-        display: inline-block;
-        font-size: 12px;
-        -webkit-transform:scale(0.9);
-        color: red;
-        font-weight: normal;
-        white-space: nowrap;
-      }
-      .tipsDetails {
-        .btnCom;
-        display: inline-block;
-        font-weight: normal;
-        width: 42px;
-        height: 20px;
-        border: 1px solid #262626;
-        font-size: 12px;
-        // color: #3B9ED0;
-        color: #262626;
-        line-height: 18px;
-        margin: 0 0 -2px 10px;
-      }
-    }
-    .chronic{
-      background: rgba(242,150,91,0.1);
-    }
-    .content{
-      font-size: 14px;
-      padding:6px 15px;
-      .title {
-        font-size: 14px;
-        line-height: 18px;
-        margin-bottom:10px;
-        a{
-          .btnCom;
-          display: inline-block;
-          font-size: 14px;
-          color: #3B9ED0;
-          width: 42px;
-          border: 1px solid #3B9ED0;
-          margin-left: 10px;
-          text-decoration: none;
-        }
-        .tips-details {
-          .btnCom;
-          display: inline-block;
-          width: 42px;
-          height: 20px;
-          border: 1px solid #3B9ED0;
-          font-size: 14px;
-          color: #3B9ED0;
-          line-height: 18px;
-          margin: 0 10px -2px;
-        }
-      }
-      .warn{
-        padding: 10px 0px 0px 0px;
-        font-size: 10px;
-        color: #979797;
-        text-align: center;
-      }
-      .list{
-        border-bottom: 1px solid #EAEDF1;
-        padding-bottom: 10px;
-        position: relative;
-        .infoPic{
-          vertical-align: middle;
-          margin: 0 5px;
-        }
-        >p{
-          margin-top: 10px;
-        }
-        .listName{
-          color:#3B9ED0;
-        }
-        .listResult{
-          float: right;
-          color: #000012;
-          i{
-            color: #F98F24;
-          }
-          img{
-            vertical-align: middle;
-          }
-        }
-      }
-      
-      .list:last-child{
-        border-bottom:none;
-      }
-    }
-  }
-  .modal {
-    .shade {
-      position: fixed;
-      left: 0;
-      top:0;
-      right: 0;
-      bottom: 0;
-      background: #000;
-      opacity: 0.3;
-      filter:alpha(opacity=30);
-      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30);";
-      z-index: 3000;
-    }
-    .content {
-      position: fixed;
-      left: 50%;
-      top: 50%;
-      margin: -150px 0px 0px -95px;
-      width: 300px;
-      height: 190px;
-      border-radius: 5px;
-      background: #fff;
-      z-index: 3001;
-      padding: 0px 10px;
-      .close {
-        height: 50px;
-        img{
-          float: right;
-          cursor: pointer;
-        }
-      }
-      
-      .message {
-        height: 70px;
-        padding:10px 30px;
-        text-align: center;
-        font-size: 16px;
-      }
-      .btn {
-        .initial {
-          width: 90px;
-          height: 30px;
-          border: 1px solid #3B9ED0;
-          float: left;
-          border-radius: 4px;
-          text-align: center;
-          line-height: 30px;
-          color: #3B9ED0;
-          font-size: 14px;
-          cursor: pointer;
-          margin-left: 20px;
-        }
-        .repetition {
-          width: 90px;
-          height: 30px;
-          border: 1px solid #3B9ED0;
-          float: right;
-          border-radius: 4px;
-          text-align: center;
-          line-height: 30px;
-          color: #3B9ED0;
-          font-size: 14px;
-          cursor: pointer;
-          margin-right: 20px;
-        }
-      }
-    }
-  }
-  .tipsModal {
-    .shade {
-      position: fixed;
-      left: 0;
-      top:0;
-      right:0;
-      bottom: 0;
-      background: #000;
-      opacity: 0.6;
-      filter:alpha(opacity=60);
-      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
-      z-index: 2000;
-    }
-    .message{
-      padding: 10px 20px;
-      overflow: auto;
-    }
-    .content {
-      position: fixed;
-      left: 50%;
-      top:65px;
-      right:0;
-      bottom: 65px;
-      margin-left: -410px;
-      width: 820px;
-      z-index: 2001;
-      background: #fff;
-      padding: 0px;
-      .close {
-        padding: 10px 20px;
-        border-bottom: 1px solid #EAEDF1;
-        img{
-          float: right;
-          margin: -5px -14px 0px 0px;
-          cursor: pointer;
-        }
-      }
-    }
-  }
 }
 .diag-item {
   display: inline-block;
@@ -366,60 +115,3 @@
   text-align: center;
 }
 
-.toast-title{
-  position: absolute;
-  top: 17px;
-  font-size: 16px;
-  // border-bottom: 1px solid #666;
-  width: 87%;
-  height: 25px;
-}
-.toast-cont{
-  line-height: 24px;
-  font-size: 14px;
-  // margin-top: 15px;
-  height: 222px;
-  overflow-y: auto;
-  padding: 10px 0 0 10px;
-  li{
-    margin-top: 10px;
-    cursor: pointer;
-  }
-}
-.footer{
-  .print{
-    .btnCom;
-    width: 111px;
-    height: 34px;
-    line-height: 34px;
-    // outline: none;
-    // border-radius: 4px;
-    /*color: #3B9ED0;*/
-    border: 0 none;
-    // cursor: pointer;
-    background: #fff;
-    margin-right: 20px;
-    img{
-      width: 20px;
-      vertical-align: middle;
-      margin-right: 4px;
-    }
-  }
-  .okBtn{
-    .btnCom;
-    width: 80px;
-    height: 34px;
-    line-height: 32px;
-    // text-align: center;
-    // outline: none;
-    // border-radius: 4px;
-    // cursor: pointer;
-    border: 1px solid #3B9ED0;
-    box-sizing: border-box;
-    margin-left: 20px;
-    background: #3B9ED0;
-    color: #fff;
-    float: right;
-    margin-right: 20px;
-  }
-}

src/components/Treat/index.jsx

@@ -58,8 +58,8 @@ class Treat extends Component {
     }
    
     setTreatBox(){
-      $('#dragModalWrap').css({'z-index': 302});
-      $('#drugWrapper').css({'z-index': 301});
+      $('#dragModalWrap').css({'z-index': 120});
+      $('#drugWrapper').css({'z-index': 110});
     }
     render(){
         const {setDrugInfoMore,treatIndex,treatIndexSet, generalTreat, treatment, treatItem, surgeryTreat, drugHistory, 

src/components/Treat/index.less

@@ -1,32 +1,34 @@
 @import "~@less/mixin.less";
+@import "~@less/variables.less";
 .treat-wrapper{
+    .maskZIndex;
     position: fixed;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
-    z-index: 300;
 }
 .close {
+  .contentZIndex1;
   position: absolute;
-  z-index:9999;
   top: 0;
   right: 0;
   cursor: pointer;
 }
 .treat-mask {
+    .maskZIndex;
     position: fixed;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
-    z-index: 300;
     background: #000;
     opacity: 0.6;
     filter:alpha(opacity=60);
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
 }
 .treat-box {
+    .maskContentZIndex1;
     position: fixed;
     background: #fff;
     width: 680px;
@@ -34,7 +36,6 @@
     top: 10%;
     height: 80%;
     margin-left: -340px;
-    z-index: 301;
     padding-top: 40px;
     padding-bottom: 80px;
     box-shadow: 0px 0px 5px -2px #7d7c7c;

src/components/TreatDesc/DrugInfo/index.jsx

@@ -48,8 +48,8 @@ class DrugInfo extends Component {
         }
     }
     setDragBox(){
-      $('#dragModalWrap').css({'z-index': 301});
-      $('#drugWrapper').css({'z-index': 302});
+      $('#dragModalWrap').css({'z-index': 110});
+      $('#drugWrapper').css({'z-index': 120});
     }
     render() {
         const { drugInfo, hideDrugInfo, drugInfoList,hideDrugInfoMore } = this.props

src/components/TreatDesc/DrugInfo/index.less

@@ -1,4 +1,6 @@
+@import "~@less/variables.less";
 .drug-info-wrapper {
+    .maskContentZIndex2;
     position: fixed;
     overflow: hidden;
     width: 950px;
@@ -7,7 +9,6 @@
     top: 10%;
     margin-left: -475px;
     background: #fff;
-    z-index: 303;
     padding: 40px 0 60px;
     box-shadow: 0px 0px 5px -2px #7d7c7c;
     word-break: break-all;
@@ -36,10 +37,10 @@
     user-select:none;
 }
 .close-drug-desc {
+    .contentZIndex1;
     position: absolute;
     right: 0;
     top: 0;
-    z-index: 9999;
     width: 40px;
     cursor: pointer;
 }

src/modules/HomePage/index.less

@@ -8,7 +8,7 @@
     opacity: .4;
     filter:alpha(opacity=40);
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40);";
-    z-index: 9998;
+    z-index: 100;
 }
 .load{
     width: 40px;