/*
After making any changes to this file, you must change the noadmincssver setting
*/
h1{
    font-size:1.9em;
}
h3{
    font-size:1.3em;
    line-height: 1.8;
}

a:focus-visible{
    outline:1px solid var(--primary-l1);
}

:root{
    --leftregionwidth:5.75em;
    --tocohortsarrowheight:1.5em;
}

body.learn-profesor{
    & .hiddenactivity-estudiante{
        & .activity-badges *{
            display:none;
        }
    }
}

iframe {
    border-radius: 1em;
}

.main-pinion{
    display:flex;
    /*grid-template-columns: [leftregion] calc(var(--leftregionwidth) + var(--leftregiontabwidth)) [rpos] 1fr;*/
    .leftregion{
        z-index:1;
        /*grid-area:leftregion;*/
        min-height: 100vh;
        width:var(--leftregionwidth);
        flex-shrink: 0;
        & .leftWrapper{
            position:sticky;
            top: 0;            
            & .leftActions{
                display:flex;
                flex-direction:column;
                height:100vh;
                padding-top:0.5em;
                font-size:0.9em;
                line-height: 0.9em;

                & .leftActions-top{
                    & .logo {
                        & a{
                            justify-content: center;
                            max-width: 5.2em;
                            min-height: 5em;
                            padding:1.4em;
                            margin:auto;
                        }
                    }
                }
                & .leftActions-middle{
                    margin-bottom:auto;
                }
                & .leftActions-bottom{
                    margin-top:10px;
                    display:grid;
                    grid-template-columns: 1fr;
                    margin:1em 0;
                }
                & .leftActions-bottom::before{
                    width:68%;
                    content:"";
                    display:block;
                    border:1px solid #D2D2D2;
                    margin:auto;
                    margin-bottom:15px;
                }
                & .leftAction-tab{
                    display: flex;
                    width:100%;
                    align-items:center;
                    padding:1em 0.5em;
                    overflow-x:hidden;
                    &.tabActive{
                        background-color: var(--primary-bg5);
                    }
                    & i{
                        margin-left:auto;
                    }
                }
            }
        }
    }
    & .middleregion{
        background-color: var(--primary-bg5);
        & .middleregionDrawer{
            width:19em;
            /*transition:width 0.15s linear;*/
            position:sticky;
            top:0;
            height: 100vh;
            z-index:1;
            background-color:var(--primary-bg5,#FFF);
            box-shadow: 3px 2px 4px -1px #D2D2D2;
            &.overviewNavigation .siteTab, &.tadpoleBuscar .siteTab{
                & .cohorts-wrapper{
                    height: calc(100vh - 8.62em);
                    overflow-y: auto;
                    padding-bottom:2em;
                    margin-top:0!important;
                    & .toCohorts{
                        height: var(--tocohortsarrowheight);
                        line-height: var(--tocohortsarrowheight);
                        color:var(--primary);
                        display: flex;
                        font-size:1.4em;
                        background-color: var(--primary-bg5, #FFF);
                        position:sticky;
                        top:0;
                        & > *{
                            margin-left:auto;
                            margin-right: 1em;
                        }
                    }
                    & .cohort-info{
                        padding:0 1em;
                        & ~.cohort-info .cohort-name{
                            padding-top:0.5em!important;
                        }
                        & .cohort-name{
                            font-size:1.1em;
                            padding-top:0!important;
                            &:has(a.inCourseList){
                                position: sticky;
                                top:var(--tocohortsarrowheight);
                                background-color: var(--primary-bg5, #FFF);
                            }
                            & a.inCourseList{
                                pointer-events: none;
                                color:unset;
                            }
                            & span{
                                margin-right: 0.4em;
                            }
                        }
                        & .cohort-course{
                            margin-left:0.5em;

                            & .course-header{
                                & .course-aama{
                                    color: #999;
                                    display: block;
                                    font-size: 90%;
                                    .courseActive &{
                                        display:none;
                                    }
                                }
                            }

                            & .courseActive{
                                /*padding-top:0.5em;*/
                                padding-bottom:0.3em;
                                background-color:var(--primary-bg5,#FFF);
                                /*
                                position:sticky;
                                top:0;
                                */
                                font-weight: 600;
                                display: flex;
                                & a{
                                    pointer-events: none;
                                }
                                & .beholder{
                                    margin-left: auto;
                                    &:not(.released){
                                        color: #AEAEAE;
                                        cursor: pointer;
                                    }
                                    &.released{
                                        color:green;
                                    }
                                }
                            }

                            & .links-wrapper{
                                & .course-sections-header, & .zone-header{
                                    font-weight: 600;
                                    color:var(--primary);
                                }
                                & .course-sections-links, & .zone-links{
                                    border-left:0.35em solid #AEAEAE;
                                    margin-left: 0.2em;
                                }
                                & .sectionnum-0{
                                    padding:0.4em;
                                }
                                & .course-sections, & .section-links, & .zone-links{
                                    padding-left:0.6em;
                                }
                                & .section-header, & .section-link, & .zone-link{
                                    &.solo-estudiante{
                                        .learn-profesor &{
                                            display:none;
                                        }
                                    }
                                    & a{
                                        display:inline-block;
                                        &.active{
                                            color:#FFF;
                                            background-color:var(--primary);
                                            padding-right:0.8em;
                                            padding-left:0.6em;
                                            border-top-right-radius: 1em;
                                            border-bottom-right-radius: 1em;
                                        	margin-left: -0.6em;
                                        }
                                    }
                                }
                                & .course-zones{
                                    & .zone-link.pgrant{
                                        display:flex;
                                        & .beholder{
                                            cursor:pointer;
                                            margin-left: auto;
                                        	font-size: 1rem;
											display: flex;
      										align-items: flex-start;
                                            &:not(.released){
                                                color: #AEAEAE;
                                            }
                                            &.released{
                                                color:green;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            &.tadpoleBuscar .siteTab{
                & .tadpoleBuscarWrapper{
                    padding: 0 1em;
                    height: calc(100vh - 8.62em);
                    display:flex;
                    flex-direction: column;
                    & .elementsWrapper{
                        & .inputWrapper{
                            margin-bottom: 3vh;
                            & > *{
                                display:inline-block;
                                width:100%;
                            }

                            & .searchWrapper{
                                display: grid;
                                grid-template-columns: 1fr 1.5em;
                                background-color: #FFF;
                                border:1px solid #AEAEAE;
                                & input{
                                    border:none;
                                    padding:0.1em;
                                    outline:0;
                                }
                                & i{
                                    justify-self: center;
                                    align-self: center;
                                    padding-top: 0.2em;
                                    color:var(--primary);
                                }
                            }
                        }
                    }
                    & .records{
                        padding-top:0.5em;
                        overflow-y:auto;
                        & .record{
                            display:grid;
                            grid-template-areas: "a" "b";
                            margin-bottom:0.5em;
                        }
                    }
                }
            }
            /*
            & c-accordion{
                & .accordion-header{
                    font-weight: 600;
                    color:var(--primary);
                }
                &>*:nth-child(2){
                    padding:0 0.6em;
                }
            }
            */
            &:not(.open) .close-middleregionDrawer{
                display:none;
            }
            &.open .close-middleregionDrawer{
                position: absolute;
                top:5em;
                left: 100%;
                width:2.5em;
                height: 2.5em;
                background-color:var(--primary-bg5,#FFF);
                color:var(--primary);
                cursor: pointer;
                display: flex;
                flex-direction: column;
                border-top-right-radius: 0.8em;
                border-bottom-right-radius: 0.8em;
                box-shadow: 3px 2px 4px -1px #D2D2D2;
                & i{
                    font-size:1.3em;
                    margin:auto;
                }
            }
        }
        & .typoLogo-wrapper{
            display:grid;
            grid-template-areas:"a" "b";
            position: sticky;
            top: 0;
        }
        & .typoLogo-wrapper::after{
            content:"";
            display: block;
            border-bottom:1px solid #D2D2D2;
            width: 90%;
            margin:1em auto 0.8em auto;
        }
        & .typoLogo{
            width:10.46em;
            display: block;
            padding-top:2.5em;
            margin-left:1.55em;
        }
        & i.tippy-trigger{
            color:var(--brandcolor);
            margin-left:0.5em;
        }
        & .tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{
            border-right-color:var(--brandcolor);
        }
        & [data-tippy-root], .tippy-box, .tippy-content{
            border-radius: 1em;
        }
        & [data-tippy-root]{
            border:1px solid var(--brandcolor);
        }
    } 
    & .rpos{
        /*grid-area:rpos;*/
        z-index:0;
        flex-grow:1;
        container-type: inline-size;
        /*
        & .incourse-nav-wrapper{
            position:relative;
            & .incourse-nav{
                width: 16.82em;
                overflow: clip;
            }
            & .incourse-nav-trigger{
                position:absolute;
                left:100%;
                top:10em;
                z-index:1;           
                & button{
                    padding: 1em;
                    border-top-right-radius:2em;
                    border-bottom-right-radius:2em;
                    transition:padding 0.1s linear;
                }
                & button:hover{
                    padding-left:1.5em;
                }
            }
        }
        */
        & .rpos-content{
            padding:50px 2.5em;
            position: relative;
            height:100%;
            & h1{
                margin-bottom:50px;
            }
            & .breadcrumbs-search-bar{
                flex-grow:1;
                border-radius: 2.3em;
                padding:0.4em 0.4em 0.4em 1.4em;
                margin-bottom:2em;
                font-size: 0.8em;
                box-shadow: 3px 2px 4px -1px #D2D2D2;
                display:flex;
                width:100%;
            
                & .searchWrapper{
                    margin-left:auto;
                    & label{
                        margin:0;
                        border-radius: 2.3em;
                        border:1px solid #D2D2D2;
                        display: flex;
                        & input{
                            border:none;
                            margin-left:0.8em;
                            outline:0;
                        }                        
                        & i{
                            color:var(--primary);
                            cursor: pointer;
                            padding:0.6em 1em;
                            &.i-search-left{
                                border-right: 1px solid #D2D2D2;
                            }
                        }
                        &.closed{
                            border:1px solid transparent;
                            & input{
                                display: none;
                            }
                            & .i-search-left{
                                display: none;
                            }
                        }
                    }
                }
                &.searching{
                    & nav{
                        display:none;
                    }
                }
            }
            & .section-item{
                border:none;
                padding: 0;
                & .course-section-header{
                    margin-bottom:1.5em;
                }
                & .course-section-header, & .course-section-body{
                    padding:2em 3em;
                    border-radius: 1em;
                }
            }
            & .topNavWrapper{
                display:flex;
                & .breadcrumbs-wrapper{
                    flex-grow:1;
                }
                & .usermenu{
                    margin-left:1em;
                }
            }
            
        }
    }
    #region-main{
        background-color: transparent;
        & c-accordion {
            & .accordion-header{
                border-top-left-radius: 1.5em;
                border-top-right-radius: 1.5em;
                background-color:var(--primary-bg4,#FFF);
                color:var(--brandcolor,#000);

                & i{
                    margin-right: 1em;
                    font-size:1.3em;
                }
            }
            &:not(.open) .accordion-header{
                border-radius: 1.5em;
            }
            & > *{
                padding-left:2em;
                background-color: var(--bg3,#FFF);
            }
            & > *:not(.accordion-header){
                padding-right:2em;
            }
            & > *:last-child{
                border-bottom-left-radius: 1.5em;
                border-bottom-right-radius: 1.5em;
            }
        }
        .pagelayout-incourse &, & .section-block{
            background-color: #FFF;
            border-radius: 1.5em;
            padding: 2em;
        }

        /*
        & .activityinline{
            & iframe{
                width:99.5%;
                height:auto;
                aspect-ratio: 16 / 10;
            }
        }
        body.pagelayout-incourse &{
            & iframe{
                width:99.5%;
                height:auto;
                aspect-ratio: 16 / 10;
            }
        }
            */
        .path-grade &{
            .gradeparent{
                overflow-x:auto;
                min-height:70vh;
                margin-bottom: 2.8rem;
            }
        }
    }
}

.bg2{
    background-color: var(--bg2,#CCC);
}

.bg3{
    background-color: var(--bg3,#CCC);
}

@media (max-width: 767.98px) {
    .breadcrumb:not(:empty) {
        width: 100%;
        flex-wrap: nowrap;
        margin-bottom: 0.5em;
    }
}

body#page-h5p-embed .usertour {
    display: none !important;
}
/*Piloto delete this*/
body.pagelayout-course.dep-0000 #region-main .activity.scratchjr{
    display: none;
}
/*Piloto delete this END