/************************************************************/
/*************** PROACTECH CUSTOM STYLES ********************/
/************************************************************/

/*
 * Add Custom Styles
 *
 * @author Bari
 * @date 22/04/2024
 * @version 13/02/2025
 */


:root {
    --primary-color: #802A7D;
    --secondary-color: #F18821;
    --disabled-color: #8898AA;
    --login-panel-width: 25em;
    --fancybox-bg: rgba(0,0,0,0.35);
}


/*----------------- LOGIN -----------------*/

#page-login-index {
    /*background-size: auto 100%;*/
/*     background-position-x: calc( -1 * var(--login-panel-width) ) ; */
}

html[dir='rtl'] #page-login-index {
    background-image: url("/local/background-login-rtl.png") !important;
}

#page-login-index.dir-ltr {
/*     background-position-x: var(--login-panel-width); */
/*     background-image: url("bg-login-ltr.png") !important; */
}

/* Add GIZ Image on Login Panel Bottom */
#page-login-index .login-container {
	background-color: rgba(254,254,254,0.75);
/*     max-width: var(--login-panel-width); */
/* 	background-image: url("/local/footer-logo-giz.png") ; 
    background-size: auto 8rem;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: calc( 100% - 2rem );*/
}

#page-login-index .login-container .login-card,
#page-login-index .login-container .card-header {
    background: none;
}

#page-login-index .login-container .card-header img {
/*     width: 10em; */
}

/* Add ANAPEC Logo before Main Logo  */ 
#page-login-index .login-container .card-header {
    
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    width: 100%;
    
    &::before {
        content: url("/local/logo-anapec-slogan-xs.png");
/*         transform: scale(0.75); */
    }
}


/*----------------- BREADCRUMB -----------------*/

/* Hide My Courses Link */
.breadcrumb .breadcrumb-item:has(a[href$='my/courses.php']) {
    display: none;
}


/*----------------- MENU -----------------*/

/* Increase NavBar Logo Height */
nav.navbar .logo img {
    max-height: 54px;
}

/* Hide Top Menu Buttons */
.primary-navigation .nav-item[data-key='home'],
.primary-navigation .nav-item[data-key='mycourses']
{
    display: none;
}


/*----------------- SLIDER DASHBORAD -----------------*/

ul.uk-slideshow-items {
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}


/*----------------- COURSE OVERVIEW DASHBORAD -----------------*/

/* Add Hover Effect on Course Card Hover */
.block_myoverview .card.dashboard-card:hover {
    box-shadow: 0 0 5px 1px var(--gray);
    transition: 0.2s all;
}

/* Show Category like Badge */
.block .block-cards span.categoryname {
    font-size: small;
	padding: 0.1rem 0.5rem;
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
    background-color: #f7fafc;
    text-transform: uppercase;
}

/* Hide Sort List & Force Sorting by Course Shortname */
#sortingdropdown {
  display: none;
}


/* Category DIV */
.category {
    min-width: 97%;
    margin: 0 auto 1rem ;
    font-size: large;
    font-weight: bold;
    padding: 0.5rem 0 0.25rem 0;
    border-bottom: 1px solid #e9ecef;
    border-radius: 0.25rem;
    text-transform: uppercase;
}


/*----------------- BAGDE BLOCK DASHBORAD -----------------*/

.block_badges .badges {
/* 	text-align: center; */
}

.block_badges .badges li {
/* 	width: 45%; */
}


/*----------------- COURSE INTRO -----------------*/

.block_purity_course_intro.style2 {
    
    /* Change Course Info Color & Set Width */
    & .course-intro-info {
        color: var(--default);
        width: 43%;
    }
    
    
    /* Decrease Opacity of Image Overlay */
    & .course-intro-media .course-intro-media-overlay::after {
	   opacity: 0.6;
        /* 	background: linear-gradient( to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,.15) 20%, rgba(0,0,0,.8) 100% ); */
    }
    
    /* Change Course Title Color */
    & .course-intro-info .course-intro-name {
	   color: var(--primary-color);
    }
    
    /* Disbale Autolink Activity */
	& a.autolink {
        pointer-events: none;
        color: inherit;
    }
    
    /* Set Course Summary */
    & .course-intro-summary {
        font-size: smaller;
    }
}

/* Set Course 8 Spacing to Show Category Badge */
body.course-8 .block_purity_course_intro.style2 {
    
    & .course-intro-summary {
        margin-top: 0.25rem;
    }
    
    & .course-intro-category,
    & .course-intro-details{
        margin-top: auto;
    }
}


/*----------------- COURSE CONTENT -----------------*/

/* Hide Course Content Card Title: 'Course Content' */
.course-content-title {
    display: none;
}


/* Hide Course Reports Logs Sources Menu */
select#menuorigin {
    display: none;
}


/*----------------- COURSE SECTIONS -----------------*/

/* Hide 1st Section Title */
.course-section h3#coursecontentsection0 {
/*     visibility: hidden; */
}


/*----------------- ACTIVITY ICONS + TITLES -----------------*/

