/*--------------------------------------------------------- */
/* -------------------- OVERALL --------------------------- */
/*--------------------------------------------------------- */
ul li li{
    padding-left:20px;
}

select, select option{
    color:#222;
    margin:auto;
    font-size:100%;
}

td{
    text-align:center;
}

table{
    margin:10px auto;
    border:1px solid #222;
}

hr{
    display:block;
    margin:20px;
}

.highlight{
    border-left:2px solid #ffeb8e;
    background-color:#FFF8DC;
    padding:5px;
    margin:10px;
    display:block;
}

.code{
    background-color:#ddd;
    padding:5px;
    margin:10px;
    font-family:monospace;
    display:block;
}

b{
    font-weight:400;
    font-size:105%;
}

.mainHeader{
    text-align: center;
    padding: 20px;
    color:#222;
    font-size:250%;
    font-weight:400;
}

.titleBig{
    font-size:250%;
    font-weight:400;
}

.sectionError{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-55%);
    font-family:arial;
    color#222;
}

.sectionError h1{
    color:#222;
    font-size:350%;
    text-align:center;
    
}

html{
    overflow-x:hidden;
}

*{
    word-spacing:2px;
    line-height:150%;
    letter-spacing:2px;
    box-sizing:border-box;
    padding:0;
    margin:0;
    font-family:'Lato', sans-serif, verdana, arial;
    color:#fff;
    font-weight:300;
    
}

a{
    text-decoration:none;
}

input{
    color:#222;
}

.thead{
    text-align:center;
    font-size:140%;
}

input[type='submit']{
    background-color:#3c427c;
    padding:5px 20px;
    text-align:center;
    font-size:100%;
    color:#fff;
    border-radius:3px;
    transition:background-color .2s ease;
    border:0;
}

input[type='submit']:hover{
    background-color:#4a5193;
}

input[type='submit']:active, input[type='submit']:focus{
    background-color:#686ead;
}

input[type='button']{
    background-color:#3c427c;
    padding:5px 20px;
    font-size:100%;
    color:#fff;
    border-radius:3px;
    transition:background-color .2s ease;
    border:0;
}

input[type='button']:hover{
    background-color:#4a5193;
}

input[type='button']:active, input[type='submit']:focus{
    background-color:#686ead;
}

/*--------------------------------------------------------- */
/* --------------------- NAV ADMIN ------------------------ */
/*--------------------------------------------------------- */

#navAdmin{
    z-index:10;
    background-color:#0e0e0e;
    width:100%;
    display:block;
    height:38px;
    box-shadow:0 0 10px 0 #000;
    position:fixed;
}

#navAdminMobButton{
    display:none;
    margin:auto;
    padding:6px;
    text-align:center;
    transition:background-color .2s ease;
}

#navAdminMobButton:hover{
    background-color:#444;
}

#navAdminMobButton:active{
    background-color:#555;
}

#navAdminMobButton i{
    vertical-align:middle;
}

#navAdminPlaceholder{
    height:38px;
    width:100vw;
}

#navAdmin ul{
    transition:height .2s ease;
    background-color:#555;
}

#navAdmin ul li{
    font-size:12px;
    list-style-type:none;
    float:left;
    border-right:1px solid #ddd;
    padding:10px;
    transition:background-color .2s ease, border-right .2s ease;
}

#navAdmin ul li:hover{
    background-color:#333;
    border-right:1px solid rgba(0,0,0,0);
    
}

/*--------------------------------------------------------- */
/* -------------------- NAVIGATION ------------------------ */
/*--------------------------------------------------------- */

nav{
    width:100vw;
    position:fixed;
    clear:both;
    background-color:#222;
    height:59px;
    z-index:200;
    box-shadow:0 0 10px 0 #000;
}

nav ul{
    text-decoration:none;
    list-style-type:none;
    float:left;
    height:0px;
}

nav ul li{
    float:left;
}

nav ul li a{
    width:100%;
    display:inline-block;
    border-bottom:0px solid #222;
    padding:20px;
    color:#fff;
}

nav ul li a:hover{
    background-color:#444;
    border-bottom:10px solid #444;
    transition:background-color .2s ease, border-bottom .2s ease;
}


nav img{
    height:59px;
    float:left;
}

nav #smallMenu{
    color:#fff;
    display:none;
    padding:10px;
    font-size:40px;
    height:59px;
    overflow:hidden;
    transition: background-color .2s ease;
    cursor:pointer;
}

#bigHome{
    float:left;
    width:59px;
    height:59px;
    background-color:#3c427c;
}
.navPlaceholder{
    height:59px;
    z-index:0;
}

#smallMenu:hover{
    background-color:#333;
}

#smallMenu:active{
    background-color:#444;
}

