{% include 'header.twig' %}
    
    <div class="marginforfixed userbody">
      <!-- Main variables *content* -->
      <style>
  .faqcard > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 15px;
  }
  .faqcard > div > i {
    background: #000;
    color: #fff;
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border-radius: 15px;
    border: 2px solid #ffb827;
  }
  .faqcard > div h5 {
    margin: 0;
  }
  ul.nav.nav-pills.acc-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
  }
  .\32 fa-heading i {
    background: #ffb827;
    height: 25px;
    width: 25px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
  }
  .\32 fa-heading {
    margin-bottom: 10px;
  }
  .form-group div input {
    padding-left: 40px;
  }
  .form-group div {
    position: relative;
  }
  .form-group div i {
    position: absolute;
    background: #ffb827;
    height: 25px;
    width: 25px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    top: 7.5px;
    left: 8px;
  }
  @media (min-width: 1225px){
    .form-group {
      width: 48%;
      display: inline-block;
      margin-right: 15px;
    }
    button.btn.btn-primary {
      max-width: 200px;
      display: block;
    }
  }
  .\32 fa-code-box {
    padding: 20px;
    background: #00000050;
    padding-bottom: 10px;
    border-radius: 25px;
    border: 2px solid #ffb800;
    margin-top: 35px;
  }
  .row.row-flex.faqrow {
    margin-top: 30px;
  }
  .tab-content.well {
    border: 1px solid #ffffff20;
    padding: 25px;
  }
  ul.nav.nav-pills.acc-pills {
    background: #ffffff20;
    border: 1px solid #ffffff20;
    margin: 15px 0;
    display: flex;
    justify-content: flex-start;
    padding: 20px;
    gap: 15px;
  }
  ul.nav.nav-pills.acc-pills li {
    width: auto;
  }
  ul.nav.nav-pills.acc-pills li a {
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  ul.nav.nav-pills.acc-pills li a:hover {
    background: #000;
    border-radius: 30px;
    border: 2px solid #ffb827;
    color: #fff;
  }
  ul.nav.nav-pills li a i {
    color: #000;
    font-size: 22px;
    padding: 3px;
  }
  label.custom-file-upload .uploadbocx p {
    color: #fff;
    margin: 0;
  }
  label.custom-file-upload .uploadbocx {
    background: #ffb70017;
    padding: 20px;
    max-width: 100%;
    border-radius: 20px;
    border: 1px solid #ffb800;
    color: #fff;
  }
  label.custom-file-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .custom-file-upload span {
    display: inline-block;
    background-color: #ffb800;
    color: #000;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 10px;
  }
  label.custom-file-upload span {
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 22px;
  }
  .custom-file-upload input[type="file"] {
    display: none;
  }

  .profilecardacc img.profilePicture {
    max-width: 150px;
    max-height: 150px;
    border-radius: 96px !important;
  }
  .profilecardacc {
    background: #ffffff20;
    border-radius: 20px;
    padding: 20px;
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border: 1px solid #ffffff20;
  }
  .profilecardacc h3 {
    color: #ffb800;
    font-weight: 800;
  }
  .profilecardacc img.profilePicture {
    max-width: 150px;
    max-height: 150px;
    border-radius: 96px !important;
    border: 2px solid #ffb800;
  }
</style>

<!--<style>
  .cardacc {
    background: #ffffff30;
    padding: 6px;
    border-radius: 20px;
    backdrop-filter: blur(2px);
    border: 2px solid #ffffff;
    box-shadow: 2px 2px 35px -5px #00000020;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cardacc i {
    background: #fff;
    height: 65px;
    width: 65px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }
  .cardacc div h3 {
    font-size: 20px;
    margin: 0;
    color: #000;
    font-weight: 900;
    margin-left: 10px;
    text-align: center;
    margin-right: 14px;
  }
  .cardacc div p {
    font-weight: 800;
    margin: 5px 15px 0;
    color: #fff;
    background: #000;
    text-align: center;
    border-radius: 24px;
    padding: 2px 20px;
  }
  button.btn.btn-primary {
    width: auto;
    margin-right: 0;
    margin-left: auto;
    display: block;
    margin-bottom: 40px;
  }
  section.accsettophdr {
    display: block;
    background: url(https://i.imgur.com/6PsXKpy.png);
    padding: 55px 20px;
    margin-bottom: 100px;
    margin-top: -20px;
  }
  .profilecardsettacc {
    text-align: center;
    margin-bottom: -150px;
    margin-top: 20px;
  }
  .profilecardsettacc img.profilePicture {
    max-width: 90px !important;
    max-height: 90px !important;
    background: #fff;
  }
  .profilecardsettacc input[type="file"] {
    background: #fff;
    padding: 10px;
    border: 5px solid #1c1508;
  }
  .profilecardsettacc p {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
  }
  form#\32 fa-generate-form p {
    color: #ffffff90;
  }
  .form-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
  }
  p.headinggroup {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 30px 0 20px 0;
    border-top: 1px solid #ffffff20;
    padding-top: 30px;
  }
  p.headinggroup:first-child {
    border: none;
    margin-top: 0;
    padding: 0;
  }
  input[type="file"] {
    display: inline-block;
    width: auto;
  }
  #profilePicture{
    max-width: 70px;
    border-radius: 50px;
    height: auto;
    display: inline-block;
  }
  .uploadpp{
    padding: 0;
    height: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0;
    display: inline-block !important;
    width: auto;
  }
  .uploadpp::file-selector-button{
    border-radius: 20px;
    font-size: 12px;
  }
