﻿/* ICONS for Ironbolt
 */



i.icon-email::after, a.icon-email::before {
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    content: "\f0e0";
}

i.icon-email-verified-yes::after, i.icon-email-verified-True::after {
    color: green;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    content: "\f164";
}

i.icon-email-verified-no::after, i.icon-email-verified-False::after {
    color: red;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    content: "\f165";
}

/* Verified Email Icon for Public site.*/
i.icon-email-public-True::after {
    color: green;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f00c";
}

i.icon-email-public-False::after {
    color: red;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f06a";
}


i.icon-attention-True::after {
    color: red;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f256";
}

i.icon-warning-True::after {
    color: orange;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f071";
}

i.ibti-icon-goodToGo-True::after { /* Use to highlight something which requires attention  */
    color: green;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f138";
}


i.ibti-icon-teamMember-True::after {
    color: green;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f4fc";
}

i.ibti-icon-teamMember-False::after {
    color: red;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f4fa";
}

i.ibti-icon-highlight-True::after {
    color: red;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f071";
}

i.ibti-icon-highlight-False::after {
    color: gray;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f056";
}

i.ibti-icon-locked-True::after {
    color: black;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f023";
}

i.ibti-icon-noView-True::after {
    color: black;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    content: "\f070";
}





/* ********************************************************************************* */
/* Icons used for Workflow                                                           */

.ibti-icon-workflow-A, .ibti-icon-workflow-V { /* Active or Good */
    border: 1px solid darkgreen;
    width: 60px;
    background-color: green;
    color: white;
    padding: 0px;
    margin: 1px auto;
    font-size: 7pt;
    font-style: normal;
    font-weight: 400;
    border-radius: 2px;
    text-align: center;
}

    .ibti-icon-workflow-A::before, .ibti-icon-workflow-V::before {
        font-style: normal;
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f164";
        margin-right: 4px;
    }

.ibti-icon-workflow-R { /* In Review or Submitted */
    border: 1px solid black;
    width: 60px;
    background-color: orange;
    color: black;
    padding: 0px;
    margin: 1px auto;
    font-size: 7pt;
    font-style: normal;
    font-weight: 400;
    border-radius: 2px;
    text-align: center;
}

    .ibti-icon-workflow-R::before {
        font-style: normal;
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f059";
        margin-right: 4px;
    }

.ibti-icon-workflow-D, .ibti-icon-workflow-B { /* Draft or New or Returned */
    border: 1px solid navy;
    width: 60px;
    background-color: lightblue;
    color: black;
    padding: 0px;
    margin: 1px auto;
    font-size: 7pt;
    font-style: normal;
    font-weight: 400;
    border-radius: 2px;
    text-align: center;
}

    .ibti-icon-workflow-D::before, .ibti-icon-workflow-B::before {
        font-style: normal;
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f044";
        margin-right: 4px;
    }

.ibti-icon-workflow-E { /* Expired */
    border: 1px solid black;
    width: 60px;
    background-color: red;
    color: white;
    padding: 0px;
    margin: 1px auto;
    font-size: 7pt;
    font-style: normal;
    font-weight: 400;
    border-radius: 2px;
    text-align: center;
}

    .ibti-icon-workflow-E::before {
        font-style: normal;
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f165";
        margin-right: 4px;
    }

.ibti-icon-workflow-F { /* Expiring */
    border: 1px solid black;
    width: 60px;
    background-color: orangered;
    color: white;
    padding: 0px;
    margin: 1px auto;
    font-size: 7pt;
    font-style: normal;
    font-weight: 400;
    border-radius: 2px;
    text-align: center;
}

    .ibti-icon-workflow-F::before {
        font-style: normal;
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f165";
        margin-right: 4px;
    }

.ibti-icon-workflow-X { /* Cancelled */
    border: 1px solid gray;
    width: 60px;
    background-color: lightgray;
    color: black;
    padding: 0px;
    margin: 1px auto;
    font-size: 7pt;
    font-style: normal;
    font-weight: 400;
    border-radius: 2px;
    text-align: center;
}

    .ibti-icon-workflow-X::before {
        font-style: normal;
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f05e";
        margin-right: 4px;
    }


