/*
	CSS file for BLOCO
*/

/*	General	
------------------------------*/

* {
    padding: 0;
    margin: 0;
    outline: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

* html .clearfix,
* html .form-row,
* html .form-group,
*:first-child + html .clearfix,
*:first-child + html .form-row,
*:first-child + html .form-group {
    zoom: 1;
}

body {
    font-family: 'DM Sans', sans-serif !important;
    background: #FAFAFA;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all ease 0.3s;
}

    a:hover {
        text-decoration: underline;
    }

    a img {
        border: 0;
    }

    a svg,
    a path,
    a g {
        transition: all ease 0.3s;
    }

input,
button {
    -webkit-appearance: none;
    transition: all ease 0.3s;
}

.wrapper {
    width: 100%;
    overflow: hidden;
}

.red {
    color: #FC0D1B !important;
}


/*
	 *	Dropdown
	 */
[data-dropdown] {
    cursor: pointer;
}

.dropdown {
    top: 100%;
    min-width: 150px;
    z-index: 100;
    padding: 4px 0px;
    position: absolute;
    background: #FFFFFF;
    box-shadow: 0px 2px 16px rgba(33, 43, 54, 0.08), 0px 0px 0px rgba(6, 44, 82, 0.1);
    border-radius: 3px;
    visibility: hidden;
    opacity: 0;
    transition: all ease 0.3s;
    -webkit-transform: translate3d(0px, 6px, 0px);
    -ms-transform: translate3d(0px, 6px, 0px);
    transform: translate3d(0px, 6px, 0px);
}

    .dropdown ul {
        list-style: none;
    }

        .dropdown ul li {
            text-align: left;
        }

            .dropdown ul li a {
                display: block;
                color: #212B36;
                font-size: 15px;
                line-height: 20px;
                padding: 10px 16px;
                white-space: nowrap;
            }

                .dropdown ul li a:hover {
                    background: #f7f7f7;
                    text-decoration: none;
                }

    .dropdown.select {
        padding: 12px;
        box-sizing: border-box;
    }

        .dropdown.select h5 {
            color: #212B36;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            padding-bottom: 10px;
        }

        .dropdown.select ul + h5 {
            padding-top: 25px;
        }

        .dropdown.select .search {
            display: block;
            width: 100%;
            color: #637381;
            font-family: 'DM Sans';
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            margin-bottom: 20px;
            padding: 8px 13px;
            background: #FFFFFF;
            border: 1px solid #C4CDD5;
            box-sizing: border-box;
            box-shadow: inset 0px 1px 2px rgba(102, 113, 123, 0.21);
            border-radius: 3px;
        }

        .dropdown.select .list {
            min-width: 280px;
            padding-bottom: 5px;
            margin-top: -20px;
        }

        .dropdown.select .search + .list {
            margin-top: 0px;
        }

        .dropdown.select .list.auto-width {
            min-width: 0px;
        }

        .dropdown.select li {
            margin-top: 20px;
        }

        .dropdown.select input[type="checkbox"],
        .dropdown.select input[type="radio"] {
            display: none;
        }

        .dropdown.select label {
            display: block;
            color: #212B36;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            white-space: nowrap;
            position: relative;
            padding-left: 24px;
            cursor: pointer;
        }

            .dropdown.select label:before {
                content: "";
                top: 2px;
                left: 0px;
                display: block;
                width: 16px;
                height: 16px;
                position: absolute;
                background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
                border-radius: 3px;
                border: 1px solid #C4CDD5;
                box-sizing: border-box;
                box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.05);
                cursor: pointer;
            }

        .dropdown.select.radio label:before {
            border-radius: 50%;
        }

        .dropdown.select.radio input:checked + label:before {
            border-color: #5C6AC4;
        }

        .dropdown.select.radio input:checked + label:after {
            content: "";
            top: 6px;
            left: 4px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            position: absolute;
            background: #5C6AC4;
        }

        .dropdown.select.checkbox label:before {
        }

        .dropdown.select.checkbox input:checked + label:before {
            border-color: #5C6AC4;
        }

        .dropdown.select.checkbox input:checked + label:after {
            content: "";
            top: 6px;
            left: 3px;
            width: 10px;
            height: 8px;
            position: absolute;
            background: url('../img/icon-check.svg') no-repeat top left;
        }

.dropdown-form {
    width: 305px;
    text-align: left;
    padding: 22px 12px 10px 12px;
}

    .dropdown-form .buttons-container {
        overflow: hidden;
        margin-top: 25px;
        margin-left: -12px;
        margin-right: -12px;
        padding: 15px 12px 0px 12px;
        border-top: 1px solid #DFE3E8;
        text-align: right;
    }


.dropdown.show {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0px, 0px, 0px);
    -ms-transform: translate3d(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px);
}


/*
	 *	Map
	 */
.map-hover {
    cursor: pointer;
    position: relative;
}

    .map-hover .map-container {
        top: 100%;
        right: 0px;
        width: 250px;
        z-index: 100;
        margin-top: 6px;
        padding: 6px;
        position: absolute;
        background: #FFFFFF;
        box-shadow: 0px 2px 16px rgba(33, 43, 54, 0.08), 0px 0px 0px rgba(6, 44, 82, 0.1);
        border-radius: 3px;
        visibility: hidden;
        opacity: 0;
        transition: all ease 0.3s;
        -webkit-transform: translate3d(0px, 6px, 0px);
        -ms-transform: translate3d(0px, 6px, 0px);
        transform: translate3d(0px, 6px, 0px);
    }

        .map-hover .map-container img {
            display: block;
        }

    .map-hover:hover .map-container {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translate3d(0px, 0px, 0px);
        -ms-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
    }


/*
	 *	Buttons
	 */
.buttons-container {
    font-size: 0px;
}

    .buttons-container .btn + .btn {
        margin-left: 16px;
    }

