*{ outline:none; font-family: Arial, Helvetica, sans-serif; }
html,body{ height:calc( 100% - 20px ); }
body{ background-color:#ffffff; transition: background-color 1s; }
.bodyScroll{ background-color:#ffffff; transition: background-color 2s; }
img{ -webkit-user-drag:none; user-select:none; user-drag:none; }
red{ color:red; }


/*创建订单的页面*/
.addBillHtml{ background-color:#eeeeee; padding:0; margin:0; height:100%; }
.addBillHtml body{ margin:0 calc( 50% - 680px ) 0 calc( 50% - 680px ); min-height:100%; padding:0 20px 0 20px;
    box-shadow: 0 0 15px #dddddd; display:inline-table; }


a{ color: #1890ff; }
a:link		{ color: #1890ff; text-decoration: none }
a:visited	{ color: #1890ff; text-decoration: none }
a:active	{ color: #1890ff; text-decoration: none }
a:hover		{ color: #cc0000; text-decoration: none }


.eicAutoSelect{ position:absolute; height:125px; top:-10000px; background-color:#ffffff;
    margin:4px 0 4px 0; padding:0; border:1px solid #58aaf9; box-shadow: 0 0 6px #58aaf9; }
.eicAutoSelect option{ margin:0; padding:5px 8px 3px 5px; line-height:30px; }
.eicAutoInput{ border:1px solid #58aaf9!important; box-shadow: 0 0 3px #58aaf9!important; }

.型号,.厂商{ text-transform: uppercase; }


.childDiv{ background-color:#ffffff; clear:both; margin:15px 15px 30px 15px; display:inline-block; width:calc( 100% - 30px );
    border-radius:8px; min-height:calc( 100% - 45px ); min-width:1000px; transition: 0.01s; }

/*加载*/
.loading{ clear:both; line-height:20px; font-size:14px; color:#333333; text-align:center; padding:20px; }
.loading loadingImg{ background-image:url('/static/img/public/loading.png'); background-repeat:no-repeat; min-width:20px;
    min-height:20px; display:inline-block; background-size:auto 100%; clear:both; animation: rotate 2s infinite linear;
    position:relative; top:5px; margin-right:5px; }
@keyframes rotate {
    from { transform: rotate(0deg);background-size:auto 100%; }
    to { transform: rotate(360deg);background-size:auto 100%; }
}

textarea{
    border:1px solid #d4d4d4; border-radius:3px; line-height:25px;padding:2px 5px 2px 5px; color:#1d77d8;
    transition:box-shadow 0.2s; resize:none;
}
textarea:hover {
    border:1px solid #90c8f5; box-shadow: 0 0 3px #90c8f5; transition:box-shadow 0.2s; }
textarea:focus{
    border:1px solid #58aaf9; box-shadow: 0 0 3px #58aaf9; }




select{ border:1px solid #d4d4d4; height:31px; border-radius:3px; padding:0 8px 0 8px; color:#1d77d8; transition:box-shadow 0.2s; }
select:hover { border:1px solid #90c8f5; box-shadow: 0 0 3px #90c8f5; transition:box-shadow 0.2s; }
select:focus{ border:1px solid #58aaf9; box-shadow: 0 0 3px #58aaf9; }



input[type='radio'] { transition:box-shadow 0.2s; border:1px solid #90c8f5; }
input[type='radio'] :hover { box-shadow: 0 0 3px #90c8f5; transition:box-shadow 0.2s; }
input[type='radio'] :checked{ box-shadow: 0 0 3px #58aaf9; background-color: red; }




input[type='text'], input[type='password'], input:not([type]) {
    border:1px solid #d4d4d4; height:25px; border-radius:3px; line-height:25px;padding:2px 5px 2px 5px; color:#1d77d8;
    transition:box-shadow 0.2s; }
input[type='text']:hover, input[type='password']:hover, input:not([type]):hover {
    border:1px solid #90c8f5; box-shadow: 0 0 3px #90c8f5; transition:box-shadow 0.2s; }
input[type='text']:focus, input[type='password']:focus, input:not([type]):focus{
    border:1px solid #58aaf9; box-shadow: 0 0 3px #58aaf9; }

.buttonDisabled{ padding:3px 16px 3px 16px!important; background-color:#dddddd!important; color:white!important; transition:0s!important; border:0!important; cursor:default!important; }
.buttonDisabled:hover{ padding:3px 16px 3px 16px!important; background-color:#dddddd!important; color:white!important; transition:0s!important; border:0!important; cursor:default!important; }
.buttonDisabled:active{ padding:3px 16px 3px 16px!important; background-color:#dddddd!important; color:white!important; transition:0s!important;transform:scale(1)!important; cursor:default!important; }

.selectDisabled{ padding:0 8px 0 8px!important; color:#333333!important; transition:0s!important; border:0!important; cursor:default!important; box-shadow:none; }
.selectDisabled:hover{ padding:0 8px 0 8px!important; color:#333333!important; transition:0s!important; border:0!important; cursor:default!important; box-shadow:none; }
.selectDisabled:active{ padding:0 8px 0 8px!important; color:#333333!important; transition:0s!important;transform:scale(1)!important; cursor:default!important; box-shadow:none; }



button[primary] { line-height:25px; background-color:#2a96f9; color:#ffffff; border-radius:3px; letter-spacing:2px;
    padding:3px 16px 3px 16px; cursor:pointer; transition:background-color 0.2s; border:0; }
button[primary]:hover{ background-color:#4fadfa; transition:background-color 0.2s; }
button[primary]:active{ background-color:#1d77d8; transition:background-color 0.1s; transform:scale(0.97); }

button:not([primary]) { line-height:25px;background-color:#ffffff; color:#333333; border-radius:3px; letter-spacing:2px;
    padding:2px 15px 2px 15px; cursor:pointer; transition:background-color 0.2s; border:1px solid #cccccc;  }
button:not([primary]):hover{ color:#4fadfa; transition:color 0.2s; border:1px solid #4fadfa; }
button:not([primary]):active{ color:#1d77d8; transition:color 0.1s; border:1px solid #1d77d8; transform:scale(0.97); }




/*日期控件*/
.selectDay{ text-align:center!important; width:88px!important; cursor:pointer; }
.selectDayX{ display:inline-block; color:#666666; font-size:15px; margin:0 8px 0 8px; }


/*通用样式*/
.divFrom{clear: both; margin-bottom: 10px; border: 1px solid #c9dfe7; background-color: #f2fafd;
    padding: 10px; border-radius:5px; display:inline-block; width:calc( 100% - 20px ); }


/*autoCrm*/
.autoCrmCompanyName { width:250px; margin-right:15px; }
.autoCrmLinkMan { width:80px; margin-right:15px; }
.autoCrmMobile { width:150px; margin-right:15px; }

/*
    inputGroup

    <div class="inputGroup">
        <input type="text" value="" class="input" placeholder="" />
        <label class="placeholder">型号名称</label>
    </div>
*/
.inputGroup { position: relative; display:inline-table; }
.inputGroup input{ padding: 10px!important;background: #ffffff;outLine: none; color:#1d77d8; border: 1px solid #cccccc;
    border-radius: 3px; height:15px!important; font-size:13px; }
.inputGroup .placeholder { position: absolute; top: 9px; left: 13px; font-size: 13px; padding: 0; color: #999999;
    transition:0.15s; pointer-events: none; z-index:3; }
.inputGroup .must::after{ content:"*"; color:#cc5458; position:relative; left:3px; top:2px; }
.inputGroup input:focus + .placeholder{ top: -10px; background: linear-gradient(0deg, white 50%, transparent 50%); color: #0da2ff!important; font-size: 12px;
    padding: 0 5px; left: 8px; border-radius:5px 5px 0 0; }
.inputGroup input:not(:placeholder-shown)+ .placeholder{ top: -10px; background: linear-gradient(0deg, white 50%, transparent 50%); color: #aaaaaa; font-size: 12px;
    padding: 0 5px; left: 8px; border-radius:5px 5px 0 0; }
.inputGroup .shownPlaceholder +.placeholder{ top: -10px; background: linear-gradient(0deg, white 50%, transparent 50%); color: #aaaaaa; font-size: 12px;
    padding: 0 5px; left: 8px; border-radius:5px 5px 0 0; }
.inputGroup input:focus + .must::after{ content:""; }
.inputGroup input:not(:placeholder-shown)+ .must::after{ content:""; }



/*
    inputSelect

    <div class="inputSelect">
        <select v-model="dataValue.input.moneyTypeId" @change="allEvent.postEvent">
            <option v-for="aMoney in dataValue.moneyTypeList" :value="aMoney.moneyTypeId">(( aMoney.moneyTypeName ))</option>
        </select>
        <label class="placeholder">货币</label>
    </div>
*/

.inputSelect { display:inline-table; position:relative; border: 1px solid #cccccc; border-radius: 3px;
    background-color:#ffffff; padding-right:6px; padding-left:8px; transition:box-shadow 0.2s; }
.inputSelect:hover{ border: 1px solid #90c8f5; box-shadow: 0 0 3px #90c8f5; }

.inputSelect select{ color:#1d77d8; border: 0!important; height:35px!important; background-color:#ffffff; transition:none; padding:0!important; margin:0!important;  }
.inputSelect select:hover{ border: 0; box-shadow:none;  }
.inputSelect select:focus{ border: 0; box-shadow:none; }

.inputSelect .placeholder { position: absolute; left: 8px; font-size: 12px; padding: 0 5px; color: #bbbbbb;
    transition:0.3s; pointer-events: none; z-index:3; top: -10px; background: linear-gradient(0deg, white 50%, transparent 50%); }
.inputSelect select:focus + .placeholder{ top: -10px; background: linear-gradient(0deg, white 50%, transparent 50%); color: #0da2ff!important; font-size: 12px; }




/*侧滑窗口*/
#winLayerMask{ position:fixed; z-index:31000; left:-100000px; top:0; background-color:#000000; width:100%; height:100%; opacity:0; }
.winLayerMaskShow{ opacity:0.2!important; left:0!important; transition:opacity 0.15s; }

#winLayerWindow{ position:fixed; z-index:31001; left:-100000px; top:0; background-color:#ffffff; width:0; height:100%;
    max-width:calc( 100% - 100px ); box-shadow: -10px 0 10px -5px rgba(0, 0, 0, 0.2); }
.winLayerWindowShow{ right:0!important; left:auto!important; width:900px!important; transition:width 0.1s ease 0.15s; }
#winLayerWindow iframe{ width:100%; height:100%; border:0; }

.winLayerWindowShow .winLayerCloseImg{ position:absolute; opacity:1; z-index:32000; cursor:pointer;
    padding:7px 8px 9px 11px; background-color:#ffffff; height:15px; width:17px; transform:translateX(-100%);
    border-bottom-left-radius:50%; box-shadow: -10px 0 10px -5px rgba(0, 0, 0, 0.2); }
.winLayerWindowShow .winLayerCloseImg:hover{ background-color:#eeeeee; transition:0.2s; }
.winLayerWindowShow .winLayerCloseImg:active{ background-color:#ffffff; }
.winLayerWindowShow .winLayerCloseImg img{ width:16px; filter:grayscale(100%);}
.winLayerWindowShow .winLayerCloseImg:hover img{ filter:grayscale(0); transform:scale(1.07); }
.winLayerWindowShow .winLayerCloseImg:active img{ filter:grayscale(0); transform:scale(0.9); }