body
{
	background:#FAFAFA;
	font-family:'Quicksand', sans-serif;
}
::-webkit-scrollbar {
  width:5px;
  height:5px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}
a
{
	text-decoration:none;
}
li,ul{
    list-style:none;
    margin:0;
    padding:0
}
input:focus{
    border-color:#ced4da!important;
    box-shadow:none!important;
    -webkit-box-shadow:none!important
}
select:focus{
    border-color:#ced4da!important;
    box-shadow:none!important;
    -webkit-box-shadow:none!important
}
input:active{
    border-color:#ced4da!important;
    box-shadow:none!important;
    -webkit-box-shadow:none!important;
    outline:0
}
select:active{
    border-color:#ced4da!important;
    box-shadow:none!important;
    -webkit-box-shadow:none!important
}

h1,h2,h3,h4,h5,h6
{
	font-size:15px;
	font-weight:700;
}

img
{
	max-width:100%;
}

.mt-10
{
	margin-top:10px;
}

/* COLORS */

/* RED */

.red_color .header_nav
{
	background:linear-gradient(135deg, #ff1004 0%, #951d0f 100%);
}
.red_color .title_box .b_icon
{
	background: #f02b2b;
}
.red_color .footer
{
	background: linear-gradient(135deg, #ff1004 0%, #951d0f 100%);
	color:white;
}
.red_color .footer a
{
	color:inherit;
}

/* BLUE */

.blue_color .header_nav
{
	background:linear-gradient(135deg, #4C83FF 0%, #2a90fa 100%);
}
.blue_color .title_box .b_icon
{
	background: #4C83FF;
}
.blue_color .footer
{
	background: linear-gradient(135deg, #4C83FF 0%, #2a90fa 100%);
	color:white;
}
.blue_color .footer a
{
	color:inherit;
}


/* GREEN */

.green_color .header_nav
{
	background:linear-gradient(135deg, #0a8541 0%, #0b8140 100%);
}
.green_color .title_box .b_icon
{
	background: #0a8541;
}
.green_color .footer
{
	background: linear-gradient(135deg, #0a8541 0%, #0b8140 100%);
	color:white;
}
.green_color .footer a
{
	color:inherit;
}

/* ORANGE */

.orange_color .header_nav
{
	background:linear-gradient(135deg, #F55555 0%, #FCCF31 100%);
}
.orange_color .title_box .b_icon
{
	background: #F55555;
}
.orange_color .footer
{
	background: linear-gradient(135deg, #F55555 0%, #FCCF31 100%);
	color:white;
}
.orange_color .footer a
{
	color:inherit;
}

/* PINK */

.yellow_color .header_nav
{
	background: linear-gradient(135deg, #cb8f07 0%, #dfd022 100%);
}
.yellow_color .title_box .b_icon
{
	background: #cb8f07;
}
.yellow_color .footer
{
	background: linear-gradient(135deg, #cb8f07 0%, #dfd022 100%);
	color:white;
}
.yellow_color .footer a
{
	color:inherit;
}

/* PINK */

.pink_color .header_nav
{
	background: linear-gradient(135deg, #FF0467 0%, #FC4B37 100%);
}
.pink_color .title_box .b_icon
{
	background: #FF0467;
}
.pink_color .footer
{
	background: linear-gradient(135deg, #FF0467 0%, #FC4B37 100%);
	color:white;
}
.pink_color .footer a
{
	color:inherit;
}

/* DARK */

.dark_color .header_nav
{
	background: linear-gradient(135deg, #1F2D3D 0%, #1C2836 100%);
}
.dark_color .title_box .b_icon
{
	background: #1F2D3D;
}
.dark_color .footer
{
	background: linear-gradient(135deg, #1F2D3D 0%, #1C2836 100%);
	color:white;
}
.dark_color .footer a
{
	color:inherit;
}



.navbar-brand
{
	color:white;
	font-weight:700;
	padding:.3125rem;
    border-radius: 4px;
    margin-right: 5px;
    box-shadow: 0 6px 22px 0 rgb(0 0 0 / 42%);
}
.navbar-brand:hover
{
	color:#f3e1e1;
}
.header_nav .nav-item
{
    border-radius: 4px;
    margin-right: 5px;
    box-shadow: 0 6px 22px 0 rgb(0 0 0 / 42%);
}
.header_nav .nav-link
{
	color:white;
}
.header_nav .nav-link:hover
{
	color:#f3e1e1;
}
.date_time_box
{
	display: flex;
    width: 200px;
	text-align:center;
    padding: 0.375rem 1.25rem;
    font-size: 14px;
    line-height: 1.5;
    color: #212529;
	font-weight:700;
    background-color: #ffffffba;
    background-clip: padding-box;
    border: 1px solid transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.header_nav .fa-bars
{
	color:white;
}
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 0.1rem #ffffff;
}
.footer_box
{
	display:flex;
	flex-direction: column;
	min-height:50px;
}

.main
{
	margin-top:20px;
	margin-bottom:20px;
	min-height:100vh;
}


.title_box
{
	display:flex;
	margin-bottom:5px;
}
.title_box .b_icon
{
    display: flex;
	width:50px;
	align-items: center;
	color:white;
	font-size:27px;
    justify-content: center;
	border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.title_box .b_title
{
	flex:1;
	border:1px solid #E3E8ED;
	border-left: 0px;
	padding: 10px 10px 5px 10px;
	border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
	
}

.title_box .b_title h1, .title_box .b_title h2, .title_box .b_title h3, .title_box .b_title h4, .title_box .b_title h5, .title_box .b_title h6
{
	font-size:20px;
	font-weight:700;
}

/* CATEGORIES WIDGET */

.category_widget
{
	
	display: flex;
	flex-direction: column;
	background:#ffffff;
	box-shadow: 0 6px 22px 0 rgb(0 0 0 / 8%);
	border: 1px solid #d9e0e9;
	border-radius:4px;
	margin-bottom: 5px;
}
.category_widget .category_image
{
	margin-top:10px;
	margin-bottom:10px;
	display: flex;
	align-items:center;
	justify-content:center;
	
}
.category_widget .category_image img
{
	
	width:100px;
	height:100px;
	padding:5px;
	border: 1px solid #d9e0e9;
	border-radius:50%;
	
}
.category_widget .category_title
{
	border-top: 1px solid #d9e0e9;
	padding-top:5px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.category_widget .category_title a
{
	color:black;
}


/* STATIC ARTICLE */

.static_article
{
	display: flex;
	background:#ffffff;
	box-shadow: 0 6px 22px 0 rgb(0 0 0 / 8%);
	border: 1px solid #d9e0e9;
	border-radius:4px;
	margin-bottom: 5px;
}
.static_article .article .article_meta
{
	
	display:flex;
	border-bottom:1px solid #d9e0e9;
	padding:10px;
}

.static_article .article .article_meta .category_image
{
	margin-right:10px;
	display: flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:36px;
}
.static_article .article .article_meta .category_image img
{
	width:100%;
	height:100%;
	object-fit:cover;
	padding:2px;
	border: 1px solid #d9e0e9;
	border-radius:50%;
}
.static_article .article .article_meta .article_date
{
	width:115px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:5px;
	font-size:14px;
	border:1px solid #d9e0e9;
	border-radius:4px;
}
.static_article .article .article_meta .article_date i
{
	margin-right:5px;
}
.static_article .article .article_title
{
	border-bottom:1px solid #d9e0e9;
	margin-bottom:10px;
}
.static_article .article .article_title h3
{
	padding-top:10px;
	padding-left:10px;
}
.static_article .article .article_content
{
	padding:10px;
}


/* POST ARTICLE */

.post_article
{
	display: flex;
	width:100%;
	background:#ffffff;
	box-shadow: 0 6px 22px 0 rgb(0 0 0 / 8%);
	border: 1px solid #d9e0e9;
	border-radius:4px;
	margin-bottom: 5px;
	overflow:hidden;
}
.post_article .article .article_image
{
	width:100%;
	height:250px;
}
.post_article .article .article_image img
{
	width:100%;
	height:100%;
	object-fit:cover;
}
.post_article .article .article_title
{
	border-bottom:1px solid #d9e0e9;
	margin-bottom:10px;
}
.post_article .article .article_title h3
{
	padding-top:10px;
	padding-left:10px;
	height:60px;
}
.post_article .article .article_title a
{
	color:inherit;
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
.post_article .article .article_content
{
	padding:10px;
	height:173px;
	margin-bottom:5px;
}
.post_article .article .article_read
{
	display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #d9e0e9;
    border-radius: 4px;
	margin-bottom:5px;
	margin-left:5px;
	margin-right:5px;
}
.post_article .article .article_read a
{
	color:inherit;
}


/* ARTICLE_DETAIL */

.article_detail
{
	margin-bottom:10px;
}

.article_detail .article_detail_image
{
	border-radius:4px;
	border:1px solid #ced4da;
	margin-bottom:10px;
	overflow:hidden;
}
.article_detail .article_detail_image img
{
    width: 100%;
	object-fit:cover;
	object-position:top;
	height: auto;
    padding: 5px;
}
.article_detail .article_detail_content
{
    margin-bottom:10px;
}

/* COMMENTS */



.comments .comment
{
	border: 1px solid #c2c5c9;
	border-radius:4px;
	margin-bottom:5px;
	padding:10px;
}

#add_comment
{
	margin-top:10px;
}

@media only screen and (min-width: 992px) {
	.article_detail .article_detail_image
	{
		width:300px;
		float:left;
		margin-right:10px;
	}
}

@media only screen and (max-width: 600px) {
	
	.header_nav .nav-item {
		margin-bottom: 5px;
		padding-left:12px;
	}
	.header_menu
	{
		width:100%;
	}
		
	.date_time_box
	{
		width: 100%;
	}
	.post_article .article .article_content
	{
		height:auto;
	}
}
@media (max-width: 767px)
{
	.mobil_bir
	{
		display:block !important;
	}
	.mobil_iki
	{
		display:block !important;
	}
}
.mobil_iki {
    display: none;
    line-height: 9px;
    width: 50%;
    left: 0;
    height: 45px;
    position: fixed;
    bottom: 0px;
    padding: 11px 1px 1px;
    background: center 2px no-repeat #cc0023;
    text-decoration: none;
    box-shadow: 0 0 13px #000;
    z-index: 9999;
    text-align: center;
    font-family: Poppins,sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,.3);
    color: #fff;
    font-size: 18px;
}
.mobil_bir {
    display: none;
    line-height: 9px;
    width: 50%;
    right: 0;
    height: 45px;
    position: fixed;
    bottom: 0px;
    padding: 11px 1px 1px;
    background: center 2px no-repeat #25d366;
    text-decoration: none;
    box-shadow: 0 0 13px #000;
    z-index: 9999;
    text-align: center;
	font-family: Poppins,sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,.3);
    color: #fff;
    font-size: 18px;
}