@import url("../../../tp/bootstrap/css/bootstrap.min.css");
@import url("../../../tp/fontawesome/css/all.min.css");

@import url("./typography/typography.css");
@import url("./colours.css");
@import url("./vars.css");
@import url("./anim.css");
@import url("./tp/bootstrap.css");

@import url("./icons.css");
@import url("./logos.css");
@import url("./badges.css");
@import url("./flags.css");
@import url("./btn.css");

@import url("./parts/top.css");
@import url("./parts/menu.css");
@import url("./parts/main.css");
@import url("./components/components.css");
@import url("./misc/errors.css");

@import url("./layouts/default.css");
@import url("./layouts/fullwidth.css");
@import url("./layouts/fullsize.css");
@import url("./layouts/modal.css");

@import url("./errors.css");

/**
    Prevent dragging as default
**/
html.protected * {
    -webkit-user-drag: none;
    -ms-user-drag: none;
    -moz-user-drag: none;
    user-drag: none;
}

/**
    Prevent selecting as default
**/
html.protected * {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

/**
ALLOW LIST
**/
.selectable-text,
.badge {
    user-select: text;
}


/* TYPOGRAPHY */

::placeholder,
input::placeholder {
  color: var(--theme-color-gray-700) !important;  
}



:active::placeholder,
input:active::placeholder {
  color: var(--theme-color-gray-100) !important;  
}

h3 {
    font-size: 22px;
    font-weight: var(--typo-b-1-semi-bold-weight);
    color: var(--typo-b-1-semi-bold-color-grey-900);
}
.title h3 {
    font-size: var(--typo-b-1-semi-bold-font-size);
    font-weight: var(--typo-b-1-semi-bold-weight);
    color: var(--typo-b-1-semi-bold-color-grey-900);
}

/*******************************************************************************
* DEFAULTS
*******************************************************************************/
.mavryx-net-progress {
    display: none;
    height: 5px;
    background: #ffffff;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    outline: 1px solid #c9c9c9;
    z-index: 999999999999999999999999;
}

.mavryx-net-progress.show {
    display: block;
}

.mavryx-net-progress .mavryx-net-progress-box {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
    font-size: 8px;
    color: #ffffff;
}

.mavryx-net-progress .mavryx-net-progress-bar {
    display: block;
    position: absolute;

    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;

    left: 0;
    top: 0;

    width: 50%;
    background: var(--primary-color);
    height: 100%;
}

/**
TEMPLATE DEFAULTS
**/

/**
DEFAULT FONT SIZE FOR DOCUMENT
**/

html, body {
    font-size:  var(--typo-font-size);
    font-weight: var(--typo-font-weight);
}

[template='spring'] body {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--main-bg-color);
    font-family: Poppins;
    font-size:  var(--typo-font-size);
    font-weight: var(--typo-font-weight);
    color: var(--main-text-color);

}


[template='spring'] .main {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    max-width: 1920px;
}

[template='spring'] body .mavryx-app-env-dev-version {
    display: inline-block;
    background: #ff7f33;
    padding: 0px;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    position: fixed;
    width: auto;
    top: 20px;
    z-index: 0;
    font-size: 13px;
    opacity: 0.3;
    right: 25%;
    padding: 10px;
    border-radius: 10px;
}

.viewmode-compact  body .mavryx-app-env-dev-version {
    opacity: 0.1;
    right: 0;
    display: block;
    left: 0;
    top: 11px;
}


[template='spring'] input:not(
    [type="file" i],
    [type="image" i],
    [type="checkbox" i],
    [type="radio" i]
)  {
    border: 1px solid;
    border-color: var(--main-border-color);
    padding: 2px 10px;

    min-height: var(--main-input-min-height);
    min-width: var(--main-input-min-width);
}

[template='spring'] input[type="checkbox" i]  {
    border: 1px solid;
    border-color: var(--main-border-color);
    padding: 2px 10px;

    min-height: var(--main-checkbox-min-height);
    min-width: var(--main-checkbox-min-height);
}

[template="spring"] select  {
    border: 2px solid;
    border-color: #e5e5e5;
    border-radius: var(--border-radius);
    background: #f5f5f5;
    padding: 2px 10px;
    font-size: var(--font-size-14);
}





[template='spring'] .text-align-left {
    text-align: left;
}

[template='spring'] .text-align-right {
    text-align: right;
}

[template='spring'] .text-align-center {
    text-align: center;
}

