/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;

    height: 100vh;
}
body.content-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
p.error, .error{
    color:#790000 !important;
}
/*page start*/
.page-head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.page-head .btn-add{
    background-color: #008CBA;
    padding: 7px;
    border: none;
}
/*page end*/
.homepage{
    background-image:url('/img/sign_bk_1.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 1920px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}
.no-access-wrap{
    max-width: 1920px;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center  
}

.no-access-wrap .no-access {
    width: 100%;
    max-width: 850px;
    height: 50%;
    width: 100%;
    display: flex;
    position: fixed;
    align-items: center;
}
/*success messgae start*/
.success-wraper .success{
   color:#3c763d;
   font-weight:bold;
}
/*success message end*/
/* Login form container */
.login-form {
    display:none !important;
    background-color: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width:100% !important;
}

/* Heading */
.login-form h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}
.mslogin a {
    font-size: 18px;
    color: #5E5E5E;
    text-decoration: none;
    font-weight: 600;
    background: #ffffff;
    padding: 8px 12px;
}
.mslogin a:hover{
    background:#c36;
    color: #fff;
}
.mslogin {
    padding: 15px;
    text-align: center;
}
.mslogin img.logo-sign-img{
    padding:0px 0px 20px;
    height:auto;
}

/* Textbox fields */
.txtbox {
    margin-bottom: 20px;
}
.txtbox label {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 5px;
}
.txtbox input {
    width: 100%;
    /*max-width:50%;*/
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
}
.txtbox select{
    width:50%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease
}
.txtbox input:focus {
    border-color: #5b9bd5;
}
.customform-wrapper button{
    max-width:200px !important;
}
/* Submit button */
/*api form start */
.customform-wrapper form input {
    max-width: 50%;
}
/*api form end*/
button {
    /*width: 100%;*/
    padding: 12px;
    background-color: #4CAF50;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
button:hover {
    background-color: #45a049;
}
form button:disabled{
    background-color: #a5d6a7;
    cursor: not-allowed;
    opacity: 0.8;
}
.dtble-page{
    padding:20px 0px 10px 0px;
}
/*website type start*/
.apiform-wrap form input{
    max-width: 50%;
}
.apiform-wrap form button{
    max-width: 150px;
}
/*website type end*/
/*menu start*/
.logout-btn-wrap button {
    background-color: #ff4d4d;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.logout-btn-wrap button:hover {
  background-color: #e60000;
  transform: scale(1.1);
}

.logout-btn-wrap button:active {
  background-color: #cc0000;
  transform: scale(1);
}
.topnav-bar {
    padding:10px 0 0 0;
    margin: 0px auto;
    width: 100%;
    max-width: 1075px;
    display: flex;
    justify-content: center;
    align-items:center;
    gap: 10px;
}
.header-logo img{
    width:160px;
    height:auto;
}
ul.header-menu-items {
    padding: 5px;
    list-style: none;
    display: flex;
    gap: 29px;
    font-size: 18px;
    font-weight: 600;
    justify-content: flex-start;
}
ul.header-menu-items a{
    text-decoration: none;
    color: #2e6cc7;
}
.mobile-menu{
    display:none;
}
/*menu end*/

/*mobile menu start*/
    #toggle {
      display: block;
      width: 28px;
      height: 30px;
      margin: 30px auto 10px;
    }
    #toggle span:after,
    #toggle span:before {
      content: "";
      position: absolute;
      left: 0;
      top: -9px;
    }
    #toggle span:after{
      top: 9px;
    }
    #toggle span {
      position: relative;
      display: block;
    }
    #toggle span,
    #toggle span:after,
    #toggle span:before {
      width: 100%;
      height: 5px;
      background-color: #888;
      transition: all 0.3s;
      backface-visibility: hidden;
      border-radius: 2px;
    }
    #toggle.on span {
      background-color: transparent;
    }
    #toggle.on span:before {
      transform: rotate(45deg) translate(5px, 5px);
    }
    #toggle.on span:after {
      transform: rotate(-45deg) translate(7px, -8px);
    }
    #toggle.on + #menu {
      opacity: 1;
      visibility: visible;
      display:block;
    }
    #menu {
        display:none;
      position: absolute;
        top: 66px;
        left: 40%;
        z-index: 2;
      color: #999;
      width: 200px;
      padding: 10px;
      margin: auto;
      text-align: center;
      border-radius: 4px;
      background: white;
      box-shadow: 0 1px 8px rgba(0,0,0,0.05);
      /* just for this demo */
      opacity: 0;
      visibility: hidden;
      transition: opacity .4s;
    }
    #menu:after {
      position: absolute;
      top: -15px;
      left: 95px;
      content: "";
      display: block;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 20px solid white;
    }
 
    .mobile-menu ul, li, li a {
      list-style: none;
      display: block;
      margin: 0;
      padding: 0;
      text-align:left;
    }
    .mobile-menu li a {
      padding: 5px;
      color: #888;
      text-decoration: none;
      transition: all .2s;
    }
    .mobile-menu li a:hover,
    .mobile-menu li a:focus {
      background: #1ABC9C;
      color: #fff;
    }
/*mobile menu end*/

table td.tb-action {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}
table td.tb-action button {
    padding: 6px;
    max-width: max-content;
}
button.viewBtn{
    background-color: #3498db;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}
button.editBtn {
    background-color: #f1c40f; /* yellow */
    color: black;
    border: none;
    cursor: pointer;
    border-radius: 4px;
 }
button.deleteBtn,button.delete_website,button.cs-del-btn {
    background-color: #e74c3c;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}
/*modal */
.modal-successmsg{
    font-size:18px;
    font-weight:600;
}
/*modal */

p#ms-clientID,p#ms-clientSecret,p#ms-tenantID {
    font-family: monospace;
    background: #f0f0f0;
    padding: 8px;
    border: 1px solid #ccc;
    width: fit-content;
    display: inline-block;
}
.keywrap{
    display:flex;
    gap:15px;
    align-items:center;
    
}
.keywrap  button {
    margin: 0 0 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    background-color: #007bff;
    max-width:200px !important;
}
.keywrap p {
    width:100%;
    max-width:200px;
}
.keywrap p.masked{
   max-width:max-content;
}
/* responsive */
@media (max-width: 500px) {
    #menu{
        left:33% !important;
    }
    .login-form {
        padding: 20px;
        width: 100%;
    }
    .txtbox input {
        font-size: 12px;
        padding: 10px;
    }
    button {
        font-size: 14px;
        padding: 10px;
    }
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    ul.header-menu-items {
        gap: 16px;
        font-size: 11px;
        justify-content: center;
    }
    .dtble-page {
        padding: 20px 20px 10px 20px;
    }
    .no-access-wrap .no-access{
        max-width:331px;
    }
    table td.tb-action button{
        padding:14px;
    }
}
@media only screen and (max-width: 768px) {
    .mobile-menu{
        display:block;
    }
    .desktop-menu{
        display:none;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    ul.header-menu-items {
     justify-content: center;
     margin:0;
    }
    .no-access-wrap .no-access{
        max-width:650px;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    
}