/*********************************************************************/
/***** BEGIN DESIGNPLUS THEME IMPORT & CUSTOMIZATION  ****************/
/*********************************************************************/
/* Import statements need to be at the top of your CSS file */

/*** Legacy Sidebar ***/
/* For Main CSS file */
@import url(https://designtools.ciditools.com/css/themes.css);
/* For Mobile app CSS file */
/*@import url(https://designtools.ciditools.com/css/app.css);*/
/* Institution color customizations */
@import url(https://designtools.ciditools.com/css/inst_theme_overrides.css);

/*** New Sidebar ***/
/* For Main CSS files */
@import url(https://designplus.ciditools.com/css/content.css);
@import url(https://designplus.ciditools.com/css/editor.css);
/* For Mobile app CSS file */
/*@import url(https://designplus.ciditools.com/css/mobile.css);*/

:root {
    --dt-color-primary: #03639a;
    --dt-color-primary-contrast: #FFFFFF;
    --dt-color-primary-dark-text: #03639a;
    --dt-color-secondary: #555EA9;
    --dt-color-secondary-contrast: #FFFFFF;
    --dt-color-secondary-dark-text: #555EA9;
    --dt-color-accent: #474747;
    --dt-color-accent-contrast: #FFFFFF;
    --dt-color-accent-dark-text: #474747;
    --dt-color-gray: #CCCCCC;
    --dt-color-gray-contrast: #000000;
    --dt-color-gray-dark-text: #636363;
    --dt-color-white: #FFFFFF;
    --dt-color-white-contrast: #000000;
    --dt-color-white-dark-text: #707070;
    --dt-color-graybg: #E6E6E6;
    --dt-color-graybg-contrast: #000000;
}



/*********************************************************************/
/***** END DESIGNPLUS THEME IMPORT & CUSTOMIZATION   *****************/
/*********************************************************************/

@charset "utf-8";
@supports (-ms-ime-align: auto) {
 .ic-app-header__main-navigation {
 background-color: #17375e;
}
 .ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-app-header__menu-list-link {
 background-color:#1c7cbe;
 color:#ffffff !important;
}
.ic-app-header__logomark {
background-image:url('https://instructure-uploads-eu.s3-eu-west-1.amazonaws.com/account_88040000000000001/attachments/12050/BelfastMetLogoNavyWhite.jpg')
}
.ic-icon-svg {
 fill:#ffffff;
}

}

/* Ensure the dialog itself takes up the full viewport height */
.ui-dialog {
  overflow-y: hidden !important; /* Hide overflow here to prevent double scrollbars */
}

/* Make the content within the dialog scrollable */
.ui-dialog .ui-dialog-content {
  max-height: calc(100% - 50px); /* Height relative to the dialog's height */
  overflow-y: auto !important; /* Show scrollbar when content overflows */
}

/* Override jQuery UI Dialog styles */
.ui-dialog:has(#kl_popup_0_content) {
  position: fixed !important; /* Make it stick to the side */
  top: 0 !important; /* Align to the top */
  left: 0 !important; /* Align to the left side of the screen */
  height: 100% !important; /* Stretch it to the full height of the viewport */
  width: 350px !important; /* Set your desired width */
  margin: 0 !important; /* Remove any margins that might center it */
  padding: 0 !important; /* Remove padding if necessary */
  transform: none !important; /* Override any transformations */
  box-shadow: 4px 0 5px -2px rgba(0, 0, 0, 0.5) !important; /* Optional: Add shadow for depth */
  background-color: #d9d9d9; /* Example background color; change as needed */
  border-radius: 0px !important; /* Removes rounded corners by setting the radius to 0 */	
  height: auto; /* Allow the height to grow as needed */
  overflow-y: auto; /* Enables vertical scrolling if content overflows */
  max-height: 100% /* height of any fixed elements at the top or bottom */); /* Adjust the max height accordingly */
}

/* Override content styles to fill the dialog */
.ui-dialog .ui-widget-content {
  height: 100% !important;
}

/* Override any other styles that might prevent full height */
.ui-dialog-content {
  position: static !important;
  overflow: hidden !important; /* Hide overflow */
}

/* Adjust the title bar to not interfere with close button */
.ui-dialog .ui-dialog-titlebar {
  border-radius: 0px !important; /* Removes rounded corners by setting the radius to 0 */	
  background-color: #e9e9e9; /* Example background color; change as needed */
  padding: 0.4em 1em !important; /* Adjust padding as necessary */
}

/* Adjust the close button position */
.ui-dialog .ui-dialog-titlebar-close {
  position: absolute !important;
  right: 0.3em !important; /* Align to the far right of the title bar */
  top: 50% !important;
  transform: translateY(-50%) !important; /* Center it vertically */
}

.kl_popup_0_content .bs-btn {
  max-width: 100%; /* Prevent the button from exceeding the sidebar width */
  box-sizing: border-box; /* Include padding and borders in the button's width */
  padding: 10px; /* Add padding inside the button */
  margin: 10px 0; /* Add some top and bottom margin around the button */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Use an ellipsis to signify text overflow */
  white-space: nowrap; /* Keep the button text on one line */
}

#kl_popup_0_content .bs-btn {
  box-sizing: border-box;
  width: calc(100% - 20px); /* Adjust width to account for any padding or border */
  margin: 10px 10px; /* Adjust margin as needed */
  padding: 10px;
  background-color: #036fac !important; /* Example background color; change as needed */
  color: #ffffff; /* Change text color to something visible against the button background */
  border: 1px solid #000000; /* Example border color; change as needed */
  text-align: center;
}

#kl_popup_0_content .bs-btn:hover {
  background-color: #2A97D8; /* Darker background color on hover for effect */
  border-color: #000000; /* Darker border color on hover for effect */
}

#kl_popup_0_content .bs-btn:hover,
#kl_popup_0_content .bs-btn:focus {
  text-decoration: none; /* Removes the underline on hover and focus */
}

