/**
 * Codestar Custom Styles
 *
 * @package   Codestar_Custom_Styles
 * @author    Jozoor, mohamdio [jozoor.com]
 * @link      https://plugins.jozoor.com/shortcode-cleaner
 * @copyright 2017 Jozoor, mohamdio [jozoor.com]
 * @license   GPL-2.0+
 * @version   1.0.0
 *
 * @since  1.0.0
 */

/**
 * Common styles
 */

/* fonts */
.cs-framework .cs-header fieldset input, .cs-framework .cs-nav ul li a, .cs-framework .cs-nav ul ul li a, .cs-framework .cs-footer, .cs-framework .cs-content .cs-sections, .cs-element input[type="text"], .cs-element input[type="number"], .cs-element select, .cs-element textarea, #cs-save-ajax, .cs-framework .cs-content .cs-section-title h3 {
	font-family: 'Poppins', sans-serif;
	font-weight: 400; /* regular */
}

.cs-framework .cs-header h1, .cs-element .cs-title h4, .cs-field-heading, .cs-field-subheading {
	font-family: 'Poppins', sans-serif;
	font-weight: 500; /* medium */
}

/* remove outline on active or focus */
.cs-framework a:active, .cs-framework a:focus, .cs-framework a {
	box-shadow: none;
}

/**
 * Header styles
 */
.cs-framework .cs-header {
	background-color: #1E1E1E;
    padding: 30px 32px 27px;
}

.cs-framework .cs-header h1 {
	font-size: 18px;
    /*letter-spacing: 0.5px;*/
    line-height: 36px;
}

.cs-framework .cs-header h1 img {
	display: inline-block;
    vertical-align: text-bottom;
    margin-top: -14px;
}

.cs-framework .cs-header fieldset input {
	box-shadow: none !important;
    text-shadow: none !important;
    height: 37px;
    padding: 0 13px 1px;
    margin: 0 0 0 7px;
	font-size: 14px;
	border-color: transparent !important;
	-webkit-border-radius: 2px;
    border-radius: 2px;
    line-height: 37px;
}

.cs-framework .cs-header fieldset input.cs-save, .cs-fieldset .button.cs-add-group {
	background: #84B542 !important;
}

.cs-framework .cs-header fieldset input.cs-save, .cs-fieldset .cs-download-backup-data, .cs-element input.cs-import-backup, .cs-element .cs-copy-info {
	background: #84B542 !important;
	color: #fff !important;
	border: none !important;
}

.cs-framework .cs-header fieldset input.cs-restore {
	background: #F6F6F6;
	color: #474747;
}

.cs-framework .cs-header fieldset input.cs-restore.cs-warning-primary, .cs-fieldset .button.cs-remove-group {
	background: #d9aa5a !important; /* old #CDAA6E */
}

/**
 * Nav sections styles
 */
.cs-framework .cs-nav, .cs-framework .cs-nav-background {
	width: 260px;
}

.cs-framework .cs-nav-background {
	background-color: #282828;
}

.cs-framework .cs-nav ul li a {
	background-color: #282828;
	color: #8C8C8C;
	font-size: 13.2px;
	border-bottom: none;
	letter-spacing: 0.5px;
	padding: 21px 30px;
	border-bottom: 0.1px solid #2b2b2b;
}

.cs-framework .cs-nav .cs-seperator {
	background-color: #282828;
	color: #8C8C8C;
	padding: 21px 30px;
}

.cs-framework .cs-nav ul li .cs-section-active, .cs-framework .cs-nav ul li a:hover, .cs-framework .cs-nav ul ul li .cs-section-active, .cs-framework .cs-nav ul ul li a:hover {
	color: #fff;
    background-color: #232323;
}

.cs-framework .cs-nav ul li .cs-section-active i, .cs-framework .cs-nav ul li a:hover i {
	color: #84B542;
}

.cs-framework .cs-content .cs-section-title h3 {
	text-transform: capitalize;
	text-shadow: none;
}

.cs-framework .cs-content .cs-section-title {
	background-color: #84B542;
	margin-top: 8px;
	padding: 20px;
}

.cs-framework .cs-nav .cs-icon {
	margin-right: 7px;
    font-size: 13.5px;
}

.cs-framework .cs-nav ul li .cs-section-active:after {
	border-right-color: #F8F8F8;
    border-width: 6px;
    margin-top: -6px;
    right: -1px;
}

.cs-framework .cs-nav ul li .cs-arrow:after {
    font-size: 11px;
    margin-top: -5px;
    right: 23px;
}

.cs-framework .cs-nav ul ul li a {
	background-color: #252525;
	font-size: 12.8px;
	border-bottom: none;
	letter-spacing: 0.5px;
	padding: 18px 30px 18px 50px;
	border-bottom: 0.1px solid #282828;
}

.cs-framework .cs-nav ul ul:before {
	left: 35px;
	background-color: #282828;
}

/**
 * Content styles
 */
.cs-framework .cs-body {
	background-color: #F8F8F8;
}