/* ********************************************************************************* */
/* Icons used for Action Test Results                                                */

i.test-result-OK::after {
    color: green;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f058";
}

i.test-result-ATT::after {
    color: red;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f06a";
}

i.test-result-OTH::after {
    color: darkorange;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f192";
}

i.test-result-TBC::after {
    color: blue;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f28b";
}

i.test-result-NO::after {
    color: red;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f057";
}

i.test-result-NA::after {
    color: gray;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f056";
}

/* ********************************************************************************* */
/* Icons used for Timecards                                      */

i.ibti-icon-timecard-X::after, i.ibti-icon-timecard-P::after { /* Timecards Excluded or Pending  */
    color: gray;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f05e";
}

i.ibti-icon-timecard-N::after { /* Timecards New or Open,   class="far fa-dot-circle"  */
    color: gray;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    content: "\f192";
}

i.ibti-icon-timecard-S::after { /* Timecards Submitted,  class="fas fa-dot-circle"  */
    color: orange;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f192";
}

i.ibti-icon-timecard-J::after { /* Timecards Part Approval,  class="fas fa-dot-circle"  */
    color: purple;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f192";
}

i.ibti-icon-timecard-A::after { /*  class="fas fa-check-circle"  */
    color: green;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f058";
}

i.ibti-icon-timecard-L::after { /*   Timecards Locked class="fas fa-stop-circle"  */
    color: red;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f28d";
}

i.ibti-icon-timecard-C::after { /*   Timecards Locked class="fas fa-circle"  */
    color: blue;
    font-style: normal;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f111";
}


/* ********************************************************************************* 
    
   ********************************************************************************* */

a.ibt-link-about::before {
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 400;
    color: navy;
    content: "\f05a";
    padding-left: 8px;
    padding-right: 8px;
    vertical-align: top;
}

a.ibt-link-about:hover::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f05a";
    color: darkorange;
    cursor: pointer;
}



/*  ********************************************************************************* 
    Icon Only
        use for Headings, and prefixes.
        - nothing happens with hover.
    ********************************************************************************* */


.ibti-only::before {
    font: var(--fa-font-regular);
    content: "\f78a";
    width: 15px;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}



/* ********************************************************************************* 

    The following links exists:

    wsk-actionItem      Designed for Buttons, Icon after the Text.


   ********************************************************************************* */
/*


/* action items, smaller icons */

.wsk-actionItem {
    color: black;
    text-decoration: none;
    font-size: 9pt;
    border: none;
    background-color: transparent;
    padding: 2px;
}

    .wsk-actionItem::after {
        font-size: 10pt;
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f0b2";
        vertical-align: bottom;
        padding-left: 5px;
    }

    .wsk-actionItem:hover {
        color: darkorange;
        text-decoration: none;
    }


/* ********************************************************************************* 
   IRONBOLT Headings

   ********************************************************************************* */

h1[class*="ibti-"]::before {
    font: var(--fa-font-regular);
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    padding-right: 5px;
}

h2[class*="ibti-"]::before {
    font: var(--fa-font-regular);
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    padding-right: 5px;
}

h3[class*="ibti-"]::before {
    font: var(--fa-font-regular);
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    padding-right: 5px;
}

h4[class*="ibti-"]::before {
    font: var(--fa-font-regular);
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    padding-right: 5px;
}

h5[class*="ibti-"]::before {
    font: var(--fa-font-regular);
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    padding-right: 5px;
}

h6[class*="ibti-"]::before {
    font: var(--fa-font-regular);
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    padding-right: 5px;
}

/* ********************************************************************************* 
   IRONBOLT Page - will work with ibt-m-link and change the icon associated with them

    ibti-page-MyAccount    

   ********************************************************************************* */

.ibti-page-Home::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f015";
    vertical-align: top;
    padding-right: 5px;
}

.ibti-page-Logout::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f2f5";
    vertical-align: top;
    padding-right: 5px;
}

.ibti-page-MyAccount::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    content: "\f007";
    vertical-align: top;
    padding-right: 5px;
}

.ibti-page-MyJob::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    content: "\f82c";
    vertical-align: top;
    padding-right: 5px;
}

