//@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700, light');

// Trailer and truck colors
$trailer_colors:
    'FF5454', '6D82C7', '56AB62', '3C3C3C', '6FDFE4', 'F89A3D', '1E9DF3',
    '59A5A5', 'A468FF', 'A34CB8', '4A9A4F', 'F3D542', '3074D3';
$truck_colors:
    '97D568', 'FFB74D', 'E57373', '68C3FF', 'BA68C8', '59A5A5', '415FC1';
$dispatch-status-colors:
    '919191', '008496', '6C6C6C', 'F276EF', 'FF9800', '3074D3', '62B264',
    'FF9800', 'D80300', '26A690';

// Color variables
$white: #ffffff;
$white-2: #ffffff66;
$white-3: #ffffff70;
$white-4: #ffffffb2;
$white-5: #ffffff20;
$white-6: #fbe9e9;
$white-7: #ffffff80;

$black: #000000;
$primary: #536bc2;
$primary-light: #7690be;
$secondary: #ea5d33;
$success: #18da35;
$info: #01b8ff;
$warning: #ffc107;
$danger: #f87566;
$muted: #919191;
$dark: #191919;
$dark-2: #91919133;
$dark-3: #91919166;
$dark-4: #91919120;
$light-blue: #5673aa;
$light-blue-2: #1ab5e6;
$light-blue-07: rgba(86, 115, 170, 0.71);
$gray: #f1f2f3;
$icons-bg: #3d3d3d;
$icons-avatar: #d8d8d8;
$progress-orange: #ffb35d;
$progress-danger: #ff5d5d;
$link-color: #889cc3;
$ceil-blue: #91a4c7;
$cerulean-frost: #778fbb;
$icons-bg-empty: #cfcfcf;
$settings-trash-red: #ff5050;

// App main colors
$app-main-blue: #28529f;
$app-main-gray: #606060;
$app-menu-border: #f1f2f5;

// Font variables main and fallback
$main-font: 'Montserrat';
$fallback-font: 'sans-serif';

// New Color Variables
$text-color: #656565;
// Transition variable
$transition: all 0.3s ease-in-out;
$transitionDuration: 0.3s ease-in-out;
$transitionDuration100: 100ms;
$transitionDuration200: 200ms;
$transitionDuration250: 250ms;
$transitionDuration300: 300ms;
$transitionDuration400: 400ms;
$transitionTimingFunction: cubic-bezier(0.46, 0.03, 0.51, 0.95);

//Scale size
$scaleSize: 1.1;

// Black&White pallete
$bw1: #f9f9f9;
$bw2: #eeeeee;
$bw3: #d1d1d1;
$bw4: #b7b7b7;
$bw5: #919191;
$bw6: #606060;
$bw6-2: #6c6c6c;
$bw6-3: #6c6c6c20;
$bw7: #3d3d3d;
$bw8: #dbdbdb;
$bw-9: #dadada;
$bw-10: #eeeeee00;
$bw-11: #a1887f;

//blue color
$bc1: #6d82c7;
// Box Shadow
$box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);

@mixin triangletop {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 6px solid $white;
    -webkit-filter: drop-shadow(0px -2px 1px rgba(0, 0, 0, 0.1));
    filter: drop-shadow(0px -2px 1px rgba(0, 0, 0, 0.1));
    position: absolute;
    top: -6px;
    left: calc(50% - 10px);
}

// chips pallete
$chip-0: #30c862;
$chip-0-20: #30c86220;
$chip-1: #ffad43;
$chip-1-20: #ffad4320;
$chip-2: #ff5d5d;
$chip-2-20: #ff5d5d20;

$input-color: #a7a7a7;

// table pallete
$row-hover: #dfdfdf;
$row-select: #7f7f7f;
$th-color: #b7b7b7;
$tb-border: #cfcfcf;
$th-start-date: #b93636;

$trash-icon-color: #ff5d5d;
$special-filter-green: #007a6e;
$special-filter-green-1: #26a69020;

$special-filter-purple: #9e47ec;
$special-filter-purple-1: #7919d0;
$special-filter-purple-2: #ab47bc;
$special-filter-purple-3: #ab47bc20;
$special-filter-orange: #ffa726;

