:root {
  --social-color: #298BA8;
  --gray-active: #aaa;
  --gray-disabled: #eee; 
}

html
{
    min-height:100%;
}

body
{
    background-color:#f5f5f5;
    background-image:url(../img/bg.jpg);
    background-repeat:no-repeat;
    background-position:left bottom;
    background-attachment: fixed;
    background-size:cover;
    min-height:100%;
}

body, div, td
{
    font-size:13px;
}

h1, h2, h3, h4, h5, h6
{
    margin:0px;
    margin-bottom:5px;
}

h1 {
    font-size: 2.5em;
    letter-spacing: 0;
}

h2 {
    font-size: 1.75em;
    letter-spacing: 0;
}

.jdropdown .jdropdown-header
{
    padding-top:8px !important;
    padding-bottom:8px !important;
}

section.top
{
    background-color: #fff;
    box-shadow: 1px 1px 2px rgba(0,0,0,.1);
}

section.top .column .text-wrapper
{
    text-align:center;
    width:100%;
    background-image:url(../img/cover.jpg);
    background-position:top center;
    background-size:cover;
    padding-top:330px;
    padding-bottom:330px;
}

.top .mini {
    width:24px;
    display:none;
}

.top .icon {
    text-align:center;
    width:24px;
    margin:0px;
}