[template='spring'] ::placeholder {
  color: #efefef;
  opacity: 1; /* Firefox */
}

[template='spring'] ::-ms-input-placeholder { /* Edge 12 -18 */
  color: #efefef;
}

[template='spring'] .logo {

    display: block;

    min-height: var(--main-btn-min-width);
    min-width: var(--main-btn-min-width);

    width: 150px;
    height: 150px;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #efefef;
    border-radius: var(--border-radius);
}

[template='spring'] .logo.small {
    width: 1em;
    height: 1em;
    display: inline-block;
}

[template="spring"] .component-avatar-img {
    display: inline-block;
    width: 64px;
    height: 64px;
    overflow: hidden;
}

[template='spring'] .col.logo-container {
    max-width: 120px;
}
[template='spring'] .col.logo-container img.logo {
    width: 100%;
    max-width: 80px;
    height: auto;
}

/*
    DEFAULT BUTTONS
*/

[template="spring"] .btn,
[template="spring"] button {
    font-size: var(--main-btn-font-size);
    padding: 4px 15px;
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border-color: transparent;
    border-radius: var(--border-radius);
    border: 1px solid;
    border-color: var(--theme-color-grey-400);
    transition: 0.3s; 
}
 
[template="spring"] .btn i[class ~= "fas"] ,
[template="spring"] .btn i[class ~= "fa-"] ,
[template="spring"] .btn i[class ~= "fa-"] , 
[template="spring"] button i[class ~= "fas"] ,
[template="spring"] button i[class ~= "fa-"] ,
[template="spring"] button i[class ~= "fa-"]
{   
    /* 
    display: inline-block !important; 
    font-size: 22px !important;  
    vertical-align: bottom;
    padding: 0;
    margin: 0;
    padding-right: 8px; 
   */
}  

[template="spring"] .focus-on .btn i[class ~= "fas"] ,
[template="spring"] .focus-on .btn i[class ~= "fa-"] ,
[template="spring"] .focus-on .btn i[class ~= "fa-"] , 
[template="spring"] .focus-on button i[class ~= "fas"] ,
[template="spring"] .focus-on button i[class ~= "fa-"] ,
[template="spring"] .focus-on button i[class ~= "fa-"] ,

[template="spring"] .btn:hover i[class ~= "fas"] ,
[template="spring"] .btn:hover i[class ~= "fa-"] ,
[template="spring"] .btn:hover i[class ~= "fa-"] , 
[template="spring"] button:hover i[class ~= "fas"] ,
[template="spring"] button:hover i[class ~= "fa-"],
[template="spring"] button:hover i[class ~= "fa-"]
{   
   -webkit-animation: mavryx-pulse 1s linear infinite;
   -moz-animation: mavryx-pulse 1s linear infinite;
   animation: mavryx-pulse 1s linear infinite;
}  

[template="spring"] .btn.with-icon {
    display: inline-flex;
    align-items: center;
}
[template="spring"] .btn.with-icon i {
    color: var(--main-btn-secondary-color);
    margin-right: 8px;
    padding: 3px 0;
    font-size: 19px;
}

[template="spring"] .btn.btn-full-width {
    display: block;
    width: auto;
    white-space: nowrap;
    overflow: hidden;
}


[template="spring"] .btn.btn-highlight {
    background-color: var(--theme-color-steel-blue-300);
    color: var(--theme-color-gray-50);
    text-shadow: 0 0 var(--main-btn-outline-size) var(--main-btn-bgcolor);
}

[template="spring"] .btn.btn-light {
    background-color: var(--primary-bg-color);
}

[template="spring"] .btn.btn-primary  {
    background-color: var(--main-btn-primary-bgcolor);
    color: var(--main-btn-primary-color);
    /* text-shadow: 0 0 var(--main-btn-outline-size) var(--theme-color-gray-800); */
    text-shadow: none;
}
[template="spring"] .btn.btn-secondary {
    background-color: var(--primary-bg-color);
    color: var(--main-btn-primary-color);
    text-shadow: 0 0 var(--main-btn-outline-size) var(--theme-color-gray-500);
}

[template="spring"] .btn.btn-tertiary {
    background-color: var(--main-btn-tertiary-bgcolor);
    color: var(--main-btn-tertiary-color);
    text-shadow: 0 0 var(--main-btn-outline-size) var(--theme-color-gray-500);
}

