@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@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=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
body{
    font-family: "Plus Jakarta Sans", serif;
}
.cke_editable.nunito-font {
    font-family: 'Nunito Sans', sans-serif;
    padding: 20px !important; /* Add desired padding here */
}
.login-main-wrapper{
    background: #EEF2FE;
    height: 100vh;
}
.login-wrap{
    padding: 10px 20px;
    position: relative;
    height: auto;
    padding-bottom: 0px;
    
}
.h-500{
    height: 500px;
}
a:hover{
    text-decoration: none;
}
.img-content{
    background: #028391;
    height: 575px;
    padding: 20px;
    width: -webkit-fill-available;
    position: absolute;
    top: -40px;
    border-radius: 16px;
    padding-top: 45px;
}
.img-login{
    position: absolute;
    bottom: -12px;
    width: 100%;
    left: 0px;
}
.para-anker{
    color: #9C9C9C;
    font-weight: 400;
}
.txt-anker{
    font-weight: 700;
    color: #028391; 
}
.txt-journey{
    font-weight: 700;
}
.para-login{
    font-weight: 400;
}
.login-form{
    padding: 20px;
}
.input-form{
    border: 1px solid #8D8A8A;
    height: 55px;
    border-radius: 8px;
    padding-right: 40px;
}
.input-feild{
    box-shadow: 0px 1px 2px 0px #4D40551A;
    border-radius: 4px;
    height: 50px;
}
.input-feild:focus{
    box-shadow: 0px 1px 2px 0px #4D40551A;
}
.calender-img{
    width: 25px;
    position: absolute;
    right: 0px;
    transform: translate(-11px, -57px);
}
.down-img{
    width: 12px;
    position: absolute;
    right: 0px;
    transform: translate(-15px, -39px);
}
.rotate-icon{
    transform: rotate(180deg);
}
.input-select{
    appearance: none;
}
.text-star{
    color: #FF5959;
}
.label-txt{
    font-weight: 600;
    color: #4E4E4E;
}
.envelop-img{
    width: 22px;
    position: absolute;
    right: 0;
    transform: translate(-15px, -40px);
}
.lock-icon{
    position: absolute;
    right: 0;
    transform: translate(-15px, -40px);
    color: #4E4E4E;
    font-size: 22px;   
}
.lock-icon-active{
    font-size: 70px;
    color: #028391;
}
.hide-icon{
    position: absolute;
    right: 0;
    transform: translate(-15px, -39px);
    font-size: 25px; 
    cursor: pointer;
}
.fgt-password a{
    font-weight: 500;
    color: #4E4E4E;
}
.btn-login{
    background: #028391;
    color: #fff;
    font-weight: 500;
    border-radius: 12px;
    padding: 15px;
}
.btn-login:hover{
    color: white;
}
.fs-60{
    font-size: 60px;
}
.h-60{
    height: 225px;
    align-items: center;
}
.h-80{
    height: 500px;
    align-items: center;
}
.txt-login{
    font-weight: 700;
}
.active-border{
    border-left: 9px solid #028391;
    border-radius: 5px;    
}
/* .active-border-01{
    border-left: 9px solid #4E4E4E;
    border-radius: 5px; 
} */
 .border-active{
    border-left: 9px solid #028391;

 }