.logo
{
    display:flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

.logo img
{
    height:80px;
}
'
.search
{
    width:100%;
    max-width:480px;
    box-sizing: border-box;
    text-align:center;
    margin:auto;
}

.search table
{
    width:100%;
    background-color:#ddd;
    border-right:1px solid #ddd;
}
.search table td
{
    text-align:center;
}
.search input
{
    margin:1px;
    border:0px;
    width:100%;
    outline: none;
    height:34px;
    min-width:250px;
}

.search input::placeholder
{
    color:#ccc;
}

.search button
{
    border:0px;
    margin:0px;
    padding:5px;
    padding-left:10px;
    padding-right:10px;
    background-color:#eee;
    outline: none;
    height:34px;
    cursor:pointer;
}

.search i
{
    display:block;
}

.top-menu ul
{
    padding:0px;
    margin:0px;

}

.top-menu i
{
    display:block;
}

.top-menu li
{
    list-style:none;
    text-align:center;
    text-transform:uppercase;
    cursor:pointer;
    display:inline-block;
    margin-left:5px;
    margin-right:5px;
    max-width:70px;
    font-size:0.8em;
}

.top-menu a
{
    text-decoration:none;
    color:#777;
}

.top-menu i
{
    background-color: #434343;
    color:#fff;
    font-size:22px;
    border-radius:40px;
    padding:11px;
    margin-bottom:6px;
    background-image: url(../img/bg-icon.png);
}

.top-menu i:hover
{
    background-color:#346372;
}

.menu ul {
    margin:0px;
    padding:0px;
}

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

.menu li {
    display:flex;
    list-style:none;
    cursor:pointer;
    margin:8px;
}

.menu a.selected li {
    background-color:#f1f1f1;
}

.profile {
    text-align:center;
}

.profile .name {
    font-weight:bold;
    font-size:1.2em;
    margin-left:10px;
    text-align:center;
}

.profile .photo-large img {
    width:180px;
    height:180px;
    border-radius:90px;
    margin-top:20px;
}

.profile-social {
    display:flex;
    cursor:pointer;
}

.profile-social > div {
    margin-left:10px;
    margin-right:10px;
    text-align: center;
}

.profile-social b {
    font-size:1.1em;
}

.profile-social span {
    font-size:0.8em;
}

.icon-content
{
    padding:0px;
    margin:0px;
}

.icon-content li
{
    list-style: none;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    max-width: 60px;
    font-size: 0.8em;
}

.icon-content a
{
    text-decoration:none;
    color:#4a5159;
}

.icon-content i
{
    background-color: #fefefe;
    color:#4a5159;
    font-size:24px;
    border:2px solid #4a5159;
    border-radius:40px;
    padding:11px;
    margin-bottom:8px;
}

.icon-content i:hover
{
    background-color:#eee;
}


/** HOME STYLE **/

.item {
    display:flex;
    cursor:pointer;
}

.item a {
    color:#333;
    text-decoration:none;
}


.item-line {
    width:100%;
    height:1px;
    background-color:#eee;
    margin-top:20px;
    margin-bottom:20px;
}

.item .item-category, .item .item-field {
    font-size:0.8em;
}

.item .item-title {
    font-weight:bold;
}

.item .item-auther {
    margin-top:5px;
}

.item .item-views {
    font-size:0.8em;
}

.item .item-image {
    width:196px;
    height:147px;
    object-fit: cover;
    margin-bottom:4px;
}

.item-header {
    font-size:1.2em;
    font-weight:bold;
    padding:6px;
    text-transform:uppercase;
    margin-bottom:5px;
    clear:both;
}

.item-header:empty {
    display:none;
}

.item-featured .item-image {
    width:270px;
    height:176px;

}

.thumbs {
    display:flex;
    flex-wrap:wrap;
}

.thumbs a {
    color:#333;
    text-decoration:none;
}

.thumbs .item
{
    display: block;
    margin: 6px;
    margin-bottom: 30px;
    width: 200px;
}

.thumbs .item .item-category
{
    font-size:0.8em;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space: nowrap;
}

.search-results .item, .jtemplate-content .item {
    margin-bottom:15px;
}

.search-results .item img, .jtemplate-content .item img {
    width: 120px;
    height: 90px;
    margin-right:10px;
}

.preview {
    float:right;
    font-size:0.8em;
    cursor:pointer;
}

.asset-button {
    border:1px solid gray;
    color:gray;
    text-align:center;
    line-height:24px;
    cursor:pointer;
    display:inline-block;
    border-radius:2px;
}

.asset-button i {
    color:var(--social-color);
    float:right;
    line-height:24px;
}

.social-controls {
    display:flex;
}

.social-controls button {
    margin-right:5px;
}

.social-controls i {
    color:#ccc;
    cursor:pointer;
    margin-left:1px;
    margin-right:1px;
}

.social-controls div {
    padding:2px;
}

.button-simple
{
    min-width:100px;
    padding-right:20px;
    padding-left:20px;
    border:0px;
    background-color:transparent;
    cursor:pointer;
}


/** Posts **/

.post .snippet
{
    margin-bottom:20px;
    border:0px;
}

.post .snippet:empty {
    display:none;
}

.post .jeditor .snippet
{
    margin:0px;
    margin-top:15px;
}

.post .snippet img
{
    width:100%;
    max-width:100%;
    margin:0px;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
    float:none; 
}

.post .snippet-title, .post .snippet-description, .post .snippet-host, .post .snippet-url
{
    padding-left:15px;
    padding-right:15px;
}

.post .jeditor-container.post-content
{
    border:0px;
}

/** Question **/

.questions-header {
    background-color:#eee;
    padding:10px;
}

.questions-header > div {
    display:flex;
}

.questions-header i {
    cursor:pointer;
}

.questions-content > div {
    padding:10px;
    display:none;
}

.questions-content div.selected {
    display:block;
}

.question-footer {
    display:none;
}

.question .separator {
    margin-top:0px;
    margin-bottom:0px;
    background-color:#efefef;
}

.question .question-number
{
    width:48px;
    height:48px;
    padding:15px;
    padding-top:2px;
    border:1px solid #ccc;
    background-color:#ccc;
    color:#fff;
    border-radius:30px;
    font-size:30px;
}

.question
{
    counter-reset:section;
}

.question .answers
{
    margin-bottom:30px;
}

.question .answer-label
{
    margin-bottom:20px;
}

.question .answer-label.correct:before
{
    content:'Correct answer';
    color:green;
}

.question .answer-label.wrong:before
{
    content:'Wrong answer';
    color:red;
}

.question .answers .answer::before
{
    counter-increment: section;
    content: counter(section, upper-alpha) ")";
    padding: 0px;
    padding-bottom:8px;
    padding-left: 32px;
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='gray'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    position:absolute;
    left:-50px;
}

.question .answers .answer.selected::before
{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='gray'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}

.question.check .answers .answer::before {
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z' fill='gray'/%3E%3C/svg%3E");
}

.question.check .answers .answer.selected::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM17.99 9l-1.41-1.42-6.59 6.59-2.58-2.57-1.42 1.41 4 3.99z' fill='gray'/%3E%3C/svg%3E");
}

.question .answers .answer
{
    margin-left:50px;
    margin-bottom:15px;
    position: relative;
}

/** Pages **/

.answersEditor .jeditor-container {
    counter-reset:section;
}