/* Change File Activity Icon for PDF & Others */
.activity .modtype_resource .activityiconcontainer .activityicon {
	content: url('/theme/purity/pix_plugins/mod/page/monologo.png');
}

/* Set Activities Icons Bigger */
.activity img.activityicon {
    min-width: 2em;
    min-height: 2em;
	object-fit: contain;
    vertical-align: middle;
}

/* Remove Activity Icon Container Background */
.activityiconcontainer {
    margin: 1rem;
	background: none !important;
}

/* Remove Activity Icon Filter */
.activityiconcontainer .activityicon, 
.activityiconcontainer .icon {
	filter: none !important;
}

/* Remove Activity Type Text */
.course-content .activity .activitytitle .text-uppercase.small {
    display: none;
}

/* Set Activities Titles Bigger & Underline */
.course-content .activity .activitytitle .activityname a.aalink {
    color: var(--primary-color) !important;
    font-weight: 600;
}

/* Set Activities Titles Hover Color */
.course-content .activity .activitytitle .activityname a.aalink:hover {
    color: var(--secondary-color) !important;
    transition: all 0.1s ease 0.3s;
}

/* Set Disabled Activity Title & Icon */
.course-content .activity.restricted .activitytitle {
    
    & .activityname > span {
        color: lightgrey;
    }
    
    & .activityicon {
        opacity: 0.5;
    }
    
}

/* Set Admin Only Hidden Badge */
.activity-item > div > .badge {
    margin: 0 1rem 0.5rem auto;
}

/* Set Activities Completion Badges */
.course-content .activity-information .automatic-completion-conditions {
	 margin: 0.5em 0 !important;

	& .badge {
		margin: 0.25em 0 !important;
	}
}

.section .activity .contentafterlink p {
/*     font-size: small; */
}

/* Right Activity Conditions */
.activity-item .automatic-completion-conditions {
/* 	padding: 0.5em 0; */
}

/* Remove Extra Margin Above Activity Description */
.description .course-description-item:first-child {
/* 	margin-top: 0; */
}


/*----------------- ACTIVITY NAVIGATION -----------------*/

/* Make Activity Navigation Links as Button */
.activity-navigation #prev-activity-link,
.activity-navigation #next-activity-link {
    white-space: pre-wrap;
    color: #fff;
    background-color: var(--primary-color);
    box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
}

.activity-navigation #prev-activity-link:hover,
.activity-navigation #next-activity-link:hover {
    background-color: #172b4d;
}

#page-mod-scorm-player {
    & h2, & #scormtop {
        display: none;
    }
}


/*----------------- QUESTIONNAIRE ACTIVITY -----------------*/

/* Hide Group Chart & Group Table Column */
#page .mod_questionnaire_reportpage {

	& canvas#cvs {
        display: flex;
   	 	margin: 0 auto 3rem;
	}
	
	& canvas#cvs2 {
		display: none;
	}
	
	table.generaltable {  
   		& .header.c2, 
   		& .cell.c2 {
        	display: none;
    	}
	}
}

/* Enlarge Question Emoticons Size */
.mod_questionnaire_completepage .qn-container td.smalltext {
    font-size: x-large;
}

/* Hide Badge of Completion Condition */
.path-mod-questionnaire .activity-information:has( .completion-info .automatic-completion-conditions .alert-success ) {
    display: none;
}

/* Quiz Admin Review */
#page-mod-quiz-review {
    
    /* Hide Right Answer Div for MultiChoice Question */
    & .multichoice .outcome:has(.rightanswer) {
        display: none;
    }

    /* Hide Response History  */
   & .que .history {
        display: none;
   }
}


/*----------------- ATTENDANCE ACTIVITY -----------------*/

/* Hide Second Tabs: Shhow All Coourses */
#page-mod-attendance-view #page-content ul.nav li:nth-child(2) {
    display: none;
}

/* Hide 3rd Collapse Panel: Student Recording settings */
#page-mod-attendance-sessions { 
    & [aria-controls='id_headerstudentmarkingcontainer'] {
        display: none;
    }
    
    & div#id_headerstudentmarkingcontainer {
        display: none;
    }
}

#page-mod-attendance-sessions #fitem_id_sdescription .editor_atto_content {
	min-height: 200px !important;
}


/*----------------- QUIZ ACTIVITY -----------------*/

#page-mod-quiz-attempt .que .formulation {

	/* Change Quiz Question Bg Color */
	border-color: #607D8B;
    background-color: rgb(73, 195, 253, 0.15);
	
	/* Hide Check button */
	& .im-controls button.submit {
    	display: none;
	}
}


/*----------------- H5P ACTIVITY -----------------*/

/* Force Video Player to Max 75% */
.h5p-iframe-wrapper {
/*     width:75% !important; */
/*     margin-left: auto; */
/*     margin-right: auto; */
}


/*----------------- TILES FORMAT -----------------*/

/* Fix Arabic Progress Text Alignment */
.format-tiles .progress-indic svg text {
/*     direction: ltr; */
}


/*----------------- DESIGNER FORMAT -----------------*/


