/******** COMMON ********/

*:focus {
    outline: none !important;
}

body {
    margin: 0;
}

.bg {
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img-responsive {
    width: 100%
}

.mr {
    margin: 0 !important;
}

.pd {
    padding: 0 !important;
}

.site-main {
    background: #1e1f26;
    color: #fff;
}


.right-section {
    background: #131417;
    padding-bottom: 63px;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 4%;
    bottom: 8%;
    z-index: 99999;
}

.back-to-top>img {
    width: 8rem;
}

.form-card>.card-body {
    background-color: #131417;
}

.references {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

a.external {
    background-image: url(../images/external_link_icon.png);
    background-position: top right;
    background-position-x: right;
    background-position-y: top;
    background-repeat: no-repeat;
    background-size: 0.7em;
    padding-right: 0.9em;
}


/********* Form Components ****************/

.form-control {
    color: #000;
    background-color: #9b9ea5;
    border: none;
    outline: 0;
    box-shadow: 0;
}

.form-control:focus {
    color: #000;
    background-color: #FFFFFF;
    border: none;
}

div.modal-content {
    background-color: #1e1f26;
}

div.modal-footer button {
    border-color: white;
    color: white;
    border-radius: 0px;
}

input[type=submit].esbtn_std, button.esbtn_std {
    color: #65686f;
    border-color: #1e1f26;
    background-color: #1e1f26;
    margin-top: 5px;
    width: 6em;
    padding: 0.5em;
    height: 2.5em;
}

input[type=submit].esbtn_std:hover, button.esbtn_std:hover {
    font-weight: bold;
    color: #FFFFFF;
}

input[type=submit].esbtn_std.large, button.esbtn_std.large {
    width: 10em;
}

input[type=submit].esbtn_white, button.esbtn_white {
    color: #65686f;
    border-color: #FFF;
    border-width: 1px;
    background-color: #1e1f26;
    margin-top: 5px;
    width: 6em;
    padding: 0.5em;
    height: 2.5em;
}

input[type=submit].esbtn_white:hover, button.esbtn_white:hover {
    font-weight: bold;
    color: #FFFFFF;
}

input[type=submit].esbtn_white.large, button.esbtn_white.large {
    width: 10em;
}

input[type=submit].esbtn_blue, button.esbtn_blue {
    color: #64d1de;
    border-color: #64d1de;
    margin-top: 5px;
    width: 6em;
    padding: 0.5em;
    height: 2.5em;
}

input[type=submit].esbtn_blue:hover, button.esbtn_blue:hover {
    font-weight: bold;
    color: #000000;
    background-color: #64d1de;
}

input[type=submit].esbtn_blue.large, button.esbtn_blue.large {
    width: 10em;
}

textarea:focus, input:focus, button:focus, input[type=submit].esbtn_std:focus, button.esbtn_std:focus, input[type=submit].esbtn_blue:focus, button.esbtn_blue:focus {
    border: none;
    box-shadow: none !important;
}

.form-check-input:checked {
    background-color: #FFF;
    border-color: #FFF;
}

.form-check-input {
    background-color: #252830;
    border-color: #252830;
}


div.error input {
    color: #C00000;
}

ul.errorlist {
    color: #ffdd40;
    color: red;
    list-style: none;
    margin-left: 0px;
    padding-left: 0px;
}


/******** FONTS ********/
@font-face {
    font-family: 'OpenSans-Semibold';
    src: url(../fonts/OpenSans-Semibold.ttf);
}

@font-face {
    font-family: 'OpenSans-Bold';
    src: url(../fonts/OpenSans-Bold.ttf);
}

@font-face {
    font-family: 'OpenSans-Regular';
    src: url(../fonts/OpenSans-Regular.ttf);
}


/**** Tables ****/

#content table {
    margin: 10px auto;
    border-collapse: collapse;
} 

#content table thead {
    color: #FFFFFF;
    background-color: #1db5b6;
    text-decoration: none;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
}

#content table tbody {
    color: #222222;
}

#content table th, #content table td {
    padding: 5px 5px 5px 15px;
    border-left: 1px solid #c3d8d9;
    border-right: 1px solid #c3d8d9;
}

#content table td:first-child,#content table th:first-child {
    border-left: none;
}

#content table td:last-child,#content table th:last-child {
    border-right: none;
}

#content table tbody tr:nth-child(odd) {
    background-color:#cdded8;
}

#content table tbody tr:nth-child(even) {
    background-color:#e2fdf4;
}


.content-section-dark table {
    color: #fff;
}

.content-section-dark table th {
    color: #fff;
    text-decoration: none;
    font-weight: bolder;
    font-family: 'Open Sans', sans-serif;
}


/**** Avatar Modal ****/
#avatarModal .modal-header {
    color: #7e7e7e;
}

#profile-update input[type=radio] {
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #2a2e37;
    background-size: cover;
    border-radius: 1rem;
    height: 8rem;
    width: 8rem;
    margin: 0.25rem;
}

input#id_avatar_0[type=radio] {
    background-image: url(../images/anonymous_avatar.png );
}

