.shadowbox { background-color: rgba(0, 0, 0, 0.6); position: fixed; width: 100%; height: 100%; z-index: 1009 } * { box-sizing: border-box; } body { font-family: "SimSun"; } input { font-family: "SimSun"; } .nav-fixed>.shadowbox { z-index: 2; } body>.shadowbox { top: 0px; z-index: 1000; } /* .nav-mobile-right{ min-width: 880px; } */ .nav-mobile-right::after { content: ''; height: 0; /*高度为0*/ line-height: 0; /*行高为0*/ display: block; /*将文本转为块级元素*/ visibility: hidden; /*将元素隐藏*/ clear: both; /*清除浮动*/ } .translatable_sketch_name { margin-left: 0; border-radius: 15px; background: #2940ad; height: 35px; width: 170px; color: #fff; text-indent: 1em; border-bottom: none; } @media screen and (max-width: 1400px) { /* .translatable_help_board { display: none; } */ .translatable_devices { display: none; } .translatable_language { display: none; } .translatable_login_title { display: none; } .translatable_storage { display: none; } .translatable_learn_board { display: none; } .translatable_labscenter { display: none; } #account_alias { display: none; } .translatable_sketch_name { width: 100px; } /* #iot_modules { width: 118px !important; } */ #sketch_name { margin-left: 0 !important; /* width: 100px !important; */ } } .shadow_container { position: relative; top: 6%; height: -moz-calc(100vh - 145px); /* Firefox */ height: -webkit-calc(100vh - 145px); /* WebKit */ height: -o-calc(100vh - 145px); /* Opera */ height: calc(100vh - 105px); /* Standard */ } .shadow_top { position: relative; transform: translate(-50%, -50%); width: 40%; max-width: 490px; border: dashed #fff; top: 50%; left: 50%; pointer-events: none; } .shadow_top>img { position: relative; width: 150px; transform: translateX(-50%); left: 50%; } .shadow_top>p { position: relative; margin: auto; font-size: 2rem; text-align: center; color: ghostwhite; padding-bottom: 20px; } #modal_preload { position: fixed; top: 0; left: 0; z-index: 1003; width: 100%; height: 100%; background-color: rgba(238, 238, 238, 0.3); } .preloader-wrapper { position: absolute; /* top: 30%; left: 45%; */ z-index: 1001; width: 100px; height: 100px; } .preloader-wrapper.big { width: 128px; height: 128px; } .circle-clipper .circle { border-width: 8px; } .container { width: 90%; max-width: initial !important; /*padding-left: 1.5rem; padding-right: 1.5rem;*/ z-index: 997; } .navcontainer { width: 90%; max-width: initial !important; padding-left: 1.5rem; padding-right: 1.5rem; z-index: 997; } .blocklyTreeIcon { background-image: none } .blocklyTreeRoot>div:nth-child(2)>div:nth-child(15) { margin-top: 10px; } .blocklyTreeRoot>div:nth-child(2)>div:nth-child(15)>div:nth-child(1) { padding-left: 0px; border-left: 8px solid rgb(91, 95, 166); color: #FFF; } .blocklyTreeRoot>div:nth-child(2)>div:nth-child(16)>div:nth-child(1) { padding-left: 0px; border-left: 8px solid rgb(91, 95, 166); color: #FFF; } .blocklyTreeRoot>div:nth-child(2)>div:nth-child(17)>div:nth-child(1) { padding-left: 0px; border-left: 8px solid rgb(126, 60, 202); color: #FFF; } .blocklyTreeRow { padding: 0px 16px 0px 0px !important; } /*devices*/ .form-main { box-sizing: border-box; } .form-btn { /* padding: 24px 0; */ text-align: center; height: 85px; line-height: 85px; box-sizing: border-box; } .form_eqmain { padding: 0 40px; } .form_eqtitle { margin: 15px 0; padding: 6px 8px; border-bottom: 1px solid #848484; } .form_eqtitle span { display: inline-block; font-size: 19px; } .form_eqtitle div { float: right; cursor: pointer; } .form_eqtitle div span:first-child { background: url('images/add.png') no-repeat; background-size: 100% 100%; width: 25px; height: 25px; float: left; } .form_eqtitle div span:nth-child(2) { font-size: 14px; color: #5d5d5d; } .form-btn button { width: 110px; height: 42px; margin: 0 55px; border-radius: 35px; outline: none; cursor: pointer; font-size: 16px; text-align: center; } .form-confirm { background: #e05e1f; border: none; color: #FFF; } .form-cencal { color: #000; background: #eaeaea; border: none; text-align: center; } /*表格样式*/ ul, li { list-style: none; margin: 0; padding: 0; } .hs_dp_head { height: 52px; line-height: 52px; text-align: center; /* border-bottom: 2px solid #3b3b3b; */ color: #000; } .hs_dp_head li { width: 100%; /* min-width: 1100px; */ border-left: 2px solid #3b3b3b00; border-right: 2px solid #3b3b3b; } .hs_dp_head li>div { float: left; width: calc(100% - 208px); border-right: 2px solid #ffffff00; text-indent: 1em; text-align: left; } .hs_dp_head li>div:last-child { width: 200px; text-align: center; } .hs_dp_tbody { height: 300px; border-radius: 4px; border-top: 2px solid #dadada; /* background-color: #F7F7F7; */ /* overflow: auto; */ /* height: auto; */ } .hs_dp_tbody li { float: left; width: calc(100% - 0px); height: 36px; line-height: 36px; border-bottom: 2px solid #dadada; border-left: 2px solid #dadada; border-right: 2px solid #dadada; } .hs_dp_tbody li { background: #f3f3f3; cursor: pointer; } .hs_dp_tbody li:hover { background: #eff2ff; } .hs_dp_tbody li>div { float: left; width: calc(100% - 204px); position: relative; font-size: 18px; text-overflow: ellipsis; color: #000000; white-space: nowrap; height: 36px; overflow: hidden; border-right: 2px solid #dadada00; text-indent: 1em; text-align: left; } .hs_dp_tbody li>div:last-child { border-right: none; width: 200px; text-align: center; } .hs_pub_tb { width: 100%; margin: 18px auto 0 auto; /* border: 2px solid #ebebeb; */ /* border-top: none; */ } .table { position: relative; border-collapse: collapse; /* border: solid #3b3b3b; */ /* border-bottom: none; */ /* border-width:1px; */ white-space: nowrap; table-layout: fixed; display: table; } .hs_dp_btnbox span:nth-child(1) { /* background: url(connect.png) no-repeat; */ background-size: 100% 100%; width: 25px; height: 25px; position: absolute; display: inline-block; margin: 5px 0px 0 -12px; } .connect, .disconnect { cursor: pointer; } .connect span:nth-child(1) { background: url(images/connect.png) no-repeat; } .connect span:nth-child(2) { color: #d42929 !important; } .disconnect span:nth-child(1) { background: url(images/disconnect.png) no-repeat; } .hs_dp_btnbox span:nth-child(2) { font-size: 15px; color: #5d5d5d; margin-left: 15px; } .form_eqcontent { margin: 50px auto; width: auto; } .form_eqcontent span {} .form_eqcontent input { width: 270px; height: 30px; padding-left: 8px; margin-left: 20px; } .select-connected { outline: 0; position: relative; color: #6f6f6f; font-weight: 500; width: 100%; height: 30px; border: none; border-bottom: 1px solid #6f6f6f; background: #00000000; display: block; } .select-connected:focus { outline: 0; } .btn-toolbar-title { height: 40px; text-align: left; text-indent: .5em; border-radius: 5px; position: relative; width: 70%; margin-bottom: 10px; } .btn-toolbar-title div { border: 2px solid #adeaeb; height: 4px; border-radius: 5px; position: absolute; bottom: 4px; width: 100%; } .btn-toolbar-title2 { height: 40px; text-align: left; text-indent: .5em; border-radius: 5px; position: relative; width: 70%; margin-bottom: 10px; } .btn-toolbar-title2 div { border: 2px solid #adeaeb; height: 4px; border-radius: 5px; position: absolute; bottom: 4px; width: 100%; } .btn-toolbar-inputbox { width: 70%; height: 55px; box-sizing: content-box; } .btn-toolbar-inputbox input:nth-child(1) { width: calc(97% - 80px); height: 35px; border-bottom: 1px solid #dbdbdb; text-indent: .5em; outline: 0; background: #ffffff00; font-size: 15px; color: #000; /* font-weight: 700; */ float: left; } .btn-toolbar-inputbox input:nth-child(2) { margin-left: 3%; border: 0; height: 35px; line-height: 36px; outline: 0; background: #508cf0; color: #FFF; padding: 0 10px; cursor: pointer; font-size: 15px; font-weight: 500; box-sizing: border-box; float: left; min-width: 50px; border-radius: 3px; box-shadow: 1px 1px 4px #b7b7b7; } .btn-toolbar-inputbox2 { width: 70%; height: 55px; box-sizing: content-box; } .btn-toolbar-inputbox2 select:nth-child(1) { outline: 0; color: #000; width: calc(100% - 245px); border: none; border-bottom: 1px solid #dbdbdb; background: #00000000; display: block; height: 35px; float: left; } .btn-toolbar-inputbox2 button:nth-child(2) { border: 0; height: 35px; line-height: 35px; outline: 0; background: #508cf0; color: #FFF; cursor: pointer; font-size: 15px; font-weight: 500; padding: 0 15px; float: left; margin: 0px 10px 0px 20px; border-radius: 2px; box-shadow: 1px 1px 4px #b7b7b7; } .btn-toolbar-inputbox2 button:nth-child(3) { border: 0; height: 35px; line-height: 35px; outline: 0; background: #e05e1f; color: #FFF; cursor: pointer; font-size: 15px; /* border-radius: 35px; */ font-weight: 500; padding: 0 15px; float: left; border-radius: 3px; box-shadow: 1px 1px 4px #b7b7b7; } .btn-toolbar-btnbox { width: 96%; height: 55px; box-sizing: content-box; position: relative; padding: 0px 0 0 0; } .btn-toolbar-btnbox button:nth-child(1) { border: 0; height: 35px; line-height: 35px; outline: 0; background: #508cf0; color: #FFF; cursor: pointer; font-size: 15px; /* border-radius: 35px; */ font-weight: 500; padding: 0 15px; /* left: 0; */ float: left; margin-right: 15px; /* position: absolute;*/ border-radius: 3px; box-shadow: 1px 1px 4px #b7b7b7; } .btn-toolbar-btnbox button:nth-child(2) { border: 0; height: 35px; line-height: 35px; outline: 0; background: #e05e1f; color: #FFF; cursor: pointer; font-size: 15px; /* border-radius: 35px; */ font-weight: 500; padding: 0 15px; float: left; border-radius: 3px; box-shadow: 1px 1px 4px #b7b7b7; } .select-wrapper span.caret { color: initial; position: absolute; right: 0; top: 0; bottom: 0; height: 10px; margin: auto 0; font-size: 10px; line-height: 10px; display: none; } .injectionDiv:nth-child(2) { display: none; } .injectionDiv:nth-child(3) { display: none; } .selectMode_input { outline: 0; position: relative; color: #fff; font-weight: 500; width: 175px; height: 35px; border-radius: 30px; background: #fff0; border: 2px solid #fff; margin: 15px 0px 0px 0px; display: block; cursor: pointer; text-indent: 1rem; } .down { width: 0; height: 0 !important; overflow: hidden; font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */ line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */ border-width: 5px; border-style: solid; /*ie6下会出现不透明的兼容问题*/ border-color: #fff transparent transparent transparent; position: absolute; top: 15px; right: 10px; cursor: pointer; } .downboxdown { width: 0; height: 0 !important; overflow: hidden; font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */ line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */ border-width: 5px; border-style: solid; /*ie6下会出现不透明的兼容问题*/ border-color: transparent transparent transparent #a2a2a2; position: absolute; top: 15px; right: 0px; cursor: pointer; } .downbox { position: absolute; top: 64px; width: 177px; z-index: 9999; background: #fff; border-radius: 4px; border: 1px solid #e6e6e6; box-shadow: 1px 1px 4px #cccccc; display: none; } .downbox div { /* background: #ffffff; */ width: 100%; border-top: 1px solid #e6e6e6; height: 40px; line-height: 40px; color: #222222; cursor: pointer; font-size: 14px; text-align: center; } .downbox div:first-child { border: none; position: relative; color: #222222; font-family: "微软雅黑"; } .downbox div:first-child:hover { background: #fff; color: #4A6AFF; font-family: "微软雅黑"; } .downbox div:first-child:hover .Hardware2 { display: block; background: #fff; color: #4A6AFF; font-family: "微软雅黑"; } .downbox div:first-child:hover .Hardware3 { display: block; background: #fff; color: #4A6AFF; font-family: "微软雅黑"; } .MouduleBox div a{ background: #fff !important; color: #222222; font-size: 14px; } .MouduleBox div a:hover { color: #4A6AFF !important; font-family: "微软雅黑"; font-size: 14px; } .ModeSelectBox .ModeSelect .downbox-style { position: absolute; top: 63px; width: 200px; margin-left: -88px; z-index: 9999; } /* .downbox div:hover { background: #d6dfff; } */ .Hardware2, .Hardware3,.Hardware4 { position: absolute; width: 100%; z-index: 9999; background: #fff; border-radius: 4px; border: 1px solid #e6e6e6; left: calc(100% + 1px); top: 3px; box-shadow: 1px 1px 4px #b7b7b7; display: none; } .Hardware2 li,.Hardware3 li,.Hardware4 li { width: 100%; border-top: 1px solid #e6e6e6; height: 40px; line-height: 40px; /* text-indent: 1em; */ color: #222222; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-family: "微软雅黑"; } .Hardware2 li:hover,.Hardware4 li:hover { background: #fff; color: #4A6AFF; font-family: "微软雅黑"; font-size: 14px; } .ModeSelect { outline: 0; color: #fff; font-weight: 500; width: auto; height: 100%; padding: 0 25px; background: #fff0; margin: 0px 25px 0px 0px; display: block; cursor: pointer; text-align: center; } .ModeSelectBox .active { background-color: #2847b8; } .ModeSelectBox .active .downbox { display: block !important; } .ModeSelectBox .ModeBox { width: 190%; top: 63px; } .ModeSelectBox .downbox div { position: relative; } .ModeSelectBox .downbox div:hover .Hardware2 { width: 120%; display: block; } .Hardware5:hover .Hardware4,.Hardware6:hover .Hardware4,.Hardware7:hover .Hardware4,.Hardware8:hover .Hardware4,.Hardware9:hover .Hardware4{ display: block; } .qiehuan { width: 225px; position: absolute; top: -60px; left: 230px; display: block; opacity: 1; } .qiehuanposi { top: -108px; left: 167px; } .switch_box { cursor: pointer; display: inline-block; bottom: 0; position: absolute; padding: 0px 6px; color: #2D2F33; width: 140px; text-align: center; } .switch_box1 { cursor: pointer; display: inline-block; bottom: 0; position: absolute; left: 240px; padding: 0px 6px; color: #2D2F33; width: 140px; text-align: center; } .switch_box2 { cursor: pointer; display: inline-block; bottom: 0; position: absolute; left: 450px; padding: 0px 6px; color: #2D2F33; /* width: 125px; */ text-align: center; } .switch_select { background: #fff; /* border-radius: 13px 15px 0px 0px; */ color: #4A6AFF; font-weight: 700; /* width: 125px; */ text-align: center; } #repl_box_content div { word-wrap: break-word; word-break: normal; } @media screen and (max-height: 570px) { .ModeSelectBox .downbox div:hover .Hardware2 { width: 170%; max-height: 155px; overflow: auto; display: block; } .Hardware5:hover .Hardware4,.Hardware6:hover .Hardware4,.Hardware7:hover .Hardware4,.Hardware8:hover .Hardware4,.Hardware9:hover .Hardware4{ display: block; } } @media screen and (max-width: 1450px) { .max { width: 106% !important; } } /* 旋转 */ .svgImg { position: absolute !important; width: 24px; top: calc(50% - 12px); left: calc(50% - 12px); display: none; } .xuanhuan { -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; -webkit-animation: rotate 1.4s linear infinite; -moz-animation: rotate 1.4s linear infinite; -o-animation: rotate 1.4s linear infinite; animation: rotate 1.4s linear infinite; } @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg) } to { -webkit-transform: rotate(360deg) } } @-moz-keyframes rotate { from { -moz-transform: rotate(0deg) } to { -moz-transform: rotate(359deg) } } @-o-keyframes rotate { from { -o-transform: rotate(0deg) } to { -o-transform: rotate(359deg) } } @keyframes rotate { from { transform: rotate(0deg) } to { transform: rotate(359deg) } } /* 切换编辑按钮 */ #toggle-button { display: none; } .button-label { position: relative; display: inline-block; width: 40px; line-height: 18px; background-color: #ccc; border: 1px solid #ccc; border-radius: 30px; cursor: pointer; } .circle { position: absolute; top: 0; left: 0; width: 18px; height: 18px; border-radius: 50%; background-color: #fff; } .button-label .text { line-height: 20px; font-size: 12px; /* 用来阻止页面文字被选中,出现蓝色 可以将下面两行代码注释掉来查看区别 */ -webkit-user-select: none; user-select: none; } .on { color: #fff; display: none; text-indent: 5px; } .off { color: #fff; display: inline-block; text-indent: 23px; } .button-label .circle { left: 0; transition: all 0.3s; /*transition过度,时间为0.3秒*/ } /* 以下是checked被选中后,紧跟checked标签后面label的样式。 例如:div+p 选择所有紧接着
元素之后的

元素 */ #toggle-button:checked+label.button-label .circle { left: 19px; } #toggle-button:checked+label.button-label .on { display: inline-block; } #toggle-button:checked+label.button-label .off { display: none; } #toggle-button:checked+label.button-label { background-color: #2c4fcd; } .edit { position: absolute; width: 100%; height: 99%; background-color: rgba(0, 0, 0, 0); top: 1px; z-index: 980; } .editDiv { position: absolute; /* top: 135px; */ right: 113px; z-index: 990; } /* .editDiv label { line-height: 20px; } */ /* @media only screen and (max-width: 600px) and (min-width: 0px) { .editDiv { position: absolute; top: 10px; right: 30px; z-index: 990; } } */ /* 当浏览器页面小于1265px 时 */ @media only screen and (max-width: 1265px) { .modals { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; } } table td, th { text-align: center; /*padding: 10px 0;*/ } /* 二维码分享 */ .qrImgUrl { text-align: center; } .shareUrl { position: fixed; left: calc(50% - 50px); top: 64px !important; } /* 更新文件 */ .select_folder{ padding: 10px; border: 2px solid #eaeaea; border-radius: 5px; } #updatePy .folder_name{ margin-top: 10px; } #updatePy .folder_name .folder_name_inpit{ width: calc(100% - 100px); height: 30px; border: 1px solid #ccc; outline: none; box-shadow: none; padding: 0 15px; margin: 0; border-radius: 5px; } .update_bottom { text-align: right; margin-top: 10px; } .update_bottom button { background-color: #2c4fcd; color: #fff; padding: 8px 15px; border: none; outline: none; border-radius: 8px; } .echart-text { position: absolute; left: 20%; right: 20%; top: 50%; width: 60%; text-align: center; font-weight: bold; } .english { width: 185px !important; } .fileEnglish { width: 185px !important } .helpEnglish { width: 240px !important } .blue{ background-color: #4A6AFF !important; } .green { background-color: #24AF00 !important; } .gray { background-color: #ADADAD !important; } #plugin_mac_or_windows,#connect_method,#local_help_ai_kit, #help_extends{ background-color: #fff; margin: 0; min-width: 137px; max-height: 650px; overflow-y: auto; opacity: 0; z-index: 999; font-size:14px; } #plugin_mac_or_windows li,#connect_method li,#local_help_ai_kit li, #help_extends li{ clear: both; color: rgba(0,0,0,0.87); cursor: pointer; min-height: 50px; line-height: 1.5rem; width: 100%; text-align: left; font-size:14px; } #plugin_mac_or_windows #Mac span, #plugin_mac_or_windows #Windows span, #connect_method #select_connecteds span, #connect_method #no_select_connecteds span{ color: #222222; font-family: "微软雅黑"; font-size:14px; } #local_help_ai_kit #ai_kit_0 span, #local_help_ai_kit #ai_kit_1 span, #local_help_ai_kit #ai_kit_2 span, #local_help_ai_kit #ai_kit_3 span{ color: #222222; font-family: "微软雅黑"; font-size:14px; } #help_extends #extends_0 span,#help_extends #extends_1 span,#help_extends #extends_2 span { color: #222222; font-family: "微软雅黑"; font-size:14px; } #plugin_mac_or_windows #Mac:hover span, #plugin_mac_or_windows #Windows:hover span, #connect_method #select_connecteds:hover span, #connect_method #no_select_connecteds:hover span { background: #fff; color: #4A6AFF; font-family: "微软雅黑"; font-size:14px; } #local_help_ai_kit #ai_kit_0:hover span, #local_help_ai_kit #ai_kit_1:hover span, #local_help_ai_kit #ai_kit_2:hover span, #local_help_ai_kit #ai_kit_3:hover span{ background: #fff; color: #4A6AFF; font-family: "微软雅黑"; font-size:14px; } #help_extends #extends_0:hover span,#help_extends #extends_1:hover span,#help_extends #extends_2:hover span { background: #fff; color: #4A6AFF; font-family: "微软雅黑"; font-size:14px; } #Mac img, #Windows img{ width: 25px; height: 25px; margin-right: 5px; transform: translateY(5px); } .display_switch_box2{ } @media only screen and (max-width: 1700px){ .switch_box2 { cursor: pointer; display: none; bottom: 0; position: absolute; left: 260px; padding: 0px 10px; color: #2D2F33; } .display_switch_box2{ display: inline-block; } .switch_select { background: #fff; /* border-radius: 13px 15px 0px 0px; */ color: #4A6AFF; font-weight: 700; } } @media only screen and (max-width: 1280px){ .switch_box1 { left: 120px; } .switch_box2 { left: 250px; /* width: 145px; */ padding: 0 6px; } .switch_select { background: #fff; /* border-radius: 13px 15px 0px 0px; */ color: #4A6AFF; font-weight: 700; /* width: 125px; */ text-align: center; } } .toast { background-color: #FFFFFF; box-shadow: 0 0 16px 0 rgba(0,0,0,0.20); border-radius: 5px; font-size: 14px; color: #152C2C; letter-spacing: 0; font-family: "SimSun"; } .material-tooltip { background-color: #FFFFFF; box-shadow: 0 0 16px 0 rgba(0,0,0,0.20); border-radius: 5px; font-size: 14px; color: #152C2C; letter-spacing: 0; font-family: "SimSun"; } .backdrop { background-color: #ffffff; } .firmware_upgrade_modal { top: 25% !important; width: 600px; max-height: 330px; background-color: #ffffff; box-shadow: 0 0 10px 0 rgba(0,0,0,0.25); border-radius: 3px; } #firmware_upgrade_Area { height: 282px; overflow-y: auto; background-color: #ffffff; } .firmware_module { width: 130px; height: 130px; background: #FFFFFF; border: 2px solid #CCCCCC; border-radius: 3px; display: inline-block; margin-top: 8%; } .firmware_module_iot,.firmware_module_ai { font-size: 18px; color: #2D2F33; letter-spacing: 0; display: table-cell; vertical-align: middle; } .firmware_module_download { display: inline-block; margin-top: 4%; } .button_text { font-size: 14px; color: #FFFFFF; letter-spacing: 0; } .donload_file_cocorobo, .cloud_storage_name_modal { top: 25% !important; width: 360px; max-height: 240px; background-color: #F0F0F2; box-shadow: 0 0 10px 0 rgba(0,0,0,0.25); border-radius: 3px; } .cloud_fileName { height: 193px; overflow-y: auto; background-color:#F0F0F2;; } .cloudStorage { background:#FFFFFF; border-radius: 3px 3px 0 0; margin-bottom: 0; font-size: 16px; color: #3D3D3D; letter-spacing: 0; padding: 15px; text-align: center; } #donload_file_cloud_input, #cloud_input { background: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 3px; width: 320px; height: 34px; box-shadow: none; padding-left: 10px; font-size: 14px; color: #2D2F33; letter-spacing: 0; } .cancelBtn:focus{ background-color: #CCCCCC; } input::-webkit-input-placeholder { color: #ccc; } input::-moz-input-placeholder { color: #ccc; } input::-ms-input-placeholder { color: #ccc; }