/* Variables */

h2.main-title{
    font-size: 22px;
    color: $primary-grey;
    font-weight: bold;
    margin-bottom: 2em;
}

.dplr-logo-header{
    max-width: 130px;
    display: block;
    margin-top: 50px;
    img{
        width: 100%;
    }
}

p{
    color: $primary-grey;
}

// Widths
.w-100{
    width: 100%;
}

.mw-8{
    max-width: 800px
}

.mw-7{
    max-width: 700px;
}

// Font styles
.text-bold{
    font-weight: 700;
}

.text-italic{
    font-style: italic;
}

.semi-bold{
    font-weight: 600;
}

.size-regular{
    font-size: $font-size-regular;
}


.size-medium{
    font-size: $font-size-mid;
}

.size-big{
    font-size: $font-size-big;
    line-height: 24px;
}

.size-huge{
    font-size: $font-size-huge;
}

.bold{
    font-weight: bold;
}

.text-red{
    color: $light-red;
}

.text-white{
    color: $white;
}

.text-regular-grey{
    color: $regular-grey;
}

.text-dark-green{
    color: $dark-green;
}

// Alignment styles
.text-center{
    text-align: center;
}

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

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

a.green-link{
    @include green-link;
}

.pointer{
    cursor: pointer;
}

// Box styles
.d-block{
    display: block;
}
.d-inline-block{
    display: inline-block;
}
.d-none{
    display: none;
}
.hidden{
    visibility: hidden;
}
.visible{
    visibility: visible;
}

.opacity-0{
    opacity: 0;
}

.margin-auto{
    margin-left: auto;
    margin-right: auto;
}

.mb-1{
    margin-bottom: $m1;
}

.mb-2{
    margin-bottom: $m2;
}

.mb-3{
    margin-bottom: $m3;
}

.mb-4{
    margin-bottom: $m4;
}

.mt-1{
    margin-top: $m1;
}

.ml-0{
    margin-left: 0;
}

.ml-1{
    margin-left: $m1/2;
}

.pl-0{
	padding-left: 0;
}

.pl-1{
    padding-left: $m1/3;
}

.pt-1{
    padding-top: $m1/3;
}

.pb-1{
    padding-bottom: $m1/3;
}

.pb-3{
    padding-bottom: $m1;
}

.pt-3{
    padding-top: $m1;
}

// Flexbox
.d-flex{
    display: flex;
}

.flex-row{
    flex-direction: row;
}
.flex-column{
    flex-direction: column;
}
.justify-start{
    justify-content: flex-start;
}
.justify-end{
    justify-content: flex-end;
}
.justify-center{
    justify-content: center;
}
.space-between{
    justify-content: space-between;
}
.space-around{
    justify-content: space-around;
}
.space-evenly{
    justify-content: space-evenly;
}
.align-start{
    align-items: flex-start;
}
.align-end{
    align-items: flex-end;
}
.align-center{
    align-items: center;
}
.stretch{
    align-items: stretch;
}
.baseline{
    align-items: baseline;
}
.content-start{
    align-content: flex-start; 
}
.content-end{
    align-content: flex-end;
}
.content-center{
    align-content: center;
}

.flex-grow-1{
    flex-grow: 1;
    flex: 1;
}

.flex-grow-2{
    flex-grow: 2;
}



//Tabs
.nav-tab{
    font-family: $text-family-rg;
    color: $primary-grey;
    &.nav-tab-active{
        color: $primary-grey;
    }
}

.dplr-tab-content{
    padding: 43px 10px;
    font-family: $text-family-rg;
    font-size: $font-size-regular;
}

//popup
&.ui-dialog-content{
    p{
        img{
            float: right;
            margin: 10px 10px 0px 0px;
        }
    }
}

@-webkit-keyframes spin{
    0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}
}

@keyframes spin{
    0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}
}

@-webkit-keyframes counterspin{
    0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(-359deg);transform:rotate(-359deg)}
}

@keyframes counterspin{
    0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(-359deg);transform:rotate(-359deg)}
}

@-webkit-keyframes dp-preloader-spin{
    to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}

@-webkit-keyframes flash{
    0%,50%,to{opacity:1}25%,75%{opacity:0}
}

@keyframes dp-preloader-spin{
    to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}

@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}