</style>-->
<!--<style>
  #profilePicture{
    max-width: 70px;
    border-radius: 50px;
    height: auto;
    display: inline-block;
  }
  .uploadpp{
    padding: 0;
    height: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0;
    display: inline-block !important;
    width: auto;
  }
  .uploadpp::file-selector-button{
    border-radius: 20px;
    font-size: 12px;
  }
</style>-->

<!--<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
                            </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <ul class="nav nav-pills acc-pills">
        <li class="active"><a data-toggle="pill" href="#general"><i class="ti ti-user-circle"></i>
          General</a></li>
        <li><a data-toggle="pill" href="#privacy"><i class="ti ti-spy"></i> Privacy</a></li>
                <li><a data-toggle="pill" href="#timezone"><i class="ti ti-world-cog"></i> Timezone</a></li>
        <li><a data-toggle="pill" href="#devset"><i class="ti ti-brand-python"></i> Developer Settings</a></li>
      </ul>
    </div>
    <div class="col-md-9">
      <div class="tab-content well">
        <div id="general" class="tab-pane fade in active">
          <form class="mb-2">
            <label for="profilepic" class="control-label">Change Profile Picture</label><br>
            <img class="profilePicture" src="https://i.imgur.com/N9D1AiH.png" alt="Profile Picture">
            <input type="file" id="fileInput" class="form-control uploadpp" onchange="uploadPicture(event)" accept="image/*">
          </form>
          <div class="form-group">
            <label for="username" class="control-label">Username</label>
            <input type="text" class="form-control" id="username" value="admin11" readonly>
          </div>
          <div class="form-group">
            <label for="email" class="control-label">Email</label>
            <input type="text" class="form-control" id="email" value="admin111@gmail.com" readonly>
          </div>
          <button class="btn btn-primary" id="changeEmailLink">
            Change email
          </button>
        </div>
        <div id="privacy" class="tab-pane fade">
          <form  method="post" action="">
                        <div class="form-group">
              <label for="current" class="control-label">Current password</label>
              <input type="password" class="form-control" id="current" name="SettingsFrom[current_password]">
            </div>
            <div class="form-group">
              <label for="new" class="control-label">New password</label>
              <input type="password" class="form-control" id="new" name="SettingsFrom[password]">
            </div>
            <div class="form-group">
              <label for="confirm" class="control-label">Confirm new password</label>
              <input type="password" class="form-control" id="confirm" name="SettingsFrom[confirm_password]">
            </div>

            <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
            <button type="submit" class="btn btn-primary">Change password</button>
          </form>
          <div id="2fa-approve-error-block"
               style=" display: none; "
               class="alert alert-dismissible alert-danger ">
            <button type="button" class="close">&times;</button>
            <span id="2fa-error-text"></span>
          </div>

          <label class="control-label">
            Two-factor authentication
                      </label>

          <!-- 2FA Form generate code -->
<!--<form id="2fa-generate-form"
                method="post"                 action="/account/2fa/generate"
                style=" display: block; ">
            <p>Email-based option to add an extra layer of protection to your account. When signing in you’ll need to enter a code that will be sent to your email address.</p>
            <input type="hidden" name="enabled" value="1">
            <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
            <button id="2fa-generate" type="submit" class="btn btn-primary">
                            Enable
                          </button>
          </form>

          <!-- 2FA Form approve code -->
