/**
 * @package         uFramework
 * @author          Tsunoa
 * @copyright       Copyright (c) Tsunoa
 */
/* uFramework utilities
   ------------------------------------------------ */
/* Sortable */
.uframework-sortable .uframework-sortable-handle {
    display: inline-block;
    width: 20px;
    text-align: center;
    color: #444;
    vertical-align: text-top;
    cursor: move;
}

.uframework-sortable .ui-state-highlight {
    background: #f4f4f4;
    border-color: #eee;
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}

/* Icon link */
.uframework-icon-link {
    text-decoration: none;
}

.uframework-icon-link i {
    color: #82878c;
}

/* Toggle visibility checkbox */
input[type="checkbox"].uframework-toggle-visibility {
    display: inline-block;
    margin: 0 !important;
    border: none;
    box-shadow: none;
    background: transparent;
    width: 20px;
    vertical-align: text-top;
}

input[type="checkbox"].uframework-toggle-visibility:before {
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1;
    font-family: dashicons;
    text-decoration: inherit;
    font-weight: normal;
    font-style: normal;
    vertical-align: top;
    text-align: center;
    -webkit-transition: color .1s ease-in 0;
    transition: color .1s ease-in 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    margin: 0;
    color: #444;
}

input[type="checkbox"].uframework-toggle-visibility:checked:before {
    content: '\f177';
}

input[type="checkbox"].uframework-toggle-visibility:not(:checked):before {
    content: '\f530';
}

/* Semi visible */
.uframework-semi-visible {
    opacity: 0.5;
}

/* Admin options
   ------------------------------------------------ */
/* Shortcode generator */
.uframework-shortcode-generator label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    display: inline-block !important;
    font-weight: normal !important;
}
.uframework-shortcode-generator textarea {
    resize: none;
}

/* Input */
.uframework-input {
    background-color: #fff;
    border: 1px solid #b4b9be;
    padding: 6px 12px;
    margin: 4px;
    display: inline-block;
    min-width: 100px;
}

.uframework-input.uframework-border-inherit,
.uframework-input.uframework-style-inherit {
    background-color: transparent;
    border-color: transparent;
}

/* Fix to override default wordpress admin styles */
select.uframework-style-flat,
input.uframework-style-flat,
input.uframework-style-flat:hover,
input.uframework-style-flat:focus {
    background-color: #b4b9be;
    border-color: #b4b9be;
    color: #444;
}

select.uframework-style-outline,
input.uframework-style-outline,
input.uframework-style-outline:hover,
input.uframework-style-outline:focus {
    background-color: transparent;
    border-color: #b4b9be;
    color: #444;
}

select.uframework-style-underline,
input.uframework-style-underline,
input.uframework-style-underline:hover,
input.uframework-style-underline:focus {
    background-color: transparent;
    border-color: #b4b9be;
    color: #444;

    border-top-color: transparent;
    border-left: none;
    border-right: none;
}

/* Color */
.uframework-color {
    display: inline-block;
    height: 24px;
    width: 24px;
    vertical-align: bottom;
}

/* Styles utility */
/* Border */
.uframework-border-square {
    border-radius: 0;
}

.uframework-border-rounded {
    border-radius: 4px;
}

.uframework-border-circle {
    border-radius: 50px;
}

/* Style */
.uframework-style-flat, .uframework-style-outline, .uframework-style-underline {
    border-width: 1px;
    border-style: solid;
}

/* Flat style */
.uframework-style-flat {
    background-color: #b4b9be;
    border-color: #b4b9be;
    color: #444;
}

.uframework-style-flat.uframework-color-gray,
.uframework-style-flat.uframework-color-gray:hover,
.uframework-style-flat.uframework-color-gray:active,
.uframework-style-flat.uframework-color-gray:focus {
    background-color: #ccc;
    border-color: #ccc;
}

.uframework-style-flat.uframework-color-blue,
.uframework-style-flat.uframework-color-blue:hover,
.uframework-style-flat.uframework-color-blue:active,
.uframework-style-flat.uframework-color-blue:focus {
    background-color: #428bca;
    border-color: #428bca;
    color: #fff;
}

.uframework-style-flat.uframework-color-red,
.uframework-style-flat.uframework-color-red:hover,
.uframework-style-flat.uframework-color-red:active,
.uframework-style-flat.uframework-color-red:focus {
    background-color: #d9534f;
    border-color: #d9534f;
    color: #fff;
}

.uframework-style-flat.uframework-color-green,
.uframework-style-flat.uframework-color-green:hover,
.uframework-style-flat.uframework-color-green:active,
.uframework-style-flat.uframework-color-green:focus {
    background-color: #5cb85c;
    border-color: #5cb85c;
    color: #fff;
}

.uframework-style-flat.uframework-color-yellow,
.uframework-style-flat.uframework-color-yellow:hover,
.uframework-style-flat.uframework-color-yellow:active,
.uframework-style-flat.uframework-color-yellow:focus {
    background-color: #f0ad4e;
    border-color: #f0ad4e;
    color: #fff;
}

.uframework-style-flat.uframework-color-orange,
.uframework-style-flat.uframework-color-orange:hover,
.uframework-style-flat.uframework-color-orange:active,
.uframework-style-flat.uframework-color-orange:focus {
    background-color: #ed9c28;
    border-color: #ed9c28;
    color: #fff;
}

