@font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-Regular.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
    }
    @font-face {
        font-family: 'Roboto-Medium';
        src: url('fonts/Roboto-Medium.ttf') format('truetype');
        font-weight: 500;
        font-style: normal;
    }
    @font-face {
        font-family: 'Roboto-Semibold';
        src: url('fonts/Roboto-SemiBold.ttf') format('truetype');
        font-weight: 600;
        font-style: normal;
    }
.logstarea{
    margin-bottom: 20px;      
}

.logstarea img{
    width: 100%;   
}
    :root {
      --primary: #0d6efd;
      --bg-light: #f8f9fa;
      --text-dark: #212529;
      --border-color: #dee2e6;
    }

    body {
      font-family: "Segoe UI", Roboto, Arial, sans-serif;
      color: var(--text-dark);
      background-color: var(--bg-light);
      line-height: 1.6;
      font-family: 'Roboto', sans-serif;
    }




    .wrapper {
      display: flex;
      min-height: 100vh;
    }

    /* Sidebar */
    .sidebar {
      width: 260px;
      background: #ffffff;
      border-right: 1px solid var(--border-color);
      padding: 20px;
      position: sticky;
      top: 0;
      height: 100vh;
    }

    .sidebar h2 {
      font-size: 1.25rem;
      margin-bottom: 1rem;
      color: var(--primary);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .sidebar ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .sidebar ul li {
      margin-bottom: 8px;
    }

    .sidebar ul li a {
      text-decoration: none;
      color: #495057;
      font-size: 0.95rem;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 6px;
    }

    .sidebar ul li a i {
      font-size: 1.1rem;
    }

    .sidebar ul li a:hover {
      background-color: rgba(13, 110, 253, 0.1);
      color: var(--primary);
    }

    .sidebar ul li a.active {
        background-color: rgba(13, 110, 253, 0.1);
        color: var(--primary);
    }
    /* Content */
    .content {
      flex: 1;
      padding: 40px;
    }

    .content section {
      margin-bottom: 50px;
    }

    .content h1 {
      font-size: 2rem;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .content h2 {
      font-size: 1.3rem;
      margin-bottom: 15px;
      color: var(--primary);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .note {
      background-color: #fff3cd;
      border: 1px solid #ffecb5;
      padding: 15px;
      border-radius: 6px;
      margin-top: 15px;
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }

    footer {
      text-align: center;
      padding: 20px;
      font-size: 0.9rem;
      color: #6c757d;
      border-top: 1px solid var(--border-color);
    }

    ul.custul{
        padding-left: 1.2rem;
    }

    ul.custul li{
      margin-bottom: 10px;
    }

    .usermanualimgs{
      width: 100%;
      border-radius: 10px;
    }

    .toplogoSection{
      display: flex;
      width: 100%;
      align-items: center;
      gap: 15px;
      background: #fff;
      padding: 10px 20px;
      border-radius: 35px;
      box-shadow: 0 0 4px 0px rgb(34 50 72 / 19%);

    }
    .toplogoSection .logo2{
      width: 160px;
    }

    .toplogoSection .userlgotxt{
      margin-left: auto;
    }

    .gmaillogo{
      width: 70px;
    }

    .addaccsec{
      padding: 10px;
      border-radius: 6px;
      background:#fff;
      width: 190px;
      box-shadow: 0px 3px 10px 0px rgba(31, 31, 31, 0.08);
    }
    .addaccsec .addaccard, .exc365 .exc365card{
      padding: 7px 0;
      border-top: 2px solid #c2c2c2;
      border-bottom: 2px solid #c2c2c2;
    }
    .addaccsec .addaccard i.bi{
      font-weight: 700;
      color: #03436a;
      background: #38257b29;
      padding: 1px 3px;
      border-radius: 50px;
      margin-right: 10px;
    }
    .addaccsec .addaccard img.apsr{
      width: 26px;
      margin-right: 5px;
    }
    .arrowbtns{
      width: 270px;
      text-align: center;
      color: #0a469f;
      margin-top: 5px;
      margin-bottom: 5px;
    }
    .exc365{
      padding: 10px;
      border-radius: 6px;
      background:#fff;
      width: 270px;
      box-shadow: 0px 3px 10px 0px rgba(31, 31, 31, 0.08);
    }
    .exc365 .exc365card img{
      width: 23px;
      margin-right: 5px;
    }

    .entyouremiladdSec{
      padding: 20px;
      border-radius: 10px;
      background:#fff;
      width: 320px;
      box-shadow: 0px 3px 10px 3px rgba(31, 31, 31, 0.08);
    }

    .entyouremiladdSec .entyouremiladdcard{
      
    }

    .entyouremiladdSec .entyouremiladdcard img{
      width: 25px;
      margin-bottom: 20px;
    }

    .entyouremiladdSec .entyouremiladdcard .fmhdng{
      margin-bottom: 30px;
      font-size: 1.7rem;
      line-height: 1.3;
      word-break: break-all;
      overflow-wrap: anywhere;
    }


    .entyouremiladdSec .entyouremiladdcard .fieldarea{
      padding: 8px 15px;
      border: 1px solid #5b5b5b;
      border-radius: 50px;
      position: relative;
    }

    .entyouremiladdSec .entyouremiladdcard .fieldarea.fldpass{
      padding: 4px 15px 8px 15px;
    }

    .entyouremiladdSec .entyouremiladdcard .fieldarea .lbgd{
      color: #424243;
      position: absolute;
      top: -11px;
      background: #fff;
      padding-left: 5px;
      padding-right: 5px;
      border-radius: 50px;
      font-size: 0.8rem;
    }
    .entyouremiladdSec .entyouremiladdcard .fieldarea .exampmailid{
      color: #515151;
    }
    .entyouremiladdSec .entyouremiladdcard .fieldarea .exampmailid i.bi{
      font-size: 0.5rem;
    }

    .entyouremiladdSec .entyouremiladdcard .fieldarea i.bi.icnteye{
      position: absolute;
      right: 9px;
      top: 6px;
      color: #a7a7a7;
    }

    .entyouremiladdSec .entyouremiladdcard .fmbtnare{
      width:100%;
      text-align: end;
    }

    .entyouremiladdSec .entyouremiladdcard .fmbtnare button{
      background: #1a6eed;
      border: 0;
      color: #fff;
      padding: 4px 20px;
      border-radius: 50px;
      cursor: auto;
    }

    .entyouremiladdSec .entyouremiladdcard .setspacer{
      height: 80px;
    }
    .entyouremiladdSec .entyouremiladdcard .demohdng{
      margin-bottom: 20px;
      font-size: 0.75rem;
    }

    .clntcertSec{
      display: flex;
    }
    .clntcertSec .clntcertart{
      width: 100%;
      margin-left: 8px;
    }
    .clntcertSec .clntcertart .clnt1{
      font-size: 0.75rem;
    }
    .clntcertSec .clntcertart .clnt2{
      
    }

    .clntcertSec .slt{
      text-align: end;
      margin-top: auto;
      margin-bottom: auto;
      color: #1a6eed;
      font-weight: 600;
      font-size: 0.8rem;
      margin-right: 8px;
    }

    .clntcertSec .slt2{
      text-align: end;
      margin-top: auto;
      margin-bottom: auto;
      font-weight: 600;
      font-size: 0.8rem;
      margin-right: 8px;
      color: #767676;
    }

    .exc365 img.apsr{
      width: 21px;
      margin-right: 4px;
    }

    .exc365 img.apsr2{
      width: 40px;
      margin-bottom: 4px;
    }

    .exc365 .cdghdng{
      font-weight: 600;
      margin-left: 4px;
    }

    .exc365 .mtedTxt{
      font-size: 0.8rem;
      margin-left: 5px;
      color: #7f7f7f;
    }
    .exc365 .mtedTxt span{
      color: #597eff;
    }
    .exc365 .mailsccAra{
      display: flex;
      width: 100%;
    }
    .exc365  hr{
      margin-bottom: 7px;
      margin-top: 9px;
    }
    .exc365 .mailsccAra .mailscTxt{
      width: 100%;
    }

    .exc365 .mailsccAra .mailsccIocn{
      color: #a3a3a3;
    }

    .iosdevSec{
      padding: 10px;
      border-radius: 6px;
      background: #f0f0f0;
      width: 311px;
      box-shadow: 0px 3px 10px 0px rgba(31, 31, 31, 0.08);
      position: relative;
    }
    .iosdevSec.h400ht{
      height:400px;
      overflow: hidden;
    }

    .iosdevSec .btnArea{
      display: flex;
    }
    .iosdevSec .btnArea .excgt{
      width: 100%;
      text-align: center;
      font-weight: 500;
    }
    .iosdevSec .btnArea .btnArea1 button{
      border: 0;
      background: #fff;
      border-radius: 50px;
      cursor: auto;
      color: #6e6e6e;
    }
    .iosdevSec .btnArea .btnArea2{
      
    }
    .iosdevSec .btnArea .btnArea2 button{
      background: #5a7fff;
      border: 0;
      color: #fff;
      padding: 2px 13px;
      border-radius: 50px;
      cursor: auto;
    }

    .iosdevSec .iosdevCntarea{
      text-align: center;
    }

    .iosdevSec .iosdevCntarea .ioscntArea{
      width: 50px;
      margin-bottom: 8px;
    }

    .iosdevSec .iosdevCntarea .iosdTd{
      font-weight: 600;
    }

    .iosdevSec  .iosfmfilds{

    }

    .iosdevSec  .iosfmfilds .iosfmflbls{
      font-size: 0.8rem;
      margin-left: 10px;
      margin-bottom: 3px;
      color: #747474;
    }

    .iosdevSec  .iosfmfilds .iosfmflblsinput{
      padding: 7px 14px;
      background: #fff;
      border-radius: 50px;
      color: #5c5c5c;
      position: relative;
    }
    .iosdevSec  .iosfmfilds .iosfmflblsinput i.bi{
      color: #ababab;
      position: absolute;
      right: 8px;
    }

    .iosdevSec .iosfmTxt{
      margin-top: 10px;
      font-size: 0.8rem;
      color: #4f4f4f;
      margin-left: 8px;
    }
    .iosdevSec .iosfmTxt span{
      color: #3d61dc;
    }

    .iosdevSec .excviewcard{
      background: #fff;
      padding: 8px 12px;
      border-radius: 10px;
    }
    .iosdevSec .excviewcard .excviewcnt{
      display: flex;
      font-size: 0.9rem;
    }

    .iosdevSec .excviewcard .excviewcnt .excviehdng{
      font-weight: 500;
      margin-right: 7px;
      width: 83px;
    }

    .iosdevSec .excviewcard hr{
        margin-top: 10px;
        margin-bottom: 10px;
        border: 1px solid #a1a1a1;
    }

    .iosdevSec .overlapSection{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      background: #00000042;
      display: flex;
      padding: 15px;
    }

    .iosdevSec .overlapSection .overlapCard{
      background: #fff;
      padding: 15px;
      margin: auto;
      width:100%;
      border-radius: 28px;
      font-size: 0.8rem;
    }

    .iosdevSec .overlapSection .overlapCard .overlapCardHdng{
      color: #000;
      font-weight: 500;
      margin-bottom: 6px;
    }

    .iosdevSec .overlapSection .overlapCard .overlapCardTxt{
      color: #414141;
      margin-bottom: 12px;
    }

    .iosdevSec .overlapSection .overlapCard .overlapcbtn{
      padding: 6px;
      margin-top: 7px;
      margin-bottom: 7px;
      background: #dbdbdb;
      color: #000;
      border-radius: 50px;
      text-align: center;
      font-weight: 500;
    }
    .iosdevSec .overlapSection .overlapCard .overlapcbtn.clicked{
      background: #5a7fff;
      border: 0;
      color: #fff;
    }

    .starofpass{
      color: #575757;
      font-size: 0.5rem;
      margin-top: auto;
      margin-bottom: auto;
    }

    .footerSpace{
      height: 55vh;
    }


    @media screen and (max-width: 800px) {
        .sidebar {
            display: none;
        }
    }

    @media (max-width: 768px) {
      .wrapper {
        flex-direction: column;
      }

      .sidebar {
        width: 100%;
        height: auto;
        position: relative;
      }

      .content {
        padding: 20px;
      }
      .toplogoSection .logo2{
        width: 100px;
      }
      .toplogoSection .userlgotxt {
          font-size: 0.8rem;
      }
      .addaccsec, .exc365{
        width: 100%;
      }
      .entyouremiladdSec{
        width: 100%;
      }
      .iosdevSec, .arrowbtns{
        width: 100%;
      }
      .footerSpace{
        display: none;
      }
    }