@import "modal.css";

/*
 * Globals
 */

/* Links */
a,
a:focus,
a:hover {
  color: white;
  text-decoration: underline;
}

/* Custom default button */
.btn-default
{
  color: #333333;
  background-color: white;
  border: 2px solid white;
  border-radius: 4px;
}

.btn-default:hover, .btn-default:focus{
    color: black;
    text-decoration: none;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):hover {
    background-color: white;
    color: black;
    min-width: 100px;
    height: 36px;
    text-decoration: none;
    border: 1px solid white;
    box-shadow: none;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled):focus,
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus {
    background-color: #7f0f13;
    color: white;
    min-width: 100px;
    height: 36px;
    text-decoration: none;
    border: 1px solid white;
    box-shadow: none;
}

.alert {
    text-align: left;
}

/*
 * Base structure
 */

html,
body {
  height: 100%;
  background-color: #EFF0F1;
  font-family: Arial, sans-serif;
}

body {
  color: #000;
  background-color: #EFF0F1;
}

.cover-heading { /* Report Portal heading above login */
    color: #333333;
    opacity: 0.8;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 2.8em;
}

.cover-container .cover-heading { /* Inside error message */
    color: white;
}

/* Padding for spacing */
.inner {
  padding: 30px;
}

/*
 * Cover
 */

.cover {
  padding: 0 20px;
}

/*
 * Affix and center
 */

/* Start the vertical centering */
.site-wrapper {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

@media (max-width: 991px) and (orientation: landscape) {
    .site-wrapper {
        position: initial;
        width: initial;
        top: initial;
        left: initial;
        transform: initial;
    }
}

.site-wrapper.tallpage {
    position: initial;
    width: initial;
    top: initial;
    left: initial;
    transform: initial;
}

@media (max-width: 767px) {
  /* Handle the widths */
  .cover-container {
    width: 100%; /* Must be percentage or pixels for horizontal alignment */
  }

 .logo {
    width: 260px;
    margin-top:1.5em;
}

 .modal {
    width: 100%;    
    margin-top: 5%; 
    height:100%;  
    overflow-y:scroll; 
 }

}

@media (min-width: 992px) {
  .cover-container {
      width: 700px;   
  }

  .logo {
    width: 500px;
    margin-top:1.5em;
}

  .lblPaddingLft
  {
      padding-left:4.5em;
  }
   .lblPaddingRght
  {
      padding-right:4.5em;
  }

 .modal{
   width:600px;
   left: calc(50% - 300px);
   }

}

h1, h2, h3, h4, h5 {
    font-family: Arial, sans-serif;
    line-height: 47px;
    letter-spacing: 0.02em;
}

h1 {
    font-size: 3em;
    text-transform: uppercase;
}

.cover-container {
    background-color: #E51B24;
    border: 4px solid white;
    border-radius: 15px;
    margin-left: auto;
    margin-right: auto;
}

#copyright-text {
    font-size: 12px;
    font-style: italic;
    position: fixed;
    bottom: 0;
    text-align: center;
    width: 100%;
    color: #333333;
}

#copyright-text.tallpage {
    position: initial;
}

@media (max-width: 991px) and (orientation: landscape) {
    #copyright-text {
        position: initial;
    }
}

@media (max-width: 991px) and (orientation: landscape) {
    #copyright-text {
        position: initial;
    }
}

.form-horizontal {
	color: white;
}

.form-horizontal .control-label {
    font-weight: normal;
    font-size: 1.2em;
}

.language-switch {
    margin: 10px auto;
}

.language-switch a {
    color: black;
    text-decoration: none;
}

/* Landscape mobile styles */
@media (orientation: landscape) and (max-height: 550px) {
    #copyright-text { display: none; }
    img { width: 25%; }
    h1 { margin: 0; }
}

.letter_join {
    color: white;
    font-family: Arial, sans-serif;
    font-size: 18.5px;
    font-weight: 400;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
}

.letter {
    color: white;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.letterBlack {
    color: black;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.margin {
    padding-bottom: 7%;
}

label input {
    display: none; /* Hide the default checkbox */
}

/* Style the artificial checkbox */
label span {
    height: 15px;
    width: 15px;
    border: 1px solid grey;
    display: inline-block;
    position: relative;
    background-color:white;
}

/* Style its checked state...with a ticked icon */
[type=checkbox]:checked + span:before {
    content: '\2714';
    color:gray;
    position: absolute;
    top: -3px;
    left: 0;
}

#chkCondition {
    outline: 3px solid white;
    margin-right: 2%;
}

.labelLeft{
    text-align:left;
}

.fontWhite{
   color: white; 
   font-size:11pt;
   float:left;
}

.letterHeading
{
    color: white;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
}

.footerBlock
{
    display: block;
}

textarea {
    resize: none;
}