.ibti-page-MyLocation::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    content: "\f54f";
    vertical-align: top;
    padding-right: 5px;
}

.ibti-page-AMS-Portal::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    content: "\f70c";
    vertical-align: top;
    padding-right: 5px;
}

/* ********************************************************************************* 
   People Icons - will work with ibt-m-link and change the icon associated with them

    ibt-i-per-athlete    ... Athlete

   ********************************************************************************* 


[class*="ibt-i-per-"]::before {
    font: var(--fa-font-regular);
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    padding-right: 5px;
}


.ibt-i-per-orgPerson::before {
    font-weight: 900;
    content: "\f007";
}

.ibt-i-per-orgPeople::before {
    font-weight: 900;
    content: "\e537";
}

.ibt-i-per-staff::before {
    font-weight: 900;
    content: "\f508";
}

.ibt-i-per-member::before {
    font-weight: 400;
    content: "\f2c2";
}

.ibt-i-per-athlete::before {
    font-weight: 400;
    content: "\f504"; /*  user-ninja 
}

.ibt-i-per-subcontractor::before {
    font-weight: 400;
    content: "\f82c"; /*  user-helmet-safety 
}

.ibt-i-per-never::before {
    font: var(--fa-font-light);
    content: "\f007";
    color: gray;
}

.ibt-i-per-PR-True::before {
    font-weight: 900;
    content: "\f007";
    color: green;
}

.ibt-i-per-PR-False::before {
    font: var(--fa-font-light);
    content: "\f007";
    color: gray;
}

.ibt-i-per-EM-True::before {
    font-weight: 900;
    content: "\f508";
    color: green;
}

.ibt-i-per-EM-False::before {
    font: var(--fa-font-light);
    content: "\f508";
    color: gray;
}

.ibt-i-per-MB-True::before {
    font-weight: 600;
    content: "\f2c2";
    color: green;
}

.ibt-i-per-MB-False::before {
    font-family: "Font Awesome Kit";
    content: "\e002";
    color: gray;
}

.ibt-i-per-AT-True::before {
    font-weight: 400;
    content: "\f504";
    color: green;
}

.ibt-i-per-AT-False::before {
    font: var(--fa-font-light);
    content: "\f504";
    color: gray;
}

.ibt-i-per-SC-True::before {
    font-weight: 900;
    content: "\f82c";
    color: green;
}

.ibt-i-per-SC-False::before {
    font: var(--fa-font-light);
    content: "\f82c";
    color: gray;
}
    */


/* ------------------------------------------------------------ */
/*
       Use ibt-i-act-iconOnly to only show 
                                                                    */
/* ------------------------------------------------------------ */
.ibt-i-act-iconOnly::after {
    font-family: "Font Awesome 6 Pro";
    vertical-align: top;
    padding-left: 5px;
}

.wsk-actionItem-user-add::after {
    font-weight: 900;
    content: "\f234";
}

.wsk-actionItem-edit::after {
    font-weight: 400;
    content: "\f044";
}

.wsk-actionItem-copy::after {
    font-weight: 400;
    content: "\f0c5";
}

.wsk-actionItem-delete::after {
    font-weight: 400;
    content: "\f2ed";
}

.wsk-actionItem-swap::after {
    font-weight: 900;
    content: "\f362";
}

.wsk-actionItem-newComment::after {
    font-weight: 400;
    content: "\f27a";
}

.wsk-actionItem-viewEmail::after {
    font-weight: 400;
    content: "\f2b6";
}

.wsk-actionItem-read::after {
    font-weight: 400;
    content: "\f06e";
}

.wsk-actionItem-unread::after {
    font-weight: 400;
    content: "\f070";
}

.wsk-actionItem-sync::after {
    font-weight: 900;
    content: "\f021";
}

.wsk-actionItem-removePerson::after {
    font-weight: 900;
    content: "\f235";
}

.wsk-actionItem-addPerson::after {
    font-weight: 900;
    content: "\f234";
}

/*  icons used for confirmations */

.ibti-icon-confirm-yes::after { /*   fas fa-check-circle   */
    font-weight: 900;
    content: "\f058";
    color: green;
}

.ibti-icon-confirm-yes:hover::after { /*   far fa-check-circle   */
    font-weight: 400;
    text-shadow: 0 0 4px green;
}

