/* course specs list
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* main content container
======================================================================================================================================================================================================== */

/* main container */
html > body .course-specs-list-wrapper {color: inherit;}

html > body .course-specs-list-wrapper::before
{
    transform: translate3d(-50%,-50%,0);
    top: 55%; left: 50%; display: block; width: 75%;
    border-width: 0.2rem; border-style: solid; border-color: currentColor;
    opacity: 0.05;
}










/* title container
======================================================================================================================================================================================================== */

/* main container */
/*html > body .course-specs-list-wrapper .title {}*/





/* headings
==================================================================================================== */

/* main container */
html > body .course-specs-list-wrapper .title :is(h1,h2,h3,h4,h5,h6)
{
    font-family: var(--outfit); font-weight: 600; font-size: 2.4em; line-height: 1.5em;
}










/* list container
======================================================================================================================================================================================================== */

/* main container */
/*html > body .course-specs-list-wrapper .list {}*/





/* list
==================================================================================================== */

/* main container */
html > body .course-specs-list-wrapper .list ul
{
    /* variables */
    --gap: 2em;
    --icon-width: 5em;
    --item-border-radius: 0.5em;
    --corner-size: 3em;
    --corner-border-width: 0.4rem;

    /* flex rules */
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; row-gap: var(--gap); column-gap: var(--gap);

    /* standard rules */
    padding: var(--gap);
}

/* mobile settings */
@media only screen and (max-width: 640px)
{
    html > body .course-specs-list-wrapper .list ul
    {
        --gap: 1.5em;
        --icon-width: 4em;
    }
}
@media only screen and (max-width: 480px)
{
    html > body .course-specs-list-wrapper .list ul
    {
        --icon-width: 3.5em;
        padding: 0;
    }
}

/* corners */
html > body .course-specs-list-wrapper .list ul::before,
html > body .course-specs-list-wrapper .list ul::after
{
    display: block; width: calc(var(--corner-size) * 2); height: var(--corner-size);
    border-style: dotted; border-color: currentColor;
    opacity: 0.5;
}

/* top-left corner */
html > body .course-specs-list-wrapper .list ul::before
{
    top: 0; left: 0; float: left;
    border-width: var(--corner-border-width) 0 0 var(--corner-border-width);
}

/* bottom-right corner */
html > body .course-specs-list-wrapper .list ul::after
{
    bottom: 0; right: 0; float: right;
    border-width: 0 var(--corner-border-width) var(--corner-border-width) 0;
}

/* mobile settings */
@media only screen and (max-width: 480px)
{
    html > body .course-specs-list-wrapper .list ul::before,
    html > body .course-specs-list-wrapper .list ul::after {display: none;}
}





/* list item
==================================================================================================== */

/* main container */
html > body .course-specs-list-wrapper .list ul li
{
    /* flex rules */
    order: 0; flex-grow: 1; flex-shrink: 1; flex-basis: auto; align-self: stretch;

    /* standard rules */
    clear: none; width: auto; margin: 0; padding: 0; min-width: 15em;
    overflow: hidden;
    border-width: 0.2rem; border-style: solid; border-radius: var(--item-border-radius);
}

/* hide dot */
html > body .course-specs-list-wrapper .list ul li::before {display: none;}

/* mobile settings */
@media only screen and (max-width: 480px)
{
    html > body .course-specs-list-wrapper .list ul li {min-width: 0;}
}





/* overlay colors
================================================== */

/* lite */
html > body .lite-overlay .course-specs-list-wrapper .list ul li
{
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 0.25em 0.5em 0 rgba(0,0,0,0.075), 0 1em 2em 0 rgba(0,0,0,0.075);
}

/* extra lite */
html > body .extra-lite-overlay .course-specs-list-wrapper .list ul li
{
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 0.25em 0.5em 0 rgba(0,0,0,0.075), 0 1em 2em 0 rgba(0,0,0,0.075);
}

/* dark */
html > body .dark-overlay .course-specs-list-wrapper .list ul li
{
    background: rgba(0,0,0,0.1);
    border-color: rgba(0,0,0,0.15);
    box-shadow: 0 0.25em 0.5em 0 rgba(0,0,0,0.025), 0 1em 2em 0 rgba(0,0,0,0.05);
}

/* extra dark */
html > body .extra-dark-overlay .course-specs-list-wrapper .list ul li
{
    background: rgba(0,0,0,0.25);
    border-color: rgba(0,0,0,0.5);
    box-shadow: 0 0.25em 0.5em 0 rgba(0,0,0,0.05), 0 1em 2em 0 rgba(0,0,0,0.15);
}





/* icon
==================================================================================================== */

/* main container */
html > body .course-specs-list-wrapper .list ul li .icon {position: absolute; top: 0; left: 0; width: var(--icon-width); height: 100%;}





/* overlay colors
================================================== */

/* lite */
html > body .lite-overlay .course-specs-list-wrapper .list ul li .icon {background: rgba(255,255,255,0.1);}

/* extra lite */
html > body .extra-lite-overlay .course-specs-list-wrapper .list ul li .icon {background: rgba(255,255,255,0.15);}

/* dark */
html > body .dark-overlay .course-specs-list-wrapper .list ul li .icon {background: rgba(0,0,0,0.15);}

/* extra dark */
html > body .extra-dark-overlay .course-specs-list-wrapper .list ul li .icon {background: rgba(0,0,0,0.5);}





/* icon container
================================================== */

/* main container */
html > body .course-specs-list-wrapper .list ul li .icon::before
{
    transform: translate3d(0,-50%,0);
    top: 50%; left: 0; display: block; float: left; height: auto;
    text-align: center;
    font-family: var(--fa7); font-size: 1.6em; line-height: 1em;
}

/* specific icons */
html > body .course-specs-list-wrapper .list ul li.user-time .icon::before {content: "\f4fd"; font-weight: 700;}
html > body .course-specs-list-wrapper .list ul li.volume-up .icon::before {content: "\f028"; font-weight: 700;}
html > body .course-specs-list-wrapper .list ul li.certificate .icon::before {content: "\f559"; font-weight: 700;}
html > body .course-specs-list-wrapper .list ul li.mobile-phone .icon::before {content: "\f3cd"; font-weight: 700;}
html > body .course-specs-list-wrapper .list ul li.money-hand .icon::before {content: "\f4c0"; font-weight: 700;}





/* text
==================================================================================================== */

/* main container */
html > body .course-specs-list-wrapper .list ul li .text {float: right; width: calc(100% - var(--icon-width)); padding: 1.5em;}

/* mobile settings */
@media only screen and (max-width: 480px)
{
    html > body .course-specs-list-wrapper .list ul li .text {padding: 1em;}
}