.customize-control-ast-border { /* Unit Screen wrap */ } .customize-control-ast-border .customize-control-title { display: inline-block; } .customize-control-ast-border .ast-border-outer-wrapper { display: flex; position: relative; } .customize-control-ast-border .ast-border-wrapper { display: flex; } .customize-control-ast-border .ast-border-btns { display: block; text-align: center; line-height: 2; border: 1px solid #dddddd; background-color: #ffffff; border-radius: 3px 0 0 3px; } .customize-control-ast-border .ast-border-btns > li { margin-bottom: 0; display: none; width: 35px; height: 26px; } .customize-control-ast-border .ast-border-btns > li.active { display: inline-block; } .customize-control-ast-border .ast-border-btns button[type="button"] { padding: 0; cursor: pointer; background: none; border: none; opacity: .75; outline: none; width: 100%; height: 100%; } .customize-control-ast-border .ast-border-btns button[type="button"] > i { width: 15px; height: 15px; font-size: 15px; margin-top: 1px; } .customize-control-ast-border .input-wrapper .ast-border-wrapper { display: none; } .customize-control-ast-border .input-wrapper .ast-border-wrapper li { text-align: center; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; margin: 0 2px; } .customize-control-ast-border .input-wrapper .ast-border-wrapper li:nth-child(1) { margin-right: 0px; } .customize-control-ast-border .input-wrapper .ast-border-wrapper li input.ast-border-input { text-align: center; display: block; font-size: 12px; padding: 15px 0; width: 100%; height: 28px; border: 1px solid #dddddd; border-radius: 3px; box-shadow: none; transition: all 0.3s; } .customize-control-ast-border .input-wrapper .ast-border-wrapper li .ast-border-connected { color: #ffffff; } .customize-control-ast-border .input-wrapper .ast-border-wrapper li:last-child input.ast-border-input { border-left-width: 1px; border-radius: 3px 0 0 3px; } .customize-control-ast-border .input-wrapper .ast-border-wrapper.active { display: flex; } .customize-control-ast-border .input-wrapper .ast-border-wrapper span.ast-border-title { text-transform: uppercase; font-size: 10px; opacity: .75; } .customize-control-ast-border .input-wrapper .ast-border-wrapper .ast-border-input-item-link .ast-border-connected { display: none; } .customize-control-ast-border .input-wrapper .ast-border-wrapper .ast-border-input-item-link.disconnected .ast-border-disconnected { display: none; } .customize-control-ast-border .input-wrapper .ast-border-wrapper .ast-border-input-item-link.disconnected .ast-border-connected { display: block; } .customize-control-ast-border .input-wrapper .ast-border-wrapper .ast-border-input-item-link span { width: 35px; height: 26px; line-height: 26px; font-size: 14px; border: 1px solid #dddddd; background-color: #ffffff; border-radius: 3px; } .customize-control-ast-border .input-wrapper .ast-border-wrapper .ast-border-input-item-link .ast-border-connected { background-color: #1e8cbe; } .customize-control-ast-border .input-wrapper .ast-border-wrapper .ast-border-input-item-link .ast-border-connected, .customize-control-ast-border .input-wrapper .ast-border-wrapper .ast-border-input-item-link .ast-border-disconnected { padding: 2px 0; font-size: 12px; line-height: 28px; background-color: #ffffff } .customize-control-ast-border .input-wrapper .ast-border-wrapper li input.ast-border-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .customize-control-ast-border .input-wrapper .ast-border-wrapper li input.ast-border-input:hover, .customize-control-ast-border .input-wrapper .ast-border-wrapper li input.ast-border-input:focus { border-color: #1e8cbe; } .customize-control-ast-border .input-wrapper .ast-border-wrapper li input.ast-border-input:focus { outline: none; } .customize-control-ast-border .input-wrapper .ast-border-wrapper .ast-border-input-item-link .ast-border-connected { color: #1e8cbe; } .customize-control-ast-border .input-wrapper .ast-border-wrapper .ast-border-input-item-link .ast-border-disconnected { color: #2D3748; } .customize-control-ast-border .input-wrapper.ast-border-wrapper { margin-bottom: 8px; }