//
// Base CSS File - Standard Desktops & CSS Default ~960px
// --------------------------------------------------

// Grid Variables
// -------------------

@containerWidth: 960px;
@columnCount:    12;
@gutterRatio:    25%;
@paddingRatio:   100%;


// Type Variables
// -------------------

@fontSize: 15px;
@lineHeight: 140%;


// Base Styles
// -------------------

@import "_reset.less";

@import "_variables.less";
@import "_mixins.less";

@import "_layout.less";
@import "_type.less";
@import "_forms.less";
@import "_buttons.less";
@import "_menus.less";


// Custom Styles
// -------------------
body {
	background-color: @primaryColor; /* Fallback if no value is set in PHP */
}

h5 {
    font-size: 1em;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.verticle-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;
}

.main-content {
	background-color: white;
	border-radius: 5px;
	position: relative;
}

.above {
    text-align: center;
    margin-top: -50px;
}

.logo {
	float: left;
	padding-top: 0.45em;
    padding-right: 1em;
}

.head-text {
	display: flex;
} 

.head {
	width: 26em;
    margin: auto;
    width: 100%;
    padding: 1em;
    width: 65%;
}

.material-icons {
    font-size: 2em;
}

.field-section {
	margin: auto;
    width: 80%;
    padding-bottom: 1em;
}

.link-section {
	margin: auto;
    width: 60%;
    padding-bottom: 1em;
}

input.url,
input.short-url {
	background-color: @baseColor;
    padding-right: 50px;
    display: inline;
    vertical-align: top;
    width: 87%;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    height: 3em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #000;

    &:hover,:active, &:focus {
    	border: 1px solid @baseColor;
    }
}

input:focus::-webkit-input-placeholder { .transition(color 0.2s ease-in-out);color:transparent; }
input:focus:-moz-placeholder { .transition(color 0.2s ease-in-out);color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { .transition(color 0.2s ease-in-out);color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { .transition(color 0.2s ease-in-out);color:transparent; } /* IE 10+ */

input::-webkit-input-placeholder { .transition(color 0.2s ease-in-out); }
input:-moz-placeholder { .transition(color 0.2s ease-in-out); } /* FF 4-18 */
input::-moz-placeholder { .transition(color 0.2s ease-in-out); } /* FF 19+ */
input:-ms-input-placeholder { .transition(color 0.2s ease-in-out); } /* IE 10+ */

.customise-button {
    font-size: 0.8em;
    color: #757575;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    padding: 5px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s all;

    img {
        width: 18px;
        margin-top: 1px;
    }

    &:hover {
        background: #ebebeb;
    }
}

.customise-container {
    margin-top: 20px;
    padding-left: 5px;

    span {
        display: inline-block;
        padding-top: 1px;
        font-family: Montserrat,sans-serif;
    }

    input {
        background-color: @baseColor;
        display: inline;
        vertical-align: top;
        width: 50%;
        border-radius: 6px;
        height: 2em;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 0.8em;
        color: #000;
        &:hover,:active, &:focus {
            border: 1px solid @baseColor;
        }
    }
}

input[type="submit"],
.short-url-button {
	background-color: @primaryColor; /* Fallback if no value is set in PHP */
    margin-left: -50px;
    height: 3em;
    width: 81px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    width: 22%;
    -webkit-border-radius: 0px 6px 6px 0px;
    -moz-border-radius: 0px 6px 6px 0px;
    border-radius: 0px 6px 6px 0px;
	.transition(background-color 0.2s ease-in-out);
    &:hover {
    	background-color: darken(@primaryColor, 10%); /* Fallback if no value is set in PHP */
    }
}

input.short-url {
	width: 80%;
    text-transform: none;
}

.short-url-button {
	width: 30%;
}

.footer {
    position: absolute;
    height: 2.2em;
    padding-top: 0.8em;
	color: white;
	font-family: @headingFont;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1em;
	text-align: center;
    z-index: 99999;
    
    & span {
    	padding-right: 1.5em;
    }

    .footer-links {
        display: inline;
    }

    a {
    	color: white;
    	.transition(color 0.1s ease-in-out);
    	&:hover {
    		text-decoration: none;
    		color: darken(white, 10%)
    	}
    }
}    

.success-screen {
	width: 100%;
	height: 100%;
	background-color: @primaryColor; /* Fallback if no value is set in PHP */
}


.info {
	color: black;
	display: inline-block;
    width: 100%;
    font-family: Montserrat;
    padding-bottom: 2em;
    max-width: 100%;
    overflow-x: scroll;
}

.close {
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	text-align:right;
	padding: 0.3em;
	a {
  		color: black;
  }
}

.spin {
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
}
.spin:hover {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.light {
	font-weight: 400;
}

.error {
    color: #F44336;
    text-align: center;

    h5 {
        overflow-wrap: break-word;
    }
}