/* See license.txt for terms of usage */

.panelNode-cookies {
    overflow-x: hidden;
}

.cookieTable {
    width: 100%;
}

/************************************************************************************************/
/* Support for console */

.cookieEvent {
	position: relative;
	width: 100%;
}

.cookieEvent .cookieDomainLabel {
    position: absolute;
    top: 0;
    right: 0;
    font-family: Lucida Grande, sans-serif;
    font-weight: bold;
    color: #0000FF;
}

.logRow-cookie,
.logRow-cookiesCleared,
.logRow-cookiesRejected,
.logRow-cookie:hover {
    background-image: url(chrome://firebug/skin/cookies/cookie.svg);
    background-repeat: no-repeat;
    background-position: 3px 2px;
}

.logRow-cookiesRejected .cookieRejectedList {
    font-weight: bold;
}

.logRow-cookiesRejected .cookieList {
    color: #808080;
}

.logRow-cookiesRejected {
    border-bottom: 1px solid #D7D7D7;
}

.logRow-cookiesRejected .cookieCol,
.logRow-cookiesRejected > .logRow {
    border-bottom: 0;
    font-weight: normal;
    padding-top: 0px;
}

.logRow-cookiesRejected > .logRow:hover {
    text-decoration: none;
}

.logRow-cookiesRejected > .logGroupBody {
    margin-top: 3px;
}

.logRow-cookiesRejected > .cookieEvent {
    text-decoration: none;
}

.logRow-cookiesCleared > div {
    padding: 1px 0 2px 0 !important;
}

.logRow-cookie > div > .logContent {
    padding-left: 22px;
}

/* Container for document.cookie log within the Console panel */
.logRow-documentCookie {
    padding: 0;
}

/************************************************************************************************/
/* Console filtering */

.panelNode.hideType-cookies .logRow-cookie {
    display: none !important;
}

/************************************************************************************************/
/* Header for cookie list */

.cookieHeaderRow {
    height: 16px;
}

.cookieHeaderCell {
    cursor: pointer;
    -moz-user-select: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding: 0 !important;
    font-weight: bold;
    background: linear-gradient(
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.05)),
        radial-gradient(1px 60% at right,
            rgba(0, 0, 0, 0.8) 0%,
            transparent 80%) repeat-x #C8D2DC;
    white-space: nowrap;
}

.cookieHeaderRow > .cookieHeaderCell:first-child > .cookieHeaderCellBox {
    padding: 2px 14px 2px 18px;
}

.cookieHeaderCellBox {
    padding: 2px 14px 2px 10px;
}

.cookieHeaderSorted {
    background-color: #AAC3DC;
}