.cs-framework .cs-content {
	margin-left: 260px;
	border-right: 1px solid #eaeaea;
}

.cs-framework .cs-content .cs-sections {
	width: 90%;
    margin: 2.5%;
    padding: 1.5% 2.5%;
    background: #ffffff;
    border: 1px solid #F4F4F4;
    border-radius: 2px;
}

.cs-element {
	padding: 50px 0 45px;
}

.cs-element + .cs-element {
	border-top: 1px solid #F1F1F1;
}

.cs-field-backup hr {
	border-bottom: 0;
	border-top: 1px solid #F1F1F1;
	margin: 60px 0;
}

.cs-element .cs-title {
	width: 33%;
}

.cs-element .cs-title h4 {
	font-size: 14px;
	line-height: 25px;
	color: #424242;
}

.cs-element .cs-fieldset {
	margin-left: 35%;
}

.cs-text-desc {
	color: #858585;
    font-size: 12.4px;
}

.cs-text-muted {
	font-size: 12.4px;
}

.cs-field-switcher .cs-text-desc {
	margin-left: 15px;
	padding-top: 5px;
}

.cs-help {
	right: 0;
    padding: 5px 0 5px;
}

.cs-field-switcher label {
	width: 65px;
}

.cs-field-switcher label em {
	font-size: 12px;
	font-weight: 400;
	background-color: #8B8B8B;
}

.cs-field-switcher label input:checked ~ em {
	background: #7DB532;
}

.cs-element input[type="text"], .cs-element input[type="number"], .cs-element select, .cs-element textarea {
	border: 1px solid #E2E2E2;
	border-radius: 2px;
	height: 40px;
	color: #5f5f5f;
	margin-right: 8px;
	padding: 3px 10px;
}

.cs-field-tags input {
	margin-right: 8px;
}

.cs-fieldset .button, .cs-element input.cs-import-backup, .cs-element .cs-copy-info {
	background: #fcfcfc;
    border: 1px solid #E2E2E2;
    box-shadow: none;
    color: #747474;
    font-size: 13.5px;
    line-height: 40px;
    height: 40px;
    padding: 0 16px 1px;
    border-radius: 2px;
    text-shadow: none;
}

.cs-fieldset .button:hover, .cs-fieldset .button:focus, .cs-element .cs-copy-info:hover, .cs-element .cs-copy-info:focus {
	text-shadow: none;
	box-shadow: none;
}

.cs-fieldset .button:hover, .cs-fieldset .button:focus {
	background: #f8f8f8f8;
    border: 1px solid #E2E2E2;
    color: #5f5f5f;
}

.cs-field-tags .cs-tags-list {
	padding: 8px 0;
    background-color: inherit;
    border: none;
}

.cs-field-tags .cs-tags-list li {
	padding: 10px 17px 10px 12px;
    background-color: #F4F4F4;
    border: 1px solid #eeeeee;
    border-radius: 2px;
    margin: 0 13px 14px 0;
    color: #6B6B6B;
    font-size: 14px;
}

.cs-field-tags .cs-tags-list li:hover {
	background-color: #f8f8f8;
	border: 1px solid #F4F4F4;
}

.cs-field-tags .cs-tag-remove {
	padding: 0 8px 0 0;
	color: #bababa;
	vertical-align: inherit;
}

.cs-field-tags .cs-tag-remove:hover {
	color: #d9aa5a;
}

.cs-field-checkbox ul, .cs-field-radio ul {
    overflow-y: inherit;
}

.cs-field-checkbox ul li, .cs-field-radio ul li {
	margin-bottom: 17px;
}

.cs-framework label {
    font-size: 13.5px;
    color: #424242;
}

.cs-element input[type=radio], .cs-element input[type=checkbox] {
	margin: -4px 9px 0 0;
	border: 1px solid #E2E2E2;
	height: 18.5px;
	width: 18.5px;
    min-width: 18.5px;
    box-shadow: none;
}

.cs-element input[type=radio]:checked, .cs-element input[type=checkbox]:checked {
	border: 1px solid #7DB532;
	background: #7DB532;
}

.cs-element input[type=checkbox]:checked:before {
	color: #ffffff;
	margin: -2px 0 0 -4px;
}

.cs-element input[type=radio]:checked:before {
	color: #ffffff;
	background: #ffffff;
	margin: 5px;
}

.cs-groups {
	margin-bottom: 15px;
}

.cs-field-group .cs-group-title {
	border-radius: 2px 2px 0 0;
	color: #5f5f5f;
	background-color: #f7f7f7;
    border: 1px solid #eeeeee;
}

.cs-field-group .cs-group-title:hover {
	border: 1px solid #eeeeee;
}

.cs-fieldset .button.cs-add-group {
	background: #84B542;
    border: 1px solid #84B542;
    color: #fff;
}

.cs-fieldset .button.cs-remove-group {
	box-shadow: none !important;
	text-shadow: none !important;
	border-color: inherit !important;
	border-radius: 3px;
}

