/* -------- Variables --------*/

:root{
--gold-color: #D0AC62;
--goldHover-color: #A88A4D;
--grayLight-color: #F3F3F3;
--grayDark-color: #CCC;

--white-neutral-1: #fff;
--rich-black-neutral-4: #001020;
--accent-1-celestial-blue: #009CDE;
--azul-links: #0D6FB4;
--black-neutral-4: #000;



/* Color styles */
--white: #FFFFFF;
--black: #000000;

/** Líderes Digitales */
--anti-flas-white: #F0F1F3;
--platinum: #E0E3E7;
--rich-black: #001020;
--oxford-blue: #001F3F;
--lapis-lazuli: #0D6FB4; /** hover */
--state-gray: #808890;

--curious-blue-50: #F0FAFF;
--curious-blue-100: #E0F3FE;
--curious-blue-200: #B9E9FE;
--curious-blue-300: #7CD9FD;
--curious-blue-400: #36C6FA;
--curious-blue-500: #0CB0EB;
--curious-blue-600: #009CDE; /** Acento */
--curious-blue-700: #0170A3;
--curious-blue-800: #065E86;
--curious-blue-900: #0B4E6F;
--curious-blue-950: #07324A;

--emerald--600: #23CE6B;
--emerald--800: #199F52;

/** LideresDigitales.org */
--floral-white: #FDFAF0;
--cosmic-latte: #FAF4E0;
--dutch-white: #F5E9C1;
--pearl: #E3DCC3;
--dim-gray: #747168;
--davys-gray: #4D4B45;
--black-olive: #3A3934;
--eerie-black: #262626;
}

/* -------- Variables --------*/

html, body{
    padding: 0;
    margin: 0;
    height: 100%;
}

body{
    background-color: #FFF;
    color: #000;
    font-family: 'Open Sans', sans-serif;
}

/* ----------- Header ------------*/
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    top: 0;
    position: sticky;
    background-color: var(--oxford-blue);
    box-shadow: 0 1px 4px var(--curious-blue-900);
    z-index: 1;
    height: 72px;
}

.navOptions{
    display: flex;
    width: 230px;
    justify-content: space-between;
}

.navOptions span{
    margin-right: 8px;
}

.menu { /* .menu hereda de .header */
    height: inherit;
}

header ol { /* .header ol hereda de .menu */
    display: flex;
    height: inherit;
}

header ol li { /* .header ol li hereda de .header ol */
    height: inherit;
    margin: 0 15px;
}

.menu .link{    
    border-bottom: 2px solid var(--black-neutral-4);
}

.menu .link:hover{
    border-bottom: 2px solid var(--gold-color);
}

.header a { /* .header a hereda de .header ol li */
    color: white;
    text-decoration: none;
    height: inherit;
    display: flex;
    align-items: center;
    padding: 0;
    font-size: 0.85rem;
}

ol,
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}


.left-topbar{
    display: flex;
    justify-content: left;
    align-items: center;
}

.left-topbar figure{
    margin: 0px 24px;
}

.left-topbar span{
    color: var(--white);
    cursor: pointer;
}

.header-profile{
    border-radius: 50%;
    width: 48px;
    height: 48px;
    object-fit: cover;
}

.menu-arrow{
    font-size: 23px !important;
    margin-left: 8px;
}

.icon-burguer{
    font-size: 20px;
    margin-left: 13px;
}

.menu-flotante{
    position: fixed;
    top: 73px;
    right: 12px;
    background-color: #fff;
    color: var(--black-neutral-4);
    box-shadow: rgb(0 0 0 / 25%) 0px 1px 4px;
    overflow: hidden;
    z-index: 2;
}

.menu-flotante ol{
    padding: 10px 0;
}
.menu-flotante li a{ /* .header a hereda de .header ol li */
    color: var(--black-neutral-4);
    text-decoration: none;
    height: inherit;
    display: flex;
    justify-content: flex-start;
    padding: 14px 24px;
    font-size: 0.85rem;
    font-weight: 600;
}

.menu-flotante li a:hover{
    background-color: var(--grayLight-color);
}

.logout-icon{
    padding: 0;
    margin: 0 8px 0 0;
    width: 25px;
}

.close-menu, .show-menu{
    position: absolute;
    right: 24px;
    top: 38px;
    cursor: pointer;
}


/* ----------- Header ------------*/
/* ----------- Main ------------*/
main{
    display: flex;
    justify-content: space-between;
    height: calc( 100vh - 102px);
}
/* ----------- Main ------------*/


