@charset "utf-8";
/* CSS Document */

/* Table of Contents
-----------------------------------------------------------------------------
	1. Clean Base
	2. Base Typography
	3. Images
	4. Links
	5. Forms
	6. Tables
	7. Framework 
    */

/* 1. Clean Base
------------------------------------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, a, nav, section, summary, time, mark, audio, video{margin:0 auto; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none; list-style:none; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0); box-sizing:border-box;}

html,body{-webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing: grayscale;}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{display: block;}
img{border:none;}

input[type="text"], input[type="submit"], input[type="button"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], textarea{-webkit-appearance:none; outline:none; box-sizing:border-box;}
textarea:focus, input:focus, a, div, img{outline: none;}
i,i:before{display: block;}

.cf:before, .cf:after{content: ""; display: table;}
.cf:after{clear: both;}
.cf{zoom: 1;}
.clear{clear: both;}
.clearfix:after{content: "."; display: block; height:0; clear: both; visibility:hidden;}
.clearfix{display: inline-block;}
* html .clearfix{height: 1%;}
.clearfix{display: block;}

/* 2. Base Typography
------------------------------------------------------------------------------*/
body{background: #F3F3F3; overflow-x: hidden; color:#232529; font-size:14px; font-family: 'Poppins', sans-serif; font-weight:400;}

body.no-scroll{overflow: hidden;}

h1, h2, h3, h4, h5, h6{margin-bottom:15px; line-height: 1.4; color: #232529;}
h1{font-size:28px; font-weight:600;}
h2{font-size:26px; font-weight:500;}
h3{font-size:24px; font-weight:500;}
h4{font-size:22px; font-weight:500;}
h5{font-size:18px; font-weight:500;}
h6{font-size:16px; font-weight:500;}

p{color:#51596C; font-size:14px; font-weight:400; line-height:1.5;}
samp{font-family: 'Poppins', sans-serif; font-weight:400;}
del{text-decoration: line-through;}

/*ul{margin:20px 15px; padding:0;}
ul li{color:#51596C; padding:0 0 0 15px; margin-bottom: 10px; line-height: 1.7; position: relative;}
ul li:before{content:""; width: 5px; height: 5px; display: block; background: #62646A; border-radius: 50%; position: absolute; left: 0; top: 10px;}
ul li:last-child{margin-bottom: 0;}*/

ol{margin:20px 30px; padding:0}
ol li{color:#51596C; line-height: 1.7; padding:0; margin-bottom: 10px; list-style: decimal;}
ol li:last-child{margin-bottom: 0;}

blockquote{display:block; text-align:left; margin-bottom:30px; position:relative; background:#FEEFE8; padding:15px; border-radius: 8px;}
blockquote p{color: #1F2430; margin-bottom: 0;}
strong{font-weight: 600;}

hr{border:0 #EFEFEF solid; border-top-width:1px; clear:both; height:0;}
label{display: block; color: #51596C; font-size: 13px; margin: 0 0 5px;}

.img-full{display: block; width: 100%; height: auto;}

.scroll-disabled body{height: 100vh; overflow: hidden;}

/* 3. Images
------------------------------------------------------------------------------*/
img{border:none; border-style: none;}

/* 4. Link
------------------------------------------------------------------------------*/
a{color:#51596C; text-decoration: none; transition: 0.2s all;}
a:hover{color: #232529; text-decoration: underline;}

/* 5. Forms
------------------------------------------------------------------------------*/
input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="tel"], 
input[type="search"],
input[type="number"],
textarea{color:#232529; width: 100%; height: 45px; padding:13px 15px; font-size:14px; font-weight: 400; font-family: 'Poppins', sans-serif; border: 0; border-radius: 5px;}
textarea{height:100px; resize:none;}

input[type="submit"], 
input[type="button"], 
input[type="reset"]{background:#224b9c; cursor:pointer; text-transform: uppercase; color:#fff; border:0; height:45px; display:block; font-size:14px; font-family: 'Poppins', sans-serif; font-weight: 400; border-radius: 5px;}
input[type="submit"]:hover, input[type="button"]:hover{background:#303637;}input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"]{color:#232529; font-size:14px; height:45px;}
textarea{border:0; padding: 13px 15px; color:#1F2430; font-size:14px; height:90px; resize:none;  font-family: 'Poppins', sans-serif; line-height:16px;}
::-webkit-input-placeholder{opacity: 1 !important; color: #D4D4D4;}
:-moz-placeholder{opacity: 1 !important; color: #D4D4D4;}
::-moz-placeholder{opacity: 1 !important; color: #D4D4D4;}
:-ms-input-placeholder{opacity: 1 !important; color: #D4D4D4;}  

select:focus{outline: none;}	
select::-ms-expand{display: none;}
select{
    -webkit-box-shadow: none;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    height: 33px;
    width: 100%;
    display: block; 
    color: #373737 !important; 
    font-size: 14px;
    padding: 6px 25px 7px 10px;
    border-radius: 3px;
    text-shadow: none !important;
    border:1px solid #cacecf;
    background-color: #fff;
    background-image: url("../images/select-arrow.svg");
    background-position: right 10px center;
    background-size: 10px auto;
    background-repeat: no-repeat;

}
select:disabled{background-color: #eeeeee;}

/* 6. Tables
------------------------------------------------------------------------------*/
table{margin: 0 0 30px; border-collapse: separate; border-spacing: 0; empty-cells: show;}
thead{background: #F5F5F5;}
th, td{color: #51596C; text-align: left; padding: 8px 15px; border: 1px solid #DDD;}
th{font-size: 13px; font-weight: 500; border-style: solid solid none none;}
td{font-size: 12px; border: solid 1px #ddd;  border-style: none solid solid none;}
td:first-child{text-align: center;}
/*td:last-child{text-align: right;}*/
tr:first-child th{border-top-style: solid;}
tr:first-child th:first-child{border-top-left-radius: 8px;}
tr:first-child th:last-child{border-top-right-radius: 8px;}
tr:last-child td:first-child{border-bottom-left-radius: 8px;}
tr:last-child td:last-child{border-bottom-right-radius: 8px;}
tr th:first-child, tr td:first-child{border-left-style: solid;}

/* 7. Layout Framework
------------------------------------------------------------------------------*/
/* main container */
#wrapper{display: flex; flex-direction: column; width:100%; min-height: 100vh;}
#content-area{width: 100%; display: block; flex: 1;}
.container{max-width:1200px; width:100%; padding: 0 15px;}
.container-fluid{width:100%; padding: 0 20px;}

/* default btn */
.btn{display: block; width: 100%; background: #232529; color: #fff; height: 40px; line-height: 40px; font-size: 14px; font-weight: 500; font-family: 'Poppins', sans-serif; text-transform: capitalize; text-align: center; white-space: nowrap; padding: 0 20px; outline: none; border: 1px solid #232529; cursor: pointer; transition: 0.2s all;}
.btn:hover{background: #fff; color: #232529; text-decoration: none;}
.btn-outline{background: transparent; color: #232529;}
.btn-outline:hover{background: #232529; color: #fff;}

/* Start Custome css */
header{position: sticky; top: 0; left: 0; width: 100%; height: 70px; background: #fff; border-bottom: 1px solid #E1E1E1; box-shadow: 0 3px 10px rgba(28, 105, 238, 0.05); z-index: 999;}

header .container-fluid{display: flex; align-items: center; justify-content: space-between; height: 100%;}
header .header-left{margin: 0;}
header .logo{display: block; max-width: 120px; width: 100%;}

header .header-right{display: flex; align-items: center; grid-gap: 45px; margin: 0;}
header nav ul{display: flex; align-items: center; grid-gap: 45px; margin: 0;}
header nav ul li{padding: 0; margin: 0;}
header nav ul li:before{display: none;}
header nav ul li a{display: inline-block; color: #51596C;}
header nav ul li a:hover{color: #232529; font-weight: 500; text-decoration: none;}
header nav ul li.active a{color: #232529; font-weight: 500;}

header .notification-link a{position: relative; }
header .notification-link img{max-width: 26px; width: 100%; vertical-align: middle; }
header .notification-link .counter{background: #ccc; color: #51596C; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #51596c; line-height: 16px; position: absolute; top: -4px; right: -6px; font-size: 10px; font-weight: 600; z-index: 2;}
header .notification-link a:before{content: ""; width: 20px; height: 20px; background: #fff; position: absolute; top: -3px; right: -5px; display: block; border-radius: 50%; z-index: 1;}

header .btn-group{display: flex; align-items: center; grid-gap: 10px;}
header .btn-group a{min-width: 100px;}

header .profile-box {position: relative; display: flex; align-items: center; grid-gap: 10px; height: 45px; padding: 0 25px 0 30px; border-left: 1px solid #E1E1E1; cursor: pointer}
header .profile-box::after {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 12px; height: 7px; background: url('../images/select-arrow.svg') no-repeat center; background-size: cover;}
header .profile-box .img-block{width: 40px; height: 40px; border-radius: 50%; overflow: hidden;}
header .profile-box .username{font-weight: 500; text-transform: capitalize;}

header .profile-box.open .profile-dropdown{display: block;}
header .profile-box .profile-dropdown {position: absolute; top: calc(100% + 12px); background: #fff; width: calc(100% - 25px); left: 30px; border: 1px solid #E1E1E1; box-shadow: 0 3px 10px rgb(28 105 238 / 5%); border-top: 0; display: none;}
header .profile-box .profile-dropdown ul {margin: 0;}
header .profile-box .profile-dropdown ul li{padding: 0; margin-bottom: 0;}
header .profile-box .profile-dropdown ul li:before{display: none;}
header .profile-box .profile-dropdown a {width: 100%; display: inline-block; padding: 8px 15px;}
header .profile-box .profile-dropdown a:hover {background: #F3F3F3; text-decoration: none;}

/* hamburger */
.hamburger{display: none; max-width: 22px; width: 100%; margin-right: 16px;}
.hamburger::after{content: ''; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(35, 37, 41, 0.5); opacity: 0; visibility: hidden; transition: all 0.1s linear; z-index: 9;}
.hamburger.open::after{opacity: 1; visibility: visible;}
.hamburger img {vertical-align: middle;}

/* sidebar */
.sidebar{max-width: 260px; width: 100%; height: calc(100vh - 70px); background-color: #fff; margin: 0; position: fixed; left: 0; overflow: auto; }
.sidebar::-webkit-scrollbar {display: none; } 

.sidebar .sidebar-inner {padding: 35px 20px 0; height: 100%; display: flex; flex-direction: column; justify-content: space-between;}
.sidebar .sidebar-inner .nav-header{width: 100%; display: none;}
.sidebar .sidebar-inner .nav-header .title-block{display: flex; align-items: center; justify-content: space-between; margin: 0 0 25px;}
.sidebar .sidebar-inner .nav-header .title-block .title{font-size: 18px; font-weight: 600; line-height: 1; margin: 0;}
.sidebar .sidebar-inner .nav-header .title-block .btn-close{max-width: 16px; width: 100%; margin: 0; cursor: pointer;}
.sidebar .sidebar-inner .nav-header .btn-group{display: flex; align-items: center; justify-content: space-between; grid-gap: 10px;}
.sidebar .sidebar-inner .links-wrapper{width: 100%;}
.sidebar .btn-topic {margin-bottom: 30px;}
.sidebar .sidebar-links-box {padding-bottom: 25px; border-bottom: 1px solid #e1e1e1; margin-bottom: 35px;}
.sidebar .sidebar-links-box:last-child {padding-bottom: 0; border-bottom: 0; margin-bottom: 20px;}
.sidebar .sidebar-links-box .links-list ul {margin: 0;}
.sidebar .sidebar-links-box .links-list ul li{padding: 0; margin-bottom: 0}
.sidebar .sidebar-links-box .links-list ul li::before{display: none;}
.sidebar .sidebar-links-box .links-list a{width: 100%; font-size: 12px; line-height: 28px; font-weight: 400; color: #232529; padding: 6px 12px; display:  inline-block; text-decoration: none; position: relative; transition: all 0.3s ease;}

.sidebar .sidebar-links-box .links-list figure {max-width: 35px; width: 100%; display: inline-block;}
.sidebar .sidebar-links-box .links-list img{vertical-align: middle; margin-top: -3px; margin-right: 10px;} 
.sidebar .sidebar-links-box .links-list a.active:not(.inner-links a) {background: #F3F3F3; font-weight:  500;}
.sidebar .sidebar-links-box .links-list a:hover {background: #F3F3F3;}
.sidebar .sidebar-links-box .links-list a:hover:after,
.sidebar .sidebar-links-box .links-list a.active:after{content: ""; display:  block;}
.sidebar .sidebar-links-box .links-list a:after {content: ""; background: url('../images/arrow-right.svg') no-repeat center; width: 8px; height: 13px; background-size: cover; display: inline-block; vertical-align: middle; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: none;}
.sidebar .sidebar-links-box .links-list a.active + .inner-links {display: block;}
.sidebar .sidebar-links-box .inner-links {border: 2px solid #F3F3F3;}
.sidebar .sidebar-links-box .links-list .inner-links {padding: 5px 5px 5px 15px; margin-bottom: 10px;}
.sidebar .sidebar-links-box .links-list .inner-links li {position: relative;}
.sidebar .sidebar-links-box .links-list .inner-links li:before {display: block; top: 50%; transform: translateY(-50%);}
.sidebar .sidebar-links-box .links-list .inner-links li a{line-height: 24px; padding: 2px 0 0 15px;font-size: 13px;}
.sidebar .sidebar-links-box .links-list .inner-links li a:hover{background: transparent; text-decoration: underline;}
.sidebar .sidebar-links-box .links-list .inner-links li a:after{display: none;}

.sidebar-footer p {font-size: 11px; line-height: 28px; color: #51596C; margin-bottom: 20px;}


/* content area */
.main {width: 100%;}
.content-area { max-width: calc(100% - 290px); width: 100%; padding: 35px 32px 15px 0; margin-right: 0;}

/* topics section */
.topics-section.group-section {padding-bottom: 14px; border-bottom: 1px solid #e1e1e1; margin-bottom: 30px;}
.topics-section .title-block{margin-bottom: 15px; }
.topics-section .title-block h2{font-size: 24px; line-height: 35px; margin: 0;}

.topics-section .group-box{display: flex; flex-wrap: wrap; margin: 0 -8px}
.topics-section .group-box .item-box{max-width: 215px; width: 100%; background: #fff; padding: 32px 20px; box-shadow: 0px 0px 15px #0000000D; margin: 0 8px 16px; transform: scale(1); transition: 0.4s ease-in-out;}
.topics-section .group-box .item-box:hover{transform: scale(1.03);}
.topics-section .group-box .item-box a:hover{text-decoration: none;}
.topics-section .group-box figure{display: block; max-width: 50px; width: 100%; margin: 0 0 20px;}
.topics-section .group-box .title{font-size: 16px; font-weight: 500; line-height: 1.3;}
.topics-section .group-box .card-subtitle{font-size: 14px; font-weight: 400; line-height: 1.3; color: #51596C;}
.topics-section .group-box hr{display: block; width: 40px; margin: 10px 0 25px; border-top-width: 2px; border-color: #E1E1E1;}
.topics-section .group-box p{font-size: 12px; overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical;}


/* tabination section */
.tabs-head {display: flex; }
.tabs-head > a {min-width: 130px; background: #fff; text-decoration: none; padding: 7px 15px; font-size: 14px; line-height: 21px; font-weight: 400; color: #232529; margin: 0; text-align: center; border-left: 1px solid #F3F3F3; position: relative; }
.tabs-head a:first-child {border-left: 0; }
.tabs-head > a.active {background: #232529; color: #fff; }
.tabs-head > a:not(.active):hover {background: #232529; color: #fff; }
.tab-content {width: 100%; /* height: calc(100vh - 161px); */ background: #fff; padding: 20px 15px 12px; border-top: 1px solid #f3f3f3; }
    .tab-content.firstTab {
        width: 100%;
        background: #F3F3F3;
        padding: 20px 15px 12px;
        border-top: 1px solid #f3f3f3;
    }

/* upload section */
.tabination-section .tabs-head {overflow-x: auto;}
.upload-area {max-width: 720px; width: 100%; margin: 0 auto; text-align: center; padding: 60px 0; }


.upload-area .drop-zoon {background: #F3F3F3; border: 2px dashed #232529; padding: 75px 20px; } 
.upload-area .upload-area__title {margin-bottom: 20px;}
.upload-area .upload-area__paragraph{height: 0; opacity: 0;}

.upload-area .drop-zoon__icon {display: inline-block; margin-bottom: 25px; } 
.upload-area .drop-zoon__paragraph {font-size: 18px; line-height: 27px; color: #232529; margin-bottom: 14px; }
.upload-area .drop-zoon__paragraph a {font-weight: 500; color: #232529; text-decoration: underline;}
.upload-area .drop-zooon_subtitle {font-size: 14px;}
.upload-area .drop-zoon .drop-zoon__file-input {display: none; }
.upload-area .drop-zoon .drop-zoon__loading-text {display: none; height: 0; opacity: 0; } 
.upload-area .drop-zoon .drop-zoon__preview-image{display: none; height: 0; opacity: 0; } 
.upload-area .drop-zoon.drop-zoon--over{background: #e6e6e6;}

.upload-area .file-details {height: 0; opacity: 0; visibility: hidden; margin-top: 10px; background: #F3F3F3; padding: 20px; text-align: left; transition: none 500ms ease-in-out; transition-property: opacity, visibility; transition-delay: 500ms;}
.upload-area .file-details.file-details--open {height: auto; visibility: visible; opacity: 1;}

.upload-area .uploaded-file__icon-container {height: 0; opacity: 0; visibility: hidden;}

.upload-area .file-details .file-details__title {margin-bottom: 10px;}
.upload-area .file-details .uploaded-file__info{width: 100%; height: 5px; background-color: #E1E1E1; position: relative;}
.upload-area .file-details .uploaded-file__info .uploaded-file__name,
 .upload-area .file-details .uploaded-file__info .uploaded-file__counter{ height: 0; opacity: 0; visibility: hidden; }
.upload-area .uploaded-file__progress {width: 100%; height: 5px; background-color: #232529; margin: 0; position: absolute; top: 0; left: 0;}
.upload-area .uploaded-file__info--active .uploaded-file__progress{animation: progressMove 800ms ease-in-out; animation-delay: 600ms;}

@keyframes progressMove {
  from {
    width: 0%;
    background-color: transparent;
  }

  to {
    width: 100%;
  }
}

/* supply chain slider */
.chain-slider-section .title-block h2{font-size: 20px;}
.chain-slider-section .supply-chain-slider {padding-bottom: 15px; border-bottom: 1px solid #F3F3F3; margin-bottom: 20px;}
.chain-slider-section .item-box {width: 100%; min-height: 91px; background-color: #F3F3F3; padding: 15px 45px 15px 15px; border: 1px solid transparent; cursor: pointer;}
.chain-slider-section .item-box:hover {border: 1px solid #232529;}
.chain-slider-section .item-box .badge {background: #E1E1E1; font-size: 10px; font-weight: 500; line-height: 18px; color: #51596C; padding: 2px 8px 0; margin: 0 0 5px; display: inline-block; border-radius: 0; }
.chain-slider-section .item-box h6 {font-size: 14px; line-height: 18px; margin: 0;}

.chain-slider-section .owl-stage {margin: 0;}
.chain-slider-section .owl-carousel .owl-stage-outer {margin-bottom: 0;}

.chain-slider-section .owl-theme .owl-nav button{position: absolute; top: calc(100% / 2 - 15px); transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: #fff url('../images/arrow-right.svg') no-repeat center !important; background-size: 6px !important; box-shadow: 0 5px 6px rgba(0, 0, 0, 0.1); border-radius: 50% !important; margin: 0 !important;}
.chain-slider-section .owl-theme .owl-nav button.disabled{opacity: 0; visibility: hidden;}
.chain-slider-section .owl-theme .owl-nav button.owl-prev{left: -12px; transform: translateY(-50%) rotate(-180deg); box-shadow: 0 -5px 6px rgb(0 0 0 / 10%);}
.chain-slider-section .owl-theme .owl-nav button.owl-next {right: -12px;}
.chain-slider-section .owl-theme .owl-nav button span {display: none;}

/* comman-table */
.comman-table .title-block {display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px}
.comman-table .title-block h2 {font-size: 20px; margin: 0;}
.comman-table .right-section {margin:0 0 0 auto; display: flex; justify-content: flex-end; max-width: 50%; width: 100%; }
.comman-table .right-section .btn-upload {background: transparent; border: 0; font-size: 14px; font-weight: 500; color: #1C69EE; cursor: pointer;}
.comman-table .right-section .btn-upload:hover{text-decoration: underline;}
.comman-table .right-section .btn-record {max-width: 135px; width: 100%; height: 35px; line-height: 35px; margin-left: 15px; padding: 0 10px;}
.comman-table .right-section .btn-export {background: #232529; max-width: 35px; width: 100%; height: 35px; line-height: 35px; margin-left: 10px; padding: 0;}
.comman-table .right-section .btn-export:hover{background: #5d5e60;}

.comman-table .custom-table-wrapper {width: 100%;}
/*.comman-table .custom-table-wrapper :where(.dataTables_length, .dataTables_filter){display: none;}*/
.comman-table .custom-table-wrapper .dataTables_info {color: #51596c; font-size: 13px;}
.comman-table .custom-table-wrapper th  {font-weight: 500;}
.comman-table table {width: 100%; border: 1px solid #E4E4EB; margin-bottom: 15px;}
.comman-table table thead{background: #E1E1E1;}
.comman-table table tr:first-child th:first-child{border-top-left-radius: 0;}
.comman-table table tr:first-child th:last-child{border-top-right-radius: 0;}
.comman-table table th,
.comman-table table td{color: #232529; border: 0; border-bottom: 1px solid #E4E4EB; white-space: nowrap;}
.comman-table table td:first-child {text-align: left;}
/*.comman-table table td:last-child{text-align: right;}*/
    .comman-table table td.dataTables_empty:last-child {
        text-align: center;
    }
.comman-table table tr:last-child td {border-bottom: 0;}
.comman-table table tr:nth-child(even) {background: #F8F8F8;}
.comman-table table .table-action a {font-size: 14px; margin-left: 12px; text-decoration: none;}

.comman-table table th img{width: 7px; vertical-align: middle; margin-bottom: 1px; margin-left: 3px;}

.comman-table table th.table-dropdown {position: relative; cursor: pointer;}
.comman-table table th .dropdown-menu{width: 180px; position: absolute; top: 100%; left: 10px; background: #51596C; margin: 0; padding: 7px 10px; display: none;}
.comman-table table th .dropdown-menu li{padding: 0;}
.comman-table table th .dropdown-menu li:before{display: none;}
.comman-table table th .dropdown-menu a{font-size: 12px; font-weight: 300; color: #fff; width: 100%; display: inline-block; position: relative;}

.comman-table table th.table-dropdown.open .dropdown-menu {display: block;}

.comman-table table th .dropdown-submenu > a:after {content: ""; width: 8px; height: 8px; background: url('../images/caret-down.svg') no-repeat center center; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.comman-table table th .dropdown-search input{height: 22px; border-radius: 0; background: #F3F3F3; color: #51596C;}
.comman-table table th .dropdown-search input::-webkit-input-placeholder {color: #51596C;}
.comman-table table th .dropdown-search input:-ms-input-placeholder {color: #51596C;}
.comman-table table th .dropdown-search input::placeholder {color: #51596C;}

.comman-table .table-checkbox{display: block; position: relative; padding-left: 21px; cursor: pointer; font-size: 12px; color: #fff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.comman-table .table-checkbox input{position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.comman-table .table-checkbox .checkmark{position: absolute; top: 48%; left: 0; transform: translateY(-50%); height: 14px; width: 14px; background-color: #eee;}
.comman-table .table-checkbox input:checked ~ .checkmark {background-color: #2196F3;}
.comman-table .table-checkbox input:checked ~ .checkmark:after {content: ""; width: 3px; height: 6px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); margin-left: 4px; margin-top: 2px; display: block;}

.comman-table table .dropdown-menu img {width: 14px; margin-right: 3px;}
.comman-table table .dropdown-submenu .inner-submenu {position: absolute; left: calc(100% + 10px); top: 0; width: 180px; margin: 0; padding: 10px; background: #232529; display: none;}

.comman-table .table-result-section {display: flex; justify-content: space-between; align-items: center;}
.comman-table .entry-section {margin: 0;}
.comman-table .entry-section p{font-size: 13px; color: #51596C; margin-bottom: 0; }
.comman-table .pagination-section{max-width: 50%; width: 100%; margin: 0 0 0 auto; display: flex; justify-content:  flex-end;}
.comman-table .pagination-section .btn-page {max-width: 30px; width: 100%; background: #F3F3F3; display: inline-block; text-align: center; padding: 4px; margin: 0 5px; font-size: 14px; color: #232529; border: 0; text-decoration: none;}
.comman-table .pagination-section button.btn-page{display: inline-flex; align-items: center; justify-content: center; cursor: pointer;}
.comman-table .pagination-section .btn-page:hover,
.comman-table .pagination-section .btn-page.active {background-color: #E1E1E1;}

.dataTables_wrapper table.dataTable.no-footer {border-bottom-color: #F8F8F8;}
.dataTables_wrapper table.dataTable thead th, 
.dataTables_wrapper table.dataTable thead td {
  border-bottom: 0;
}
.dataTables_wrapper thead th, 
.dataTables_wrapper thead td {border-bottom: 0;}
.dataTables_wrapper tr:last-child td:first-child {border-bottom-left-radius: 0;}
.dataTables_wrapper tr:last-child td:last-child {border-bottom-right-radius: 0;}
.dataTables_wrapper .dataTables_paginate .paginate_button {background: #f3f3f3; min-width: 39px; margin-left: 10px;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
  color: #232529 !important;
  background: #e1e1e1;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Self bi popup */
.slef-bi-section {max-width: 420px; width: 100%; padding: 70px 0 30px; text-align: center;}
.slef-bi-section input {height: 40px; background: #F3F3F3;}
.slef-bi-section .form-group {margin-bottom: 15px;}
.slef-bi-section .action {margin-top: 10px;}
.slef-bi-section .btn {height: 50px; font-size: 16px; line-height: 25px; text-transform: uppercase;}

/* common popup design */
.modal .modal-content {padding: 30px; border-radius: 0;}
.modal .modal-title {margin: 0; font-weight: 400;}
.modal .modal-header{width: 100%; padding: 0 0 15px; border-bottom: 1px solid #F3F3F4;}
.modal .btn-close {width: 26px; height: 26px; border-radius: 50%; background: #F3F3F4 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1.1em auto no-repeat; display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; color: #9E9EA6; box-shadow: none; padding: 0; margin: 2px 0 0 auto;}
.modal .modal-body {width: 100%; padding: 25px 0 0;}
.modal .btn {border-radius: 0; margin: 0;}

.modal .modal-footer{width: 100%; justify-content: flex-start; padding: 0; border: 0;}
.modal .modal-footer .btn {margin-left: 10px;}
.modal .modal-footer .btn:first-child {margin-left: 0;}


/* Delete popup design */
.delete-modal-popup .modal-dialog {max-width: 400px; width: 100%; }
.delete-modal-popup .modal-header {border-bottom: 0; justify-content: center;}
.delete-modal-popup .modal-content {padding: 35px 56px;}
.delete-modal-popup .modal-title {font-weight: 500;}

.delete-modal-popup .modal-body {padding: 0;}
.delete-modal-popup .model-text {color: #232529; text-align: center; margin-bottom: 25px;}

.delete-modal-popup .modal-footer {justify-content: center;}
.delete-modal-popup .btn {max-width: 126px;}
.delete-modal-popup .btn.btn-secondary {background-color: #E1E1E1; color: #232529; border: 1px solid transparent; box-shadow: none;} 
.delete-modal-popup .btn.btn-secondary:hover {background-color: #fff; border: 1px solid #E1E1E1;}
.delete-modal-popup .btn:hover {cursor:pointer;}

/* Edit popup design */
.edit-modal-popup .modal-dialog {max-width: 770px; width: 100%;} 
.edit-modal-popup .form-content {margin-bottom: 20px;}
.edit-modal-popup .form-content .form-group {width: 100%; } 
.edit-modal-popup .form-content .form-group input, 
.edit-modal-popup .form-content .form-group select, 
.edit-modal-popup .form-content .form-group textarea {background-color: #F3F3F4; border-radius: 0;}

.edit-modal-popup .form-content .form-group input, 
.edit-modal-popup .form-content .form-group select{height: 40px; }

.edit-modal-popup .form-content .form-group input[type="date"],
.edit-modal-popup .form-content .form-group select {border: none; }

.edit-modal-popup .form-content label{font-size: 14px; line-height: 23px; font-weight: 500; color: #1F2430;}

.edit-modal-popup .form-content .radio-sec, 
.edit-modal-popup .form-content .checkbox-sec {display: flex; flex-wrap: wrap; } 

.edit-modal-popup .form-content .radio-sec .form-group, 
.edit-modal-popup .form-content .checkbox-sec .form-group {margin: 15px 0 0; } 
.edit-modal-popup .form-content .radio-sec .form-group {width: 50%; min-width: 140px; } 
.edit-modal-popup .form-content .checkbox-sec {column-gap: 24px; } 
.edit-modal-popup .form-content .checkbox-sec .form-group {width: 17%; min-width: 100px; }

.edit-modal-popup .cmn-radio, 
.edit-modal-popup .cmn-checkbox {display: flex; align-items: center; } 
.edit-modal-popup .cmn-checkbox input, 
.edit-modal-popup .cmn-radio input {width: 0; height: 0; position: absolute; font-size: 0; } 

.edit-modal-popup .cmn-checkbox label, 
.edit-modal-popup .cmn-radio label {display: inline-block; padding-left: 10px; position: relative; cursor: pointer; margin: 0; font-size: 14px; }

.edit-modal-popup .cmn-radio input[type='radio'], 
.edit-modal-popup .cmn-checkbox input[type="checkbox"]  {background-color: #fff; cursor: pointer; position: relative; transition: all 175ms cubic-bezier(.1, .1, .25, 1); appearance: none; height: 16px; }

.edit-modal-popup .cmn-radio input[type='radio']::before, .cmn-checkbox input[type="checkbox"]::before {position: absolute; content: ''; }

.edit-modal-popup input[type='radio'] {border-radius: 50%; height: 16px; width:16px; }

.edit-modal-popup .cmn-radio input[type='radio']::before {border-radius: 50%; border: 1px solid #232529; height: 100%; left: -1px; top: -1px; width: 100%; }

.edit-modal-popup .cmn-radio input[type="radio"]:checked::after {background-color: #232529; border-radius: 50%; height: 8px; left: 3px; position: absolute; top: 3px; width: 8px; content: ''; }

.edit-modal-popup .cmn-radio input[type="radio"]:checked::before {border: 1px solid #232529; }

.edit-modal-popup .cmn-checkbox input[type="checkbox"] {border: 1px solid #232529; height: 16px; width: 16px; }
.edit-modal-popup .cmn-checkbox input[type="checkbox"]::before {border: solid #fff; border-width: 0 2px 2px 0; height:9px; left: 5px; opacity: 0; top: 1px; transform: rotate(45deg); width: 5px; }

.edit-modal-popup .cmn-checkbox input[type="checkbox"]:checked {background: #232529; border-color: #232529; color: #fff; } 
.edit-modal-popup .cmn-checkbox input[type="checkbox"]:checked::before {opacity: 1; } 

.edit-modal-popup .btn {max-width: 150px;} 
.edit-modal-popup .btn.btn-secondary {background-color: #E1E1E1; color: #232529;  border: 1px solid #E1E1E1;}
.edit-modal-popup .btn.btn-secondary:hover {background-color: #fff;}

.edit-modal-popup input[type="date"] {width: 100%; height: 45px; padding: 13px 15px; font-size:14px; font-weight: 400; font-family: 'Poppins', sans-serif; border: 0; border-radius: 5px; position: relative;} 
.edit-modal-popup input[type="date"]::-webkit-calendar-picker-indicator {position: absolute; top: 0; right: 0; width: 100%; height: 100%; padding: 0; color: transparent; background: transparent; }

.edit-modal-popup .icon-calendar {position: relative;}
.edit-modal-popup .icon-calendar img{position: absolute; top: 50%; right: 25px; transform: translateY(-50%); pointer-events: none;}

/* upload popup */
.upload-modal-popup .modal-dialog {max-width: 790px; width: 100%;}
.upload-modal-popup .modal-body {width: 100%; padding: 0;}
.upload-modal-popup .upload-area {padding: 0;}
.upload-modal-popup .drop-zoon {background: #F3F3F3; border: 2px dashed #232529; padding: 65px 20px; text-align: center;}
.upload-modal-popup .drop-zoon__icon {display: inline-block; margin-bottom: 25px;}
.upload-modal-popup .drop-zoon__paragraph {font-size: 18px; line-height: 27px; color: #232529; margin-bottom: 14px;}
.upload-modal-popup .drop-zooon_subtitle {font-size: 14px; color: #51596C;}
.upload-modal-popup .drop-zoon .drop-zoon__file-input {display: none;}
.upload-modal-popup {
    z-index: 100000000;
}

/* Bulk upload popup */
.bulk-upload-modal-popup .modal-dialog {max-width: 790px; width: 100%;}
.bulk-upload-modal-popup .modal-body {width: 100%; padding: 0;}
.bulk-upload-modal-popup .upload-area {padding: 0;}
.bulk-upload-modal-popup .drop-zoon {background: #F3F3F3; border: 2px dashed #232529; padding: 65px 20px; text-align: center;}
.bulk-upload-modal-popup .drop-zoon__icon {display: inline-block; margin-bottom: 25px;}
.bulk-upload-modal-popup .drop-zoon__paragraph {font-size: 18px; line-height: 27px; color: #232529; margin-bottom: 14px;}
.bulk-upload-modal-popup .drop-zooon_subtitle {font-size: 14px; color: #51596C;}
.bulk-upload-modal-popup .drop-zoon .drop-zoon__file-input {display: none;}


.dataTables_length {
    max-width: 80px;
    width: 100%;
}

#importDataTable_processing {
    z-index: 100;
}

body #importDataTable_processing {
    background-color:black;
}

.disabled#uploadFileConfirmBtn {
    background-color:gray;
}

/*Loading effect*/
.loading {
    /*font-size: 30px;*/
}

    .loading:after {
        content: "\2026";
        overflow: hidden;
        display: inline-block;
        vertical-align: bottom;
        animation: ellipsis-dot 1s infinite;
        animation-fill-mode: fowards;
        width: 1.25em;
    }

@keyframes ellipsis-dot {
    50% {
        width: 0em;
    }

    100% {
        width: 1.25em;
    }
}


#tableTopicVersionList_wrapper .dataTables_scrollHeadInner {
    width: 100% !important;
}

#tableTopicVersionList_wrapper .table.dataTable.no-footer {
    width: 100% !important;
}