/**================================
Administrator Panel CSS file - by LWEGATECH
==================================**/
:root {
	--ltc-font: "Manrope", sans-serif;
	--ltc-font-2: "Poppins", sans-serif;
	--ltc-font-3: "Anton", sans-serif;
	--ltc-base: #3C486B;
	--ltc-base-rgb: 60, 72, 107;
  	--ltc-gold: #F45050;
  	--ltc-gold-rgb: 240, 240, 240;
	--ltc-yellow: #F9D949;
	--ltc-yellow-rgb: 249, 217, 73;
	--ltc-white: #ffffff;
	--ltc-white-rgb: 255, 255, 255;
	--ltc-black: #000;
	--ltc-black-rgb: 51, 51, 51;
	--ltc-primary: #57699D;
	--ltc-primary-rgb: 87, 105, 157;
	--ltc-font-size: 15px;
  }

html,
body{font-family: var(--ltc-font);line-height: 1.6;text-rendering: auto; height:100vh;margin: 0;  font-optical-sizing: auto;font-size: var(--ltc-font-size);overflow-x: hidden;background: #EFEFFC;}
h1,h2,h3,h4,h5,h6{font-family: var(--ltc-font-3);}
a{color: var(--ltc-primary);text-decoration: none;}
a:hover{text-decoration: none; color:var(--ltc-gold)}
::-webkit-scrollbar {width: 8px; background:var(--ltc-base);}
::-webkit-scrollbar-thumb {	background: var(--ltc-gold); }

/**===========================
* Login
*=============================**/
.loginbox{width:450px;background-color: var(--ltc-white);padding:15px;margin-top:50px;margin-bottom: 10px;border-radius: 10px;}
.loginbox .logo{height: 70px;}
.loginbox .notification{font-size: 14px;}
.loginbox h3{font-weight: 800;font-size: 24px;margin-bottom: 0;}
.loginbox h2{text-align: center;font-size: 24px;}
.loginbox .btn-login {border-radius: 40px;color: var(--ltc-white);padding: 15px;background-color: var(--ltc-base);border-color: var(--ltc-base);}
.login .footer{font-size: 13px;}

/**===========================
Layout Structure - Admin Panel
=============================**/
.wrapper-container{
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	justify-content: flex-start;
	background: #EFEFFC;
  }
.main-wrapper{
	margin-left: 220px;
}
.header{
	background: #3C486B;
	color: #fff;
	left: 220px;
}
.header a{color: #fff; }
.header a:hover{color: #F7DBA8; }
.header .profile a{color: #555}
.sidebar{
	transition: width 0.5s;
	width: 220px; 
	color: #333;
	font-size: 16px;
	background: #fff; 
	position: fixed;
	min-height: 100vh;
	max-height: 100px;
	top: 0;
  	left: 0;
  	overflow-x: hidden;
  	overflow-y:auto;
	scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar {width: 5px; }
.sidebar::-webkit-scrollbar-thumb {	background: #0256A2; }
.footer{
	margin-top: auto;
}
.dashboard-card-title{color: #F35050 !important;}
.row-clickable { cursor: pointer;}/*class used on notifications **/
#pageOptions, #categoryOptions, #postOptions, #customOptions {	display: none;}
.summary-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.summary-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}
/**===========================
Sidebar - MENU
=============================**/
.sidebar ul{
	list-style: none;
	padding-left: 0;
}
.sidebar li{
	line-height: 35px;
	border-bottom: 1px solid #ddd;
}
.btnMenu {
	display: none;
	padding: 20px;
	display: block;
	background: #1abc9c;
	color: #fff;
}
.btnMenu i.fa { float: right; }
.contenedor-menu {
	min-width: 220px;
	display: inline-block;
	line-height: 18px;
}
.contenedor-menu .menu li a {
	color: #333;
	display: block;
	padding: 10px 20px;
	text-decoration: none;
}
.contenedor-menu .menu li a:hover { background: #3C486B; color: #fff; } 
.contenedor-menu .menu ul { display: none; }
.contenedor-menu .menu ul li a {
	background: #47557E;
	color: #fff;
	font-size:90%;
	padding: 5px 20px;
	border-bottom: 1px solid #58699C;
}
.contenedor-menu .menu li a .arrow {
    font-size: 12px;
    align-self: center;
    margin-left: auto;
    display: list-item;
}
.contenedor-menu .menu .activado > a {
	background: #F35050;
	color: #fff;
}
/** =======================================================
SIDEBAR OPEN/CLOSE
=========================================================**/
#sidebar.close {
    transition: width 0.5s;
    width: 47px; 
	color: inherit;
	background: #fff; 
	position: fixed;
	min-height: 100vh;
	max-height: 100px;
	top: 0;
  	left: 0;
  	overflow-x: hidden;
  	overflow-y:auto;
}
#sidebar.close i{margin: 0 auto;}
#sidebar.close .logo-desktop{ display: none;}
#sidebar.close .logo-mob{ display: block;}
#sidebar .logo-mob{ display: none;}
#main.close {
    margin-left: 48px;
}

/** ===================================================
Posts
======================================================**/
.postImg .thumb{height: 100px;}
.side_img {
    max-width: 100%;
    height: 300px;
    
	object-fit: cover;
  	object-position: bottom;
}

/* Hide default HTML checkbox */
/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
  }
  
  .slider {
	position: absolute;
	cursor: pointer;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
  }
  
  .slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
  }
  
  input:checked + .slider {
	background-color: #18a94e;
  }
  
  input:focus + .slider {
	box-shadow: 0 0 1px #18a94e;
  }
  
  input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
	border-radius: 34px;
  }
  
  .slider.round:before {
	border-radius: 50%;
  }
/**=======================================================================
TABS - Configs Areas
==========================================================================*/
.btabs{
    list-style: none;
    display: block !important;
  }
.btabs .nav-link {
    color: #fff;
    text-align: justify;
    background-color: #aca8a8;
    width: 100% !important;
    margin-bottom: 10px;
    height: 40px;
  }
.btabs .nav-link:hover{background-color: #B92C2C}
.btabs .nav-link:active{background-color: #771C1C !important;}
.btabs .nav-link.active{background-color: #771C1C !important;}
.quick_menu{color: #fff;}
.quick_menu a{background: transparent; color:#fff; box-shadow: inset; border-radius: 5px; border: 1px solid #fb8282; margin-bottom: 10px;}
.quick_menu a:hover, .quick_menu a:active{background: #8A2C2C; border: 1px solid #8a2c2cec; }
#userpwdModal {display: block !important;}
.avatar{width: 40px; height: 40px;}

/**===========================
BLOCK POSTS
=============================**/
.block-element {display: none; }
.code-block pre { background-color: #1c1c1c;padding: 10px;border: 1px solid #ccc;	white-space: pre-wrap; }

/**===========================
Directory
=============================**/
.directory-header img{height:80px;width:auto;object-fit: contain;}
.form-switch {padding-left: 3.0em;min-height: 30px; display: flex;align-items: center;}
.form-switch .form-check-label {margin-left: 0.3em;font-size: 10px;font-weight: 500;}


/*============================================================
# Preloader
==============================================================*/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #fff;
  }
  
  #preloader:before {
    content: "";
    position: fixed;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    border: 6px solid #1977cc;
    border-top-color: #d1e6f9;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    -webkit-animation: animate-preloader 1s linear infinite;
    animation: animate-preloader 1s linear infinite;
  }
  #preloader2 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #ffffff82;
  }
  
  #preloader2:before {
    content: "";
    position: fixed;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    border: 6px solid #8A2C2C;
    border-top-color: #d1e6f9;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    -webkit-animation: animate-preloader 1s linear infinite;
    animation: animate-preloader 1s linear infinite;
  }
  @-webkit-keyframes animate-preloader {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes animate-preloader {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

/** =======================================================
MOBILE / RESPONSIVE
=========================================================**/
@media screen and (max-width: 500px){
	.sidebar{
		transition: width 0.5s;
		width: 48px; 
		color: #fff;
		background: #023b6d; 
		position: fixed;
		min-height: 100vh;
		max-height: 100px;
		top: 0;
		left: 0;
		overflow-x: hidden;
		overflow-y:auto;
	}
	#main {margin-left: 48px;}
	#sidebar .logo-mob{ display: block;}
	#sidebar .logo-desktop{ display: none;}
	#sidebar.close .logo-desktop{ display: block;}
	#sidebar.close .logo-mob{ display: none;}
	#sidebar.close {
		transition: width 0.5s;
		width: 250px; 
		color: #fff;
		background: #023b6d; 
		position: absolute;
		min-height: 100vh;
		max-height: 100px;
		top: 0;
		left: 0;
		z-index:99;
		overflow-x: hidden;
		overflow-y:auto;
		scrollbar-width: thin;
	}
	.sidebar.close ::-webkit-scrollbar {width: 5px; }
	.sidebar.close ::-webkit-scrollbar-thumb {	background: #397eba; position: absolute;}

}