/*tracking widget css*/

.ticket_widget_container {
    background-color: #ffffff;
}

.ticket_widget_tabcontent {
    margin-top: 20px;
}

.tracking_div {
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #dcdcdc;
}

.code_icon {
    height: 35px;
    width: 35px;
    background: #181d22;
    border-radius: 5px;
    line-height: 30px;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
}

    .code_icon svg {
        stroke: #ffffff;
    }

.widget_code_header {
    background-color: #384551;
    padding: 10px;
    color: #ffffff;
}

.copy_code_btn {
    background-color: #f1f1f1;
    float: right;
}

    .copy_code_btn svg {
        stroke: #474747;
    }

.widget_code_body {
    background-color: #27313a;
    color: #f1f1f1;
    padding: 20px 30px;
}


    .widget_code_body button {
        background-color: transparent;
        outline: none;
        color: #ffffff;
        border: 0;
        text-align: left;
    }

.widget_header {
    padding: 30px;
    border: 1px solid #dcdcdc;
    background: linear-gradient(41.43deg, rgb(207, 0, 0) 0%, rgb(247, 150, 5) 100%) 0% 0% / contain;
    position: relative;
    padding-bottom: 100px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    color: #ffffff;
}

    .widget_header h3 {
        color: #ffffff;
    }

.widget_header_pattern:before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.8;
    background: url("../images/pattern6.png") 0% 0% / contain;
    transition: all 0.5s ease 0s;
}

.widget_pattern1:before {
    background: url("../images/pattern1.png") 0% 0% / contain;
}

.widget_pattern2:before {
    background: url("../images/pattern2.png") 0% 0% / contain;
}

.widget_pattern3:before {
    background: url("../images/pattern3.png") 0% 0% / contain;
}

.widget_pattern4:before {
    background: url("../images/pattern4.png") 0% 0% / contain;
}

.widget_pattern5:before {
    background: url("../images/pattern5.png") 0% 0% / contain;
}
.widget_pattern6:before {
    background: url("../images/pattern6.png") 0% 0% / contain;
}

.widget_preview {
    background-color: #ffffff;
}

.widget_body {
    padding: 10px 20px;
}

.widget_contactform_wrapper {
    margin-top: -50px;
    position: relative;
    background-color: #ffffff;
    padding: 20px 15px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.form_type, .form_datatype {
    padding: 20px 20px;
    border: 1px solid #f1f1f1;
    background: #f9f9f9;
    margin-bottom: 10px;
    position: relative;
}

.form_datatypes {
    display: none;
}

.form_datatype {
    padding-left: 80px;
    cursor: pointer;
}

.form_type h5 {
    font-weight: 400;
    opacity: 0.8;
}

.form_datatype svg {
    width: 50px;
    height: 50px;
    stroke: #0a5a94;
    stroke-width: 1px;
    fill: #e4f2fd;
    margin-bottom: 10px;
}

.form_datatype:hover {
    box-shadow: 1px 1px 10px #dcdcdc;
}

.form_datatypes_icon {
    position: absolute;
    left: 10px;
    top: 30%;
}


.form_type:hover {
    border-color: #9ebfd7;
    cursor: pointer;
    background-color: rgba(3, 134, 229, 0.1);
}

.form_type .form_image {
    margin-top: 10px;
    margin-bottom: 10px;
}

.form_support, .form_contact, .form_registration {
    display: none;
}

.form_active {
    background-color: #e4f2fd;
    border: 1px solid #9ebfd7;
}

.color_code_box, .pattern_block {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    display: inline-block;
    cursor: pointer;
    border: 1px solid #f1f1f1;
}

.color_code1 {
    background: linear-gradient(41.43deg,#cf0000 0,#f79605 100%);
}

.color_code2 {
    background: linear-gradient(205.05deg,#2e6ed8 0,#6a11cb 100%);
}

.color_code3 {
    background: linear-gradient(207.93deg,#e43538 0,#ad0017 100%);
}

.color_code4 {
    background: linear-gradient(214.85deg,#00a886 0,#006c9f 100%);
}

.color_code5 {
    background: linear-gradient(218.44deg,#813dda 0,#9b0694 100%);
}
.color_code6 {
    background: linear-gradient(218.44deg,white 0,white 100%);
}

.banner_color_codes {
    padding: 20px 0;
}

    .banner_color_codes .col-sm-2, .pattern_box .col-sm-2 {
        flex: 0 0 11%;
    }

.pattern1 {
    background: url("../images/pattern1.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.pattern2 {
    background: url("../images/pattern2.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.pattern3 {
    background: url("../images/pattern3.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.pattern4 {
    background: url("../images/pattern4.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.pattern5 {
    background: url("../images/pattern5.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.color_picker_button .pickr {
    width: 50px;
    height: 45px;
    padding: 5px;
}

.text_color {
    width: 48px;
    height: 45px;
    display: inline-block;
    margin-right: 10px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    position: relative;
}

    .text_color.color_active:after {
        top: -6px;
        left: -5px;
    }

.color_black {
    background: #000000;
}

.color_white {
    background: #ffffff;
}


.color_code_box:hover, .pattern_block:hover,
.text_color:hover {
    cursor: pointer;
    box-shadow: 2px 2px 10px #dcdcdc;
    border-color: #9ebfd7;
}

.color_active:after {
    content: '\2713';
    color: #0386e5;
    position: absolute;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: #ffffff;
    text-align: center;
    font-weight: bold;
    top: -2px;
    left: 3px;
    border: 1px solid #0386e5;
    line-height: 14px;
}