.cookieHeaderSorted > .cookieHeaderCellBox {
    background: url(chrome://firebug/skin/arrowDown.svg) no-repeat calc(100% - 4px);
}

.cookieHeaderSorted.sortedAscending > .cookieHeaderCellBox {
    background-image: url(chrome://firebug/skin/arrowUp.svg);
}

.cookieHeaderCell:hover:active {
    background-image: linear-gradient(
            rgba(0, 0, 0, 0.1),
            transparent),
        radial-gradient(1px 60% at right,
            rgba(0, 0, 0, 0.8) 0%,
            transparent 80%);
}

/************************************************************************************************/
/* Column visibility */

/*
 * Every row is for one column, the first selector hides column in the header
 * (e.g. id=colName) and the second selector in all rows (e.g. class=cookieNameCol)
 *
 * If a column is hidden, it's presented in a 'hiddenCols' attribute of the .cookieTable
 * element. Value of the attribute is a whitespace separated list of columns IDs.
 */
.cookieTable[hiddenCols~=colName] #colName,
.cookieTable[hiddenCols~=colName] .cookieNameCol,
.cookieTable[hiddenCols~=colValue] #colValue,
.cookieTable[hiddenCols~=colValue] .cookieValueCol,
.cookieTable[hiddenCols~=colRawValue] #colRawValue,
.cookieTable[hiddenCols~=colRawValue] .cookieRawValueCol,
.cookieTable[hiddenCols~=colDomain] #colDomain,
.cookieTable[hiddenCols~=colDomain] .cookieDomainCol,
.cookieTable[hiddenCols~=colSize] #colSize,
.cookieTable[hiddenCols~=colSize] .cookieSizeCol,
.cookieTable[hiddenCols~=colRawSize] #colRawSize,
.cookieTable[hiddenCols~=colRawSize] .cookieRawSizeCol,
.cookieTable[hiddenCols~=colPath] #colPath,
.cookieTable[hiddenCols~=colPath] .cookiePathCol,
.cookieTable[hiddenCols~=colExpires] #colExpires,
.cookieTable[hiddenCols~=colExpires] .cookieExpiresCol,
.cookieTable[hiddenCols~=colMaxAge] #colMaxAge,
.cookieTable[hiddenCols~=colMaxAge] .cookieMaxAgeCol,
.cookieTable[hiddenCols~=colHttpOnly] #colHttpOnly,
.cookieTable[hiddenCols~=colHttpOnly] .cookieHttpOnlyCol,
.cookieTable[hiddenCols~=colSecurity] #colSecurity,
.cookieTable[hiddenCols~=colSecurity] .cookieSecurityCol,
.cookieTable[hiddenCols~=colStatus] #colStatus,
.cookieTable[hiddenCols~=colStatus] .cookieStatusCol {
    display: none;
}

/************************************************************************************************/
/* Breakpoints */

.panelNode-cookies .cookieRowHeader {
    display: block;
}

/* This is the breakpoint column */
.cookieDebugCol {
    border-right: 1px solid #CCCCCC;
    background-color: #EEEEEE;
    cursor: pointer;
}

.cookieDebugCol .sourceLine {
    border-right: none;
}

/* When mouse is hovering over a cookie row, the breakpoint/debug column is highlighted. */
.cookieRow:hover > .cookieDebugCol,
.cookieRow:hover > .cookieDebugCol > .cookieRowHeader {
    background-color: #F6F6F6;
}

.cookieRowHeader {
    position: relative;
    height: 15px;
    margin-right: 0 !important;
}

/* Display breakpoint disc */
.cookieRow .cookieRowHeader {
    background-position: 5px 3px;
}

.cookieRow[breakpoint="true"] .cookieRowHeader {
    background-image: url(chrome://firebug/skin/breakpoint.svg);
}

.cookieRow[breakpoint="true"][disabledBreakpoint="true"] .cookieRowHeader {
    background-image: none;
}

.cookieRow[breakpoint="true"][disabledBreakpoint="true"] .cookieRowHeader::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 5px;
    width: 12px;
    height: 12px;
    background: url(chrome://firebug/skin/breakpoint.svg) no-repeat;
    opacity: 0.5;
}

#cookieBreakpointBar {
    max-width: 38px;
}

#colName > .cookieHeaderCellBox {
    border-left: 0px;
}

/************************************************************************************************/
/* Break on Next*/

/* panel badges */
#fbBreakOnNextButton[panelName="cookies"] #fbBreakOnImageCookies {
    visibility: visible;
    padding-right: 2px;
}

/************************************************************************************************/

.cookieNameLabel:hover {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
}

/* Session cookies */
.panelNode-cookies .sessionCookie > .cookieExpiresCol {
    color: green;
}

/* Rejected cookies are red in the Cookies tab */
.panelNode-cookies .rejectedCookie .cookieLabel {
    color: red !important;
}

/************************************************************************************************/

.cookieRow {
    background: white;
}

.cookieRow:hover {
    background: #EFEFEF;
}

.cookieCol {
    padding: 0;
    vertical-align: top;
    border-bottom: 1px solid #EFEFEF;
    white-space: nowrap;
}

.cookieLabel {
}

/* Support for search box */
.panelNode.searching .cookieRow {
    display: none;
}

.cookieRow.matched {
    display: table-row !important;
}

/************************************************************************************************/

.cookieNameLabel {
    -moz-box-sizing: padding-box;
    overflow: hidden;
    padding-top: 1px;
    font-weight: bold;
    min-width: 70px;
    margin-left: 5px;
}

.cookieNameCol > .cookieNameLabel {
    padding-left: 18px;
}

.cookieDomainLabel,
.cookieSizeLabel,
.cookiePathLabel,
.cookieExpiresLabel,
.cookieMaxAgeLabel,
.cookieValueLabel {
    padding: 1px 0 2px 0 !important;
    /*width: 100%; See issue 63*/
}

.cookieDomainLabel {
    color: rgb(0, 0, 255);
}

