@import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap);

a,
button,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
    white-space: normal;
    word-break: break-word
}

html,
p,
ul {
    margin: 0
}

.button,
.primary-btn,
button {
    transition: .5s
}

.primary-btn,
.secondary-btn {
    text-align: center;
    font-size: 16px;
}

@font-face {
    font-family: Lato, sans-serif;
    src: url(../font/Lato-Thin.ttf);
    font-weight: 100
}

@font-face {
    font-family: Lato, sans-serif;
    font-weight: 300;
    font-style: normal;
    src: url(../font/Lato-Light.ttf)
}

@font-face {
    font-family: Lato, sans-serif;
    font-weight: 400;
    font-style: normal;
    src: url(../font/Lato-Regular.ttf)
}

@font-face {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-style: normal;
    src: url(../font/Lato-Bold.ttf)
}

@font-face {
    font-family: Lato, sans-serif;
    font-weight: 900;
    font-style: normal;
    src: url(../font/Lato-Black.ttf)
}

:root {
    --primary-color: #0179E3;
    --secondary-color: #222222;
    --white: #fff;
    --black: #000;
    --border-color: #87888C;
    --text-color: #1C1D1F
}

body {
    font-family: Lato, sans-serif;
    overflow-x: hidden;
    /* overflow: hidden; */
    color: var(--secondary-color);
    height: auto
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: var(--font-semibold);
    line-height: 1.1;
    color: var(--heading-color);
}

a {
    color: var(--primary-color);
}

h1 {
    font-size: 70px
}

h2 {
    font-size: 50px
}

.h3,
h3 {
    font-size: 42px
}

.h4,
h4 {
    font-size: 28px
}

h5 {
    font-size: 24px
}

h6 {
    font-size: 20px
}

.large-font,
p {
    font-size: 18px
}

.font-medium {
    font-family: var(--font-medium)
}

.font-semibold {
    font-family: var(--font-semibold)
}

.button,
.upload-btn {
    font-family: var(--font-medium)
}

.formfield {
    position: relative;
    width: 100%
}

a {
    text-decoration: none !important;
    display: inline-block
}

a:focus-visible {
    outline: #fff0
}
.outline-btn{
    background-color: #fff;
    border-radius: 10px;
    border-color: #0055FA;
}

.page-link:focus {
    box-shadow: none
}

.file>input[type=file] {
    display: none
}

p {
    color: var(--text-color)
}

header.smarttech-header {
    position: fixed;
    top: 0;
    z-index: 999;
    background-color: #fff;
    box-shadow: 4px 4px 8px 2px #0000001A;
    width: 100%
}

.large-font {
    line-height: 25px
}

.small-font {
    font-size: 12px
}

ul {
    padding: 0;
    list-style-type: none
}

button:focus {
    box-shadow: none !important;
    outline: #fff0
}

.form-control:focus,
input {
    outline: 0;
    box-shadow: none !important;
    color: var(--teritory-color);
    border-color: var(--border-color)
}

.upload-btn {
    border: 2px dashed #324dc7;
    border-radius: 0
}

input[type=checkbox]:checked~label:before {
    background: #fff no-repeat center
}

input[type=checkbox] {
    border-radius: 2px;
    border: 1px solid var(--primary-color);
    accent-color: #0179e3;
    width: 14px;
    height: 14px;
}

.form-group label {
    font-size: 14px;
    line-height: 23px;
    color: var(--light-color);
    /* pointer-events: none; */
    transition: .3s;
    margin-bottom: 6px;
    font-weight: 400
}

.checkbox-form-group label {
    margin-bottom: 15px;
    display: flex;
    gap: 8px;
    font-size: 14px;
    color: var(--heading-color);
    cursor: pointer
}

.form-icon {
    position: absolute;
    right: 25px;
    top: 17px;
    /* transform: translateY(-50%); */
    display: flex;
    align-items: center;
    color: #c8c9d8;
}

.button {
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 60px;
    font-size: 18px;
    border-radius: 0;
    padding: 12px 24px
}