.btn {
    display: inline-block;
    color: #212B36;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    padding: 8px 12px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
    border: 1px solid #C4CDD5;
    box-sizing: border-box;
    box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.05);
    border-radius: 3px;
    cursor: pointer;
}

    .btn svg {
        display: block;
    }

    .btn:hover {
        text-decoration: none;
        background: #f9fafb;
        background: -moz-linear-gradient(top, #f9fafb 0%, #EDEDED 100%);
        background: -webkit-linear-gradient(top, #f9fafb 0%,#EDEDED 100%);
        background: linear-gradient(to bottom, #f9fafb 0%,#EDEDED 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fafb', endColorstr='#eaeaea',GradientType=0 );
    }

    .btn.blue {
        color: #ffffff;
        background: #316386;
        border: 1px solid #316386;
        box-sizing: border-box;
        box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.1), inset 0px 1px 0px rgba(255, 255, 255, 0.06);
    }

        .btn.blue:hover {
            background: #174566;
        }

    .btn[disabled] {
        cursor: not-allowed;
        opacity: 0.5;
    }

    .btn.btn-cancel {
        color: #FC0D1B;
    }



/*
 	 *	Pagination
	 */
.pagination {
    margin-top: 20px;
}

    .pagination ul {
        list-style: none;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-align-content: flex-start;
        -ms-flex-line-pack: start;
        align-content: flex-start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

        .pagination ul li {
        }

            .pagination ul li + li {
                margin-left: 8px;
            }

            .pagination ul li span,
            .pagination ul li a {
                display: block;
                width: 36px;
                height: 36px;
                color: #637381;
                font-size: 14px;
                line-height: 35px;
                text-align: center;
                background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
                border: 1px solid #C4CDD5;
                box-sizing: border-box;
                box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.05);
                border-radius: 3px;
            }

                .pagination ul li.current span,
                .pagination ul li a:hover {
                    color: #316386;
                    border-color: #316386;
                }

            .pagination ul li.dots span {
                border: 0px;
                background: transparent;
                box-shadow: none;
            }

/*
	 *	Tooltip
	 */
[data-tooltip] {
    cursor: help;
    position: relative;
}

    [data-tooltip]:after {
        content: attr(data-tooltip);
        top: 100%;
        left: 0px;
        width: 250px;
        color: #212B36;
        font-size: 14px;
        line-height: 20px;
        margin-top: 8px;
        padding: 10px;
        z-index: 5;
        position: absolute;
        background: #FFFFFF;
        box-shadow: 0px 2px 16px rgba(33, 43, 54, 0.08), 0px 0px 0px rgba(6, 44, 82, 0.1);
        border-radius: 3px;
        box-sizing: border-box;
        opacity: 0;
        visibility: hidden;
        transition: all ease 0.3s;
    }

    [data-tooltip]:hover:after {
        visibility: visible;
        opacity: 1;
    }


/*
	 *	Content width sidebar
	 */
.with-sidebar {
}

    .with-sidebar .content {
        float: left;
        width: calc(100% - 355px);
    }

        .with-sidebar .content .box {
            background: #FFFFFF;
            box-shadow: 0px 1px 3px rgba(63, 63, 68, 0.15), 0px 0px 0px rgba(63, 63, 68, 0.05);
            border-radius: 3px;
        }

            .with-sidebar .content .box + .box {
                margin-top: 36px;
            }

    .with-sidebar .sidebar {
        float: right;
        width: 320px;
    }


/*
	 *	Align
	 */
.text-right {
    text-align: right !important;
}

.nowrap {
    white-space: nowrap;
}


/*
	 *	Date range picker
	 */
.dropdown .date-range-picker {
    left: -99999px;
    position: absolute;
}

.dropdown .daterangepicker {
    width: 588px;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    overflow: hidden;
    position: relative;
    padding: 16px;
    border: 0px !important;
    border-radius: 0px !important;
    margin-top: 0px !important;
    box-sizing: border-box;
}

    .dropdown .daterangepicker:before,
    .dropdown .daterangepicker:after {
        display: none !important;
    }

    .dropdown .daterangepicker .drp-calendar {
        width: 270px;
        padding: 0px !important;
    }

        .dropdown .daterangepicker .drp-calendar.left .calendar-table {
            padding-right: 0px !important;
        }

        .dropdown .daterangepicker .drp-calendar.right {
            margin-left: 16px;
            margin-bottom: 16px;
        }

    .dropdown .daterangepicker .drp-buttons {
        padding: 16px 0px 0px 0px;
        border-color: #DFE3E8;
    }

        .dropdown .daterangepicker .drp-buttons .btn {
            padding: 8px 12px;
        }

.daterangepicker.single {
    width: 302px !important;
    max-width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box;
}

    .daterangepicker.single .drp-calendar {
        width: 270px;
        max-width: 100% !important;
    }

        .daterangepicker.single .drp-calendar.left {
            padding: 0px !important;
        }

    .daterangepicker.single .calendar-table {
        padding-right: 0px !important;
    }

.daterangepicker .calendar-table tr:first-child th {
    height: 24px !important;
}

.daterangepicker th.month {
    font-size: 16px;
    line-height: 24px;
    padding-bottom: 7px;
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    border: 0px;
    padding: 0px;
    width: 16px;
    height: 24px;
    -webkit-transform: none;
    transform: none;
}

.daterangepicker .calendar-table .prev span {
    background: url('../img/icon-cal-prev.svg') no-repeat left center;
}

.daterangepicker .calendar-table .next span {
    background: url('../img/icon-cal-next.svg') no-repeat left center;
}

.dropdown .daterangepicker thead tr:nth-child(2) th {
    height: auto;
    padding-bottom: 6px;
    color: #637381;
    font-size: 12px;
    line-height: 16px;
    border-bottom: 1px solid rgba(71, 158, 38, 0.08) !important;
}

.daterangepicker .calendar-table td {
    border-collapse: collapse;
    color: #212B36;
    font-size: 14px;
    line-height: 16px;
    height: 38px;
    border: 1px solid rgba(71, 158, 38, 0.08) !important;
}

    .daterangepicker .calendar-table td.active,
    .daterangepicker .calendar-table td.in-range {
        background: rgba(71, 158, 38, 0.08);
    }

.daterangepicker td.available:hover {
    background: rgba(223, 227, 232, 0.3) !important;
}

.daterangepicker th.available:hover {
    background: transparent !important;
}



/*	Header
-------------------------------------------*/

header {
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 1000;
    position: fixed;
    background: #479E26;
    ;
    box-sizing: border-box;
}

    /*
		 *	Logo
		 */
    header .logo {
        float: left;
        display: block;
        width: 320px;
        z-index: 5;
        padding: 14px 0 14px 20px;
        box-sizing: border-box;
        position: relative;
    }

        header .logo svg {
            display: block;
        }


    /*
		 *	Search
		 */
    header .search {
        float: left;
        width: calc(100% - 640px);
        margin-top: 10px;
        position: relative;
    }

        header .search .icon {
            top: 8px;
            left: 10px;
            position: absolute;
        }

        header .search input {
            display: block;
            width: 100%;
            color: #ffffff;
            font-family: 'DM Sans';
            font-size: 14px;
            line-height: 20px;
            border-radius: 3px;
            box-sizing: border-box;
            padding: 8px 0px 8px 40px;
            border: 0px;
            background: rgba(255, 255, 255, 0.18);
        }

            header .search input::-webkit-input-placeholder {
                color: #ffffff;
                opacity: 0.5;
            }

            header .search input::input-placeholder {
                color: #ffffff;
                opacity: 0.5;
            }

            header .search input:-moz-placeholder {
                color: #ffffff;
                opacity: 0.5;
            }

            header .search input::-moz-placeholder {
                color: #ffffff;
                opacity: 0.5;
            }

            header .search input:-ms-input-placeholder {
                color: #ffffff;
                opacity: 0.5;
            }

        header .search .dropdown {
            width: 100%;
            margin-top: 6px;
            padding-bottom: 10px;
        }

            header .search .dropdown h4 {
                color: #637381;
                font-size: 12px;
                line-height: 16px;
                letter-spacing: -0.2px;
                padding: 16px 20px 10px 20px;
            }

            header .search .dropdown ul li a {
                display: block;
                padding-left: 20px;
                padding-right: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            header .search .dropdown ul li a {
                text-decoration: none;
            }


    /*
		 *	User
		 */
    header .user {
        float: right;
        cursor: pointer;
        position: relative;
        padding: 12px 38px 12px 20px;
    }

        header .user .notifications {
            top: 7px;
            left: 42px;
            width: 16px;
            height: 16px;
            color: #ffffff;
            font-size: 12px;
            font-weight: 500;
            line-height: 16px;
            text-align: center;
            position: absolute;
            border-radius: 50%;
            background: #FC0D1B;
        }

        header .user .avatar {
            float: left;
            width: 32px;
            height: 32px;
            color: #ffffff;
            font-size: 18px;
            font-weight: 500;
            line-height: 20px;
            padding-top: 6px;
            text-align: center;
            border-radius: 50%;
            background-color: #316386;
            box-sizing: border-box;
        }

        header .user .name {
            float: left;
            color: #ffffff;
            font-size: 13px;
            font-weight: 500;
            line-height: 20px;
            white-space: nowrap;
            margin-left: 11px;
            margin-top: 6px;
        }

        header .user .arrow {
            float: left;
            margin-top: 15px;
            margin-left: 7px;
        }

        header .user .dropdown {
            right: 35px;
            margin-top: -4px;
        }

    /*
		 *	Bars
		 */
    header .bars {
        display: none;
        float: right;
        cursor: pointer;
        position: relative;
        padding: 20px 20px 15px 20px;
    }

        header .bars .notifications {
            top: 10px;
            right: 8px;
            width: 16px;
            height: 16px;
            color: #ffffff;
            font-size: 12px;
            font-weight: 500;
            line-height: 16px;
            text-align: center;
            position: absolute;
            border-radius: 50%;
            background: #FC0D1B;
        }

    /*
		 *	Bars
		 */
    header .mobile-menu {
        display: none;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        padding: 56px 15px 0 15px;
        position: fixed;
        background: #479E26;
        box-sizing: border-box;
    }

        header .mobile-menu .close {
            top: 20px;
            right: 15px;
            position: absolute;
        }

        header .mobile-menu .head {
            color: #ffffff;
            font-size: 16px;
            line-height: 20px;
            padding-bottom: 25px;
            border-top: 1px solid rgba(223, 227, 232, 0.2);
            border-bottom: 1px solid rgba(223, 227, 232, 0.2);
        }

            header .mobile-menu .head .clearfix {
                font-weight: 500;
                padding: 14px 0 15px 0;
            }

            header .mobile-menu .head .name {
                float: left;
            }

            header .mobile-menu .head .link {
                float: right;
            }

        header .mobile-menu .nav {
            list-style: none;
            padding-top: 30px;
        }

            header .mobile-menu .nav li + li {
                margin-top: 5px;
            }

            header .mobile-menu .nav li a {
                display: block;
                color: #ffffff;
                font-size: 16px;
                font-weight: 500;
                line-height: 24px;
                padding: 8px 0;
            }

                header .mobile-menu .nav li a .badge {
                    display: inline-block;
                    width: 24px;
                    height: 24px;
                    color: #ffffff;
                    font-size: 17px;
                    font-weight: 500;
                    line-height: 23px;
                    text-align: center;
                    border-radius: 50%;
                    background: #FC0D1B;
                    margin-left: 5px;
                }

        header .mobile-menu .bottom {
            left: 15px;
            right: 15px;
            bottom: 0px;
            padding: 20px 0;
            position: absolute;
            border-top: 1px solid rgba(223, 227, 232, 0.2);
            box-sizing: border-box;
        }

            header .mobile-menu .bottom .btn {
                float: left;
                width: calc(50% - 11px);
            }

                header .mobile-menu .bottom .btn.blue {
                    float: right;
                    width: calc(50% - 11px);
                }


/*	Sidebar
-------------------------------------------*/

aside {
    top: 56px;
    left: 0px;
    width: 240px;
    bottom: 0px;
    overflow: auto;
    position: fixed;
    border-right: 1px solid #DFE3E8;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

    /*
		 *	Navigation
		 */
    aside nav {
        padding: 16px 8px 40px 8px;
    }

        aside nav ul {
            list-style: none;
        }

            aside nav ul li a {
                width: 100%;
                height: 32px;
                display: block;
                padding: 6px 6px 6px 8px;
                border-radius: 2px;
                position: relative;
                box-sizing: border-box;
                overflow: hidden;
            }

                aside nav ul li a .icon {
                    float: left;
                    width: 44px;
                    margin-right: 16px;
                }

                    aside nav ul li a .icon svg {
                        display: block;
                        margin: 0 auto;
                    }

                aside nav ul li a .label {
                    float: left;
                    display: block;
                    color: #212B36;
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 20px;
                }

            aside nav ul li.current a {
                background: rgba(49, 99, 134, 0.1);
            }

                aside nav ul li.current a .label {
                    color: #1C2260;
                    font-weight: bold;
                }

            aside nav ul li a:hover {
                background: rgba(49, 99, 134, 0.1);
            }

                aside nav ul li a:hover .label {
                    color: #1C2260;
                }

        aside nav .submenu {
            display: none;
            padding: 22px 0;
            position: relative;
            background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.17) 100%);
            background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.17) 100%);
            background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.17) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#2b000000',GradientType=1 );
        }

            aside nav .submenu:after {
                content: "";
                display: block;
                width: 100%;
                height: 1px;
                bottom: 0px;
                position: absolute;
                background: rgba(87, 106, 148, 0.25);
            }

            aside nav .submenu li a {
                height: 40px;
                padding-left: 60px;
            }

                aside nav .submenu li.current a,
                aside nav .submenu li a:hover {
                    color: #00FFFF;
                }

        aside nav li.current .submenu {
            display: block;
        }


    /*
		 *	Contact
		 */
    aside .contact {
        padding: 0 16px 30px 16px;
    }

        aside .contact h3 {
            color: #212B36;
            font-size: 16px;
            font-weight: 500;
            line-height: 24px;
        }

            aside .contact h3 svg {
                float: left;
                margin-top: 7px;
                margin-right: 9px;
            }

            aside .contact h3 span {
                display: block;
                overflow: hidden;
                position: relative;
            }

        aside .contact p {
            color: #637381;
            font-size: 12px;
            line-height: 16px;
            padding-top: 10px;
        }

        aside .contact .btn {
            display: block;
            margin-top: 15px;
        }



