/***************************************************************************
RESET
***************************************************************************/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td{
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
    margin:0;
    padding:0
}

body{
    line-height:1
}

ol,
ul{
    list-style:none
}

blockquote,
q{
    quotes:none
}

table{
    border-collapse:collapse;
    border-spacing:0
}

#emergencyPanel{
    color: #666;
   background: #fff;
    padding: 10px;
    position: absolute;
    width: 90%;
    min-height: 14rem;
    /*border-radius: 5px;*/
    z-index: 999; 
}
#emergencyPanel h2{
    font-size: 16px;
    font-weight:bold;
    margin-bottom: 10px;
}
#emergencyPanel p{
    font-size: 12px;
    margin: 0 auto;
    width: 91%;
}
#emergencyPanel a{
    text-decoration: underline;
}
#emergencyPanel a:hover{
    color: #000;
}

/***************************/

a{
    text-decoration:none;
}
/***************************************************************************
STYLING FOR DESKTOP VIEW
***************************************************************************/

.themeColor{
/*    background-color:rgba(53, 58, 71, 0.55);*/
}

/*************************
BASE ELEMENTS
*************************/

html,
body{
    height:100%;
	width:100%;
}

html{
    font-size:16px;
}

body{
    /*background-attachment:fixed;
    background-image:url(../images/background-image-blurred.jpg);
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;*/
    background-color: #37474f;
    color:#EEE;
    font-family:arial, helvetica, sans-serif;
    line-height:21px;
}
.disableButton{
    pointer-events: none;
    opacity: 0.4 !important; 
    cursor: default;
}

#loginBtn .disableButton{
    opacity: 0.2 !important;
}

#feedback{
    display:none;
    color: #F00;
    margin: 10px 0;
    padding: 10px;
    font-size: 12px;
    line-height: 16px;
    background-color: rgba(255, 255, 255, 0.1);
}
#feedback .loginErr{
    color:#FF3E3E;
    font-size:15px;
}
#feedback .loginErr p{
    margin: 3px 0;
}
#feedback .loginErr table{
    color: #FFC6C6;
    width: 90%;
    margin: 10px auto;
}
#feedback .loginErr table td{
    padding:3px;
}
#feedback .loginErr table a:hover{
    color:#FFF;
}
#sessionExpired{
    /*display:none;*/
    margin:10px 0;
    padding:10px;
    font-size:12px;
    line-height:16px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.1);
}

#feedBack .closeIcon ,
#sessionExpired .closeIcon {
    float: right;
    cursor: pointer;
    opacity:0.8;
}
#feedBack .closeIcon:hover,
#sessionExpired .closeIcon:hover{
    opacity:1;
}
#sessionExpired h2 {
  font-size: 16px;
  margin-bottom: 16px;
}

input[type = "button"]{
    background-color:transparent;
    border:1px solid #FFF;
    color:#FFF;
    text-transform:uppercase;
    cursor:pointer;
    opacity:0.8;
}

input[type = "button"]:hover{
    opacity:1;
}

a{
    color:inherit;
    cursor:pointer;
}

a:hover{
    color:#FFF;
}

/************ VERSION CHECK POPUP **********************/
#verPopup{
    position: absolute;
    width: 450px;
    min-height: 40px;
    left: calc((100% - 450px)/2);
    top: 48%;
    z-index: 9999999;
    background: #eee;
    border: 1px solid red;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 2px 2px 6px #333;
    font-size: 14px;
}
#verPopup label{
    width: 75px;
    display: inline-block;
}    
#verPopup .iconClose{
    float:right;
    width:18px;
    height:18px;
    cursor:pointer;
    border-bottom:1px solid #333;
    border-right:1px solid #333;
    border-radius:10px;
    display:inline-block;
    text-align:center;
    line-height:19px;
    position:relative;
    top:-17px;
    right: -16px;
    color:white;
    background: #c0c0c0;
}
#verPopup .iconClose:hover{
    box-shadow:1px 1px 3px #000;
}
#verPopup .content{
    color: #000;
    padding: 0;
}
#verPopup .debugInfo{
    display: none;
    color: green;
    margin-top: 10px;
    border: 1px solid;
    padding: 5px;
    font-size: 10px;
}
#verPopup .debugDiv{
    border-bottom: 1px solid;
}
#verPopup .devContext h3{
    margin: 4px 0 2px;
}
#verPopup .devContext label{
    width: 90px;
}
#verPopup .notEqual{
    color: red;
}

/*************************
STRUCTURAL ELEMENTS 
(Includes footer)
*************************/

.wrapper{
    min-height:100%;
    position:relative;
}

.content{
    padding-bottom:50px;
    /* Height of the footer element */
}

/*************************
FOOTER AND SUB ELEMENTS
*************************/