.active-color{
    color: #028391;
}
.active-color-01{
    color: #4E4E4E;
}
.txt-user{
    color: #9C9C9C;
    font-weight: 400;
}
.user-key{
    background: url(../images/user-key.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 57%;
    height: 52px;
}
.user-key-active{
    background: url(../images/user-key-active.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 57%;
    height: 52px;
}
.shield-img{
    background: url(../images/sheild-icon-active.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 62%;
    height: 52px;
}
.password-img{
    background: url(../images/pass-key.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 50%;
    height: 70px;
}
.shield-img-active{
    background: url(../images/sheild-icon.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 62%;
    height: 52px;
}
.step-2{
    display: none;
}
.tab-01{
    cursor: pointer;
}
.tab-02{
    cursor: pointer;
}
.info-img{
    width: 15px;
}
.txt-small{
    color: #949494;
    font-family: "Nunito Sans", serif;
    font-weight: 400;
}
.patient-txt{
    font-family: "Nunito Sans", serif; 
    font-weight: 500;
    color: #444643;
}
.detail-profile h5{
    font-family: "Nunito Sans", serif; 
    font-weight: 500;
    color: #444643;
}
.detail-profile p{
    font-family: "Nunito Sans", serif; 
    font-weight: 500;
    color: #444643;
}
.basic-para{
    font-family: "Nunito Sans", serif; 
    font-weight: 500;
    color: #555555;
}
.label-text{
    font-family: "Nunito Sans", serif;  
    font-weight: 500;
    color: #444643;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.btn-add{
    background: #028391;
    color: #fff;
    border-radius: 8px;
    padding: 12px;
    font-weight: 600;
    font-family: "Montserrat", serif;
}
.btn-add-01{
    background: #028391;
    color: #fff;
    border-radius: 8px;
    padding: 8px;
    font-weight: 600;
    font-family: "Montserrat", serif;   
}
.gap-table{
    gap: 10px;
}
.gap-10{
    gap: 10px;
}
.btn-add:hover{
    color: #fff;
}
table.dataTable thead>tr>th.sorting_asc:before, table.dataTable thead>tr>th.sorting_desc:after, table.dataTable thead>tr>td.sorting_asc:before, table.dataTable thead>tr>td.sorting_desc:after {
    opacity: 0;
    display: none !important;
}
table.dataTable thead>tr>th.sorting:before, table.dataTable thead>tr>th.sorting:after, table.dataTable thead>tr>th.sorting_asc:before, table.dataTable thead>tr>th.sorting_asc:after, table.dataTable thead>tr>th.sorting_desc:before, table.dataTable thead>tr>th.sorting_desc:after, table.dataTable thead>tr>th.sorting_asc_disabled:before, table.dataTable thead>tr>th.sorting_asc_disabled:after, table.dataTable thead>tr>th.sorting_desc_disabled:before, table.dataTable thead>tr>th.sorting_desc_disabled:after, table.dataTable thead>tr>td.sorting:before, table.dataTable thead>tr>td.sorting:after, table.dataTable thead>tr>td.sorting_asc:before, table.dataTable thead>tr>td.sorting_asc:after, table.dataTable thead>tr>td.sorting_desc:before, table.dataTable thead>tr>td.sorting_desc:after, table.dataTable thead>tr>td.sorting_asc_disabled:before, table.dataTable thead>tr>td.sorting_asc_disabled:after, table.dataTable thead>tr>td.sorting_desc_disabled:before, table.dataTable thead>tr>td.sorting_desc_disabled:after {
    opacity: 0 !important;
    display: none !important;

}


.suggestions-box {
    /* border: 1px solid #ddd; */
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    top: 100%;
    width: 100%;
    background-color: white;
    z-index: 10;
}

.suggestion-item {
    padding: 8px;
    cursor: pointer;
}

.suggestion-item:hover {
    background-color: #f1f1f1;
}

   /* Add padding for better readability */
   table.dataTable thead th, 
   table.dataTable tbody td {
    
        padding: 10px 10px !important;
        font-size: 12px;
   }
   .table-responsive {
    overflow-x: auto;
}

#submitImage{
    cursor: pointer;
}
   /* Ensure action buttons are centered */
   .action-column {
       text-align: center !important;
   }
   .txt-hidden-para br{
    display: none;
   }
   .txt-password{
    font-family: "Nunito Sans", serif; 
    font-weight: 500;
    color: #444643;
   }
@media screen and (max-width:767px) {
    .mobile-tabs{
        display: flex;
        justify-content: space-between;
    }
    .txt-hidden-para br{
        display: block !important; 
    }
    .tab-02{
        margin-top: 0px !important;
    }
    .txt-hidden{
        display: none;
    }
    .txt-hidden-para{
        font-size: 13px;
    }
    .active-border{
        border-bottom: 9px solid #028391;
        border-left: 0px solid transparent ;
        border-radius: 0px !important;
    }
    .border-active {
        border-bottom: 9px solid #028391;
        border-left: 0px solid transparent ;
        border-radius: 0px !important;
    }
    .login-wrap {
        padding-right: 0px !important;
    }
    .img-login {
        position: inherit !important;
        bottom: 0px !important;
        height: auto !important;
    }
    .img-content{
        position: inherit !important;
        top: 0 !important;
        height: auto;
        display: none;
    }
    .h-80 {
        height: auto;
        padding: 15px 15px;
        margin-bottom: 20px;
    }
    .h-60 {
        height: auto;
        padding: 15px 15px;
        margin-bottom: 20px;
    }
    .login-main-wrapper .row{
        padding-top: 0px !important;
        justify-content: center;
    }
    .h-500 {
        height: auto;
    }
    .password-img {
        width: 80px;
    }
    .tab-password{
        justify-content: center !important;
    }
}
@media screen and (max-width:991px) {
    .md-none{
        display: none;
    }
    .login-main-wrapper {
        height: 100vh;
    }
}

/* dashboad */

.sidebar {
  
    background-color: #FFFFFF;
    box-shadow: 5px 4px 4px 0px #0000000D;
    color: #000;
    transition: all 0.3s;
    padding: 12px;
    height: 100vh;
    position: fixed;
    transition: transform 0.3s ease;
    width: 270px;
    z-index: 1000;
    padding: 15px;
    overflow-x: hidden;
}
.sidebar.collapsed {
    margin-left: 0px;
}
.sidebar .nav-link {
    color: #121416;
}
.sidebar .nav-link:hover {
    color: #fff;
}

li.nav-item {
    background: #f9f9f9;
    margin-bottom: 10px;
    border-radius: 40px;
}

li.nav-item:hover {
    background: #028391;
    color: white !important;
    margin-bottom: 10px;
    border-radius: 40px;
}

li.nav-item .nav-link.active {
    background-color: #028391; /* Blue background for active link */
    color: #fff !important;    /* Make it stand out */
    border-radius: 40px;        /* Match the nav-item’s shape */
    padding: 10px 20px;         /* Add some padding */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
}

/* .sidebar .nav-link:hover {
    background-color: #028391;
    border-radius: 10px !important;
    color: #fff !important;
    width: 100px !important;
} */
.txt-select{
    font-family: "Montserrat", serif;
    font-weight: 500;
    color: #2E2E2E;
    padding: 10px 20px;
    background: transparent;
    border: none;
}
.txt-select_heading{
    font-family: "Montserrat", serif;
    font-weight: 500;
    color: #000000;
}
.tab-mic-active{
    /* border: 4px solid #028391; */
    background: #FFFFFF;
    border-radius: 12px;
    padding: 50px 10px;
    cursor: pointer;
}
.tab-mic{
    background: #FFFFFF;
    border-radius: 12px;
    padding: 50px 10px;
    cursor: pointer;
    box-shadow: 0px 0px 8.06px 0px #5177A333;

}
.tab-mic:hover{
    border: 4px solid #028391;

}
.nav-links{
    list-style: none;
}

.btn1{
    padding: 10px 20px;
    border-radius: 6px;
    border: 1px solid #028391;
    color: #fff;
    text-align: center;
    font-family: Montserrat;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    background: #028391;
}
.btn1:hover{
    color: #fff; 
}

.btn2{
    padding: 10px 20px;
    border-radius: 6px;
    border: 1px solid #028391;
    color: #028391;
    text-align: center;
    font-family: Montserrat;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.btn2:hover{
    color: #028391; 
}

.btn3{
    padding: 10px 20px;
    border-radius: 6px;
    border: 1px solid #828282;
    color: #828282 !important;
    text-align: center;
    font-family: Montserrat;
    font-size: 13px !important;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.content {
    margin-left: 270px;
    background: #F2F9F8;
    padding: 0px;
    width: 100%;
    transition: margin-left 0.3s ease;
}
.header-txt{
    font-family: "Montserrat", serif;
    font-weight: 500;
    font-size: 14px;
    color: #000;
}
.header-txt span{
    font-family: "Montserrat", serif;
    font-weight: 400;
}

.txt-sidebar span{
color: #2E2E2E;
}
.txt-sidebar {
    font-family: "Montserrat", serif;
color: #028391;
font-weight: 600;
}
.txt-activity{
    color: #2E2E2E;
    font-family: "Montserrat", serif;
font-weight: 500;
}
.nav{
    gap: 18px;
}
.sidebar .nav-link.active-border{
    background: #028391;
    /* border: 2px solid #FFFFFF !important; */
    color: #fff !important;
    
}
.link-active{
    background: #028391;
    /* border: 2px solid #FFFFFF !important; */
    color: #fff !important; 
    border-radius: 12px;
}
.w-33{
    width: 22px;
}
.p-30{
    padding: 31px 31px;
}
.sidebar .links {
    color: #000;
    padding: 10px;
    box-shadow: 0px 0px 4px 0px #00000040;
    background: #FFFFFF;
    border-radius: 10px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 8px;
    height: 100px;
    width: 100px;

}
.link-01{
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 8px;
    font-size: 12px;

}
.toggle-sidebar{
    display: none;
}
.w-350{
    width: 450px;
    border-radius: 50px;
    padding-left: 35px;
    font-size: 14px;
    height: 42px;
}
.search-icon{
    position: absolute;
    width: 17px;
    left: 0px;
    transform: translate(12px, -30px);

}
.gap-form{
    gap: 40px;
}
.bell-icon{
    width: 30px;
}
.bell-notifi{
    background: #F9F9F9;
    padding: 15px;
    border-radius: 50px;
    position: relative;
}
.dot{
    width: 15px;
    height: 15px;
    background: #028391;
    border: 1.5px solid #F2F2F2;
    border-radius: 50px;
    position: absolute;
    right: 0px;
    transform: translate(-14px, -31px);
}
.profile-wrap{
    box-shadow: 0px 0px 4px 0px #00000040;
    background: #F2F9F8;
    border-radius: 7px;
    padding: 12px;
}
.profile-img{
    width: 69px;
    height: 63px;
}
.profile-detail h3{
font-size: 16px;
}
.profile-detail p{
    
    font-size: 16px;
}
.gap-22{
    gap: 15px;
    align-items: center;
}
.gap-25{
    gap: 25px;
}
.ellipse-icon{
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(-13px, 13px);
    width: 24px;

}
.btn-patient{
    background: #028391;
    color: #FFFFFF;
    padding: 10px 20px;
    font-family: "Montserrat", serif;
font-weight: 600;
border-radius: 6px;
}
.btn-patient:hover{
    color: #fff;
}
.border-dashed{
    border: dashed;
    border-width: 2px;
    border-color: #D8D8D8; 
    /* padding: 35px; */
    padding: 20px;
    border-radius: 10px;
}
.border-form{
    border: 1.05px solid rgba(205, 205, 205, 1);
    border-width: 2px;
    
    border-color: #D8D8D8; 
    padding: 20px;
    padding-bottom: 20px;
    border-radius: 4px;
}
.green-text{
    color: #028391;
}
.icon-elipse{
    width: 13px;
}
.border-dashed-01{
    border: dashed;
    border-width: 2px;
    border-color: #D8D8D8;
    /* padding: 35px; */
    border-top: none;
    padding: 20px;
    border-radius: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.w-22{
    width: 24px;
}
.delete-account{
    background: #C74B4B;
}
.w-24{
    width: 24px;
}
.br-16{
    border-radius: 16px;
    padding: 25px 30px 25px 30px;
}
.p-35{
    padding: 15px 25px 20px 25px;
}
.p-25{
    padding: 15px 25px 20px 25px;
}
.tab-step-2{
    display: none;
}
.table-striped tbody tr:nth-of-type(odd) {
    background: #0F879433;

}


.switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 30px;
  }
  
  .switch input {display:none;}
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #AAAAAA;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #028391;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #028391;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
  




.slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;}
    .txt_show{
        font-family: "Nunito Sans", serif; 
    font-weight: 500;
    color: rgba(68, 70, 67, 1); 
    }
    .txt-sub{
        font-family: "Nunito Sans", serif; 
    font-weight: 700;
    color: rgba(31, 31, 31, 1);
    }
    .txt_chat{
        font-family: "Nunito Sans", serif; 
        font-weight: 500;
        color: rgba(170, 170, 170, 1);
    }
    .txt-update{
        font-family: "Nunito Sans", serif; 
        font-weight: 500;
        color: rgba(68, 70, 67, 1);
        font-size: 20px;
    }
    .icon-eraser{
        font-size: 22px;
    }
    .check-tab{
        cursor: pointer;
    }
    .active-check-tab{
        cursor: pointer;

    }
.tab{
    cursor: pointer;
}
.active-text {
    color: #028391; /* Change to your desired active color */
    font-weight: bold; /* Optional: Make the text bold */
}

    .txt-ai{
        color: #028391;
    }
.txt-icon-list{
    background: rgba(242, 249, 248, 1);
    border-radius: 6px;
    padding: 12px 15px;
}
.list-icons{
    list-style: none;
    gap: 15px;
}
.list-icons li a{
    color: rgba(148, 148, 148, 1);
    font-size: 20px;
}
.txt-name{
    font-family: "Nunito Sans", serif; 
    font-weight: 500;
    color: rgba(31, 31, 31, 1);   
}
.card-box{
    box-shadow: 0px 0px 4px 0px rgba(2, 131, 145, 0.25);
    padding: 15px;
}
.txt-card{
    font-family: "Montserrat", serif;   
    font-weight: 700;
    color: rgba(46, 46, 46, 1);  
}
.para-card{
    font-family: "Montserrat", serif;   
    font-weight: 500;
    color: #028391;
}
.border-content{
    box-shadow: 0px 1px 2px 0px rgba(77, 64, 85, 0.1);
    border-radius: 4px;
    padding: 10px;
}
.vocie-circle{
    width: 20%;
}
.txt-tab{
    font-family: "Nunito Sans", serif; 
    font-weight: 400;
    color: #444643;
}
.timer{
    font-family: "Nunito Sans", serif; 
    font-weight: 600;
    color: #444749;
    font-size: 22px;
    text-shadow: 4px 4px 4px 4px #00000040;
}
.voice-img{
    background: url(../images/voice.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 184px;
    width: 40%;
    margin: auto;
}
.btn-cancel-voice{
    background: #A33436;
    font-family: "Montserrat", serif;   
    font-weight: 600;
    color: #ffff;
    border-radius: 5px;
    padding: 15px 70px;
}
.btn-cancel-voice:hover{
    color: #fff;
}
.gap-98{
    gap: 98px;
}
.list-sidebar-icon{
    list-style: none;
    line-height: 40px;
}
.list-sidebar-icon li a{
    color: rgba(148, 148, 148, 1);
    font-size: 22px;
}
.list-sidebar-icon li a.active-icon{
   color: rgba(89, 196, 188, 1);
}
.list-sidebar-icon li a.mic-active-icon{
   background: rgba(89, 196, 188, 0.1);
   padding: 2px 3px;
   border-radius: 50px;
   color: rgba(89, 196, 188, 1);
   margin-bottom: 3px;
   cursor: pointer;
  
}
.list-sidebar-icon li a.mic-stop-icon{
   background: rgba(245, 40, 145, 0.1);
   padding: 10px 14px;
   border-radius: 50px;
   color: rgba(245, 40, 145,1)
  
}
.mt-10{
    margin-top: 10px;
}

.list-sidebar-icon li a img{
    width: 25px;
}
.mic_img{
    width: 60%;
}
@media screen and (max-width:1222.9px) {
    .w-350{
        display: none;
    }
    .header-txt{
        display: none;
    }
}
.close-icon {
    display: none;
}

.txt-subs{
    color: #028391;
}
.btn-upd-plan{
    background: #028391;
    color: #fff;
    padding: 10px 40px;
    font-family: "Nunito Sans", serif; 
    font-weight: 400;
}
.btn-upd-plan:hover{
    color: #fff;
}
.txt-payment{
    font-family: "Nunito Sans", serif; 
    font-weight: 400;
    color: #515151;  
}
.table-notes .table-heading{
    font-family: "Nunito Sans", serif; 
    font-weight: 600;
    color: #444643;
    font-size: 17px;
}
.txt-para-table{
    font-family: "Nunito Sans", serif; 
    font-weight: 400;
    color: #7D7D7D;   
}
.table-notes.dataTable {
    width: 100%;
   
    border-collapse: collapse !important;
}
.table-notes .table-body{
    border: 0.95px solid #D8D8D8 !important; 
    background: #FFFFFF;

}

 .table-body .p-20{
    vertical-align: middle;
    font-family: "Nunito Sans", serif; 
    font-weight: 700;
    color: #444643;

}
.table-notes .t-head{
    display: none;
   
}
.table-notes.dataTable thead th, table.dataTable tbody td {
    padding: 10px 10px !important;
    font-size: 16px;
} 
.table-notes .w-5{
    width: 5%;
}
.table-notes .table-name{
    font-family: "Nunito Sans", serif; 
    font-weight: 700;
    color: #7D7D7D;
}
.table-notes .w-80{
    width: 70%;
}
.table-notes .w-19{
    width: 19px;
}
.table-notes .report-img{
    width: 45px;
    padding: 10px;
    background: #59C4BC1A;
    border-radius: 50px;
}
.patient-txt-tody{
    font-family: "Nunito Sans", serif; 
    font-weight: 700;
    color: #028391; 
}
.w-18{
    width: 18px;
}
.btn-black{
    padding: 10px 40px;
    font-family: "Nunito Sans", serif;
    font-weight: 400;
    background: #2E2E2E;
    color: #fff;
    padding-left: 15px;
}
.btn-black:hover{
    color: #fff;
}
.btn-close{
    border: 2px solid #6c757d;
    padding: 10px 40px;
    font-family: "Nunito Sans", serif;
    font-weight: 400;
}
.btn-days{
    padding: 8px 25px;
    font-family: "Nunito Sans", serif;
    font-weight: 400;
    background: #028391;
    color: #fff;
}
@media screen and (max-width:991px) {
    .sidebar{
        margin-left: -320px;  
    }
    
    .close-icon {
        display: flex;
        justify-content: end;
        margin-bottom: 0px;
        font-size: 30px;

    }
    .flex-content{
        justify-content: space-between;
        width: 100%;
    }
    .btn-patient {
        font-size: 10px;
    }
    .txt-select {
        font-size: 13px;
        margin-right: 0px !important;
    }
    .content {
        margin-left: 0;
        overflow: hidden;
    }
    .p-35 {
        padding:0px 35px;
    }
    .p-25 {
        padding:0px 35px;
        
    }
    .toggle-sidebar{
        display: block;
    }
    .br-16 {
        border-radius: 16px;
        padding: 12px;
    }
    .border-dashed {
        padding: 10px;
    }
}
@media screen and (max-width:767px) {
    .profile-wrap{
       display: none !important;    
    }
    .btn-days{
        margin-left: 0px !important;
    }
    .gap-days{
        row-gap: 12px;
        justify-content: center !important;
        margin-bottom: 10px;
        margin-top: 10px;
    }
    .btn-black{
        margin-top: 10px;
        justify-content: center;
        align-items: center !important;
        margin: auto;
    }
    .table-notes .table-heading {
        font-size: 12px;
    }
    .table-notes .w-80 {
        width: 51% !important;
    }
    .table-notes .table-name {
        font-size: 15px;
    }
    .table-notes .w-80 {
        width: 48%;
    }
    .btn-add-patient{
        padding: 10px 13px;
        font-size: 10px;
    }
    .table-notes .w-5{
        display: none;
    }
    .hidden-padding{
        padding: 0px !important;
    }
    .table-none{
        display: none !important;
    }
   
    .hidden-right{
        padding-right: 0px !important;
    }
    .mt-10{
        margin-top: 0px;
    }
    .list-sidebar-icon{
        display: flex
        ;
            align-items: center;
            justify-content: space-around;
            margin-top: 10px;
    }
    .column-reverse{
        flex-direction: column-reverse;
    }
    .gap-98{
        gap: 0px;
    }
    .icon-elipse{
        display: none;
    }
    .check-gap{
        row-gap: 15px;
    }
    .padding-flex{
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .w-24{
        display: none;
    }
    .btn-patient{
        font-size: 9px;
    }
    .create-new{
        font-size: 9px;
    }
    .txt-select {
        font-size: 10px !important;
    }
    
}
.edit-icon{
    width: 18px;
}
.btn-add-01 {
    font-size: 9px;
}
.btn-add-01:hover {
    color:white;
}
.dropdown ul{
    list-style: none;
    line-height: 40px;
}
.chevron_down{
    font-size: 25px;
}
.dropdown{
    display: none;
}
.rotate-down{
    transform: rotate(180deg);
}
.profile_img{
    width: 80px;
}
.dropdown ul li a{
    color: #343a40 !important;
}
.dropdown ul li a:hover{
    text-decoration: none;
}
.edit-white{
    width: 25px;
}
.btn-edit{
    background: #028391;
    color: #fff;
    padding: 8px 28px;
    font-family: "Nunito Sans", serif; 
    font-weight: 400;
}
.txt-auto{
    font-family: "Nunito Sans", serif; 
    font-weight: 500;
    color: #444643;   
}
.para-auto{
    font-family: "Nunito Sans", serif; 
    font-weight: 500;
    color: #444643; 
}
.btn-edit:hover{
    color: #fff;
}
.btn-save{
    background: #028391;
    color: #fff;
    padding: 8px 28px;
    font-family: "Nunito Sans", serif; 
    font-weight: 400;
}
.btn-save:hover{
    color: #fff;
}
.btn-delete{
    background: #C74B4B;
    color: #fff;
    padding: 8px 28px;
    font-family: "Nunito Sans", serif; 
    font-weight: 400;
}
.btn-delete:hover{
    color: #fff;
}
.search-user{
    position: absolute;
    left: 0;
    transform: translate(28px, -56px);
    width: 25px;
}
.search_icon{
    position: absolute;
    right: 0;
    transform: translate(-25px, -56px);
    width: 25px;
}
.patient_icon{
    position: absolute;
    left: 0;
    transform: translate(12px, -57px);
    width: 25px;
}
.badge_icon{
    position: absolute;
    left: 0;
    transform: translate(25px, -54px);
    width: 25px;
}
.user_icon{
    position: absolute;
    left: 0;
    transform: translate(25px, -54px);
    width: 25px;
}
.patient-list_icon{
    position: absolute;
    left: 0;
    transform: translate(15px, -54px);
    width: 25px;
}
.patient_icon-01{
    position: absolute;
    left: 0;
    transform: translate(20px, -50px);
    width: 20px;
}
.txt-record{
    font-family: "Nunito Sans", serif; 
    font-weight: 500;
    color: #444643;
    text-align: center;
    font-size: 22px;   
}
.para-record{
    font-family: "Nunito Sans", serif; 
    font-weight: 500;
    color: #787878;
    font-size: 20px;
    text-align: center;
}
.form-check-input{
    accent-color: #028391;
}
.form-check-inline .form-check-input{
    width: 18px;
    height: 18px;
}
.btn-cancel{
    border: 1px solid #949494;
    border-radius: 5px;
    padding: 8px 28px;
    font-family: "Nunito Sans", serif; 
    font-weight: 400;
    color: #949494;
}
.btn-cancel:hover{
    color: #949494;

}
.btn-gaps{
    gap: 20px;
}
.note-reten{
    background: #F2F9F8;
    padding: 15px;
}
.select-input{
    width: 100%;
    height: 41px;
    padding: 10px;
    border: 1px solid #E2E2E2;
    border-radius: 6px;
}
.hide-check{
    display: none;
}
@media screen and (max-width:1280px) {
    table.dataTable thead th, table.dataTable tbody td {
        font-size: 9px;
    }
    .table-notes .w-80 {
        width: 65%;
    }
    .table-notes.dataTable thead th, table.dataTable tbody td {
        font-size: 18px;
    }
    .btn-upd-plan {
        padding: 10px 30px;
    }
    .btn-add-01 {
        font-size: 9px;
    }
}
/* dashboad */


/* logout */
.nav-link-logout{
    position: absolute;
    bottom: 10px;
    width: 85%;
}
.ellipse-icon{
    display: none;
}
.log-out{
    font-size: 20px;
}
/* logout */





/* Payment-Method page Start */
.card-img{
    background: url(../images/card-holder_svgrepo.com.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 50%;
    height: 70px;
}
.border-active-pricing{
  
    border: 2.41px solid rgba(2, 131, 145, 1) !important;
   
}
.border-pricing:hover{
    border: 2.41px solid rgba(2, 131, 145, 1) !important;
    
}
.border-pricing {
    background: rgba(255, 255, 255, 1);
    border: 2.41px solid rgba(57, 57, 57, 0.26);
    box-shadow: 0px 6.43px 6.43px 0px rgba(252, 252, 252, 0.15);
    padding: 25px 20px;
    border-radius: 12px;
    margin-top: 70px !important;
    cursor: pointer;
}
.btn-recom {
    background: #028391;
    color: #fff;
    border-radius: 50px;
    padding: 5px 30px;
    position: absolute;
    top: -18px;
}
.w-30 {
    width: 30px;
}
.txt-content {
    padding: 15px 40px;
}
.text_para {
    font-weight: 400;
    color: rgba(57, 57, 57, 1);
}
.text_para {
    font-weight: 400;
    color: rgba(57, 57, 57, 1);
}
.btn-buy {
    background: #028391;
    color: #FFFFFF;
    border-radius: 50px;
    padding: 10px;
}
.btn-buy:hover {
    color: #FFFFFF;
    font-weight: bold;
}
.login-wrap-01{
    padding: 40px 100px;
    position: relative;
    height: auto;
    padding-bottom: 0px;
}
.h-90{
    height: 600px;
    align-items: center;
}
.list-pricing{
    line-height: 35px;
}

@media screen and (max-width:1140px) {
    .login-wrap-01 {
        padding: 20px 15px;
    }
}

@media screen and (max-width:991px) {
    .h-90{
        height: auto;
        padding: 15px 15px ;
        margin-bottom: 20px;
    }
    .login-wrap-01 {
        padding: 15px 15px !important;
    }
    .payment-pricing_sec{
        height: auto !important;
    }
    .active-border {
             border-left: 0px solid transparent;
    }
    .border-pricing{
        padding: 10px;
        margin-bottom: 30px;
        margin-top: 0px !important;
    }
}
@media screen and (max-width:767px) {
    .password-img {
        width: 80px;
    }
    .login-wrap-01 {
        padding: 20px 15px !important;
    }
    .active-border {
        border-left: 0px solid #028391 !important;
}
    .payment-pricing_sec .row{
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
    .login-wrap-01 {
        padding: 20px 10px;
    }
    .h-90{
        height: auto;
        padding: 15px 15px;
        margin-bottom: 20px;
    }
    .pricing-column {
        flex-direction: column;
        gap: 15px;
    }
    .border-pricing{
        padding: 10px;
        margin-bottom: 30px;
        margin-top: 0px !important;
    }
    .txt-content {
        padding: 20px 5px;
    }
    .flex-padding{
        padding: 0px !important;
    }
    .payment-pricing_sec{
        height: auto !important;
    }
    .mt-20{
        padding-top: 15px;
    }
    .btn_now{
        margin-top: 0px !important;
        
    }
}



/* Payment-Method page End */

.playing-icon{
    width: 50px;
}
.summary-label{
    font-size:12px; 
    padding:0px; 
    line-height:11px;
}

/* Recorder2 */

.audio-recording-container {
    width: 100%;
    height: 50vh;
    /* view port height*/
    /*targeting Chrome & Safari*/
    display: -webkit-flex;
    /*targeting IE10*/
    display: -ms-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*horizontal centering*/
    align-items: center;
}
.start-recording-button {
    font-size: 70px;
    color: #435f7a;
    cursor: pointer;
    /* margin-bottom: 30px; */
}

.mid-button{
margin-left: 3%;
}
.control-area{
width: 100%;
display: flex;
justify-content: center;
}

.select-image:hover{
    border:2px solid #028391;
  }
  
  .select-image.active{
    border:2px solid #028391;
  }
  

.recording-contorl-buttons-container {
    /*targeting Chrome & Safari*/
    display: -webkit-flex;
    /*targeting IE10*/
    display: -ms-flex;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    /*horizontal centering*/
    align-items: center;
    width: 400px;
    margin-bottom: 30px;
}
.cancel-recording-button,
.stop-recording-button, .pause-recordingbtn, .start-recordingbtn {
    cursor: pointer;
}
.cancel-recording-button, .pause-recordingbtn, .start-recordingbtn {
    color: #747474;
    
}
.cancel-recording-button:hover {
    color: rgb(206, 4, 4);
}
.stop-recording-button {
    color: #028391;
    
}
.stop-recording-button:hover {
    color: #028391;
}
.recording-elapsed-time {
    /*targeting Chrome & Safari*/
    display: -webkit-flex;
    /*targeting IE10*/
    display: -ms-flex;
    display: flex;
    justify-content: center;
    /*horizontal centering*/
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
.red-recording-dot {
    font-size: 25px;
    color: red;
    margin-right: 12px;
    /*transitions with Firefox, IE and Opera Support browser support*/
    animation-name: flashing-recording-dot;
    -webkit-animation-name: flashing-recording-dot;
    -moz-animation-name: flashing-recording-dot;
    -o-animation-name: flashing-recording-dot;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
}
/* The animation code */
@keyframes flashing-recording-dot {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes flashing-recording-dot {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes flashing-recording-dot {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes flashing-recording-dot {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.elapsed-time {
    font-size: 32px;
}
.recording-contorl-buttons-container.hide {
    display: none;
}
.overlay {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 100%;
    background-color: rgba(82, 76, 76, 0.35);
    /*targeting Chrome & Safari*/
    display: -webkit-flex;
    /*targeting IE10*/
    display: -ms-flex;
    display: flex;
    justify-content: center;
    /*horizontal centering*/
    align-items: center;
}
.overlay.hide {
    display: none;
}
.browser-not-supporting-audio-recording-box {
    /*targeting Chrome & Safari*/
    display: -webkit-flex;
    /*targeting IE10*/
    display: -ms-flex;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*horizontal centering*/
    align-items: center;
    width: 317px;
    height: 119px;
    background-color: white;
    border-radius: 10px;
    padding: 15px;
    font-size: 16px;
}
.close-browser-not-supported-box {
    cursor: pointer;
    background-color: #abc1c05c;
    border-radius: 10px;
    font-size: 16px;
    border: none;
}
.close-browser-not-supported-box:hover {
    background-color: #92a5a45c;
}
.close-browser-not-supported-box:focus {
    outline: none;
    border: none;
}
.audio-element.hide {
    display: none;
}
.text-indication-of-audio-playing-container {
    height: 20px;
}
.text-indication-of-audio-playing {
    font-size: 20px;
}
.text-indication-of-audio-playing.hide {
    display: none;
}
/* 3 Dots animation*/
.text-indication-of-audio-playing span {
    /*transitions with Firefox, IE and Opera Support browser support*/
    animation-name: blinking-dot;
    -webkit-animation-name: blinking-dot;
    -moz-animation-name: blinking-dot;
    -o-animation-name: blinking-dot;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
}
.text-indication-of-audio-playing span:nth-child(2) {
    animation-delay: .4s;
    -webkit-animation-delay: .4s;
    -moz-animation-delay: .4s;
    -o-animation-delay: .4s;
}
.text-indication-of-audio-playing span:nth-child(3) {
    animation-delay: .8s;
    -webkit-animation-delay: .8s;
    -moz-animation-delay: .8s;
    -o-animation-delay: .8s;
}
/* The animation code */


.icon-container2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: white;
    border: 2px solid #ddd; /* Subtle border around the circle */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Small shadow */
}

.icon-container2 i {
    font-size: 13px; /* Smaller icon size */
    color: grey; /* Grey color for the Font Awesome icon */
}

.icon-container3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(89, 196, 188, 0.10);
}

.icon-container3 i {
    font-size: 20px; /* Smaller icon size */
    color: #59C4BC; /* Grey color for the Font Awesome icon */
}

.nocaret-dropdown-toggle::after {
    display: none;
}

#statictime{
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.elapsed-time{
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}


/* Styling for the entire table */
.statement-summary {
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
  }
  
  
  
  /* Styling for table header */
  .table-header .table-row {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: .35em;
  }
  
  /* General styling for table cells */
  .table-heading,
  .table-cell {
    padding: .625em;
    text-align: center;
  }
  
  /* Styling for table headings (th) */
  .table-heading {
    font-size: .85em;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  
  /* Media query for responsiveness */
  @media screen and (max-width: 600px) {
    .statement-summary {
      border: 0;
    }
  
    .table-caption {
      font-size: 1.3em;
    }
  
    .table-header {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
  
    .table-row {
      border-bottom: 3px solid #ddd;
      display: block;
      margin-bottom: .625em;
    }
  
    .table-cell {
      border-bottom: 1px solid #ddd;
      display: block;
      font-size: .8em;
      text-align: right;
    }
  
    .table-cell::before {
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
    }
  
    .table-cell:last-child {
      border-bottom: 0;
    }
  }
  



@keyframes blinking-dot {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/* The animation code */
@-webkit-keyframes blinking-dot {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/* The animation code */
@-moz-keyframes blinking-dot {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/* The animation code */
@-o-keyframes blinking-dot {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}





.icon-container {
    position: relative;
    display: inline-block;
  }
  
  .main-icon {
    font-size: 25px;
    cursor: pointer;
    color: #59C4BC;
  }
  
  .icon-list {
    display: none; /* Initially hide the icon list */
    position: absolute;
    top: 50px;
    left: 0;
    flex-direction: column;
    gap: 10px;
  }
  
  .icon-item {
    position: relative;
    margin-bottom: 10px;
  }
  
  .icon-item i {
    font-size: 25px;
    color:#949494;
    cursor: pointer;
  }

  .icon-item i:hover{
    color: #59C4BC;
  }
  
  .sub-items {
    display: none;
    position: absolute;
    top: 0;
    right: 28px;
    width: 240px;
    flex-direction: column;
    gap: 10px;
    background-color: #fff;
    padding: 5px;
    border-radius: 10px;
    border: 0.594px solid #DCDCDC;
  }
  
  .sub-items a {
    text-decoration: none;
    color: #333;
    padding: 5px;
    display: block;
    font-size: 13px;
  }
  
  .sub-items a:hover {
    background-color: #fff;
    color: #59C4BC;
  }
  
  /* When the main menu icon is clicked, show the icon list */
  .icon-list.show {
    display: flex; /* Show the icon list */
  }
  
  /* When you hover over an icon, show the sub-items */
  .icon-item:hover .sub-items {
    display: flex;
  }
  




  /* Custom Sidebar */
  .link-box {
    display: block;
    width: 100px;
    padding: 15px;
    text-align: center;
    background-color: #fff;
    border-radius: 13px;
    box-shadow: 0px 0px 4px 0px #00000040;
    text-decoration: none; /* Remove underline from the anchor */
    transition: all 0.3s ease; /* Smooth transition effect */
  }
  
  .icon-element {
    font-size: 28px !important;
    color: #333; /* Default icon color */
  }
  
  .text-content {
    font-size: 11px;
    color: #333; /* Default text color */
  }
  
  /* Hover effect */
  .link-box:hover {
    background-color: #028391; /* Set background color on hover */
  }
  
  .link-box:hover .icon-element,
  .link-box:hover .text-content {
    color: white; /* Change icon and text color to white */
  }
  

  /* Active state styling */
.link-box.active {
    background-color: #028391; /* Active background color */
  }
  
  .link-box.active .icon-element,
  .link-box.active .text-content {
    color: white; /* Active icon and text color */
    font-weight: bold; /* Make the text bold to emphasize the active link */
  }
  
  /* Optional: Optional active effect on the icon (e.g., increase the size) */
  .link-box.active .icon-element {
    font-size: 35px; /* Increase icon size when active */
  }



/* Summary page css */

/* Style for the item being dragged */
.draggable-item {
    /* cursor: move; */
    transition: transform 0.3s ease;
    /* Smooth animation */
}

/* When the item is being dragged */
.dragging {
    opacity: 0.6;
    /* Reduce opacity for the dragged item */
    transform: scale(1.05);
    /* Slightly scale up the item for a visual effect */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* Add a shadow to make it "pop" */
}

/* Style for the list while dragging is over it */
#sortable-list {
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

/* Optional: Style for the drop target */
#sortable-list .draggable-item:active {
    /* transform: scale(1.1); */
    /* Slightly scale up when actively being dragged */
}

/* Smooth transition for reordering */
#sortable-list {
    transition: all 0.3s ease;
}

.editable-heading {
    border: none;
    background: none;
    font-size: 1.25rem;
    font-weight: bold;
    color: inherit;
}

.editable-heading:focus {
    outline: none;
    border-bottom: 1px solid #000;
}

.editable-text {
    border: none;
    background: none;
    font-size: 1rem;
    color: inherit;
}

.editable-text:focus {
    outline: none;
    border-bottom: 1px solid #000;
}

.message-alert {
    position: fixed;
    bottom: 50px;
    /* Move it to the bottom */
    left: 50%;
    /* Center it horizontally */
    transform: translateX(-50%);
    /* Adjust position to truly center it */
    background-color: #028391;
    color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.message-alert.fade-out {
    opacity: 0;
}

.letter-content h1{
    font-size: 23px;
    font-weight: bold;
}
.letter-content h2{
    font-size: 20px;
    font-weight: bold;
}
.letter-content h3{
    font-size: 17px;
    font-weight: bold;
}

.letter-content{
    font-size: 14px;
}


.responsive-text{
    display: none;
}





  #loading-message {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    padding: 20px 30px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    font-size: 16px;
    color: #028391;
  }

  /* Optional: Background overlay */
  #loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 999;
  }



  /* Apply custom styling for mobile view */
  @media screen and (max-width: 767px) {
    .dataTables_wrapper .dataTables_length, 
    .dataTables_wrapper .dataTables_filter {
        display: none;
    }

    table.dataTable {
        border: none;
    }

    table.dataTable thead {
        display: none;
    }

    table.dataTable tbody tr {
        display: block;
        border: 1px solid #ddd;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 8px;
        background-color: #fff;
    }

    table.dataTable tbody tr td {
        display: block;
        padding: 8px;
        border: 0;
        text-align: right;
        font-size: 14px;
        background: #f7f7f7;
        border-radius: 8px;
    }

    table.dataTable tbody tr td:before {
        content: attr(data-label);
        font-weight: bold;
        text-transform: capitalize;
        margin-right: 5px;
    }
}






/* Medium devices */

@media screen and (max-width: 992px) {
   
    .btn1{
        padding: 10px 20px;
        border-radius: 6px;
        border: 1px solid #028391;
        color: #fff;
        text-align: center;
        font-family: Montserrat;
        font-size: 13px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        background: #028391;
    }

    
    .btn2{
        padding: 5px 10px;
        border-radius: 6px;
        border: 1px solid #028391;
        color: #028391;
        text-align: center;
        font-family: Montserrat;
        font-size: 11px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
    
    .btn3{
        padding: 10px 20px;
        border-radius: 6px;
        border: 1px solid #828282;
        color: #828282 !important;
        text-align: center;
        font-family: Montserrat;
        font-size: 13px !important;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
    
}
@media (min-width: 768px) {}

/* Large devices */

@media (min-width: 992px) {}

/*Ipad pro view*/

/* 
@media (min-width: 1024px) {

} */

/* Extra Large devices */

@media (min-width: 1200px) {}

@media screen and (max-width: 600px) {
   .custom-flex{
    display: flex;
    flex-direction: column;
    gap: 15px;
   }

   .icon-list.show {
    display: flex;
    flex-direction: row;    
    }
    .icon-container {
        position: relative;
        display: inline-block;
        margin-bottom: 56px;
    }
    .sub-items {
        display: none;
        position: absolute;
        top: 27px;
        left: 0px;
        width: 240px;
        flex-direction: column;
        gap: 10px;
        background-color: #fff;
        padding: 5px;
        border-radius: 10px;
        border: 0.594px solid #DCDCDC;
    }
    .responsive-text{
        font-size: 25px;
        display: block;
    }

    table#example {
        width: 100% !important;
    }
  }