/*MISC*/

/*Keyframes*/
/*--------------------------------*/
@keyframes rotate {
  100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}
/*--------------------------------*/

/*Custom widths*/
/*--------------------------------*/
.w80 {
    width: 80%;
}

.w45 {
  width : 48%;
}

.w30 { 
  width : 30%;
}

.w75 {
  width : 75% !important;
}
/*--------------------------------*/

/*Custom heights*/
/*--------------------------------*/
.h100{
    height : 100vh;
}
/*--------------------------------*/

/*Custom floats*/
/*--------------------------------*/
.fl {
  float: left;
}
.fr {
  float : right;
}
/*--------------------------------*/

/*Custom text formatting */
/*--------------------------------*/
.tc {
  text-align: center;
}

.tar{
  text-align: right;
}

.tal{
  text-align: left;
}

.tac{
  text-align: center;  
}
/*--------------------------------*/

/*Links*/
/*--------------------------------*/
a {
  color: #005183;
  font-size: 18px;
  text-decoration: none;
}

a:visited {
  color: #012941;
  font-size: 18px;
  text-decoration: none;
}
/*--------------------------------*/


/*Clearfix*/
/*--------------------------------*/
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
/*--------------------------------*/

/*Tables*/
/*--------------------------------*/
.table-row {
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black; 
}
/*--------------------------------*/

/*Cursor*/
/*--------------------------------*/
.curpointer{
  cursor: pointer;
}
/*--------------------------------*/

/*Images*/
/*--------------------------------*/
#image{
  position: absolute;
  top:-9999px;
  left:-9999px;
}
/*--------------------------------*/

/*Main*/
/*--------------------------------*/
#MainContent{
  background-color: white!important;
  margin-bottom :180px;
}
/*--------------------------------*/

/*Loader components*/
/*--------------------------------*/
.loader {
  display: inline-block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1.5s linear infinite;
  top:50vh;
  left:50vw;
}

.loader::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 7px solid blue;
  animation: prixClipFix 2s linear infinite ;
}

#ActivityIndicator {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  align-items: center;
  z-index: 1999;
  background-color: #aaa;
  opacity: 0.6;
  height: 100%;
  width:100%;
}
/*--------------------------------*/







/*USER CARDS*/
/*Main div*/
/*--------------------------------*/
.card {
    position: relative;
    width: 320px;           
    height: 230px;          
    padding: 16px 18px 60px;
    display: flex;
    flex-direction: column;
    margin: 10px;
}
/*--------------------------------*/


/*Container*/
/*--------------------------------*/
.card-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
/*--------------------------------*/

/*Label for default card*/
/*--------------------------------*/
.default-label {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    font-weight: bold;
    font-size: 1.2rem;
    z-index: 10;
}
/*--------------------------------*/

/*Top section of card*/
/*--------------------------------*/
.top-block {
    display: flex;
    align-items: flex-start;         
    justify-content: space-between;
}
/*--------------------------------*/


