﻿/* 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. */

.btn-open {
    
    background-color: #cb6b2b;
    display:inline-block;
    width:80px;
    color:#FFFFFF;

}

.bootbox-close-button {

    position:absolute;
    margin-right:10px;
    right:0px;

}

.ck-editor {
    max-width: 600px;
}

.ck-editor__editable:not(.ck-editor__nested-editable) {
    min-height: 400px;
    max-width: 600px;
}

body {
    padding-top: 65px;
    padding-bottom: 20px;
}

.nav-link {

    color:#000!important;

}

label {

    font-size:0.9em;
    margin-bottom:0.1em!important;

}

fieldset {
    border-radius: 0.2em;
    background: #fafafa;
    margin: 20px;
    padding: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    position: relative;
    border: 2px rgba(0,0,0,.3) solid;
}

legend {
    max-width: 200px;
    color: #FFF;
    padding-top: 8px;
    border-radius: 0.2em;
    padding-left: 8px;
}

.line-clamp-1 {

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bot box ie fix */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .modal-open .modal {
        display: block;
    }
}

/* Splash screen */

.splashBackground {
    background-color: #EFEFEF;
    opacity: 0.7;
}

.file-browser-holder {
    
    height: 350px;
    
}

.file-browser-holder div.fileToAttach {
    
    height: 100px;
    width:100px;
    font-size:1em;
    display:inline-block;
    text-align:center;
    overflow:hidden;

}

.iframe-container {


    border: 2px solid #eaeaea;
   


}


.timePicker {
    display: block;
    padding: 1em;
    border: 2px #d8d8d8 solid;
    font-size: 2em;
    border-radius: 0.5em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 0.1em;
    width: 80%;
    text-align: center;
}

   

.timePickerHolder {
    
    width:80%;
    max-width:360px;
    display: block;
    border: 1px #d8d8d8 solid;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.timePickerHeader {
    padding: 1.8em 0;
    background-color: #fafafa;
    border-bottom: 2px #d8d8d8 solid;
    text-align: center;
    text-transform: uppercase;
    font-size: 130%;
    font-weight: 600;
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.image-browser-holder {
    height: 150px;
}
.image-browser-holder img,.file-browser-holder img {
    
    height:50px;
    width:auto;
    padding:3px;
    cursor:pointer;
    
}

    .splashScreen {
        width: 350px;
        height: 140px;
        border-color: #000000;
        border-width: 2px 2px 2px 2px;
        border-style: solid;
        padding-top: 25px;
        padding-bottom: 15px;
        -webkit-radius: 7px;
        -moz-border: 7px;
        border-radius: 7px;
        background: #FFF;
        -webkit-box-shadow: 0px -1px 2px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px -1px 2px rgba(0,0,0,0.2);
        box-shadow: 0px -1px 2px rgba(0,0,0,0.2);
        background-image: url(/images/roundel-small.png);
        background-repeat: no-repeat;
        background-position: 50% 20%;
    }


.NHWApprovedIcon {

    width:20px;

}
.NHWMembershipsLineHeights {
    line-height: 2;
}

.file-upload input[type='file'] {
    display: none;
}

.previewImage {

    opacity:0.9;

}

.previewImageBackground {

   background-image:url(/images/preview.png);

}


/* Stripped divs */
.stripe {

    margin-left:0!important;

}
div.stripe:nth-child(even) {
    background-color: #dcdcdc;
    
   
}

div.stripe:nth-child(odd) {
    background-color: #eaeaea;
   
    
}

div.attachmentRow {

    color: #fff;
    padding:0.5em;
    padding-left:5px;
    padding-right:5px;
    width:260px;
    height:42px;
    border-radius:0.5em;
    font-size:0.8em;
    display:inline-block;
    margin-bottom:5px;
    margin-right:5px;


}

    div.attachmentRow div {
        overflow: hidden;
        max-width: 230px;
    }

    div.attachmentRow:nth-child(even) {
        background-color: #6794bf;
    }
div.attachmentRow:nth-child(odd) {
    background-color: #539ade;
}


.NHWJoinRow {
    margin-left: 0 !important;
}
div.NHWJoinRow {
   
    background-color: #ffe700;
}

.clickable {
    
    cursor: pointer;
    
}.clickableExtend {
    
    cursor: pointer;
    
}
/*.clickableExtend:hover {
        
    color: #17a2b8 !important;

}*/

#recipientList.clickableExtend:hover {

    color: #FFF !important;

}

.navbar-light .navbar-nav .nav-link {
    
    font-size: 0.8em;
}


div.prioritySelector p {
    
    width:96%;
    display: inline-block;
    height: 150px;
    color: #FFF;
    text-align: center;
    vertical-align: central;
    line-height: 150px;
    cursor: pointer;
    border-radius: 0.5em;
    opacity: 0.6;
    font-weight:bolder;

}

div.prioritySelector p:hover, div.prioritySelector p.selected {
    opacity: 1;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }

    .card-body {
       
        padding-left: .25rem;
        padding-right: .25rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
}


/** Message replies */

.MessageReply {

    padding:1em;
    border:2px solid rgba(0,0,0,0.2);
    border-radius:0.5em;
    margin:5px 0px 5px 0px;
    clear:both;
    
}

    .MessageReply.AdminReply {

        background-color:#d9f2c0;
    }
    .MessageReply.CoordinatorReply
    {
        background-color: #f7f183;
    }

    .MessageReply.UserReply {
        float:right;
        text-align:justify;
        background-color:#ddeaf7;

    }

        .MessageReply.UserReply .nameHolder, .MessageReply.UserReply .dateHolder {
            
            text-align: right;
           
        }