/* ----------- Sidebar ------------*/

.collapse{
    display: none;
    position: absolute;
    top: 460px;
    left: 228px;
    background-color: var(--white);
    padding: 16px 10px 9px 8px;
    color: var(--azul-links);
    font-size: 24px;
    border-radius: 0 16px 16px 0;
    border: 1px solid;
}

.sidebar{
    width: 290px;
    background-color: var(--white);
    font-size: 14px;
    color: #676a6c;
    line-height: 1.42857143;
    box-shadow: 4px 4px 10px 0px #00000040;
    overflow-y: auto;
    margin-bottom: 40px;
    transition: 0.5s;
    padding-bottom: 40px;
}

.sidebar ul li .material-symbols-outlined{
    font-size: 16px;
    display: inline-block;
    padding: 3px 0 0 0;
    line-height: 1;
    margin-right: 7px;
}

.active-activity {
    background-color: var(--curious-blue-50);
    border: 1px solid var(--azul-links);
    padding-left: 8px;
    padding-right: 8px;
}

.iconClickable{
    cursor: pointer;
}

ul{
    list-style-type: none;
    padding-left: 24px;
    padding-right: 8px;
}

ul li ul{
    padding-left: 20px;
}

ul li a{
    padding: 12px 0px;
    color: #242424;
    display: block;		
}

ul li ul li a{
    padding: 7px 0px;
    color: #676a6c;
    font-weight: 400 !important;
}

ul li ul li a:hover{
    color: var(--black-neutral-4);
}