/*Bottom section of card*/
/*--------------------------------*/
.bottom-block {
    margin-top: 4px;                 
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/*--------------------------------*/

/*Visa/Card icons*/
/*--------------------------------*/
.card-chip,
.card-icon {
    flex: 0 0 auto;
}
/*--------------------------------*/

/*Card number*/
/*--------------------------------*/
.card-number {
    margin: 10px 0 4px 0;
    font-weight: 750;
}

.card-number span {
    font-size: 1.05rem;
    letter-spacing: 2px;
    white-space: nowrap;
}
/*--------------------------------*/

/*Card Name*/
/*--------------------------------*/
.card-name {
    margin: 0;
    float: none;                      
    clear: none;
    font-weight: 550; 
}

.card-name span {
    font-size: 0.95rem;           
    white-space: nowrap;           
    letter-spacing: 1px;
}
/*--------------------------------*/

/*Card Expiry Label*/
/*--------------------------------*/
.card-exp{
margin: 0;
  text-align: left;
  font-weight: 550; 
}
/*--------------------------------*/

/*Card Expiry Date*/
/*--------------------------------*/
.card-exp-date{
  font-size: 1em;
  margin-top:10px;
  font-weight: 750; 
}
/*--------------------------------*/


/*Delete/Default buttons*/
/*--------------------------------*/
.card-image-icons {
    position: absolute;
    bottom: 8px;      
    left: 8px;        
    display: flex;
    align-items: center;
    gap: 8px;         
}
/*--------------------------------*/

/*Delete trash can icon*/
/*--------------------------------*/
.card-image-icons i {
    cursor: pointer;
    padding: 4px;
    transition: 0.2s;
}

.card-remove {
  display :flex;
  width :150px;
  margin:auto;
  align-items: center;
}
/*--------------------------------*/

/*Default card slider*/
/*--------------------------------*/
.card-image-icons .chkslider {
    cursor: pointer;
    padding: 4px;
    transition: 0.2s;
}

.card-image-icons .form-check.form-switch .form-check-input {
    width: 3.2rem;
    height: 1.5rem;
}
/*--------------------------------*/








/*CUSTOM IMAGES*/

/*Outer container*/
/*--------------------------------*/
.custom-image-div{
    height: 240px !important;
    width: 310px !important;
    border: 2px solid #33373b !important;
    border-radius: 20px !important;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}
/*--------------------------------*/

/*Image container*/
/*--------------------------------*/
.inner-image-div{
    height: 200px !important;             
    width: 310px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 10px 10px 0 10px;            
}
/*--------------------------------*/

/*Image*/
/*--------------------------------*/
.custom-image {
    max-height: 100% !important;
    max-width: 100% !important;
    margin: auto;
    cursor: pointer;                      
}
/*--------------------------------*/

/*Delete/Copy icons*/
/*--------------------------------*/
.custom-image-icons{
    position: absolute;
    bottom: 10px;                         
    left: 10px;
    display: flex;
    gap: 8px;
    padding: 2px 4px;
    align-items: center;
    z-index: 5;
}

.custom-image-icons i {
    cursor: pointer;
    padding: 4px;
    transition: 0.2s;
    color: #33373b;
}
/*--------------------------------*/

/*Image preview*/
/*--------------------------------*/
#PreviewImage {
    max-width: 100%;
    max-height: 250px;
}
/*--------------------------------*/

/*Drag and drop area*/
/*--------------------------------*/
.upload-dropzone {
    border: 3px dashed #000;
    border-radius: 20px;
    padding: 40px 20px;
    margin-top: 20px;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}
.upload-dropzone.dragover {
    background-color: #f0f8ff;
}
/*--------------------------------*/

/*Preview window */
/*--------------------------------*/
.image-preview-modal .image-preview-content {
    width: 800px;
    height: 800px;               
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5vh auto;
    position: relative;
}

@media (max-width: 768px) {
  .image-preview-modal .image-preview-content {
      width: 200px;
      height: 200px;               

  }
}


.image-preview-content img,
#ImagePreviewLarge {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;         
}

.image-preview-content .close,
#ImagePreviewClose {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 28px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
    z-index: 10;
}

@media (max-width: 1800px) {


  .image-preview-content {
      width: 90vw !important;
      height: 90vw !important;   
      max-width: 600px !important;
      max-height: 600px !important;
  }


  .image-preview-content img,
  #ImagePreviewLarge {
      max-width: 100% !important;
      max-height: 100% !important;
      object-fit: contain !important; 
  }


  #ImagePreviewClose {
      top: 6px !important;
      right: 10px !important;
      font-size: 28px !important;
      z-index: 9999 !important;
  }
}
/*--------------------------------*/














/*FORM COMPONENTS*/

/*Main input form wrapper*/
/*--------------------------------*/
.input-div {
  float:none;
  background: #f5f5f5c0;
  max-width: 800px;
  min-height:150px;
  margin: 0 auto;
  margin-top: 40px;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
/*--------------------------------*/

/*Data entry fields*/
/*--------------------------------*/
.input-entry{
      width: 98.8%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 6px;
      margin-bottom: 20px;
      font-size: 16px;
      box-sizing: border-box;
      transition: border-color 0.2s;
      color:black;
}
/*--------------------------------*/

/*Labels*/
/*--------------------------------*/
.input-label{
  display: block;
  font-weight: 700;
  color: #33373b;
}
/*--------------------------------*/

/*Labels for accepted card checkboxes*/
/*--------------------------------*/
.card-chk-label {
  display: block;
  font-weight: 700;
  color: #33373b;
  margin-left: 5px;
}
/*--------------------------------*/

/*Headings*/
/*--------------------------------*/
.input-heading{
  font-family: 'Visby CF', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #33373b; 
  margin: 20px;
  text-align: center;
}
/*--------------------------------*/

/*Colour selection wrapper div*/
/*--------------------------------*/
.colour-settings {
  margin-bottom: 20px;
  display: flex;
  align-items:center;
  gap: 5px;
}
/*--------------------------------*/

/*Colour selection input and apply button row*/
/*--------------------------------*/
.colour-row {
    display: flex;
    align-items: center;   
    gap: 8px;    
}
/*--------------------------------*/

/*Colour selector inputs*/
/*--------------------------------*/
input[type="color"] {
    border: none;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    padding: 0;
    cursor: pointer;
}

#PrimaryColourPicker::-webkit-color-swatch-wrapper {
    padding: 0;
}

