.mgd-clickable {
    cursor: pointer;
}

/* reset */
.mgd-hidden {
    display: none;
}

/* icon */
.mgd-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    box-sizing: border-box;
}


/* h5编辑器不显示蓝色图标 */
#imageLibContainer .mgd-icon .bright-default {
    display: none;
}

#imageLibContainer .mgd-icon .bright-hover  {
    display: none;
}

/* icon end*/

/* mask  */
.mgd-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.65);
}
/* mask end */

/* button */
.mgd-button {
    box-sizing: border-box;
    background: var(--button-color-background);
    border: 1px solid var(--button-color-border);
    color: var(--button-color-font);
    border-radius: 3px;
    height: 30px;
    width: 72px;
    font-size: 12px;

    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    outline: none;
    box-shadow: none;
}

.mgd-button:hover {
    background: var(--button-color-hover-background);
    border: 1px solid var(--button-color-hover-border);
    color: var(--button-color-hover-font);
}

.mgd-button__primary {
    background: var(--button-primary-color-background);
    border: 1px solid var(--button-primary-color-border);
    color: var(--button-primary-color-font);
}

.mgd-button__primary-bright1 {
    background: var(--button-primary-bright1-color-background);
    border: 1px solid var(--button-primary-bright1-border);
    color: var(--button-primary-bright1-font);
}

.mgd-button__primary-bright2 {
    background: var(--button-primary-bright2-color-background);
    border: 1px solid var(--button-primary-bright2-border);
    color: var(--button-primary-bright2-font);
}

.mgd-button__primary-bright3 {
    background: var(--button-primary-bright3-color-background);
    border: 1px solid var( --button-primary-bright3-border);
    color: var(--button-primary-bright3-font);
}

.mgd-button__primary:hover {
    background: var(--button-primary-color-hover-background);
    border: 1px solid var(--button-primary-color-hover-border);
    color: var(--button-primary-color-hover-font);
}

.mgd-button__colour {
    background: var(--button-colour-color-background);
    border: 1px solid var(--button-colour-color-border);
    color: var(--button-colour-color-font);
}
.mgd-button__colour:hover {
    background: var(--button-colour-color-hover-background);
    border: 1px solid var(--button-colour-color-hover-border);
    color: var(--button-colour-color-hover-font);
}

.mgd-button__disabled {
    background: var(--button-color-background);
    border: 1px solid var(--button-color-border);
    color: var(--button-color-disabled-font);
    cursor: not-allowed;
}
.mgd-button__disabled:hover {
    background: var(--button-color-background);
    border: 1px solid var(--button-color-border);
    color: var(--button-color-disabled-font);
}

/* button end*/


/* input  */
.mgd-input {
    color: var(--input-color-font-default);
    background: var(--input-color-background-default);
    border: 1px solid var(--input-color-border-default);
    border-radius: 3px;
    line-height: 1;
    font-size: 12px;

    height: 30px;
    width: 200px;
    padding-left: 10px;
    box-sizing: border-box;
}

.mgd-input:focus {
    border: 1px solid var(--input-color-border-focus);
    box-shadow: 0 0 0 1px var(--input-color-border-focus);
}

.mgd-input::placeholder {
  color: var(--input-color-placeholder);
}

.mgd-input[type="number"]::-webkit-textfield-decoration-container{
    height: 100%;
}

.mgd-input:disabled {
    background: var(--input-color-background-disabled);
    cursor: not-allowed;
}
/* input end */
.mgd-textarea {
    line-height: 1.5;
    padding: 6px 10px;
    font-family: inherit;
}

.mgd-switch {
    padding: 6px 0 8px 0;
}

.mgd-switch label.switch  .round_slider {
    background-color: var(--input-switch-unchecked-background);
}

.mgd-switch label.switch  .round_slider:before {
    background-color: var(--input-switch-unchecked-circle);
}

.mgd-switch label.switch input:checked + .round_slider {
    background-color: var(--input-switch-checked-background);
}

.mgd-switch label.switch input:checked + .round_slider:before {
    background-color: var(--input-switch-checked-circle);
}


/* radio  */
.mgd-radio {
    display: inline-block;
}

.mgd-radio label {
    padding-left: 24px;
    position: relative;
    white-space: nowrap;
}

.mgd-radio label::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: -2px;
    left: 0;
    background: var(--color-checkbox-unchecked-backgound);
    border-radius: 50%;
    border: 1px solid var(--color-checkbox-border);
    box-sizing: border-box;
}

.mgd-radio label::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: -2px;
    left: 0px;
    background: var(--button-primary-color-hover-background);
    border-radius: 50%;
    opacity: 0;
    box-sizing: border-box;
}

.mgd-radio input:checked + label::before {
    border: 1px solid var(--button-primary-color-hover-background);
    background: none;
}

.mgd-radio input:checked + label::after {
    opacity: 1;
    background: white;
    border: 4px solid var(--button-primary-color-hover-background);
}

.mgd-radio input {
    display: none;
}
/* radio end */

/* checkbox  */
.mgd-checkbox {
    display: inline-block;
}

