/*!
Project Name: HTML & CSS Test
URL: https://www.imensosoftware.com
Author: Imenso Software
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Common
# Page
# Responsive
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Common
--------------------------------------------------------------*/
:root {
  --primaryClr: #d6a95f;
  ;
  --siteDark: #212121;
  --secondaryClr: #090A0E;
  --mutedClr: #797979;
  --lightClr: #f0f0f0;
  --siteYellow: #CBA135;
  --sitePink: #FDD0E2;
  --siteRed: #ff0000;
}
@font-face {
  src: url(fonts/Louis-Bold.ttf);
  font-family: 'Louis George Bold';
  font-style: normal;
  font-weight: 600;
}
@font-face {
  src: url(fonts/Louis.ttf);
  font-family: 'Louis George';
  font-style: normal;
  font-weight: 400;
}
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap');
body {
  margin: 0;
  padding: 0;
  /*font-family: 'Sen', sans-serif;*/
  font-family: 'Louis George';
  font-size: 16px;
}
.burger {
  padding: 75px 0;
}
.ground {
  margin-left: 80px;
}
a {
  color: #112949;
}
a:hover {
  text-decoration: none;
}
.sml-btn-group .btn {
  font-size: 12px;
}
.form-control {
  border-color: #AAA;
}
.btn-primary {
  background-color: #31A1C5;
  border-color: #31A1C5;
}
.btn-default {
  background-color: #EAEAEA;
  border-color: #EAEAEA;
}
.btn-add{
  color: #fff !important;
  background-color: #ED8337;
  border-color: #ED8337; padding: .1rem .3rem .1rem .2rem !important;
}
.btn-add:hover{
  background-color: #d26e26;
  border-color: #d26e26;
}
.btn-add.btn-sm{ border-radius: 20px; font-size: 12px;}
.btn-add span{
  background: #fff; width: 18px; height: 18px; display: inline-block; border-radius: 100%; line-height: 16px; margin-right: 3px; vertical-align: middle;
}
.btn-add span img{ width: 10px; }
.text {
  opacity: 0.8;
}
.container {
  max-width: 1100px !important;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  font-family: 'Louis George Bold';
}
.btn-bordered {
  background-color: transparent;
}
.btn {
  padding: .375rem 1.5rem
}
.btn-sm {
  padding: .12rem .75rem
}
/*Scroll*/
/* width */
::-webkit-scrollbar {
  width: 6px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #E8E8E8;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #31A1C5; border-radius: 6px
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #112949;
}
/*======================== Login====================================*/
.dropdown-menu {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.navbar-nav {
  align-items: center;
}
/*--------------------------------------------------------------
# Translators
--------------------------------------------------------------*/
.menubar {
  width: 70px;
  background: linear-gradient(to bottom, #112949, #3cc3f2);
  height: 100%;
  position: fixed;
  text-align: center;
  top: 0;
  bottom: 0;
  z-index: 99;
}
.bg-dark {
  background: linear-gradient(to right, #112949, #3cc3f2) !important;
}
.navbar {
  padding: 0.25em 0em;
}
.menubar-list {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: fixed;
  width: 70px;
  left: 0;
  top: 0;
  bottom: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.menubar-list li {
  display: inline-block;
  margin-bottom: 20px;
}
.menubar-list li span {
  text-indent: -9999px;
  display: inline-block;
}
.panels {
  display: flex;
  height: calc(100vh - 0px);
}
.lpanel {
  height: 100%;
  width: 70px;
  background: linear-gradient(to bottom, #112949, #3cc3f2) !important;
      position: relative;
    z-index: 1;
}
.lpanel .topper {
  background-color: #f0f5f7;
}
.menubar-list .brand {
  margin-bottom: 15px;
  margin-top: 10px;
}
.menu-link {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  color: #FFF;
  transition: 0.3s all;
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.active .menu-link {
  background-color: rgba(255, 255, 255, 0.1);
}
.menu-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #FFF;
}
.userlog {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  background-color: #FFF;
  position: absolute !important;
  bottom: 10px;
}
.userlog img {
  border-radius: 100%;
}
.userlog .dropdown-toggle::after {
  display: none;
}
.navbar .nav-link {
  padding-left: 15px;
  padding-right: 15px;
  color: #FFF !important;
  font-size: 18px;
}
.navbar-brand {
  margin-right: 0;
}
.notify {
  color: #FFF;
}
.text-white {
  color: #FFF;
}
.bg-dark .dropdown-toggle::after {
  border-top-color: #FFF;
}
.mpanel {
  width: 400px;
  border-left: 1px solid #DDD;
  border-right: 1px solid #DDD;
  height: 100%;
  background-color: #FFF;
}
.sidebar-search {
  padding: 5px 0;
  width: 100%;
}
.search-inp {
  width: 100%;
  padding: 4px 15px;
  margin: 6px 0;
  border-radius: 30px;
  border-color: transparent;
  background-color: rgba(255,255,255,0.8);
  /*background-image: url(../images/search_icon.png);
  background-repeat: no-repeat;
  background-position: 10px center;
  padding-left: 30px;*/
  border:1px solid #DDD;
}
.nav-item .search-inp:focus {
  background-color: #FFF;
}
.topper {
  height: 50px;
  justify-content: space-between;
  align-items: center;
  display: flex;
  padding: 0 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #FFF;
  position: relative;
}
.topper .dropdown-item {
  font-size: 0.8em;
}
.btn-orange {
  background-color: #ea7b2c;
  border-color: #ea7b2c;
  padding: 5px 10px;
  color: #FFF;
  font-size: 0.8em;
}
.rpanel {
  position: absolute;
  left: 470px;
  right: 0;
  top: 0;
  background: #F0F4F7;
  min-height: 100vh;
}
.no-record {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 100%);
  text-align: center;
  opacity: 0.6;
}
.rpanel-wrapper {
  height: calc(100vh - 107px);
  overflow-y: auto;
  padding: 2rem 0px;
}
.rpanel-wrapper .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-actions {
  padding: 0;
  margin: 0;
  list-style: none;
}
.nav-actions .btn{ margin-left: 15px }
.nav-actions .btn:first-child{ margin-left: 0 }
.nav-actions li {
  display: inline-block;
  margin: 0 10px;
  font-size: 0.85em;
  padding: 5px 10px;
  border-radius: 4px;
  transition: 0.3s all;
}
.nav-actions li i {
  display: inline-block;
  margin-right: 10px;
}
.nav-actions li:hover {
  background-color: #f0f4f7;
}
.doc-title{ margin-left:20px  } 
.doc-title img{ margin-right:10px  }
.doc-title h4{ font-weight: 600; margin-bottom: 0; font-size: 18px }
.doc-title .text-muted{ font-size: 13px }
.lpanel .topper {
  background-color: transparent;
  color: #FFF;
}
.mpanel .section{ max-height: calc(100% - 50px); overflow: auto; }
.m-section{ position: relative; border-bottom: 1px solid #ddd;}
.m-section:last-child{ border-bottom: 0 }
.part{ position: absolute; left: 0; bottom: 20px; padding:0 8px; height: 24px; line-height: 24px; background: #e6e6e6; border-radius: 0 20px 20px 0; font-size: 12px; font-weight: 600 }
.m-section p{ font-size: 11px;}
.m-section p:last-child{ margin-bottom: 0 }
.doc-details{ background: #fff; border-radius: 10px; padding: 20px; display: inline-block; width: 100%; position: relative; }
.fix-right{ position: absolute; right: 20px; top:-13px }
.doc-part-list{ margin-left: 40px }
.doc-part{ border-radius: 10px; background: #EBF5F9; position: relative; margin-right: 20px }
.doc-part a{ display: inline-block; width: 16px; height: 16px; text-align: center; line-height: 12px; border-radius: 100%; background: #F00; position: absolute; right: -8px; top: -8px}
.doc-part a img{ width: 12px; }
.doc-part h6{ background: #CCE1E9; padding: 5px 10px; border-radius: 10px 10px 0 0 ; }
.doc-part .cnt{ padding: 10px }
.segment-table{ background: #fff; border-radius: 10px; overflow: hidden; }
.segment-table .table thead th{ border-bottom: none !important; border-top: none !important }
.segment-table thead { background: #CDE1E9 }
.segment-table tbody tr{ background: #f8f8f8;  position: relative; }
.segment-table .table tbody{ padding: 5px }
.segment-table .table tbody td{ border-bottom:  8px solid #FFF !important; border-top:  8px solid #FFF !important;}
.segment-table .table tbody td:first-child{border-left: 12px solid #fff !important}
.segment-table .table tbody td:last-child{border-right: 12px solid #fff !important}
.segment-table .table tbody tr:last-child td{border-bottom: none !important;}
.delet-row{ display: inline-block; width: 24px; height: 24px; background-image: url(../images/delet.png);
  background-repeat: no-repeat; background-size: 16px; background-position: center; }
/*.segment-table tbody tr:after{ content: ''; background: #fc0; display: inline-block; position: relative; bottom: 0; left: 0; width: 100%; height: 5px }*/
.segment-table tbody tr:hover{ background: #feede3 }
.segment-table tbody tr:hover .delet-row{ background-image: url(../images/delet-red.png); }
.container-checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  width: 30px;
  margin:0 auto;
  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;
  height: 0;
  width: 0;
}
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee; border-radius: 5px; border: 2px solid #EC7B2B;
}
/* On mouse-over, add a grey background color */
.container-checkbox:hover input ~ .checkmark {
  background-color: #fff;
}
/* When the checkbox is checked, add a blue background */
.container-checkbox input:checked ~ .checkmark {
  background-color:#EC7B2B;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
.container-checkbox input:checked ~ .checkmark:after {
  display: block;
}
/* Style the checkmark/indicator */
.container-checkbox .checkmark:after {
  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);
}
.input-custom{ background-color: #EBF5F9; width: 100%; padding: 5px 5px 5px 10px; position: relative; border-radius: 20px}
.input-custom:after{ content:''; position: absolute; right: 5px; top: 0; width: 16px; height: 100%; background-color: #EBF5F9; background-image: url(../images/sorting.png);
  background-repeat: no-repeat; background-size: 10px; background-position: 95% center;  }
.input-custom input, .input-custom select{ background: none; border: none; outline: none; box-shadow: none; width: 100% }
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0; }
/* Firefox */
input[type=number] {-moz-appearance: textfield; }
.animate, .mpanel, .rpanel{ transition: .5s ease all; -webkit-transition: .5s ease all; -moz-transition: .5s ease all; -o-transition: .5s ease all; -ms-transition: .5s ease all; }
.mpanel{ position: relative; }
/*.mpanel.hide-panel{ left: -400px; }*/
.rpanel.spread{left: 70px;}