// Applicant
$confirm: #24c1a1;
$ta-border-grey: #00000026;
$ta-light-grey: #e5e5e5;
$ta-light-grey-2: #aaaaaa;
$ta-light-grey-3: #3c3c3c;
$ta-light-grey-4: #f3f3f3;
$ta-light-grey-5: #f7f7f7;
$ta-light-grey-6: #cccccc;
$ta-light-grey-7: #fbfbfb;
$ta-light-grey-8: #cccccc40;
$ta-light-grey-9: #cccccc20;
$ta-light-grey-10: #aaaaaa20;
$ta-blue: #536bc2;
$ta-blue-2: #3551b7;
$ta-blue-3: #97a8dc;
$ta-blue-4: #bdcaeb;
$ta-blue-5: #3074d3;
$ta-blue-6: #3074d333;
$ta-blue-7: #6f9ee0;
$ta-blue-8: #98b9ea;
$ta-blue-9: #255bb9;
$ta-blue-10: #6f9ee033;
$ta-blue-11: #6f9ee066;
$ta-blue-12: #3074d366;
$ta-blue-13: #3b73ed;
$ta-blue-20: #6f9ee020;
$ta-blue-21: #3b73ed66;
$ta-blue-22: #6f9ee04d;
$ta-blue-23: #536bc220;
$ta-blue-24: #8785e8;
$ta-blue-25: #e0eaf8;
$ta-blue-26: #4dc5eb;
$ta-blue-27: #00179e;

// $ta-blue-14: #0B49D1;
$dark-blue-07: #5673aa70;
$ta-red: #e57373;
$ta-red-2: #ef5350;
$ta-red-3: #f44336;
$ta-red-4: #ef9a9a;
$ta-red-5: #ffcdd2;
$ta-red-6: #ef535033;
$ta-red-7: #e5737333;
$ta-red-8: #ef53504d;
$ta-red-9: #e5737366;
$ta-red-10: #e66767;
$ta-red-11: #df3c3c;
$ta-red-12: #f4433620;
$ta-red-13: #ed9292;
$ta-red-14: #c20c0c;
$ta-red-15: #f4bebe;
$ta-red-16: #df3c3c33;
$ta-red-17: #ff0000;
$ta-red-18: #e668a0;
$ta-red-19: #df3d85;
$ta-red-20: #df3c3c66;
$ta-red-21: #ffebee;
$ta-red-22: #e67374;
$ta-red-23: #ed93bb;
$ta-red-24: #8f0000;

$ta-review-green: #4db6a2;
$ta-review-green-2: #26a690;
$ta-review-green-3: #00967e;
$ta-black: #424242;
$ta-black-2: #2f2f2f;
$ta-black-3: #1d1d1d;
$ta-black-4: #42424220;
$ta-black-5: #0000001a;

// Authentication
$ta-blue: #536bc2;
$ta-light-blue: #6d82c7;
$ta-gray-01: #f3f3f3;
$ta-gray-02: #e5e5e5;

// Dashboard
$ta-blue-13: #6692f1;
$ta-blue-14: #3b73ed;
$ta-blue-15: #0b49d1;
$ta-blue-16: #e9effd;
$ta-blue-17: #bed0f9;
$ta-blue-18: #3b73ed;
$ta-blue-19: #92b1f5;
$ta-blue-20: #3b73ed33;

$ta-white-2: #ffffff1a;
$ta-white-3: #ffffffb3;
$ta-white-4: #ffffff33;
$ta-white-5: #f7f7f780;
$ta-white-6: #ffa72620;
$ta-white-7: #fff3e0;

$ta-yellow-1: #fab15c;
$ta-yellow-2: #de7700;
$ta-yellow-3: #fddeb9;
$ta-yellow-4: #fbc88b;
$ta-yellow-5: #f89b2e;
$ta-yellow-6: #cdb255;
$ta-yellow-7: #f89b2e33;
$ta-yellow-8: #daad4f;

// Cards
$ta-green: #56b4ac;
$ta-green-1: #50ac25;
$ta-green-2: #259f94;
$ta-green-3: #b6dfdb;
$ta-green-4: #86c9c3;
$ta-green-5: #259f9466;
$ta-green-6: #77bf56;
$ta-green-7: #259f9433;
$ta-green-8: #9ed186;

$ta-orange-1: #ff7043;
$ta-orange-2: #f77d3b;
$ta-orange-3: #ffb097;
$ta-orange-4: #ff906d;
$ta-orange-5: #a08266;
$ta-orange-6: #ffa72610;
$ta-orange-7: #ffcfc0;
$ta-orange-8: #ff704366;

$ta-purple-1: #b370f0;
$ta-purple-2: #c999f4;

// mixins
@mixin border($direction, $width: 1px, $style: solid, $color: $gray-300) {
    border-#{$direction}: $width $style $color;
}

@mixin downAnimation {
    animation: dropdown 0.3s;
}

@keyframes dropdown {
    0% {
        margin-top: 20px;
        visibility: hidden;
        opacity: 0;
    }
    100% {
        opacity: 1;
        margin-top: 10px;
        visibility: visible !important;
    }
}

@mixin AnimationUp {
    animation: dropup ease-out 0.15s;
}

@keyframes dropup {
    0% {
        margin-top: -19px;
        visibility: hidden;
        opacity: 0;
    }
    100% {
        margin-top: inherit;
        visibility: visible !important;
    }
}

//Color Variables

