﻿
body,div,button,input,select,textarea,.input-container > input {
	font-family:"Diodrum-Regular",sans-serif!important;
}

h2, h4 {
    font-family:"Diodrum-Semibold",sans-serif!important; 
    color: #006272;
}

.button-algreen {
    background-color: #84BD00;
}

.button-algreen .icon {
    color: #FFFFFF;
    fill: #FFFFFF;
}

button:not([disabled]):not(.nfs):not(.nfs-d):not(.psuedo-focus){
    box-shadow: none !important;
}

/* Checkbox for Aer Lingus if they change */
/* .checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  } */
/* Hide the browser's default checkbox */
/* .checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  } */
  
  .Rectangle {
    width: 35px;
    height: 35px;
    border-radius: 16.5px;
    background-color: #84bd00;
    margin-left: 5px;
  }

  .Line-Copy-2 {
    content: "";
    position: relative;
    left: 13px;
    top: 8px;
    width: 10px;
    height: 15px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    margin-left: -20px;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    border-radius: 2px;
    box-shadow: inset 0 0 4px 2px rgba(0, 0, 0, 0.19);
    border: solid 1px #888b8d;
    background-color: #ffffff;
  }
  
  /* On mouse-over, add a grey background color */
  .checkbox:hover input ~ .checkmark {
    background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .checkbox input:checked ~ .checkmark {
    background-color: #84bd00;
    box-shadow: none;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .checkbox input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .checkbox .checkmark:after {
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .form-control[required] ~ .form-control-required{
      display: inherit
  }

  .form-control ~ .form-control-required{
    color: #63666A;
    cursor: text;
    font-size: 1.5em;
    left: 9px;
    top: 3px;
    pointer-events: none;
    position: absolute;
  }
  .dropdown-toggle ~ .form-control-required{
    color: #63666A;
    cursor: text;
    font-size: 1.5em;
    left: 9px;
    top: 3px;
    pointer-events: none;
    position: absolute;
  }

  .form-control ~ .form-control-error{
    color: #63666A;
    cursor: text;
    font-size: 1em;
    right: 7px;
    top: 1.5em;
    position: absolute;
    visibility: hidden;
  }
  .dropdown-toggle ~ .form-control-error{
    color: #63666A;
    cursor: text;
    font-size: 1em;
    right: 18px;
    top: 20px;
    position: absolute;
    visibility: hidden;
  }
  

  .form-control.error~.form-control-error{
      visibility: visible;
  } 

  .form-control.error~.form-control-required, .form-control.error~.form-control-label{
    color: #C55050; 
} 

  .dropdown-toggle.error~.form-control-error{
      visibility: visible;
  } 

  .dropdown-toggle.error~.form-control-label{
    color: #C55050; 
} 

  .error-icon .tooltiptext {
    visibility: hidden;
    font-family:"Diodrum-Regular",sans-serif!important; 
    width: 130px;
    background-color: #C55050;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
  }
  
  .error-icon:hover .tooltiptext {
    visibility: visible;
  }

  .chevron-down{
      background-image: url(./ei-ui-livery/icon/atom-icon-chevron-down.png);
      width: 24px;
      height: 24px;
  }

  .error-circle{
      background-image: url(./ei-ui-livery/icon/atom-icon-error-circle-solid.png);
      width: 24px;
      height: 24px;
      display: inline-block;
      top: 1px;
  }

  .error-submitbtn{
      width: 85px;
      height: 50px;
      right: 5px;
      display: inline-block;
      top: 1px;
  }

.margin-right-std {
    margin-right: 10px;
}

.margin-bottom-std {
    margin-bottom: 5px;
}
.absolute-bottom-right {
    bottom: 0;
    right: 0;
}
.absolute {
    position: absolute;
}
.select-arrow {
    pointer-events: none;
    color: #666;
}

.largeButtons{
    font-size: xx-large;
}

  input.error, select.error{
       border: 1px solid #C55050; 
       color: #C55050 !important;
    }


  select::-ms-value {
    background: none; /* remove blue background on ie10/ie11 when selected*/
    color:#5a5a5a;

  }

  .submit-container {
    display: inline-block;
    vertical-align: top;
    position: relative;
    max-width: 100%;
}

.input-container {
                  display: inline-block;
                  vertical-align: top;
                  position: relative;
                  max-width: 100%;
              }

.inline-label {
                 padding: 10px;
                 color: #000
             }
label{
                 font-weight:400;
             }

             /* style that just styles the input */
             .form-control {
                 /* border-top-right-radius: 0;
                 border-bottom-right-radius: 0;
                 border-bottom-left-radius: 1px;
                 border-top-left-radius: 1px; */
                 /*  just adds the inset shadow  */
                 background-clip: padding-box;
                 border-width: 1px;
                 /*  default styles for the input  */
                 display: block;
                 padding: 20px 19px 3px;
             }

             select{
                 border: solid  #d3d3d3;
                 border-width:1px;
                 /*color: #666 !important*/
                 background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(1, #efefef));
                background: -ms-linear-gradient(bottom, #fff, #efefef);
                background: -moz-linear-gradient(center bottom, #fff 0%, #efefef 100%);
                background: -o-linear-gradient(#efefef, #fff);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#fff', GradientType=0)
             }

             .textboxborder{
                 border: solid  #d3d3d3;
                 color: #777;
                 border-width:.02px;
             }

             .form-control ~ .form-control-label {
                 -webkit-transition: all 0.5s ease;
                 -moz-transition: all 0.5s ease;
                 -o-transition: all 0.5s ease;
                 -ms-transition: all 0.5s ease;
                 transition: all 0.5s ease;
                 -webkit-transform-origin: 0%;
                 -moz-transform-origin: 0%;
                 -ms-transform-origin: 0%;
                 transform-origin: 0%;
                 position: absolute;
                 /* color: #777; */
                 cursor: text; 
                 left: 18px;
                 top: 26px;
                 pointer-events: none;
                 white-space: nowrap;
                 max-width: 100%;
                 text-overflow: ellipsis;
                 overflow: hidden;
                 padding-right: 1px;
             }
             .form-control:focus {
                 color: #008374;
                 outline: none;
                 border: 0px solid #008374;
                 -webkit-box-shadow: 0px 0px 2px 0px #008374;
                 box-shadow: 0px 0px 2px 0px #008374;
             }
             .form-control:focus ~ .form-control-label {
                 color: #008374;
                 -will-change: all;
                 -webkit-transition: all 0.2s ease;
                 -moz-transition: all 0.2s ease;
                 -o-transition: all 0.2s ease;
                 -ms-transition: all 0.2s ease;
                 transition: all 0.2s ease;
                 -webkit-transform: scale(0.7);
                 -ms-transform: scale(0.7);
                 transform: scale(0.7);
                 -webkit-transform: scale(0.7);
                 -moz-transform: scale(0.7);
                 -o-transform: scale(0.7);
                 -ms-transform: scale(0.7);
                 transform: scale(0.7);
                 top: .086em;
                 max-width: 130%;
             }

             .form-control.filled ~ .form-control-label {
                 -will-change: all;
                 -webkit-transition: all 0.2s ease;
                 -moz-transition: all 0.2s ease;
                 -o-transition: all 0.2s ease;
                 -ms-transition: all 0.2s ease;
                 transition: all 0.2s ease;
                 -webkit-transform: scale(0.7);
                 -ms-transform: scale(0.7);
                 transform: scale(0.7);
                 -webkit-transform: scale(0.7);
                 -moz-transform: scale(0.7);
                 -o-transform: scale(0.7);
                 -ms-transform: scale(0.7);
                 transform: scale(0.7);
                 top: 0.086em;
                 max-width: 130%;
             }
             select {
                 direction: ltr;
                 color:#555;
                 padding-top: 20px;
                 padding-left: 15px;

             }

             label {
                 display: inline-block;
                 margin-bottom: 12px;
             }
             td{
                 width:1.15em;
                 height:1.55em;
                 border:none;
                 padding-bottom:5px;
                 padding-top:5px;
                 padding-right:10px
             }


             #_helpQueryForm label {
                 /* width: 200px; */
             }

             #_helpQueryForm label.form-control-label {
                 width: 260px;
             }

             label.dropdown{
                 width: 110px !important;
                 z-index: 0 !important;
             }

             label.disabilityDropdown{
                 width: 180px !important;
                 z-index: 0 !important;
             }

             #_helpQueryForm label.error, #_helpQueryForm input.submit {
                 margin-left: 253px;
             }

             .inputError{
                 border: solid  #ff0000;
                 border-width:.02px
             }

             textboxclass{
                 width:1.95em;
                 height:1.55em;
                 padding-bottom:5px;
                 padding-top:5px;
                 padding-right:10px
             }

             .ui-datepicker {
                 background: #333;
                 border: 1px solid #555;
                 color: #EEE;
             }
             .auto-style1 {
                 height: 2em;
             }
             
             .transparentBtn {
                background-color: Transparent;
                background-repeat:no-repeat;
                border: none;
                cursor:pointer;
                overflow: hidden;
                outline:none;
                font-size: 2em;

            }

            .visuallyhidden {
                border: 0;
                clip: rect(0 0 0 0);
                height: 1px;
                margin: -1px;
                overflow: hidden;
                padding: 0;
                position: absolute;
                width: 1px;
            }
            
/* input.dropdown-toggle, */

select.dropdown-toggle {
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 50px;
    -webkit-padding-end: 30px;
    /* -webkit-padding-start: inherit; */
}

.dropdown-toggle:focus {
    /* color: #008374; */
    outline: none;
    border: 0px solid #008374;
    -webkit-box-shadow: 0px 0px 2px 0px #008374;
    box-shadow: 0px 0px 2px 0px #008374;
}

.dropdown-toggle~.form-control-label {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform-origin: 0%;
    -moz-transform-origin: 0%;
    -ms-transform-origin: 0%;
    transform-origin: 0%;
    position: absolute;
    color: #000;
    /* cursor: text; */
    left: 18px;
    top: 26px;
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 1px;
}

.dropdown-toggle.filled~.form-control-label {
    color: #008374;
    -will-change: all;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    top: 0.086em;
    max-width: 130%;
}

.dropdown-toggle:focus~.form-control-label {
    /* color: #008374; */
    -will-change: all;
    z-index: 100;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    top: .086em;
    max-width: 130%;
}

textarea.form-control#comments {
    height: 100px !important;
    padding: 20px;
    margin: 0 !important;
}

textarea.form-control#comments:focus {
    color: #666;
}

textarea.form-control~.form-control-label {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform-origin: 0%;
    -moz-transform-origin: 0%;
    -ms-transform-origin: 0%;
    transform-origin: 0%;
    position: relative;
    color: #000;
    cursor: text;
    /* left: 18px; */
    top: -6.00em;
    z-index: 2;
    /* pointer-events: none; */
    white-space: nowrap;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 1px;
}

textarea.form-control:focus~.form-control-label {
    /* color: #008374; */
    -will-change: all;
    z-index: 100;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    top: -7.05em;
    max-width: 130%;
}

textarea.form-control.filled~.form-control-label {
    color: #008374;
    -will-change: all;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6);
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6);
    top: -7.05em;
    max-width: 130%;
}


.filled {
    color: #666 !important;
}