@charset "UTF-8";
/*-----------------------------------------------------------------------------------

    Template Name: Poco Admin
    Template URI: themes.pixelstrap.com/Poco
    Description: This is Admin theme
    Author: Pixelstrap
    Author URI: https://themeforest.net/user/pixelstrap

-----------------------------------------------------------------------------------

01. General CSS
  02. Generic CSS
  03. Card CSS
  04. Loader CSS
  05. Header CSS
  06. Button CSS
  07. Color CSS
  08. GRID CSS
  09. Error-page  CSS
  10. Icon css
  11. Form Builder 1 CSS
  12. Form Builder 2 CSS
   13. Email Application  CSS
   14. Chat CSS
   15. Alert CSS
   16. Popover CSS
   17. List CSS
   18. Switch  CSS
   19. Mega option CSS
   20. Touchspin  CSS
    21. Select 2 CSS
	22. User profile css
	23. Progress CSS
	24. According CSS
	25. Authentication CSS
	26. Form CSS
	27. Coming Soon CSS
	28. Radio CSS
	29. Form Input CSS
	30. Data-table CSS
	 31. JS datagrid CSS
	 32. Page CSS
	 33. Ecommerce  CSS
	 34. Pricing CSS
	 35. Form builder css
	 36. NAV CSS
	 37. Dropdown CSS
	 38. Landing CSS
	 39. Table  CSS
	 40. Alertbox-call-out CSS
	 41. Chart CSS
	 42. Timeline CSS
	 43. Timeline 2 CSS
	 44. Tabs CSS
	 45. Gallery CSS
	 46. Blog CSS
	 47. Footer CSS
	 48. Form Wizard
	 49. Badge CSS
	 50. Tree CSS
	 51. Search CSS
	 52. Datepicker CSS
	 53. Dashboard CSS
	 54. Tour  CSS
	 55. theme layout CSS
	 56. Ribbon CSS
	 57. breadcrumb CSS
	 58. Steps  CSS
	 59. Customizer CSS
	 60. RTL CSS
	 61. base_inputs CSS
	 62. Responsive css
	 63. Box-layout css
	 64. Button Builder css
	 65. Button Builder color picker CSS
	 66. FullCalendar CSS
	 67. Dashboard Ecommerce
	 69. Dashboard Crypto
	 72. Document css
	 73. Faq CSS
	 74. Job CSS
	 75. knowledgebase CSS
	 76. internationalization CSS
	 77. Learning CSS
	 78. Order History css
	 79. Print CSS
	 80. Sidebar CSS
	 81. social app
	 82. avatars
	 83. Bookmark
 */
/**=====================
     01. General CSS Start
==========================**/
html {
  scroll-behavior: smooth; }