.mgd-checkbox label {
    padding-left: 24px;
    position: relative;
    white-space: nowrap;
}

.mgd-checkbox label:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: -2px;
    left: 0;
    border-radius: 2px;
    background: var(--color-checkbox-unchecked-backgound);
    border: 1px solid var(--color-checkbox-border);
}

.mgd-checkbox label:after {
    content: "";
    mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20t%3D%221735637339110%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%228403%22%20width%3D%22128%22%20height%3D%22128%22%3E%3Cpath%20d%3D%22M419.2256%20618.0352L781.2096%20256l90.4704%2090.624-452.4544%20452.5056L102.4%20482.304l90.5216-90.4192%20226.304%20226.1504z%22%20p-id%3D%228404%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center -1px / 16px no-repeat;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0px;
    left: 1px;
    border-radius: 2px;
    background: var(--color-checkbox-checked-hover);
    opacity: 0;
    box-sizing: border-box;
    color: var(--button-primary-color-hover-font);
}



.mgd-checkbox input:checked + label::before {
    background: var(--color-checkbox-checked-backgound);
    border-color: var(--color-checkbox-checked-backgound);
}

.mgd-checkbox input:checked + label::after {
    opacity: 1;
}

.mgd-checkbox input {
    display: none;
}
/* checkbox end */

/* select */

.mgd-select {
    color: var(--select-color-font-default);
    line-height: 1;
    font-size: 12px;
    background: var(--select-color-background-default);
    border: 1px solid var(--select-color-border-default);
    border-radius: 3px;
    height: 30px;
    width: 60px;
    box-sizing: border-box;
}
.mgd-select--option {

}

/* select end */
/* 面包屑导航 */
.mgd-breadcrumb {
    position: relative;
    display: flex;
    flex-direction: row;

    font-size: 12px;
    color: var(--breadcrumb-color-font-default);
    background: none;
}
.mgd-breadcrumb--itemwrap {
    display: flex;
    align-items: center;
}
.mgd-breadcrumb--item {
    line-height: 1;
}
.mgd-breadcrumb--item__link {
    cursor: pointer;
}
.mgd-breadcrumb--item__link:hover {
    color: var(--breadcrumb-color-font-hover);
}

.mgd-breadcrumb--separator {
    display: flex;
    align-items: center;
    color: var(--breadcrumb-color-separator-default);
    margin: 0 5px;
}
.mgd-breadcrumb--itemwrap:last-child .mgd-breadcrumb--separator {
    display: none;
}
/* 面包屑导航 end */

/* pagination */
.mgd-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--pagination-color-font-default);
    line-height: 1;
    font-size: 12px;
}
.mgd-pagination--pagesize {
    display: flex;
}
.mgd-pagination--pagesize-label {
    margin-right: 5px;
    display: flex;
    align-items: center;
}
.mgd-pagination--pagesize-selector {
    height: 20px;
}
.mgd-pagination--btngroup {
    display: flex;
    justify-content: flex-end;
}
.mgd-pagination--btn {
    height: 20px;
    width: 60px;
    margin-right: 5px;
    font-size: 12px;
}
.mgd-pagination--btn:last-child {
    margin-right: 0;
}
.mgd-pagination--num {
    width: 20px;
}
.mgd-pagination--num__current,
.mgd-pagination--num__current:hover{
    color: var(--pagination-color-num-current-font);
    background: var(--pagination-color-num-current-background);
    border: 1px solid var(--pagination-color-num-current-background);

    cursor: default;
}

/* pagination end */

/* window start */
.mgd-window {
    width: 800px;

    box-sizing: border-box;
    border-radius: 4px;
    background: var(--window-background-color);
    color: var(--window-font-color);
    border: 1px solid var(--window-border-color);

    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 12px;
}
.mgd-window__medium {
    width: 600px;
}
.mgd-window__small {
    width: 400px;
}
.mgd-window--header {
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid var(--window-border-color);
    background: var(--window-header-background-color);
}
.mgd-window--title {
}
.mgd-window--close {
    cursor: pointer;
}

.mgd-window--body {
    flex: 1;
    display: block;
}
.mgd-window--footer {
    height: 56px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--window-border-color);
    align-items: center;
}
.mgd-window__no-footer .mgd-window--footer {
    display: none;
}

.mgd-window--btn {
    margin-right: 10px;
}

/* window end */

/* color-picker */
.mgd-color-picker {
    display: inline-flex;
    color: var(--input-color-font-default);
    line-height: 1;
    align-items: center;
    margin-top: 4px;
}

.mgd-color-picker .mgd-color-picker-color {
    background: var(--color-picker-background);
    /* padding: 1px; */
    margin-left: 8px;
    display: flex;
    border: 1px solid var(--color-picker-border);
    align-items: center;
}

.mgd-color-picker .mgd-color-picker-color .mgd-color-picker-platte {
    width: 14px;
    height: 14px;
    border: 1px solid var(--input-color-picker-border);
}

.mgd-color-picker .mgd-color-picker-color .mgd-color-picker-select {
    width: 0;
    height: 0;
    border-left: 2px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid var(--color-picker-trangle);
    margin-left: 3px;
}

/* color-picker end */