/* --- styled select --- */
.select { background: #fff; border: solid 1px #d4d4d4;border-radius: 3px;-webkit-border-radius: 3px; cursor: pointer; position: relative; padding: 0 0 0 10px; }
.select div { background: #fff; border: solid 1px #d4d4d4; display: none; position: absolute; left: 0; top: 23px; z-index: 100; }
.select div > i {position: absolute;width: 100px;height: 10px;background: transparent;top: -9px;left: 0;z-index: 150}
.select div a { display: block; color: #8b8b8b; padding: 10px 15px; white-space: nowrap; text-decoration: none; font-family: "Open Sans"; }
.select div a.active,.select div a:hover { background: #6197fa; color: #fff; }
.select div.caption { color: #c0c0c0; display: block; border: none; left: -40px; top: 6px; font-weight: 700; width: 30px; text-align: right; }
.select i { color: #c0c0c0; position: absolute; right: 10px; top: 45%; font-size: .5em; }
.select:hover i { color: #6197fa; }
.select:hover div { display: block; }
.select.font-family { width: 80px;padding: 0 10px;height: 22px}
.select.font-family span {white-space: nowrap;overflow: hidden;display: inline-block;width: 80px;font-size: .86em;line-height: 1;padding: 5px 0}
.select.font-family div { min-width: 200px;overflow-x: hidden }
.select.font-family div div {cursor: pointer;border: none;position: relative;top: 0;left: 0;padding: 0;margin: 0;display: block;height: 44px;background: #fff url(/editor/css/icons/fonts_v3.png) no-repeat;background-size: 415px 7700px}
.select.font-family div div.active, .select.font-family div div:hover {background-color:#00a8ff; background-image: url(/editor/css/icons/fonts_hover_v3.png);}

.select.font-size { width: 45px;height: 22px;}
.select.font-size span {white-space: nowrap;overflow: hidden;display: inline-block;width: 40px;font-size: .86em;line-height: 1;padding: 5px 0}
.select.font-size div { min-width: 82px; overflow-x: hidden }
.select.font-size div a {padding: 0 15px;}

/* Toolbar and button icons */
@font-face {font-family: 'tools';src:url('fonts/icons.eot?32ac94');src:url('fonts/icons.eot?#iefix32ac94') format('embedded-opentype'),url('fonts/icons.woff?32ac94') format('woff'),url('fonts/icons.ttf?32ac94') format('truetype'),url('fonts/icons.svg?32ac94#icomoon') format('svg');font-weight: normal;font-style: normal;}
[class^="tool-"], [class*=" tool-"] {font-family: 'tools';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.tool-align:before {content: "\e600";}
.tool-align-bottom:before {content: "\e601";}
.tool-align-h-center:before {content: "\e602";}
.tool-align-left:before {content: "\e603";}
.tool-align-right:before {content: "\e604";}
.tool-align-top:before {content: "\e605";}
.tool-align-v-center:before {content: "\e606";}
.tool-background:before {content: "\e607";}
.tool-clipart:before {content: "\e608";}
.tool-color .path1:before {content: "\e609";color: rgb(255, 0, 255);}
.tool-color .path2:before {content: "\e60a";margin-left: -1em;color: rgb(255, 255, 0);}
.tool-color .path3:before {content: "\e60b";margin-left: -1em;color: rgb(255, 255, 0);}
.tool-color .path4:before {content: "\e60c";margin-left: -1em;color: rgb(255, 0, 255);}
.tool-color .path5:before {content: "\e60d";margin-left: -1em;color: rgb(0, 255, 255);}
.tool-color .path6:before {content: "\e60e";margin-left: -1em;color: rgb(0, 255, 255);}
.tool-color .path7:before {content: "\e60f";margin-left: -1em;color: rgb(0, 0, 0);}
.tool-color .path8:before {content: "\e610";margin-left: -1em;color: rgb(0, 0, 0);}
.tool-copy:before {content: "\e611";}
.tool-delete:before {content: "\e612";}
.tool-dropdown:before {content: "\e613";}
.tool-flip:before {content: "\e614";}
.tool-flip-horizontal:before {content: "\e615";}
.tool-flip-vertical:before {content: "\e616";}
.tool-grid:before {content: "\e617";}
.tool-layer:before {content: "\e618";}
.tool-layer-bottom:before {content: "\e619";}
.tool-layer-down:before {content: "\e61a";}
.tool-layer-top:before {content: "\e61b";}
.tool-layer-up:before {content: "\e61c";}
.tool-safe:before {content: "\e61d";}
.tool-shapes:before {content: "\e61e";}
.tool-text-bold:before {content: "\e61f";}
.tool-text-center:before {content: "\e620";}
.tool-text-italic:before {content: "\e621";}
.tool-text-left:before {content: "\e622";}
.tool-text-right:before {content: "\e623";}
.tool-undo:before {content: "\e624";}
.tool-upload-image:before {content: "\e625";}

/* editor */
#redactor, .popup_wnd { color: #363636; font-family: "Open Sans"; font-weight: 400; line-height: 1.715em; }
.editor .work-area{width: 940px;min-width:940px;margin: 0 auto}
.editor .work-area .logo {float: left;margin-right: 35px;margin-top: -4px}
.editor input[type=text] { background: #f7f7f7; border: solid 1px #cecece; color: #9a9a9a; font-family: 'Open Sans'; margin: 0 0 10px; padding: 13px 0 13px 10px; font-size: 1em; }
.editor input[type=text]:focus { background: #fff; }

.editor .toolbar {background: #f2f2f2;padding: 24px 0 0;position: relative;height: 136px;min-width: 940px;width: 100%}
.editor .toolbar .btn {text-transform: uppercase;font-size: .715em;padding: 4px 20px;min-width: 62px}
.editor .toolbar .tools {background: #f2f2f2;position: absolute;width: 100%;border-top: solid 1px #d4d4d4;border-bottom: solid 1px #d4d4d4;top:100px;padding: 0 0 10px 0}
.editor .toolbar .b {background: #fff;border: solid 1px #d4d4d4;border-right: none;color: #393939;font-family: "Open Sans";font-size: .63em;float: left;text-align: center;text-transform: uppercase;text-decoration: none;width: 47px;height: 22px;}
.editor .toolbar .b i { padding: 4px 0; font-size: 1.6em; display: block; }
.editor .toolbar .b img {width: 14px;height: 14px;vertical-align: text-bottom}
.editor .toolbar .b.large {background: transparent;border:none;width: 75px; font-size: .714em;margin: 0 20px 0 10px}
.editor .toolbar .b.large i {padding: 0 0 7px;font-size: 1.7em;}
.editor .toolbar .b.large input {padding: 3px;margin: 0 auto;width: 50px;display: block;text-align: center}
.editor .toolbar .b.large:hover {background: transparent;color: #6197fa}
.editor .toolbar .b.font-style {width: 28px}
.editor .toolbar .b.font-style i{font-size: 1.2em;padding: 6px 0}
.editor .toolbar .b:hover, .editor .toolbar .b.active {background: #6197fa; color: #fff;border-color: #6197fa}
.editor .toolbar .b.no-text { width: 36px; }
.editor .toolbar .b.no-text i { padding-top: 11px; }
.editor .toolbar .b.start {border-radius: 3px 0 0 3px;-webkit-border-radius: 3px 0 0 3px;border-left: solid 1px #d4d4d4}
.editor .toolbar .b.end {border-radius: 0 3px 3px 0;-webkit-border-radius: 0 3px 3px 0;border-right: solid 1px #d4d4d4}
.editor .toolbar .b.both {border-radius: 3px;-webkit-border-radius: 3px;border-right: solid 1px #d4d4d4}
.editor .toolbar .b-group {}
.editor .toolbar .b-group a {border-left: solid 1px #d4d4d4}
.editor .toolbar .spacer { display: block; width: 4px; height: 1px; float: left; }
.editor .toolbar .spacer.large { width: 22px; }
.editor .toolbar .drop {float: left; position: relative; }
.editor .toolbar .drop div { z-index: 10; display: none; border-radius: 2px;position: absolute; top: 26px; border: solid 1px #d1d1d1; background: #fff; }
.editor .toolbar .drop div > i {position: absolute;width: 100px;height: 3px;background: transparent;top: -3px;left: 0;z-index: 50}
.editor .toolbar .drop div a { display: block;border-left: none; color: #8b8b8b; padding: 0 15px; white-space: nowrap; text-transform: uppercase; font-size: .7em; text-decoration: none; font-family: "Open Sans"; }
.editor .toolbar .drop div a i { display: inline-block; width: 30px; padding-top: 5px; font-size: 1.2em; }
.editor .toolbar .drop div a:hover { background: #6197fa; color: #fff; }
.editor .toolbar .drop .tool-arrow_down { color: silver; position: absolute; right: 1px; top: 15px; font-size: .4em; }
.editor .toolbar .drop.in-group .b { border-left: 0; }
.editor .toolbar .drop:hover div { display: block; }
.editor .toolbar .drop:hover .tool-arrow_down { color: #6197fa; }
.editor .toolbar .item-caption {display: block;text-transform: uppercase;font-size: .714em;padding: 0 9px}
.editor .toolbar .item-caption.one {padding: 0 0 0 40px}
.editor .toolbar .item-caption.two {padding: 0 12px}
.editor .toolbar .item-caption.for-color{padding: 0;text-align: center}
.editor .toolbar .b.disabled, .editor .toolbar .b.disabled:hover { cursor: default; background-color: #e1e1e1; color: #f7f7f7; border-color: #d4d4d4; }

.editor .sides {overflow: hidden;margin-bottom: 30px;border-bottom: solid 1px #d4d4d4;width: 100%;min-width: 940px}
.editor .sides a {display: block;width: 50%; float: left; background: #e6e7e8; color:#393939; text-align:left; padding: 10px 0; font-size: .9em; font-family: "Open Sans"; font-weight: 600}
.editor .sides a:first-child {text-align: right}
.editor .sides a.active { background: #f8f8f8; color: #393939}
.editor .sides a span {margin: 0 0 0 200px}
.editor .sides a:first-child span {margin: 0 200px 0 0;}
.editor .sides-wrap > input {display: none}

.editor .area { width: 660px; float: left; }
.editor .area .canvas { position: relative; height: 665px;margin-bottom: 1px; }
.editor .area .canvas .select_rect { visibility: hidden; position: absolute; border: 1px dashed black; }
.editor .area .canvas .loader {position: absolute;left: 48%;top: 48%;width: 30px;height: 30px}

.editor .fields { float: right; margin-left: 10px; width: 270px; position: relative; overflow-y: auto; }
.editor .fields label {display: block;padding: 5px 0 2px;margin-bottom: 10px}
.editor .fields label textarea {background: #fff}
.editor .fields span {font-weight: 600;color: #74787e;text-transform: uppercase;font-size: .715em;display: block;text-align: center;padding-bottom: 10px}
.editor .fields .caption { color: #00a8ff; font-weight: 700; position: absolute; top: -25px; text-align: center; text-transform: uppercase; width: 250px; }
.editor .fields .design-image { background: #f7f7f7; border: solid 1px #cecece; padding: 5px; position: relative; width: 245px; margin: 0 0 10px; }
.editor .fields .design-image .btn { position: absolute; width: 170px; text-align: center; right: 0; bottom: 0; }
.editor .fields .design-image .remove { position: absolute; right: 8px; top: 5px; }
.editor .fields .btn { width: 200px; float: right; }

#txt_metrics, .editor .fields textarea { width: 258px; height: 19px; border: solid 1px #cecece; border-radius:2px; color: #9a9a9a; font-family: 'Open Sans'; margin: 0 0 10px 0; padding: 13px 0 13px 10px; font-size: 1em; resize: none; overflow: hidden; }
#txt_metrics { position: absolute; top: 0; left: 0; line-height: 19px; word-wrap: break-word; visibility: hidden; }

.editor .fields textarea:hover, .editor .fields textarea:focus, .editor .fields textarea.selected { border-color: #00a8ff; }
.editor .fields textarea:focus { background: #fff; }

.popup_overlay { display: none; height: 100%; width: 100%; background: #000; position: fixed; top: 0; -moz-opacity: .75; -khtml-opacity: .75; opacity: .75; -ms-filter: "alpha(opacity=(75))"; filter: alpha(opacity =(75)); }

.popup_wnd { position: absolute; background: #fff; top: 0; left: 0; width: 400px; height: 300px; }
.popup_wnd .popup_title_bar { padding: 15px 15px 15px 30px; height: 24px; background: #0394df; color: #fff; font-size: 1.286em; cursor: move; }
.popup_wnd .popup_close_button { position: absolute; top: 19px; cursor: pointer; }
.popup_wnd .popup_content { position: relative; }

.popup_wnd input[type=text]{-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0}
.popup_wnd .label {background: none;color: #7C7E80;font-weight: normal;text-transform: none;padding: 0;font-size: 11px;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0}

.editor_widget { position: relative; font-family: "Open Sans"; }
.editor_widget.visible { visibility: visible; }
.editor_widget.hidden { visibility: hidden; }

.editor_widget.tf { color: #222; cursor: default; font-size: 10px; }
.editor_widget.tf.edit_block { position: absolute; left: 10px; top: -12px; background: #fff; text-align: center; padding: 0 9px; }

.editor_widget.button { background-color: #00a8ff; color: #fff; font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; }
.editor_widget.button:hover { background-color: #0394df; }
.editor_widget.button.gray { background-color: #ababab; }
.editor_widget.button.gray:hover { background-color: #919191; }
.editor_widget.button.green { background-color: #9bc526; }
.editor_widget.button.green:hover { background-color: #690; }
.editor_widget.button.disabled { cursor: default; background-color: #e1e1e1; }
.editor_widget.button.disabled:hover { background-color: #e1e1e1; }

.editor_widget.combobox { border: 1px solid #d1d1d1; background: #fff; font: 11px Arial; }
.editor_widget.combobox .label { margin-left: 6px; float: left; cursor: default; overflow: hidden; }
.editor_widget.combobox .button { margin: 2px 1px 0 3px; background: #d1d1d1 url('icons/ico_drop_down.png'); width: 17px; height: 16px; float: left; cursor: pointer; }
.editor_widget.combobox .drop_down { border: 1px solid #d1d1d1; background: #fff; height: 162px; position: relative; left: -1px; top: 4px; clear: both; display: none; }
.editor_widget.combobox .drop_down.open { display: block; overflow: auto; z-index: 99; }
.editor_widget.combobox .drop_down .item { padding: 0 8px 0 6px; height: 20px; line-height: 20px; cursor: pointer; overflow: hidden; }
.editor_widget.combobox .drop_down .item:hover, .editor_widget.combobox .drop_down .item.selected { background: #ededed; }

.editor_widget.tab_switch .tabs { height: 32px; border-left: 1px solid #d1d1d1; }
.editor_widget.tab_switch .tabs .tab_button { background: #ededed; border: 1px solid #d1d1d1; border-left: 0; border-bottom: 0; height: 32px; float: left; cursor: pointer; font-size: 12px; color: #b0b0b0; line-height: 31px; padding: 0 7px; text-align: center; }
.editor_widget.tab_switch .tabs .tab_button.active { background: #fff; cursor: default; }
.editor_widget.tab_switch .tab_switch_content { position: relative; border: 1px solid #d1d1d1; }
.editor_widget.tab_switch .tab_switch_content .tab_content { position: absolute; width: inherit; height: inherit; visibility: hidden; }
.editor_widget.tab_switch .tab_switch_content .tab_content.active { visibility: visible; }

.editor_widget.palette { overflow: hidden; }
.editor_widget.palette .color { width: 18px; height: 18px; border: 1px solid #000; background: #fff; margin: 4px 0 0 4px; float: left; cursor: pointer; }
.editor_widget.palette .color.large { width: 38px; height: 38px; margin: 10px 0 0 5px; }

.color_editor { position: relative; }
.color_editor .color_demo { border: 1px solid #000; background: #000; }
.color_editor .color_demo.canvas { position: absolute; top: 19px; left: 8px; }
.color_editor .color_text { font-weight: bold; color: #555; }
.color_editor .color_input { position: absolute; border: 1px solid #000; width: 24px; height: 20px; font-size: 10px; color: #000; padding: 0 7px; }
.color_editor .gradient_edit { border: 1px solid #000; width: 318px; height: 28px; position: absolute; top: 79px; left: 219px; }
.color_editor .gradient_stops { border: 1px dashed #fff; width: 318px; height: 15px; position: absolute; top: 114px; left: 219px; }
.color_editor .stop_color { position: absolute; left: 315px; top: 140px; width: 18px; height: 18px; border: 1px solid #000; cursor: pointer; }
.color_editor .gr_handle { position: absolute; width: 11px; height: 15px; cursor: move; }
.color_editor .gr_handle .arrow { width: 7px; height: 4px; background: url('icons/ico_arrow_up.png'); margin: 0 0 1px 2px; }
.color_editor .gr_handle .color { background: #fff; width: 9px; height: 8px; border: 1px solid #000; }
.color_editor .gr_handle:hover .arrow, .color_editor .gr_handle.selected .arrow { background-position: 0 4px; }
.color_editor .gr_handle:hover .color, .color_editor .gr_handle.selected .color { border: 1px solid #d1d1d1; }
.color_editor .color_items { overflow: hidden; overflow-y: auto; top: 8px; left: 5px; width: 683px; height: 144px; }
.color_editor .color_items .color { width: 19px; height: 19px; border: 1px solid #fff; background: #000; margin: 3px 0 0 3px; float: left; cursor: pointer; }
.color_editor .color_items .color:hover, .color_editor .color_items .color.selected { border-color: #ff6a0a; }
.color_editor .color_items .color.large { width: 39px; height: 39px; margin: 9px 0 0 4px; }

.cat_browser { padding: 12px 0; overflow-y: auto; }
.cat_browser .cat_item { margin: 1px 0 0 10px; color: #aeaeae; cursor: pointer; }
.cat_browser .cat_item:hover, .cat_browser .cat_item.selected { color: #ff6400; }
.cat_browser .cat_item.selected { cursor: default; }

.cat_img { width: 130px; height: 130px; border: 1px solid #fff; margin: 20px 0 0 10px; float: left; cursor: pointer; text-align: center; }
.cat_img:hover, .cat_img.selected { border-color: #ff6a0a; }
.cat_img.selected { cursor: default; }

.file_select { float: left; width: 218px; height: 23px; border: 1px solid #00a8ff; color: #00a8ff; font-size: 11pt; line-height: 9px; padding: 15px 0 0 20px;white-space: nowrap;overflow: hidden; }

.text-tools {position: relative;width: 100%}
.text-tools div {position: absolute;left: 0;top: 0;width: calc(100% - 2px)}
.text-tools div a {display: block;float: right;height: 50px;width: 50px;color: #fff;line-height: 3.3em;text-align: center}
.text-tools div em {font-style: normal;display: block;float: right;margin-right: 20px;color: #0076ff;line-height: 3.4em;height: 50px}
.text-tools div a img {vertical-align: middle}
.text-dialog {top: 0;left: 0;right: 0;bottom:0;position: absolute;display:none;background: #fff;z-index: 90;min-height: 1000px}
.text-dialog .top-section {background: #f9f9f9;padding: 10px 0;position: relative;border-bottom: solid 1px #d4d4d4;text-align: center;overflow: hidden}
.text-dialog .top-section .cancel-tool{ float: left; margin-left: 20px}
.text-dialog .top-section .done-tool{ float: right;margin-right: 20px}
.text-dialog .main-section #editingText {display:block;margin: 10px auto; width: 85%}


#fontFamilyCombo.current-edit {width: 98%;border: none;height: auto}
#fontFamilyCombo.current-edit span {display: none}
#fontFamilyCombo.current-edit #fontFamilyComboItems {display: block;border: none;margin: 0 auto;height: 100%!important;position: relative}
#fontSizeCombo.current-edit {width: 98%;border: none;height: auto}
#fontSizeCombo.current-edit span {display: none}
#fontSizeCombo.current-edit div {display: block;border: none;margin: 0 auto;height: 100%!important;position: relative}
#fontSizeCombo.current-edit div a{text-align: center}

.mobile-palette {background:#fff;overflow: hidden}
.mobile-palette div {cursor: pointer;width: 125px;height: 25px;color: #fff;float: left;text-align: center;padding: 50px 0;position: relative}
.mobile-palette div i {position: absolute;background: url(/img/icon/selected-color.png); background-size: 26px 26px;width: 26px;height: 26px;display: block;right: 10px;bottom: 10px}


@media all and (max-width: 765px) {
    .editor .sides-wrap {background: #f9f9f9;padding: 7px 0;position: relative;border: solid 1px #d4d4d4;border-top: none;width: 234px;float: right}
    .editor .sides-wrap > input {border-radius: 3px;display: block;position: absolute;top: 7px;left: 20px;padding: 3px 0;min-width: 65px;background: #44db5e}
    .editor .sides {text-align: center;width: 110px;height:28px;margin: 0 0 0 105px;overflow: hidden;border: solid 1px #0076ff;border-radius: 3px;min-width: 110px}
    .editor .sides a{background: #fff;text-align: center;width: 55px;padding: 2px 0}
    .editor .sides a span {color: #0076ff;margin: 0}
    .editor .sides a:first-child {text-align: center;}
    .editor .sides a:first-child span {margin: 0}
    .editor .sides a.active {background: #0076ff}
    .editor .sides a.active span {color:#fff}
    .editor .fields {width: 236px;margin-left: 0}
    .editor .fields label {display: none}
    .editor .fields label span:first-child, .editor .fields div span:first-child {display: none!important;}
    .editor .fields textarea {margin: 0;padding: 15px 0 15px 10px;border: solid 1px #cecece;border-top: none;border-radius: 0;width: 224px}

    .editor .area {width: 60%;margin: 0 auto;overflow: hidden}
    .editor .work-area {width: 100%;min-width: 100%}
    .editor .toolbar {display: none}

    .popup.design-submit {width: auto;top:0;right: 0;bottom: 0;left:0;margin-left:0;border-radius: 0}
}
@media all and (max-width: 600px) {
    .editor .area {width: 55%}
}
@media all and (max-width: 550px) {
    .editor .sides-wrap {float: none;border-left: none;border-right:none;width: 100%}
    .editor .sides {margin: 0 auto}
    .editor .area {width: 95%;float: none}
    .editor .fields {float: none;width: 95%;margin: 0 auto;text-align: center}
    .editor .fields textarea {width: calc(100% - 15px);border: solid 1px #cecece;border-top: none}
    .editor .fields span ~ .text-tools:first-of-type textarea{border-top: solid 1px #cecece}
}