body
{
    overflow-x: hidden;
    background-color: #ddd;
    background-image: url(../img/layout/bkg-maybe.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    min-height: 99vh;
}
h1 i, h2 i, h3 i, h4 i, h5 i, h6 i
{
    float: right;
    padding-right: .5em;
	color: rgba( 11,148,68, 1 );
}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span
{
	margin-left: .5em;
	font-size: 0.75em;
	font-weight: 900;
	text-transform: uppercase;
	color: rgba( 11,148,68, 1 );
}
span.warning
{
    color: #ffae00;
}
span.alert
{
    color: #B0413E;
}
textarea, input.smaller-text
{
    font-size: 1em;
}

fieldset
{
    padding-top: .3em !important;
}
.fdatepicker, .fdatetimepicker
{
	background-image: url(../img/layout/calendar.png);
	background-position: 94% 50%;
	background-repeat: no-repeat;
	background-size: auto 68%;
}
div.ab4h-top-bar
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4;
    background-image: linear-gradient(to bottom right, rgba( 0,0,0, .95) , rgba( 0,0,0, .75));
    padding: 0.5em;
    padding-bottom: 4px;
    color: #fff;

    border-top: 2px dotted rgba( 11,148,68, 1 );
    border-bottom: 2px dotted rgba( 11,148,68, 1 );
}
div.ab4h-title
{
    line-height: 2.1em;
}
div.ab4h-title span
{
    font-weight: 900;
}
.success-hollow
{
    background-color: rgba( 155, 197, 61, .5 ) !important;
}
a.hollow-alt
{
    background-color: #fff !important;
}
a.hollow-alt.secondary
{
    color: #666 !important;
    border-color: #666 !important;
}
.margin0
{
    margin: 0;
}
.margin-min
{
    margin-bottom: .3em;
}
.pad0
{
    padding: 0;
}
.pad1
{
    padding: 1em;
}
.pad2
{
    padding: 1em 1.2em 1em 1.2em;
}
.pad5
{
    padding: 0.5em;
}
div.bkg
{
    position: absolute;
    z-index: 1;
    top: 53px;
    left: 0px;
    width: 100%;
    height: 80px;
    background-image: url(../img/layout/bkg-4.jpg);
    border-bottom: 3px solid #666;
}
div.body
{
    /* border: 1px solid rgba( 11,148,68, 1 ); */
    /* border-top: 3px solid rgba( 11,148,68, 1 ); */
    position: relative;
    z-index: 2;
    margin-left: .3em;
    margin-right: .3em;
    margin-top: 3em;
    /* margin-top: 120px;
    margin-bottom: 30px;

    min-height: 90vh;
    background-image: linear-gradient(to bottom right, rgba( 51,51,51,1), rgba( 0,0,0,.95) ); */
}
div.view-side
{
    background-color: #222;
    color: #fff;
    border-bottom-right-radius: 1em;
    padding: 1em;

    border: 1px solid rgba( 0,0,0, .2 );
    border-top: 0;
    border-left: 0;

    font-size: 0.9em;
    margin-bottom: 1em;
}
div.view-side-alt
{
    border-top-right-radius: 1em;
    background-color: #444;
}
div.view-side a.button
{
    margin-bottom: .3em;
}
div.view-main
{
    padding: 1em;
}
div.history a.button
{
    margin-bottom: .3em;
}
.history-close
{
    margin-left: 0.5em;
}
div.card
{
    overflow: visible;
}
div.card-primary
{
    border-color: rgba( 11,148,68, 1 );
    border-color: rgba( 0,0,0, .75);
    border-style: solid;
    border-width: 2px;

    margin-top: 2em;
}
div.card-img
{
    height: 60px;
    width: 60px;
    border: 2px solid rgba( 255,255,255, 1 );
    border-radius: 2em;
    background-color: #fff;
    color: #222;
    position: absolute;
    top: -.5em;
    left: .4em;
    background-size: cover;
    background-position: center center;
    box-shadow: 0px 0px 6px rgba( 0,0,0, .75 );
}
div.card-title
{
    position: relative;
    background-color: rgba( 11,148,68, 1 );
    background-color: rgba( 0,0,0, .75 );
    padding: .4em .8em .4em .8em;
    color: #fff;
    font-weight: bold;
    text-align: right;
    line-height: 1em;
}
div.card-title small
{
    font-weight: normal;
}

