.CookiePolicy {
    color: #fff;
    position: fixed;
    width: auto;
    bottom: 0;
    z-index: 999;
    display: none;
}

.CookiePolicy-Body {
    padding: 15px;
    border-radius: 6px;
    max-width: 320px;
    opacity: .98;
    background: #f9fafc;
    margin: 20px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 4px 4px rgb(0 0 0 / 10%), 0 0 0 1px rgb(0 0 0 / 8%);
    transform: translate3d(0, 0, 0);
    transition: all 0.75s, height 0s;
    transition-timing-function: cubic-bezier(0.25, 1.37, 0.44, 0.93);
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.CookiePolicyMessage {
    color: #303030;
}

    .CookiePolicyMessage i {
        font-size: 45px;
        color: #e1a404;
    }

.CookiePolicy-Body:hover .close {
    opacity: 0.2
}

.CookiePolicy-Body .close {
    padding: 14px;
    margin: 0px;
    position: absolute;
    border-radius: 40px;
    font-size: 0;
    top: 0;
    right: 0;
    cursor: pointer;
    transition: color 0.35s, background 0.15s;
    opacity: 0;
    z-index: 10
}

    .CookiePolicy-Body .close:after, .CookiePolicy-Body .close:before {
        content: "";
        width: 16px;
        height: 2px;
        background: #666;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        right: 6px;
        top: 13px;
        opacity: 1
    }

    .CookiePolicy-Body .close:hover, .CookiePolicy-Body .close:active {
        opacity: 1;
        transition: opacity 0.35s,-webkit-transform 0.35s cubic-bezier(0.35, 1.35, 0.5, 1);
        transition: opacity 0.35s,transform 0.35s cubic-bezier(0.35, 1.35, 0.5, 1);
        transition: opacity 0.35s,transform 0.35s cubic-bezier(0.35, 1.35, 0.5, 1),-webkit-transform 0.35s cubic-bezier(0.35, 1.35, 0.5, 1);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        color: #262626
    }

    .CookiePolicy-Body .close:active {
        opacity: 1
    }

    .CookiePolicy-Body .close:before {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }

.CookiePolicy-Body.hide {
    -webkit-transform: scale(.975);
    transform: scale(.975);
    opacity: 0 !important;
    transition: height 0s, opacity 0.5s, -webkit-transform 0.5s !important;
    transition: height 0s, opacity 0.5s, transform 0.5s !important;
    transition: height 0s, opacity 0.5s, transform 0.5s, -webkit-transform 0.5s !important
}

.CookiePolicyMessage span {
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
}

/*.cookie-btn-box {
    display: inline-block;
    position: relative;
    margin-top: 10px;
}*/

ul.flex.tinySpaces {
    margin-bottom: 0;
}

/*----*/

.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -2%;
    margin-right: -2%;
    padding-left: 0;
}

    .flex > [class*='col-'] {
        padding-left: 2%;
        padding-right: 2%;
    }

.passive {
    padding: 8px 12px !important;
    border-radius: 4px;
    color: #fff !important;
    /*background-color: #949ba9;*/
    background-color: #e97531;
}

    .passive a {
        color: #ffffff;
        text-decoration: none;
    }
    /*
	.passive.button-cookie:hover, .passive.button-cookie:focus {
		background-color: #788192;
	}*/

    .passive.button-cookie:hover, .passive.button-cookie:focus {
        background: linear-gradient(120deg,rgba(255,76,0,0) 0%,#e64400 100%);
        background-color: #ff7f00;
        box-shadow: 0 12px 12px -6px rgb(255 76 0 / 20%);
        -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
        transition: 300ms all cubic-bezier(.4,0,.2,1);
        -webkit-transform: translateY(-1px);
        transform: translateY(-1px);
    }

.button-cookie {
    border: 1px solid transparent;
    border-radius: 3px;
    min-width: 140px;
}

.CookiePolicy-AcceptAll-Button {
    border: 1px solid transparent;
    border-radius: 3px;
    position: relative;
    display: inline-block;
}
/*--- animate Cookie ---*/
.CookiePolicy {
    transition-delay: 0.1s;
    -webkit-animation: fadeInUp 0.75s cubic-bezier(0.25, 1.37, 0.44, 0.93);
    animation: fadeInUp 0.75s cubic-bezier(0.25, 1.37, 0.44, 0.93);
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}


.CookiePolicy-close {
    transition-delay: 0.1s;
    -webkit-animation: fadeOutDown 0.75s cubic-bezier(0.25, 1.37, 0.44, 0.93);
    animation: fadeOutDown 0.75s cubic-bezier(0.25, 1.37, 0.44, 0.93);
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }
}


