/* ---------------------------------------------- Setup Code // ------------------------------------------------*/ /* all settings */ body > * :disabled {cursor:not-allowed !important;} * {margin:0px; padding:0px; border:0px;} html, body {margin:0px; padding:0px; width:100%; height:100%;} body {overflow:hidden;} body,input,select,textarea{font-family:arial,tahoma;} li {list-style:none;} a{color:#000; text-decoration:none;} a:hover{color:#000;} a:active {color:#9a9ea2; outline:-webkit-focus-ring-color auto 1px;} a:focus {text-decoration:none; outline:-webkit-focus-ring-color auto 1px;} strong {font-weight:bold; } table {border-collapse:separate; border-spacing:0;} em {font-style:normal;} u {text-decoration:none;} .inlineblock {display:inline-block !important; vertical-align:middle;} .block {display:block !important;} .required {display:inline-block; vertical-align:middle; color:#ce0a51; font-size:20px; font-style:normal;} .normal {font-weight:normal;} .txt_center { text-align:center !important;} .textLeft, .txt_left {text-align:left !important;} .textRight, .txt_right {text-align:right !important;} .fl {float:left !important;} .fr {float:right !important;} .fn {float:none !important;} .clear {clear:both;} .bg_white {background:#FFF !important;} .hidden {display:none !important;} .ovh_hidden {overflow:hidden !important;} .c_point { cursor:pointer !important;} .scroll_y {overflow-y:scroll; overflow-x:hidden;} .txt_indent_0 {text-indent:0 !important;} .z_index_01 {z-index:1;} .restrict {text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} .vhidden {visibility:hidden;} .sr-only {position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; border:0; clip:rect(0,0,0,0);} .fs14 {font-size:14px !important;} .fwn {font-weight:normal;} .fsn {font-style:normal;} .pdt0 {padding-top:0px !important;} .pdt10 {padding-top:10px !important;} .pdt20 {padding-top:20px !important;} .pdt30 {padding-top:30px !important;} .pdr0 {padding-right:0px !important;} .pdl28 {padding-left:28px;} .pdb30 {padding-bottom:30px !important;} .pdb66 {padding-bottom:66px !important;} .mgt5 {margin-top:5px;} .mgt10 {margin-top:10px !important;} .mgt15 {margin-top:15px !important;} .mgt22 {margin-top:22px !important;} .mgt28 {margin-top:28px !important;} .mgt30 {margin-top:30px !important;} .mgt40 {margin-top:40px !important;} .mgt60 {margin-top:60px !important;} .mgb0 {margin-bottom:0px !important;} .mgb4 {margin-bottom:4px !important;} .mgb10 {margin-bottom:10px !important;} .mgb12 {margin-bottom:12px !important;} .mgb20 {margin-bottom:20px !important;} .mgb30 {margin-bottom:30px !important;} .mgb66 {margin-bottom:66px !important;} .mgl5 {margin-left:5px;} .mgl10 {margin-left:10px;} .mgl22 {margin-left:22px;} .mgl28 {margin-left:28px;} .mgr14 {margin-right:14px;} .mgr16 {margin-right:16px;} .mgr20 {margin-right:20px;} .mgr28 {margin-right:28px !important} .mgr360{margin-right:360px;} .mgr440{/*margin-right:440px;*/} .h100p {height:100%;} .w100p {width:100%;} .w120 {width:120px !important;} .w150 {width:150px !important;} .w160 {width:160px !important;} .w200 {width:200px !important;} .w206 {width:206px !important;} .w208 {width:208px !important;} .w260 {width:260px !important;} .w296 {width:296px !important;} .w300 {width:300px !important;} .w400 {width:400px !important;} .w560 {width:560px !important;} .clearfix:after {content:""; display:block; clear:both} .uli_inline {font-size:0px; text-align:center;} .div_inline {font-size:0px; letter-spacing:0px; word-spacing:0px;} .Required {color:#fd311c; font-size:12px;} .ui-tooltip {background:#fff; opacity:1;} legend, caption {position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; border:0; clip:rect(0,0,0,0);} /* Scroll bar style for IE */ html, body { scrollbar-face-color: #999999; scrollbar-shadow-color: #999999; scrollbar-highlight-color:#999999; scrollbar-3dlight-color: #999999; scrollbar-darkshadow-color: #999999; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #999999; } #left_side {scrollbar-track-color:#292929;} .detail_second {scrollbar-track-color:#cdcdcd;} .detail_ccr_body {scrollbar-track-color:#eeeeee;} .detail_setting_body {scrollbar-track-color:#f2f2f2;} .frame_width_full {scrollbar-track-color:#000000;} #time_line_wrap {scrollbar-track-color:#2e2e2e;} .xScroll {scrollbar-track-color:#222222;} #account_wrap .account_box .account_content {scrollbar-track-color:#686868;} .select_list {scrollbar-track-color:#4d4d4d;} .edit_text_box .edit_text_content.es_box {scrollbar-track-color:#686868;} .add_media_layer .adm_body {scrollbar-track-color:#cdcdcd;} /* Scroll bar style for Chrome */ ::-webkit-scrollbar {width:25px; height:25px; -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,1);} ::-webkit-scrollbar-corner {background:transparent;} /* Vertical */ ::-webkit-scrollbar-thumb:vertical {background: url('/ssw/images/scroll/scroll_thumb_n.png') repeat-y center center;} ::-webkit-scrollbar-thumb:vertical:hover {background: url('/ssw/images/scroll/scroll_thumb_o.png') repeat-y center center;} ::-webkit-scrollbar-thumb:vertical:active {background: url('/ssw/images/scroll/scroll_thumb_p.png') repeat-y center center;} ::-webkit-scrollbar-button:vertical:start:decrement {display: block; width:25px; height:25px; background: url('/ssw/images/scroll/scroll_btn_up_n.png') no-repeat center center;} ::-webkit-scrollbar-button:vertical:start:decrement:hover { background: url('/ssw/images/scroll/scroll_btn_up_f.png') no-repeat center center;} ::-webkit-scrollbar-button:vertical:start:decrement:active { background: url('/ssw/images/scroll/scroll_btn_up_p.png') no-repeat center center;} ::-webkit-scrollbar-button:vertical:end:increment {display: block; width:25px; height:25px; background: url('/ssw/images/scroll/scroll_btn_down_n.png') no-repeat center center;} ::-webkit-scrollbar-button:vertical:end:increment:hover {background: url('/ssw/images/scroll/scroll_btn_down_f.png') no-repeat center center;} ::-webkit-scrollbar-button:vertical:end:increment:active {background: url('/ssw/images/scroll/scroll_btn_down_p.png') no-repeat center center;} ::-webkit-scrollbar-track:vertical {border-radius: 0px; background: url('/ssw/images/scroll/scroll_track.png') repeat-y center center;} /* Horizontal */ ::-webkit-scrollbar-thumb:horizontal {border-radius: 0px; background:url('/ssw/images/scroll/scroll_thumbv_n.png') repeat-x center center;} ::-webkit-scrollbar-thumb:horizontal:hover {background:url('/ssw/images/scroll/scroll_thumbv_o.png') repeat-x center center;} ::-webkit-scrollbar-thumb:horizontal:active {background:url('/ssw/images/scroll/scroll_thumbv_p.png') repeat-x center center;} ::-webkit-scrollbar-button:horizontal:start:decrement {display: block; width:25px; height:25px; background:url('/ssw/images/scroll/scroll_btn_left_n.png') no-repeat center center;} ::-webkit-scrollbar-button:horizontal:start:decrement:hover { background:url('/ssw/images/scroll/scroll_btn_left_f.png') no-repeat center center;} ::-webkit-scrollbar-button:horizontal:start:decrement:active { background:url('/ssw/images/scroll/scroll_btn_left_p.png') no-repeat center center;} ::-webkit-scrollbar-button:horizontal:end:increment {display: block; width:25px; height:25px; background:url('/ssw/images/scroll/scroll_btn_right_n.png') no-repeat center center;} ::-webkit-scrollbar-button:horizontal:end:increment:hover {background:url('/ssw/images/scroll/scroll_btn_right_f.png') no-repeat center center;} ::-webkit-scrollbar-button:horizontal:end:increment:active {background:url('/ssw/images/scroll/scroll_btn_right_p.png') no-repeat center center;} ::-webkit-scrollbar-track:horizontal {border-radius: 0px; height:25px; background:url('/ssw/images/scroll/scroll_track.png') repeat-y center center;} @media (max-width:992px) { ::-webkit-scrollbar {height:4px; width:4px; background:transparent;} ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-thumb:vertical:active {border:0px solid transparent; background:none; background-clip:padding-box;} ::-webkit-scrollbar-button:vertical:start:decrement {background:none; width:0; height:0;} ::-webkit-scrollbar-button:vertical:end:increment {background:none; width:0; height:0;} ::-webkit-scrollbar-thumb {border:0px solid transparent; background-color:rgba(0,0,0,0.4) !important; background-clip:padding-box; border-radius:10px;} ::-webkit-scrollbar-button:horizontal:start:decrement {background:none; width:0; height:0;} ::-webkit-scrollbar-button:horizontal:end:increment {background:none; width:0; height:0;} } /* flexBox__align */ .fb_x {display:flex; justify-content:center; /* */ display:-webkit-flex; -webkit-justify-content:center; /* */ display:-ms-flexbox; -ms-flex-pack:center;} .fb_y {display:flex; align-items:center; /* */ display:-webkit-flex; -webkit-align-items:center; /* */ display:-ms-flexbox; -ms-flex-align: center;} .fb_xy {display:flex; justify-content:center; align-items:center; /* */ display:-webkit-flex; -webkit-justify-content:center; -webkit-align-items:center; /* */ display: -ms-flexbox; -ms-flex-pack:center; -ms-flex-align: center;} .fb_e {display:flex; justify-content:flex-start; /* */ display:-webkit-flex; -webkit-justify-content:flex-start;/* */ display: -ms-flexbox; -ms-flex-pack:start;} .fb_w {display:flex; justify-content:flex-end; /* */ display:-webkit-flex; -webkit-justify-content:flex-end;/* */ display: -ms-flexbox; -ms-flex-pack:end;} .fb_ey {display:flex; justify-content:flex-start; align-items:center; /* */ display:-webkit-flex; -webkit-justify-content:flex-start; -webkit-align-items:center;/* */ display: -ms-flexbox; -ms-flex-pack:start; -ms-flex-align: center;} .fb_wy {display:flex; justify-content:flex-end; align-items:center; /* */ display:-webkit-flex; -webkit-justify-content:flex-end; -webkit-align-items:center; /* */ display: -ms-flexbox; -ms-flex-pack:end; -ms-flex-align: center;} .fb_ew {display:flex; justify-content:space-between; /* */ display:-webkit-flex; -webkit-justify-content:space-between;/* */ display: -ms-flexbox; -ms-flex-pack:justify;} .fb_ewy {display:flex; justify-content:space-between; align-items:center;/* */ display:-webkit-flex; -webkit-justify-content:space-between; -webkit-align-items:center;/* */ display: -ms-flexbox; -ms-flex-pack:justify; -ms-flex-align: center;} .fb_se {display:flex; justify-content:space-between; display: -ms-flexbox; -ms-flex-pack:justify;} /* box_item */ .fi_start {align-self:flex-start;} .fi_end {align-self:flex-end;} .fi_xy {align-self:center;} /* New Style for Textarea styling */ textarea {resize:none; -webkit-appearance:none; appearance:none;} textarea:disabled {background:#ccc; color:#fff;} div.popbox li textarea {border:1px solid; border-color:transparent;} div.popbox li textarea:focus {border:1px solid #cf0652;} /* no_list_contents */ .no_contents { text-align:center; padding:10px 0; color:#b10040 !important; font-size:14px;} .no_list_contents {height:calc(100% - 100px); min-height:260px; vertical-align:middle; text-align:center; display:flex; justify-content:center; align-items:center; /* */ display:-webkit-flex; -webkit-justify-content:center; -webkit-align-items:center; /* */ display: -ms-flexbox; -ms-flex-pack:center; -ms-flex-align: center;} .no_list_contents span {position:relative; display:inline-block; padding:80px 0 10px 0; color:#464646; font-size:16px; background:url(/ssw/images/page/logo_nolist.png) no-repeat center top;} /* total */ .tools .total .selectNum {display:flex;} /* New Style for Radio label styling */ input[type=radio] {position:relative;top:2px; margin-right:4px;} input[type=password], input[type=number], input[type=text] {color:#464646; font-size:14px; height:34px; line-height:34px; width:100%; border-radius:18px; box-shadow:inset 0 0 0 1px #747474; -webkit-transition:all 0.2s ease;transition:all 0.2s ease; padding:0 18px; box-sizing:border-box; -webkit-appearance:none; appearance:none; } input[type=password]:focus, input[type=text]:focus {box-shadow:inset 0 0 0 3px #cf0652;} input[type=password]:focus::-webkit-input-placeholder, input[type=text]:focus::-webkit-input-placeholder {color:transparent; opacity:0;} input[type=password]:disabled, input[type=text]:disabled {background:#ffffff; opacity:0.5;} input::-ms-clear {display:none;} input::-webkit-input-placeholder {color:#a9a9a9 !important; font-size:13px;} input:-ms-input-placeholder {color:#a9a9a9 !important; font-size:13px;} input[readonly]:focus {} input[readonly]:focus::-webkit-input-placeholder {opacity:1;} /* label */ .label {position:relative;} .label label {float:left;} .label strong {display:inline-block; vertical-align:top; line-height:30px; font-size:12px; color:#464646; margin-left:10px;} .label .text {white-space:nowrap;} /* -------------------------------------------------------- SWITCH ----------------------------------------------------------*/ button.switch {display:inline-block; position:relative; width:64px; height:30px; border-radius:20px; vertical-align:middle; visibility:visible;} button.switch:before, button.switch:after {position:absolute; top:10px; line-height:10px; font-size:10px; color:rgba(255,255,255,1); font-weight:bold; transition:0.15s ease-out;-webkit-transition:0.15s ease-out; opacity:0;} button.switch .switch_handle {position:absolute; top:5px; left:5px; width:20px; height:20px; border-radius:10px; background:#fff; pointer-events:none; transition:left 0.15s ease-out;-webkit-transition:left 0.15s ease-out;} button.switch[role="switch"][data-on]:before {content:attr(data-on); left:10px;} button.switch[role="switch"][data-off]:after {content:attr(data-off); right:10px;} button.switch[role="switch"][aria-checked="true"] {background:#cf0652;} button.switch[role="switch"][aria-checked="true"][data-on]:before {opacity:1;} button.switch[role="switch"][aria-checked="true"] .switch_handle {left:38px;} button.switch[role="switch"][aria-checked="false"] {background:#4d4d4d;} button.switch[role="switch"][aria-checked="false"][data-off]:after {opacity:1;} button.switch:disabled {cursor:not-allowed; opacity:0.5; filter:grayscale(1);} /* -------------------------------------------------------- /* switch */ .switch {position:relative; display:inline-block; vertical-align:top; width:58px; height:30px; border-radius:18px;} .switch-input {position:absolute; top:0; left:0; opacity:0;} .switch .switch-input {position:absolute; width:100%; height:100%; top:0; left:0; margin:0; opacity:0;} .switch .switch-input:focus ~ .switch-label {box-shadow:0px 0px 0px 2px rgba(0,0,0,0.8);} .switch-label {position:relative; display:block; height:inherit; font-size:10px; text-transform:uppercase; background:#4d4d4d; border-radius:inherit; font-weight:bold; cursor: pointer; -webkit-transition: 0.15s ease-out; -moz-transition: 0.15s ease-out; -o-transition: 0.15s ease-out; transition: 0.15s ease-out;} .switch-label:before, .switch-label:after {position:absolute;top: 50%; margin-top:-.5em; line-height:1; -webkit-transition: inherit; -moz-transition: inherit; -o-transition: inherit; transition: inherit;} .switch-label:before {content: attr(data-off); right:9px; color:#b5b5b5;} .switch-label:after {content: attr(data-on); left:10px; color:#fff; opacity:0;} .switch-input:checked ~ .switch-label {background:#cf0652;} .switch-input:disabled ~ .switch-label {background:#333; opacity:0.3; cursor:default;} .switch-input:checked ~ .switch-label:before {opacity:0;} .switch-input:checked ~ .switch-label:after {opacity:1;} .switch-handle {position:absolute; top:5px; left:5px; width:20px; height:20px; background:white; border-radius:10px; pointer-events: none; -webkit-transition: left 0.15s ease-out; -moz-transition: left 0.15s ease-out; -o-transition: left 0.15s ease-out; transition: left 0.15s ease-out;} .switch-handle:before {content: ''; position:absolute; top:50%; left:50%; margin:-6px 0 0 -6px; width:12px; height:12px; background:#fff; border-radius:6px;} .switch-input:checked ~ .switch-handle {left:33px;} /* switch on */ .switch.on .switch-input:checked ~ .switch-label {background:#cf0652;} .switch.on .switch-label {background:#cf0652;} .switch.on .switch-label:after {display:block; opacity:1;} .switch.on .switch-label:before {display:none;} .switch.on .switch-handle {left:33px;} /* switch off */ .switch.off .switch-input:checked ~ .switch-label {background:#4d4d4d;} .switch.off .switch-label {background:#4d4d4d;} .switch.off .switch-label:after {display:none;} .switch.off .switch-label:before {display:block; opacity:1;} .switch.off .switch-input:checked ~ .switch-handle {left:5px;} /* switch disable */ .switch.disable {cursor: default; opacity: 0.6;} .switch.disable .switch-input:checked ~ .switch-label {background:#676767;} .switch.disable .switch-label {background:#676767;} .switch.disable .switch-label:before { display:none;} .switch.disable .switch-input:checked ~ .switch-handle {left:5px;} /* jquery ui Spinner ----------------------------------*/ .ui-spinner {display:inline-block; vertical-align: middle; position:relative; overflow:hidden; border:0 !important; background:none !important;} .ui-spinner .ui-spinner-input {margin:0; vertical-align:middle; background:#fff; border:1px solid #d2d2d2;} .ui-spinner .ui-spinner-input:focus {border:1px solid #d2d2d2;} .ui-spinner .ui-spinner-button {width:15px; height:15px; display:block; padding:2px 10px; overflow: hidden; position:absolute; right:2px; z-index:100; cursor:pointer;} .ui-spinner .ui-spinner-button:before {content:''; width:15px; height:15px; background:url(../images/form/selectBox.png) no-repeat; display:block;} .ui-spinner .ui-spinner-button .ui-button-icon {display:none;} .ui-spinner .ui-spinner-button .ui-button-icon-space {display:none;} .ui-spinner .ui-spinner-up {top:3px;} .ui-spinner .ui-spinner-up:before {background-position:0 -60px;} .ui-spinner .ui-spinner-up:active:before {background-position:0 -90px;} .ui-spinner .ui-spinner-down {bottom:3px;} .ui-spinner .ui-spinner-down:before {background-position:0 -15px;} .ui-spinner .ui-spinner-down:active:before {background-position:0 -45px;} /* ---------------------------------------------- notSupport // ------------------------------------------------*/ .notSupport {z-index:9999999999; position:absolute; top:0px; left:0px; right:0px; bottom:0px; background:#000; display:flex; justify-content:center; align-items:center; padding:20px;} .notSupport .ns_txt {max-width:480px;} .notSupport .ns_txt h2 {display:block; height:50px; background:url(/ssw/images/common/logo.png) no-repeat; text-indent:-999em; font-size:0px;} .notSupport .ns_txt h2.master {display:block; width:342px; height:50px; background:url(/ssw/images/common/logo_master.png) no-repeat !important; text-indent:-999em; font-size:0px; color:#fff;} .notSupport .ns_txt strong {display:block; font-size:15px; color:#FFF; margin-top:26px;} .notSupport .ns_txt span {display:block; font-size:13px; color:#767676; margin-top:10px;} .notSupport .ns_txt span b {display:inline-block; vertical-align:middle; width:15px; height:15px; text-indent:-999em; margin-right:2px;} .notSupport .ns_txt span b.chrome {background:url(/ssw/images/common/ns_icon_chrome.png) no-repeat; } .notSupport .ns_txt span b.ie {background:url(/ssw/images/common/ns_icon_ie.png) no-repeat; margin-left:4px;} .notSupport .ns_txt p {display:block; font-size:11px; color:#fff; line-height:17px; margin-top:10px;} .notSupport .ns_txt ul {margin-top:10px; line-height:20px;} .notSupport .ns_txt ul li {display:flex; align-items:center; font-size:12px; color:#fff;} .notSupport .ns_txt ul li:before {content:''; display:block; width:6px; height:6px; background:#fff; border-radius:50%; margin:0 6px;} /* jsonData */ .json-dict {color:#666;} .json-dict .json-literal-string {color:#ef007c;} .json-dict .json-literal-numeric {color:#029e26;} .json-dict .json-literal-string, .json-dict .json-literal-numeric {cursor:pointer;} .json-dict .json-literal-string:hover, .json-dict .json-literal-numeric:hover {text-decoration:underline;} .json-dict .json-literal-string.active, .json-dict .json-literal-string:active {background:#ef007c; color:#fff;} .json-dict .json-literal-numeric.active, .json-dict .json-literal-numeric:active {background:#029e26; color:#fff;} /* ---------------------------------------------- Element // ------------------------------------------------*/ /* -Button size---------------------------------------------*/ #wBgChangeImage, #wBgStyleSave, #wBgAddImage {text-overflow:ellipsis; overflow:hidden; white-space:nowrap; padding:0 14px;} #wBgAddImage {max-width:130px;} #wBgChangeImage {max-width:110px;} #wBgStyleSave {max-width:90px;} /* ---------------------------------------------- Button ------------------------------------------------*/ /* default */ .button a {border-radius:18px; color:#ce0a51; font-size:14px; text-decoration:none; text-align:center; display:inline-block; height:30px; line-height:26px; padding:0 20px; font-weight:normal; box-sizing:border-box; border:2px solid transparent; position:relative;} .button a:hover {background:#ce0a51; border:2px solid #ce0a51; color:#FFF; /* font-weight:bold; */ border-radius:18px; box-sizing:border-box;} .button a:hover:after {filter:brightness(10);} .button a:active {color:#b5b5b5; background:#4d4d4d; border:2px solid #cf0652; /* font-weight:bold; */ border-radius:18px; box-sizing:border-box;} .button a.ccr, .button a:hover.ccr {background:#cf0652; color:#FFF; border:2px solid #cf0652; border-radius:18px; /* font-weight:bold; */} .button a:active.ccr {background:#4d4d4d; color:#FFF; border:2px solid #cf0652;} .button a[aria-disabled="true"], .button a.disable {background:#ededed; border-radius:18px; color:#cccccc; font-size:14px; text-decoration:none; text-align:center; border:2px solid transparent; font-weight:normal; box-sizing:border-box; cursor:not-allowed; box-shadow: none;} .button a .progress {position:absolute; bottom:-6px; left:0px; right:0px; height:3px; background:#ddd; margin:0 20px;} .button a .progress span {display:block; height:3px; background: #cf0652;} /* hu edit */ .hu .button a#_rp_addAll {padding:0 10px;} .button a#_d_btnMessageEdit {padding:0 10px;} /* button_white */ .button_white a {background:#fff !important; border-radius:18px; color:#696969 !important; font-size:14px; text-decoration:none; text-align:center; display:inline-block; vertical-align:top; height:30px; line-height:26px; padding:0 20px; border:2px solid #fff !important; /* font-weight:bold; */ box-sizing:border-box;} .button_white a:hover {background:#cf0652 !important; border:2px solid #cf0652 !important; color:#FFF !important; /* font-weight:bold; */} .button_white a:active {color:#fff; background:#4d4d4d !important; border:2px solid #cf0652 !important; /* font-weight:bold; */} .button_white a.active {color:#fff; background:#4d4d4d !important; border:2px solid #cf0652 !important; /* font-weight:bold; */} .button_white a.ccr, .button_white a:hover.ccr {background:#cf0652 !important; color:#FFF !important; border:2px solid #cf0652 !important; border-radius:18px; /* font-weight:bold; */} .button_white a:active.ccr {background:#4d4d4d; color:#FFF; border:2px solid #cf0652;} .button_white a.disable {background:#ededed !important; border-radius:18px; color:#cccccc !important; font-size:14px; text-decoration:none; text-align:center; border:2px solid transparent !important; font-weight:normal; box-sizing:border-box; cursor:default;} .button_white a.fnClose {max-width:150px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} .button_gray a {background:#292929; border-radius:18px; color:#cccccc; font-size:14px; text-decoration:none; text-align:center; display:inline-block; height:30px; line-height:26px; padding:0 20px; border:2px solid #292929; font-weight:normal; box-sizing:border-box;} .button_gray a:hover {background:#cf0652; border:2px solid #cf0652; color:#FFF; /* font-weight:bold; */} .button_gray a:active {color:#b5b5b5; background:#4d4d4d; border:2px solid #cf0652; /* font-weight:bold; */} .button_gray a.active {color:#b5b5b5; background:#4d4d4d; border:2px solid #cf0652; /* font-weight:bold; */} .button_gray a.ccr, .button_gray a:hover.ccr {background:#cf0652; color:#FFF; border:2px solid #cf0652; border-radius:18px; font-weight:bold;} .button_gray a:active.ccr {background:#4d4d4d; color:#FFF; border:2px solid #cf0652;} .button_gray a.disable {background:#ededed; border-radius:18px; color:#cccccc; font-size:14px; text-decoration:none; text-align:center; border:2px solid transparent; font-weight:normal; box-sizing:border-box; cursor:default;} /* button_gray2 */ .button_gray2 a {background:#4d4d4d; border-radius:18px; color:#b5b5b5; font-size:14px; text-decoration:none; text-align:center; display:inline-block; height:30px; line-height:26px; padding:0 20px; border:2px solid #4d4d4d; /* font-weight:bold; */ box-sizing:border-box;} .button_gray2 a:hover {background:#cf0652; border:2px solid #cf0652; color:#FFF; /* font-weight:bold; */} .button_gray2 a:active {color:#b5b5b5; background:#4d4d4d; border:2px solid #cf0652; /* font-weight:bold; */} .button_gray2 a.active {color:#b5b5b5; background:#4d4d4d; border:2px solid #cf0652; /* font-weight:bold; */} .button_gray2 a.disable {background:#4d4d4d !important; color:#b5b5b5 !important; border:2px solid transparent !important; cursor:default; opacity:0.4;} /* btn_small */ .btn_small a {height:26px; line-height:22px;} /* button_claneder */ .button_claneder a {border-radius:50%; font-size:14px; display:inline-block; vertical-align:top; margin-top:10px; width:30px; height:30px; line-height:26px; text-indent:-999em; background:#333;} .button_claneder a.videowall {background:url(/ssw/images/button/btn_videowall_n.png) no-repeat;} .button_claneder a.videowall:hover {background:url(/ssw/images/button/btn_videowall_f.png) no-repeat;} .button_claneder a.videowall:active {background:url(/ssw/images/button/btn_videowall_s.png) no-repeat;} .button_claneder a.videowall.active {background:url(/ssw/images/button/btn_videowall_s.png) no-repeat;} .button_claneder a.calender {background:url(/ssw/images/button/btn_calendar_n.png) no-repeat;} .button_claneder a.calender:hover {background:url(/ssw/images/button/btn_calendar_f.png) no-repeat;} .button_claneder a.calender:active {background:url(/ssw/images/button/btn_calendar_s.png) no-repeat;} .button_claneder a.calender.active {background:url(/ssw/images/button/btn_calendar_s.png) no-repeat;} .button_claneder a.list {background:url(/ssw/images/button/btn_list_n.png) no-repeat;} .button_claneder a.list:hover {background:url(/ssw/images/button/btn_list_f.png) no-repeat;} .button_claneder a.list:active {background:url(/ssw/images/button/btn_list_s.png) no-repeat;} .button_claneder a.list.active {background:url(/ssw/images/button/btn_list_s.png) no-repeat;} /* list_button */ .list_button .button a {background:none; border-radius:18px; color:#919191; font-size:14px; text-decoration:none; text-align:center; display:inline-block; height:30px; padding:0 20px; border:none; font-weight:normal; box-sizing:border-box; margin:2px 0;} .list_button li:hover .button a, .list_button li.select_cell .button a {background:#4d4d4d; border-radius:18px; color:#b5b5b5; font-size:14px; text-decoration:none; text-align:center; display:inline-block; height:30px; line-height:26px; padding:0 20px; /* font-weight:bold; */ box-sizing:border-box; border:2px solid #4d4d4d;} .list_button li:hover .button a:hover, .list_button li.select_cell .button a:hover {background:#ce0a51; color:#FFF; border:2px solid #cf0652;} .list_button li:hover .button a:active, .list_button li.select_cell .button a:active {color:#b5b5b5; background:#4d4d4d; border:2px solid #cf0652;} .list_button li:hover .button a.ccr, .list_button li.select_cell .button a.ccr {background:#cf0652; color:#FFF; border:2px solid #cf0652;} .list_button li .button a:active.ccr {background:#4d4d4d; color:#FFF; border:2px solid #cf0652;} .list_button li .button a.disable, .list_button li:hover .button a.disable, .list_button li.select_cell .button a.disable {background:none; color:#cdcdcd; border:none; font-weight:normal;} /* button (return/) */ .btn_circle {display:block; width:60px; height:60px; position:absolute; top:16px; left:16px; text-indent:-999em;} .btn_circle_s {display:block; width:44px; height:44px; position:absolute; top:34px; left:0px; text-indent:-999em;} .btn_circle_x {display:block; width:30px; height:30px; position:absolute; text-indent:-999em;} /* btn_return */ .button_return {background:url(/ssw/images/button/title_btn_back_n.png) no-repeat;} .button_return:hover {background:url(/ssw/images/button/title_btn_back_f.png) no-repeat;} .button_return:active {background:url(/ssw/images/button/title_btn_back_p.png) no-repeat;} .button_return_s {background:url(/ssw/images/button/title_btn_back_s_n.png) no-repeat;} .button_return_s:hover {background:url(/ssw/images/button/title_btn_back_s_f.png) no-repeat;} .button_return_s:active {background:url(/ssw/images/button/title_btn_back_s_p.png) no-repeat;} /* button_cancel */ .button_cancel {background:url(/ssw/images/button/title_btn_close_n.png) no-repeat;} .button_cancel:hover {background:url(/ssw/images/button/title_btn_close_f.png) no-repeat;} .button_cancel:active {background:url(/ssw/images/button/title_btn_close_p.png) no-repeat;} .button_cancel_s {background:url(/ssw/images/button/title_btn_close_s_n.png) no-repeat;} .button_cancel_s:hover {background:url(/ssw/images/button/title_btn_close_s_f.png) no-repeat;} .button_cancel_s:active {background:url(/ssw/images/button/title_btn_close_s_p.png) no-repeat;} .button_cancel_s2 {background:url(/ssw/images/button/title_btn_close_s_n2.png) no-repeat;} .button_cancel_s2:hover {background:url(/ssw/images/button/title_btn_close_s_f.png) no-repeat;} .button_cancel_s2:active {background:url(/ssw/images/button/title_btn_close_s_p.png) no-repeat;} .button_close {background:url(/ssw/images/button/btn_close_03_g_n.png) no-repeat;} .button_close:hover {background:url(/ssw/images/button/btn_close_03_f.png) no-repeat;} .button_close:active {background:url(/ssw/images/button/btn_close_03_p.png) no-repeat;} .button_close_02 {background:url(/ssw/images/button/btn_close_08_n.png) no-repeat;} .button_close_02:hover {background:url(/ssw/images/button/btn_close_08_f.png) no-repeat;} .button_close_02:active {background:url(/ssw/images/button/btn_close_08_p.png) no-repeat;} .btn_onEdit {background:url(/ssw/images/button/btn_onEdit.png) no-repeat;} .btn_onEdit:hover {background:url(/ssw/images/button/btn_onEdit.png) no-repeat 0px -30px;} .btn_onEdit:active {background:url(/ssw/images/button/btn_onEdit.png) no-repeat 0px -60px;} .btn_onEdit.edit {background:url(/ssw/images/button/btn_onEdit.png) no-repeat -30px 0px;} .btn_onEdit.edit:hover {background:url(/ssw/images/button/btn_onEdit.png) no-repeat -30px -30px;} .btn_onEdit.edit:active {background:url(/ssw/images/button/btn_onEdit.png) no-repeat -30px -60px;} .button_add {background:url(/ssw/images/button/btn_close_08_n.png) no-repeat;} .button_add:hover {background:url(/ssw/images/button/btn_close_08_f.png) no-repeat;} .button_add:active {background:url(/ssw/images/button/btn_close_08_p.png) no-repeat;} .btn.icoPlus {padding:0 20px 0 8px;} .btn.icoPlus:before {content:""; display:inline-block; vertical-align:middle; width:26px; height:26px; background:url(/ssw/images/svg/btnClose.svg) no-repeat; background-size:cover; transform:rotate(45deg);} /* -------------------------------------------------------- BUTTON ----------------------------------------------------------*/ button {margin:0; padding:0; border:none; font-size:14px; cursor:pointer; background:none; appearance:none; -webkit-font-smoothing:antialiased;} .btn span {position:relative; z-index:2;} .btn {display:inline-block; vertical-align:middle; height:30px; padding:0 20px; border-radius:20px; color:#fff; position:relative; overflow:hidden; box-sizing:border-box; border:2px solid transparent; white-space:nowrap;} .btn:focus {} .btn:hover {background:#cf0652; box-shadow:0 2px 4px rgba(0, 0, 0, 0.2); text-decoration:underline;} .btn:active {background:#4d4d4d; border:3px solid #cf0652;} .btn:disabled {cursor:default; background:#e5e5e5 !important; color:#505050 !important; border:0 !important;} .btn:disabled:hover {box-shadow:none; background:#e5e5e5 !important; color:#505050 !important; text-decoration: none;} .btn:disabled:hover:after {content:""; display:none;} .icoNwin:after {content:''; display:inline-block; vertical-align:middle; width:14px; height:14px; margin:0 6px; background:url(/ssw/images/svg/icon_open_window.svg) no-repeat; } /* color - prime */ button.btn.prime {background:transparent; color:#ce0a51;} button.btn.prime:hover {background:#ce0a51; color:#fff;} button.btn.prime:active {background:#4d4d4d; color:#fff; border:2px solid #cf0652;} button.btn.prime.active {background:#4d4d4d; color:#fff; border:2px solid #cf0652;} /* color - thumblist */ button.btn.thumblist {width:32px; height:32px; padding:0; border:2px solid rgba(255,255,255,0.8); background:rgba(0,0,0,0.6); color:#fff; box-sizing:border-box; font-size:12px;} button.btn.thumblist:hover {background:#ce0a51; color:#fff;} button.btn.thumblist:active {background:#4d4d4d; color:#fff; border:2px solid #cf0652;} button.btn.thumblist.active {background:#4d4d4d; color:#fff; border:2px solid #cf0652;} /* color - glassRound */ button.btn.glassRound {background:transparent; color:#fff; font-size:12px; padding:0 16px; border:2px solid #fff;} button.btn.glassRound:hover {background:#ce0a51; color:#fff;} button.btn.glassRound:active {background:#4d4d4d; color:#fff; border:2px solid #cf0652;} /* color - sMenu */ button.btn.sMenu {background:transparent; color:#fff; font-size:16px; padding:0 16px;} button.btn.sMenu:focus {outline-offset:-1px;} button.btn.sMenu:hover {box-shadow:none; text-decoration:underline;} button.btn.sMenu:active, button.btn.sMenu.active {color:#fff; border:2px solid #fff;} button.btn.sMenu:disabled {background:none !important; color:#fff !important; opacity:0.5;} button.btn.sMenu#btnContentCreate:after {content:''; display:inline-block; width:15px; height:8px; margin:0 2px; background:url(/ssw/images/svg/btn_filter_arrow.svg)no-repeat 0px 0; background-size:cover; color:#464646; font-size:0; vertical-align:middle; filter:brightness(100);} button.btn.sMenu#btnContentCreate.active:after {transform:rotate(180deg); background-position:0 0;} /* color - clearGray */ .clearGray {display:inline-block !important; background:#747474; color:#fff !important; padding:0 14px !important; line-height: 28px; cursor:pointer;} .clearGray[aria-disabled="true"] {background:rgba(0,0,0,0.1) !important; color:rgba(0,0,0,0.4) !important;} .clearGray[aria-disabled="true"]:after {color:rgba(0,0,0,0.4) !important; filter:grayscale(1) !important;} .clearGray[aria-disabled="true"]:hover {} .clearGray:after {margin:0 2px !important; filter:brightness(10);} .clearGray:hover {color:#fff;} .clearGray:active {border:2px solid #cf0652;} button.btn.clearGray {background:#747474; color:#fff;} button.btn.clearGray:focus {outline-offset:3px;} button.btn.clearGray:hover {background:#ce0a51; color:#fff;} button.btn.clearGray:active {background:#4d4d4d; color:#fff; border:2px solid #cf0652;} button.btn.clearGray.active {background:#4d4d4d; color:#fff; border:2px solid #cf0652;} /* color - clearWhtie */ button.btn.clearWhtie {background:transparent; color:#fff;} button.btn.clearWhtie:hover {background:#ce0a51; color:#fff;} button.btn.clearWhtie:active {background:#4d4d4d; color:#fff; border:2px solid #cf0652;} button.btn.clearWhtie.active {background:#4d4d4d; color:#fff; border:2px solid #cf0652;} /* color - dark */ button.btn.dark {background:#4d4d4d; color:#fff;} button.btn.dark:focus {outline-offset:3px;} button.btn.dark:hover {background:#cf0652; color:#fff;} button.btn.dark:active {background:#4d4d4d; color:#fff; border:2px solid #cf0652;} button.btn.dark:disabled {background:#4d4d4d !important; color:rgba(255,255,255,0.3) !important;} button.btn.dark.active {background:#4d4d4d; color:#fff; border:2px solid #cf0652;} /* color - gray */ button.btn.gray {background:#747474; color:#fff;} button.btn.gray:focus {outline-offset:3px;} button.btn.gray:hover {background:#cf0652; color:#fff;} button.btn.gray:active {background:#4d4d4d; color:#fff; border:2px solid #cf0652;} /* button.btn.gray:disabled {background:#747474 !important; color:rgba(255,255,255,0.3) !important;} */ button.btn.gray.active {background:#4d4d4d; color:#fff; border:2px solid #cf0652;} /* color - white */ button.btn.white {background:#fff; color:#696969;} button.btn.white:before {filter:brightness(0.5);} button.btn.white:hover {background:#cf0652; color:#fff;} button.btn.white:hover:before {filter:brightness(1);} button.btn.white:active {background:#4d4d4d; color:#fff; border:2px solid #cf0652;} button.btn.white:disabled {background:#fff !important; color:rgba(0,0,0,0.3) !important;} button.btn.white.active {background:#4d4d4d; color:#fff; border:2px solid #cf0652;} /* button icon */ button.btn.ico {font-size:13px;} button.btn.ico:before {content:''; display:inline-block; vertical-align:middle; width:18px; height:18px; margin:4px;} button.btn.ico:hover:before {filter:contrast(4); -webkit-filter: contrast(4);} button.btn.ico.active:before {filter:contrast(4); -webkit-filter: contrast(4);} /* option */ button.fw {width:calc(100% - 4px);} button.rotate90 {transform:rotate(90deg);} button.rotate180 {transform:rotate(180deg);} button.rotate270 {transform:rotate(270deg);} /* btnCircle */ button.btnCircle {border-radius:50%; display:inline-block; vertical-align:middle;} button.btnCircle:disabled {opacity:0.5;} button.btnCircle:disabled:hover {background-position:center top;} /* fnSvg */ button.fnSprite {padding:0; border:0; border-radius:50%; font-size:0; color:#fff; outline-offset:2px;} button.fnSprite:before {content:''; display:block;} button.fnSprite:hover {background:#cf0652;} button.fnSprite:active {background:#4d4d4d; box-shadow: inset 0 0 0px 3px #cf0652;} button.fnSprite.active {background:#4d4d4d; box-shadow: inset 0 0 0px 3px #cf0652;} button.fnSprite.active::before {filter:brightness(10);} button.fnSprite:hover::before {filter:brightness(10);} button.fnSprite[aria-pressed="true"] {background:#4d4d4d; box-shadow: inset 0 0 0px 3px #cf0652;} button.fnSprite:disabled {} button.fnSprite:disabled:hover {background:#4d4d4d;} /* fnSpriteImg */ button.fnSpriteImg {padding:0; border:0; font-size:0;} button.fnSpriteImg:hover {background-position:center;} button.fnSpriteImg:active {background-position:center bottom;} button.fnSpriteImg.active {background-position:center bottom;} button.fnSpriteImg[aria-pressed="true"] {background-position:center bottom;} button.fnSpriteImg:disabled {cursor:default;} button.fnSpriteImg:disabled:hover {} @media (hover: none) and (pointer: coarse) { /* hover effect delete */ button.btn.clearGray:hover {background:#747474; color:#fff;} button.btn.clearWhtie:hover {background:transparent; color:#fff;} button.btn.dark:hover {background:#4d4d4d; color:#fff;} button.btn.gray:hover {background:#747474; color:#fff;} button.btn.white:hover {background:#fff; color:#696969;} } /* ---------------------------------------------- button - mapping ------------------------------------------------*/ button.videowall::before {background:url(/ssw/images/button/btn_videowall_a.png) no-repeat;} button.list::before {background:url(/ssw/images/button/btn_list_a.png) no-repeat;} button.btnCalender {width:30px; height:30px; background:#4d4d4d !important;} button.btnCalender:before {width:30px; height:30px; background:url(/ssw/images/svg/btnCalender.svg) no-repeat;} button.btnList {width:30px; height:30px; background:#4d4d4d !important;} button.btnList:before {width:30px; height:30px; background:url(/ssw/images/svg/btnList.svg) no-repeat;} button.btnEndArrow {width:30px; height:30px; background:#4d4d4d !important;} button.btnEndArrow:before {width:30px; height:30px; background:url(/ssw/images/svg/btnDbArrow.svg) no-repeat center; background-size:120%;} button.btnPaging {width:30px; height:30px; background:#4d4d4d !important;} button.btnPaging:before {width:30px; height:30px; background:url(/ssw/images/svg/btnArrow.svg) no-repeat center; background-size:120%;} button.btnDirection {width:30px; height:30px; background:#fff !important; color:#464646;} button.btnDirection:before {width:30px; height:30px; background:url(/ssw/images/svg/btnArrow.svg) no-repeat center; background-size:120%; filter:brightness(0.5);} button.btnDirection:hover:before {filter:brightness(0.5);} button.btnReturn {width:60px; height:60px; background:#747474 !important;} button.btnReturn:before {width:60px; height:60px; background:url(/ssw/images/svg/btnReturn.svg) no-repeat center; background-size:cover;} button.btnBack {width:44px; height:44px; background:#747474 !important;} button.btnBack:before {width:44px; height:44px; background:url(/ssw/images/svg/btnReturn.svg) no-repeat center; background-size:cover;} button.btnBack_hyaline {width:40px; height:40px;} button.btnBack_hyaline:before {width:40px; height:40px; background:url(/ssw/images/svg/btnReturn.svg) no-repeat center; background-size:cover;} button.btnBack_s {width:30px; height:30px; font-size:0;} button.btnBack_s::before {content:''; display:block; width:30px; height:30px; background:url(/ssw/images/svg/btn_control_back.svg) no-repeat; filter:grayscale(1);} button.btnBack_s:hover::before {filter:grayscale(0);} button.btn_Close_s {width:30px; height:30px; font-size:0;} button.btn_Close_s::before {content:''; display:block; width:30px; height:30px; background:url(/ssw/images/svg/btn_control_close.svg) no-repeat; filter:grayscale(1);} button.btn_Close_s:hover::before {filter:grayscale(0);} button.btnCancel_l {width:60px; height:60px; background:#747474;} button.btnCancel_l:before {width:60px; height:60px; background:url(/ssw/images/svg/btnClose.svg) no-repeat; background-size:cover;} button.btnCancelDark {width:44px; height:44px; background:#4d4d4d;} button.btnCancelDark:before {width:44px; height:44px; background:url(/ssw/images/svg/btnClose.svg) no-repeat; background-size:cover;} button.btnCancel {width:44px; height:44px; background:#747474;} button.btnCancel:before {width:44px; height:44px; background:url(/ssw/images/svg/btnClose.svg) no-repeat; background-size:cover;} button.btnRemove {width:30px; height:30px; background:#747474;} button.btnRemove:before {width:30px; height:30px; background:url(/ssw/images/svg/btnClose.svg) no-repeat; background-size:cover;} button.btnRemoveGray {width:30px; height:30px; background:#4d4d4d;} button.btnRemoveGray:before {width:30px; height:30px; background:url(/ssw/images/svg/btnClose.svg) no-repeat; background-size:cover;} button.btnInsert {width:30px; height:30px; background:#4d4d4d;} button.btnInsert:before {width:30px; height:30px; background:url(/ssw/images/svg/btnInsert.svg) no-repeat; background-size:cover;} button.btnMinus {width:30px; height:30px; background:#4d4d4d;} button.btnMinus:before {width:30px; height:30px; background:url(/ssw/images/svg/btnMinus.svg) no-repeat; background-size:cover;} button.btnUndo {width:30px; height:30px; background:#4d4d4d;} button.btnUndo:before {width:30px; height:30px; background:url(/ssw/images/svg/btnCycle.svg) no-repeat; background-size:cover; transform:rotateY(180deg);} button.btnUndo:disabled:hover {background:#4d4d4d;} button.btnRedo {width:30px; height:30px; background:#4d4d4d;} button.btnRedo:before {width:30px; height:30px; background:url(/ssw/images/svg/btnCycle.svg) no-repeat; background-size:cover;} button.btnRedo:disabled:hover {background:#4d4d4d;} button.btnRewind {width:30px; height:30px;} button.btnRewind:before {width:30px; height:30px; background:url(/ssw/images/svg/btnWind.svg) no-repeat; background-size:cover; transform:rotateY(180deg);} button.btnWind {width:30px; height:30px;} button.btnWind:before {width:30px; height:30px; background:url(/ssw/images/svg/btnWind.svg) no-repeat; background-size:cover;} button.btnPlay {width:30px; height:30px;} button.btnPlay:before {width:30px; height:30px; background:url(/ssw/images/svg/btnPlay.svg) no-repeat; background-size:cover;} button.btnStop {width:30px; height:30px; background:#4d4d4d;} button.btnStop:before {width:30px; height:30px; background:url(/ssw/images/svg/btnStop.svg) no-repeat; background-size:cover;} button.btnMore {width:30px; height:30px; background:#4d4d4d;} button.btnMore:before {width:30px; height:30px; background:url(/ssw/images/svg/icon_more.svg) no-repeat; background-size:cover; filter:brightness(10); transform: rotate(90deg);} button.btnNotify {width:40px; height:40px;} button.btnNotify:before {width:40px; height:40px; background:url(/ssw/images/svg/btnNotify.svg) no-repeat; background-size:cover; filter:brightness(0.5);} button.btnReport {width:40px; height:40px;} button.btnReport:before {width:40px; height:40px; background:url(/ssw/images/svg/btnReport.svg) no-repeat; background-size:cover; filter:brightness(0.5);} button.btnSetting {width:40px; height:40px;} button.btnSetting:before {width:40px; height:40px; background:url(/ssw/images/svg/btnSetting.svg) no-repeat; background-size:cover; filter:brightness(0.5);} button.btnLogout {width:40px; height:40px;} button.btnLogout:before {width:40px; height:40px; background:url(/ssw/images/svg/btnLogout.svg) no-repeat; background-size:cover; filter:brightness(0.5);} button.btnUser {width:40px; height:40px;} button.btnUser:before {width:40px; height:40px; background:url(/ssw/images/svg/btnUser.svg) no-repeat center; background-size:contain; filter:brightness(0.5); transform:scale(0.5);} button.btnAlign_l {background:url(/ssw/images/editor/btnAlign_l.png) no-repeat; width:35px; height:35px;} button.btnAlign_c {background:url(/ssw/images/editor/btnAlign_c.png) no-repeat; width:35px; height:35px;} button.btnAlign_r {background:url(/ssw/images/editor/btnAlign_r.png) no-repeat; width:35px; height:35px;} button.btnBold {background:url(/ssw/images/editor/btnBold.png) no-repeat; width:35px; height:35px;} button.btnItalic {background:url(/ssw/images/editor/btnItalic.png) no-repeat; width:35px; height:35px;} button.btnLineBottom {background:url(/ssw/images/editor/btnLineBottom.png) no-repeat; width:35px; height:35px;} button.btnLineMiddle {background:url(/ssw/images/editor/btnLineMiddle.png) no-repeat; width:35px; height:35px;} button.btnLineTop {background:url(/ssw/images/editor/btnLineTop.png) no-repeat; width:35px; height:35px;} button.btnUnder {background:url(/ssw/images/editor/btnUnder.png) no-repeat; width:35px; height:35px;} button.front {background:url(/ssw/images/editor/bring_front.png) no-repeat; width:35px; height:35px;} button.forward {background:url(/ssw/images/editor/bring_forward.png) no-repeat; width:35px; height:35px;} button.copy {background:url(/ssw/images/editor/bring_copy.png) no-repeat; width:35px; height:35px;} button.back {background:url(/ssw/images/editor/bring_back.png) no-repeat; width:35px; height:35px;} /* button.btnAlign_l {width:35px; height:35px; background:#fff;} button.btnAlign_l:before {width:35px; height:35px; background:url(/ssw/images/svg/btnAlign_l.svg) no-repeat;} button.btnAlign_c {width:35px; height:35px; background:#fff;} button.btnAlign_c:before {width:35px; height:35px; background:url(/ssw/images/svg/btnAlign_c.svg) no-repeat;} button.btnAlign_r {width:35px; height:35px; background:#fff;} button.btnAlign_r:before {width:35px; height:35px; background:url(/ssw/images/svg/btnAlign_r.svg) no-repeat;} button.btnBold {width:35px; height:35px; background:#fff;} button.btnBold:before {width:35px; height:35px; background:url(/ssw/images/svg/btnBold.svg) no-repeat; transform:scale(0.7);} button.btnItalic {width:35px; height:35px; background:#fff;} button.btnItalic:before {width:35px; height:35px; background:url(/ssw/images/svg/btnItalic.svg) no-repeat; transform:scale(0.7);} button.btnUnder {width:35px; height:35px; background:#fff;} button.btnUnder:before {width:35px; height:35px; background:url(/ssw/images/svg/btnUnder.svg) no-repeat; transform:scale(0.7);} button.btnLineBottom {width:35px; height:35px; background:#fff;} button.btnLineBottom:before {width:35px; height:35px; background:url(/ssw/images/svg/btnLineBottom.svg) no-repeat;} button.btnLineMiddle {width:35px; height:35px; background:#fff;} button.btnLineMiddle:before {width:35px; height:35px; background:url(/ssw/images/svg/btnLineMiddle.svg) no-repeat;} button.btnLineTop {width:35px; height:35px; background:#fff;} button.btnLineTop:before {width:35px; height:35px; background:url(/ssw/images/svg/btnLineTop.svg) no-repeat;} */ button.btnCancel_s {width:21px; height:21px; background:#cf0652;} button.btnCancel_s:before {width:21px; height:21px; background:url(/ssw/images/svg/btnClose.svg) no-repeat; background-size:cover;} button.btnRetry {width:21px; height:21px; background:#367b53;} button.btnRetry:before {width:13px; height:13px; margin:4px; background:url(/ssw/images/svg/btnRetry.svg) no-repeat; background-size:cover;} button.btnRetry:disabled {filter:grayscale(1);} button.btnLDirection {width:51px; height:51px; background:#4d4d4d;} button.btnLDirection:before {width:51px; height:51px; background:url(/ssw/images/svg/btnArrow.svg) no-repeat center; background-size:120%; filter:contrast(0.5);} button.btnClose {width:40px; height:40px; outline-offset:-1px;} button.btnClose:before {width:40px; height:40px; background:url(/ssw/images/svg/btnClose.svg) no-repeat; background-size:cover; filter:brightness(0.5);} button.btnClose_s {width:30px; height:30px;} button.btnClose_s:before {width:30px; height:30px; background:url(/ssw/images/svg/btnClose.svg) no-repeat; background-size:cover; filter:brightness(0.5);} .buttonWrap {font-size:0;} .buttonWrap button {margin:2px;} /* ---------------------------------------------- button - sort ------------------------------------------------*/ button.sort {display:inline-block; cursor:pointer; color:#464646; font-size:13px; font-weight:bold; text-align:left; position:relative; padding-right:20px;} button.sort[aria-pressed="true"] {} button.sort[aria-pressed="true"]:after {} button.sort:after {display:inline-block; vertical-align:middle; width:13px; height:7px; margin:0 4px; position:absolute; right:0; top:50%; transform:translate(0, -50%);} button.sort.desc:after {content:""; background: url(/ssw/images/bullet/th_down_p.png) no-repeat right center;} button.sort.asc:after {content:""; background: url(/ssw/images/bullet/th_up_p.png) no-repeat right center;} /* ---------------------------------------------- button - mini ------------------------------------------------*/ button.mini {height:26px; padding:0 10px; font-size:12px;} /* -------------------------------------------------------- TABLE ----------------------------------------------------------*/ /* tableWrap - */ .tableWrap {height:100%; overflow-y:scroll; overflow-x:hidden; background:#fff;} .tableWrap .tableHeader {border-top:1px solid #828282; border-bottom:1px solid #828282; background:#fff;} .tableWrap .tableHeader table {padding-right:17px;} .tableWrap .tableBody {height:100%;} .tableWrap .tableBody table tbody tr td p {white-space:normal; word-break:break-all;} /* .tableWrap .tableBody table tbody tr:nth-child(odd) td {background:#f2f2f2;} */ .tableWrap table {width:100%; color:#464646; font-size:14px;} .tableWrap table tbody {} .tableWrap table tbody tr td a {color:#cf0652; padding:4px 0; display:block; white-space:normal; word-break:break-all; font-size:14px;} .tableWrap table tr th, .tableWrap table tr td {position:relative; padding:10px; border:0; text-align:left; vertical-align:middle; font-size:14px; word-break:break-all;} .tableWrap table thead {} .tableWrap table thead tr th {} .tableWrap table thead tr th {position:sticky; top:0; z-index:9; line-height:14px; font-size:13px; font-weight:bold; background:#fff; border-bottom:1px solid #828282;} .tableWrap table thead tr th .required {display:inline-block; text-decoration:none; font-size:20px;} .tableWrap table thead tr th.leftBorder, .tableWrap table tbody tr td.leftBorder {border-left:1px solid #e5e5e5;} .tableWrap table thead tr th.bottomBorder {border-bottom:1px solid #828282;} .tableWrap table tbody tr {} .tableWrap table tbody tr td {border-bottom:1px solid #eee;} .tableWrap table tbody tr td:first-child {border-left:0;} .tableWrap table tbody tr td .buttonWrap button {margin:2px;} .tableWrap table thead tr th .opt, .tableWrap table tbody tr td .opt {padding:0 10px;} .tableWrap tbody td .detail_status {max-width:150px;} .tableWrap table tr th.left, .tableWrap table tr td.left {text-align:left;} .tableWrap table tr th.center, .tableWrap table tr td.center {text-align:center;} .tableWrap table tr th.right, .tableWrap table tr td.right {text-align:right;} .tableWrap.fixed table {table-layout:fixed;} .tableWrap.even table tbody tr:nth-child(even) {background:#f1f1f1;} .tableWrap.odd table tbody tr:nth-child(odd) {background:#f1f1f1;} .tableWrap.box table {border:1px solid #DBDBDB;} .tableWrap.line table thead tr th, .tableWrap.line table tbody tr td {border-left:1px solid #f0f0f0;} .tableWrap.line table thead tr th:first-child, .tableWrap.line table tbody tr td:first-child {border-left:0px;} /* jsmartable */ .tableWrap table thead tr th.jsmartable-row-append-th {text-align:center !important; min-width:60px; width:6%;} .tableWrap table tbody tr td .jsmartable-collapse {display:block; width:28px; height:28px; margin:0 auto; border-radius:50%; padding:0; filter:grayscale(1); opacity:0.6;} .tableWrap table tbody tr td .jsmartable-collapse:hover {filter:grayscale(0); opacity:1;} .tableWrap table tbody tr td .jsmartable-collapse:active {filter:grayscale(0.5); opacity:1;} .tableWrap table tbody tr td .jsmartable-collapse i {width:28px; height:28px;} .tableWrap table tbody tr td .jsmartable-collapse .fa::after {content:''; color:#fff; display:block; width:28px; height:28px; background-size:cover;} .tableWrap table tbody tr td .jsmartable-collapse .fa-plus::after {background:url(/ssw/images/svg/btn_table_more.svg)no-repeat;} .tableWrap table tbody tr td .jsmartable-collapse .fa-minus::after {background:url(/ssw/images/svg/btn_table_closed.svg)no-repeat;} /* primeType */ .tableWrap.primeType {} .tableWrap.primeType table tr th, .tableWrap.primeType table tr td {padding:10px 4px;} .tableWrap.primeType table tbody tr:hover .title strong {color:#e2105f; text-decoration:underline;} .tableWrap.primeType table tbody tr {outline:5px solid transparent; outline-offset:-6px;} .tableWrap.primeType table tbody tr:hover {outline:5px solid #cf0652;} /* jsmartable */ .jsmartable {} .jsmartable .jsmartable-row {background:#fff !important; outline:none !important;} .jsmartable .jsmartable-row .jsmartable-col {border:0 !important; padding:0 !important; background:#ccc;} .jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable {background:#f8f8f9 !important;} .jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow {outline:none !important; background:#f8f8f9;} .jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow:last-child .jsmartable-subcol {border-bottom:0px;} .jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow .jsmartable-subcol {border-top:0; outline:0px solid transparent;border-bottom:1px solid #ddd;padding:10px;background:none !important; word-break:break-all; width:70% !important;} .jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow .jsmartable-subcol:first-child {font-weight:bold;font-size: 13px; width:30% !important;} .jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow .jsmartable-subcol .buttonWrap {text-align:left !important;} .jsmartable-subtable {background:none !important; border:1px solid #ddd;} .jsmartable-subtable tr {} .jsmartable-subtable td {border:0;} /* ---------------------------------------------- radio , checkbox ------------------------------------------------*/ .opt {position:relative;} .opt input[type=radio]+label:before, .opt input[type=checkbox]+label:before {display:inline-block;} .opt input[type=checkbox]+label:before {content:''; background:#ccc; width:30px; min-width:30px; height:30px; border-radius:50%; box-shadow:inset 0px 0px 0px 1px rgb(0 0 0 / 30%);} .opt input[type=radio], input[type=checkbox] {} .opt input[type=radio], .opt input[type=checkbox] {position:absolute; width:30px; height:30px; margin:0; opacity:0;} .opt input[type=radio]+label, .opt input[type=checkbox]+label {display:inline-block; font-size:15px; vertical-align:middle; cursor:pointer; visibility:visible;} .opt input[type=radio]+label span.text, .opt input[type=checkbox]+label span.text {display:inline-block; vertical-align:middle; margin:0 6px; color:#333; font-weight:500; white-space:nowrap;} .opt input[type=radio]+label:before, .opt input[type=checkbox]+label:before {display:inline-block; color:#c7c9d1; font-size:30px; vertical-align:middle;} .opt input[type=radio]+label:hover:before, .opt input[type=checkbox]+label:hover:before {color:#427bfd;} .opt input[type=radio]:disabled, .opt input[type=checkbox]:disabled {z-index:9;} .opt input[type=radio]:disabled+label, .opt input[type=checkbox]:disabled+label {cursor:not-allowed; opacity:0.5;} .opt input[type=radio]:disabled+label:before, .opt input[type=checkbox]:disabled+label:before {color:#ddd;} .opt input[type=checkbox]:disabled+label.lock {opacity:0.8;} .opt input[type=checkbox]:disabled+label.lock:before {background: url(/ssw/images/form/checkbox_l.png) 0 0px no-repeat;} .opt input[type=radio]+label:before {content:''; background:#fff; width:30px; height:30px; border-radius:50%; box-shadow: inset 0px 0px 0px 1px rgb(0 0 0 / 30%);} .opt input[type=radio]:checked+label:before {background:#fff;} .opt input[type=radio]:checked+label:after {content:''; display:block; width:14px; height:14px; background:#cf0652; border-radius:50%; position:absolute; top:0; left:0; margin:8px;} .opt input[type=checkbox]:checked+label:before {background:url(/ssw/images/svg/optCheck.svg)#cf0652 no-repeat center;} .opt input[type=radio]:focus ~ label, .opt input[type=checkbox]:focus ~ label {outline:-webkit-focus-ring-color auto 1px;} .opt input[type=radio]:active:focus ~ label, .opt input[type=checkbox]:active:focus ~ label {box-shadow:0px 0px 0px 0px rgba(0,0,0,0.6);} .opt.lock input[type=checkbox]:disabled+label {opacity:0.8;} .opt.lock input[type=checkbox]:disabled+label:before {background: url(/ssw/images/form/checkbox_l.png) 0px 0px no-repeat;} /* New Style for CheckBox label styling */ /* input[type=checkbox] + label {background: url('/ssw/images/form/checkbox_n.png') 0 0px no-repeat; height:30px; width:30px; display:inline-block; cursor:pointer; position:relative;} input[type=checkbox]:checked + label {background: url('/ssw/images/form/checkbox_s.png') 0 0px no-repeat; height:30px; width:30px; display:inline-block; padding: 0 0 0 0px;} input[type=checkbox][disabled] + label {background: url('/ssw/images/form/checkbox_n.png') 0 0px no-repeat; height:30px; width:30px; display:inline-block; padding: 0 0 0 0px; opacity:0.3;} input[type=checkbox][disabled] + label.lock {background: url('/ssw/images/form/checkbox_l.png') 0 0px no-repeat; height:30px; width:30px; display:inline-block; padding: 0 0 0 0px; opacity:0.6;} input[type=checkbox]:checked[disabled] + label.checked {background: url('/ssw/images/form/checkbox_s.png') 0 0px no-repeat; height:30px; width:30px; display:inline-block; padding: 0 0 0 0px; opacity:0.6;} */ /* New Style for Radio label styling */ /* input[type=radio] {display:none;} input[type=radio] + label {background: url('/ssw/images/form/radio_n.png') 0px 0px no-repeat; height:32px; width:32px; display:inline-block; cursor:pointer; padding: 0 10px 0 18px; -webkit-transition:all 0.2s ease;transition:all 0.2s ease} input[type=radio]:checked + label {background: url('/ssw/images/form/radio_s.png') 0px 0px no-repeat; height:32px; width:32px; display:inline-block; padding: 0 10px 0 18px;} input[type=radio][disabled] + label {background: url('/ssw/images/form/radio_n.png') 0px 0px no-repeat; height:32px; width:32px; display:inline-block; padding: 0 10px 0 18px; opacity:0.3;} */ /* ---------------------------------------------- select box ------------------------------------------------*/ /* select_num_ea */ .list_2ea ul {overflow-y:scroll; overflow-x:hidden; max-height:70px;} .list_3ea ul {overflow-y:scroll; overflow-x:hidden; max-height:100px;} .list_5ea ul {overflow-y:scroll; overflow-x:hidden; max-height:170px;} .list_7ea ul {overflow-y:scroll; overflow-x:hidden; max-height:240px;} .list_10ea ul {overflow-y:scroll; overflow-x:hidden; max-height:342px;} .list_15ea ul {overflow-y:scroll; overflow-x:hidden; max-height:517px;} .list_20ea ul {overflow-y:scroll; overflow-x:hidden; max-height:694px;} /* select_open */ .select_open {cursor:pointer; font-weight:normal; text-align:left; outline-offset:2px;} /* select_list_low */ .fnSelectBox {position:relative;} .fnSelectBox .select_num {display:block; width:100%; height:35px; line-height:35px; text-indent:16px; position:relative; border-radius:18px; background:#fff; box-sizing:border-box; color:#464646; font-size:15px !important; -webkit-transition:all 0.2s ease;transition:all 0.2s ease; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; padding-right:30px; font-weight:400; box-shadow:inset 0 0 0 1px #747474;} .fnSelectBox .select_num:after {content:''; position:absolute; top:4px; right:4px; display:block; width:28px; height:28px; background:url(/ssw/images/svg/btn_filter_arrow.svg)no-repeat center;} .fnSelectBox .select_num:hover {background:#fff; box-shadow:inset 0 0 0 3px #cf0652; color:#464646;} .fnSelectBox .select_num[aria-expanded="true"] {background:#ce0a51; box-shadow:inset 0 0 0 3px #cf0652; color:#fff;} .fnSelectBox .select_num[aria-expanded="true"]::after {filter:brightness(100); transform:rotate(180deg);} .fnSelectBox .select_list {display:none; width:100%; padding:8px 0; margin-left:-50%; position:absolute; top:45px; left:50%; background:#4d4d4d; border-radius:10px; z-index:500; box-shadow:0px 0px 0px rgba(76,86,103,.25),0px -3px 10px rgba(31,37,50,.32); text-align:left;} .fnSelectBox .select_list ul {padding:10px 0px; background:#4d4d4d; border-radius:10px;} .fnSelectBox .select_list li {display:block; padding:0 6px; border:0px; font-size:0;} .fnSelectBox .select_list li .thumb {display:inline-block; vertical-align:middle; width:67px; height:35px; background:#fff; margin:4px;} .fnSelectBox .select_list li .thumb img {width:auto; max-width:67px; height:auto; max-height:35px;} .fnSelectBox .select_list li .thumb ~ a {display:inline-block; vertical-align:middle; width:calc(100% - 75px); box-sizing:border-box;} .fnSelectBox .select_list li p {display:block; cursor:pointer; height:35px; line-height:35px !important; font-size:14px; color:#FFF; text-indent:6px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap !important;} .fnSelectBox .select_list li p:hover {background:#ce0a51;} .fnSelectBox .select_list li p:active {background:#ce0a51;} .fnSelectBox .select_list li p.select {background:#ce0a51;} .fnSelectBox .select_list li p.select:before {content:''; display:inline-block; vertical-align:middle; width:20px; height:20px; background:url(/ssw/images/svg/optCheck.svg) no-repeat center;} .fnSelectBox .select_list li.depth2 {position:relative; padding-left:19px;} .fnSelectBox .select_list li.depth2::before {display:block; position:absolute; top:17px; left:14px; width:6px; height:2px; background:#cacaca; content:'';} .fnSelectBox .select_list li.depth3 {position:relative; padding-left:30px;} .fnSelectBox .select_list li.depth3::before {display:block; position:absolute; top:17px; left:24px; width:6px; height:2px; background:#cacaca; content:'';} .fnSelectBox.disable {cursor:not-allowed;} .fnSelectBox.disable .select_num {cursor:default; opacity:0.5; pointer-events:none;} .fnSelectBox.disable .select_dark_low {opacity:0.5; pointer-events:none;} .fnSelectBox.disable .select_dark_low:hover {border:3px solid #ECECEC; color:#C1C1C1;} .fnSelectBox.disable .select_dark_low:focus {} .fnSelectBox.disable ul {display:none !important;} /* select_box_low */ .select_box_low .select_list ul:after{content:"";position:absolute; top:-10px; left:50%; margin-left:-10px; border-bottom:10px solid #4d4d4d; border-left: 10px solid transparent; border-right: 10px solid transparent;} /* select_box_top */ .select_box_top .select_list {top:auto; bottom:48px;} .select_box_top .select_list ul:after{content:"";position:absolute; bottom:-10px; left:50%; margin-left:-10px; border-top:10px solid #4d4d4d; border-left: 10px solid transparent; border-right: 10px solid transparent;} /* dark skin */ .select_dark {display:block; width:100%; height:35px; line-height:30px; text-indent:16px; border-radius:18px; background:#4d4d4d; border:3px solid #4d4d4d; box-sizing:border-box; color:#fff; font-size:14px; -moz-animation-play-state:all 0.2s ease;transition:all 0.2s ease; padding-right:40px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} .select_dark:after {content:''; position:absolute; top:4px; right:4px; display:block; width:28px; height:28px; background:url(/ssw/images/svg/btn_filter_arrow.svg)no-repeat center; filter:brightness(100);} .select_dark:focus::after {filter:brightness(100); transform:rotate(180deg);} /* dark_row skin */ .select_dark_low {display:block; width:100%; height:35px; line-height:35px; text-indent:16px; border-radius:18px; background:#4d4d4d; box-sizing:border-box; color:#fff; font-size:14px; -webkit-transition:all 0.2s ease;transition:all 0.2s ease; padding-right:40px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; font-weight:normal;} .select_dark_low:after {content:''; position:absolute; top:4px; right:4px; display:block; width:28px; height:28px; background:url(/ssw/images/svg/btn_filter_arrow.svg)no-repeat center; filter:brightness(100);} .select_dark_low:focus::after {filter:brightness(100); transform:rotate(180deg);} .fnSelectBox .select_dark_low:focus {background:#ce0a51; color:#fff; } .select_box_low.disable .select_dark_low:focus::after {transform:rotate(0deg);} .select_box_top .select_list li p:active {background:url(/ssw/images/bullet/dropbox_check.png)#530221 no-repeat 10px 14px; text-indent:30px;} .select_box_top .select_list li p.select {/* background:url(/ssw/images/bullet/select_low_check.png) no-repeat right center; */text-indent:14px;background: #CF0652;} /* page_num */ .page_num {display:inline-block; vertical-align:middle; position:relative;} .page_num .select_num {display:block; width:100px; height:25px; line-height:25px; text-indent:16px; border-radius:18px; background:#4d4d4d; box-sizing:border-box; color:#fff; font-size:16px; padding-right:40px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; box-shadow: none;} .page_num .select_num:hover {background:#ce0a51; color:#fff;} .page_num .select_num:after {top:0; width:25px; height:25px; filter:brightness(100);} .page_num .select_list {top:auto; bottom:48px;} .page_num .select_list ul:after{content:"";position:absolute; bottom:-10px; left:50%; margin-left:-10px; border-top:10px solid #4d4d4d; border-left: 10px solid transparent; border-right: 10px solid transparent;} .fnSelectBox .select_list ul::-webkit-scrollbar {height:6px; width:6px; background:transparent; border:4px solid transparent;} .fnSelectBox .select_list ul::-webkit-scrollbar-thumb {border-radius:10px;} .fnSelectBox .select_list ul::-webkit-scrollbar-thumb:vertical, .fnSelectBox .select_list ul::-webkit-scrollbar-thumb:vertical:hover, .fnSelectBox .select_list ul::-webkit-scrollbar-thumb:vertical:active {border:0px solid transparent; background:none; background-clip:padding-box;} .fnSelectBox .select_list ul::-webkit-scrollbar-button:vertical:start:decrement {background:none; width:0; height:0;} .fnSelectBox .select_list ul::-webkit-scrollbar-button:vertical:end:increment {background:none; width:0; height:0;} .fnSelectBox .select_list ul::-webkit-scrollbar-thumb {border:0px solid transparent; background-color:rgba(0,0,0,0.4) !important; background-clip:padding-box;} .fnSelectBox .select_list ul::-webkit-scrollbar-button:horizontal:start:decrement {background:none; width:0; height:0;} .fnSelectBox .select_list ul::-webkit-scrollbar-button:horizontal:end:increment {background:none; width:0; height:0;} .page_num.disable {} .page_num.disable .select_num {background:url(/ssw/images/bullet/select_low_d.png)#F5F5F5 no-repeat right 7px; color:#999; cursor:default; border:3px solid #F5F5F5;} .page_num.disable .select_num:hover {border:3px solid #F5F5F5 ; color:#999;} .page_num.disable .select_num:focus {border:3px solid #F5F5F5 ; color:#999;} .page_num.disable .select_list {display:none !important;} /* -------------------------------------------------------- pagination ----------------------------------------------------------*/ .pagination {font-size:0px; text-align:center; height:30px; line-height:normal;} .pagination .btnPaging {margin:0 1px;} .pagination .number {} .pagination .number button {display:inline-block; position:relative; z-index:2; width:30px; line-height:30px; height:30px; color:#464646; font-size:0; text-decoration:none; text-align:center; vertical-align:middle; border-radius:50%; margin:0 2px;} .pagination .number button[pageno] {} .pagination .number button[pageno]:after {content:attr(pageno); font-size:12px;} .pagination .number button:hover {background:#cf0652; color:#fff;} .pagination .number button:active {background:#575757; color:#fff; position:relative;} .pagination .number button:active:before {content:''; border:3px solid #cf0652; box-sizing:border-box; border-radius:50%; position:absolute; top:0; left:0; right:0; bottom:0;} .pagination .number button.active {font-weight:bold; text-decoration:underline; text-underline-position: under;} .pagination .number button.active:hover {background:none; color:#464646;} .pagination .number button.disabled {opacity:0.4; user-select:none;} /* ---------------------------------------------- Picker ------------------------------------------------*/ /* datepicker */ .ui-datepicker {height:340px; background:#fff !important; color:#464646 !important; display:none; box-sizing:border-box; box-shadow: inset 0 0 0 1px #979797, 0 1px 3px rgb(53 57 74 / 40%);} .ui-datepicker.ui-widget-content {border:0px; color:#464646;} .ui-datepicker .ui-widget-content {border:0px; background:none;} .ui-datepicker .ui-widget-header {border:0px; background:none;} .ui-datepicker .ui-widget-header .ui-icon {background:none;} .ui-datepicker .ui-datepicker-buttonpane button {float:none !important; margin:0 4px !important; padding:0 20px !important;} .ui-datepicker .ui-state-hover, .ui-datepicker .ui-widget-content .ui-state-hover, .ui-datepicker .ui-widget-header .ui-state-hover, .ui-datepicker .ui-state-focus, .ui-datepicker .ui-widget-content .ui-state-focus, .ui-datepicker .ui-widget-header .ui-state-focus {border:0px; background:none; font-weight:normal; color:#212121;} .ui-datepicker .ui-state-default, .ui-datepicker.ui-widget-content .ui-state-default, .ui-datepicker .ui-widget-header .ui-state-default { border:0px; background:none; color:#464646;} .ui-datepicker td span, .ui-datepicker td a {padding:0px !important; text-align:center !important;} .ui-datepicker a { color:#FFF;} .ui-datepicker .ui-datepicker-header {position:relative; height:30px; margin-bottom:0px;} .ui-datepicker .ui-datepicker-header a {display:block; width:30px; height:30px; background:#FFF; border-radius:50%; text-indent:-999em; cursor:pointer; position:absolute;} .ui-datepicker .ui-datepicker-header .ui-datepicker-prev {top:0px; left:5px; background:url(/ssw/images/button/popup_btn_arrow_l_n.png) no-repeat;} .ui-datepicker .ui-datepicker-header .ui-datepicker-prev:hover {top:0px; left:5px; background:url(/ssw/images/button/popup_btn_arrow_l_f.png) no-repeat;} .ui-datepicker .ui-datepicker-header .ui-datepicker-prev:active {top:0px; left:5px; background:url(/ssw/images/button/popup_btn_arrow_l_p.png) no-repeat;} .ui-datepicker .ui-datepicker-header .ui-datepicker-prev.ui-state-disabled {top:0px; left:5px; background:url(/ssw/images/button/popup_btn_arrow_l_n.png) no-repeat;} .ui-datepicker .ui-datepicker-header .ui-datepicker-next {top:0px; right:5px; background:url(/ssw/images/button/popup_btn_arrow_r_n.png) no-repeat;} .ui-datepicker .ui-datepicker-header .ui-datepicker-next:hover {top:0px; right:5px; background:url(/ssw/images/button/popup_btn_arrow_r_f.png) no-repeat;} .ui-datepicker .ui-datepicker-header .ui-datepicker-next:active {top:0px; right:5px; background:url(/ssw/images/button/popup_btn_arrow_r_p.png) no-repeat;} .ui-datepicker .ui-datepicker-header .ui-datepicker-next.ui-state-disabled {top:0px; right:5px; background:url(/ssw/images/button/popup_btn_arrow_r_n.png) no-repeat;} .ui-datepicker .ui-datepicker-header .ui-datepicker-title { text-align:center; font-weight:bold; line-height:30px; font-size:16px; color:#464646;} .ui-datepicker .ui-datepicker-calendar {width:100%; white-space:normal; border-collapse:collapse;} .ui-datepicker .ui-datepicker-calendar tr {} .ui-datepicker .ui-datepicker-calendar tr th {text-align:center; font-size:13px; height:30px; line-height:30px;} .ui-datepicker .ui-datepicker-calendar tr td {text-align:center; font-size:13px; height:30px; line-height:30px; width:14.285%;} /*hi*/ .hi .ui-datepicker .ui-datepicker-calendar tr th {font-size:12px;} /* .ui-datepicker .ui-datepicker-calendar tr td.ui-datepicker-today a {background:#fff; border:3px solid #cf0652; color:#686868; box-sizing:border-box; line-height:25px; font-weight:bold;} .ui-datepicker .ui-datepicker-calendar tr td.ui-datepicker-today a:hover {background:#fff; border:3px solid #cf0652; color:#686868; box-sizing:border-box;} */ .ui-datepicker .ui-datepicker-calendar tr td a {display:inline-block; width:30px; height:30px; border-radius:50%; margin-bottom:2px;} .ui-datepicker .ui-datepicker-calendar tr td a:hover {background:#464646; color:#fff;} .ui-datepicker .ui-datepicker-calendar tr td a:active {background:#530221;} .ui-datepicker .ui-datepicker-calendar tr td a.ui-state-active {background:#cf0652; color:#FFF; font-weight:bold;} .ui-datepicker .ui-datepicker-calendar tr td span {color:#999;} .ui-datepicker .ui-datepicker-buttonpane {text-align:center; position:absolute; width:100%; bottom:20px; margin:0;} .ui-datepicker .ui-datepicker-buttonpane button {background:#4d4d4d !important; border-radius:18px; color:#eee !important; font-size:14px; text-decoration:none; text-align:center; display:inline-block; height:30px; line-height:26px; padding:0 20px; border:2px solid #4d4d4d !important; font-weight:normal; box-sizing:border-box; margin:0 4px; cursor:pointer;} .ui-datepicker .ui-datepicker-buttonpane button:hover {background:#cf0652 !important; border:2px solid #cf0652 !important; color:#FFF !important; /* font-weight:bold; */} .ui-datepicker .ui-datepicker-buttonpane button:active {color:#eee; background:#4d4d4d !important; border:2px solid #cf0652 !important; /* font-weight:bold; */} .ui-datepicker .ui-datepicker-buttonpane .ui-datepicker-current {opacity:1;} .ui-datepicker .ui-datepicker-buttonpane .ui-datepicker-close {} /* ui-tabs */ .ui-tabs {position:relative; text-align:left;} .ui-tabs .ui-tabs-nav {margin:20px 0; font-size:0; border-bottom:1px solid #9f9f9f;} .ui-tabs .ui-tabs-nav li {display:inline-block; vertical-align:bottom; width:50%; position:relative; top:0; padding:0; list-style:none; white-space:nowrap; font-size:14px;} .ui-tabs .ui-tabs-nav .ui-tabs-anchor {} .ui-tabs .ui-tabs-nav li.ui-state-default .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-tab .ui-tabs-anchor {display:flex; display:-webkit-flex; display:-ms-flexbox; height:43px; margin-left:-1px; border:1px solid #c5c5c5; border-bottom:0; background:#f8f8f8; color:#464646; font-size:16px; text-align:center; white-space:normal; justify-content:center;align-items:center; -webkit-justify-content:center; -webkit-align-items:center; -ms-flex-pack:center; -ms-flex-align:center;} .ui-tabs .ui-tabs-nav li.ui-tabs-tab:first-child .ui-tabs-anchor {margin-left:0;} .ui-tabs .ui-tabs-nav li.ui-tabs-active {z-index:1;} .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {color:#464646; background:#fff; margin-bottom:-1px; border:1px solid #9f9f9f; border-bottom:1px solid #5c5c5c;} .ui-tabs .ui-tabs-nav li.ui-tabs-active {} .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {cursor:text; font-weight:bold;} .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {cursor:pointer;} .ui-tabs .ui-tabs-panel {display:block; font-size:14px; padding:10px; line-height:20px; color:#6e768f;} /* color_picker */ .color_picker { width:auto !important;} .color_picker .popup_box {width:286px; position:relative; padding:10px;} .color_picker .popup_box_content {width:auto !important; margin-top:0px !important;} .color_picker .popup_box_content h3 {font-size:14px; font-weight:bold; font-style:italic; color:#464646; border-bottom:0px; padding:10px 0 10px 0;} .color_picker .popup_box_content .color_point {font-size: 0px; letter-spacing: 0px; word-spacing: 0px; margin-bottom:2px;} .color_picker .popup_box_content .color_point button {display:inline-block; font-size:20px; width:calc(10% - 6px); height:20px; border:1px solid #FFF; box-sizing:border-box; cursor:pointer; letter-spacing: 0px; word-spacing: 0px; margin-left:6px; padding:0px; box-shadow: inset 0 0 0 1px #979797;} /* advanced_color_picker */ .advanced_color_picker {width:286px !important; display:none;} .advanced_color_picker .popup_box {width:auto !important; position:relative; padding:0 0 10px;} .advanced_color_picker .popup_box_content {width:auto !important; margin-top:0px !important;} .advanced_color_picker .popup_box_content .bg_color {height:96px;} .advanced_color_picker .popup_box_content .slide_box_wrap {margin:0 10px;} .advanced_color_picker .popup_box_content .slide_box {display:flex; justify-content:space-between; align-items:center; overflow:hidden; padding:14px 0 0 0; position:relative;} .advanced_color_picker .popup_box_content .slide_box .progress {position:absolute; top:32px; left:57px; width:160px; height:3px; background:#a7a7a7; } .advanced_color_picker .popup_box_content .slide_box .progress .progress_bar {position:absolute; top:-1px; left:-1px; height:3px; background:#ffffff;} .advanced_color_picker .popup_box_content .slide_box .progress .progress_bar span {position:absolute; top:-10px; right:-11px; display:block; width:23px; height:23px; background:url(/ssw/images/editor/editor_slider.png) no-repeat; cursor:col-resize; text-indent:-999em;} .advanced_color_picker .popup_box_content .slide_box .slider {width:calc(100% - 200px)!important; margin: 0 8px; order:3;} .advanced_color_picker .popup_box_content .slide_box .slider.ui-slider .ui-widget-header {} .advanced_color_picker .popup_box_content .slide_box .slider.ui-slider.ui-widget-content {background:#a7a7a7 !important;} .advanced_color_picker .popup_box_content .slide_box .btnMinus {order:2;} .advanced_color_picker .popup_box_content .slide_box .btnInsert {order:4;} .advanced_color_picker .popup_box_content .slide_box span.fl {display:block; width:50px; height:38px; line-height:38px; text-align:center; color:#464646; padding:0px; font-size:14px; background:none;} .advanced_color_picker .popup_box_content .slide_box span.fr {width:50px; order:6;} .advanced_color_picker .popup_box_content .slide_box span.fr input {padding:0; text-align:center;} .advanced_color_picker .popup_box_content input[type=text] {width:100%;} .advanced_color_picker .button_white {margin:20px 10px 0 0;} /* pop_color_picker */ .pop_color_picker {position:relative;} .pop_color_picker .color_picker {margin:4px;} .pop_color_picker .color_picker .popup_box_content {} .pop_color_picker .color_picker .popup_box_content .button_white {font-size:0;} .pop_color_picker .color_picker .popup_box_content .button_white button {margin:2px;} .pop_color_picker .advanced_color_picker {margin:4px; z-index:3; background:#fff;} .pop_color_picker .advanced_color_picker .popup_box_content .bg_color {border-bottom:1px solid #979797; box-sizing:border-box;} .pop_color_picker .advanced_color_picker .popup_box {box-shadow:none;} /* .pop_color_picker .advanced_color_picker .popup_box_content .slide_box { padding:24px 0 0 0;} .pop_color_picker .advanced_color_picker .popup_box_content .slide_box .progress {top:43px;} */ /* ---------------------------------------------- VideoWall/OLED Pop ------------------------------------------------*/ .info_wrap {width:638px; height:0px; visibility:hidden; display:flex; justify-content:space-between; align-items:center;/* */ display:-webkit-flex; -webkit-justify-content:space-between; -webkit-align-items:center; color:#FFF; font-weight:normal; font-size:14px; background:rgba(0,0,0,0.8); position:absolute; bottom:-20px; left:50%; border-radius: 4px; margin-left:-319px; overflow:hidden; opacity:0;} .info_wrap .info_txt { display:block; vertical-align:middle; padding:0 10px; width:calc(100% - 180px);} .info_wrap .info_txt h3 {display:block; width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} .info_wrap .info_txt p {display:block; width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; color:#cecece;} .info_wrap .button_white.first {} .info_wrap .button_white.first button {margin:0 2px;} .info_wrap .button_white {display:flex;} .info_wrap .button_white a { padding:0 14px;} .info_wrap .close {display:block; width:30px; height:30px; margin:0 10px; background:url(/ssw/images/button/btn_close_03_g_n.png) no-repeat; padding:0; border:0; text-indent:-999em;} .info_wrap .close:hover {background:url(/ssw/images/button/btn_close_08_f.png) no-repeat;} .info_wrap .close:active {background:url(/ssw/images/button/btn_close_08_p.png) no-repeat;} .info_wrap.active {height:62px; opacity:1; bottom:-1px; z-index:999; visibility: visible;} /*el*/ .el .info_wrap .button_white.first {} .el .info_wrap .button_white {} /* ---------------------------------------------- Side Layer ------------------------------------------------*/ /* select_layout */ .copyTo_header {height:74px; padding-left:60px; position:relative; border-bottom:1px solid #b7b7b7; margin:0 14px;} .copyTo_header .btn_circle_s {top:16px;} .copyTo_header h2 {display:block; font-size:24px; font-weight:normal; padding-top:24px; color:#464646;} .copyTo_body {height:calc(100% - 230px); overflow-y:auto;} .copyTo_body ul {} .copyTo_body ul li {padding:4px 10px 4px 10px; border:5px solid transparent; position:relative;} .copyTo_body ul li:hover {border:5px solid #cf0652;} .copyTo_body ul li.active {border:5px solid #cf0652;} .copyTo_body ul li.active label {display:block; box-shadow:2px 2px 10px #000; border-radius:50%;} .copyTo_body ul li label { position:absolute; top:17px; left:32px; display:none;} .copyTo_body ul li:hover .object .opt {opacity:1;} .copyTo_body ul li:hover label {display:block; box-shadow:2px 2px 10px rgba(0,0,0,.5); border-radius:50%;} .copyTo_body ul li.disable { opacity:0.5; cursor:default;} .copyTo_body ul li.disable label {display:none;} .copyTo_body ul li.disable .object a.add {background:url(/ssw/images/button/btn_insert_n.png) no-repeat;} .copyTo_body ul li.disable .object a.add:hover {background:url(/ssw/images/button/btn_insert_n.png) no-repeat;} .copyTo_body ul li.disable .object a.add:active {background:url(/ssw/images/button/btn_insert_n.png) no-repeat;} .copyTo_body ul li .object {display:flex; justify-content:flex-start; align-items:center; vertical-align:middle; position:relative;} .copyTo_body ul li .object .opt {position:absolute; top:13px; left:21px; width:30px; height:30px;} .copyTo_body ul li .object .opt label {top:0; left:0;} .copyTo_body ul li .object .opt input:disabled ~ label:before {background:#333;} .copyTo_body ul li .object a.add {display:block; float:left; width:30px; height:30px; background:url(/ssw/images/button/btn_insert_n.png) no-repeat; text-indent:-999em; margin-top:10px;} .copyTo_body ul li .object a.add:hover {background:url(/ssw/images/button/btn_insert_f.png) no-repeat;} .copyTo_body ul li .object a.add:active {background:url(/ssw/images/button/btn_insert_p.png) no-repeat;} .copyTo_body ul li .object img {display:inline-block; vertical-align:middle; width:70px; height:50px;} .copyTo_body ul li .object strong {display:inline-block; vertical-align:middle; font-size:12px; font-weight:normal; padding-left:0px; width:230px; color:#464646; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} .copyTo_body ul li ul { display:block; margin:0 0 0 20px;} .copyTo_body ul li ul li:hover {background:#bbb; border:5px solid #cdcdcd;} /* ---------------------------------------------- slider ------------------------------------------------*/ .ui-slider.ui-widget-content {border:0px !important; background:#262626 !important; color:#222222 !important; height:3px !important; margin:15px 15px 0 15px;} .ui-slider .ui-widget-header {border:0px !important; background:#CF0652 !important; color:#222222 !important; font-weight:bold !important;} .ui-slider .ui-slider-handle { top:-10px !important;} .ui-slider .ui-state-default, .ui-slider .ui-widget-content .ui-state-default, .ui-slider .ui-widget-header .ui-state-default {border:0px !important; background:#4D4D4D !important; font-weight:normal !important; color:#555555 !important; width:23px !important; height:23px !important; border-radius:50% !important; margin-left:-11px !important; cursor:col-resize !important; outline-offset: 2px;} .ui-slider .ui-state-active, .ui-slider .ui-widget-content .ui-state-active, .ui-slider .ui-widget-header .ui-state-active {border:0px !important; background:#4D4D4D !important; font-weight:normal !important; color:#555555 !important; width:23px !important; height:23px !important; border-radius:50% !important; margin-left:-11px !important;} .twitter-typeahead {float:left;} .mab-jquery-taginput input{float:left; width:6em; height:34px; padding:0px; border:0px; border-radius:0px !important; margin:1px; background:#fff; font-size:14px; line-height:34px; vertical-align:top; box-shadow:none; text-indent:6px;} .mab-jquery-taginput input[readonly] {pointer-events:none;} .mab-jquery-taginput input:hover, .mab-jquery-taginput input:focus{border:0px;} .mab-jquery-taginput input.h{width:1px} .mab-jquery-taginput input:-moz-placeholder{color:#999999} .mab-jquery-taginput input::-moz-placeholder{color:#999999;opacity:1} .mab-jquery-taginput input:-ms-input-placeholder{color:#999999} .mab-jquery-taginput input::-webkit-input-placeholder{color:#999999} .mab-jquery-taginput input::-ms-clear{display:none} .mab-jquery-taginput.form-control{width:calc(100% - 36px); padding:0 18px;padding-bottom:0;overflow:hidden;border-radius:18px;background:#FFF;text-overflow:ellipsis; box-shadow:inset 0 0 0 1px #747474;} .mab-jquery-taginput .label{display:block;margin:4px 2px; padding:5px 5px 5px 10px;padding-right:0.5em;border-radius:3px;font-size:14px;vertical-align:top; float:left; word-break: break-all;} .label-primary{background:#4d4d4d;color:#fff;} .label-danger{background:#CC2800;color:#fff;} .mab-jquery-taginput a{text-decoration:none;color:#fff} .mab-jquery-taginput .glyphicon{display:inline-block;font-size:0.85em;vertical-align:-1px;cursor:pointer;} .mab-jquery-taginput .glyphicon:after{display:block;width:16px;height:16px;background:url(/ssw/images/button/btn_close_02_n.png) no-repeat -4px -4px;content:"";} .tt-query{box-shadow:inset 0 1px 1px rgba(0,0,0,0.075); -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);} .tt-hint{color:#999} .tt-dropdown-menu{min-width:160px;margin:2px 0 0;padding:5px 0;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.2);border-radius:6px;background-color:#fff;box-shadow:0 5px 10px rgba(0,0,0,0.2); box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);} .tt-suggestion p{clear:both;margin:0;padding:3px 20px;line-height:20px;white-space:nowrap} .tt-suggestion.tt-cursor {color:#fff;background-color:#ddd} /* ---------------------------------------------- slider ------------------------------------------------*/ /* .login_box .select_box_low .select_num, .login_box input {box-shadow:none;} #project_editor_layout {} #project_editor_layout .select_box_low .select_num, #project_editor_layout input {box-shadow:none;} #scene_editor_layout {} #scene_editor_layout .select_box_low .select_num, #scene_editor_layout input {box-shadow:none;} */