div.card-body
{
    font-size: 0.9em;
}
div.history
{
    /* margin-left: 0.3em;
    margin-right: 0.3em; */
}
div.callout-shadow
{
    box-shadow: 0px 0px 12px rgba(0,0,0,.35);
}
ul.tabs
{
	background-color: transparent !important;
	border: none;
	border-left: 1px solid #e6e6e6;
	position: relative;
	top: 1px;
}
li.tabs-title.is-active a
{
	background-color: #fff !important;
	border-bottom: 1px solid #fff !important;
}
li.tabs-title a
{
	background-color: #fafafa;
	border-top: 1px solid #e6e6e6;
	border-right: 1px solid #e6e6e6;
	border-bottom: 1px solid transparent;
}
li.tabs-title a:hover
{
	background-color: rgba( 49,53,116, .05 );
	/* border-top: 1px solid rgba( 228, 228, 228, 1 ); */
	border-right: 1px solid rgba( 228, 228, 228, 1 );
	border-bottom: 1px solid rgba( 228, 228, 228, 1 );
}
div.tabs-content
{
	border-top: 1px solid #e6e6e6;
    font-size: 0.9em;
}
a.success, a.warning
{
    color: #fff !important;
}
div.signin-box
{
	box-shadow: 0px 5px 20px #666;
	background-color: rgba( 255,255,255, .9 );
	border-radius: .4em;
    padding: 1em;
    position: relative;
}
.logo-signin
{
    text-align: center;
}
.logo-signin img
{
    max-height: 200px;
    padding: 1em;
    margin: 0 auto 0 auto;
}
div.signin
{
    margin: 1em;
}
div.ra
{
	padding: 0.4em 0.5em 0.4em 0.5em;
	font-size: 0.8em;
	line-height: 1.1em;
}
div.ra i
{
	float: right;
}
div.ra-type
{
	background-color: rgba( 30, 161, 238, 1 );
	background-color: #999;
	color: #fff;
	font-weight: bold;
	border-bottom-right-radius: .6em;
}
div.ra-type_profile
{
    background-color: rgba( 53,124,44, .95 );
}
div.ra-type_signin_attempt
{
    background-color: #c60f13;
}
div.ra-type_signin_worker, div.ra-type_signin_admin
{
    background-color: rgba( 77, 184, 72, .95 );
}
div.ra-type_user_worker, div.ra-type_user_admin
{
    background-color: #ffae00;
}
div.ra-type_user, .history_user i:first-child
{
	background-color: #222;
}
div.ra-name
{
	font-weight: bold;
}
div.ra-details
{
    padding: .5em;
    font-size: 0.9em;
}
div.ra-ago
{
	background-color: rgba( 128,128,128, .1 );
	text-align: right;
}
div.ra-column
{
	padding-right: 0;
}
div.show-info
{
	font-size:80%;
	padding: 0 1em 0 1em;
}