<!--<form id="2fa-approve-form" method="post"                 action="/account/2fa/approve"
                style=" display: none; ">
            <p>Please check your email and enter the code below.</p>
            <div class="form-group">
              <label for="code" class="control-label">Code</label>
              <input type="text" id="code" name="code" class="form-control">
            </div>
            <input type="hidden" name="enabled" value="1">
            <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
            <button id="2fa-approve" type="submit" class="btn btn-primary">
                            Enable
                          </button>
          </form>
        </div>
                <div id="timezone" class="tab-pane fade">
          <form  action="" method="post">
            <div class="form-group">
              <label for="timezone" class="control-label">Timezone</label>
              <select name="SettingsFrom[timezone]" id="timezone" class="form-control">
                                <option value="-43200"
                        >(UTC -12:00) Baker/Howland Island</option>
                                <option value="-39600"
                        >(UTC -11:00) Niue</option>
                                <option value="-36000"
                        >(UTC -10:00) Hawaii-Aleutian Standard Time, Cook Islands, Tahiti</option>
                                <option value="-34200"
                        >(UTC -9:30) Marquesas Islands</option>
                                <option value="-32400"
                        >(UTC -9:00) Alaska Standard Time, Gambier Islands</option>
                                <option value="-28800"
                        >(UTC -8:00) Pacific Standard Time, Clipperton Island</option>
                                <option value="-25200"
                        >(UTC -7:00) Mountain Standard Time</option>
                                <option value="-21600"
                        >(UTC -6:00) Central Standard Time</option>
                                <option value="-18000"
                        >(UTC -5:00) Eastern Standard Time, Western Caribbean Standard Time</option>
                                <option value="-16200"
                        >(UTC -4:30) Venezuelan Standard Time</option>
                                <option value="-14400"
                        >(UTC -4:00) Atlantic Standard Time, Eastern Caribbean Standard Time</option>
                                <option value="-12600"
                        >(UTC -3:30) Newfoundland Standard Time</option>
                                <option value="-10800"
                        >(UTC -3:00) Argentina, Brazil, French Guiana, Uruguay</option>
                                <option value="-7200"
                        >(UTC -2:00) South Georgia/South Sandwich Islands</option>
                                <option value="-3600"
                        >(UTC -1:00) Azores, Cape Verde Islands</option>
                                <option value="0"
                        >(UTC) Greenwich Mean Time, Western European Time</option>
                                <option value="3600"
                        >(UTC +1:00) Central European Time, West Africa Time</option>
                                <option value="7200"
                        >(UTC +2:00) Central Africa Time, Eastern European Time, Kaliningrad Time</option>
                                <option value="10800"
                        >(UTC +3:00) Moscow Time, East Africa Time, Arabia Standard Time</option>
                                <option value="12600"
                        >(UTC +3:30) Iran Standard Time</option>
                                <option value="14400"
                        >(UTC +4:00) Azerbaijan Standard Time, Samara Time</option>
                                <option value="16200"
                        >(UTC +4:30) Afghanistan</option>
                                <option value="18000"
                        >(UTC +5:00) Pakistan Standard Time, Yekaterinburg Time</option>
                                <option value="19800"
                        selected>(UTC +5:30) Indian Standard Time, Sri Lanka Time</option>
                                <option value="20700"
                        >(UTC +5:45) Nepal Time</option>
                                <option value="21600"
                        >(UTC +6:00) Bangladesh Standard Time, Bhutan Time, Omsk Time</option>
                                <option value="23400"
                        >(UTC +6:30) Cocos Islands, Myanmar</option>
                                <option value="25200"
                        >(UTC +7:00) Krasnoyarsk Time, Cambodia, Laos, Thailand, Vietnam</option>
                                <option value="28800"
                        >(UTC +8:00) Australian Western Standard Time, Beijing Time, Irkutsk Time</option>
                                <option value="31500"
                        >(UTC +8:45) Australian Central Western Standard Time</option>
                                <option value="32400"
                        >(UTC +9:00) Japan Standard Time, Korea Standard Time, Yakutsk Time</option>
                                <option value="34200"
                        >(UTC +9:30) Australian Central Standard Time</option>
                                <option value="36000"
                        >(UTC +10:00) Australian Eastern Standard Time, Vladivostok Time</option>
                                <option value="37800"
                        >(UTC +10:30) Lord Howe Island</option>
                                <option value="39600"
                        >(UTC +11:00) Srednekolymsk Time, Solomon Islands, Vanuatu</option>
                                <option value="41400"
                        >(UTC +11:30) Norfolk Island</option>
                                <option value="43200"
                        >(UTC +12:00) Fiji, Gilbert Islands, Kamchatka Time, New Zealand Standard Time</option>
                                <option value="45900"
                        >(UTC +12:45) Chatham Islands Standard Time</option>
                                <option value="46800"
                        >(UTC +13:00) Samoa Time Zone, Phoenix Islands Time, Tonga</option>
                                <option value="50400"
                        >(UTC +14:00) Line Islands</option>
                              </select>
            </div>

            <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
            <button type="submit" class="btn btn-primary">Save</button>
          </form>
        </div>
        <div id="devset" class="tab-pane fade">
          <form  action="/account/newkey" method="post">
            <div class="form-group">
              <label for="key" class="control-label">API key</label>
                          </div>

            <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
            <button type="submit" class="btn btn-primary">Generate new</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<!--<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
            
      <div class="well">
                        <div class="form-group">
          <label for="username" class="control-label">Username</label>
          <input type="text" class="form-control" id="username" value="admin11" readonly>
        </div>
        <div class="form-group">
          <label for="email" class="control-label">Email</label>
          <input type="text" class="form-control" id="email" value="admin111@gmail.com" readonly>
        </div>
        <button class="btn btn-primary" id="changeEmailLink">
          Change email
        </button>
      </div>

      <div class="well">
        <form  method="post" action="">
                    <div class="form-group">
            <label for="current" class="control-label">Current password</label>
            <input type="password" class="form-control" id="current" name="SettingsFrom[current_password]">
          </div>
          <div class="form-group">
            <label for="new" class="control-label">New password</label>
            <input type="password" class="form-control" id="new" name="SettingsFrom[password]">
          </div>
          <div class="form-group">
            <label for="confirm" class="control-label">Confirm new password</label>
            <input type="password" class="form-control" id="confirm" name="SettingsFrom[confirm_password]">
          </div>

          <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
          <button type="submit" class="btn btn-primary">Change password</button>
        </form>
      </div>

      <div class="well">
        <div id="2fa-approve-error-block"
             style=" display: none; "
             class="alert alert-dismissible alert-danger ">
          <button type="button" class="close">&times;</button>
          <span id="2fa-error-text"></span>
        </div>

        <label class="control-label">
          Two-factor authentication
                  </label>

        <!-- 2FA Form generate code -->
<!--<form id="2fa-generate-form"
              method="post"               action="/account/2fa/generate"
              style=" display: block; ">
          <p>Email-based option to add an extra layer of protection to your account. When signing in you’ll need to enter a code that will be sent to your email address.</p>
          <input type="hidden" name="enabled" value="1">
          <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
          <button id="2fa-generate" type="submit" class="btn btn-primary">
                          Enable
                      </button>
        </form>

        <!-- 2FA Form approve code -->
