@import url("/OutSystemsUIWeb/Theme.BaseTheme.css?128");

/* ================================================

Primary color customization
For additional color customizations, you can change the color code for the colors below

  ================================================ */
  
:root {
    --color-primary: #01708c; /*primary-color*/
    --color-primary-hover: #01708c; /*primary-color*/
    --color-secondary: #01708c; /*primary-color*/
}

/* ================================================

Primary color customization
For additional color customizations, you can change the color code for the colors below

  ================================================ */


@import "/Kinto_Th/hamburgers.css";

@font-face {    
    font-family: 'WINGDNG2';
    src: url('/Kinto_Th/WINGDNG2.TTF') format('truetype');
    font-weight: normal;    
    font-style: normal;
}


@font-face {    
    font-family: 'WINGDNG2';
    src: url('/Kinto_Th/WINGDNG2.TTF') format('truetype');
    font-weight: normal;    
    font-style: normal;
}

@font-face {
  font-family: 'ToyotaType';
  src: url('/Kinto_Th/ToyotaType-BlackIt.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: 'ToyotaType';
  src: url('/Kinto_Th/ToyotaType-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}


@font-face {
  font-family: 'ToyotaType';
  src: url('/Kinto_Th/ToyotaType-BoldIt.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: 'ToyotaType';
  src: url('/Kinto_Th/ToyotaType-Bold.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}


@font-face {
  font-family: 'ToyotaType';
  src: url('/Kinto_Th/ToyotaType-BoldIt.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'ToyotaType';
  src: url('/Kinto_Th/ToyotaType-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}


@font-face {
  font-family: 'ToyotaType';
  src: url('/Kinto_Th/ToyotaType-Italic.ttf') format('truetype');
  font-weight:  400;
  font-style: italic;
}
@font-face {
  font-family: 'ToyotaType';
  src: url('/Kinto_Th/ToyotaType-Regular.ttf') format('truetype');
  font-weight:  400;
  font-style: normal;
}



@font-face {
  font-family: 'ToyotaType';
  src: url('/Kinto_Th/ToyotaType-LightIt.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'ToyotaType';
  src: url('/Kinto_Th/ToyotaType-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'ToyotaType';
  src: url('/Kinto_Th/ToyotaType-SemiboldIt.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: 'ToyotaType';
  src: url('/Kinto_Th/ToyotaType-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}





@font-face {
  font-family: 'DB_Heavent';
  src: url('/Kinto_Th/DBHeavent-Blk.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;

}

@font-face {
  font-family: 'DB_Heavent';
  src: url('/Kinto_Th/DBHeavent-Blk-It.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: 'DB_Heavent';
  src: url('/Kinto_Th/DBHeavent-Bd.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'DB_Heavent';
  src: url('/Kinto_Th/DBHeavent-Bd-It.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'DB_Heavent';
  src: url('/Kinto_Th/DBHeavent-Med.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'DB_Heavent';
  src: url('/Kinto_Th/DBHeavent Med-It.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'DB_Heavent';
  src: url('/Kinto_Th/DBHeavent.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'DB_Heavent';
  src: url('/Kinto_Th/DBHeavent-It.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'DB_Heavent';
  src: url('/Kinto_Th/DBHeavent-Li.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'DB_Heavent';
  src: url('/Kinto_Th/DBHeavent-Li-It.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'DB_Heavent MED';
  src: url('/Kinto_Th/DBHeavent-Med.ttf') format('truetype');
}


a{
    color: inherit!important;
}



body{
 font-family: 'ToyotaType','DB_Heavent';
}


.clearfix:before, .clearfix:after{
    content: ' ';
    display: table;
}

.container_main_wrapper {
    max-width: 1120px;
    height: 100%;
    margin: auto;
}

.container_main_padding {
    padding: 0 20px;
}

.btn-second{
    text-align: center;
    line-height: 35px;
    border-style: solid;
    border-width: 2px;
    border-color: #00708C;
    font-weight: bold;
    background-color: white;
    color: #00708C;
    cursor: pointer;
}
.btn-submit{
    height: 40px;
    text-align: center;
    line-height: 35px;
    border-style: solid;
    font-weight: bold;
    border-style: solid;
    border-width: 2px;
    border-color: #00708C;
    border-width: 2px;
    background-color: #00708C;
    color: white;
    cursor: pointer;
}



.section-row-btn-page {
    margin: 0 7px;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 30px;
}
.section-row-btn-page .btn-submit,
.section-row-btn-page .btn-second{
    max-width: 270px;
    margin: auto;
    margin-bottom: 14px;
    width: 100%;
}

.kinto-first-title{
    font-weight: bold;
    font-size: 30px;
    line-height: 36px;
}
.kinto-second-title{
    font-size: 20px;
    font-weight: bold;
}


.choices__list--single .choices__item {
    color: var(--color-neutral-10);
    overflow: hidden;
    padding-right: var(--space-base);
    padding-top: var(--space-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 99%;
}

@media only screen and (min-width: 768px) {
    .section-row-btn-page .btn-submit,
    .section-row .btn-second{
        display: inline-block;
        margin: 5px 15px;
    }
    .kinto-first-title{
        font-weight: bold;
        font-size: 32px;
        line-height: 36px;
    }


}
@media only screen and (min-width: 1024px) {
    .section-row-btn-page .btn-submit,
    .section-row .btn-second{
        display: inline-block;
        margin: 5px 15px;
    }
    .section-row .btn-second{
        display: inline-block;
        margin: 5px 15px;
    }
    .kinto-first-title{
        font-weight: bold;
        font-size: 34px;
        line-height: 36px;
    }
    .kinto-second-title{
        font-size: 22px;
        font-weight: bold;
    }

}


.header_language{
    background: #00708C;
    height: 0px;
    color: white;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 3px;
}

.header_language .statust_racking_btn{
    margin: 0 34px;
    letter-spacing: 1px;
    font-weight: bold;
    cursor: pointer;
    line-height: 30px;
    text-transform: uppercase;
}
.header_language .header_main{
    height: 100%;
    display: none;
}
.header_language .header_main > div{
    width:auto;
    height: 100%;
    display: flex;
    align-items: center;
}

.header_language .header_main > div:first-child{
     flex:1;
}

.header_language .header_main .social-item{
    width: 16px;
    height: 16px;
    margin-right: 20px;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center top;
    cursor: pointer;
}


.navbar{
    background-color: white;
    box-shadow: 0px 2px 90px rgba(0, 0, 0, 0.03);
    z-index: 1;
    position: relative;
}
.navbar .hamburger {
    padding: 10px 10px;
}

.navbar .hamburger-inner,.navbar .hamburger-inner::before,.navbar .hamburger-inner::after{
    width: 25px;
    height: 3px;
}

.navbar .hamburger--slider .hamburger-inner::before {
    top: 8px;
}
.navbar .hamburger--slider .hamburger-inner::after {
    top: 16px;
}

.navbar .hamburger-box {
    width: 25px;
    height: 19px;
}

.navbar .hamburger--slider.is-active .hamburger-inner::after {
    transform: translate3d(0, -16px, 0) rotate(-90deg);
}

.navbar .tap_menu{
    display: flex;
    height: 85px;
    background-color: white;
    align-items: center;
}
.navbar .btn_menu_mobile_panel{
    display: flex;
    width: 30%;
    
}

.navbar .btn_menu_mobile_panel{
    padding-left: 4%;
    
}
.navbar .user_panel{
     padding-right: 4%;
     width: 30%;
    
}
.navbar .user_panel_mobile{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.navbar .user_control_panel{
    display: none;
}


.navbar .logo_panel{
    flex:1;
}

.navbar .user_panel{
    display: flex;
    align-items: center;
    justify-content: flex-end;

}
.navbar .language{
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    padding: 0px 5px;
}
.navbar .border_line{
    width: 2px;
    height: 23px;
    background-color: #979797;
}

.navbar .user{
    width: 20px;
    text-align: center;
    margin: 10px;
    display: flex;
}

.navbar .image_panel{
    max-width: 139px;
    margin: auto;
}


.navbar .menu_panel .menu_item {
    padding: 5px 14px;
    border-radius: 20px;
    margin: 0 1px;
    letter-spacing: 3px;
    font-weight: bold;
    cursor: pointer;
    line-height: 30px;
    text-transform: uppercase;
}

.navbar .menu_panel{
    display: flex;
    justify-content: center;
    display: none;
}

.navbar .menu_list{
     display: flex;
}

.navbar .menu_panel .menu_item.is_active,.navbar .menu_panel .menu_item:hover {
    background-color: #00708C;
    color: white!important;
}



.navbar .menu_user_item{
    padding: 3px 10px;
    border-radius: 22px;
    margin: 0 1px;
    letter-spacing: 3px;
    font-weight: bold;
    cursor: pointer;
    line-height: 30px;
    border: 2px solid #007292;
    position: relative; 
    
}

.navbar .menu_user_item .user-img{
    width: 13px;
    margin: 0px 8px;
    vertical-align: text-bottom;
}
.navbar .menu_user_item .user-email{
    letter-spacing: 0;
}

.navbar .menu_user_item .user-menu{
    width: 200px;
    position: absolute;
    top: 35px;
    z-index: 100;
    padding-top: 11px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}
.navbar .menu_user_item:hover .user-menu {
    display: block;
}
.navbar .menu_user_item .user-menu::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-left: -5px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #a7a7a7 transparent;
}
.navbar .menu_user_item .user-menu .list-menu {
    overflow: hidden;
    border-radius: 8px;
}
.navbar .menu_user_item .user-menu .item {
    background: #a7a7a7;
    padding: 4px 15px;
    color: white;
    font-weight: 400;
    letter-spacing: 0;
}
.navbar .menu_user_item .user-menu .item:hover {
    background: #00708c;
}
.Menu_TopMenuActive > div a, .Menu_TopMenuActive > div a:visited, .Menu_TopMenuActive > div a:hover, .Menu_TopMenu:hover.Menu_TopMenuActive > div a{
    font-weight: bold !important;
}
 .navbar .user_panel {
        padding-right: 2%;
        width: 23%;
    }
@media only screen and (min-width: 1024px) {
    .header_language{
        height: 40px;   
    }
    .header_language .header_main{
        display: flex;
        height: 100%;
    }
    .navbar .btn_menu_mobile_panel {
        display: none;
    }
    .navbar .logo_panel {
        flex:unset;
        width: 16%;
    }
    .navbar .image_panel {
        margin: unset;
    }
    .navbar .menu_panel{
        display: flex;
        flex:1;
    }
    .navbar .user_panel {
        padding-right: 2%;
        width: 35%;
    }
    
    .navbar .user_control_panel{
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    
    .navbar .user_panel_mobile{
        display: none;
    }
    .navbar .menu_user_item .user-img{
        width: 14px;
        margin: 2px 8px;
    }  
}


/* $4.1.1 - Patterns - Content - Accordion */
.accordion {
    background-color: var(--color-neutral-0);
}

.accordion-item {
    border: var(--border-size-s) solid var(--color-neutral-4);
    border-bottom-width: var(--border-size-none);
}

.accordion-item:first-child {
    border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
}

.accordion-item:last-child {
    border-bottom-width: var(--border-size-s);
    border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft);
}

.accordion-item.is--open {
    border-top: var(--border-size-m) solid var(--color-primary);
}

.accordion-item .accordion-item-header {
    -webkit-box-align: start;
       -ms-flex-align: start;
          align-items: flex-start;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: var(--font-size-h6);
    padding: var(--space-m);
}

.accordion-item.is--open .accordion-item-header {
    font-weight: var(--font-semi-bold);
}

.accordion-item .accordion-item-title {
    width: 100%;
}

.accordion-item .accordion-item-icon {
    color: var(--color-primary);
    -webkit-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
}

.accordion-item .accordion-item-icon .fa {
    font-size: 24px;
    width: auto;
}

.accordion-item.is--open .accordion-item-icon {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.accordion-item.is--disabled {
    color: var(--color-neutral-7);
    pointer-events: none;
}

.accordion-item.is--disabled .accordion-item-icon {
    color: var(--color-neutral-6);
}

.accordion-item .accordion-item-content {
    display: block;
    overflow: hidden;
}

.accordion-item .accordion-item-content,
.accordion-item .accordion-item-content.is--collapsed {
    height: 0;
    padding: var(--space-none) var(--space-m);
    visibility: hidden;
}

.accordion-item .accordion-item-content.is--expanded {
    height: auto;
    padding: var(--space-none) var(--space-m) var(--space-m);
    visibility: visible;
}

.accordion-item .accordion-item-content.is--animating {
    -webkit-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
}

.Form label.MandatoryLabel:after {
    content: "*";
    color: #BF1601;
    position: absolute;
    padding: 0px 5px 5px 3px;
    font-size: 12px;
    font-weight: normal;
}

.Form input.ReadOnly:not(.Not_Valid),
.Form textarea.ReadOnly:not(.Not_Valid),
.Form select.ReadOnly:not(.Not_Valid) {
     border-color: transparent;
 }

.input, 
textarea.input, 
.select {   
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-5);
    color: var(--color-neutral-9);
    font-size: var(--font-size-s);
    height: 40px;
    padding: var(--space-none) var(--space-base); 
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
}

.Form input.ReadOnly, .Form textarea.ReadOnly, .Form select.ReadOnly {
    font-size: var(--font-size-s);
}

.choices__inner {
    font-size: 14px;
    font-weight: 400;
}

.choices__list--multiple .choices__item {
    align-items: center;
    background-color: var(--color-neutral-3);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-3);
    color: var(--color-neutral-9);
    display: inline-flex;
    font-size: var(--font-size-xs);
    font-weight: var(--font-semi-bold);
    height: 32px;
    margin-top: var(--space-xs);
    margin-left: var(--space-xs); 
    padding: var(--space-xs) var(--space-s);
    vertical-align: middle;
    word-break: break-all;  
}

.ValidationMessage {
    color: var(--color-error);
    display: block;
    font-size: var(--font-size-xs);
    margin-top: var(--space-xs);
}