/*
Custom CSS
*/

/* Top menu */
.uppercase{
    text-transform: uppercase;
}
.top_menu_item.selected {
    font-weight: bold;
}
/* Context menu */
.context-menu{
     display: none;
     position: absolute;
     border: 1px solid black;
     border-radius: 3px;
     width: 200px;
     background: white;
     box-shadow: 10px 10px 5px #888888;
     z-index: 100;
}
.context-menu ul{
     list-style: none;
     padding: 2px;
}
.context-menu ul li{
     padding: 5px 2px;
     margin-bottom: 3px;
     color: black;
     font-weight: bold;
     background-color: lightgray;
}

.context-menu ul li:hover{
     cursor: pointer;
     background-color: lightyellow;
}
/* Forms */
.input-group input, .input-group textarea{
    color: black;
}
fieldset.photo-input{
    background-color:lightgray;
}
fieldset.photo-input legend {
  font-weight: bold;
}
.form-group label{
    font-weight: bold;
}
/* popup edit form */
.inputs-wrapper .form-group{
    background: white;
    padding: 0.75rem;
}
.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

/* Full-screen styling for Magnific Popup */
#flyer-content {
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


/*Content pages*/
/*section.s-text-type-22{
    padding-bottom: 0px;
}*/
/*Cookies Consent*/
div.cc-window{
    position: fixed;
    top:0;
    width: 100%;
    padding: 20px 50px;
    z-index: 10;
}
/* User area 
 file upload form
*/
button[type=submit].btn-submit {
    padding:5px 15px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 8px;
    border-radius: 8px; 
}
.upload-box{
    width: 100%;
    margin: 1rem 0;
}
.ik-justify-content-between{
    justify-content: space-between;
}
.ik-justify-content-evenly{
    justify-content: space-evenly;
}
/*Alert messages*/
.message-box{
    width: 100%;
    padding: 1.5rem;
}
.message-box::after{
    display: block;
    clear: both;
    content: "";
}

.ik-alert{
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}
.ik-alert-success{
    color: #0F5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}
.ik-alert-danger{
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}
.ik-alert-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}
.ik-alert-info {
    color: #055160;
    background-color: #cff4fc;
    border-color: #b6effb;
}
  .checkmark-grid {
    display: flex;
    flex-wrap: wrap;
  }

  .checkmark-item {
    width: 3rem;
    height: 3rem;
    margin: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #005da0; /* White border */
    font-size: 2rem;
    border-radius: 50%;
    cursor: pointer;
  }

  .done {
    background-color: #005da0; /* White background for done */
    color: white; /* Blue text to indicate completion */
  }
  .checkmark-item-blue{
      color: #005da0;
  }
  .toggle-block{
      cursor: pointer;
  }
  .student-info-header{
      line-height: 4rem;
  }
  .process-state{
      padding: 0 1rem;
      border-radius: 2rem;
      cursor: pointer;
  }
  .form-check-subjects input[type="checkbox"]:disabled + label::before{
      border-color: #757575;
  }
  .form-check-subjects input[type="checkbox"]:disabled:checked + label::after{
      display: block;
      height: 2rem;
      width:1.2rem;
      border-color: #757575;
      animation: check 0.8s ease 0s running;
  }
  /*assessment link with copy to clipboard button*/
    div.assessment_link{
      display:flex;
      flex-direction:row;
      border:1px solid grey;
      padding:1px;
    }
    div.assessment_link input {
     flex-grow:2;
     border:none;
     padding-left: 5px;
   }
   div.assessment_link input:focus {
    outline: none;
   }
    div.assessment_link:focus-within { 
      outline: 1px solid blue 
    }
    div.assessment_link button {
      border:1px solid #005da0;
      background:#005da0;
      color:white;
      padding: 0 5px;
    }
  /*end*/
  .roundbox{
    border-radius: 1rem;
    text-align: center;
    overflow: hidden;
  }
  .nextblock-3{
      margin-top:3rem;
  }
  .info-text{
      color:#005DA0;
  }
  .bold{
      font-weight:bold;
  }
  /*Public button*/
  .btn.btn-yellow{
      background: #FBC400;
      border: 1px solid transparent;
      color: #4b4b4b;
  }
  .header_btn{
      font-family: Blogger Sans,sans-serif;
      font-size: 1.8rem;
      font-weight: 400;
      line-height: 4rem;
  }
  
  .ik-fww-min{
      flex-wrap: nowrap;
  }
  
  .u-color-blue{
      color:#2DABEB;
  }
  
    /*My profile buttons*/
    .profile-buttons{
        max-width: 50%;
    }
    
  @media (max-width: 830px) {
    .header_btn{
        min-height: 4.8rem;
    }
    .ik-fww-min{
        flex-wrap: wrap;
    }
    /*My profile buttons*/
    .profile-buttons{
        max-width: 100%;
    }
  }
