.tab{
    top:100%;
    background:var(--tb_ui_bg_light);
    color:var(--tb_ui_color);
    padding:10px;
    box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 10px 2px rgba(0,0,0,.3);
    border-radius:8px;
    width:315px
}
.arr:hover,
.row > li.selected,
.row > li:hover{
    background:#6e04b8
}
.subrow > li.selected,
.subrow > li:hover{
    background:#823487
}
.grid_layout{
    display:grid;
    grid-auto-flow:column;
    align-items:center
}
#row_options.selected,
#grid.selected,
.tab.selected{
    display:grid;
    row-gap:10px;
    text-align:left
}
.tab:before{
    content:'';
    position:absolute;
    top:0;
	inset-inline-start:46px;
    border:6px solid transparent;
    border-bottom-color:var(--tb_ui_bg_light);
    z-index:99;
    transform:translate(0,-100%)
}
.expand{
    position:absolute;
    top:5px;
	inset-inline-end:5px;
    font-size:10px;
    cursor:pointer
}
.expand .tf_fa{
    stroke-width:0;
    font-size:12px
}
.row_menu{
    width:max-content;
    gap:5px
}
.row_menu li{
    font-size:14px;
    padding:3px 5px
}
.row_menu li.selected,
.row_menu li:hover{
    border-bottom:1px solid #00a2fb
}
#grid .selected{
    background-color:var(--tb_gs_icon_bg,#e6f2fe);
    border-color:#00b5f9
}
.breakpoints{
    width:max-content;
    column-gap:5px
}
.breakpoints li{
    font-size:1.5em;
    padding:6px 7px;
    color:var(--tb_ui_color);
    border-radius:8px
}

.desktop .tab_desktop,
.tablet .tab_tablet,
.tablet_landscape .tab_tablet_landscape,
.mobile .tab_mobile,
.breakpoints li:hover{
    background:var(--tb_gs_icon_bg,rgba(0,0,0,.1))
}
.aligment_wrap li,
.grid_list li{
    background-color:var(--tb_grid_bg_light);
    border:1px solid var(--tb_grid_bg,#f5f5f5);
    border-radius:5px;
    box-sizing:content-box
}
.grid_list{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:6px 8px
}
.grid_list li{
    width:23px;
    height:9px;
    padding:6px 5px
}
.grid:before,
.aligment_wrap li:before{
    content:'';
    width:inherit;
    height:inherit;
    background-position:inherit;
    background-repeat:no-repeat;
    display:block
}
.grid:before{  
    background-image:url(img/grids.svg)
}
.c1{
    background-position:0 -38px
}
.c2{
    background-position:-33px -57px
}
.c3{
    background-position:-66px -19px
}
.c4{
    background-position:-66px -38px
}
.c5{
    background-position:-66px -57px
}
.c6{
    background-position:0 -76px
}
.c2_1{
    background-position:-33px -38px
}
.c1_1_2{
    background-position:-33px 0
}
.c1_2_1{
    background-position:0 -19px
}
.c2_1_1{
    background-position:0 -57px
}
.c1_3{
    background-position:-33px -19px
}
.c3_1{
    background-position:-66px 0
}
.cauto{
    background-position:-32px -77px
}
.cuser{
	display:none;
    opacity:.5;
    cursor:not-allowed
}
.aligment_wrap{
    align-items:start;
    column-gap:20px;
    row-gap:inherit
}
.left,
.right{
    display:grid;
    align-items:center;
    row-gap:inherit
}
.auto_dir,
.aligment_wrap ul{
    column-gap:8px;
    justify-content:start
}
.aligment_wrap li{
    padding:2px;
    width:29px;
    height:22px
}
.aligment_wrap li:before{
    background-image:url(img/row-grid-sprite.png)
}
.start{
    background-position:-58px 0
}
.center{
    background-position:-29px  0
}
.reverse{
    background-position:-29px -21px
}
.gutter{
    background-position:-58px -22px
}
.narrow{
    background-position:0 -44px
}
.none{
    background-position:-29px -44px
}
.stretch{
    background-position:-58px -44px
}
.stretch_auto{
    background-position:0 -66px
}

/*Responsive Columns*/

#grid .themify_tooltip{
    margin-bottom:10px
}
#grid li:hover{
    border-color:#8E8E8E
}
#grid .tf_fa{
    stroke-width:0;
    font-size:inherit
}
.range_wrap{
    column-gap:10px
}
#slider{
    width:80px
}
#range{
    padding:.4em;
    border-radius:5px;
    margin:0
}
/* column alignment/direction */
#row_options hr{ /* hide excerpt in small columns */
    display:none
}
/*row options*/
#row_options .tb_field{
    display:grid;
    align-items:center;
    justify-content:start;
	grid-template-columns:100px 1fr;
    column-gap:10px
}
#row_options input[type=text]:focus{
    outline:0
}
#row_options .tb_input label{
    font-size:unset
}
.themify_builder_admin .active_module .tb_grid_menu:hover{
    z-index:60
}
:host(.tb_row_first) .up,
:host(.tb_row_last) .down,
.tb_field:after,
.tb_col_count_1 .aligment_wrap,
.tb_responsive_mode.tb_1col_grid .aligment_wrap,
.tb_responsive_mode.tb_col_count_1 .grid:not(.tb1),
.tb_responsive_mode.tb_col_count_2 .grid:not(.tb2):not(.tb1),
.tb_responsive_mode.tb_col_count_3 .tb4,
.tb_responsive_mode.tb_col_count_3 .tb5,
.tb_responsive_mode.tb_col_count_3 .tb6,
.tb_responsive_mode.tb_col_count_4 .tb5,
.tb_responsive_mode.tb_col_count_4 .tb6,
.tb_responsive_mode.tb_col_count_5 .tb6{
    display:none
}
.selected.cuser,
#grid.tb_responsive_mode:not(.tb_col_count_1) .cauto{
	display:unset
}
ul.dropdown .up_down{
	position:absolute;
    top:-15px;
    inset-inline-start:1px;
    transform:translateY(100%);
    width:auto;
    background:0;
    place-content:center;
    padding: 10px 0 0;
    box-sizing:content-box;
    contain:style layout;
    cursor:auto;
    z-index:1
}
.up_down ul{
    display:grid;
    grid-auto-flow:column; 
    contain:inherit;
    background-color:var(--tb_bar_color);
    border-radius:8px
}
:host(.tb_row_first) .arr,
:host(.tb_row_last) .arr{
	border-radius:inherit
}
.up_down:hover,
.tb_move:hover+.up_down{
	display:flex
}
.up_down .themify_tooltip{
	bottom:auto;
	top:100%;
	margin-top:5px;
}
.up_down .themify_tooltip:before{
    border-bottom-color:#000;
    border-top-color:transparent;
    top:auto;
    bottom:100%;
}
.arr{
    display:flex;
    place-items:center;
    place-content:center;
	width:34px;
	border-start-start-radius:inherit;
	border-end-start-radius:inherit
}
.arr:before{
	content:'';
    border-top:2px solid currentColor;
    border-right:2px solid currentColor;
    transform:rotate(-45deg);
    width:10px;
    height:10px;
    margin-top:7px
}
.down{
	border-radius:0;
	border-start-end-radius:inherit;
	border-end-end-radius:inherit
}
.down:before{
    margin-top:-7px;
	transform:rotate(135deg)
}
@media (max-width:680px){
    .tab{
        width:300px
    }
	.grid_list{
		gap:6px
	}
	#slider{
		width:60px
	}
}