.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix {
  border-radius: 0px !important; /* Removes rounded corners by setting the radius to 0 */	
  background-color: #1C1F33; 
  color: #FFFFFF; 
  
}



/* Style for the title bar to use flexbox for alignment */
.ui-dialog .ui-dialog-titlebar {
  display: flex; /* Enable flexbox */
  align-items: center; /* Center-align items vertically */
  justify-content: space-between; /* Space between the title and close button */
  padding-right: .5em; /* Adjust the padding to ensure the close button is not flush against the edge */
}

/* Style for the close button */
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
  background: transparent; /* No background to the button */
  border: none; /* No border unless you want one */
  margin: 0; /* No margin */
  padding: 0.5em; /* Padding to increase the clickable area */
  height: auto; /* Height to fit the content */
  width: auto; /* Width to fit the content */
  overflow: visible; /* Show all content even if it overflows */
  color: white; /* Make the 'X' white */
  font-size: 1.25em; /* Adjust the size of the 'X' */
  line-height: 1; /* Line height to 1 to prevent extra vertical space */
  position: absolute; /* Absolute position within the title bar */
  right: 12px; /* Distance from the right edge of the title bar */
  top: 50%; /* Push down from the top half the height of the title bar */
  transform: translateY(-50%); /* Shift upward by half its own height to center */
}

/* Style for the icon inside the close button */
.ui-dialog .ui-dialog-titlebar-close .ui-icon {
  display: inline-block; /* Display as inline-block to enable width and height */
  text-align: center; /* Center the text horizontally */
  vertical-align: middle; /* Align the text vertically */
  text-indent: 0; /* No text indent */
}

/* Hide the text "Close" */
.ui-dialog-titlebar-close .ui-icon.ui-icon-closethick {
  font-size: 0 !important; /* Hide the text */
  visibility: hidden !important;
}

/* Add the 'X' content using a pseudo-element */
.ui-dialog-titlebar-close .ui-icon.ui-icon-closethick::before {
  content: 'X' !important; /* Insert 'X' */
  visibility: visible !important;
  display: block !important;
  font-size: 16px !important; /* Set the font size for the 'X' */
  color: white !important; /* Set the color for the 'X' */
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important; /* Center the 'X' */
}

