@ma-ss: 10px;
@ma-s : 20px;
@ma-m : 30px;
@ma-g : 40px;

@pa-s : 10px;
@pa-m : 30px;
@pa-g : 40px;

@import '/_assets/_less/colors.less';

.header-escape {

    margin-top: 50px;

}

.no-resize{
    resize: none !important;
}

.pointer {
    cursor: pointer;
}

.center {
    text-align: center;
}

.text-center {
    text-align: center;
}

.text-start {
    text-align: start;
}

.upper {
    text-transform: uppercase;
}

.absolute-bottom {
    position: absolute;
    bottom: 0px;
}

.fixed{
    position: fixed;
}

.absolute-right{
    position: absolute;
    right: 0;
}

.max-w100percent {
    max-width: 100%;
}

.iw100percent {
    width: 100% !important;
}

.w100percent {
    width: 100% !important;
}

.w95percent {
    width: 95%;
}

.w80percent {
    width: 80% !important;
}

.w85percent {
    width: 80%;
}

.w75percent {
    width: 75%;
}

.w70percent {
    width: 70%;
}

.w60percent {
    width: 60% !important;
}

.w50percent {
    width: 50%;
}

.w45percent {
    width: 45%;
}

.w40percent {
    width: 40%;
}

.w30percent {
    width: 30%;
}

.w25percent {
    width: 25% !important;
}

.w15percent {
    width: 15% !important;
}

.notification-green::after {
    
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: greenyellow;
    position: absolute;
    right: -10px;
    top: -10px;

}

.svg-image {

    -webkit-mask-size: contain !important;
    -webkit-mask-position: center !important;
    background-position: center;

}

.bold {

    font-weight: 600;

}

.scroll-smooth{

    scroll-behavior: smooth;
    
}

.scroll-none{

    overflow: hidden !important;
    
}

/* Loader */
.loader {
    display: inline-block;
    width: 80px;
    height: 80px;
}

.loader::after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid #4EBD9E;
    border-color: #4EBD9E transparent #4EBD9E transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

.loader-white::after{
    border: 6px solid white;
    border-color: white transparent white transparent;
}

.loader.small {
    width: 20px !important;
    height: 45px !important;
}

.loader.medium {
    width: 40px !important;
    height: 45px !important;
}

.loader.medium::after {
    width: 40px !important;
    height: 40px !important;

    border-radius: 50%;
}

.loader.pageEdge {
    
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 2px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border: 1px solid #F1F1F1;

    width: 80px !important;
    height: 80px !important;
}

.page-loader-container{
    position: fixed;
    z-index: 4;
    background-color: rgba(0, 0, 0, 0.2);
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader.small::after {
    width: 20px !important;
    height: 20px !important;

    border-radius: 50%;
    border: 5px solid #4EBD9E;
    border-color: #4EBD9E transparent #4EBD9E transparent;
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*<div class="loader" ><!--Loader--></div >*/

::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.1);
	border-radius: 10px;
	background-color: white;
}

::-webkit-scrollbar
{
    width: 12px;
    height: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: @blue-flowir;
}

//Width
.w-100p {

    width: 100px;

}

// Margins
.ma-s {

    margin: @ma-s !important;
}

.ma-top-ss {

    margin-top: @ma-ss !important;

}

.ma-top-s {

    margin-top: @ma-s !important;

}

.ma-top-m {

    margin-top: @ma-m !important;

}

.ma-top-g {

    margin-top: @ma-g;

}

.ma-bot-ss {

    margin-bottom: @ma-ss !important;

}

.ma-bot-s {

    margin-bottom: @ma-s !important;

}

.ma-bot-m {

    margin-bottom: @ma-m !important;

}

.ma-bot-g {

    margin-bottom: @ma-g !important;

}

.ma-left-ss {

    margin-left: @ma-ss !important;

}

.ma-left-s{

    margin-left: @ma-s !important;

}

.ma-left-g {

    margin-left: @ma-g !important;

}

.ma-all-s {

    margin: @ma-s !important;

}

.ma-all-m {

    margin: @ma-m !important;

}

.ma-all-g {

    margin: @ma-g !important;

}