/*Ratings star */

.custom-emotion-style-MessageRelevance {
    width: 60px;
    height: auto;
    margin-left: 5px;
    margin-right: 5px;
}
.custom-emotion-style-MessageContent {
    width: 60px;
    height: auto;
    margin-left: 5px;
    margin-right: 5px;
}
.custom-emotion-style-MessageQuality {
    width: 60px;
    height: auto;
    margin-left:5px;
    margin-right:5px;
}

/* Select lists default */

/*select {
    -webkit-appearance: none;
    padding: 8px;
    padding-right:10px;
    border-radius: 0.2em;
    max-width: 320px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAh0lEQVQ4T93TMQrCUAzG8V9x8QziiYSuXdzFC7h4AcELOPQAdXYovZCHEATlgQV5GFTe1ozJlz/kS1IpjKqw3wQBVyy++JI0y1GTe7DCBbMAckeNIQKk/BanALBB+16LtnDELoMcsM/BESDlz2heDR3WePwKSLo5eoxz3z6NNcFD+vu3ij14Aqz/DxGbKB7CAAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center;
}*/

.codeInput {
    max-width: 3em;
    padding: 1em;
    text-align: center;
    font-size: 1em;
}

.codeInput.error {

    border:2px solid red;

}

input.errorBox {
    border: 2px solid red;
}



input.errorBox::-webkit-input-placeholder {
    color: #FF0000;
}

input.errorBox:-moz-placeholder {
    color: #FF0000;
}

input.errorBox::-moz-placeholder {
    color: #FF0000;
}

input.errorBox:-ms-input-placeholder {
    color: #FF0000;
}


.errorCheckbox {
    color: #FF0000;
}



.IpDescription {

    padding:1em !important;
    background-color:#eaeaea;
    border-radius:0.5em;
    margin:1em 0;

}

.profilePicture {

    display:block;
    margin-left:auto;
    margin-right:auto;

}

.scrollableForwardingDiv
{
    max-height: 200px;
    overflow-y: auto;
}

.bigButton {

    padding:2em;
    font-size:2em;
    width:200px;


}

.max-button-width {

    margin-top:1em;
    max-width:500px;
    margin-left:auto;
    margin-right:auto;
   

}



@media (max-width: 979px) {

    fieldset {
        -webkit-appearance: none;
        border-radius: 0.2em;
        background: #fafafa;
        margin: 10px 5px 10px 5px;
        padding: 15px;
        box-shadow: 0 0 10px rgba(0,0,0,.3);
        position: relative;
        border: 1px rgba(0,0,0,.3) solid;
    }

    legend {
        -webkit-appearance: none;
        max-width: 250px;
        color: #FFF;
        padding-top: 8px;
        padding-left: 18px;
        border-radius: 0.2em;
    }


    .login-body {
        padding-top: 10px !important;
    }

    body {

        padding-top: 100px;

    }

     h1 {

         font-size:1.8em;
    } 
     h2 {

         font-size:1.6em;
    }    
     h3 {

         font-size:1.4em;
    }  
     h5 {

         font-size:1.2em;
    }

    .codeInput {
        max-width: 35px;
        padding: 0.8em;
        text-align: center;
    }
    #map{

        max-height:200px;

    }

    

}

.multilineText {


    white-space:pre-line;


}


/* Cookie consent */
#cookieConsent {
    position: fixed;
    bottom: 10px;
    right: 10px;
    padding: 10px;
    margin: 10px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px 5px 10px rgb(0 0 0 / 40%);
    border: 1px solid #ccc;
    max-width: 300px;
    width: 100%;
    z-index: 99;
}


/* Rating Progress Bar */
.progress {
    width: 300px;
    height: 300px;
    background: none;
    position: relative;
}

.progress::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 35px solid #eee;
    position: absolute;
    top: 0;
    left: 0;
}

.progress > span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
}

.progress .progress-left {
    left: 0;
}

.progress .progress-bar {
    width: 100%;
    height: 100%;
    background: none;
    border-width: 35px;
    border-style: solid;
    position: absolute;
    top: 0;
}

.progress .progress-left .progress-bar {
    left: 100%;
    border-top-right-radius: 150px;
    border-bottom-right-radius: 150px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
}

.progress .progress-right {
    right: 0;
}

.progress .progress-right .progress-bar {
    left: -100%;
    border-top-left-radius: 150px;
    border-bottom-left-radius: 150px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
}

.progress .progress-value {
    position: absolute;
    top: 0;
    left: 0;
}

.border-20 {
    border-color: #780202!important;
}
.border-40 {
    border-color: #fc7d05 !important;
}
.border-60 {
    border-color: #e5ed00 !important;
}
.border-80 {
    border-color: #377a12 !important;
}
.border-100 {
    border-color: #43b307 !important;
}

/* Custom Font Awesome sizing based on screen size */
    @media screen and (max-width: 200px) {
        .fa-CustomSize {
            font-size: 1em;
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }
    @media screen and (min-width: 400px) {
        .fa-CustomSize {
            font-size: 2em;
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }
    @media screen and (min-width: 400px){
        .fa-CustomSize {
            font-size: 2.5em;
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }
    @media screen and (min-width: 500px) {
        .fa-CustomSize {
            font-size: 3em;
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }
