.bootstrapeditor {
    background-color: #6C538B;
    padding-right: 50px;
    position: relative;
}
.bootstrapeditor > .row {
    margin: 10px 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.bootstrapeditor > .row.bootstrapeditor-el { background-color: #6C538B; text-align: center; }
.bootstrapeditor > .row > .col-xs-1,
.bootstrapeditor > .row >  .col-xs-2,
.bootstrapeditor > .row >  .col-xs-3,
.bootstrapeditor > .row >  .col-xs-4,
.bootstrapeditor > .row >  .col-xs-5,
.bootstrapeditor > .row >  .col-xs-6,
.bootstrapeditor > .row >  .col-xs-7,
.bootstrapeditor > .row >  .col-xs-8,
.bootstrapeditor > .row >  .col-xs-9,
.bootstrapeditor > .row >  .col-xs-10,
.bootstrapeditor > .row >  .col-xs-11,
.bootstrapeditor > .row >  .col-xs-12,
.bootstrapeditor > .row >  .columns {
    background-color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: -1px 0 0 #6D747C;
    overflow: hidden;
}

.bootstrapeditor > .row > .col-xs-1,
.bootstrapeditor > .row > .col-xs-2,
.bootstrapeditor > .row > .col-xs-3,
.bootstrapeditor > .row > .col-xs-4,
.bootstrapeditor > .row > .col-xs-5,
.bootstrapeditor > .row > .col-xs-6,
.bootstrapeditor > .row > .col-xs-7,
.bootstrapeditor > .row > .col-xs-8,
.bootstrapeditor > .row > .col-xs-9,
.bootstrapeditor > .row > .col-xs-10,
.bootstrapeditor > .row > .col-xs-11,
.bootstrapeditor > .row > .col-xs-12,
.bootstrapeditor > .row > .columns
{ min-height: 150px; }

.bootstrapeditor-col-options { display: none; position: absolute; }
.bootstrapeditor-col-option-conf { box-sizing: border-box; width: 25px; height: 25px; display: inline-block; border-radius: 20px; cursor: pointer;
                           font-size: 16px; border: 1px solid #eee; color: white; padding: 4px; text-align: center; line-height: 17px; }
.bootstrapeditor-col-option-conf:hover { background-color: rgb(83, 63, 105); }

.bootstrapeditor-pnl-move-row { display: none; position: absolute; }
.bootstrapeditor-pnl-move-row .bootstrapeditor-btn-move-row-up,
.bootstrapeditor-pnl-move-row .bootstrapeditor-btn-move-row-down,
.bootstrapeditor-pnl-move-row .bootstrapeditor-btn-delete-row {
    font-family: Arial;
    background-color: #6C538B; font-weight: bold; box-sizing: border-box;
    width: 35px; height: 35px; display: inline-block; border-radius: 40px; cursor: pointer;
    font-size: 35px; border: 3px solid white; color: white; padding: 4px; text-align: center; line-height: 17px; }
.bootstrapeditor-pnl-move-row .bootstrapeditor-btn-delete-row { font-size: 16px; width: 19px; height: 19px; margin-bottom: 7px;
                                              border-width: 1px; font-weight: normal; line-height: 10px;}
.bootstrapeditor-pnl-move-row .bootstrapeditor-btn-move-row-down { margin-top: 5px; }
.bootstrapeditor-pnl-move-row .bootstrapeditor-btn-move-row-up:hover,
.bootstrapeditor-pnl-move-row .bootstrapeditor-btn-move-row-down:hover,
.bootstrapeditor-pnl-move-row .bootstrapeditor-btn-delete-row:hover {
    font-family: Arial;
    background-color: rgb(83, 63, 105);
}
.bootstrapeditor-btn-disabled { font-family: Arial;opacity:0.8;cursor: default !important; color: rgb(235, 235, 235) !important; border-color: rgb(235, 235, 235) !important; }
.bootstrapeditor-btn-disabled:hover { background-color: #6C538B !important; }

.bootstrapeditor-btn-add { font-family: Arial; box-sizing: border-box; width: 40px; height: 40px; margin: 10px auto; display: inline-block;
                  border-radius: 20px; color: white; font-size: 40px;
                  line-height: 37px; text-align: center; border: 2px #EEE solid; cursor: pointer; }
.bootstrapeditor-btn-add:hover { background-color: rgb(83, 63, 105); border-color: white; }

.bootstrapeditor-dialog-bg { background-color: #8193C0; opacity: 0.5; width:100%; height: 100%;
                    z-index: 10000; position: fixed; top: 0; left: 0; display: none; }

.bootstrapeditor-dialog-wrap { position: fixed; top: 0; left: 0; width:100%; height: 100%; z-index: 10001; display: none;}
.bootstrapeditor-show { display: block; }

.bootstrapeditor-dlg {  z-index: 10002; width: 100%; margin: 45px auto 0 auto; background-color: white; border: 1px solid #999; border-radius: 10px; overflow: hidden; }
.bootstrapeditor-dlg .col-xs-1,
.bootstrapeditor-dlg .col-xs-2,
.bootstrapeditor-dlg .col-xs-3,
.bootstrapeditor-dlg .col-xs-4,
.bootstrapeditor-dlg .col-xs-5,
.bootstrapeditor-dlg .col-xs-6,
.bootstrapeditor-dlg .col-xs-7,
.bootstrapeditor-dlg .col-xs-8,
.bootstrapeditor-dlg .col-xs-9,
.bootstrapeditor-dlg .col-xs-10,
.bootstrapeditor-dlg .col-xs-11,
.bootstrapeditor-dlg .col-xs-12,
.bootstrapeditor-dlg .columns {
    box-shadow: none;
}
.bootstrapeditor-dlg-title { box-sizing: border-box; font-size: 18px; font-weight: bold; padding: 7px 0 3px 15px; color: #333; border-bottom: 1px solid #ccc; height: 35px; }
.bootstrapeditor-dlg-title-text { float: left; width: 95%; }
.bootstrapeditor-dlg-btn-close { box-sizing: border-box; float: right; width: 5%; text-align: right; cursor: pointer; padding-right: 17px; color: #999; }
.bootstrapeditor-dlg-btn-close:hover { color: #444; }
.bootstrapeditor-dlg-buttons { border-top: 1px solid #ccc; height: 48px; padding: 15px 25px 0 0; background-color: #FAFAFA; box-sizing: content-box; }
.bootstrapeditor-dlg-btn { padding: 4px 10px; font-size: 15px; border: 2px solid #6C538B; border-radius: 5px;
                  display: inline-block; float: right; cursor: pointer; margin-left: 15px;
                  min-width: 90px; text-align: center; background-color: white; }
.bootstrapeditor-dlg-btn:hover { background-color: #6C538B; color: white; }
.bootstrapeditor-dlg-btn-ok { background-color: #8A67C9; border-color: #8A67C9; color: white; }
.bootstrapeditor-dlg-btn-ok:hover { background-color: #7141C7; }
.bootstrapeditor-dlg-btn-disabled, .bootstrapeditor-dlg-btn-disabled:hover { color: #DDD; border-color: #DDD; cursor: default; background-color: white; }
.bootstrapeditor-dlg-body { padding: 15px 25px; }

.bootstrapeditor-dlg-body h3 { margin-top: 0; font-size: 17px; text-align: center; }

.bootstrapeditor-dlg input, .bootstrapeditor-dlg textarea, .bootstrapeditor-dlg button, .bootstrapeditor-dlg select {
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    width: 305px;
}

.bootstrapeditor-mockups { margin: 0 auto; }
.bootstrapeditor-mockup-row { margin: 0 0 !important; }
.bootstrapeditor-mockup-block-wrap { margin: 0 10px; display: inline-block; float: left;}
.bootstrapeditor-mockup-block {
    box-sizing: border-box;
    cursor: pointer;
    max-height: 70px;
    max-width: 100px;
    height: 70px;
    width: 100px;
    margin: 10px auto;
}
.bootstrapeditor-mockup-block:hover { background-color: white; }
.bootstrapeditor-mockup-block .col-xs-1,
.bootstrapeditor-mockup-block .col-xs-2,
.bootstrapeditor-mockup-block .col-xs-3,
.bootstrapeditor-mockup-block .col-xs-4,
.bootstrapeditor-mockup-block .col-xs-5,
.bootstrapeditor-mockup-block .col-xs-6,
.bootstrapeditor-mockup-block .col-xs-7,
.bootstrapeditor-mockup-block .col-xs-8,
.bootstrapeditor-mockup-block .col-xs-9,
.bootstrapeditor-mockup-block .col-xs-10,
.bootstrapeditor-mockup-block .col-xs-11,
.bootstrapeditor-mockup-block .col-xs-12,
.bootstrapeditor-mockup-block .columns {
    padding: 1px;
    height: 100%;
    text-align: center;
    box-shadow: none;
    line-height: 70px;
    box-sizing: border-box;
}
.bootstrapeditor-mockup-block .col-xs-1 > div,
.bootstrapeditor-mockup-block .col-xs-2 > div,
.bootstrapeditor-mockup-block .col-xs-3 > div,
.bootstrapeditor-mockup-block .col-xs-4 > div,
.bootstrapeditor-mockup-block .col-xs-5 > div,
.bootstrapeditor-mockup-block .col-xs-6 > div,
.bootstrapeditor-mockup-block .col-xs-7 > div,
.bootstrapeditor-mockup-block .col-xs-8 > div,
.bootstrapeditor-mockup-block .col-xs-9 > div,
.bootstrapeditor-mockup-block .col-xs-10 > div,
.bootstrapeditor-mockup-block .col-xs-11 > div,
.bootstrapeditor-mockup-block .col-xs-12 > div,
.bootstrapeditor-mockup-block .columns > div {
    border: 1px solid #8A67C9;
    border-radius: 3px;
    background-color: #8A67C9;
    color: #eee;
    height: 100%;
    vertical-align: middle;
}

.bootstrapeditor-mockup-block:hover .col-xs-1 > div,
.bootstrapeditor-mockup-block:hover .col-xs-2 > div,
.bootstrapeditor-mockup-block:hover .col-xs-3 > div,
.bootstrapeditor-mockup-block:hover .col-xs-4 > div,
.bootstrapeditor-mockup-block:hover .col-xs-5 > div,
.bootstrapeditor-mockup-block:hover .col-xs-6 > div,
.bootstrapeditor-mockup-block:hover .col-xs-7 > div,
.bootstrapeditor-mockup-block:hover .col-xs-8 > div,
.bootstrapeditor-mockup-block:hover .col-xs-9 > div,
.bootstrapeditor-mockup-block:hover .col-xs-10 > div,
.bootstrapeditor-mockup-block:hover .col-xs-11 > div,
.bootstrapeditor-mockup-block:hover .col-xs-12 > div,
.bootstrapeditor-mockup-block:hover .columns > div {
    background-color: #7141C7;
    border-color: #7141C7;
    color: #fff;
}

.bootstrapeditor-dlg-change-col-type-plugins::after { content: ""; display: table; clear: both; }
.bootstrapeditor-dlg-change-col-type-plugin { width:150px; padding:10px; margin: 10px; cursor: pointer; float: left; }
.bootstrapeditor-dlg-change-col-type-plugin div { box-sizing: border-box; }
.bootstrapeditor-dlg-change-col-type-plugin:hover { outline: #8A67C9 1px solid; background-color: #EEF4FA; }
.bootstrapeditor-dlg-change-col-type-plugin-selected { outline: #8A67C9 1px solid; background-color: #EEF4FA; }
.bootstrapeditor-dlg-change-col-type-plugin-icon { padding: 10px 10px 0 10px; height: 100px; width:100px; margin: 0 auto; }
.bootstrapeditor-dlg-change-col-type-plugin-title { text-align: center; font-size: 14px; padding-top: 6px; color: #496479; height: 30px; }

.bootstrapeditor-col-plugin-none > .bootstrapeditor-el { text-align: right; color: silver; font-size: 12px; }
.bootstrapeditor-col-plugin-header { min-height: inherit !important; }

.bootstrapeditor-btn { font-family: Arial; box-sizing: border-box; border: 2px solid #8A67C9; color: #8A67C9; font-size: 17px; text-align: center; margin: 0 auto; line-height: 27px;
              border-radius: 20px; padding: 4px 15px; background-color: white;  cursor: pointer; width: 100px; font-weight: bold; }
.bootstrapeditor-btn:hover { font-family: Arial; background-color: #FCFCFC; color: #2C1655; }

.bootstrapeditor-dlg-plugin-img-btn-alphamanager { padding: 2px 10px; line-height: 19px; box-sizing: border-box; margin-left: 0; }

.bootstrapeditor-save-and-cancel-buttons { position: fixed; top: 10px; right: 10px; }
.bootstrapeditor-save-and-cancel-buttons .bootstrapeditor-btn { display: inline-block; margin-right: 15px; }
.bootstrapeditor-save-and-cancel-buttons .bootstrapeditor-btn:last-child { margin-right: 0px; }
.bootstrapeditor-btn-save:hover, .bootstrapeditor-btn-save:focus { background-color: greenyellow; }
.bootstrapeditor-btn-cancel:hover, .bootstrapeditor-btn-cancel:focus { background-color: #ffdecf; }