.header {
    background-color: rgb(215, 247, 162);
    padding: 5pt;
}

.header-flex-layout {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width:100%;
    height: 4vh;
    align-items: center;
    justify-content: space-between;
}

.logo {
    max-height: 3vh;
    vertical-align: middle;
    margin-left:5pt;
}

.header-text-logo {
    min-width: 10%;
    max-width: 30%;
    order: 0;
}

.href-no-underline {
    text-decoration: none;
    color:black;
    overflow-wrap:normal;
}

.modal-container-style {
    padding: 40px 44px 36px 40px;
    text-align:center;
    height:fit-content;
    flex-direction: column;
}

.modal-header {
    margin-top:8pt;
    color:brown;
    font-size:medium;
    font-style:inherit;
    font-weight: 500;
}

.modal-button {
    margin-bottom: 20pt;
}

.ico-padding-left {
    padding-left:6pt;
}

.register-form {
    display: flex;
    min-width: 80%;
    max-width: 100%;
    height:fit-content;
    margin: 0 auto;
    flex-direction: column;
    overflow-y:auto;
    overflow-x: auto;
}

.login-form {
    display: flex;
    min-width: 80%;
    max-width: 100%;
    height:fit-content;
    margin: 0 auto;
    flex-direction: column;
    overflow-x: auto;
}

.header-left-dropdown {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-right: 20px;
    order: 2;
}
.float-child {
    height: 3vh;
    padding-left: 10px;
} 

.select-half {
    width:50%
}

.horizontal-form {
    display: flex;
    align-items: center;
}

.grid-center {
    position: absolute;
    transform: translate(0, -50%);
    width: 100%;
    padding-left: 10px;
}

.sub-header {
    font-size: large;
    font-weight: bold;
}

.section-separate {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    height: 1.5px;
    background-color: #666;
    opacity: 0.5;
}

.larger-zindex {
    z-index: 100;
}

.large-zindex {
    z-index: 90;
}

.zindex-110 {
    z-index: 110;
}

.text-field-profile {
    padding-left: 10px;
    max-width: 70%;
}

.phone-profile {
    padding-left: 10px;
    max-width: 70%;
    align-items:center;
}

button.link {
    background:none;
    border:none;
    text-decoration: underline;
    cursor: pointer;
}

.add-skill-form {
    border: 3px solid;
    border-radius: 16px;
    border-color: lightblue;
    padding: 4px;
    margin: 0px;
}

.button-align-on-right {
    float: right;
    margin-right: 40px;
    padding-bottom: 4px;
}

.button-margin-bottom {
    margin-bottom: 10px;
}

.p-overflow-wrap {
    overflow-wrap:break-word;
}

.padding-left-10px {
    padding-left: 10px;
}

.padding-left-4px {
    padding-left: 4px;
}

.top-right-cornor {
    float: right;
    right: 5px;
    position: absolute;
    top: 5px;
    cursor: pointer;
}

.same-line-split {
    display: flex;
    flex-direction: row;
}

.same-line-split div {
    padding-right: 4px;
}

.phone-line-split {
    display: flex;
    flex-direction: row;
    width: 90%;
    align-items: center;
    margin-top: -20px;
    padding-bottom: 16px;
}

.phone-name-flex {
    flex: 2;
}

.phone-input-flex {
    flex: 8;
}

@media (max-width: 300px) {
    .header-flex-layout {
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        width:100%;
        height: 4vh;
        align-items: center;
        justify-content: space-between;
    }
}
/* CSS variables. */
:root {
	--PhoneInput-color--focus: #03b2cb;
	--PhoneInputInternationalIconPhone-opacity: 0.8;
	--PhoneInputInternationalIconGlobe-opacity: 0.65;
	--PhoneInputCountrySelect-marginRight: 0.35em;
	--PhoneInputCountrySelectArrow-width: 0.3em;
	--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
	--PhoneInputCountrySelectArrow-borderWidth: 1px;
	--PhoneInputCountrySelectArrow-opacity: 0.45;
	--PhoneInputCountrySelectArrow-color: inherit;
	--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountrySelectArrow-transform: rotate(45deg);
	--PhoneInputCountryFlag-aspectRatio: 1.5;
	--PhoneInputCountryFlag-height: 1em;
	--PhoneInputCountryFlag-borderWidth: 1px;
	--PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);
	--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);
}