/*	Main
-------------------------------------------*/

main {
    min-height: calc(100vh - 56px);
    margin: 56px 0 0 240px;
}

    main .container {
        padding: 40px 82px;
    }

    main .branch-selector {
        padding: 16px 82px 16px 82px;
        border-bottom: 1px solid #DFE3E8;
    }

        main .branch-selector svg {
            float: left;
            margin-right: 10px;
        }

        main .branch-selector h2 {
            display: inline-block;
            color: #637381;
            font-size: 20px;
            font-weight: 400;
            line-height: 26px;
            letter-spacing: -0.2px;
            margin-right: 8px;
        }

        main .branch-selector .change {
            display: inline-block;
            cursor: pointer;
            color: #5629D7;
            font-size: 12px;
            font-weight: normal;
            line-height: 16px;
            letter-spacing: -0.2px;
            position: relative;
        }

    main h1 {
        color: #212B36;
        font-weight: bold;
        font-size: 28px;
        line-height: 28px;
        letter-spacing: -0.2px;
        margin-bottom: 30px;
    }

    main .head {
        margin-bottom: 30px;
    }

        main .head h1 {
            margin-bottom: 0px;
        }

        main .head p {
            color: #212B36;
            font-size: 16px;
            font-weight: bold;
            line-height: 24px;
            margin-top: 17px;
        }

            main .head p.done {
                padding-left: 30px;
                background: url('../img/icon-check-circle.svg') no-repeat left center;
            }

            main .head p a {
                color: #3E50F2;
            }

        main .head .buttons-container {
            font-size: 0px;
            margin: 15px 0px -15px 0px;
        }

            main .head .buttons-container .left {
                float: left;
            }

            main .head .buttons-container .right {
                float: right;
            }

            main .head .buttons-container .btn {
                float: left;
            }



/*	Forms
-------------------------------------------*/


/*
	 *	Select2
	 */
.select2-container {
    display: block;
    width: auto !important;
}

.select2-container--default .select2-selection--single {
    height: auto;
    border-radius: 3px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
    border: 1px solid #C4CDD5;
    box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.05);
}

.select2-container .select2-selection--single .select2-selection__rendered {
    display: block;
    color: #212B36;
    font-family: 'DM Sans';
    font-size: 14px;
    line-height: 20px;
    padding: 8px 25px 8px 13px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: 13px;
    width: 8px;
    height: 12px;
    margin-top: -6px;
    background: url('../img/icon-select.svg') no-repeat top center / contain;
}

    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        display: none;
    }

.select2-dropdown {
    border: 0px !important;
    background: #FFFFFF;
    box-shadow: 0px 2px 16px rgba(33, 43, 54, 0.08), 0px 0px 0px rgba(6, 44, 82, 0.1);
    border-radius: 3px !important;
}

.select2-container--open .select2-dropdown--below {
    margin-top: 5px;
}

.select2-container--open .select2-dropdown--above {
    margin-top: -5px;
}

.select2-search--dropdown {
    display: none !important;
}

.select2-results__option {
    color: #212B36;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding: 14px 20px 12px 37px;
    position: relative;
}

    .select2-results__option:before {
        content: "";
        top: 15px;
        left: 13px;
        display: block;
        width: 16px;
        height: 16px;
        position: absolute;
        background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
        border-radius: 3px;
        border: 1px solid #C4CDD5;
        box-sizing: border-box;
        box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.05);
        cursor: pointer;
    }

    .select2-results__option:before {
        border-radius: 50%;
    }

.select2-container--default .select2-results__option[aria-selected="true"] {
    color: inherit;
    background-color: transparent;
}

    .select2-container--default .select2-results__option[aria-selected="true"]:before {
        border-color: #5C6AC4;
    }

    .select2-container--default .select2-results__option[aria-selected="true"]:after {
        content: "";
        top: 19px;
        left: 17px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        position: absolute;
        background: #5C6AC4;
    }

.select2-container--default .select2-results__option--highlighted {
    color: inherit !important;
    background-color: transparent !important;
}

.select2-container--default .select2-results__option:hover {
    background: #f7f7f7 !important;
}

/*
	 *	Checkbox
	 */
