/* CSS for a button with only text and a border. Usually used for links */
.outline_button {
    border-radius: 5px;
    padding: 12px 24px;
    font-weight: bold;
}

.outline_button.transparent {
    background-color: transparent;
    transition: 0.3s ease-in;
    cursor: pointer;
    display: inline-block;
    text-transform: uppercase;
}

.outline_button.black_theme {
    border: 1px solid #404040;
    color: #404040 !important;
}

.outline_button.black_theme:hover {
    color: white !important;
    background-color: #404040;
}

.outline_button.white_theme {
    border: 1px solid white;
	color: white !important;
}

.outline_button.white_theme:hover {
    color: #404040 !important;
	background-color: white;
}

a.outline_button {
    text-decoration: none;
}

/* Aligns icon and text for buttons with an icon inside */
.button_with_icon > * {
    vertical-align: middle;
}

.button_with_icon > i {
    font-size: 18px;
}

/* Attach to ul or ol tag to remove bullets and padding/margin */
.custom_list_style {
    list-style: none;
    padding-left: 0px;
    margin: 0;
}

.text_align_right {
    text-align: right;
}

/* If attached to element in flex container, then it will grow to fill remaining space */
.flex_spacer {
    flex-grow: 1;
}

.flex_column {
	display: flex;
	flex-direction: column;
}

/* Can be attached to elements that contain text to make it display an ellispis if
the text is to long for the container, instead of wrapping it on a new line */
.ellipsis_overflow {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Style to be used on most links in site */
a.site_link {
    text-decoration: none;   
}

a.site_link, a.site_link:visited {
    color: #007eff;
}
            
/* Overrides color of JQuery's default faded out overlay when displaying dialogs */
.ui-widget-overlay {
    background-color: black;   
}

/* Button used for main actions, such as submitting form */
.app_main_action_button {
    background-color: var(--app-theme-color);
    color: white;
    outline: 0;
    border: 0;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 30px;
    cursor: pointer;
}

.app_secondary_action_button {
    outline: 0;
    border: 0;
    border-radius: 5px;
    font-size: 16px;
    padding: 10px 30px;
    cursor: pointer;
    background-color: #DDDDDD;
}

.logo_background {
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
            
/* Hides lazy load images until they are loading instead of displaying alt text */            
img.lazyload:not([src]) {
    visibility: hidden; /* or opacity: 0.001; but never use display: none */
}

/* On Desktop screen */
@media screen and (min-width: 1024px) {
    /* Used to display content in two columns within one row, useful for forms */
    .two_column_row {
        display: flex;
    }
    
    .two_column_row > * {
        width: 50%;
    }
    
    .two_column_row > *:first-child {
        padding-right: 50px;
    }
    
    .two_column_row > *:nth-child(2) {
        padding-left: 50px;
    }
    
    .half_row {
        width: 50%;
        padding-right: 50px;
    }
}