/*======================================================*/
/* O f f i c e :   Used for small menue tabs  
========================================================*/
:root {
    --smallTabHeight: 28px;
    --tab-border-radius:12px;
    --content-padding-LR:7px;
}

iframe {
    /* currently not in use*/
    border:0px solid blue;
    margin-top:18px;
}

div.smallMenuTab {
    /* this is the container of all the tab headers on the Word Add-in page */
    grid-template-columns: repeat(3, 33.3%);
    padding-left:   var(--tab-border-radius);
    padding-right:  var(--tab-border-radius);
    margin-bottom: 0px;
    display: grid;
    grid-template-rows: calc(var(--smallTabHeight) - 1px);
    width:  100%;
}

div.reportsTab {
    /* this is the container of all the tab headers in the reporting page (IPAccess.cshtml) */
    grid-template-columns: repeat(5, 20%)!important;
    max-width: 1200px;
}


div.wordTabContent {
    /* this is the container of all tab contents */
    background-color: #fff;
    border-left:    2px solid #ccc;
    border-right:   2px solid #bbb;
    border-top:     1px solid #ddd;
    border-bottom:  2px solid #aaa;
    margin:         0;
    padding-top:    12px;
    padding-bottom: 10px;
    padding-left:   calc(var(--tab-border-radius) - 1px);
    padding-right:  calc(var(--tab-border-radius) + 1px);
    border-radius:  12px;
}

.clsTdContent {
    background-color: #fff;
    border-left: 2px solid #ccc;
    border-right: 2px solid #ccc;
    border-top: 1px solid #ddd;
    border-bottom: 2px solid #ccc;
    margin-top:0;
    padding: 10px 0 0 5px;
    border-radius:12px;
}

.smallMenuTab > div {
    border-top-left-radius: var(--tab-border-radius);
    border-top-right-radius:var(--tab-border-radius);
    border-left:2px solid #eee;
    border-right:2px solid #999;
    border-top:2px solid #eee;
    font-family: var(--standardFont);
    font-size:0.85rem;
    margin:0 1px 0 1px;
    padding:5px 0 0 0;
    position:relative; top:1px;
    text-align:center;
    vertical-align:middle;
    width:100%;
    max-width:200px;
}


.smallMenuTab > div.backRow {
    height: calc(var(--smallTabHeight) + 0px) !important;
    background: rgb(200,200,200) !important;
    top:var(--tab-border-radius);
}

.smallMenuTab > td.inactiveMenu, .smallMenuTab > div.inactiveMenu {
    /* active and inactive menues are controlled by javascript */
    background: rgba(227,227,227,1.0);
    border-bottom: 0px solid #999 !important;
}

.smallMenuTab > td.activeMenu, .smallMenuTab > div.activeMenu {
    background: rgba(255,255,255,1.0) !important;
    border-bottom: 0px solid white !important;
}

.smallMenuTab > td.inactiveMenu:hover, .smallMenuTab > div.inactiveMenu:hover {
    background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(200,200,200,1)) !important;
    cursor: pointer;
}