.checkbox {
}

    .checkbox input {
        display: none !important;
    }

    .checkbox label {
        display: inline-block;
        color: #212B36;
        font-size: 14px;
        line-height: 20px;
        padding-left: 31px;
        position: relative;
        cursor: pointer;
    }

        .checkbox label:before {
            content: "";
            top: 2px;
            left: 0px;
            display: block;
            width: 16px;
            height: 16px;
            position: absolute;
            background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
            border-radius: 3px;
            border: 1px solid #C4CDD5;
            box-sizing: border-box;
            box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.05);
            cursor: pointer;
        }

    .checkbox input:checked + label:before {
        border-color: #5C6AC4;
    }

    .checkbox input:checked + label:after {
        content: "";
        top: 6px;
        left: 3px;
        width: 10px;
        height: 8px;
        position: absolute;
        background: url('../img/icon-check.svg') no-repeat top left;
    }


/*
	 *	Radiobox
	 */
.radiobox {
}

    .radiobox input {
        display: none !important;
    }

    .radiobox label {
        display: inline-block;
        color: #212B36;
        font-size: 14px;
        line-height: 20px;
        padding-left: 31px;
        position: relative;
        cursor: pointer;
    }

        .radiobox label:before {
            content: "";
            top: 2px;
            left: 0px;
            display: block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            position: absolute;
            background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
            border: 1px solid #C4CDD5;
            box-sizing: border-box;
            box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.05);
            cursor: pointer;
        }

    .radiobox input:checked + label:before {
        border-color: #5C6AC4;
    }

    .radiobox input:checked + label:after {
        content: "";
        top: 6px;
        left: 4px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        position: absolute;
        background: #5C6AC4;
    }


/*
	 *	Form section
	 */
.form-section {
    padding: 30px 17px;
}

    .form-section + .form-section {
        border-top: 1px solid #DFE3E8;
    }

    .form-section h4 {
        color: #212B36;
        font-size: 16px;
        font-weight: bold;
        line-height: 24px;
        padding-bottom: 20px;
    }

        .form-section h4 a {
            float: right;
            color: #3E50F2;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            padding-top: 2px;
        }

        .form-section h4 small {
            display: block;
            font-weight: 500;
            color: #637381;
        }

    .form-section.no-border {
        padding-top: 10px;
        border-top: 0px !important;
    }


/*
	 *	Form row
	 */
.form-row {
}

    .form-row + .form-row,
    .form-group + .form-row,
    .form-section + .form-row {
        margin-top: 20px;
    }

    .form-row.half {
        float: left;
        width: calc(50% - 9px);
    }

        .form-row.half + .half {
            float: right;
            margin-top: 0px;
        }

    .form-row.three {
        float: left;
        width: calc(33.33333% - 12px);
    }

        .form-row.three + .three {
            margin-left: 18px;
            margin-top: 0px;
        }

    .form-row > label {
        display: block;
        color: #212B36;
        font-size: 14px;
        line-height: 20px;
        padding-bottom: 5px;
    }

        .form-row > label strong {
            font-weight: 500;
        }

        .form-row > label.placeholder {
            height: 20px;
        }

    .form-row.required > label:after {
        content: "*";
        color: #FC0D1B;
    }

    .form-row > label.featured {
        font-weight: 500;
        padding-bottom: 18px;
    }

    .form-row > label i {
        display: inline-block;
        top: 2px;
        width: 12px;
        height: 12px;
        margin-left: 3px;
        position: relative;
        background: url('../img/icon-info.svg') no-repeat top left;
    }

    .form-row .input-container {
        position: relative;
    }

    .form-row input, .form-row span > input,
    .form-row textarea {
        display: block;
        width: 100%;
        color: #212B36;
        font-family: 'DM Sans';
        font-size: 14px;
        line-height: 20px;
        padding: 8px 13px !important;
        background: #FFFFFF;
        border: 1px solid #C4CDD5;
        box-sizing: border-box;
        box-shadow: inset 0px 1px 2px rgba(102, 113, 123, 0.21);
        border-radius: 3px;
    }

        .form-row input:focus,
        .form-row textarea:focus {
            border: 1px solid #316386;
        }

        .form-row input[disabled],
        .form-row textarea[disabled] {
            color: #8d9398;
            background: #F9FAFB;
            border: 1px solid #C4CDD5;
        }

    .form-row.error input,
    .form-row.error textarea {
        background: #FBEAE5;
        border: 1px solid #BF0711;
    }

    .form-row textarea {
        resize: none;
    }

    .form-row p {
        color: #637381;
        font-size: 12px;
        line-height: 16px;
    }

    .form-row a {
        color: #3E50F2
    }

    .form-row .validation-error {
        color: #BF0711;
        font-size: 12px;
        line-height: 16px;
        padding-left: 19px;
        margin-top: 6px;
        background: url('../img/icon-error.svg') no-repeat 0px 1px;
    }

    .form-row .toggle {
        color: #3E50F2;
        font-size: 14px;
        line-height: 38px;
        cursor: pointer;
    }

        .form-row .toggle + .input-container {
            display: none;
        }

    .form-row .checklist {
        list-style: none;
        padding-top: 5px;
    }

        .form-row .checklist li + li {
            margin-top: 8px;
        }

        .form-row .checklist.horizontal {
            font-size: 0px;
        }

            .form-row .checklist.horizontal li {
                display: inline-block;
                margin-right: 22px;
                margin-bottom: 15px;
            }

                .form-row .checklist.horizontal li .radiobox label {
                    padding-left: 26px;
                }


/*
	 *	Form group
	 */
.form-group {
}

    .form-group + .form-group,
    .form-row + .form-group {
        margin-top: 20px;
    }


/*
	 *	Form footer
	 */
.form-footer {
    text-align: right;
    padding: 20px 16px 30px 16px;
    border-top: 1px solid #DFE3E8;
}

.form-footer {
}


/*
	 *	Form buttons container
	 */
.form-buttons-container {
    font-size: 0px;
    overflow: hidden;
    margin-top: -10px;
    padding: 0 16px 20px 16px;
}

    .form-buttons-container .cancel {
        float: left;
        color: #FC0D1B;
        font-size: 15px;
        line-height: 20px;
        line-height: 36px;
    }

    .form-buttons-container .left {
        float: left;
    }

    .form-buttons-container .right {
        float: right;
    }

    /*.form-buttons-container .btn + .btn {
        margin-left: 20px;
    }*/

    .form-buttons-container .note {
        clear: both;
        font-size: 12px;
        line-height: 20px;
        text-align: right;
        padding-top: 12px;
    }


/*
	 *	Subtitle
	 */
.form-subtitle {
    display: block;
    color: #212B36;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding-top: 30px;
    padding-bottom: 15px;
}


/*
	 *	Filed: PHONE WITH EXT
	 */
.form-row.phone-with-ext {
}

    .form-row.phone-with-ext label {
        display: block;
        color: #212B36;
        font-size: 14px;
        line-height: 20px;
        padding-bottom: 5px;
    }

    .form-row.phone-with-ext .number {
        float: left;
        width: calc(100% - 78px);
    }

    .form-row.phone-with-ext .ext {
        width: 68px;
        float: right;
    }


/*
	 *	Popular categories
	 */
.field-popular-categories {
}

    .field-popular-categories p {
        color: #212B36;
        font-size: 12px;
        line-height: 20px;
    }

    .field-popular-categories ul {
        font-size: 0px;
        list-style: none;
        margin-top: 5px;
    }

        .field-popular-categories ul li {
            display: inline-block;
            color: #3E50F2;
            font-size: 12px;
            line-height: 20px;
        }

            .field-popular-categories ul li + li {
                margin-left: 20px;
            }


/*
	 *	Field: INFO
	 */
.field-info {
    overflow: hidden;
    position: relative;
}

    .field-info svg {
        float: left;
        margin: 6px 10px 0 0;
    }

    .field-info p {
        color: #637381;
        font-size: 14px;
        line-height: 20px;
        position: relative;
        overflow: hidden;
    }


/*
	 *	Field: TYPE SELECTOR
	 */
