/*------------------------------------------------------------------
[Master Stylesheet]

Project:        Fret
Version:        0.2
Last change:    2019-07-09
Customer:       BIJ12
Assigned to:    Pieter de Vries / NIO Communicatie
--------------------------------------------------------------------
--------------------------------------------------------------------
[Color codes]

Black:      #1d1d1b
Red:        #cf6045
Red:hover   #b2482e             ** KRISTY CHECK **
Blue:       #005ea5
Blue:hover  #014275             ** KRISTY CHECK **
Dark Gray:  #999999
Light Gray: #f2f2f2
White:      #ffffff
BG.Blue:    #d4ebf1
--------------------------------------------------------------------
--------------------------------------------------------------------
[Table of contents]

1. Body
2. Signin
3. Form
4. BLock Box
5. Yii2
-------------------------------------------------------------------*/
@import "portal.css";
@import "mobile.css";
@import "print.css";


/*------------------------------------------------------------------
1. Body
------------------------------------------------------------------*/
html,
body {
    margin:0;
    padding:0;
    height:100%;
}

.clearfix::after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    line-height: 22px;
}

a, a:hover, a:visited, a:active {
    color: #1d1d1b;
}

h1 {
    color: #1d1d1b;
    font-size: 23px;
    font-weight: 700;
}

h2 {
    color: #1d1d1b;
    font-size: 28px;
    font-weight: 700;
}

h2.small {
    font-size: 24px;
}

h3 {
    color: #1d1d1b;
    font-size: 16px;
    font-weight: 700;
}

h4 {
    font-size: 16px;
    margin-bottom: 18px;
}

.cursor-pointer {
    cursor: pointer;
}

.color-white,.color-white a {
    color: #ffffff;
}

.color-blue, .color-blue a{
    color: #005ea5!important;
}

.color-red {
    color: #E2511A!important;
}

.background-white {
    background-color: #ffffff;
}

.background-blue {
    background-color: #005ea5;
}

.background-red {
    background-color: #E2511A;
}

.background-green {
    background-color: #336832;
}

.background-orange {
    background-color: #FF9D00;
}

.background-grey {
    background-color: #EBEBEB;
}

.background-linear {
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 75%, rgba(2,94,165,1) 75%, rgba(2,94,165,1) 100%);
}

.margin-5 {
    margin: 5px;
}

.margin-10 {
    margin: 10px;
}

.margin-15 {
    margin: 15px;
}

.margin-20 {
    margin: 20px;
}

.margin-25 {
    margin: 25px;
}

.margin-top-10 {
    margin-top: 5px;
}

.margin-top-5 {
    margin-top: 10px;
}

.margin-top-15 {
    margin-top: 15px;
}

.margin-bottom-5 {
    margin-bottom: 3px!important;
}