.uframework-style-flat.uframework-color-dark-gray,
.uframework-style-flat.uframework-color-dark-gray:hover,
.uframework-style-flat.uframework-color-dark-gray:active,
.uframework-style-flat.uframework-color-dark-gray:focus {
    background-color: #363636;
    border-color: #363636;
    color: #fff;
}

/* Flat styles for input placeholders */
.uframework-style-flat:not(.uframework-color-inherit):not(.uframework-color-gray)::-webkit-input-placeholder {
    color: #fff;
    opacity: 0.8;
}
.uframework-style-flat:not(.uframework-color-inherit):not(.uframework-color-gray)::-moz-placeholder {
    color: #fff;
    opacity: 0.8;
}
.uframework-style-flat:not(.uframework-color-inherit):not(.uframework-color-gray):-ms-input-placeholder {
    color: #fff;
    opacity: 0.8;
}
.uframework-style-flat:not(.uframework-color-inherit):not(.uframework-color-gray):-moz-placeholder {
    color: #fff;
    opacity: 0.8;
}

/* Outline style */
.uframework-style-outline {
    background-color: transparent;
    border-color: #b4b9be;
    color: #444;
}

.uframework-style-outline.uframework-color-gray,
.uframework-style-outline.uframework-color-gray:hover,
.uframework-style-outline.uframework-color-gray:active,
.uframework-style-outline.uframework-color-gray:focus {
    border-color: #ccc;
    color: #ccc;
}

.uframework-style-outline.uframework-color-blue,
.uframework-style-outline.uframework-color-blue:hover,
.uframework-style-outline.uframework-color-blue:active,
.uframework-style-outline.uframework-color-blue:focus {
    border-color: #428bca;
    color: #428bca;
}

.uframework-style-outline.uframework-color-red,
.uframework-style-outline.uframework-color-red:hover,
.uframework-style-outline.uframework-color-red:active,
.uframework-style-outline.uframework-color-red:focus {
    border-color: #d9534f;
    color: #d9534f;
}

.uframework-style-outline.uframework-color-green,
.uframework-style-outline.uframework-color-green:hover,
.uframework-style-outline.uframework-color-green:active,
.uframework-style-outline.uframework-color-green:focus {
    border-color: #5cb85c;
    color: #5cb85c;
}

.uframework-style-outline.uframework-color-yellow,
.uframework-style-outline.uframework-color-yellow:hover,
.uframework-style-outline.uframework-color-yellow:active,
.uframework-style-outline.uframework-color-yellow:focus {
    border-color: #f0ad4e;
    color: #f0ad4e;
}

.uframework-style-outline.uframework-color-orange,
.uframework-style-outline.uframework-color-orange:hover,
.uframework-style-outline.uframework-color-orange:active,
.uframework-style-outline.uframework-color-orange:focus {
    border-color: #ed9c28;
    color: #ed9c28;
}

.uframework-style-outline.uframework-color-dark-gray,
.uframework-style-outline.uframework-color-dark-gray:hover,
.uframework-style-outline.uframework-color-dark-gray:active,
.uframework-style-outline.uframework-color-dark-gray:focus {
    border-color: #363636;
    color: #363636;
}

/* Underline style */
.uframework-style-underline {
    background-color: transparent;
    border-top-color: transparent;
    border-left: none;
    border-right: none;
}

.uframework-style-underline.uframework-color-gray,
.uframework-style-underline.uframework-color-gray:hover,
.uframework-style-underline.uframework-color-gray:active,
.uframework-style-underline.uframework-color-gray:focus {
    border-bottom-color: #ccc;
}

.uframework-style-underline.uframework-color-blue,
.uframework-style-underline.uframework-color-blue:hover,
.uframework-style-underline.uframework-color-blue:active,
.uframework-style-underline.uframework-color-blue:focus {
    border-bottom-color: #428bca;
}

.uframework-style-underline.uframework-color-red,
.uframework-style-underline.uframework-color-red:hover,
.uframework-style-underline.uframework-color-red:active,
.uframework-style-underline.uframework-color-red:focus {
    border-bottom-color: #d9534f;
}

.uframework-style-underline.uframework-color-green,
.uframework-style-underline.uframework-color-green:hover,
.uframework-style-underline.uframework-color-green:active,
.uframework-style-underline.uframework-color-green:focus {
    border-bottom-color: #5cb85c;
}

.uframework-style-underline.uframework-color-yellow,
.uframework-style-underline.uframework-color-yellow:hover,
.uframework-style-underline.uframework-color-yellow:active,
.uframework-style-underline.uframework-color-yellow:focus {
    border-bottom-color: #f0ad4e;
}

.uframework-style-underline.uframework-color-orange,
.uframework-style-underline.uframework-color-orange:hover,
.uframework-style-underline.uframework-color-orange:active,
.uframework-style-underline.uframework-color-orange:focus {
    border-bottom-color: #ed9c28;
}

.uframework-style-underline.uframework-color-dark-gray,
.uframework-style-underline.uframework-color-dark-gray:hover,
.uframework-style-underline.uframework-color-dark-gray:active,
.uframework-style-underline.uframework-color-dark-gray:focus {
    border-bottom-color: #363636;
}