$white-2: #ffffff;
$white-3: #ebebeb;
$white-4: #ffffffb2;
$white-5: #dddddd;
$white-6: #f1f1f1;
$white-7: #ffffff20;
$white-8: #fbe9e9;
$ca-white: #f1f1f1;
$ca-white-2: #ffffff70;

$black: #424242;
$black-2: #2f2f2f;
$black-3: rgb(46, 45, 45);
$black-4: #ffffff38;
$black-5: #42424220;
$black-6: #aaaaaa10;
$black-7: #aaaaaa40;
$black-8: #aaaaaa20;
$black-9: #1d1d1d;
$black-10: rgb(108, 108, 108, 0.2);
$black-11: rgba(22, 9, 9, 0.2);
$black-12: rgb(66, 66, 66, 0.2);
$black-13: rgb(145, 145, 145, 0.2);
$black-14: #3b3b3b;

$grey: #919191;
$grey-2: #6c6c6c;
$grey-3: #aaaaaa;
$grey-4: #cccccc;
$grey-5: #91919120;
$grey-6: #ffffff66;
$grey-7: #cccccc33;
$grey-8: #91919133;
$grey-9: #b7b7b7;
$grey-10: rgb(218, 218, 218);
$grey-11: rgb(218, 218, 218, 0.2);
$grey-12: #eeeeee;
$grey-13: #f3f3f3;
$grey-14: rgb(47, 47, 47, 0.2);
$grey-button: #91919133;
$grey-15: rgba(145, 145, 145, 0.4);
$grey-16: #919191b3;
$grey-17: #6c6c6c66;
$grey-18: #9191911a;
$grey-19: #e2e2e2;
$grey-20: #c9c9c9;

$green: #4db6a240;
$green-2: #80cbba;
$green-3: #4db6a2;
$green-4: rgb(86, 180, 172);
$green-5: rgb(86, 180, 172, 0.2);
$green-6: #56b4ac;
$green-7: #259f94;
$green-8: rgba(37, 159, 148, 0.4);
$green-9: #e7f4f3;
$green-10: #97d568;
$green-11: #59a5a5;
$green-12: #008496;
$green-13: #56ab62;
$green-14: #81c784;
$green-15: #66bb6a;

$blue: #6f9ee040;
$blue-2: #98b9ea;
$blue-3: #6f9ee0;
$blue-4: #3074d3;
$blue-5: #6f9ee0;
$blue-6: rgb(102, 146, 241);
$blue-7: rgb(102, 146, 241, 0.2);
$blue-8: #6692f1;
$blue-9: #0b49d1;
$blue-10: #bed0f9;
$blue-11: #3b73ed;
$blue-12: rgba(59, 115, 237, 0.4);
$blue-13: #38bdeb;
$blue-14: #68c3ff;
$blue-15: #415fc1;
$blue-16: #546fd2;
$blue-17: #64b5f6;
$blue-18: #304fc1;
$blue-19: #5673aab3;
$blue-20: #42a5f5;
$blue-21: #3b73ed33;

$red: #e5737340;
$red-2: #ef9a9a;
$red-3: #e57373;
$red-4: #ef5350;
$red-5: rgb(230, 103, 103);
$red-6: rgb(230, 103, 103, 0.2);
$red-7: #e66767;
$red-8: #f4bebe;
$red-9: #df3c3c;
$red-10: rgba(223, 60, 60, 0.4);
$red-11: #d80300;
$red-12: #f96b69;
$red-13: #ff6666;
$red-14: rgb(239, 83, 80, 0.2);
$red: red;

$yellow: rgb(250, 177, 92);
$yellow-2: rgb(250, 177, 92, 0.2);
$yellow-3: #fab15c;
$yellow-4: #f89b2e;
$yellow-5: #ffb74d;
$yellow-6: #ff9800;
$yellow-7: #f76629;
$yellow-8: #bcad79;
$yellow-9: #ffd54f;
$yellow-10: #ffca28;
$yellow-11: #aa9c6e;
$yellow-12: #f89b2e66;

$orange: #ff8a65;

$purple: rgb(179, 112, 240);
$purple-2: rgb(179, 112, 240, 0.2);
$purple-3: #b370f0;
$purple-4: #9e47ec;
$purple-5: #f276ef;
$purple-6: #ba68c8;

$brown: #8d6e63;

$pink: #fd4d96;
$pink-2: #f26ec2;
$pink-3: #fa4daa;
// Box Shadow
$box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
$box-shadow-2: rgba(204, 204, 204, 0);
$box-shadow-3: 0 0 4px rgba(0, 0, 0, 0.15);
$box-shadow-4: 0 2px 10px rgba(0, 0, 0, 0.2);
$box-shadow-5: 0 0 3px 0 rgba(0, 0, 0, 0.2);

$gold-bold: #cf961d;
$gold-subtle: #e4c481;

$brown-bold: #865e3a;