/*put a red asterisk after the content to indicate a required field.*/
.required:after {
    content: '*';
    color: red;
    font-weight: bolder;
    font-size: 1.0em;
    padding-left: 2px;
}

html {
    height: 100%;
    box-sizing: border-box;
    }
    
*,
*:before,
*:after {
    box-sizing: inherit;
}
    
body {
    position: relative;
    margin: 0;
    min-height: 100%;
    font-family:'Source Sans Pro' !important;
}

/* Modal max size add scrollbar */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: 70%;
    overflow-y: auto;
}

.panel-custom-frontend {
    border-color: #006999;
}
.panel-custom-frontend > .panel-heading {
    background: #006999;
    color: #ffffff;
    border-color: #006999;
}


dl {
    padding: 0.5em;
}
dt {
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
    font-weight: bold;
    padding-bottom: .25em;
}
dt:after {
    content: ":";
}
dd {
    margin: 0 0 0 110px;
    padding-bottom: .25em;
}

/* to indent children for 1 level nested dataTable */
.indent_first_child tr.odd>td:first-child,
.indent_first_child tr.even>td:first-child
{
    padding-left: 2em;
}

/* to indent children for 2 level nested dataTable */
.indent_first_child_2 tr.odd>td:first-child,
.indent_first_child_2 tr.even>td:first-child
{
    padding-left: 4em;
}