div#id_avatar input[type=radio]:checked, div#id_avatar input[type=radio]:hover, div#id_avatar input[type=radio]:active {
    border: 3px solid #6ce1ee;
    box-shadow: 0 0 0 .25rem #6ce1ee;
}

/******** LEFT SIDEBAR START ********/
.sidebar {
    background: #1e1f26;
    float: left;
    width: 100%;
}

.sidebar .logo {
    background: #fff;
    padding: 1rem 1.5rem;
    border-radius: 100%;
    width: 12rem;
    height: 12rem;
    margin: 26px auto;
}

.sidebar .logo img {
    width: 100%;
    height: auto;
}

.sidebar-content {
    padding: 0 29px;
}

.sidebar-content .sidebar-heading {
    color: #ffdd40;
    font-size: 27.67px;
    font-family: 'OpenSans-Semibold';
    text-transform: capitalize;
    margin-bottom: 29px;
    margin-top: 47px;
}

.sidebar-content .line {
    width: 56px;
    height: 2px;
    background: #ffdd40;
    display: block;
    margin-left: 6px;
    margin-top: 16px;
}

#login-form input.form-control {
    border-radius: 2rem;
}

#password-reset-form input.form-control {
    border-radius: 2rem;
}

.password-reset-link {
    color: #fff;
}

.password-reset-link:hover {
    color: #6ce2ee;
}

p.profile_success_msg {
    color: #ffdd40;
    font-size: 18px;
    text-align: center;
    text-transform: capitalize;
}


/******** CATEGORY ********/

#category-section .hr-line {
    height: 1px;
    width: 110%;
    background: #545860;
    display: block;
    margin: 11px 0px;
    padding: 0px;
    position: relative;
    left: -10px;
}

#category-section h1:hover {
    cursor: pointer;
}

#category-section li:hover {
    cursor: pointer;
}

#category-section ul.level_1 {
    width: auto;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}

#category-section ul.level_1 {
    padding: 0px;
    margin: 0;
    font-size: 1em;
    line-height: 0.5em;
    list-style: none;
    background: #1e1f26;
    width: 95%;
}

#category-section ul.level_1 li {
    border-bottom: 1px solid #636363;
}

#category-section ul.level_1 li a {
    line-height: 10px;
    font-size: 18px;
    padding: 10px 5px;
    color: #fff;
    display: block;
    text-decoration: none;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    line-height: 24px;
    font-weight: bold;
}

#category-section ul.level_1 li a:hover {
    color: #ffdd40;
}

#category-section ul.level_1 ul {
    margin: 0 0 10px 0;
    padding: 0;
}

#category-section ul.level_1 ul li {
    margin: 0;
    padding: 0;
    clear: both;
    border-bottom: 0;
    list-style: none;
}

#category-section ul.level_1 ul li a {
    padding-left: 24px;
    font-size: 16px;
    font-weight: 600;
    outline: 0;
    font-family: 'Open Sans', sans-serif;
    color: #CDCDCD;
    background: url('../images/menu/yellow-bullet-4x4.jpg') 7px 20px no-repeat;
    line-height: 20px;
    text-transform: capitalize;
}

#category-section ul.level_1 ul li a:hover {
    color: #000;
    background: #ffdd40 url('../images/menu/white-bullet-4x4.jpg') 7px 20px no-repeat;
}

#category-section ul.level_1 ul li .active {
    color: #000;
    background: #ffdd40 url('../images/menu/white-bullet-4x4.jpg') 7px 20px no-repeat;
}


#category-section ul.level_1 ul li a.current_page {
    color: #000;
    background: #ffe880 url('../images/menu/white-bullet-4x4.jpg') 7px 20px no-repeat;
}

#category-section ul.level_1 ul ul li a {
    padding-left: 40px;
    background: none;
    font-size: 16px;
    color: #929292;
}

#category-section ul.level_1 ul ul li a:hover {
    background: #333;
    color: #fff;
}

#category-section ul.level_1 ul ul li a.active {
    background: #333;
    color: #fff;
}

#category-section ul.level_1 ul ul li a.current_page {
    background: #505050;
    color: #fff;
}

#category-section ul.level_1 span {
    float: right;
}

/******** TAG SIDEBAR ********/

section.tag-section h2.tag-heading {
    color: #39cf73;
}

section.tag-section .line {
    background: #39cf73;
    color: #ffffff;
}

section.tag-section ul {
    padding: 0;
    list-style: none;
}

section.tag-section ul li {
    display: inline-block;
}

section.tag-section ul>li>a {
    color: #fff;
    text-decoration: none;
    font-size: 13.85px;
    font-family: 'OpenSans-Semibold';
    line-height: 36px;
    padding: 3px 15px;
    display: inline-block;
    margin-bottom: 8px;
    border-radius: 8px;
    margin-right: 3px;
    border: 1px solid #66676e;
}

section.tag-section.searchpage ul>li>a {
    line-height: 20px;
}

section.tag-section ul li a:hover {
    border: 1px solid #39cf73 !important;
    color: #39cf73 !important;
}

section.tag-section ul li .active {
    background: #fff;
    color: #000;
}

/******** TAG DETAIL ********/
#tag-description.card {
    background-color: #2c303a;
    border-color: #2c303a;
}

#tag-description>.card-body {
    background-color: #38505a;
    background-position-x: right;
    background-position-y: center;
    background-size: 8rem;
    background-repeat: no-repeat;
    border: 0px;
    padding: 4rem 4rem;
}

#tag-description>.card-body>.card-text {
    padding-right: 4rem;
}

#tag-description>.card-body.es-definition {
    background-image: url(../images/content_elements/evilsaint_definition.png);
}

#tag-description>.card-body.es-callout {
    background-image: url(../images/content_elements/evilsaint_callout.png);
}


/******** ABOUT ********/

.about-section .content {
    text-align: center;
}

.about-section .content img {
    width: 120px;
    height: auto;
    margin: 10px 0 28px;
}

.about-section .content a {
    color: #7a7a7a;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 17px;
    font-family: 'OpenSans-Semibold';
    border: 1px solid;
    padding: 4px 20px;
    border-radius: 35px;
    margin-top: 14px;
    display: inline-block;
    margin-bottom: 67px;
}

.about-section .content a:hover {
    color: #ffdd40;
}


/******** NEWSLETTER ********/

.content-section p#thank-you-text {
    font-family: OpenSans-Regular;
    font-size: 2em;
    color: #aaf6ff;
    text-align: center;
    vertical-align: middle;
    margin-top: 1.4em;
    margin-right: 1em;
}

.content-section h5.email-reset-header {
    font-size: 1.5em;
    text-align: center;
    margin-top: 2em;
}

.content-section p.email-reset-text {
    font-family: OpenSans-Regular;
    font-size: 1.2em;
    color: #aaf6ff;
    text-align: center;
    vertical-align: middle;
    margin-top: 1.4em;
    margin-right: 1em;
}

.newsletter-section {
    text-align: center;
    margin-bottom: 73px;
}

.newsletter-section h2 {
    font-size: 1.5rem;
    text-decoration: underline;
    text-transform: uppercase;
    font-family: 'OpenSans-Semibold';
    margin-bottom: 13px;
}

.newsletter-section a {
    color: #7b7b7c;
    display: inline-block;
    margin-bottom: 25px;
    text-decoration: none;
}

.newsletter-section input.form-control {
    border-color: #3e424d;
    background: #3e424d;
    border-radius: 49px;
    color: #fff;
    padding: 22px 13px;
}

.newsletter-section .glyphicon {
    padding: 5px 0;
    margin-right: 10px;
}

/******** HEADER ********/

header {
    padding: 25px 0;
}

.search-box-header input {
    background: none;
}

.search-wrapper {
    position: relative;
}

.search-box-header .glyphicon {
    left: 20px;
}

.search-box-header input {
    border: none;
    background: #252830;
    border-radius: 44px;
    padding-left: 58px;
    font-size: 17px;
    font-family: 'OpenSans-Semibold';
    color: #99999b;
    text-decoration: none;
    color: #fff;
}

.search-box-header input:focus {
    border: none;
    background: #252830;
    border-radius: 44px;
    padding-left: 58px;
    font-size: 17px;
    font-family: 'OpenSans-Semibold';
    color: #99999b;
    text-decoration: none;
    color: #fff;
}

.search-box-header input:placeholder {
    font-size: 17px;
    font-family: 'OpenSans-Semibold';
    color: #99999B;
}

/* On Search Results Page */
span#search_term {
    color:#53EFFD;
}

/******** RIGHT SIDEBAR ********/

.content-main-section {
    padding: 0 35px;
}

.add {
    margin-bottom: 31px;
}

.card-content {
    background: #2c303a;
    padding: 26px 19px;
    border-radius: 20px;
    margin-bottom: 40px;
}

.card-content .content-type {
    display: block;
    color: #6DE1F0;
    text-decoration-line: none;
    font-weight: bolder;
    padding-bottom: 10px;
}

.content-main-section img.content_icon {
    max-height: 100%;
    max-height: 100%;
}

.card-content .content-heading, .card-content .content-heading a {
    font-size: 17.55px;
    font-family: 'OpenSans-Bold';
    line-height: 24px;
    color: #fff;
    text-decoration: none !important;
}

.card-content .content-heading:hover {
    text-decoration: underline !important;
    color: #fff !important;
}

.card-content .date {
    font-size: 13px;
    font-family: 'OpenSans-Regular';
    display: block;
    padding: 16px 0 18px 0;
}

.card-content .date .fa-calendar {
    margin-right: 7px;
}

.card-content .description p {
    font-size: 16px;
    font-family: 'OpenSans-Regular';
}

.card-content .readmore {
    margin: 25px 0 0 0.25rem;
    background: #2C303A;
    color: #7a7a7a;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 17px;
    font-family: 'OpenSans-Semibold';
    border: 1px solid;
    padding: 4px 20px;
    border-radius: 35px;
    display: inline-block;
}


.card-content .readmore:hover {
    color: #FFFFFF;
}

.card-content .hr-line {
    height: 1px;
    width: 100%;
    background: #545860;
    display: block;
    margin-bottom: 48px;
    margin-top: 26px;
}

.card-content .hr-download-line {
    height: 1px;
    width: 100%;
    background: #545860;
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
    display: inline-block;
}


.card-content .button-grp button {
    background: #3e424d;
    padding: 8px 24px;
    border-radius: 34px;
    text-transform: capitalize;
    border: none;
    color: #fff;
    margin: 3px;
    margin-bottom: 5px;
    display: inline-block;
    border: 1px solid #3e424d !important;
}

.card-content .button-grp a {
    background: #3e424d;
    border: none;
    color: #fff;
    font-size: 14px;
    display: inline-block;
    text-decoration: none;
}

.card-content .button-grp a:hover {
    color: #39cf73 !important;
}

.card-content .button-grp button:hover {
    border: 1px solid #39cf73 !important;
    color: #39cf73 !important;
}

.card-content .button-grp {
    text-align: right;
    margin-bottom: 19px;
}


/******** Tag Control ********/


.tag-group a {
    background: #3e424d;
    border-radius: 34px;
    border: 1px solid #3e424d !important;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    margin-bottom: 5px;
    margin: 3px;
    padding: 8px 24px;
    text-decoration: none;
    text-transform: capitalize;
}

.tag-group a:hover {
    color: #39cf73 !important;
    border: 1px solid #39cf73 !important;
}

.tag-group {
    text-align: right;
    margin-bottom: 19px;
}

.tag-group .tag-expand {
    display: none;
}

.description:hover .tag-group .tag-expand {
    display: block;
}

/******** PAGINATION ********/


.pagination-custom {
    font-size: 16px;
}

.pagination-custom .prev {
    background: #252830;
    padding: 1rem 14px;
}

.pagination-custom .next {
    background: #252830;
    padding: 1rem 14px;
}

.pagination-custom .active {
    background: url(../images/circle.svg );
    background-position: center;
    background-repeat: no-repeat;
    background-size: 3rem;
}

.pagination-custom a {
    text-transform: capitalize;
    color: #fff;
    text-decoration: none;
    font-family: 'OpenSans-Semibold';
}

.pagination-custom li {
    list-style: none;
    display: inline-block;
    text-align: center;
    padding: 1rem;
    border-radius: 100%;
}

.pagination-custom {
    padding: 0;
}


/******** SOCIAL ********/

.social-icon a {
    text-decoration: none;
    color: transparent;
    height: 26px;
    display: inline-block;
    margin-top: 8px;
}

.social-icon a:hover {
    background: none;
    text-decoration: none;
}

.social-icon a i {
    color: #fff;
    font-size: 26px;
    padding: 0 9px;
}

/******** AVATAR LOGIN ********/

div.dropdown ul#auth-dropdown {
    background-color: #1e1f26 !important;
    color: #65686f;
    border-radius: 3px;
}

.dropdown #auth-dropdown span.username {
    padding: 5px 15px;
    color: #64d1de;
    font-weight: bold;
}

.dropdown #auth-dropdown li a {
    background-color: #1e1f26;
    color: #65686f;
}

.dropdown #auth-dropdown li a:hover {
    color: #FFF !important;
}

a#avatar-profile {
    color: #ffffff;
}

a#avatar-profile span {
    color: #ffffff;
}

a#avatar-profile-login {
    color: #ff0000;
}

a#avatar-profile-login button {
    color: #64d1de;
    border-color: #64d1de;
    margin-top: 5px;
}

a#avatar-profile-login button:hover {
    font-weight: bold;
    color: #131417;
    border-color: #64d1de;
    background-color: #64d1de;
}

/******** CONTENT SECTION ********/

.content-section {
    border-radius: 5px;
    padding: 12px 18px 24px;
    transition: all 0.5s;
}

.content-section #toc-header {
    margin: 0px;
}

.content-section span.tags a {
    color: #39cf73;
    text-decoration: none;
    font-size: 12px;
    font-family: 'OpenSans-Semibold';
    line-height: 20px;
    padding: 2px 4px;
    display: inline-block;
    margin-bottom: 4px;
    border-radius: 5px;
    margin-right: 2px;
    border: 1px solid #39cf73;
}


.content-section a {
    color: #39cf73;
}

.content-section .col-xs-12 {
    margin-left: 20px;
    padding-right: 20px;
}

.content-section figcaption.figure-caption {
    color: #7e8db2 !important;
}

.content-section ul li a {
    color: #2bd2aa;
    font-weight: bold;
}

.content-section h2.title-main {
    margin: 10px 0 0px;
    font-size: 30px;
    font-family: 'OpenSans-Bold;

}

.content-section span.hr-line {
    height: 1px;
    background: #e2e5e9;
    width: 94%;
    display: inline-block;
    padding: 0 33px;
    margin: 27px 3% 28px;
}

.content-section h2 {
    font-size: 30px;
    font-family: 'OpenSans-Bold';
    font-weight: bold;
    margin-top: 15px;
}

.content-section h3 {
    font-size: 22px;
    font-family: 'OpenSans-Regular';
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 15px;
}

.content-section h4 {
    font-family: 'OpenSans-Regular';
    font-size: 21px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 15px;
}

.content-section h5 {
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 15px;
}

.content-section h5.step {
    border-left: #19ad52 solid 5px;
    font-size: 20px;
    padding-left: 15px;
    line-height: 30px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: 'OpenSans-Bold';
}