.ma-left-g {

    margin-left: @ma-g !important;

}

.ma-right-g {

    margin-right: @ma-g !important;

}

.ma-right-ss {

    margin-right: @ma-ss !important;

}

.ma-right-s {

    margin-right: @ma-s !important;

}

.intern-m-s {

    * {
        margin: 5px;
    }
}

.intern-m-m {

    * {
        margin: 10px;
    }
}

.intern-m-g {

    * {
        margin: @ma-g;
    }
}

.no-vert-m {

    margin-top: 0px !important; 
    margin-bottom: 0px !important;

}

.no-m {

    margin: 0px;

}

// Paddings
.pa-all-g {

    padding: @pa-g;

}

.pa-all-m {

    padding: @pa-m;

}

.pa-all-s {

    padding: @pa-s;

}


/* Flex */
.flex {
    display: flex;
}

.column {
    flex-direction: column;
}

.row{
    flex-direction: row;

}

.align-center {
    align-items: center;
}


.align-start {
    align-items: flex-start !important;
}

.align-end {
    align-items: flex-end;
}

.align-between {
    align-items: space-between;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly{
    justify-content: space-evenly;
}

.justify-start{
    justify-content: start;
}

.justify-end{
    justify-content: flex-end;
}

.wrap{
    flex-wrap: wrap;
}

// Shadows
.shadow {
    -webkit-box-shadow: 2px 3px 6px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 2px 3px 6px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 2px 3px 6px 0px rgba(0, 0, 0, 0.16);
}

//Radius
.radius-total{
    border-radius: 50%;
}

// User Picture
.user-picture {

    background-size: cover;
    background-repeat: no-repeat;

}

.user-picture.rounded {

    border-radius: 50%;

}

.user-picture.small {

    width: 25px;
    height: 25px;

}
.user-picture.medium {

    width: 35px;
    height: 35px;

}
.user-picture.large {

    width: 50px;
    height: 50px;

}

.loading-indicator {

    position: absolute;
    top: 60px;
    right: 47px;

}

.no-justify-content {
    
    justify-content: unset !important;

}

.no-bg{
    background-color: transparent;
}

.no-border{
    border: none !important;
}

.border-blue-flowir-light{
    border: 1px solid #7AC0B6 !important;
}

.intern-ma-2px {

    * {
        margin: 2px !important;
    }

}

.no-a-style {

    color: unset;
    text-decoration: none;
    width: 100%;
    height: 100%;

}

.none{
    display: none !important;
}

.no-ul-style {

    list-style: none;

}

.icon-tooltip-container {
    
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 25px;
    margin-bottom: 15px;

}

.icon-tooltip {
    position: relative;
    top: 10px;
    /* left: -10px; */
    right: 194px;
    cursor: auto;
}

.tooltip-text {
    position: absolute;
    height: auto;
    /* padding: 5px; */
    width: 320px;
    z-index: 1;
    margin-left: -188px;
    margin-top: -4px;
    display: none;
    -webkit-box-shadow: 2px 3px 6px 0px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 2px 3px 6px 0px rgba(0, 0, 0, 0.07);
    box-shadow: 2px 3px 6px 0px rgba(0, 0, 0, 0.07);
    border-radius: 2px;
}

.tooltipTitle{
    font-weight: bold !important;
    padding: 5px;
}

.tooltipBody{
    padding: 5px;
}

.tooltipHeader{
    padding: 5px;
}

.tooltipHeader.outside {

    padding: 5px;

    padding-left: 19px;
    padding-right: 19px;
    
    color: white;

    font-style: italic;
    font-size: 0.9em;

}

.tooltip-text li{
    padding-left: 30px;
    /* background-color: var(--bayer-blue); */
}

.icon-tooltip:hover + .tooltip-text{
    display: block;
}

.tooltip-text:hover{
    display: block;
}

.tooltip-container {

    position: absolute;
    right: 10px;
    top: 10px;

}

.tooltip-container img {

    height: 15px;
    width: 15px;

}

.tooltip-text p {
    font-weight: 100;
    display: flex;
    margin: 5px 5px;
}

.post-error {
    color: #449285;
    font-size: 20px;
    font-weight: bold;
}