/******* AI course ******/

/************************************************************************************************************/
/*********************************** GENERAL-CSS************************************************************/
/**********************************************************************************************************/

@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&display=swap');


:root {
    /*** main colors***/
    --lightGray: #bdbdbd;

    /*** text colors***/
    --textColor1: #333333;
    --textColor2: #FBFBFB;
    --textColor3: #d940dd;
    --textColor4: #91e3fb;
    --textColorMenu: #2a0f52;
    --btnColor1: #3e1678;
    --btnColorHover: #3e167880;
    --btnNonSelected: #b3adf0;
    /*--textColor5: #03A4B0;*/

    /*** background colors***/
    --bgcolor1: linear-gradient(50deg, rgba(179, 173, 240, 1) 0%, rgba(242, 121, 241, 1) 29%, rgba(145, 227, 251, 1) 58%, rgba(254, 208, 190, 1) 86%);
    --bgcolor2: #3e1678;
    --bgcolor3: linear-gradient(216deg, rgba(236, 66, 236, 1) 0%, rgba(66, 205, 248, 1) 100%);
    --bgcolor4-draker: #1e0b3a;

    /*** secoundery colors***/
    --color1: #91e3fb;
    --color2: #F7F2E0;
    --color3: #EC42EC;
    /* --color4: #EAEAD2;*/
    --color5: #F1BE73;
    --color6: #8167A7;

    /*** border radius ***/
    --borderRadius: 5px;
    --borderRadius2: 0px;
    --borderRadius3: 10px;
    font-family: 'Assistant', sans-serif;

    /*** Text size ***/
    --BiggestText: 2.986rem;
    --largeText: 2.074rem;
    --middleText: 1.728rem;
    --smallerText: 1.2em;
    --contentText: 1rem;
}



/*********** START padding class ************/

.p-1 {
    padding: 0.25rem;
    /* 4px */
}

.pt-1 {
    padding-top: 0.25rem;
    /* 4px */
}

.pr-1 {
    padding-right: 0.25rem;
    /* 4px */
}

.pb-1 {
    padding-bottom: 0.25rem;
    /* 4px */
}

.pl-1 {
    padding-left: 0.25rem;
    /* 4px */
}


.p-1_5 {
    padding: 0.375rem;
    /* 6px */
}

.pt-1_5 {
    padding-top: 0.375rem;
    /* 6px */
}

.pr-1_5 {
    padding-right: 0.375rem;
    /* 6px */
}


.pb-1_5 {
    padding-bottom: 0.375rem;
    /* 6px */
}

.pl-1_5 {
    padding-left: 0.375rem;
    /* 6px */
}

.p-2_5 {
    padding: 0.625rem;
    /* 10px */
}

.pt-2_5 {
    padding-top: 0.625rem;
    /* 10px */
}

.pr-2_5 {
    padding-right: 0.625rem;
    /* 10px */
}

.pb-2_5 {
    padding-bottom: 0.625rem;
    /* 10px */
}

.pl-2_5 {
    padding-left: 0.625rem;
    /* 10px */
}


/*********** END padding class ************/

/***************************START SCROLL INDICATOR********************/

.scrollIndicator {
    position: fixed !important;
    top: 0;
    right: 0;
    z-index: 1000 !important;
    width: 100%;
    background-color: transparent;
}

.progress-barscrollIndicator {
    height: 10px;
    background: var(--color1);
    width: 0%;
}


/***************************END SCROLL INDICATOR********************/

.xblock .xblock h2 {
    font-size: var(--BiggestText) !important;
}

.xmodule_display.xmodule_HtmlBlock h3,
.secounderyTitle_h3 {
    font-size: var(--largeText) !important;
    color: var(--textColor3);
    font-weight: 800;
}

.xmodule_display.xmodule_HtmlBlock h4,
.h4_title {
    font-size: var(--middleText) !important;
}


h5 {
    font-size: var(--smallerText) !important;
    color: var(--btnColor1);
}

.course-wrapper .course-content p,
.course-wrapper .courseware-results-wrapper p {
    font-size: var(--contentText) !important;
}

#main,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
label {
    text-align: right;
    font-family: 'Assistant', sans-serif;
}

a,
li,
span,
.wrapper-course-material .course-tabs li a,
.wrapper-course-material .course-tabs li a:visited,
.rtl .course-index .accordion .course-navigation .button-chapter .group-heading {
    font-family: 'Assistant', sans-serif;
}


/*background start*/

.window-wrap {
    background: var(--bgcolor2);
    background-size: 25%;
}

.container>div {
    background: unset;
}

.course-wrapper {
    background-color: var(--bgcolor2);
}

#content {
    background-color: var(--textColor2);
}

body.view-in-course .wrapper-course-material .course-material {
    padding: 0;
    background-color: var(--textColor2);
}

.course-wrapper .course-content {
    background: transparent;
}

.window-wrap {
    background-image: url(https://courses.campus.gov.il/asset-v1:CampusIL+GOV_AIBE_HE+2023_1+type@asset+block@BG-New.png);
    background-size: contain;
    /*background-size: 25%;*/
}

.container>div {
    background: unset;
}

.course-wrapper {
    background-color: var(--textColor2);
}

#content {
    background-color: var(--textColor2);
}

body.view-in-course .wrapper-course-material .course-material {
    padding: 0;
    background-color: var(--textColor2);
}

.course-wrapper .course-content {
    background: transparent;
}

/*background end*/


/* LINE BETWEEN COMPONENTS - KOA UPDATE */
.course-wrapper .course-content .vert-mod .vert,
.course-wrapper .courseware-results-wrapper .vert-mod .vert {
    border-bottom: none;
    margin-bottom: 0px;
    padding: 0 0;
}

/* course component - backgrounds and borders */
.container>div {
    border: none;
}




/* ########################################
         Top navigation - QUINCE
######################################## */

/*** TABS ***/
a.nav-item.flex-shrink-0.nav-link.active {
    border-bottom-color: var(--bgcolor2) !important;
    color: var(--bgcolor2) !important;
}

.wrapper-course-material .course-material .course-tabs .tab a:hover,
.wrapper-course-material .course-material .course-tabs .tab a:focus,
.wrapper-course-material .course-material .course-tabs .tab a.active {
    border-bottom-color: var(--bgcolor2) !important;
    color: var(--bgcolor2) !important;
}