.PhoneInput {
    /* This is done to stretch the contents of this component. */
    margin-top: 8px;
	display: flex;
	align-items: center;
	width: 60%;
}

.PhoneInputInput {
    -webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--ds-background-subtleBorderedNeutral-resting,#FAFBFC);border-color:var(--ds-border-neutral,#DFE1E6);color:var(--ds-text-highEmphasis,#091E42);cursor:text;border-radius:3px;border-width:2px;border-style:solid;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1 1 100%;-ms-flex:1 1 100%;flex:1 1 100%;font-size:14px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;max-width:100%;overflow:hidden;-webkit-transition:background-color 0.2s ease-in-out,border-color 0.2s ease-in-out;transition:background-color 0.2s ease-in-out,border-color 0.2s ease-in-out;word-wrap:break-word;vertical-align:top;pointer-events:auto;
    height: 40px;
}

.PhoneInputCountryIcon {
	width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));
	height: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--square {
	width: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--border {
	/* Removed `background-color` because when an `<img/>` was still loading
	   it would show a dark gray rectangle. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom. */
	background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
	/* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom,
	   so an additional "inset" border is added. */
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);
}

.PhoneInputCountryIconImg {
	/* Fixes weird vertical space above the flag icon. */
	/* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
	display: block;
	/* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.
	   Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */
	width: 100%;
	height: 100%;
}

.PhoneInputInternationalIconPhone {
	opacity: var(--PhoneInputInternationalIconPhone-opacity);
}

.PhoneInputInternationalIconGlobe {
	opacity: var(--PhoneInputInternationalIconGlobe-opacity);
}

/* Styling native country `<select/>`. */

.PhoneInputCountry {
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	margin-right: var(--PhoneInputCountrySelect-marginRight);
}

.PhoneInputCountrySelect {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

.PhoneInputCountrySelect[disabled],
.PhoneInputCountrySelect[readonly] {
	cursor: default;
}

.PhoneInputCountrySelectArrow {
	display: block;
	content: '';
	width: var(--PhoneInputCountrySelectArrow-width);
	height: var(--PhoneInputCountrySelectArrow-width);
	margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
	border-style: solid;
	border-color: var(--PhoneInputCountrySelectArrow-color);
	border-top-width: 0;
	border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	border-left-width: 0;
	border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	transform: var(--PhoneInputCountrySelectArrow-transform);
	opacity: var(--PhoneInputCountrySelectArrow-opacity);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
	opacity: 1;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
	opacity: 1;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}
.Collapsible {
  background-color:rgb(216, 216, 216);
}


/*The content within the collaspable area*/
.Collapsible__contentInner {
  padding: 10px;
  /*border: 1px solid gray;*/
  border-top: 0;
}

Collapsible__contentInner p {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 20px;
}

Collapsible__contentInner p:last-child {
  margin-bottom: 0;
}

/*The link which when clicked opens the collapsable area*/
.Collapsible__trigger {
  display: block;
  font-weight: 400;
  text-decoration: none;
  position: relative;
  border: 1px solid white;
  padding: 10px;
  background:  rgb(229, 252, 193);
  color: rgb(0, 0, 0);
}

.Collapsible__trigger::after {
    content: "+";
    font-size: larger;
    right: 10px;
    position: absolute;
  }

.Collapsible__trigger:disabled {
  opacity: 0.5;
  background-color: grey;
}

.Collapsible__trigger.is-open::after {
  content: "-";
  font-size: larger;
  right: 10px;
  position: absolute;
}

.CustomTriggerCSS {
  background-color: lightcoral;
  transition: background-color 200ms ease;
  
  
}

.CustomTriggerCSS--open {
  background-color: darkslateblue;
}

.Collapsible__custom-sibling {
  padding: 5px;
  font-size: 12px;
  background-color: #CBB700;
  color: black;
}

/*# sourceMappingURL=components.9988d77a.css.map*/