.middle {
    vertical-align: middle
}

.align-middle {
    vertical-align: middle !important
}


input[type=checkbox].ace, input[type=radio].ace {
    opacity: 0;
    position: absolute;
    z-index: 1;
    width: 18px;
    height: 18px;
    cursor: pointer
}

label input[type=checkbox].ace, label input[type=radio].ace {
    z-index: -100 !important;
    width: 1px !important;
    height: 1px !important;
    clip: rect(1px,1px,1px,1px);
    position: absolute
}

input[type=checkbox].ace:checked, input[type=checkbox].ace:focus, input[type=radio].ace:checked, input[type=radio].ace:focus {
    outline: 0 !important
}

input[type=checkbox].ace + .lbl, input[type=radio].ace + .lbl {
    position: relative;
    display: inline-block;
    margin: 0;
    line-height: 20px;
    min-height: 18px;
    min-width: 18px;
    font-weight: 400;
    cursor: pointer
}

    input[type=checkbox].ace + .lbl::before, input[type=radio].ace + .lbl::before {
        cursor: pointer;
        font-family: fontAwesome;
        font-weight: 400;
        font-size: 12px;
        color: #FFF;
        content: "\a0";
        background-color: #FAFAFA;
        border: 1px solid #C8C8C8;
        box-shadow: 0 1px 2px rgba(0,0,0,.05);
        border-radius: 0;
        display: inline-block;
        text-align: center;
        height: 16px;
        line-height: 14px;
        min-width: 16px;
        margin-right: 1px;
        position: relative;
        top: -1px
    }

input[type=checkbox].ace:checked + .lbl::before, input[type=radio].ace:checked + .lbl::before {
    display: inline-block;
    content: '\f00c';
    color: #32A3CE;
    background-color: #F5F8FC;
    border-color: #ADB8C0;
    box-shadow: 0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05),inset 15px 10px -12px rgba(255,255,255,.1)
}

input[type=checkbox].ace + .lbl:hover::before, input[type=checkbox].ace:hover + .lbl::before, input[type=radio].ace + .lbl:hover::before, input[type=radio].ace:hover + .lbl::before {
    border-color: #FF893C
}

input[type=checkbox].ace:focus + .lbl::before, input[type=radio].ace:focus + .lbl::before {
    border-color: #F59942
}

input[type=checkbox].ace:active + .lbl::before, input[type=checkbox].ace:checked:active + .lbl::before, input[type=radio].ace:active + .lbl::before, input[type=radio].ace:checked:active + .lbl::before {
    box-shadow: 0 1px 2px rgba(0,0,0,.05),inset 0 1px 3px rgba(0,0,0,.1)
}

input[type=checkbox].ace.ace-checkbox-2 + .lbl::before, input[type=radio].ace.ace-checkbox-2 + .lbl::before {
    box-shadow: none
}

input[type=checkbox].ace.ace-checkbox-2:checked + .lbl::before, input[type=radio].ace.ace-checkbox-2:checked + .lbl::before {
    background-color: #F9A021;
    border-color: #F9A021;
    color: #FFF
}

input[type=checkbox].ace.disabled + .lbl::before, input[type=checkbox].ace:disabled + .lbl::before, input[type=checkbox].ace[disabled] + .lbl::before, input[type=radio].ace.disabled + .lbl::before, input[type=radio].ace:disabled + .lbl::before, input[type=radio].ace[disabled] + .lbl::before {
    background-color: #DDD !important;
    border-color: #CCC !important;
    box-shadow: none !important;
    color: #BBB
}

