Gecko [ dp-client.com ]

Name	Size	Permission
comnon.css	8.97 KB	-rw-r--r--
dashbord.css	17.82 KB	-rw-r--r--
datatables2.0.8.min.css	25.37 KB	-rw-r--r--
index.css	13.77 KB	-rw-r--r--

Code Editor : dashbord.css

/*****aside bar css */
.sidebar {
    background-color: #F7F8FA;
    bottom: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    transition: all 0.2s ease;
    width: 282px;
    z-index: 1000;
    padding: 40px 24px 0 24px;
  }
  .con-icons {
    width: 32px;
    height: 32px;
    background-color: #D4C3F8;
    border-radius: 50%;
    font: 500 16px / 21px "DM Sans";
    margin-right: 12px;
  }
  .sidebar-menu {
    margin-top: 40px;
  }
  .sidebar-li {
    padding: 16px 0;
    border-top: 1px solid #E4E7EB;
  }
  .sidebar-li.active .sidebar-link {
    border-radius: 8px;
    background: rgba(138, 151, 170, 0.10);
  }
  .sidebar-link {
    padding: 8px 16px;
    display: flex;
    color: var(--black);
  }
  .col-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .footer-sidebar {
    color: var(--gray);
    padding-bottom: 1rem;
  }
  /* asside bar css */
  /***** dashbord css ****/
  .page-container {
    min-height: 100vh;
    padding-left: 284px;
    background-color: #fff;
    transition: all 0.2s ease;
  }
  .header-page {
    justify-content: center;
    text-transform: capitalize;
    min-height: 112px;
    width: calc(100% - 284px);
    position: fixed;
    transition: all 0.2s ease;
    padding: 0 24px;
    background-color: #fff;
    z-index: 1;
  }
  .header-page .f-14 {
    color: #8A97AA;
  }
  .body-dashbord {
    padding-top: 112px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 60px;
  }
  /****** tab *********/
  .tabBlock-content>.tabBlock-pane {
    display: none;
  }
  .tabBlock-content>.tabBlock-pane.is-active {
    display: block;
  }
  .tabBlock-tab {
    cursor: pointer;
  }
  .dash-tab {
    display: flex;
    gap: 3px;
  }
  .dash-li {
    padding: 8px 16px;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #E4E7EB;
    background: rgba(138, 151, 170, 0.10);
    border-bottom: 0;
  }
  .dash-li.is-active {
    background: #fff;
  }
  /****** tab ***********/
  /*******  checkbox or radio   ********/
  input[type=checkbox] {
    position: relative;
    border: 2px solid #E4E7EB;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    line-height: 0;
    margin: 0 .1em 0 0;
    outline: 0;
    padding: 0 !important;
    vertical-align: text-top;
    height: 24px;
    width: 24px;
    -webkit-appearance: none;
  }
  input[type=checkbox]:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--primary);
    width: 14px;
    height: 14px;
    opacity: 0;
  }
  input[type=checkbox]:checked:before {
    opacity: 1;
  }
  /*******  checkbox or radio   ********/
  /************ table design ************/
  /* table custom design */
  .exportdata {
    margin: 32px 0;
  }
  .dashbord-btn {
    display: inline-block;
    color: #8A97AA;
    border-radius: 8px;
    padding: 8px 16px;
    border: 1.4px solid #E4E7EB;
  }
  .tabledata-start {
    font: normal 14px / 21px "DM Sans";
    color: var(--black);
  }
  .tabledata-start .dt-search {
    position: absolute;
    left: 0;
    top: -70px;
  }
  .tabledata-start div.dt-container .dt-search .dt-input {
    width: 300px;
    padding: 8px 16px 8px 32px;
    border-radius: 8px;
    border: 1.4px solid #E4E7EB;
    position: relative;
    margin: 0;
  }
  .tabledata-start div.dt-container .dt-search label {
    display: none;
  }
  .tabledata-start div.dt-container .dt-search .dt-input {
    background: url('../icons/icon-search-regular.svg') no-repeat scroll 6px 7px;
    /*padding-left: 32px;*/
    background-size: 24px 24px;
    /* Adjust based on the size of the icon */
  }
  .tabledata-start div.dt-container div.dt-layout-cell.dt-start {
    width: fit-content;
    padding: 0;
  }
  .tabledata-start div.dt-container div.dt-layout-row.dt-layout-table {
    padding-bottom: 30px;
  }
  .tabledata-start table.dataTable thead th,
  .tabledata-start table.dataTable tfoot th {
    font-weight: normal;
  }
  .tabledata-start tr {
    border-bottom: 1px solid #E4E7EB;
  }
  .tabledata-start table.dataTable>tbody>tr>th,
  .tabledata-start table.dataTable>tbody>tr>td,
  .tabledata-start table.dataTable>thead>tr>th,
  .tabledata-start table.dataTable>thead>tr>td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 0px solid rgba(0, 0, 0, 0.3);
  }
  .tabledata-start table.dataTable thead>tr>th.dt-orderable-asc:hover,
  .tabledata-start table.dataTable thead>tr>th.dt-orderable-desc:hover,
  .tabledata-start table.dataTable thead>tr>td.dt-orderable-asc:hover,
  .tabledata-start table.dataTable thead>tr>td.dt-orderable-desc:hover {
    outline: 0;
    outline-offset: 0;
  }
  table.dataTable.display>tbody>tr:nth-child(odd)>.sorting_1,
  table.dataTable.order-column.stripe>tbody>tr:nth-child(odd)>.sorting_1,
  table.dataTable.stripe>tbody>tr:nth-child(even)>*,
  table.dataTable.display>tbody>tr:nth-child(even)>*,
  table.dataTable.stripe>tbody>tr:nth-child(odd)>*,
  table.dataTable.display>tbody>tr:nth-child(odd)>* {
    box-shadow: none;
  }
  table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after,
  table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
  table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after,
  table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
    content: url(../icons/icon_drop-arrow.svg);
    transform: scale(1.75);
  }
  table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before,
  table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
  table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before,
  table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before {
    content: url(../icons/icon_drop-arrow.svg);
    transform: scale(1.75) rotate(180deg);
  }
  table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before,
  table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:after,
  table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:before,
  table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after,
  table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
  table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:after,
  table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:before,
  table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
  table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before,
  table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:after,
  table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:before,
  table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after,
  table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,
  table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:after,
  table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:before,
  table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
    opacity: .5;
  }
  table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
  table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
  table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,
  table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
    opacity: 1;
  }
  .dt-column-title {
    margin-right: 10px;
  }
  span.dt-column-order {
    right: unset !important;
  }
  div.dt-container.dt-empty-footer tbody>tr:last-child>* {
    border-bottom: 0;
  }
  .tabledata-start div.dt-container .dt-info {
    width: fit-content;
    padding: 6px 16px;
    border-radius: 8px;
    border: 1.4px solid #E4E7EB;
    background: #FFF;
    color: #8A97AA;
  }
  .tabledata-start div.dt-container .dt-paging {
    padding: 6px 16px;
    border-radius: 8px;
    border: 1.4px solid #E4E7EB;
    background: #FFF;
    color: #8A97AA;
    width: fit-content;
  }
  .tabledata-start div.dt-container div.dt-layout-cell,
  .tabledata-start div.dt-container .dt-paging .dt-paging-button {
    padding: 0;
  }
  .tabledata-start tr td:last-child {
    border-radius: 0px 8px 8px 0px;
    text-align: center !important;
    background: rgba(138, 151, 170, 0.10);
  }
  .defualt-tag {
    width: fit-content;
    padding: 4px 12px;
    border-radius: 25px;
    color: #8A97AA;
    text-transform: lowercase;
    border: 1.4px solid #E4E7EB;
    background: rgba(228, 231, 235, 0.38);
  }
  .defualt-tag.sponsored {
    border: 1.4px solid #00B087;
    color: #008767;
    background: rgba(22, 192, 152, 0.38);
  }
  .defualt-tag.deactive {
    border: 1.4px solid #F92A2A;
    color: #A40505;
    background: rgba(192, 22, 22, 0.38);
  }
  .btn-edit {
    border: 0;
    outline: 0;
  }
  /************ table design end ************/
  /************ insure page start ********************/
  .color-gray {
    color: #8A97AA;
  }
  .upload-btn {
    display: flex;
    margin-top: 16px
  }
  .upload-btn .form-upload-img {
    border-radius: 6px 0px 0px 6px;
    border: 1.4px solid #E4E7EB;
    background: rgba(138, 151, 170, 0.10);
    padding: 4px 12px;
    flex: 1 0 0;
  }
  .upload-field input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    padding: 4px 12px;
  }
  .uploaded-img-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .removeimage {
    position: absolute;
    background-color: #eee;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-weight: 600;
    text-align: center;
    font-size: 13px;
    padding-top: 2px;
    right: 4px;
    top: 4px;
    cursor: pointer;
  }
  .list-img {
    box-shadow: 0px 0px 8px 0px #00000005;
    border: 0.5px solid #E4E7EB;
    position: relative;
  }
