@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
@font-face {
	font-family: "mobigam icon";
	src: url("../fonts/mobiqam_icons.woff") format('woff');
	}


:root{
	--transparent: transparent;
	--black: #22292f;
	--white: white;
	--white-50: rgba(255, 255, 255, .5);
	--danger: #e74444;
	--success: #21b978;
	--warning: #ffeb3b;
	--info: #03a9f4;
	--primary: #4099de;
	--primary-dark: #297ec0;
	--primary-70: rgba(64, 153, 222, .7);
	--primary-50: rgba(64, 153, 222, .5);
	--primary-30: rgba(64, 153, 222, .3);
	--primary-10: rgba(64, 153, 222, .1);
	--logo: #252d37;
	--sidebar-icon: #b3c1d1;
	--20: #f6fbff;
	--30: #f4f7fa;
	--40: #eef1f4;
	--50: #e3e7eb;
	--60: #bacad6;
	--70: #b3b9bf;
	--80: #7c858e;
	--90: #252d37;
	--90-half: rgba(40, 54, 61, .5);
	--highlight: rgb(251, 176, 57);
    --ms-tag-bg: #059669;
    --ms-tag-color: #D1FAE5;
    --ms-tag-radius: 2px;
    --ms-tag-font-weight: 400;
    --ms-font-size: 1rem;
    --ms-line-height: 1.375;
    --ms-bg: #FFFFFF;
    --ms-bg-disabled: #F3F4F6;
    --ms-border-color: #D1D5DB;
    --ms-border-width: 1px;
    --ms-border-color-active: #D1D5DB;
    --ms-border-width-active: 1px;
    --ms-radius: 4px;
    --ms-py: 0.5rem;
    --ms-px: 0.875rem;
    --ms-ring-width: 3px;
    --ms-ring-color: #10B98130;
    --ms-placeholder-color: #9CA3AF;
    --ms-max-height: 10rem;
    --ms-dropdown-bg: #FFFFFF;
    --ms-dropdown-border-color: #D1D5DB;
    --ms-dropdown-border-width: 1px;
    --ms-dropdown-radius: 4px;
    --dp-input-padding: 8px 30px 8px 12px !important;
}


html.dark .multiselect-option.is-pointed {
    background-color: transparent;
    /*--ms-dropdown-radius: 2px !important;*/
    --ms-tag-radius: 5px !important;
}

html.dark p.color-white {
   color: #fff !important;
}

html:not(.dark) p.color-white {
   color: #000 !important;
}
html.dark {
    --ms-dropdown-bg: rgb(17 24 39 / var(--tw-bg-opacity));
    --ms-bg:  rgb(17 24 39 / var(--tw-bg-opacity));

}

/**:not(input, ul li, form button, .filament-forms-field-wrapper > div, table tr, select, .filament-modal-window .choices__inner, .swal2-icon-content, .swal2-icon, .explorer-title, .dp__icon, .mobiqams-view *, textarea), :after, :before {*/
/*	border: 0 !important;*/
/*	box-sizing: border-box;*/
/*	}*/

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	}
body {
	margin: 0;
	background-color: var(--white);
	color: hsl(0, 0%, 10%);
	line-height: 1.5;
	font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;

	}

a:hover{
	text-decoration: none !important;
	}

/*h1:not(.mobiqams-view h1, .welcome h1) {*/
/*	font-size: 1.5rem !important;*/
/*	color: var(--90) !important;*/
/*	font-weight: 400 !important;*/
/*	}*/

.details > div{
	font-weight: 400;
	display: flex;
	padding: 1rem 0;
	border-bottom: 1px solid var(--40);
	}

.details > div > div{
	color: var(--90);
	font-weight: 400;
	}

.details > div > div:first-of-type{
	color: var(--80);
	font-weight: 400;
	width: 25% !important;
	}

.details a{
	font-weight: 800;
	color: var(--primary);
	}

/*.filament-sidebar{*/
/*	background-image: linear-gradient(0deg, #7e8ea1 0%, #3c4655 100%);*/
/*	color: white !important;*/
/*	min-height: 100vh !important;*/
/*	}*/

.filament-sidebar ul > li > button + ul > li svg{
    opacity: 0 !important;
}

.filament-main-topbar{
    background: var(--highlight) !important;
}

.input[type="checkbox"] {
    border: 1px solid var(--black) !important;
}

.text-primary-600 {
	color: var(--primary) !important;
	font-weight: 800;
}

.text-primary-600:hover {
	color: var(--primary-50) !important;
	font-weight: 800;
	text-decoration: none !important;
}

/*.filament-tables-column-wrapper a{*/
/*	width: min-content !important;*/
/*}*/

ul.list-data{
	padding-left: 1.5rem;
}

ul.list-data li{
	display: grid;
	grid-template-columns: 25% 75%;
	padding: 1rem 0;
	border-bottom: 1px solid var(--40);
}

ul.list-data li span:first-of-type{
    color: var(--80);
}

form > div{
	grid-gap:0 !important;
	}


header.my-mobiqam{
    background: var(--highlight);
    height: 60px;
    padding-right: 1.5rem ;
}

.nav-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

.nav-container *{
    width: fit-content;
}

.nav-container .logo{
    background: rgb(17 24 39 / var(--tw-bg-opacity));
    box-sizing: border-box;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 320px;
    min-width: 320px;
    padding: 0 1.5rem;
}

