@import url("../../graphics/graphics.css");

.stdlink,
.stdlink a {
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
}

    .stdlink:hover,
    .stdlink a:hover {
        text-decoration: none;
    }

a {
    /*font-size: medium;*/
    color: var(--inline-link-color);
    text-decoration: none;
    background-color: var(--inline-link-bg-color);
}

a:hover {
    text-decoration: underline;
    color: var(--inline-link-hover-color);
    background-color: var(--inline-link-bg-hover-color);
}

/* set the font awesome colours when it's on a listhedaer
    the 900 is a solid, if it's less, it's the regular version
    font size large is used else it's a small icon.
*/
.listheader .fa-regular,
.listheader .fa-solid {
    color: var(--list-header-icons-colour);
    font-weight: 900 !important;
    font-size: large;
}

.listheader .fa-regular:hover,
.listheader .fa-solid:hover {
    color: var(--list-header-icons-hover-colour);
    text-decoration: none;
}

a.hlink,
a.listLinkRow,
a.listLinkAltRow {
    background-color: var(--link-bg-color);
    display: inline-block;
    cursor: pointer;
    color: var(--link-color);
    font-size: 0.85em;
    font-weight: normal;
    padding: 8px 20px;
    text-decoration: none;
    text-align: center;
    border-radius: 4px;
    margin-left: 10px;
    transition-duration: .3s;
    position: relative;
}

a.hlink {
    padding-left: 36px;
}

a.hlink .iconButton  {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 8px;
    font-size: 18px;
    color: var(--link-color);
}

a.hlink:hover .iconButton {
    color: var(--link-hover-color);
}

a.tabBodyLink {
    margin-left: 0;
    padding-left: 20px;
}

a.hlink:hover,
a.listLinkRow:hover,
a.listLinkAltRow:hover {
    background-color: var(--link-bg-hover-color);
    color: var(--link-hover-color);
}

a.hlink[disabled] {
    opacity: 0.3;
}


a.SubmitButton {
    background-color: var(--SubmitButton-bg-color);
}

a.SubmitButton:hover {
    background-color: var(--SubmitButton-bg-hover-color);
}

a.listLinkSelectedRow {
    background-color: var(--listLinkSelectedRow-bg-color);
    border: var(--listLinkSelectedRow-border);
    display: inline-block;
    cursor: pointer;
    color: var(--listLinkSelectedRow-color);
    font-size: medium;
    font-weight: bold;
    padding: 2px 8px;
    text-decoration: none;
    text-shadow: var(--listLinkSelectedRow-text-shadow);
}

a.listLinkSelectedRow:hover {
    background-color: var(--listLinkSelectedRow-bg-hover-color);
}

th.listheader a,
tr.listheader a {
    background-color: var(--list-header-background);
    color: var(--list-header-foreground);	
    text-decoration: underline;
    font-size: medium;
    text-decoration: none;
    position: relative;
    top: 1px;
    font-weight: normal;
}

/* end link style for list screens */

a.ToolTip {
    font-size: medium;
    color: var(--link-ToolTip-color);
    text-align: left;
    text-decoration: none;
}

a.ToolTip:hover {
    text-decoration: none;
}

.ActionCell {
    /*width: 60px;*/
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
}

.ActionButtons {
    min-width: 80px;
    opacity: 0.8;
    /*padding-left: 15px;*/
    /*width: 80px;*/
    display: flex;
    flex-direction: row;
}

.ActionButtons div {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}

.ActionButtons input {
    margin: 7px 0;
}

/*.listrow:hover>.ActionCell>.ActionButtons,
.listaltrow:hover>.ActionCell>.ActionButtons {
    opacity: 0.8;
}*/

/*.listrow:hover > .ActionCell > .ActionButtons,

.ListIcon {
    background: none;
    border: none;
    padding: 0;
    margin: 0;*/ /* Remove any default margins */
    /*cursor: pointer;
    outline: none;*/ /* Remove focus outline */
    /*display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    width: 16px;
    color: var(--list-icons);
}
.ListIcon:hover {
    color: var(--list-icons-hover);
}*/

/* IconBtn is a button with an icon to the left
   IconPic is a clickable icon which has a hover
   IconImg is simply an image that is static
*/

.IAWButton {
    background: none;
    border: none;
    padding: 0;
    margin: 0; /* Remove any default margins */
    cursor: pointer;
    outline: none; /* Remove focus outline */
    display: inline-flex; /* Align content centrally */
    align-items: center;
    justify-content: center;
    height: auto;
    width: auto;
    color: var(--image-characters-color);
}
.IAWButton:hover {
    color: var(--image-characters-hover-color);
}

.IAWButton i {
    font-size: 16px;
    line-height: 1;
}

.IconBtn,
.IconPic,
IconImg {
    padding: 0px;
    margin: 0px;
    vertical-align: middle;
    display: inline-block;
    mask-repeat: no-repeat;
}

.IconBtn {
    background-position: 8px 0.6em;
    white-space: nowrap;
}

.IconPic,
.IconImg {
    width: 16px;
    height: 16px;
    background-color: var(--image-characters-color);
}

    .IconPic:hover {
    background-color: var(--image-characters-hover-color);
    }

/* + */
.hlink.IconPic,
.listheader .IconPic {
    background-color: var(--list-header-icons-colour);
}

.hlink.IconPic:hover,
.listheader .IconPic:hover {
    background-color: var(--list-header-icons-hover-colour);
}

.BtnNext {
    background-image: var(--BtnNext-bg-image);
}

.BtnBack {
    background-image: var(--BtnBack-bg-image);
}

.BtnSearch {
    background-image: var(--BtnSearch-bg-image);
}

.content-button {
    color: var(--text-color);
}
.content-button:hover {
    text-decoration: none;
}