/*** BREADCRUMBS ***/
a.flex-shrink-0.text-primary {
    color: var(--bgcolor2) !important;
}

a.text-primary-500 {
    color: var(--bgcolor2) !important;
}

/*** LEFT BUTTONS ***/
.border-primary-700 {
    border-color: var(--bgcolor2) !important;
}


/***** Top NEXT and PREVIOUS Buttons *****/

/* NEXT */
.sequence-navigation .next-btn {
    background: var(--btnColor1) !important;
    color: var(--textColor2) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* PREVIOUS */
.sequence-navigation .previous-btn {
    background: var(--btnColor1) !important;
    color: var(--textColor2) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Next and Previous buttons on hover */
.sequence-navigation .next-btn:hover,
.sequence-navigation .previous-btn:hover {
    background: var(--color6) !important;
    color: var(--textColor2) !important;
    text-decoration: none !important;
}

/*****************************/

/***** ICON TABS ******/

/* color of non-active tabs */
.sequence-navigation .sequence-navigation-tabs .btn {
    flex-basis: 100%;
    min-width: 3rem;
    background: var(--color1);
    color: var(--textColorMenu);
    text-decoration: none !important;
    margin: 0px 2px 0px 2px;
}

/* color of tabs on hover */
.sequence-navigation .sequence-navigation-tabs .btn:hover {
    flex-basis: 100%;
    min-width: 3rem;
    background: var(--color6);
    color: var(--textColor2);
}

/* color of active tab */
a.active.btn.btn-link {
    background: var(--bgcolor1) !important;
    color: var(--textColorMenu) !important;
}

/* color of active tab */
.sequence-navigation .btn.active {
    background: var(--bgcolor1) !important;
    color: var(--textColorMenu) !important;
}

/* remove underline of active tab */
.sequence-navigation .btn.active:after {
    background: var(--bgcolor1) !important;
    bottom: -1px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
}

/* color of the V icon on tabs */
/*****
.text-success {
    color: #79d501 !important;
} *****/

/*****************************/

/********************************* END top nevigation ****************************************/


/* ##################################################
           Bottom navigation - QUINCE
################################################## */

/***** Bottom NEXT and PREVIOUS Buttons *****/

/* size of the buttons*/
.unit-navigation .next-button,
.unit-navigation .previous-button {
    border: none !important;
    flex-basis: 30% !important;
}

/* NEXT */
a.next-button.d-flex.align-items-center.justify-content-center.btn.btn-outline-primary {
    background: var(--btnColor1) !important;
    height: 41px !important;
    margin-top: 0px;
    margin-right: 1px;
    color: var(--textColor2) !important;
}

/* PREVIOUS */
a.previous-button.mr-2.d-flex.align-items-center.justify-content-center.btn.btn-outline-secondary {
    background: var(--btnColor1) !important;
    height: 41px !important;
    margin-top: 0px;
    margin-right: 1px;
    color: var(--textColor2) !important;
}

/* Next and Previous buttons on hover */
a.previous-button.mr-2.d-flex.align-items-center.justify-content-center.btn.btn-outline-secondary:hover,
a.next-button.d-flex.align-items-center.justify-content-center.btn.btn-outline-primary:hover {
    background: var(--color6) !important;
    color: var(--textColor2) !important;
}

/* Disabled buttons */
.btn-outline-secondary:disabled {
    background: var(--color6) !important;
    color: var(--textColor2) !important;
}

/********************************* END bottom navigation ****************************************/

/* ####################################
         RIGHT MENU - QUINCE
#################################### */

/***** General settings ******/

/* remove the bar above the subjects */
.py-1.bg-gray-100.border-top.border-bottom.border-light-400 {
    display: none;
}

/* color of the side menu title */
strong.p-2\.5.d-inline-block.course-outline-sidebar-title {
    color: var(--textColorMenu);
    margin-right: 31%;
}

/* spacing color around menu */
[dir=rtl] #course-outline-sidebar {
    padding: 5px 10px 10px 10px;
    background-color: white !important;
}

/* side menu */
section#course-outline-sidebar {
    margin: 0 !important;
}

/* color of the menu icons: +, - and X */
.btn-icon.btn-icon-primary {
    /* background-color: var(--color4) !important;*/
    color: var(--textColorMenu) !important;
}

/* color of the menu tabs on hover */
.collapsible-trigger:hover,
.is-open>.collapsible-trigger:hover {
    background-color: var(--btnColor1) !important;
    color: var(--textColor2) !important;
}

/* color of the + icon on hover */
.collapsible-trigger:hover .btn-icon.btn-icon-primary {
    color: var(--textColor2) !important;
}

/* circle color around +,- icons */
.btn-icon.btn-icon-primary.active,
.btn-icon.btn-icon-primary.hover,
.btn-icon.btn-icon-primary:active,
.btn-icon.btn-icon-primary:hover {
    background-color: #0000 !important;
}

/* circle shadow around +,- icons */
.btn-icon.btn-icon-primary.focus,
.btn-icon.btn-icon-primary:focus {
    box-shadow: none !important;
}

/* color of the V icon on menu tabs */
svg.svg-inline--fa.fa-check-circle.fa-fw.float-left.text-success.mt-1 {
    color: #79d501 !important;
    border: 1px solid #ffffff;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    background-color: white !important;
}

svg.svg-inline--fa.fa-check-circle.fa-fw.float-left.text-gray-400.mt-1.text-gray-400 {
    color: #909191 !important;
}

/**********************************************/


/***** Active menu tab *****/

/* color of the active menu tab */
.is-open>.collapsible-trigger {
    background-color: var(--btnNonSelected) !important;
}

/* text color of the active menu tab */
.is-open>.collapsible-trigger .col-10.ml-3.p-0.font-weight-bold.text-dark-500 {
    color: var(--textColorMenu) !important;
    font-weight: 700 !important;
}

/* color of the - icon of the active menu tab */
.is-open>.collapsible-trigger .btn-icon.btn-icon-primary {
    color: var(--textColorMenu) !important;
}

/***************************/


/***** Inner tabs of the active menu *****/

/* background color of the inner tabs of the active menu */

.active-sequence-color-background {
    background-color: #4ecbf5;
}

.pgn-transition-replace-group.position-relative {
    background-color: #91e3fb7d;
}