<!--<form id="2fa-approve-form" method="post"               action="/account/2fa/approve"
              style=" display: none; ">
          <p>Please check your email and enter the code below.</p>
          <div class="form-group">
            <label for="code" class="control-label">Code</label>
            <input type="text" id="code" name="code" class="form-control">
          </div>
          <input type="hidden" name="enabled" value="1">
          <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
          <button id="2fa-approve" type="submit" class="btn btn-primary">
                          Enable
                      </button>
        </form>
      </div>

      
      <div class="well">
        <form  action="" method="post">
          <div class="form-group">
            <label for="timezone" class="control-label">Timezone</label>
            <select name="SettingsFrom[timezone]" id="timezone" class="form-control">
                              <option value="-43200"
                        >(UTC -12:00) Baker/Howland Island</option>
                              <option value="-39600"
                        >(UTC -11:00) Niue</option>
                              <option value="-36000"
                        >(UTC -10:00) Hawaii-Aleutian Standard Time, Cook Islands, Tahiti</option>
                              <option value="-34200"
                        >(UTC -9:30) Marquesas Islands</option>
                              <option value="-32400"
                        >(UTC -9:00) Alaska Standard Time, Gambier Islands</option>
                              <option value="-28800"
                        >(UTC -8:00) Pacific Standard Time, Clipperton Island</option>
                              <option value="-25200"
                        >(UTC -7:00) Mountain Standard Time</option>
                              <option value="-21600"
                        >(UTC -6:00) Central Standard Time</option>
                              <option value="-18000"
                        >(UTC -5:00) Eastern Standard Time, Western Caribbean Standard Time</option>
                              <option value="-16200"
                        >(UTC -4:30) Venezuelan Standard Time</option>
                              <option value="-14400"
                        >(UTC -4:00) Atlantic Standard Time, Eastern Caribbean Standard Time</option>
                              <option value="-12600"
                        >(UTC -3:30) Newfoundland Standard Time</option>
                              <option value="-10800"
                        >(UTC -3:00) Argentina, Brazil, French Guiana, Uruguay</option>
                              <option value="-7200"
                        >(UTC -2:00) South Georgia/South Sandwich Islands</option>
                              <option value="-3600"
                        >(UTC -1:00) Azores, Cape Verde Islands</option>
                              <option value="0"
                        >(UTC) Greenwich Mean Time, Western European Time</option>
                              <option value="3600"
                        >(UTC +1:00) Central European Time, West Africa Time</option>
                              <option value="7200"
                        >(UTC +2:00) Central Africa Time, Eastern European Time, Kaliningrad Time</option>
                              <option value="10800"
                        >(UTC +3:00) Moscow Time, East Africa Time, Arabia Standard Time</option>
                              <option value="12600"
                        >(UTC +3:30) Iran Standard Time</option>
                              <option value="14400"
                        >(UTC +4:00) Azerbaijan Standard Time, Samara Time</option>
                              <option value="16200"
                        >(UTC +4:30) Afghanistan</option>
                              <option value="18000"
                        >(UTC +5:00) Pakistan Standard Time, Yekaterinburg Time</option>
                              <option value="19800"
                        selected>(UTC +5:30) Indian Standard Time, Sri Lanka Time</option>
                              <option value="20700"
                        >(UTC +5:45) Nepal Time</option>
                              <option value="21600"
                        >(UTC +6:00) Bangladesh Standard Time, Bhutan Time, Omsk Time</option>
                              <option value="23400"
                        >(UTC +6:30) Cocos Islands, Myanmar</option>
                              <option value="25200"
                        >(UTC +7:00) Krasnoyarsk Time, Cambodia, Laos, Thailand, Vietnam</option>
                              <option value="28800"
                        >(UTC +8:00) Australian Western Standard Time, Beijing Time, Irkutsk Time</option>
                              <option value="31500"
                        >(UTC +8:45) Australian Central Western Standard Time</option>
                              <option value="32400"
                        >(UTC +9:00) Japan Standard Time, Korea Standard Time, Yakutsk Time</option>
                              <option value="34200"
                        >(UTC +9:30) Australian Central Standard Time</option>
                              <option value="36000"
                        >(UTC +10:00) Australian Eastern Standard Time, Vladivostok Time</option>
                              <option value="37800"
                        >(UTC +10:30) Lord Howe Island</option>
                              <option value="39600"
                        >(UTC +11:00) Srednekolymsk Time, Solomon Islands, Vanuatu</option>
                              <option value="41400"
                        >(UTC +11:30) Norfolk Island</option>
                              <option value="43200"
                        >(UTC +12:00) Fiji, Gilbert Islands, Kamchatka Time, New Zealand Standard Time</option>
                              <option value="45900"
                        >(UTC +12:45) Chatham Islands Standard Time</option>
                              <option value="46800"
                        >(UTC +13:00) Samoa Time Zone, Phoenix Islands Time, Tonga</option>
                              <option value="50400"
                        >(UTC +14:00) Line Islands</option>
                          </select>
          </div>

          <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
          <button type="submit" class="btn btn-primary">Save</button>
        </form>
      </div>
      <div class="well">
        <form  action="/account/newkey" method="post">
          <div class="form-group">
            <label for="key" class="control-label">API key</label>
                      </div>

          <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
          <button type="submit" class="btn btn-primary">Generate new</button>
        </form>
      </div>

      <div class="well">
        <form>
          <label for="profilepic" class="control-label">Change Profile Picture</label><br>
          <img id="profilePicture" src="https://i.imgur.com/N9D1AiH.png" width="200" height="200"/>
          <input type="file" id="fileInput" class="form-control uploadpp" accept="image/*"/>
          <br>
          <button type="button" class="btn btn-primary" onclick="uploadPicture()">Upload Picture</button>
        </form>
      </div>

    </div>
  </div>
</div>-->

