.box {
    @include span(9 of 18);
    height:100%;
    white-space: normal;
    position: relative;
    display: inline-block;
    @include colors($box-text-color, $box-background-color);
    
    .box-body {
        border: $mainContainer-border-width solid $box-structure-color-dark;
    }

    /* BOX INTERNAL ELEMENTS */
    .box-menu {
        @include inside-header();
        @include colors($box-structure-color-light, $box-structure-color-dark);

        &[data-position='top']{
            display: setVisibility($mainContainer-top-menu);
            align-items: center;
            border-radius: 2px 2px 0 0;
        }

        &[data-position='bottom']{
            display: setVisibility($mainContainer-bottom-menu);
            align-items: center;
            border-radius: 0 0 2px 2px;
        }
    }

    .box-body {
        @include frameBody();
        overflow: auto;
        
        &.noBottomMenu {
            @include calc(height, #{setInsideFrameHeight()} + $mainContainer-menu-height);
        }
    }

    .box-top-box, .box-bottom-box{
        background: #fff;
        text-align: left;
        font-size: 90%;
        margin-top: 42px;
        margin-bottom: 42px;
        display: none;
        position: absolute;
        z-index: 10;
        padding: 20px;
        // border: $mainContainer-border-width solid $base-color-dark;

        &.open {
            display: block;
        }
    }
    .box-top-box:not(#msDesc) { 
        background: $box-top-box-backgound-color;
        overflow-y: auto;
        overflow-x: hidden;
        top: $mainContainer-border-width;
        right: $mainContainer-border-width+1;
        left: $mainContainer-border-width+1;
		@include calc(height, #{setInsideFrameHeight()} - ($mainContainer-border-width*2));
        @include calc(width, #{calc(100% - $mainContainer-border-width)});
	}
	
	#msDesc {
		background: $box-top-box-backgound-color;
        overflow-y: auto;
        overflow-x: hidden;
        top: $mainContainer-border-width;
        right: $mainContainer-border-width+1;
        left: $mainContainer-border-width+1;
        @include calc(width, #{calc(100% - $mainContainer-border-width)});
		z-index:30;
	}
		
    
    .box-bottom-box{
        bottom: 0px;
        right: $mainContainer-border-width;
        left: $mainContainer-border-width;
        height: auto;
        overflow: hidden;
        border-top: 1px solid;
        @include set(box-shadow, 0px 0px 4px rgba(0,0,0,.5));
    }
    .tools-group-box {
        display: none;
        position: absolute;
        z-index: 10;
        
        height: auto;
        min-width: calc(100% - #{$mainContainer-border-width*2*2});
        overflow: hidden;

        padding: 5px 10px;
        margin-top: 42px;
        margin-bottom: 42px;
        bottom: $mainContainer-border-width+1;
        left: $mainContainer-border-width*2;
        
        border: $mainContainer-border-width solid $box-structure-color-dark;
        background: #fff;
        @include set(box-shadow, 0px 0px 14px -4px rgba(0, 0, 0, 0.5));
        
        text-align: left;
        font-size: 1.5em;
        &.open {
            display: block;
        }
    } 

    .filters-box {
        display: none;
        position: absolute;
        z-index: 10;
        
        height: auto;
        min-width: 30%;
        overflow: hidden;

        margin-top: 42px;
        margin-bottom: 42px;
        bottom: $mainContainer-border-width+1;
        left: $mainContainer-border-width*2;
        
        border: $mainContainer-border-width solid $box-structure-color-dark;
        background: rgba(255, 255, 255, 1);
        @include set(box-shadow, 0px 0px 14px -4px rgba(0, 0, 0, 0.5));
        
        text-align: left;
        font-size: 90%;

        &.open {
            display: block;
        }
        .filter-group {
            border-bottom: 3px double #000;
            &:last-child {
                border-bottom:0;
            }
        }
        .filters-section-title {
            text-transform: uppercase;
            font-weight: bold;
            font-size: 85%;
            width: 100%;
            text-align: left;
            padding: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
            background: #e5e5e5;
        }
        .filter-value-outer {
            padding: 3px 10px;
        }

        .filter-value{
            border-radius: 2px;
            background: #E0E0E0;
            display: inline-block;
            &-label {
                cursor: pointer;
                padding: 0 8px;
                display: inline-block;
                font-variant: small-caps;
                &:not(.active){
                    background: #fff !important;
                    &:hover{
                        border-radius: 2px;
                        background: rgba(255,255,255,0.5) !important;
                    }
                }
                &.active {
                    border-radius: 2px;
                    @include set(box-shadow, 0px 1px 3px rgba(0, 0, 0, 0.3));
                    &:not(.filter-any){
                        // &::after{
                        //     content: "x";
                        //     position: relative;
                        //     top: -1px;
                        //     margin-left: 5px;
                        //     font-size: 80%;
                        //     color: rgb(51, 51, 51);
                        //     font-weight: lighter;
                        // }
                        &:hover{
                            border-radius: 2px;
                            background: rgba(255,255,255,0.2) !important;
                        }
                    }
                }
            }            
        }
    }

    /* ********* */
    /* BOX TYPES */

    //IMAGE
    &.box-image {
        .box-body {
            @include colors($box-structure-color-light, #000);
            overflow: hidden;
            text-align: center;
            padding: 0px;
            img {
                height: 100%;
            }
        }
        
    }
    //TEXT
    &.box-text, &.box-critical_apparatus {
        &.span6of18 {
            @include span(isolate 6 of 18);
        }
    }

    //WITNESS
    &.box-witness {
        @include span(isolate 5 of 12);
        float: none;
        
        &.span6of12 {
            @include span(isolate 6 of 12);
        }
        &.span9of9 {
            @include span(isolate 9 of 9);
        }

        .box-body {
            border-color: $box-witness-structure-color-dark;
            background: $box-witness-background-color;
        }
        .box-menu {
            @include colors($box-witness-structure-color-light, $box-witness-structure-color-dark);
        }
        .filters-box, .tools-group-box {
            border-color: $box-witness-structure-color-dark;
        }
    }
    // VERSION
    &.box-version {
        @include span(isolate 5 of 12);
        float: none;
        
        &.span6of12 {
            @include span(isolate 6 of 12);
        }
        &.span9of9 {
            @include span(isolate 9 of 9);
        }

        .box-body {
            //overflow-y: auto;
            border-color: $box-witness-structure-color-dark;
            background: $box-witness-background-color;
        }
        .box-menu {
            @include colors($box-witness-structure-color-light, $box-witness-structure-color-dark);
        }
        .filters-box, .tools-group-box {
            border-color: $box-witness-structure-color-dark;
        }
    }
    &.box-text, &.box-witness, &.box-version {
        .box-body {
            position: relative;
            overflow-x: hidden;
            overflow-y: auto;
        }
    }

    &.box-critical_apparatus {
        .box-body{
            height: 100%;
            overflow-x: auto;
        }
    }
    &.box-pinnedBoard {
        width: 25%;
        left: 12.5%;
    }
    
    &.box-source {
        .box-body {
            overflow-y: auto;
        }
    }

    &.box-empty { 
        .box-body { 
            height: 100%; 
            padding: 0.4px; 
            overflow: hidden; 
            border-color: $box-witness-structure-color-dark;
        } 
    } 

    // BODY
    &.topBoxOpened {
        .box-body {
            color: transparent !important;
            text-shadow: 0 0 5px #000;
            * {
                background: transparent !important;
            }
        }
    }
    .loading {
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        width: 100%;
        
        i {
            margin-left:-22.5px;
        }
    }
}

.centered {
    .box {
        left:25%;
    }
}
.half-centered {
    .box {
        left: 12.5%;
    }
}

.half-left {
    .box {
        left: 0%
    }
}
/*Classes added to handle the position of the pin board and the pin button*/
/*@author --> CM*/
.smaller-left{
    .box {
        left: 0%;
        width: 37.5%;
    }
}
.smaller {
    .box {
        width: 37.5%;
    }
}
.pin-centered {
    .box {
        left: 0%;
    }
}
/*End of the addition by CM*/
// Temporary
// .viewMode .box:last-child{
    // margin: 0px 0px 0px 0.5px;
// }

.compareWits_box, .compareVer_box {
    @include span(isolate 12 of 18);
    overflow-x: auto;
    overflow-y: hidden; 
    height:100%;
    white-space: normal;
    position: relative;
    display: inline-block;
    margin: 0;
    &.span9of18 {
        width: span(9 of 18);
        overflow-x: hidden;
    }
    &.span18of18 { //no Critical Text
        width: span(18 of 18);
        .box-witness, .box-version {
            @include span(isolate 5 of 18);
            float: none;

            &.span6of12,
            &.span9of9 {
                @include span(isolate 9 of 18);
            }
            &.span6of18 {
                @include span(isolate 6 of 18);
            }
        }
    }
}

.compareWits_box--buttonAddWit, .compareVer_box--buttonAddVer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    &.left75 {
        left: 75%
    }
    &.floatRight {
        position: absolute;
        left: 99%;
        transform: translate(-100%, -50%);
        top: 50%;
        
        .buttonSwitch {
            border-radius: 100px;
            height: 40px;
            width: 40px;
            text-align: center;
            opacity: .5;
            font-weight: bold;
            
            &:hover{
                opacity: 1;
            }

            &.buttonSwitch-disabled{
                display: none;
            }
        }
        .buttonSwitch-label {
            display: none;
        }
        .buttonSwitch-icon {
            margin-left: 8px;
            margin: 8px 0;
            font-size: 2.2em;
        }
    }
}

.box-body.search-opened #mainContentToTranform {
    padding-bottom: 30px;
}