@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Public Sans", sans-serif;
}
html .cke_skin_kama{
    width: 100%;
}
:root{
	--primary-color: #041C33;
    --secondary-color: #07ccec;
}
input:focus{
	box-shadow: none;
}
p,h1,h2,h3,h4,h5,h6{margin: 0;}
a{text-decoration: none; color: #000;}
a:hover{color: #000;}
ul{list-style: none; padding: 0; margin: 0;}
table thead{}
table thead tr{}
table thead tr th{
	background: #eee !important;
	font-weight: 600 !important;
	border: none !important;
	font-size: 15px !important;
}
table thead tr th:first-child{
	border-radius: 5px 0 0 5px;
}
table thead tr th:nth-child(2){
	text-align: center !important;
}
table thead tr th:last-child{
	border-radius: 0 5px 5px 0;
}
table tbody tr{
	vertical-align: middle;
}
table tbody tr:last-child{
	border-bottom: none !important;
}
table tbody tr:hover > *{
	background: #f9f9f9 !important;
}
table tbody tr td:nth-child(2){
	text-align: center !important;
}

.dt-layout-row{
	margin-bottom: 0 !important;
}
table tbody tr td a{font-size: 18px;}
table tbody tr td .editbtn{color: green;}
table tbody tr td .delbtn{color: red;}
table tbody tr td .form-check-input:focus{
	box-shadow: none;
}
.tox-tinymce{height: 300px !important}



table tbody tr td.box,
table thead tr th.box{width: 3%;}
table tbody tr td.number,
table thead tr th.number{width: 4%; text-align: center !important;}
table tbody tr td.image,
table thead tr th.image{width: 10%; text-align: center !important;}
table tbody tr td.order,
table thead tr th.order{width: 10%; text-align: center !important;}
table tbody tr td.status,
table thead tr th.status{width: 10%; text-align: center !important;}
table tbody tr td.status .form-check{padding: 0; display: flex;}
table tbody tr td.status .form-check input{margin: auto;}
table tbody tr td.action,
table thead tr th.action{width: 10%; text-align: center !important;}
table tbody tr td .validity{
    font-size: 10px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 2px;
    color: #fff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
table tbody tr td .validity.valid{
    background: green;
}
table tbody tr td .validity.expired{
    background: #df0000;
}
.maincontainer{
	display: flow-root;
	height: 100vh;
}
aside{
	width: 230px;
	height: 100vh;
	transition: all .4s linear;
	float: left;
	box-shadow: 1px 0 10px rgb(0 0 0 / 8%);
	position: relative;
}
.panel-content{
	width: calc(100% - 230px);
	float: right;
	background: #eee;
	height: 100%;
}
.panel-header{
	background: #fff;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 15px;
	box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
	position: relative;
	z-index: 9;
}
.panel-header-left{}
.panel-header-right{}
.panel-header-right a{
    font-size: 14px;
    font-weight: 200;
    margin-left: 0px;
    transition: .3s ease-in;
    padding: 6px 10px;
}
.panel-header-right .settings{}
.panel-header-right .profile{}
.panel-header-right .logout{}
.panel-header-right .logout,
.panel-header-right a:hover{
	background: var(--primary-color);
	border-radius: 3px;
	color: #fff;
}
.panel-inner-content{
	width: 100%;
	height: calc(100% - 70px);
	padding: 20px 0;
	overflow: auto;
}
.panel-inner-content::-webkit-scrollbar{
	width: 0;
}

.admin-login{
    width: 100%;
    height: 100vh;
    background: #eee;
    display: flex;
    align-items: start;
    justify-content: center;
    padding: 50px 0 0;
}
.inner-login{
    width: 400px;
    background: #fff;
    padding: 30px;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 5%);
    border-radius: 5px;
}
.inner-login .logo{
    text-align: center;
    margin: 0 0 30px;
}
.inner-login .logo img{
    width: 50%;
}
.inner-login .logo h3{
    font-weight: 600;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
}
.inner-login .logo h3:after,
.inner-login .logo h3:before{
	content: "";
	width: 50px;
	height: 1px;
	background: #ddd;
	display: block;
}
.admin-form{}
.admin-form h4{
    text-align: center;
    font-size: 15px;
    margin: 0 0 10px;
    color: green;
    font-weight: 400;
    letter-spacing: .5px;
}
.admin-form form{}
.admin-form form .fields{
	margin: 0 0 20px;
    position: relative;
    z-index: 1;
}
.admin-form form .fields .error{
	color: #eb0000;
	font-size: 13px;
}
.admin-form form .fields i{
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	color: #00b8ff80;
}
.admin-form form .fields i.showhidepassword{
	cursor: pointer;
}
.admin-form form .fields i:hover{}
.admin-form form .fields input{border: 1px solid #eee;border-radius: 4px;padding: 10px 15px;}
.admin-form form .fields input:focus{
	box-shadow: none;
	border-color: #bbb;
}
.admin-form form .fields input::placeholder{
	color: #919191;
	font-weight: 300;
}
.admin-form form .fields-btn{
    text-align: center;
}
.admin-form form .fields-btn input{
    background: #000;
    outline: none;
    border: none;
    border: 1px solid #000;
    color: #fff;
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: 500;
    padding: 5px 20px;
    border-radius: 3px;
    transition: .3s ease-in;
}
.admin-form form .fields-btn input:hover{
	background: #fff;
	color: #000;
}
.admin-form form .loginerr .loading_span{
	width: 20px;
	height: 20px;
	border: 2px solid #000;
	border-radius: 50px;
	animation: errloading 0.7s linear infinite;
	display: inline-block;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
}
@keyframes errloading{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

.admin-form form .fields-btn .alertbox{
	background: #ffebeb;
	padding: 10px;
	border-radius: 3px;
}
.admin-form form .fields-btn .alertbox p{
	font-size: 14px;
	color: red;
}

.multi-imgquestion,
.imgquestion{
	border: 1px dashed rgb(0 0 0 / 80%);
	border-radius: 8px;
	width: 220px;
	height: 150px;
	text-align: center;
	overflow: hidden;
	display: flex;
	position: relative;
	padding: 5px;
}

.multi-imgquestion img,
.imgquestion img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 5px;
}
.imgquestion.other{
	width: 100%;
}
.imgquestion.other img{
	height: 100%;
	width: auto;
}
.multi-imgquestion .imgclose,
.imgquestion .imgclose{
	position: absolute;
	top: 0;
	right: 5px;
	color: #b70000;
	display: none;
}
.multi-imgquestion .imgclose.active,
.imgquestion .imgclose.active{
	display: block;	
}

.sidepanel-head{
    padding: 5px 10px;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.sidepanel-head .head-logo{flex-basis: 60px;height: 40px;border-radius: 4px;background: #fff;border: 1px solid var(--secondary-color);display: flex;align-items: center;justify-content: center;padding: 5px;}
.sidepanel-head .head-logo img{width: 35px;}
.sidepanel-head a{
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
}

.logout-fixed{
    position: absolute;
    bottom: 4px;
    left: 50%;
    padding: 5px 10px;
    width: 94%;
    color: #fff;
    margin: auto;
    transform: translateX(-50%);
    border-radius: 5px;
    border: 2px solid var(--secondary-color);
    font-weight: 600;
    background: var(--primary-color);
    transition: .3s linear;
}
.logout-fixed i{
}
.logout-fixed:hover{
	background: rgb(245, 245, 245);
	color: var(--secondary-color);
}



.panel-menu{
	height: 88%;
	overflow: auto;
}
.panel-menu .mli{
	transition: all .2s linear;
	position: relative;
}

.panel-menu .mli .mlink{
	text-decoration: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	white-space: nowrap;
	padding: 10px 15px 10px 35px;
	position: relative;
	z-index: 1;
	font-size: 15px;
	letter-spacing: .5px;
	font-weight: 300;
	color: #222;
	transition: .3s ease-in;
}
.panel-menu .mli .mlink:hover{
	background: #eee;
}
.panel-menu .mli .mlink i{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.panel-menu .mli .mlink i:nth-child(1){
    left: 10px;
}
.panel-menu .mli .mlink i:nth-child(2){
    right: 20px;
    font-size: 10px;
}
.panel-menu .mli .mlink:hover i{}

.smdiv{
	background: #eee;
	display: none;
}
.smdiv .smul{
	padding: 5px 0;
}
.smdiv .smlist{
	margin: 0;
	padding: 0;
	list-style: none;
	margin-left: 20px;
}
.smdiv .smlist .smlink{
	text-decoration: none;
	color: #333;
	font-size: 13px;
	display: inline-block;
	letter-spacing: .5px;
}
.smdiv .smlist .smlink:before{
}
.smdiv .smlist .smlink:hover:before{
	border-color: var(--primary-color);
}
.smdiv .smlist .smlink:hover{
	color: var(--primary-color);
}




.page-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}
.page-title .title{}
.page-title .title h3{
    font-size: 18px;
    color: #000;
    text-transform: uppercase;
    font-weight: 200;
}
.page-title .title span{color: #000;font-weight: 700;}
.page-title .createbtn{
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-title .createbtn a{
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    padding: 4px 8px;
    font-weight: 500;
    background: #000;
    color: #fff;
    transition: .3s ease;
}
.page-title .createbtn a:hover{
	background: #fff;
	color: #001b48;
}
.page-title .createbtn a.delete{
	background: #dd1111;
	display: none;
}
.page-title .createbtn a.delete:hover{
	background: #e82929;
	color: #fff;
}

.page-content{box-shadow: 0 .125rem .25rem rgba(165,163,174,.3);background: #fff;padding: 30px;border-radius: 5px;}
.page-content form{}
.page-content form label{
    font-size: 14px;
    font-weight: 300;
    margin: 0;
    padding: 0 0 2px;
    display: block;
    color: #999;
    letter-spacing: .5px;
}
.page-content form select,
.page-content form textarea,
.page-content form input{
    font-size: 14px;
    padding: 10px 15px;
    border-radius: 5px;
}
.page-content form select:focus,
.page-content form textarea:focus,
.page-content form input:focus{
	box-shadow: none;
	border-color: #aaa;
}
.page-content form input::-webkit-inner-spin-button,
.page-content form input::-webkit-outer-spin-button{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.page-content form input#ordernumber{
    left: 5px;
    position: absolute;
    top: 5px;
    width: 24px;
    height: 25px;
    border: 1px solid #ddd;
    outline: none;
    padding: 5px;
    border-radius: 2px;
}
.page-content .category-type{padding: 0 0 20px;}
.page-content .category-type a{
    font-size: 15px;
    padding: 5px 10px;
    border: 1px solid var(--secondary-color);
    color: var(--primary-color);
    border-radius: 3px;
    display: inline-block;
    margin-right: 10px;
    transition: .3s linear;
    font-weight: 500;
}
.page-content .category-type a.active,
.page-content .category-type a:hover{
	background: var(--secondary-color);
	color: #fff;
}

.dashboard-link .col-md-6:nth-child(1) .dashboard-a{background: #F24771;}
.dashboard-link .col-md-6:nth-child(2) .dashboard-a{background: #2FB5FE;}
.dashboard-link .col-md-6:nth-child(3) .dashboard-a{background: #FBB931;}
.dashboard-link .col-md-6:nth-child(4) .dashboard-a{background: #FD5E02;}


.btn.btn-primary{
	border: 1px solid #c5c5c5;
	border-radius: 5px;
	font-size: 16px;
	padding: 7px 20px;
	background: var(--primary-color);
	font-weight: 300;
	transition: .3s ease-in;
	color: #fff;
}
.btn.btn-primary:hover{
	background: none;
	color: #000;
}
.btn.btn-primary:focus{
	box-shadow: none;
}

#gal-container{
	display: flex;
	align-content: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 10px 0 0;
}
#gal-container .gal-preview{
    width: 200px;
    position: relative;
    border: 1px dotted #000;
    border-radius: 4px;
    overflow: hidden;
    padding: 2px;
}
#gal-container .gal-preview img{
	width: 100%;
	border-radius: 2px;
}
#gal-container .gal-preview a{
	position: absolute;
	top: 5px;
	right: 5px;
	color: #dc3545;
	font-size: 18px;
	background: #fff;
	width: 25px;
	height: 25px;
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	transition: .3s linear;
}
#gal-container .gal-preview a:hover{
	background: #df5959;
	color: #fff;
}
.clearallimgdiv{
    padding: 10px 0 0;
}
.clearallimgdiv #clrimgs{
    color: #ff0000;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    background: #ff000030;
    padding: 6px 10px;
    border-radius: 3px;
    display: inline-block;
}
.msgbox{
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}
.msgbox .alertdiv{
	padding: 15px;
	background: #fff;
	box-shadow: 0 0 30px -10px rgb(0 0 0 / 50%);
	border-radius: 5px;
}
.msgbox .alertdiv p{
    font-size: 15px;
    letter-spacing: .5px;
}

.msgbox .alertdiv p:before{
	font-family: "bootstrap-icons";
	position: relative;
	top: 3px;
	margin-right: 10px;
	font-size: 18px;
	line-height: 1;
}
.msgbox .alertdiv.success p{}
.msgbox .alertdiv.success p:before{
	content: "\f26a";
	color: green;
}
.msgbox .alertdiv.failed p{}
.msgbox .alertdiv.failed p:before{
	content: "\f622";
	color: red;
}
.msgbox .loading_span{
	position: relative;	
	display: block;
	z-index: 1;
	font-size: 14px;
	letter-spacing: 1px;
	padding: 0 20px 0 40px;
}
.msgbox .loading_span:before{
	content: "";
	width: 20px;
	height: 20px;
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	border: 1px solid var(--primary-color);
	border-radius: 50px;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	animation: loading 0.7s linear infinite;
}
@keyframes loading{
	0%{
		transform: translateY(-50%) rotate(0deg);
	}
	100%{
		transform: translateY(-50%) rotate(360deg);
	}
}

.msgbox .loading_spanphp  p{
	color: green;
	font-size: 13px;
	font-weight: 500
}

.page-content form .submitInput{
	border: 1px solid #c5c5c5;
	border-radius: 5px;
	font-size: 16px;
	padding: 7px 20px;
	background: var(--primary-color);
	font-weight: 300;
	transition: .3s ease-in;
	color: #fff;
}
.page-content form .submitInput:hover{
	background: none;
	color: #000;
}


.generate-invoice{
    padding: 30px 0;
}
.generate-invoice form{}
.generate-invoice form .fields{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 10px;
}
.generate-invoice form .fields input{
}
.generate-invoice form .fields label{
    cursor: pointer;
}
.generate-invoice form .fields-btn{}
.generate-invoice form .fields-btn button{
    border: 1px solid #c5c5c5;
    border-radius: 5px;
    font-size: 16px;
    padding: 7px 20px;
    background: var(--primary-color);
    font-weight: 300;
    transition: .3s ease-in;
    color: #fff;
}
.generate-invoice form .fields-btn button:hover{
	background: none;
    color: #000;
}
.vieworder-info{}
.vieworder-info h3{
    background: #041c33b5;
    padding: 10px 15px;
    font-size: 18px;
    color: #fff;
    letter-spacing: 0.5px;
    margin: 0 0 10px;
    border-radius: 5px;
}
.vieworder-info .info-row{
    display: flex;
    align-items: center;
    gap: 15%;
}
.vieworder-info .info-row .info-col{
    flex-basis: 30%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
}
.vieworder-info .info-row .info-col span{}
.vieworder-info .info-row .info-col span:nth-child(1){
    font-weight: 600;
    text-transform: uppercase;
    font-size: 15px;
}
.vieworder-info .info-row .info-col span:nth-child(2){}
.vieworder-addresses{
    margin: 20px 0;
    display: flex;
    align-items: start;
    gap: 5%;
}
.vieworder-addresses .addressbox{flex-basis: 48%;}
.vieworder-addresses .addressbox h3{}
.vieworder-addresses .addressbox .address{}
.vieworder-addresses .addressbox .address span{
    display: block;
    font-style: italic;
}
.vieworder-products{}
.vieworder-products .protbl{
    width: 100%;
}
.vieworder-products .protbl .protbl-head{
    background: #4d5e6e;
    padding: 10px 15px;
    border-radius: 5px;
}
.vieworder-products .protbl .protbl-head span{
    color: #fff;
    font-weight: 600;
    letter-spacing: .5px;
    display: inline-block;
}
.vieworder-products .protbl .protbl-head span:nth-child(1){
    width: 10%;
}
.vieworder-products .protbl .protbl-head span:nth-child(2){
    width: 68%;
}
.vieworder-products .protbl .protbl-head span:nth-child(3){
    width: 10%;
}
.vieworder-products .protbl .protbl-head span:nth-child(4){
    width: 10%;
}
.vieworder-products .protbl .protbl-body{
    padding: 10px;
}
.vieworder-products .protbl .protbl-body span img{width: 50px;}
.vieworder-products .protbl .protbl-body span{}
.vieworder-history{
    padding: 20px 0 0;
}
.vieworder-history h3{
    font-size: 18px;
    padding: 0 0 10px;
}

.vieworder-history .protbl{
    width: 100%;
}
.vieworder-history .protbl .protbl-head{
    background: #4d5e6e;
    padding: 10px 15px;
    border-radius: 5px;
}
.vieworder-history .protbl .protbl-head span{
    color: #fff;
    font-weight: 600;
    letter-spacing: .5px;
    display: inline-block;
}
.vieworder-history .protbl .protbl-head span:nth-child(1){
    width: 10%;
}
.vieworder-history .protbl .protbl-head span:nth-child(2){
    width: 68%;
}
.vieworder-history .protbl .protbl-head span:nth-child(3){
    width: 10%;
}
.vieworder-history .protbl .protbl-head span:nth-child(4){
    width: 10%;
}
.vieworder-history .protbl .protbl-body{
    padding: 10px;
}