/* ********************************************
*        COMMON ELEMENTS CLASSES             *
******************************************** */

.select2 {
    width: 100% !important;
}
select.tags-select {
    border: none;
    border-bottom: 1px solid lightgrey;
}
.select2-container--default .select2-selection--single {
    border: none;
    border-bottom: 1px solid lightgrey;
    background: inherit;
}
.select2-container--default .select2-results__group {
    font-weight: 600;
    color: black;
    font-size: 1.2em;
}
.lead {
	font-size: 1.2em;
	font-weight: 400;
}
.xlead {
	font-size: 1.4em;
	font-weight: 400;
}
.xxlead {
	font-size: 2em;
	font-weight: 400;
}
.lead-input{
    font-weight: 600;
    font-size: 1.4em;
    padding: 25px 0px;
}
.jumbotron { background: white; }

/* Misc Utilities */
.center-div { margin: 0px auto; }
.center-element { margin:0px auto; }

a.disabled,
.disabled { color:lightgrey; }

a.disabled:hover,
.disabled:hover { color:lightgrey; }

.single-line {
    white-space: nowrap;
    overflow: hidden;
    display: block;
    text-overflow: hidden;
}
.user-select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*************************
*           FONT         *
*************************/

/*************************
*      FONT SIZES        *
*************************/

.large { font-size: 1.2em !important; }
.xlarge { font-size: 1.3em !important; }
.xxlarge { font-size: 1.5em !important; }
.xxxlarge { font-size: 1.8em !important; }
.xxxxlarge { font-size: 2em !important; }
.xxxxxlarge { font-size: 3em !important; } 
.xxxxxxlarge { font-size: 5em !important; }

.medium { font-size: 1em; }

.small { font-size: 0.95em; }
.msmall { font-size: 0.85em; }
.xsmall { font-size: 0.75em; }
.xmsmall { font-size: 0.60em; }
.xxsmall { font-size: 0.4em; }
.xxxsmall { font-size: 0.25em; }

/*********************************************
*      FONTS WEIGHTS & STYLES                *
******************************************** */

strong,bold,.bold { font-weight: 400; }
.extra-extra-bold {font-weight: 700}
.extra-bold { font-weight: 600 !important; }
.xbold {font-weight: 500}
.light { font-weight: 400; }
.xlight { font-weight: 200; }
.italics { font-style: italic; }

/*********************************************
*           TEXT TRANSFORM CLASSES           *
******************************************** */

.uppercase { text-transform: uppercase; }
.titlecase { text-transform: capitalize; }
.lowercase { text-transform: lowercase; }
.transform-none { text-transform: none; }

/*********************************************
*           LINE HEIGHT CLASSES           *
******************************************** */

.small-line-height { line-height: 0.8; }
.med-line-height { line-height: 1; }
.xmed-line-height { line-height: 1.5; }
.large-line-height { line-height: 2; }
.xlarge-line-height { line-height: 2.5; }
.xxlarge-line-height { line-height: 35px; } /* Used for mdl menu items */
.xxxlarge-line-height { line-height: 40px; }

/*********************************************
*           LAYOUT AND SPACING               *
******************************************** */

/*********************************************
*                   PADDING                  *
******************************************** */

.no-padding { padding:0px !important; }
.xsmall-padding { padding:2px; }
.small-padding { padding:5px; }
.msmall-padding { padding:7px; }
.med-padding { padding:10px !important; }
.xmed-padding { padding: 15px; }
.large-padding { padding:20px !important; }
.xlarge-padding { padding:50px; }

.no-padding-top { padding-top: 0px !important; }
.no-padding-bottom { padding-bottom: 0px !important; }
.no-padding-left { padding-left: 0px !important; }
.no-padding-right { padding-right: 0px !important; }

.xsmall-padding-right { padding-right: 2px; }
.xsmall-padding-left { padding-left: 2px; }
.xsmall-padding-top { padding-top: 2px !important; }
.xsmall-padding-bottom { padding-bottom: 2px !important; }

.small-padding-right { padding-right: 5px; }
.small-padding-left { padding-left: 5px !important; }
.small-padding-top { padding-top: 5px !important; }
.small-padding-bottom { padding-bottom: 5px !important; }

.msmall-padding-right { padding-right: 7px; }
.msmall-padding-left { padding-left: 7px; }
.msmall-padding-top { padding-top: 7px; }
.msmall-padding-bottom { padding-bottom: 7px; }