.margin-right-15 {
    margin-right: 15px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.margin-right-70 {
    margin-right: 70px;
}

.margin-right-200 {
    margin-right: 200px;
}

.no-margin-left {
    margin-left: 0px;
}

.no-padding-left {
    padding-left: 0px;
}

.no-padding-right {
    padding-right: 0px;
}

.no-margin {
    margin: 0px;
}

.no-margin-top {
    margin-top: 0px;
}

.no-margin-bottom {
    margin-bottom: 0px;
}

.margin-left-25 {
    margin-left: 25px;
}

.margin-right-25 {
    margin-right: 25px;
}


.padding-10 {
    padding: 10px;
}

.padding-15 {
    padding: 15px;
}

.padding-20 {
    padding: 20px;
}

.padding-25 {
    padding: 25px;
}

.padding-30 {
    padding: 30px;
}

.padding-35 {
    padding: 35px;
}

.padding-left-75 {
    padding-left: 75px;
}

.padding-left-90 {
    padding-left: 90px;
}

.border-radius-small {
    border-radius: 12px;
}

.border-radius {
    border-radius: 25px;
}

.border-radius-top {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.border-radius-bottom {
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.spacer-5 {
    height: 5px;
}

.spacer-10 {
    height: 10px;
}

.spacer-15 {
    height: 15px;
}

.spacer-20 {
    height: 20px;
}

.spacer-25 {
    height: 25px;
}

.spacer-30 {
    height: 30px;
}

.spacer-35 {
    height: 35px;
}

.spacer-40 {
    height: 40px;
}

.spacer-50 {
    height: 50px;
}

.spacer-75 {
    height: 75px;
}

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

.font-normal {
    font-weight: normal;
}

.font-light {
    font-weight: 300;
}

.font-weight-400 {
    font-weight: 400!important;
}

.text-bold {
    font-weight: 700;
}

a.link-underline {
    text-decoration: underline;
}

a.link-underline:hover {
    text-decoration: none;
}

.font-size-12,
.btn.font-size-12 {
    font-size: 12px;
}

.font-size-14,
.btn.font-size-14 {
    font-size: 14px;
}

.font-size-16,
.btn.font-size-16 {
    font-size: 16px;
}

.font-size-20 {
    font-size: 20px;
}
.text-truncate {
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}




@media (min-width: 992px) {
    .container {
        width: 1350px;
    }
    label.col-md-12.col-md-2 {
        width: 100% !important;
    }
}

/*------------------------------------------------------------------
1a. Frame
------------------------------------------------------------------*/
.frame {
    min-height:100%;
    position:relative;
}

.frame .signin-frame {
    padding-bottom:80px;	/* Height of the footer */
}
.frame .portal-frame {
    padding-bottom:85px;	/* Height of the footer */
}

.frame footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:85px;			/* Height of the footer */
}

/*------------------------------------------------------------------
2. Signin
------------------------------------------------------------------*/
body.signin {
    background: url('../images/background.jpg') no-repeat center center fixed;
    background-color: rgba(0, 0, 0, 0);
    background-size: auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.header-signin {
    padding-top: 100px;
    margin-bottom: 30px;
}

.header-signin .header-title {
    margin-top: 40px;
    margin-bottom: 0px;
    margin-left: 50px;
    letter-spacing: 0.5px;
}


.signin-errors {
    /*margin: 20px 0;*/
    height: 33px;
}

    .signin-errors .error-message {
        /*border: 2px solid #ed3d3b;*/
        background-color: #ffffff;
        color: #ed3d3b;
        font-weight: 400;
        padding: 0px;
    }

    .signin-errors .error-message img {
        float: left;
        margin-left: 0px;
        margin-right: 11px;
        margin-top: -1px;
    }


.signin-frame {

}

    .signin-frame .close-registration {
        float: right;
        margin-top: -15px;
        margin-right: -35px;
    }

.signin-footer {
    padding: 35px 0px 50px 0px;
}

    .signin-footer .footer-links {
        margin-left: 40px;
        color: #ffffff;
        font-weight: 300;
    }

    .signin-footer .footer-links a {
        color: #ffffff;
        font-weight: 300;
    }


/*------------------------------------------------------------------
3. Forms
------------------------------------------------------------------*/
.form-control {
    display: block;
    width: 100%;
    height: 35px;
    padding: 11px 25px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #1d1d1b;
    text-align: center;
    background-color: #f2f2f2;
    background-image: none;
    border: 0;
    border-radius: 0px;
    -webkit-box-shadow: unset;
    box-shadow: unset;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.form-control[disabled], fieldset[disabled],
.form-control[readonly], fieldset[readonly]{
    cursor: not-allowed!important;
}

select.form-control{
    background: url('../images/arrow_down.png') 96% / 3% no-repeat #eee;
}

.alert-border {
    border: 1px solid #ed3d3b;
}

.form-horizontal .control-label {
    padding-top: 10px;
}

.form-input-white .form-control {
    background-color: #ffffff;
}

.form-input-white select.form-control {
    background-color: #ffffff;
    border: 1px solid #d4ebf1;
    height: 40px;
    padding: 9px 25px 10px 25px;
    text-align: left;
}

.form-horizontal .form-control {
    text-align: left;
    /*height: 40px;*/
    padding: 14px 25px;
}

.form-horizontal .form-control[type=number] {
    padding: 11px 25px;
}

.form-horizontal input[type="file"].form-control{
    padding: 0px;
}

.form-horizontal select.form-control{
    padding: 9px 25px;
}

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #999999;
    opacity: 1; /* Firefox */
}

.form-horizontal .control-label {
    text-align: left;
}

.form-group.required .control-label:after {
    content: ' *';
}

.well .form-control {
    background-color:white;
}

.multiple-input-list .form-control,
.multiple-input-list select.form-control {
    padding: 0 5px;
}

option:disabled {
    color: #e3e3e3!important;
}

.error-summary {
    color: #ed3d3b;
    font-weight: 400;
    margin-bottom: 25px;
    /*padding: 0px;*/
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
select:focus,
.form-control:focus,
.uneditable-input:focus {
    border: 1px solid #999999;
    box-shadow: none;
    outline: 0 none;
}

.btn-block + .btn-block {
    margin-top: 3px;
}

.btn {
    cursor: pointer;
    border: 1px solid transparent;
    font-size: 14px;
    border-radius: 0px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-weight: bold;
}

.btn-big {
    font-size: 16px;
    font-weight: normal;
}

.btn-min-width {
    min-width: 200px;
}
.right-arrow {
    float: right;
}
.btn-primary {
    color: #fff!important;
    background-color: #E2511A!important;
    border:1px solid white;
}
.btn-primary .right-arrow {
    float: right;
    display: inline-block;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    color: #fff!important;
    background-color: #B2482E!important;
    border-color: #B2482E!important;
}

.btn-primary-outline {
    color: #cf6045!important;
    background-color: #ffffff!important;
    border-color: #cf6045!important;

}

.btn-primary-outline:hover, .btn-primary-outline:focus, .btn-primary-outline:active {
    color: #B2482E!important;
    background-color: #ffffff!important;
    border-color: #B2482E!important;
}

.btn-secondary {
    color: #ffffff!important;
    background-color: #005ea5!important;
    border-color: white!important;
}
.btn-secondary .right-arrow {
    float: right;
    display: inline-block;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    color: #ffffff!important;
    background-color: #0E5FA3!important;
    border-color: #0E5FA3!important;
}

.btn-secondary-outline {
    color: #0E5FA3!important;
    background-color: #ffffff!important;
    border-color: #0E5FA3!important;

}

.btn-secondary-outline:hover, .btn-secondary-outline:focus, .btn-secondary-outline:active {
    color: #014275!important;
    background-color: #ffffff!important;
    border-color: #014275!important;
}

@-webkit-keyframes load {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.btn-loading::before {
    width: 15px;
    height: 15px;
    margin: -2px 7px 0 0;
    display: inline-block;
    vertical-align: middle;
    border-top: 2px solid rgba(0,0,0, 0.2);
    border-right: 2px solid rgba(0,0,0, 0.2);
    border-bottom: 2px solid rgba(0,0,0, 0.2);
    border-left: 2px solid #000000;
    content: "";
    border-radius: 100%;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load 0.5s infinite linear;
    animation: load 0.5s infinite linear;
}


.btn-secondary-outline.btn-loading:before {
    border-top-color: rgba(0, 94, 165, 0.2);
    border-right-color: rgba(0, 94, 165, 0.2);
    border-bottom-color: rgba(0, 94, 165, 0.2);
    border-left-color: rgba(0, 94, 165);
}


/*------------------------------------------------------------------
4. Block box
------------------------------------------------------------------*/
.block-box {
    /*padding: 25px 50px 35px 50px;*/
    padding: 25px 50px;
    margin-bottom: 30px;
}



.block-box .block-title {
    color: #1d1d1b;
    font-size: 23px;
    font-weight: 700;
    margin: 0px 0px 25px 0px;
}

.block-box.opacity-90 {
    background-color: rgba(255,255,255,0.90);
}

.block-box h3 {
    margin: 0px 0px 15px 0px;
}

.block-box p:last-child,
.block-box div.help-block:last-child {
    margin: 0px;
}

.block-box .block-button-img img {margin-bottom: 15px;}

.ql-toolbar.ql-snow {
    background-color: #fff;
}

/*------------------------------------------------------------------
5. Yii2
------------------------------------------------------------------*/

.grid-view .empty {
    padding-left: 27px;
}
.grid-view input[type=text],
.grid-view select {
    padding: 5px;
    width: 90%;
}

.input-group-addon.password-toggle-addon {
    border: none;
    border-left: 2px solid #fff !important;
}

.kv-password > .input-group > input[type=password] {
    padding-left: 66px;
}
.form-horizontal .kv-password > .input-group > input[type=password] {
    padding-left: 25px;
}

.password-toggle-addon input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.password-toggle-addon label {
    padding: 0;
    margin: 0;
}
.password-toggle-addon label img {
    height : 1em;
    cursor: pointer;
    opacity: 0.6;
}

.password-toggle-addon label:hover img {
    opacity: 0.8;
}
.password-toggle-addon label input:checked + img {
    opacity: 1;
}

.ticket-content {
    background: white;
}