.field-type-selector {
    padding-bottom: 10px;
}

    .field-type-selector .items {
        padding-top: 15px;
    }

    .field-type-selector .item {
        float: left;
        width: calc(50% - 9px);
    }

        .field-type-selector .item + .item {
            margin-left: 18px;
        }

        .field-type-selector .item input {
            display: none;
        }

        .field-type-selector .item label {
            display: block;
            cursor: pointer;
            padding: 16px;
            background: #FFFFFF;
            box-shadow: 0px 1px 3px rgba(63, 63, 68, 0.15), 0px 0px 0px rgba(63, 63, 68, 0.05);
            border-radius: 3px;
            border: 1px solid transparent;
            box-sizing: border-box;
        }

        .field-type-selector .item span {
            display: block;
            color: #212B36;
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
            padding-left: 26px;
            margin-bottom: 23px;
            position: relative;
        }

            .field-type-selector .item span:before {
                content: "";
                top: 2px;
                left: 0px;
                display: block;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                position: absolute;
                background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
                border: 1px solid #C4CDD5;
                box-sizing: border-box;
                box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.05);
                cursor: pointer;
            }

        .field-type-selector .item input:checked + label span:before {
            border-color: #5C6AC4;
        }

        .field-type-selector .item input:checked + label span:after {
            content: "";
            top: 6px;
            left: 4px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            position: absolute;
            background: #5C6AC4;
        }

        .field-type-selector .item input:checked + label {
            border-color: #5C6AC4;
        }


/*
	 *	Field: SERVICES
	 */
.field-services + .field-services {
    margin-top: 27px;
}

.field-services table {
    width: calc(100% + 32px);
    margin-left: -16px;
    color: #212B36;
    font-size: 14px;
    line-height: 20px;
    margin-top: 15px;
    border-top: 1px solid #DFE3E8;
    border-collapse: collapse;
}

    .field-services table th {
        padding: 11px 0 13px 16px;
        text-align: left;
    }

        .field-services table th.padding-left {
            padding-left: 47px;
        }

    .field-services table td {
        padding: 13px 0 13px 16px;
        border-top: 1px solid #DFE3E8;
    }

        .field-services table td small {
            font-size: 12px;
        }

        .field-services table td strong {
            font-weight: 500;
        }

        .field-services table td svg {
            display: block;
        }

    .field-services table .service-note {
        display: none;
    }

        .field-services table .service-note td {
            padding-top: 0px;
            padding-right: 16px;
            border-top: 0px;
        }

        .field-services table .service-note .btn {
            float: right;
            margin-top: 5px;
        }

        .field-services table .service-note .note {
            color: #637381;
            font-size: 14px;
            line-height: 20px;
        }


/*
	 *	Field: SERVICES SUMMARY
	 */
.field-services-summary {
}

    .field-services-summary > label {
        display: block;
        color: #212B36;
        font-size: 14px;
        line-height: 20px;
        padding-bottom: 5px;
    }

    .field-services-summary table {
        width: calc(100% + 32px);
        margin-left: -16px;
        color: #212B36;
        font-size: 14px;
        line-height: 20px;
        margin-top: 15px;
        border-top: 1px solid #DFE3E8;
        border-collapse: collapse;
    }

        .field-services-summary table th {
            padding: 11px 0 13px 16px;
            text-align: left;
        }

            .field-services-summary table th.padding-left {
                padding-left: 47px;
            }

            .field-services-summary table th:last-child {
                padding-right: 16px;
            }

        .field-services-summary table td {
            padding: 13px 0 13px 16px;
            border-top: 1px solid #DFE3E8;
        }

            .field-services-summary table td small {
                font-size: 12px;
            }

            .field-services-summary table td strong {
                font-weight: 500;
            }

            .field-services-summary table td svg {
                display: block;
            }

        .field-services-summary table tr td:last-child {
            padding-right: 16px;
        }

        .field-services-summary table td .actions {
            display: inline-block;
            top: 3px;
            position: relative;
            margin-left: 3px;
            padding: 5px;
        }

        .field-services-summary table .title-row td {
            font-weight: 500;
            padding-bottom: 5px;
            border-top: 1px solid #DFE3E8;
        }

        .field-services-summary table .title-row + tr td {
            border-top: 0px;
        }

        .field-services-summary table .title-row td svg {
            top: 2px;
            margin-left: 4px;
            display: inline-block;
            position: relative;
        }

        .field-services-summary table tr + tr td {
            border-top: 1px solid #DFE3E8;
        }

        .field-services-summary table tr.green td {
            background: rgba(75, 138, 38, 0.1);
        }

    .field-services-summary tfoot {
        font-weight: 500;
    }

    .field-services-summary table td .size {
        width: 105px;
        display: inline-block;
    }



/*
	 *	Field: ESTIMATE TOTAL
	 */
.field-total {
    color: #212B36;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    margin-top: -13px;
    border-top: 1px solid #DFE3E8;
    padding-top: 12px;
    padding-bottom: 25px;
}

    .field-total.padding-right {
        padding-right: 48px;
    }

    .field-total small {
        font-size: 12px;
    }


/*
	 *	Field: TERMS
	 */
.field-terms {
    padding-bottom: 30px;
}

.form-section + .field-terms {
    margin-top: -15px;
}

.field-terms .checkbox {
    width: 100%;
    max-width: 347px;
    float: right;
    padding: 0 16px;
    box-sizing: border-box;
}

    .field-terms .checkbox label {
        font-size: 12px;
    }


/*
	 *	Field: NOTE
	 */
.field-note {
}


/*
	 *	Field: REPEATER
	 */
.field-repeater {
}

    .field-repeater .item {
        padding-top: 30px;
    }

        .field-repeater .item h4 {
            padding-bottom: 10px;
        }

            .field-repeater .item h4 .remove {
                display: inline-block;
                top: 2px;
                cursor: pointer;
                margin-left: 5px;
                position: relative;
            }

    .field-repeater .add {
        display: inline-block;
        margin-top: 9px;
        color: #3E50F2;
        font-size: 14px;
        line-height: 20px;
    }


/*
	 *	Others
	 */
.least-1-phone {
    color: #637381;
    font-size: 14px;
    line-height: 20px;
    padding: 35px 0 17px 0;
}


/*
	 *	Form review
	 */
.form-review {
}

    .form-review table {
        color: #212B36;
        font-size: 14px;
        line-height: 20px;
    }

        .form-review table tr th,
        .form-review table tr td {
            vertical-align: top;
            padding: 11px 0 10px 0;
        }

            .form-review table tr td:first-child {
                width: 220px;
                font-weight: 500;
            }

        .form-review table tr:first-child td {
            padding-top: 0px;
        }

        .form-review table tr:last-child td {
            padding-bottom: 0px;
        }

        .form-review table tr td a {
            color: #3E50F2;
        }


/*
	 *	Field: IMAGES
	 */
.field-images {
    padding-bottom: 30px;
}

    .field-images .item {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-align-content: center;
        -ms-flex-line-pack: center;
        align-content: center;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
    }

        .field-images .item + .item {
            margin-top: 15px;
        }

        .field-images .item .image {
            width: 100px;
            height: 100px;
            background: #FFFFFF;
            box-shadow: 0px 1px 3px rgba(63, 63, 68, 0.15), 0px 0px 0px rgba(63, 63, 68, 0.05);
            border-radius: 3px;
            padding: 4px;
            box-sizing: border-box;
        }

        .field-images .item .text {
            color: #212B36;
            font-size: 14px;
            line-height: 20px;
            padding-left: 15px;
            -webkit-align-self: center;
            -ms-flex-item-align: center;
            align-self: center;
        }

            .field-images .item .text span {
                color: #637381;
                display: block;
                padding-top: 5px;
            }



/*	Page: DASHBOARD
-------------------------------------------*/

.page-dashboard .container {
    max-width: 650px;
}

.page-dashboard .head {
    display: none;
}

.page-dashboard .welcome h1 {
    margin-bottom: 10px;
}

.page-dashboard .welcome p {
    color: #637381;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.2px;
}

.page-dashboard .notifications-list {
    margin-top: 40px;
}

    .page-dashboard .notifications-list ul li .text {
        padding-right: 20px;
    }

.page-dashboard .buttons-container {
    text-align: right;
    margin-top: 30px;
}



/*	Page: NOTIFICATIONS
-------------------------------------------*/