.answersEditor .jeditor > div {
    border-bottom:1px dashed #ccc;
    padding-top:15px;
    padding-bottom:15px;
    padding-left:2px;
}

.answersEditor .jeditor > div::before {
    counter-increment: section;
    content: counter(section, upper-alpha) " . ";
    color:gray;
    padding:10px;
    padding-left:40px;
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='gray'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:4px 6px;
}

.answersEditor .jeditor > div.selected::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='gray'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}

.answersEditor.check .jeditor > div::before {
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z' fill='gray'/%3E%3C/svg%3E");
}

.answersEditor.check .jeditor > div.selected::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM17.99 9l-1.41-1.42-6.59 6.59-2.58-2.57-1.42 1.41 4 3.99z' fill='gray'/%3E%3C/svg%3E");
}

#contentEditor img {
    width:100% !important;
}

section.middle > .section {
    margin-right:0px;
}

.section-label {
    background-color:#2F89A8;
    color:#fff;
    padding:10px;
    font-family:oswald;
    font-size:2em;
    padding-left:20px;
    text-transform:uppercase;
}

.subsection {
    font-family: oswald;
    font-size: 1.4em;
    text-transform: uppercase;
}

.library-title
{
    background-color:#a82d2d;
}

.studio-title
{
   background-color:#89a52e;
}

.feed-title
{
   background-color:#737373;
}

.fa {
    font-size:20px !important;
    color:#888 !important;
}

.pdf-viewer {
    border:1px solid #eee;
    margin-bottom:20px;
}

.pdf-viewer:empty {
    display:none;
}

.pdf-viewer canvas {
    margin:10px;
}

.pdf-controls {
    background-color: #eee;
    padding: 10px;
}

.pdf-controls > div {
    display: flex;
}

.pdf {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cpath style='fill:%23C30B15;' d='M511.344,274.266C511.77,268.231,512,262.143,512,256C512,114.615,397.385,0,256,0S0,114.615,0,256 c0,117.769,79.53,216.949,187.809,246.801L511.344,274.266z'/%3E%3Cpath style='fill:%2385080E;' d='M511.344,274.266L314.991,77.913L119.096,434.087l68.714,68.714C209.522,508.787,232.385,512,256,512 C391.243,512,501.976,407.125,511.344,274.266z'/%3E%3Cpolygon style='fill:%23FFFFFF;' points='278.328,333.913 255.711,77.913 119.096,77.913 119.096,311.652 '/%3E%3Cpolygon style='fill:%23E8E6E6;' points='392.904,311.652 392.904,155.826 337.252,133.565 314.991,77.913 255.711,77.913 256.067,333.913 '/%3E%3Cpolygon style='fill:%23FFFFFF;' points='314.991,155.826 314.991,77.913 392.904,155.826 '/%3E%3Crect x='119.096' y='311.652' style='fill:%23FC0F1A;' width='273.809' height='122.435'/%3E%3Cg%3E%3Cpath style='fill:%23FFFFFF;' d='M204.871,346.387c13.547,0,21.341,6.659,21.341,18.465c0,12.412-7.795,19.601-21.341,19.601h-9.611 v14.909h-13.471v-52.975L204.871,346.387L204.871,346.387z M195.26,373.858h8.93c5.904,0,9.308-2.952,9.308-8.552 c0-5.525-3.406-8.324-9.308-8.324h-8.93V373.858z'/%3E%3Cpath style='fill:%23FFFFFF;' d='M257.928,346.387c16.649,0,28.152,10.746,28.152,26.487c0,15.666-11.655,26.488-28.683,26.488 h-22.25v-52.975H257.928z M248.619,388.615h9.611c8.249,0,14.151-6.357,14.151-15.665c0-9.384-6.205-15.817-14.757-15.817h-9.006 V388.615z'/%3E%3Cpath style='fill:%23FFFFFF;' d='M308.563,356.982v12.26h23.763v10.596h-23.763v19.525h-13.471v-52.975h39.277v10.595h-25.806 V356.982z'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: cover;
    width:48px;
    height:48px;
    cursor:pointer;
}

.progress-controls a > div {
    line-height:22px;
}

.progress .progress-bar div {
    background-color:var(--social-color);
}

.progress .progress-bar {
    border:1px solid var(--social-color);
}
.progress-controls .column a {
    text-decoration:none;
    color:gray;
}

