:root {
    --brand-primary: rgb(0,123,212);
    --brand-secondary: rgb(77, 17, 138);
    --brand-dark: rgb(2,0,36);
    
}

html { min-height: 100%; height: auto; }
body {
    background: rgb(2,0,36);
    background: radial-gradient(circle at 50px 50px, rgba(0,123,212,1) 0%, rgba(2,0,36,1) 100%);
    text-align: center;
    color: white;
    font-family: 'Raleway';
    margin: 0px;
    padding-left: 10px;
    padding-right: 10px;
}

a {
    color: white;
}

a:hover {
    text-shadow: #fff 0 0 10px;
}

.arrow-left {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 10px 10px 0;
	border-color: transparent rgba(255,255,255,0.9) transparent transparent;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 100;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 20px;
}

button.default, input.submit.default, input[type="submit"].default {
    font-family: 'Montserrat', sans-serif;
    background-color: rgba(0,0,0,0);
    color: white;
    padding: 10px;
    transition: background-color 300ms ease, color 300ms ease;
    cursor: pointer;
    height: 50px;
    border: #fff 1px solid;
}

button.primary, input.submit.primary, input[type="submit"].primary {
    font-family: 'Montserrat', sans-serif;
    background-color: rgba(0,0,0,0);
    color: white;
    padding: 10px;
    transition: background-color 300ms ease, color 300ms ease;
    cursor: pointer;
    height: 50px;
    border: #fff 2px solid;
    font-size: 20px;
    
}

button.default:disabled:hover, button.primary:hover, input.submit.default:disabled:hover, input[type="submit"].default:disabled:hover {
    background-color: rgba(0,0,0,0);
    color: white;
    cursor: auto;
} 

button.default:hover, button.primary:hover, input.submit.default:hover, input[type="submit"].default:hover {
    font-family: 'Montserrat', sans-serif;
    background-color: white;
    color: rgb(2,0,36);
    color: var(--brand-dark);
    padding: 10px;
    cursor: pointer;
    height: 50px;
}

.hello-icon-container {
    border: 1px dashed white;
    padding: 3px;
    border-radius: 3px;
    margin-right: 5px;
}

button.default:hover .hello-icon-container, 
button.primary:hover .hello-icon-container, 
input.submit.default:hover .hello-icon-container, 
input[type="submit"].default:hover .hello-icon-container {
    border-color: rgb(2,0,36);
    border-color: var(--brand-dark);
}

.hello-icon-container .fa-user {
    text-shadow: #fff 0 0 10px;
}

button.default:hover .hello-icon-container .fa-user, 
button.primary:hover .hello-icon-container .fa-user, 
input.submit.default:hover .hello-icon-container .fa-user, 
input[type="submit"].default:hover .hello-icon-container .fa-user {
    text-shadow: var(--brand-dark) 0 0 10px;
}

.action-back-icon {
    position: relative;
    left: 0px;
    margin-left: 15px;
    transition: left 1s ease;
}

button.default:hover .action-back-icon {
    left: -10px;
}

.action-back-second-icon {
    position: relative;
    opacity: 0.5;
    left: -10px;
    transition: left 1s ease, opacity 10ms ease 1s;
    
}

button.default:hover .action-back-second-icon {
    left: -20px;
    opacity: 0;
    transition: left 1s ease 150ms, opacity 1s ease 150ms;
}

.action-forward-icon {
    position: relative;
    left: 0px;
    margin-right: 15px;
    transition: left 1s ease;
}

button.default:hover .action-forward-icon {
    left: 10px;
}

button.default .action-forward-second-icon {
    position: relative;
    opacity: 0.5;
    left: 10px;
    transition: left 1s ease, opacity 10ms ease 1s;
    
}

button.default:hover .action-forward-second-icon {
    left: 20px;
    opacity: 0;
    transition: left 1s ease 150ms, opacity 1s ease 150ms;
}

button.primary:hover .action-forward-icon {
    left: 20px;
}

button.primary .action-forward-second-icon {
    position: relative;
    opacity: 0.5;
    left: 18px;
    transition: left 1s ease, opacity 10ms ease 1s;
    
}

button.primary:hover .action-forward-second-icon {
    left: 40px;
    opacity: 0;
    transition: left 1s ease 150ms, opacity 1s ease 150ms;
}

.bl-large-spinner {
    font-size: 10em;
    color: #2977DA;
    transition-property: color;
    transition-duration: 1s;
    position: relative;
    top: 30%;
}

.color-primary {
    color: var(--brand-primary);
}

.forefront-container {
    background: rgb(2,0,36);
    background: radial-gradient(circle at 50px 50px, rgba(0,123,212,1) 0%, rgba(2,0,36,1) 100%);
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    height: 100%; 
    opacity: 1;
    z-index: 10;
    transition: opacity 1s ease, z-index 0s ease 1s;
    padding-left: 10px;
    padding-right: 20px;
}

.hide {
    opacity: 0;
    z-index: -1;
}

input:not([type=submit]):not([type=file]) {
    border: 1px solid white;
    height: 2em;
}

.main-contents-left-of-ads {
    margin-right: 120px;
}

#flash-info {
	display: inline;
	padding: 10px 0px;
}

#flash-explain {
	display: none; 
	position: absolute; 
    background-color: rgba(255,255,255,0.9); 
    color: black;
	color: var(--brand-dark); 
	padding: 10px;
	text-align: left;
	opacity: 0;
}

#flash-info:hover #flash-explain {
    opacity: 1;
    display: inline-block;
}

#flash-info-arrow {
	position: relative;
	top: 3px;
	display: inline-block;
	opacity: 0;
}

#flash-info:hover #flash-info-arrow {
	opacity: 1;
}

#flash-why {
	display: inline-block; 
	padding: 10px;
}



/* Main site css overrides  */

.adbox_h {
    margin: 10px auto;
}

#forgotpass #desc {
    width: 60%;
}

#forgotpass #frm-div-forgotpass {
    border: none;
}

.modal-dialog-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(0,0,0,0.7);
}

.modal-dialog-container .modal-dialog {
    position: relative;
    top: 10%;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
}

.modal-dialog-container .modal-header {
    padding: 15px;
    background-color: rgb(86 105 156);
    font-weight: bold;
    font-size: large;
    border-bottom: 1px solid rgb(86 105 156);
}

.modal-dialog-container .modal-header .modal-close {
    float: right;
    cursor: pointer;
}

.modal-dialog-container .modal-contents {
    padding: 15px;
    max-height: 500px;
    overflow: auto;
    color: black;
    text-align: left;
}

.modal-dialog-container .modal-footer {
    padding: 5px;
    background-color: rgb(135 160 206);
}

/* Media queries */

@media screen {
    .only-print, .only-print * {
        display: none !important;
    }
}

@media print
{    

    body {
        background: none;
        color: black;
    }
    .no-print, .no-print *
    {
        display: none !important;
    }

    .main-contents-left-of-ads {
        margin-right: 0px;
    }

    .qr-printout {
        border: 1px solid rgba(0,0,0,0.5);
        border-radius: 5px;
        padding: 50px;
    }
}