body {
    font-family: 'Poppins', sans-serif;
    color: #27333C !important;
    font-weight: 400;
}

.hide {
    display: none;
}

.smallnoteFromBootStrapWebPage{
    color: #777!important;
    font-size: .8125rem;
    text-align: left;
    line-height: 1.2;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

.reviewSchedule {
    font-size: 13px;
}

.profilePageUserStats .row>[class^=col-] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);

}

/*https://codepen.io/chrisdpratt/pen/IAymB
First saw this in the PayPal developer page
We first used this in the Payment dummy module in the
paperDe tails.html*/
.bs-callout {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}
.bs-callout h4 {
    margin-top: 0;
    margin-bottom: 5px;
}
.bs-callout p:last-child {
    margin-bottom: 0;
}
.bs-callout code {
    border-radius: 3px;
}
.bs-callout+.bs-callout {
    margin-top: -5px;
}
.bs-callout-default {
    border-left-color: #777;
}
.bs-callout-default h4 {
    color: #777;
}
.bs-callout-primary {
    border-left-color: #428bca;
}
.bs-callout-primary h4 {
    color: #428bca;
}
.bs-callout-success {
    border-left-color: #5cb85c;
}
.bs-callout-success h4 {
    color: #5cb85c;
}
.bs-callout-danger {
    border-left-color: #d9534f;
}
.bs-callout-danger h4 {
    color: #d9534f;
}
.bs-callout-warning {
    border-left-color: #f0ad4e;
}
.bs-callout-warning h4 {
    color: #f0ad4e;
}
.bs-callout-info {
    border-left-color: #5bc0de;
}
.bs-callout-info h4 {
    color: #5bc0de;
}

.explicit-info-box1{
    background-color: rgba(86,61,124,.15);
    color:#343a40;
    padding: 15px 15px 15px 15px;
    font-size:.8125rem;
    text-align:left;
    border-radius:4px;
}

/* 
    Used to create a dotted border under the paper title in the paperdetails.html and paper_overview_for_reviewer.html
*/
a.paper_title {
    text-decoration: none !important;
    border-bottom: dotted 1px rgb(50, 50, 59);
    color: #212529;
}

a {
    text-decoration: none !important;
}

/* Spinner while loading json from the web of science publons' api.
This spinner appears in the paperDetails page. 
Spinner functionality has been borrowed from the document
https://stackoverflow.com/questions/36496509/how-to-disable-a-page-on-ajax-request
How to disable a page on ajax request - Stack Overflow.pdf */
#loading-overlay {
    position: absolute;
    width: 100%;
    height:100%;
    left: 0;
    top: 0;
    display: none;
    align-items: center;
    background-color: #000;
    z-index: 999;
    opacity: 0.5;
}
.loading-icon{ position:absolute;border-top:2px solid #fff;border-right:2px solid #fff;border-bottom:2px solid #fff;border-left:2px solid #767676;border-radius:25px;width:25px;height:25px;margin:0 auto;position:absolute;left:50%;margin-left:-20px;top:50%;margin-top:-20px;z-index:4;-webkit-animation:spin 1s linear infinite;-moz-animation:spin 1s linear infinite;animation:spin 1s linear infinite;}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

/* 
    There are no build-in classes in Bootstrap 4 for border width or style.
    Reference: https://stackoverflow.com/questions/48506610/bootstrap-4-border-utilities
*/
.border-2 {
    border-width:2px !important;
}

.border-color-f2dfce{
    border-color: #f2dfce !important;
}

/* used in profile.html */
.bg-color-like-jumbotron{
    background-color: #e9ecef;
}

/* used in profile.html */
.bg-color-f2dfce{
    background-color: #fff1e5;
}

/* Used in the update.html. The element being handled is generated by django template and not hardcoded. The element in this case is the label of the upload profile pic field. */
#div_id_image label {
    font-size: 0.875rem;
    color: #4b4b4b;
    font-weight: 700
}

/* Used in the update.html. The element being handled is generated by django template and not hardcoded. The element in this case is the textbox associated with the 'Choose File' buttom. */
#div_id_image > div > .fileUpload {
    border-radius: .25rem;
}

.b-example-divider {
    flex-shrink: 0;
    width: 1.5rem;
    /* height: 100vh; */
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 0.5em 1.5em rgb(0 0 0 / 10%), inset 0 0.125em 0.5em rgb(0 0 0 / 15%);
}

main {
    display: flex;
    flex-wrap: nowrap;
    height: 100vh;
    height: -webkit-fill-available;
    /* max-height: 100vh; */
    overflow-x: auto;
    overflow-y: hidden;
}

textarea {
    width: 100%;
    /* height: 150px; */
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 12px;
    resize: none;
  }

.cursor_pointer{
    cursor: pointer;
}

/* 
    'switch-field' css classes belongs to the radio switch in the customize review page. 
    The user has the option to either display the reviews from the reviewers or the reviews
    from the templates.
*/
.switch-field {
	display: flex;
	margin-bottom: 10px;
	/* overflow: hidden; */
}

.switch-field input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.switch-field label {
	background-color: #e4e4e4;
	color: rgba(0, 0, 0, 0.6);
	font-size: 14px;
	line-height: 1;
	text-align: center;
	padding: 8px 16px;
	margin-right: -1px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
	transition: all 0.1s ease-in-out;
    font-weight: 200;
}

.switch-field label:hover {
	cursor: pointer;
}

.switch-field input:checked + label {
	background-color: #bde;
	box-shadow: none;
}

.switch-field label:first-of-type {
	border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
	border-radius: 0 4px 4px 0;
}
/* 'switch-field' END */

.square {
    height: 40px;
    width: 40px;
    background-color: #bbb;
    border-radius: 5%;
    display: inline-block;
  }


/* Bugzilla page */
.bugzilla-page-third-section {
    padding-top: 100px;
    padding-bottom: 100px;
}

.bugzilla-page-third-section .third-section-title {
    padding: 0px;
    color: #3A5F83;
    font-weight: 200;
    font-size: 30px;
    text-align: center;
}

.bugzilla-page-third-section .third-section-brief {
    font-size:16px;
    font-weight: 300;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
}