[template="spring"] .btn.btn-warnig {
    background-color: var(--primary-bg-color);
    color: var(--warning-color);
    text-shadow: 0 0 var(--main-btn-outline-size) var(--theme-color-gray-500);
}

[template="spring"] .btn.btn-info {
    background-color: var(--theme-color-gray-600);
    color: var(--theme-color-gray-50);
    text-shadow: 0 0 var(--main-btn-outline-size) var(--theme-color-gray-700);
}

[template="spring"] .btn.btn-danger {
    color: var(--primary-bg-color);
    background-color: var(--danger-color);
    text-shadow: 0 0 var(--main-btn-outline-size) var(--theme-color-red-500);
    /* background-color: var(--primary-bg-color);
    color: var(--danger-color); */
}


[template="spring"] .btn.btn-small {
    font-size: var(--thame-icon-font-size);
    width: var(--thame-btn-small-icon-width);
    height: var(--thame-btn-small-icon-height);
    line-height: var(--thame-btn-small-icon-height);
    text-align: center;
    padding: 0;
    display: inline-block;
}


[template="spring"] .btn.full-width {
    width: 100%;
}

[template="spring"] .btn.btn-std {
    min-width: var(--btn-std-size);
}

[template="spring"] .btn[disabled],
[template="spring"] .btn:disabled {
    color: var(--disabled-color);
    background-color: var(--disabled-bg-color);
}

/*
    DEFAULT INPUTS
*/
[template="spring"] input:not([type=checkbox]),
[template="spring"] input:not([type=radio]),
[template="spring"] .input {
    border-width: var(--main-border-size);
    border-color: var(--main-border-color);
    border-radius: var(--border-radius);
}

[template="spring"] input:user-invalid:not([type=checkbox]),
[template="spring"] input:user-invalid:not([type=radio]),
[template="spring"] .input:user-invalid {
    border-width: var(--main-border-size);
    border-color: var( --theme-color-red-400);
    border-radius: var(--border-radius);
}


[template="spring"] input[disabled]:not([type=checkbox]),
[template="spring"] input[disabled]:not([type=radio]),
[template="spring"] .input[disabled] {
    background-color: var(--theme-color-gray-100);
    border-width: var(--main-border-size);
    border-color: var(--theme-color-gray-200);
    border-radius: var(--border-radius);
}

[template="spring"] input[readonly]:not([type=checkbox]),
[template="spring"] input[readonly]:not([type=radio]),
[template="spring"] .input[readonly] {
    background-color: var(--theme-color-gray-200);
    border-width: var(--main-border-size);
    border-color: var(--theme-color-gray-300);
    border-radius: var(--border-radius);
    cursor: copy;
}

/*
    DEFAULT TEXTAREA
*/
[template="spring"] textarea,
[template="spring"] .textarea {
    border-width: var(--main-border-size);
    border-color: var(--main-border-color);
    border-radius: var(--border-radius);
    display: block;
    width: auto;
    min-width: 100%;
    min-height: 100px;
    resize: none;
}

[template='spring'] textarea[disabled],
[template='spring'] .textarea[disabled],
[template='spring'] textarea:disabled
[template='spring'] .textarea:disabled
{
    color: var(--disabled-color);
    background-color: var(--disabled-bg-color);
}

[template='spring'] textarea[readonly],
[template='spring'] .textarea[readonly],
[template='spring'] textarea:readonly
[template='spring'] .textarea:readonly
{
    color: var(--disabled-color);
    background-color: var(--disabled-bg-color);
}

/*
    DEFAULT LINKS
*/
[template='spring'] .links {
    color: var(--main-link-color);

    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
}

[template='spring'] .links {

}

[template='spring'] .links.links-primary {
    color: var(--main-link-color);
}

/*
    DEFAULT H*
*/
[template='spring'] h1 {
    color: var(--theme-color-grey-900);
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.6px;
}


[template='spring'] label  {
  /*color: var(--main-label-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;*/
}

[template='spring'] label[required]::after  {
    content: "*";
    color: var(--theme-color-red-400);
    font-size: 1.5em;
    display: inline-block;
    padding: 0 5px;
}

[template='spring'] label.blk  {
    display: block;
    text-align: left;
}

[template='spring'] label.strong  {
    font-size: 19px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

[template='spring'] input:not(type="submit")  {
    color: var( --main-text-color);
    font-size: 14px;
    font-style: normal;
    /* font-weight: 600; */
    line-height: normal;
}





[template='spring'] [layout='center'] .main-footer {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   text-align: center;

}

[template='spring'] [layout='center'] .main-footer ul,
[template='spring'] [layout='center'] .main-footer ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}

