/* Sistema de Reserv de Microscpia
    CICECO
    Universidade de Aveiro

    SECTIONS

    * General
    * Sidebar
    * Content
    * Typography
    * Colors
    * Padding
    * Margin

*/

/* General */
/* breakpoints (480px, 768px, 1024px, and 1280px) */

@font-face {
    font-family: 'RobotoR';
    src: url('../fonts/Roboto/Roboto-Regular.ttf');
}
@font-face {
    font-family: 'RobotoM';
    src: url('../fonts/Roboto/Roboto-Medium.ttf');
}
@font-face {
    font-family: 'RobotoB';
    src: url('../fonts/Roboto/Roboto-Bold.ttf');
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Regular.ttf');
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:focus-visible {
    outline: 0;
}

body {
    font-family: 'RobotoR';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: left;
    background-color: #f9fafb;
    color: #111827;
}

input:-internal-autofill-selected {
    appearance: menulist-button;
    background-color: #fff !important;
    background-image: none !important;
    color: inherit !important;
}


ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;

}


a {
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px;
    color: #10B981;
    font-family: 'RobotoM';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

h1 {
    font-family: 'RobotoM';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}

p {
    font-family: 'RobotoR';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
}

.pointer {
cursor: pointer;
}

.form-control-group {
    display: block;
    width: 100%;
    background-color: #fff;
    background-clip: padding-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 6px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.input-group>.form-control-group, .input-group>.myform-select {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group-prefix-focus {
    outline: 0;
    border: 1px solid #D1D5DB;
    box-sizing: border-box;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px #3B82F6;
    border-radius: 6px;
}

.form-control {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-family: 'RobotoR';
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    color: #111827;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #D1D5DB;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 6px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


.form-control:focus {
    outline: 0;
    border: 1px solid #D1D5DB;
    box-sizing: border-box;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px #3B82F6;
    border-radius: 6px;
}

.form-select {
    display: block;
    width: 100%;
    padding: 10px 8px;
    font-family: 'RobotoR';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #111827;
    background-color: #fff;
    background-image: url('../icons/select.png');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px 20px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-select:focus {
    outline: 0;
    border: 1px solid #D1D5DB;
    box-sizing: border-box;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px #3B82F6;
    border-radius: 6px;
}

.form-label {
    margin-bottom: 4px;
}


.combobox {
  position: relative;
  display: inline-block;
}

.combobox  {
    display: block;
    width: 100%;
    padding: 10px 8px;
    font-family: 'RobotoR';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #111827;
    background-color: #fff;
    background-image: url('../icons/select.png');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px 20px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.combobox .items {
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 9999;
    min-width: 100%;
    box-sizing: border-box; /* width includes border & padding */
    background-color: #fff;
    border: 1px solid #D1D5DB;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    overflow-y: auto;
    overflow-x: auto;
    max-height: 250px;
}

.combobox .items-sm {
    max-height: 100px;
}

.combobox .item {
    padding: 10px 8px;
    padding-right: 36px;
    font-family: 'RobotoR';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
}

.combobox:focus-within {
    outline: 0;
    border: 1px solid #D1D5DB;
    box-sizing: border-box;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px #3B82F6;
    border-radius: 6px;
}

.combobox .item:hover {
    background-color: #F3F4F6;
}

.combobox .item.selected {
    background-image: url('../icons/check.svg');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px 20px;
}

.width-275 {
    width: 275px;
}
.width-256 {
    width: 256px;
}

a:hover {
    padding: 8px;
    background: #ECFDF5;
    border-radius: 6px;
    color: #10B981;
}

a:focus {
    background: #FFFFFF;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px #3B82F6;
    border-radius: 6px;
}

.th-text {
    padding: 12px 16px 12px 16px !important;
}

.action {
    padding: 10px;
}
a.action:hover {
    padding: 10px;
    background: #E5E7EB;
    border-radius: 6px;
}

.taction {
    align-items: center !important;
    vertical-align: middle;
    padding: 16px !important;
}


@media (min-width: 550px) {
    .modal-dialog {
        max-width: 556px;
        min-width: 556px;
        margin: 1.75rem auto;
     }
}

.dropzone {
    border: 2px dashed #D1D5DB;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 8px;
    border-width: 3px;
}

.dropzone .dz-preview .dz-image{
    border-radius: 0px;
}

.dropzone .dz-preview .dz-image {
    width: 174px;
    height: 174px;
}
.dropzone .dz-preview {
    margin: 0px;
}

.mymodal {
    box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
/*    width: 556px;
    max-height: 600px;*/
    min-width: 648px;
    max-width: 648px;
}

.mymodal-header {
    padding: 14px 24px;
    border-bottom: 0px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    height: 56px;
}

.modal-header .btn-close {
    background: url('../icons/close.svg') center no-repeat;
    padding: 4px .5rem;
}

.mymodal-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 24px 24px;
    margin-bottom: 56;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.input-label {
    margin-bottom: 16px;
}

.divider {
    background: #D1D5DB;
    height: 1px;
    width: 100%;
    margin-top: 32px;
    margin-bottom: 16px;
}

.mymodal-footer {
    border-top: 0px;
    padding-top: 24px;
    padding-bottom: 24px;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: 0px;
}

.error-message {
    color: #DC2626;
    margin: 4px 0px;
    font-family: 'RobotoR';
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
}

.error-field {
    border: 1px solid #D1D5DB;
    box-sizing: border-box;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px #DC2626;
    border-radius: 4px;
}

.d-arrow {
    background-image: url(../icons/select.png);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px 20px;
}

.d-calendar {
    background-image: url(../icons/calendar.png);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px 20px;
}

.items >.top-label {
    margin-top: 4px;
    padding: 0px 0px 0px 8px;
    font-family: 'RobotoM';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #9CA3AF;
}

.items > .middle-label {
    height: 32px;
    padding: 16px 0px 0px 8px;
    font-family: 'RobotoM';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #9CA3AF;
}


.mydangermodal {
    width: 456px;
    position:absolute;
    top: 50%;
    left:50%;
    margin-top: -113px;
    margin-left: -228px;
}

.mydangerheader {
    color:#DC2626;
    background: #FEF2F2
}

.mydangerfooter {
    border-top: 0px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: 0px;
}

.mydangertext {
    padding: 24px 24px 16px;
}

.success-banner {
    left: 248px;
    top: 0px;
    height: 48px;
    width: 100%;
    background: #10B981;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.error-modal-banner {
    padding: 8px;
    width: 100%;
    background: #DC2626;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.success-modal-banner {
    padding: 8px;
    width: 100%;
    background: #059669;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #fff;
}

/* Sidebar */

.layout-fixed .main-sidebar {
    bottom: 0;
    float: none;
    left: 0;
    position: fixed;
    top: 0;
}

.main-sidebar {
    height: 100vh;
    width: 248px;
    overflow-y: hidden;
    z-index: 1038;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	padding: 32px 0px 0px;
	background-color: #1E293B;
	box-shadow: -1px 0px 0px #D1D5DB;
}


.brand {
	width: 248px;
    display: block;
    padding-bottom: 8px;
}

.brand-image {
    width: 180px;
}

a.brand:hover {
    padding-bottom: 8px;
    background: none;
    border-radius: none;
    color: inherit;
}

a.brand:focus {
    padding-bottom: 8px;
    background: none;
    border-radius: none;
    color: inherit;
    box-shadow: 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px;
    border-radius: 0px;
}

.sidebar {
    height: calc(100% - (3.5rem + 1px));
    overflow-x: none;
    overflow-y: initial;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    scrollbar-width: thin;
    scrollbar-color: #a9a9a9 transparent;
}

.nav-sidebar > .nav-item {
    position: static;
	width: 248px;
    height: 40px;
    padding: 10px 0px 10px 20px;
/*    margin-bottom: 8px;*/

}

.navbar-nav  > .nav-item {
    position: static;
    height: 40px;
    padding: 10px 0px 10px 20px;
/*    margin-bottom: 8px;*/

}

.nav-link {
    height:20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0px 0px;
    padding: 0px;
}

a.nav-link:hover {
    padding:0;
    background: none;
    border-radius: none;
    color: inherit;
}
a.nav-link:focus {
    background: none;
    box-shadow: none;
}

.nav-item a {
    color: inherit;
}
.nav-item:hover
{
    background-color: #064E3B;
    color: #6EE7B7;
}

.navbar-nav  > .nav-item:hover {
    background-color: #fff;
}

.navbar-nav  > .nav-item:hover > .nav-link > .nav-link-content  > .nav-icon {
    fill: #10B981 !important;
}

.nav-icon {
    padding-right: 12px;
    fill: #9CA3AF;
}
.nav-icon.active {
    fill: #6EE7B7;
}

.nav-item:hover > .nav-link > .nav-link-content  > .nav-icon {
    fill: #6EE7B7 !important;
}

.nav-item:hover > .nav-link > .nav-border {
    width: 4px;
    height: 40px;
    background-color: #6EE7B7;
    margin-left:-20px;
    margin-right: 16px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}


.nav-link-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.nav-link-content.active {
     color: #6EE7B7;
}

.nav-border.active {
    width: 4px;
    height: 40px;
    background-color: #6EE7B7;
    margin-left:-20px;
    margin-right: 16px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}


.nav-header {
    padding: 24px 0px 8px 20px;
}

.sidebar-footer {
	height: 57px;
	position: absolute;
	width: 100%;
	bottom: 0;
	list-style-type: none;
    padding-left: 20px;
    border-top: 1px solid #9CA3AF;
}
.sidebar-footer-content {
    width: 100%;
    padding-top: 12px;
}
.sidebar-footer-user {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    position: static;
    width: 180px;
    height: 32px;
}
.avatar-user {
	position: absolute;
	width: 24px;
	height: 24px;
	padding-top: 2px;
	border-radius: 50%;
    text-align: center;
}

.avatar-name {
    white-space: nowrap;
	padding-left: 32px;
    display: inline-block;
    padding-top:2px;
}

.avatar-letter {
    width: 28px;
    height: 28px;
    padding-top: 2px;
    border-radius: 50%;
    text-align: center;
}

.settings-icon {
    position: absolute;
    height: 32px;
    padding-left: 188px;
    padding-top: 2px;
}

a.settings:hover {
/*    position: absolute;
    height: 32px;
    padding-left: 188px;
    padding-top: 2px;*/
    background: none;
    border-radius: 0;
    color: inherit;
    cursor: pointer;
}
a.settings:focus {
    background: none;
    box-shadow: none;
}

a.dropdown-item {
    padding: .25rem 1rem;
}

/*
 *  Content
 */

.content-wrapper {
    min-height: 100vh;
}


@media (min-width: 768px)
{
    .content-wrapper {
        margin-left: 248px;
    }

}


.page-title {
    font-family: 'RobotoB';
    font-weight: 700;
    font-style: normal;
    font-size: 36px;
    line-height: 40px;
    color: #111827;
}

.page-subtitle {
    font-family: 'RobotoR';
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    height: 28px;
    color: #111827;
    margin-top: 8px;
}

.content-header a {
    color: inherit;
}

.input-group-prefix {
    border: 1px solid #D1D5DB;
    box-sizing: border-box;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
}

.input-group-icon {
   display: flex;
   align-items: center;
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 8px;
   text-align: center;
   white-space: nowrap;
}

.input-group-content {
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 8px;
    padding-right: 8px;
}

.shadow-ib {
    box-shadow: inset 0px -1px 0px #D1D5DB;
}

.tag-default
{
    display: inline-block;
    border-radius: 6px;
    padding:2px 8px 2px 8px;
    font-family: 'RobotoM';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    background-color:#DCFCE7;
    color: #166534;
}

.tag-danger
{
    display: inline-block;
    border-radius: 6px;
    padding:2px 8px 2px 8px;
    font-family: 'RobotoM';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #9F1239;
    background-color: #FFE4E6;
}

.tag-disabled
{
    display: inline-block;
    border-radius: 6px;
    padding:2px 8px 2px 8px;
    font-family: 'RobotoM';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #1F2937;
    background-color: #E5E7EB;
}

.t-list {
    border: 1px solid #D1D5DB;
    box-sizing: border-box;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}


/* Autentication */
.autentication {
    padding-left: 6px;
    padding-right: 6px;
}

.autentication .brand-logo {
    margin-top: 40px;
    margin-bottom: 40px;
    padding-left: 16px;
}

.brand-logo img {
    height: 44px;
}

.login-content {
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    padding: 40px 40px 40px 32px;
    background-color: #fff;
    box-sizing: border-box;
}

.input-group-eye {
   display: flex;
   align-items: center;
   padding-top: 10px;
   padding-bottom: 10px;
   padding-right: 8px;
   text-align: center;
   white-space: nowrap;
}

a.input-group-eye:hover {
    background: #fff;
}
a.input-group-eye:focus {
    background: #fff;
    box-shadow: none;
    border-radius: 0px;
}

.steps {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 24px;
    justify-content: center;
}

.step {
    width: 24px;
    height: 24px;
    padding-top: 2px;
    border-radius: 50%;
    text-align: center;
}

/*
 * equipment
 */

.d-equipment {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 6px;
    margin-top: 6px;
}

.sec-equipment {
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    box-sizing: border-box;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    margin-bottom: 32px;
}
/*
 * editor
 */

.editorTitle1 {
    color:  #dc3545;
}

/*
 * Calendar
 */

.points {
	background: #F3F4F6;
	border: 1px solid #D1D5DB;
	box-sizing: border-box;
	border-radius: 6px;
	padding: 8px 16px;
	color: #111827;
}

.no-right-radius-border {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.no-left-radius-border {
	border-top-left-radius: 0px !important;
	border-bottom-left-radius: 0px !important;
}

.h-42 {
	height: 42px;
}

.e_image {
	width: 100%;
	height: 138px;
	background-position: center;
	background-size: cover;
}

#more {display: none;}

/*
 * Myaccount
 */
.card-myaccount {
    padding: 24px 24px 24px 16px;
    border: 1px solid #D1D5DB;
    background: #FFFFFF;box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); border-radius: 6px;
}

/*
 * DataTabes
 */

table.dataTable thead th, table.dataTable thead td {
    border-bottom: 0px;
}

table.dataTable.no-footer {
    border-bottom: 0px;
}

.dataTables_wrapper .dataTables_filter {
    padding-bottom: 16px;
}

table.dataTable {
    margin: 0 0;
}

table.dataTable thead .sorting_asc {
	background-image: none !important;
}

/*
 * Pagination
 */


.dataTables_wrapper .dataTables_paginate {
    float: right;
    text-align: right;
    padding-top: 16px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: default;
    color: inherit;
    border: 1px solid #DDDDDD;;
    background-color: #FFFFFF;
    cursor: default;
    box-shadow: none;
    font-family: "RobotoR";
    font-weight: 400;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    color: inherit;
    float: left;
    line-height: 1.42857;
    margin-left: -1px;
    padding: 4px 10px;
    position: relative;
    text-decoration: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #f4f4f4;
    border-color: #DDDDDD;
    color: inherit;
    cursor: default;
    z-index: 2;
}

.paginate_button > li > a, .paginate_button > li > span {
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    color: inherit;
    float: left;
    line-height: 1.42857;
    margin-left: -1px;
    padding: 4px 10px;
    position: relative;
    text-decoration: none;
}

.dataTables_paginate a:first-child {
    border-radius: 0px !important;
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

.dataTables_paginate a:last-child {
    border-radius: 0px !important;
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

/*
 * Buttons
 */

.b-icon {
    padding: 6px;
}

.b-icon:hover {
    padding: 6px;
    background: #E5E7EB;
    border-radius: 6px;
    max-width: 32px;
    cursor: pointer;
}

.b-table-no-background {
    padding: 0px;
    background: #FFFF;
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
}

.b-table-no-background:hover {
    padding: 0px;
    background: #FFFF;
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
}

.b-default {
    padding: 10px 24px;
    background: #D1D5DB;
    color: #fff !important;
    border-radius: 6px;
    font-family: 'RobotoM';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}


.b-primary {
    display: flex;
    align-items: center;
    padding: 10px 24px;
    height: 40px;
    background: #10B981;
    border-radius: 6px;
    color: #fff !important;
    font-family: 'RobotoM';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

.b-primary:hover {
    padding: 10px 24px;
    background: #059669;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    cursor: pointer;
}

.b-primary:focus {
    background: #10B981;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px #3B82F6;
    border-radius: 6px;
}

.b-primary.disabled {
    padding: 10px 24px;
    background: #D1D5DB;
    color: #fff !important;
    border-radius: 6px;
}

.b-secondary {
    display: flex;
    align-items: center;
    padding: 10px 24px;
    height: 40px;
    background: #F3F4F6;
    border-radius: 6px;
    color: #111827;
    font-family: 'RobotoM';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

.b-secondary:hover {
    padding: 10px 24px;
    color: #111827;
    background: #D1D5DB;
    border-radius: 6px;
    cursor: pointer;
}

.b-secondary:focus {
    background: #F3F4F6;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px #3B82F6;
    border-radius: 6px;
}

.b-secondary-outline {
    display: flex;
    align-items: center;
    padding: 10px 24px;;
    height: 40px;
    background: #FFFFFF;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    color: #111827;
    font-family: 'RobotoM';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    border: 1px solid #D1D5DB;
    box-sizing: border-box;
}

.b-secondary-outline:hover {
    padding: 10px 24px;
    color: #111827;
    background: #F3F4F6;
    border: 1px solid #D1D5DB;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    cursor: pointer;
}

.b-secondary-outline:focus {
    background: #FFFFFF;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px #3B82F6;
    border-radius: 6px;
}

.b-link-default {
    padding: 6px 0px;
}

.b-link-default:hover {
    padding: 6px 0px;
    background: inherit;
    cursor: pointer;
}

.b-link-danger {
    padding: 4px 0px;
    color: #DC2626;
}

.b-link-danger:hover {
    padding: 4px 0px;
    color: #DC2626;
    background-color: #FFF;
    cursor: pointer;
}

.b-danger {
    display: flex;
    align-items: center;
    padding: 10px 24px;
    height: 40px;
    background: #DC2626;
    border-radius: 6px;
    color: #fff !important;
    font-family: 'RobotoM';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

.b-danger:hover {
    padding: 10px 24px;
    background: #7F1D1D;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
}

.b-danger:focus {
    background: #DC2626;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px #DC2626;
    border-radius: 6px;
}

.b-table {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    height: 40px;
    color: #9CA3AF;
    fill: #9CA3AF;
    font-family: 'RobotoM';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

.b-table:hover {
    padding: 4px 8px;
    color: #4B5563;
    fill:  #4B5563;
    background: #E5E7EB;
    border-radius: 6px;
    cursor: pointer;
}

.b-table:focus {
    background: #FFFFFF;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 3px #3B82F6;
    border-radius: 6px;
}

.b-more:hover {
    padding-left: 0px;
    background: #ECFDF5;
    border-radius: 6px;
    color: #10B981;
}
.b-more:focus {
    background: #FFFFFF;
    box-shadow: 0px 0px 0px rgb(0 0 0 / 5%), 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #3b82f6;
    border-radius: 6px;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/*
 * Footer
 */

 .public-footer {
    height: 97px;
    background: #FFFFFF;
    box-shadow: 0px -1px 0px #D1D5DB;
 }

/*
 * Typography
 */

.f-base-medium-500 {
	font-family: 'RobotoM';
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
}

.f-base-regular-500 {
    font-family: 'RobotoR';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

.f-base-regular-400 {
    font-family: 'RobotoR';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
}


.f-base-regular-400i {
    font-family: 'RobotoR';
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
}


.f-4xl-bold-700 {
	font-family: 'RobotoB';
	font-style: normal;
	font-weight: 700px;
	font-size: 36px;
	line-height: 40px;
}


.f-lg-medium-500 {
    font-family: 'RobotoM';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
}

.f-lg-regular-400 {
    font-family: 'RobotoR';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
}
.f-s-medium-500 {
    font-family: 'RobotoM';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}


.f-xl-medium-500 {
    font-family:"RobotoM";
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
}

.f-2xl-medium-500 {
    font-family:"RobotoM";
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
}

.f-s-regular-400 {
 font-family: 'RobotoR';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}
.f-xs-medium-500 {
    font-family: 'RobotoM';
    font-style: normal;
    font-weight: 500 !important;
    font-size: 12px;
    line-height: 16px;
}

.f-xs-regular-500 {
    font-family: 'RobotoR';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
}

.f-xs-regular-400 {
    font-family: 'RobotoR';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}

.f-ag {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}




/* colors */


.bg-cool-gray-50 { background: #F9FAFB }

.bg-cool-gray-100 {background-color: #F3F4F6;}

.cool-gray-400 { color: #9CA3AF; }
.bg-cool-gray-400 { background-color: #9CA3AF; }

.cool-gray-500 { color: #6B7280; }
.bg-cool-gray-500 { background-color: #6B7280; }

.cool-gray-700 { color: #374151; }

.cool-gray-900 { color: #111827; }
.bg-cool-gray-900 { background-color: #111827; }

.emerald-300 { color: #6EE7B7; }
.bg-emerald-300 { background-color: #6EE7B7; }

.emerald-500 { color: #10B981; }
.bg-emerald-500 { background-color: #10B981; }

.bg-green-100 {background-color:#DCFCE7; }
.green-800 { color: #166534;}

.neutral-white { color: #FFFFFF; }

.red-600 {color: #DC2626 ;}

.rose-800 {color: #9F1239 }

.bg-rose-100 { background-color: #FFE4E6}


/*
 * padding
 *
 * standard gutter: p-1 : 4px;
 *                  p-2 : 8px;
 *                  p-3 : 16px;
 *                  p-4 : 24px;
 *                  p-5 : 48px;
 *
 */

.pl-0 { padding-left: 0px; }
.pl-1 { padding-left: 4px; }
.pl-2 { padding-left: 8px; }
.pl-4 { padding-left: 24px; }
.pr-1 { padding-right: 4px; }
.pr-2 { padding-right: 8px; }
.pr-3 { padding-right: 16px; }
.pr-4 { padding-right: 24px; }
.pb-3 {padding-bottom: 16px;}

.mr-2 { margin-right: 8px; }
.mr-3 { margin-right: 16px; }


.pl-12 { padding-left: 12px; }
.pl-14 { padding-left:14px; }
.pl-20 { padding-left:20px; }
.pl-40 { padding-left: 40px; }

.pr-14 { padding-right: 14px; }
.pr-22 { padding-right: 22px;}

.pt-32 { padding-top: 32px; }
.pt-40 { padding-top: 40px; }

.pb-6  { padding-bottom: 6px; }
.pb-32 { padding-bottom: 32px; }


.mt--108 { margin-top: -108px; }
.mt-12 { margin-top: 12px; }
.mt-18 { margin-top: 18px; }
.mt-28 { margin-top: 28px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-64 { margin-top: 64px; }

.mr-12 { margin-right: 12px; }

.mb-20 { margin-bottom: 20px; }
.mb-32 { margin-bottom: 32px; }
.mb-80 { margin-bottom: 80px; }