/* text of the inner tabs of the active menu */
.col-10.p-0.ml-3.text-break {
    font-weight: 600;
    font-size: 17px !important;
}

/* text color of the inner tabs of the active menu */
.col-10.p-0.ml-3.text-break a {
    color: var(--textColorMenu) !important;
    text-decoration: none !important;
}

/* text color on hover of the inner tabs of the active menu */
.col-10.p-0.ml-3.text-break a:hover {
    color: var(--textColor1) !important;
    text-decoration: none !important;
}

/* dividing line color of the inner tabs of the active menu */
.border-light {
    border-color: var(--bgcolor2) !important;
}

/* side line of the inner tabs of the active menu*/
[dir=rtl] #courseHome-outline .collapsible-body ol li {
    border-right: 5px solid #0000 !important;
}

#courseHome-outline .collapsible-body ol li {
    padding: 10px 10px;
}

/***************************/


/***** Non-active menu tabs *****/

/* text color of the non-active menu */
.text-dark-500 {
    color: var(--textColorMenu) !important;
    font-weight: 600 !important;
    font-size: 17px !important;
}

/* text color of the non-active menu on hover */
.collapsible-trigger:hover .col-10.ml-3.p-0.font-weight-bold.text-dark-500 {
    color: var(--textColor2) !important;
}

/* color of the + icon of the non-active menu on hover */
.collapsible-trigger:hover .btn-icon.btn-icon-primary {
    color: var(--textColor2) !important;
}

/**********************************/

/********************************* END RIGHT MENU ****************************************/


/* #####################################
           Main title - QUINCE
##################################### */


/**Main title**/
h1.mb-0.h3 {
    background-image: url(https://courses.campus.gov.il/asset-v1:CampusIL+GOV_AIBE_HE+2023_1+type@asset+block@banner_-_09102024_V2_300x.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 23px 23px 23px 149px;
    font-weight: 800;
    color: var(--textColor2);
    font-size: 2.9em;
}

/********************************* END Main title ****************************************/



/************************************************************************************************************/
/*********************************** CONTENT-SECTION ***********************************************************/
/**********************************************************************************************************/

/**************************************************************** START Breadcrumbs *****************************************************/
i.fa.fa-home {
    color: var(--btnColor1);
}

.page-header {
    border-bottom: 0px solid !important;
    padding: 19px 32px 21px 0px !important;
}

.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .fa-bookmark {
    color: var(--color2);
}

/*
.breadcrumbs .nav-item a, .breadcrumbs .fa-angle-right{
    color: var(--color2) !important;  
}*/


.course-wrapper main {
    padding: 0px 36px 0px 0px !important;
}

/**************************************************************** END Breadcrumbs *****************************************************/


/********************************************************************** START top unit navigation menu ****************************************************/


.fa-check-circle:before {
    content: "\f058";
    color: var(--color2);
}


.fa-check-circle:before {
    content: "\f058";
    color: var(--color2);
}

.xmodule_display.xmodule_SequenceBlock .sequence-nav {
    background-color: none;
}


/****** Next/Previous buttons ********/
button.sequence-nav-button.button-previous.disabled {
    height: 41px;
    margin-top: 0px;
}


button.sequence-nav-button.button-previous {
    background: #3e1678 !important;
    height: 41px !important;
    margin-top: 0px;
    margin-right: 1px;
    border-bottom-right-radius: 102px !important;
    border-top-right-radius: 102px !important;
}

button.sequence-nav-button.button-next {
    background: #3e1678 !important;
    height: 41px !important;
    margin-top: 0px;
    margin-right: 1px;
    border-bottom-left-radius: 102px !important;
    border-top-left-radius: 102px !important;
}

.fa-chevron-next::before {
    content: "\f0d9";
    font-size: 1.2em !important;
}

.fa-chevron-prev::before {
    content: "\f0da";
    font-size: 1.2em !important;
}


.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button.seq_problem .icon::before {
    color: white;
}

.seq_other.inactive.nav-item.tab {
    border: none !important;
}

nav.course-navigation {
    background: var(--textColor2);
}

.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .icon::before {
    color: black !important;
}



.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button.active .icon::before {
    color: black !important;
}




/****** Numbers buttons*****/
.xblock.xmodule_display #sequence-list li {
    border: none;
}

nav.sequence-list-wrapper ol#sequence-list {
    height: 41px !important;
}

.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button {
    width: 97%;
    height: 41px !important;
    /* position: relative;*/
    margin: 0 !important;
    padding: 0;
    display: block;
    text-align: center;
    box-sizing: border-box;
    overflow: visible;
}

.xmodule_display.xmodule_SequenceBlock .sequence-nav ol {
    display: flex;
    justify-content: center;
    width: 100%;
}

/*** Active number tab**/
.xmodule_display.xmodule_SequenceBlock .sequence-nav button.active {
    background: linear-gradient(50deg, rgba(179, 173, 240, 1) 0%, rgba(242, 121, 241, 1) 29%, rgba(145, 227, 251, 1) 58%, rgba(254, 208, 190, 1) 86%) !important;
    border: 0px;
    font-weight: 650;
    border-bottom: 0px !important;
}

.xmodule_display.xmodule_SequenceBlock .sequence-nav button.active .icon,
.xmodule_display.xmodule_SequenceBlock .sequence-nav button.active .icon::before {
    color: var(--textColor1) !important;
    font-weight: 700 !important;
}



.xmodule_display.xmodule_SequenceBlock .sequence-nav button:hover {
    background-color: var(--btnColorHover) !important;
    background: var(--btnColorHover) !important;
    border: 0px;
    color: var(--textColor2) !important;
}

button.sequence-nav-button.button-previous:hover .sequence-nav-button-label,
button.sequence-nav-button.button-previous span.icon.fa.fa-chevron-prev {
    color: var(--textColor2) !important;
}

button.sequence-nav-button.button-next:hover .sequence-nav-button-label,
button.sequence-nav-button.button-previous span.icon.fa.fa-chevron-prev {
    color: var(--textColor2) !important;
}

.seq_problem .inactive .nav-item .tab .icon {
    color: var(--textColor2) !important;
}



.xmodule_display.xmodule_SequenceBlock .sequence-nav button:hover .icon::before {
    /* background-color: var(--textColor1) !important;*/
    border: 0px;
    color: var(--textColor2) !important;
}