#PrimaryColourPicker::-webkit-color-swatch {
    border: none;
}
/*--------------------------------*/

/*Colour selection text input*/
/*--------------------------------*/
.colour-text {
    height: 32px;
    padding: 4px 8px;
    width: 10ch;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 6px
}
/*--------------------------------*/

/*File upload inputs*/
/*--------------------------------*/
.input-entry-file{
  display: block;
  line-height: 2;
  font-size: 18px;
  position: relative;  
  font-weight: 400;
  font-style: normal;
  z-index: 99;
  width:100%;
}
/*--------------------------------*/

/*Bank card logos*/
/*--------------------------------*/
.card-logo {
    height: 60px;
    margin: 0 10px;
    vertical-align: middle;
}
/*--------------------------------*/


/*Passwords*/
/*--------------------------------*/
#PassStr {
  display:none;
  color : red;
  font-size: 16px;
  margin-left: 15px; 
}

#PassICO {
  margin-left: -30px; 
  cursor: pointer;
  line-height: 38px;
  float : left;
}

#PassStrconf {
  display:none;
  color : red;
  font-size: 16px;
  margin-left: 15px; 
}

#PassICOconf {
  margin-left: -30px; 
  cursor: pointer;
  line-height: 38px;
  float : left;
}
/*--------------------------------*/

/*Logo selection button*/
/*--------------------------------*/
.logobutton{
  margin-top:15px;
  margin-bottom:15px;
  width:150px !important;
}

.logobutton:disabled {
    background-color: #cccccc !important;  
    color: #666666 !important;             
    cursor: not-allowed;                  
    opacity: 0.7;   
}
/*--------------------------------*/

/*Logo preview area*/
/*--------------------------------*/
#logo-preview{
  display: none;
}
/*--------------------------------*/

/*Submit form button*/
/*--------------------------------*/
#SubmitBtn {
  cursor: pointer;
}
/*--------------------------------*/

/*Primary buttons*/
/*--------------------------------*/
.btn-prim {
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
      font-family: 'Visby CF', sans-serif;
      transition: background-color 0.3s;
      height: 32px;
      padding: 0 12px;
      line-height: 32px;
}

.btn-prim:disabled {
    background-color: #cccccc !important;  
    color: #666666 !important;             
    cursor: not-allowed;                  
    opacity: 0.7;   
}
/*--------------------------------*/

/*Password reset box*/
/*--------------------------------*/
#pwresetbox{
  width:70%;
  border:2px;
  border-radius:25px;
  text-align:center
}
/*--------------------------------*/

/*Toast notifications*/
/*--------------------------------*/
#ToastContainer {
  position: fixed!important;
  top : 1em!important;
  right : 1em!important;
}

#toast-close {
  color : #444;
  background-color: inherit;
  border:none;
  margin-left: 5px;
}
/*--------------------------------*/












/*HEADER COMPONENTS*/

/*Header inc screen responsiveness*/
/*--------------------------------*/
#header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;   
  align-items: center;
  justify-content: flex-start;
}


#header .header-content,
#logo-container {
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  float: none;              
}

.header-content{
  max-width: 1140px;
  margin: auto;
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  padding-bottom: 0;
}
@media (max-width: 375px) {
  .header-content {
    max-width: 60%;
    
  }
}
@media (max-width: 576px) {
  .header-content {
    max-width: 80%;
    
  }
}

@media (max-width: 1140px) {
  .header-content {
    max-width: 800px;
  }

  .input-div{
    max-width:80%;
  }
}
/*--------------------------------*/

/*Site logo*/
/*--------------------------------*/
#LogoContainer{
  text-align: center;
}

#site-logo{

    max-width: 300px;
    display: block;
    margin: 0 auto;
    height: auto;
    width: auto;
}