.sidebar a{
    font-weight: 600;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.actividadTerminada{
    color: var(--azul-links);
}

i{
    margin-right: 8px;
}


.content{
    width: 100%;
    overflow-y: auto;
    padding-bottom: 100px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #F0F1F3;
    justify-content: center;
    align-content: flex-start;
}

.page{
    padding: 44px;
    width: calc(100% - 596px);
    border-radius: 8px;
    margin: 32px;
    background-color: #FFF;
    min-width: 380px;
    height: fit-content;
}

.wizard{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60px;
    font-size: 18px;
    font-weight: 600;
    background-color: #FFF;
    height: 70px;
    position: absolute;
    bottom: 0px;
    z-index: 10;
    box-shadow: 0px 0px 6px 0px #0000004a;
    width: 100%;
    box-sizing: border-box;
}

.display-flex{
    display: flex;
    align-items: center;
}

.wizard .icon-left{
    margin-right: 8px;
}

.wizard .icon-right{
    margin-left: 8px;
}

.wizard a{
    text-decoration: none;
    color: #000;
}

.details-responsive {
    display: inline-flex;
    margin-left: 6px;
}

/** Content **/
textarea {
    overflow: auto;
    resize: vertical;
    padding: 8px;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 8px 0 32px 0;
}

.content img{
    margin: 60px 0;
}

.img-p{
    max-width: 660px;
    width: 100%;
}

.center {
    text-align: center;
}

.page h1{
    font-size: 32px;
    text-align: left;
    padding: 0 0 10px 0;
    font-family: 'Merriweather', serif;
    font-weight: 600;
    margin-top: 0;
}

.page h2{
    font-size: 22px;
}

.page h3{
    font-size: 18px;
}

.page h2, .page h3, .page h4 {
    text-transform: uppercase;
    text-align: left;
    padding: 30px 0 10px 0;
}

.h-line {
    width: 85px;
    border-bottom: 2px solid #D0AC62;
    display: block;
    margin: 12px 0 4px 0;
}

.page ol, .page ul{
    padding-left: 24px;
}
.page ul{
    list-style: initial;
}
.page ol{
    list-style: decimal;
}

.page p {
    padding: 15px 0;
    font-size: 16px;
    margin: 0;
}

p a {
    color: var(--azul-links);
    text-decoration: underline;
    font-weight: 600;
}

.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #ffc700;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}


/** Content **/


/* ----------- Comments ------------*/
.comments h3{
    text-transform: uppercase;
    text-align: left;
}

.comments figure{
    margin: 0;
}

.comments{
    width: 412px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 8px;
    padding: 30px;
    background-color: #FFF;
    margin: 32px 32px 0px 0px;
    box-sizing: border-box;
    height: fit-content;
}

.comments .counter-comment{
    font-size: 12px;
    color: #a9a9a9;
    font-weight: 700;
    margin-right: 16px;
}


.comments .editor{
    min-width: 300px;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 24px;
    border-bottom: 1px solid #CCC;
}

.comments .editor textarea{
    width: -webkit-fill-available;
    overflow: auto;
    resize: vertical;
    padding: 8px;
    font-family: inherit;
    line-height: inherit;
    margin: 0 0 8px 0;
    font-size: 12px;
    border-color: #808890;
    border-radius: 4px;
}

.comments .response-editor textarea{
    width: -webkit-fill-available;
    overflow: auto;
    resize: vertical;
    padding: 8px;
    font-family: inherit;
    line-height: inherit;
    margin: 0 0 8px 0;
    font-size: 12px;
    border-color: #808890;
    border-radius: 4px;
}


.comments .editor .editor-row2{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comments .editor-row2 .col-right{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comments .contributions-title{
    text-align: left;
    width: 500px;
    margin-bottom: 12px;
}

.comments .contributions-content{
    min-width: 300px;
    width: 358px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 20px;
}

.comments .contributions-content .comment .comment-container{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 358px;
    padding: 0 0 20px 0;
}

.comments .contributions-content .response{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px 0px 20px 45px;
}

.comments .contributions-content .response-editor{
    min-width: 300px;
    width: 358px;
    display: flex;
    flex-direction: column;
    padding-bottom: 24px;
    padding-left: 0px;
}

.comments .contributions-content .response-editor .editor-row2{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}




.comments .contributions-content .author-avatar{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin: 0 12px 0 0;
    object-fit: cover;
}

.comments .contributions-content .author-name{
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.comments .contributions-content .author-verificated{
    margin: 0px 0 0 2px;
}

.comments .contributions-content .comment-wrapper{
    display: flex;
    flex-direction: column;
}

.comments .comment-post{
    display: flex;
    flex-direction: row;
}

.comments .comment-post .btn-secondary{
    margin-top: 8px;
}

.comments .contributions-content .comment-text-wrapper{
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 8px 16px 16px 16px;
}

.comments .contributions-content .author-content{
    font-size: 12px;
    color: #454545;
}

.comments .comment-text-wrapper{
    background-color: #F0F1F3;
    border-radius: 0px 8px 8px 8px;
}

.comments .rb-property{
    font-size: 12px;
    display: flex;
    align-items: flex-start;
}

.comments .rb-property input{
    margin: 2px 4px 0 0;
}

.comments .rb-property label{
    margin: 0px 12px 0 0;
}

.comments .btn-primary{
    font-size: 14px;
    padding: 10px 12px;
}

.response-button{
    color: var(--black-olive);
    padding: 10px 0px;
    display: inherit;
    text-align: center;
    width: max-content;
    text-decoration: none;
}

.response-button:hover{
    color: var(--azul-links);
}

.response-button .material-symbols-outlined{
    font-size: 18px;
    margin-right: 4px; 
}

.response-button .txt-response-button{
    font-weight: 600;
    font-size: 12px;
    text-decoration: underline;
}


/** Buttons **/

.btn-primary{
    color: #FFF;
    background-color: var(--curious-blue-600);
    border: 0;
    font-size: 18px;
    padding: 12px 24px;
    display: inherit;
    text-align: center;
    text-decoration: none;
    width: max-content;
    border-radius: 8px;
}

.btn-primary:hover{
    background-color: var(--curious-blue-700);
    cursor: pointer;
}


.btn-secondary{
    color: var(--azul-links);
    background-color: var(
    --grayLight-color);
    border: 0;
    padding: 10px 10px;
    font-size: 12px;
    display: inherit;
    text-align: center;
    text-decoration: none;
    width: max-content;
    font-weight: 600;
}

.btn-secondary:hover{
    background-color: var(--grayDark-color);
    cursor: pointer;
}





/* #region Media Queries */
@media screen and (max-width: 1255px){
    .page, .comments, .comments .contributions-content, .comment-container, .response-editor{
        width: 100% !important;
    }

    .comments{
        margin: 0 32px;
    }
}

@media screen and (max-width: 900px){
    .img-AS-text{
        display: none;
    }

}
@media screen and (max-width: 600px){
    .menu-flotante{
        width: 100%;
        right: 0px;
        top: 112px;
        height: calc( 100% - 112px );
        text-transform: uppercase;
        font-weight: 700;
        font-size: 24px;
        z-index: 0;
    }

    .details-responsive {
        display: none;
    }

    .page, .comments, .comments .editor{
        min-width: 200px;
    }

    .page, .comments{
        margin: 8px;
    }
}

@media screen and (max-width: 450px){  
    .header .golden-logo {
      margin-left: 16px !important;
    }
}
/* #endregion */