.menu_active{
    background-color:#333;
}

/*------- Login ---------*/

#login{
    color:#fff;
    float:right;
    padding:10px;
    background-color:#3C427C;
    margin:7px 25px;
    cursor:pointer;
    transition:background-color .2s ease;
}

#login:hover{
    background-color:#464D91;
}

#login:active{
    background-color:#5C64AB;
}

#loginBox{
    color:#fff;
    position:fixed;
    max-width:500px;
    width:90vw;
    opacity:0;
    left:50%;
    top:50%;
    transform:translate(-50%,-300%);
    background-color:#222;
    border-radius:2px;
    padding:20px;
    z-index:500;
    transition:transform .2s ease, opacity .2s ease, top .2s ease;
}

.loginBox{
    opacity:1 !important;
    transform:translate(-50%,-50%) !important;
}

#closeLoginBox{
    text-align:left;
    color:#666;
    font-family:verdana;
}

#responseText{
    left:50%;
    display:block;
    position:fixed;;
    left:50%;
    top:-20%;
    transform:translate(-50%,0%);
    text-align:center;
    z-index:600;
    transition:top .2s ease;
    padding:5px;
    max-width:500px;
    width:90vw;
}

.failureResponse{
    top:2% !important;
    background-color:#DE6262;
}

.successResponse{
    top:2% !important;
    background-color:#60D68E;
}

#loginBox table tr{
    display:block;
    width:100%;
    text-align:center;
    padding:5px;
}

#loginBox table tr:first-of-type td{
    padding:0;
}

#loginBox table tr:first-of-type td span{
    display:block;
    margin:auto;
    opacity:0.4;
    transition:opacity .2s ease;
    border:0;
    cursor:pointer;
}

#loginBox table tr:first-of-type td span img{
    width:20px;
    height:20px;
}

#loginBox table tr:first-of-type td span:hover{
    opacity:0.7;
}

#loginBox table tr:first-of-type td span:active{
    opacity:1;
}

#loginBox table tr:first-of-type{
    padding:0;
}

#loginBox table:first-child:first-child{
    padding:0;
}

#loginBox table{
    margin:auto;
}

#loginBox table tr td{
    padding:10px;
    margin:auto;
    display:inline-block;
}

.overlay{
    width:100vw;
    height:100vh;
    background-color:rgba(0,0,0,0.5);
    position:fixed;
    top:0;
    left:0;
    opacity:1;
    z-index:400;
    transition:opacity .2s ease;
}


#overlay{
    opacity:0;
}

/*---------------------- LOGGED IN ------------------------ */

#profileButton{
    font-size:16px;
    color:#fff;
    float:right;
    padding:10px;
    background-color:#3C427C;
    margin:7px 25px;
    cursor:pointer;
    transition:background-color .2s ease;
}

#profileButton:hover{
    background-color:#464D91;
}

#profileButton:active{
    background-color:#5C64AB;
}

#loggedIn #profileOptions tr td img{
    margin:auto;
    display:block;
    padding:2px;
}

#loggedIn{
    color:#fff;
    position:fixed;
    max-width:500px;
    width:90vw;
    opacity:0;
    left:50%;
    top:50%;
    transform:translate(-50%,-300%);
    background-color:#222;
    border-radius:2px;
    padding:20px;
    z-index:500;
    transition:transform .2s ease, opacity .2s ease, top .2s ease;
}

#loggedIn table tr td img{
    width:20px;
    vertical-align:bottom;
    margin-right:10px;
}

#loggedIn table tr td{
    padding: 10px;
}

#loggedIn table{
    text-align:center;
    width:100%;
}

#loggedIn table tr td input{
    width:100%;
}

#loggedIn #profileSettings_settings{
    text-align:left;
}

#loggedIn table tr td img:last-of-type{
    height:25px;
    transform:translate(0,10%);
}

.loggedIn{
    opacity:1 !important;
    transform:translate(-50%,-50%) !important;
}

.button_dark{
    background-color:rgba(0,0,0,0.1);
    transition:background-color 0.2s ease;
    cursor:pointer;
}

.button_dark:hover{
    background-color:rgba(0,0,0,0.3);
}

.button_dark:active{
    background-color:rgba(0,0,0,0.6);
}

.button_dark_invert{
    background-color:rgba(60, 66, 124, 0.2);
    transition:background-color 0.2s ease;
    cursor:pointer;
}

.button_dark_invert:hover{
    background-color:rgba(60, 66, 124, 0.4);
}

.button_dark_invert:active{
    background-color:rgba(60, 66, 124, 0.6);
}

.settings_displayField{
    background-color:rgba(0,0,0,0.1);
    transition:background-color 0.2s ease;
    cursor:pointer;
}

