$lyt_border_color: $main-border-color;
$lyt_border_radius: 5px;

.fancy_box, .topit,
.layout-table, .layout-slider,
.cell, .box,
.inline_table,
.layout-box,
.fixed-table {
	display: block; position: relative;
    margin: 0; padding: 0;
}





.fancy_box {
    position: absolute;
    @include border-radius( 5px );
    top:    -3px;
    right:  -3px;
    bottom: -3px;
    left:   -3px;
    background: $gray-soft;
    border: solid 1px $main-border-color;
    z-index: 1;
    &.center {
        z-index: 15;
        top:    -15px;
        bottom: -20px;
        right:  -5px;
        left:   -5px;
        background: #fff;
    }
}

.topit { display: block; position: relative; z-index: 13; }
.center .topit, .center.topit { z-index: 23; }

.layout-table, .layout-slider {
	@include raised_shadow( rgba(0, 0, 0, 0.5), 1 );
    display: table;
    margin: 0 0 10px;
    border: solid 1px $main-border-color;
    background: #fff;
    @include border-radius(5px);
    &.fixed { table-layout: fixed; }
    width: auto;
    width: 100%;
    & > * { vertical-align: top; }
    & > .cell, & > .box {
		@include raised_shadow( rgba(0, 0, 0, 0.00), 1 );
        display: table-cell;
        // width: 50%;
        // table-layout:fixed;
        width: auto;
        border-collapse: separate;
        border-spacing: 0;
        border: none;
        border-right: solid 1px $main-border-color;
        background: #fff;
        &.aside { width: 220px; }
        &.small { width: 180px; }
		&.tiny { width: 122px; }
        & > * { vertical-align: top; }
		@include border-radius( 0 );
        &:first-child { @include border-top-left-radius( 3px ); @include border-bottom-left-radius( 3px ); }
        &:last-child { @include border-top-right-radius( 3px ); @include border-bottom-right-radius( 3px ); border-right: none; }
    }
    &.fancy {
        margin-bottom: 170px;
        & > .cell, & > .box { padding: 0; }
    }
    .layout-slider-oppener {
        display: none; margin-right: 10px;
        // padding: 4px 6px;
        .closer { display: none; }
        .opener { display: block; }
        &.open {
            .closer { display: block; }
            .opener { display: none; }
        }
    }
	&.blank {
		@include raised_shadow( rgba(0, 0, 0, 0.00), 1 );
		margin: 0;
	    border: none;
	    background: transparent;
	    @include border-radius(0);
		& > .cell, & > .box, & > .cell:last-child, & > .box:last-child {
			margin: 0;
		    border: none;
		    background: transparent;
		    @include border-radius(0);
		    padding: 0 10px;
		}
		& > .cell, & > .box {
			&:first-child { padding-left: 0; }
			&:last-child { padding-right: 0; }
		}
	}
}


.inline_table {
    display: table; 
    &.fixed { table-layout: fixed; }
    width: auto;
    width: 100%;
	& > .cell, & > .box {
        display: table-cell;
        // width: 50%;
        // table-layout:fixed;
        width: auto;
        border-collapse: separate;
        border-spacing: 0;
        border: none;
		vertical-align: top;
		&.icon { width: 60px; }
		&.actions { width: 1%; min-width: 70px; }
        & > * { vertical-align: top; }
		& > .btn, & > input {
			display: block; position: relative;
			margin: 0;
			@include border-radius( 0 );
			@include box-sizing(border-box);
			// height: 32px;
			width: 100%;
			// border: solid 1px $gray-light;
			border-right: none;
		}
        &:first-child > .btn, 
		&:first-child > input { 
			@include border-top-left-radius( 3px ); 
			@include border-bottom-left-radius( 3px );
		}
        &:last-child > .btn, 
		&:last-child > input {
			@include border-top-right-radius( 3px ); 
			@include border-bottom-right-radius( 3px ); 
			border-right: solid 1px $main-border-color;
		}
    }
	&.fielded {
		border: solid 1px $main-border-color;
		@include border-radius(3px);
		background: #fff;
		margin: 0 0 10px;
		padding: 5px;
		@include box-sizing(border-box);
		text-align: left;
		& > .cell, & > .box {
			padding: 0 5px;
			@include no_wrap;
			overflow: visible;
			input {
				border: none;
				@include box-shadow(none);
				background: transparent;
				padding: 0; margin: 0; line-height: 20px; height: 20px;
			}
			.field_dropdown {
				margin: 0 -5px 0 0;
				.btn {
					padding: 0 3px 0 5px;
					border: solid 1px $main-border-color;
					@include border-radius(3px);
					margin: -1px -3px -1px 0;
				}
			}
			color: $gray
		}
		&.focus {
			@include box-shadow( 0 0 5px 1px $blue-light )
		}
	}
	
	&.middled {
	    & > .cell, & > .box {
			vertical-align: middle;
			& > * { vertical-align: middle; }
			&.top { 
				vertical-align: top; 
				& > * { vertical-align: top; }
			}
			&.bottom { 
				vertical-align: bottom; 
				& > * { vertical-align: bottom; }
			}
		}
	}
	
}

