/***
* 
BASE BOOTSTRAP COMPONENT 
*
***/
/* typography */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');
body, div, span, label, p, h1, h2, h3, h4, h5, input, textarea, table, tr, td, th {font-family: 'Poppins', sans-serif; color: #444; font-size: 14px;}

/* General Class */
.show{display: block !important;}
.hide{display: none !important;}
.min-height-auto{min-height: inherit !important;}
.fs-12{font-size: 12px;}
.fs-16{font-size: 16px;}
.fs-20{font-size: 20px;}
.fs-24{font-size: 24px !important;}
.three-column > div{width: 33.3333%;}
.w-full{width: 100% !important;}
.h-full{height: 100vh !important;}
.color-success{color: #21a225 !important;}
.color-primary{color: #645DF6 !important;}
.color-secondary{color: #FF3366 !important;}
.icon-sm{background-color: #8782F8; padding: 8px; border-radius: 5px; font-size: 16px; color: white; margin-right: 5px;}
.form-content label,
label{text-transform: uppercase; font-size: 12px; font-weight: 500; color: #666;}
label.form-check-label{text-transform: none; font-size: 14px;}
.show-mobile{display: none;}
.input-with-icon-wrapper input.form-control{background-color: #fff; border-color: #ddd;}
.form-content p{font-size: 14px; color: #444;}
input.form-control{background-color: #f5f6fb; border-color: #eee; font-size: 14px;}
input[type="file"]{height: 35px; font-size: 12px; padding: 5px;}
span.form-text.text-muted{font-size: 12px; margin-top: 5px; display: inline-block;}
.form-content .form-title{color: #444; font-size: 18px; text-align: center;}
.page-link{color: #645DF6;}
.page-item.active .page-link{background-color: #645DF6; border-color: #645DF6;}
.font-18{font-size: 18px;}
.bold{font-weight: bold !important}
.semibold{font-weight: 500 !important}
.bg-gray{background-color: #F5F8FB;}
.form-card{background-color: white; box-shadow: 0px 5px 15px 0px rgba(78,81,138,0.1); transition: .3s all; border: 1px #eee solid;}
.form-card:hover{ box-shadow: 0px 5px 8px 0px rgba(78,81,138,0.3);}
table.table-responsive{display: table;}
.img-thumb{width: 42px; height: 42px; object-fit: cover; border-radius: 10px;}
@media (max-width: 991.98px){.show-mobile{display: block;} .table-responsive{display: block;}}

/* Main Color */
.btn-primary{background-color: #645DF6; border-color: #645DF6; font-weight: 500; transition: .3s all;}
.btn-primary:hover{background-color: #293F78;}
.btn-primary i{background-color: #8782F8; padding: 4px; border-radius: 3px; font-size: 16px;}
.form-content .btn-primary-outline,
.btn-primary-outline{background-color: #fff; border: 1px solid #645DF6; font-weight: 500; transition: .3s all; color: #444;}
.form-content .btn-primary-outline:hover,
.btn-primary-outline:hover{background-color: #645DF6; color: white;}
.form-content .btn-primary-outline:hover i,
.btn-primary-outline:hover i,
.btn-success-outline:hover i{color: white !important}
.form-content .btn-primary-outline i,
.btn-primary-outline i{font-size: 14px; margin-top: 0 !important; color: #645DF6;}
.btn-success-outline{background-color: #fff; border-color: #21a225; font-weight: 500; transition: .3s all; color: #444;}
.btn-success-outline:hover{background-color: #21a225; color: white;}
.btn-success-outline i{font-size: 14px; margin-top: 0 !important; color: #21a225 !important;}
.btn-secondary{background-color: #FF3366; border-color: #FF3366; font-weight: 500;}
.btn {border-radius: 5px; padding: 6px; display: flex; align-items: center;}
.color-steel{color: #293F78;}
.bg-steel{background-color: #293F78;}
.color-dark-blue{color: #040849;}
.bg-dark-blue{background-color: #040849;}

/* Sidebar Component */
.sidebar-fixed .app-header+.app-body .sidebar{height: 100%; padding-top: 65px; box-shadow: 0px 0px 15px 0px rgba(78,81,138,0.4);}
.sidebar .nav-item{padding: 10px; list-style: none;}
.sidebar .nav-item .nav-link{border-radius: 10px; padding: 10px;}
.sidebar .nav-item .nav-link{border: none; width: 100%; display: flex; align-items: center;}
.sidebar-minimized .sidebar .nav-item .nav-link{padding: 10px 0; display: block;}
.sidebar-minimized .sidebar .nav-item button.nav-link i{width: 40px;}
.sidebar-minimized.sidebar-fixed .sidebar .sidebar-nav,
.sidebar-minimized .sidebar .nav-item,
.sidebar-minimized .sidebar .nav,
.sidebar-minimized.sidebar-fixed .sidebar{width: 60px;}
.sidebar .nav-link{padding: 10px 0; border-radius: 10px; background-color: #1D215B;}
.sidebar-minimized .sidebar .nav-item:hover button.nav-link{display: flex;}
.sidebar-minimized .sidebar .nav-item:hover>.nav-link,
.sidebar-minimized .sidebar .nav-link:hover,
.sidebar .nav-link:hover,
.sidebar .nav-link.active{background-color: #645DF6;}
.sidebar .nav-link.active .nav-icon{color: white; font-size: 16px;}
.sidebar-minimized .sidebar .nav-item.nav-dropdown:hover{background-color: transparent;}
.sidebar-minimized .sidebar .nav-item.nav-dropdown:hover a{border-bottom-right-radius: 0; background-color: #645df6;}
.sidebar-minimized .sidebar .nav-link i{color: white;}
.sidebar-minimized .sidebar .nav-link:hover{width: 230px;}
.sidebar-minimized .sidebar .nav-link .nav-icon{width: 41px; margin-right: 20px;}
.sidebar .nav-dropdown-items .nav-item{width: 150px; margin-left: auto;}
.sidebar .nav-dropdown-items .nav-item:last-child{margin-bottom: 0;}
.sidebar-minimized .nav-dropdown-items .nav-item .nav-link{padding: 10px 15px;}
.sidebar .nav-dropdown-items .nav-item .nav-link{padding: 10px 15px; margin: 10px 0;}
.sidebar .nav-dropdown-items .nav-item i{display: none;}
.sidebar-minimized .sidebar .nav-dropdown-items .nav-item{width: 180px; background-color: #645df6; padding: 10px;}
.sidebar-minimized .sidebar .nav-dropdown-items .nav-item:last-child{border-bottom-right-radius: 10px;}
.sidebar-minimized .sidebar .nav>.nav-dropdown:hover>.nav-dropdown-items{left: 60px; background-color: transparent;}
.sidebar-minimized .sidebar .nav-dropdown-items .nav-item .nav-link{width: auto; background-color: #645df6; padding: 0;}
.sidebar .nav-link.avatar{background-color: transparent; display: flex; flex-direction: column; width: 100%; align-items: center; justify-content: center; margin: 40px 0;}
.sidebar .nav-link.avatar:hover{background-color: transparent;}
.sidebar-minimized .sidebar .nav-link.avatar{width: 60px; flex-direction: row; margin: 25px 0;}
.sidebar-minimized .sidebar .nav-link.avatar img{margin: 0}
.sidebar .nav-link.avatar img{width: 40px; height: 40px; margin: 0 10px}
.sidebar .nav-link.avatar span{color: white; margin-top: 5px; font-weight: bold;}
.sidebar-minimized .sidebar .nav-link.avatar span{display: none;}

/* Header Component */
.header-fixed .app-header{width: 200px;}
.sidebar-minimized .app-header{width: 60px;}

/* App Body */
.header-fixed .app-body{margin-top: 0; background-color: #F5F8FB;}
.sidebar-fixed .main{padding: 25px 0; padding-bottom: 0;}
.sidebar-minimized.sidebar-fixed .main{margin-left: 60px !important;}
.main .input-with-icon-wrapper{display: flex;}
.main .input-with-icon-wrapper input{border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; outline: none;}
.main .input-with-icon-wrapper .btn{border-top-left-radius: 0; border-bottom-left-radius: 0;}
.main .input-with-icon-wrapper .btn i{background-color: transparent; padding: 0 5px}
.main .sort-filter{display: flex; justify-content: flex-end; align-items: center; font-size: 12px;}
.main .sort-filter i{margin-right: 5px; font-size: 18px; color: #645DF6;}
.main .sort-filter select{padding: 5px 0; margin-left: 5px; background-color: transparent; border: 0; border-bottom: 1px #ddd solid; color: #333;}

/* Card Component */
.main .container-fluid{padding: 0 25px;}
.main .card{background-color: transparent; border: 0}
.main .card-header{padding: 0; background-color: transparent; border: 0; display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;}
.main .card-header__title{font-size: 30px; font-weight: 500;}
.main .card-header-actions{float: none; margin-right: 5px;}
.main .card-header-actions i{font-size: 26px; }
.main .card-body{padding: 0; margin: 10px 0}
.main .pond-card-wrapper{margin: 0 -5px; display: flex; flex-wrap: wrap;}
.main .pond-card-wrapper .pond-card{margin: 0 5px;  margin-bottom: 15px;}
.main .pond-card{background-color: white; border-radius: 10px; padding: 15px; display: inline-block; width: calc(20% - 10px); box-shadow: 0px 5px 15px 0px rgba(78,81,138,0.1); transition: .3s all; border: 1px #eee solid; margin-bottom: 15px;}
@media (max-width: 758px){.main .pond-card{width: 100%;} .main .header-tabs {flex-direction: column;}}
@media (min-width: 758px){.main .pond-card{width: calc(25% - 10px);}}
.main .pond-card.full-card{width: 100%; margin-bottom: 25px;}
.main .pond-card:hover{ box-shadow: 0px 5px 8px 0px rgba(78,81,138,0.3);}
.main .pond-card__initial{font-weight: bold; color: white; background-color: #FF3366; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 5px; text-transform: uppercase; margin-bottom: 10px;}
.main .pond-card__initial.active{background-color: #20C967;}
.main .d-flex .pond-card__title{min-height: auto; line-height: inherit;}
.main .pond-card__title{font-weight: bold; min-height: 46px; color: #444; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;}
.main .pond-card__detail-icon{color: #666; font-size: 12px; margin-bottom: 7px; display: flex; align-items: center; }
.main .pond-card__desc{display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; min-height: 58px;}
.main .pond-card .lni{color: #645DF6; font-size: 16px; margin-right: 5px;}
.main .pond-card .custom-control-label{font-size: 12px; padding-top: 3px;}
.main .custom-control-input:checked~.custom-control-label:before{background-color: #20C967; border-color: #20C967;}
.main .header-tabs{display: flex;}
.main .header-tabs .tabs{margin-right: 50px; color: #666; font-weight: 500; padding-bottom: 8px; transition: .3s all; display: flex; align-items: center;}
.main .header-tabs .tabs:hover{color: #645DF6; text-decoration: none;}
.main .header-tabs .tabs i{margin-right: 6px; font-size: 16px;}
.main .header-tabs .tabs.active{color: #645DF6; border-bottom: 2px #645DF6 solid;}
.main .container-fluid.fluid-header{border-bottom: 1px #ddd solid;}
.main .tab-content{border: none; padding: 25px; min-height: calc(100vh - 182px); background-color: transparent;}

/* Table Component */
table th > div,
table th{text-transform: uppercase; font-size: 12px; color: #5c6873;}
table{border: 1px #ddd solid; margin-bottom: 25px;}
table tr, table td, table th{border-color: #ddd !important; background-color: white; transition: .3s all;}
.table-hover tbody tr:hover td, .table-hover tbody tr:hover{background-color: #f4f3fd;}
.table-hover tbody tr:hover input{background-color: #fff;}
table th{border-bottom: none !important;}
table code{background-color: #eee; border-radius: 3px; padding: 3px 5px; font-size: 12px; color: #444; white-space: nowrap;}
table button.btn{padding: 2px; margin-left: 5px;}
.main table .btn i{color: #aaa !important; transition: .3s all;}
.main table .btn:hover i{color: #645DF6 !important;}
.main table .btn-delete:hover i{color: #FF3366 !important;}

/* Login Page */
.pond-login h1{font-size: 30px; font-weight: bold;}
.pond-login .card{border-radius: 15px; border-color: #ddd; box-shadow: 0px 5px 15px 0px rgba(78,81,138,0.1);}
.pond-login .btn-primary{width: 100%; justify-content: center; position: relative; padding: 10px 0;}
.pond-login .btn-primary i{position: absolute; right: 10px;}
.pond-login .btn-link{margin-top: 10px; justify-content: center; font-size: 12px;}

/* Blog Page */
.blog::before{content: ''; width: 100%; height: 200px; background-color: #645DF6; display: block;}
.blog > .container{max-width: 900px;}
.blog-body{background-color: white; padding: 25px; box-shadow: 0px 5px 15px 0px rgba(78,81,138,0.1); height: calc(100vh - 200px);}
.blog-body .blog-company{font-size: 24px; margin-top: 25px; margin-bottom: 15px;}
.blog-body .blog-profile{width: 200px; margin-top: -125px; height: 200px; object-fit: cover; border-radius: 10px; box-shadow: 0px 5px 15px 0px rgba(78,81,138,0.1); border: 3px white solid;}