@media (max-width: 480px) {
  .ui-dialog:has(#kl_popup_0_content) {
    max-height: 100%; /* Set max-height to 100% of the parent element */
  }
}

/*The below covers all of the Tab formatting*/

/*Inactive tab background colour*/
.ui-tabs .ui-tabs-nav .kl_panel_heading.ui-state-default:not(.ui-tabs-active) {
	
	background-color: #f1f1f1;
	border: 1px solid lightgrey;
	border-bottom: 1px solid lightgrey !important;
}

/*Inactive tab text colours*/
.ui-tabs .ui-tabs-nav li a {

    color: #000000 ;
}

/*Colour of the Hover effect on the the inactive tabs background */
.ui-tabs-tab.ui-state-default:not(.ui-tabs-active):hover {
    background-color: #d1d1d1 !important;
}

/*Colour of the Hover effect on the inactive tabs text(when hovering over the entire tab) */
.ui-tabs-tab.ui-state-default:not(.ui-tabs-active):hover a.ui-tabs-anchor {
    color: #000000!important;
}

/*Colour of the Hover effect on the inactive tabs text(when hovering over the text) */
.ui-tabs-tab.ui-state-default:not(.ui-tabs-active) a.ui-tabs-anchor:hover {
    color: #000000 !important;

}

/*Text color for the active tab */
.ui-tabs-active a.ui-tabs-anchor {
    color: #f1f1f1 !important;

}


/*Background color for the active tab */
.tabsgreen .ui-tabs-tab.ui-tabs-active {
    background-color: #007210 !important;
}

/*Background color for the active tab */
.tabsblue .ui-tabs-tab.ui-tabs-active {
    background-color: #03639a !important;
}

/*Background color for the settings active tab */
#course_details_tabs.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	
    color: #000000!important;
	background-color: #474747 !important;
}

/*Background color for the settings active tab */
#group_categories_tabs.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	
    color: #000000!important;
	background-color: #474747 !important;
}



/*The below covers all of the Accordion formatting*/

/*This is the section that controls the colour of the Active Accordion Header*/

.accordionblue .ui-accordion .ui-accordion-header.ui-state-default.ui-state-active {
	
	background-color: #03639a;
    color: #ffffff; /* To ensure text is readable on the dark background */
	padding: 10px 15px;
}

.accordiongreen .ui-accordion .ui-accordion-header.ui-state-default.ui-state-active {
	
	background-color: #007210;
    color: #ffffff; /* To ensure text is readable on the dark background */
	padding: 10px 15px;
}

/*This is the section that controls the Header for Inactive Accordions*/
.kl_panels_wrapper .kl_panel_heading {
    background-color: #f2f2f2;
    padding: 10px 15px;
    cursor: pointer;
    border: 1px solid lightgrey;
    border-radius: 4px 4px 0 0;
    transition: background-color 0.3s ease-in-out;
}


/* Display the content when the panel heading is active */
.kl_panels_wrapper .kl_panel_heading.active + .kl_panel_content {
    display: block;
	padding: 10px 15px;
	border: 1px solid lightgrey;
}

/* This controls the text color for inactive accordion headers */
.ui-accordion-header.ui-state-default:not(.ui-accordion-header-active) a {
    color: #000000 !important;
}

/* This attempts to change the text color of the active accordion header and any nested elements */
.kl_wrapper .ui-accordion .ui-accordion-header.ui-state-active,
.kl_wrapper .ui-accordion .ui-accordion-header.ui-state-active * {
    color: #FFFFFF !important;
}

/* This targets only the accordion headers */
.kl_panels_wrapper.kl_panels_expander .kl_panel_heading {
    border-radius: 4px 4px 4px 4px;
}

/* hide the ally icon on the page*/

.ally-accessibility-score-indicator.ally-accessibility-score-indicator-medium.ally-instructor-feedback.ally-add-tooltip.ally-accessibility-score-indicator-beside-link {
   position: absolute !important;
}

.ally-accessibility-score-indicator.ally-accessibility-score-indicator-medium.ally-instructor-feedback.ally-add-tooltip {
   display: none !important;
}