footer{
    width:100%;
    height:50px;
    position:absolute;
    bottom:0;
    left:0;
    color:#B4B4B4;
    font-size:13px;
    text-align:center;
    line-height:50px;
}
footer #showTimeout{
    display: none !important;
}

footer .toTopIcon{
    /*float: left;*/
    /* display: inline-block;
    width: 40px;
    line-height: 10px;
    margin-left: 10px;
    border-radius: 10px;
    color: #979797;
    border: 1px solid;
    position: relative;
    left: -30px; */
    display: none;
}
footer .toTopIcon:hover{
    color: orange;
}

footer a:hover{
    color: orange;
}

/*************************
PANEL
*************************/

.panel-container{
    padding-top:20px;
    /*text-align: -webkit-center;*/
}

.panel{
    width: 89%;
    padding: 0;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    min-height: 30rem;
    margin-top: 7rem; 
}

/*************************
LOGO
*************************/

.logo-container{
    display: block;
    position: relative;
    width: 80%;
    margin: 0 auto 30px auto;
}

.logo-container p{
    color:#FFF;
    font-size:17px;
    letter-spacing:2.2px;
    opacity:0.5;
    text-transform:lowercase;
    text-shadow:1px 2px 2px #000;
    width:100%;
    word-spacing:1px;
}

.logo{
    margin-top: 5px;
    width: 100%;
}

/*************************
LOGIN
*************************/

.login-container{
    margin-top:40px;
    width:80%;
/*    max-width: 360px;;*/
    margin:0 auto;
    overflow:hidden;
    position:relative;
}

#loginPanel{
    overflow:hidden;
}

#loginPanel label,
#org-select label{
    width:30%;
    display:inline-block;
}

#loginPanel input,
#org-select select{
    width:100%;
    height:30px;
    display:block;
    margin-bottom:10px;
    padding-left:5px;
}

#org-select label{
    margin-bottom: 10px;
}

.actionPanel{
    overflow:hidden;
    text-align: center;
    position: relative;
}
#validatingPanel{
    position: relative;
    display: inline-block;
    margin-top: 7px;
    margin-left: 7px;
}
.valiDate{
    font-size: 12px;
    display: inline-block;
    /* margin: 8px; */
    margin-left: 8px;
}
.actionPanel img{
    width: 20px;
    position: relative;
    float: left;
}
#loginBtn{
    float: right; 
    width: 120px;
    height: 25px;
    font-size: 15px;
}

#home{
    font-size: 11px;
    line-height: 10px;
    float: left;
    margin-right: 10px;
    margin-top: 12px;
}


/*KUDU CHANGES - DEMIAN HAUPTLE 18/12/2019*/

a#home  {
    color: #B4B4B4;
}

a:hover#home {
    color: white;
}

/*KUDU CHANGES - DEMIAN HAUPTLE 18/12/2019*/

/***********FORCE REFRESH POPOUP***********************/

#forceReloadPopup{
    background: red;
    padding: 0;
    position: absolute;
    width: 100%;
    min-height: 14rem;
    border-radius: 5px;
    z-index: 999;    
}
#forceReloadPopup .closeIcon{
    position: absolute;
    right: 2px;
    top: 2px;
    display: inline-block;
    background: #f00;
    color: #000;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    border-radius: 10px;
    cursor: pointer;
}
#forceReloadPopup .closeIcon:hover{
    color:#fff;
}
#forceReloadPopup .closeButton{
    position: absolute;
    right: 14px;
    bottom: 3px;
    font-size: 0.75em;
    border: 1px solid #fff;
    height: 14px;
    width: 95px;
    text-align: center;
    line-height: 14px;
    border-radius: 7px;
}
#forceReloadPopup .closeButton:hover{
    box-shadow: 2px 2px 4px #333;
/*    border-color: #333;*/
}

#forceReloadPopup .cont{
    margin: 10px;
    padding: 7px;
    border: 1px solid #ff7b7b;
    background: #b90000;
    min-height: 11rem;
}

/*************************
UPDATES AND SUB ELEMENTS
*************************/

.updates{
    /*display:none;*/
    min-height:150px;
    line-height:20px;
    background-color:rgba(32,51,71,0.8);
    color:#FFFFFF;
    /*font-family:monospace;*/
    font-size:13px;
    margin:20px auto 0;
    padding:20px 20px 10px;
    font-family: inherit;
    max-width: 300px;
    margin: 0 auto;
   /* display: block;*/
/*    background-color: white;*/
   /* position: absolute;*/
    top: 20px;
    right: 20px;
    height: 90%;
    border-radius: 5px;
}

.scrollDiv {
    height: 70%;
	overflow-y: auto;
	position: relative;
    margin-top: 35px;
}

.updateTitle {
    position: relative;
	height: 16%;
    text-align: center;
}