.video-list {
    list-style:none;
    margin:0px;
    padding:0px;
}

.video-list li {
    padding:10px;
    background-color:#eee;
}

.video-footer {
    background-color:#fff;
}

.video-footer > div {
    border:1px solid #ccc;
    border-radius:2px;
    margin-top:6px;
    margin-bottom:6px;
    margin-left:6px;
    width:32px;
    height:32px;
    line-height:30px;
    text-align:center;
    cursor:pointer;
    font-size:0.8em;
}

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

.video-footer .selected
{
    background-color:#eee;
}

#homepage .jtabs-headers
{
    margin-bottom:10px;
    padding: 0px;
}

#homepage .jtabs-content > div
{
    padding:0px;
}

[contenteditable]:focus {
    outline: 0px solid transparent;
}

.asset .media
{
    max-width:540px;
}

.asset h1
{
    font-size:1.4em;
    margin:0px;
    margin-bottom:6px;
}

.asset h2
{
    font-size:0.9em;
    margin:0px;
}

.asset .users
{
    width:32px;
    height:32px;
    border-radius:16px;
}

.asset .author
{
    margin-right:8px;
}

.asset .author img
{
    width:48px;
    height:48px;
    border-radius:24px;
}

.asset .text
{
    padding:20px;
    padding-top:0px;
    max-height:300px;
    overflow-y:auto;
    text-align:justify;
}

.asset .text::-webkit-scrollbar
{
    margin-left:6px;
    width:6px;
}

.asset .text::-webkit-scrollbar-track
{
    background: #f3f3f3;
}

.asset .text::-webkit-scrollbar-thumb
{
    background: #888;
}

.asset .text::-webkit-scrollbar-thumb:hover
{
    background: #555; 
}

.asset.lessons img
{
    max-width: 100% !important;
    height:auto !important;
}

.asset.courses li
{
    list-style-position: inside;
}

.asset .course-image {
    width:120px;
    float:left;
    margin-right:15px;
    margin-bottom:5px;
}

#notification
{
    cursor:pointer;
    padding:20px;
}

.notification
{
    position:absolute;
    background-color:#fff;
    margin-top:13px;
    border:3px solid #ccc;
    width:280px;
    margin-left:-240px;
    outline:none;
    border:1px solid rgba(100, 100, 100, .4);
    border-radius:0 0 2px 2px;
    box-shadow:0 3px 8px rgba(0, 0, 0, .25);
    display:none;
    z-index:10000;
}

.notification:after, .notification:before {
    bottom: 100%;
    left: 90%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.notification:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 10px;
    margin-left: -10px;
}
.notification:before {
    border-color: rgba(204, 204, 204, 0);
    border-bottom-color: #ccc;
    border-width: 12px;
    margin-left: -12px;
}

.notification-title {
    padding: 10px;
    font-family: oswald;
    font-size: 1.4em;
    text-transform: uppercase;
    border-bottom:1px solid #ccc;
}

.notification-content {
    padding:5px;
    height:300px;
    overflow-y:scroll;
}

#lesson-content-container {
    margin-left:20px;
}

#photos-container
{
    width:260px;
    height:195px;
    position:relative;
    overflow-y:hidden;
}

#photos-container:after {
    content:'close';
    position:absolute;
    font-family:'Material icons';
    top:0px;
    right:0px;
    margin:10px;
    color:#fff;
    text-shadow: 0px 0px 5px #000;
    font-size:24px;
    width:24px;
    height:24px;
}

#photos-container:empty:after {
    display:none;
}

.jdropdown-picker {
    border: 1px solid #ccc !important;
    padding: 0px !important;
}

.jdropdown-picker .jdropdown-header
{
    padding-left: 8px !important;
}



/** Configurations specific for mobile **/

@media (max-device-width: 800px)
{
    section.top {
    }

    .top .mini {
        display:block;
        margin-left:5px;
        margin-right:5px;
    }

    .top .full {
        display:none;
    }

    .column-menu {
        height:100vh;
        position: fixed;
        top:0px;
        left:0px;
        background-color:#fff;
        z-index:9000;
        display:none;
    }

    .logo {
        flex:1;
        position:relative;
        top:2px;
    }

    .logo img {
        height:40px;
    }
}

.prettyprint {
    font-size: 0.8em;
    max-width: 700px;
    overflow-x: auto;
    margin:20px;
}