.notifications-list {
    max-width: 850px;
    background: #FFFFFF;
    box-shadow: 0px 1px 3px rgba(63, 63, 68, 0.15), 0px 0px 0px rgba(63, 63, 68, 0.05);
    border-radius: 3px;
}

    .notifications-list ul {
        list-style: none;
        padding: 0 14px;
    }

        .notifications-list ul li {
            padding: 12px 0px;
            position: relative;
        }

            .notifications-list ul li + li {
                border-top: 1px solid #DFE3E8;
            }

            .notifications-list ul li > a {
                display: block;
                overflow: hidden;
                text-decoration: none;
                background: url('../img/icon-arrow-right.svg') no-repeat right 6px;
            }

                .notifications-list ul li > a:hover {
                    background-position: right 4px top 6px;
                }

            .notifications-list ul li .icon {
                float: left;
                margin-right: 16px;
            }

                .notifications-list ul li .icon svg {
                    display: block;
                }

            .notifications-list ul li .text {
                position: relative;
                overflow: hidden;
                padding-right: 90px;
            }

                .notifications-list ul li .text a {
                    color: #3E50F2;
                }

                    .notifications-list ul li .text a:hover {
                        text-decoration: underline;
                    }

            .notifications-list ul li .time {
                color: #637381;
                right: 0px;
                position: absolute;
            }



/*	Page: LIST (ORDERS, ESTIMATES)
-------------------------------------------*/

.page-list .head {
    overflow: hidden;
    margin-bottom: 30px;
}

    .page-list .head h1 {
        float: left;
        line-height: 36px;
        margin-bottom: 0px;
    }

    .page-list .head .btn {
        float: right;
    }

/*
	 *	Table list
	 */
.table-list {
    background: #FFFFFF;
    border-radius: 3px;
}

    .table-list .filters-container {
        padding: 16px 16px 0px 16px;
    }

        .table-list .filters-container .filters {
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: row;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            -webkit-align-content: flex-start;
            -ms-flex-line-pack: start;
            align-content: flex-start;
            -webkit-align-items: stretch;
            -ms-flex-align: stretch;
            align-items: stretch;
            padding-bottom: 8px;
        }

        .table-list .filters-container .search {
            width: 100%;
        }

            .table-list .filters-container .search input {
                display: block;
                width: 100%;
                color: #212B36;
                font-size: 14px;
                line-height: 20px;
                z-index: 2;
                position: relative;
                padding: 8px 0px 8px 40px;
                background: #FFFFFF url('../img/icon-magnify.svg') no-repeat 14px 10px;
                border: 1px solid #C4CDD5;
                box-sizing: border-box;
                box-shadow: inset 0px 1px 2px rgba(102, 113, 123, 0.21);
                border-radius: 3px 0px 0px 3px;
            }

        .table-list .filters-container .filter {
            color: #212B36;
            font-size: 14px;
            line-height: 20px;
            white-space: nowrap;
            padding: 8px 35px 8px 16px;
            background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
            border: 1px solid #C4CDD5;
          
            box-sizing: border-box;
            box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.05);
            position: relative;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
        }

            .table-list .filters-container .filter:after {
                content: "";
                top: 16px;
                right: 15px;
                width: 10px;
                height: 5px;
                position: absolute;
                background: url('../img/caret-down.svg') no-repeat top left;
            }

        .table-list .filters-container .filter-settings:after {
            top: 11px;
            right: 15px;
            width: 13px;
            height: 13px;
            background: url('../img/icon-cog.svg') no-repeat top left;
        }

        .table-list .filters-container .filter .dropdown {
            right: 0px;
            min-width: 0px;
            margin-top: 5px;
        }

    .table-list .active-filters {
        font-size: 0px;
        padding-top: 10px;
    }

        .table-list .active-filters .tag {
            display: inline-block;
            font-size: 0px;
            overflow: hidden;
            padding: 2px 10px 3px 10px;
            background: #637381;
            border-radius: 14px;
        }

            .table-list .active-filters .tag .label {
                float: left;
                color: #ffffff;
                font-size: 14px;
                line-height: 24px;
            }

            .table-list .active-filters .tag .remove {
                float: left;
                margin-left: 5px;
                padding: 7px 5px 5px 5px;
                position: relative;
                cursor: pointer;
            }

                .table-list .active-filters .tag .remove svg {
                    display: block;
                }

    .table-list .table-container {
        position: relative;
    }

        .table-list .table-container table {
            width: 100%;
        }

            .table-list .table-container table th {
                color: #212B36;
                font-size: 14px;
                font-weight: 500;
                line-height: 20px;
                text-align: left;
                border-bottom: 1px solid #C4CDD5;
                padding: 16px 16px 16px 0px;
            }

                .table-list .table-container table th .sortby {
                    display: inline-block;
                    width: 10px;
                    height: 5px;
                    top: -2px;
                    cursor: pointer;
                    margin-left: 3px;
                    position: relative;
                    background: url('../img/caret-down.svg') no-repeat top left;
                }

                    .table-list .table-container table th .sortby.asc {
                        transform: rotate(180deg);
                    }

            .table-list .table-container table td {
                color: #212B36;
                font-size: 14px;
                line-height: 20px;
                padding: 16px 16px 16px 0px;
            }

                .table-list .table-container table th:first-child,
                .table-list .table-container table td:first-child {
                    padding-left: 16px;
                }

                .table-list .table-container table td a {
                    color: #3E50F2;
                }

            .table-list .table-container table tr:hover td {
                background: rgba(71, 158, 38, 0.1);
            }

            .table-list .table-container table tr + tr td {
                border-top: 1px solid #DFE3E8;
            }

            .table-list .table-container table.clone {
                top: 0px;
                left: 0px;
                z-index: 2;
                position: absolute;
                pointer-events: none;
                display: none;
            }

                .table-list .table-container table.clone th,
                .table-list .table-container table.clone td {
                    visibility: hidden;
                }

                    .table-list .table-container table.clone th:first-child,
                    .table-list .table-container table.clone td:first-child {
                        visibility: visible;
                        background: #ffffff;
                    }


/*	Page: ESTIMATE / REVIEW
-------------------------------------------*/

/*
	 *	Steps
	 */
.steps {
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0px 1px 3px rgba(63, 63, 68, 0.15), 0px 0px 0px rgba(63, 63, 68, 0.05);
    border-radius: 3px;
}

    .steps h3 {
        color: #212B36;
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        padding: 25px 20px 18px 20px;
        border-bottom: 1px solid #DFE3E8;
    }

    .steps ul {
        list-style: none;
    }

        .steps ul li {
            color: #637381;
            font-size: 14px;
            line-height: 20px;
            padding: 22px 20px 18px 20px;
            border-bottom: 1px solid #DFE3E8;
        }

            .steps ul li.current {
                color: #212B36;
                font-size: 16px;
                font-weight: bold;
            }

            .steps ul li.done {
                color: #212B36;
                background: url('../img/icon-check-circle.svg') no-repeat right 20px center;
            }

    .steps .support {
        background: #F9FAFB;
        padding: 22px 20px 23px 20px;
    }

        .steps .support h5 {
            color: #212B36;
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
            padding-bottom: 5px;
        }

        .steps .support p {
            color: #637381;
            font-size: 14px;
            line-height: 20px;
            padding-left: 16px;
            position: relative;
        }

            .steps .support p:before {
                content: "";
                top: 7px;
                left: 0px;
                width: 5px;
                height: 5px;
                border-radius: 50%;
                position: absolute;
                background: #EEC200;
            }

            .steps .support p a {
                color: #007ACE;
            }

    .steps + .btn {
        width: 100%;
        margin-top: 25px;
    }


/*
	 *	Mobile steps
	 */
.mobile-steps {
    margin-left: -15px;
    margin-right: -15px;
    overflow: auto;
    display: none;
}

    .mobile-steps h3 {
        z-index: 2;
        color: #212B36;
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        padding: 15px 15px 0px 15px;
        position: relative;
    }

    .mobile-steps ul {
        padding: 0 15px;
        white-space: nowrap;
        list-style: none;
    }

        .mobile-steps ul li {
            display: inline-block;
            color: #637381;
            font-size: 12px;
            line-height: 20px;
            padding: 17px 0;
        }

            .mobile-steps ul li + li {
                margin-left: 25px;
            }

            .mobile-steps ul li:last-child {
                padding-right: 15px;
            }

            .mobile-steps ul li.current {
                color: #212B36;
                font-weight: 500;
            }

            .mobile-steps ul li.done {
                padding-left: 30px;
                color: #212B36;
                background: url('../img/icon-check-circle.svg') no-repeat center left;
            }


/*
	 *	Mobile footer
	 */
.mobile-footer {
    display: none;
    padding: 10px 15px 20px 15px;
}

    .mobile-footer .btn {
        width: 100%;
    }