.med-padding-right { padding-right: 10px; }
.med-padding-left { padding-left: 10px; }
.med-padding-top { padding-top: 10px !important; }
.med-padding-bottom { padding-bottom: 10px !important; }

.xmed-padding-right { padding-right: 15px !important; }
.xmed-padding-left { padding-left: 15px !important; }
.xmed-padding-top { padding-top: 15px !important; }
.xmed-padding-bottom { padding-bottom: 15px !important; }

.large-padding-top { padding-top: 20px !important; }
.large-padding-left { padding-left: 20px !important; }
.large-padding-bottom { padding-bottom: 20px !important; }
.large-padding-right { padding-right: 20px !important; }
.large-padding-right-per { padding-right: 10% !important; }

.xlarge-padding-top { padding-top: 30px !important; }
.xlarge-padding-left { padding-left: 30px !important; }
.xlarge-padding-bottom { padding-bottom: 30px !important; }
.xlarge-padding-right { padding-right: 30px !important; }

.xxlarge-padding-top { padding-top: 50px !important; }
.xxlarge-padding-left { padding-left: 50px !important; }
.xxlarge-padding-bottom { padding-bottom: 50px !important; }
.xxlarge-padding-right { padding-right: 50px !important; }

/*********************************************
*                   MARGIN                  *
******************************************** */

.no-margin { margin:0px; }

.auto-margin-left { margin-left: auto; }
.auto-margin-right { margin-right: auto; }

.no-margin-top { margin-top: 0px; }
.no-margin-bottom { margin-bottom: 0px; }
.no-margin-left { margin-left: 0px; }
.no-margin-right { margin-right: 0px; }

.xsmall-margin { margin: 2px; }
.xsmall-margin-top { margin-top: 2px; }
.xsmall-margin-bottom { margin-bottom: 2px; }
.xsmall-margin-left { margin-left: 2px; }
.xsmall-margin-right { margin-right: 2px; }

.small-margin { margin:5px; }
.small-margin-left { margin-left:5px; }
.small-margin-right { margin-right:5px; }
.small-margin-top { margin-top:5px; }
.small-margin-bottom { margin-bottom:5px; }

.med-margin { margin:10px; }
.med-margin-bottom { margin-bottom:10px; }
.med-margin-top { margin-top: 10px; }
.med-margin-right { margin-right:10px; }
.med-margin-left { margin-left: 10px; }

.large-margin { margin:20px; }
.large-margin-bottom { margin-bottom:20px; }
.large-margin-top { margin-top: 20px; }
.large-margin-right { margin-right:20px; }
.large-margin-left { margin-left: 20px; }

.mlarge-margin { margin:40px; }
.mlarge-margin-top { margin-top:40px; }
.mlarge-margin-bottom { margin-bottom:40px; }
.mlarge-margin-right { margin-right:40px; }
.mlarge-margin-left { margin-left: 40px; }

.xlarge-margin { margin:50px; }
.xlarge-margin-top { margin-top:50px; }
.xlarge-margin-bottom { margin-bottom:50px; }
.xlarge-margin-right { margin-right:50px; }
.xlarge-margin-left { margin-left: 50px; }

/*********************************************
*              WIDTH CLASSES                 *
******************************************** */

.full-width { width: 100% !important; }
.width-auto { width: auto; }
.width-90 { width: 90%; }
.width-80 { width: 80%; }
.width-70 { width: 70%; }
.width-60 { width: 60%; }
.width-50 { width: 50% !important; }
.width-49 { width: 49%; }
.width-40 { width: 40% !important; }
.width-30 { width: 30% !important; }
.width-15 { width: 15% !important; }
.width-10 { width: 10% !important; }
.width-5 { width: 5%; }
.inherit-width { width: inherit; }
.width-fit-content { width: fit-content; }
.width-fill-available{ width: -webkit-fill-available; }

.width-max-content { width: max-content; }
.width-1px { width: 1px; }
.width-2px { width: 2px; }
.width-5px  { width: 5px }
.width-10px { width: 10px }
.width-15px { width: 15px }
.width-20px { width: 20px }
.width-25px { width: 25px; }
.width-30px { width: 30px }
.width-35px { width: 35px }
.width-40px { width: 40px; }
.width-150px { width: 150px; }
.width-190px { width: 190px; }
.width-450px { width: 450px }

