/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #3086a1; /*#0366d6;*/
}

.btn-primary {
    color: #fff;
    background-color: #328da8; /*#1b6ec2;*/
    border-color: #1861ac;
}

    .btn-primary:hover {
        color: #fff;
        background-color: #4facc9; /*#286b80;*/
        border-color: #0062cc;
    }


.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}


/* ================================================= 
    CUSTOMS 
   ================================================= */
/* Allow line breaks in a string stop/enter show input a razor view. source: https://kaliko.com/blog/text-line-breaks-in-asp.net-mvc-razor-view
----------------------------------------------------------------------------
 Usage: <span class="line-breaks">@Model.Description</span> */
.line-breaks {
    white-space: pre-line;
}

/* Table - Rewrite for responsive 
----------------------------------------------------- */
.table-r {
    margin-bottom: 1rem;
    color: #212529;
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    vertical-align: middle;
}

/* Div - Roundedborders 
----------------------------------------------------- */
div.border-round-white {
    border: 1px solid lightgrey;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    /*margin-bottom: 25px;*/
   /* margin: 0px 25px 35px 25px;*/
    margin: 15px;
    box-shadow: inset 1px 1px 150px #6279ff,  
}


/* svg colors
----------------------------------------------------- */
.svg-color-red {
    color: #a13838;
}

.svg-color-green {
    color: #1a7d36;
}

.svg-color-orange {
    color: #ffad05;
}

.svg-color-blue {
    color: #206ba8;
}

.svg-color-purple {
    color: #a81e96;
}

/* Modal - windows popups
----------------------------------------------------- */
.modal-header-delete {
    /*background: linear-gradient(to bottom, #fa6e52 0%, #ff0000 90%,#ff9580 100%);*/
    /*background: linear-gradient(to bottom, #7a0006 0%, #a80008 10%, #c9000a 30%, #e0000b 45%, #e0000b 55%, #c9000a 70%,#a80008 90%, #7a0006 100%);*/
    /*background: linear-gradient(to bottom, #782929 0%, #a13838 10%, #c44545 30%, #e85151 45%, #e85151 55%, #c44545 70%,#a13838 90%, #782929 100%);*/
    background: linear-gradient(to bottom, #782929 0%, #a13838 10%, #c44545 50%, #e85151 100%);
    color: white;
    color: white;
}
/*
.modal-body {
    padding: 2px 16px;
}
*/

.modal-w80 {
    width: 80%;
}

/*.modal-footer-delete {
    background-color: #fa6e52;
    color: white;
}*/
/*Assuming you want an image in your modals body you can use
    Source: https://stackoverflow.com/questions/30575245/bootstrap-modal-image-background
*/

.modal-body {
    /*background-image: url(https://image.freepik.com/free-vector/sea-beach-with-palm-tree-leaves-background-summer_33099-1767.jpg);*/
    /*background-image: url(https://image.freepik.com/free-photo/sunset-aegean-sea-coast-ship-land-distance-water-greece_1268-16901.jpg);*/
}

.modal-content {
    /*background-image: url(https://image.freepik.com/free-vector/sea-beach-with-palm-tree-leaves-background-summer_33099-1767.jpg);*/
    /*background-image: linear-gradient(45deg, rgba( 145, 146, 122, 0.62), rgba( 217, 91, 132, 0.58)), url( 'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png');*/
    
}

/*Or if you want it behind your modal you can use*/
.modal-backdrop {
    /* background: linear-gradient(to bottom right, #36f5ff, #ff36a1);*/
    background: linear-gradient(to bottom right, #563001, #341800);
    /*background: url(/images/site/Events_Index.jpg)*/
}

.modal-border-inner {
    
    border-radius: 50%;
    background: linear-gradient(to bottom right, #ee2135, #6279ff);
    
    /*box-shadow: 0px 0px 30px -5px black;*/
}
.modal-body-border {
    border: 2px solid grey;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 25px;
    box-shadow: inset 1px 1px 150px #d7f5fa;
}

.modal-body-border-white {
    border: 2px solid grey;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 25px;
    box-shadow: inset 1px 1px 150px #ffffff;
}

.modal-body-border-red {
    border: 2px solid grey;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 25px;
    box-shadow: inset 1px 1px 150px #faf1d7;
}

/*#fad9d7
    green: #dbfad7
    blue: #d7e1fa
    purple: #e9d7fa

/* on-zoom images*/
/*.img-zoom {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.img-zoom:hover {
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}*/
/* form 
----------------------------------------------------- */
/*.custom-file-label {*/
/*    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;*/
/*margin-right: -15px;
    margin-left: -15px;
}*/
/* style all elements with a required attribute */
/* style all input elements with a required attribute */
/*input:required {
    box-shadow: 0.9px 0.9px 1px rgba(200, 0, 0, 0.85);
}*/
/**
 * style input elements that have a required
 * attribute and a focus state
 */
/*    input:required:focus {
        border: 1px solid red;
        outline: none;
    }*/
/**
 * style input elements that have a required
 * attribute and a hover state
 */
/*    input:required:hover {
        opacity: 1;
    }*/
/*.required label {
    font-weight: bold;
}*/
.required label:after {
    color: #e32;
    content: ' *';
    display: inline;
}

.background-test {
    /*background-color: #d6e6ff;*/
    background: linear-gradient(to bottom right, #f5f7fa, #c7e1ff);
}


/* Button input layout index Events - publish/unpublish */
/* https://stackoverflow.com/questions/40808493/how-to-add-a-svg-icon-within-an-input */
.label-with-icon {
    position: relative;
    background-color: lightcoral;
}

.label-with-icon > .icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    /*color: slategray;*/
    color: dimgray;
    
}

.label-with-icon > input {
    padding-left: calc(1em + 10px + 8px); /* icon width + icon padding-left + desired separation*/
    height: 2em;
}
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
}

/*headings*/
.fs-title {
    font-size: 15px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
}

.fs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}


#form {
    text-align: center;
    position: relative;
    margin-top: 20px
}