/*
	 *	Review
	 */
.page-review .head {
    width: calc(100% - 355px);
}

.review h4 a {
    float: none;
    margin-left: 10px;
}

.review .field-total {
    border-top: 0px;
    padding-top: 3px;
    padding-bottom: 10px;
    margin-top: 0px;
}



/*	Page: ORDER
-------------------------------------------*/

.page-order .field-services-summary table {
    margin-top: 0px;
}

.page-order .form-section:last-child {
    padding-bottom: 0px;
}

/*
	 *	Action links
	 */
.sidebar .links {
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0px 1px 3px rgba(63, 63, 68, 0.15), 0px 0px 0px rgba(63, 63, 68, 0.05);
    border-radius: 3px;
}

    .sidebar .links h3 {
        color: #212B36;
        font-size: 16px;
        font-weight: bold;
        line-height: 20px;
        padding: 23px 20px 18px 20px;
    }

    .sidebar .links ul {
        list-style: none;
    }

        .sidebar .links ul li {
            border-top: 1px solid #DFE3E8;
        }

            .sidebar .links ul li a {
                display: block;
                color: #3E50F2;
                font-size: 14px;
                line-height: 20px;
                padding: 22px 20px 18px 20px;
            }

            .sidebar .links ul li span {
                display: block;
                color: #637381;
                opacity: 0.5;
                font-size: 14px;
                line-height: 20px;
                padding: 22px 20px 18px 20px;
                cursor: not-allowed;
            }

.mobile-actions {
    display: none;
    padding: 17px 0;
}



/*	Page: PRICE SHEET
-------------------------------------------*/

.page-price-sheet .filters-box {
    margin-bottom: 35px;
    padding: 30px 26px 40px 17px;
    background: #FFFFFF;
    box-shadow: 0px 1px 3px rgba(63, 63, 68, 0.15), 0px 0px 0px rgba(63, 63, 68, 0.05);
    border-radius: 3px;
}

    .page-price-sheet .filters-box .form-row {
        float: left;
        width: calc(50% - 75px);
        margin-top: 0px;
        margin-right: 25px;
    }

    .page-price-sheet .filters-box .btn {
        float: left;
        width: 100px;
        margin-top: 25px;
    }

/*
	 *	Tabbed list
	 */
.tabbed-list {
    background: #FFFFFF;
    box-shadow: 0px 1px 3px rgba(63, 63, 68, 0.15), 0px 0px 0px rgba(63, 63, 68, 0.05);
    border-radius: 3px;
}

    .tabbed-list nav {
        overflow: auto;
    }

        .tabbed-list nav ul {
            padding: 0 18px;
            list-style: none;
        }

            .tabbed-list nav ul li {
                float: left;
                cursor: pointer;
                color: #637381;
                font-size: 14px;
                font-weight: 500;
                line-height: 20px;
                padding: 21px 0 11px 0;
                border-bottom: 3px solid transparent;
            }

                .tabbed-list nav ul li + li {
                    margin-left: 35px;
                }

                .tabbed-list nav ul li.active {
                    color: #212B36;
                    border-color: #316386;
                }

    .tabbed-list table {
        margin: 0;
        padding: 0;
        width: 100%;
        overflow: hidden;
    }

        .tabbed-list table td {
            color: #212B36;
            font-size: 14px;
            line-height: 20px;
            padding: 11px 18px 13px 18px;
            border-top: 1px solid #DFE3E8;
        }

            .tabbed-list table td strong {
                font-size: 16px;
                font-weight: bold;
            }

        .tabbed-list table tr.header td {
            padding-top: 21px;
        }

        .tabbed-list table tr.alt td {
            background: rgba(99, 115, 129, 0.03)
        }

    .tabbed-list .mobile-switcher {
        display: none;
        left: 0px;
        right: 0px;
        bottom: 0px;
        padding: 14px 0;
        position: fixed;
        background: #FFFFFF;
        box-shadow: 0px -4px 8px rgba(63, 63, 68, 0.1);
    }

        .tabbed-list .mobile-switcher .checklist {
            font-size: 0px;
            text-align: center;
            list-style: none;
        }

            .tabbed-list .mobile-switcher .checklist li {
                display: inline-block;
            }

                .tabbed-list .mobile-switcher .checklist li + li {
                    margin-left: 30px;
                }


/*	Page: REWARDS
-------------------------------------------*/

.page-rewards .content .box {
    color: #212B36;
    font-size: 14px;
    line-height: 20px;
    padding: 30px 17px 40px 17px;
}

    .page-rewards .content .box > *:first-child,
    .page-rewards .content .box .mobile-banner + * {
        padding-top: 0px !important;
    }

.page-rewards .content p {
    padding-top: 20px;
}

.page-rewards .content h2 {
    color: #212B36;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    padding-top: 40px;
}

.page-rewards .content a {
    color: #3E50F2;
}

.banner img {
    display: block;
    margin: 0 auto;
}

.mobile-banner {
    display: none;
    margin-bottom: 30px;
}

    .mobile-banner img {
        display: block;
        margin: 0 auto;
    }


/*	Page: LOGIN
-------------------------------------------*/

.page-login header {
    font-size: 0px;
    text-align: center;
}

    .page-login header .logo {
        width: auto;
        float: none;
        padding-left: 0px;
        display: inline-block;
    }

.page-login main {
    margin-left: 16px;
    margin-right: 16px;
    padding: 40px 0;
}

.page-login .login-wrapper {
    max-width: 580px;
    margin: 0 auto;
}

    .page-login .login-wrapper .box {
        margin-bottom: 50px;
        padding: 40px 36px 36px 36px;
        background: #FFFFFF;
        box-shadow: 0px 1px 3px rgba(63, 63, 68, 0.15), 0px 0px 0px rgba(63, 63, 68, 0.05);
        border-radius: 3px;
    }

        .page-login .login-wrapper .box h2 {
            color: #212B36;
            font-size: 28px;
            font-weight: bold;
            line-height: 28px;
            letter-spacing: -0.2px;
            margin-bottom: 25px;
        }

        .page-login .login-wrapper .box form {
            max-width: 264px;
            margin: 0 auto;
        }

            .page-login .login-wrapper .box form .checkbox label {
                font-size: 12px;
                padding-left: 25px;
            }

            .page-login .login-wrapper .box form .btn {
                width: 100%;
                margin-top: 25px;
                margin-bottom: 25px;
            }

        .page-login .login-wrapper .box .links {
            font-size: 0px;
            text-align: center;
        }

            .page-login .login-wrapper .box .links a {
                color: #3E50F2;
                font-size: 12px;
                line-height: 20px;
            }

                .page-login .login-wrapper .box .links a + a:before {
                    content: "";
                    display: inline-block;
                    top: -3px;
                    width: 3px;
                    height: 3px;
                    margin: 0 15px;
                    background: #C4CDD5;
                    border-radius: 50%;
                    position: relative;
                }



/*	Page: SIMPLE
-------------------------------------------*/

.page-simple header {
    font-size: 0px;
    text-align: center;
}

    .page-simple header .logo {
        width: auto;
        float: none;
        padding-left: 0px;
        display: inline-block;
    }

.page-simple main {
    margin-left: 16px;
    margin-right: 16px;
    padding: 40px 0;
}

.page-simple .simple-wrapper {
    max-width: 580px;
    margin: 0 auto;
}

.page-simple .simple-wrapper .box {
    margin-bottom: 50px;
    padding: 40px 36px 36px 36px;
    background: #FFFFFF;
    box-shadow: 0px 1px 3px rgba(63, 63, 68, 0.15), 0px 0px 0px rgba(63, 63, 68, 0.05);
    border-radius: 3px;
}

.page-simple .simple-wrapper .box h2 {
    color: #212B36;
    font-size: 28px;
    font-weight: bold;
    line-height: 28px;
    letter-spacing: -0.2px;
    margin-bottom: 25px;
}

.page-simple .simple-wrapper .box form {
    max-width: 264px;
    margin: 0 auto;
}

.page-simple .simple-wrapper .box form .checkbox label {
    font-size: 12px;
    padding-left: 25px;
}

.page-simple .simple-wrapper .box form .btn {
    width: 100%;
    margin-top: 25px;
    margin-bottom: 25px;
}

.page-simple .simple-wrapper .box .links {
    font-size: 0px;
    text-align: center;
}