.cs-field-group .ui-accordion-header-icon {
	left: .3em;
}

#cs-save-ajax {
	background: #84B542;
    color: #fff !important;
    top: 10px;
    right: 10px;
    font-size: 12.5px;
    padding: 6px 10px;
}

.cs-field-subheading {
	padding: 17px;
    border: 1px solid #F1F1F1;
    border-bottom: none;
    color: #424242;
}

.cs-field-heading {
	color: #424242;
	margin-top: 1.3%;
	padding: 5px 0 30px;
	border-bottom: none;
	background: transparent !important;
}

.cs-field-heading i {
	margin-right: 5px;
    font-size: 15px;
    color: #aaa;
    vertical-align: top;
}

/**
 * Footer styles
 */
.cs-framework .cs-footer {
	background-color: #1E1E1E;
	color: #878787;
	font-size: 12px;
	padding: 25px 32px;
}

.cs-framework .cs-footer a {
	color: #ffffff;
	text-decoration: none;
}

.cs-field-backup small.cs-or{
    margin-top: 13px;
    color: #858585;
}

.cs-field-backup small.cs-backup-warning {
  color: #df8d00;
}

.cs-field-backup small.cs-backup-warning {
	margin: 12px 12px 5px;
}

.cs-element pre {
	background-color: #3a3a3a;
	max-height: 800px;
	line-height: 25px;
    font-size: 14px;
    text-align: left;
    direction: ltr;
}

.cs-element .cs-copy-info {
	margin-top: -15px;
}

#cs-save-ajax.copy-info {
	margin-top: -18px;
}

.cs-element .cs-copy-info i {
	vertical-align: baseline;
	color: #fff;
}

.cs-field-system_info {
	padding: 40px 0 35px;
}

table.cs-system-info {
	border: 1px solid #F1F1F1;
	box-shadow: none;
}

table.cs-system-info thead td, table.cs-system-info thead th {
    border-bottom: 1px solid #F1F1F1;
    color: #424242;
    font-family: 'Poppins', sans-serif;
	font-weight: 500; /* medium */
	font-size: 14px;
}

table.cs-system-info.closed thead th {
    border-bottom: 0;
}

.cs-system-info th i {
	color: #aaa;
}

.cs-system-info th, .cs-system-info td {
	padding: 15px 18px;
}

.cs-system-info i.cs-off-status, .cs-system-info td mark.error {
	color: #DB4545;
}

.cs-system-info i.cs-on-status, .cs-system-info td mark.yes, .cs-system-info a {
	color: #84B542;
}

.cs-system-info a:hover {
	color: #424242;
}

/**
 * Media query
 */
 @media only screen and (max-width: 1680px) {
	.cs-framework .cs-nav, .cs-framework .cs-nav-background {
		width: 210px;
	}
	.cs-framework .cs-content {
	    margin-left: 210px;
	}
	.cs-framework .cs-nav ul li a {
		padding: 21px 20px;
	}
	.cs-framework .cs-nav ul ul li a {
		padding: 18px 30px 18px 40px;
	}
	.cs-framework .cs-nav ul ul:before {
		left: 25px;
	}
	.cs-framework .cs-nav ul li .cs-arrow:after {
		right: 8px;
	}
}
@media only screen and (max-width: 1280px) {
	.cs-framework .cs-nav, .cs-framework .cs-nav-background {
		width: 200px;
	}
	.cs-framework .cs-content {
	    margin-left: 200px;
	}
	.cs-framework .cs-nav ul li a {
		padding: 21px 20px;
	}
	.cs-framework .cs-nav ul ul li a {
		padding: 18px 30px 18px 40px;
	}
	.cs-framework .cs-nav ul ul:before {
		left: 25px;
	}
	.cs-framework .cs-nav ul li .cs-arrow:after {
		right: 8px;
	}
	.cs-system-info tbody td:first-child {
		width: 50%;
	}
	.cs-element .cs-copy-info {
	    margin-top: -10px;
	    line-height: 35px;
        height: 35px;
	}
}
@media only screen and (max-width: 782px) {
	.cs-framework .cs-content .cs-section-title {
		margin-top: 10px;
		margin-bottom: 20px;
	}
	.cs-framework .cs-nav, .cs-framework .cs-nav-background {
		width: 200px;
	}
	.cs-framework .cs-content, .cs-framework .cs-element .cs-fieldset {
	    margin-left: 0 !important;
	    margin-right: 0 !important;
	}
	.cs-framework .cs-content {
		border-left: 1px solid #eaeaea;
	}
	.cs-framework .cs-header fieldset {
		display: block !important;
	}
	.cs-sections .cs-element {
		padding: 30px 0 25px !important;
	}
	.cs-framework .cs-element .cs-title {
		margin-bottom: 20px;
	}
	.cs-element input[type=checkbox]:checked:before {
		margin: -5px 0 0 -8px;
	}
	.cs-element input[type=radio]:checked:before {
		margin: 5px;
		width: 7px;
        height: 7px;
	}
}