/*** Non selected numbers tab**/
.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button {
    background-color: var(--btnNonSelected) !important;
    color: var(--textColor4) !important;
}

.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .icon {
    /* background-color: var(--bgcolor4-draker)!important;*/
    color: var(--textColor4) !important;
}

/* span.icon.fa.seq_problem {
color: var(--bgcolor1)!important;    
}  */

.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}


/******Tooltip****/
.xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .sequence-tooltip {
    padding: 5px 10px;
}

.xblock.xmodule_display #sequence-list li button {
    overflow: visible !important;
}

/********************************************************************** END top unit menu ****************************************************/


/*****************************************************************************/
/*********************************** SIDE-SECTION *****************************/
/********************************************************************************

 /********************************************************************** START Bookmark and Search *****************************************/
.wrapper-course-modes {
    padding: 13px 0px 13px 0px !important;
}

.button.search-button {
    background: var(--lightGray);
}

.search-bar .search-button {
    background: var(--lightGray);
}

.search-bar .search-field {
    border: 1px solid var(--lightGray) !important;
    border-radius: var(--borderRadius2);
}

.search-bar .search-button:hover {
    background: var(--color1) !important;
}

body .courseware-bookmarks-button .bookmarks-list-button {
    color: var(--lightGray);
    border-color: var(--lightGray) !important;
}

body .courseware-bookmarks-button .bookmarks-list-button:hover {
    background: var(--color1) !important;
    color: var(--textColor1) !important;
    border-color: var(--lightGray) !important;
}

.courseware-bookmarks-button .bookmarks-list-button::before {
    color: var(--lightGray);
}

/************************************************ END bookmark & search ******************************************************************/
#content>div.container>div>div {
    display: block;
    position: sticky;
    top: 10px;
}

/******************************************************************** START Sticky right menu *******************************************


/***Arrow***/
.course-index .accordion .course-navigation .button-chapter .group-heading .icon {
    /*position: absolute ;
  right: 24px !important;
  top: 12px  !important;
  font-size: 1.2em  !important;*/
    color: var(--textColorMenu) !important;
}


/* RIGHT MENU */
.course-index {
    border: none !important;
}


.course-index .accordion .course-navigation .chapter-content-container .chapter-menu .menu-item a {
    position: relative;
    display: block;
    padding: 8px 30px 6px 0px;
    border-radius: 5px;
    font-family: 'Assistant', sans-serif;
}


body .course-index .accordion .course-navigation .chapter-content-container .chapter-menu .menu-item a {
    background-color: #ffffff00 !important;
}



span.group-heading.active {
    background-color: var(--bgcolor2);
    color: #FBFBFB !important;
}

p.accordion-display-name {
    color: var(--bgcolor4-draker);
    padding-right: 10px;
}

.btn-link,
.proctored_exam_status .exam-timer .exam-button-turn-in-exam,
.course-index .accordion .course-navigation .chapter-content-container .chapter-menu .menu-item a {
    font-size: 1em;
}

.course-index .accordion .course-navigation .button-chapter,
.course-index .accordion .course-navigation .button-chapter.is-open {
    box-shadow: none !important;
    background-color: var(--textColor2) !important;
    background-image: none;
}



.course-index .accordion .course-navigation .chapter-content-container .chapter-menu .menu-item.active .accordion-nav .accordion-display-name {
    color: var(--textColorMenu) !important;
    font-weight: 700;
    padding-right: 16px;
    padding-top: 5px;
    padding-bottom: 5px;
    background: var(--color1);
    border-radius: 20px;
}


.course-index .accordion .course-navigation .chapter-content-container.is-open {
    border-bottom: none;
    /*border-right: 1px dashed #00B4D8;*/
    margin-right: 25px;
}

body .course-index .accordion .course-navigation .button-chapter.active .group-heading {
    color: var(--textColorMenu) !important;
    background: var(--btnNonSelected);
    font-weight: 900;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 20px;
}


.course-index .accordion .course-navigation .button-chapter:hover {
    color: var(--textColorMenu) !important;
    background: var(--btnNonSelected) !important;
    font-weight: 900;
    border-radius: 60px;
}



body .course-index .accordion .course-navigation .button-chapter.active .group-heading .icon.fa-caret-down:before {
    content: "\f0d7";
    color: var(--textColorMenu);
    font-size: 1.4em;
    line-height: 0.8em;
    top: 15px !important;
}

body .course-index .accordion .course-navigation .button-chapter.active .group-heading .icon.fa-caret-down {
    top: 15px !important;
}

span.group-heading:hover {
    text-decoration: none;
    font-weight: 500;
}

body .course-index .accordion .course-navigation .button-chapter .group-heading {
    padding: 15px 40px 15px 20px;
    color: var(--textColorMenu);
    font-weight: 700;
}

.course-index .accordion .course-navigation .chapter-content-container .chapter-menu .menu-item {
    margin: 4px 0;
    background: inherit;
    /*   background-color: #f3f3f3; */
    margin-top: -27px;
}

.course-index .accordion .course-navigation .chapter-content-container {
    background: transparent;
}

p.accordion-display-name {
    margin: auto;
    padding-bottom: -1px;
    font-size: 1.1em;
    color: var(--textColorMenu);
}

p.accordion-display-name:hover {
    text-decoration: none;
    color: var(--textColorMenu);
    font-weight: 700;
    background: var(--color1);
    text-decoration: none;
    border-radius: 20px;
}