.nav-container .img{
    background: var(--logo);
    max-width: 100%;
    height: auto;
}


.nav-container nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-left: 1.5rem;
}

.nav-container nav a{
    text-decoration: none;
    color: var(--90);
}

.admin-panel-icon{
    font-family: 'mobigam icon';
    margin-right: 2px;
}


#app .container{
    padding: 0 3rem;
    width: 100% !important;
    max-width: 100% !important;
}

#app > .mobiqams-view{
    padding: 3.125rem 0;
}

.mobiqams-view .nav{
    display: flex;
    justify-content: space-between;
}

.mobiqams-view h1{
    color: #fcaf39;
    font-size: 1.5rem;
    font-weight: 800;
    width: fit-content;
}


.mobiqams-view .btn-default{
    height: 2.25rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    line-height: 2.25rem;
    border-radius: 0.5rem;
    -webkit-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 5%);
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 5%);
    text-shadow: 0 1px 2px rgb(0 0 0 / 20%);
}

.mobiqams-view .btn{
    display: inline-block;
    text-decoration: none;
    font-weight: 800;
}

.mobiqams-view hr{
    border: 0px;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    height: 4px;
    background: var(--black);
}

.mobiqams-view .mbqm-online-card{
    background-color: #424142;
    border-color: #000;
    color: #fff;
    padding: 1rem;
}

.mobiqams-view .mbqm-warning-card{
    background-color: #ffa800;
    border-color: #000;
    color: #fff;
    padding: 1rem;
}

.mobiqams-view .mbqm-offline-card{
    background-color: #e74444;
    border-color: #000;
    color: #fff;
    padding: 1rem;
}

.mobiqams-view .card .image{
    margin-bottom: 1rem;
}

.mobiqams-view .card .name{
    margin-bottom: 1rem;
}

.mobiqams-view .card .actions{
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.5rem;

}

.mobiqams-view .ddMenu{
    color: var(--white);
    margin-top: 0.5rem;
}

.mobiqams-view .data{
    width: 20%;
    text-align: center;
}

.mobiqams-view .data .title{
    color: var(--70);
    font-size: .875rem;
    text-transform: uppercase;
}

.mobiqams-view .data .mbqm_icon{
    font-size: 2.25rem;
    color: var(--50);
    margin-bottom: 1rem;
}

.mobiqams-view .data .value{
    font-size: .875rem;
    color: var(--50);
}

.mbqm_icon_red, .value_red{
    color: var(--danger) !important;
}

.value_uppercase{
    text-transform: uppercase;
}

.breadcrumbs nav ol{
    font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
    display: flex;
    width: 100%;
    color: #cacacb;
    gap: 0.5rem;
}

.breadcrumbs nav li{
    font-weight: bold;
}

.breadcrumbs nav li:last-of-type{
    font-weight: normal;
}

.breadcrumbs nav li.slash{
    color: var(--black);
}

.mbqm-color{
    color: var(--highlight);
}

textarea{
    color: var(--80) !important;
}

#invalid{
    color: var(--danger) !important;
    font-size: 24px !important;
}

#valid{
    color: var(--success) !important;
    font-size: 24px !important;
}

#description{
    border: none !important;
    color: var(--90) !important;
    height: auto !important;
}

span.valid-icon{
    color: var(--success) !important;
}

span.invalid-icon{
    color: var(--danger) !important;
}

.welcome{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    /*color: hsl(0, 0%, 10%);*/
    font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
}

.welcome h1{
    font-size: 3rem !important;
    font-weight: bold;
    margin-bottom: 0.2rem;
}

.welcome h1 i{
    color: var(--highlight);
    transform: rotate(-40deg) scaleX(-100%);
}

.welcome p{
    font-size: 1.3rem;
}

.welcome hr{
    margin-top: 2rem;
    margin-bottom: 2rem;
    height: 1px;
    width: 100%;
    background-image: linear-gradient(to right, rgba(255,0,0,0), hsl(0, 0%, 10%), var(--highlight), hsl(0, 0%, 10%), rgba(255,0,0,0));
}

.filament-footer img{
    height: 15px
}

.filament-footer {
    color: var(--80)
}

.ui-tooltip, .ajs-arrow:after{
    background: var(--highlight) !important;
}

.filament-app-layout {
    background: inherit;
}

.custom-errors.alert.alert-danger {
    background-color: var(--danger);
    text-align: center;
    padding: 10px;
}

a.custom-mobiqam-link{
    color: var(--highlight);
    text-decoration: underline;
}

.border-mobiqam {
    border-color: var(--highlight) !important;
}

.mobiqam-button {
    color: var(--highlight) !important;
}

.hover:bg-mobiqam{
    background-color: var(--highlight) !important;
}



.keywordselect .multiselect-inifite-spinner, .keywordselect .multiselect-spinner{
    animation: unset !important;
    background-color: var(--highlight) !important;
    background-image: url("../img/loading.gif") !important;
    -webkit-mask-image: url("../img/loading.gif") !important;
    mask-image: url("../img/loading.gif") !important;
}

@media only screen and (max-width: 768px) {
    .login-blocks {
        flex-direction: column;
    }

    .login-blocks a {
        margin-right: 0 !important;
    }
}

.offline-mobiqams .filament-forms-repeater-component-item {
    background-color: #ae00002e !important;
}