body {
  background-color: rgba(246, 246, 246, 0.6);
  font-size: 14px;
  overflow-x: hidden;
  color: #242934; }

ul {
  padding-left: 0px;
  list-style-type: none;
  margin-bottom: 0;
  padding-right: 0px; }

* a {
  color: #0288d1; }

*.btn:focus {
  box-shadow: none !important; }

p {
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.7px; }

code {
  color: #0288d1 !important;
  background-color: #f8f5fd;
  padding: 3px;
  margin: 0 3px;
  border-radius: 2px; }

blockquote {
  border-left: 4px solid #e8ebf2;
  padding: 15px; }

blockquote.text-center {
  border: none;
  padding: 15px; }

blockquote.text-right {
  border-left: none;
  border-right: 4px solid #e8ebf2;
  padding: 15px; }

.disabled {
  cursor: not-allowed;
  opacity: 0.5; }

svg {
  vertical-align: baseline; }

input:focus {
  outline-color: transparent; }

pre {
  background-color: rgba(2, 136, 209, 0.05);
  padding: 20px 0; }

a:hover {
  text-decoration: none;
  color: #0288d1; }

.modal-dialog .modal-content .modal-body p a {
  margin-right: 0; }

.alert-theme button {
  top: 33px !important;
  right: 35px !important;
  color: #0288d1; }
.alert-theme img {
  margin-right: 10px; }
.alert-theme span + span + span {
  padding: 15px;
  background-color: #b5e4fe;
  box-shadow: 2px 12px 20px -15px rgba(2, 136, 209, 0.3);
  border: 1px solid rgba(2, 136, 209, 0.02);
  border-radius: 15px;
  color: rgba(2, 136, 209, 0.5); }
  .alert-theme span + span + span > strong {
    color: rgba(2, 136, 209, 0.9);
    padding-right: 2px; }

.CodeMirror {
  top: 0 !important; }

.language {
  position: relative; }

/**=====================
      01. General CSS Ends
==========================**/
/**=====================
     02. Generic CSS Start
==========================**/
/*====== Padding css starts ======*/
.p-0 {
  padding: 0px; }

.p-20 {
  padding: 20px; }

.p-30 {
  padding: 30px; }

.p-40 {
  padding: 40px; }

/*====== Padding css ends ======*/
/*====== Padding-left css starts ======*/
.p-l-0 {
  padding-left: 0px; }

.p-l-5 {
  padding-left: 5px; }

/*====== Padding-left css ends ======*/
/*====== Padding-top css starts ======*/
.p-t-0 {
  padding-top: 0px !important; }

.p-t-5 {
  padding-top: 5px !important; }

.p-t-10 {
  padding-top: 10px !important; }

.p-t-20 {
  padding-top: 20px !important; }

.p-t-40 {
  padding-top: 40px !important; }

/*====== Padding-top css ends ======*/
/*====== Padding-bottom css starts ======*/
.p-b-0 {
  padding-bottom: 0px !important; }

.p-b-20 {
  padding-bottom: 20px !important; }

.p-b-30 {
  padding-bottom: 30px !important; }

.p-b-40 {
  padding-bottom: 40px !important; }

/*====== Padding-bottom css ends ======*/
/*====== Padding-right css starts ======*/

.p-r-5 {
  padding-right: 5px; }

/*====== Padding-right css ends ======*/
/*====== Margin css starts ======*/
.m-0 {
  margin: 0px !important; }

/*====== Margin css ends ======*/
/*====== Margin-top css starts ======*/
.m-t-0 {
  margin-top: 0px !important; }

.m-t-5 {
  margin-top: 5px !important; }

.m-t-10 {
  margin-top: 10px !important; }

.m-t-15 {
  margin-top: 15px !important; }

.m-t-20 {
  margin-top: 20px !important; }

.m-t-40 {
  margin-top: 40px !important; }

/*====== Margin-top css ends ======*/
/*====== Margin-Bottom css starts ======*/
.m-b-0 {
  margin-bottom: 0px !important; }

.m-b-5 {
  margin-bottom: 5px !important; }

.m-b-10 {
  margin-bottom: 10px !important; }

.m-b-20 {
  margin-bottom: 20px !important; }

.m-b-30 {
  margin-bottom: 30px !important; }

/*====== Margin-Bottom css ends ======*/
/*====== Margin-left css starts ======*/
.m-l-0 {
  margin-left: 0px !important; }

.m-l-5 {
  margin-left: 5px !important; }

.m-l-10 {
  margin-left: 10px !important; }

.m-l-15 {
  margin-left: 15px !important; }

.m-l-20 {
  margin-left: 20px !important; }

.m-l-30 {
  margin-left: 30px !important; }

.m-l-40 {
  margin-left: 40px !important; }

/*====== Margin-left css ends ======*/
/*====== Margin-right css starts ======*/
.m-r-0 {
  margin-right: 0px; }

.m-r-5 {
  margin-right: 5px; }

.m-r-10 {
  margin-right: 10px; }

.m-r-20 {
  margin-right: 20px; }

/*====== Margin-right css ends ======*/
/*====== Border-radius css starts ======*/

.b-r-4 {
  border-radius: 4px !important; }

.b-r-8 {
  border-radius: 8px !important; }

/*====== Border-radius css ends ======*/
/*====== Font-size css starts ======*/
.f-12 {
  font-size: 12px; }

.f-14 {
  font-size: 14px; }

.f-16 {
  font-size: 16px; }

.f-18 {
  font-size: 18px; }

.f-20 {
  font-size: 20px; }

.f-24 {
  font-size: 24px; }

/*====== Font-size css ends ======*/
/*====== Font-weight css starts ======*/
.f-w-100 {
  font-weight: 100; }

.f-w-600 {
  font-weight: 600; }

.f-w-700 {
  font-weight: 700; }

.f-w-900 {
  font-weight: 900; }

/*====== Font-weight css ends ======*/
/*====== Font-style css starts ======*/

/*====== Font-style css ends ======*/
/*====== Text-Decoration css starts ======*/

/*====== Text-Decoration css ends ======*/
/*====== Vertical-Align css starts ======*/

.sub {
  vertical-align: sub; }

.super {
  vertical-align: super; }

.top {
  vertical-align: top; }

.middle {
  vertical-align: middle; }

.bottom {
  vertical-align: bottom; }

.text-bottom {
  vertical-align: text-bottom; }

.initial {
  vertical-align: initial; }

.inherit {
  vertical-align: inherit; }

/*====== Vertical-Align css ends ======*/
/*====== Position css starts ======*/

/*====== Position css ends ======*/
/*====== Float css starts ======*/

/*====== Float css ends ======*/
/*====== Overflow css starts ======*/
.o-hidden {
  overflow: hidden; }

/*====== Overflow css ends ======*/
/*====== Image-sizes css starts ======*/

.img-40 {
  width: 40px !important; }

/*====== Image-sizes css ends ======*/
/*======= Text css starts ===========*/
.font-primary {
  color: #0288d1 !important; }

.font-secondary {
  color: #26c6da !important; }

.font-warning {
  color: #ffc717 !important; }

/*======= Text css ends ===========*/
/*======= Label-color css starts  ======= */
.label {
  border-radius: 2px;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  margin-bottom: 0;
  text-transform: capitalize; }

.label-primary {
  background-color: #0288d1; }

.label-success {
  background-color: #80cf00; }

.label-danger {
  background-color: #fd517d; }

.label-info {
  background-color: #06b5dd; }

/*======= Label-color css ends  ======= */
/*======= Badge-color css starts  ======= */
.badge-primary {
  background-color: #0288d1;
  color: #fff; }

.badge-secondary {
  background-color: #26c6da;
  color: #fff; }

.badge-success {
  background-color: #80cf00;
  color: #fff; }

.badge-danger {
  background-color: #fd517d;
  color: #fff; }

.badge-info {
  background-color: #06b5dd;
  color: #fff; }

.badge-dark {
  background-color: #2c323f;
  color: #fff; }

.badge-warning {
  background-color: #ffc717;
  color: #fff; }

/*======= Badge-color css end  ======= */
/*======= Background-color css starts  ======= */
.bg-primary {
  background-color: #0288d1 !important;
  color: #fff; }

.bg-secondary {
  background-color: #26c6da !important;
  color: #fff; }

.bg-success {
  background-color: #80cf00 !important;
  color: #fff; }

.bg-danger {
  background-color: #fd517d !important;
  color: #fff; }

.bg-info {
  background-color: #06b5dd !important;
  color: #fff; }

.bg-light {
  background-color: #f8f5fd !important;
  color: #fff; }

.bg-dark {
  background-color: #2c323f !important;
  color: #fff; }

.bg-warning {
  background-color: #ffc717 !important;
  color: #fff; }

/*======= Background-color css end  ======= */
/*======= Font-color css starts  ======= */
.txt-primary {
  color: #0288d1 !important; }

.txt-secondary {
  color: #26c6da !important; }

.txt-success {
  color: #80cf00 !important; }

.txt-danger {
  color: #fd517d !important; }

.txt-info {
  color: #06b5dd !important; }

.txt-dark {
  color: #2c323f !important; }

.txt-warning {
  color: #ffc717 !important; }

.txt-twitter {
  color: #6fa2d8 !important; }

.txt-white {
  color: #fff !important; }

/*======= Font-color css end  ======= */
/*======= Button-color css starts  ======= */
.btn-primary {
  background-color: #0288d1 !important;
  border-color: #0288d1 !important; }
  .btn-primary.disabled {
    background-color: #0288d1 !important;
    border-color: #0288d1 !important; }
  .btn-primary:disabled {
    background-color: #0288d1 !important;
    border-color: #0288d1 !important; }
  .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
    background-color: #02679e !important;
    border-color: #02679e !important; }
  .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem #6ecbfe; }

.btn-secondary {
  background-color: #26c6da !important;
  border-color: #26c6da !important; }
  .btn-secondary.disabled {
    background-color: #26c6da !important;
    border-color: #26c6da !important; }
  .btn-secondary:disabled {
    background-color: #26c6da !important;
    border-color: #26c6da !important; }
  .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active {
    background-color: #1e9faf !important;
    border-color: #1e9faf !important; }
  .btn-secondary:focus {
    box-shadow: 0 0 0 0.2rem #a9e8f0; }

.btn-success {
  background-color: #80cf00 !important;
  border-color: #80cf00 !important; }
  .btn-success.disabled {
    background-color: #80cf00 !important;
    border-color: #80cf00 !important; }
  .btn-success:disabled {
    background-color: #80cf00 !important;
    border-color: #80cf00 !important; }
  .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active {
    background-color: #609c00 !important;
    border-color: #609c00 !important; }
  .btn-success:focus {
    box-shadow: 0 0 0 0.2rem #c6ff69; }

.btn-danger {
  background-color: #fd517d !important;
  border-color: #fd517d !important; }
  .btn-danger.disabled {
    background-color: #fd517d !important;
    border-color: #fd517d !important; }
  .btn-danger:disabled {
    background-color: #fd517d !important;
    border-color: #fd517d !important; }
  .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active {
    background-color: #fc1f57 !important;
    border-color: #fc1f57 !important; }
  .btn-danger:focus {
    box-shadow: 0 0 0 0.2rem #ffe8ee; }

.btn-info {
  background-color: #06b5dd !important;
  border-color: #06b5dd !important; }
  .btn-info.disabled {
    background-color: #06b5dd !important;
    border-color: #06b5dd !important; }
  .btn-info:disabled {
    background-color: #06b5dd !important;
    border-color: #06b5dd !important; }
  .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active {
    background-color: #058cab !important;
    border-color: #058cab !important; }
  .btn-info:focus {
    box-shadow: 0 0 0 0.2rem #80e5fc; }

.btn-light {
  background-color: #f8f5fd !important;
  border-color: #f8f5fd !important; }
  .btn-light.disabled {
    background-color: #f8f5fd !important;
    border-color: #f8f5fd !important; }
  .btn-light:disabled {
    background-color: #f8f5fd !important;
    border-color: #f8f5fd !important; }
  .btn-light:hover, .btn-light:focus, .btn-light:active, .btn-light.active {
    background-color: #dacbf5 !important;
    border-color: #dacbf5 !important; }
  .btn-light:focus {
    box-shadow: 0 0 0 0.2rem white; }

.btn-dark {
  background-color: #2c323f !important;
  border-color: #2c323f !important; }
  .btn-dark.disabled {
    background-color: #2c323f !important;
    border-color: #2c323f !important; }
  .btn-dark:disabled {
    background-color: #2c323f !important;
    border-color: #2c323f !important; }
  .btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active {
    background-color: #171a21 !important;
    border-color: #171a21 !important; }
  .btn-dark:focus {
    box-shadow: 0 0 0 0.2rem #6c7a98; }

.btn-warning {
  background-color: #ffc717 !important;
  border-color: #ffc717 !important; }
  .btn-warning.disabled {
    background-color: #ffc717 !important;
    border-color: #ffc717 !important; }
  .btn-warning:disabled {
    background-color: #ffc717 !important;
    border-color: #ffc717 !important; }
  .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active {
    background-color: #e3ac00 !important;
    border-color: #e3ac00 !important; }
  .btn-warning:focus {
    box-shadow: 0 0 0 0.2rem #ffecb0; }

/*======= Button-color css ends  ======= */

.btn-outline-success-2x {
  border-width: 2px;
  border-color: #80cf00;
  color: #80cf00;
  background-color: transparent; }
  .btn-outline-success-2x:hover, .btn-outline-success-2x:focus, .btn-outline-success-2x:active, .btn-outline-success-2x.active {
    color: white;
    background-color: #609c00 !important;
    border-color: #609c00 !important;
    box-shadow: none; }

.btn-outline-info-2x {
  border-width: 2px;
  border-color: #06b5dd;
  color: #06b5dd;
  background-color: transparent; }
  .btn-outline-info-2x:hover, .btn-outline-info-2x:focus, .btn-outline-info-2x:active, .btn-outline-info-2x.active {
    color: white;
    background-color: #058cab !important;
    border-color: #058cab !important;
    box-shadow: none; }

.btn-primary:not([disabled]):not(.disabled).active {
  background-color: #02679e;
  border-color: #02679e;
  box-shadow: none !important; }
  .btn-primary:not([disabled]):not(.disabled).active:hover, .btn-primary:not([disabled]):not(.disabled).active:focus, .btn-primary:not([disabled]):not(.disabled).active:active, .btn-primary:not([disabled]):not(.disabled).active.active {
    color: white;
    background-color: #02679e;
    border-color: #02679e; }

.btn-secondary:not([disabled]):not(.disabled).active {
  background-color: #1e9faf;
  border-color: #1e9faf;
  box-shadow: none !important; }
  .btn-secondary:not([disabled]):not(.disabled).active:hover, .btn-secondary:not([disabled]):not(.disabled).active:focus, .btn-secondary:not([disabled]):not(.disabled).active:active, .btn-secondary:not([disabled]):not(.disabled).active.active {
    color: white;
    background-color: #1e9faf;
    border-color: #1e9faf; }

.btn-success:not([disabled]):not(.disabled).active {
  background-color: #609c00;
  border-color: #609c00;
  box-shadow: none !important; }
  .btn-success:not([disabled]):not(.disabled).active:hover, .btn-success:not([disabled]):not(.disabled).active:focus, .btn-success:not([disabled]):not(.disabled).active:active, .btn-success:not([disabled]):not(.disabled).active.active {
    color: white;
    background-color: #609c00;
    border-color: #609c00; }

.btn-danger:not([disabled]):not(.disabled).active {
  background-color: #fc1f57;
  border-color: #fc1f57;
  box-shadow: none !important; }
  .btn-danger:not([disabled]):not(.disabled).active:hover, .btn-danger:not([disabled]):not(.disabled).active:focus, .btn-danger:not([disabled]):not(.disabled).active:active, .btn-danger:not([disabled]):not(.disabled).active.active {
    color: white;
    background-color: #fc1f57;
    border-color: #fc1f57; }

.btn-info:not([disabled]):not(.disabled).active {
  background-color: #058cab;
  border-color: #058cab;
  box-shadow: none !important; }
  .btn-info:not([disabled]):not(.disabled).active:hover, .btn-info:not([disabled]):not(.disabled).active:focus, .btn-info:not([disabled]):not(.disabled).active:active, .btn-info:not([disabled]):not(.disabled).active.active {
    color: white;
    background-color: #058cab;
    border-color: #058cab; }

.btn-light:not([disabled]):not(.disabled).active {
  background-color: #dacbf5;
  border-color: #dacbf5;
  box-shadow: none !important; }
  .btn-light:not([disabled]):not(.disabled).active:hover, .btn-light:not([disabled]):not(.disabled).active:focus, .btn-light:not([disabled]):not(.disabled).active:active, .btn-light:not([disabled]):not(.disabled).active.active {
    color: white;
    background-color: #dacbf5;
    border-color: #dacbf5;
    color: #0288d1; }

.btn-dark:not([disabled]):not(.disabled).active {
  background-color: #171a21;
  border-color: #171a21;
  box-shadow: none !important; }
  .btn-dark:not([disabled]):not(.disabled).active:hover, .btn-dark:not([disabled]):not(.disabled).active:focus, .btn-dark:not([disabled]):not(.disabled).active:active, .btn-dark:not([disabled]):not(.disabled).active.active {
    color: white;
    background-color: #171a21;
    border-color: #171a21; }

.btn-warning:not([disabled]):not(.disabled).active {
  background-color: #e3ac00;
  border-color: #e3ac00;
  box-shadow: none !important; }
  .btn-warning:not([disabled]):not(.disabled).active:hover, .btn-warning:not([disabled]):not(.disabled).active:focus, .btn-warning:not([disabled]):not(.disabled).active:active, .btn-warning:not([disabled]):not(.disabled).active.active {
    color: white;
    background-color: #e3ac00;
    border-color: #e3ac00; }

.btn-outline-success-2x:not([disabled]):not(.disabled).active {
  background-color: #80cf00;
  border-color: #80cf00;
  box-shadow: none !important;
  color: white; }
  .btn-outline-success-2x:not([disabled]):not(.disabled).active:hover, .btn-outline-success-2x:not([disabled]):not(.disabled).active:focus, .btn-outline-success-2x:not([disabled]):not(.disabled).active:active, .btn-outline-success-2x:not([disabled]):not(.disabled).active.active {
    color: white;
    box-shadow: none !important;
    background-color: #609c00 !important;
    border-color: #609c00 !important; }

.btn-outline-info-2x:not([disabled]):not(.disabled).active {
  background-color: #06b5dd;
  border-color: #06b5dd;
  box-shadow: none !important;
  color: white; }
  .btn-outline-info-2x:not([disabled]):not(.disabled).active:hover, .btn-outline-info-2x:not([disabled]):not(.disabled).active:focus, .btn-outline-info-2x:not([disabled]):not(.disabled).active:active, .btn-outline-info-2x:not([disabled]):not(.disabled).active.active {
    color: white;
    box-shadow: none !important;
    background-color: #058cab !important;
    border-color: #058cab !important; }

/*======= Table-Border-Bottom-color css starts  ======= */
table thead .border-bottom-primary th,
table tbody .border-bottom-primary th,
table tbody .border-bottom-primary td {
  border-bottom: 1px solid #0288d1; }

table thead .border-bottom-secondary th,
table tbody .border-bottom-secondary th,
table tbody .border-bottom-secondary td {
  border-bottom: 1px solid #26c6da; }

/*======= Table-Border-Bottom-color css ends  ======= */
/*======= Table styling css starts  ======= */

/*======= Table styling css ends  ======= */
/*======= All-Borders-color css starts  ======= */

.b-t-light {
  border-top: 1px solid #f8f5fd !important; }

/*======= All-Borders-color css ends  ======= */
/*====== Border width css starts ======*/

/*====== Border width css ends ======*/

/**====== custom scrollbar css start ======**/
.digits {
  font-family: work-Sans, sans-serif; }

.custom-scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px #e8ebf2; }
.custom-scrollbar::-webkit-scrollbar {
  width: 2px; }
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(2, 136, 209, 0.15); }

/**====== Custom scrollbar css end ======**/
/**====== Animation css Start ======**/
.comment {
  color: #9f9ba5;
  font-style: italic; }

.line {
  color: #2c323f; }

.line pre {
  font-size: 100%; }

/**====== Animation css end ======**/
/**====== list style css Start ======**/

/**====== list style css end ======**/
/**====== Modal style css Start ======**/

/**====== Modal style css end ======**/
/**====== Animation css start ======**/
.options > div {
  color: #898989;
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid;
  margin: 0 8px 8px 0;
  transition: all 0.3s ease;
  border-radius: 15px; }
  .options > div:hover {
    background-color: #0288d1;
    color: #fff;
    transition: all 0.3s ease; }

/**====== Animation css Ends ======**/
.modal-footer {
  flex-wrap: wrap; }

.btn-showcase .modal-footer {
  margin-bottom: -10px; }
  .btn-showcase .modal-footer .btn:last-child {
    margin-right: 0; }

.datepicker {
  z-index: 99; }

/**=====================
     02. Generic CSS Ends
==========================**/
/**=====================
    03.  Card CSS Start
==========================**/
.card {
  margin-bottom: 40px;
  border: 0px;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
  border-radius: 40px;
  box-shadow: 1px 5px 24px 0 rgba(2, 136, 209, 0.05); }
  .card .card-header {
    background-color: #fff;
    padding: 50px;
    border-bottom: 1px solid #f2f4ff;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    position: relative;
    overflow: hidden; }
    .card .card-header ul.creative-dots li {
      position: absolute;
      border-radius: 100%; }
      .card .card-header ul.creative-dots li.big-dot {
        left: -32px;
        top: 0;
        width: 50px;
        height: 50px;
        border-radius: 80% !important; }
      .card .card-header ul.creative-dots li.semi-big-dot {
        width: 30px;
        height: 30px;
        left: -14px;
        top: 42px; }
      .card .card-header ul.creative-dots li.medium-dot {
        width: 20px;
        height: 20px;
        left: 18px;
        top: -5px; }
      .card .card-header ul.creative-dots li.semi-medium-dot {
        width: 13px;
        height: 13px;
        left: 20px;
        top: 38px; }
      .card .card-header ul.creative-dots li.semi-small-dot {
        width: 8px;
        height: 8px;
        left: 32px;
        top: 23px; }
      .card .card-header ul.creative-dots li.small-dot {
        width: 4px;
        height: 4px;
        left: 42px;
        top: 37px; }
    .card .card-header.no-border {
      border-bottom: none; }
    .card .card-header h5 {
      margin-bottom: 0;
      text-transform: capitalize;
      font-weight: 800;
      line-height: 1; }
    .card .card-header > span {
      font-size: 12px;
      color: #6e7e96;
      margin-top: 5px;
      display: block;
      letter-spacing: 1px; }
  .card .card-body {
    padding: 50px;
    background-color: transparent; }
    .card .card-body .rounded {
      border-radius: 50px !important; }
    .card .card-body p:last-child {
      margin-bottom: 0; }
  .card .sub-title {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 5px;
    margin-bottom: 8px;
    font-size: 18px; }
  .card .card-footer {
    background-color: #fff;
    border-top: 1px solid #f2f4ff;
    padding: 50px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px; }

.card .card-header .card-header-right {
  border-radius: 0 0 0 7px;
  right: 43px;
  top: 42px;
  display: inline-block;
  float: right;
  padding: 8px 0;
  position: absolute;
  background-color: #fff; }
  .card .card-header .card-header-right .card-option {
    text-align: right;
    width: 35px;
    height: 20px;
    overflow: hidden;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out; }
    .card .card-header .card-header-right .card-option li {
      display: inline-block; }
      .card .card-header .card-header-right .card-option li:first-child i {
        font-size: 18px; }
  .card .card-header .card-header-right i {
    margin: 0 5px;
    cursor: pointer;
    color: #2c323f;
    line-height: 20px; }
    .card .card-header .card-header-right i.icofont-refresh {
      font-size: 13px; }

.card.full-card {
  position: fixed;
  top: 0;
  z-index: 99999;
  box-shadow: none;
  right: 0;
  border-radius: 0;
  border: 1px solid #efefef;
  width: calc(100vw - 00px);
  height: calc(100vh - 00px); }
  .card.full-card .card-body {
    overflow: auto; }

.card-header .nav-material {
  margin-bottom: -13px; }

.custom-card {
  overflow: hidden; }
  .custom-card .card-header {
    padding: 0; }
    .custom-card .card-header img {
      border-radius: 50%;
      margin-top: -100px;
      transform: scale(1.5); }
  .custom-card .card-footer {
    padding: 0; }
    .custom-card .card-footer > div {
      padding: 15px;
      text-align: center; }
      .custom-card .card-footer > div + div {
        border-left: 1px solid #efefef; }
      .custom-card .card-footer > div h3 {
        margin-bottom: 0;
        font-family: work-Sans, sans-serif;
        font-size: 24px; }
      .custom-card .card-footer > div h6 {
        font-size: 14px;
        color: #6e7e96; }
      .custom-card .card-footer > div i {
        font-size: 24px;
        display: inline-block;
        margin-bottom: 15px; }

/**=====================
    03. Card CSS End
==========================**/
/**=====================
     04. Loader CSS Start
==========================**/
@keyframes typing {
  from {
    width: 0; }
  to {
    width: 100%; } }
@keyframes blink-caret {
  from,
    to {
    border-color: transparent; }
  50% {
    border-color: #0288d1; } }
.loader-box {
  height: 150px;
  text-align: center;
  display: flex;
  align-items: center;
  vertical-align: middle;
  justify-content: center;
  transition: .3s color, .3s border, .3s transform, .3s opacity; }
  .loader-box [class*="loader-"] {
    display: inline-block;
    width: 50px;
    height: 50px;
    color: inherit;
    vertical-align: middle; }
@keyframes loader-01 {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
@keyframes loader-02 {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
@keyframes loader-03 {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
@keyframes loader-04 {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
@keyframes loader-05 {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
@keyframes loader-06 {
  0% {
    transform: scale(0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 0; } }
@keyframes loader-07 {
  0% {
    transform: scale(0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 0; } }
@keyframes loader-08 {
  0%,
    100% {
    transform: scale(0); }
  50% {
    transform: scale(1); } }
@keyframes loader-09 {
  0% {
    transform: scale(0); }
  100% {
    transform: scale(1);
    opacity: 0; } }
@keyframes loader-10-1 {
  100% {
    transform: rotate(360deg); } }
@keyframes loader-10-2 {
  0%,
    100% {
    transform: scale(0); }
  50% {
    transform: scale(1); } }
@keyframes loader-11 {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
@keyframes loader-12 {
  0%,
    100% {
    box-shadow: -.5em 0 0 transparent;
    background-color: #fd517d; }
  50% {
    box-shadow: -0.5em 0 0 #fd517d;
    background-color: transparent; } }
@keyframes loader-13 {
  0%,
    80%,
    100% {
    box-shadow: 0 1em 0 -1em; }
  40% {
    box-shadow: 0 1em 0 -.2em; } }
@keyframes loader-14 {
  0% {
    box-shadow: 0 2em 0 -0.2em #26c6da; }
  100% {
    box-shadow: 0 1em 0 -0.2em #26c6da; } }
@keyframes loader-15 {
  0%,
    100% {
    box-shadow: 0 0 0 #80cf00, 0 0 0 #80cf00; }
  50% {
    box-shadow: 0 -0.25em 0 #80cf00, 0 0.25em 0 #80cf00; } }
@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg); }
  100% {
    transform: translate(-50%, -50%) rotateZ(360deg); } }
@keyframes rotateccw {
  0% {
    transform: translate(-50%, -50%) rotate(0deg); }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes spin {
  0%,
    100% {
    box-shadow: 0.2em 0px 0 0px #06b5dd; }
  12% {
    box-shadow: 0.2em 0.2em 0 0 #06b5dd; }
  25% {
    box-shadow: 0 0.2em 0 0px #06b5dd; }
  37% {
    box-shadow: -0.2em 0.2em 0 0 #06b5dd; }
  50% {
    box-shadow: -0.2em 0 0 0 #06b5dd; }
  62% {
    box-shadow: -0.2em -0.2em 0 0 #06b5dd; }
  75% {
    box-shadow: 0px -0.2em 0 0 #06b5dd; }
  87% {
    box-shadow: 0.2em -0.2em 0 0 #06b5dd; } }
@keyframes loader-17 {
  0% {
    transform: rotateZ(0deg) translate3d(0, 0, 0); }
  100% {
    transform: rotateZ(360deg) translate3d(0, 0, 0); } }
@keyframes loader-18 {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
  .loader-box .loader-19 {
    border-top: 0.2em solid #0288d1;
    border-right: .2em solid transparent;
    animation: loader-19 1s linear infinite;
    border-radius: 100%;
    position: relative; }
@keyframes loader-19 {
  to {
    transform: rotate(360deg); } }
@keyframes loader-20 {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
@keyframes loader-21 {
  0% {
    top: 0; }
  50% {
    top: -5px; }
  100% {
    top: 0; } }
@keyframes loader-22 {
  0% {
    transform: rotate(-160deg); }
  100% {
    transform: rotate(-20deg); } }
@keyframes loader-23 {
  0% {
    box-shadow: inset 0px 0px 0px #ffc717; }
  100% {
    box-shadow: inset 1em 0px 0px #ffc717; } }
@keyframes loader-24 {
  0% {
    height: 0px; }
  100% {
    height: 6px; } }
@keyframes loader-25-1 {
  0% {
    box-shadow: inset 0 0 0 0 #0288d1; }
  100% {
    box-shadow: inset 0 -1em 0 0 #0288d1; } }
@keyframes loader-25-2 {
  25% {
    left: calc(100% + .2em);
    bottom: calc(100% + .2em); }
  50% {
    left: calc(100% + .2em);
    bottom: -.4em; }
  75% {
    left: -.4em;
    bottom: -.4em; }
  100% {
    left: -.4em;
    bottom: calc(100% + .2em); } }
@keyframes loader-26 {
  0% {
    opacity: 0.1;
    transform: rotate(0deg) scale(0.5); }
  100% {
    opacity: 1;
    transform: rotate(360deg) scale(1.2); } }
@keyframes loader-29 {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
@keyframes loader-30 {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
@keyframes loader-31 {
  0% {
    opacity: 1;
    transform: rotate(0deg);
    box-shadow: 0 0 0 -0.5em #ffc717, 0 0 0 -0.5em #ffc717, 0 0 0 -0.5em #ffc717, 0 0 0 -0.5em #ffc717, 0 0 0 -0.5em #ffc717, 0 0 0 -0.5em #ffc717, 0 0 0 -0.5em #ffc717, 0 0 0 -0.5em #ffc717; }
  100% {
    opacity: 0;
    transform: rotate(180deg);
    box-shadow: -1em -1em 0 -0.35em #ffc717, 0 -1.5em 0 -0.35em #ffc717, 1em -1em 0 -0.35em #ffc717, -1.5em 0 0 -0.35em #ffc717, 1.5em 0 0 -0.35em #ffc717, -1em 1em 0 -0.35em #ffc717, 0 1.5em 0 -0.35em #ffc717, 1em 1em 0 -0.35em #ffc717; } }
@keyframes loader-32 {
  0% {
    transform: rotateX(-60deg) rotateZ(0deg); }
  100% {
    transform: rotateX(-60deg) rotateZ(360deg); } }
@keyframes loader-34-1 {
  0% {
    transform: translatex(0px); }
  65% {
    height: .4em;
    width: .4em; }
  100% {
    height: .5em;
    width: .3em;
    transform: translatex(0.2em); } }
@keyframes loader-34-2 {
  0% {
    transform: translatex(0px); }
  65% {
    height: .4em;
    width: .4em; }
  100% {
    height: .5em;
    width: .3em;
    transform: translatex(-0.2em); } }
@keyframes loader-35 {
  0% {
    transform: translateX(0) scale(1); }
  25% {
    transform: translateX(-100%) scale(0.3); }
  50% {
    transform: translateX(0) scale(1); }
  75% {
    transform: translateX(100%) scale(0.3); }
  100% {
    transform: translateX(0) scale(1); } }
@keyframes loader-37 {
  from {
    transform: rotate(360deg); }
  to {
    transform: rotate(0deg); } }
@keyframes loader-38 {
  0% {
    box-shadow: -0.2em -0.2em 0 0.1em #06b5dd, -0.2em -0.2em 0 0.1em #06b5dd, -0.2em -0.2em 0 0.1em #06b5dd, -0.2em -0.2em 0 0.1em #06b5dd; }
  8.33% {
    box-shadow: -0.2em -0.2em 0 0.1em #06b5dd, 0.2em -0.2em 0 0.1em #06b5dd, 0.2em -0.2em 0 0.1em #06b5dd, 0.2em -0.2em 0 0.1em #06b5dd; }
  16.66% {
    box-shadow: -0.2em -0.2em 0 0.1em #06b5dd, 0.2em -0.2em 0 0.1em #06b5dd, 0.2em 0.2em 0 0.1em #06b5dd, 0.2em 0.2em 0 0.1em #06b5dd; }
  24.99% {
    box-shadow: -0.2em -0.2em 0 0.1em #06b5dd, 0.2em -0.2em 0 0.1em #06b5dd, 0.2em 0.2em 0 0.1em #06b5dd, -0.2em 0.2em 0 0.1em #06b5dd; }
  33.32% {
    box-shadow: -0.2em -0.2em 0 0.1em #06b5dd, 0.2em -0.2em 0 0.1em #06b5dd, 0.2em 0.2em 0 0.1em #06b5dd, -0.2em -0.2em 0 0.1em #06b5dd; }
  41.65% {
    box-shadow: 0.2em -0.2em 0 0.1em #06b5dd, 0.2em -0.2em 0 0.1em #06b5dd, 0.2em 0.2em 0 0.1em #06b5dd, 0.2em -0.2em 0 0.1em #06b5dd; }
  49.98% {
    box-shadow: 0.2em 0.2em 0 0.1em #06b5dd, 0.2em 0.2em 0 0.1em #06b5dd, 0.2em 0.2em 0 0.1em #06b5dd, 0.2em 0.2em 0 0.1em #06b5dd; }
  58.31% {
    box-shadow: -0.2em 0.2em 0 0.1em #06b5dd, -0.2em 0.2em 0 0.1em #06b5dd, 0.2em 0.2em 0 0.1em #06b5dd, -0.2em 0.2em 0 0.1em #06b5dd; }
  66.64% {
    box-shadow: -0.2em -0.2em 0 0.1em #06b5dd, -0.2em -0.2em 0 0.1em #06b5dd, 0.2em 0.2em 0 0.1em #06b5dd, -0.2em 0.2em 0 0.1em #06b5dd; }
  74.97% {
    box-shadow: -0.2em -0.2em 0 0.1em #06b5dd, 0.2em -0.2em 0 0.1em #06b5dd, 0.2em 0.2em 0 0.1em #06b5dd, -0.2em 0.2em 0 0.1em #06b5dd; }
  83.3% {
    box-shadow: -0.2em -0.2em 0 0.1em #06b5dd, 0.2em 0.2em 0 0.1em #06b5dd, 0.2em 0.2em 0 0.1em #06b5dd, -0.2em 0.2em 0 0.1em #06b5dd; }
  91.63% {
    box-shadow: -0.2em -0.2em 0 0.1em #06b5dd, -0.2em 0.2em 0 0.1em #06b5dd, -0.2em 0.2em 0 0.1em #06b5dd, -0.2em 0.2em 0 0.1em #06b5dd; }
  100% {
    box-shadow: -0.2em -0.2em 0 0.1em #06b5dd, -0.2em -0.2em 0 0.1em #06b5dd, -0.2em -0.2em 0 0.1em #06b5dd, -0.2em -0.2em 0 0.1em #06b5dd; } }
@keyframes loader-39-1 {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
@keyframes loader-39-2 {
  0% {
    box-shadow: 0.04em -0.04em 0 0.02em #ffc717; }
  25% {
    box-shadow: 0.04em 0.04em 0 0.02em #ffc717; }
  50% {
    box-shadow: -0.04em 0.04em 0 0.02em #ffc717; }
  75% {
    box-shadow: -0.04em -0.04em 0 0.02em #ffc717; }
  100% {
    box-shadow: 0.04em -0.04em 0 0.02em #ffc717; } }
@keyframes loader-40 {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(359deg); } }
@keyframes loader-41 {
  from {
    background-position: 0 0; }
  to {
    background-position: -1em 0; } }
@keyframes loader-42 {
  from {
    background-position: 0 0; }
  to {
    background-position: -2em 0; } }
/**=====================
     04. Loader CSS Ends
==========================**/
/**=====================
    05. Header CSS Start
==========================**/
@keyframes pagebody {
  from {
    opacity: 0;
    transform: scale3d(0.95, 0.95, 0.95) translate(-20px, -100px); }
  50% {
    opacity: 1; } }

.onhover-show-div {
  box-shadow: 0 0 2px 2px #f8f5fd;
  transform: translateY(30px);
  opacity: 0;
  visibility: hidden;
  left: 0; }

.onhover-dropdown:hover .onhover-show-div {
  opacity: 1;
  transform: translateY(0px);
  visibility: visible; }
  .onhover-dropdown:hover .onhover-show-div:before {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
    content: "";
    top: -7px;
    position: absolute;
    left: 10px;
    z-index: 2; }
  .onhover-dropdown:hover .onhover-show-div:after {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #898989;
    content: "";
    top: -7px;
    position: absolute;
    left: 10px;
    z-index: 1; }

.img-shadow-success {
  filter: drop-shadow(2px 4px 6px rgba(128, 207, 0, 0.5)); }

.img-shadow-warning {
  filter: drop-shadow(2px 4px 6px rgba(255, 199, 23, 0.5)); }

/*======= Page Header css Start ======= */
.page-wrapper .page-main-header {
  background-color: #fff;
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  display: flex;
  align-items: center;
  transition: 0.3s; }
  .page-wrapper .page-main-header .main-header-left {
    margin-left: 30px; }
.page-wrapper .page-body-wrapper {
  background-color: #fff; }
  .page-wrapper .page-body-wrapper .page-body {
    min-height: calc(100vh - 75px);
    margin-top: 75px;
    padding: 0 30px;
    position: relative;
    background-color: #fdfeff;
    margin-left: 260px;
    transition: .6s;
    animation: pagebody 1000ms ease-in-out; }

/*======= Page Header css ends  ======= */
/**======Main Header css Start ======**/
.page-main-header {
  max-width: 100vw; }
  .page-main-header .main-header-right {
    width: 100%;
    display: flex;
    align-items: center;
    box-shadow: 2.5px 4.33px 30px 0px rgba(2, 136, 209, 0.035); }
    .page-main-header .main-header-right .mobile-sidebar .switch {
      width: 40px;
      height: 40px;
      background-color: #f8f5fd;
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-top: 6px; }
      .page-main-header .main-header-right .mobile-sidebar .switch svg {
        width: 20px; }
    .page-main-header .main-header-right .nav-right {
      text-align: left;
      padding: 0 30px; }
      .page-main-header .main-header-right .nav-right ul li svg {
        margin-top: 10px;
        width: 18px;
        height: 18px; }
        .page-main-header .main-header-right .nav-right ul li svg path {
          color: #0288d1; }
      .page-main-header .main-header-right .nav-right ul li:last-child {
        padding-right: 0; }
      .page-main-header .main-header-right .nav-right > ul {
        padding: 0 0; }
        .page-main-header .main-header-right .nav-right > ul > li:first-child {
          width: auto;
          margin: 0; }
      .page-main-header .main-header-right .nav-right.right-menu ul {
        justify-content: flex-end; }
        .page-main-header .main-header-right .nav-right.right-menu ul li {
          position: relative; }
          .page-main-header .main-header-right .nav-right.right-menu ul li img {
            width: 20px; }
          .page-main-header .main-header-right .nav-right.right-menu ul li:before {
            display: none; }
          .page-main-header .main-header-right .nav-right.right-menu ul li .search-icon {
            border-radius: 100%;
            background-image: linear-gradient(#26c6da, #0288d1);
            width: 36px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 2px 3.464px 8px 0px rgba(126, 55, 216, 0.18);
            cursor: pointer; }
            .page-main-header .main-header-right .nav-right.right-menu ul li .search-icon i {
              color: #fff; }
          .page-main-header .main-header-right .nav-right.right-menu ul li .user-header img {
            width: 120px !important; }
          .page-main-header .main-header-right .nav-right.right-menu ul li .notification {
            position: absolute;
            top: -2px;
            right: -9px;
            padding: 5px 7px; }
      .page-main-header .main-header-right .nav-right > ul {
        display: flex;
        align-items: center; }
        .page-main-header .main-header-right .nav-right > ul > li {
          position: relative;
          padding: 30px 20px 21px 20px; }
          .page-main-header .main-header-right .nav-right > ul > li .form-group {
            width: 100%; }
          .page-main-header .main-header-right .nav-right > ul > li:first-child {
            width: 30%;
            margin: 0 auto; }
          .page-main-header .main-header-right .nav-right > ul > li:last-child {
            padding-top: 10px;
            padding-bottom: 10px; }
          .page-main-header .main-header-right .nav-right > ul > li .badge {
            padding: 4px 8px; }
          .page-main-header .main-header-right .nav-right > ul > li:first-child:before {
            top: 2px; }
          .page-main-header .main-header-right .nav-right > ul > li span {
            letter-spacing: 0.9px; }
            .page-main-header .main-header-right .nav-right > ul > li span .fa {
              color: #cccccc; }
            .page-main-header .main-header-right .nav-right > ul > li span ul {
              left: inherit;
              right: -10px;
              width: 130px; }
              .page-main-header .main-header-right .nav-right > ul > li span ul:before, .page-main-header .main-header-right .nav-right > ul > li span ul:after {
                left: inherit;
                right: 10px; }
              .page-main-header .main-header-right .nav-right > ul > li span ul li {
                display: block; }
                .page-main-header .main-header-right .nav-right > ul > li span ul li a {
                  font-size: 14px;
                  color: #2c323f; }
                  .page-main-header .main-header-right .nav-right > ul > li span ul li a i {
                    margin-left: 10px;
                    font-size: 13px;
                    color: #2c323f; }
        .page-main-header .main-header-right .nav-right > ul .flag-icon {
          font-size: 16px; }
      .page-main-header .main-header-right .nav-right .notification-dropdown {
        top: 70px;
        width: 300px;
        left: -230px !important;
        border-radius: 15px;
        overflow: hidden; }
        .page-main-header .main-header-right .nav-right .notification-dropdown:before, .page-main-header .main-header-right .nav-right .notification-dropdown:after {
          right: 27px;
          left: unset; }
        .page-main-header .main-header-right .nav-right .notification-dropdown li {
          padding: 25px !important; }
          .page-main-header .main-header-right .nav-right .notification-dropdown li:first-child {
            text-align: center;
            color: #fff;
            padding: 20px !important; }
          .page-main-header .main-header-right .nav-right .notification-dropdown li:nth-child(3) {
            padding-top: 0 !important; }
          .page-main-header .main-header-right .nav-right .notification-dropdown li .notification-icons {
            width: 40px;
            height: 40px;
            border-radius: 100%;
            display: flex;
            align-items: center;
            justify-content: center; }
            .page-main-header .main-header-right .nav-right .notification-dropdown li .notification-icons svg path {
              color: #fff; }
          .page-main-header .main-header-right .nav-right .notification-dropdown li h6 {
            margin-bottom: 2px; }
      .page-main-header .main-header-right .nav-right .profile-dropdown {
        width: 180px;
        top: 70px;
        left: -65px !important; }
        .page-main-header .main-header-right .nav-right .profile-dropdown:before, .page-main-header .main-header-right .nav-right .profile-dropdown:after {
          right: 20px;
          left: unset; }
        .page-main-header .main-header-right .nav-right .profile-dropdown li {
          padding: 10px 20px !important; }
          .page-main-header .main-header-right .nav-right .profile-dropdown li svg {
            vertical-align: text-bottom;
            margin-right: 10px;
            margin-top: 0; }
          .page-main-header .main-header-right .nav-right .profile-dropdown li:first-child {
            padding: 20px !important;
            text-align: center;
            border-radius: 15px 15px 0 0; }
            .page-main-header .main-header-right .nav-right .profile-dropdown li:first-child span {
              font-size: 10px; }
          .page-main-header .main-header-right .nav-right .profile-dropdown li:nth-child(2) {
            padding-top: 20px !important; }
          .page-main-header .main-header-right .nav-right .profile-dropdown li:last-child {
            padding-bottom: 20px !important; }
      .page-main-header .main-header-right .nav-right .onhover-dropdown .onhover-show-div {
        top: 70px;
        left: 13px;
        border-radius: 15px; }
        .page-main-header .main-header-right .nav-right .onhover-dropdown .onhover-show-div li {
          display: block; }
        .page-main-header .main-header-right .nav-right .onhover-dropdown .onhover-show-div svg {
          color: #1b3155; }
          .page-main-header .main-header-right .nav-right .onhover-dropdown .onhover-show-div svg path {
            color: #1b3155; }
        .page-main-header .main-header-right .nav-right .onhover-dropdown .onhover-show-div:before {
          border-bottom: 7px solid #0288d1; }
      .page-main-header .main-header-right .nav-right .onhover-dropdown .gradient-primary {
        box-shadow: none; }
    .page-main-header .main-header-right li {
      display: inline-block;
      position: relative; }

.onhover-dropdown {
  cursor: pointer;
  position: relative; }

.onhover-show-div {
  top: 75px;
  position: absolute;
  z-index: 8;
  background-color: #fff;
  transition: all linear 0.3s; }
  .onhover-show-div li a svg {
    margin-top: 0 !important; }
    .onhover-show-div li a svg path, .onhover-show-div li a svg line {
      color: #1b3155 !important; }

/**======Main Header css Ends ======**/

/** ===== Vertical Menu css Start=====**/

/** ===== Vertical Menu css Ends=====**/
/* ========sidebar icon vertical menu start=======*/

/* ========sidebar icon vertical menu end=======*/
/*=======Mega menu css start=======*/
.vertical-mobile-sidebar {
  display: none; }

.ep-logo {
  color: #0288d1;
  text-shadow: 2px 2px 4px rgba(2, 136, 209, 0.5); }

/*=======Mega menu css end=======*/
/**=====================
    05. Header CSS Ends
==========================**/
/**=====================
    05. Sidebar CSS Start
==========================**/
@keyframes scaleDisappear {
  0% {
    transform: scale(1); }
  60% {
    transform: scale(1.1); }
  100% {
    transform: scale(1); } }
.page-wrapper .page-body-wrapper .iconsidebar-menu {
  position: fixed;
  z-index: 10;
  top: 75px;
  transition: 0.3s; }
  .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar {
    width: 80px;
    display: block;
    height: calc(100vh - 75px);
    overflow: auto;
    background-color: #fff;
    transition: 0.3s; }
    .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li {
      position: relative; }
      .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li .badge {
        position: absolute;
        top: 10px;
        right: 10px; }
    .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar .bar-icons {
      display: block;
      text-align: center;
      padding: 15px 12px;
      transition: all 0.3s ease;
      border: 1px solid #f8f4fe;
      border-top: none;
      z-index: 999;
      letter-spacing: 0.6px; }
      .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar .bar-icons a.bar-icons:after {
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        background-color: #faf8fd;
        top: 40%;
        right: -8px;
        border-radius: 15px; }
      .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar .bar-icons span {
        padding-top: 2px;
        display: block;
        color: #000;
        font-weight: 600;
        line-height: 1;
        padding-top: 7px; }
      .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar .bar-icons i {
        font-size: 22px;
        vertical-align: middle;
        color: #0288d1;
        font-weight: 600; }
      .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar .bar-icons svg {
        vertical-align: middle; }
    .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar .iconbar-mainmenu {
      position: fixed;
      top: 75px;
      height: calc(100vh - 75px);
      overflow: auto;
      left: 80px;
      width: 180px;
      background-color: #fff;
      box-shadow: 0 16px 15px 15px rgba(126, 55, 216, 0.03);
      transition: all 0.5s ease-in-out;
      display: none;
      z-index: -1;
      animation: fadeInLeft 1000ms ease-in-out; }
      .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar .iconbar-mainmenu li {
        padding-left: 20px;
        transition: all 0.3s ease; }
        .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar .iconbar-mainmenu li:not(.iconbar-header):hover {
          letter-spacing: 0.8px;
          transition: all 0.3s ease; }
        .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar .iconbar-mainmenu li:last-child {
          padding-bottom: 25px; }
        .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar .iconbar-mainmenu li a {
          color: #1a1a1a;
          padding-top: 15px;
          display: block;
          font-weight: 600; }
        .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar .iconbar-mainmenu li.active a.active {
          color: #0288d1; }
      .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar .iconbar-mainmenu .iconbar-header {
        font-size: 18px;
        color: #0288d1;
        padding: 20px 0 20px 20px;
        background-color: #bde7fe;
        font-weight: 700; }
        .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar .iconbar-mainmenu .iconbar-header a {
          padding-top: 0; }
        .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar .iconbar-mainmenu .iconbar-header.sub-header {
          margin-top: 25px; }
    .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li:not(.open):hover .bar-icons {
      background-color: #a1ddfe;
      transition: all 0.3s ease; }
      .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li:not(.open):hover .bar-icons svg, .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li:not(.open):hover .bar-icons i, .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li:not(.open):hover .bar-icons span {
        color: #0288d1;
        transition: all 0.3s ease;
        animation: scaleDisappear 0.3s; }
    .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li:active .bar-icons, .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li:focus .bar-icons, .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li.open .bar-icons {
      background-color: #0288d1;
      border: 1px solid #0288d1; }
      .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li:active .bar-icons:before, .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li:focus .bar-icons:before, .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li.open .bar-icons:before {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        height: 85px;
        width: 90px;
        box-shadow: 2px 0px 35px -5px rgba(2, 136, 209, 0.5); }
      .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li:active .bar-icons svg, .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li:active .bar-icons i, .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li:active .bar-icons span, .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li:focus .bar-icons svg, .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li:focus .bar-icons i, .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li:focus .bar-icons span, .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li.open .bar-icons svg, .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li.open .bar-icons i, .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li.open .bar-icons span {
        color: #fff; }
    .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li:active .iconbar-mainmenu, .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li:focus .iconbar-mainmenu, .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar li.open .iconbar-mainmenu {
      display: block;
      animation: bounceInLeft 1000ms ease-in-out; }

.right-sidebar {
  top: 75px;
  right: -285px;
  height: 100%;
  position: fixed;
  width: 285px;
  z-index: 99;
  background-color: #fff;
  transition: .5s;
  box-shadow: 0px 0px 10px #d8e5ef; }
  .right-sidebar.show {
    right: 0;
    transition: 0.3s; }
  .right-sidebar .modal-header .modal-title {
    padding-top: 2px; }
  .right-sidebar svg {
    width: 16px;
    height: 16px;
    margin-top: 5px; }

/**=====================
    05. Sidebar CSS Ends
==========================**/
/**=====================
    06. Button CSS start
==========================**/
.btn {
  font-size: 14px;
  padding: 0.475rem 1.75rem;
  font-weight: 700; }

.btn-lg {
  font-size: 18px; }

.btn-sm {
  font-size: 12px; }

.btn-xs {
  margin: 1px;
  padding: 0.05rem 0.4rem;
  font-size: 11px; }

.btn-air-secondary {
  box-shadow: 0 5px 10px 2px rgba(88, 103, 221, 0.19) !important; }
  .btn-air-secondary:hover, .btn-air-secondary:active, .btn-air-secondary:not([disabled]):not(.disabled):active {
    background-color: #1e9faf;
    border-color: #1e9faf; }

.btn-air-success {
  box-shadow: 0 5px 10px 2px rgba(88, 103, 221, 0.19) !important; }
  .btn-air-success:hover, .btn-air-success:active, .btn-air-success:not([disabled]):not(.disabled):active {
    background-color: #609c00;
    border-color: #609c00; }

.btn-air-info {
  box-shadow: 0 5px 10px 2px rgba(88, 103, 221, 0.19) !important; }
  .btn-air-info:hover, .btn-air-info:active, .btn-air-info:not([disabled]):not(.disabled):active {
    background-color: #058cab;
    border-color: #058cab; }

.btn-warning {
  color: #fff; }
  .btn-warning:hover, .btn-warning.disabled {
    color: #fff; }

[class*='-gradien']:hover {
  background-size: 50% 100%;
  transition: all 0.3s ease;
  color: #fff; }

.btn-pill {
  border-radius: 60px; }

.btn-showcase {
  margin-bottom: -10px; }
  .btn-showcase .btn {
    margin-bottom: 10px;
    margin-right: 18px; }

.btn-group .radio label::before {
  top: 2px; }
.btn-group .radio label::after {
  top: 7px; }
.btn-group .checkbox label {
  margin-top: 3px; }

.badge-transparent {
  background-color: rgba(255, 255, 255, 0.1);
  font-size: 75%;
  padding: 8px 20px;
  color: #fff; }
  .badge-transparent i {
    padding-right: 5px; }

/**=====================
     06. Button CSS end
==========================**/
/**=====================
     07. Color CSS Start
==========================**/

.default-text {
  color: #158df7; }

.gradient-primary {
  background-image: linear-gradient(#26c6da, #0288d1);
  color: #fff;
  box-shadow: 2px 12px 26px 3px rgba(2, 136, 209, 0.3); }

.gradient-secondary {
  background-image: linear-gradient(to bottom right, #ff9cc3, #fd3484);
  box-shadow: 2px 12px 26px 3px rgba(38, 198, 218, 0.3);
  color: #fff; }

.gradient-success {
  background-image: linear-gradient(to bottom right, #b9ec68, #80cf00);
  box-shadow: 2px 12px 26px 3px rgba(128, 207, 0, 0.3); }

.gradient-warning {
  background-image: linear-gradient(to bottom right, #ffd85d, #ffc200);
  box-shadow: 2px 12px 26px 3px rgba(255, 199, 23, 0.3); }

.gradient-info {
  background-image: linear-gradient(to bottom right, #00d2d7, #07b2dd);
  box-shadow: 2px 12px 26px 3px rgba(6, 181, 221, 0.3); }

/**=====================
     07. Color CSS Ends
==========================**/
/**=====================
      08. GRID CSS Start
==========================**/

/**=====================
      08. GRID CSS Ends
==========================**/
/**=====================
     09. Error-page  CSS Start
==========================**/

.error {
  margin: 70px 0 100px;
  color: #000; }

/**=====================
     09. Error-page CSS Ends
==========================**/
/**=====================
    10. ICON CSS Start
==========================**/

/**=====================
     10. ICON CSS Ends
==========================**/
/**=====================
     11. Form Builder 1 CSS Start
==========================**/
.form-builder .drag-box {
  user-select: none; }
  .form-builder .drag-box fieldset {
    border: 1px dotted #e8ebf2;
    min-height: 655px;
    padding: 30px;
    width: 100%;
    overflow: hidden;
    margin-top: 30px;
    border-radius: 4px; }
.form-builder .component {
  cursor: pointer; }
  .form-builder .component label {
    padding-top: 8px; }
  .form-builder .component .form-group input, .form-builder .component .form-group textarea, .form-builder .component .form-group select {
    border-radius: 4px; }
  .form-builder .component .form-group .input-group .input-group-btn button {
    border-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0; }
.form-builder input {
  cursor: pointer; }
.form-builder textarea {
  resize: vertical; }
.form-builder .popover {
  z-index: 8;
  opacity: 1;
  left: -290px !important;
  top: 95px !important; }
  .form-builder .popover input {
    cursor: pointer; }
.form-builder .render {
  min-height: 500px;
  width: 100%;
  border-radius: 4px; }
.form-builder .popover .controls {
  margin-left: 0; }
.form-builder .popover .control-label {
  text-align: left; }
.form-builder .popover form {
  width: 100%; }
.form-builder .popover .fade.left.in {
  left: -215px; }
.form-builder .target:after {
  float: left;
  content: " ";
  height: 77px;
  margin-top: 3px;
  background: #f8f5fd;
  width: 100%;
  border: 1px dashed #e8ebf2; }

.drag form {
  padding: 10px 5px;
  border: 1px dotted #e8ebf2;
  position: absolute;
  background: #fff;
  box-shadow: 0 0 30px #e8ebf2;
  overflow: hidden; }
  .drag form input {
    border-radius: 5px; }

.form-builder-header-1 {
  background-color: #f8f5fd;
  padding: 15px;
  border-radius: 5px;
  min-height: 67px; }
  .form-builder-header-1 h6 {
    margin-bottom: 0;
    margin-top: 10px; }

.form-builder .help-block {
  font-size: 12px; }
.form-builder input {
  border-radius: 4px !important; }
.form-builder .form-group .col-md-12 {
  padding: 0; }
.form-builder .popover {
  width: 300px; }

/**=====================
    11. Form Builder 1 CSS Ends
==========================**/
/**=====================
    12.  Email Application  CSS Start
==========================**/

/**=====================
    12.  Email Application  CSS Ends
==========================**/
/**=====================
     13. Chat CSS Start
==========================**/

.away {
  background-color: #ffc717; }

.online {
  background-color: #80cf00; }

.offline {
  background-color: #fd517d; }

/**=====================
    13.  Chat CSS Ends
==========================**/
/**=====================
     14. Alert CSS start
==========================**/
.alert {
  border-radius: 0.15rem;
  padding: 15px;
  border-radius: 20px; }
  .alert svg {
    vertical-align: middle; }
  .alert .progress {
    margin-top: 15px; }
  .alert [data-notify='message'] {
    display: block; }
  .alert i {
    margin-right: 5px;
    font-size: 16px; }
  .alert p {
    margin-bottom: 0; }
  .alert .close {
    opacity: 1; }
    .alert .close span {
      font-size: 24px;
      font-weight: 400;
      display: inline-block;
      border-radius: 3px;
      text-shadow: none;
      padding: 0 5px;
      padding-right: 0; }

.card-body .alert:last-child {
  margin-bottom: 0; }
.card-body .alert svg {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  position: absolute;
  top: 18px; }
  .card-body .alert svg ~ p {
    padding-left: 20px; }

strong {
  display: inline-block; }
  strong ~ p {
    display: inline-block; }

.alert-primary {
  background-color: rgba(2, 136, 209, 0.8);
  border-color: rgba(2, 136, 209, 0.9);
  color: #fff; }
  .alert-primary .progress {
    height: 5px;
    background-color: #0285cc;
    border-radius: 0; }
  .alert-primary hr {
    border-top-color: #0288d1; }

.alert-primary.dark {
  background-color: #0288d1 !important;
  border-color: #0288d1 !important;
  color: #fafafa; }

.alert-primary.outline {
  background-color: transparent !important;
  border-color: #0288d1 !important;
  color: #0288d1; }

.alert-primary.inverse {
  background-color: transparent;
  padding: 13px 20px 13px 65px;
  border-color: #0288d1;
  color: #1b3155; }
  .alert-primary.inverse:before {
    top: 16px;
    content: "";
    position: absolute;
    left: 54px;
    width: 0;
    height: 0;
    border-left: 7px solid #0288d1;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent; }
  .alert-primary.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #0288d1 !important;
    color: #fff;
    border-radius: 15px 0 0 15px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%; }

.alert-secondary {
  background-color: rgba(38, 198, 218, 0.8);
  border-color: rgba(38, 198, 218, 0.9);
  color: #fff; }
  .alert-secondary .progress {
    height: 5px;
    background-color: #25c3d6;
    border-radius: 0; }
  .alert-secondary hr {
    border-top-color: #26c6da; }

.alert-secondary.dark {
  background-color: #26c6da !important;
  border-color: #26c6da !important;
  color: #fafafa; }

.alert-secondary.outline {
  background-color: transparent !important;
  border-color: #26c6da !important;
  color: #26c6da; }

.alert-secondary.inverse {
  background-color: transparent;
  padding: 13px 20px 13px 65px;
  border-color: #26c6da;
  color: #1b3155; }
  .alert-secondary.inverse:before {
    top: 16px;
    content: "";
    position: absolute;
    left: 54px;
    width: 0;
    height: 0;
    border-left: 7px solid #26c6da;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent; }
  .alert-secondary.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #26c6da !important;
    color: #fff;
    border-radius: 15px 0 0 15px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%; }

.alert-danger {
  background-color: rgba(253, 81, 125, 0.8);
  border-color: rgba(253, 81, 125, 0.9);
  color: #fff; }
  .alert-danger .progress {
    height: 5px;
    background-color: #fd4c79;
    border-radius: 0; }
  .alert-danger hr {
    border-top-color: #fd517d; }

.alert-danger.dark {
  background-color: #fd517d !important;
  border-color: #fd517d !important;
  color: #fafafa; }

.alert-danger.outline {
  background-color: transparent !important;
  border-color: #fd517d !important;
  color: #fd517d; }

.alert-danger.inverse {
  background-color: transparent;
  padding: 13px 20px 13px 65px;
  border-color: #fd517d;
  color: #1b3155; }
  .alert-danger.inverse:before {
    top: 16px;
    content: "";
    position: absolute;
    left: 54px;
    width: 0;
    height: 0;
    border-left: 7px solid #fd517d;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent; }
  .alert-danger.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #fd517d !important;
    color: #fff;
    border-radius: 15px 0 0 15px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%; }

.alert-info {
  background-color: rgba(6, 181, 221, 0.8);
  border-color: rgba(6, 181, 221, 0.9);
  color: #fff; }
  .alert-info .progress {
    height: 5px;
    background-color: #06b1d8;
    border-radius: 0; }
  .alert-info hr {
    border-top-color: #06b5dd; }

.alert-info.dark {
  background-color: #06b5dd !important;
  border-color: #06b5dd !important;
  color: #fafafa; }

.alert-info.outline {
  background-color: transparent !important;
  border-color: #06b5dd !important;
  color: #06b5dd; }

.alert-info.inverse {
  background-color: transparent;
  padding: 13px 20px 13px 65px;
  border-color: #06b5dd;
  color: #1b3155; }
  .alert-info.inverse:before {
    top: 16px;
    content: "";
    position: absolute;
    left: 54px;
    width: 0;
    height: 0;
    border-left: 7px solid #06b5dd;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent; }
  .alert-info.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #06b5dd !important;
    color: #fff;
    border-radius: 15px 0 0 15px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%; }

/**=====================
     14. Alert CSS end
==========================**/
/**=====================
     15. Popover CSS Start
==========================**/

/**=====================
     15. Popover CSS Ends
==========================**/
/**=====================
     16. List CSS Start
==========================**/

/**=====================
     16. List CSS Ends
==========================**/
/**=====================
    17. Switch  CSS Start
==========================**/

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px; }
  .switch input {
    display: none; }

.switch-sm .switch {
  width: 25px;
  height: 16px;
  margin-top: 10px;
  margin-bottom: 0px; }

/**=====================
     17. Switch  CSS Ends
==========================**/
/**=====================
   18. Mega option CSS Start
==========================**/

/**=====================
     18. Mega option CSS Ends
==========================**/
/**=====================
    19.  Touchspin  CSS Start
==========================**/

/**=====================
     19. Touchspin  CSS Ends
==========================**/
/**=====================
     20. Select 2 CSS Start
==========================**/
.select2 {
  max-width: 100%; }
.select2-drpdwn .form-control {
  border-radius: 15px; }

/**=====================
     20. Select 2 CSS Ends
==========================**/
/**=====================
     21. User profile css start
==========================**/

/**=====================
     21. User profile css Ends
==========================**/
/**=====================
     22. Progress CSS Start
==========================**/

@keyframes heartbit {
  0% {
    transform: scale(0);
    opacity: 0; }
  25% {
    transform: scale(0.1);
    opacity: 0.1; }
  50% {
    transform: scale(0.5);
    opacity: 0.3; }
  75% {
    transform: scale(0.8);
    opacity: 0.5; }
  100% {
    transform: scale(1);
    opacity: 0; } }

/**=====================
     22. Progress CSS Ends
==========================**/
/**=====================
    23. According CSS start
==========================**/
.default-according .card {
  margin-bottom: 0; }
  .default-according .card + .card {
    margin-top: 10px; }
  .default-according .card .btn-link {
    font-weight: 600;
    color: #1b3155; }
  .default-according .card .btn-link:focus, .default-according .card .btn-link:hover {
    text-decoration: none; }
  .default-according .card .card-header {
    padding: 0.75rem 1.25rem; }
    .default-according .card .card-header i {
      position: absolute;
      left: 18px;
      font-size: 20px;
      top: 20px; }
    .default-according .card .card-header h5 {
      margin-top: 2px; }

.default-according.style-1 button {
  width: 100%;
  text-align: left; }
  .default-according.style-1 button:before {
    right: 20px;
    position: absolute;
    transition: 0.4s; }
  .default-according.style-1 button[aria-expanded="true"]:before {
    content: "";
    font-family: IcoFont; }
  .default-according.style-1 button[aria-expanded="false"]:before {
    content: "";
    font-family: IcoFont; }

/**=====================
     23. According CSS Ends
==========================**/
/**=====================
    24. Authentication CSS Start
==========================**/

.authentication-main .auth-innerright .card-body .theme-form {
  width: calc(100% - 290px); }
.authentication-main .auth-innerright .authentication-box {
  height: 100vh;
  display: flex;
  align-items: center; }

.auth-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 50px 100px; }
  .auth-bg .card-body {
    background-color: #f9f9fa; }
    .auth-bg .card-body .theme-form {
      width: calc(100% - 290px); }

@keyframes rotate-effect {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }
.cont {
  overflow: hidden;
  position: relative;
  width: 900px;
  margin: 0 auto 0;
  background: #fff;
  padding: 30px;
  border-radius: 12px; }

.cont > div:nth-child(1) {
  height: 100%;
  display: flex;
  align-items: center; }

.sub-cont {
  overflow: hidden;
  position: absolute;
  left: 610px;
  top: 0;
  padding: 30px;
  height: 100%;
  padding-left: 350px;
  background: #fff;
  transition: transform 1.2s ease-in-out;
  width: calc(100% + 260px); }

.img {
  overflow: hidden;
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 290px;
  height: 100%;
  padding-top: 360px; }
  .img:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 900px;
    height: 100%;
    background-image: url("../images/other-images/login-bg.jpg");
    background-size: cover;
    transition: transform 1.2s ease-in-out; }
  .img:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); }
  .img__text {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 50px;
    width: 100%;
    padding: 0 20px;
    text-align: center;
    color: #fff;
    transition: transform 1.2s ease-in-out; }
    .img__text.m--in {
      transform: translateX(-580px); }
  .img__btn {
    overflow: hidden;
    z-index: 2;
    position: relative;
    height: 40px;
    background: transparent;
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
    cursor: pointer;
    margin: 0 50px; }
    .img__btn:after {
      content: '';
      z-index: 2;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border: 2px solid #fff;
      border-radius: 25px; }
    .img__btn span {
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      transition: transform 1.2s; }
      .img__btn span.m--in {
        transform: translateY(-72px); }

.submit {
  margin-top: 40px;
  margin-bottom: 20px;
  background: #d4af7a;
  text-transform: uppercase; }

.icon-link img {
  width: 100%;
  vertical-align: top; }

@media only screen and (max-width: 991px) {

  .sub-cont {
    left: 0;
    padding-left: 30px;
    transform: translate3d(0, 488px, 0) !important;
    height: calc(100% + 260px);
    width: 100%; }
    .sub-cont .img {
      width: 100%;
      height: auto; }
      .sub-cont .img:before {
        width: 100%; }

  .img__btn {
    margin: 0 auto 50px;
    width: 20%; }

  .img__text.m--up {
    transform: translateY(0) !important; }
  .img__text.m--in {
    transform: translateY(-580px) !important;
    transform: translatX(0px) !important; }

  .cont {
    width: 100%; }

  .img {
    padding-top: 200px; }

  .authentication-main {
    padding: 30px; }
    .authentication-main .auth-innerright .card-body .theme-form {
      width: 100%; } }
@media only screen and (max-width: 767px) {
  .sub-cont {
    transform: translate3d(0, 535px, 0) !important; }

  .auth-bg {
    padding: 15px !important; } }
@media only screen and (max-width: 575px) {
  .authentication-main {
    margin-top: 10px; }

  .img__btn {
    width: 32%; }

  .sub-cont {
    transform: translate3d(0, 570px, 0) !important; } }
@media only screen and (max-width: 360px) {

  .img__btn {
    width: 43%; }

  .sub-cont {
    transform: translate3d(0, 588px, 0) !important; } }
/**=====================
    24. Authentication CSS Ends
==========================**/
/**=====================
    25. Form CSS Start
==========================**/

.theme-form label {
  font-size: 16px; }
.theme-form .form-control :focus {
  box-shadow: 0 0 0 0.2rem rgba(171, 140, 228, 0.05); }
.theme-form .form-group {
  margin-bottom: 20px; }
  .theme-form .form-group textarea {
    border-color: #efefef;
    border-radius: 20px;
    width: 100%; }
    .theme-form .form-group textarea::-webkit-input-placeholder {
      color: #898989;
      font-size: 14px;
      letter-spacing: 1px;
      font-weight: 100; }
  .theme-form .form-group input[type=text], .theme-form .form-group input[type=email], .theme-form .form-group input[type=search],
  .theme-form .form-group input[type=password], .theme-form .form-group input[type=number], .theme-form .form-group input[type=tel], .theme-form .form-group input[type=date], .theme-form .form-group input[type=time], .theme-form .form-group input[type=month], .theme-form .form-group input[type=week],
  .theme-form .form-group input[type=url], .theme-form .form-group input[type=file] {
    height: 38px;
    padding-left: 20px; }
  .theme-form .form-group input[type=text], .theme-form .form-group input[type=email], .theme-form .form-group input[type=search],
  .theme-form .form-group input[type=password], .theme-form .form-group input[type=number], .theme-form .form-group input[type=tel], .theme-form .form-group input[type=date], .theme-form .form-group input[type=time], .theme-form .form-group input[type=month], .theme-form .form-group input[type=week],
  .theme-form .form-group input[type=url], .theme-form .form-group input[type=file], .theme-form .form-group select {
    border-color: #efefef;
    background-color: #fff;
    font-size: 14px;
    color: #898989;
    font-family: work-Sans, sans-serif;
    border-radius: 20px; }
    .theme-form .form-group input[type=text]::-webkit-input-placeholder, .theme-form .form-group input[type=email]::-webkit-input-placeholder, .theme-form .form-group input[type=search]::-webkit-input-placeholder,
    .theme-form .form-group input[type=password]::-webkit-input-placeholder, .theme-form .form-group input[type=number]::-webkit-input-placeholder, .theme-form .form-group input[type=tel]::-webkit-input-placeholder, .theme-form .form-group input[type=date]::-webkit-input-placeholder, .theme-form .form-group input[type=time]::-webkit-input-placeholder, .theme-form .form-group input[type=month]::-webkit-input-placeholder, .theme-form .form-group input[type=week]::-webkit-input-placeholder,
    .theme-form .form-group input[type=url]::-webkit-input-placeholder, .theme-form .form-group input[type=file]::-webkit-input-placeholder, .theme-form .form-group select::-webkit-input-placeholder {
      color: #898989;
      font-size: 14px;
      letter-spacing: 1px;
      font-weight: 100; }
  .theme-form .form-group .input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0; }
  .theme-form .form-group .input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; }
  .theme-form .form-group select.form-control:not([size]):not([multiple]) {
    border-color: #efefef;
    font-size: 14px; }
.theme-form .checkbox label {
  padding-left: 10px; }

input[type=file] {
  height: auto !important; }

/**=====================
    25. Form CSS Ends
==========================**/
/**=====================
     26. Coming Soon CSS Start
==========================**/

/**=====================
    26. Coming Soon CSS Ends
==========================**/
/**=====================
     27. Radio CSS Start
==========================**/

.checkbox label {
  display: inline-block;
  position: relative;
  padding-left: 16px;
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 10px; }
  .checkbox label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 19px;
    height: 19px;
    left: 0;
    margin-left: -16px;
    border: 1px solid #e8ebf2;
    border-radius: 3px;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
  .checkbox label::after {
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top: 0;
    margin-left: -20px;
    padding-left: 3px;
    padding-top: 1px;
    font-size: 11px;
    color: #242934; }
.checkbox input[type="checkbox"] {
  opacity: 0; }
  .checkbox input[type="checkbox"]:focus {
    outline-offset: -2px; }
    .checkbox input[type="checkbox"]:focus + label::before {
      outline-offset: -2px; }
.checkbox input[type="checkbox"]:checked + label::before {
  font-family: themify;
  content: "\e64c";
  text-align: center;
  line-height: 1.2; }
.checkbox input[type="checkbox"]:disabled + label {
  opacity: 0.65; }
  .checkbox input[type="checkbox"]:disabled + label::before {
    background-color: #f8f5fd;
    cursor: not-allowed; }
.checkbox .checkbox-inline {
  margin-top: 0; }

.layui-form-checkbox {
  display: inline-block;
  position: relative;
  padding-left: 16px;
  cursor: pointer;
  margin-top: 0px;
  margin-bottom: 0px; }
  .layui-form-checkbox::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 19px;
    height: 19px;
    left: 0;
    margin-left: 0px;
    margin-top: 0px;
    border: 1px solid #e8ebf2;
    border-radius: 3px;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
  .layui-form-checkbox::after {
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top: 0;
    margin-left: -20px;
    padding-left: 3px;
    padding-top: 1px;
    font-size: 11px;
    color: #242934; }
  .layui-form-checkbox label {
    display: inline-block;
    position: relative;
    padding-left: 16px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px; }
    .layui-form-checkbox label::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 19px;
      height: 19px;
      left: 0;
      margin-left: -16px;
      margin-top: -10px;
      border: 1px solid #e8ebf2;
      border-radius: 3px;
      background-color: #fff;
      -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
    .layui-form-checkbox label::after {
      display: inline-block;
      position: absolute;
      width: 16px;
      height: 16px;
      left: 0;
      top: 0;
      margin-left: -20px;
      padding-left: 3px;
      padding-top: 1px;
      font-size: 11px;
      color: #242934; }
  .layui-form-checkbox input[type="checkbox"] {
    opacity: 0; }
    .layui-form-checkbox input[type="checkbox"]:focus {
      outline-offset: -2px; }
      .layui-form-checkbox input[type="checkbox"]:focus + label::before {
        outline-offset: -2px; }
  .layui-form-checkbox input[type="checkbox"]:checked + label::before {
    font-family: themify;
    content: "\e64c";
    text-align: center;
    line-height: 1.2; }
  .layui-form-checkbox input[type="checkbox"]:disabled + label {
    opacity: 0.65; }
    .layui-form-checkbox input[type="checkbox"]:disabled + label::before {
      background-color: #f8f5fd;
      cursor: not-allowed; }
  .layui-form-checkbox .checkbox-inline {
    margin-top: 0; }

.layui-form-checked label::before {
  font-family: themify;
  content: "\e64c";
  text-align: center;
  line-height: 1.2; }

.checkbox-primary input[type="checkbox"]:checked + label::before {
  border-color: #0288d1;
  color: #0288d1; }
.checkbox-primary input[type="checkbox"]:checked + label::after {
  color: #fff; }

.checkbox-primary label::before {
  border-color: #0288d1; }

.m-checkbox-inline .checkbox {
  display: inline-block; }
.m-checkbox-inline .radio {
  display: inline-block; }
.m-checkbox-inline label {
  margin-right: 20px; }

.radio label {
  display: inline-block;
  position: relative;
  padding-left: 5px;
  cursor: pointer; }
  .radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 19px;
    height: 19px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #e8ebf2;
    border-radius: 50%;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out; }
  .radio label::after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 9px;
    height: 9px;
    left: 5px;
    top: 5px;
    margin-left: -20px;
    border-radius: 50%;
    background-color: #898989;
    -webkit-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
.radio input[type="radio"] {
  opacity: 0; }
  .radio input[type="radio"]:focus + label::before {
    outline-offset: -2px; }
  .radio input[type="radio"]:checked + label::after {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); }
  .radio input[type="radio"]:disabled + label {
    opacity: 0.65; }
    .radio input[type="radio"]:disabled + label::before {
      cursor: not-allowed; }
.radio .radio-inline {
  margin-top: 0; }

.radio-primary input[type="radio"] + label::before {
  border-color: #0288d1; }
.radio-primary input[type="radio"] + label::after {
  background-color: #0288d1; }
.radio-primary input[type="radio"]:checked + label::before {
  border-color: #0288d1; }
.radio-primary input[type="radio"]:checked + label::after {
  background-color: #0288d1; }

/**=====================
     27. Radio CSS Ends
==========================**/
/**=====================
     28. Form Input CSS Start
==========================**/

.pill-input-group div:last-child span {
  border-top-right-radius: 1.3rem;
  border-bottom-right-radius: 1.3rem; }
.pill-input-group div:first-child span {
  border-top-left-radius: 1.3rem;
  border-bottom-left-radius: 1.3rem; }

/**=====================
     28. Form Input CSS Ends
==========================**/
/**=====================
   29. Data-table CSS Start
==========================**/

table.dataTable input, table.dataTable select {
  border-radius: 15px; }

.table-responsive,
.dataTables_wrapper {
  padding: 0;
  width: 100%; }
  .table-responsive .btn-group button,
  .dataTables_wrapper .btn-group button {
    margin-right: 5px; }
  .table-responsive button,
  .dataTables_wrapper button {
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    background-color: #0288d1;
    border: none;
    padding: 0.375rem 20px;
    border-radius: 20px; }
  .table-responsive a.btn-pill,
  .dataTables_wrapper a.btn-pill {
    white-space: nowrap;
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    background-color: #0288d1;
    border: none;
    padding: 0.375rem 20px;
    border-radius: 20px; }
  .table-responsive a.btn-xs,
  .dataTables_wrapper a.btn-xs {
    white-space: nowrap; }
  .table-responsive + .dataTables_wrapper,
  .dataTables_wrapper + .dataTables_wrapper {
    margin-top: 20px; }
  .table-responsive table.dataTable,
  .dataTables_wrapper table.dataTable {
    border: 1px solid #efefef; }
    .table-responsive table.dataTable thead th, .table-responsive table.dataTable thead td,
    .dataTables_wrapper table.dataTable thead th,
    .dataTables_wrapper table.dataTable thead td {
      border-bottom: 2px solid #efefef; }
    .table-responsive table.dataTable th, .table-responsive table.dataTable td,
    .dataTables_wrapper table.dataTable th,
    .dataTables_wrapper table.dataTable td {
      padding: 0.75rem; }
table .box > div {
  padding: 5px 15px;
  background-color: #0288d1;
  display: inline-block;
  color: #fff;
  border-radius: 5px;
  margin-bottom: 15px;
  margin-right: 15px; }
table.dataTable:not(.fixedHeader-locked):not(.fixedHeader-floating) {
  width: 100% !important; }
table.dataTable {
  border-collapse: collapse !important;
  margin-top: 0 !important; }
  table.dataTable thead .sorting:before, table.dataTable thead .sorting:after {
    bottom: 12px !important; }
  table.dataTable input, table.dataTable select {
    border: 1px solid #efefef;
    height: 37px; }

.toolbar {
  padding: 5px 15px;
  background-color: #0288d1;
  display: inline-block;
  color: #fff;
  border-radius: 5px;
  margin-bottom: 15px;
  margin-right: 15px; }

code.option {
  color: #fd517d !important; }
code.api {
  color: #80cf00 !important; }

td.highlight {
  background-color: #f8f5fd !important; }

/**=====================
    29. Data-table CSS Ends
==========================**/
/**=====================
     30. JS datagrid CSS Start
==========================**/

/**=====================
     30. JS datagrid CSS Ends
==========================**/
/**=====================
     31. pagination CSS Start
==========================**/
/*test Nav bar color */

/**=====================
     31. pagination CSS Ends
==========================**/
/**=====================
    32.  Ecommerce  CSS Start
==========================**/
/**====== Product Start ======**/

/**====== Product  Ends ======**/

/**=====================
    32. Ecommerce  CSS End
==========================**/
/**=====================
     33. Pricing CSS Start
==========================**/
/**=====================
    33. Pricing CSS Ends
==========================**/
/**=====================
     34. Form builder css start
==========================**/
.form-builder .help-block {
  margin-bottom: 0;
  color: #cccccc;
  text-transform: capitalize; }
.form-builder .btn-light {
  color: #cccccc; }
.form-builder .nav-primary .nav-link.active, .form-builder .nav-primary .nav-primary .show > .nav-link, .form-builder .nav-primary .nav-pills.nav-primary .nav-link.active, .form-builder .nav-primary .nav-pills.nav-primary .show > .nav-link {
  border-radius: 15px; }
.form-builder .nav-primary .nav-link, .form-builder .nav-primary .nav-pills.nav-primary .nav-link {
  color: #000;
  font-weight: 500; }
.form-builder #components {
  margin-top: 30px; }

/**=====================
    34. Form builder css Ends
==========================**/
/**=====================
     35. NAV CSS Start
==========================**/

/**=====================
     35. NAV CSS Ends
==========================**/
/**=====================
    36. Dropdown CSS Start
==========================**/

/**=====================
    36. Dropdown CSS Ends
==========================**/
/**=====================
     37. Landing CSS Start
==========================**/
@keyframes move-img {
  0% {
    background-position: 0; }
  100% {
    background-position: 100%; } }
@keyframes move-img1 {
  0% {
    background-position: 100%; }
  50% {
    background-position: 50%; }
  100% {
    background-position: 0; } }
@keyframes move-img_before {
  0% {
    background-position: 0; }
  100% {
    background-position: 100%; } }
@keyframes rotated {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }
@keyframes animationFramesTwo {
  0% {
    transform: translate(0px, 0px) rotate(0deg) scale(1); }
  20% {
    transform: translate(73px, -1px) rotate(36deg) scale(0.9); }
  40% {
    transform: translate(141px, 72px) rotate(72deg) scale(1); }
  60% {
    transform: translate(83px, 122px) rotate(108deg) scale(1.2); }
  80% {
    transform: translate(-40px, 72px) rotate(144deg) scale(1.1); }
  100% {
    transform: translate(0px, 0px) rotate(0deg) scale(1); } }
@keyframes animationFramesOne {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg); }
  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg);
    transform: translate(73px, -1px) rotate(36deg); }
  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg);
    transform: translate(141px, 72px) rotate(72deg); }
  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg);
    transform: translate(83px, 122px) rotate(108deg); }
  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg);
    transform: translate(-40px, 72px) rotate(144deg); }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg); } }
@keyframes rotatedTwo {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes rotatedTwo1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    transform: rotate(180deg); } }
@keyframes animationFramesTwo {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1);
    transform: translate(0px, 0px) rotate(0deg) scale(1); }
  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg) scale(0.9);
    transform: translate(73px, -1px) rotate(36deg) scale(0.9); }
  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg) scale(1);
    transform: translate(141px, 72px) rotate(72deg) scale(1); }
  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg) scale(1.2);
    transform: translate(83px, 122px) rotate(108deg) scale(1.2); }
  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg) scale(1.1);
    transform: translate(-40px, 72px) rotate(144deg) scale(1.1); }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1);
    transform: translate(0px, 0px) rotate(0deg) scale(1); } }

/**=====================
     38. Landing CSS Ends
==========================**/
/** Resonsive css start landing page**/
@media screen and (min-width: 1440px) {
  .container {
    max-width: 1410px; } }
/**=====================
     38. Table  CSS Start
==========================**/

.table {
  margin-bottom: 0px; }
  .table th, .table td {
    padding: 0.75rem; }
  .table th {
    color: #1b3155; }
  .table td {
    color: #1b3155; }
  .table [class*='bg-'] {
    color: #fff; }
  .table .bg-light {
    color: #1b3155; }
  .table tfoot {
    font-weight: bold; }

.table[class*='bg-'] th, .table[class*='bg-'] td {
  color: #fff; }

.table-hover tbody tr:hover {
  background-color: #fdfeff; }

.table-sm th, .table-sm td {
  padding: 0.5rem 2rem;
  font-size: 90%; }

.table-xs th, .table-xs td {
  padding: 0.5rem 1rem;
  font-size: 90%; }

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(245, 247, 250, 0.5); }

.table-bordered td, .table-bordered th {
  border-color: #fdfeff; }

/**=====================
     38.Table CSS Ends
==========================**/
/**=====================
    39. Chart CSS Start
==========================**/

.flot-chart-container {
  box-sizing: border-box;
  width: 100%;
  height: 400px; }

.apex-chart {
  margin: 0 auto; }

/**=====================
     39. Chart CSS End
==========================**/
/**=====================
     40. Timeline CSS Start
==========================**/
.activity .media {
  margin-bottom: 30px; }
  .activity .media:last-child {
    margin-bottom: 0; }
  .activity .media .media-body h6 {
    font-weight: 600;
    margin-bottom: 30px; }
    .activity .media .media-body h6 span {
      font-weight: normal;
      color: #999; }
  .activity .media .media-body p {
    width: 80%; }

.timeline-small .media {
  margin-bottom: 30px; }
  .timeline-small .media:last-child {
    margin-bottom: 0; }
  .timeline-small .media .timeline-round {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    top: -8px;
    left: -20px; }
    .timeline-small .media .timeline-round svg {
      position: absolute;
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      left: 0;
      top: 18px;
      right: 0;
      margin: 0 auto; }
      .timeline-small .media .timeline-round svg path, .timeline-small .media .timeline-round svg line, .timeline-small .media .timeline-round svg circle {
        color: #fff; }
    .timeline-small .media .timeline-round.timeline-line-1:after {
      position: absolute;
      content: '';
      background-color: #e9e9e9;
      width: 2px;
      height: 60px;
      bottom: -60px;
      left: 0;
      right: 0;
      margin: 0 auto; }
  .timeline-small .media .media-body h6 {
    font-weight: 600;
    margin-bottom: 22px; }
    .timeline-small .media .media-body h6 span {
      font-weight: normal; }
  .timeline-small .media .media-body p {
    width: 80%; }

header {
  height: 200px;
  line-height: 200px;
  text-align: center;
  background: #2c323f; }
  header h1 {
    color: #fff;
    font-size: 18px; }

@media only screen and (min-width: 1170px) {
  header {
    height: 300px;
    line-height: 300px; }
    header h1 {
      font-size: 24px; } }

@-webkit-keyframes cd-bounce-1 {
  0% {
    opacity: 0; }
  60% {
    opacity: 1; } }
@-moz-keyframes cd-bounce-1 {
  0% {
    opacity: 0; }
  60% {
    opacity: 1; } }
@keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    transform: scale(0.5); }
  60% {
    opacity: 1;
    transform: scale(1.2); }
  100% {
    transform: scale(1); } }
@-webkit-keyframes cd-bounce-2 {
  0% {
    opacity: 0; }
  60% {
    opacity: 1; } }
@-moz-keyframes cd-bounce-2 {
  0% {
    opacity: 0; }
  60% {
    opacity: 1; } }
@keyframes cd-bounce-2 {
  0% {
    opacity: 0;
    transform: translateX(-100px); }
  60% {
    opacity: 1;
    transform: translateX(20px); }
  100% {
    transform: translateX(0); } }
@-webkit-keyframes cd-bounce-2-inverse {
  0% {
    opacity: 0; }
  60% {
    opacity: 1; } }
@-moz-keyframes cd-bounce-2-inverse {
  0% {
    opacity: 0; }
  60% {
    opacity: 1; } }
@keyframes cd-bounce-2-inverse {
  0% {
    opacity: 0;
    transform: translateX(100px); }
  60% {
    opacity: 1;
    transform: translateX(-20px); }
  100% {
    transform: translateX(0); } }
/**=====================
     40. Timeline  CSS Ends
==========================**/
/**=====================
    41. Timeline 2 CSS Start
==========================**/

/**=====================
     41. Timeline 2 CSS Ends
==========================**/
/**=====================
    42. Tabs CSS Start
==========================**/
.nav-pills .nav-link.active > .nav-link {
  background-color: #0288d1;
  border-radius: 15px; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: #0288d1;
  border-radius: 15px; }

.nav i {
  margin-right: 10px; }

.nav-primary .nav-link, .nav-pills.nav-primary .nav-link {
  color: #0288d1; }
.nav-primary .nav-link.active, .nav-primary .show > .nav-link, .nav-pills.nav-primary .nav-link.active, .nav-pills.nav-primary .show > .nav-link {
  background-color: #0288d1;
  color: #fff; }

.nav-right {
  justify-content: flex-end; }

.tab-content ~ .nav-tabs.nav-material {
  margin-bottom: 0;
  margin-top: 30px; }

.nav-material.nav-tabs {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin-bottom: 30px; }
  .nav-material.nav-tabs .nav-item .nav-link {
    font-size: 16px;
    color: #2c323f;
    text-align: center;
    padding: 10px 25px;
    border: 0; }
  .nav-material.nav-tabs .nav-link.active, .nav-material.nav-tabs .nav-item.show, .nav-material.nav-tabs .nav-link:focus, .nav-material.nav-tabs .nav-link:hover {
    color: #0288d1; }
  .nav-material.nav-tabs .material-border {
    border-bottom: 2px solid #0288d1;
    transition: all 0.3s ease;
    opacity: 0; }
  .nav-material.nav-tabs .nav-link.active ~ .material-border {
    transition: all 0.3s ease;
    opacity: 1; }

.nav-material.nav-right .nav-link {
  border-right: 2px solid transparent;
  transition: all 0.3s ease;
  color: #2c323f;
  text-align: right; }
.nav-material.nav-right .nav-link.active, .nav-material.nav-right .show > .nav-link {
  background-color: transparent;
  border-right-color: #0288d1;
  color: #0288d1;
  border-radius: 0;
  transition: all 0.3s ease; }

.nav-material.nav-primary .nav-link.active, .nav-material.nav-primary .nav-item.show, .nav-material.nav-primary .nav-link:focus, .nav-material.nav-primary .nav-link:hover {
  color: #0288d1;
  background-color: transparent; }
.nav-material.nav-primary .material-border {
  border-bottom: 2px solid #0288d1; }

.nav-material.nav-right.nav-primary .nav-link.active, .nav-material.nav-right.nav-primary .show > .nav-link {
  border-right-color: #0288d1;
  color: #0288d1; }

/**=====================
     42. Tabs CSS Ends
==========================**/
/**=====================
     43. Gallery CSS Start
==========================**/
@-webkit-keyframes flash {
  0% {
    opacity: .4; }
  100% {
    opacity: 1; } }
@keyframes flash {
  0% {
    opacity: .4; }
  100% {
    opacity: 1; } }
@-webkit-keyframes shine {
  100% {
    left: 125%; } }
@keyframes shine {
  100% {
    left: 125%; } }

@-webkit-keyframes circle {
  0% {
    opacity: 1; }
  40% {
    opacity: 1; }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0; } }
@keyframes circle {
  0% {
    opacity: 1; }
  40% {
    opacity: 1; }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0; } }
* {
  box-sizing: border-box; }
  *:after, *:before {
    box-sizing: border-box; }

.grid {
  position: relative; }

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both; }

/* ---- .grid-item ---- */

/**=====================
     43. Gallery CSS Ends
==========================**/
/**=====================
    44. Blog CSS start
==========================**/

/**=====================
    44. Blog CSS ends
==========================**/
/**=====================
     45. Footer CSS Start
==========================**/

footer {
  background-color: #fff;
  padding: 15px;
  bottom: 0;
  left: 0; }
  footer a {
    font-weight: 600; }

.page-wrapper .page-body-wrapper footer {
  transition: .6s;
  bottom: 0;
  z-index: 9;
  position: relative;
  box-shadow: 19px 8px 16px 7px rgba(21, 141, 247, 0.05); }
  .page-wrapper .page-body-wrapper footer p {
    color: #000;
    font-weight: 600; }
    .page-wrapper .page-body-wrapper footer p i {
      color: #e7474e;
      text-shadow: 2px 2px 4px rgba(231, 71, 78, 0.5);
      margin-left: 5px; }

/**=====================
     45. Footer CSS Ends
==========================**/
/**=====================
     46. Form Wizard CSS Start
==========================**/
/*Form Wizard One Start*/
.form-wizard .tab {
  display: none; }
.form-wizard .step {
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #0288d1;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5; }
  .form-wizard .step.active {
    opacity: 1; }
  .form-wizard .step.finish {
    background-color: #26c6da; }
.form-wizard .form-control {
  border-radius: 15px; }
.form-wizard .btn {
  border-radius: 15px; }

/*Form Wizard One ends*/
/*Form Wizard Two Start*/
.stepwizard {
  display: table;
  width: 100%;
  position: relative;
  margin-bottom: 30px; }
  .stepwizard .stepwizard-row {
    display: table-row; }
    .stepwizard .stepwizard-row:before {
      top: 16px;
      bottom: 0;
      position: absolute;
      content: " ";
      width: 100%;
      height: 1px;
      background-color: #e8ebf2; }
    .stepwizard .stepwizard-row .stepwizard-step {
      display: table-cell;
      text-align: center;
      position: relative; }
      .stepwizard .stepwizard-row .stepwizard-step p {
        margin-top: 10px; }
      .stepwizard .stepwizard-row .stepwizard-step button[disabled] {
        opacity: 1 !important;
        filter: alpha(opacity=100) !important; }

.setup-content .nextBtn {
  border-radius: 15px; }
.setup-content .form-control {
  border-radius: 15px; }

/*Form Wizard Two Ends*/
/*Form Wizard Three Start*/

/*Form Wizard Three ends*/
/*Form Wizard Four Start*/

/*Form Wizard Four Ends*/
/**=====================
    46. Form Wizard CSS Ends
==========================**/
/**=====================
    47. Badge CSS start
==========================**/
.badge {
  padding: 0.44em 0.7em; }
  .badge + .badge {
    margin-left: 5px; }
  .badge svg {
    width: 10px;
    height: 12px; }

.btn .badge {
  position: relative;
  top: -1px;
  display: inline-flex;
  align-items: center;
  justify-content: center; }

.pill-badge-secondary {
  background-color: #26c6da;
  box-shadow: -0.5px 4.33px 16px 0px rgba(38, 198, 218, 0.25);
  color: #fff; }

/**=====================
    47. Badge CSS Ends
==========================**/
/**=====================
     48. Tree  CSS Start
==========================**/

/**=====================
     48. Tree CSS Ends
==========================**/
/**=====================
     51. Search CSS Start
==========================**/

/**=====================
    51. Search CSS Ends
==========================**/
/**=====================
    52. Datepicker CSS Start
==========================**/

.daterangepicker.ltr {
  color: #898989;
  z-index: 8; }
  .daterangepicker.ltr tr {
    font-size: 13px; }
    .daterangepicker.ltr tr td {
      height: 34px;
      width: 34px; }
      .daterangepicker.ltr tr td.active {
        background-color: #faf6ff; }
  .daterangepicker.ltr .ranges {
    float: none; }
    .daterangepicker.ltr .ranges li {
      color: #0288d1; }
      .daterangepicker.ltr .ranges li:hover {
        background-color: #0288d1;
        border: 1px solid #0288d1;
        color: #fff; }
      .daterangepicker.ltr .ranges li.active {
        background-color: #0288d1;
        border: 1px solid #0288d1;
        color: #fff; }

.daterangepicker:before {
  border-bottom: 7px solid #efefef; }
.daterangepicker th, .daterangepicker td {
  height: 34px;
  width: 34px;
  background-color: #faf6ff;
  color: #0288d1; }
  .daterangepicker th:hover, .daterangepicker td:hover {
    color: #2c323f; }
  .daterangepicker th.prev, .daterangepicker th.next, .daterangepicker td.prev, .daterangepicker td.next {
    color: #fff;
    height: 34px;
    width: 34px;
    background-color: #0288d1; }
  .daterangepicker th.month, .daterangepicker td.month {
    color: #0288d1;
    letter-spacing: 1px;
    text-transform: uppercase; }

/**=====================
   52. Datepicker CSS End
==========================**/
/**=====================
     54. Tour  CSS Start
==========================**/

/**=====================
    54. Tour  CSS Ends
==========================**/
/**=====================
   59. theme layout CSS Start
==========================**/

.bg-light {
  background-color: #f8f5fd; }

.bg-dark {
  background-color: #2f3c4e; }

/**=====================
   59. theme layout CSS ends
==========================**/
/**=====================
    56.  Ribbon CSS Start
==========================**/
.ribbon-wrapper {
  position: relative;
  padding-top: 40px; }

.ribbon {
  padding: 0 20px;
  height: 30px;
  line-height: 30px;
  clear: left;
  position: absolute;
  top: 12px;
  left: 0px;
  color: #fff;
  z-index: 2; }

.ribbon-vertical-right {
  clear: none;
  padding: 0 5px;
  height: 70px;
  width: 30px;
  line-height: 70px;
  text-align: center;
  top: -2px;
  left: auto;
  right: 12px; }

.ribbon-primary {
  background: #0288d1; }

.ribbon-primary {
  background: #0288d1; }

/**=====================
     56. Ribbon CSS Ends
==========================**/
/**=====================
    57. breadcrumb CSS Start
==========================**/
.page-wrapper .page-body-wrapper .page-header {
  padding-top: 50px;
  padding-bottom: 50px; }
  .page-wrapper .page-body-wrapper .page-header .row {
    align-items: center; }
    .page-wrapper .page-body-wrapper .page-header .row .main-header h2 {
      color: #0288d1;
      font-weight: 800; }
      .page-wrapper .page-body-wrapper .page-header .row .main-header h2 span {
        color: #000;
        padding-left: 5px; }
    .page-wrapper .page-body-wrapper .page-header .row .main-header h6 {
      display: block;
      text-transform: uppercase;
      color: #0288d1;
      letter-spacing: 4px;
      font-weight: 700; }
    .page-wrapper .page-body-wrapper .page-header .row .breadcrumb-right .breadcrumb {
      background-color: transparent;
      padding: 0;
      margin-top: 5px;
      margin-bottom: 0;
      float: right; }
      .page-wrapper .page-body-wrapper .page-header .row .breadcrumb-right .breadcrumb li {
        color: #0288d1;
        letter-spacing: 0.5px; }
        .page-wrapper .page-body-wrapper .page-header .row .breadcrumb-right .breadcrumb li i {
          font-weight: 700; }
      .page-wrapper .page-body-wrapper .page-header .row .breadcrumb-right .breadcrumb > li:nth-child(2) {
        font-weight: 700; }
      .page-wrapper .page-body-wrapper .page-header .row .breadcrumb-right .breadcrumb > li:nth-child(3) {
        font-weight: 400; }

/**=====================
    57. breadcrumb CSS ends
==========================**/
/**=====================
    58. Steps  CSS Start
==========================**/

/**=====================
    58. Steps  CSS ends
==========================**/
/**=====================
   59. Customizer  CSS Start
==========================**/

.icon-close {
  font-weight: 700;
  position: absolute;
  right: 20px;
  color: #2c323f; }

.layout-grid:not(.customizer-color) li {
  padding: 5px; }
  .layout-grid:not(.customizer-color) li > .header {
    height: 9px;
    border-radius: 3px;
    position: relative; }
    .layout-grid:not(.customizer-color) li > .header ul {
      position: absolute;
      top: -8px;
      left: 5px; }
      .layout-grid:not(.customizer-color) li > .header ul > li {
        display: inline-block;
        width: 4px;
        height: 4px;
        border-radius: 5px;
        top: calc(50% - 3px);
        background-color: #fd517d;
        margin-right: 1px;
        padding: 0; }
        .layout-grid:not(.customizer-color) li > .header ul > li:nth-child(2) {
          background-color: #ffc717; }
        .layout-grid:not(.customizer-color) li > .header ul > li:nth-child(3) {
          background-color: #80cf00; }
  .layout-grid:not(.customizer-color) li > .body {
    background-color: #f8f5fd;
    height: calc(100% - 16px);
    border-radius: 3px;
    position: relative;
    margin-top: 5px;
    text-align: center;
    line-height: 3.1; }
    .layout-grid:not(.customizer-color) li > .body ul {
      height: 100%;
      background-color: #fff; }
      .layout-grid:not(.customizer-color) li > .body ul .sidebar {
        width: 18px;
        height: 100%;
        border-radius: 3px;
        display: inline-block;
        margin-right: 3px;
        padding: 0; }
        .layout-grid:not(.customizer-color) li > .body ul .sidebar.compact {
          width: 12px; }
          .layout-grid:not(.customizer-color) li > .body ul .sidebar.compact ~ .body {
            width: calc(100% - 19px); }
      .layout-grid:not(.customizer-color) li > .body ul .body {
        width: calc(100% - 25px);
        padding: 0;
        margin: 0;
        height: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 3px; }
        .layout-grid:not(.customizer-color) li > .body ul .body .badge {
          position: absolute;
          font-size: 15px; }

/**=====================
     59.Customizer CSS Ends
==========================**/
/**=====================
     61. Faq CSS start
==========================**/
/**=====================
     61. Faq CSS end
==========================**/
/**=====================
     62. knowledgebase CSS start
==========================**/
.browse {
  margin-bottom: -30px; }

.latest .card .card-body {
  padding: 30px; }

@media only screen and (max-width: 1366px) {
  .browse div[class^="col-"]:nth-child(3) {
    margin-top: 30px; } }
@media only screen and (max-width: 991px) {
  .browse {
    margin-bottom: -20px; } }
@media only screen and (max-width: 575px) {
  .browse {
    margin-bottom: -15px; } }
/**=====================
     62. knowledgebase CSS end
==========================**/
/**=====================
    63.  Document CSS Start
==========================**/
.document p {
  font-size: 16px; }
.document.page-wrapper .page-main-header {
  margin-left: 255px;
  width: calc(100% - 255px);
  background-color: #0288d1; }
  .document.page-wrapper .page-main-header .main-header-right {
    padding: 0 0; }
  .document.page-wrapper .page-main-header .mobile-sidebar .media-body .switch a svg line {
    color: #fff; }
  .document.page-wrapper .page-main-header svg line {
    color: #fff; }
.document.page-wrapper .page-body-wrapper .page-body {
  padding-top: 35px !important;
  min-height: calc(100vh - 81px);
  margin-top: 81px;
  padding: 0 15px;
  position: relative;
  margin-left: 255px; }
.document.page-wrapper .page-body-wrapper footer {
  margin-left: 255px; }

/**=====================
    63. Document CSS Ends
==========================**/
/**=====================
     64. Job CSS start
==========================**/

.job-accordion .card-body {
  padding: 30px; }
.job-accordion .card {
  margin-bottom: 30px;
  border-radius: 15px;
  overflow: hidden; }
.job-accordion .btn-block {
  border-top-left-radius: 0;
  border-top-right-radius: 0; }
/**=====================
     64. Job CSS end
==========================**/
/**=====================
     65. Learning CSS start
==========================**/

.categories {
  padding: 30px 0; }
  .categories ul li {
    padding: 10px 30px; }
    .categories ul li a {
      color: #1b3155; }
    .categories ul li:hover {
      background-color: #f8f5fd; }

.job-accordion {
  margin-bottom: 0; }
@media only screen and (max-width: 991px) {
  .categories {
    padding: 20px 0; }
    .categories ul li {
      padding: 10px 20px; } }
@media only screen and (max-width: 575px) {
  .categories {
    padding: 15px 0; }
    .categories ul li {
      padding: 10px 15px; } }
/**=====================
     65. Learning CSS end
==========================**/
/**=====================
     66. Order History CSS start
==========================**/
/**=====================
     66. Order History CSS end
==========================**/
/**=====================
     67. internationalization css start
==========================**/

/**=====================
     67. internationalization CSS end
==========================**/
/**=====================
     81. social app css start
==========================**/

/**=====================
     81. social app CSS end
==========================**/
/**=====================
    49. avatars CSS start
==========================**/
.avatars .avatar {
  display: inline-block;
  margin-right: 10px;
  position: relative; }
  .avatars .avatar:last-child {
    margin-right: 0; }
  .avatars .avatar .height-50 {
    height: 50px; }
  .avatars .avatar .status {
    position: absolute;
    background-color: #999;
    bottom: 0;
    right: 4px;
    border-radius: 100%;
    border: 1px solid #fff; }

/**=====================
    49. avatars CSS Ends
==========================**/
/**=====================
    50. Bookmark CSS start
==========================**/
.bookmark.pull-right {
  border: 1px solid #d0d5dd;
  border-radius: 8px; }

.bookmark ul li {
  display: inline-block; }
  .bookmark ul li a {
    position: relative;
    color: #1b3155; }
    .bookmark ul li a svg {
      vertical-align: middle;
      height: 18px;
      width: 18px;
      margin: 12px 18px; }
  .bookmark ul li:first-child {
    padding-left: 0; }
  .bookmark ul li:last-child {
    padding-right: 0;
    background-color: #0288d1;
    border-radius: 8px; }
    .bookmark ul li:last-child a {
      border-radius: 5px; }
      .bookmark ul li:last-child a svg {
        color: #fff; }

/**=====================
   50. Bookmark CSS Ends
==========================**/
/**=====================
     53. typahead-search  CSS Start
==========================**/

.u-cf:before {
  content: " ";
  display: table; }
.u-cf:after {
  content: " ";
  display: table;
  clear: both; }

.ProfileCard-avatar i {
  font-size: 20px;
  margin-top: -2px; }

.ProfileCard {
  position: relative;
  padding: 8px;
  border: none !important; }
  .ProfileCard:hover {
    color: #414345;
    background: #f8f8f8; }
    .ProfileCard:hover .ProfileCard-avatar {
      border-color: #f5f8fa; }

.ProfileCard-avatar {
  position: absolute;
  border-radius: 5px; }

.ProfileCard-details {
  padding-left: 30px;
  float: left; }

.ProfileCard-realName {
  display: inline-block;
  font-weight: 500; }

.EmptyMessage {
  position: relative;
  padding: 10px;
  font-size: 14px;
  line-height: 30px;
  text-align: center; }

/**=====================
     53. typahead-search CSS Ends
==========================**/
/**=====================
    68. Dashboard CSS Start
==========================**/
.general-widget .card-header {
  padding: 35px 50px; }
  .general-widget .card-header .card-header-right {
    top: 27px; }
.general-widget .table th {
  border-top: none;
  font-size: 16px;
  padding: 18px 0.75rem;
  border-bottom: 1px solid #dee2e6;
  border-top: 1px solid #dee2e6; }
.general-widget .table tr:last-child td {
  border-bottom: none; }
.general-widget .table tr td {
  border-bottom: 1px solid #f1f1f1;
  vertical-align: middle;
  padding: 0.85rem; }
.general-widget .table tr th:first-child, .general-widget .table tr td:first-child {
  padding-left: 50px; }
.general-widget .table tr th:last-child, .general-widget .table tr td:last-child {
  padding-right: 50px; }

.welcome-popup .modal-content {
  background-image: url(../images/dashboard/popup.png);
  background-repeat: no-repeat;
  background-position: top center;
  border-radius: 30px;
  box-shadow: 2px 12px 26px 3px rgba(47, 46, 46, 0.3); }
.welcome-popup .close {
  z-index: 9;
  position: absolute;
  background-color: #fff;
  color: #0288d1;
  opacity: 1;
  border-radius: 15px;
  padding: 10px 15px;
  left: -20px;
  top: -10px;
  box-shadow: -2px 6px 11px 3px rgba(2, 136, 209, 0.3); }
.welcome-popup .modal-header {
  height: 190px;
  border: none; }
.welcome-popup .contain {
  padding-top: 80px; }

.position-set {
  position: absolute;
  right: 50px;
  top: 45px; }

.setting-bg-primary {
  width: 30px;
  height: 30px;
  background-color: rgba(2, 136, 209, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%; }
  .setting-bg-primary i {
    font-size: 16px;
    color: #0288d1; }

.year-overview .card-header {
  justify-content: space-between; }

.tag-card .tag-hover-effect {
  opacity: 0;
  transition: 1.5s; }
.tag-card:hover .tag-hover-effect {
  opacity: 1; }

.dots-group .dots1 {
  width: 8px;
  height: 8px;
  bottom: 0;
  right: 6%; }
.dots-group .dots2 {
  right: 15%;
  bottom: -1%; }
.dots-group .dots3 {
  right: 1%;
  bottom: 9%; }
.dots-group .dots4 {
  right: 5%;
  bottom: 20%; }
.dots-group .dots5 {
  right: 7%;
  bottom: 10%; }
.dots-group .dots6 {
  right: 9%;
  bottom: 29%; }
.dots-group .dots7 {
  right: -1%;
  bottom: 22%; }
.dots-group .dots8 {
  right: 14%;
  bottom: 12%; }
.dots-group .dots9 {
  right: 20%;
  bottom: 34%; }
.dots-group .dot-small {
  width: 4px;
  height: 4px; }
.dots-group .dot-small-semi {
  width: 5px;
  height: 5px; }
.dots-group .dot-medium {
  width: 6px;
  height: 6px; }
.dots-group .dots {
  position: absolute;
  background-color: #fff;
  border-radius: 100%; }

.overview-dots .dots-group .dots1 {
  right: 4%; }
.overview-dots .dots-group .dots2 {
  right: 10%;
  bottom: 0%; }
.overview-dots .dots-group .dots3 {
  bottom: 6%; }
.overview-dots .dots-group .dots4 {
  right: 4%;
  bottom: 11%; }
.overview-dots .dots-group .dots5 {
  bottom: 6%; }
.overview-dots .dots-group .dots6 {
  right: 5%;
  bottom: 17%; }
.overview-dots .dots-group .dots7 {
  right: -0.5%;
  bottom: 12%; }
.overview-dots .dots-group .dots8 {
  right: 13%;
  bottom: 7%; }
.overview-dots .dots-group .dots9 {
  right: 12%;
  bottom: 21%; }

.default-dots-stay .dots-group .dots9 {
  bottom: 20%; }

.date-picker-setting {
  background-color: rgba(255, 255, 255, 0.1); }
  .date-picker-setting i {
    color: #fff; }

.default-datepicker {
  border-radius: 40px; }
  .default-datepicker .datepicker-here, .default-datepicker .datepicker-inline, .default-datepicker .datepicker {
    border-radius: 40px; }
  .default-datepicker .datepicker-inline .datepicker {
    width: auto;
    background: transparent;
    box-shadow: none;
    padding: 0; }
    .default-datepicker .datepicker-inline .datepicker .datepicker--nav {
      border-bottom: none;
      padding: 0;
      text-transform: capitalize;
      margin-top: -12px; }
      .default-datepicker .datepicker-inline .datepicker .datepicker--nav .datepicker--nav-action {
        display: none; }

.static-top-widget {
  margin: -50px;
  padding: 40px; }
  .static-top-widget:hover .icon-bg {
    transform: rotate(-5deg) scale(1.1);
    transition: all 0.3s ease; }
  .static-top-widget div.align-self-center svg {
    width: 40px;
    height: 40px;
    margin-top: 4px; }
  .static-top-widget .media-body {
    align-self: center !important;
    padding-left: 30px; }
    .static-top-widget .media-body h4 {
      font-family: work-Sans, sans-serif; }
    .static-top-widget .media-body .icon-bg {
      position: absolute;
      right: -14px;
      top: 6px;
      opacity: 0.2;
      transition: all 0.3s ease;
      width: 100px;
      height: 100px;
      stroke: #fff; }

.bg-info .media.static-top-widget .align-self-center {
  background-color: #06b5dd; }

.bg-primary .media.static-top-widget .align-self-center {
  background-color: #0288d1; }

.bg-secondary .media.static-top-widget .align-self-center {
  background-color: #26c6da; }

.bg-danger .media.static-top-widget .align-self-center {
  background-color: #fd517d; }

 .min {
  position: absolute;
  width: 24px;
  height: 234px;
  top: 0;
  left: 102px;
  margin-top: -30px;
  margin-left: -25px; }
.cal-date-widget .datepicker {
  padding: 0;
  border-radius: 20px;
  box-shadow: none;
  width: 95%; }
.cal-date-widget .datepicker--nav-action {
  width: 45px;
  border-radius: 15px; }
.cal-date-widget .datepicker--nav {
  min-height: 55px; }

.flot-chart-container {
  height: 350px; }

@-webkit-keyframes am-moving-dashes {
  100% {
    stroke-dashoffset: -30px; } }
@keyframes am-moving-dashes {
  100% {
    stroke-dashoffset: -30px; } }
@-webkit-keyframes am-pulsating {
  0% {
    stroke-opacity: 1;
    stroke-width: 0; }
  100% {
    stroke-opacity: 0;
    stroke-width: 50px; } }
@keyframes am-pulsating {
  0% {
    stroke-opacity: 1;
    stroke-width: 0; }
  100% {
    stroke-opacity: 0;
    stroke-width: 50px; } }
@-webkit-keyframes am-draw {
  0% {
    stroke-dashoffset: 500%; }
  100% {
    stroke-dashoffset: 0; } }
@keyframes am-draw {
  0% {
    stroke-dashoffset: 500%; }
  100% {
    stroke-dashoffset: 0; } }

.custom-radio-ml {
  margin-left: 3px; }

.daterangepicker .ltr tr td.active {
  color: #fff; }

.btn-showcase a {
  color: #fff; }

.card-block .table-responsive .table caption {
  padding-left: 10px; }
.card-block .table-responsive .table-bordered td {
  vertical-align: middle; }

@media only screen and (max-width: 1440px) {
  .tag-card .dots-group .dots1 {
    right: 4%; }
  .tag-card .dots-group .dots2 {
    right: 10%; }
  .tag-card .dots-group .dots4 {
    right: 4%;
    bottom: 20%; }
  .tag-card .dots-group .dots6 {
    right: 7%;
    bottom: 31%; }
  .tag-card .dots-group .dots7 {
    right: -0.5%; }
  .tag-card .dots-group .dots9 {
    right: 14%;
    bottom: 34%; }

  .full-width-dots .dots-group .dots1 {
    right: 2%; }
  .full-width-dots .dots-group .dots2 {
    right: 5%; }
  .full-width-dots .dots-group .dots3 {
    right: 0.5%; }
  .full-width-dots .dots-group .dots4 {
    right: 2%;
    bottom: 11%; }
  .full-width-dots .dots-group .dots5 {
    right: 3%; }
  .full-width-dots .dots-group .dots6 {
    bottom: 16%;
    right: 3%; }
  .full-width-dots .dots-group .dots7 {
    right: -0.2%; }
  .full-width-dots .dots-group .dots8 {
    right: 6%; }
  .full-width-dots .dots-group .dots9 {
    right: 6%;
    bottom: 19%; } }
@media only screen and (max-width: 1199px) {
  .page-wrapper .page-body-wrapper .iconsidebar-menu .iconMenu-bar .iconbar-mainmenu {
    box-shadow: 0 16px 15px 15px rgba(21, 141, 247, 0.05); } }
@media only screen and (max-width: 991px) {
  .tag-card .dots-group .dots8 {
    display: none; }

  .card .card-header ul.creative-dots li.big-dot {
    left: -25px;
    width: 40px;
    height: 40px; }
  .card .card-header ul.creative-dots li.semi-big-dot {
    width: 25px;
    height: 25px;
    top: 33px; }
  .card .card-header ul.creative-dots li.medium-dot {
    width: 15px;
    height: 15px; }
  .card .card-header ul.creative-dots li.semi-medium-dot {
    width: 8px;
    height: 8px;
    left: 14px;
    top: 32px; }
  .card .card-header ul.creative-dots li.semi-small-dot {
    width: 6px;
    height: 6px;
    left: 26px;
    top: 18px; }
  .card .card-header ul.creative-dots li.small-dot {
    display: none; }

  .position-set {
    right: 30px;
    top: 24px; } }
@media only screen and (max-width: 767px) {
  .tag-card .dots-group .dots1, .tag-card .dots-group .dots6 {
    right: 3%; }
  .tag-card .dots-group .dots2 {
    right: 7%; }
  .tag-card .dots-group .dots4 {
    right: 2%; }
  .tag-card .dots-group .dots5 {
    right: 4%; }
  .tag-card .dots-group .dots9 {
    right: 9%;
    bottom: 35%; }

  .full-width-dots .dots-group .dots1 {
    bottom: 0.5%; }
  .full-width-dots .dots-group .dots7 {
    right: -0.4%; } }
@media only screen and (max-width: 575px) {
  .dots-group .dots1 {
    bottom: 1%; }

  .full-width-dots .dots-group .dots1 {
    bottom: 1.5%; }

  .position-set {
    right: 25px;
    top: 18px; }

  .card .card-header ul.creative-dots li.big-dot {
    left: -16px;
    width: 30px;
    height: 30px; }
  .card .card-header ul.creative-dots li.semi-big-dot {
    width: 20px;
    height: 20px;
    top: 22px;
    left: -12px; }
  .card .card-header ul.creative-dots li.medium-dot {
    width: 12px;
    height: 12px; }
  .card .card-header ul.creative-dots li.semi-medium-dot {
    width: 6px;
    height: 6px;
    left: 12px;
    top: 27px; }
  .card .card-header ul.creative-dots li.semi-small-dot {
    width: 4px;
    height: 4px;
    left: 22px;
    top: 14px; }

   .full-width-dots .dots-group .dots2 {
    right: 7%;
    bottom: -0.2%; }

  .year-overview .card-header {
    display: block !important; }
    .year-overview .card-header .text-right {
      text-align: left !important;
      float: none;
      margin-top: 20px; } }
@media only screen and (max-width: 360px) {

  .footer {
    padding-left: 0;
    padding-right: 0 !important; }
    .footer p {
      font-size: 12px; }

  .page-header h2 {
    font-size: 24px; }

  .dots-group .dot-medium {
    width: 4px;
    height: 4px; }
  .dots-group .dot-small {
    width: 2px;
    height: 2px; }
  .dots-group .dot-small-semi {
    width: 3px;
    height: 3px; } }
/**=====================
 68. Dashboard CSS Ends
==========================**/
/**=====================
    70 Dashboard Crypto CSS Start
    ==========================**/

.card-bg {
  background-image: url(../images/dashboard/bg.jpg);
  background-blend-mode: overlay;
  background-color: #f6f3fa; }
  .card-bg.card .card-header {
    background-color: transparent;
    z-index: 9; }
  .card-bg .media {
    position: absolute;
    bottom: 15px;
    z-index: 9;
    left: 15px;
    width: calc(100% - 35px);
    align-items: center; }
    .card-bg .media h5 {
      color: #fff;
      font-weight: 700;
      padding-top: 12px;
      margin-left: 10px; }

.year-overview .card-body {
  padding: 0 50px; }

@keyframes btc-dashoffset {
  0% {
    stroke-dashoffset: 22px; }
  100% {
    stroke-dashoffset: 0; } }

.btc-buy-sell .btc-amount {
  padding: 12px 10px;
  border-radius: 8px;
  background-color: rgba(21, 141, 247, 0.1); }
  .btc-buy-sell .btc-amount span {
    color: #000000; }
.btc-buy-sell li {
  padding-bottom: 38px; }
  .btc-buy-sell li:nth-child(2) .btc-amount {
    background-color: rgba(2, 136, 209, 0.1); }
  .btc-buy-sell li:nth-child(3) .btc-amount {
    background-color: rgba(255, 199, 23, 0.1); }

.btc-sell .btn:nth-child(2) {
  z-index: 1; }
.btc-sell .btn {
  padding: 12px 50px;
  margin-right: -40px;
  position: relative;
  z-index: 9;
  background-color: rgba(38, 198, 218, 0.1);
  box-shadow: -0.5px 4.33px 16px 0px rgba(38, 198, 218, 0.25); }

.btc-table .card-header {
  padding: 45px 50px !important; }
.btc-table .card-body {
  padding: 40px 50px; }

@media screen and (min-device-width: 1366px) and (max-device-width: 1440px) {
  .xl-50 {
    max-width: 50%;
    flex: 0 0 50%; }

  .xl-100 {
    max-width: 100%;
    flex: 0 0 100%; } }
@media screen and (max-width: 575px) {

  .btc-table .card-header {
    padding-bottom: 36px !important; }
  .btc-table .btc-sell .btn {
    padding: 12px 40px;
    z-index: 1;
    margin-right: -30px; } }
@media screen and (max-width: 360px) {
  .btc-table .card-header {
    padding: 45px 35px !important; } }
/**=====================
   70. Dashboard Crypto  CSS End
    ==========================**/
/**=====================
    69. Dashboard ecommerce css starts
==========================**/
.ecommerce-chart-card .card-body {
  padding: 30px 55px; }

.ecommerce-small-chart {
  align-items: center;
  display: flex; }
  .ecommerce-small-chart .small-bar {
    position: relative; }
    .ecommerce-small-chart .small-bar .flot-chart-container {
      height: 80px;
      width: 80px; }
      .ecommerce-small-chart .small-bar .flot-chart-container svg {
        position: absolute;
        bottom: 14px;
        width: 100%;
        height: 95%;
        left: -6px; }
  .ecommerce-small-chart .media-body h6 {
    color: #fff; }
  .ecommerce-small-chart .media-body h4 {
    color: #fff;
    font-weight: 600; }

@keyframes ball-scale-ripple-multiple {
  0% {
    transform: scale(0.1);
    opacity: 1; }
  50% {
    transform: scale(1);
    opacity: 0.15; }
  100% {
    opacity: 0.0; } }
.crypto-revenue .card-body {
  padding-bottom: 10px; }
.crypto-revenue .card-header {
  justify-content: space-between;
  border-bottom: none; }
  .crypto-revenue .card-header h5 .badge {
    margin-left: 35px;
    background-color: rgba(38, 198, 218, 0.1);
    color: #26c6da;
    padding: 7px 20px; }
  .crypto-revenue .card-header .header-right h6 {
    color: #26c6da; }

@media screen and (max-width: 1366px) {
  .sale-chart {
    position: absolute;
    right: 60px; } }
@media screen and (max-width: 1199px) {
  .ecommerce-chart-card .card-body {
    padding: 30px 20px; } }
@media screen and (max-width: 991px) {
  .sale-chart {
    position: absolute;
    right: 40px; } }
@media screen and (max-width: 575px) {
  .sale-chart {
    position: absolute;
    right: 32px; }

  .card .card-header h5 {
    font-size: 17px; }

  .crypto-revenue .card-header {
    display: block !important; }
    .crypto-revenue .card-header .text-right {
      text-align: left !important;
      float: none;
      margin-top: 20px; }
    .crypto-revenue .card-header h5 .badge {
      margin-left: 5px; } }
/**=====================
     69. Dashboard ecommerce  CSS Ends
==========================**/
/**=====================
    71. Rating CSS start
==========================**/

/**=====================
    71. Rating CSS Ends
==========================**/
/**=====================
   72. Box-layout CSS start
==========================**/

.rtl .box-layout.page-wrapper .page-main-header {
  max-width: 1280px;
  padding-right: 250px;
  padding-left: unset; }
  .rtl .box-layout.page-wrapper .page-main-header.open {
    max-width: 1280px; }
.rtl .box-layout.page-wrapper .page-body-wrapper footer {
  margin-right: 566px;
  margin-left: unset;
  padding-left: 15px; }
  .rtl .box-layout.page-wrapper .page-body-wrapper footer p i {
    margin-right: 5px;
    margin-left: unset; }

/**=====================
   72. Box-layout CSS ends
==========================**/
/**=====================
    73. RTL CSS Start
==========================**/

/**=====================
    73. RTL CSS Ends
==========================**/