.settings_displayField:hover{
    background-color:rgba(0,0,0,0.3);
}

.settings_displayField:active{
    background-color:rgba(0,0,0,0.6);
}

#settings_submit{
    display:block;
    margin:auto;
}

/*--------------------------------------------------------- */
/* -------------- RESPONSIVE FRAMEWORK -------------------- */
/*--------------------------------------------------------- */

a img{
    max-width:100%;
    max-height:100%;
}

.row{
    display:block;
    width:100vw;
    width:100%;
    padding:0 10px;
}

.col-1-12-xsmall{
    width:8.333333%;
    display:block;
    float:left;
}

.col-2-12-xsmall{
    width:16.6666666%;
    display:block;
    float:left;
}

.col-3-12-xsmall{
    width:25%;
    display:block;
    float:left;
}

.col-4-12-xsmall{
    width:33.333333%;
    display:block;
    float:left;
}

.col-5-12-xsmall{
    width:41.6666666%;
    display:block;
    float:left;
}

.col-6-12-xsmall{
    width:50%;
    display:block;
    float:left;
}

.col-7-12-xsmall{
    58.333333%;
    display:block;
    float:left;
}

.col-8-12-xsmall{
    66.6666666%;
    display:block;
    float:left;
}

.col-9-12-xsmall{
    width:75%;
    display:block;
    float:left;
}

.col-10-12-xsmall{
    width:81.333333%;
    display:block;
    float:left;
}

.col-11-12-xsmall{
    width:91.6666666%;
    display:block;
    float:left;
}

.col-12-12-xsmall{
    width:100%;
    display:block;
    float:left;
}

/*--------------------------------------------------------- */
/* ------------------------ HOME -------------------------- */
/*--------------------------------------------------------- */

.subjectName{
    display:block;
    text-align:center;
    color:#222;
    font-size:120%;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.mainTitle{
    background-color:rgba(0,0,0,0.5);
    padding:20px;
    font-size:220%;
    color:#fff;
    text-align:center;
}

.mainTitleFront{
    line-height:100%;
    font-weight:400;
    background-color:rgba(0,0,0,0.5);
    padding:10px;
    font-size:280%;
    color:#fff;
    text-align:center;
}

.mainSubheading{
    padding:5px;
    font-size:40%;
}

/*--------------------------------------------------------- */
/* ---------------- ADD and EDIT CATEGORY ----------------- */
/*--------------------------------------------------------- */

#editorUse{
    color:#222;
    text-align:center;
    padding:20px;
    display:block;
    margin:auto;
    text-decoration:none;
}

#textarea{
    color:#222;
    font-size: 80%;
    background: transparent;
    width:90vw;
    display: block;
    margin: 10px auto;
    min-height: 400px;
    border:1px solid #b7b7b7;
    padding:3px;
    -webkit-transition: box-shadow .2s ease;
    transition: box-shadow .2s ease;
    line-height: 150%;
    overflow-y:scroll;
    word-spacing: 2px;
    letter-spacing: 2px;
    resize:none;
}

.highlightWord{
    background-color:#a9d1ff;
    color:transparent;
}

#textarea:active{
    box-shadow: inset 0 0 3px 0 #0062ff;
}

#textAreaHighlight{
    overflow-x:hidden;
    border:1px solid #b7b7b7;
    font-size: 80%;
    text-align:left;
    overflow-y: scroll;
    line-height: 150%;
    word-spacing: 2px;
    letter-spacing: 2px;
    position: absolute;
    z-index: -20;
    color:transparent;
    top:10px;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    padding:3px;
}

pre img{
    max-width: 50vw;
    float: left;
    padding: 10px;
}

#preText *{
    color:#222;
}

#preText a b{
    color:#fff;
    transition:color .2s ease;
}

#preText a{
    color:#fff;
    display:block;
    background-color:#464D91;
    border-bottom:7px solid #2c305d;
    padding:10px;
    margin:10px auto;
    transition:background-color .2s ease, border-bottom .2s ease, margin .2s ease;
}

#preText a:hover{
    background-color:#2c305d;
    border-bottom:7px solid #464D91;
}

#preText a:hover b{
    color:#fff;
}

#preText a:active, #preText a:focus{
    margin:17px auto 10px auto;
    background-color:#2c305d;
    border-bottom:0px solid #464D91;
}

#preText{
    text-align:left;
    max-width:900px;
    margin:auto;
    position: relative;
    color:#222;
    padding:10px;
}

#preText h1{
    color:#fff;
    text-align:center;
    margin:auto;
    background-color:rgba(0,0,0,0.5);
    padding:5px;
    margin:10px;
}

#preText h2{
    color:#fff;
    text-align:center;
    margin:auto;
    background-color:rgba(0,0,0,0.5);
    padding:5px;
    margin:10px;
}