.updates h3{
    font-weight:bold;
    text-align:center;
    color:#dc7e1f;
    font-size: 19px;
    font-style: italic;
    padding: 5px ;
}
.newUpdate{
	    position: relative;
		/*padding-top: 10px;*/
	      color: red;
	    background: aliceblue;
	    border-radius: 5px;
	    margin-right: 5px;
	    padding: 5px;
}
.newUpdate a{
    color: #87C2ED;
}

.oldUpdates {
   /* color: #E1E1E1;*/
   margin-top: 30px;
   position: relative;
}

.oldupdates a{
    color: #87C2ED;
}

.date {
    font-style: italic;
    font-size:10px;
    }

.updateImage {
    width: 100%;
    padding: 5px 0 5px 0;
}

/*************************
WARNINGS / ERROR PANELS
*************************/

#IEwarning{
    color: red;
    font-size: 12px;
    margin: 7px 20%;
    background: rgba(255, 255, 255, 0.78);
    padding: 11px;
    width: 60%;
    border: 2px solid;
    position: absolute;
    line-height: 14px;
    z-index: 9999;
}
#IEwarning a{
    color:darkGray;
    font-weight:bold;
    font-style: italic;
}
#IEwarning a:hover{
    color: orange;
}

.updates a:hover {
    color: #CBCBDF;
    
}
    
#updatePopup {
    max-width: 300px;
    margin: 0 auto;
    display: block;
/*    background-color: white;*/
    position: absolute;
    top: 20px;
    right: 20px;
    height: 94%;
    
}
#loginPan{
    width: 100%;
    display: block;
}

#updatePan{
    width: 100%;
    display: block;
    /*max-height: 800px;*/    
}

/*********** Admin access Token warning info *******************/
.adminAccInfo{
    text-align: center;
    margin-bottom: 10px;
    color: orange;
    font-size: 16px;
    border: 1px solid;
    border-radius: 10px;
    padding: 5px;    
}
.adminAccInfo p{
    margin-bottom: 7px;
}

/***************** when width is less than 700px, this happens *********/
@media all and (min-width: 750px){

.updateTitle {
    position: relative;
	height: 14%;
    text-align: center;
}
.valiDate{
    font-size: 12px;
    display: inline-block;
    margin: 8px;
}
#loginPan{
    width: 70%;
    display: inline-block;
}
 #loginBtn{
    float: right;
    width: 80px;
    height: 25px;
}
#updatePan{
    width: 30%;
    display: inline-block;
    float: right;
    height: 96%;
    /*max-height: 800px;*/
}
.scrollDiv {
    margin-top: 21px;
    padding-top: 0px;
    height: 80%;
	/*height: 77%;*/
	overflow-y: auto;
	position: relative;
    /*padding-top: 28px;;*/
}
.updates{
    margin: 0 auto;
    margin-right: 20px;
    border-radius: 5px;
    /*width: 90%;*/
}
.panel{
    width: 50%;
    max-width: 400px;
    padding: 0;
    /* margin: 20 auto; */
    overflow: hidden;
    position: relative;
/*    margin-top: 25%;*/
}
.actionPanel{
    overflow:hidden;
    position: relative;
}
#validatingPanel{
    position: relative;
    display: inline-block;
    margin-top: 0px;
    margin-left: 0px;
}
.actionPanel img{
    width: 30px;
    position: relative;
    float: left;
}
#home{
    font-size: 10px;
    float: right;
    margin-right: -78px;
    margin-top: 38px;
}
/*.login-container{
    margin-top:40px;
    width:80%;
/*    max-width: 360px;;
    margin:0 auto;
    overflow:hidden;
    position:relative;
}*/
}
 @media all and (min-width: 750px) and (max-width: 1300px) {
#loginPan{
    width: 60%;
    display: inline-block;

}
.updateTitle {
    position: relative;
	height: 14%;
    text-align: center;
    margin-bottom: 43px;
}

#updatePan{
    width: 40%;
    display: inline-block;
    float: right;
    height: 96%;
    /*max-height: 800px;*/
}
.scrollDiv {
    margin-top: 34px;
    padding-top: 0px;
    /*height: 72%;*/
	height: 76%;
	overflow-y: auto;
	position: relative;
    /*padding-top: 28px;;*/
}
.updates{
    margin: 0 auto;
    margin-right: 20px;
    border-radius: 5px;
    /*width: 80%;*/
}
.panel{
    width: 84%;
    max-width: 450px;
    min-height: 30rem;
    padding: 0;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
/*    margin-top: 20%;*/
}   
 .actionPanel{
    overflow:hidden;
}
 #loginBtn{
    float: right;
    width: 80px;
    height: 25px;
}
#home{
    font-size: 10px;
    float: right;
    margin-right: -78px;
    margin-top: 38px;
}


/*.login-container{
    margin-top:40px;*/
/*    width:80%;
    max-width: 360px;;
    margin:0 auto;
    overflow:hidden;
    position:relative;
}*/
}