/*css for dataTable grouped headings*/
/* slightly customized from https://cdn.datatables.net/rowgroup/1.1.1/css/rowGroup.dataTables.min.css */
table.dataTable tr.dtrg-group td
{background-color:#e0e0e0}

table.dataTable tr.dtrg-group.dtrg-level-0 td
{font-weight:bold}

table.dataTable tr.dtrg-group.dtrg-level-1 td,table.dataTable tr.dtrg-group.dtrg-level-2 td
{
    background-color:#f0f0f0;
    padding-top:0.25em;
    padding-bottom:0.25em;
    padding-left:2em;}

table.dataTable tr.dtrg-group.dtrg-level-2 td
{
    background-color:#f3f3f3
}
/* end css for dataTable grouped headings*/

/* fa-duotone colors for icons (used in frontend menu) */
.orangeDuoToneIcon {--fa-primary-color: orange; --fa-secondary-color: orange;}
.purpleDuoToneIcon {--fa-primary-color: purple; --fa-secondary-color: purple;}

/* colors for buttons to keep them uniform throughout the frontend */
.infoButton {background-color: #D3DDEB; color: #616161;} /* Light Blue */
.infoButton:hover {background-color: #eef1f7; color: #616161;}

.infoIcon {color: #85a0c7; background-color: #ffffff;} /* Light Blue */
.infoIcon:hover {color: #a8bbd7; background-color: #ffffff;}

.templateButton {background-color: #fad980; color:#616161} /* Yellow */
.templateButton:hover {background-color: #fce9b6; color:#616161}

.orangeIcon {color: #FF8C00; background-color: #ffffff;} /* Dark Orange */
.orangeIcon:hover {color: #FFA500; background-color: #ffffff;}

.orangeButton {color: #ffffff; background-color: #FF8C00;} /* Dark Orange */
.orangeButton:hover {color: #ffffff; background-color: #FFA500;}

.emailButton {background-color: #FFBF80; color: #565656;} /* Light Peach */
.emailButton:hover {background-color: #FFD5AB; color: #565656;}

.categoriesButton {background-color: #FFB3B3; color: #535353;} /* Light Pink */
.categoriesButton:hover {background-color: #FFD1D1; color: #535353;}

.optionsButton {background-color: #B8E8B8; color: #616161;} /* Light Green */
.optionsButton:hover {background-color: #d8f3d8; color: #616161;}

.editButton {background-color: #5078AF; color: #ffffff;} /* Medium Blue */
.editButton:hover {background-color: #85a0c7; color: #ffffff;}

.editIcon {color: #5078AF; background-color: #ffffff;} /* Medium Blue */
.editIcon:hover {color: #85a0c7; background-color: #ffffff;}

.addButton {background-color: #2e8540; color: #ffffff;} /* Green */
.addButton:hover {background-color: #3bab51; color: #ffffff;}

.pinkButton {background-color: #ff99cc; color: #ffffff;} /* Pink */
.pinkButton:hover {background-color: #ff66b3; color: #ffffff;}

.addIcon {color: #2e8540;} /* Green */
.addIcon:hover {color: #3bab51;}

.duplicateButton {background-color: #993399; color: #ffffff;} /* Purple */
.duplicateButton:hover {background-color: #bf40bf; color: #ffffff;}

.duplicateIcon {color: #993399; background-color: #ffffff;} /* Purple */
.duplicateIcon:hover {color: #bf40bf; background-color: #ffffff;}

.deleteButton {background-color: #cd2026; color: #ffffff;} /* Red */
.deleteButton:hover {background-color: #e0383e; color: #ffffff;}

.deleteIcon {color: #cd2026; background-color: #ffffff;} /* Red */
.deleteIcon:hover {color: #e0383e; background-color: #ffffff;}

.whiteIcon {color: #ffffff;} /* White */
.whiteIcon:hover {color: #f2f2f2;} /* Light Gray */

.siteSendManButton {background-color: #5b92eb; color: #ffffff;} /* Sky Blue */
.siteSendManButton:hover {background-color: #78a4eb; color: #ffffff;}

.enrollButton {background-color: #5b92eb; color: #ffffff;} /* Sky Blue */
.enrollButton:hover {background-color: #78a4eb; color: #ffffff;}

.waitlistButton {background-color: #fad980; color:#616161} /* Yellow */
.waitlistButton:hover {background-color: #fce9b6; color:#616161}

.commentsButton {background-color: #5b92eb; color: #ffffff;} /* Sky Blue */
.commentsButton:hover {background-color: #78a4eb; color: #ffffff;}


.disabledButton {
    background-color: #f3f2f1; /* Gray */
    color:#bfbfbf;
    pointer-events: none;
    cursor: default;
}

.disabledIcon {
    color: #bfbfbf; /* Gray */
    background-color:#ffffff;
    /*pointer-events: none;*/
    cursor: default;
}

.event-full {
    color: #f00000;
    font-weight: 900;
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, sans-serif;
    text-transform: uppercase;
}

.color-requests-user {
    color: #87588f;
}

.color-requests-user:hover {
    color: #583a5e;
}

.color-mycourses {
    color: #bb4d03;
}

.color-mycourses:hover {
    color: #813400;
}

.fas:focus {
    text-decoration: none !important;
}
.fas:hover {
    text-decoration: none !important;
    
}


/* pending request notification bubble */
[data-notifications] {
    position: relative;
}

[data-notifications]:after {
    content: attr(data-notifications);
    position: absolute;
    font-size:60%;
    padding:.6em;
    border-radius:999px;
    line-height:.75em;
    color: white;
    background:rgba(255,0,0,.85);
    text-align:center;
    left: 20px;
    top: -10px;
}


/* Template related */
.already-scheduled-event {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;
}
.template-event-success {
    background-color: green;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;
}
.template-event-collide {
    background-color: red;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;
}


/* for bootstrap panel accordion */
.panel-heading .accordion-toggle:after {

    cursor: pointer;
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading.collapsed .accordion-toggle:after {
    /* symbol for "collapsed" panels */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
}


/* noUiSlider tooltip fixes */
.noUi-horizontal .noUi-tooltip  {
    bottom: -100% !important 
}

.noUi-tooltip {
    display: none !important;
}
.noUi-active .noUi-tooltip {
    display: block !important;
}

.noUi-values {
    font-size: 12px !important;
}


/* Datatables hide child checkboxes */
.scheduler_default_tree_image_no_children {
    background-image: none !important;
}

/* minutes input */
.minutes-input {
    width: 80px;
}

/* inline form control fix */
.form-control-inline {
	width: auto;
	float:left;
	margin-right: 5px;
 }


/* Footer - lock to bottom of page */
.page-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 50px;
    padding-bottom: 50px;
    height: 100px;
    color: #99979c;
    text-align: center;
    background-color: #2a2730;
}

.content {
    margin: 0 auto;
    padding-bottom: 100px;
}

.comment-spinner {
	position: absolute;
	width:40px;
	height: 40px;
	z-index: 10;
}

.comment-header {
    font-size: 12px;
    font-weight: lighter;
    color: dimgray;
    /*color: rgb(51, 97, 190) !important;*/
}

.comment-trash {
    color: rgb(168, 72, 72) !important;
}

.comment-trash:hover {
    color: rgb(121, 4, 4) !important;
}

.btn-users {
    background-color: #c8cc00;
    border-color: #c8cc00;
    color: #ffffff;
}
.btn-users:hover,
.btn-users:focus,
.btn-users:active,
.btn-users.active {
    background-color: #afb300;
    border-color: #969900;
    color: #ffffff;
}
.btn-users.disabled:hover,
.btn-users.disabled:focus,
.btn-users.disabled:active,
.btn-users.disabled.active,
.btn-users[disabled]:hover,
.btn-users[disabled]:focus,
.btn-users[disabled]:active,
.btn-users[disabled].active,
fieldset[disabled] .btn-users:hover,
fieldset[disabled] .btn-users:focus,
fieldset[disabled] .btn-users:active,
fieldset[disabled] .btn-users.active {
    background-color: #c8cc00;
    border-color: #c8cc00;
    color: #ffffff;
}

/*For responsive tabs from: https://www.bootdey.com/snippets/view/Responsive-tabs-with-accordion-style-in-mobile-devices#html*/

.responsive-tabs {
    margin-top:20px;
}

.responsive-tabs-container .tab-content {
    padding:10px 20px;
    border:1px solid #ddd;
    border-top:none;
}

.responsive-tabs-container[class*="accordion-"] .tab-pane {
    margin-bottom: 15px;
}

.responsive-tabs-container[class*="accordion-"] .accordion-link {
    display: none;
    margin-bottom: 10px;
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-radius: 3px;
    border: 1px solid #ddd;
    color: #333;
}

.responsive-tabs-container[class*="accordion-"] .accordion-link.active {
    border-bottom: medium none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: #ff6600;
}

@media (max-width: 767px) {
    .responsive-tabs-container.accordion-xs .nav-tabs {
        display: none;
    }

    .responsive-tabs-container.accordion-xs .accordion-link {
        display: block;
    }

    .responsive-tabs-container[class*="accordion-"] .tab-pane {
        border:1px solid #ddd;
        border-top:none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-width: medium 1px 1px;
        margin-bottom: 10px;
        margin-top: -10px;
        padding: 10px 10px 0;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .responsive-tabs-container.accordion-sm .nav-tabs {
        display: none;
    }

    .responsive-tabs-container.accordion-sm .accordion-link {
        display: block;
    }

    .responsive-tabs-container[class*="accordion-"] .tab-pane {
        border:1px solid #ddd;
        border-top:none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-width: medium 1px 1px;
        margin-bottom: 10px;
        margin-top: -10px;
        padding: 10px 10px 0;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .responsive-tabs-container.accordion-md .nav-tabs {
        display: none;
    }

    .responsive-tabs-container.accordion-md .accordion-link {
        display: block;
    }
}

@media (min-width: 1200px) {
    .responsive-tabs-container.accordion-lg .nav-tabs {
        display: none;
    }

    .responsive-tabs-container.accordion-lg .accordion-link {
        display: block;
    }
}
/*Used in Curriculum Card Titles*/
/*Adapted From*/
/*https://codepen.io/dp_lewis/pen/MWYgbOY*/

.card_header_title {
    border-bottom: 0px solid #cbd2d9;
    border-radius: 0.3rem;
    display: inline-flex;
    overflow: hidden;
}

.card_header_title__item {
    background: #fff;
    color: #333;
    outline: none;
    padding: 0.5em 0.75em 0.5em 1.25em;
    position: relative;
    text-decoration: none;
    transition: background 0.2s linear;
}

.card_header_title__item:after,
.card_header_title__item:before {
    background: white;
    bottom: 0;
    clip-path: polygon(50% 50%, -50% -50%, 0 100%);
    content: "";
    left: 100%;
    position: absolute;
    top: 0;
    transition: background 0.2s linear;
    width: 1em;
    z-index: 1;
}

.card_header_title__item:before {
    background: #cbd2d9;
    margin-left: 1px;
}

.card_header_title__item:last-child {
    border-right: none;
    font-weight: bold;
}

.card_header_title__item.is-active {
    background: #edf1f5;
}

/*Callouts (to replace the ones we used to use from Admin LTE)*/

.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #eee;
    border-left-width: .25rem;
    border-radius: .25rem
}

.bd-callout h4 {
    margin-top: 0;
    margin-bottom: .25rem
}

.bd-callout p:last-child {
    margin-bottom: 0
}

.bd-callout code {
    border-radius: .25rem
}

.bd-callout+.bd-callout {
    margin-top: -.25rem
}

.bd-callout-info {
    border-left-color: #5bc0de
}

.bd-callout-info h4 {
    color: #5bc0de
}

.bd-callout-warning {
    border-left-color: #f0ad4e
}

.bd-callout-warning h4 {
    color: #f0ad4e
}

.bd-callout-danger {
    border-left-color: #d9534f
}

.bd-callout-danger h4 {
    color: #d9534f
}

.bd-callout-primary{
    border-left-color: #007bff
}

.bd-callout-primaryh4 {
    color: #007bff
}

.bd-callout-success{
    border-left-color: #28a745
}

.bd-callout-successh4 {
    color: #28a745
}

.bd-callout-default{
    border-left-color: #6c757d
}

.bd-callout-defaulth4 {
    color: #6c757d
}

/*This is to override the AdminLTE4 style that is causing the gray overlay when printing in Chrome*/
.sidebar-expand-lg.sidebar-open .sidebar-overlay {
    background-color: transparent !important;
}

/*default-background is set in frontend/backend app.blade.php, gray for screen and white for printing*/
.default-background {
    background-color: #f0f0f0; /* Your default background color */
}

@media print {
    .default-background {
        background-color: white; /* Or any desired background color for print */
    }
}