@font-face {
  font-family: 'Gotham';
  src: url('/dist/fonts/boxx-crm/Gotham-Bold.eot'); /* IE9 Compat Modes */
  src: url('/dist/fonts/boxx-crm/Gotham-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('/dist/fonts/boxx-crm/Gotham-Bold.woff') format('woff'), /* Modern Browsers */
      url('/dist/fonts/boxx-crm/Gotham-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
      font-weight: 700;
      font-style: normal;
}

@font-face {
  font-family: 'Gotham-Medium';
  src: url('/dist/fonts/boxx-crm/Gotham-Medium.eot'); /* IE9 Compat Modes */
  src: url('/dist/fonts/boxx-crm/Gotham-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('/dist/fonts/boxx-crm/Gotham-Medium.woff') format('woff'), /* Modern Browsers */
      url('/dist/fonts/boxx-crm/Gotham-Medium.ttf')  format('truetype'); /* Safari, Android, iOS */
      font-weight: 400;
      font-style: normal;
}

@font-face {
  font-family: 'Gotham-Thin';
  src: url('/dist/fonts/boxx-crm/Gotham-Thin.eot'); /* IE9 Compat Modes */
  src: url('/dist/fonts/boxx-crm/Gotham-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('/dist/fonts/boxx-crm/Gotham-Thin.woff') format('woff'), /* Modern Browsers */
      url('/dist/fonts/boxx-crm/Gotham-Thin.ttf')  format('truetype'); /* Safari, Android, iOS */
      font-weight: 300;
      font-style: normal;
}

@font-face {
  font-family: 'Gotham-Book';
  src: url('/dist/fonts/boxx-crm/Gotham-Book.eot'); /* IE9 Compat Modes */
  src: url('/dist/fonts/boxx-crm/Gotham-Book.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('/dist/fonts/boxx-crm/Gotham-Book.woff') format('woff'), /* Modern Browsers */
      url('/dist/fonts/boxx-crm/Gotham-Book.ttf')  format('truetype'); /* Safari, Android, iOS */
      font-weight: 300;
      font-style: normal;
}

body {
  font-family: 'Gotham';
    background: url("/assets/img/boxx-crm/fondotopline.jpg") no-repeat center center fixed;
    /* background:  no-repeat center center fixed #E0E0E0;  */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
   .loginColumns {
      max-width: 1000px;
      margin: 0 auto;
      padding: 50px 20px 20px 20px;
    }
   *[color="primary"],
       a {
         color: #18a689;
       }

       a:hover {
         text-decoration: none;
         cursor: pointer;
         color: #18a689;
       }

       .shadowed-contaner {
         border-radius: 8px;
         margin: auto;
         border-radius: 8px;
         box-shadow: 0 0 24px #484848;
       }

       .main-row {
         display: flex;
         margin: 0;
         width: 100%;
         height: 460px;
       }

      .login-left-col {
        background: #112852;
        border-radius: 8px 0 0 8px;

      }
      .login-title-left{
        padding-top: 25px;
        color: white;
        font-size: 30px;
        font-weight: bold;
      }
      .login-subtitle-left{
        color:#3E8A76;
        font-size: 30px;
        font-weight: bold;
      }
      .login-right-col {
        padding: 24px 48px;
        text-align: center;
        border-radius: 0 8px 8px 0;
        background: white;
      }

      .login-right-col h3 {
        padding-top: 15%;
        margin-bottom: 24px;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 21px;
       }

       .login-form {
         padding: 24px 64px;
       }

       .image-login {
         padding-top: 40px;
         width: 80%;
       }

       .divider {
         border: 1px solid lightgray;
         margin-top: 24px;
         margin-bottom: 24px;
       }

       .recovery-link {
         text-align: right;
         font-size: 12px;
       }

       .login_btn {
         display: flex;
         margin-top: 24px;
       }

       .paragraph {
         margin-top: 16px;
         font-size: 10px;
         text-align: justify;
       }

       @media screen and (max-width: 768px) {
         .shadowed-contaner {
           width: 100%;
         }
       }

       @media screen and (max-width: 767px) {
        .login-right-col  {
          padding: 0px 48px;
          border-radius: 8px;
          background: white;
        }

        .login-left-col {
          display: none;
          background: #112852;
        }

        .loginColumns{
          padding: 30px 20px 20px 20px;
        }
       }

       .spinner {
         border: 3px solid #f3f3f3;
         border-top: 3px solid #3498db;
         border-radius: 50%;
         width: 18px;
         height: 18px;
         animation: spin 1s linear infinite;
       }

       @keyframes spin {
         0% { transform: rotate(0deg); }
         100% { transform: rotate(360deg); }
       }


   .login-floating-logo{
       padding-top: 40px;
       padding-right: 30px;
       text-align: right;
   }
   .login-floating-logo img{
       width: 265px;
   }

   @media screen and (max-width: 767px) {
       .login-floating-logo{
           text-align: center;
       };
   }