@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*, *:before, *:after { box-sizing: border-box; outline: none; }
body { overflow-x: hidden; height: 100%; position: relative; max-width: 100%; font-size: .875rem; color:#222; background-color: #f5f5f5; font-family: "Poppins", sans-serif; margin: 0; }
/* Global class */
.h-auto { height: auto !important; }
.vh-100 { height: 100vh!important; }
.w-100 { width: 100%!important; }
.w-auto { width: auto!important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 2rem !important; }

/* Global css */
.container { padding-left: 15px; padding-right: 15px;}
.main-wraper { padding: 50px; margin-top: 60px; display: block;}
.fix-wrapper { min-height: 100vh; display: flex ; padding: 30px 0; align-items: center; }
.card { margin-bottom: 20px; background-color: #fff; transition: all .5s ease-in-out; position: relative; border: 0px solid transparent; border-radius: 20px; box-shadow: 0 6px 24px #3537510f; height: calc(100% - 30px); }
.card-body { padding: 20px;}
.card-title { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 20px; margin: -20px -20px 20px; border-bottom: 1px solid #ddd; }
.card-title h2 { margin: 0; }
.btn{ padding: .55rem 1.25rem; border-radius: 6px; font-size: 1rem; border: 0; height: 42px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-color: #626bf1; background-color: #626bf1; color: #fff; text-decoration: none; font-family: "Poppins", sans-serif;}
.btn:hover, .btn:focus{ border-color: #434de9; background-color: #434de9; color: #fff;}

/* Form */
.form-group { margin-bottom: 1rem; }
.form-control { display: block; width: 100%; font-size: .937rem; font-weight: 400; line-height: 1.5; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-clip: padding-box; border: 1px solid #ddd; border-radius: 6px; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; background: #fff; color: #222; height: 48px; padding: .3125rem .95rem; font-family: "Poppins", sans-serif;}
label { display: inline-block; margin-bottom: .25rem; font-weight: 600;}
.error{ color: red; font-size: 14px; margin: 0 0 10px; background: #ff00001a; padding: 10px; text-align: center; border: 1px solid #ff000029; border-radius: 5px; }
.success { color: green; font-size: 14px; margin: 0 0 10px; background: #0080001c; padding: 10px; text-align: center; border: 1px solid #00800030; border-radius: 5px; }

/* Login */
.card.login-container { width: 94%; max-width: 450px; margin: auto; }
.login-container .card-title {justify-content: center;}
.login-container .btn{font-weight: 600; height: 48px;}

/* Header */
header { background: #fff; transition: all .2s ease; box-shadow: 0 0 40px #523f691a; padding: 0; position: fixed; top: 0; width: 100%; z-index: 1111;}
header .navbar { display: flex; align-items: center; justify-content: space-between; height: 60px; }
header .welcome-dashboard {width: 280px; background: #626bf1; padding: 15px; color: #fff; font-size: 18px; font-weight: 600; height: 100%; display: flex ; align-items: center;}
header .menu { display: flex; align-items: center; gap: 15px; padding: 15px; }
header .menu a { text-decoration: none; color: #473e3e; font-weight: 400; font-size: 1rem; }
header .menu a.logout {color: red; font-weight: 700; }


/* table */
.table-responsive { display: block; overflow: auto; width: 100%; }
table { border-collapse: collapse; border-radius: 5px; width: 100%; border: 0; text-align: left;}
table th { color: #473e3e; font-size: 1rem; white-space: nowrap; font-weight: 600; border: 0; padding: .65rem .9375rem; }
table td { font-size: .9375rem; color: #737b8b; padding: .65rem .9375rem; border: 0; border-top: 1px solid #ddd; }
table td .green-tag { background: #25cd25; color: #fff; font-size: 12px; padding: 2px 10px; line-height: 1; border-radius: 15px; }
table td .red-tag { background: red; color: #fff; font-size: 12px; padding: 2px 10px; line-height: 1; border-radius: 15px; }
table td .yellow-tag {   background: orange;   color: #fff;   font-size: 12px;   padding: 2px 10px;   line-height: 1;   border-radius: 15px;   margin-left: 5px; }

table td .btn-group { display: flex; gap: 5px; }
table td .btn{ padding: 7px; height: 36px; font-size: 1rem; min-width: 37px;}
table td .btn.edit-btn {background: #03A9F4; }
table td .btn.delete-btn {background: red; }
.pagination { display: flex; align-items: center; justify-content: center; border-top: 1px solid #ddd; margin: 50px 0 0; padding: 20px 0; flex-wrap: wrap; }
.pagination a { color: #999; text-decoration: none; font-size: 16px; border: 1px solid #ddd; padding: 5px 17px; min-width: 40px; text-align: center; font-weight: 500; margin-bottom: 5px;}
.pagination a.active-page { background: #626bf1; border-color: #626bf1; color: #fff; }

/* Side Menu */
.main-wraper.w-sidemenu { width: calc(100% - 280px); float: right; padding: 50px 30px; transition: 0.45s all;}
.sidemenu{ position: fixed; left: 0px; bottom: 0; height: calc(100% - 60px); background: #fff; width: 280px; box-shadow: 0 0 40px #523f691a; transition: 0.45s all; z-index: 111;}
.sidemenu ul { margin: 30px 0; padding: 0; list-style: none; }
.sidemenu ul li a { text-decoration: none; color: #473e3e; font-weight: 400; font-size: 1rem; padding: 18px 15px; display: inline-block; width: 100%; border-bottom: 1px solid #ddd; }
.sidemenu ul li.active a { font-weight: 700; color: #626bf1; }
body:not(.home) .sidemenu-bar{display: none;}
.sidemenu-bar.in-active .fa-bars:before { content: "\f00d";}
body.sidebar-close{overflow-x: hidden;}
body.sidebar-close .main-wraper.w-sidemenu { width: 100%; }
body.sidebar-close .sidemenu { left: -280px;}

/* Tab css */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.tab-panel { display: none; }
.tab-panel.active {   display: block; animation: fadeIn 0.45s ease-in; }
.sidemenu-bar { margin-right: auto; width: 70px; display: flex; align-items: center; justify-content: center; font-size: 22px; border-right: 1px solid #ebebeb; height: 100%; cursor: pointer; }


/* Create account */
.form-wraper { max-width: 750px; margin: auto; }
.form-wraper #image-uploads button.btn.add-img + div { margin-top: 1rem; }
.form-wraper .image-group { display: flex; gap: 10px; margin: 0 0 1rem; }
.form-wraper .image-group .form-control { padding: 12px; }
.form-wraper .image-group .btn { height: 48px; font-weight: 700; background: red; }
.form-wraper .form-action { display: flex; gap: 6px; align-items: center; justify-content: flex-end; padding: 20px; margin: 30px -20px -20px; border-top: 1px solid #ddd; }
.form-wraper .existing-images img{max-height: 150px; max-width: 200px;}
.form-wraper .existing-images.group-img { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.form-wraper .existing-images.group-img .img-box { position: relative; border: 1px solid #ddd; padding: 10px; border-radius: 8px; background: #f6f6f6; }
.form-wraper .existing-images.group-img .img-box img{max-width: 100%; max-height: none; width: 100%; vertical-align: middle;}
.form-wraper .existing-images.group-img .img-box .btn { position: absolute; background: red; border: 0; right: 10px; top: 10px; padding: 0; width: 35px; height: 36px; }
.form-wraper .btn.update { background: #03A9F4; border-color: #03A9F4; }
.form-wraper .btn.update:hover, .form-wraper .btn.update:focus { background: #089de2; border-color: #089de2; }