*,
  *:after,
  *:before{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .login-modal-div form{
    margin-bottom: 14px;
  }

  .login-modal-div input[type=checkbox]{
    display: inline-block !important;
  }

  /* The Modal (background) */
  .login-modal-div{
    font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    padding-top: 70px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

  /* Modal Content */
  .login-modal-div .modal-content{
    background-color: #eff1f3;
    margin: auto;
    padding-top: 20px;
    border: 1px solid #888;
    width: 550px;
    border-radius: 5px;
  }

  /* The Close Button */
  .login-modal-div .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .login-modal-div .close:hover,
  .login-modal-div .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
  }

  .login-modal-div img.logo{
    width: 250px;
  }

  .login-modal-div .white-bg{
    background-color: #fff;
  }

  .login-modal-div .close-div{
    height: 30px;
    padding: 0 20px;
  }

  .login-modal-div .modal-header{
    padding: 20px;
    border-radius: 5px;
  }

  .login-modal-div .center{
    text-align: center;
  }

  .login-modal-div .alert{
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
  }

  .login-modal-div #extra .alert-danger, .login-modal-div .extra .alert-danger{
    color: #f1270b;
    background-color: transparent; 
    border-color: #f65039;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
  }

  .login-modal-div #extra .alert-info, .login-modal-div .extra .alert-info{
    color: #1583ed;
    background-color: transparent;
    border-color: #418bf9;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
  }

  .login-modal-div input[type=text],
  .login-modal-div input[type=email],
  .login-modal-div input[type=password]{
    border: 1px solid #C2C7D0;
    border-top-color: rgb(194, 199, 208);
    border-right-color: rgb(194, 199, 208);
    border-bottom-color: rgb(194, 199, 208);
    border-left-color: rgb(194, 199, 208);
    border-radius: 5px;
    box-shadow: inset 0 1px 2px rgba(151,159,175,0.1),inset 0 1px 15px rgba(151,159,175,0.05);
    box-sizing: border-box;
    color: #39424e;
    display: inline-block;
    line-height: 1.5em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 10px;
    padding: 7px 10px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font-weight: 500;
    width: 100%;
  }

  .modal-form-group{
    margin-top: 15px;
    margin-bottom: 15px;
    position: relative;
  }

  .modal-form-group .input-icon{
    opacity: 1;
    position: absolute;
    z-index: 1;
    left: 8px;
    top: 10px;
    color: #979faf;
    font-size: 26px;
  }

  .modal-form-group .modal-form-input{
    display: block !important;
    padding: 15px 8px 8px 45px !important;
    height: auto;
    width: 450px;
  }

  .modal-form-group .modal-form-input:focus{
    border-color: #0f9d58;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(78, 236, 141, 0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(78, 236, 141, 0.6);
  }

  .modal-form-group .modal-form-input.error-focus, .modal-form-group .modal-form-input.error-focus:focus{
    border-color: #ef1313;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(177, 74, 71, 0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(177, 74, 71, 0.6);
  }

  .modal-form-group .modal-form-input::placeholder{
    color: #999;
    font-weight: 400;
    font-size: 16px;
  }

  @media(max-width: 768px){
    .login-modal-div{
      padding-top: 30px;
    }

    .login-modal-div .modal-content{
      width: 90%;
    }

    .modal-form-group .modal-form-input{
      width: 100%;
    }
  }

  .login-modal-div .modal-header section{
    display: none;
    padding: 20px 30px 30px 30px;
    border: 1px solid #ddd;
    border-bottom: none;
  }

  .login-modal-div .modal-header input[type=radio]{
    display: none;
  }

  .login-modal-div .modal-header label.tab-label{
    display: inline-block;
    margin: 0 0 -1px;
    padding: 15px 25px;
    font-weight: 600;
    text-align: center;
    color: #888;
    border: 1px solid transparent;
    width: 50%;
    padding-bottom: 12px;
    font-size: 20px;
    border-bottom-width: 4px;
    background-color: #e9ebee;
  }

  .login-modal-div .modal-header label.tab-label:first-of-type{
    float: left;
  }

  .login-modal-div .modal-header label.tab-label:before{
    font-weight: normal;
    margin-right: 10px;
  }

  .login-modal-div .modal-header label:hover{
    color: #888;
    cursor: pointer;
  }

  .login-modal-div .modal-header input:checked + label.tab-label{
    color: #555;
    border: 1px solid #ddd;
    border-top: 2px solid #0f9d58;
    border-bottom: 3px solid #fff;
    background-color: #fff;
  }

  .login-modal-div .modal-header #tab1:checked ~ #content1,
  .login-modal-div .modal-header #tab2:checked ~ #content2{
    display: block;
  }

  @media screen and (max-width: 650px) {
    .login-modal-div .modal-header label.tab-label:before{
      margin: 0;
      font-size: 18px;
    }
  }

  @media screen and (max-width: 400px) {
    .login-modal-div .modal-header label.tab-label{
      padding: 15px;
    }
  }

  .login-modal-div .left{
    text-align: left;
  }

  .login-modal-div .right{
    text-align: right;
  }

  .login-modal-div .pull-right{
    float: right;
  }

  .login-modal-div .pull-left{
    float: left;
  }

  .modal-form-label{
    vertical-align: middle;
    font-weight: 500;
    color: #404040;
    font-size: 12px;
    position: relative;
    top: -5px;
  }

  .login-modal-div a{
    color: #979faf;
  }

  .login-modal-div a:hover{
    color: #0f9d58;
    text-decoration: underline;
  }

  .login-modal-div .btn{
    background-color: whitesmoke;
    background-image: -webkit-gradient(linear, top left, bottom left, color-stop(0, #2bbe60), color-stop(1, #0f9d58));
    background-image: -webkit-linear-gradient(top, #2bbe60, #0f9d58);
    background-image: linear-gradient(to bottom, #2bbe60, #0f9d58);
    border: 1px solid #0f9d58;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08),inset 0 -1px 4px rgba(151,159,175,0.2);
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 10px 20px;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    position: relative;
    color: #39424e;
    text-align: center;
    text-decoration: none !important;
    vertical-align: middle;
  }

  .login-modal-div .btn-green{
    color: #fff;
    background-color: #0f9d58;
    width: 100%;
    text-shadow: none;
  }

  .login-modal-div .forgot-link, .login-modal-div .login-link{
    cursor: pointer;
    font-weight: 500;
    font-size: 12px;
    position: relative;
    bottom: -5px;
  }

  @media(max-width: 768px){
    .login-modal-div .forgot-link, .login-modal-div .login-link{
      padding: 10px 0px;    
    }
  }

  .login-modal-div .social-signin-div{
    border: 1px solid #ddd;
    border-top: none;
    padding-bottom: 20px;
  }

  .login-modal-div .social-signin-div .social-div{
    width: 50%;
    display: inline-block;
    padding: 5px 30px;
  }

  .login-modal-div .social-signin-div .tnc-div{
    font-size: 10px;
    padding: 0 15px;
    color: #999;
    margin-top: 10px;
    margin-bottom: 0;
  }

  .login-modal-div .social-signin-div .tnc-div a{
    color: #0f9d58;
  }

  .login-modal-div .social-signin-div .social-divider{
    width: 80%;
    text-align: center;
    border-bottom: 1px solid #979faf;
    line-height: 0.1em;
    margin: -20px 0 20px;
    margin-left: 10%;
  }

  .login-modal-div .social-signin-div .social-divider span{
    background: #fff;
    padding: 0 10px;
  }

  .login-modal-div .social-signin-div .btn-social{
    padding-left: 40px;
    color: #fff;
  }

  .login-modal-div .social-signin-div .btn-social span.fa{
    padding-top: 2px;
  }

  .login-modal-div .social-signin-div .btn-google{
    background-image: -webkit-gradient(linear, top left, bottom left, color-stop(0, #dd4e41), color-stop(1, #c9453a));
    background-image: -webkit-linear-gradient(top, #dd4e41, #c9453a);
    background-image: linear-gradient(to bottom, #dd4e41, #c9453a);
    color: #fff;
    border: 1px solid #c9453a;
    padding-left: 60px;
  }

  .login-modal-div .social-signin-div .btn-facebook{
    background-image: -webkit-gradient(linear, top left, bottom left, color-stop(0, #4b66a0), color-stop(1, #3b5998));
    background-image: -webkit-linear-gradient(top, #4b66a0, #eb5998);
    background-image: linear-gradient(to bottom, #4b66a0, #3b5998);
    color: #fff;
    border: 1px solid #3b5998;
  }

  .login-modal-div .social-signin-div .btn-linkedin{
    background-image: -webkit-gradient(linear, top left, bottom left, color-stop(0, #0073b1), color-stop(1, #075b8c));
    background-image: -webkit-linear-gradient(top, #0073b1, #075b8c);
    background-image: linear-gradient(to bottom, #0073b1, #075b8c);
    color: #fff;
    border: 1px solid #075b8c;
    padding-left: 60px;
  }

  .login-modal-div .social-signin-div .btn-github{
    background-image: -webkit-gradient(linear, top left, bottom left, color-stop(0, #4a4646), color-stop(1, #191717));
    background-image: -webkit-linear-gradient(top, #4a4646, #191717);
    background-image: linear-gradient(to bottom, #4a4646, #191717);
    color: #fff;
    border: 1px solid #191717;
    padding-left: 60px;
  }

  .login-modal-div .forgot-div{
    padding: 20px 30px 30px 30px;
    border: 1px solid #ddd;
    display: none;
  }

  .login-modal-div .forgot-div p:first-of-type{
    font-weight: 400;
    color: #404040;
  }

  .login-modal-div div.input-error{
    font-size: 12px;
    color: #b71c1c;
    letter-spacing: 0.83;
    text-align: left;
    position: relative;
    bottom: 10px;
    font-weight: 500;
  }

  #glogin, #fblogin, #inlogin, #gitlogin{
    display: block;
  }

  @media(max-width:468px){
    .login-modal-div .social-signin-div .social-div{
      padding: 0;
    }

    #glogin, #fblogin, #inlogin, #gitlogin{
      font-size: 14px !important;
      display: inline-block;
    }

    #glogin{
      padding-left: 50px !important;
    }

    #inlogin{
      padding-left: 43px !important;
    }
  }