/*
|-----------------------------------------------------------
| Fonts
|-----------------------------------------------------------
*/

@font-face {
    font-family: 'Aktiv Grotesk W01 Hairline';
    src: url('../../assets/fonts/aktiv_grotesk_w01_hairline.eot');
    src: url('../../assets/fonts/aktiv_grotesk_w01_hairline.eot') format('embedded-opentype'),
    url('../../assets/fonts/aktiv_grotesk_w01_hairline.woff') format('woff'),
    url('../../assets/fonts/aktiv_grotesk_w01_hairline.ttf') format('truetype'),
    url('../../assets/fonts/aktiv_grotesk_w01_hairline.svg#Aktiv Grotesk W01 Hairline') format('svg');
}

/*
|-----------------------------------------------------------
| Login / Emergency Page
|-----------------------------------------------------------
*/

.formPage form {
    text-align: center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 200;
    font-size: 18px;

}

input[type=checkbox] {
    height: 12px
}

.formPage .btn {
    background: none;
    border: none;
    color: #000;
    outline: none;
    box-shadow: none;
    font-size: 18px;
    font-weight: 300;
}

.login-box {
    position: absolute;
    top: 50%;
    margin-top: -200px;
}

.login-box h3 {
    font-size: 18px;
    font-weight: 300;
    color: #000;
    padding: 20px 0px;
    text-align: center;
    margin-bottom: 0px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


/*
|-----------------------------------------------------------
| General
|-----------------------------------------------------------
*/

html, body { width:100%; height: 100%;}
a, a:hover, a:focus,a:visited, a:active, a:link {text-decoration: none !important;}
.pageContainer{z-index: 3; height: 100%; width: 100%; position: absolute;}
.container-fix {height: 100%;left: 0;position: absolute;top: 0;width: 100%;}
.container-inner {display: table;height: 100%;table-layout: fixed;text-align: center;vertical-align: middle;width: 100%;overflow: hidden;}
.content {display: table-cell;text-align: center;vertical-align: middle;}
/*.content-inner {position: fixed; top: 50%; left: 50%; right: 0; transform: translate(-50%, -50%);}*/
.flex {position: absolute; height: 100%; padding: 0; margin: 0; width: 100%;  justify-content: center;
    display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;

}

/*
|-----------------------------------------------------------
| Startup page
|-----------------------------------------------------------
*/

#startup {position: absolute; width: 100%; height: 100%;}
#splashMessage, #splashMessage2 {font-size: 140px; padding: 0; margin-top: -80px;}
#message span {font-size: 80px; padding: 0; margin: 0;}
#btnRegister, #subText  {font-size: 30px; height: 50px;  padding: 0; margin-top: 30px; cursor: pointer;}

/*
|-----------------------------------------------------------
| Register page
|-----------------------------------------------------------
*/

#register {position: absolute; width: 100%; height: 100%; display:none;}
#register input{ border: 0; outline: 0; text-align: center; width:50%;}

#inputEmail {font-size: 80px; padding: 0; margin: 0;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}
#btnSubmit {font-size: 30px; height: 50px;  padding: 0; margin-top: 30px; cursor: pointer; background-color: #fff !important; }

#messageSuccess {font-family: 'Aktiv Grotesk W01 Hairline'; width: 50%; font-size: 80px; display: none; margin-top: -80px;}
/*
|-----------------------------------------------------------
| Custom Pages
|-----------------------------------------------------------
*/

#xClose {position: absolute; padding: 20px; margin-top: 5px; margin-left: 15px; color: #4a9fef; font-size: 50px; cursor: pointer; z-index: 9;}
.closePopup {position: absolute; padding: 20px; margin-top: 5px; margin-left: 15px; color: #4a9fef; font-size: 50px; cursor: pointer; z-index: 9; font-weight: lighter;}

/*
|-----------------------------------------------------------
| Company Pages
|-----------------------------------------------------------
*/
.editable span:first-child { display: block; padding: 0 0 0 0 !important; }
#company {font-weight: bold;}
#companyMessage {font-size: 80px; padding: 0; margin-top: -80px; font-weight: lighter; display: none;}
#companyContainer {display: none;}

#companyInfo {list-style-type: none; padding: 0 !important; margin: 0 !important;}
#companyInfo li {font-size: 20px; padding: 4px;}
#companyInfo li input {font-weight: bold; /*height: 22px;*/ width: 400px !important;}
#downloadPDF {text-align: center; width: 200px; margin-top: 30px; padding-bottom: 20px;}
#downloadPDF img {padding-bottom: 20px;}
#downloadPDF span {font-size: 20px; margin-top: 30px; cursor: pointer;}
#signature {margin-top: 30px; font-size: 20px;}
#signature span:first-child {display: block; padding: 0 0 0 0 !important;}
#signature span {display: block; padding: 20px 0 0 0}
#signature input {display: block; /*padding: 40px 0 0;*/ font-weight: bold; text-align: center; /*height: 70px !important;*/}
#signature #agreeSignature {cursor: pointer; font-size: 30px; color: #000; margin-bottom: 50px;}



#sucessMessages {display: none; background: #fff; z-index: 11;}
#recordedDate { font-size: 40px; margin-top: -40px; font-weight: lighter;}


#confirmAgree .confirm {font-size: 80px; padding: 0; margin-top: -80px; font-weight: lighter; cursor: pointer;}



#thanksRedirect {display: none; font-weight: lighter;}
#thanksRedirect span {font-size: 80px; padding: 0; margin: 0;}


#confirmAgree {position: absolute; display: none; width: 100%; height: 100%;z-index: 10;}

.alertCustom {text-align: center; z-index: 9; background: #fff; width: 100%; height: 100%; font-size: 50px;font-weight: 700; }

.alertContainer{display: none; width: 100%; height: 100%; position: absolute; z-index: 9999; background: #fff;}
.alertPopup{ width: 400px; z-index: 999; background: #F5F5F5; text-align: center; box-sizing: border-box; position: absolute; z-index: 100; display: none; margin-top: -110px; margin-left: 185px; }
.flex{ display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; justify-content: center; position: absolute; width: 100%; height: 100%; }
.alertCustomError{z-index: 999; position: absolute; background: #fff; border: 1px solid #979797; width: 800px; min-height: 160px; /*-webkit-box-shadow: 0 0 12px 4px #d8d8d8; -moz-box-shadow: 0 0 12px 4px #d8d8d8; box-shadow: 0 0 20px 6px #cccccc; border-radius: 3px; padding: 20px; */font-family: 'Aktiv Grotesk W01 Hairline'; font-size: 25px; }
.alertCustomError .alertTitle { font-size: 36px; }
.alertCustomError p { margin-top: 20px; font-size: 60px; }
.alertCustomError button { margin-top: 20px; font-size: 40px;/*float: right;*/ padding: 6px 20px; border: none; background: none; border: none; }

#submit_flavours {
    position: absolute;
    right: 30px;
    top: -50px !important;
}
.resultText{font-size: 50px; text-align: initial; width: 80%;}
.pagination{text-align: initial; width: 80%}
.pagination ul{padding: 0px !important;}
/*#submit_flavours {position: relative; !important; margin-top: 50px ;  }*/
/*
|-----------------------------------------------------------
| Mobile
|-----------------------------------------------------------
*/

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    #splashMessage, #splashMessage2 {font-size: 80px; padding: 0; margin-top: 0;}
    #message span {font-size: 50px; }
    #companyInfo li input {width: 100%;}
    .content-inner {text-align: center; display: inline-block; width: 100%;}
    #companyContainer {margin-top: 30px;}
    #message{ width: 100%;}
    #message span {font-size: 50px;}
    #inputEmail { font-size: 50px; }
    #thanksRedirect span{ font-size: 50px; }
    #thanksRedirect #subText{ font-size: 24px; }
    #closePopup { font-size: 24px; }
    #btnRegister, #btnSubmit {font-size: 24px; }
    #messageSuccess {font-size: 40px;}
    #confirmAgree .confirm {font-size: 50px; margin-top: 0;}
    #companyMessage {font-size: 60px; margin-top: 0;}
    #recordedDate, #deliveredMsg  {font-size: 24px; margin-top: 0; width: 80%;}
    .alertCustom { width: 100%; font-size: 24px;}
    #companyInfo li, #signature {font-size: 16px;}
    #signature #agreeSignature {font-size: 24px;}
    #downloadPDF span {font-size: 20px;}
    #downloadPDF img {width: 100px; display: block; margin: 0 auto;}
    #xClose, .closePopup { font-size: 36px; padding: 15px; margin-top: 0px; margin-left: 10px;}
    .alertCustomError p { margin-top: 20px; font-size: 30px; }
    .alertCustomError button { margin-top: 20px; font-size: 20px;/*float: right;*/ padding: 6px 20px; border: none; background: none; border: none; }
    
    #submit_flavours {position: absolute !important; margin-top: 35px !important;  }
    
    
    tr {display: inline-block; min-width:100% !important; }
        table tr td:nth-child(1) {width: 100% !important;}
        input[type=checkbox]

    /*#genderSelect input[type=radio] {
        display: inline-block;
        min-width: 100% !important;
    }*/


}