a.ally-accessibility-score-indicator.ally-accessibility-score-indicator-perfect {
	display: none !important;
}

.ally-accessibility-score-indicator.ally-accessibility-score-indicator-perfect.ally-instructor-feedback.ally-add-tooltip {
   display: none !important;
}


.ally-accessibility-score-indicator.ally-accessibility-score-indicator-high.ally-instructor-feedback.ally-add-tooltip.ally-accessibility-score-indicator-beside-link {
   position: fixed !important;
}

.ally-accessibility-score-indicator.ally-accessibility-score-indicator-perfect.ally-instructor-feedback.ally-add-tooltip.ally-accessibility-score-indicator-beside-link {
	position: fixed !important;
}

.user_content .ally-file-link-holder .ally-accessibility-score-indicator.ally-accessibility-score-indicator-beside-link {
   position: fixed !important;
}

/* hide the download on the page*/
.inline-block.ally-enhancement.ally-user-content-dropdown {
    display: none;
}

/* hide the external site icon on the page */
.external_link_icon {
	display: none !important;
}


a.file_download_btn {
	display: none !important;
}

.dp-ally-placeholder.dp-ally-move {
    display: none;
}

$base-color: #303F9F;
$second-color: #3F51B5;
$third-color: #FBC02D;
$site: #303F9F;
$light: #fff;

body {
 position: relative;
 
 

}
.grid {
 list-style: none;
 margin-left: -40px;
  overflow-x: hidden; /* Hide scrollbars */
}

.gc {
 box-sizing: border-box;
 display: inline-block;
 margin-right: -.25em;
 min-height: 1px;
 padding-left: 40px;
 vertical-align: top;
width:100%;
}

.gc--1-of-3 {
 width: 25%;
}

.gc--2-of-3 {
 width: 75%;
}

.naccs {
 position: relative;
 max-width: 100%;
 margin: 50px auto 0;
}

.naccs .menu div {
 padding: 15px 20px 15px 40px;
 margin-bottom: 10px;
 color: #ffffff;
 background: #7f3e98;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
 cursor: pointer;
 position: relative;
 vertical-align: middle;
 font-weight: 700;
 transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.naccs .menu div:hover {
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.naccs .menu div span.light {
 height: 10px;
 width: 10px;
 position: absolute;
 top: 24px;
 left: 15px;
 background-color: $base-color;
 border-radius: 100%;
 transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.naccs .menu div.active span.light {
 background-color: #a663bf;
 left: 0;
 height: 100%;
 width: 3px;
 top: 0;
 border-radius: 0;
}

.naccs .menu div.active {
 color: $third-color;
 padding: 15px 20px 15px 20px;
 background-color: #a663bf;
}

ul.nacc {
 position: relative;
 height: 0px;
 list-style: none;
 margin: 0;
 padding: 0;
 transition: .5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

ul.nacc li {
 opacity: 0;
 transform: translateX(50px);
 position: absolute;
 list-style: none;
 transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

ul.nacc li.active {
 transition-delay: .3s;
 z-index: 2;
 opacity: 1;
 transform: translateX(0px);
width:100%
}

ul.nacc li p {
 margin: 0;
}
}
.show-content {
  
    width: 100% !important;
    height: 100% !important;
}



@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.ticker-wrap {
  position: fixed;
  top: 0;
  width: 100%;
  overflow: hidden;
  height: 4rem;
  background-color: #7f3e98;;
  padding-left: 100%;
}

.ticker {
  display: inline-block;
  height: 4rem;
  line-height: 4rem;
  white-space: nowrap;
  padding-right: 100%;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
}
.ticker_item {
  display: inline-block;
  padding: 0 2rem;
  font-size: 2rem;
  color: yellow;
}

#kl_wrapper, #kl_wrapper_3, .kl_wrapper, .kl_wrapper_parent {
    max-width: 100%;
}

.kl_wrapper a.Button.Button--primary {
  background-color: var(--dt-color-primary) !important;
  color: var(--dt-color-primary-contrast) !important;
}