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

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

.alphagrid-col-options { display: none; position: absolute; }
.alphagrid-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; }
.alphagrid-col-option-conf:hover { background-color: rgb(83, 63, 105); }

.alphagrid-pnl-move-row { display: none; position: absolute; }
.alphagrid-pnl-move-row .alphagrid-btn-move-row-up,
.alphagrid-pnl-move-row .alphagrid-btn-move-row-down,
.alphagrid-pnl-move-row .alphagrid-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; }
.alphagrid-pnl-move-row .alphagrid-btn-delete-row { font-size: 16px; width: 19px; height: 19px; margin-bottom: 7px;
                                              border-width: 1px; font-weight: normal; line-height: 10px;}
.alphagrid-pnl-move-row .alphagrid-btn-move-row-down { margin-top: 5px; }
.alphagrid-pnl-move-row .alphagrid-btn-move-row-up:hover,
.alphagrid-pnl-move-row .alphagrid-btn-move-row-down:hover,
.alphagrid-pnl-move-row .alphagrid-btn-delete-row:hover {
    font-family: Arial;
    background-color: rgb(83, 63, 105);
}
.alphagrid-btn-disabled { font-family: Arial;opacity:0.8;cursor: default !important; color: rgb(235, 235, 235) !important; border-color: rgb(235, 235, 235) !important; }
.alphagrid-btn-disabled:hover { background-color: #6C538B !important; }

.alphagrid-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; }
.alphagrid-btn-add:hover { background-color: rgb(83, 63, 105); border-color: white; }

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

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

.alphagrid-dlg {  z-index: 10002; width: 100%; margin: 45px auto 0 auto; background-color: white; border: 1px solid #999; border-radius: 10px; }
.alphagrid-dlg .col-xs-1,
.alphagrid-dlg .col-xs-2,
.alphagrid-dlg .col-xs-3,
.alphagrid-dlg .col-xs-4,
.alphagrid-dlg .col-xs-5,
.alphagrid-dlg .col-xs-6,
.alphagrid-dlg .col-xs-7,
.alphagrid-dlg .col-xs-8,
.alphagrid-dlg .col-xs-9,
.alphagrid-dlg .col-xs-10,
.alphagrid-dlg .col-xs-11,
.alphagrid-dlg .col-xs-12,
.alphagrid-dlg .col-xs-13,
.alphagrid-dlg .col-xs-14,
.alphagrid-dlg .colunns {
    box-shadow: none;
}
.alphagrid-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; }
.alphagrid-dlg-title-text { float: left; width: 95%; }
.alphagrid-dlg-btn-close { box-sizing: border-box; float: right; width: 5%; text-align: right; cursor: pointer; padding-right: 17px; color: #999; }
.alphagrid-dlg-btn-close:hover { color: #444; }
.alphagrid-dlg-buttons { border-top: 1px solid #ccc; height: 53px; padding: 10px 25px 0 0; }
.alphagrid-dlg-btn { padding: 4px 10px; font-size: 15px; border: 1px solid #ccc; border-radius: 3px;
                  display: inline-block; float: right; cursor: pointer; margin-left: 15px;
                  min-width: 90px; text-align: center; }
.alphagrid-dlg-btn:hover { background-color: #eee; }
.alphagrid-dlg-btn-ok { background-color: #8A67C9; border-color: #8A67C9; color: white; }
.alphagrid-dlg-btn-ok:hover { background-color: #7141C7; }
.alphagrid-dlg-btn-disabled, .alphagrid-dlg-btn-disabled:hover { color: #DDD; border-color: #DDD; background-color: white; cursor: default; }
.alphagrid-dlg-body { padding: 15px 25px; }

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

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

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

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

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

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

.alphagrid-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; }
.alphagrid-btn:hover { font-family: Arial; background-color: #FCFCFC; color: #2C1655; }