/*!
* Copyright (c) 2019 or the year of first publication, if earlier, HighQ Solutions Limited or its licensors
*/
/* drag and drop highlight elements - Admin dashboard */
.ui-sortable-helper {background:#ffefbf !important; height:auto !important;}
.placeholder {background:#fff !important; border:1px dashed #019ddc !important; border-radius:4px; min-height:60px; margin:10px 0 0 0;clear:both; padding:0px;}
.cursorMove {cursor: move;}
.leftTop {display:none; left:-1px; top:-1px; position:absolute;}
.sortable-item:hover .leftTop {display:block;}

/* Columns */
.grid {width:100%; margin:0 auto;}
.column {float:left;}
.column .placeholder {background:#fff; display: block; font-weight: 700; padding: 20px 0; margin:0 0 10px 0 ; text-align: center; min-height:50px; position:relative; border:1px dashed #005DA2; border-radius:4px;}


/*Row Section*/
#gridContainer {max-width:1400px; margin:0px auto 0 auto; padding:10px 10px 0 10px}
#gridContainer .row {background:#f4f4f4;/* padding:6px 0;*/ border-radius:4px; min-height:45px;/* clear:both;*/ margin:10px auto 0 auto;}
#gridContainer .row .grid {padding:10px; width:100%; margin:0 auto;}
#gridContainer .row .grid .column {background:#fff; border-radius:4px; border:1px solid #e4e4e4; padding-bottom:10px;}
#gridContainer .row .sortable-list {background:#fff; list-style: none; margin: 10px 10px 0 10px; padding:0; min-height: 60px; border-radius:4px; clear:both;}
#gridContainer .row .sortable-item {border:1px dashed #bababa; border-radius:4px; display: block; padding: 0px; min-height:59px; position:relative; margin:0 0 10px 0;}	
#gridContainer .row .alert {margin:10px;}
/*Subrow Section*/
#gridContainer .Subrow {margin:0 0 10px 0; background:#f5f5f5;}
.SubRowContainer {padding:0 10px;}
.Subrow {border-radius:4px; min-height:100px; margin:0 0 10px 0; /*padding:5px 0;*/}
/* navigation columns icons */
.gridbtn_dropdown.icon-highq-columns{padding: 3px 7px 0;display: block; border:1px solid #f4f4f4; color:#999898;}
.collist{margin-top:0;}
.collist li{border-top:1px solid #e5e5e5;padding:0 10px 5px;}
.collist li:first-child{border-top:0;}
.collist li:hover,.collist li.activesection{background:#e3e3e3;}
.collist > li > span{display:block;color:#999; font-size:12px;margin:4px 0;}
.dropdown-menu.collist > li > a{display:inline;padding:0px 14px 0 13px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;margin:0 7px 0 0; text-decoration: none;}
.dropdown-menu.collist > li > a:hover, .dropdown-menu.collist > li > a.active{background-color:#019ddc;}
.dropdown.open .dropdown-toggle.gridbtn_dropdown,.dropdown.open .dropdown-toggle.colorpickico{box-shadow:none;background-color: #fff;border: 1px solid #ddd;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}

.BrowseContent #gridContainer {padding:0px;}
.BrowseContent .headFixed .headFixedInner {padding:0px;}


.col_1 {background:url(../../images/v4/dashboard/admin-image-sprite.png) no-repeat 4px -32px;}
.col_2 {background:url(../../images/v4/dashboard/admin-image-sprite.png) no-repeat -39px -32px;}
.col_3 {background:url(../../images/v4/dashboard/admin-image-sprite.png) no-repeat -168px -32px;}
.col_4 {background:url(../../images/v4/dashboard/admin-image-sprite.png) no-repeat -340px -32px;}
.col_5 {background:url(../../images/v4/dashboard/admin-image-sprite.png) no-repeat -82px -32px;}
.col_6 {background:url(../../images/v4/dashboard/admin-image-sprite.png) no-repeat -125px -32px;}
.col_7 {background:url(../../images/v4/dashboard/admin-image-sprite.png) no-repeat -211px -32px;}
.col_8 {background:url(../../images/v4/dashboard/admin-image-sprite.png) no-repeat -254px -32px;}
.col_9 {background:url(../../images/v4/dashboard/admin-image-sprite.png) no-repeat -297px -32px;}


.col_1:hover,.col_1.active {background:url(../../images/v4/dashboard/admin-image-sprite.png) no-repeat 4px -63px;}
.col_2:hover,.col_2.active {background:url(../../images/v4/dashboard/admin-image-sprite.png) no-repeat -39px -63px;}
.col_3:hover,.col_3.active {background:url(../../images/v4/dashboard/admin-image-sprite.png) no-repeat -168px -63px;}
.col_4:hover,.col_4.active {background:url(../../images/v4/dashboard/admin-image-sprite.png) no-repeat -340px -63px;}
.col_5:hover,.col_5.active {background:url(../../images/v4/dashboard/admin-image-sprite.png) no-repeat -82px -63px;;}
.col_6:hover,.col_6.active {background:url(../../images/v4/dashboard/admin-image-sprite.png) no-repeat -125px -63px;}
.col_7:hover,.col_7.active {background:url(../../images/v4/dashboard/admin-image-sprite.png) no-repeat -211px -63px;}
.col_8:hover,.col_8.active {background:url(../../images/v4/dashboard/admin-image-sprite.png) no-repeat -254px -63px;}
.col_9:hover,.col_9.active {background:url(../../images/v4/dashboard/admin-image-sprite.png) no-repeat -297px -63px;}

/*.Subrow .rowControls {padding-top:5px;}*/
.rowControls{border-bottom:1px solid #ffffff;padding:5px 14px; box-shadow: 0 1px 0 0 #d9d9d9;-webkit-box-shadow: 0 1px 0 0 #d9d9d9;-moz-box-shadow: 0 1px 0 0 #d9d9d9;margin-bottom:0;}
.rowControls > li{float:left;margin-left:8px;}
.rowControls > li:first-child{margin-left:0px;}
.rowControls .cursorMove,.collapserow,.rowControls .deleteRow,.rowControls .collapserow{display: inline-block;margin-top: 4px;font-size:16px;}
.rowControls.hidecontrols li{visibility:hidden;}
.rowControls.hidecontrols li:first-child,.rowControls.hidecontrols li.pull-right{visibility:visible;}

.componentcontrols .editcomponent,.row .cursorMove.icon{color:#999898;font-size:14px; padding-right:9px;}
.componentcontrols{position:relative;}
.componentcontrols a{position:absolute; background:#f4f4f4; border:1px solid #d5d5d5;padding:4px 6px 5px;}
.componentcontrols .cursorMove{left:-1px;top:-1px;  border-radius:2px 0 0 0;-webkit-border-radius:2px 0 0 0;-moz-border-radius:2px 0 0 0;}
.componentcontrols .editcomponent{left:-1px;top:27px; border-radius:0 0 0 2px;-webkit-border-radius:0 0 0 2px;-moz-border-radius:0 0 0 2px;}
.componentcontrols .deleteRow{right:-2px;top:-3px;background:none; border:0;font-size:14px;}

.rowControls .colorpickico,.rowControls .uploadimage, .rowControls .rowColClassico {padding:1px 7px; display:block;border:1px solid #f4f4f4;color:#999898;}
.rowControls > li .colorpickico.active,.rowControls > li .uploadimage.active, .rowControls > li .rowColClassico.active {color:#019ddc;}
.rowControls > li.colorvalue , .rowControls > li.backgroundvalue {margin:3px 0 0; display:none;}
.rowControls .colorvalue div,.rowControls .backgroundvalue div{color:#999999; max-width: 300px;}
.rowControls .colorvalue .icon-cross,.rowControls .backgroundvalue .icon-cross{color:#cf4d4f; text-decoration: none; font-size: 14px; cursor: pointer; margin-top: 2px;}

.clorpick_dropdown {padding:10px;margin-top:0;}

/*set class of row and column dropdown css*/
.rowControls > li.setRowColClass .dropdown-menu{width:350px;} 

.deleteRow,.deleteRow:hover,.deleteRow:focus{color:#cf4d4f;text-decoration:none;}
.collapserow,.collapserow:hover,.collapserow:focus{color:#999898;text-decoration:none;margin-right:10px;}

.CenterBtn {padding:10px; text-align:center;}
.SbRowBtn {text-align:center; padding-bottom:10px;}

.AddComponent.icon-add,.AddChildRow.icon-highq-addsection{border:1px dashed #cccccc;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;color:#999898; display:inline-block;}
.AddComponent.icon-add{padding:5px 16px 4px 17px; font-size: 15px; }
.AddChildRow.icon-highq-addsection{padding:3px 14px 1px;position: relative;top: 0px; line-height:26px;}
.AddChildRow.icon-highq-addsection:before {vertical-align: -4px;}

.CompInfo{padding:2px 26px 2px 36px;}
.CompInfo span{display:block;font-size:12px; line-height:16px;overflow: hidden; text-overflow: ellipsis;}
.comptitle{font-weight:700; color:#019ddc;}
.compselectoption,.noofitems{color:#a1a1a1;}
.CompInfo .comptitle .icon-pending{vertical-align: -3px; margin-right: 3px; font-size:17px;}

/*Preview*/
#GetGridCode.pageWrapper {margin:0;}
.previewHTML{display:none;}
.previewHTML .grid{text-align:center;}
#GetGridCode.pageWrapper .row, #GetGridCode.pageWrapper .Subrow {background:none;}
.previewHTML iframe{border:1px solid #ccc;}
.previewHTML iframe.desktop{width:100%; height:768px;}
.previewHTML iframe.ipad{width:1000px;height:768px; }
.previewHTML iframe.iphone{width:332px;height:480px; }
#GetGridCode{padding:5px;}
#GetGridCode .row .sortable-item{padding:5px 5px 0 5px;}
#GetGridCode .CompInfo{padding:0;}

.pageWrapper .row, .pageWrapper .Subrow {margin:0px auto; min-height:none;/*padding:0;*/}
.pageWrapper .grid {width:100%; margin:0 auto;}
.pageWrapper #gridContainer .row .sortable-list, .pageWrapper #gridContainer .row .sortable-item {border:1px dashed transparent;background:none;}
.pageWrapper #gridContainer .row .sortable-item, #GetGridCode.pageWrapper .row .sortable-item {border:1px dashed #bababa;margin-bottom:10px;}
.pageWrapper #gridContainer .SubRowContainer{padding:0 10px}
.pageWrapper .SubRowContainer{padding:0}
#GetGridCode .sortable-list{border:1px solid transparent;}



/* structure & responsive css start here */
.container {width: auto;}
/* grid column structure */
.GridCol1 > .column {width: 100%;}
/* grid column structure two medium */
.GridCol2 > .column {width: 50%;}
/* grid column structure three medium */
.GridCol3 > .column {width: 33.3333%;}
/* grid column structure four medium */
.GridCol4 > .column {width: 25%;}
/* grid column structure small large */
.GridCol2.col_sl > .column {margin-left: 0%; width: 25%;}
.GridCol2.col_sl > .column.cell2 {width:75%;}
/* grid column structure large small */
.GridCol2.col_ls > .column.cell2, 
.GridCol2.col_ls.swipeCol .cell1 {width:25%;}
.GridCol2.col_ls > .column, 
.GridCol2.col_ls.swipeCol .cell2 {width: 75%;}
.GridCol2.col_ls.swipeCol .cell1 {float:right;}
/* grid column structure small large small */
.GridCol3.col_sls > .column {width: 25%;}
.GridCol3.col_sls > .column.cell2 {float:right;}
.GridCol3.col_sls > .column.cell3 {width: 50%; margin:0 auto;}
/* grid column structure small small large */
.GridCol3.col_ssl > .column {width: 50%;}
.GridCol3.col_ssl > .column.cell1, 
.GridCol3.col_ssl > .column.cell2 {width: 25%;}
/* grid column structure large small small */
.GridCol3.col_lss > .column {width: 50%;}
.GridCol3.col_lss > .column.cell2,
.GridCol3.col_lss > .column.cell3 {width: 25%;}

/*Two column subrow*/
.Subrow .GridCol2.col_sl > .column.cell1,
.Subrow .GridCol2.col_ls > .column.cell2{width:33.3%;}
.Subrow .GridCol2.col_ls > .column.cell1,
.Subrow .GridCol2.col_sl > .column.cell2{width:66.7%;}

/* Hide columns at child level */
.col_mm .Subrow .col_3, .col_mm .Subrow .col_5, .col_mm .Subrow .col_6,
.col_sl .cell1 .Subrow .col_2, .col_sl .cell1 .Subrow .col_3, .col_sl .cell1 .Subrow .col_5, .col_sl .cell1 .Subrow .col_6,
.col_ls .cell2 .Subrow .col_2, .col_ls .cell2 .Subrow .col_3, .col_ls .cell2 .Subrow .col_5, .col_ls .cell2 .Subrow .col_6 {display:none;}

.GridCol3 .Subrow .col_3, .GridCol3 .Subrow .col_5, .GridCol3 .Subrow .col_6,
.col_sls .cell1 .Subrow .col_2, .col_sls .cell2 .Subrow .col_2,
.col_ssl .cell1 .Subrow .col_2, .col_ssl .cell2 .Subrow .col_2,
.col_lss .cell2 .Subrow .col_2, .col_lss .cell3 .Subrow .col_2 {display:none;}

.col_mm  .Subrow .rowControls .collist .subcolsection3,.col_sls .Subrow .rowControls .collist .subcolsection3,.col_ssl .Subrow .rowControls .collist .subcolsection3,.col_lss .Subrow .rowControls .collist .subcolsection3,
.col_sl .cell1 .CenterBtn .AddChildRow,.col_ls .cell2 .CenterBtn .AddChildRow,.col_sls .cell1 .CenterBtn .AddChildRow,.col_sls .cell2 .CenterBtn .AddChildRow,.col_ssl .cell1 .CenterBtn .AddChildRow,.col_ssl .cell2 .CenterBtn .AddChildRow,.col_lss .cell2 .CenterBtn .AddChildRow,.col_lss .cell3 .CenterBtn .AddChildRow,.col_mmm .cell1 .CenterBtn .AddChildRow,.col_mmm .cell2 .CenterBtn .AddChildRow ,.col_mmm .cell3 .CenterBtn .AddChildRow  {display:none;}

/* Small devices (mobile, 320px and upto 639) */
@media (max-width: 639px) { 

.GridCol1 .column, .GridCol2 .column,
.GridCol3 .column, .GridCol4 .column,
.GridCol4 .column.cell3,
.GridCol2.col_sl .column,
.GridCol2.col_sl .column.cell2, 
.GridCol2.col_ls .column, 
.GridCol2.col_ls .column.cell2, 
.GridCol2.col_ls.swipeCol .cell1,
.GridCol3.col_sls .column, 
.GridCol3.col_sls .column.cell2, 
.GridCol3.col_sls .column.cell3, 
.GridCol3.col_ssl .column.cell1, 
.GridCol3.col_ssl .column.cell2, 
.GridCol3.col_ssl .column.cell3, 
.GridCol3.col_lss .column, 
.GridCol3.col_lss .column.cell2, 
.GridCol3.col_lss .column.cell3,
.Subrow .GridCol2.col_sl > .column.cell1,
.Subrow .GridCol2.col_ls > .column.cell2,
.Subrow .GridCol2.col_ls > .column.cell1,
.Subrow .GridCol2.col_sl > .column.cell2 {width: 100%; margin:0;}

}
/* Medium devices (tablets, 640px to 959px) */
@media (min-width: 640px) and (max-width: 960px) { 

.container {width: auto;}
.GridCol1 > .column {width: 100%; margin:0;}
.GridCol2 > .column {width: 50%;}
.GridCol3 > .column {width: 33.33333%;}
.GridCol4 > .column {width: 50%;}
.GridCol4 > .column.cell3 {width: 50%; clear:left;}
.GridCol2.col_sl > .column, 
.GridCol2.col_sl > .column.cell2 {width: 50%;}
.GridCol2.col_ls > .column, 
.GridCol2.col_ls > .column.cell2,
.GridCol2.col_ls.swipeCol .cell1 {width: 50%;}
.GridCol3.col_sls > .column {width: 50%;}
.GridCol3.col_sls > .column.cell3 {clear: both; margin: 0; width: 100%;}
.GridCol3.col_ssl > .column {width: 100%;}
.GridCol3.col_ssl > .column.cell1, 
.GridCol3.col_ssl > .column.cell2 {width: 50%;}
.GridCol3.col_lss > .column {width: 100%;}
.GridCol3.col_lss > .column.cell2 {width: 50%;}
.GridCol3.col_lss > .column.cell3 {width: 50%;}
.Subrow .GridCol3 > .column, 
.Subrow .GridCol2 > .column,
.Subrow .GridCol2.col_sl > .column,
.Subrow .GridCol2.col_sl > .column.cell1,
.Subrow .GridCol2.col_sl > .column.cell2,
.Subrow .GridCol2.col_ls > .column.cell1, 
.Subrow .GridCol2.col_ls > .column.cell2,
.Subrow .GridCol2.col_sl > .column.cell2 {width:100%;}

}