/* signature-pad */
.signature-pad-block {
    display: flex;
    overflow: hidden;
}
.pad-wrapper {
    /*width: 100%;*/
    /*border: 1px solid #4b00ff;*/
    border: 1px solid #005da0;
    border-right: 0;
}
canvas#signature-pad {
    background: #fff;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}
button#sig-clearBtn {
    height: 100%;
    /*background: #4b00ff;*/
    background: #005da0;    /* #5CB85C; green*/
    border: 1px solid transparent;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
button#sig-clearBtn span {
    transform: rotate(90deg);
    display: block;
}
.sig-image{
    height: 64px;
    width: auto;
}
/* app form */
.fancy-line { 
    border: 0; 
    height: 1px;
    position: relative;
    margin: 0.5em 0;
}
.fancy-line:before {
    top: -0.5em;
    height: 1em;
}
.fancy-line:after {
    height: 0.5em;
    top: calc(-0.5em + 1px);        /* adjusted this */
}

.fancy-line:before, .fancy-line:after {
    content: '';
    position: absolute;
    width: 100%;
}

.fancy-line, .fancy-line:before {
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 75%);
}

body, .fancy-line:after {
    /*background: #f4f4f4;*/
    background: transparent;
}
/*Fixing sections overlap*/
.s-image-type-4 {
  position: relative;
  z-index: 5;
}

.s-image-type-4 .slider-wrapper {
  position: relative;
  overflow: visible; /* let arrows extend out */
  z-index: 6;
}

.s-image-type-4 .slider-nav {
  position: absolute;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
}

.s-image-type-4 .slider-nav button {
  pointer-events: auto;
}

/* Fix overlap from the next section */
.s-text-type-3 {
  position: relative;
  margin-top: 8rem; /* same as its top padding */
  padding-top: 0;   /* remove overlapping padding */
}
/* alerts */
/* Base alert box */
.alert {
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 15px;
}

/* Error / Danger alert */
.alert-error {
    background: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}

/* Success alert */
.alert-success {
    background: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
}

/* Close button */
.alert-close-btn {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    color: inherit;
}

.alert-close-btn:hover {
    opacity: 0.7;
}
/* Assessment form */
.task-description-box {
    background: #f7f9fc;
    border: 1px solid #e3e6ee;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.task-description-extended {
    margin-top: 1rem;
    border-left: 3px solid #cfd6e3;
    padding-left: .75rem;
}

.custom-text-input {
    width: 200px;
    padding: .4rem .6rem;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.custom-radio-group {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.custom-radio-option {
    display: flex;
    align-items: center;
}

.custom-select {
    padding: .4rem .6rem;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.task-separator {
    border: none;
    border-top: 1px solid #eee;
    margin: 2rem 0;
}
label.disabled{
    color: gray;
}
/* end assessment form */
/* TM Checkout */
/* Payment Method List Styling */
.payment-option {
    display: flex;
    align-items: center;
    padding: 1.5rem 2rem;
    /*margin: 0 2rem;*/
    border: 1px solid #000;
    border-radius: 1.6rem;
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.payment-option.active {
    border-color: #005DA0;
    background-color: #EFF3F5;
}

.payment-option.locked {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f5f5f5;
    border-color: #ccc;
}

.payment-option .icon {
    flex: 0 0 3.2rem;
    margin-right: 1.5rem;
}

.payment-option .text {
    flex: 1;
}

.payment-option .label {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.payment-option img.logo {
    width: auto;
    max-width: 12rem;
    max-height: 3rem;
    display: inline-block;
}

.payment-option h5 {
    margin: 0;
    color: #005DA0;
}

.payment-option .star {
    color: #f57b20;
    font-weight: 600;
}

.payment-option .lock-reason {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.payment-option .lock-reason i {
    font-size: 1.8rem;
}
/*Direct pay instructions*/
table.bank-details {
    width: 100%;
}
/*End TM checkout*/