.content-section div#breadcrumb {
    font-size: 14px;
}

.content-section #breadcrumb span.crumb {
    font-weight: bold;
}

.content-section p code {
    /*background-color: #272822;
 color: #f8f8f2;*/

    background-color: #c4edf5;
    color: #000;
    padding: 3px 6px;
    white-space: nowrap;

    border-radius: .3em;
    /*padding: 3px 5px;*/
}

.content-section div.quote {
    display: inline-block;
    margin: 1em;
    overflow: hidden;
}

.content-section div.quote blockquote {
    background-color: #f8f9fa;
    border: solid 2px #757575;
    display: inline-block;
    margin: 0;
    padding: 1em;
    position: relative;
}

.content-section div.quote blockquote::before {
    background-color: #f8f9fa;
    bottom: -10%;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: -10%;
    transform: rotate(-15deg) skew(5deg);
}

.content-section-dark div.quote blockquote {
    background-color: #2c303a;
    border: solid 2px #39cf73;
}

.content-section-dark div.quote blockquote::before {
    background-color: #2c303a;
}    

.content-section div.quote blockquote cite {
    display: block;
    font-style: italic;
    text-align: right;
}

.content-section div.quote blockquote cite::before {
    content: "- ";
}

.content-section div.quote blockquote>* {
    position: relative;
    z-index: 1;
}

.content-section .card-body.es-callout, .content-section .card-body.es-definition {
    background-color: #38505a;
    background-position-x: right;
    background-position-y: center;
    background-size: 8rem;
    background-repeat: no-repeat;
    border: 0px;
    padding: 3rem 3rem;
    margin-top: 10px;
    margin-bottom: 10px;
}

.card-body.es-definition p, .card-body.es-callout p {
    padding-right: 4rem;
    color: #FFFFFF;
    margin: 0px;
}


.content-section .card-body.es-definition {
    background-image: url(../images/content_elements/evilsaint_definition.png);
}

.content-section .card-body.es-callout {
    background-image: url(../images/content_elements/evilsaint_callout.png);
}



.content-section .card-body.es-question, .content-section .card-body.es-lightbulb, .content-section .card-body.es-warning, .content-section .card-body.std-quote, .content-section .card-body.es-quote {
    background-color: #38505a;
    background-position-x: left;
    background-position-y: center;
    background-size: 8rem;
    background-repeat: no-repeat;
    border: 0px;
    padding: 3rem 3rem;
    margin-top: 10px;
    margin-bottom: 10px;
}

.card-body.es-question p, .card-body.es-lightbulb p, .card-body.es-warning p, .card-body.std-quote p, .card-body.es-quote p {
    padding-left: 4rem;
    color: #FFFFFF;
    margin: 0px;
}

.content-section .card-body.es-question {
    background-image: url(../images/content_elements/evilsaint_question.png);
}

.content-section .card-body.es-lightbulb {
    background-image: url(../images/content_elements/evilsaint_lightbulb.png);
}

.content-section .card-body.es-warning {
    background-image: url(../images/content_elements/evilsaint_warning.png);
}

.content-section .card-body.std-quote {
    background-image: url(../images/content_elements/std_quote.png);
}

.content-section .card-body.es-quote {
    background-image: url(../images/content_elements/evilsaint_quote.png);
}

.content-section p {
    font-family: OpenSans-Regular;
    font-size: 16px;
    margin-bottom: 32px;
}

.content-section ul {
    font-family: OpenSans-Regular;
    font-size: 16px;
    list-style-position: outside;
    list-style-type: disc;
}

.content-section li {
    font-family: OpenSans-Regular;
    font-size: 16px;
}

.content-section #theme-switcheroo>input {
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #2a2e37;
    border-radius: 1rem;
    height: 1.75rem;
    position: relative;
    width: 3.5rem;
}

.content-section #theme-switcheroo>input:before {
    background-image: url(../images/ts_moon.png );
    background-position: center;
    background-size: 1.25rem;
    content: "";
    height: 1.25rem;
    left: 8%;
    position: absolute;
    top: 16%;
    transition: all 0.5s;
    width: 1.25rem;
}

.content-section #theme-switcheroo>input:checked {
    background-color: var(--bs-light);
}

.content-section #theme-switcheroo>input:checked:before {
    background-image: url(../images/ts_sun.png );
    transform: translate(144%);
}

.content-section .content figure>img {
    border: 1px solid #131417;
}

.content-section.content-section-light h1, .content-section.content-section-light h1 code {
    color: #3e8483;
}

.content-section.content-section-dark h1, .content-section.content-section-dark h1 code {
    color: #53effd;
}

.content-section-dark {
    background-color: #2c303a;
    color: #fff;
}

.content-section .accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
}

.content-section #tldr-header {
    margin: 0px;
    padding: 0px;
}

.content-section #tldr .accordion-item {
    background-color: inherit;
}

.content-section #tldr .accordion-button {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 500;
}

.content-section #tldr .accordion-button:not(.collapsed) {
    color: #fff;
}

.content-section-dark #tldr .accordion-button, .content-section-dark #tldr #tldr-content {
    background-color: #3e8482;
}