@media (max-width: 767px) {

  #logo-container {
      padding: 4px 0 !important;
  }

  #site-logo {
      min-height: 75px !important;
      max-height: 75px !important;
      width:auto !important;
      height: auto !important;
  }
}

.mainlogo{
  width: 300px !important;
}

/*Navigation wrapper*/
/*--------------------------------*/
nav.navbar {
  margin-top: 0;
  padding-top: 0;
}

.nav-item{
  margin-right: 10px;
}
/*--------------------------------*/

/*Navigation menu (includes some responsive styling of the logo)*/
/*--------------------------------*/
#menu-container {
  width: 100%;
  margin: 0;
  padding: 0;
}

#menu-container .navbar {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}

@media (min-width: 992px) {
  #header {
    padding: 12px 0;         
  }

}


@media (min-width: 768px) and (max-width: 991.98px) {
  #header {
    padding: 8px 0;         
  }

}


@media (max-width: 767.98px) {
  #header {
    padding: 0 !important;        
  }

}


@media (max-width: 1199.98px) {
  #menu-container .navbar .container-fluid {
    display: flex;
    justify-content: center;  
    padding-left: 0;
    padding-right: 0;
  }

  .navbar-toggler {
    margin: 0 auto;
    margin-top: 5px;
  }

    .navbar-nav {
      width: 100%;
      text-align: center;
  }

  .navbar-nav .nav-item {
      width: 100%;
  }

  .navbar-nav .nav-link {
      display: inline-block;
      width: auto;
  }

  #navbarNav {
      text-align: center;
  }

  
}
/*--------------------------------*/

/*Footer styling*/
/*--------------------------------*/
#footer {
  height: 75px;
  text-align: center;
}
.footer-content{
  height:60px;
  line-height: 25px;;
  width:100%;
  text-align: center;
}
/*--------------------------------*/










/*TERMS COMPONENTS*/

/*Modal div*/
/*--------------------------------*/
.modal {
  display: none; 
  position: fixed; 
  z-index: 1500; 
  left: 25vw !important;
  top: 0;
  width: 50% !important; 
  height: 100vh; 
}

@media (min-width: 0px) and (max-width: 768px) {
  .modal {
    left: 0 !important;
    width: 100% !important; /* Full width */
  }
}

.modal-content {
  padding: 20px;
  z-index: 1500; 
  color: black;
}

.modal-close{
  width: 100px;
}
/*--------------------------------*/

/*Terms div*/
/*--------------------------------*/
#TermsModal {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 90vh;
  margin-top: 5vh;
  border: 1px solid black;
  height:auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.h2 {
  color: black;
}
/*--------------------------------*/

/*Accept terms button*/
/*--------------------------------*/
#CloseModButton:disabled {
  background-color: #cccccc !important;  
  color: #666666 !important;  
  border: 1px solid #666666;          
  cursor: not-allowed;                  
  opacity: 0.7;                          
}

#CloseModButton {
  background-color: white;
  color: black;
  border: 1px solid black;
}
/*--------------------------------*/










/*LEFTOVER (Not sure what these are but don't want to delete any just in case*/
/*--------------------------------*/
.expspan{
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  
}

.circle-left{
  margin-right: -15px;
  opacity:0.7;
}

#ThemeDiv {
  text-align: right;
}

#UserIcon {
  margin-right: 5px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#test-logo{
  max-height: 0px;
  min-height:0px;
}

.tpinput{
  position: relative;
  width:100%;
  height:70px;
  left: -2px;
  overflow: hidden !important; 
}

.domain-label{
      padding: 12px;
      margin-bottom: 20px;
      font-size: 16px;
      color:#5c5c5cdb;
}

.chkdiv{
  display: flex;
  align-items: center;
}

.chkboxinp{
  display:inline;
  margin-right:5px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  vertical-align: middle;
}

.fpass{
  margin-bottom:15px;
  text-align : center;
}

.icon-button-left{
  width: 60px !important;
  display: block;
  margin-left:30px;
}

.icon-button-right-card{
  width: 60px !important;
  display: block;
  margin-right:30px;  
}

.icon-button-right{
  width: 60px !important;
  display: block;
  margin-right:40px;
}

.themebox {
 
    margin-top:1.5em;
}

#ThemeSwitch {
    margin-left: -20px;
}
#ThemeText {
    margin-left: 20px;
}

.loginbox {
    float: right;
    width : 30%;
}
.logobox {
    float : left;
    width:70%;
}

/*--------------------------------*/