.ibti-icon-confirm-no::after { /*   fas fa-times-circle   */
    font-weight: 900;
    content: "\f057";
    color: red;
}

.ibti-icon-confirm-no:hover::after { /*   far fa-check-circle   */
    font-weight: 400;
    text-shadow: 0 0 4px red;
}

.ibti-icon-confirm-clear::after { /*   fas fa-minus-circle   */
    font-weight: 900;
    content: "\f056";
    color: grey;
}

.ibti-icon-confirm-clear:hover::after { /*   far fa-stop-circle  ....   minus cirle not available with free plan */
    font-weight: 400;
    content: "\f28d";
    color: black;
    text-shadow: 0 0 4px gray;
}





/* Buttons  */

a.ibt-goBack::before, button.ibt-goBack::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    content: "\f0a5";
    vertical-align: top;
    padding-right: 5px;
}

a.ibt-goForward::after, button.ibt-goForward::after {
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    content: "\f0a4";
    vertical-align: top;
    padding-left: 5px;
}

a.ibt-save::before, button.ibt-save::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: "\f0c7";
    vertical-align: top;
    padding-right: 5px;
}


/* ******************************************** */
/* Tags                                         */

div.ibt-tag, div.ibt-tag-labelOnly {
    border: 1px solid gray;
    border-radius: 5px;
    padding: 2px 5px 2px 5px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-right: 5px;
    background-color: papayawhip;
    color: black;
    display: inline-block;
}

    div.ibt-tag::before {
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f02b";
        vertical-align: top;
        padding-right: 5px;
    }

div.ibt-tag-green {
    background-color: green;
    color: yellow;
}

div.ibt-tag-navy {
    background-color: navy;
    color: white;
}

div.ibt-tag-red {
    background-color: red;
    color: white;
}

div.ibt-tag-blue {
    background-color: blue;
    color: orange;
}

div.ibt-tag-black {
    background-color: black;
    color: lightgray;
}

div.ibt-tag-white {
    background-color: white;
    color: darkgray;
}

/*  the following are used by the Activity Statuses */

div.ibt-tag-activity-A { /* Avaiable */
    background-color: palegreen;
    color: black;
}

div.ibt-tag-activity-X { /* Cancelled */
    background-color: red;
    color: white;
}

div.ibt-tag-activity-L, div.ibt-tag-activity-K { /* Full or Locked  */
    background-color: black;
    color: lightgray;
}

div.ibt-tag-activity-P { /* In Progress */
    background-color: navy;
    color: white;
}

div.ibt-tag-activity-C, div.ibt-tag-activity-F { /* Finished or Completed */
    background-color: gray;
    color: white;
}


/*  *******************************************************************  */
/*  Icons for Management Comments */

#IronboltAdminContainer #WskCmt-AddNew {
    color: black;
    text-decoration: none;
    font-size: 8pt;
    border: none;
    background-color: transparent;
    padding: 2px;
}

    #IronboltAdminContainer #WskCmt-AddNew::before {
        content: "New";
    }

    #IronboltAdminContainer #WskCmt-AddNew::after {
        font-size: 10pt;
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f0b2";
        vertical-align: bottom;
        padding-left: 5px;
        font-weight: 400;
        content: "\f27a";
    }

    #IronboltAdminContainer #WskCmt-AddNew:hover {
        color: darkorange;
        text-decoration: none;
    }


#ibt-OnSiteContainer #WskCmt-AddNew, #ibt-MobileContainer #WskCmt-AddNew {
    color: white;
    text-decoration: none;
    font-size: 8pt;
    border: none;
    background-color: #1b6ec2;
    border-color: #1861ac;
    padding: 2px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    text-align: center;
    vertical-align: middle;
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .25rem;
    width: 75px;
    margin-bottom: 5px;
}

    #ibt-OnSiteContainer #WskCmt-AddNew::after, #ibt-MobileContainer #WskCmt-AddNew::after {
        content: "New";
    }

    #ibt-OnSiteContainer #WskCmt-AddNew::before, #ibt-MobileContainer #WskCmt-AddNew::before {
        font-size: 10pt;
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f0b2";
        vertical-align: bottom;
        padding-right: 5px;
        font-weight: 400;
        content: "\f27a";
    }

    #ibt-OnSiteContainer #WskCmt-AddNew:hover, #ibt-MobileContainer #WskCmt-AddNew:hover {
        background-color: navy;
        border-color: navy;
    }