.content-section-dark div.accordion-item button::after {
    background-image: url("../images/toc-arrow-dark.svg");
    background-repeat: no-repeat;
    background-size: 1.25rem;

}

.content-section-light {
    background: #f8f9fa;
    color: #000;
}

.content-section-light #tldr .accordion-button, .content-section-light #tldr #tldr-content {
    background-color: #9fc2c1;
}

.content-section #toc .accordion-item {
    background-color: inherit;
}

.content-section #toc .accordion-button {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 500;
}

div#toc-content {
    border-top: 1px solid #D9DADB
}


.content-section-dark #toc .accordion-button, .content-section-dark #toc #toc-content {
    background-color: #1f1f29;
    color: #53EFFD;
}

.content-section-dark #toc .accordion-button, .content-section-dark #toc #toc-content a {
    color: #53effd;
}

.content-section-light #toc .accordion-button, .content-section-light #toc #toc-content {
    background-color: #deeeee;
}

.content-section-light #toc .accordion-button, .content-section-light #toc .accordion-button::after, .content-section-light #toc .accordion-button i {
    color: #438583;
}

.content-section-light #toc ul li {
    color: #438583;
}

.content-section-light #toc #toc-content a {
    color: #3e8483;
}


.content-section-light div.accordion-item button::after {
    background-image: url("../images/toc-arrow.svg");
    background-repeat: no-repeat;
    background-size: 1.25rem;

}

.main-content-section .card-content>.description {
    overflow-x: hidden;
}

/******** CHEATSHEET ********/

div.cheatsheet a {
    color: #75E5E6;
}


.cheatsheet h3 {
    position: absolute;
    bottom: 5px;
    left: 15px;
    background-color: #222222;
    padding: 5px;
    opacity: 80%;
}

.cheatsheet .detail-pane {
    height: 200px;
    width: 300px;
    z-index: 0;
    border: 1px solid #64D1DE;
    position: absolute;
    overflow: hidden;
}

.card-img-with-heading {
    position: relative;
}

.card-img-with-heading p {
    margin-bottom: 0;
}


/******** WALLPAPER ********/

.wallpaper-cont {
    background: #2c303a;
    border-radius: 20px;
    padding-bottom: 40px;
}

.wallpaper-cont .card-content.px-2 {
    margin-bottom: 0;
    padding-bottom: 0;
}

.wallpaper-with-heading {
    position: relative;
}

.wallpaper-with-heading p {
    margin-bottom: 0;
}

.wallpaper-with-heading h3.content-heading.text-center {
    position: absolute;
    bottom: 0px;
    left: 30px;
}

.wallpaper-with-heading .content-heading-with-download {
    position: absolute;
    bottom: 5px;
    width: 92%;
}

.content-heading-with-download img {
    width: 30px;
    float: right;
    border: 2px solid #2ebcd2;
    padding: 2px;
}


/******** SEARCH ********/

.content-section #search h3 {
    margin: 15px 0px;
}

.content-section #search h4 {
    margin-bottom: 5px;
}

.content-section #search h4 a {
    color: #39cf73;
}

.content-section #search p.content {
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.content-section #search p.tags {
    padding-bottom: 0px;
}

.content-section #search p.tags span.badge {
    margin-right: 5px;
    background-color: #1e1f26;
    text-transform: lowercase;
}

.content-section #search p.tags span.badge a {
    color: #ffffff;
    text-decoration: none;
}

.content-section #search p#no_search_results {
    font-family: OpenSans-Regular;
    font-size: 1.5em;
    color: #aaf6ff;
    text-align: center;
    vertical-align: middle;
    margin-top: 1.4em;
    margin-right: 1em;
}

/******** FOOTER ********/

.content-footer .navigation a {
    font-weight: bold;
}

.content-section-light .content-footer a {
    color: #3e8483;
}


.content-section-dark .content-footer a {
    color: #53effd;
}

.content-section-dark .content-footer .navigation {
    background-color: #2c303a;
}

.content-footer .navigation {
    background: #f7f8ff;
    padding: 17px 3px;
}

.content-footer .navigation>div.d-flex {
    align-items: center;
}

.content-footer .hr-line {
    height: 1px;
    background: #e2e5e9;
    width: 94%;
    display: inline-block;
    padding: 0 33px;
    margin: 39px 3% 28px;
}

.content-footer .code-btn-grp {
    text-align: right;
}

.content-footer .code-btn-grp button {
    text-align: right;
    background: #fff9e0;
    border: none;
    padding: 7px 20px;
    border-radius: 8px;
    margin-right: 8px;
    margin-bottom: 13px;
    font-family: 'OpenSans-Bold';
    color: #8c8874;
    font-size: 15px;
    margin-left: 11px;
    border: 1px solid #fff9e0;
    width: auto;
    display: none !important;
}

.content-footer .code-btn-grp button a {
    text-decoration: none;
    color: #8c8874;
}

.content-footer .code-btn-grp button:hover {
    background: #fff;
    border: 1px solid #8c8874;
}

/******** COMMENTS ********/


.social-login {
    text-align: center;
}

.social-login p {
    font-size: 0.875rem;
}