p.accordion-display-name:hover .menu-item:before {
    content: " ";
    height: 25px;
    width: 22px;
    background-image: url(https://courses.campus.gov.il/asset-v1:CampusIL+GOV_AIBE_HE+2023_1+type@asset+block@activeCircle_300x.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    position: relative;
    background-position: top;
    top: 41px;
    right: 5px;
}


.course-index .accordion .course-navigation .button-chapter:hover,
.course-index .accordion .course-navigation .button-chapter:focus {
    text-decoration: none;
}

.course-index .accordion .course-navigation .chapter-content-container .chapter-menu .menu-item a:hover {
    text-decoration: none;
}

.menu-item:before {
    content: " ";
    height: 14px;
    width: 22px;
    background-image: url(https://courses.campus.gov.il/asset-v1:CampusIL+GOV_AIBE_HE+2023_1+type@asset+block@nonActiveCircle_300x.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    position: relative;
    background-position: top;
    top: 33px;
    right: 5px;
}

.menu-item.active:before {
    content: " ";
    height: 25px;
    width: 22px;
    background-image: url(https://courses.campus.gov.il/asset-v1:CampusIL+GOV_AIBE_HE+2023_1+type@asset+block@activeCircle_300x.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    position: relative;
    background-position: top;
    top: 41px;
    right: 5px;
}

.course-index .accordion .course-navigation .chapter-content-container .chapter-menu {
    padding: 0 30px;
    overflow: hidden;
    margin-right: -40px;
}


/*
ol.tabs.course-tabs a{
color: white !important;

}

ol.tabs.course-tabs a:hover{
  border-bottom-color: white !important;
  }*/


.wrapper-course-material .course-material .course-tabs .tab a:hover,
.wrapper-course-material .course-material .course-tabs .tab a:focus,
.wrapper-course-material .course-material .course-tabs .tab a.active {
    border-bottom-color: var(--bgcolor2) !important;
}

/******************************************************** END Sticky right menu ******************************************************************/


/************************************************* START Bottom navigation **********************************************************************/

/* Bottom navigation buttons*/
button.sequence-nav-button.button-previous.disabled {
    position: relative;
    min-width: 92px !important;
    max-width: 200px;
    text-overflow: ellipsis;
    background-color: var(--bgcolor1);
    color: var(--textColor1);
    border-color: var(--bgcolor1);
    font-weight: 500;
}


button.sequence-nav-button.button-next,
button.sequence-nav-button.button-previous {
    position: relative;
    min-width: 92px !important;
    max-width: 200px;
    text-overflow: ellipsis;
    background-color: var(--btnColor1) !important;
    color: var(--textColor2);
    border-color: var(--btnColor1) !important;
    font-weight: 500;
}


button.sequence-nav-button.button-previous .sequence-nav-button-label,
button.sequence-nav-button.button-previous span.icon.fa.fa-chevron-prev {
    color: var(--textColor2) !important;
}



.xmodule_display.xmodule_SequenceBlock .sequence-bottom .sequence-nav-button button.sequence-nav-button.button-previous span.icon.fa.fa-chevron-prev {
    color: var(--bgcolor1);
}

.sequence-bottom button.sequence-nav-button.button-next:hover,
.sequence-bottom button.sequence-nav-button.button-previous:hover {
    background-color: var(--btnColorHover) !important;
    border: none;
    border-color: var(--textColor2) !important;
    color: var(--textColor2) !important;
}

.xmodule_display.xmodule_SequenceBlock .sequence-nav-button:hover span.icon.fa.fa-chevron-prev,
.xmodule_display.xmodule_SequenceBlock .sequence-nav-button:hover span.icon.fa.fa-chevron-next {
    color: var(--textColor2) !important;
}



/************************************************* END Bottom navigation **********************************************************************/

/***************Course content***************/

/**Bookmark button**/
.course-content .bookmark-button-wrapper {
    margin-bottom: 20px;
    padding: 0px 88.5% 0px 0px;
    color: var(--textColor3) !important;
}

button.btn.btn-link.bookmark-button.bookmarked {
    color: var(--textColor3);
}

/*** Debugging team button **/
.wrap-instructor-info {
    padding-left: 65px;
}

/*******Text margin*****/
.xmodule_display.xmodule_HtmlBlock {
    line-height: 1.4em;
    padding-right: 23px;
    padding-left: 65px;
}


/*Main title*/
h2.hd.hd-2.unit-title {
    background-image: url(https://courses.campus.gov.il/asset-v1:CampusIL+GOV_AIBE_HE+2023_1+type@asset+block@banner_-_09102024_V2_300x.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-right: 23px;
    padding-right: 8%;
    font-weight: 800;
    color: var(--textColor2);
    padding: 38px;
    padding-right: 23px;
}



.title-container {
    display: flex;
    gap: 6px;
}



/**h3**/
h3.h3_title1 {
    font-weight: 800 !important;
    /*background: var(--bgcolor1);*/
    font-size: var(--largeText) !important;
    padding-bottom: 10px;
    /* -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;*/
    display: inline-block;
}

h3.h3_title1:after {
    content: " ";
    height: 20px;
    width: 18px;
    background-image: url(https://courses.campus.gov.il/asset-v1:CampusIL+GOV_AIBE_HE+2023_1+type@asset+block@spark2.png);
    background-size: contain;
    background-repeat: no-repeat;
    /* display: block; */
    position: absolute;
    background-position: top;
    margin-top: -2px;
    filter: brightness(22);
}


h3.h3-survey {
    font-weight: 800 !important;
    /* background: var(--bgcolor1); */
    font-size: var(--largeText) !important;
    /* padding-bottom: 10px; */
    color: #2a0f52 !important;
    height: 100px;
    position: relative;
    right: 50px;
}



.h3-survey::after {
    content: "";
    display: block;
    position: relative;
    height: 100px;
    width: 80px;
    right: -86px;
    top: -70px;
    z-index: 0;
    background-image: url(https://courses.campus.gov.il/asset-v1:CampusIL+GOV_AIBE_HE+2023_1+type@asset+block@Asset_9_3001x.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}



h3.h3-practice {
    font-weight: 800 !important;
    /* background: var(--bgcolor1); */
    font-size: var(--largeText) !important;
    /* padding-bottom: 10px; */
    color: #2a0f52 !important;
    height: 100px;
    position: relative;
    right: 50px;
}



.h3-practice::after {
    content: "";
    display: block;
    position: relative;
    height: 100px;
    width: 80px;
    right: -86px;
    top: -70px;
    z-index: 0;
    background-image: url(https://courses.campus.gov.il/asset-v1:CampusIL+GOV_AIBE_HE+2023_1+type@asset+block@Asset_7_3001x.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}



h3.h3-test {
    font-weight: 800 !important;
    /* background: var(--bgcolor1); */
    font-size: var(--largeText) !important;
    /* padding-bottom: 10px; */
    color: #2a0f52 !important;
    height: 100px;
    position: relative;
    right: 50px;
}



.h3-test::after {
    content: "";
    display: block;
    position: relative;
    height: 100px;
    width: 80px;
    right: -86px;
    top: -70px;
    z-index: 0;
    background-image: url(https://courses.campus.gov.il/asset-v1:CampusIL+GOV_AIBE_HE+2023_1+type@asset+block@Asset_8_3001x.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


h3.h3_title2 {
    font-weight: 800 !important;
    /* color: var(--color6);*/
    font-size: var(--middleText) !important;
    padding-bottom: 11px;
    position: relative;
    padding-right: 69px;
    display: inline;
}

.h3_title2:after {
    content: "";
    display: block;
    position: absolute;
    height: 70px;
    width: 70px;
    right: -7px;
    top: -16px;
    z-index: 0;
    background-image: url(https://courses.campus.gov.il/asset-v1:Labor+GOV_Employe_HE+2024_1+type@asset+block@choosePersonpng.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline;
}

h3.h3_title4 {
    font-weight: 800 !important;
    /* color: var(--color6);*/
    font-size: var(--middleText) !important;
    padding-bottom: 11px;
    position: relative;
    padding-right: 69px;
    display: inline;
}

.h3_title4:after {
    content: "";
    display: block;
    position: absolute;
    height: 70px;
    width: 70px;
    right: -7px;
    top: -16px;
    z-index: 0;
    background-image: url(https://courses.campus.gov.il/asset-v1:Labor+GOV_Employe_HE+2024_1+type@asset+block@presentorClip.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


h3.h3_title5 {
    font-weight: 800 !important;
    /* color: var(--color6);*/
    font-size: var(--middleText) !important;
    padding-bottom: 11px;
    position: relative;
    padding-right: 69px;
    display: inline;
}

.h3_title5:after {
    content: "";
    display: block;
    position: absolute;
    height: 70px;
    width: 70px;
    right: -7px;
    top: -16px;
    z-index: 0;
    background-image: url(https://courses.campus.gov.il/asset-v1:Labor+GOV_Employe_HE+2024_1+type@asset+block@animationClip.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.h3_title5_2 {
    font-weight: 800 !important;
    /* color: var(--color6); */
    font-size: var(--smallerText) !important;
    padding-bottom: 11px;
    position: relative;
    padding-right: 58px;
    display: inline;
}

.h3_title5_2:after {
    content: "";
    display: block;
    position: absolute;
    height: 56px;
    width: 56px;
    right: -7px;
    top: -16px;
    z-index: 0;
    background-image: url(https://courses.campus.gov.il/asset-v1:Labor+GOV_Employe_HE+2024_1+type@asset+block@checkList.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Behind the Scenes*/
h3.h3_title6 {
    font-weight: 800 !important;
    /* color: var(--color6);*/
    font-size: var(--middleText) !important;
    padding-bottom: 11px;
    position: relative;
    padding-right: 69px;
    display: inline;
}

.h3_title6:after {
    content: "";
    display: block;
    position: absolute;
    height: 70px;
    width: 70px;
    right: -7px;
    top: -16px;
    z-index: 0;
    background-image: url(https://courses.campus.gov.il/asset-v1:Labor+GOV_Employe_HE+2024_1+type@asset+block@checkList.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

h3.h3_title7 {
    font-weight: 800 !important;
    /*color: var(--color6);*/
    font-size: var(--middleText) !important;
    padding-bottom: 11px;
    position: relative;
    padding-right: 69px;
    display: inline;
}

.h3_title7:after {
    content: "";
    display: block;
    position: absolute;
    height: 70px;
    width: 70px;
    right: -7px;
    top: -16px;
    z-index: 0;
    background-image: url(https://courses.campus.gov.il/asset-v1:Labor+GOV_Employe_HE+2024_1+type@asset+block@׳³ֲž׳³ֲ¨׳³ֲ¢׳³ג„¢׳³ג€¢׳³ֲŸ_׳³ֲœ׳³ֲž׳³ֲ¢׳³ֲ©׳³ג€.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


/**h4**/
.h4_title {
    font-weight: 700 !important;
    color: var(--textColorMenu) !important;
    /* font-size: var(--smallerText) !important;*/
    margin-bottom: 4px !important;
    display: inline-block;
}


.h5_title {
    display: inline-block;
}


/*
  .h5_title:before {
    content: " ";
    height: 11px;
    width: 18px;
    background-image: url(https://courses.campus.gov.il/asset-v1:CampusIL+GOV_AIBE_HE+2023_1+type@asset+block@twoWhiteStrips_2.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    background-position: top;
    margin-top: 22px;
    margin-right: -10px;
    filter: brightness(22);
}*/


/* .h5_title::after{
  content: " ";
  height: 20px;
  width: 18px;
  background-image: url(https://courses.campus.gov.il/asset-v1:CampusIL+GOV_AIBE_HE+2023_1+type@asset+block@rhombus.png);
  background-size: contain;
  background-repeat: no-repeat;

  position: absolute;
  background-position: top;
  margin-top: -2px;

}




.h5_title:after {
    content: " ";
    background: linear-gradient(50deg, rgba(179, 173, 240, 1) 0%, rgba(242, 121, 241, 1) 29%, rgba(145, 227, 251, 1) 58%, rgba(254, 208, 190, 1) 86%);
    background-size: 100%;
    height: 4px !important;
    display: block;
    width: auto;
}


.h4_title::before {
    content: " ";
    height: 20px;
    width: 18px;
    background-image: url(https://courses.campus.gov.il/asset-v1:CampusIL+GOV_AIBE_HE+2023_1+type@asset+block@strip.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    background-position: bottom;
    margin-top: 28px;
    margin-right: -13px;

}*/



/**p**/

/***********************************************************contant area*********************************************/
/*.container>div {
 
  width: 100%;
  border: 1px solid #c8c8c8 !important;
  padding: 14px !important;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}*/


nav.course-navigation {
    /*  border: 1px solid #c8c8c8;*/
}


.course-wrapper .course-content p,
.course-wrapper .courseware-results-wrapper p {
    /*font-size: var(--contentText) !important;*/
    line-height: 1.6em !important;
}

section.textSection.paragraphs_Only {
    padding-bottom: 60px;
}

.content_image-container {
    display: inline-flex;
}



/***-----------------------------------START table -----------------------------------------****/
.xmodule_display.xmodule_HtmlBlock table td,
.xmodule_display.xmodule_HtmlBlock table th {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid var(--textColor4);
    font-size: var(--contentText);
}

.xmodule_display.xmodule_HtmlBlock th {
    background: var(--textColor4);
    font-weight: bold;
    color: var(--textColor1);
}

/***-----------------------------------END table -----------------------------------------****/




/***-----------------------------------  list -----------------------------------------****/

/***-----------------------------------START unorder list -----------------------------------------****/

ul li::marker {
    font-size: larger;
    font-weight: 600;
    color: var(--bgcolor2);
}


.xmodule_display.xmodule_HtmlBlock ul {
    margin-right: 1em;
}

/***----------------------------------- END unorder list -----------------------------------------****/

/***-----------------------------------START order list -----------------------------------------****/

ol li::marker {
    font-size: larger;
    font-weight: 600;
    color: var(--bgcolor2);
}

.xmodule_display.xmodule_HtmlBlock ol {
    margin-right: 1em;
}


/***-----------------------------------END order list -----------------------------------------****/



/**************************************************************START video part ***********************************************************************************************/
.xblock.xblock-student_view.xblock-student_view-video.xmodule_display.xmodule_VideoBlock.xblock-initialized h3.hd.hd-2 {
    font-weight: 700 !important;
    color: var(--color1);
    padding-bottom: 10px;
    margin: 0px -10px 12px 0px;
    display: none;
}





.xblock.xblock-student_view.xblock-student_view-video.xmodule_display.xmodule_VideoBlock.xblock-initialized {
    padding-right: 36px;
    padding-left: 75px;
}

/**Lower margin**/
.xblock.xblock-student_view.xblock-student_view-video.xmodule_display.xmodule_VideoBlock.xblock-initialized {
    padding-bottom: 50px !important;
}

/*background*/



.xmodule_display.xmodule_VideoBlock .video {
    background: #f5f5f5;
    display: block;
    margin: 0 -5px !important;
    padding: 5px !important;
    border-radius: 5px;
    outline: none;
}

/**************************************************************END video part ***********************************************************************************************/





/***********FrameSection **************/
section.textSection.frameSection {
    padding-bottom: 0px;
}

/**Voice at the head area*/
section.textSection.frameSection {
    margin-bottom: 0em !important;
}










/******************************************************************************************* START Questions **************************************************************************/

.problem-header,
h3.poll-header,
.word_cloud h3 {
    font-weight: 800 !important;
    color: var(--bgcolor2) !important;
    padding-bottom: 26px;
    padding-top: 0px;
    margin-right: 82px;
    display: block;
}



h3.poll-header:before,
.problem-header:before,
.word_cloud h3::before {
    content: "";
    display: block;
    position: relative;
    height: 100px;
    width: 80px;
    right: -92px;
    top: 56px;
    z-index: 0;
    background-image: url(https://courses.campus.gov.il/asset-v1:CampusIL+GOV_AIBE_HE+2023_1+type@asset+block@QmarkNew_300x.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


h3.poll-header:before {
    content: "";
    display: block;
    position: relative;
    height: 100px;
    width: 80px;
    right: -92px;
    top: 56px;
    z-index: 0;
    background-image: url(https://courses.campus.gov.il/asset-v1:CampusIL+GOV_AIBE_HE+2023_1+type@asset+block@Asset_4_3001x.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}



.xblock.xblock-student_view.xblock-student_view-problem.xmodule_display.xmodule_ProblemBlock.xblock-initialized {
    padding-right: 19px;
    padding-bottom: 30px;
    padding-left: 65px;
}


.decorativeFrame {
    /* border: 4px solid var(--bgcolor3); */
    border-radius: var(--borderRadius3);
    padding: 3px;
    /* padding-top: 25px;*/
    background: var(--bgcolor3);
}

.decorativeFrame div {
    background: var(--bgcolor2);
    color: white;
    padding: 12px;
    border-radius: 8px;
}


h5 {
    font-weight: 600;
}


/***SURVEY***/

.poll-container {
    margin-top: 50px;
}

.poll-answer-text {
    font-weight: normal !important;
}

.poll-question p {
    font-weight: bold;
}

.poll-answer-label p {
    font-weight: normal !important;
}

/* remove title of the feedback*/
.poll-results-wrapper h3 {
    display: none;
}

.poll-results-wrapper p {
    color: black !important;
}


/*****Solution******/

.xmodule_display.xmodule_ProblemBlock .hint-text {
    display: block !important;
    margin-bottom: 20px;
}

.solutionContainer,
.poll-feedback {
    padding: 2%;
    background: var(--bgcolor1);
    border: 2px solid var(--btnColor1) !important;
    border-radius: 10px;
}

.solutionContainer p,
.poll-feedback p {
    color: white !important;
}

.solutionContainer h4 {
    color: white !important;
}



/****  ****/
.xmodule_display.xmodule_ProblemBlock .btn-brand:disabled {
    background: var(--lightGray) !important;
}


.xmodule_display.xmodule_ProblemBlock div.problem-progress {
    display: none !important;
}



.wrapper-problem-response p {
    margin-bottom: 0.5em !important;
}

.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup label {
    padding: 10px;
    padding-right: 46px;
    position: relative;
    font-size: var(--contentText);
    line-height: normal;
    cursor: pointer;
    border-radius: 7px !important;
    color: var(--textColor1);
}


.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover+label {
    border: 2px solid var(--color1) !important;
    border-radius: 7px !important;
}


.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:checked+label {
    border: 2px solid var(--textColor4) !important;
    display: inline-flex;
}


.poll-input-container input,
.xblock.xmodule_display.xmodule_ProblemBlock .problem .field-input.input-radio,
.xblock.xmodule_display.xmodule_ProblemBlock .problem .field-input.input-checkbox {
    margin: 5px 5px 5px 10px !important;
    color: white !important;
    accent-color: var(--textColor4);
}


.poll-block-form-wrapper .input-main:hover,
.xmodule_display.xmodule_ProblemBlock div.problem button.btn-brand:hover,
.input-main:hover .btnCTA:hover,
.save:hover {
    background: #2a0f52 !important;
    border: 1px solid !important;
    border-color: var(--color1) !important;
    color: var(--color2) !important;
}

.save {
    margin-top: 24px;
}


button.show.problem-action-btn.btn-link.btn-small:hover {
    background-color: var(--color3) !important;
    color: var(--textColor1) !important;
}

/*
.xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container .submit {
margin-left: 10px;
float: right;
white-space: nowrap;
border-radius: 7px;
background-color: var(--color1);
        border-color: var(--color1);
font-weight: 500;
}*/

.btn-primary,
.btn-brand {
    border-color: var(--textColor4);
    background: var(--textColor4);
    color: #fcfcfc;
    box-shadow: none;
}




button.btnCTA:hover {
    background: #2a0f52 !important;
    border: 1px solid !important;
    border-color: var(--color1) !important;
}

.problem-action-buttons-wrapper {
    padding-bottom: 0px !important;
}

.wrapper-problem-response p {
    margin-bottom: 0.5em !important;
}

.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup label {
    padding: 10px;
    padding-right: 46px;
    position: relative;
    font-size: var(--contentText);
    line-height: normal;
    cursor: pointer;
    border-radius: 7px !important;
}


.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover+label {
    border: 2px solid var(--textColor4) !important;
    border-radius: 7px !important;
}

/*
.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:checked+label {
  border: 2px solid var(--color1) !important;
  display: inline-flex;
}  */

.xblock.xmodule_display.xmodule_ProblemBlock .problem .field-input.input-radio,
.xblock.xmodule_display.xmodule_ProblemBlock .problem .field-input.input-checkbox {
    margin: 5px 5px 5px 10px !important;
    color: white;
    accent-color: var(--textColor4);
}


.poll-block-form-wrapper .input-main,
.xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container .submit,
.btnCTA,
.save {
    margin-left: 10px;
    float: right;
    white-space: nowrap;
    border-radius: 7px;
    background: #42CDF8;
    font-weight: 700;
    text-shadow: none !important;
    color: var(--bgcolor2);
    border: 1px solid var(--color1);
    box-shadow: none !important;
}


.btnCTA a {
    color: var(--bgcolor2) !important;
}

.btnCTA:hover a {
    color: var(--color2) !important;
}

/*
.xmodule_display.xmodule_ProblemBlock div.problem button.btn-brand:hover {
  background-color: var(--color4);
    border-color:var(--color4) !important;
    color: var(--color1) !important;
  }  
  */


.problem-action-buttons-wrapper {
    padding-bottom: 0px !important;
}


/** answer btn**/

.xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn {
    max-width: none;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--color3);
    border: 1px solid var(--color3);
    border-radius: 4px;
    text-decoration: none;
    padding: 8px;
    margin-top: 0px !important;
}

.xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn:hover {
    text-decoration: none;
    background: var(--color1);
    color: white !important;
}

.questionAns_hd {
    font-weight: 700;
}

/******************************************************************************************* END Questions **************************************************************************/

/*solution*/

.explanation-title {
    display: none !important;
}

.hint-label {
    display: none !important;
}


.solutionContainer,
.choicegroup.capa_inputtype.message.hint-text {
    padding: 2%;
    background: var(--textColor2);
    border: 2px solid var(--bgcolor2);
    border-radius: 10px;
}

.solutionContainer p {
    color: var(--textColor1) !important;
}


.questionAns_hd {
    font-weight: 700;
}

/*end solution*/

/***-----------------------------------START accordion -----------------------------------------****/

summary {
    padding: 10px;
    background-color: #63cbeb;
    color: var(--textColor1);
    font-weight: 700;
    cursor: pointer;
}

summary:hover {
    background-color: var(--bgcolor2);
    color: var(--textColor2);
}

details[open]>summary:first-of-type {
    background-color: var(--bgcolor2);
    color: var(--textColor2);
}

details div p {
    background: #fbfbfb;
    padding: 10px;
    color: white;
}


/***-----------------------------------END accordion -----------------------------------------****/
/******************************************************************************************* START flipping cards **************************************************************************/


.flipping-cards {
    box-sizing: border-box;
    padding: 4rem 0 4rem 0;
    direction: rtl !important;
    width: 100%;
    justify-content: space-between;
    background: #fff;
    padding: 20px;
    border-radius: var(--borderRadius3);
}

/***
.card {
    position: relative;
    height: 100%;
}***/

.card__side {
    height: 100%;
    -webkit-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    -webkit-box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
}

.card__side--front {
    background-color: #fff;
}

.card__side--front-1 {
    background: var(--color1);
}

.card__side--front-2 {
    background: var(--color1);
}

.card__side--front-3 {
    background: var(--color1);
}

.card__side--back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.card__side--back-1 {
    background: var(--color1);
    color: white !important;
}

.card__side--back-2 {
    background: var(--color1);
    color: white !important;
}

.card__side--back-3 {
    background: var(--color1);
    color: white !important;
}

.card__side--back-1 p {
    color: white !important;
}

.card__side--back-2 p {
    color: white !important;
}

.card__side--back-3 p {
    color: white !important;
}

.card:hover .card__side--front-1,
.card:hover .card__side--front-2,
.card:hover .card__side--front-3 {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.card:hover .card__side--back {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
}

.card__details {
    position: absolute;
    z-index: 999;
    text-align: center !important;
    width: 100%;
    font-weight: bold !important;
    color: white !important;
    background-color: var(--color1) !important;
    bottom: 0;
}

.card__side img {
    width: 100%;
    position: absolute;
}

.card__title--1 .fas {
    font-size: var(--middleText);
}

.card__title--2 .fas {
    font-size: var(--middleText);
}

.card__title--3 .fas {
    font-size: var(--middleText);
}

.card__cta {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
}

.card__price-box {
    text-align: center;
    color: #313131;
    /* padding: 0.15vw; */
}

.card__price-only {
    font-size: 1.4rem;
    text-transform: uppercase;
}

.card__price-value {
    font-size: 6rem;
    font-weight: 100;
}

.flip-row {
    display: inline-grid;
    grid: 3;
    grid-template-columns: 33% 33% 33%;
    box-sizing: border-box;
    grid-gap: 15px;
}

.flip-row:not(:last-child) {
    /* margin-bottom: 5rem;
    margin-top: 5rem; */
}

.flip-row::after {
    /* content: "";
    display: table;
    clear: both; */
}

.flip-row [class^="col-"] {
    /* float: left; */
}

.flip-row .cards-col-1-of-3 {
    width: 15.5vw;
    display: inline-block;
    /*      margin: 1.5vw;*/
    height: 20vw;
}

/******************************************************************************************* END flipping cards **************************************************************************/