/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* The container */
.container-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.container-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 50%;
    height: 25px;
    width: 25px;
    background-color: #d9d5d5;
}

/* On mouse-over, add a grey background color */
.container-checkbox:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container-checkbox input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.container-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Show the checkmark when checked */
.container-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* The container */
.container-radio {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.container-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.container-radio .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container-radio:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container-radio input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.container-radio .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

/* Show the indicator (dot/circle) when checked */
.container-radio input:checked ~ .checkmark:after {
    display: block;
}

.loader{
	position: absolute;
    z-index: 100000;
    width: 100%;
    background: white;
    height: 100%;
    display: flex;
	top: 0px;
	left: 0px;
    justify-content: center;
    align-items: center;
}

.uploadImg input {
	position: absolute;
	opacity: 0;
	z-index: -1;
	display: none
}

.uploadedBlock {
	bottom: 0;
	position: absolute;
	right: 0;
	left: 0;
	margin: auto;
	top: 0;
	z-index: 9;
}

label{
	margin-bottom: 10px;
}

/* لوحة التحكم — خط أوضح (bold شوية) */
body#content_body.vertical-layout .content-body,
body#content_body.vertical-layout .table,
body#content_body.vertical-layout .breadcrumb,
body#content_body.vertical-layout .card,
body#content_body.vertical-layout .header-navbar,
body#content_body.vertical-layout .footer {
	font-weight: 700 !important;
}

/* نص الـ sidebar — bold شوية */
body#content_body.vertical-layout .main-menu .navigation .menu-title,
body#content_body.vertical-layout .main-menu .navigation > li.nav-item > a,
body#content_body.vertical-layout .main-menu .navigation .menu-content > li > a {
	font-weight: 800 !important;
}

body#content_body.vertical-layout h1,
body#content_body.vertical-layout h2,
body#content_body.vertical-layout h3,
body#content_body.vertical-layout h4,
body#content_body.vertical-layout h5,
body#content_body.vertical-layout h6,
body#content_body.vertical-layout .card-title,
body#content_body.vertical-layout .content-header-title {
	font-weight: 800 !important;
}