@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

html, body{
 font-family: "Montserrat", sans-serif;
}

ul {padding:0px; margin:0px;}
ul li {list-style:none;}
h2 {font-size:16px; font-weight:600;color:var (--nav-color);}

body {background:var(--white);background-color:var(--white) !important;font-family: "Montserrat", sans-serif !important;}
/* :root {
  --red: #ffddd3;
  --reddish-brown: #bc9c9c; 
  --white: #ffffff; 
  --border: #e2e8f0; 
  --greay: #7a7a7b; 
  --black: #000000; 
  --nav-color: #072100; 
  --red-tranparent: #ffdada; 
  --field-border: #ffb7b8; 
  --field-shadow: #c9555647; 
  --hover-standard: #e3e3e3; 
  --switch-bg: #E2E1FF; 
  --green: #48C83A; 
  --yellow: #ffe533; 
  --heading1: #f38585; 
  --know-circle: #ffe1d9; 
  --know-circle1: #ffddd3;
  --know-plus1: #f38585;
  --know-plus2: #f38585;
  --cart-hover: #ffeee9; 
  --cart-btn-hover1: #f9c9bb; 
  --hover: #ff7c5d; 
} */

:root {
  --red: #dadbf4;
  --reddish-brown: #bc9c9c; 
  --white: #ffffff; 
  --border: #e2e8f0; 
  --greay: #7a7a7b; 
  --black: #000000; 
  --nav-color: #072100; 
  --red-tranparent: #ebebf8; 
  --field-border: #2bbaff; 
  --field-shadow: #1b8da140; 
  --hover-standard: #e3e3e3; 
  --switch-bg: #E2E1FF; 
  --green: #48C83A; 
  --yellow: #ffe533; 
  --heading1: #797ccf; 
  --know-circle: #ebebf8; 
  --know-circle1: #cfcfe9;
  --know-plus1: #797ccf;
  --know-plus2: #797ccf;
  --cart-hover: #ffeee9; 
  --cart-btn-hover1: #dadbf4; 
  --hover: #797ccf; 
  --hover-new: #f1f1f1; 
  --heading-bg: #dadbf4; 
  --bg-main: #797ccf; 
}

/* :root {
  --red: #d4edf9;
  --reddish-brown: #bc9c9c; 
  --white: #ffffff; 
  --border: #e2e8f0; 
  --greay: #7a7a7b; 
  --black: #000000; 
  --nav-color: #072100; 
  --red-tranparent: #dff5ff; 
  --field-border: #2bbaff; 
  --field-shadow: #1b8da140; 
  --hover-standard: #e3e3e3; 
  --switch-bg: #E2E1FF; 
  --green: #48C83A; 
  --yellow: #ffe533; 
  --heading1: #2bbaff; 
  --know-circle: #dff5ff; 
  --know-circle1: #cbeff5;
  --know-plus1: #2bbaff;
  --know-plus2: #2bbaff;
  --cart-hover: #ffeee9; 
  --cart-btn-hover1: #d4edf9; 
  --hover: #2bbaff; 
  --hover-new: #f1f1f1; 
  --heading-bg: #d4edf9; 
  --bg-main: #2bbaff; 
} */

*, :before, :after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
}

.authentication {
    min-height: 100vh;
}
.shadow{
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow) !important;
}

.hover{
  cursor: pointer;
}


.oi-field1 {
	font-size: 14px !important;
    border-radius: 3px;
    width: 100%;
    background-color: var(--white);
    border: 1px solid var(--border);
    font-weight: 500;
    height: 45px;
    line-height: 45px;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow) !important;
    font-family: "Montserrat", sans-serif !important;font-weight: 500 !important;
}
.oi-field1:focus {box-shadow: 0 0 0 3px var(--field-shadow) !important;border: var(--field-border) solid 1px;border-color: var(--red) !important;}



.oi-btn1 {
    border-radius: 3px;
    width: 100%;
    background-color: var(--bg-main) !important;
    border: 1px solid var(--bg-main) !important;
	  color: var(--white) !important;
    font-weight: 500 !important;
    height: 45px;
    line-height: 30px;
}
.oi-btn1:hover {border: 1px solid var(--bg-main) !important; color: var(--bg-main) !important;background:var(--white) !important;}
.oi-btn1:focus {box-shadow: 0 0 0 3px var(--field-shadow) !important;border:var(--field-border) solid 1px !important;}