.max-width-90vw { max-width: 90vw; }
.max-width-90 { max-width: 90%; }
.max-width-95 { max-width: 95%; }
.max-width-100 { max-width: 100%; }
.max-width-100px { max-width: 100px; }
.max-width-165px { max-width: 165px; }
.max-width-200px { max-width: 200px; }
.max-width-250px { max-width: 250px; }
.max-width-380px { max-width: 380px; }
.max-width-420px { max-width: 420px; }
.max-width-460px { max-width: 460px; }
.max-width-750px { max-width: 750px; }

.max-width-fit { max-width: fit-content; }

.min-width-0 { min-width: 0; }
.min-width-100 { min-width: 100%; }
.min-width-160px { min-width: 160px; }
.min-width-170px { min-width: 170px; }
.min-width-250px { min-width: 250px; }
.min-width-40px { min-width: 40px; }
.min-width-360px { min-width: 360px; }

/*********************************************
*              HEIGHT CLASSES                *
******************************************** */

.full-height { height: 100%; }
.full-height-vh { height: 100vh!important; }

.height-auto { height: auto; }
.height-5px  { height: 5px }
.height-10px { height: 10px }
.height-15px { height: 15px }
.height-20px { height: 20px }
.height-25px { height: 25px; }
.height-30px { height: 30px }
.height-35px { height: 35px }
.height-40px { height: 40px }
.height-50px { height: 50px; }
.height-80px { height: 85px }
.height-300px { height: 300px }

.height-35vh { height: 35vh; }

.min-height-50vh { min-height: 50vh; }
.min-height-60vh { min-height: 60vh; }
.min-height-75vh { min-height: 75vh; }
.min-height-100vh { min-height: 100vh; }
.min-height-auto { min-height: auto; }
.min-height-unset { min-height: unset !important; }
.min-height-100px { min-height: 100px; }
.min-height-200px { min-height: 200px; }
.min-height-300px { min-height: 300px; }
.min-height-400px { min-height: 400px; }
.min-height-500px { min-height: 500px; }
.min-height-600px { min-height: 600px; }

.max-height-auto { max-height: auto; }
.max-height-unset { min-height: unset; }
.max-height-20px { max-height: 20px; }
.max-height-100px { max-height: 100px; }
.max-height-125px { max-height: 125px;}
.max-height-200px { max-height: 200px; }
.max-height-300px { max-height: 300px; }
.max-height-400px { max-height: 400px; }
.max-height-450px { max-height: 450px; }
.max-height-500px { max-height: 500px; }
.max-height-600px { max-height: 600px; }

/*********************************************
*              DISPLAY CLASSES                *
******************************************** */