.borderfor-wrap
{
  border-radius: 8px;
  padding: 32px 16px;
  margin-bottom:2rem;
  border: 1px solid #E4E7EB;
  font-size:14px;
}
  .upload-field {
    border-radius: 0px 6px 6px 0px;
    border: 1.4px solid #E4E7EB;
    border-left: 0;
    padding: 4px 12px;
    background-color: #fff;
    cursor: pointer;
    overflow: hidden;
  }
  .componentv1 {
    margin-top: 1rem;
    position: relative;
  }
  .control-label {
    display: inline-block;
    color: #000;
    text-transform: capitalize;
    margin-bottom: 5px;
  }
  .control-input {
    position: relative;
    width: 100%;
    padding: 6px 16px;
    border-radius: 8px;
    border: 1.4px solid #E4E7EB;
    color: #8A97AA;
  }
  .width-330 {
    max-width: 330px;
    width: 100%;
    position:relative;
  }
  .componentv1 select {
    appearance: none;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='chevron-down 2'%3E%3Cpath id='Vector' d='M4 6L8 10L12 6' stroke='%23343434' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-position: 98%;
    background-repeat: no-repeat;
  }
  .fm-title h2 {
    font: normal 14px / 20px "DM Sans";
    text-transform: capitalize;
    margin: 32px 0 6px;
  }
  .divider-fm {
    height: 1px;
    width: 100%;
    background: #E4E7EB;
  }
  .upload-applicant {
    display: flex;
    gap: 16px;
    padding: 0 16px;
  }
  .applicant-file {
    position: relative;
    min-height: 111px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 8px;
    border: 1.4px dashed #E4E7EB;
    color: #8A97AA;
  }
  .fileupdate-list {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  .upload-applicant .uploadlf {
    max-width: calc(50% - 8px);
    width: 100%;
  }
  .upload_tagline {
    font-weight: 500;
  }
  .btn-more {
    display: flex;
    gap: 4px;
    background-color: transparent;
    outline: 0;
    border-radius: 8px;
    padding: 4px 8px 4px 12px;
    border: 1.4px solid #E4E7EB;
  }
  .xcsv-file {
    margin: 24px 0;
  }
  .row-heading {
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }
  .space-rate,
  .space-deductible {
    flex: 0 0 41%;
  }
  .icons-space {
   /* flex: 0 0 10%;*/
   margin-left: auto;
    width:37px;
    height:36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1.5px solid #ED5C5C;
    background: #FFF;
  }
  .remove-current {
    cursor: pointer;
  }
  .themore-add {
    margin-top: 1rem;
  }
  .themore-add .btn-more {
    color: #8A97AA;
    background: rgba(138, 151, 170, 0.10);
    gap: 8px;
    padding: 6px 16px;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  .themore-add .delete-current, 
  .delete-current
  {
    border:1px  solid #ED5C5C;
    color:#ED5C5C;
    background-color: transparent;
    margin-top:2rem;
  }
  .update-insurer {
    font-size: 14px;
  }
  .deduct-x {
    gap: 3rem 1rem;
  }
  .mang-abs {
    position: absolute;
    right: 0;
    top: -10px;
    z-index: 1;
  }
  .mt-24
  {
   margin-top:24px!important;
  }
.combtn
{
  padding: 8px 16px;
  border-radius: 8px;
  font: normal 16px / 21px "DM Sans";
  color: #8A97AA;
  border: 1.4px solid #E4E7EB;
  background-color: rgba(228, 231, 235, 0.38);
}
   .combtn.form-submit
  {
    color: #FFF;
    background-color:#49A4F3;
  }
  /************ insure page start ********************/
  /************ policy page start *******************/
            .make-shorts ul li:not(:first-child) {
                display: none;
            }
            .totalcount {
                width: 25px;
                height: 24px;
                color: #8A97AA;
                margin-left: 8px;
                border-radius: 50%;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                font-weight: 600;
                cursor: pointer;
                border: 1.4px solid #E4E7EB;
                background: rgba(228, 231, 235, 0.38);
            }
            .tooltips-custom {
                position: relative;
            }
            .tooltipText {
                position: absolute;
                text-align: center;
                min-width: 220px;
                color: #fff;
                font-weight: 500;
                background-color: #9d9d9d;
                margin-left: -92px;
                bottom: 130%;
                padding: 10px 15px;
                border-radius: 5px;
                font-size: 14px;
                opacity: 0;
                visibility: hidden;
                display: none;
                transition: all .5s;
            }
            .tooltipText::after {
                content: '';
                border-width: 10px;
                border-style: solid;
                border-color: #9d9d9d transparent transparent transparent;
                position: absolute;
                top: 100%;
                left: 40%;
                margin-left: 5%;
            }
            /* Hover text tooltip */
            .tooltips-custom:hover .tooltipText {
                opacity: 1;
                visibility: visible;
                display: block;
                transform: translateY(-10px);
            }
            .tabledata-start table.dataTable>thead>tr>th {
                color: #8A97AA;
            }
            .width-670 {
                max-width: 670px;
                width: 100%;
            }
            .rowtwo-wrap {
                position: relative;
                display: flex;
                gap: 16px;
            }
           /************ policy page  end *******************/
           /******************* checxbox css ******************/
           .loc-ul .btntype-check input[type="checkbox"].asButton+label,
           .loc-ul .btntype-check input[type="radio"].asButton+label {
            display: flex;
align-items: center;
gap: 4px;
border: 1.4px solid var(--dashbord);
background-color: rgba(228, 231, 235, 0.38);
color: #8A97AA;
cursor: pointer;
padding: 4px  12px;
border-radius: 25px;
}
.include-all .btntype-check input[type="checkbox"].asButton:checked+label,
.btntype-check input[type="radio"].asButton:checked+label,
.btntype-check input[type="checkbox"].asButton:checked+label{
border: 1.4px solid #008767;
opacity: 0.5;
background: rgba(228, 231, 235, 0.38);
color: #008767;
}
.loc-ul .btntype-check input[type="checkbox"].asButton+label::after
{
content: url('path/to/your/icon.png');
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 4V12' stroke='%238A97AA' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8L4 8' stroke='%238A97AA' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
display: inline-block;
width: 16px; 
height: 16px; 
transition: 0.1s;
}
.btntype-check input[type="radio"].asButton:checked+label::after,
.btntype-check input[type="checkbox"].asButton:checked+label::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5.17188 5.17188L10.8287 10.8287' stroke='%23008767' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.8281 5.17188L5.17127 10.8287' stroke='%23008767' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.asia-sl
{
width:fit-content;
border: 1.4px solid #00B087;
background: rgba(22, 192, 152, 0.38);
color: #008767;
cursor: pointer;
padding: 3px 12px;
border-radius: 25px;
}
.country-sl
{
gap:24px;
margin-top: 24px;
}
.according-country
{
margin-top:8px;
padding:8px;
gap:8px !important;
border-radius: 8px;
border: 1.4px dashed #E4E7EB;
}
.include-all .btntype-check input[type="checkbox"].asButton+label {
border-radius: 25px;
padding: 2px 12px;
color:var(--black);
border: 1.4px solid #E4E7EB;
}
 /******************* checxbox css ******************/

${this.title}

Code Editor : dashbord.css