/*=========================================================
    mydotspace Article 16 Flight Planner
    Main Stylesheet
=========================================================*/


/*=========================================================
    Colour Palette
=========================================================*/

:root{

    --background:#1d1f21;
    --panel:#2b2d30;
    --panel-border:#3a3d42;

    --primary:#2d7dff;
    --primary-hover:#4a90ff;

    --text:#ffffff;
    --text-muted:#8b8b8b;

    --success:#28a745;
    --warning:#ffc107;
    --danger:#dc3545;

    --shadow:0px 0px 15px rgba(0,0,0,.50);

}


/*=========================================================
    Font Sizes
=========================================================*/

:root{

    --font-title:52px;
    --font-subtitle:34px;
    --font-heading:28px;
    --font-large:42px;
    --font-normal:28px;
    --font-small:28px;
    --font-tiny:28px;
    --font-version:28px;

}


/*=========================================================
    General
=========================================================*/

body{

    margin:0;

    background:var(--background);

    color:var(--text);

    font-family:"Segoe UI", Arial, Helvetica, sans-serif;

}


/*=========================================================
    Header
=========================================================*/

.navbar{

    background:var(--panel);

    border-bottom:1px solid var(--panel-border);

    box-shadow:var(--shadow);

}


/*=========================================================
    Footer
=========================================================*/

footer{

    margin-top:60px;

    text-align:center;

    font-size:var(--font-version);

    color:var(--text-muted);

}


/*=========================================================
    Typography
=========================================================*/

h1{

    font-size:var(--font-title);

    font-weight:600;

}

h2{

    font-size:var(--font-subtitle);

    font-weight:500;

}

h3{

    font-size:var(--font-heading);

}

p{

    font-size:var(--font-normal);

}

label{

    font-size:var(--font-normal);

}

input{

    font-size:var(--font-normal);

}

button{

    font-size:var(--font-large);

}

a{

    font-size:var(--font-normal);

}


/*=========================================================
    Utility Classes
=========================================================*/

.main-title{

    font-size:var(--font-title);

}

.sub-title{

    font-size:var(--font-subtitle);

}

.heading{

    font-size:var(--font-heading);

}

.large-text{

    font-size:var(--font-large);

}

.normal-text{

    font-size:var(--font-normal);

}

.small-text{

    font-size:var(--font-small);

}

.tiny-text{

    font-size:var(--font-tiny);

}

.version{

    font-size:var(--font-version);

    color:var(--text-muted);

}


/*=========================================================
    Cards
=========================================================*/

.card{

    background:var(--panel);

    border:1px solid var(--panel-border);

    border-radius:10px;

    box-shadow:var(--shadow);

}


/*=========================================================
    Forms
=========================================================*/

.form-control{

    background:#383c42;

    color:var(--text);

    border:1px solid #4a4f57;
	
	font-size:28px;

}

.form-control:focus{

    background:#383c42;

    color:var(--text);

    border-color:var(--primary);

    box-shadow:none;

}


/*=========================================================
    Buttons
=========================================================*/


.btn-primary{

    background:var(--primary);

    border:none;
	font-size:28px;
}

.btn-primary:hover{

    background:var(--primary-hover);

}


/*=========================================================
    Links
=========================================================*/

a{

    color:#66A3FF;

    text-decoration:none;

    font-size:20px;

}

a:hover{

    color:#FFFFFF;

}

/*=========================================================
    Login / Registration
=========================================================*/

.login-panel{

    width:520px;

    margin:60px auto;

}

.card-body{

    padding:35px;

}

.form-control{

    margin-bottom:15px;

}
/*=========================================================
    Form Labels
=========================================================*/

label{

    color:#FFFFFF;

    font-size:22px;

    font-weight:500;

    margin-bottom:8px;

    display:block;

}

.card h2{

    color:#FFFFFF;

}

.card hr{

    border-color:#4A4F57;

}

.text-muted{

    color:#B0B0B0 !important;

}

/*=========================================================
    Registration Wizard
=========================================================*/

.wizard-title{

    text-align:center;

    font-size:32px;

    font-weight:600;

    color:white;

    margin-bottom:5px;

}

.wizard-step{

    text-align:center;

    font-size:18px;

    color:#9ca3af;

    margin-bottom:25px;

}

.progress{

    height:8px;

    background:#444;

    border-radius:10px;

    margin-bottom:35px;

}

.progress-bar{

    background:#2D7DFF;

}

/*=========================================================
    Review Page
=========================================================*/

.review-table{

    font-size:22px;

}

.review-table td{

    padding:12px;

}

.review-table td:first-child{

    width:240px;

    font-weight:600;

    color:#9ec5ff;

}

.btn-secondary{

    background:#555;

    border:none;

    font-size:22px;

    padding:10px 30px;

}

.btn-secondary:hover{

    background:#777;

}

.btn-success{

    font-size:22px;

    padding:10px 30px;

}

/*=========================================================
    Login Controls
=========================================================*/

.large-input{

    font-size:24px;

    height:60px;

}

.large-input::placeholder{

    font-size:20px;

}

.form-control{

    font-size:24px;

}

.btn{

    font-size:24px;

}

.remember-me{

    font-size:22px;

}

.remember-me input{

    width:22px;

    height:22px;

    margin-right:10px;

}

.alert{

    font-size:22px;

}

/* =========================================
   Leaflet Layer Control
========================================= */

.leaflet-control-layers {

    color: #000 !important;

}

.leaflet-control-layers label {

    color: #000 !important;

}

.leaflet-control-layers-expanded {

    color: #000 !important;

    background: #ffffff !important;

}