/* media queries */


/* resizing stuff on phone */

@media (max-width: 768px) {
    .container {
        max-width: 720px;
    }
    .phone_smaller_font {
        font-size: 1rem !important;
    }
    .phone_smallest_font {
        font-size: 0.8rem !important;
    }
    .phone_text_left {
        text-align: left !important;
    }
    .phone_smaller_footer_image {
        width: 20px !important;
    }
}


/* screen resolution resize of main view */


/* X-Small devices (portrait phones, less than 576px)
 No media query for `xs` since this is the default in Bootstrap */


/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}


/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}


/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}


/* X-Large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
    .container {
        max-width: 960px;
    }
}


/* XX-Large devices (larger desktops, 1400px and up) */

@media (min-width: 1400px) {
    .container {
        max-width: 960px;
    }
}

body {
    background-color: #2f6c9f;
    color: white;
}


/* checkbox */

.form-check-input:checked {
    background-color: #2f6c9f;
    border-color: black;
}


/* roundify more */

.rounded-3 {
    border-radius: .45rem !important;
}

.btn {
    border-radius: .45rem !important;
}

.form-control {
    border-radius: .45rem !important;
}

.card {
    border-radius: .45rem !important;
}

.alert {
    border-radius: .45rem !important;
}


/* cardheader slightly darker */

.card-header {
    background-color: rgba(0, 0, 0, 0.08) !important;
}


/* button primary */

.btn-primary,
.btn-primary:active,
.btn-primary:focus {
    background-color: #b3d9ff;
    color: black;
    border-color: transparent;
    box-shadow: none;
}

.btn-primary:hover {
    background-color: black;
    color: white;
    border-color: transparent;
}

.btn-primary:focus {
    border-color: black;
    box-shadow: 0 0 0 0 #b3d9ff;
}

.btn-primary:disabled {
    background-color: #b3d9ff;
    color: #404040;
    border-color: transparent;
}


/* optional badge */

.bg-secondary {
    background-color: #f6cd79 !important;
    color: black;
}


/* placeholders */


/*
.form-control::placeholder {
    color: rgb(187, 187, 187);
    opacity: 1;
}

.form-control:-ms-input-placeholder {
    color: rgb(187, 187, 187);
}

.form-control::-ms-input-placeholder {
    color: rgb(187, 187, 187);
}

*/


/* button primary orange */


/*
.btn-primary-orng,
.btn-primary-orng:active,
.btn-primary-orng:focus {
    background-color: #b3d9ff;
    color: black;
    border-color: transparent;
}
*/

.btn-primary-orng:hover {
    background-color: #f6cd79;
    color: black;
    border-color: transparent;
}

.bold_orange b {
    color: #f6cd79;
}

.bold_lightblue b {
    color: #bedfff;
}


/*
.btn-primary-orng:focus {
    border-color: black;
    box-shadow: 0 0 0 0 #b3d9ff;
}
*/


/*button outline primary*/

.btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary:focus {
    color: #b3d9ff;
    border-color: #b3d9ff;
    box-shadow: none;
}

.btn-outline-primary:hover {
    background-color: #f6cd79;
    color: black;
    border-color: transparent;
}


/* form focus border */

.form-control:focus {
    border-color: black;
    box-shadow: 0 0 0 0 #b3d9ff;
}


/* alert box margins left and right */

.alert {
    margin-right: 1rem;
    margin-left: 1rem;
}

.alert a,
.alert a:link,
.alert a:visited,
.alert a:active {
    color: black;
}


/* 
make links color pale blue. Make this for all links (followed, not followed, visited, etc.) and also on hover links
*/

a,
a:link,
a:visited,
a:active {
    color: #b3d9ff;
    text-decoration: none;
}

a:hover {
    color: #b3d9ff;
    text-decoration: underline;
}

.btn-link,
.btn-link:link,
.btn-link:visited,
.btn-link:active {
    color: #b3d9ff;
    text-decoration: none;
}

.btn-link:hover {
    color: #b3d9ff;
    text-decoration: underline;
}


/* others for background */

header {
    background-color: #2f6c9f;
    color: white;
}

footer {
    background-color: #2f6c9f;
    color: white;
}

main {
    background-color: #2f6c9f;
    color: white;
}

nav {
    background-color: #2f6c9f;
    color: white;
}

aside {
    background-color: #2f6c9f;
    color: white;
}

section {
    background-color: #2f6c9f;
    color: white;
}