.inline-block { display: inline-block; }
.inline-block1 { display: inline-block; }
.flex-block {display: flex;}
.flex-inline {display: inline-flex;}
.grid-block {display: grid;}
.contents-block {display: contents;}
.item-center{align-items: center;}
.justify-center{justify-content: center;}
.justify-between{justify-content: space-between;}
.flex-column {flex-direction: column;}
.justify-end { justify-content: end; }
.flex-wrap-wrap { flex-wrap: wrap; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-auto { flex: auto; }

.hide-block { display:none; }
.show-block { display:block; }

/*********************************************
*              POSITION CLASSES              *
******************************************** */

.fixed-bottom { position: fixed; bottom: 0; }
.relative{ position: relative; }
.sticky-top { position: sticky; left: 0; }
.position-relative { position: relative; }
.position-absolute { position: absolute }
.position-sticky { position: sticky; }

/*********************************************
*              FLEX GAP CLASSES              *
******************************************** */

.small-gap{ gap: 5px; }
.med-gap{ gap: 10px; }
.large-gap{ gap: 20px; }

/*********************************************
*            ALIGNMENT CLASSES               *
******************************************** */

.center { text-align:center !important ; }
.center td { text-align: center !important; }
.right { text-align:right; }
.left { text-align: left; }

.align-middle { vertical-align:middle !important; }
.align-top { vertical-align:top !important; }
.align-bottom { vertical-align:bottom !important; }
.align-bottom2 { vertical-align:-moz-middle-with-baseline; }
.vertical-middle { vertical-align: middle; }

.align-content-center { align-content: center; }
.align-content-left { align-content: left; }
.align-content-right { align-content: right; }

/* Clear */
.clear { clear: both; }

.no-float { float: none; }

/*********************************************
*          TRANSLATE & EFFECTS               *
******************************************** */

.x-translate-0 {transform: translateX(0) !important;}

/*********************************************
*          BORDERS & EFFECTS               *
******************************************** */

/*********************************************
*              BORDER CLASSES                *
******************************************** */

.border-all-blue { border: 1px solid var(--border-primary) !important }
.thin-border { border: 0.5px solid  var(--border-tertiary); }
.border-all-primary { border: 2px dashed var(--color-primary);}
.border-all-white { border: 2px dashed var(--bg-white);}
.border-all-section { border: 1px solid var(--border-section); }
.border-top-blue { border:none; border-top: 1px solid var(--border-primary) !important;}
.border-bottom-primary-dashed { border: 1px dashed var(--color-primary); }
.border-all-primary:hover { border: 2px dashed var(--color-primary);}
.border-all-primary-solid { border: 1px solid var(--color-primary) !important; }
.no-border { border: 0px !important; }
.border-none { border: none;}


/*********************************************
*          BORDER RADIUS CLASSES             *
******************************************** */

.rounded-border { border-radius:  50%; }
.xsmall-border-radius { border-radius: 3px !important; }
.xmed-border-radius { border-radius: 8px !important; }
.small-border-radius { border-radius: 5px !important; }
.med-border-radius { border-radius: 10px !important; }
.large-border-radius { border-radius: 20px; }
.no-border-radius { border-radius: 0; }

/*********************************************
*              BOX SHADOW CLASSES            *
******************************************** */

.box-shadow { box-shadow: 0px 0px 5px 0px #3232691A; }
.no-box-shadow { box-shadow: none; }

/*********************************************
*              OPACITY CLASSES                *
******************************************** */

.full-opacity { opacity: 1; }
.low-opacity { opacity: 0.8; }
.med-opacity { opacity: 0.5; }
.high-opacity { opacity: 0.3; }
.no-opacity { opacity: 0.0; }

/*********************************************
*                ZOOM CLASSES                *
******************************************** */

.zoom-97 { zoom: 97% }
.zoom-95 { zoom: 95% }
.zoom-90 { zoom: 90% }
.zoom-85 { zoom: 85% }
.zoom-80 { zoom: 80% }
.zoom-75 { zoom: 75% }
.zoom-70 { zoom: 70% }

/*********************************************
*             OVERFLOW CLASSES               *
******************************************** */

.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

.overflow-visible { overflow: visible !important; }
.overflow-x-visible { overflow-x: visible !important; }
.overflow-y-visible { overflow-y: visible !important; }

.overflow-hidden { overflow: hidden !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-y-hidden { overflow-y: hidden !important; }

.overflow-scroll { overflow: scroll !important; }
.overflow-x-scroll { overflow-x: scroll !important; }
.overflow-y-scroll { overflow-y: scroll !important; }

.overflow-ellipsis { text-overflow: ellipsis; }
.overflow-wrap-anywhere { overflow-wrap: anywhere; }

/*********************************************
*    CURSOR POINTER & OUTLINE CLASSES        *
******************************************** */

.clickable-pointer { cursor: pointer; }
.grab-pointer { cursor: grab; }
.default-pointer { cursor: default; }
.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }

.outline-none { outline: none !important; }

/*********************************************
*                Z-INDEX CLASSES             *
******************************************** */

.z-index-1 { z-index: 1; }
.z-index-3 { z-index: 3; }
.z-index-5 { z-index: 5; }
.z-index-100 { z-index: 100; }
.z-index-1200 { z-index: 1200; }

/*********************************************
*              POSITION CLASSES              *
******************************************** */

.top-25 { top: 25%; }
.right-25 { right: 25%; }
.bottom-25 {bottom: 25%;}
.left-25 { left: 25%; }

.top-50 { top: 50%; }
.right-50 { right: 50%; }
.bottom-50 {bottom: 50%;}
.left-50 { left: 50%; }

.top-75 { top: 75%; }
.right-75 { right: 75%; }
.bottom-75 {bottom: 75%;}
.left-75 { left: 75%; }

.top-100 { top: 100%; }
.right-100 { right: 100%; }
.bottom-100 {bottom: 100%;}
.left-100 { left: 100%; }

.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 {bottom: 0;}
.left-0 { left: 0; }

.top-5px { top: 5px; }
.bottom-5px { bottom: 5px; }
.left-5px { left: 5px; }
.right-5px { right: 5px; }

.top-10px { top: 10px; }
.bottom-10px { bottom: 10px; }
.left-10px { left: 10px; }
.right-10px { right: 10px; }

.top-15px { top: 15px; }
.bottom-15px { bottom: 15px; }
.left-15px { left: 15px; }
.right-15px { right: 15px; }

.top-20px { top: 20px; }
.right-20px { right: 20px; }
.bottom-20px {bottom: 20px;}
.left-20px { left: 20px; }

.top-40px { top: 40px; }
.right-40px { right: 40px; }
.bottom-40px {bottom: 40px;}
.left-40px { left: 40px; }

.top-50px { top: 50px; }
.right-50px { right: 50px; }
.bottom-50px {bottom: 50px;}
.left-50px { left: 50px; }

/*********************************************
*                LIST CLASSES                *
******************************************** */

.ul-list-type-none { list-style-type: none; }
.filter-type { list-style-type: none; } 

ol.no-bullets,
ul.no-bullets {
	list-style: none;
}

/*********************************************
*                EFFECTS CLASSES              *
******************************************** */

.fade-in-div {
	opacity: 1;
    -moz-transition: all 1s ease-in;  /* FF4+ */
    -o-transition: all 1s ease-in;  /* Opera 10.5+ */
    -webkit-transition: all 1s ease-in;  /* Saf3.2+, Chrome */
    -ms-transition: all 1s ease-in;  /* IE10? */
    transition: all 1s ease-in;
}
.fade-out-div {
	opacity: 0.1;
    -moz-transition: all 1s ease-out;  /* FF4+ */
    -o-transition: all 1s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 1s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 1s ease-out;  /* IE10? */
    transition: all 1s ease-out;
}
.greyscale-div { filter: grayscale(100); }

/*********************************************
*                FORM CLASSES                *
******************************************** */

.form-primary-input {
	font-size: 22px;
    padding: 8px;
    padding-left: 0;
    margin-top: 4px;
    font-weight: bold;
    width: 400px;
}

.action-bar {
    /*background: #16a085;*/
    width: 100%;
    z-index: 1000;
    left: 0;
}

.input-group-addon-prefix {
	border: none;
	color: darkgray;
	border-radius: 20px 0px 0px 20px;
}

.input-group-addon-suffix {
	border: none;
	color: darkgray;
	border-radius: 0px 20px 20px 0px;
}

/*********************************************
*                BOX CLASSES                 *
******************************************** */

.box {
	background: white;
	color: black;
	padding:15px;
	border: 1px solid grey;
}
.box-light {
	background: #f5f5f5;
	color: black;
	padding:15px;
}
.box-inverse {
	background: black;
	color: white;
	padding:15px;
}
.box-highlight {
	background: lightyellow;
	color: black;
	padding:15px;
}
.box-add {
	border: 5px dashed lightgray;
	opacity: 0.5;
}

/*********************************************
*             COMMON CLASSES                 *
******************************************** */

.hint {
	font-size: 12px;
	color: lightgrey;
}
.dark-hint {
	font-size: 12px;
	color: grey;
	opacity: 0.6;
}
.char-circle {
    border-radius: 50%;
    width: 50px;
    font-size: 20px;
    background: #3498db;
    border: 2px solid #3498db;
    color: white;
    margin: 0px auto;
    font-weight: bold;
}
.char-circle span {
    text-align: center;
    line-height: 50px;
    display: block;
}

.num-circle {
    background: #00cec9;
    color: white;
    padding: 4px 25px;
    border-radius: 50px;
}
.large-tab {
    font-size: 1.2em;
    text-transform: uppercase;
    padding: 15px 25px 15px 25px;
}

/* STEPS LABEL */
.phase-step {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    padding: 5px 15px;
    text-align: center;

}
.project-code {
    width: 100px;
    text-transform: uppercase;
    color: #3498db;
}

/*********************************************
*             GENERAL CLASSES                *
******************************************** */

.center-content { min-height:650px; }

#main-content {
	opacity: 1;
}
#main-content:hover {
	opacity: 1;
}
body {
    background: var(--bg-secondary);
    font-family: 'Proxima', sans-serif;
    font-size: 12px;
    color: #34495e;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Proxima', sans-serif;
	font-weight: 400;
	letter-spacing: 0em;
}
h1 {
	font-size: 2em;
}
h2 {
    font-size: 1.5em;
}
.font-awesome {
	font-family: var(--font-awesome-pro);
}
h5 {
	margin: 0px 0px 10px 0px;
}
h5 a:hover {
	opacity: 0.7;
	text-decoration: none;
}
a {
	text-decoration: none !important;
}
a:hover {
	opacity: 0.7;
	text-decoration: none !important;
}