.checkbox label input[type=checkbox].ace + .lbl, .radio label input[type=radio].ace + .lbl {
    margin-left: -10px
}

input[type=radio].ace + .lbl::before {
    border-radius: 100%;
    font-size: 10px;
    font-family: FontAwesome;
    text-shadow: 0 0 1px #32A3CE;
    line-height: 15px;
    height: 17px;
    min-width: 17px
}

input[type=radio].ace:checked + .lbl::before {
    content: "\f111"
}

input[type=checkbox].ace.input-lg + .lbl::before {
    border-radius: 4px;
    font-size: 16px;
    height: 24px;
    line-height: 21px;
    min-width: 24px;
    top: auto
}

input[type=radio].ace.input-lg + .lbl::before {
    font-size: 14px;
    height: 24px;
    line-height: 22px;
    min-width: 24px;
    top: auto
}

input[type=checkbox].ace.ace-switch {
    width: 55px;
    height: 25px
}

    input[type=checkbox].ace.ace-switch + .lbl {
        margin: 0 4px;
        min-height: 24px;
    }

        input[type=checkbox].ace.ace-switch + .lbl::before {
            font-family: 'Open Sans';
            content: "ON\a0\a0\a0\a0\a0\a0\a0\a0\a0OFF";
            color: #999;
            text-shadow: 0 0 0 #999;
            font-weight: 400;
            font-size: 11px;
            line-height: 17px;
            height: 20px;
            overflow: hidden;
            border-radius: 12px;
            background-color: #F5F5F5;
            -webkit-box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.15);
            box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.15);
            border: 1px solid #CCC;
            text-align: left;
            float: left;
            padding: 0;
            width: 52px;
            text-indent: -21px;
            margin-right: 0;
            -webkit-transition: text-indent .25s ease;
            -o-transition: text-indent .25s ease;
            transition: text-indent .25s ease;
            top: auto
        }

        input[type=checkbox].ace.ace-switch + .lbl::after {
            font-family: 'Open Sans';
            content: 'III';
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0;
            color: #AAA;
            text-shadow: none;
            background-color: #FFF;
            border-radius: 100%;
            width: 22px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            position: absolute;
            top: -2px;
            left: -3px;
            -webkit-box-shadow: 0 1px 1px 1px rgba(0,0,0,.3);
            box-shadow: 0 1px 1px 1px rgba(0,0,0,.3);
            -webkit-transition: left .25s ease;
            -o-transition: left .25s ease;
            transition: left .25s ease
        }

    input[type=checkbox].ace.ace-switch:checked + .lbl::before {
        text-indent: 8px;
        color: #FFF;
        text-shadow: 0 0 0 #FFF;
        background-color: #8AB2C9;
        border-color: #6A8CA8
    }

    input[type=checkbox].ace.ace-switch:checked + .lbl::after {
        left: 34px;
        background-color: #FFF;
        color: #98A0A5
    }

    input[type=checkbox].ace.ace-switch.ace-switch-2 + .lbl::before {
        content: "YES\a0\a0\a0\a0\a0\a0\a0\a0\a0NO"
    }

    input[type=checkbox].ace.ace-switch.ace-switch-3 + .lbl::after {
        font-family: FontAwesome;
        font-size: 13px;
        line-height: 22px;
        content: "\f00d";
        top: -1px;
        text-shadow: none;
        padding: 0;
        text-align: center;
        color: #BBB;
        letter-spacing: 0
    }

    input[type=checkbox].ace.ace-switch.ace-switch-3:checked + .lbl::after {
        content: "\f00c";
        color: #8AB2C9;
        text-shadow: none
    }

    input[type=checkbox].ace.ace-switch.ace-switch-4, input[type=checkbox].ace.ace-switch.ace-switch-5 {
        width: 60px
    }

        input[type=checkbox].ace.ace-switch.ace-switch-4 + .lbl::before, input[type=checkbox].ace.ace-switch.ace-switch-5 + .lbl::before {
            content: "ON\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0OFF";
            font-size: 12px;
            line-height: 21px;
            height: 24px;
            overflow: hidden;
            border-radius: 12px;
            background-color: #8B9AA3;
            border: 1px solid #8B9AA3;
            color: #FFF;
            width: 56px;
            text-shadow: 0 0 0 #FFF;
            display: inline-block;
            position: relative;
            box-shadow: none;
            -webkit-transition: all .25s ease;
            -o-transition: all .25s ease;
            transition: all .25s ease
        }

        input[type=checkbox].ace.ace-switch.ace-switch-4 + .lbl::after, input[type=checkbox].ace.ace-switch.ace-switch-5 + .lbl::after {
            content: 'III';
            font-size: 11px;
            position: absolute;
            top: 2px;
            left: 2px;
            letter-spacing: 0;
            width: 20px;
            height: 20px;
            line-height: 19px;
            text-shadow: none !important;
            color: #939393;
            background-color: #FFF;
            -webkit-transition: all .25s ease;
            -o-transition: all .25s ease;
            transition: all .25s ease
        }

        input[type=checkbox].ace.ace-switch.ace-switch-4:checked + .lbl::before, input[type=checkbox].ace.ace-switch.ace-switch-5:checked + .lbl::before {
            background-color: #468FCC;
            border-color: #468FCC
        }

        input[type=checkbox].ace.ace-switch.ace-switch-4:checked + .lbl::after, input[type=checkbox].ace.ace-switch.ace-switch-5:checked + .lbl::after {
            left: 34px;
            background-color: #FFF;
            color: #848484
        }

        input[type=checkbox].ace.ace-switch.ace-switch-5 + .lbl::before {
            content: "YES\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0NO"
        }

        input[type=checkbox].ace.ace-switch.ace-switch-5:checked + .lbl::before {
            text-indent: 8px
        }

    input[type=checkbox].ace.ace-switch.ace-switch-6 + .lbl {
        position: relative
    }

        input[type=checkbox].ace.ace-switch.ace-switch-6 + .lbl::before {
            font-family: FontAwesome;
            content: "\f00d";
            text-shadow: 0 -1px 0 rgba(0,0,0,.25);
            box-shadow: none;
            border-width: 0;
            font-weight: lighter;
            font-size: 16px;
            border-radius: 12px;
            display: inline-block;
            background-color: #888;
            color: #F2F2F2;
            width: 52px;
            height: 22px;
            line-height: 21px;
            text-indent: 32px;
            -webkit-transition: background .25s ease;
            -o-transition: background .25s ease;
            transition: background .25s ease
        }

        input[type=checkbox].ace.ace-switch.ace-switch-6 + .lbl::after {
            content: '';
            text-shadow: 0 -1px 0 rgba(0,0,0,.25);
            position: absolute;
            top: 2px;
            left: 3px;
            border-radius: 12px;
            box-shadow: 0 -1px 0 rgba(0,0,0,.25);
            width: 18px;
            height: 18px;
            text-align: center;
            background-color: #F2F2F2;
            border: 4px solid #F2F2F2;
            -webkit-transition: left .25s ease;
            -o-transition: left .25s ease;
            transition: left .25s ease
        }

    input[type=checkbox].ace.ace-switch.ace-switch-6:checked + .lbl::before {
        content: "\f00c";
        text-indent: 6px;
        color: #FFF;
        border-color: #B7D3E5;
        background-color: #FF893C
    }

    input[type=checkbox].ace.ace-switch.ace-switch-6:checked + .lbl::after {
        left: 32px;
        background-color: #FFF;
        border: 4px solid #FFF;
        text-shadow: 0 -1px 0 rgba(0,200,0,.25)
    }

    input[type=checkbox].ace.ace-switch.ace-switch-7 {
        width: 75px
    }

        input[type=checkbox].ace.ace-switch.ace-switch-7 + .lbl {
            position: relative
        }

            input[type=checkbox].ace.ace-switch.ace-switch-7 + .lbl::before {
                content: "OFF\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0ON";
                font-weight: bolder;
                font-size: 13px;
                background-color: #FFF;
                border: 2px solid #AAA;
                border-radius: 0;
                box-shadow: none;
                color: #AAA;
                width: 74px;
                height: 26px;
                line-height: 22px;
                overflow: hidden;
                text-indent: 5px;
                display: inline-block;
                position: relative;
                -webkit-transition: all .25s ease;
                -o-transition: all .25s ease;
                transition: all .25s ease
            }

            input[type=checkbox].ace.ace-switch.ace-switch-7 + .lbl::after {
                content: '\f00d';
                font-family: FontAwesome;
                font-size: 16px;
                position: absolute;
                top: 3px;
                left: 39px;
                width: 32px;
                height: 20px;
                line-height: 18px;
                text-align: center;
                padding: 0;
                text-indent: 0;
                background-color: #AAA;
                color: #FFF;
                border-radius: 0;
                box-shadow: none;
                -webkit-transition: all .25s ease;
                -o-transition: all .25s ease;
                transition: all .25s ease
            }

        input[type=checkbox].ace.ace-switch.ace-switch-7:checked + .lbl::before {
            color: #468FCC;
            background-color: #FFF;
            text-indent: -28px;
            border-color: #6FB3E0
        }

        input[type=checkbox].ace.ace-switch.ace-switch-7:checked + .lbl::after {
            left: 3px;
            content: '\f00c';
            background-color: #468FCC;
            color: #FFF
        }

    input[type=checkbox].ace.ace-switch + .lbl[data-lbl]::before {
        content: attr(data-lbl)
    }

    input[type=checkbox].ace.ace-switch.btn-empty + .lbl::after {
        content: ""
    }

    input[type=checkbox].ace.ace-switch.btn-rotate + .lbl::after {
        content: "\2261";
        line-height: 20px;
        font-size: 17px
    }