.social-login .social-icon a i {
    color: #fff;
    font-size: 24px;
    border-radius: 100%;
    height: 40px;
    width: 40px;
}

.social-login .login-title {
    color: #34464c;
    font-size: 21px;
    font-family: 'OpenSans-Bold';
}

.comment a {
    color: #757585;
}

.comment>h6>span>a.mutedlink:focus {
    color: red;
}

.comments-form .btn {
    font-size: 1.5rem;
}

.btn-post {
    font-size: 1.5rem;
}

.comments-form .post textarea {
    font-family: 'OpenSans-Regular';
    font-size: 17px;
    width: 98%;
    resize: none;
    height: 174px;
    border-radius: 4px;
    color: #000;
    padding: 13px 17px;
    border: 0;
}

.comments-form .post-btn {
    float: right;
    position: relative;
    top: -52px;
    background: #34464c;
    font-family: 'OpenSans-Bold';
    border: none;
    padding: 9px 26px;
    left: -9px;
    border-top-left-radius: 14px;
    text-transform: uppercase;
    font-size: 22px;
    color: #fff;
}

/******** SEARCH AJAX ********/

#search_results h3 {
    font-size: 26px !important;
    border-bottom: 1px dashed #545860 !important;
    padding: 10px 0 12px 0 !important;
}

#search_results {
    padding: 11px 26px 22px 26px !important;
    width: 98%;
    background: #1e1f26;
    color: #fff;
    position: relative;
    left: 1%;
    top: 100%;
    z-index: 999;
    position: absolute;
}

#search_results a {
    font-size: 18px !important;
    color: #39cf73;
}

#search_results p {
    font-size: 16px !important;
    margin-top: -5px !important;
}

.commentinp {
    border-radius: 4px;
    border: 0;
    width: 48%;
    float: left;
    margin: 0 2% 5px 0;
    padding: 3px 12px;
    font-size: 16px;
}

.alert-success {
    color: #ffdd40 !important;
    background-color: #131417 !important;
    border-color: #ffdd40 !important;
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
    .content-section .col-xs-12 img {
        width: 100%;
        height: auto;
    }

    .content-section .col-xs-12 {
        width: 94%;
    }

    .commentinp {
        width: 98%;
    }
}

@media only screen and (max-width: 320px) {
    .content-section .col-xs-12 img {
        width: 100%;
        height: auto;
    }

    .content-section .col-xs-12 {
        width: 94%;
    }

    .commentinp {
        width: 98%;
    }
}

a {
    color: #9b9bd6;
    text-decoration: none;
}

.post-publish {
    float: left;
    margin: 3px 10px 0 0;
}

.post-date {
    float: left;
    margin: 3px 10px 0 0;
}

.post-time {
    float: left;
    margin: 3px 10px 0 0;
}

.clear {
    clear: both
}

.fooarrow-left {
    float: left !important;
    padding: 0 !important;
}

.fooarrow-right {
    float: right !important;
    padding: 0 !important;
}


.fooarrow-left i {
    font-size: 30px;
}

.fooarrow-right i {
    font-size: 30px;
}


.post-table {
    border: 0;
    width: 100%;
}

.post-table td {
    color: #4c4c4c;
    text-align: center;
    padding: 4px 0 4px 0;
    font-family: OpenSans-Regular;
    font-size: 15px;
}

.post-table tr:nth-child(1) {
    border: 0;
    background: #9aff9a;
    color: #fff;
}

.post-table tr:nth-child(3) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(5) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(7) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(9) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(11) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(13) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(15) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(17) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(19) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(21) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(23) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(25) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(27) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(29) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(31) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(33) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(35) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(37) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(39) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(41) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(43) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(45) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(47) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(49) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(51) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(53) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(55) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(57) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(59) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(61) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(63) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(65) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(67) {
    border: 0;
    background: #fafafa;
}

.post-table tr:nth-child(69) {
    border: 0;
    background: #fafafa;
}

.commentsdate {
    text-align: right;
}

.comment-name {
    color: #40d7ce;
    margin-bottom: 8px;
}

.reply-line {
    padding-top: 9px;
    margin-bottom: 25px;
    text-align: right;
    font-size: 15px;
}

.reply-line-inner {
    border-top: 1px solid #2a2c30;
    width: 85%;
    float: right;
    margin: 0 0 4px 0;
}

.reply-line a {
    color: #4c4e51;
    text-decoration: none;
}

.reply-line a:hover {
    color: #646568;
}

.comment-picarea {
    float: left;
    margin: 0 5% 0 0;
    width: 17%;
}

.comment-picarea img {
    width: 100%;
    height: auto;
}

.commentname {
    float: left;
    width: 75%;
    overflow: hidden;
}

.card-body {
    background-color: rgba(57, 207, 115, 0.25);
    border: 1px solid #39cf73;
}

h1 {
    color: #324049;
    font-weight: 600;
}

/* MOBILE RESPONSIVE STYLES FOLLOW */

.collapse.in {
    display: block;
}