.page-simple .simple-wrapper .box .links a {
    color: #3E50F2;
    font-size: 12px;
    line-height: 20px;
}

.page-simple .simple-wrapper .box .links a + a:before {
    content: "";
    display: inline-block;
    top: -3px;
    width: 3px;
    height: 3px;
    margin: 0 15px;
    background: #C4CDD5;
    border-radius: 50%;
    position: relative;
}

/*	Popup
-------------------------------------------*/

.popup {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 9005;
    overflow: auto;
    position: fixed;
    background: rgba(33, 43, 57, 0.75);
    opacity: 0;
    visibility: hidden;
    transition: all ease 0.3s;
}

    .popup.show {
        opacity: 1;
        visibility: visible;
    }

    .popup .inner {
        display: table;
        width: 100%;
        height: 100vh;
        vertical-align: middle;
    }

        .popup .inner .tr {
            padding: 20px;
            display: table-cell;
            vertical-align: middle;
        }

    .popup .box {
        max-width: 580px;
        margin: 0 auto;
        padding: 29px 17px 16px 17px;
        position: relative;
        background: #FFFFFF;
        border: 1px solid rgba(151, 151, 151, 0.25);
        box-shadow: 2px 2px 26px 0 rgba(0,0,0,0.07);
        box-sizing: border-box;
    }

        .popup .box h2 {
            font-size: 16px;
            line-height: 24px;
            padding-bottom: 20px;
        }

        .popup .box .buttons-container {
            overflow: hidden;
            margin-left: -17px;
            margin-right: -17px;
            padding: 0 17px;
            padding-top: 14px;
            border-top: 1px solid #DFE3E8;
        }

            .popup .box .buttons-container .right {
                float: right;
            }



/*	Responsive
-------------------------------------------*/

@media (max-width: 1280px) {
    header .logo {
        width: 280px;
    }

    main .container {
        padding: 40px;
    }

    main .branch-selector {
        padding-left: 40px;
        padding-right: 40px;
    }

    .with-sidebar .content {
        width: calc(100% - 295px);
    }

    .with-sidebar .sidebar {
        width: 270px;
    }

    .form-row.half {
        width: 100%;
    }

        .form-row.half + .half {
            margin-top: 20px;
        }

    .form-row > label.placeholder {
        display: none;
    }

    .form-row.field-note {
        margin-top: 10px !important;
    }

    .form-row .toggle {
        line-height: 16px;
        margin-top: -10px;
    }

    .page-review .head {
        width: calc(100% - 295px);
    }
    .form-buttons-container .right {
        float: none;
    }

    
}

@media (max-width: 1100px) {
    .page-review .head {
        width: 100%;
    }

    .page-review .with-sidebar .content {
        width: 100%;
    }

    .table-list .filters-container .filters {
     
        display: block !important;
   
      
    }

    .table-list .filters-container div {
        margin-bottom:4px;
    }
}

@media (max-width: 1023px) {
    header .logo {
        width: 132px;
    }

    header .search {
        width: calc(100% - 192px);
    }

    header .user {
        display: none;
    }

    header .bars {
        display: block;
    }

    header .mobile-menu.show {
        display: block;
    }

    aside {
        display: none;
    }

    main {
        margin-left: 0px;
    }

        main .container {
            padding: 30px 20px;
        }

        main .branch-selector {
            padding-left: 20px;
            padding-right: 20px;
        }

    .page-dashboard .container {
        max-width: 100%;
    }

    .notifications-list {
        max-width: 100%;
    }
    .multicratelink {
        display: none !important;
    }
}

@media (max-width: 768px) {
    header .logo {
        padding-left: 15px;
        width: 127px;
    }

    header .search {
        width: calc(100% - 187px);
        position: static;
    }

        header .search > div:first-child {
            position: relative;
        }

        header .search .dropdown {
            left: 15px;
            right: 15px;
            width: auto;
        }

    main .container {
        padding: 10px 15px;
    }

    main .branch-selector {
        display: none;
    }

    main .head {
        padding: 0px 15px 10px 15px;
        margin-bottom: 0px !important;
        margin-left: -15px;
        margin-right: -15px;
        border-bottom: 1px solid #DFE3E8;
        z-index: 2;
        position: relative;
    }

        main .head h1 {
            font-size: 20px;
            font-weight: 400;
        }

        main .head .buttons-container {
            padding-bottom: 20px;
        }

    .table-list {
        margin-left: -15px;
        width: calc(100% + 30px);
    }

        .table-list .filters-container .filter:not(.filter-settings) {
            display: none;
        }

        .table-list .table-container .table-scroller {
            overflow-y: hidden;
            overflow-x: auto;
        }

        .table-list .table-container table.clone {
            display: block;
        }

            .table-list .table-container table.clone th, .table-list .table-container table.clone td {
                border-right: 1px solid #DFE3E8;
            }

        .table-list .table-container table th, .table-list .table-container table td {
            padding-left: 15px;
            padding-right: 15px;
            white-space: nowrap;
        }

    .pagination ul li.dots span {
        width: 20px;
    }

    .with-sidebar .content {
        width: calc(100% + 30px) !important;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: -30px;
    }

    .with-sidebar .sidebar {
        display: none;
    }

    .form-review table tr td:first-child {
        width: 205px;
    }

    .mobile-steps, .mobile-footer, .mobile-actions {
        display: block;
    }

    .page-notifications .notifications-list {
        margin-left: -15px;
        width: calc(100% + 30px);
        box-shadow: none;
        max-width: 100%;
    }

        .page-notifications .notifications-list ul {
            padding: 0px;
        }

            .page-notifications .notifications-list ul li {
                padding: 16px 15px 18px 15px;
            }

                .page-notifications .notifications-list ul li .text {
                    padding-right: 0px;
                }

                .page-notifications .notifications-list ul li .time {
                    position: static;
                    display: block;
                    margin-top: 6px;
                }

    .page-dashboard .head {
        display: block;
        margin-bottom: 32px;
    }

    .mobile-banner {
        display: block;
    }

    .page-price-sheet {
        padding-bottom: 50px;
    }

        .page-price-sheet .filters-box {
            margin-left: -15px;
            width: calc(100% + 30px);
            margin-top: -1px;
            z-index: 0;
            max-width: 100%;
            padding: 5px 15px 25px 15px;
        }

            .page-price-sheet .filters-box .form-row {
                float: none;
                margin-top: 20px;
                width: 100%;
            }

            .page-price-sheet .filters-box .btn {
                margin-top: 20px;
                float: right;
            }

    .tabbed-list {
        margin-left: -15px;
        width: calc(100% + 30px);
    }

        /*.tabbed-list table td:nth-child(3) {
            display: none;
        }*/

        .tabbed-list .mobile-switcher {
            display: block;
             
        }

        .tabbed-list table td:nth-child(2),
        .tabbed-list table td:nth-child(4) {
            text-align: right;
        }
        .tabbed-list.show-origin table td:nth-child(3) {
            display: none;
        }
        .tabbed-list.show-origin table td:nth-child(4) {
            display: none;
        }
        .NoPricingData {
            display: none;
        }
     


        .tabbed-list.show-destination table td:nth-child(1)  {
            display: none;
        }
        .tabbed-list.show-destination table td:nth-child(2) {
            display: none;
        }
       

    .field-services-summary table td .actions .dropdown {
        right: 0px;
         
    }
    .page-list .head .btn {
        float: left;
        margin-top: 12px;
    }

   
}

@media (max-width: 480px) {
    main .head .buttons-container .btn {
        width: calc(50% - 10px);
        text-align: center;
    }

        main .head .buttons-container .btn svg {
            margin: 0 auto;
        }

    main .head .buttons-container .left {
        float: none;
        width: 100%;
        overflow: hidden;
    }

    main .head .buttons-container .right {
        float: none;
        width: 100%;
        padding-top: 15px;
    }

    .page-login .login-wrapper .box {
        background: none;
        box-shadow: none;
        padding: 0px;
        max-width: 100%;
    }

        .page-login .login-wrapper .box form {
            max-width: 100%;
        }


   .page-simple .login-wrapper .box {
        background: none;
        box-shadow: none;
        padding: 0px;
        max-width: 100%;
    }

    .page-simple .login-wrapper .box form {
        max-width: 100%;
    }

    

}