[template='spring'] [layout='center'] .main-footer ul {
    display: inline-block;
    width: 100%;
    max-width: 440px;
    background-color: var(--main-bg-color);
}

[template='spring'] [layout='center'] .main-footer ul li {
    display: inline-block;
    max-width: 120px;
    width: 32%;
    padding: 20px 0;
}

/**
    PARTS
**/


[template='spring'] [layout='default'] .menu-list,
[template='spring'] [layout='default'] .menu-list li {
    list-style: none;
    padding: 0;
    margin: 0;
}

[template='spring'] [layout='default'] .menu-list li a {
    text-decoration: none;
    color: var(--main-icons-color);
}

[template='spring'] [layout='default'] .menu-list li .icon {
       color: var(--main-icons-invert-color);
}

[template='spring'] [layout='default'] .menu-list li {
    display: block;
}

/**
    VIEWS DEFAULTS
**/

[template='spring'] .view {

    display: block;
    /*
    min-height: calc(100vh - var(--main-size-header));
    min-width: 100%;
    font-size: 15px;
    */
}



/**
TEMPLATE HELPERS
**/
[template='spring'] .container-fluid {
        padding: 0;
}

[template='spring'] .container-full-height  {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;

}

[template='spring'] .container-full-width  {
    width: 100%;
    padding-left: 0;
    padding-right: 0;

}


.viewport-xs .container-full-width  {
  /*  max-width: 100vw;  issue with scroll */

}

[template='spring'] .vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}




/**
PARTS DEFAULTS
**/

[template='spring'] maverix-part[type*='menu'] {
    padding: 0 10px 0 15px;
    display: block;
    max-height: calc(100vh - (var(--header-height) ));
    overflow: auto;
    margin-top: 0px;
}

[template='spring'] .main_menu_header {
    padding: 0 0 0 50px;
    display: block;
    overflow: auto;
    margin-top: 10px;
    color: var(--thame-color-gray-600);
    font-size: var(--typo-b-7-semi-bold-font-size);
    font-weight: var(--typo-b-7-semi-bold-weight);
}

.viewmode-compact [template='spring'] .main_menu_header {
    display: none;
}

[template='spring'] maverix-part[type*='menu'] .menu-list li {
    padding: 10px 0;
    display: block;
}

[template='spring'] maverix-part[type*='menu'] .menu-list li .icon {
    font-size: 1.5em;
    margin-right: 30px;
    display: inline-block;
    text-align: center;
    width: 40px;
    height: 40px;
    vertical-align: center;
}

/**
FRAGMENTS DEFAULTS
**/

[template='spring'] maverix-fragments {
    display: inline-block;
}

/**
EXTRAS DEFAULTS
**/
[template='spring'] .main_background {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
      z-index: 0;
}

[template='spring'] .main_background video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;

}


mavryx-system.system {
    display: none;
}


/**
COMPATIBILITY
**/
mavryx-layout {
   display: block;
}

mavryx-layout[template="vapevista"] {
    padding: 30px;
}



/**
    VIEWS CUSTOMS
**/
[template='spring'] .view.signin,
[template='spring'] .view.signout {
    display: block;
    text-align: center;
}

/**
FRAGMENTS ERROR
**/
[template='spring'] maverix-fragments[type='application-error'] .error_body {

}

[template='spring'] maverix-fragments[type='application-error'] .error_body .error_title {
    display: block;
    background: #df6565;
    font-size: 17px;
    color: #000000;
}
[template='spring'] maverix-fragments[type='application-error'] .error_body .error_mark {
    font-size: 54px;
    font-weight: bold;
    color: #000;
}

[template='spring'] maverix-fragments[type='application-error'] .error_body .error_message {
    display: block;
    padding: 20px;
    background: #222222;
    font-size: 17px;
    color: #cbc1c1;
}

/**
FRAGMENTS SIGNIN
**/

[template='spring'] maverix-fragments[type='application-signin'] {
    display: inline-block;
    width: 100%;
    max-width: 440px;
    padding: 20px;
    background-color: var(--main-bg-color);
    text-align: left;
    max-height: 100vh;
    max-height: 100vh;
    overflow: auto;
    padding-bottom: 75px;
}

