@charset "utf-8";
/* Login CSS Document */

/* CSS Custom Properties (Variables) */
:root {
    /* Light Theme Colors */
    --primary-color: #0F6CBD;
    --primary-hover: #115EA3;
    --text-primary: #242424;
    --text-secondary: #616161;
    --white: #fff;
    --background-overlay: rgba(255, 255, 255, 0.8);
    --background-form: rgba(255, 255, 255, 0.70);
    --shadow-color: #00000020;
}

/* Dark Theme Colors - Add your colors here later */
[data-theme="dark"] {
    --primary-color: ;
    --primary-hover: ;
    --text-primary: ;
    --text-secondary: ;
    --white: ;
    --background-overlay: ;
    --background-form: ;
    --shadow-color: ;
}

body {
    font-family: Segoe UI, arial, sans-serif !important;
    font-weight: normal;
    font-size: 15px !important;
    color: var(--text-primary) !important;
}

@font-face {
    font-family: 'SegoeUIRegular';
    src: url('../fonts/SegoeUIRegular.ttf');
}

@font-face {
    font-family: 'SegoeUILight';
    src: url('../fonts/SegoeUILight.ttf');
    font-weight: lighter;
    font-style: normal;
}

.login {
    background: url(../images/login-bg.jpg) no-repeat top fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.login .login-form {
    max-width: 530px;
    padding: 0px;
    box-shadow: 0px 2px 6px var(--shadow-color);
    -webkit-box-shadow: 0px 2px 6px var(--shadow-color);
    -moz-box-shadow: 0px 2px 6px var(--shadow-color);
    -ms-box-shadow: 0px 2px 6px var(--shadow-color);
    -o-box-shadow: 0px 2px 6px var(--shadow-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.login .login-head {
    background: var(--background-overlay);
    padding: 24px 0;
    backdrop-filter: blur(6px);
}

.login-fld {
    padding: 24px 36px 36px 36px;
    background: var(--background-form);
    margin-top: -8px;
    backdrop-filter: blur(10px);
}

.login-fld .logo {
    text-align: center;
    margin: auto;
    padding: 0 0 24px 0;
}

.login .login-form h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}


.login .login-form p {
    font-size: 16px;
    margin: 0px;
}


.login-form .form {
    padding: 0px;
    margin-top: 16px;
}

.login .c-logo {
    height: 60px;
}

.position-relative {
    position: relative !important;
    margin-bottom: 16px;
}

.login-form .form input.outside,
.login-form input[type=text].outside {
    color: var(--text-primary);
    width: 100%;
    font-size: 16px;
    height: 38px;
    line-height: normal;
    border-bottom: var(--text-secondary) solid 1px !important;
    border-top: none;
    border-left: none;
    border-right: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin-bottom: -1px;
    padding: 8px;
    position: relative;
    z-index: 1;
    background: var(--white);
    margin: 6px 0px;
    border-radius: 4px;
}

.login input[placeholder],
[placeholder],
*[placeholder] {
    background: var(--white) !important;
    color: var(--text-primary) !important;
}

.login-form .form input:focus,
.login-form select:focus {
    outline: 0 !important;
    color: var(--text-secondary) !important;
    border-bottom: var(--primary-color) solid 2px !important;
}

.login-form .fp {
    margin-top: 6px !important;
}

.login p a {
    color: var(--primary-color);
    font-size: 16px;
    text-decoration: none;
}

.login p a:hover {
    text-decoration: underline;
}


.login-form .fld-error-msg {
    font-size: 14px !important;
    color: #C50F1F;
    margin-bottom: 0px !important;
}


.login-form .login-btns {
    gap: 8px;
}

.login .login-form .login-btn {
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    min-width: 96px;
    color: var(--white) !important;
    padding: 6px 12px !important;
    font-size: 16px !important;
    background: var(--primary-color);
}

.login-btn:hover {
    background: var(--primary-hover) !important;
}

.footerlog {
    font-size: 14px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    color: var(--white) !important;
    padding: 4px 16px;
}


.footerlog .ftlogo {
    float: left;
}

.privacy-terms {
    padding: 16px 10px 13px 10px;
    float: left;
    font-size: 14px !important;
    color: var(--white) !important;
}

.privacy-terms a {
    color: var(--white) !important;
}

.copyright {
    float: right;
    text-align: right !important;
    font-size: 14px;
    padding: 16px 10px 13px 10px;
}


.multiple-login-sec {
    margin: 16px 0px;
}

.login-fld.multi-login {
    padding: 10px;
    margin: 8px 0px;
    border-radius: 0px;
    width: 100%;
    font-size: 1rem;
    font-weight: 500;
    color: #242424;
}

.login-fld.multi-login:hover, .login-fld.multi-login1:hover {
    background: #f0f0f0;
    cursor: pointer;
}


.g-icon {
    width: 20px;
    margin-right: 8px;
    margin-bottom: 4px;
}

.svg-icon-fill {
    fill: #0A2E4A;
}


.login-form .cancel-btn {
    border: 1px solid #fff;
    border-radius: 4px;
    min-width: 96px;
    color: #242424 !important;
    padding: 6px 12px !important;
    font-size: 16px !important;
    background: #fff;
}

.login-fld.multi-login1 {
    padding: 10px;
    margin: 8px 0px;
    border-radius: 4px;
    width: 100%;
    font-size: 1rem;
    font-weight: 500;
    color: #242424;
}

.login-form .error input.outside {
    border-bottom: 2px solid #C50F1F !important;
}

.icon-error {
    fill: #C50F1F;
}

.login-form span, .top-error-msg {
    color: #C50F1F;
    margin-top: 8px;;
}

.icon-success {
    fill: #0E700E;
}

.login-form .password-info h5 {
    font-size: 16px;
    margin: 8px auto;
}

.password-info .list-unstyled {
    list-style: disc;
    margin-left: 20px;
    line-height: 1.5;
    margin-bottom: 10px;
}












@media (min-width: 576px) and (max-width: 991.98px) {
    .login .login-form {
        margin: 15% auto !important;
        position: relative;
        top: 0px;
        left: 0px;
        transform: none;
    }
}




@media (min-width: 320px) and (max-width: 479px) {
    .login .login-form {
        margin: 20% auto !important;
        position: relative;
        top: 0px;
        left: 0px;
        transform: none;
    }

    .login .login-form h1 {
        font-size: 22px;
    }

    .footerlog {
        position: relative;
    }

    .footerlog .logo,
    .privacy-terms,
    .copyright {
        text-align: center !important;
        float: none;
    }


}

/* Popup CSS */

.blur-background {
  filter: blur(6px);
  pointer-events: none;
}


#staticBackdrop {
  background: rgb(0 0 0 / 5%);
}

.modal-dialog {
  margin: 5rem auto;
}

.modal-dialog.modal-dialog-scrollable {
  margin: 1.6rem auto;
}

.modal-title {
  font-size: 18px;
  font-weight: 500;
  color: #242424;
}


.btn-close {
    background-image: none;
}

.modal-footer>* {
    
    margin: 0px !important;
}



/* More Filter Popup CSS */


.filter-options .modal-header {
  border-bottom: none;
  padding: 24px;
}

.filter-options .modal-body {
  padding: 0px 24px;
  /* margin-bottom: 24px;*/
}

.filter-options .modal-footer {
  padding: 8px 24px 24px;
  border: 0px;
}


/* More Action Popup CSS */



.actions-popup .modal-content {
  border-radius: 4px !important;
  box-shadow: 0px 2px 6px #00000020;
  border: none !important;
}

.actions-popup .modal-header {
  display: flex;
  padding:16px 24px;
  border-bottom: none;
}

.actions-popup .btn-close svg {
    position: absolute;
    top: 16px;
    right: 16px;
}

.actions-popup .modal-body {
    padding: 0px 24px;
        margin-bottom: 16px;
}

.select-more .list-group-item {
    border: none;
    color: #242424;
}

.more-action  {
    border: none;
    color: #242424;
    padding:8px 16px;
}

.more-action:hover{ background-color: #f0f0f0; border-radius: 4px;}

.data-popup .modal-content {
  padding: 24px;
}


.data-popup .modal-header {
  padding: 0px 0px 24px 0px;
  border: none;
}

.data-popup .modal-body {
  padding: 0px;
}


.data-popup .modal-footer {
  padding: 16px 0px 0px 0px;
  border: none;

}

/* .data-popup .table-responsive {
  border: 1px solid #d2d2d2;
  border-radius: 4px;
} 

.data-popup .list .table tr:last-child {
  border-bottom: none;
}*/


.info-container {
  color: #242424;
  max-width: 600px;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.info-label {

  font-weight: 500;
  font-size: 16px;
}

.info-value {
  flex: 1;
  font-size: 16px;
  padding-left: 4px;
  word-break: break-all;
}



/* Popup CSS */

/* Buttons*/

    .btn{padding: 0px;}

    /* button and field hover css */

    .b-hover:hover {
      background-color: #f0f0f0 !important;
      color: #242424;
      cursor: pointer;
      border-radius: 4px !important;
    }

    .b-focus:focus {
      background-color: #e0e0e0;
      box-shadow: none;
    }

    .n-hover:hover {
      background-color: transparent !important;
    }

    .n-focus:focus {
      background-color: transparent;
      box-shadow: none;
    }

    .b-active {
      border: 1px solid #d2d2d2;
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
    }

    .b-disable {
      background-color: transparent;
      cursor: not-allowed !important;
      color: #bdbdbd !important;
    }

    /* text hyperlink css */

    .link-txt {
        color: #2886DE;
    }


    .link-txt:hover {
        color: #0F6CBD;
        text-decoration: underline !important;
        cursor: pointer;
    }

    .m-link .btn-first-sutisoft:hover:hover, .m-link .btn-first-sutisoft:hover:focus{background-color: #115EA3 !important;}

    .buttons {
      display: flex;
      gap: 8px;
      justify-content: end;
    }

    .btn-first-sutisoft {
      border: 1px solid #0F6CBD !important;
      border-radius: 4px;
      min-width: 96px;
      color: #FFF !important;
      padding: 6px 12px !important;
      font-size: 16px !important;
      background: #0F6CBD !important;
    }

    .btn-first-sutisoft:hover {
      background-color: #115EA3 !important;
    }

    .btn-first-sutisoft:focus {
      box-shadow: none;
      border: 1px solid #0C3B5E !important;
      background-color: #115EA3 !important;
    }

    .btn-second-sutisoft {
      border: 1px solid #d2d2d2 !important;
      border-radius: 4px;
      min-width: 96px;
      color: #242424 !important;
      padding: 6px 12px !important;
      font-size: 16px !important;
      background: #fff;
    }

    .btn-second-sutisoft:hover {
      background: #f0f0f0 !important;
    }

    .btn-second-sutisoft:focus {
      box-shadow: none;
      border: 1px solid #242424 !important;
      background-color: #e0e0e0;
    }

    .btn-third-sutisoft {
      border: 1px solid #d2d2d2 !important;
      border-radius: 4px;
      min-width: 96px;
      color: #242424 !important;
      padding: 6px 12px !important;
      font-size: 16px !important;
      background: transparent;
    }

    .btn-third-sutisoft:hover {
      background: transparent;
      border: 1px solid #242424 !important;
    }

    .btn-third-sutisoft:focus {
      box-shadow: none;
      border: 1px solid #242424 !important;
      background-color: transparent;
    }

    .btn-sm {
      padding:0.25rem 0.5rem!important; 
      font-size: 0.875rem;}


    .browse-btn {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
    }

    .split-btn {
      border: 1px solid #d2d2d2 !important;
      border-radius: 4px;
      color: #242424 !important;
      padding: 6px 12px !important;
      font-size: 16px !important;
      background: #fff;
      height: 39px; z-index: 1 !important;
    }

    .split-btn:hover {
      background: #f0f0f0 !important;
    }

    .split-btn:focus {
      box-shadow: none;
      border: 1px solid #242424 !important;
      background-color: #e0e0e0;
    }

    .action-btn {
        &:hover path {
          fill: #2886DE;
        }
    }

    .action-btn-del {
        &:hover path {
          fill: #C50F1F;
        }
    }

    .filter-btn {
          padding: 4px 8px;
    }

    .btn-close svg {
          position: absolute;
          top: 24px;
          right: 24px;
    }




  /* Buttons*/
  
  * {
    scrollbar-width: thin;
    scrollbar-color: rgb(209, 209, 209) rgb(248, 248, 248);
}