/*
	CSS styles and variables that apply to the ENTIRE web portal
*/

/**********************************************************
*   - VARIABLES Ex. color: var(--purple); 
***********************************************************/

:root {
	/* Colors */
	--white: #ffffff;
	--offwhite: #f5f6f6;
	--lightgray: #e4ebee;
	--mediumgray: #d9dcde;
	--neutralgray: #adb0b1;
	--gray: #5B5B5B;
	--darkgray: #333333;
	--black: #232323;
	--mediumgreen: #2c856b;
	--lightpurple: #9073F8;
	--purple: #6138f5;
	--darkpurple: #360b6a;
	--blue: #007cf0;
	--mediumblue: #252d44;
	--darkblue: #181d29;
	--red: #F15060;
	--orange: #fa9f47;
	/* Washed Out Colors */
	--washed-red: #f1506038;
	--washed-mediumgreen: #2c856b38;
	--washed-orange: #fa9f4738;
	--washed-blue: #007cf038;
	/* Dark Mode */
	--darkmode-white: #1c1c1e;
	--darkmode-lightgray: #232331;
	/* Shadows */
	--boxshadow: 0 0 10px 0 rgb(35 35 35 / 10%);
}


/**********************************************************
*   - GLOBAL STYLES - 
***********************************************************/

body {
	padding-right: 0 !important;
	font-family: 'Circular' !important;
	font-weight: 300 !important;
}

label {
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 0;
}

a:hover,a:focus {
	text-decoration: none;
	outline: none !important;
	box-shadow: none !important;
	cursor: pointer;
}

.panel {
	box-shadow: var(--boxshadow);
}

.panel-default {
	border-color: transparent;
}

.panel-heading {
	border-radius: 6px;
}

.form-control {
	border-radius: 6px !important;
}

.popover {
	/* Overwriting the bootstrap styling */ 
	font-family: 'Circular' !important;
}

/**********************************************************
*   - SCROLLBAR - 
***********************************************************/

/* width */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
	background: rgba(0,0,0,.05);
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: rgba(135, 144, 151, .3);
	border-radius: 30px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: rgba(102, 111, 117, .4);
}


/**********************************************************
*   - LOADING ANIMATION - 
***********************************************************/
#ModalLoading {
	top: -30px;
	padding-left:0px !important;
	padding-right:0px !important;
	height: 40px;
	right:-10px;
}

#ModalLoading .modal-dialog {
	width: 100%;
}

#ModalLoading .modal-content {
	height: 100px;
	background-color: transparent;
	box-shadow: none;
	border:none;
}

#ModalLoading .modal-body {
	padding:0px;
	width:100%;
}

.loader {
	width: 100%;
	height: 4px;
	border-radius: 0px;
	background-color: transparent;
	position: relative;
}
   
.loader::before {
	content: "";
	position: absolute;
	background: var(--purple);
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	border-radius: 30px;
	animation: moving 1.5s ease-in-out infinite;
}
   
@keyframes moving {
	50% {
	 	width: 100%;
	}
   
	100% {
	 	width: 0;
	 	right: 0;
	 	left: unset;
	}
}

@media (max-width: 768px) {
	#ModalLoading {
		top: 0px;
	}

	#ModalLoading .modal-dialog {
		margin: 0px;
	}
}


/**********************************************************
*   - CARDS - 
***********************************************************/

.card {
	width: 100%;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    position: relative;
    box-shadow: 0 1px 3px 0 rgba(35,35,35,0.1), 0 1px 2px -1px rgba(35,35,35,0.1);
    transition: .25s;
	padding: 15px;
}

/* Override for above styling for the datatables loading card */
.dataTables_processing.card {
	box-shadow: none !important;
}


/**********************************************************
*   - ALIGNMENT - 
***********************************************************/

@media (min-width: 992px) {
	.no-dropdown-label {
		margin-top: 18.56px;
	}
}

.col-gaps {
	margin: 5px 0px;
}

.col30em {
	max-width: 30em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.col25em {
	max-width: 25em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.col20em {
	max-width: 20em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.col15em {
	max-width: 15em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.col10em {
	max-width: 10em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.col30em {
    max-width:30em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.col25em {
    max-width: 25em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.col20em {
    max-width: 20em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.col15em {
    max-width: 15em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.col10em {
    max-width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.truncate270 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 270px;
}

.truncate250 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 250px;
}

.truncate200 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}

.truncate150 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 150px;
	vertical-align: middle !important;
}

.truncate120 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 120px;
	vertical-align: middle !important;
}

.truncate100 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100px;
}

.truncate75 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 75px;
}

.break200 {
	vertical-align: middle;
	word-break: break-all;
	max-width: 200px;
}