div.container-body
{
    background-image: linear-gradient( to bottom right, rgba( 255,255,255, .95), rgba( 255,255,255, .75));
    border-radius: .3em;
    border: 1px solid rgba( 0,0,0,.25 );
    box-shadow: 0px 0px 12px rgba(0,0,0,.35);
    padding: 1em;
}
div.container-side
{
    background-image: linear-gradient( to bottom right, rgba( 0,0,0, .75), rgba( 0,0,0, .5));
    color: #fff;
}
div.container-side label
{
    color: #fff;
}
div.container-side a.button
{
    margin-bottom: .3em;
}
div.container-quicklinks
{
    margin-top: 1.84em;
    position: relative;
    padding-bottom: 0;
    text-align: center;
    font-weight: bold;
    background-image: linear-gradient( to bottom right, rgba( 0,0,0, .75), rgba( 0,0,0, .5));
}
div.container-quicklinks h3
{
    color: #fff;
}
div.container-quicklinks p
{
    color: #fff;
    font-weight: normal;
}
div.container-quicklinks i
{
    display: block;
    text-align: center;
    font-size: 3em;
    color: #333;
}
div.container-quicklinks small
{
    font-weight: normal;
    display: block;
}
div.circle-imgs
{
    display: block;
    clear: both;
}
div.circle-imgs label
{
    font-weight: bold;
}
div.circle-img
{
    height: 42px;
    width: 42px;
    border: 2px solid rgba( 0,0,0, .5 );
    border-radius: 2em;
    background-color: #fff;
    color: #222;
    background-size: cover;
    background-position: center center;
    /* margin-right: .3em; */
    float: left;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    overflow: hidden;
    padding-top: .3em;
    padding-left: 1px;
    margin-bottom: 0.3em;
}
div.circle-img-alt
{
    font-size: 0.9em;
    line-height: 1em;
}
div.absences div.circle-img
{
    margin-right: 0.3em;
}
div.circle-img-alt
{
    border: 1px solid rgba( 0,0,0, .25 );
    margin-bottom: 0;
    width: 38px;
    height: 38px;
}
div.pending
{
    border: 2px dashed rgba( 0,0,0, .5 );
}
div.widget-vacation
{
    text-align: center;
    margin-bottom: 1em;
}
div.widget-vacation div.number
{
    width: 100%;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
}
div.notifications i.icon
{
    color: #999;
    margin: 0 auto 0 auto;
    font-size: 2em;
    text-align: center;
}
div.callout-em
{
    border-top: 3px solid rgba( 11,148,68, 1 );
}
div.callout0
{
    padding-bottom: 0;
}
.fdatepicker, .fdatetimepicker
{
	background-image: url(../img/layout/calendar.png);
	background-position: 94% 50%;
	background-repeat: no-repeat;
	background-size: auto 68%;
}
table.tblData
{
    margin: 0;
    margin-bottom: 1em;
}
table.tblData th
{
    text-align: left;
    font-size: 0.9em;
}
table.tblData td
{
    font-size: 0.9em;
    vertical-align: top;
}
table.tblData th.border-left, table.tblData td.border-left
{
    border-left: 1px solid #ddd;
}
table.tblDataSmaller th, table.tblDataSmaller td
{
    font-size: 0.8em;
}
table.no-wrap th, table.no-wrap td
{
    white-space: nowrap;
}
div.ab4h-menu
{
    padding-left: 0.8em;
}
div.ab4h-menu a.button
{
    margin: 0;
    margin-bottom: 3px;
}
#form_permissions table.tblData td
{
    font-size: 0.8em;
}
#form_permissions table.tblData .button
{
    margin: 0;
}
#menu-small a
{
    display: block;
    margin-bottom: .5em;
    float: none;
    text-align: left;
}
.fdatepicker, .fdatetimepicker
{
	background-image: url(../img/layout/calendar.png);
	background-position: 94% 50%;
	background-repeat: no-repeat;
	background-size: auto 68%;
}
.is-admin
{
    margin-left: 1em;
    color: rgba( 0,0,0, .75 );
}
span.label i
{
    margin-left: 0.5em;
    color: rgba( 255,255,255,.75);
}
span.label i:hover
{
    color: rgba( 255,255,255,1);
}
div.switch.alert input:checked ~ .switch-paddle
{
    background-color: #c3423f;
}
input.smaller
{
    font-size: 1em;
}
.c
{
    text-align: center !important;
}
.r
{
    text-align: right !important;
}
.l
{
    text-align: left !important;
}
.zselect ul
{
    min-width: 300px;
}
#chart_div table
{
    border-collapse: initial;
}

#chart_div table *
{
    background-color: transparent;
}
#chart_div table td.orgchart-node
{
    font-size: 0.9em;
    border: 1px solid #222;
    border-radius: .3em !important;
    background-color: #fafafa;
    /* box-shadow: inset 0px 0px 6px rgba( 11,148,68, .75 ); */
    color: #222;
}
#chart_div table td.orgchart-node-selected
{
    border: 1px solid #222;
}
#chart_div table td.orgchart-node div
{
    font-size: 0.8em;
}
#chart_div .google-visualization-orgchart-lineleft
{
    border-left: 1px solid rgba( 11,148,68, 1 );
}
#chart_div .google-visualization-orgchart-lineright
{
    border-right: 1px solid rgba( 11,148,68, 1 );
}
#chart_div .google-visualization-orgchart-linebottom
{
    border-bottom: 1px solid rgba( 11,148,68, 1 );
}
div.notification-save
{
    float: right;
}
.fixed-width
{
    font-family: monospace;
    font-weight: 900;
    font-size: 1.1em;
}
input.token
{
    font-family: monospace;
    font-size: 0.9em;
}
label.is-invalid-label
{
    font-weight: 500;
}
label.is-invalid-label input, label.is-invalid-label select, label.is-invalid-label textarea
{
    border: 1px dotted #c3423f !important;
}
td.is-invalid-label a
{
    color: #B0413E;
}
.no-wrap
{
    white-space: nowrap;
}
.hidden
{
    display: none;
}
.show
{
    display: block !important;
}
.signature_pad
{
    border: 1px solid #ccc;
    background-color: #fff;
    width: 100%;
    height: 120px;
}
.verification_code
{
    font-family: monospace;
    font-size: 1.6em;
    font-weight: bold;
    text-align: center;
    color: rgba( 11,148,68, 1 );
}
.calendar
{
    border-left: 1px solid rgba( 0,0,0, .2 );
    border-top: 1px solid rgba( 0,0,0, .2 );
}
.calendar-day
{
    min-height: 120px;
    border-right: 1px solid rgba( 0,0,0, .2 );
    border-bottom: 1px solid rgba( 0,0,0, .2 );
    padding: 0.2em;
    font-size: 0.8em;
    background-color: rgba( 255,255,255, .5);
    position: relative;
}
.calendar-day-label
{
    border-right: 1px solid rgba( 0,0,0, .2 );
    border-bottom: 1px solid rgba( 0,0,0, .2 );
}
.calendar-label
{
    font-weight: bold;
    text-align: center;
    padding: 0.5em;
    font-size: 0.9em;
}
.calendar-weekend
{
    background-color: rgba( 11,148,68, 0.07 );
}
.calendar-off-month
{
    background-color: rgba( 0,0,0, .07);
    color: #999;
}
.calendar-date
{
    position: absolute;
    top: .2em;
    right: .2em;
    font-weight: 500;
    font-size: 0.9em;
    z-index: 9;
    background-color: rgba( 255,255,255, .9);
    padding: .2em .3em .2em .3em;
    border-radius: 1em;
    min-width: 1.8em;
    text-align: center;
    border: 1px solid rgba( 0,0,0, .25 );
}
fieldset.alert
{
    border-color: #B0413E;
}
fieldset.alert legend
{
    color: #B0413E;
}
div.program-registration-container hr
{
    display: none;
}
div.program-registration-container input, div.program-registration-container select
{
    margin-bottom: 0;
}
div.program-registration-container table th, div.program-registration-container table td
{
    font-size: 0.9em;
}
div.program-registration-container table td:last-child
{
    min-width: 200px;
}

div.program-registration-container .missed, div.program-registration-container .missed label
{
    color: #B0413E;
}
div.program-registration-container .missed input, div.program-registration-container .missed select
{
    border: 1px solid #B0413E;
}
div.program-registration-container table.tblData td:last-child
{
    /* text-align: right; */
}
.iframe
{
    width: 1px;
    height: 1px;
    display: hidden;
}
.rel
{
    position: relative;
}
.x
{
    position: absolute;
    top: 0.5em;
    right: 0.5em;
}
div.setup
{
    width: 480px;
    margin: 3em auto 3em auto;
}
div.add-margin input
{
    margin-bottom: 1em;
}
span.price
{
    float: right;
    background-color: #ffae00;
    color: #fff;
    font-weight: bold;
    font-size: 0.9em;
    padding: .1em .5em .1em .5em;
    border-radius: 3px;
}

table.table-filter th
{
    position: relative;
}
table.table-filter tr.ablesorter-filter-row th i
{
    position: absolute;
    top: 0em;
    right: 0.1em;
    font-size: 0.8em;
    color: rgba( 94,134,141, 1 );
}
table tr.tablesorter-filter-row td
{
    padding: .2em;
    border-top: 1px dotted rgba( 94,134,141, 1 );
}
table tr.tablesorter-filter-row td input
{
    height: 25px;
    font-size: 0.9em;
    width: 100%;
    border: 0;
    margin: 0;

    background-image: url(../img/layout/filter.png);
	background-position: top 5px right 5px;
	background-repeat: no-repeat;
	background-size: auto 25%;
}
table tr.tablesorter-filter-row td input:focus
{
    background-image: none;
}
table tr.tablesorter-filter-row td input:focus
{
    background-image: none;
}
table tr.permission-heading th
{
    background-color: #f6f6f6;
    border-top: 1px solid rgba( 0,0,0, .15 );
    font-size: 0.8em;
}
table tr.permission-permission:hover td
{
    background-color: rgba( 11,148,68, .05 );
}

table.text-smaller td, table.text-smaller th {
    font-size: 0.75em;
}

.fit-content {
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
}

.selected-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    padding: 8px;
    background: #f8f8f8;
    border-radius: 4px;
    border-left: 3px solid #1779ba;
}

.selected-item span {
    flex-grow: 1;
    font-weight: 500;
}

.remove-selected {
    margin-left: 10px !important;
    padding: 2px 8px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    min-height: auto !important;
    font-weight: bold;
}