/* Hide First Section Title & Button, Show Only Description */
.format-designer .course-content .designer #section-head-0 >:not(.summary) {
    display: none;
}

/* Show Hand Cursor for Section Arrow Collapse Icon */
.format-designer .course-content .designer li.section .section-header-content span.section-collapse-icon::before, 
.format-designer .course-content .course-type-collapsible.designer li.section .section-header-content span.section-collapse-icon::before {
	vertical-align: middle;
	cursor: pointer;
}

/* Decrease Gap between Activity Rows */ 
.format-designer .designer .section .content .section.list-layout li.activity {
	margin: 0;
}

/* Remove Activity Row 3rd Column & Extra Row */
.format-designer .show-on-hover,
.format-designer .designer .section .content .section li.activity .mod-content{
	display: none;
}



/* RTL Fixes */
html[dir="rtl"] .format-designer .designer .section.img-text .activity .activityinstance {
/*     padding: 0; */
}


/*----------------- POPUP ACTIVITY FORMAT -----------------*/

/* Remove Extra Padding on left of Sections */ 
.popups.purity-collapsible[data-for=course_sectionlist] {
    padding-left: 0;
}

/* Increase Popup Size */
.modal.show .modal-dialog {
    min-width: 70%;
    min-height: 50%;
    height: auto;
}

/* SCORM Activity */
iframe#format_popups_scorm_iframe {
	height: 80vh;
	border: none;
}


/*----------------- COMPLETION PROGRESS -----------------*/

.block_completion_progress .progressEventInfo img {
/*     width: 32px; */
/*     height: 32px; */
}


/*----------------- POINT OF VIEW -----------------*/

/* Force Activity Title take max width */
#page-course-view-designer .format-designer .designer .section.img-text.list-layout .activity .activityinstance .activity-instance {
/*     min-width: 100%; */
}

/* Fix Icons Layout */
#page-course-view-designer .block_point_view.reactions-container {
/*     position: initial; */
}

/* Main Icon */
#page-course-view-designer .block_point_view.reactions-container .group {
/* 	display: flex; */
/*     align-items: center; */
/* 	position: initial; */
}

/* Votes Number Spacing */
#page-course-view-designer .block_point_view.reactions-container .group_nb {
/*     margin: auto 0.5em; */
}

/* Icons Container */
#page-course-view-designer .block_point_view.reactions-container .reactions {    
/*     display: flex; */
/*     align-items: center; */
/*     justify-content: flex-start; */
/*     height: 100%; */
/*     margin-left: -25%; */
/*     margin: -0.25em -25%; */
}

/* Icons & Texts Spacing */
#page-course-view-designer .block_point_view.reactions-container .reactions span {
/*     padding: 0 0.5em; */
}

#page-course-view-designer .block_point_view.reactions-container .withtooltip .tooltiptext {
/* 	right: -30px; */
/* 	font-size: 0.9rem; */
/* 	font-weight: normal; */
/* 	padding: 0.25em 1em !important; */
}


/*----------------- SIDEBAR -----------------*/

/* Prevent Scrollbar on Contact Form Widget */
.block_purity_custom_html form.cf * {
    max-width: 100%;
}

/* Hide Right Sidebar on Course Pages */
#page-course-view-topics [data-region="blocks-column"] {
    /*display: none;*/
}


/*----------------- HELP PAGES HIDE BREADCRUMB -----------------*/

body.course-12 .breadcrumb-item:nth-child(2),
body.course-12 .breadcrumb-item:nth-child(3),
body.course-12 .breadcrumb-item:nth-child(4),
body.course-14 .breadcrumb-item:nth-child(2),
body.course-14 .breadcrumb-item:nth-child(3),
body.course-14 .breadcrumb-item:nth-child(4) {
/*     display: none; */
}


/*----------------- CALENDAR -----------------*/

.block .minicalendar td.calendar_event_course {
/*     border: 1px solid #0B0B0B; */
}


/*----------------- FOOTER -----------------*/

/* Hide Footer Home, Login info Links */
.usertour,
.logininfo,
.homelink,
.mobilelink,
.tool_usertours-resettourcontainer {
    display: none !important;
}

footer #copyright {
    /*text-align: center;*/
    /*background: #F2F5FA;*/
    /*padding: 1rem;*/
    /*font-weight: bold;*/
}

footer .left-box {
/*     display: flex; */
/*     align-items: center; */
}

footer .right-box .social-icons img.appbadge {
/*     height: 3em; */
}

footer .right-box .social-icons img.appqrcode {
/*     width: 5em; */
/*     height: 5em; */
}


/*----------------- FANCYBOX -----------------*/

.fancybox__content {
/* 	max-width: 32% !important; */
    border-radius: 0.5rem !important;
}

.fancybox__backdrop {
    --fancybox-bg: rgba(0,0,0,0.35);
}

/* For compact mode */
.fancybox__container.is-compact .fancybox__slide.has-iframe .fancybox__content {
  width: 100%;
  height: 100%;
}

/* For all other cases */
.fancybox__slide.has-iframe .fancybox__content {
  width: 650px;
  height: 650px;
}