#preText h3{
    color:#fff;
    text-align:center;
    margin:auto;
    background-color:rgba(0,0,0,0.5);
    padding:5px;
    margin:10px;
}

#preText img{
    max-width: 100%;
    width: 50%;
    box-shadow:0 0 2px 0 #000;
    position: relative;
    margin:20px auto;
    padding:10px;
    display: block;
}

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

pre{
    color:transparent;
    padding:2px;
    text-align: justify;
    max-width: 100vw;
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

#saveInfo{
    width:200px;
    min-width: 20vw;
    padding: 10px;
    display: block;
    border:0;
    color:#fff;
    margin:10px auto;
}

#howToUse{
    margin:auto;
    border:color:#222;
}

#howToUse tr td{
    padding:7px;
}

#howToUse tr:nth-child(odd){
    background-color:#555;
}

#howToUse tr:nth-child(even) td{
    color: #555;
}

#preText ul li{
    padding:5px;
    list-style-type:inherit;
    list-style-position: inside;
}

#categoryName{
    color:#222;
    padding:5px;
    margin:10px auto;
    font-size:130%;
    text-align:center;
    display:block;
}

#categoryName input{
    font-size:100%;
}

#addCategoriesForm select, #addCategoriesForm select option{
    color:#222;
    margin:auto;
    font-size:100%;
}

#select_subject{
    color:#222;
    display:block;
    text-align:center;
    font-size:110%;
}

#previewInfo{
    display:block;
    margin:10px auto;
}

/*--------------------------------------------------------- */
/* ---------------- ADD and EDIT CATEGORY ----------------- */
/*--------------------------------------------------------- */

.categoryGroup{
    background-color:#3C427C;
    color:#fff;
}

.categoryGroupLi{
    margin-top:20px;
    text-align:center;
    font-size:150%;
    padding:20px;
    background-color:#3C427C;
    color:#fff;
}

#categoriesOfSubject{
    padding:10px;
    margin:20px auto;
    max-width:90vw;
    width:1000px;
    background-color:#eee;
}

.categoryLinks{
    font-size:150%;
    font-weight:400;
    color:#222;
    margin-top:20px;
    list-style:none;
    text-align:center;
    
}

.categoryLinks a{
    font-size:90%;
    padding:5px;
    color:#fff;
    opacity:0.4;
    background-color:#222;
    display:block;
    width:100%;
    transition: opacity .2s ease;
}

.categoryLinks a:hover{
    opacity:0.6;
}

.categoryLinks a:active{
    opacity:1;
}

.categoryLinks i{
    color:#222;
    padding:5px;
}

/*--------------------------------------------------------- */
/* ------------------- MANAGEMENT PANEL ------------------- */
/*--------------------------------------------------------- */

.categoryLinks_table_number{
    color:#222;
    text-align:center;
}

#displayEditCategories{
    border:none;
    margin:20px auto;
    max-width:90vw;
    width:1000px;
    background-color:#eee;
}

.categoryLinks_table_delete{
    text-align:center;
}

.categoryLinks_table_delete i{
    cursor:pointer;
}

#areYouSure{
    display:flex;
    color:#fff;
    position:fixed;
    max-width:500px;
    width:90vw;
    opacity:0;
    left:50%;
    top:50%;
    transform:translate(-50%,-1000%);
    background-color:#222;
    border-radius:2px;
    padding:20px;
    z-index:500;
    transition:transform .2s ease, opacity .2s ease, top .2s ease;
}

.areYouSure{
    opacity:1 !important;
    transform:translate(-50%,-50%) !important;
}

#areYouSure input{
    margin:5px;
    display:inline-block;
    width:50%;
}

.numberOfCategories{
    font-weight:400;
    color:#222;
    text-align:center;
    display:block;
}

.mainTitle input{
    font-size:40%;
}

.mainTitle input[type='text']{
    font-size:80%;
}

.mainTitle img{
    width:200px;
    max-width:100vw;
}

.mainTitle input[type='file']{
    color:#fff;
}

/*--------------------------------------------------------- */
/* ------------------- MANAGEMENT PANEL ------------------- */
/*--------------------------------------------------------- */

#contactForm{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    padding:20px;
    min-width:50vw;
    max-width:1000px;
    background-color:rgba(0,0,0,0.5);
}

#contactForm table{
    width:100%;
}

#contactForm table tr td{
    background-color:rgba(0,0,0,0.2);
    padding:20px;
    text-align:center;
}

#contactForm table tr td input{
    width:100%;
    max-width:300px;
    padding:5px;
}

#contactForm table tr td textarea{
    color:#222;
    width:100%;
    max-width:500px;
    height:150px;
}