﻿/*For followup timeline*/
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,400italic|Montserrat:400,700);



div#socialSharing a span.fa-lg {
    border-radius: 50%;
    margin: 1%;
    color: #FFFFFF;
    width:45px;
    height:45px;
}
    div#socialSharing a span.fa-lg i {
        font-style: normal;
    }
div#socialSharing a span#facebook {
    background-color: #3b5998;
}
    div#socialSharing a span#facebook:hover {
        background-color: #133783;
    }
div#socialSharing a span#twitter {
    background-color: #1da1f2;
}
    div#socialSharing a span#twitter:hover {
        background-color: #2582bb;
    }
div#socialSharing a span#whatsapp {
    background-color: #00E676;
}
div#socialSharing a span#whatsapp:hover {
    background-color: #03c164;
}




/*Stops text going outside of button area - particularly for the dynamic entry lists where the save/delete button is on the far right of the page*/
/*This setting makes the button break - looks 90s*/
/*.btn {
    white-space: normal !important;
    word-wrap:break-word;
}*/
/*This setting makes the text in the button turnicate. Probably best option.*/
.btn {
   white-space:nowrap;
   overflow:hidden;
}


/*@media (min-width: 200px) {
    .container {
        width: 1700px;
    }
}
*/

/*Playing with the menu selected rectangle*/
/*.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-image: linear-gradient(90deg, rgba(131,58,180,0.8) 0%, rgba(253,29,29,0.8) 100%, rgba(252,176,69,0.8) 100%);
    opacity:0.95;
}*/
/*Not sure why we would want this as the defualt? Commented out unless a good reason*/
/*a {
    color:black;
}*/
select[disabled] {
    background-color: white !important;
    color: black !important;
    opacity: 0.9 !important;
}


input[readonly] {
    background-color: white !important;
}

html {
    font-size: 1.1rem; 
}

@media only screen and (min-width: 768px) {
    #mainBodyDiv {
        padding-left: 2%;
        padding-right: 2%;
    }
}

@media only screen and (min-width: 1080px) {
    #mainBodyDiv {
        padding-left: 10%;
        padding-right: 10%;
    }
}


@media only screen and (min-width: 1200px) {
    #mainBodyDiv {
        padding-left: 15%;
        padding-right: 15%;
    }
}

.bar {
    background: #0275d8;
    width: 0;
    margin: .25em 0;
    color: #fff;
    position: relative;
    transition: width 2s, background .2s;
    -webkit-transform: translate3d(0, 0, 0);
    clear: both;
}

.bar.missed {
    background: #666666;
}

.bar.skipped {
    background: #ff6927;
}


/*    .bar.duenow {
        background-color:black;
        border-color: #9b42f5 !important;
        border-style:
    }*/



.bar.future {
    background-color: white; /*rgba(150, 150, 150, 0.3);*/
}

.bar .label {
    font-size: .9em;
    padding: 0.25em;
    background: #3d3d3d;
    text-align:center;
    width: 8em;
    display: inline-block;
    position: relative;
    z-index: 2;
}

.bar .label.future {
    background: #8a8a8a;
}

.count {
    position: absolute;
    right: .25em;
    top: .2em;
    padding: .15em;
    font-size: .75em;
    font-weight: bold;
}

.barText {
    position: absolute;
    right: .25em;
    top: .2em;
    padding: .15em;
    font-size: .75em;
    font-weight: bold;
}

.fade-in {
    animation: fadeIn ease 4s;
    -webkit-animation: fadeIn ease 4s;
    -moz-animation: fadeIn ease 4s;
    -o-animation: fadeIn ease 4s;
    -ms-animation: fadeIn ease 4s;
}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}}

@-moz-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}}
@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% { opacity: 1;}}
@-o-keyframes fadeIn {
    0% {opacity: 0;}
    100% { opacity: 1;}}
@-ms-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}}



    /*#region root variables*/
    /* Colors from http://rgb.to/170,207,55 */
    :root {
        --memo-blue: #466d99;
        --memo-light-blue: #e3eaf1;
        --memo-highlight-green: #aacf37;
        --memo-highlight-green-transparent: rgba(170, 207, 55, 0.9);
        --memo-menu-green: #5cb85c;
        --memo-off-black: #444444;
    }
    /*#endregion*/
    /*#region MEMO Default Colours*/
    .memo-green {
        color: #aacf37;
    }

    .memo-blue {
        color: #466d99;
    }

    .bg-memo-blue {
        /*background-color: #466d99;*/
        /*bbackground-image: linear-gradient(120deg, #466d99, #5482b5);*/
        background-image: linear-gradient(120deg, #466d99, #3A287A);
    }


    .bg-purple {
        background-image: linear-gradient(120deg, #ab00e3, #580075);
    }


    .bg-memo-blue-light {
        background-image: linear-gradient(90deg, rgba(131,58,180,0.8) 0%, rgba(253,29,29,0.8) 50%, rgba(252,176,69,0.8) 100%);
    }

    .bg-memo-green-dark {
        background-color: #84be46;
    }

    .memo-off-black {
        color: var(--memo-off-black);
    }
    /*#endregion*/
    /*#region Custom Fonts*/
    @font-face {
        font-family: 'eurofurence regular';
        font-style: normal;
        font-weight: normal;
        src: local('eurofurence regular'), url('fonts/eurof55.woff') format('woff');
    }

    .memo-euro-font {
        font-family: "eurofurence regular";
        font-size: calc(30px + 3vw);
        text-shadow: 0 2px 2px rgba(0,0,0,0.3);
    }
    /*#endregion*/
    /*#region base DOM elements*/
    /* Sticky footer styles */
    html {
        position: relative;
        min-height: 100%;
    }

    body {
        margin-top: 0em; 
        margin-bottom: 4em; /* Margin bottom by footer height */
    }
    /*#endregion*/
    /*#region Navbar*/
    .navbar-brand {
        font-size: 2em;
        font-family: "eurofurence regular";
        text-shadow: 0 2px 2px rgba(0,0,0,0.3);
    }

    a.navbar-brand {
        white-space: normal;
        text-align: center;
        word-break: break-all;
    }
    /*#endregion*/
    /*#region Consent Cookie*/
    button.accept-policy {
        font-size: 1rem;
        line-height: inherit;
    }
    /*#endregion*/
    /*#region Footer*/
    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 60px; /* Set the fixed height of the footer here */
        line-height: 60px; /* Vertically center the text there */
        text-align: center;
    }
    /*#endregion*/


/* Overwriting some Pretty-Checkbox styles to allow for word wrapping */
.pretty {
    white-space: inherit !important;
    width: 100% !important;
}

    .pretty .state label {
        text-indent: 0 !important;
        padding-left: 1.2rem !important;
    }

        .pretty .state label:after,
        .pretty .state label:before {
            top: 0 !important;
        }