#form, form-group {
    margin: 0px 15px 0px 15px;
}
#form .form-text {
    font-size: small;
}
/*#form, label-caps {
    font-variant:small-caps;
    font-size:medium;
}*/

#form fieldset {
    background: white;
    border: 0 none;
    /*border-radius: 0.5rem;*/
    border-radius: 3px;
    box-sizing: border-box;
    box-shadow: 0 0 15px 1px rgba(74, 100, 107, 0.4);
    /*box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);*/
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
    position: relative
}

.fs-title {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    color: #779096;
    margin-top: 15px;
    margin-bottom: 10px;
}

.fs-subtitle {
    font-weight: normal;
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

.finish {
    text-align: center
}

#form fieldset:not(:first-of-type) {
    display: none
}

#form .previous-step, .next-step {
    width: 150px;   /*button width*/
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 5px 15px 5px 0px;
    float: right
}

.form, .previous-step { /* button previous step*/
    background: #616161;
}

.form, .next-step { /* button previous step*/
    /*background: #2F8D46;*/ /*green*/
    background: #328da8;
}

#form .previous-step:hover,
#form .previous-step:focus {
    background-color: #474747
}

#form .next-step:hover,
#form .next-step:focus {
   /* box-shadow: 0 0 20px #39b858;*/  /*green*/
    box-shadow: 0 0 20px #46bfe3;
    /*background-color: #39b858*/
}

.text {
    color: #2F8D46;
    font-weight: normal
}

/* progress bar
-----------------------------------------------
*/

#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey;
}

    #progressbar .active {
        /*text steps*/
        color: #328da8
    }

    #progressbar li {
        list-style-type: none;
        font-size: 16px;  /*text underneath bullets*/
        width: 20%;
        float: left;
        position: relative;
        font-weight: 400
    }

    #progressbar #step1:before {
        content: "1"
    }

    #progressbar #step2:before {
        content: "2"
    }

    #progressbar #step3:before {
        content: "3"
    }

    #progressbar #step4:before {
        content: "4"
    }

    #progressbar #step5:before {
        content: "5"
    }

    #progressbar #step6:before {
        content: "6"
    }

    /*bullets*/
    #progressbar li:before {
        width: 30px;            /*width of bullet*/
        height: 30px;           /*height of bullet*/
        line-height: 25px;      /*heigth of text in bullet*/
        display: block;
        font-size: 20px;
        color: #ffffff;
        background: lightgrey;
        border-radius: 50%;
        margin: 0 auto 5px auto;
        padding: 2px
    }

    #progressbar li:after {
        content: '';
        width: 100%;
        height: 2px;
        background: lightgrey;
        position: absolute;
        left: 0;
        top: 5px;          /* top of bullet process-line*/
        z-index: -1
    }

    #progressbar li.active:before,
    #progressbar li.active:after {
        /*color rounded steps and bullet process-line when active*/
        background: #328da8
    }

.progress {
    height: 5px
}

.progress-bar {
    /*color of the line progress bar*/
    background-color: #328da8
}


/* Notification Button 
 ------------------------ */
.notification {
    /*background-color: #555;*/
    background-color: #328da8;
    border-color: #1861ac;
    color: white;
    text-decoration: none;
    padding: 6px 20px;
    position: relative;
    display: inline-block;
    border-radius: 2px;
   /* height: 35px;*/
}

.notification:hover {
    color: #fff;
    background-color: #4facc9;
    border-color: #0062cc;
}


.notification .badge {
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 5px 10px;
    border-radius: 50%;
    background: #26677a;
    color: white;
}

/*
    Image styles
    -----------------------------------------------------
*/
/*.image-blurred-edge {*/
/*    background-image: url('http://lorempixel.com/200/200/city/9');
    width: 200px;
    height: 200px;*/
    /* you need to match the shadow color to your background or image border for the desired effect*/
    /*box-shadow: 0 0 8px 8px white inset;
}*/