[template='spring'] maverix-fragments[type='application-signin'] input {
    height: 70px;
    width: 100%;

    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius:  10px;

    border-color: var(--primary-color);
}

[template='spring'] maverix-fragments[type='application-signin'] .btn {

}

[template='spring'] .spacer {
    display: block;
    margin-bottom: 3em;
}

[template='spring'] .spacer-1 {
    display: block;
    margin-bottom: 3em;
}

[template='spring'] .spacer-2 {
    display: block;
    margin-bottom: 2em;
}

[template='spring'] .spacer-3 {
    display: block;
    margin-bottom: 1em;
}


[template='spring'] maverix-fragments[type='application-error'] {
    background: #ffffff;
    border: 2px solid;
    width: 550px;
    display: block;
    margin: auto;
}
@media only screen and (max-width: 992px) {
    [template='spring'] maverix-fragments[type='application-error'] {
        width: 97%;
        max-width: 550px;
    }
}

[template='spring'] .spacer {
    display: block;
    height: 4em;
}

[template='spring'] .overflow-hiden {
    overflow: hidden;
}

[template='spring'] .text-word-breaking-no {
   white-space: nowrap;
}

[template='spring'] .text-bold {
    font-weight: bold;
}

[template='spring'] .float-left {
    float: left;
}

/**
LISTS
**/


[template='spring'] ul.colour {
    display: block;
    list-style: none;
}

[template='spring'] ul.colour li {
    display: block;
    list-style: none;
    margin-right: 1em;
    margin-left: 1em;
}

[template='spring'] ul.colour li::before {
    content: "•";
    color: inherit;
    font-size: 3em;
    vertical-align: middle;
    padding: 0;
    margin: 0;
    position: relative;
    left: 0;
    top: -0.1em;
    line-height: 1em;
    overflow: hidden;
    height: 0.8em;
    display: inline-block;
    width: 0.5em;

}

[template='spring'] ul.colour li:nth-child(1)::before {
    color: #4882c2;
}

[template='spring'] ul.colour li:nth-child(2)::before {
    color: #ff9e69;
}

[template='spring'] ul.colour li:nth-child(3)::before {
    color: #fdcfa6;
}

[template='spring'] ul.colour li:nth-child(4)::before {
    color: #d190ff;
}

[template='spring'] ul.colour li:nth-child(5)::before {
    color: #ff4e68;
}

span.bullet-spacer {
    display: inline-block;
    padding: 0 15px;
    height: auto;
}

.border-box {
    border-style: var(--btn-std-style);
    border-color: var(--main-btn-border-primary-color);
    border-radius: var(--border-radius);
    border-width: var(--main-border-size);
    margin: var(--component-margin);
    padding: var(--component-content-padding);
}


.viewmode-compact .border-box {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    border-bottom: 0;
}

a.go-back {
    color: var(--main-text-color);
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
}
a.go-back i {
    margin-right: 7px;
}

.max-width-200 {
    max-width: 200px;
}
.min-width-100 {
    min-width: 100px;
}

.avatar.image {
    display: inline-block;
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #efefef;
    border-radius: 10px;
}

.avatar.image.list {
    width: 64px;
    height: 64px;
}

[template='spring'] .mavryx-dom-loader {
    top: calc(50% - 60px);
    display: inline-block;
    min-width: 120px;
    min-height: 120px;
    background: #ffffff;
    border-radius: 50%;
    background-image: url(/v1/static/templates/spring/img/loading.png);
    background-size: 64%;
    background-repeat: no-repeat;
    background-position: center;
    /* box-shadow: 0px 0px 10px 14px #00000040; */
    -webkit-animation: mavryx-spin 1s linear infinite;
    -moz-animation: mavryx-spin 1s linear infinite;
    animation: mavryx-spin 1s linear infinite;
    opacity: 0.5;
    position: absolute;
    left: calc(50% - 60px);
    margin: 20px;
}

[template='spring']  .mvr-loading {
   opacity: 0.5;
   pointer-events: none;
   -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
   user-select: none;
}

[template='spring']  .dev-info {
    
}

[template='spring']  .alert.dev-info {
   vertical-align: top;
   background-color: var(--theme-color-green-100);
   
}

[template='spring']  .alert.dev-info .dev-icon {
    display: inline-block;
    font-size: 2em;

    margin: 0;
    margin-right: 1.5em;
    width: auto;
    height: auto;
    color: var(--theme-color-yellow-100);
}