.primary-btn:hover {
    background-color: #fff;
    color: var(--secondary-color);
    border-color: var(--secondary-color)
}

.primary-btn {
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    border: 1px solid;
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    border-radius: 8px;
    min-height: 40px;
    padding: 8px 16px;
}

.secondary-btn,
.white-btn {
    color: var(--secondary-color)
}

.secondary-btn {
    border: 1px solid var(--secondary-color);
    background: var(--secondary-color);
    font-weight: 600;
    line-height: 26px
}

.secondary-btn:hover {
    background-color: #fff0;
    color: var(--secondary-color) !important
}

.white-btn {
    background: var(--white);
    border-color: var(--white)
}

.light-btn {
    background: #f2f2f2;
    color: #727272;
    border: 1.81px solid #e8e8e8
}

.small-btn {
    min-height: 50px;
    padding: 11px 20px
}

a:hover {
    color: var(--primary-color)
}

.full-btn {
    width: 100%;
    min-width: auto
}

.form-control {
    border: 1px solid var(--border-color);
    font-size: 16px;
    border-radius: 8px;
    padding: 8px 20px;
    min-height: 40px;
    /* padding-right: 40px; */
}

img {
    max-width: 100%
}
.type-of-list input::placeholder {
    color: #00335F;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
}

input[type="date"] {
    padding: 4px 10px;
    border-radius: 10px;
    appearance: none;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: #00335F;

}

/* label:has(input:checked) {
    background-color: var(--primary-color);
} */

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
}

textarea{
    resize: none;
}

.rounded {
    border-radius: 50px !important
}

.form-control:focus,
input {
    border-color: #87888c
}

::-webkit-scrollbar {
    width: 2px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: #0055FA;
}

/* ::-webkit-scrollbar-track {
    border-radius: 100px;
    background: #D7F1F6;
} */

.container {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 20px
}

.navbar-toggler span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 6px auto;
    background: var(--secondary-color);
    transition: .6s cubic-bezier(.25, .1, .25, 1)
}

.navbar-toggler[aria-expanded=true] span:first-of-type {
    transform: rotate(45deg) translate(6px, 6px)
}

.navbar-toggler[aria-expanded=true] span:nth-of-type(2) {
    opacity: 0
}

.navbar-toggler[aria-expanded=true] span:last-of-type {
    transform: rotate(-45deg) translate(5px, -5px)
}

.navbar-toggler[aria-expanded=false] span {
    transform: none;
    opacity: 1
}

.close {
    float: right;
    font-size: unset;
    font-weight: unset;
    line-height: unset;
    color: unset;
    text-shadow: unset;
    opacity: unset;
}
.danger-btn{
    background-color: #FFD4D4;
    color: #E50000;
}
.light-btn{
    background-color: #F7FCFD;
    color: #00335F;
    border-color: #F7FCFD;
}
.blue-btn{
    background-color: #E6F2FC;
    color: #00335F;
}
.border-danger{
    border: 1px solid #FFD4D4;
    border-radius: 8px;
}
.border-blue{
    border: 1px solid #E6F2FC;
    border-radius: 8px;
}
.repair_modal .input-box {
    width: auto !important;
}
input#inputCaptcha {
    width: 100px !important;
    padding: 4px !important;
    min-height: 0 !important;
    height: 24px !important;
    margin-top: 5px !important;
}
input#verify_coverage {
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
}
.close_claim_btn svg path{
    fill:#fff;
    
}
#coverage_error_message {
   
}
#coverage_error_message p{
     background-color :#E10000 ;
   
    border-radius:5px;
    padding:8px 15px !important;
    margin-top: 10px;
    margin-bottom:0px;
     color:#fff;
    font-size:16px;
    line-height:1.3em;
}

.device_show_list  th, .device_list  th {
	background: #f8fcfd ;
	color: #000 !important;
	text-align: left;
	border-right: 1px solid #f8fcfd;
}
.device_show_list table>tbody>tr:hover {
    background-color: #EEF4F8;
}
.device_list table>tbody>tr:hover {
    background-color: #EEF4F8;
}