/* ****************************************** */
/* TOOLBAR                                    */
/* ****************************************** */

    :root {
        --toolbar-back              : #668;
        --toolbar-highlight         : #CCE;
        --toolbar-shadow            : #224;
        --toolbar-contrast          : #88b;
        --toolbar-selected          : #FFFFDD;
        --toolbar-text              : var(--main-light-color);
        --toolbar-button            : #EEF;
        --toolbar-button-text       : var(--main-text-color);
        --toolbar-button-hover-text : black;
        --toolbar-focus             : #FFFFCC;
        --toolbar-hover             : #8888FF;
    }


     .toolbar {
        background      : var(--toolbar-back);
        border-top      : 2px solid var(--toolbar-highlight);
        border-left     : 2px solid var(--toolbar-highlight);
        border-right    : 2px solid var(--toolbar-shadow);
        border-bottom   : 2px solid var(--toolbar-shadow);
        margin-top      : 4px;
        /* justify-content : center; */
     }
     
     .toolbar.plain, .panel .toolbar {
        background      : none;
        border          : none;
        margin-top      : none;
     }

     .centered .toolbar {
        justify-content: center;
     }

     .no_auth .toolbar {
        margin-top      : 0px;
        border          : 0px;
     }

     .toolbar .tool {
        display         : flex;
        padding         : 3px 6px;
        margin          : 3px 3px;
        background      : var(--toolbar-contrast);
        border-radius   : 4px;
        font-size       : 12px;
        line-height     : 18px;
        align-items     : stretch;
     }
     
     .toolbar.plain .tool {
        padding          : 0px;
        background       : none;
     }
     .toolbar.separated .tool:nth-child(n+2)::before {
        content: '|';
        display: block;
        color: black;
        padding: 0px 5px 0px 0px;
     }

     .ie .toolbar .tool {
        zoom            : 1;
        *display        : inline;
     }

     .tool form, form .tool {
        font-size       : 12px;
        line-height     : 18px;
        display         : flex;
        align-items     : stretch;
     }

     .tool_activity {
        color           : var(--toolbar-text);
        display         : inline;
        font-weight     : bold;
     }

     .tool_pet_name, .tool_item_name {
        color           : var(--toolbar-text);
        display         : inline;
        font-weight     : bold;
        font-size       : 18px;
     }

     .tool_item_name {
        vertical-align  : middle;
        display         : inline-block;
        height          : 32px;
        line-height     : 32px;
        margin-left     : 6px;
     }

     .tool_item_name img {
        vertical-align  : -5px;
     }

     #item_toolbar_holder {
        margin-left     : 76px;
        position        : relative;
     }
     #item_toolbar_holder .tool_item_name {
        position        : absolute;
        left            : -76px;
     }

     .tool_pet_name a, .tool a {
        color           : var(--toolbar-text);
        text-decoration : none;
     }
     .tool a.button {
        color           : var(--toolbar-text);
     }

     .tool_pet_name a:hover {
        color           : var(--toolbar-hover);
        text-decoration : none;
     }

     .toolbar.compact input, .container_toolbar input[type=text] {
        border          : 1px solid var(--toolbar-back);
        background      : var(--toolbar-selected);
        padding         : 2px;
        margin          : 0px;
        height          : 100%;
        box-sizing      : border-box;
        -webkit-appearance: none;
     }
     .panel .toolbar.compact input + * {
        margin-left: 2px;
     }

     .toolbar.compact input:focus {
         background     : var(--toolbar-focus);
     }

     /*.chrome .toolbar input {
        padding         : 3px 6px;
     }*/

     .toolbar.compact select {
        border          : 1px solid var(--toolbar-back);
        /* background      : var(--toolbar-button);
        color           : var(--toolbar-button-text); */
        padding-bottom  : 1px;
        margin          : 0px;
        height          : 100%;
        /* -webkit-appearance: none; */
     }

     .toolbar.compact input[type=submit], .toolbar.compact .button, .toolbar.compact .control {
        border          : 1px solid var(--toolbar-back);
        background      : var(--toolbar-button);
        color           : var(--toolbar-button-text);
        padding         : 0px 4px 0px 4px;
        /* height          : 100%; */
     }

     /*.chrome .toolbar input[type=submit] {
        padding         : 2px 6px;
     }*/

     .toolbar.compact input[type=submit]:hover {
        background      : var(--toolbar-selected);
        color           : var(--toolbar-button-hover-text);
     }

     a.toolbar_help_link_35, a.toolbar_help_link_35:hover {
        width           : 35px;
        height          : 35px;
        display         : inline-block;
        color           : transparent;
        background      : url('/images/icons/bbking_icon.35.png');
        padding         : 0px;
        margin          : 0px;
        text-align      : middle;
        line-height     : 35px;
     }

     a.toolbar_help_link_16, a.toolbar_help_link_16:hover {
        width           : 16px;
        height          : 16px;
        display         : inline-block;
        color           : transparent;
        background      : url('/images/icons/bbking_icon2.16.png');
        padding         : 0px;
        margin          : 0px;
        text-align      : middle;
        line-height     : 16px;
     }

     a.toolbar_help_link_20, a.toolbar_help_link_20:hover {
        width           : 20px;
        height          : 20px;
        display         : inline-block;
        color           : transparent;
        background      : url('/images/icons/bbking_icon.20.png');
        padding         : 0px;
        margin          : 0px;
        text-align      : middle;
        line-height     : 20px;
     }


    @media screen and (max-width: 400px) {

    	.tool input[type="text"], textarea {
    		width		: auto;
    	}

    	.container_toolbar .tool {
    		display		: block;
    		padding		: 0px;
    		border		: none;
    		margin-bottom	: 4px;
    	}

    }