/* EDIT BUTTON */

#IronboltAdminContainer #WskCmt-Container button.WskCmt-edit {
    color: black;
    text-decoration: none;
    font-size: 8pt;
    border: none;
    background-color: transparent;
    padding: 2px;
}

    #IronboltAdminContainer #WskCmt-Container button.WskCmt-edit::after {
        font-size: 10pt;
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f0b2";
        vertical-align: bottom;
        padding-left: 5px;
        font-weight: 400;
        content: "\f044";
    }

    #IronboltAdminContainer #WskCmt-Container button.WskCmt-edit:hover {
        color: darkorange;
        text-decoration: none;
    }

#ibt-OnSiteContainer #WskCmt-Container button.WskCmt-edit, #ibt-MobileContainer #WskCmt-Container button.WskCmt-edit {
    color: white;
    text-decoration: none;
    font-size: 8pt;
    border: none;
    background-color: #28a745;
    border-color: #28a745;
    padding: 2px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    text-align: center;
    vertical-align: middle;
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .25rem;
    width: 75px;
    margin-bottom: 5px;
}

    #ibt-OnSiteContainer #WskCmt-Container button.WskCmt-edit::after, #ibt-MobileContainer #WskCmt-Container button.WskCmt-edit::after {
        content: "Edit";
    }

    #ibt-OnSiteContainer #WskCmt-Container button.WskCmt-edit::before, #ibt-MobileContainer #WskCmt-Container button.WskCmt-edit::before {
        font-size: 10pt;
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f0b2";
        vertical-align: bottom;
        padding-right: 5px;
        font-weight: 400;
        content: "\f044";
    }

    #ibt-OnSiteContainer #WskCmt-Container button.WskCmt-edit:hover, #ibt-MobileContainer #WskCmt-Container button.WskCmt-edit:hover {
        background-color: #218838;
        border-color: #1e7e34;
    }


/* DELETE BUTTON */

#IronboltAdminContainer #WskCmt-Container button.WskCmt-delete {
    color: black;
    text-decoration: none;
    font-size: 8pt;
    border: none;
    background-color: transparent;
    padding: 2px;
}

    #IronboltAdminContainer #WskCmt-Container button.WskCmt-delete::after {
        font-size: 10pt;
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f0b2";
        vertical-align: bottom;
        padding-left: 5px;
        font-weight: 400;
        content: "\f2ed";
    }

    #IronboltAdminContainer #WskCmt-Container button.WskCmt-delete:hover {
        color: darkorange;
        text-decoration: none;
    }

#ibt-OnSiteContainer #WskCmt-Container button.WskCmt-delete, #ibt-MobileContainer #WskCmt-Container button.WskCmt-delete {
    color: white;
    text-decoration: none;
    font-size: 8pt;
    border: none;
    background-color: #dc3545;
    border-color: #dc3545;
    padding: 2px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    text-align: center;
    vertical-align: middle;
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .25rem;
    width: 75px;
    margin-bottom: 5px;
}

    #ibt-OnSiteContainer #WskCmt-Container button.WskCmt-delete::after, #ibt-MobileContainer #WskCmt-Container button.WskCmt-delete::after {
        content: "Delete";
    }

    #ibt-OnSiteContainer #WskCmt-Container button.WskCmt-delete::before, #ibt-MobileContainer #WskCmt-Container button.WskCmt-delete::before {
        font-size: 10pt;
        font-family: "Font Awesome 6 Pro";
        font-weight: 900;
        content: "\f0b2";
        vertical-align: bottom;
        padding-right: 5px;
        font-weight: 400;
        content: "\f2ed";
    }

    #ibt-OnSiteContainer #WskCmt-Container button.WskCmt-delete:hover, #ibt-MobileContainer #WskCmt-Container button.WskCmt-delete:hover {
        background-color: #c82333;
        border-color: #bd2130;
    }