.Cookie-Content {
    text-indent: 2em;
}

.CookiePolicy-Setting.passive {
    background-color: #5082c7;
}

    .CookiePolicy-Setting.passive.button-cookie:hover,
    .CookiePolicy-Setting.passive.button-cookie:focus {
        background: linear-gradient(120deg,rgba(255,76,0,0) 0%,#0055ca 100%);
        background-color: #5082c7;
        box-shadow: 0 12px 12px -6px rgb(80 130 199 / 20%);
        -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
        transition: 300ms all cubic-bezier(.4,0,.2,1);
        -webkit-transform: translateY(-1px);
        transform: translateY(-1px);
    }

/*style-cookieCubic*/
.Cookie-cubic .CookiePolicyMessage span {
    display: inline-block;
    line-height: 1.55;
}

.Cookie-cubic .CookiePolicyMessage i {
    float: left;
    margin-right: 10px;
}

.CookiePolicyMessage span a {
    display: contents;
    color: #1863c1;
}

/*style-cookieBar*/
.Cookie-bar .CookiePolicyMessage span {
    display: inline-flex;
}

@media screen and (min-width:768px) {
    .Cookie-bar .button-cookie {
        margin: 0 5px 0 5px;
    }
}

/*Cookie แบบยาว*/
.Cookie-bar {
    width: 100%;
}

    .Cookie-bar .CookiePolicy-Body {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: inherit;
        /*width:98%; */
    }

.Cookie-bar .CookiePolicyMessage {
    display: block;
}

.Cookie-bar .CookiePolicy-Body {
    /*max-width: 330px;*/
}

@media screen and (min-width:481px) {
    .Cookie-bar .CookiePolicy-Body {
        max-width: inherit;
    }

    .Cookie-bar .CookiePolicyMessage {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        padding-left: 15px;
        padding-right: 15px;
    }

        .Cookie-bar .CookiePolicyMessage span {
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .Cookie-bar .CookiePolicyMessage i {
            margin-right: 10px;
        }

    /*.Cookie-bar .cookie-btn-box {
        margin-top: 0;
        margin-right: 15px;
        margin-left: 15px;
    }*/
}

/*#ModalCustomeCookies .modal-dialog {
    height: 90vh !important;
    display: flex;
}*/

#ModalCustomeCookies .modal-content {
    margin: auto !important;
    height: fit-content !important;
}
@media screen and (max-width:820px) {
    .CookiePolicy-Body .close {
        opacity: 1;
    }
}