.remove-selected:hover {
    background-color: #cc4125 !important;
}

#pending_change_pending .selected-item,
#pending_change_approved .selected-item,
#pending_change_denied .selected-item {
    border-left-color: #1779ba;
}

#pending_change_pending .selected-item {
    border-left-color: #ffae00;
}

#pending_change_approved .selected-item {
    border-left-color: #3adb76;
}

#pending_change_denied .selected-item {
    border-left-color: #cc4125;
}

@media print {
  .print-hidden
  {
	  display: none;
  }
  .print-show
  {
      display: block;
  }
  a[href]:after {
    content: none !important;
  }
}

.good-standing {
    color: #0C9444;
}
.good-standing:hover {
    color: #07602b;
}


.not-in-good-standing {
    color: #CF8E6D;
}
.not-in-good-standing:hover {
    color: #a37055;
}

.contact-area-coordinator {
    color: #FA6675;
}
.contact-area-coordinator:hover {
    color: #a3414c;
}

.screen-hidden {
    display: none;
    visibility: hidden;
}


@keyframes pulse-border {
    0% {
        border-color: rgba(255, 0, 0, 0); /* Transparent border */
        box-shadow: 0 0 0 rgba(255, 0, 0, 0);
    }
    50% {
        border-color: rgba(255, 0, 0, 1); /* Solid red border */
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.8); /* Red glow around the border */
    }
    100% {
        border-color: rgba(255, 0, 0, 0); /* Transparent border */
        box-shadow: 0 0 0 rgba(255, 0, 0, 0);
    }
}

.glow-error {
    animation: pulse-border 1.5s infinite ease-in-out; /* Adjust duration as needed */
    border: 2px solid transparent; /* Ensure a border is present for the animation to work */
}

@keyframes pulse-border-white {
    0% {
        border-color: rgba(255, 0, 0, 0); /* Transparent border */
        box-shadow: 0 0 0 rgba(255, 0, 0, 0);
    }
    50% {
        border-color: rgba(255, 255, 255, 1); /* Solid white border */
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Red white around the border */
    }
    100% {
        border-color: rgba(255, 0, 0, 0); /* Transparent border */
        box-shadow: 0 0 0 rgba(255, 0, 0, 0);
    }
}

.glow-white {
    animation: pulse-border-white 1.5s infinite ease-in-out; /* Adjust duration as needed */
    border: 2px solid transparent; /* Ensure a border is present for the animation to work */
}


@media print {
    /* hide all tab‐panels… */
    .tabs-content .tabs-panel, .tabs-title, .accordion-item { display: none !important; }
    /* …then show only the one that’s currently active */
    .tabs-content .tabs-panel.is-active, .tabs-title.is-active, .accordion-item.is-active { display: block !important; }
    /* hide anything you don’t want in the printout */
    .print-hidden, button { display: none !important; }
    /* if you have fixed headers/footers, you can also disable them */
    .ab4h-top-bar, .breadcrumbs { display: none !important; }

    .container-body, .body, .primary, .print-full-width {
        width: 100% !important;
    }

    .body {
        margin-top: 0px !important;
    }

    .primary, .print-full-width {
        padding-right: 3rem;
    }

    .print-show {
        display: initial !important;
        visibility: visible !important;
    }

    .grid-margin-x>.large-4, .grid-margin-x>.large-6, .grid-margin-x>.large-8 {
        width: calc(40% - 1.875rem);
    }

    .grid-margin-x>.large-2, .grid-margin-x>.large-3, .grid-margin-x>.large-1 {
        width: calc(30% - 1.875rem);
    }


    input,
    select,
    option,
    textarea {
        display: block           !important;
        width: 100%              !important;
        max-width: 100%          !important;
        box-sizing: border-box   !important;

        /* allow multi-line wrapping of long, unbroken strings */
        white-space: normal      !important;
        overflow-wrap: break-word!important;
        word-break: break-all    !important;

        /* clean up the look for print */
        border: none             !important;
        background: transparent  !important;
        font-weight: bold        !important;
        padding: 0               !important;
        margin-bottom: 0.5em     !important;
    }

    .button {
        visibility: hidden;
    }

    .switch-inactive {
        visibility: hidden;
    }

    [data-lastpass-icon-root] {
        display: none !important;
    }

    /* (Optional WebKit catch-all for any built-in decorations) */
    ::-webkit-textfield-decoration-container,
    ::-webkit-textarea-decoration-instance {
        display: none !important;
    }
}