/*------------------------------------------------------------ Button Display */
.custom-button-wrapper {
   outline: none;
}

.custom-button {
   cursor: pointer;
}

.button.custom-button {
   width: auto;
   border-radius: 0;
}

.button.custom-button > span {
   display: flex;
   align-items: center;
   /* default table border spacing */
   padding: 2px;
}

.button.custom-button-rounded {
   border-radius: 10px;
}

.custom-button-icon {
   /* fixes specific designs issue - before they was trying to set sizes
   on a <td> element (which doesn't change anything) but now the element is
   replaced with an inline-block and the sizes are affecting the layout */
   width: inherit !important;
   height: inherit !important;
   padding-right: 5px;
}

.custom-button-caption {
   padding-right: 5px;
   font-size: 18px;
   text-decoration: none;
   font-weight: normal;
   font-style: normal;
}

/*------------------------------------------------------------ Button Preview */
.button-settings {
   min-height: 200px;
   overflow: hidden;
}

.stock-button {
   height: 54px;
   width: 54px;
   background-position: center;
   background-repeat: no-repeat;
   cursor: pointer;
   border: 3px solid #ffffff;
   border-radius: 5px;
   display: inline-block;
}

.stock-button:hover {
   border-color: #fae8c7;
}

.stock-button.stock-button-selected {
   border-color: #ffa200;
}

.button-sip-container {
   width: 400px;
   height: 200px;
}

.button-preview {
   float: right;
   width: 250px;
}

.button-preview-inner {
   height: 160px;
   overflow: hidden;
}

.button-preview-inner label {
   display: block;
   margin-bottom: 8px;
}

div.field.button-upload-container {
   display: block;
   padding: 2px 20px 2px 2px;
   overflow: hidden;
}

.button-custom-type-wrapper .label {
   float: left;
}

.button-preview-custom img {
   height: 160px;
}