.layout-box {
    @include raised_shadow( rgba(0, 0, 0, 0.5), 1 );
    display: table; 
    margin: 0 0 10px; 
    background: #fff;
    border: solid 1px $main-border-color;
    @include border-radius(5px);
    width: 100%;
    @include transition (all 0.3s ease-in-out);
    & > .cell, & > .box {
        @include transition (all 0.3s ease-in-out);
        display: table-cell;
        vertical-align: top;
        // width: 50%;
        // table-layout:fixed;
        width: auto;
        border-collapse: separate;
        border-spacing: 0;
        border: none;
        &.aside { width: 220px; }
        border-left: solid 1px $main-border-color;
        &:first-child { border-left: none; }
        &.filterbar { background: #f6f6f6; }
    }
    &.fixed { table-layout:fixed; }
    &:first-child {
        .cell:first-child, .box:first-child { @include border-top-left-radius( 3px ); }
        .cell:last-child, .box:last-child { @include border-top-right-radius( 3px ); }
    }
    &:last-child {
        .cell:first-child, .box:first-child { @include border-bottom-left-radius( 3px ); }
        .cell:last-child, .box:last-child { @include border-bottom-right-radius( 3px ); }
    }
    
    .layout-box-oppener {
        display: none; margin-right: 10px;
        padding: 4px 6px;
        i { height: 20px; width: 20px; vertical-align: center; font-size: 20px; }
        .closer { display: none; }
        .opener { display: block; }
        &.open {
            .closer { display: block; }
            .opener { display: none; }
        }
    }
    
    &.multi{
        
        display: block;
        background: #fff;
        border: solid 1px $main-border-color;
        @include border-radius(5px);
        .line {
            display: table; position: relative;
            margin: 0; padding: 0;
            width: 100%;
            @include transition (all 0.3s ease-in-out);
            border-top: solid 1px $main-border-color;
            &:first-child { border: none; }
            & > .cell, & > .box {
                @include transition (all 0.3s ease-in-out 0.3s);
                display: table-cell; position: relative;
                vertical-align: top;
                // width: 50%;
                // table-layout:fixed;
                width: auto;
                margin: 0; padding: 0;
                border-collapse: separate;
                border-spacing: 0;
                border: none;
                border-left: solid 1px $main-border-color;
                &:first-child { border-left: none; }
                &.aside { width: 220px; } 
            }
            &.fixed { table-layout:fixed; }
            &:first-child {
                .cell:first-child, .box:first-child { @include border-top-left-radius( 3px ); }
                .cell:last-child, .box:last-child { @include border-top-right-radius( 3px ); }
            }
            &:last-child {
                .cell:first-child, .box:first-child { @include border-bottom-left-radius( 3px ); }
                .cell:last-child, .box:last-child { @include border-bottom-right-radius( 3px ); }
            }
        }
    }
}

.box-nav {
    background: $blue-lighter;
    // border-top: solid 1px #ccc;
    border-bottom: solid 1px $main-border-color;
}





.fixed-table {
    display: table;
    width: 100%;
    table-layout:fixed;
    & > .cell {
        display: table-cell; position: relative;
        padding: 0; margin: 0;
        vertical-align: top;
        border-collapse: separate;
        border-spacing: 10px;
    }
}



@media (max-width: 820px) {
    .layout-table {
		@include raised_shadow( rgba(0, 0, 0, 0.01), 1 );
        display: block;
        border: none; background: transparent;
        & > .cell, & > .box {
			@include raised_shadow( rgba(0, 0, 0, 0.5), 1 );
            display: block;
            background: #fff;
            @include border-radius(5px);
            border: solid 1px $main-border-color;
            width: auto;
            margin: 0 0 10px;
            &.aside, &.small, &.tiny { width: auto; } 
        }
        & > .cell, & > .box, & > .cell + .cell, & > .box + .box {
            &:first-child { @include border-radius(5px); }
            &:last-child { @include border-radius(5px); border: solid 1px $main-border-color; }
        }
    }


    .layout-slider {
        display: block;
        position: relative;
        z-index: 1;
        overflow: hidden;
        .layout-slider-oppener { display: inline-block; }
        & > .cell, & > .box {
            // min-height: 500px;
            display: block; position: relative;
            width: 100%;
            margin: 0;
            // z-index: 5;
            @include transition (all 0.3s ease-in-out);
            &.aside { 
                position: absolute !important;
                top: 0; bottom: 0;
                left: 0; right: auto;
                margin: 0 !important;
                width: 222px;
                z-index: -3;
                &.small { width: 182px; }
                // z-index: 1;
                &.right { left: auto; right: 0; }
            }
        }
        &.open-aside {
            z-index: 5;
            &.right > .cell, &.right > .box {
                margin-right: 220px;
                margin-left: -220px;
                z-index: -3;
                &.main { @include single_curve( rgba(0, 0, 0, 0.5), 2, "right" ); z-index: auto; border-right: solid 1px $main-border-color;}
            }
            &.left > .cell, &.left > .box {
                margin-left: 220px;
                z-index: -3;
                &.main { @include single_curve( rgba(0, 0, 0, 0.5), 2 ); z-index: auto; border-left: solid 1px $main-border-color;}
            }
        }
    }
    
    .layout-box {
        display: block; position: relative;
        // margin: 0; 
		padding: 0;
        & > .cell, & > .box {
            background: #fff;
            display: block; position: relative;
            width: auto;
            &.aside { width: auto; } 
            border-left: solid 1px $main-border-color;
            @include border-radius( 0 );
        }
        & > .cell:first-child, & > .box:first-child {
            @include border-top-left-radius( 3px );
            @include border-bottom-left-radius( 3px );
        }
        & > .cell:last-child, & > .box:last-child {
            @include border-top-right-radius( 3px );
            @include border-bottom-right-radius( 3px );
        }
        .cell:last-child, .box:last-child {   @include border-top-left-radius( 0 ); @include border-top-right-radius( 0 ); }
        .layout-box-oppener { display: inline-block; }
        &.multi {
            overflow: hidden;
			.line {
				display: block; position: relative;
                margin: 0; padding: 0;
			}
            .line, & {
                & > .cell, & > .box {
                    background: #fff;
                    display: block; position: relative;
                    width: auto;
                    &.aside { width: auto; }
                    &.aside.slide { 
                        position: absolute !important;
                        top: 0; bottom: 0;
                        left: 0; right: auto;
                        margin: 0 !important;
                        width: 222px;
                        z-index: -3;
                        &.small { width: 182px; }
                        // z-index: 1;
                        &.right { left: auto; right: 0; }
                    }
                    border-left: solid 1px $main-border-color;
                }
                &:first-child {
                    .cell:last-child, .box:last-child {   @include border-top-left-radius( 0 ); @include border-top-right-radius( 0 ); }
                    .cell:first-child, .box:first-child { @include border-top-left-radius( 3px ); @include border-top-right-radius( 3px ); }
                    & > .cell, & > .box { border-left: none; }
                }
                &:last-child {
                    .cell:first-child, .box:first-child { @include border-bottom-left-radius( 0 ); @include border-bottom-right-radius( 0 ); }
                    .cell:last-child, .box:last-child {   @include border-bottom-left-radius( 3px );  }
                }
                
                &.open-aside {
                    z-index: 5;
                    // & > .cell, & > .box {min-height: 700px;}
                    &.right > .cell, &.right > .box {
                        // margin-right: 220px;
                        // margin-left: -220px;
                        left: -220px;
                        z-index: -3;
                        &.main { @include single_curve( rgba(0, 0, 0, 0.5), 2, "right" ); z-index: auto; border-right: solid 1px $main-border-color;}
                    }
                    &.left > .cell, &.left > .box {
                        margin-left: 220px;
                        z-index: -3;
                        &.main { @include single_curve( rgba(0, 0, 0, 0.5), 2 ); z-index: auto; border-left: solid 1px $main-border-color;}
                    }
                }
                
            }
        }
    }
    
    .reflection {
        display: none;
    }
    
    .time_line_wrapper {
        height: auto !important;
        .nano, .content, .nano .content { display: block; position: relative; top: auto; right: auto; bottom: auto; left: auto; height: auto; width: auto; }
    }
}