* {
    box-sizing: border-box;
}

/* Form */

select {
  font-family: inherit;
}


input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input.im-input-list, select {
    padding: .375rem .75rem;
        border:1px solid grey;
}

input[type="text"][readonly], input[type="email"][readonly], input[type="password"][readonly], input[type="tel"][readonly], input[type="number"][readonly], input.im-input-list[readonly], select[readonly] {
        border:1px solid lightgrey;
}

input:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}

select:focus-visible {
    background-color: #fff;
    border-color: #80bdff ;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
    margin:0;
}

select {
  color: gray;
padding: .175rem .75rem .275rem;
}

select > option {
    color:black;
}

select:valid {
  color: black;
}

input::placeholder {
    font-family:var(--im-font);
}

.im-full-label label, .im-full-label input, .im-full-label select {
    width:100%;
}

.im-full-label .im-form-check label, .im-full-label .im-form-check input {
    width:inherit;
}

.im-full-label > div {
    margin-bottom: 0.7rem;
    overflow:visible;
}

.im-full-label input[type="checkbox"] {
    display:inline-block;
    width:auto;
}

.im-full-label input[type="checkbox"] {
    display:inline-block;
    width:auto;
}

.im-full-label label {
    font-size: 0.9rem;
    display:block;
}

.im-full-label input[type="checkbox"] + label {
    display:inline;
}


/* Tab */

.im-tab-toggler {
    background-color:white;
    padding:10px 15px;
    user-select: none;
    cursor: pointer;
}

.im-tab-toggler.active {
    cursor: auto;
}

.im-tab-toggler h2 {
margin: 0 0 5px;
}

.im-tab-toggler p {
    margin: 0;
    }
    

div.im-tab-toggler:first-of-type {
    border-top-left-radius: 10px;
}

div.im-tab-toggler:last-of-type {
    border-top-right-radius: 10px;
}

.im-tab-toggler:not(.active) {
    background: #ededed;
    background: linear-gradient(180deg,rgba(237, 237, 237, 1) 0%, rgba(186, 186, 186, 1) 100%);
}

.im-tab-toggler:not(.active):hover {
    background: #fcfcfc;
    background: linear-gradient(180deg,rgba(252, 252, 252, 1) 0%, rgba(204, 204, 204, 1) 100%);
    }

div.im-tab-toggler:not(.active):first-of-type {
    box-shadow: -5px -5px 10px 0px rgba(0,0,0,0.2) inset;
-webkit-box-shadow: -5px -5px 10px 0px rgba(0,0,0,0.2) inset;
-moz-box-shadow: -5px -5px 10px 0px rgba(0,0,0,0.24) inset;
}

div.im-tab-toggler:not(.active):last-of-type {
    box-shadow: 5px -5px 10px 0px rgba(0,0,0,0.2) inset;
-webkit-box-shadow: 5px -5px 10px 0px rgba(0,0,0,0.2) inset;
-moz-box-shadow: 5px -5px 10px 0px rgba(0,0,0,0.2) inset;
}

div.im-tab-toggler:not(.active):first-of-type:hover {
    box-shadow: -3px -3px 8px 0px rgba(0,0,0,0.2) inset;
-webkit-box-shadow: -3px -3px 8px 0px rgba(0,0,0,0.2) inset;
-moz-box-shadow: -3px -3px 8px 0px rgba(0,0,0,0.2) inset;
}

div.im-tab-toggler:not(.active):last-of-type:hover {
    box-shadow: 3px -3px 8px 0px rgba(0,0,0,0.2) inset;
-webkit-box-shadow: 3px -3px 8px 0px rgba(0,0,0,0.2) inset;
-moz-box-shadow: 3px -3px 8px 0px rgba(0,0,0,0.2) inset;
}

.im-tab-toggler > p:last-of-type, .im-tab-toggler.active > p:first-of-type {
    display: none;
}

.im-tab-toggler.active > p:last-of-type {
    display: inherit;
}

.im-tab-content {
    display:none;
    background-color:white;
    padding:15px 15px;
    border-radius: 0 0 10px 10px;
}

.im-tab-content.active {
    display:block;
}

.im-form-2col {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    overflow: visible;
}

.im-form-1-3-3-col {
    display: grid; grid-template-columns: 1fr 3fr 3fr;
    column-gap: 1rem;
    overflow: visible;
}

.im-form-2col > div {
    overflow: visible;
}

.im-form-2col.im-relation-1-3 {
    display: grid; grid-template-columns: 1fr 3fr;
}

.im-form-2col.im-relation-3-1 {
    display: grid; grid-template-columns: 3fr 1fr;
}

.im-form-2col.im-relation-4-1 {
    display: grid; grid-template-columns: 4fr 1fr;
}


/* single info container */

.im-single-info-container {
    max-width: 640px;
    min-width:25%;
    background-color: #fff;
    border-radius: 10px;
    text-align: center;
    padding:1rem 1rem 2rem;
    margin: 1rem;
}


.im-single-settings-container {
    max-width: 640px;
    background-color: #fff;
    border-radius: 10px;
    text-align: left;
    padding:1rem;
    margin: 1rem;
    overflow:hidden;
}

.im-single-settings-container > h3:first-child {
    margin: -1rem -1rem 1rem -1rem;
    padding:1rem;
    background-color: var(--im-color-1);
    color:white;
}

.im-single-settings-container .im-button-container {
    margin-top: 1.5rem;
}


/*  radio input as Checkbox Button */

.im-radio-as-checkbox-button {
    display:flex;
    column-gap: 20px;
}

.im-radio-as-checkbox-button > input {
    display:none;
}

.im-radio-as-checkbox-button > label {
    background-color: var(--im-color-bg-nav);
    text-align: center;
    text-decoration: 0;
    color: #fff;
    display: inline-block;
    padding: 10px;
    border-radius: 5px;
    min-width: 70px;
}

.im-radio-as-checkbox-button > label:before {
      font-family: "im-font";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  font-size: 120%;

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    content: '\e83d';
}

.im-radio-as-checkbox-button > input:checked+label:before {
    content: '\e83c';
}


.im-radio-as-checkbox-button > input:checked+label {
    background-color: var(--im-color-1);
}

/* Login Form Footer */

.im-form-footer {
    margin-top: 20px;
    background-color:var(--im-color-1);
    padding:15px;
    color:white;
    border-radius: 10px; 
}

.im-form-footer h2 {
    color:var(--im-color-3);
    margin: 0 0 0.5rem;
}

.im-form-footer p {
    margin: 0;
}

/* error massages */

.field-validation-error {
    display:inline-block;
    color: var(--im-color-2);
    padding-top: 0.25rem;
    font-size: 0.9rem;
}

.field-validation-valid:empty {
    display:none;
}

.validation-summary-errors ul {
    list-style: none;
    padding:0;
    margin:0;
    /* padding-inline-start: 0;
    margin-block-end: 0;
    margin-block-start: 0; */
}