.oi-label1 {
	font-size:16px; font-weight:500;margin-bottom:10px;
}
.box {
    box-shadow: 0 3px 5px #0000000b;
    background-color: #fff;
    border: 1px solid var(--border);
    border-radius: 3px;
    position: relative;
}
.box--stacked:before {
    content: "";
    z-index: -1;
    box-shadow: 0 1px 2px #0000000d;
    height: 100%;
    background-color: #f8fafc;
    border: 1px solid var(--border);
    position: absolute;
    border-radius: 3px;
    left: .875rem;
    right: .875rem;
    top: 0;
    margin-top: .75rem
}

.oi-font-sz18 {font-size:18px;}

/* Start Css */


/* Login page start */
.oi-login-main {}
.login-bg {background-image: url(../img/login-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}


.oi-login-form {width:100%;}
.oi-login-logo {margin-bottom:20px;}
.oi-login-logo img {height:50px;}
.oi-login-form h2 {font-weight:600;font-size:22px;margin-bottom:25px;}
.oi-login-form-inner {}
.oi-login-form-inner {}
.show-password-button {
    position: absolute;
    padding: 10px 15px;
    inset-block-start: 0;
    inset-inline-end: 0;
}

/* Login page End */


/* Header Start */
.oi-header-user-fltr {display:flex;align-items:center;justify-content:flex-end;margin-top: 11px;gap:4px;}
.oi-header-user-fltr .oi-user-mn {}
.oi-header-user-fltr .oi-user-mn .btn-group {}
.oi-header-user-fltr .oi-user-mn .btn-group .btn {background:none;padding: 0px;border:none;}
.oi-header-user-fltr .oi-user-mn .btn-group .btn:focus {box-shadow:none;}
.oi-header-user-fltr .oi-user-mn .btn-group .btn:after {display:none;}
.oi-header-user-fltr .oi-user-mn .btn-group .btn .user-avtar {border:2px solid var(--red-tranparent);border-radius:50%;}
.oi-header-user-fltr .oi-user-mn .btn-group .btn .user-avtar img {width:35px;height:35px;border-radius:50%;}
.oi-header-user-fltr .oi-user-mn .btn-group .dropdown-menu {padding-top: 0;
  border-radius: 10px;
  border: none;
  box-shadow: 0px 3px 5px 0px #a1a1a1;z-index: 999999999999;width: 280px;}
.oi-header-user-fltr .oi-user-mn .btn-group .dropdown-menu li {}
.oi-header-user-fltr .oi-user-mn .btn-group .dropdown-menu li a {}
.oi-userdrop-mn {box-shadow: 0 3px 5px #0000000b;background-color: var(--white);border: 1px solid var(--border);}

.oi-userdrop-mn {width: 300px;padding-top: 0;border-radius: 12px;}
.oi-usernewtop1 {position: relative;text-align: center;}
.oi-usernewtop1:before {
    background: var(--red-tranparent);
    content: "";
    width: 100%;
    position: absolute;
    height: 50px;
    z-index: 0;
    left: 0;
    top: 0;
    border-radius: 10px 10px 0 0;
}
.oi-usernewtop1 .user-avtar {
    width: 50px;
    height: 50px;
    margin: 20px auto auto;
    position: relative;
    display: inline-block;
}
.oi-usernewtop1 .user-avtar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;border:3px solid var(--white);
}
.oi-usernewtop1 .oi-usertop-text h4 {
    font-weight: 600;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 0;
    color: var(--black);
}
.oi-usernewtop1 .oi-usertop-text p {
    color: var(--greay);
    font-size: 12px;
    margin-bottom: 0;
    line-height: normal;
    font-weight: 500;
}

.oi-user-list {width:100%;margin-top:5px;}
.oi-user-list ul {width:100%;padding: 0px;}
.oi-user-list ul li {display:inline-block;width:100%;}
.oi-user-list ul li a {color:var(--black);width:100%;padding:5px 15px;display:inline-block;text-decoration:none;font-size:16px;font-weight:500;}
.oi-user-list ul li a:hover {background:var(--hover-standard);}


.oi-header-search {
  min-height:40px; border-radius:3px;margin-top:10px;padding:0px;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;

}
.oi-header-search:hover {box-shadow: 0 0 0 3px var(--field-shadow) !important;border: var(--field-border) solid 1px;}
.oi-header-search:focus {box-shadow: 0 0 0 3px var(--field-shadow) !important;border: var(--field-border) solid 1px;}
.oi-search1 {
	font-size: .875rem;
    border-radius: 0.375rem;
    width: 100%;
    background-color: var(--white);
    border: none;
    font-weight: 500;
    height: 38px;
    line-height: 38px;
}
.oi-search1:focus {box-shadow: none;border: none;}
.oi-header-search .btn {}
.oi-header-search .btn:focus {box-shadow:none;}

.oi-header-search .form-control {display:inline-block;border: none;}
.oi-header-search .form-control:focus {box-shadow: none;}
.oi-header-search .form-control:focus {border: none;}
.oi-head-serach-btn {height: 50px;margin-right: 5px;}
.oi-head-serach-btn button {border: none;
    background: var(--white);
    display: inline-block;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 10px;text-align: center;
    margin-top: 5px;
    margin-left: 5px; background: #C5CAE9;}
.oi-head-serach-btn button:focus {box-shadow:none;}
.oi-head-serach-btn button:hover {background: var(--bg-main);}
.oi-head-serach-btn button svg {width:24px;}
.oi-head-serach-btn button svg path {stroke:var(--bg-main);}
.oi-head-serach-btn button:hover svg path {stroke:var(--white);}
.oi-search-hd-main {width:100%;}

/* Header End */



/* Dashboard page Start */
.oi-page-main {}
.oi-header-left {}
.oi-header-main {height:65px;position:fixed;top:0px;width:100%;border-radius:0px;    border-top: none;z-index: 999;border-right: 0;  border-left: 0;}
.oi-left-main {top: 0px;z-index: 99999999;bottom: 0;position: fixed;height:100%;    box-shadow: 0 3px 5px #0000000b;background-color: #fff;border: 1px solid var(--border);border-top: none;}



.side-panel {
    /* Your side panel styles */
    width: 90px; /* Example width */
    height: 100%; /* Example height */
    
    transition: width 0.3s ease; /* Transition for smooth width change */
}

/* .side-panel:hover {
    width: 260px; 
} */

.oi-header-in-main {
  /* padding-left:90px; */
  width:100%;height:65px;padding-right: 15px;}
.oi-left-logo-mn {box-shadow: 0 3px 5px #0000000b;background-color: #fff;border: 1px solid var(--border);border-right:0px;border-top:0px;border-left:0px;height: 65px;overflow:hidden;cursor: pointer;}
.oi-left-logo-mn .logo {display:inline-block;width: 60px;text-align:center;margin-right: 10px;}
.oi-left-logo-mn .logo img {width: 45px;margin: 9px 10px 8px 22px;}
.oi-left-logo-mn .text {display:none;font-family: "Open Sans", sans-serif;color:var(--grey);font-size:24px;font-weight:600;}
.side-panel:hover .oi-left-logo-mn .text {display:inline-block;margin-left: 5px;}

.oi-menu-left {padding:15px 0px;}
.oi-menu-left ul {width:100%; padding-left: 0rem !important;}
.oi-menu-left ul li {width:100%;    padding: 0 20px;}
.oi-menu-left ul li a {text-decoration: none;
    width: 100%;
    display: inline-block;
    height: 45px;
    border-radius: 3px;
    padding: 0px 15px;
    line-height: 44px;
    margin-bottom: 0px;
    text-align: left;
    overflow: hidden;}
.oi-menu-left ul li a .icon {width:20px;display:inline-block;overflow:hidden;}
.oi-menu-left ul li a .icon svg {width:18px;}
.oi-menu-left ul li a .icon svg {stroke:var(--nav-color);stroke-width:1.6px;}
.oi-menu-left ul li a .text {color:var(--nav-color);font-size:14px;font-weight:500;display:none;overflow:hidden;line-height: 41px;margin-left: 8px;}
.oi-menu-left ul li a:hover {background:var(--hover-new);}
.oi-menu-left ul li a.active {background:var(--red);}
.oi-menu-left ul li a.active .text {color:var(--black);}
.oi-menu-left ul li a.active .icon svg {stroke:var(--black);}
.oi-menu-left ul li a:hover .icon svg {stroke:var(--black);}
.oi-menu-left ul li a:hover .text {color:var(--black);}
.side-panel:hover .oi-menu-left ul li a .text {display:inline-block;overflow:hidden;}




.oi-main-dshd {}
.oi-main-dshd h2 {margin-top:5px;margin-bottom:0px;font-size: 16px;font-weight: 600;color: var(--heading1);}
.oi-kn-bx1 {margin-top:15px;text-align:center;}
.oi-kn-bx1 .btn {background:var(--know-circle1); border-radius:50%;width:65px; height:65px;border:none;}
.oi-kn-bx1 .btn svg {width:22px;}
.oi-kn-bx1 .btn path {stroke:var(--know-plus1);}
.oi-kn-bx1 .btn:active {background:var(--red) !important;}
.oi-kn-bx1 .btn:hover {background:var(--red) !important; color:var(--white) !important;}
.oi-kn-bx1 .btn:active path  {stroke:var(--white);}
.oi-kn-bx1 .btn:hover path  {stroke:var(--white);}
.oids-boxtxt {text-align:center;color:var(--black);margin-top:10px;font-weight:500;font-size: 14px;}
.oi-kn-bx2 {margin-top:15px;text-align:center;}
.oi-kn-bx2 .tittle-text {font-size:16px;font-weight:600;color:var(--white);;}
.oi-kn-bx2 .oidate {font-size:14px;font-weight:500;color:var(--white);;}
.oi-active1:hover {background:var(--hover-new);border:solid var(--white) 1px;} 

.oi-dsh-min-heigh {min-height:200px;}
.oi-kn-bx3 {margin-top:15px;text-align:center;margin-bottom: 25px;}
.oi-kn-bx3 h3 {font-size:14px;font-weight:500;color:var(--black);}
.oi-kn-bx3:hover .btn {background:var(--bg-main);opacity: inherit;}
.oi-kn-bx3:hover .btn svg {}
.oi-kn-bx3:hover .btn svg path {stroke: var(--white);stroke-width: 2px;}
.oi-kn-bx3 .btn {background:var(--know-circle); border-radius:50%;width:65px; height:65px;border:none;margin-top:30px; opacity: .4;}
.oi-kn-bx3 .btn svg {width:22px;}
.oi-kn-bx3 .btn path {stroke:var(--know-plus2);}
.oi-kn-bx3 .btn:active {background:var(--red);}
.oi-kn-bx3 .btn:hover {background:var(--red);}
.oi-kn-bx3 .btn:active path  {stroke:var(--white);}
.oi-kn-bx3 .btn:hover path  {stroke:var(--white);}


/* .oi-ad-collect-mdl {padding:15px;} */
.oi-ad-collect-mdl h3 {font-weight:600;font-size:18px;color:var(--red);}
.oi-ad-collect-mdl h3 span {float:right;}
.oi-ad-collect-mdl h3 span img {height:18px;cursor:pointer;}
/* .oi-add-collec-field {margin-top:10px;} */
.oi-add-collec-field label {font-size:14px;font-weight:500;margin-bottom:5px;}
.oi-add-collec-field .form-control {height:35px;}
.oi-add-collec-field .btn {margin-top: 10px;width: 80px;height: 35px;line-height: 15px;opacity: inherit !important;}


/* Dashboard page End */


.imgloader{
  position: absolute;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(0 0 0 / 15%);
  text-align: center;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 89.8vh;
  img{
      width:12%;
  }
}

.oi-select-fld1 {text-align: right;margin-top: 15px; margin-right: 0px;}
/* :host ::ng-deep { */
  .oi-select-fld1 .p-element {text-decoration: none;} 
  .oi-select-fld1 .p-element .p-dropdown {text-decoration: none;border: 1px solid #e2e8f0;border-radius: 3px;    width: 200px;} 
  .oi-select-fld1 .p-element .p-focus {box-shadow: none;}
  .oi-select-fld1 .p-element .p-dropdown .p-element {   font-size: 14px;padding-top: 5px;padding-bottom: 5px;text-align: left;} 
  .oi-select-fld1 .p-element .p-dropdown .p-element svg {width: 12px;}
  .oi-select-fld1 .p-element .p-dropdown .p-icon-wrapper {} 
  .oi-select-fld1 .p-element .p-dropdown .p-icon-wrapper svg {} 
  .oi-select-fld1 .p-element .p-dropdown .p-dropdown-trigger {} 
  .oi-select-fld1 .p-element .p-dropdown .p-dropdown-trigger .p-icon-wrapper {text-decoration: none;} 
  .oi-select-fld1 .p-element .p-dropdown .p-dropdown-trigger .p-icon-wrapper svg {text-decoration: none;} 
  .oi-select-fld1 .p-element .p-dropdown {}

  .p-dropdown-panel {text-decoration: none;}
  .p-dropdown-items-wrapper {width: 200px;}
  .p-dropdown-items-wrapper::-webkit-scrollbar {
    width: 4px; 
  }
 
  .p-dropdown-items-wrapper::-webkit-scrollbar-track {
      background:#CFCFCF;border-radius:10px;
  }
  
  .p-dropdown-items-wrapper::-webkit-scrollbar-thumb {
    background-color: #878A99;border-radius:10px;

  }
  .p-dropdown-items-wrapper ul {padding: 0px;text-align: left;}
  .p-dropdown-items-wrapper ul li {font-size: 13px !important;}
  .p-dropdown-items-wrapper ul li span {    width: 160px;
    display: inline-block;
    word-wrap: break-word;
    white-space: normal;}
  .p-highlight {background: #e8e8e8;color: #4b5563;font-weight: 500;}
/* } */




.oi-main-page {top: 65px;margin-left: 105px;position: relative;padding-right: 15px;}
.no-sidebar {
  margin-left: 0 !important;
}




/* Get-Answers Start */
.oi-get-answer-mn {}
.oi-get-answer-mn h2 {font-size: 12px;
  text-align: center;
  font-weight: 500;
  color: var(--black);}
.oi-get-answer-api {margin-top:10px;position: relative;}
/* Get-Answers End */



/* Save Answers Start */
.oi-save-answer-mn {}
.oi-save-answer-mn h2 {font-size:16px;text-align:center;font-weight:700;}
.oi-save-ans-bx-main {margin-top:45px;width: 100%;}
.oi-save-ans-top {text-align:right;}
.oi-save-ans-switch {display:inline-block;height: 18px;}
.oi-save-ans-switch .switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 18px;top: 3px;
}

.oi-save-ans-switch .switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.oi-save-ans-switch .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--switch-bg);
  -webkit-transition: .4s;
  transition: .4s;
}

.oi-save-ans-switch .switch .slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.oi-save-ans-switch .switch input:checked + .slider {
  background-color: var(--green);
}

.oi-save-ans-switch .switch input:focus + .slider {
  box-shadow: 0 0 1px var(--green);
}

.oi-save-ans-switch .switch input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

/* Rounded sliders */
.oi-save-ans-switch .switch .slider.round {
  border-radius: 50px;
}

.oi-save-ans-switch .switch .slider.round:before {
  border-radius: 50%;
}

.oi-sav-answer-star {display:inline-block;    margin-left: 10px;}
.oi-sav-answer-star i {color:var( --yellow);}
.oi-save-ans-date {display:inline-block;margin-left:10px;font-size:12px;font-weight:600;}
.oi-qns-ans-box {padding:10px;margin-top:5px;width: 100%; background: #f3f4f6;}
.oi-qns-ans-box .oi-sav-qns {font-weight:600;font-size:14px;margin-bottom:5px;padding-right: 65px;}
.oi-qns-ans-box .oi-sav-ans {font-weight:500;font-size:12px;}

/* Save Answers End */




/* History Start */


.oi-history-mn {}
.oi-history-mn h2 {font-size:16px;text-align:center;font-weight:700;}
.oi-history-bx-main {margin-top:25px;}
.oi-history-top {text-align:right;}
.oi-hist-switch .oi-hs-text1 {display:inline-block;}
.oi-hist-switch {    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    position: relative;
    top: 17px;float: right;}
.oi-hist-switch .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 18px;
    top: 0px;
    margin-left: 10px;
}

.oi-hist-switch .switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.oi-hist-switch .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #a6a6a6;
  -webkit-transition: .4s;
  transition: .4s;
}

.oi-hist-switch .switch .slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.oi-hist-switch .switch input:checked + .slider {
  background-color: var(--green);
}

.oi-hist-switch .switch input:focus + .slider {
  box-shadow: 0 0 1px var(--green);
}

.oi-hist-switch .switch input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

/* Rounded sliders */
.oi-hist-switch .switch .slider.round {
  border-radius: 50px;
}

.oi-hist-switch .switch .slider.round:before {
  border-radius: 50%;
}

.oi-history-star {display:inline-block;    margin-left: 10px;}
.oi-history-star i {color:var( --yellow);}
.oi-history-date {display:inline-block;margin-left:10px;font-size:12px;font-weight:500;}
.oi-history-box {padding:10px;margin-top:5px;}
.oi-history-box .oi-history-qns {font-weight:600;font-size:14px;margin-bottom:5px;}
.oi-history-box .oi-history-ans {font-weight:500;font-size:12px;}
.oi-history-box .oi-history-qns span {float:right;}
.oi-hs-source {display:inline-block;font-size:12px;font-weight:500;}
.oi-hs-tag {display:inline-block;text-align:right;margin-left:20px;}
.oi-hs-tag a {background:#E3E1FF;border:#D0CDFD;color:#000;font-size:10px;text-decoration:none;display:inline-block;margin-left:5px;padding:3px 10px;}
.oi-hs-tag a:hover {background:var(--red);color:var(--white);}

/* History End */


/* Upload Document Start */
.oi-upload-dc-main {background:var(--white);padding:0px;margin-top: 15px;}
.oi-upload-dc-main h3 {font-weight: 600;font-size: 18px;color: var(--red);margin-bottom:15px;}
.oi-upload-dc-main h3 span {float: right;}
.oi-upload-dc-main h3 span img {height: 18px;cursor: pointer;}
.oi-upload-lft {border:2px dashed var(--red);padding:15px;border-radius:10px;text-align:center;}
.google-drive {};
.google-drive img {}
.google-drive h4 {font-weight:600;font-size:16px;margin-top:20px;}
.oi-gd-cp-or {font-weight:600;font-size:14px;}
.oi-file-upload-btn {position: relative;overflow: hidden;display: inline-block;margin-top:15px;}
.oi-file-upload-btn .btn {border: 1px solid var(--red);
  color: var(--white);
  background:var(--bg-main);
  padding: 5px 20px;
  border-radius: 3px;
  font-size: 16px;
  font-weight: 500;}
.oi-file-upload-btn input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.oi-file-text {font-size:14px;font-weight:500;margin-top:10px;}
.oi-file-name {max-height: 192px;overflow-y: auto;overflow-x: hidden;}
.oi-file-name ul {padding-left: 0px;}
.oi-file-name ul li {font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  }
.oi-file-name ul li span {    background: var(--red);
  border: 1px solid var(--field-border);
  color: var(--black);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  margin-right: 10px;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;}
.oi-file-nm-submt {margin-top: 15px;}
.oi-file-nm-submt .btn {border: 1px solid var(--bg-main);
  color: var(--white);
  background:var(--bg-main);
  padding: 5px 20px;
  border-radius: 3px;
  font-size: 16px;
font-weight: 500;}
.oi-file-nm-submt .btn:hover {border: 1px solid var(--hover);color: var(--hover);background:var(--white);}

/* Upload Document End */


/*Design Fixed Start*/
.sidefixd {width:260px;}
.sidefixd .oi-left-logo-mn .text {
    display: inline-block;
    margin-left: 5px;
}
.sidefixd .oi-menu-left ul li a .text {
    display: inline-block;
    overflow: hidden;
}
.pagefixd {margin-left: 260px;}
.page-header-wrapper h3 {color: var(--bg-main);}


table {margin-bottom: 10px;}
table tr {}
table tr th {border: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
  background: #dadbf4;
  color: var(--black);
  padding: 10px 15px;}
table tr td {border: 1px solid var(--border);
  font-weight: 500;
  font-size: 12px;
  padding: 7px 15px;}

  img {max-width: 100%;}
  p {word-wrap: break-word;}
  ul {}
  ul li {list-style: circle;}

/*Design Fixed End*/

@media (max-width:767px) {
  .oi-main-page {margin-left: 90px;padding-right: 0px;}
  .oi-header-user-fltr .oi-user-mn .btn-group .dropdown-menu {width: 230px;}
  .oi-file-name {margin-top: 10px;}
}