@media screen and (max-width: 767px) {

	section#category-section {
        position: absolute;
        top: 123px;
        left: 0;
        width: 100%;
        padding: 0 15px;
    }
	.right-sidebar {
		display: none;
	}
	.login-header.col-sm-2.col-md-2.col-lg-2.col-xs-2 {
		display: none;
	}
	.right-header-image.col-sm-2.col-md-2.col-lg-2.col-xs-2.pt-1 {
		display: none;
	}
	.row.mr {
		display: flex;
		flex-flow: column-reverse;
	}
	h2.sidebar-heading {
		display: none;
	}
	.social-icon {
		display: none;
	}
	.form-group.has-feedback.search-box-header {
		display: none;
	}
	.main-content-section .card-content>.description {
		display: none;
	}
	.card-content .col-sm-8 {
		width: 66%;
	}
	.card-content .col-sm-4.icon {
		width: 33%;
	}
	.sidebar .logo {
		display: none;
	}
	aside.sidebar {
		padding-top: 50px;
	}
	.about-section .content p {
		font-size: 0.85rem;
		font-weight: 300;
	}
	.newsletter-section .lead {
		font-size: 0.85rem;
		font-weight: 300;
	}
	.mobile-mnu .col-sm-6.col-md-6.col-lg-6.col-xs-6 {
		width: 40%;
		float: left;
	}
	.mobile-mnu .col-sm-2.col-md-2.col-lg-2.col-xs-2 {
		width: 20%;
	}
	.mobile-mnu button.esbtn_blue {
		width: 4em;
	}
	.search-mob.col-sm-2.col-md-2.col-lg-2.col-xs-2 {
		text-align: right;
	}
	.navbar-light .navbar-toggler-icon {
		filter: invert(79%) sepia(50%) saturate(521%) hue-rotate(146deg) brightness(92%) contrast(89%);
	}
	.search-mob img#search-btn {
		width: 43px;
		margin-top: 5px;
	}
	.search-mob img#search-btn:hover {
		background: #2c303a;
	}
	
	.mobile-mnu button.navbar-toggler {
		border: 1px solid #64d1de !important;
		margin-top: 5px;
		padding: 4px 5px;
		margin-left: 5px;
	}
	h3.sidebar-heading {
		border-top: 1px solid #66676e;
		padding-top: 10px;
	}
	.sidebar-content .line {
		display: none;
	}
	.newsletter-section h2.heading {
		border-top: 1px solid #66676e;
		border-bottom: 1px solid #66676e;
		padding: 10px 0;
		text-decoration: none;
	}
	section#category-section {
		top: 99px;
		padding: 0 0px;
		background: #2c303a;
		margin: 0px;
		width: 100%;
		z-index: 999;
	}
	#side-menu ul.level_1.metismenu {
		width: 100%;
	}
	#category-section ul.level_1 li a {
		text-align: center;
		color: #ffdd40 !important;
	}
	#category-section ul.level_1 ul li a:hover {
		color: #1e1f26 !important;
	}
	#category-section ul.level_3.mm-collapse {
		background: #2c303a;
	}
	h3.tags-heading {
		color: #39CF73;
		font-size: 27.67px;
		font-family: 'OpenSans-Semibold';
		margin-bottom: 40px;
	}
	section.tag-section ul>li>a {
		text-transform: uppercase;
	}
	.sidebar {
		background: #131417;
	}
	h3.recent-title {
		font-size: 27.67px;
		font-family: 'OpenSans-Semibold';
	}
	.card-content {
		padding: 15px 15px;
		border-radius: 10px;
	}
	.card-content .content-heading {
		font-family: 'OpenSans-semiBold';
	}
	.card-content .date {
		padding: 5px 0 10px 0;
	}
	.desktop-label {
		display : none;
	}
	.card-content .content-type {
		padding-bottom: 5px;
	}
	#myList li{ 
		display:none;
	}
	#myList {
		display: flex;
		flex-wrap: wrap;
	}
	div#loadMore {
		border: 1px solid #39CF73;
		padding: 10px;
		display: inline-block;
		border-radius: 8px;
		color: #39CF73;
		font-size: 16px;
		font-weight: 500;
	}
	#category-section ul.level_3 .tier-3 a {
		color: #b8bfce !important;
	}
	#category-section ul.level_3 .tier-3 a:hover {
		color: #fff !important;
		background: #5a6170;
	}
	#category-section ul.level_2 .tier-2 a {
		font-size: 15px;
		font-weight: 400;
	}
	.header-search-from-mob {
		display: none;
		text-align: center;
	}
	.header-search-from-mob input[type="text"] {
		border-radius: 15px;
		padding: 5px 20px;
		border: 0;
		width: 100%;
	}
	.header-search-from-mob form {
		position: relative;
		margin-top: 30px;
	}
	.header-search-from-mob button {
		background: #2c303a;
		border-radius: 50%;
		border: 0;
		width: 45px;
		height: 45px;
		position: absolute;
		bottom: -6px;
		right: -1px;
	}
	.header-search-from-mob img {
		width: 35px;
	}
}

@media screen and (min-width: 768px) {
    .mobile-mnu {
        display : none;
    }
    h3.tags-heading {
        display : none;
    }
    .mobile-label {
        display : none;
    }
    div#loadMore {
        display : none;
    }
    .header-search-from-mob {
        display: none;
    }

}