<!-- Change email -->
<div class="modal servmodal fade" tabindex="-1" role="dialog" id="changeEmailModal" data-backdrop="static">
  <div class="modal-dialog" role="document">
    <form id="changeEmailForm" class="modal-content" method="post" action="">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                                                                          aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Change email</h4>
      </div>
      <div class="modal-body">
        <div id="changeEmailError"
             class="error-summary alert alert-dismissible alert-danger hidden"></div>
        <div class="form-group">
          <label for="current-email">Current email</label>
          <span class="form-control" id="current-email" disabled>{{ user['email'] }}</span>
        </div>
        <div class="form-group">
          <label for="new-email">New email</label>
          <input type="email" class="form-control" id="new-email" name="ChangeEmailForm[email]">
        </div>
        <div class="form-group">
          <label for="current-password">Current password</label>
          <input type="password" class="form-control" id="current-password" name="ChangeEmailForm[password]">
        </div>
        <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger mb-1"
                data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary"
                id="changeEmailSubmitBtn">Change email</button>
      </div>
    </form>
  </div>
</div>



<!--<section class="accsettophdr">
  <div class="container">
    <div class="row">
      <div class="col-md-2">
        <div class="cardacc">
          <i class="far fa-id-card-alt"></i>
          <div>
            <h3>74840</h3>
            <p>ID</p>
          </div>
        </div>
      </div>
      <div class="col-md-2">
        <div class="cardacc">
          <i class="far fa-user"></i>
          <div>
            <h3></h3>
            <p>First Name</p>
          </div>
        </div>
      </div>
      <div class="col-md-2">
        <div class="cardacc">
          <i class="far fa-user"></i>
          <div>
            <h3></h3>
            <p>Last Name</p>
          </div>
        </div>
      </div>
      <div class="col-md-2">
        <div class="cardacc">
          <i class="fal fa-language"></i>
          <div>
            <h3>en</h3>
            <p>Lang</p>
          </div>
        </div>
      </div>
      <div class="col-md-2">
        <div class="cardacc">
          <i class="far fa-money-bill-wave-alt"></i>
          <div>
            <h3>$0</h3>
            <p>Balance</p>
          </div>
        </div>
      </div>
      <div class="col-md-2">
        <div class="cardacc">
          <i class="far fa-sack-dollar"></i>
          <div>
            <h3>$0</h3>
            <p>Spent</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="profilecardsettacc">
          <img class="profilePicture" src="https://imgur.com/O3OnWpa.png" alt="Profile Picture">
          <input type="file" id="fileInput" class="form-control uploadpp" onchange="uploadPicture(event)" accept="image/*">
          <p>admin11</p>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
                            </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <p class="headinggroup">General</p>
      <!--<form class="mb-2">
        <label for="profilepic" class="control-label">Change Profile Picture</label><br>
        <img class="profilePicture" src="https://i.imgur.com/N9D1AiH.png" alt="Profile Picture">
        <input type="file" id="fileInput" class="form-control uploadpp" onchange="uploadPicture(event)" accept="image/*">
      </form>--
      <div class="form-group">
        <label for="username" class="control-label">Username</label>
        <input type="text" class="form-control" id="username" value="admin11" readonly>
      </div>
      <div class="form-group">
        <label for="email" class="control-label">Email</label>
        <input type="text" class="form-control" id="email" value="admin111@gmail.com" readonly>
      </div>
      <button class="btn btn-primary" id="changeEmailLink">
        Change email
      </button>

      <p class="headinggroup">Privacy</p>
      <form  method="post" action="">
                <div class="form-group">
          <label for="current" class="control-label">Current password</label>
          <input type="password" class="form-control" id="current" name="SettingsFrom[current_password]">
        </div>
        <div class="form-group">
          <label for="new" class="control-label">New password</label>
          <input type="password" class="form-control" id="new" name="SettingsFrom[password]">
        </div>
        <div class="form-group">
          <label for="confirm" class="control-label">Confirm new password</label>
          <input type="password" class="form-control" id="confirm" name="SettingsFrom[confirm_password]">
        </div>

        <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
        <button type="submit" class="btn btn-primary">Change password</button>
      </form>
      <div id="2fa-approve-error-block"
           style=" display: none; "
           class="alert alert-dismissible alert-danger ">
        <button type="button" class="close">&times;</button>
        <span id="2fa-error-text"></span>
      </div>

      <label class="control-label">
        Two-factor authentication
              </label>

      <!-- 2FA Form generate code --
      <form id="2fa-generate-form"
            method="post"             action="/account/2fa/generate"
            style=" display: block; ">
        <p>Email-based option to add an extra layer of protection to your account. When signing in you’ll need to enter a code that will be sent to your email address.</p>
        <input type="hidden" name="enabled" value="1">
        <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
        <button id="2fa-generate" type="submit" class="btn btn-primary">
                    Enable
                  </button>
      </form>

      <!-- 2FA Form approve code --
      <form id="2fa-approve-form" method="post"             action="/account/2fa/approve"
            style=" display: none; ">
        <p>Please check your email and enter the code below.</p>
        <div class="form-group">
          <label for="code" class="control-label">Code</label>
          <input type="text" id="code" name="code" class="form-control">
        </div>
        <input type="hidden" name="enabled" value="1">
        <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
        <button id="2fa-approve" type="submit" class="btn btn-primary">
                    Enable
                  </button>
      </form>
      <p class="headinggroup">Timezone</p>
      <form  action="" method="post">
        <div class="form-group">
          <label for="timezone" class="control-label">Timezone</label>
          <select name="SettingsFrom[timezone]" id="timezone" class="form-control">
                        <option value="-43200"
                    >(UTC -12:00) Baker/Howland Island</option>
                        <option value="-39600"
                    >(UTC -11:00) Niue</option>
                        <option value="-36000"
                    >(UTC -10:00) Hawaii-Aleutian Standard Time, Cook Islands, Tahiti</option>
                        <option value="-34200"
                    >(UTC -9:30) Marquesas Islands</option>
                        <option value="-32400"
                    >(UTC -9:00) Alaska Standard Time, Gambier Islands</option>
                        <option value="-28800"
                    >(UTC -8:00) Pacific Standard Time, Clipperton Island</option>
                        <option value="-25200"
                    >(UTC -7:00) Mountain Standard Time</option>
                        <option value="-21600"
                    >(UTC -6:00) Central Standard Time</option>
                        <option value="-18000"
                    >(UTC -5:00) Eastern Standard Time, Western Caribbean Standard Time</option>
                        <option value="-16200"
                    >(UTC -4:30) Venezuelan Standard Time</option>
                        <option value="-14400"
                    >(UTC -4:00) Atlantic Standard Time, Eastern Caribbean Standard Time</option>
                        <option value="-12600"
                    >(UTC -3:30) Newfoundland Standard Time</option>
                        <option value="-10800"
                    >(UTC -3:00) Argentina, Brazil, French Guiana, Uruguay</option>
                        <option value="-7200"
                    >(UTC -2:00) South Georgia/South Sandwich Islands</option>
                        <option value="-3600"
                    >(UTC -1:00) Azores, Cape Verde Islands</option>
                        <option value="0"
                    >(UTC) Greenwich Mean Time, Western European Time</option>
                        <option value="3600"
                    >(UTC +1:00) Central European Time, West Africa Time</option>
                        <option value="7200"
                    >(UTC +2:00) Central Africa Time, Eastern European Time, Kaliningrad Time</option>
                        <option value="10800"
                    >(UTC +3:00) Moscow Time, East Africa Time, Arabia Standard Time</option>
                        <option value="12600"
                    >(UTC +3:30) Iran Standard Time</option>
                        <option value="14400"
                    >(UTC +4:00) Azerbaijan Standard Time, Samara Time</option>
                        <option value="16200"
                    >(UTC +4:30) Afghanistan</option>
                        <option value="18000"
                    >(UTC +5:00) Pakistan Standard Time, Yekaterinburg Time</option>
                        <option value="19800"
                    selected>(UTC +5:30) Indian Standard Time, Sri Lanka Time</option>
                        <option value="20700"
                    >(UTC +5:45) Nepal Time</option>
                        <option value="21600"
                    >(UTC +6:00) Bangladesh Standard Time, Bhutan Time, Omsk Time</option>
                        <option value="23400"
                    >(UTC +6:30) Cocos Islands, Myanmar</option>
                        <option value="25200"
                    >(UTC +7:00) Krasnoyarsk Time, Cambodia, Laos, Thailand, Vietnam</option>
                        <option value="28800"
                    >(UTC +8:00) Australian Western Standard Time, Beijing Time, Irkutsk Time</option>
                        <option value="31500"
                    >(UTC +8:45) Australian Central Western Standard Time</option>
                        <option value="32400"
                    >(UTC +9:00) Japan Standard Time, Korea Standard Time, Yakutsk Time</option>
                        <option value="34200"
                    >(UTC +9:30) Australian Central Standard Time</option>
                        <option value="36000"
                    >(UTC +10:00) Australian Eastern Standard Time, Vladivostok Time</option>
                        <option value="37800"
                    >(UTC +10:30) Lord Howe Island</option>
                        <option value="39600"
                    >(UTC +11:00) Srednekolymsk Time, Solomon Islands, Vanuatu</option>
                        <option value="41400"
                    >(UTC +11:30) Norfolk Island</option>
                        <option value="43200"
                    >(UTC +12:00) Fiji, Gilbert Islands, Kamchatka Time, New Zealand Standard Time</option>
                        <option value="45900"
                    >(UTC +12:45) Chatham Islands Standard Time</option>
                        <option value="46800"
                    >(UTC +13:00) Samoa Time Zone, Phoenix Islands Time, Tonga</option>
                        <option value="50400"
                    >(UTC +14:00) Line Islands</option>
                      </select>
        </div>

        <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
        <button type="submit" class="btn btn-primary">Save</button>
      </form>

      <p class="headinggroup">Developers</p>
      <form  action="/account/newkey" method="post">
        <div class="form-group">
          <label for="key" class="control-label">API key</label>
                  </div>

        <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
        <button type="submit" class="btn btn-primary">Generate new</button>
      </form>
    </div>
  </div>
