:root {
    /* 背景颜色 */
    --bgColor: #e6e6e6;
    --bgColor2: #cecece;

    /* 链接颜色 */
    --linkColor: rgba(146, 65, 118, 0.79);
    --visitedColor: gray;
    --hoverColor: blue;
    --activeColor: black;

    /* 字体 */
    --txtFontFamily: 微软雅黑;
    --txtFontSize: 14px;

    /* 边距 */
    --divPadding: 10px;
    --lineTop: 6px;

    /* 按钮 */
    --btBgColor: #5fbeaa;
    --btColor: #fff;

    /* 边框 */
    --bdBgColor: rgba(230, 230, 230, 0.3);

    --border:   1px solid var(--bgColor);   /* 厚度 样式 颜色 */
    --bdRadius: 2px;
    --bdRadiusLeft: 2px 0 0 2px;
    --bdRadiusRight:0 2px 2px 0;

    --bdPadding: 0 8px;  /* 内边距 */

    /* 表单控件 */
    --inputLeft:   -1px;
    --inputHeight: 30px;
    --selectWidth: 120px;
}

body { font-family: var(--txtFontFamily); padding: 0; margin: 0;  }

a         { text-decoration: none;  }
a:link    { color: var(--linkColor);   }   /* 未访问链接*/
a:visited { color: var(--visitedColor);}   /* 已访问链接 */
a:hover   { color: var(--hoverColor);  }   /* 鼠标移动到链接上 */
a:active  { color: var(--activeColor); }   /* 鼠标点击时 */

svg { }
svg path { fill: var(--linkColor); }

ul { list-style-type: none; padding: 0; margin: 0; }
li { margin-bottom: var(--lineTop); }

fieldset {
    margin: 40px auto;
    border: var(--border); border-radius: var(--bdRadius); padding: var(--divPadding);
}
fieldset legend { padding: var(--bdPadding); letter-spacing: 2px; }

line_1 { display: inline-block; margin-bottom: 5px; background-color: #59afcd; color: #fff; border-radius: 3px; padding: 3px 10px; }

lineLeft  { position: relative; display: flex; justify-content: flex-start; }
lineRight { position: relative; display: flex; justify-content: flex-end;   }

 lineLeft + lineLeft
,lineLeft + lineRight
,lineRight + lineLeft { margin-top: var(--lineTop); }

label {
    box-sizing: border-box;
    height: var(--inputHeight); line-height: var(--inputHeight); font-size: var(--txtFontSize); text-align: right;
    border: var(--border); border-radius: var(--bdRadiusLeft); padding: var(--bdPadding);
    background-color: var(--bdBgColor);
}

input {
    box-sizing: border-box;
    width: var(--selectWidth);
    height: var(--inputHeight); line-height: var(--inputHeight); font-size: var(--txtFontSize);
    border: var(--border); border-radius: var(--bdRadiusRight); padding: var(--bdPadding); margin-left:var(--inputLeft);
}
select {
    box-sizing: border-box;
    width:  var(--selectWidth); background: #ffffff;
    height: var(--inputHeight); line-height: var(--inputHeight); font-size: var(--txtFontSize);
    border: var(--border); border-radius: var(--bdRadiusRight); padding: var(--bdPadding); margin-left:var(--inputLeft);
}
textarea {
    box-sizing: border-box;
    width:  600px;
    height: 200px; line-height: 20px; font-size: var(--txtFontSize); font-family: var(--txtFontFamily);
    border: var(--border); border-radius: var(--bdRadiusRight); padding: var(--divPadding);
    margin: 0 0 0 -1px ;
}
 input::placeholder
,select::placeholder
,textarea::placeholder {
     font-family: var(--txtFontFamily); font-size: var(--txtFontSize); color: var(--bgColor);
 }
button {
    box-sizing: border-box;
    height: var(--inputHeight); line-height: var(--inputHeight); font-size: var(--txtFontSize); color: var(--btColor);
    border: none; border-radius: 4px; padding: 0 10px; background-color: var(--btBgColor); text-align: center;
}
