/*
    SCSS variables and mixins
    */
/*
    Some styles to make this demo look pretty (or at least decent)
    If you want to style everything yourself, you shouldn't need these
    */
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,900");

.tabbed-content h2 {
    _margin: 2em auto 0;
    _text-align: center;
}

.heightClass {
    margin-bottom: 0em !important;
}

.tabbed-content {
    background: #fff;
    /* box-shadow: 1px 1px 6px #ccc; */
    max-width: 98%;
    margin: 1em auto;
}

.tabs ul {
    margin: 0;
    padding: 0 0 0 0;
    font-weight: bold;
    background-color: rgb(236, 236, 238);
}

ul.tabListItems {
    margin-bottom: 2em;
}

.tabs ul li {
    background: #eee;
}

    .tabs ul li a {
        padding: 0.7em 1.2em;
    }

        .tabs ul li a:hover {
            color: black;
        }
        /*.tabs ul li a:hover,*/
        .tabs ul li a.active {
            /* background: #444; */
            color: black;
            background: white;
            border-top: 3px solid rgb(85, 117, 200);
            box-shadow: 6.5px 2px 2px #ccc; /*0.5px 1px 2px #ccc;*/
        }

.item {
    /* margin-bottom: 2px; */
}

    .item::before {
        cursor: pointer;
        font-weight: bold;
        /* background: #eee; */
        padding: 0.5em;
        display: block;
        border-bottom: 1px solid rgb(193, 193, 193);
        background-image: url('/_catalogs/masterpage/Resources/images/Icons/icon-arrow-down.png');
        background-repeat: no-repeat;
        /* background-position: center; */
        background-position: right;
    }

    .item.active::before {
        /* background: #444; */
        /* color: #eee; */
        background-image: url('/_catalogs/masterpage/Resources/images/Icons/icon-arrow-up.png');
    }

    .item.active .item-content {
        padding: 1em;
        -webkit-transition: opacity 0.3s ease-in-out;
        -moz-transition: opacity 0.3s ease-in-out;
        -o-transition: opacity 0.3s ease-in-out;
        -ms-transition: opacity 0.3s ease-in-out;
        transition: opacity 0.3s ease-in-out;
    }

@media all and (min-width: 1200px) {
    .tab-layout .item.active .item-content {
        padding-top: 0;
    }

    .tab-layout .tabs-side .tabs li {
        margin-bottom: 2px;
    }
}

/*
    The project specific CSS starts here
    This is the minimum CSS that you will need in order for this to work
    */
.tabbed-content .tabs {
    display: none;
}

.tabbed-content .item {
    min-height: 5em;
    padding: 0;
    _margin-bottom: 2em;
    transition: all 0.2s cubic-bezier(0.5, 0.3, 0.47, 0.81);
    cursor: pointer; /*Putting for IE as it doesn't show up the pointer in IE*/
}

/* Defect #1636 fix */
div[id*="AaccWpZone"] .tabbed-content .item{
    margin-bottom: 2em;
}

.tabbed-content .item::before {
    content: attr(data-title);
    font-family: Arial;
    font-style: normal;
    font-weight: bold;
    font-size: 27px;
    line-height: 40px;
    letter-spacing: -0.5px;
    color: #353C42;
    margin-bottom: 0.5em;
}

    .tabbed-content .item .item-content {
        opacity: 0;
        visibility: hidden;
        height: 0;
        cursor: default;
    }

    .tabbed-content .item.active .item-content {
        opacity: 1;
        visibility: visible;
        height: auto;
    }

/*.accordion-layout .tabbed-content .tabs {
    display: list-item;
    }*/

.tab-accordian-container .ms-webpart-chrome-title {
    display: none;
}

@media all and (min-width: 1200px) {
    .tab-layout .tabbed-content .tabs {
        display: block;
    }

        .tab-layout .tabbed-content .tabs li {
            display: inline-block;
            min-width: 10em;
            margin-right: 0.5em;
            text-align: center;
            display: inline-block;
            min-width: 10em;
            margin-right: 0.5em;
            text-align: center;
            font-family: Arial;
            font-style: normal;
            font-weight: bold;
            font-size: 27px;
            line-height: 40px;
            letter-spacing: -0.5px;
            color: #353C42;
            height: 3em;
        }

            .tab-layout .tabbed-content .tabs li a {
                display: block;
                min-width: 10em;
                padding: 20px;
                transition: all 0.2s cubic-bezier(0.5, 0.3, 0.47, 0.81);
            }

    .tab-layout .tabbed-content .item {
        min-height: 0;
    }

        .tab-layout .tabbed-content .item::before {
            display: none;
        }

    .tab-layout .tabbed-content.tabs-side .tabs {
        width: 150px;
        float: left;
    }

        .tab-layout .tabbed-content.tabs-side .tabs li {
            display: block;
        }

    .tab-layout .tabbed-content.tabs-side .item {
        margin-left: 150px;
    }
}