/*** Header Style **/


  /* CSS for two-column layout */
  .header-wrap {
    display: flex;
    justify-content: space-between;
    width: 700px;
    max-width: 800px; /* Adjust as needed */
    margin: 0 auto;
    background: #f1f1f1;
    border-radius: 4px;
}

.license-profile-pic img{
        width: 50px;
        border-radius: 30px;
        border: 1px solid #cdd1f7;
}
.header-wrap .license-profile{
    display: grid;
    padding: 2px 10px;
    font-size: 14px;
    grid-template-rows: 28px 0;
}
.header-wrap .right-column{
    display: flex;
}
.header-wrap .left-column{
font-size: 14px;
}
.header-wrap .left-column h2{
    font-size: 18px;
}
.header-wrap .left-column h2 b{

}


.header-wrap .right-column .l-logout{
    background: #5662ff;
    display: table;
    padding: 1px 10px;
    width: 12px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
}

.left-column h2, .left-column p{
    margin:0;
    }
.left-column, .right-column {
    padding: 20px;
    box-sizing: border-box;
}

/* For responsiveness */
@media (max-width: 768px) {
    .header-wrap {
        flex-direction: column;
    }
    
    .left-column, .right-column {
        width: 100%;
        margin-bottom: 20px;
    }
}



.table-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 14px;
}

.table-container .header {
    background-color: #d1d4ff;
    font-weight: 700;
    font-size: 15px;
}


.table-container .table {
    display: flex;
    flex-direction: column;
    border-collapse: collapse;
    border: 2px solid #d1d4ff;
    border-radius: 5px;
    overflow: hidden;
    width: 700px;
}

.table-container .row {
    display: flex;
}

.table-container .header {
    background-color: #f2f2f2;
}

.license-row >div {
        padding: 3px 10px;
        display: flex;
}

.license-row > div >b {
    width: 130px;
}


.license-row span.active {
    color: #09c55d;
    font-weight: 600;
}

.cell {
    flex: 1;
    padding: 8px 25px;
    border: 1px solid #d1d4ff;
}

.cell:first-child {
    border-left: none;
}

.cell:last-child {
    border-right: none;
}



input#keysubmit {
    background: #414fff;
    color: #fff;
    border-radius: 5px;
    border: none;
}

button.copyLicense {
    background: #09c55d;
    letter-spacing: 0.7px;
    margin-left: 9px;
    border: none;
    border-radius: 3px;
    color: #fff;
    padding: 2px 8px 4px 8px;
}

.th-license #logout {
    padding: 1px 7px 5px 10px;
    border-radius: 4px;
    margin-left: 11px;
    font-size: 14px;
    color: #175dff;
    letter-spacing: .5px;
    font-weight: 800;
    text-decoration: underline;
}

span.gapikey {
    background: #d1d1d1;
    padding: 3px;
    border: 2px solid #cbcbcb;
    cursor: pointer;
    padding: 3px 10px;
    border-radius: 3px;
}


.product-name h3 {
    font-size: 18px;
    letter-spacing: 0.02rem;
}

/** loader **/

.th-api-wrap,.th-api-wrap .apikey-witg {
    display: flex;
}
.l-spinner {
    margin-left: 16px;
    margin-top: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(farthest-side,#474bff 94%,#0000) top/3.8px 3.8px no-repeat,
           conic-gradient(#0000 30%,#474bff);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 3.8px),#000 0);
    animation: l-spinner-c7wet2 0.8s infinite linear;
 }
 
 @keyframes l-spinner-c7wet2 {
    100% {
       transform: rotate(1turn);
    }
 }







 .page-content input, .page-content textarea {
    margin-bottom: 25px;
    padding: 5px;
    border: 1px solid #C6C6C6;
    width: 100% !important;
    max-width: 400px;
    height: 45px;
    border-radius: 4px;
}
.page .page-content h4{
margin-bottom:20px;
}
.page-content form{
  text-align: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
}
.page-content span{
  margin-bottom: 25px;
}
/*  Inner Page   */
.header-wrap .license-profile {
    display: flex;
    flex-direction: column;
}
.header-wrap h2{
  margin: 0!important;
}
.cell,
.table-container .table{
  border-color: #F1F1F1;
}
.header-wrap .right-column .l-logout {
    background: #5662FF;
    display: inline-flex;
    padding: 7px 18px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    line-height: 19px;
    margin-top: 9px;
    width: initial;
}
.header-wrap .right-column .l-logout:hover{
  color: #FFF;
}
.header-wrap .license-profile{
  padding: 0 12px;
}
.table-container .table{
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.cell{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.license-row>div {
    padding: 3px 0px;
    text-transform: capitalize;
}
button.copyLicense {
    margin-left: 0;
    border-radius: 5px;
  margin-bottom: 9px;
}
.th-api-wrap,
.apikey-generate{
  width: 100%;
}
.header-wrap .right-column {
    align-items: center;
}
.th-api-wrap .apikey-witg {
  flex-wrap: wrap;
}
.apikey-witg small{
  width: 100%;
  margin: 18px 0
}
.cell h3{
  margin: 0!important;
}
.header-wrap{
  width:100%;
  max-width: 700px;
}
.page-content .license-profile span{
  margin-bottom: 0;
}
@media (max-width: 768px) {
    .left-column, .right-column {
        width: 100%;
        margin-bottom: 0;
    }
.cell h3{
  font-size: 15px;
}
button.copyLicense{
  margin-bottom: 5px;
}
.right-column{
  padding-top: 0;
}
.cell{
  width: 50%;
}
}