.cookieDomainLabel:hover {
    text-decoration:underline;
    cursor:pointer;
}

.cookieValueLabel {
    color: rgb(128, 128, 128);
}

/* This style makes sure that only portion of text is visible
 depending on current size (width) of the parent column */
.cookiePathLabel,
.cookieValueLabel {
    overflow: hidden;
    display: -moz-box;
}

/* This style is to avoid warning: XUL box for div element contained
 an inline span child, forcing all its children to be wrapped in a block,
 which is caused by the previous style.

 Related to following message:
 nsIScriptError: XUL box for div element contained an inline #text child,
 forcing all its children to be wrapped in a block. [JavaScript Warning:
 "XUL box for div element contained an inline #text child, forcing all
 its children to be wrapped in a block."
 {file: "chrome://firebug/content/panel.html" line: 0}]
 */
.cookiePathLabel span,
.cookieValueLabel span {
    display: inline-block;
}

.cookieDomainCol,
.cookieSizeCol,
.cookiePathCol,
.cookieExpiresCol,
.cookieMaxAgeCol,
.cookieValueCol,
.cookieSecurityCol,
.cookieStatusCol,
.cookieHttpOnlyCol {
    padding-left: 10px;
}

.cookieHttpOnlyCol {
    color: green;
}

.cookieSizeCol {
    text-align :right;
    padding-right: 10px;
}

/************************************************************************************************/

.cookieInfoCol {
    border-top: 1px solid #EEEEEE;
    background: #FFFFFF linear-gradient(rgba(0, 0, 0, 0.1), transparent 33px) repeat-x;
}

.cookieInfoBody {
    margin: 10px 0 4px 10px;
}

.cookieInfoTabs {
    position: relative;
    padding-left: 14px;
}

.cookieInfoTab {
    position: relative;
    top: -3px;
    margin-top: 10px;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-bottom: none;
    font-weight: bold;
    color: #565656;
}

.cookieInfoTab:hover {
    cursor: pointer;
}

.cookieInfoTab[selected="true"] {
    cursor: default !important;
    border-color: #D7D7D7;
    border-radius: 4px 4px 0 0;
    background-color: #FFFFFF;
}

.cookieInfoText {
    display: none;
    margin: 0;
    border: 1px solid #D7D7D7;
    border-right: none;
    padding: 8px;
    background-color: #FFFFFF;
    font-family: monospace;
    overflow-x: auto;
}

.cookieInfoText[selected="true"] {
    display: block;
}

/************************************************************************************************/

/* Support for Net panel */
.netInfoCookiesText {
    padding-top: 0;
    font-family: inherit;
}

.netInfoCookies {
    margin: 5px 0;
    color: inherit;
}

.netInfoCookies > .cookieTable {
    border-left: solid 1px rgb(239, 239, 239);
}

.netInfoCookies .cookieInfoRow:last-child > .cookieInfoCol {
    border-bottom: 1px solid #EEEEEE;
}

.netInfoCookies .deletedCookie > .cookieExpiresCol,
.netInfoCookies .deletedCookie > .cookieMaxAgeCol {
    color: red;
}

.cookieInfoRow .cookieRowHeader {
    display: table-cell;
}

/************************************************************************************************/

/* Hide breakpoint column + proper header field (ie the cookieBreakpointBar) within the net
   panel info body */
.netInfoCookiesText .cookieInfoRow .cookieRowHeader,
.netInfoCookiesText #cookieBreakpointBar,
.netInfoCookiesText .cookieDebugCol {
    display: none;
}

/* Hide breakpoint column + proper header field (ie the cookieBreakpointBar) within the
   console panel (when logging document.cookie) */
.documentCookieBody .cookieInfoRow .cookieRowHeader,
.documentCookieBody #cookieBreakpointBar,
.documentCookieBody .cookieDebugCol {
    display: none;
}

/************************************************************************************************/

.disabledPanelBox .descImage-cookies {
    background-image: url(chrome://firebug/skin/cookies/activation-menu-cookies.svg);
}

/************************************************************************************************/

/* Firefox folds max-age into expires internally, so for the Cookies panel we
 * hide the corresponding rows & header.
 * N.B.: This is not, in fact, redundant: there are several elements with the
 * id "colMaxAge"... */
.panelNode-cookies #colMaxAge,
.panelNode-cookies .cookieMaxAgeCol {
    display: none;
}
