html,body{
        background-color: #303030!important;
        font-family: 'Roboto', sans-serif;

         height: 100%;
          margin: 0;
          padding: 0;
          display: flex;
          flex-direction: column;


      }


main {
  flex: 1;
}


      .navbar{

        background-color: #3C3C3C!important;

      }
     
     .tab-content{
        max-width: 450px!important;
     }

     .btn{

      border-radius: 3px!important;

     }

     .tab-content .nav-link{

        background-color: #3C3C3C!important;
        border-radius: 3px!important;
        font-size: 11px;
        padding: 17px;
        color: #fff;
        font-weight: 700;
     }

    .tab-content .nav-link.active{

        background-color: #0C1728!important;
     }

     .tab-content .nav-link:hover{

        color: #fff;
     }

     footer .nav .nav-link{
      color: #adb5bd!important;
      font-size: 14px;
     }

     .form-label{
     color: #adb5bd!important;
     }

     p{
      color: #fff;
      font-size: 13px;
    }

    a{

      font-size: 13px;
      color: #649FDF;
    }

    i{
      color: #adb5bd;
    }

    input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number]{
      background: transparent!important;
      border-radius: 3px!important;
      color: #adb5bd!important;
    }

    input[type=checkbox]{

      border-radius: 3px!important;

    }

    .form-check-label {
      color: #adb5bd!important;
      font-size: 13px;
      cursor: pointer;
    }



    .form-check-input {

    background-color: transparent;
    cursor: pointer;
    
  }

  .form-check-input:checked {
    /* Keep background transparent, only show custom tick */
    background-color: transparent;
    border-color: #adb5bd;
  }



.modal-content{
  border-radius: 3px;
  background: #3C3C3C!important;
}


.card-img-top {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    .icon-overlay {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      display: flex;
      gap: 0.5rem;
      z-index: 10;
    }
    .icon-overlay a {
      color: #fff;
      background: rgba(0,0,0,0.5);
      padding: 0.50rem;
      border-radius: 0.25rem;
    }




    .dropzone {
      color: #fff!important;
      border-radius: 3px;
      border-color: #6c757d!important;
      background: #3C3C3C!important;
    }

    .dz-image, .dz-preview{

      background: transparent!important;
    }


      .spinner-wrapper {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.spinner-wrapper.hide {
  opacity: 0;
  transform: translate(-50%, -60%);
  pointer-events: none;
}