</div>-->


<div class="container">
    {% if error %}
        <div class="alert alert-dismissible alert-danger">
          <button type="button" class="close" data-dismiss="alert">×</button>
          {{ errorText }}
        </div>
      {% endif %}
      {% if success %}
        <div class="alert alert-dismissible alert-success">
          <button type="button" class="close" data-dismiss="alert">×</button>
          {{ successText }}
        </div>
      {% endif %}
  <div class="row">
    <div class="col-md-12">
                            </div>
  </div>
  <div class="row">
    <div class="col-md-3">
      <div class="profilecardacc">
        <h3>{{ user['username'] }}</h3>
        <img class="profilePicture" src="https://i.imgur.com/2uL3ZvW.jpeg" alt="Profile Picture">
        <!--<input type="file" id="fileInput" class="form-control uploadpp" onchange="uploadPicture(event)" accept="image/*">-->
        <label for="fileInput" class="custom-file-upload">
          <span>Upload New Photo</span>
          <div class="uploadbocx">
            <p>Upload a new avatar! Please make sure it is below 1MB.</p>
          </div>
          <input type="file" id="fileInput" class="form-control uploadpp" onchange="uploadPicture(event)" accept="image/*">
        </label>

      </div>
    </div>
    
    <div class="col-md-9">
      <ul class="nav nav-pills acc-pills">
        <li class="active"><a data-toggle="pill" href="#general"><i class="ti ti-user-filled"></i>
          General</a></li>
        <li><a data-toggle="pill" href="#privacy"><i class="ti ti-password"></i> Privacy</a></li>
                <li><a data-toggle="pill" href="#timezone"><i class="ti ti-globe-filled"></i> Timezone</a></li>
        <li><a data-toggle="pill" href="#devset"><i class="ti ti-code-circle"></i> Developer Settings</a></li>
      </ul>
      <div class="tab-content well">
        <div id="general" class="tab-pane fade in active">
          <div class="form-group">
            <label for="username" class="control-label">Username</label>
            <div>
              <i class="fas fa-user"></i>
              <input type="text" class="form-control" id="username" value="{{ user['username'] }}" readonly>
            </div>
          </div>
          <div class="form-group">
            <label for="email" class="control-label">Email</label>
            <div>
              <i class="fas fa-at"></i>
              <input type="text" class="form-control" id="email" value="{{ user['email'] }}" readonly>
            </div>
          </div>
          <button class="btn btn-primary" id="changeEmailLink">
            Change email
          </button>
        </div>
        <div id="privacy" class="tab-pane fade">
          <form action="" method="post">
                                            
                                <div class="mb-3">
                                    <label for="current">{{ lang['account.password.current'] }}</label>
                                    <input type="password" class="form-control" id="current" name="current_password">
                                </div>

                                <div class="mb-3">
                                    <label for="new">{{ lang['account.password.new'] }}</label>
                                    <input type="password" class="form-control" id="new" name="password">
                                </div>

                                <div class="mb-3">
                                    <label for="confirm">{{ lang['account.password.confirm'] }}</label>
                                    <input type="password" class="form-control" id="confirm" name="confirm_password">
                                </div>
                                <button type="submit" class="btn btn-primary d-block w-100">{{ lang['account.password.button'] }}</button>
                            </form>
          <div id="2fa-approve-error-block"
               style=" display: none; "
               class="alert alert-dismissible alert-danger ">
            <button type="button" class="close">&times;</button>
            <span id="2fa-error-text"></span>
          </div>

          <div class="2fa-code-box">
            <div class="2fa-heading">
              <i class="fas fa-shield-alt"></i>
              <label class="control-label">
                Two-factor authentication
                              </label>
            </div>
            <!-- 2FA Form generate code -->
            <form id="2fa-generate-form"
                  method="post"                   action="/account/newapikey"
                  style=" display: block; ">
              <p>Email-based option to add an extra layer of protection to your account. When signing in you’ll need to enter a code that will be sent to your email address.</p>
              <input type="hidden" name="enabled" value="1">
              <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
              <button id="2fa-generate" type="submit" class="btn btn-primary">
                                Enable
                              </button>
            </form>

            <!-- 2FA Form approve code -->
            <form id="2fa-approve-form" method="post"                   action="/account/2fa/approve"
                  style=" display: none; ">
              <p>Please check your email and enter the code below.</p>
              <div class="form-group">
                <label for="code" class="control-label">Code</label>
                <input type="text" id="code" name="code" class="form-control">
              </div>
              <input type="hidden" name="enabled" value="1">
              <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
              <button id="2fa-approve" type="submit" class="btn btn-primary">
                                Enable
                              </button>
            </form>
          </div>
        </div>
                <div id="timezone" class="tab-pane fade">
          <form  action="" method="post">
            <div class="form-group">
              <label for="timezone" class="control-label">Timezone</label>
              <select name="SettingsFrom[timezone]" id="timezone" class="form-control">
                                <option value="-43200"
                        >(UTC -12:00) Baker/Howland Island</option>
                                <option value="-39600"
                        >(UTC -11:00) Niue</option>
                                <option value="-36000"
                        >(UTC -10:00) Hawaii-Aleutian Standard Time, Cook Islands, Tahiti</option>
                                <option value="-34200"
                        >(UTC -9:30) Marquesas Islands</option>
                                <option value="-32400"
                        >(UTC -9:00) Alaska Standard Time, Gambier Islands</option>
                                <option value="-28800"
                        >(UTC -8:00) Pacific Standard Time, Clipperton Island</option>
                                <option value="-25200"
                        >(UTC -7:00) Mountain Standard Time</option>
                                <option value="-21600"
                        >(UTC -6:00) Central Standard Time</option>
                                <option value="-18000"
                        >(UTC -5:00) Eastern Standard Time, Western Caribbean Standard Time</option>
                                <option value="-16200"
                        >(UTC -4:30) Venezuelan Standard Time</option>
                                <option value="-14400"
                        >(UTC -4:00) Atlantic Standard Time, Eastern Caribbean Standard Time</option>
                                <option value="-12600"
                        >(UTC -3:30) Newfoundland Standard Time</option>
                                <option value="-10800"
                        >(UTC -3:00) Argentina, Brazil, French Guiana, Uruguay</option>
                                <option value="-7200"
                        >(UTC -2:00) South Georgia/South Sandwich Islands</option>
                                <option value="-3600"
                        >(UTC -1:00) Azores, Cape Verde Islands</option>
                                <option value="0"
                        >(UTC) Greenwich Mean Time, Western European Time</option>
                                <option value="3600"
                        >(UTC +1:00) Central European Time, West Africa Time</option>
                                <option value="7200"
                        >(UTC +2:00) Central Africa Time, Eastern European Time, Kaliningrad Time</option>
                                <option value="10800"
                        >(UTC +3:00) Moscow Time, East Africa Time, Arabia Standard Time</option>
                                <option value="12600"
                        >(UTC +3:30) Iran Standard Time</option>
                                <option value="14400"
                        >(UTC +4:00) Azerbaijan Standard Time, Samara Time</option>
                                <option value="16200"
                        >(UTC +4:30) Afghanistan</option>
                                <option value="18000"
                        >(UTC +5:00) Pakistan Standard Time, Yekaterinburg Time</option>
                                <option value="19800"
                        selected>(UTC +5:30) Indian Standard Time, Sri Lanka Time</option>
                                <option value="20700"
                        >(UTC +5:45) Nepal Time</option>
                                <option value="21600"
                        >(UTC +6:00) Bangladesh Standard Time, Bhutan Time, Omsk Time</option>
                                <option value="23400"
                        >(UTC +6:30) Cocos Islands, Myanmar</option>
                                <option value="25200"
                        >(UTC +7:00) Krasnoyarsk Time, Cambodia, Laos, Thailand, Vietnam</option>
                                <option value="28800"
                        >(UTC +8:00) Australian Western Standard Time, Beijing Time, Irkutsk Time</option>
                                <option value="31500"
                        >(UTC +8:45) Australian Central Western Standard Time</option>
                                <option value="32400"
                        >(UTC +9:00) Japan Standard Time, Korea Standard Time, Yakutsk Time</option>
                                <option value="34200"
                        >(UTC +9:30) Australian Central Standard Time</option>
                                <option value="36000"
                        >(UTC +10:00) Australian Eastern Standard Time, Vladivostok Time</option>
                                <option value="37800"
                        >(UTC +10:30) Lord Howe Island</option>
                                <option value="39600"
                        >(UTC +11:00) Srednekolymsk Time, Solomon Islands, Vanuatu</option>
                                <option value="41400"
                        >(UTC +11:30) Norfolk Island</option>
                                <option value="43200"
                        >(UTC +12:00) Fiji, Gilbert Islands, Kamchatka Time, New Zealand Standard Time</option>
                                <option value="45900"
                        >(UTC +12:45) Chatham Islands Standard Time</option>
                                <option value="46800"
                        >(UTC +13:00) Samoa Time Zone, Phoenix Islands Time, Tonga</option>
                                <option value="50400"
                        >(UTC +14:00) Line Islands</option>
                              </select>
            </div>

            <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
            <button type="submit" class="btn btn-primary">Save</button>
          </form>
        </div>
        <div id="devset" class="tab-pane fade">
          <form  action="/account/newapikey" method="post">
            <div class="form-group">
              <label for="key" class="control-label">API key</label>
                          </div>

            <input type="hidden" name="_csrf" value="rwUKY0hL58h_z5UdRzYvIFCJz70Kssrm91iSewKfX0DJMDsxDB2R_iyow2wgfx4WIPmG0j7nu9OGPfxOMMAyJA==">
            <button type="submit" class="btn btn-primary">Generate new</button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="row row-flex faqrow">
    <div class="col-md-3">
      <div class="faqcard">
        <div>
          <i class="fas fa-at"></i>
          <h5>Update Email Address</h5>
        </div>
        <p>To Update your Email Address click on "Update Email" button and Enter your New Email and your current password. Once done click on "Proceed" and verify your Email Address through the Email received in your Email Id.</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="faqcard">
        <div>
          <i class="fas fa-shield-alt"></i>
          <h5>Two Factor Authentication</h5>
        </div>
        <p>Its an Email-based option to add an extra layer of protection to your account. When signing in you’ll need to enter a code that will be sent to your email address.</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="faqcard">
        <div>
          <i class="fas fa-globe-europe"></i>
          <h5>Timezone</h5>
        </div>
        <p>You can change the Time zone according to your Country Timings. It will definitely help you to monitor your order timings by your time.</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="faqcard">
        <div>
          <i class="fas fa-link"></i>
          <h5>API Key</h5>
        </div>
        <p>An API Key is a unique code for each user. It's like a secret key that servers use to confirm which account is making requests and to automate processes. Remember to keep your API Key safe, as it can be used by servers to identify your account.</p>
      </div>
    </div>
  </div>
</div>
    </div>

    




<div class="integration-fixed integration-fixed__bottom-right">
    <style>
    .telegram-container {
        position: relative;
    }

    .telegram-button {
        width: 60px;
        height: 60px;
        bottom: 40px;
        right: 40px;
        background-color: transparent !important;
        color: #FFF !important;
        border-radius: 50px;
        text-align: center;
        font-size: 30px;
        box-shadow: 2px 2px 3px #999;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;
        transform: scale(0.9)
    }

    .telegram-button::after {
        content: '';
        position: absolute;
        width: 70%;
        height: 70%;
        background-color: #fff !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        z-index: -1;
    }

    .telegram-button svg {
        fill: #24A1DE;
        width: 60px;
    }

    .telegram-button:hover {
        transform: scale(1);
    }
</style>
  
  
 {% include 'footer.twig' %}
		